feat: storybook (oku-ui#54)

* feat: storybook

* Update CONTRIBUTING.md

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
   root: true,
   // This tells ESLint to load the config from the package `eslint-config-custom`
-  extends: ['custom'],
+  extends: ['custom', 'plugin:storybook/recommended'],
 }

.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from "@storybook/vue3-vite";
+import Unocss from 'unocss/vite'
+
+const config: StorybookConfig = {
+  stories: ["../stories/**/*.mdx", "../packages/components/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  viteFinal(config) {
+      config.plugins = config.plugins || []
+      config.plugins.push(
+        Unocss()
+      )
+
+     return config
+  }
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,17 @@
+import type { Preview } from "@storybook/vue3";
+import '@unocss/reset/tailwind.css'
+import 'virtual:uno.css'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

CONTRIBUTING.md

@@ -32,7 +32,9 @@ Note: What is Terminals Maganger and Commands  -> https://github.com/oku-ui/prim
    `pnpm install`
 3. Build the project  
    `pnpm build`
-4. If new package vue, go to `packages/example-package` example `packages/components` or `packages/core` copy. You can copy this file and build your new build on it.
+4. If new package vue, go to `packages/example-package` example `packages/components` or `packages/core` copy. You can copy 
+this file and build your new build on it.
+5. Storybook works with the command `pnpm dev`
 
 ## Testing
 

package.json

@@ -3,23 +3,37 @@
   "private": true,
   "scripts": {
     "build": "turbo run build --filter='./packages/**'",
-    "dev": "turbo run dev",
+    "dev:packages": "turbo run dev",
     "lint": "turbo run lint",
     "lint:fix": "turbo run lint:fix",
     "format": "turbo run format",
     "test": "vitest",
     "test:watch": "vitest --watch",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "dev": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^7.0.7",
+    "@storybook/addon-interactions": "^7.0.7",
+    "@storybook/addon-links": "^7.0.7",
+    "@storybook/blocks": "^7.0.7",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/vue3": "^7.0.7",
+    "@storybook/vue3-vite": "^7.0.7",
     "@vitejs/plugin-vue": "^4.2.1",
     "@vitest/coverage-c8": "^0.30.1",
     "@vue/test-utils": "^2.3.2",
     "eslint": "^8.39.0",
     "eslint-config-custom": "workspace:*",
+    "eslint-plugin-storybook": "^0.6.11",
     "jsdom": "^21.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.7",
     "turbo": "^1.9.3",
     "typescript": "^5.0.4",
+    "unocss": "^0.51.8",
     "unplugin-vue-macros": "^2.1.0",
     "vite": "^4.3.3",
     "vite-plugin-dts": "^2.3.0",
@@ -36,4 +50,4 @@
       "vite": "^4.3.1"
     }
   }
-}
+}

packages/components/aspect-ratio/src/aspect-ratio.stories.ts

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import type { AspectRatioProps } from './aspect-ratio'
+import { OkuAspectRatio } from './aspect-ratio'
+
+interface StoryProps extends AspectRatioProps {
+  imageurl: string
+}
+
+const meta = {
+  title: 'Components/OkuAspectRatio',
+  component: OkuAspectRatio,
+  tags: ['autodocs'],
+  argTypes: {
+    // TODO: ratio number '16 / 9' not working how to send a string? with storybook controls
+    ratio: { type: 'number', defaultValue: '1' },
+  },
+  // TODO: ratio number '16 / 9' not working how to send a string? with storybook controls
+  args: { ratio: '1' },
+  // TODO: `render` ts props same problem as above
+  render: (args: StoryProps) => ({
+    components: { OkuAspectRatio },
+    setup() {
+      return { args }
+    },
+    // TODO: if ratio hot reload fixed, remove this {{ args.ratio }}
+    // TODO: ratio change not working hot reload
+    template: `
+      {{ args.ratio }}
+      <div class="max-w-xl mx-auto h-full items-center justify-center">
+        <OkuAspectRatio :ratio="args.ratio">
+          <img
+            class="object-cover w-full h-full rounded-lg"
+            :src="args.imageurl"
+            alt="Landscape photograph by Tobias Tullius"
+          >
+        </OkuAspectRatio>
+      </div>
+    `,
+  }),
+} satisfies Meta<typeof OkuAspectRatio>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    ratio: '1',
+    imageurl: 'https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80',
+  },
+}

packages/components/avatar/src/avatar.stories.ts

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import type { AvatarProps } from './avatar'
+import { OkuAvatar,OkuAvatarImage,OkuAvatarFallback } from './avatar'
+
+interface StoryProps extends AvatarProps {
+}
+
+const meta = {
+  title: 'Components/Avatar',
+  tags: ['autodocs'],
+  // TODO: `render` TS props same problem as above
+  render: (args: StoryProps) => ({
+    components: { OkuAvatar },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="max-w-xl mx-auto h-full items-center justify-center">
+        <OkuAvatar class="w-40 h-40 bg-gray-400 items-center inline-block overflow-hidden rounded-full">
+          <OkuAvatarImage
+            class="w-full h-full object-cover"
+            src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
+          />
+          <OkuAvatarFallback
+            class="flex items-center text-white font-medium text-2xl h-full w-full justify-center"
+            :delayms="500"
+          >
+            CT
+          </OkuAvatarFallback>
+      </OkuAvatar>
+      </div>
+    `,
+  }),
+} satisfies Meta<typeof OkuAvatar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+
+  },
+}

packages/components/label/src/label.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import type { LabelProps } from './label'
+import { OkuLabel } from './label'
+
+interface StoryProps extends LabelProps {
+}
+
+const meta = {
+  title: 'Components/Label',
+  component: OkuLabel,
+  tags: ['autodocs'],
+  // TODO: `render` TS props same problem as above
+  render: (args: StoryProps) => ({
+    components: { OkuLabel },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="max-w-xl mx-auto h-full items-center justify-center">
+          <OkuLabel class="block text-sm font-medium leading-6 text-gray-900" for="email">
+            Email
+          </OkuLabel>
+          <div class="mt-2">
+            <input type="email" name="email" id="email" class="px-4 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="[email protected]" />
+          </div>
+      </div>
+    `,
+  }),
+} satisfies Meta<typeof OkuLabel>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+
+  },
+}