@osmn-byhn/storybook-docs 1.0.0 → 1.0.1

package/.storybook/main.js

@@ -1,9 +1,20 @@
-const path = require("path");
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 /** @type { import('@storybook/react-vite').StorybookConfig } */
-module.exports = {
+const config = {
   framework: "@storybook/react-vite",
   stories: ["../stories/**/*.stories.@(ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-a11y",
+    "@storybook/addon-interactions",
+    "@chromatic-com/storybook",
+  ],
 
   viteFinal: async (config) => {
     config.resolve = config.resolve || {};
@@ -47,3 +58,6 @@ module.exports = {
     return config;
   },
 };
+
+export default config;
+

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @osmn-byhn/storybook-docs
+
+## 1.0.1
+
+### Patch Changes
+
+- Documentation updates

package/README.md

@@ -0,0 +1,66 @@
+# @osmn-byhn/storybook-docs
+
+The centralized documentation and component playground for the `@osmn-byhn` ecosystem. It uses Storybook to isolate building UI components and verifying their behavior.
+
+## Getting Started
+
+### Prerequisites
+Ensure you have installed dependencies in the root of the monorepo:
+```bash
+pnpm install
+```
+
+### Running Storybook
+Start the development server on port 6006:
+```bash
+pnpm run storybook
+```
+
+### Building Static Docs
+Build the static site for deployment:
+```bash
+pnpm run build-storybook
+```
+
+## Writing Stories
+
+Stories are located in the `stories/` directory. We use the CSF3 (Component Story Format 3) standard.
+
+### Example Story
+Create a new file `stories/MyComponent.stories.tsx`:
+
+```tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { MarkdownEditor } from '@osmn-byhn/mdarea';
+
+const meta = {
+  title: 'Editor/MarkdownEditor',
+  component: MarkdownEditor,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof MarkdownEditor>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: '# Hello World',
+    placeholder: 'Start typing...',
+  },
+};
+```
+
+## Theming
+
+We use a custom CSS theme for stories located at `stories/custom-theme.css`.
+To apply global styles or override editor variables in the storybook environment, edit that file.
+
+```css
+/* stories/custom-theme.css */
+:root {
+  --md-primary-color: #0070f3;
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osmn-byhn/storybook-docs",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "index.js",
   "keywords": [],
@@ -9,7 +9,7 @@
   "devDependencies": {
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "storybook": "^1.0.0",
+    "storybook": "^10.2.3",
     "@storybook/react-vite": "^10.2.3",
     "@chromatic-com/storybook": "^5.0.0",
     "@storybook/addon-vitest": "^10.2.3",
@@ -20,7 +20,10 @@
     "playwright": "^1.58.1",
     "@vitest/browser-playwright": "^4.0.18",
     "@vitest/coverage-v8": "^4.0.18",
-    "@osmn-byhn/mdarea": "0.0.2"
+    "@storybook/react": "^10.2.4",
+    "@storybook/addon-actions": "^9.0.8",
+    "@storybook/addon-links": "^10.2.4",
+    "@osmn-byhn/mdarea": "0.0.5"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/stories/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { Button, Welcome } from '@storybook/react/demo';
+
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+
+storiesOf('Button', module)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
+  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);