chore: separate stories into docs package (#3152)

Author: talkor

.cursor/rules/file-structures.mdc

@@ -17,7 +17,6 @@ The `packages/core/src` directory generally contains the following:
 - **`utils/`**: Includes utility functions that are not specific to any single component or hook.
 - **`types/`**: Defines shared TypeScript types and interfaces used throughout the `@vibe/core` library.
 - **`constants/`**: Stores constant values used across the library.
-- **`storybook/`**: Contains global Storybook configurations, decorators, or providers.
 - **`styles/`**: Can include global styles or theme-related style files, although most component-specific styling is co-located with the component. It is preferred to not add new code to this directory.
 - **`index.ts`**: The main export file for the `@vibe/core` library, re-exporting key modules and components.
 
@@ -37,8 +36,6 @@ Each component within `packages/core/src/components/` should follow a consistent
 - **`__tests__/`**: Contains unit and integration tests **only for the main component files** in the root directory.
   - Files within this directory follow the pattern `ComponentName.test.ts`.
   - **DO NOT** place tests for subcomponents, hooks, utils, or context in this directory.
-- **`__stories__/`**: Holds Storybook stories for the component.
-  - Files are typically named `ComponentName.stories.tsx`.
 - **`components/`**: For more complex components, this directory can house sub-components that are only used by `ComponentName`.
   - **Each subcomponent should have its own `__tests__/` directory** if tests are needed.
   - Structure: `ComponentName/components/SubComponent/__tests__/SubComponent.test.tsx`

.cursor/rules/naming-conventions.mdc

@@ -44,7 +44,7 @@ This document outlines the naming conventions to be followed when developing wit
   - **Utility Tests**: Place in `ComponentName/utils/__tests__/utilityName.test.ts`
   - **Context Tests**: Place in `ComponentName/context/__tests__/ComponentNameContext.test.ts`
   - **DO NOT** centralize all tests in the component root `__tests__` directory.
-- **Stories**: Storybook files SHOULD be placed in a `__stories__` subdirectory.
+- **Stories**: Storybook files SHOULD be placed in a `packages/docs` subdirectory.
   - Story files typically follow the pattern `ComponentName.stories.tsx`.
   - Refer to the storybook-stories.mdc file in the monorepo for Storybook specific conventions.
 - **Helper/Utility Files**: Utility functions or helper components specific to a single component can be placed in a `helper` or `utils` subdirectory, or directly within the component folder if small and highly specific.

.cursor/rules/storybook-stories.mdc

@@ -1,26 +1,24 @@
 ---
-description: "Guides the creation and modification of Storybook files specifically within the 'packages/core' package. It covers conventions, best practices, and helps answer questions about existing story implementations within 'packages/core'."
+description: "Guides the creation and modification of Storybook files specifically within the 'packages/docs' package. It covers conventions, best practices, and helps answer questions about existing story implementations within 'packages/core'."
 globs:
-  - "packages/core/**/__stories__/**/*.stories.tsx"
-  - "packages/core/**/__stories__/**/*.mdx"
-  - "packages/core/src/storybook/**"
+  - "packages/docs/**/*.stories.tsx"
+  - "packages/docs/**/*.mdx"
 alwaysApply: false
 ---
 
-# Storybook Stories for @vibe/core library
+# Storybook Stories for @vibe/docs library
 
-This document outlines the rules and best practices for creating and maintaining Storybook stories for the `@vibe/core` library.
-
-**Storybook Scope:** Storybook is exclusively used for the `@vibe/core` library within this monorepo. Do not create stories for components or utilities in other packages. Stories should _only_ be written for UI components found in `packages/core/src/components/`. Stories for custom hooks (e.g., `useWizard`) are not to be created.
+This document outlines the rules and best practices for creating and maintaining Storybook stories for the `@vibe/docs` library.
 
 ## 1. File Structure and Naming Conventions
 
-- **Location:** Component stories **must** be co-located with their respective component. Each component that requires stories must have a `__stories__` subdirectory.
-  - Example: `packages/core/src/components/ComponentName/__stories__/`
-- **Story File:** Inside the `__stories__` directory, the main story file **must** be named after the component, using PascalCase, followed by the `.stories.tsx` extension.
-  - Example: `packages/core/src/components/ComponentName/__stories__/ComponentName.stories.tsx`
-- **MDX File:** An accompanying MDX documentation file **must** also be created in the `__stories__` directory, named after the component.
-  - Example: `packages/core/src/components/ComponentName/__stories__/ComponentName.mdx`
+- **Location:** Component stories are located in the `@vibe/docs` package, organized by component type in `packages/docs/src/pages/`.
+  - Example for components: `packages/docs/src/pages/components/ComponentName/`
+  - Example for hooks: `packages/docs/src/pages/hooks/hookName/`
+- **Story File:** The main story file **must** be named after the component, using PascalCase, followed by the `.stories.tsx` extension.
+  - Example: `packages/docs/src/pages/components/ComponentName/ComponentName.stories.tsx`
+- **MDX File:** An accompanying MDX documentation file **must** also be created in the same directory, named after the component.
+  - Example: `packages/docs/src/pages/components/ComponentName/ComponentName.mdx`
 
 ## 2. `.stories.tsx` File Structure and Content
 
@@ -41,7 +39,7 @@ The default export defines the component's metadata for Storybook.
 ```typescript
 import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
-import ComponentName from "../ComponentName"; // Adjust path as necessary
+import { ComponentName } from "@vibe/core";
 // Import other Vibe components or types if needed for stories
 
 export default {
@@ -252,7 +250,7 @@ The following is a template for `ComponentName.mdx`:
 ````mdx
 import { Meta } from "@storybook/blocks";
 import * as ComponentStories from "./ComponentName.stories"; // Import the stories
-import ComponentName from "../ComponentName";
+import { ComponentName } from "@vibe/core";
 
 <Meta of={ComponentStories} />
 

.github/workflows/chromatic.yml

@@ -33,7 +33,7 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          workingDir: packages/core
+          workingDir: packages/docs
           exitOnceUploaded: true
           onlyChanged: false
           skip: ${{ needs.build.outputs.has_changes == 'false' }}

.github/workflows/publish-storybook.yml

@@ -21,8 +21,8 @@ jobs:
       - name: Build & deploy Storybooks to GitHub Pages
         run: |
           yarn lerna run build --include-dependencies
-          yarn lerna run --scope @vibe/core build-storybook
-          cd packages/core/static_storybook
+          yarn lerna run --scope @vibe/docs build-storybook
+          cd packages/docs/static_storybook
           echo "vibe.monday.com" > ./CNAME
         env:
           NODE_AUTH_TOKEN: ${{ secrets.npm_token }}

components/button/package.json

@@ -30,7 +30,6 @@
   "scripts": {
     "build": "rollup -c",
     "test": "vitest run",
-    "storybook": "storybook dev -p 7008",
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
@@ -43,13 +42,11 @@
   "devDependencies": {
     "@testing-library/react": "^12.1.2",
     "@vibe/config": "3.0.2",
-    "@vibe/icons": "1.9.0",
-    "@vibe/storybook-config": "3.0.2",
+    "@vibe/icons": "1.11.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-test-renderer": "16",
     "typescript": "^4.7.3",
-    "vibe-storybook-components": "1.0.2",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {

components/icon/package.json

@@ -30,7 +30,6 @@
   "scripts": {
     "build": "rollup -c",
     "test": "vitest run",
-    "storybook": "storybook dev -p 7008",
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
@@ -41,12 +40,9 @@
   },
   "devDependencies": {
     "@vibe/config": "3.0.2",
-    "@vibe/icons": "1.11.0",
-    "@vibe/storybook-config": "3.0.2",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "typescript": "^4.7.3",
-    "vibe-storybook-components": "1.0.2",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {

components/loader/package.json

@@ -30,7 +30,6 @@
   "scripts": {
     "build": "rollup -c",
     "test": "vitest run",
-    "storybook": "storybook dev -p 7008",
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
@@ -40,12 +39,10 @@
   "devDependencies": {
     "@testing-library/react": "^12.1.2",
     "@vibe/config": "3.0.2",
-    "@vibe/storybook-config": "3.0.2",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-test-renderer": "16",
     "typescript": "^4.7.3",
-    "vibe-storybook-components": "1.0.2",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {

components/loader/src/Loader/__stories__/Loader.stories.tsx

@@ -81,10 +81,6 @@
     "build:esm": "rollup -c",
     "build:esm:mock-classnames": "mock_classnames=on rollup -c",
     "build:metadata": "tsx src/scripts/generate-metadata.ts",
-    "storybook": "storybook dev -p 7008",
-    "build-storybook": "storybook build -o static_storybook && node .storybook/storybook-title-fix.js static_storybook",
-    "deploy-storybook": "storybook-to-ghpages",
-    "chromatic:local": "chromatic -t $CHROMATIC_PROJECT_TOKEN",
     "link-local": "npm link && npm start",
     "plop": "plop",
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\"",
@@ -134,7 +130,6 @@
     "@babel/preset-typescript": "^7.23.3",
     "@babel/standalone": "^7.24.4",
     "@babel/types": "^7.24.0",
-    "@chromatic-com/storybook": "^3.2.4",
     "@hot-loader/react-dom": "^16.13.0",
     "@jest/transform": "^29.7.0",
     "@rollup/plugin-babel": "^6.0.2",
@@ -274,9 +269,6 @@
     "*.scss.js",
     "*.css.js"
   ],
-  "storybook-deployer": {
-    "commitMessage": "Deploy Storybook [ci-skip]"
-  },
   "browserslist": [
     "extends browserslist-config-monday"
   ]