Merge pull request #3 from ixahmedxi/storybook

Storybook
ixahmedxi · Feb 4, 2024 · 80c8117 · 80c8117
2 parents 0c85198 + de7ef39
commit 80c8117
Show file tree

Hide file tree

Showing 31 changed files with 11,487 additions and 3,660 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -131,3 +131,6 @@ dist
 
 # Turborepo
 .turbo
+
+# Storybook
+storybook-static
diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,4 @@
 pnpm-lock.yaml
 drizzle/
-.prettierignore
+.prettierignore
+.gitignore
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
@@ -1,3 +1,16 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground font-sans;
+    font-feature-settings:
+      'rlig' 1,
+      'calt' 1;
+  }
+}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -19,9 +19,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${GeistSans.variable} ${GeistMono.variable} font-sans bg-background text-foreground`}
-      >
+      <body className={`${GeistSans.variable} ${GeistMono.variable}`}>
         <Providers>{children}</Providers>
       </body>
     </html>

diff --git a/cspell.config.yaml b/cspell.config.yaml
@@ -8,19 +8,21 @@ ignorePaths:
   - dist
 words:
   - astro
-  - neonctl
+  - autodocs
   - clsx
   - commitlint
   - esbenp
   - ianvs
   - lockb
+  - neonctl
   - neondatabase
   - nextjs
   - orbitkit
   - packagejson
+  - shadcn
   - tailwindcss
   - tsbuildinfo
   - tsup
   - turborepo
   - typecheck
-  - shadcn
+  - viewports
diff --git a/packages/.DS_Store b/packages/.DS_Store
diff --git a/packages/assets/fonts/GeistMonoVariable.ttf b/packages/assets/fonts/GeistMonoVariable.ttf
diff --git a/packages/assets/fonts/GeistVariable.ttf b/packages/assets/fonts/GeistVariable.ttf
diff --git a/packages/assets/package.json b/packages/assets/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@orbitkit/assets",
+  "version": "0.1.0",
+  "private": true,
+  "description": "OrbitKit's assets package",
+  "license": "MIT",
+  "author": "OrbitKit",
+  "files": [
+    "**/*"
+  ]
+}
diff --git a/packages/config/eslint/base.js b/packages/config/eslint/base.js
@@ -1,6 +1,6 @@
 /** @type {import('eslint').Linter.Config} */
 const config = {
-  ignorePatterns: ['node_modules', 'dist', '.next', '.astro'],
+  ignorePatterns: ['node_modules', 'dist', '.next', '.astro', '!.storybook'],
   env: {
     es2022: true,
     node: true,

diff --git a/packages/config/eslint/package.json b/packages/config/eslint/package.json
@@ -8,7 +8,8 @@
   "files": [
     "./base.js",
     "./next.js",
-    "./react.js"
+    "./react.js",
+    "./storybook.js"
   ],
   "scripts": {
     "lint": "eslint . --cache --max-warnings 0",
@@ -23,7 +24,8 @@
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0"
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.15"
   },
   "volta": {
     "extends": "../../../package.json"

diff --git a/packages/config/eslint/storybook.js b/packages/config/eslint/storybook.js
@@ -0,0 +1,18 @@
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  extends: [
+    'plugin:storybook/recommended',
+    'plugin:storybook/csf',
+    'plugin:storybook/csf-strict',
+  ],
+  overrides: [
+    {
+      files: ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
+      rules: {
+        'storybook/no-title-property-in-meta': 'off',
+      },
+    },
+  ],
+};
+
+module.exports = config;
diff --git a/packages/ui/.DS_Store b/packages/ui/.DS_Store
diff --git a/packages/ui/.eslintrc.cjs b/packages/ui/.eslintrc.cjs
@@ -1,7 +1,7 @@
 /** @type {import('eslint').Linter.Config} */
 const config = {
   root: true,
-  extends: ['orbitkit/base', 'orbitkit/react'],
+  extends: ['orbitkit/base', 'orbitkit/react', 'orbitkit/storybook'],
 };
 
 module.exports = config;
diff --git a/packages/ui/.storybook/globals.css b/packages/ui/.storybook/globals.css
@@ -0,0 +1,37 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* add geist sans variable font ttf file */
+
+@font-face {
+  font-family: 'Geist Sans';
+  src: url('/fonts/GeistVariable.ttf') format('truetype');
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Geist Mono';
+  src: url('/fonts/GeistMonoVariable.ttf') format('truetype');
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+:root {
+  --font-geist-sans: 'Geist Sans';
+  --font-geist-mono: 'Geist Mono';
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings:
+      'rlig' 1,
+      'calt' 1;
+  }
+}
diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
@@ -0,0 +1,45 @@
+import { dirname, join } from 'path';
+
+import { type StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+/**
+ * This function is used to resolve the absolute path of a package. It is needed
+ * in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    {
+      name: getAbsolutePath('@storybook/addon-essentials'),
+      options: {
+        backgrounds: false,
+      },
+    },
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-themes'),
+    getAbsolutePath('@storybook/addon-a11y'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite') as '@storybook/react-vite',
+    options: {},
+  },
+  staticDirs: [getAbsolutePath('@orbitkit/assets')],
+  viteFinal(config) {
+    return mergeConfig(config, {
+      plugins: [tsconfigPaths()],
+    });
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+} satisfies StorybookConfig;
+
+export default config;
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
@@ -0,0 +1,74 @@
+import './globals.css';
+
+import type { Preview } from '@storybook/react';
+
+import { withThemeByClassName } from '@storybook/addon-themes';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { type ReactRenderer } from '@storybook/react';
+
+const customViewports = {
+  '720p': {
+    name: '720p',
+    styles: {
+      width: '1280px',
+      height: '720px',
+    },
+  },
+  '1080p': {
+    name: '1080p',
+    styles: {
+      width: '1920px',
+      height: '1080px',
+    },
+  },
+  '2k': {
+    name: '2K',
+    styles: {
+      width: '2560px',
+      height: '1440px',
+    },
+  },
+  '4k': {
+    name: '4K',
+    styles: {
+      width: '3840px',
+      height: '2160px',
+    },
+  },
+  '21/9': {
+    name: '21/9',
+    styles: {
+      width: '2560px',
+      height: '1080px',
+    },
+  },
+};
+
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    viewport: {
+      viewports: {
+        ...customViewports,
+        ...INITIAL_VIEWPORTS,
+      },
+    },
+  },
+  decorators: [
+    withThemeByClassName<ReactRenderer>({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+    }),
+  ],
+} satisfies Preview;
+
+export default preview;
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -19,12 +19,12 @@
     },
     "./avatar": {
       "import": {
-        "types": "./dist/avatar.d.ts",
-        "default": "./dist/avatar.js"
+        "types": "./dist/primitives/avatar.d.ts",
+        "default": "./dist/primitives/avatar.js"
       },
       "require": {
-        "types": "./dist/avatar.d.cts",
-        "default": "./dist/avatar.cjs"
+        "types": "./dist/primitives/avatar.d.cts",
+        "default": "./dist/primitives/avatar.cjs"
       }
     },
     "./cn": {
@@ -46,11 +46,15 @@
   ],
   "scripts": {
     "build": "tsup",
+    "build-storybook": "storybook build",
     "dev": "tsup --watch",
     "lint": "eslint . --cache --max-warnings 0",
+    "storybook": "storybook dev -p 6006",
+    "test-storybook": "test-storybook",
     "typecheck": "tsc --noEmit --tsBuildInfoFile .tsbuildinfo"
   },
   "dependencies": {
+    "@orbitkit/assets": "workspace:^",
     "@radix-ui/react-avatar": "^1.0.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
@@ -61,14 +65,35 @@
   "devDependencies": {
     "@orbitkit/tailwind": "workspace:^",
     "@orbitkit/tsconfig": "workspace:^",
+    "@storybook/addon-a11y": "^7.6.12",
+    "@storybook/addon-essentials": "^7.6.12",
+    "@storybook/addon-interactions": "^7.6.12",
+    "@storybook/addon-links": "^7.6.12",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/addon-themes": "^7.6.12",
+    "@storybook/addon-viewport": "^7.6.12",
+    "@storybook/blocks": "^7.6.12",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/react": "^7.6.12",
+    "@storybook/react-vite": "^7.6.12",
+    "@storybook/test": "^7.6.12",
+    "@storybook/test-runner": "^0.16.0",
+    "@storybook/testing-library": "^0.2.2",
     "@types/node": "^20.11.16",
     "@types/react": "^18.2.51",
     "@types/react-dom": "^18.2.18",
     "autoprefixer": "^10.4.17",
     "eslint-config-orbitkit": "workspace:^",
+    "playwright": "^1.41.2",
     "postcss": "^8.4.33",
     "prettier": "^3.2.4",
+    "storybook": "^7.6.12",
     "tailwindcss": "^3.4.1",
-    "tsup": "^8.0.1"
+    "tsup": "^8.0.1",
+    "vite": "^5.0.12",
+    "vite-tsconfig-paths": "^4.3.1"
+  },
+  "volta": {
+    "extends": "../../package.json"
   }
 }
diff --git a/packages/ui/postcss.config.cjs b/packages/ui/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -1,2 +1,2 @@
-export * from './avatar';
+export * from './primitives/avatar';
 export * from './utils/cn';