[HOP-62] Inject Design Tokens hashed per version (#79)

.storybook/main.ts

@@ -1,18 +1,16 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 import { mergeConfig } from "vite";
 import turbosnap from "vite-plugin-turbosnap";
-
+import tsconfigPaths from "vite-tsconfig-paths";
 
 const storybookConfig: StorybookConfig = {
     stories: [
-        "../packages/**/*.stories.@(ts|tsx)",
-        "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+        "../packages/**/*.stories.@(ts|tsx)"
     ],
     addons: [
         "@storybook/addon-links",
         "@storybook/addon-essentials",
-        "@storybook/addon-interactions",
-        "@storybook/addon-mdx-gfm"
+        "@storybook/addon-interactions"
     ],
     framework: {
         name: "@storybook/react-vite",
@@ -22,19 +20,22 @@ const storybookConfig: StorybookConfig = {
         autodocs: "tag"
     },
     async viteFinal(config, { configType }) {
+        const plugins = [tsconfigPaths()];
+
+        if (configType === "PRODUCTION") {
+            plugins.push(
+                // TurboSnap only officially support webpack (https://www.chromatic.com/docs/turbosnap/#prerequisites)
+                // This plugin is suggested by storybook and maintained by a core storybook contributor.
+                // This is experimental, and may not support all project and storybook configurations, yet.
+                turbosnap({
+                // This should be the base path of your storybook.  In monorepos, you may only need process.cwd().
+                    rootDir: config.root ?? process.cwd()
+                })
+            );
+        }
+
         return mergeConfig(config, {
-            plugins:
-            configType === "PRODUCTION"
-                ? [
-                    // TurboSnap only officially support webpack (https://www.chromatic.com/docs/turbosnap/#prerequisites)
-                    // This plugin is suggested by storybook and maintained by a core storybook contributor.
-                    // This is experimental, and may not support all project and storybook configurations, yet.
-                    turbosnap({
-                    // This should be the base path of your storybook.  In monorepos, you may only need process.cwd().
-                        rootDir: config.root ?? process.cwd()
-                    })
-                ]
-                : []
+            plugins
         });
     }
 };

.stylelintignore

@@ -2,3 +2,6 @@
 stories
 # crach after runing
 packages/tokens/dist
+
+node_modules
+dist

apps/docs/package.json

@@ -33,8 +33,8 @@
         "@storybook/react": "7.5.1",
         "@storybook/testing-library": "0.2.2",
         "@svgr/webpack": "8.1.0",
-        "@types/node": "20.8.8",
-        "@types/react": "18.2.31",
+        "@types/node": "20.8.9",
+        "@types/react": "18.2.32",
         "@types/react-dom": "18.2.14",
         "classnames": "2.3.2",
         "eslint": "8.52.0",

jest.config.ts

@@ -0,0 +1,17 @@
+import type { Config } from "jest";
+
+const config: Config = {
+    // projects: [
+    //     "<rootDir>/packages/*"
+    // ],
+    "transform": {
+        "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
+    },
+    testRegex: "/tests/jest/.*\\.test\\.(ts|tsx)$",
+    testPathIgnorePatterns: ["/node_modules/", "/dist/"],
+    cacheDirectory: "./node_modules/.cache/jest",
+    clearMocks: true
+    // verbose: true
+};
+
+export default config;

package.json

@@ -55,8 +55,10 @@
         "prop-types": "15.8.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "ts-jest": "29.1.1",
         "stylelint": "15.11.0",
-        "vite-plugin-turbosnap": "1.0.3"
+        "vite-plugin-turbosnap": "1.0.3",
+        "vite-tsconfig-paths": "4.2.1"
     },
     "bugs": {
         "url": "https://github.com/gsoft-inc/wl-hopper/issues"

packages/components/package.json

@@ -0,0 +1,65 @@
+{
+    "name": "@hopper-ui/components",
+    "author": "Workleap",
+    "version": "0.0.0",
+    "description": "The components package.",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/gsoft-inc/wl-hopper.git",
+        "directory": "packages/components"
+    },
+    "publishConfig": {
+        "access": "public",
+        "provenance": true
+    },
+    "type": "module",
+    "sideEffects": [
+        "*.css"
+    ],
+    "exports": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "/dist",
+        "CHANGELOG.md",
+        "README.md"
+    ],
+    "scripts": {
+        "dev": "tsup --config ./tsup.dev.ts",
+        "build": "tsup --config ./tsup.build.ts",
+        "test": "jest"
+    },
+    "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+    },
+    "dependencies": {
+        "@hopper-ui/styled-system": "workspace:*"
+    },
+    "devDependencies": {
+        "@swc/core": "1.3.95",
+        "@swc/helpers": "0.5.3",
+        "@swc/jest": "0.2.29",
+        "@testing-library/jest-dom": "6.1.4",
+        "@testing-library/react": "14.0.0",
+        "@types/jest": "29.5.6",
+        "@types/react": "18.2.32",
+        "@types/react-dom": "18.2.14",
+        "@types/react-test-renderer": "18.0.5",
+        "@workleap/eslint-plugin": "3.0.0",
+        "@workleap/swc-configs": "2.1.2",
+        "@workleap/typescript-configs": "3.0.2",
+        "jest": "29.7.0",
+        "jest-environment-jsdom": "29.7.0",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-test-renderer": "18.2.0",
+        "ts-jest": "29.1.1",
+        "ts-node": "10.9.1",
+        "tsup": "7.2.0",
+        "typescript": "5.2.2"
+    },
+    "engines": {
+        "node": ">=18.0.0"
+    }
+}

