Merge pull request #36 from aversini/storybook

docs: replacing custom documentation with StoryBook

configuration/lint-staged.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
 	"*.{ts,js,tsx,jsx}": [
-		"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
+		"eslint --ext ts,tsx --report-unused-disable-directives --fix",
 		"prettier --write",
 	],
 };

package.json

@@ -12,7 +12,10 @@
 		"test": "yarn lerna run test"
 	},
 	"devDependencies": {
-		"@versini/dev-dependencies-client": "1.1.1"
+		"@versini/dev-dependencies-client": "1.1.2"
+	},
+	"resolutions": {
+		"prettier": "3.0.3"
 	},
 	"packageManager": "[email protected]"
 }

packages/documentation/.storybook/main.js

@@ -0,0 +1,27 @@
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+
+import { dirname, join } from "path";
+
+/**
+ * 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) {
+	return dirname(require.resolve(join(value, "package.json")));
+}
+
+const config = {
+	stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+	addons: [
+		getAbsolutePath("@storybook/addon-essentials"),
+		getAbsolutePath("@storybook/addon-a11y"),
+	],
+	framework: {
+		name: getAbsolutePath("@storybook/react-vite"),
+		options: {},
+	},
+	docs: {
+		autodocs: "tag",
+	},
+};
+export default config;

packages/documentation/.storybook/preview.js

@@ -0,0 +1,18 @@
+/** @type { import('@storybook/react').Preview } */
+
+import "../src/index.css";
+import "@versini/ui-components/dist/style.css";
+
+const preview = {
+	parameters: {
+		actions: { argTypesRegex: "^on[A-Z].*" },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+	},
+};
+
+export default preview;

packages/documentation/package.json

@@ -6,14 +6,15 @@
 	"type": "module",
 	"private": true,
 	"scripts": {
+		"build:storybook": "storybook build -o dist",
+		"build": "npm-run-all --serial clean build:storybook",
 		"bundlesize": "bundlemon",
 		"clean": "rimraf dist",
-		"dev": "vite --host",
-		"build": "yarn run clean && vite build",
-		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix --color",
+		"dev": "storybook dev -p 6006 --no-open",
+		"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix --color",
 		"start": "static-server dist --port 5173",
-		"test": "echo \"WARNING: no test specified\" && exit 0",
-		"test:coverage": "echo \"WARNING: no test specified\" && exit 0"
+		"test:coverage": "echo \"WARNING: no test specified\" && exit 0",
+		"test": "echo \"WARNING: no test specified\" && exit 0"
 	},
 	"dependencies": {
 		"@versini/ui-components": "*",
@@ -23,7 +24,17 @@
 		"postcss": "8.4.31",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"tailwindcss": "3.3.3",
+		"tailwindcss": "3.3.5",
 		"uuid": "9.0.1"
+	},
+	"devDependencies": {
+		"@storybook/addon-a11y": "7.5.3",
+		"@storybook/addon-essentials": "7.5.3",
+		"@storybook/blocks": "7.5.3",
+		"@storybook/react": "7.5.3",
+		"@storybook/react-vite": "7.5.3",
+		"@storybook/testing-library": "0.2.2",
+		"prop-types": "15.8.1",
+		"storybook": "7.5.3"
 	}
 }

packages/documentation/src/stories/Button.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "@versini/ui-components";
+
+const meta: Meta<typeof Button> = {
+	component: Button,
+	parameters: {
+		controls: { exclude: ["spacing"], sort: "requiredFirst" },
+	},
+	args: {
+		disabled: false,
+		fullWidth: false,
+		kind: "dark",
+		slim: false,
+		type: "button",
+		raw: false,
+	},
+	argTypes: {
+		className: {
+			control: "text",
+		},
+		kind: {
+			options: ["dark", "light"],
+			control: { type: "radio" },
+		},
+		slim: {
+			control: "boolean",
+		},
+		disabled: {
+			control: "boolean",
+		},
+		fullWidth: {
+			control: "boolean",
+		},
+		raw: {
+			control: "boolean",
+		},
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {
+	render: (args) => (
+		<div className="flex gap-2">
+			<Button {...args}>Button</Button>
+			<Button {...args}>Button</Button>
+			<Button {...args}>Button</Button>
+			<Button {...args}>Button</Button>
+		</div>
+	),
+};