chore: add storybook to react lib

.github/actions/setup-node/action.yml

@@ -15,6 +15,10 @@ runs:
         node-version: ${{ inputs.node-version }}
         cache: yarn
 
+    - name: Install yarn 1.19.0
+      run: npm install -g [email protected]
+      shell: bash
+
     - name: Install dependencies
       run: yarn install --frozen-lockfile
       shell: bash

.gitignore

@@ -35,3 +35,8 @@ site/**/*.js
 vocs.config.tsx.timestamp-*.mjs
 
 bin
+
+.nx
+
+
+storybook-static

.vitest/package.json

@@ -8,7 +8,6 @@
     "is-ci": "^3.0.1",
     "prool": "^0.0.15",
     "tar": "^7.4.1",
-    "typescript-template": "*",
     "viem": "2.20.0"
   },
   "dependencies": {

.vitest/tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "typescript-template/base.json"
+  "extends": "../tsconfig.base.json"
 }

aa-sdk/core/package.json

@@ -46,7 +46,6 @@
     "dotenv": "^16.0.3",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.4",
-    "typescript-template": "*",
     "vitest": "^2.0.4"
   },
   "dependencies": {

aa-sdk/core/tsconfig.build.json

@@ -1,5 +1,5 @@
 {
-  "extends": "typescript-template/build.json",
+  "extends": "../../tsconfig.build.json",
   "exclude": [
     "node_modules",
     "**/*/__tests__",

aa-sdk/core/tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "typescript-template/base.json"
+  "extends": "../../tsconfig.base.json"
 }

aa-sdk/ethers/package.json

@@ -46,7 +46,6 @@
     "alchemy-sdk": "^3.0.0",
     "dotenv": "^16.0.3",
     "typescript": "^5.0.4",
-    "typescript-template": "*",
     "vitest": "^2.0.4"
   },
   "dependencies": {

aa-sdk/ethers/tsconfig.build.json

@@ -1,5 +1,5 @@
 {
-  "extends": "typescript-template/build.json",
+  "extends": "../../tsconfig.build.json",
   "exclude": [
     "node_modules",
     "**/*/__tests__",

aa-sdk/ethers/tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "typescript-template/base.json"
+  "extends": "../../tsconfig.base.json"
 }

account-kit/core/package.json

@@ -42,7 +42,6 @@
   "devDependencies": {
     "@types/js-cookie": "^3.0.6",
     "typescript": "^5.0.4",
-    "typescript-template": "*",
     "vitest": "^2.0.4"
   },
   "dependencies": {

account-kit/core/tsconfig.build.json

@@ -1,5 +1,5 @@
 {
-  "extends": "typescript-template/build.json",
+  "extends": "../../tsconfig.build.json",
   "exclude": [
     "node_modules",
     "**/*/__tests__",

account-kit/core/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "typescript-template/base.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "jsx": "preserve",
     "paths": {

account-kit/infra/package.json

@@ -41,7 +41,6 @@
   },
   "devDependencies": {
     "typescript": "^5.0.4",
-    "typescript-template": "*",
     "vitest": "^2.0.4"
   },
   "dependencies": {

account-kit/infra/tsconfig.build.json

@@ -1,5 +1,5 @@
 {
-  "extends": "typescript-template/build.json",
+  "extends": "../../tsconfig.build.json",
   "exclude": [
     "node_modules",
     "**/*/__tests__",

account-kit/infra/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "typescript-template/base.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "jsx": "preserve"
   }

account-kit/plugingen/package.json

@@ -44,7 +44,6 @@
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
     "typescript": "^5.0.4",
-    "typescript-template": "*",
     "vitest": "^2.0.4"
   },
   "publishConfig": {

account-kit/plugingen/tsconfig.build.json

@@ -1,5 +1,5 @@
 {
-  "extends": "typescript-template/build.json",
+  "extends": "../../tsconfig.build.json",
   "exclude": [
     "node_modules",
     "**/*/__tests__",

account-kit/plugingen/tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "typescript-template/base.json"
+  "extends": "../../tsconfig.base.json"
 }

account-kit/react/.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
+import react from "@vitejs/plugin-react";
+import { mergeConfig } from "vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))"],
+  addons: ["@storybook/addon-essentials", "@storybook/addon-interactions"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+
+  viteFinal: async (config) =>
+    mergeConfig(config, {
+      plugins: [react(), nxViteTsPaths()],
+    }),
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs

account-kit/react/.storybook/preview.ts

@@ -0,0 +1 @@
+import "./tailwind.css";

account-kit/react/.storybook/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

account-kit/react/package.json

@@ -47,11 +47,12 @@
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.28.9",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.45",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.0.4",
-    "typescript-template": "*",
     "vitest": "^2.0.4"
   },
   "dependencies": {

account-kit/react/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

account-kit/react/src/components/button.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./button.js";
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  title: "Button",
+};
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  render: (args) => {
+    return <Button {...args}>Default</Button>;
+  },
+};

account-kit/react/tailwind.config.js

@@ -0,0 +1,9 @@
+import { withAccountKitUi } from "./src/tailwind/plugin.js";
+
+export default withAccountKitUi({
+  content: ["./src/**/*.{js,ts,jsx,tsx}", "./.storybook/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+});

account-kit/react/tsconfig.build.json

@@ -1,5 +1,5 @@
 {
-  "extends": "typescript-template/build.json",
+  "extends": "../../tsconfig.build.json",
   "exclude": [
     "node_modules",
     "**/*/__tests__",

account-kit/react/tsconfig.json

@@ -1,6 +1,17 @@
 {
-  "extends": "typescript-template/base.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "jsx": "preserve"
-  }
+  },
+  "exclude": [
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.storybook.json"
+    }
+  ]
 }

account-kit/react/tsconfig.storybook.json

@@ -0,0 +1,38 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "outDir": ""
+  },
+  "files": [
+    "../../node_modules/@nx/react/typings/styled-jsx.d.ts",
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.js"
+  ],
+  "include": [
+    "src/**/*.stories.ts",
+    "src/**/*.stories.js",
+    "src/**/*.stories.jsx",
+    "src/**/*.stories.tsx",
+    "src/**/*.tsx",
+    "src/**/*.ts",
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.stories.mdx",
+    "**/*.stories.tsx",
+    ".storybook/*.js",
+    ".storybook/*.ts"
+  ]
+}

account-kit/signer/package.json

@@ -45,7 +45,6 @@
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.0.4",
-    "typescript-template": "*",
     "vitest": "^2.0.4"
   },
   "dependencies": {

account-kit/signer/tsconfig.build.json

@@ -1,5 +1,5 @@
 {
-  "extends": "typescript-template/build.json",
+  "extends": "../../tsconfig.build.json",
   "exclude": [
     "node_modules",
     "**/*/__tests__",

account-kit/signer/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "typescript-template/base.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "jsx": "preserve"
   }

account-kit/smart-contracts/package.json

@@ -51,7 +51,6 @@
     "dedent": "^1.5.1",
     "dotenv": "^16.3.1",
     "typescript": "^5.0.4",
-    "typescript-template": "*",
     "vitest": "^2.0.4"
   },
   "publishConfig": {

account-kit/smart-contracts/tsconfig.build.json

@@ -1,5 +1,5 @@
 {
-  "extends": "typescript-template/build.json",
+  "extends": "../../tsconfig.build.json",
   "exclude": [
     "node_modules",
     "**/*/__tests__",

account-kit/smart-contracts/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "typescript-template/base.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "paths": {
       "@account-kit/smart-contracts": ["./src/index.ts"],

doc-gen/package.json

@@ -40,7 +40,6 @@
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
     "typescript": "^5.0.4",
-    "typescript-template": "*",
     "vitest": "^2.0.4"
   },
   "publishConfig": {

doc-gen/tsconfig.build.json

@@ -1,5 +1,5 @@
 {
-  "extends": "typescript-template/build.json",
+  "extends": "../tsconfig.build.json",
   "exclude": [
     "node_modules",
     "**/*/__tests__",

doc-gen/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "typescript-template/base.json",
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "module": "NodeNext",
     "moduleResolution": "NodeNext"

templates/eslint/package.json → libs/eslint/package.json

@@ -24,8 +24,7 @@
     "build": "rm -rf ./dist && tsc --project tsconfig.json --module commonjs --moduleResolution node --removeComments --verbatimModuleSyntax false && echo > ./dist/package.json '{\"type\":\"commonjs\"}'"
   },
   "devDependencies": {
-    "@types/eslint-utils": "^3.0.5",
-    "typescript-template": "*"
+    "@types/eslint-utils": "^3.0.5"
   },
   "dependencies": {
     "@es-joy/jsdoccomment": "^0.43.1",

templates/eslint/tsconfig.json → libs/eslint/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "typescript-template/base.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "./dist",
     "rootDir": "./src",

nx.json

@@ -18,6 +18,22 @@
   "namedInputs": {
     "default": ["{projectRoot}/**/*", "sharedGlobals"],
     "sharedGlobals": [],
-    "production": ["default"]
-  }
+    "production": [
+      "default",
+      "!{projectRoot}/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+      "!{projectRoot}/**/*/.storybook/**/*",
+      "!{projectRoot}/**/*/tsconfig.storybook.json"
+    ]
+  },
+  "plugins": [
+    {
+      "plugin": "@nx/storybook/plugin",
+      "options": {
+        "serveStorybookTargetName": "storybook",
+        "buildStorybookTargetName": "build-storybook",
+        "testStorybookTargetName": "test-storybook",
+        "staticStorybookTargetName": "static-storybook"
+      }
+    }
+  ]
 }