feat: Update Structure for Figma Variables (#30)

Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>

.eslintrc.js

@@ -8,11 +8,7 @@ module.exports = {
     '@typescript-eslint',
     'prettier',
   ],
-  extends: [
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended'
-  ],
+  extends: ['plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', 'plugin:storybook/recommended'],
   overrides: [],
   parserOptions: {
     ecmaVersion: 'latest',

.github/workflows/ci.yml

@@ -9,6 +9,7 @@ on:
 jobs:
   build-design-language-system:
     runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main'
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3

.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

config/build.ts

@@ -27,7 +27,14 @@ export function getStyleDictionaryConfig(
   options: StyleDictionaryOptions
 ): StyleDictionaryPackage.Config {
   const { theme, platform } = options;
-  const buildPath = theme.name ? `dist/${theme.name}/` : 'dist/'
+  let buildPath;
+
+  if (theme.name === 'light' || theme.name === '') {
+    buildPath = 'dist/';
+  } else {
+    buildPath = `dist/${theme.name}/`;
+  }
+
   return {
     // If we want to show collisions, we can change `include` to `source`.
     include: Object.entries(theme.selectedTokenSets)
@@ -41,22 +48,22 @@ export function getStyleDictionaryConfig(
         files: [
           {
             destination: 'tokens.es6.js',
-            format: 'javascript/es6',
-            filter: {}
+            filter: {},
+            format: 'javascript/es6'
           },
           {
-            destination: 'theme.es6.js',
-            format: 'javascript/nested',
-            filter: {}
+            destination: 'tokens.d.ts',
+            format: 'typescript/es6-declarations'
           },
           {
-            destination: 'theme.d.ts',
-            format: 'typescript/theme-types',
-            filter: {}
+            destination: 'nested.es6.js',
+            filter: {},
+            format: 'javascript/nested'
           },
           {
-            format: 'typescript/es6-declarations',
-            destination: 'tokens.d.ts'
+            destination: 'nested.d.ts',
+            filter: {},
+            format: 'typescript/theme-types'
           }
         ]
       },

config/dark/index.ts

@@ -1,27 +1,52 @@
 import * as Tokens from '../../dist/dark/tokens.es6.js';
-import * as TokensTheme from '../../dist/dark/theme.es6.js';
+import * as TokensTheme from '../../dist/dark/nested.es6.js';
 import type {
-  ColorTypes,
-  ElevationTypes,
-  FontTypes,
-  ContentTypes,
-  BorderTypes,
-  BackgroundTypes,
-  InteractionTypes,
-  ActionTypes,
-  ButtonTypes,
-} from '../../dist/dark/theme.js';
+  AliasTypes,
+  ComponentTypes,
+  GlobalTypes
+} from '../../dist/dark/nested.d.ts';
 
-const Colors: ColorTypes = TokensTheme.default.Color;
-const Elevation: ElevationTypes = TokensTheme.default.Elevation;
-const Fonts: FontTypes = TokensTheme.default.Font;
-const Content: ContentTypes = TokensTheme.default.Content;
-const Border: BorderTypes = TokensTheme.default.Border;
-const Background: BackgroundTypes = TokensTheme.default.Background;
-const Interaction: InteractionTypes = TokensTheme.default.Interaction;
-const Actions: ActionTypes = TokensTheme.default.Action;
-const Button: ButtonTypes = TokensTheme.default.Button;
+const {
+  Color,
+  Elevation,
+  Font,
+  Spacing
+} = TokensTheme.default.Global;
 
-export { Tokens, Colors, Elevation, Fonts, Content, Border, Background, Interaction, Actions, Button };
-export type { ColorTypes, ElevationTypes, FontTypes, ContentTypes, BorderTypes, BackgroundTypes, InteractionTypes, ActionTypes, ButtonTypes };
+const {
+  Action,
+  Background,
+  Border,
+  Content,
+  Interaction,
+} = TokensTheme.default.Alias;
 
+const {
+  Appbar,
+  Button,
+  Container,
+  Table,
+} = TokensTheme.default.Component;
+
+export {
+  Action,
+  Appbar,
+  Background,
+  Border,
+  Button,
+  Color,
+  Container,
+  Content,
+  Elevation,
+  Font,
+  Interaction,
+  Spacing,
+  Table,
+  Tokens
+};
+
+export type {
+  AliasTypes,
+  ComponentTypes,
+  GlobalTypes
+};

config/densedDark/index.ts

@@ -0,0 +1,52 @@
+import * as Tokens from '../../dist/densedDark/tokens.es6.js';
+import * as TokensTheme from '../../dist/densedDark/nested.es6.js';
+import type {
+  AliasTypes,
+  ComponentTypes,
+  GlobalTypes
+} from '../../dist/densedDark/nested.d.ts';
+
+const {
+  Color,
+  Elevation,
+  Font,
+  Spacing
+} = TokensTheme.default.Global;
+
+const {
+  Action,
+  Background,
+  Border,
+  Content,
+  Interaction,
+} = TokensTheme.default.Alias;
+
+const {
+  Appbar,
+  Button,
+  Container,
+  Table,
+} = TokensTheme.default.Component;
+
+export {
+  Action,
+  Appbar,
+  Background,
+  Border,
+  Button,
+  Color,
+  Container,
+  Content,
+  Elevation,
+  Font,
+  Interaction,
+  Spacing,
+  Table,
+  Tokens
+};
+
+export type {
+  AliasTypes,
+  ComponentTypes,
+  GlobalTypes
+};

config/densedLight/index.ts

@@ -0,0 +1,52 @@
+import * as Tokens from '../../dist/densedLight/tokens.es6.js';
+import * as TokensTheme from '../../dist/densedLight/nested.es6.js';
+import type {
+  AliasTypes,
+  ComponentTypes,
+  GlobalTypes
+} from '../../dist/densedLight/nested.d.ts';
+
+const {
+  Color,
+  Elevation,
+  Font,
+  Spacing
+} = TokensTheme.default.Global;
+
+const {
+  Action,
+  Background,
+  Border,
+  Content,
+  Interaction,
+} = TokensTheme.default.Alias;
+
+const {
+  Appbar,
+  Button,
+  Container,
+  Table,
+} = TokensTheme.default.Component;
+
+export {
+  Action,
+  Appbar,
+  Background,
+  Border,
+  Button,
+  Color,
+  Container,
+  Content,
+  Elevation,
+  Font,
+  Interaction,
+  Spacing,
+  Table,
+  Tokens
+};
+
+export type {
+  AliasTypes,
+  ComponentTypes,
+  GlobalTypes
+};

config/index.ts

@@ -1,27 +1,52 @@
 import * as Tokens from '../dist/tokens.es6.js';
-import * as TokensTheme from '../dist/theme.es6.js';
+import * as TokensTheme from '../dist/nested.es6.js';
 import type {
-  ColorTypes,
-  ElevationTypes,
-  FontTypes,
-  ContentTypes,
-  BorderTypes,
-  BackgroundTypes,
-  InteractionTypes,
-  ActionTypes,
-  ButtonTypes,
-} from '../dist/theme.js';
+  AliasTypes,
+  ComponentTypes,
+  GlobalTypes
+} from '../dist/nested.d.ts';
 
-const Colors: ColorTypes = TokensTheme.default.Color;
-const Elevation: ElevationTypes = TokensTheme.default.Elevation;
-const Fonts: FontTypes = TokensTheme.default.Font;
-const Content: ContentTypes = TokensTheme.default.Content;
-const Border: BorderTypes = TokensTheme.default.Border;
-const Background: BackgroundTypes = TokensTheme.default.Background;
-const Interaction: InteractionTypes = TokensTheme.default.Interaction;
-const Actions: ActionTypes = TokensTheme.default.Action;
-const Button: ButtonTypes = TokensTheme.default.Button;
+const {
+  Color,
+  Elevation,
+  Font,
+  Spacing
+} = TokensTheme.default.Global;
 
-export { Tokens, Colors, Elevation, Fonts, Content, Border, Background, Interaction, Actions, Button };
-export type { ColorTypes, ElevationTypes, FontTypes, ContentTypes, BorderTypes, BackgroundTypes, InteractionTypes, ActionTypes, ButtonTypes };
+const {
+  Action,
+  Background,
+  Border,
+  Content,
+  Interaction,
+} = TokensTheme.default.Alias;
 
+const {
+  Appbar,
+  Button,
+  Container,
+  Table,
+} = TokensTheme.default.Component;
+
+export {
+  Action,
+  Appbar,
+  Background,
+  Border,
+  Button,
+  Color,
+  Container,
+  Content,
+  Elevation,
+  Font,
+  Interaction,
+  Spacing,
+  Table,
+  Tokens
+};
+
+export type {
+  AliasTypes,
+  ComponentTypes,
+  GlobalTypes
+};