Merge pull request #613 from tokens-studio/add-css-modules

add css modules
tokens-studio · Jan 3, 2025 · 0757c9b · 0757c9b
2 parents 4e2908b + f763f9a
commit 0757c9b
Show file tree

Hide file tree

Showing 34 changed files with 505 additions and 74 deletions.
diff --git a/packages/graph-editor/src/components/panels/dropPanel/dropPanel.tsx b/packages/graph-editor/src/components/panels/dropPanel/dropPanel.tsx
@@ -3,7 +3,10 @@ import { DragItem } from './DragItem.js';
 import { DropPanelStore } from './data.js';
 import { NodeEntry } from './NodeEntry.js';
 import { observer } from 'mobx-react-lite';
-import { panelItemsSelector } from '@/redux/selectors/registry.js';
+import {
+  panelItemsSelector,
+  previewItemsSelector,
+} from '@/redux/selectors/registry.js';
 import { useSelector } from 'react-redux';
 import NavArrowRight from '@tokens-studio/icons/NavArrowRight.js';
 import React, { useState } from 'react';
@@ -28,6 +31,12 @@ export const DropPanel = () => {
   return <DropPanelInner data={data} />;
 };
 
+export const PreviewDropPanel = () => {
+  const data = useSelector(previewItemsSelector);
+  console.log(data);
+  return <DropPanelInner data={data} />;
+};
+
 export const DropPanelInner = observer(({ data }: IDropPanel) => {
   const [search, setSearch] = React.useState('');
   const [opened, setOpened] = useState<string[]>([]);

diff --git a/packages/graph-editor/src/editor/editorTypes.ts b/packages/graph-editor/src/editor/editorTypes.ts
@@ -55,6 +55,8 @@ export interface EditorProps {
    */
   panelItems: DropPanelStore;
 
+  previewPanelItems: DropPanelStore;
+
   /**
    * Customize the controls that are displayed in the editor
    */

diff --git a/packages/graph-editor/src/editor/index.tsx b/packages/graph-editor/src/editor/index.tsx
@@ -17,6 +17,7 @@ export const Editor = React.forwardRef<ImperativeEditorRef, EditorProps>(
     const {
       panelItems = defaultPanelGroupsFactory(),
       capabilities,
+      previewPanelItems,
       toolbarButtons,
       schemas,
       nodeTypes = defaultNodeLookup,
@@ -30,6 +31,7 @@ export const Editor = React.forwardRef<ImperativeEditorRef, EditorProps>(
       <ToastProvider>
         <ReduxProvider
           icons={icons}
+          previewPanelItems={previewPanelItems}
           schemas={schemas}
           controls={controls}
           panelItems={panelItems}

diff --git a/packages/graph-editor/src/editor/layoutController.tsx b/packages/graph-editor/src/editor/layoutController.tsx
@@ -17,7 +17,10 @@ import { useDispatch } from '@/hooks/useDispatch.js';
 import { useRegisterRef } from '@/hooks/useRegisterRef.js';
 import { useSelector } from 'react-redux';
 
-import { DropPanel } from '@/components/panels/dropPanel/dropPanel.js';
+import {
+  DropPanel,
+  PreviewDropPanel,
+} from '@/components/panels/dropPanel/dropPanel.js';
 import { EditorProps, ImperativeEditorRef } from './editorTypes.js';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ErrorBoundaryContent } from '@/components/ErrorBoundaryContent.js';
@@ -181,6 +184,11 @@ const layoutDataFactory = (props, ref): LayoutData => {
                               title: '',
                               content: <></>,
                             },
+                            {
+                              id: 'previewNodesPanel',
+                              title: '',
+                              content: <></>,
+                            },
                           ],
                         },
                       ],
@@ -298,6 +306,19 @@ const layoutLoader = (tab: TabBase): TabData => {
         closable: true,
       };
 
+    case 'previewNodesPanel':
+      return {
+        group: 'popout',
+        id: 'previewNodesPanel',
+        title: 'Preview',
+        content: (
+          <ErrorBoundary fallback={<ErrorBoundaryContent />}>
+            <PreviewDropPanel />
+          </ErrorBoundary>
+        ),
+        closable: true,
+      };
+
     default:
       return tab as TabData;
   }

diff --git a/packages/graph-editor/src/index.tsx b/packages/graph-editor/src/index.tsx
@@ -19,3 +19,4 @@ export * from './registry/control.js';
 export * from './registry/specifics.js';
 export * from './registry/toolbar.js';
 export * from './types/index.js';
+export { DropPanelStore } from './components/panels/dropPanel/data.js';
diff --git a/packages/graph-editor/src/redux/index.tsx b/packages/graph-editor/src/redux/index.tsx
@@ -9,6 +9,7 @@ export const ReduxProvider = ({
   capabilities,
   icons,
   schemas,
+  previewPanelItems,
   controls,
   specifics,
   toolbarButtons,
@@ -25,6 +26,12 @@ export const ReduxProvider = ({
     }
   }, [schemas]);
 
+  useEffect(() => {
+    if (previewPanelItems) {
+      store.dispatch.registry.setPreviewPanelItems(previewPanelItems);
+    }
+  }, [previewPanelItems]);
+
   useEffect(() => {
     store.dispatch.registry.registerIcons(icons || {});
   }, [icons]);

diff --git a/packages/graph-editor/src/redux/models/registry.ts b/packages/graph-editor/src/redux/models/registry.ts
@@ -26,6 +26,7 @@ export interface RegistryState {
   controls: Control[];
   nodeTypes: Record<string, typeof Node>;
   panelItems: DropPanelStore;
+  previewItems: DropPanelStore;
   capabilities: CapabilityFactory[];
   toolbarButtons: ReactElement[];
   schemas: SchemaObject[];
@@ -38,6 +39,7 @@ export const registryState = createModel<RootModel>()({
     inputControls: { ...inputControls },
     controls: [...(defaultControls as Control[])],
     panelItems: defaultPanelGroupsFactory(),
+    previewItems: new DropPanelStore([]),
     nodeTypes: {},
     capabilities: [],
     toolbarButtons: DefaultToolbarButtons(),
@@ -110,5 +112,11 @@ export const registryState = createModel<RootModel>()({
         panelItems: payload,
       };
     },
+    setPreviewPanelItems(state, payload: DropPanelStore) {
+      return {
+        ...state,
+        previewItems: payload,
+      };
+    },
   },
 });
diff --git a/packages/graph-editor/src/redux/selectors/registry.ts b/packages/graph-editor/src/redux/selectors/registry.ts
@@ -18,6 +18,11 @@ export const panelItemsSelector = createSelector(
   (state) => state.panelItems,
 );
 
+export const previewItemsSelector = createSelector(
+  registry,
+  (state) => state.previewItems,
+);
+
 export const capabilitiesSelector = createSelector(
   registry,
   (state) => state.capabilities,

diff --git a/packages/nodes-previews/package.json b/packages/nodes-previews/package.json
@@ -18,8 +18,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tspc  -p tsconfig.prod.json",
-    "dev": "tspc  -p tsconfig.prod.json --watch",
+    "build": "tspc -p tsconfig.prod.json && postcss \"src/**/*.css\" --base src --dir dist",
+    "dev": "tspc -p tsconfig.prod.json --watch",
     "docs": "typedoc",
     "format": "npm run format:eslint && npm run format:prettier",
     "format:eslint": "eslint . --fix",
@@ -34,27 +34,39 @@
     "mobx-react-lite": "^4.0.5"
   },
   "peerDependencies": {
-    "@tokens-studio/icons": "^0.1.4",
-    "@tokens-studio/ui": "^1.0.7",
     "@tokens-studio/graph-editor": "*",
     "@tokens-studio/graph-engine": "*",
-    "react": "^18.2.0",
-    "colorjs.io": "^0.5.2"
+    "@tokens-studio/graph-engine-nodes-design-tokens": "*",
+    "@tokens-studio/icons": "^0.1.4",
+    "@tokens-studio/ui": "^1.0.7",
+    "colorjs.io": "^0.5.2",
+    "react": "^18.2.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.0",
+    "@testing-library/react": "^16.1.0",
     "@tokens-studio/eslint-config-custom": "*",
-    "@tokens-studio/prettier-config-custom": "*",
     "@tokens-studio/graph-editor": "*",
     "@tokens-studio/graph-engine": "*",
-    "typescript-transform-paths": "^3.5.1",
+    "@tokens-studio/graph-engine-nodes-design-tokens": "*",
+    "@tokens-studio/prettier-config-custom": "*",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.6",
+    "postcss": "^8.4.47",
+    "postcss-cli": "^11.0.0",
+    "postcss-css-variables": "^0.19.0",
+    "postcss-import": "^16.1.0",
+    "postcss-modules": "^6.0.0",
+    "postcss-nested": "^6.2.0",
+    "postcss-preset-env": "^10.0.5",
     "typedoc": "^0.24.7",
     "typescript": "^5.4.5",
+    "typescript-transform-paths": "^3.5.1",
     "vitest": "^1.6.0"
   },
   "keywords": [
     "studio",
     "tokens",
     "ui"
   ]
-}
+}
diff --git a/packages/nodes-previews/postcss.config.js b/packages/nodes-previews/postcss.config.js
@@ -0,0 +1,20 @@
+import postcssImport from 'postcss-import';
+import postcssNested from 'postcss-nested';
+import postcssPresetEnv from 'postcss-preset-env';
+
+export default {
+	plugins: [
+		postcssImport,
+		postcssNested,
+		postcssPresetEnv({
+			stage: 3,
+			features: {
+				'nesting-rules': true,
+				'custom-properties': true,
+				'custom-media-queries': true,
+				'media-query-ranges': true,
+				'custom-selectors': true
+			}
+		})
+	]
+};
diff --git a/...es/nodes-previews/src/nodes/colorScale.ts → ...es/nodes-previews/src/color/scale/node.ts b/...es/nodes-previews/src/nodes/colorScale.ts → ...es/nodes-previews/src/color/scale/node.ts
@@ -1,9 +1,9 @@
 import { ColorSchema, Node } from '@tokens-studio/graph-engine';
