Remove storybook and setup lightweight ladle alternative (#7666)

Author: jonathanawesome

.eslintrc.cjs

@@ -46,6 +46,7 @@ module.exports = {
     'rules',
     'out',
     '.hive',
+    'packages/web/app/.ladle/**',
     'public',
     'packages/web/app/src/graphql/index.ts',
     'packages/libraries/cli/src/sdk.ts',

.github/workflows/main.yaml

@@ -79,11 +79,6 @@ jobs:
     uses: ./.github/workflows/website.yaml
     secrets: inherit
 
-  # Deploy Storybook to CloudFlare Pages
-  storybook:
-    uses: ./.github/workflows/storybook.yaml
-    secrets: inherit
-
   # GraphQL Schema Publish
   graphql-schema:
     uses: ./.github/workflows/graphql-schema-publish.yaml

.github/workflows/pr.yaml

@@ -89,12 +89,6 @@ jobs:
     if: ${{ !github.event.pull_request.head.repo.fork }}
     secrets: inherit
 
-  # Deploy Storybook preview to CloudFlare Pages
-  storybook-preview:
-    uses: ./.github/workflows/storybook.yaml
-    if: ${{ !github.event.pull_request.head.repo.fork }}
-    secrets: inherit
-
   # Release alpha version on NPM for Hive libraries
   alpha:
     uses: ./.github/workflows/release-alpha.yaml

.github/workflows/storybook.yaml

@@ -13,7 +13,6 @@ __snapshots__/
 /packages/web/app/src/graphql/index.ts
 /packages/web/app/next.config.mjs
 /packages/migrations/test/utils/testkit.ts
-/packages/web/app/storybook-static
 /packages/web/docs/out/
 /packages/web/docs/public/privacy-policy.html
 

.prettierignore

@@ -15,9 +15,6 @@
 # production
 /build
 
-# storybook
-/storybook-static
-
 # misc
 .DS_Store
 *.pem

packages/web/app/.gitignore

@@ -0,0 +1,23 @@
+import '../src/index.css';
+import { useEffect } from 'react';
+import type { GlobalProvider } from '@ladle/react';
+import { ThemeProvider, useTheme } from '../src/components/theme/theme-provider';
+
+function ThemeSynchronizer({ theme }: { theme: string }) {
+  const { setTheme } = useTheme();
+  useEffect(() => {
+    if (theme === 'dark' || theme === 'light') {
+      setTheme(theme);
+    } else {
+      setTheme('system');
+    }
+  }, [theme, setTheme]);
+  return null;
+}
+
+export const Provider: GlobalProvider = ({ children, globalState }) => (
+  <ThemeProvider>
+    <ThemeSynchronizer theme={globalState.theme} />
+    {children}
+  </ThemeProvider>
+);

packages/web/app/.ladle/components.tsx

@@ -0,0 +1,5 @@
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+  stories: 'src/**/*.stories.{js,jsx,ts,tsx}',
+  viteConfig: '.ladle/vite.config.ts',
+};

packages/web/app/.ladle/config.mjs

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [tsconfigPaths(), tailwindcss()],
+});