diff --git a/apps/docs/package.json b/apps/docs/package.json index 2692efc..e0b16a3 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -19,7 +19,7 @@ "storybook-static", "CHANGELOG.md" ], - "packageManager": "pnpm@8.6.10", + "packageManager": "pnpm@8.7.1", "scripts": { "dev": "storybook dev -p 6006 --no-open", "build": "storybook build", @@ -49,25 +49,25 @@ "react-dom": "18.2.0" }, "devDependencies": { - "@storybook/addon-a11y": "7.1.1", - "@storybook/addon-essentials": "7.1.1", - "@storybook/addon-interactions": "7.1.1", - "@storybook/addon-links": "7.1.1", - "@storybook/blocks": "7.1.1", - "@storybook/react-vite": "7.1.1", - "@storybook/react": "7.1.1", - "@storybook/test-runner": "0.12.0", + "@storybook/addon-a11y": "7.4.1", + "@storybook/addon-essentials": "7.4.1", + "@storybook/addon-interactions": "7.4.1", + "@storybook/addon-links": "7.4.1", + "@storybook/blocks": "7.4.1", + "@storybook/react-vite": "7.4.1", + "@storybook/react": "7.4.1", + "@storybook/test-runner": "0.13.0", "@storybook/testing-library": "0.2.0", "@themeless-ui/eslint-config": "workspace:*", "@themeless-ui/typescript-config": "workspace:*", "@types/react-dom": "18.2.7", - "@types/react": "18.2.17", + "@types/react": "18.2.21", "axe-playwright": "1.2.3", - "concurrently": "8.2.0", - "eslint": "8.46.0", - "serve": "14.2.0", - "storybook": "7.1.1", - "typescript": "5.1.6", - "vite": "4.4.7" + "concurrently": "8.2.1", + "eslint": "8.49.0", + "serve": "14.2.1", + "storybook": "7.4.1", + "typescript": "5.2.2", + "vite": "4.4.9" } } diff --git a/apps/docs/stories/Form/Button.stories.tsx b/apps/docs/stories/Form/Button.stories.tsx index 1f86a9c..e6b22bb 100644 --- a/apps/docs/stories/Form/Button.stories.tsx +++ b/apps/docs/stories/Form/Button.stories.tsx @@ -16,3 +16,10 @@ export const Primary: Story = { children: "Button", }, }; + +export const Disabled: Story = { + args: { + disabled: true, + children: "Button", + }, +}; diff --git a/apps/docs/stories/Form/Input.stories.tsx b/apps/docs/stories/Form/Input.stories.tsx new file mode 100644 index 0000000..a83b69d --- /dev/null +++ b/apps/docs/stories/Form/Input.stories.tsx @@ -0,0 +1,63 @@ +import type { Decorator, Meta, StoryObj } from "@storybook/react"; +import { Button, Input, Stack } from "@themeless-ui/react"; + +const meta = { + title: "Form/Input", + component: Input, + tags: ["autodocs"], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +const labelDecorator: Decorator = (Story) => ( + + + + +); + +export const Primary: Story = { + args: { + id: "input", + }, + decorators: [labelDecorator], +}; + +export const Disabled: Story = { + args: { + id: "input", + value: "Input", + disabled: true, + }, + decorators: [labelDecorator], +}; + +export const ReadOnly: Story = { + args: { + id: "input", + value: "Input", + readOnly: true, + }, + decorators: [labelDecorator], +}; + +export const Placeholder: Story = { + args: { + id: "input", + placeholder: "Input", + }, + decorators: [labelDecorator], +}; + +export const UsingWithButton = { + render: () => ( + + + + + + + + ), +}; diff --git a/apps/docs/stories/Form/Textarea.stories.tsx b/apps/docs/stories/Form/Textarea.stories.tsx new file mode 100644 index 0000000..850c06c --- /dev/null +++ b/apps/docs/stories/Form/Textarea.stories.tsx @@ -0,0 +1,63 @@ +import type { Decorator, Meta, StoryObj } from "@storybook/react"; +import { Button, Stack, Textarea } from "@themeless-ui/react"; + +const meta = { + title: "Form/Textarea", + component: Textarea, + tags: ["autodocs"], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +const labelDecorator: Decorator = (Story) => ( + + + + +); + +export const Primary: Story = { + args: { + id: "textarea", + }, + decorators: [labelDecorator], +}; + +export const Disabled: Story = { + args: { + id: "textarea", + value: "Textarea", + disabled: true, + }, + decorators: [labelDecorator], +}; + +export const ReadOnly: Story = { + args: { + id: "textarea", + value: "Textarea", + readOnly: true, + }, + decorators: [labelDecorator], +}; + +export const Placeholder: Story = { + args: { + id: "textarea", + placeholder: "Textarea", + }, + decorators: [labelDecorator], +}; + +export const UsingWithButton = { + render: () => ( + + + +