packages/components/src/HopperProvider/src/HopperProvider.tsx

@@ -0,0 +1,17 @@
+import { StyledSystemProvider, type StyledSystemProviderProps } from "@hopper-ui/styled-system";
+
+export type HopperProviderProps = StyledSystemProviderProps;
+
+/**
+ * HopperProvider is required to be rendered at the root of your application. It is responsible for:
+ * - Adding CSS variables to the document
+ * - Managing color scheme (light, dark, auto)
+ * - Optionally adding body styles to the document
+ */
+export function HopperProvider({ children, withBodyStyle = false, colorScheme = "light", withCssVariables = true, ...rest }: HopperProviderProps) {
+    return (
+        <StyledSystemProvider withBodyStyle={withBodyStyle} colorScheme={colorScheme} withCssVariables={withCssVariables} {...rest}>
+            {children}
+        </StyledSystemProvider>
+    );
+}

packages/components/src/HopperProvider/src/index.ts

@@ -0,0 +1 @@
+export * from "./HopperProvider.tsx";

packages/components/src/HopperProvider/tests/chromatic/HopperProvider.stories.tsx

@@ -0,0 +1,56 @@
+import { HopperProvider } from "@hopper-ui/components";
+import type { HopperCssVar } from "@hopper-ui/styled-system";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Components/HopperProvider",
+    component: HopperProvider
+} as Meta<typeof HopperProvider>;
+
+type HopperProviderStory = StoryObj<typeof HopperProvider>;
+
+const ColoredDiv = () => {
+    return (
+        <div style={{
+            padding: "var(--hop-space-inset-lg)" satisfies HopperCssVar,
+            backgroundColor: "var(--hop-primary-surface)" satisfies HopperCssVar
+        }}
+        >Hello</div>
+    );
+};
+
+export const Light: HopperProviderStory = {
+    name: "light",
+    render: () => (
+        <HopperProvider colorScheme="light">
+            <ColoredDiv />
+        </HopperProvider>
+    )
+};
+
+export const Dark: HopperProviderStory = {
+    name: "dark",
+    render: () => (
+        <HopperProvider colorScheme="dark">
+            <ColoredDiv />
+        </HopperProvider>
+    )
+};
+
+export const WithBodyStyles: HopperProviderStory = {
+    name: "with body styles",
+    render: () => (
+        <HopperProvider withBodyStyle>
+            <ColoredDiv />
+        </HopperProvider>
+    )
+};
+
+export const DarkWithBodyStyles: HopperProviderStory = {
+    name: "dark with body styles",
+    render: () => (
+        <HopperProvider colorScheme="dark" withBodyStyle>
+            <ColoredDiv />
+        </HopperProvider>
+    )
+};

packages/components/src/index.ts

@@ -0,0 +1 @@
+export * from "./HopperProvider/src/index.ts";

packages/components/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "extends": "@workleap/typescript-configs/library.json",
+    "exclude": ["dist", "node_modules"],
+    "compilerOptions": {
+        "paths": {
+            "@hopper-ui/styled-system": ["../styled-system/src/index.ts"],
+            "@hopper-ui/components": ["./src/HopperProvider/src/index.ts"]
+        }
+    }
+}

packages/components/tsup.build.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+    dts: true,
+    clean: true,
+    minify: true,
+    splitting: false,
+    treeshake: true,
+    entry: ["./src/**/src/*"],
+    outDir: "./dist",
+    format: ["esm"],
+    target: "esnext",
+    platform: "browser"
+});

packages/components/tsup.dev.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+    dts: true,
+    splitting: false,
+    watch: true,
+    sourcemap: "inline",
+    entry: ["./src/**/src/*"],
+    outDir: "./dist",
+    format: ["esm"],
+    target: "esnext",
+    platform: "browser"
+});

packages/styled-system/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+    "$schema": "https://json.schemastore.org/eslintrc",
+    "root": true,
+    "extends": "plugin:@workleap/react-library"
+}

packages/styled-system/README.md

@@ -0,0 +1,19 @@
+# @hopper-ui/styled-system
+
+Ideas from PandaCSS
+- Patterns/JSX Patterns (HStack VStack Truncate)
+    - divider
+    - flex
+    - gloat
+    - grid
+    - gridItem
+    - hstack
+    - stack
+    - truncate
+    - vstack
+    - wrap
+- CSS Variables in style
+    - either a vars prop, cssVars props, or style={{vars: {}}}
+- Negative values for token scale
+    -   margin={-2} should be valid
+- Pseudos could be generated from usage and added to a style tag dynamically, like the GlobalStyleProvider

packages/styled-system/jest-setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

packages/styled-system/jest.config.ts

@@ -0,0 +1,22 @@
+import type { Config } from "jest";
+import { pathsToModuleNameMapper } from "ts-jest";
+import { swcConfig } from "./swc.jest.ts";
+import { compilerOptions } from "./tsconfig.json";
+
+const config: Config = {
+    testEnvironment: "jsdom",
+    transform: {
+        "^.+\\.(js|ts|tsx)$": ["@swc/jest", swcConfig as Record<string, unknown>]
+    },
+    testRegex: "/tests/jest/.*\\.test\\.(ts|tsx)$",
+    moduleNameMapper: {
+        ...pathsToModuleNameMapper(compilerOptions.paths, {
+            prefix: "<rootDir>/../.."
+        })
+    },
+    setupFilesAfterEnv: [
+        "./jest-setup.ts"
+    ]
+};
+
+export default config;