chore: storybook update

henrynoowah · Jan 6, 2025 · 617d69f · 617d69f
1 parent 1474b4f
commit 617d69f
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 30 deletions.
diff --git a/apps/docs/.storybook/main.ts b/apps/docs/.storybook/main.ts
@@ -5,6 +5,11 @@ import type { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
   framework: "@storybook/react-vite",
   stories: ["../stories/*.stories.tsx", "../stories/**/*.stories.tsx"],
+  addons: [
+    "@storybook/addon-docs",
+    "@storybook/addon-essentials",
+    "@storybook/addon-links",
+  ],
   core: {
     builder: "@storybook/builder-vite",
   },

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -19,8 +19,10 @@
     "@repo/config-eslint": "workspace:*",
     "@repo/config-typescript": "workspace:*",
     "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-docs": "^8.4.7",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-links": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
     "@storybook/react": "^8.4.7",
     "@storybook/builder-vite": "^8.4.7",
     "@storybook/react-vite": "^8.4.7",

diff --git a/apps/docs/stories/editor.stories.tsx b/apps/docs/stories/editor.stories.tsx
@@ -3,14 +3,10 @@ import Editor from "@noowah/content-builder/editor";
 
 const meta: Meta<typeof Editor> = {
   title: "UI/Editor",
-  component: (props) => (
-    <div className="nwcb-w-full nwcb-flex nwcb-justify-center">
-      <Editor {...props} />,
-    </div>
-  ),
-  tags: ["autodocs"],
+  component: Editor,
+  decorators: [(Story) => <Story />],
+  tags: ["!autodocs"],
   parameters: { layout: "full" },
-  // parameters: { layout: "centered" },
 };
 
 export default meta;
@@ -19,9 +15,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    // children: (props) => <SettingsButton {...props} />,
-    onChange: () => {},
     onSubmit: () => {},
+    onChange: () => {},
     data: {
       id: "page_1",
       title: "About Us",

diff --git a/package.json b/package.json
@@ -1,8 +1,9 @@
 {
   "private": true,
   "scripts": {
-    "build": "turbo run build",
-    "dev": "turbo run dev",
+    "build": "turbo build",
+    "dev": "turbo dev",
+    "preview-storybook": "turbo run preview-storybook --filter=./apps/docs",
     "lint": "turbo run lint",
     "clean": "turbo run clean && rm -rf node_modules",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -4,9 +4,10 @@
   "description": "",
   "license": "MIT",
   "scripts": {
-    "build": "tsup",
+    "build": "npm run build:tailwind & tsup",
     "lint": "eslint src/",
-    "dev": "tailwindcss -i ./src/global.css -o ./dist/index.css & tsup --watch",
+    "dev": "npm run build:tailwind & tsup --watch",
+    "build:tailwind": "tailwindcss -i ./src/global.css -o ./dist/index.css",
     "type-check": "tsc --noEmit"
   },
   "main": "./dist/index.js",

diff --git a/packages/ui/src/components/editor/Editor.tsx b/packages/ui/src/components/editor/Editor.tsx
@@ -18,6 +18,7 @@ import { convertJSONToCSS } from "../../lib";
 import type {
   Block,
   EditorContextProps,
+  EditorProps,
   Page,
   Section,
   SectionEditor,
@@ -28,21 +29,6 @@ import { twMerge } from "tailwind-merge";
 
 const SectionEditor = lazy(() => import("./section-editor"));
 
-interface EditorProps {
-  view?: "web" | "mobile";
-  data: Page;
-  onChange?: (page: Page) => void;
-  onSubmit?: (page: Page) => void;
-  children?: (
-    ctx: EditorContextProps & {
-      addBlock: (sectionId: string, block: Block) => void;
-    }
-  ) => React.ReactNode;
-  options?: {
-    focus: (() => React.ReactNode) | boolean;
-  };
-}
-
 const Editor = ({ view = "web", data, onSubmit, children }: EditorProps) => {
   const methods = useForm<Page>({
     values: data,

diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
@@ -64,8 +64,24 @@ type Block = {
   content?: string;
 };
 
+type EditorProps = {
+  view?: "web" | "mobile";
+  data: Page;
+  onChange?: (page: Page) => void;
+  onSubmit?: (page: Page) => void;
+  children?: (
+    ctx: EditorContextProps & {
+      addBlock: (sectionId: string, block: Block) => void;
+    }
+  ) => React.ReactNode;
+  options?: {
+    focus: (() => React.ReactNode) | boolean;
+  };
+};
+
 export type {
   EditorContextProps,
+  EditorProps,
   Page,
   Section,
   SectionEditor,

diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "extends": "@repo/config-typescript/react-library.json",
-  "include": ["."],
+  "include": [".", "src/**/*"],
   "exclude": ["dist", "build", "node_modules"],
   "compilerOptions": {
     "baseUrl": ".",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/turbo.json b/turbo.json
@@ -13,8 +13,11 @@
       "cache": false,
       "persistent": true
     },
+    "preview-storybook": {
+      "cache": false
+    },
     "clean": {
       "cache": false
     }
   }
-}
+}