-import { arrayOf } from '../utils/index.js';
+import { arrayOf } from '../../utils/index.js';
 
 export default class NodeDefinition extends Node {
 	static title = 'Color Scale';
-	static type = 'studio.tokens.previews.colorScale';
+	static type = 'studio.tokens.previews.color.scale';
 
 	static description = 'Previews a color scale';
 

diff --git a/packages/nodes-previews/src/color/scale/panel.module.css b/packages/nodes-previews/src/color/scale/panel.module.css
@@ -0,0 +1,16 @@
+.scale {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: scroll;
+  height: 100%;
+}
+
+.swatch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 80px;
+}
diff --git a/...des-previews/src/ui/panels/colorScale.tsx → .../nodes-previews/src/color/scale/panel.tsx b/...des-previews/src/ui/panels/colorScale.tsx → .../nodes-previews/src/color/scale/panel.tsx
@@ -2,8 +2,9 @@ import { Text } from '@tokens-studio/ui/Text.js';
 import { castToHex } from '../../utils/index.js';
 import { observer } from 'mobx-react-lite';
 import Color from 'colorjs.io';
-import ColorScale from '../../nodes/colorScale.js';
 import React from 'react';
+import styles from './panel.module.css';
+import type ColorScale from './node.js';
 
 function contrastingColor(value: string) {
 	const black = new Color('srgb', [0, 0, 0]);
@@ -23,36 +24,23 @@ function contrastingColor(value: string) {
 export const ColorScalePreview = observer(
 	({ inputs }: { inputs: ColorScale['inputs'] }) => {
 		return (
-			<>
+			<div className={styles.scale}>
 				{inputs.scale && (
 					<>
 						{inputs.scale.value.map(color => {
 							const hex = castToHex(color);
 
 							return (
-								<div
-									style={{
-										display: 'grid',
-										placeItems: 'center',
-										width: '100%',
-										minHeight: '100px',
-										backgroundColor: hex
-									}}
-								>
-									<Text
-										style={{
-											font: 'var(--font-body-xl)',
-											color: contrastingColor(hex)
-										}}
-									>
+								<div className={styles.swatch} style={{ backgroundColor: hex }}>
+									<Text size='large' style={{ color: contrastingColor(hex) }}>
 										{hex}
 									</Text>
 								</div>
 							);
 						})}
 					</>
 				)}
-			</>
+			</div>
 		);
 	}
 );

diff --git a/...nodes-previews/src/ui/specifics/index.tsx → ...des-previews/src/color/scale/specific.tsx b/...nodes-previews/src/ui/specifics/index.tsx → ...des-previews/src/color/scale/specific.tsx
@@ -1,14 +1,16 @@
-import { IconButton } from '@tokens-studio/ui/IconButton.js';
+import { Button } from '@tokens-studio/ui/Button.js';
 import { useOpenPanel } from '@tokens-studio/graph-editor';
-import ColorScalePreview from '../panels/colorScale.js';
+import ColorScalePreview from './panel.js';
 import Eye from '@tokens-studio/icons/Eye.js';
 import React from 'react';
 
-const ColorScale = ({ node }) => {
+export const ColorScale = ({ node }) => {
 	const { toggle } = useOpenPanel();
 
 	return (
-		<IconButton
+		<Button
+			fullWidth
+			emphasis='high'
 			onClick={() => {
 				toggle({
 					group: 'popout',
@@ -18,11 +20,8 @@ const ColorScale = ({ node }) => {
 				});
 			}}
 			icon={<Eye />}
-			tooltip='Toggle Preview'
-		/>
+		>
+			Toggle Preview
+		</Button>
 	);
 };
-
-export const specifics = {
-	'studio.tokens.previews.colorScale': ColorScale
-};
diff --git a/packages/nodes-previews/src/color/swatch/node.ts b/packages/nodes-previews/src/color/swatch/node.ts
@@ -0,0 +1,15 @@
+import { ColorSchema, Node } from '@tokens-studio/graph-engine';
+
+export default class NodeDefinition extends Node {
+	static title = 'Color Swatch';
+	static type = 'studio.tokens.previews.color.swatch';
+	static description = 'Previews a single color';
+
+	constructor(props) {
+		super(props);
+
+		this.addInput('color', {
+			type: ColorSchema
+		});
+	}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -55,6 +55,8 @@ export interface EditorProps { @@
        */
       panelItems: DropPanelStore;
+      previewPanelItems: DropPanelStore;
       /**
        * Customize the controls that are displayed in the editor
        */
@@ Expand Down @@