docs: migrating from Ladle to StoryBook for API documentation

.github/workflows/deploy-pages.yml

@@ -45,8 +45,8 @@ jobs:
       - name: Build packages and documentation
         run: |
           npx lerna run build --scope="@versini/ui-styles"
-          npx lerna run build --ignore="@versini/example-*" --ignore="@versini/documentation" --ignore="@versini/bundlesize" --ignore="@versini/ui-styles"
-          npx lerna run build:ci --scope="@versini/documentation"
+          npx lerna run build --ignore="@versini/example-*" --ignore="@versini/documentation" --ignore="@versini/api" --ignore="@versini/bundlesize" --ignore="@versini/ui-styles"
+          npx lerna run build --scope="@versini/api"
 
       - name: Setup Pages
         if: ${{ always() }}
@@ -56,7 +56,7 @@ jobs:
         if: ${{ always() }}
         uses: actions/upload-pages-artifact@v3
         with:
-          path: "./packages/documentation/dist"
+          path: "./packages/api/dist"
 
       - name: Deploy to GitHub Pages
         if: ${{ always() }}

.github/workflows/pull-requests.yml

@@ -35,7 +35,7 @@ jobs:
       - name: Build packages
         run: |
           npx lerna run build --scope="@versini/ui-styles"
-          npx lerna run build --ignore="@versini/example-*" --ignore="@versini/documentation" --ignore="@versini/ui-styles"
+          npx lerna run build --ignore="@versini/example-*" --ignore="@versini/documentation" --ignore="@versini/api" --ignore="@versini/ui-styles"
 
       - name: Run Bundle Size
         run: |
@@ -79,10 +79,10 @@ jobs:
 
       - name: Run Lint and Coverage
         run: |
-          npx lerna run lint --ignore="@versini/documentation"
+          npx lerna run lint --ignore="@versini/documentation" --ignore="@versini/api"
           npx lerna run build --scope="@versini/ui-styles"
-          npx lerna run build --ignore="@versini/documentation" --ignore="@versini/ui-styles"
-          npx lerna run test:coverage --ignore="@versini/documentation"
+          npx lerna run build --ignore="@versini/documentation" --ignore="@versini/api" --ignore="@versini/ui-styles"
+          npx lerna run test:coverage --ignore="@versini/documentation" --ignore="@versini/api"
 
   release-bundlesize:
     if: github.head_ref == 'release-please--branches--main'
@@ -126,7 +126,7 @@ jobs:
       - name: Run Bundle Size For Release PR
         run: |
           npx lerna run build --scope="@versini/ui-styles"
-          npx lerna run build --ignore="@versini/example-*" --ignore="@versini/documentation" --ignore="@versini/ui-styles"
+          npx lerna run build --ignore="@versini/example-*" --ignore="@versini/documentation" --ignore="@versini/api" --ignore="@versini/ui-styles"
           npx lerna run stats:release
 
       - name: Commit Release Stats to Release PR

.github/workflows/release-please.yml

@@ -41,7 +41,7 @@ jobs:
         if: ${{ steps.release.outputs.releases_created }}
         run: |
           npx lerna run build --scope="@versini/ui-styles"
-          npx lerna run build --ignore="@versini/example-*" --ignore="@versini/documentation" --ignore="@versini/bundlesize" --ignore="@versini/ui-styles"
+          npx lerna run build --ignore="@versini/example-*" --ignore="@versini/documentation" --ignore="@versini/api" --ignore="@versini/bundlesize" --ignore="@versini/ui-styles"
 
       # Release Please has already incremented versions
       # and published tags, so we just need to publish

.gitignore

@@ -75,3 +75,5 @@ types
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+*storybook.log

examples/with-vite/package.json

@@ -21,10 +21,10 @@
 		"@versini/ui-main": "workspace:../../packages/ui-main",
 		"@versini/ui-menu": "workspace:../../packages/ui-menu",
 		"@versini/ui-panel": "workspace:../../packages/ui-panel",
-		"@versini/ui-textinput": "workspace:../../packages/ui-textinput",
 		"@versini/ui-styles": "workspace:../../packages/ui-styles",
 		"@versini/ui-system": "workspace:../../packages/ui-system",
 		"@versini/ui-table": "workspace:../../packages/ui-table",
+		"@versini/ui-textinput": "workspace:../../packages/ui-textinput",
 		"react": "18.3.1",
 		"react-dom": "18.3.1"
 	}

