From 87484331f805f583c98226c5a8c6b1ec5fc88925 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 13 May 2025 13:37:54 -0400 Subject: fixed setting up link anchors for video to be added to Doc. fixed imageTemplate to work with templates in tabs. fixed link following from link menu. cleaned up getView with sidebars to open them when needed properly.. --- src/client/views/nodes/MapBox/MapBox.tsx | 59 ++++++++++---------------------- 1 file changed, 19 insertions(+), 40 deletions(-) (limited to 'src/client/views/nodes/MapBox') diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index a563b7c1b..a279ccc48 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -13,7 +13,7 @@ import { CirclePicker, ColorResult } from 'react-color'; import { Layer, MapProvider, MapRef, Map as MapboxMap, Marker, Source, ViewState, ViewStateChangeEvent } from 'react-map-gl/mapbox'; import { ClientUtils, setupMoveUpEvents } from '../../../../ClientUtils'; import { emptyFunction } from '../../../../Utils'; -import { Doc, DocListCast, Field, LinkedTo, Opt, StrListCast } from '../../../../fields/Doc'; +import { Doc, DocListCast, Field, LinkedTo, StrListCast } from '../../../../fields/Doc'; import { List } from '../../../../fields/List'; import { RichTextField } from '../../../../fields/RichTextField'; import { DocCast, NumCast, StrCast, toList } from '../../../../fields/Types'; @@ -111,12 +111,12 @@ export class MapBox extends ViewBoxAnnotatableComponent() { // this list contains pushpins and configs @computed get allAnnotations() { return DocListCast(this.dataDoc[this.annotationKey]); } // prettier-ignore - @computed get allSidebarDocs() { return DocListCast(this.dataDoc[this.SidebarKey]); } // prettier-ignore + @computed get allSidebarDocs() { return DocListCast(this.dataDoc[this.sidebarKey]); } // prettier-ignore @computed get allPushpins() { return this.allAnnotations.filter(anno => anno.type === DocumentType.PUSHPIN); } // prettier-ignore @computed get allRoutes() { return this.allAnnotations.filter(anno => anno.type === DocumentType.MAPROUTE); } // prettier-ignore @computed get SidebarShown() { return !!this.layoutDoc._layout_showSidebar; } // prettier-ignore @computed get sidebarWidthPercent() { return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%'); } // prettier-ignore - @computed get SidebarKey() { return this.fieldKey + '_sidebar'; } // prettier-ignore + @computed get sidebarKey() { return this.fieldKey + '_sidebar'; } // prettier-ignore @computed get sidebarColor() { return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this._props.fieldKey + '_backgroundColor'], '#e4e4e4')); } @@ -260,7 +260,7 @@ export class MapBox extends ViewBoxAnnotatableComponent() { removeMapDocument = (doc: Doc | Doc[], annotationKey?: string) => { this.allAnnotations - .filter(anno => toList(doc).includes(DocCast(anno.mapPin))) + .filter(anno => toList(doc).includes(DocCast(anno.mapPin)!)) .forEach(anno => { anno.mapPin = undefined; }); @@ -339,27 +339,19 @@ export class MapBox extends ViewBoxAnnotatableComponent() { startAnchorDrag = (e: PointerEvent, ele: HTMLElement) => { e.preventDefault(); e.stopPropagation(); - - const sourceAnchorCreator = action(() => { - const note = this.getAnchor(true); - if (note && this._selectedPinOrRoute) { - note.latitude = this._selectedPinOrRoute.latitude; - note.longitude = this._selectedPinOrRoute.longitude; - note.map = this._selectedPinOrRoute.map; - } - return note as Doc; - }); - const targetCreator = (annotationOn: Doc | undefined) => { const target = DocUtils.GetNewTextDoc('Note linked to ' + this.Document.title, 0, 0, 100, 100, annotationOn, 'yellow'); + target.layout_fitWidth = true; DocumentView.SetSelectOnLoad(target); return target; }; + + const sourceAnchorCreator = () => this.getAnchor(true); const docView = this.DocumentView?.(); docView && DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(docView, sourceAnchorCreator, targetCreator), e.pageX, e.pageY, { dragComplete: dragEv => { - if (!dragEv.aborted && dragEv.annoDragData && dragEv.annoDragData.linkSourceDoc && dragEv.annoDragData.dropDocument && dragEv.linkDocument) { + if (!dragEv.aborted && dragEv.annoDragData?.linkSourceDoc && dragEv.annoDragData.dropDocument && dragEv.linkDocument) { dragEv.annoDragData.linkSourceDoc.followLinkToggle = dragEv.annoDragData.dropDocument.annotationOn === this.Document; dragEv.annoDragData.linkSourceDoc.followLinkZoom = false; } @@ -368,17 +360,7 @@ export class MapBox extends ViewBoxAnnotatableComponent() { }; createNoteAnnotation = () => { - const createFunc = undoable( - action(() => { - const note = this._sidebarRef.current?.anchorMenuClick(this.getAnchor(true), ['latitude', 'longitude', LinkedTo]); - if (note && this._selectedPinOrRoute) { - note.latitude = this._selectedPinOrRoute.latitude; - note.longitude = this._selectedPinOrRoute.longitude; - note.map = this._selectedPinOrRoute.map; - } - }), - 'create note annotation' - ); + const createFunc = undoable(() => this._sidebarRef.current?.anchorMenuClick(this.getAnchor(true), ['latitude', 'longitude', LinkedTo]), 'create note annotation'); if (!this.layoutDoc.layout_showSidebar) { this.toggleSidebar(); setTimeout(createFunc); @@ -428,14 +410,11 @@ export class MapBox extends ViewBoxAnnotatableComponent() { } }; - getView = (doc: Doc, options: FocusViewOptions) => { - if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) { - this.toggleSidebar(); - options.didMove = true; + getView = async (doc: Doc, options: FocusViewOptions) => { + if (DocListCast(this.dataDoc[this.sidebarKey]).find(anno => Doc.AreProtosEqual(doc.layout_unrendered ? DocCast(doc.annotationOn) : doc, anno))) { + SidebarAnnos.getView(this._sidebarRef.current, this.SidebarShown, this.toggleSidebar, doc, options); } - return new Promise>(res => { - DocumentView.addViewRenderedCb(doc, dv => res(dv)); - }); + return undefined; }; /* @@ -476,13 +455,14 @@ export class MapBox extends ViewBoxAnnotatableComponent() { @action deleteSelectedPinOrRoute = undoable(() => { - if (this._selectedPinOrRoute) { + const selPin = DocCast(this._selectedPinOrRoute); + if (selPin) { // Removes filter - Doc.setDocFilter(this.Document, 'latitude', NumCast(this._selectedPinOrRoute.latitude), 'remove'); - Doc.setDocFilter(this.Document, 'longitude', NumCast(this._selectedPinOrRoute.longitude), 'remove'); - Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(DocCast(this._selectedPinOrRoute))}`, 'remove'); + Doc.setDocFilter(this.Document, 'latitude', NumCast(selPin.latitude), 'remove'); + Doc.setDocFilter(this.Document, 'longitude', NumCast(selPin.longitude), 'remove'); + Doc.setDocFilter(this.Document, LinkedTo, `mapPin=${Field.toScriptString(selPin)}`, 'remove'); - this.removePushpinOrRoute(this._selectedPinOrRoute); + this.removePushpinOrRoute(selPin); } MapAnchorMenu.Instance.fadeOut(true); document.removeEventListener('pointerdown', this.tryHideMapAnchorMenu, true); @@ -1299,7 +1279,6 @@ export class MapBox extends ViewBoxAnnotatableComponent() { Date: Fri, 13 Jun 2025 09:00:49 -0400 Subject: updated css and project to HTML5 standards. fixed border rounding for images. --- .eslintrc.json | 11 +- .stylelintrc.json | 15 +++ deploy/index.html | 1 + package-lock.json | 66 +++++++++ package.json | 5 +- .../components/src/components/Button/Button.scss | 10 +- .../src/components/Button/Button.stories.tsx | 149 +++++++++++---------- .../src/components/Dropdown/Dropdown.scss | 4 +- .../src/components/EditableText/EditableText.scss | 10 +- .../src/components/FormInput/FormInput.scss | 2 +- .../components/src/components/Overlay/Overlay.scss | 6 +- .../src/components/Toggle/Toggle.stories.tsx | 54 ++++---- .../components/src/global/globalCssVariables.scss | 2 +- src/client/util/BranchingTrailManager.tsx | 3 - src/client/util/CaptureManager.scss | 6 +- src/client/util/CurrentUserUtils.ts | 4 +- src/client/util/GroupManager.scss | 19 ++- src/client/util/GroupMemberView.scss | 20 ++- src/client/util/LinkFollower.ts | 2 +- src/client/util/PingManager.ts | 2 +- src/client/util/SettingsManager.scss | 30 ++--- src/client/util/SharingManager.scss | 51 ++++--- src/client/util/TrackMovements.ts | 2 - src/client/util/clamp.js | 24 ++-- src/client/util/convertToCSSPTValue.js | 9 +- src/client/util/reportManager/ReportManager.scss | 30 ++--- src/client/util/reportManager/ReportManager.tsx | 2 - src/client/views/ContextMenu.scss | 12 +- src/client/views/DashboardView.scss | 8 +- src/client/views/DocumentDecorations.scss | 32 ++--- src/client/views/DocumentDecorations.tsx | 4 +- src/client/views/EditableView.scss | 9 +- src/client/views/FilterPanel.scss | 54 +++----- src/client/views/GestureOverlay.scss | 2 +- src/client/views/InkStroke.scss | 4 +- src/client/views/InkTangentHandles.tsx | 2 - src/client/views/LightboxView.scss | 48 +++---- src/client/views/Main.scss | 6 +- src/client/views/MainView.scss | 40 +++--- src/client/views/MainView.tsx | 2 +- src/client/views/MetadataEntryMenu.scss | 20 +-- src/client/views/OverlayView.scss | 12 +- src/client/views/PreviewCursor.scss | 4 +- src/client/views/PropertiesSection.tsx | 1 - src/client/views/PropertiesView.scss | 50 +++---- src/client/views/SidebarAnnos.scss | 12 +- src/client/views/StyleProvider.scss | 22 +-- src/client/views/StyleProviderQuiz.scss | 8 +- src/client/views/animationtimeline/Timeline.scss | 4 +- .../views/animationtimeline/TimelineMenu.tsx | 4 +- .../views/animationtimeline/TimelineOverview.tsx | 5 +- .../views/collections/CollectionCardDeckView.scss | 4 +- .../collections/CollectionCarousel3DView.scss | 12 +- .../views/collections/CollectionCarouselView.scss | 16 +-- .../views/collections/CollectionDockingView.scss | 132 +++++++++--------- .../collections/CollectionMasonryViewFieldRow.tsx | 4 +- .../collections/CollectionNoteTakingView.scss | 30 ++--- .../collections/CollectionStackedTimeline.scss | 16 +-- .../views/collections/CollectionStackingView.scss | 34 ++--- .../views/collections/CollectionStackingView.tsx | 8 +- .../CollectionStackingViewFieldColumn.tsx | 2 +- .../views/collections/CollectionTimeView.scss | 13 +- .../views/collections/CollectionTreeView.scss | 6 +- src/client/views/collections/CollectionView.scss | 8 +- .../views/collections/FlashcardPracticeUI.scss | 8 +- src/client/views/collections/KeyRestrictionRow.tsx | 72 ---------- src/client/views/collections/TabDocView.scss | 4 +- src/client/views/collections/TreeView.scss | 4 +- .../CollectionFreeFormRemoteCursors.scss | 2 +- .../collectionFreeForm/CollectionFreeFormView.scss | 32 ++--- .../collectionFreeForm/FaceCollectionBox.scss | 14 +- .../collectionFreeForm/MarqueeView.scss | 6 +- .../collectionGrid/CollectionGridView.scss | 6 +- .../collectionLinear/CollectionLinearView.scss | 8 +- .../CollectionMulticolumnView.scss | 8 +- .../CollectionMultirowView.scss | 4 +- .../collectionMulticolumn/MulticolumnResizer.tsx | 1 - .../collectionMulticolumn/MultirowHeightLabel.tsx | 1 - .../collectionMulticolumn/MultirowResizer.tsx | 3 +- .../collectionSchema/CollectionSchemaView.scss | 10 +- src/client/views/linking/LinkMenuItem.scss | 4 +- src/client/views/linking/LinkPopup.scss | 6 +- src/client/views/linking/LinkPopup.tsx | 1 - src/client/views/newlightbox/NewLightboxView.scss | 4 +- .../components/Recommendation/Recommendation.scss | 2 +- src/client/views/nodes/AudioBox.scss | 4 +- .../nodes/CollectionFreeFormDocumentView.scss | 4 +- src/client/views/nodes/ComparisonBox.scss | 18 +-- src/client/views/nodes/DataVizBox/DataVizBox.scss | 10 +- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.scss | 26 ++-- .../views/nodes/DataVizBox/SchemaCSVPopUp.scss | 8 +- .../views/nodes/DataVizBox/components/Chart.scss | 4 +- src/client/views/nodes/DocumentLinksButton.scss | 4 +- src/client/views/nodes/DocumentView.scss | 37 ++--- .../views/nodes/FontIconBox/FontIconBadge.scss | 2 +- .../views/nodes/FontIconBox/FontIconBox.scss | 20 +-- src/client/views/nodes/IconTagBox.scss | 2 +- src/client/views/nodes/ImageBox.scss | 26 ++-- src/client/views/nodes/ImageBox.tsx | 3 +- src/client/views/nodes/KeyValueBox.scss | 10 +- src/client/views/nodes/KeyValuePair.scss | 2 +- src/client/views/nodes/LabelBox.scss | 12 +- src/client/views/nodes/LinkDocPreview.scss | 2 +- src/client/views/nodes/LoadingBox.scss | 4 +- src/client/views/nodes/MapBox/MapAnchorMenu.scss | 37 ++--- src/client/views/nodes/MapBox/MapBox.scss | 10 +- src/client/views/nodes/PDFBox.scss | 34 ++--- .../nodes/PhysicsBox/PhysicsSimulationBox.scss | 4 +- .../views/nodes/RecordingBox/ProgressBar.scss | 141 +++++++++---------- .../views/nodes/RecordingBox/RecordingView.scss | 12 +- src/client/views/nodes/ScreenshotBox.scss | 8 +- src/client/views/nodes/ScriptingBox.scss | 6 +- src/client/views/nodes/VideoBox.scss | 10 +- src/client/views/nodes/WebBox.scss | 44 +++--- src/client/views/nodes/audio/AudioWaveform.scss | 10 +- .../nodes/chatbot/chatboxcomponents/ChatBox.scss | 14 +- .../chatbot/chatboxcomponents/ProgressBar.scss | 12 +- .../views/nodes/formattedText/DashFieldView.scss | 2 +- .../views/nodes/formattedText/EquationEditor.scss | 10 +- .../nodes/formattedText/FormattedTextBox.scss | 54 ++++---- .../formattedText/FormattedTextBoxComment.scss | 16 +-- .../views/nodes/formattedText/RichTextMenu.scss | 4 +- .../views/nodes/formattedText/TooltipTextMenu.scss | 8 +- .../views/nodes/imageEditor/ImageEditor.scss | 10 +- src/client/views/nodes/trails/PresBox.scss | 104 +++++++------- src/client/views/nodes/trails/PresSlideBox.scss | 10 +- src/client/views/pdf/AnchorMenu.scss | 14 +- src/client/views/pdf/GPTPopup/GPTPopup.scss | 10 +- src/client/views/pdf/PDFViewer.scss | 10 +- src/client/views/topbar/TopBar.scss | 2 +- src/debug/Viewer.tsx | 3 - src/fields/FieldLoader.scss | 2 +- src/server/ApiManagers/UploadManager.ts | 2 +- src/server/PdfTypes.ts | 2 +- views/stylesheets/authentication.css | 21 +-- 135 files changed, 1096 insertions(+), 1117 deletions(-) create mode 100644 .stylelintrc.json delete mode 100644 src/client/views/collections/KeyRestrictionRow.tsx (limited to 'src/client/views/nodes/MapBox') diff --git a/.eslintrc.json b/.eslintrc.json index aba260657..187ddbdc7 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,6 +1,6 @@ { "extends": ["airbnb", "prettier", "plugin:node/recommended", "plugin:import/react"], - "plugins": ["prettier", "import", "@typescript-eslint"], + "plugins": ["prettier", "import", "@typescript-eslint", "css-modules"], "ignorePatterns": ["solr-8.3.1/*", "deploy/*"], // <<< ignore all files in test folder "settings": { "import/parsers": { @@ -14,7 +14,10 @@ "extensions": [".js", ".ts", ".tsx"] } }, - "import/extensions": [".js", ".jsx", ".ts", ".tsx"] + "import/extensions": [".js", ".jsx", ".ts", ".tsx"], + "css-modules": { + "basePath": "src" // Adjust this to your project's base path + } }, "rules": { "import/extensions": [ @@ -60,7 +63,9 @@ "no-param-reassign": ["error", { "props": false }], // "import/no-cycle": 0, "no-alert": 0, - "radix": "off" + "radix": "off", + "css-modules/no-unused-class": "warn", // Warn for unused CSS classes + "css-modules/no-undef-class": "error" // Error for undefined CSS classes }, "overrides": [ { diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 000000000..c9198c5dc --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,15 @@ +{ + "extends": ["stylelint-config-standard-scss"], + "plugins": ["stylelint-scss"], + "rules": { + "unit-no-unknown": true, + "length-zero-no-unit": true, + "declaration-property-unit-required": { + "width": ["px", "%", "em", "rem", "vw", "vh"], + "height": ["px", "%", "em", "rem", "vw", "vh"] + }, + "property-no-unknown": true, + "value-no-vendor-prefix": true, + "scss/at-rule-no-unknown": true + } +} diff --git a/deploy/index.html b/deploy/index.html index 1c48f24bf..b469c7032 100644 --- a/deploy/index.html +++ b/deploy/index.html @@ -1,3 +1,4 @@ + Dash diff --git a/package-lock.json b/package-lock.json index 8e7219bdb..73b8b007b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "@dash/components": "file:packages/components", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@eslint/css": "^0.8.1", "@ffmpeg-installer/ffmpeg": "^1.1.0", "@ffmpeg/core": "^0.12.5", "@ffmpeg/ffmpeg": "^0.12.10", @@ -109,6 +110,7 @@ "dompurify": "^3.1.7", "dotenv": "^16.4.7", "dropbox": "^10.34.0", + "eslint-plugin-css-modules": "^2.12.0", "eslint-webpack-plugin": "^5.0.0", "exif": "^0.6.0", "exifr": "^7.1.3", @@ -4083,6 +4085,33 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@eslint/css": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@eslint/css/-/css-0.8.1.tgz", + "integrity": "sha512-674JJD1q8sDlJORLep+gGnm3VRCQo/qLmKQgCIf2LnUK/tHf96StWjLX2IF3yyp3yeU9npZ6ixySMr2G256eiQ==", + "license": "Apache-2.0", + "dependencies": { + "@eslint/core": "^0.14.0", + "@eslint/css-tree": "^3.3.3", + "@eslint/plugin-kit": "^0.3.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/css-tree": { + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/@eslint/css-tree/-/css-tree-3.6.1.tgz", + "integrity": "sha512-5DIsBME23tUQD5zHD+T38lC2DG4jB8x8JRa+yDncLne2TIZA0VuCpcSazOX1EC+sM/q8w24qeevXfmfsIxAeqA==", + "license": "MIT", + "dependencies": { + "mdn-data": "2.21.0", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, "node_modules/@eslint/eslintrc": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz", @@ -21145,6 +21174,22 @@ } } }, + "node_modules/eslint-plugin-css-modules": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-css-modules/-/eslint-plugin-css-modules-2.12.0.tgz", + "integrity": "sha512-ruFBdad69ABrbCDCh5mXj7UzNmrvytfzPACjyvZWIAjFZAG8BXpYSbqmE8gU5wF+pIzV3jU2CWhLvfekXT/IgQ==", + "license": "MIT", + "dependencies": { + "gonzales-pe": "^4.3.0", + "lodash": "^4.17.2" + }, + "engines": { + "node": ">=4.0.0" + }, + "peerDependencies": { + "eslint": ">=2.0.0" + } + }, "node_modules/eslint-plugin-react": { "version": "7.37.5", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz", @@ -23084,6 +23129,21 @@ "integrity": "sha512-sIVQCiRWOymHbVD1Aw/T9/ijbPYAVGBlgGYd1N9MRKfcyBNSpjr87Vg9nSHm+RCT8ELrvK8IJYJV0QRJuVUkCQ==", "license": "MIT" }, + "node_modules/gonzales-pe": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.3.0.tgz", + "integrity": "sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==", + "license": "MIT", + "dependencies": { + "minimist": "^1.2.5" + }, + "bin": { + "gonzales": "bin/gonzales.js" + }, + "engines": { + "node": ">=0.6.0" + } + }, "node_modules/google-auth-library": { "version": "9.15.1", "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-9.15.1.tgz", @@ -26886,6 +26946,12 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/mdn-data": { + "version": "2.21.0", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.21.0.tgz", + "integrity": "sha512-+ZKPQezM5vYJIkCxaC+4DTnRrVZR1CgsKLu5zsQERQx6Tea8Y+wMx5A24rq8A8NepCeatIQufVAekKNgiBMsGQ==", + "license": "CC0-1.0" + }, "node_modules/mdurl": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz", diff --git a/package.json b/package.json index 5e17a419b..e9f9dc4df 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,8 @@ "test": "mocha -r ts-node/register test/**/*.ts", "tsc": "tsc -t es5", "storybook": "npm -w @dash/components run storybook", - "build-storybook": "npm -w @dash/components run build-storybook" + "build-storybook": "npm -w @dash/components run build-storybook", + "lint:css": "stylelint '**/*.{css,scss}'" }, "devDependencies": { "@eslint/js": "^9.10.0", @@ -104,6 +105,7 @@ "@dash/components": "file:packages/components", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@eslint/css": "^0.8.1", "@ffmpeg-installer/ffmpeg": "^1.1.0", "@ffmpeg/core": "^0.12.5", "@ffmpeg/ffmpeg": "^0.12.10", @@ -193,6 +195,7 @@ "dompurify": "^3.1.7", "dotenv": "^16.4.7", "dropbox": "^10.34.0", + "eslint-plugin-css-modules": "^2.12.0", "eslint-webpack-plugin": "^5.0.0", "exif": "^0.6.0", "exifr": "^7.1.3", diff --git a/packages/components/src/components/Button/Button.scss b/packages/components/src/components/Button/Button.scss index c86db9fad..c87198ddf 100644 --- a/packages/components/src/components/Button/Button.scss +++ b/packages/components/src/components/Button/Button.scss @@ -20,8 +20,8 @@ pointer-events: all; &.icon { - padding: 0; - gap: 0; + padding: 0px; + gap: 0px; } .button-content { @@ -44,8 +44,8 @@ width: 100%; height: 100%; z-index: 0; - left: 0; - top: 0; + left: 0px; + top: 0px; position: absolute; transition: 0.4s; } @@ -111,7 +111,7 @@ .label { position: absolute; - bottom: 0; + bottom: 0px; width: 100%; display: flex; justify-content: center; diff --git a/packages/components/src/components/Button/Button.stories.tsx b/packages/components/src/components/Button/Button.stories.tsx index 3893d9ded..9e7e8cb05 100644 --- a/packages/components/src/components/Button/Button.stories.tsx +++ b/packages/components/src/components/Button/Button.stories.tsx @@ -1,94 +1,97 @@ -import { Meta, Story } from '@storybook/react' -import React from 'react' -import * as bi from 'react-icons/bi' -import { Button, IButtonProps } from '..' -import { Colors, Size } from '../../global/globalEnums' -import { Type , getFormLabelSize } from '../../global' +import { Meta, Story } from '@storybook/react'; +import React from 'react'; +import * as bi from 'react-icons/bi'; +import { Button, IButtonProps } from '..'; +import { Type } from '../../global'; +import { Size } from '../../global/globalEnums'; export default { - title: 'Dash/Button', - component: Button, - argTypes: {}, -} as Meta + title: 'Dash/Button', + component: Button, + argTypes: {}, +} as Meta; -const Template: Story = (args) =>