packages/api/.storybook/main.js

@@ -0,0 +1,34 @@
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+
+const config = {
+	stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+	addons: [
+		{
+			name: "@storybook/addon-essentials",
+		},
+		"@storybook/addon-links",
+	],
+	framework: {
+		name: "@storybook/react-vite",
+		options: {},
+	},
+	docs: {
+		// autodocs: true,
+	},
+	typescript: {
+		reactDocgen: "react-docgen-typescript",
+		reactDocgenTypescriptOptions: {
+			tsconfigPath: "./tsconfig.json",
+			propFilter: (prop) => {
+				const res =
+					/@versini/.test(prop.parent?.fileName) ||
+					!/node_modules/.test(prop.parent?.fileName);
+				return prop.parent ? res : true;
+			},
+			shouldExtractLiteralValuesFromEnum: true,
+			savePropValueAsString: true,
+			shouldRemoveUndefinedFromOptional: true,
+		},
+	},
+};
+export default config;

packages/api/.storybook/preview.js

@@ -0,0 +1,31 @@
+/** @type { import('@storybook/react').Preview } */
+import "./styles.css";
+import "@versini/ui-button/dist/style.css";
+import "@versini/ui-pill/dist/style.css";
+
+const preview = {
+	parameters: {
+		options: {
+			storySort: {
+				order: [
+					"Overview",
+					"Installation",
+					"Configuration",
+					"Usage",
+					"Release Tags",
+					"Components",
+				],
+			},
+		},
+		controls: {
+			// show description and default values in the individual stories (basic, etc.)
+			expanded: true,
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+	},
+};
+
+export default preview;

packages/api/.storybook/styles.css

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

packages/api/nodemon.json

@@ -0,0 +1,33 @@
+{
+	"watch": [
+		"tailwind.config.js",
+		".storybook/*.*",
+
+		"../ui-styles/src/**/*.*",
+		"../ui-fingerprint/src/**/*.*",
+		"../ui-icons/src/**/*.*",
+		"../ui-system/src/**/*.*",
+
+		"../ui-anchor/src/**/*.*",
+		"../ui-bubble/src/**/*.*",
+		"../ui-button/src/**/*.*",
+		"../ui-card/src/**/*.*",
+		"../ui-footer/src/**/*.*",
+		"../ui-header/src/**/*.*",
+		"../ui-hooks/src/**/*.*",
+		"../ui-icons/src/**/*.*",
+		"../ui-main/src/**/*.*",
+		"../ui-menu/src/**/*.*",
+		"../ui-panel/src/**/*.*",
+		"../ui-pill/src/**/*.*",
+		"../ui-private/src/**/*.*",
+		"../ui-spinner/src/**/*.*",
+		"../ui-system/src/**/*.*",
+		"../ui-table/src/**/*.*",
+		"../ui-textarea/src/**/*.*",
+		"../ui-textinput/src/**/*.*",
+		"../ui-toggle/src/**/*.*",
+		"../ui-togglegroup/src/**/*.*",
+		"../ui-truncate/src/**/*.*"
+	]
+}

packages/api/package.json

@@ -0,0 +1,43 @@
+{
+	"name": "@versini/api",
+	"version": "0.0.0",
+	"license": "MIT",
+	"author": "Arno Versini",
+	"private": true,
+	"scripts": {
+		"clean": "rimraf dist",
+		"dev": "nodemon",
+		"build": "tsc && storybook build --disable-telemetry --output-dir dist",
+		"lint": "biome lint src",
+		"start": "storybook dev -p 6006 --no-open --disable-telemetry"
+	},
+	"dependencies": {
+		"@versini/ui-anchor": "workspace:../../packages/ui-anchor",
+		"@versini/ui-button": "workspace:../../packages/ui-button",
+		"@versini/ui-card": "workspace:../../packages/ui-card",
+		"@versini/ui-footer": "workspace:../../packages/ui-footer",
+		"@versini/ui-form": "workspace:../../packages/ui-form",
+		"@versini/ui-header": "workspace:../../packages/ui-header",
+		"@versini/ui-icons": "workspace:../../packages/ui-icons",
+		"@versini/ui-main": "workspace:../../packages/ui-main",
+		"@versini/ui-menu": "workspace:../../packages/ui-menu",
+		"@versini/ui-pill": "workspace:../../packages/ui-pill",
+		"@versini/ui-panel": "workspace:../../packages/ui-panel",
+		"@versini/ui-styles": "workspace:../../packages/ui-styles",
+		"@versini/ui-system": "workspace:../../packages/ui-system",
+		"@versini/ui-table": "workspace:../../packages/ui-table",
+		"@versini/ui-textinput": "workspace:../../packages/ui-textinput",
+		"react": "18.3.1",
+		"react-dom": "18.3.1"
+	},
+	"devDependencies": {
+		"@storybook/addon-essentials": "8.4.7",
+		"@storybook/blocks": "8.4.7",
+		"@storybook/addon-links": "8.4.7",
+		"@storybook/react": "8.4.7",
+		"@storybook/react-vite": "8.4.7",
+		"@storybook/test": "8.4.7",
+		"prop-types": "15.8.1",
+		"storybook": "8.4.7"
+	}
+}

packages/api/postcss.config.js

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

packages/api/src/getting-started/Changelogs.mdx

@@ -0,0 +1,59 @@
+import { Meta, Markdown, Unstyled } from "@storybook/blocks";
+import { Card } from "@versini/ui-card";
+
+import Navigators from "./helpers/Navigators";
+import ComponentsChangelog from "../../../ui-components/CHANGELOG.md?raw";
+import StylesChangelog from "../../../ui-styles/CHANGELOG.md?raw";
+import FormComponentsChangelog from "../../../ui-form/CHANGELOG.md?raw";
+import IconsChangelog from "../../../ui-icons/CHANGELOG.md?raw";
+import SystemChangelog from "../../../ui-system/CHANGELOG.md?raw";
+
+<Meta title="Changelogs" />
+
+<div className="prose">
+  <h1>Changelogs</h1>
+
+<Unstyled>
+  <div className="mt-4" />
+</Unstyled>
+
+<details>
+  <summary>Components</summary>
+  <Card mode="light">
+    <Markdown>{ComponentsChangelog}</Markdown>
+  </Card>
+</details>
+
+<details>
+  <summary>Styles</summary>
+  <Card mode="light">
+    <Markdown>{StylesChangelog}</Markdown>
+  </Card>
+</details>
+
+<details>
+  <summary>Form Components</summary>
+  <Card mode="light">
+    <Markdown>{FormComponentsChangelog}</Markdown>
+  </Card>
+</details>
+
+<details>
+  <summary>Icons</summary>
+  <Card mode="light">
+    <Markdown>{IconsChangelog}</Markdown>
+  </Card>
+</details>
+
+<details>
+  <summary>System</summary>
+  <Card mode="light">
+    <Markdown>{SystemChangelog}</Markdown>
+  </Card>
+</details>
+
+<Unstyled>
+  <div className="mt-4" />
+</Unstyled>
+  <Navigators leftLink="Release Tags" />
+</div>

packages/api/src/getting-started/Configuration.mdx

@@ -0,0 +1,40 @@
+import { Meta } from "@storybook/blocks";
+
+import Navigators from "./helpers/Navigators";
+import Highlight from "./helpers/Highlight";
+import codeBlocks from "./helpers/codeBlocks";
+
+<Meta title="Configuration" />
+
+  <div className="prose">
+    <h1>Configuration</h1>
+    <h2>JavaScript</h2>
+    <ul>
+      <li>
+        <p>UI Components come un-bundled, which means you need to use a bundler
+          such as Webpack, Vite or Rollup to bundle components into your
+          application. </p>
+      </li>
+      <li>
+        <p>UI Components are tree-shakeable, side-effect free and each component style is self-contained.</p>
+      </li>
+      <li>
+        <p>Please refer to each component API documentation (under the Components or Form components menu) to see how they should be imported, what their individual props are as well as many different examples. </p>
+      </li>
+    </ul>
+
+    <h2>CSS</h2>
+
+    <p>TailwindCSS is required to style the components within the{" "}
+      <strong>UI-Components</strong> library. Thanks to our TailwindCSS plugin,
+      you can take advantage of tree-shaking unused styles:</p>
+    <div>
+      <Highlight
+        codeBlock={codeBlocks.config.code}
+        language={codeBlocks.config.language}
+      />
+    </div>
+
+    <Navigators leftLink="Installation" rightLink="Usage" />
+
+  </div>