@capyx/components-library 0.0.1

package/stories/TextAreaInput.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { TextAreaInput } from '../lib/components/TextAreaInput';
+
+const meta = {
+	title: 'Components/TextAreaInput',
+	component: TextAreaInput,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: ['autodocs'],
+	argTypes: {
+		controlSize: {
+			control: 'select',
+			options: ['sm', 'lg', undefined],
+		},
+	},
+} satisfies Meta<typeof TextAreaInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const FormWrapper = ({ children }: { children: React.ReactNode }) => {
+	const methods = useForm({
+		defaultValues: {
+			bio: '',
+			description: '',
+			comments: '',
+		},
+	});
+
+	return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
+export const Basic: Story = {
+	args: {
+		name: 'bio',
+		label: 'Biography',
+		placeholder: 'Tell us about yourself...',
+	},
+	render: (args) => (
+		<FormWrapper>
+			<TextAreaInput {...args} />
+		</FormWrapper>
+	),
+};
+
+export const Required: Story = {
+	args: {
+		name: 'description',
+		label: 'Description',
+		placeholder: 'Enter description...',
+		required: true,
+	},
+	render: (args) => (
+		<FormWrapper>
+			<TextAreaInput {...args} />
+		</FormWrapper>
+	),
+};
+
+export const WithMaxLength: Story = {
+	args: {
+		name: 'bio',
+		label: 'Biography',
+		maxLength: 500,
+		placeholder: 'Max 500 characters',
+	},
+	render: (args) => (
+		<FormWrapper>
+			<TextAreaInput {...args} />
+		</FormWrapper>
+	),
+};
+
+export const WithDebounce: Story = {
+	args: {
+		name: 'comments',
+		label: 'Comments',
+		placeholder: 'Type with 500ms debounce...',
+		debounceMs: 500,
+	},
+	render: (args) => (
+		<FormWrapper>
+			<TextAreaInput {...args} />
+		</FormWrapper>
+	),
+};
+
+export const Disabled: Story = {
+	args: {
+		name: 'bio',
+		label: 'Biography',
+		placeholder: 'This field is disabled',
+		disabled: true,
+	},
+	render: (args) => (
+		<FormWrapper>
+			<TextAreaInput {...args} />
+		</FormWrapper>
+	),
+};
+
+export const ReadOnly: Story = {
+	args: {
+		name: 'bio',
+		label: 'Biography',
+		value: 'This is a read-only biography text.',
+		isReadOnly: true,
+	},
+	render: (args) => (
+		<FormWrapper>
+			<TextAreaInput {...args} />
+		</FormWrapper>
+	),
+};

package/stories/TextInput.stories.tsx

@@ -0,0 +1,167 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { TextInput } from '../lib/components/TextInput';
+
+const meta = {
+	title: 'Components/TextInput',
+	component: TextInput,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: ['autodocs'],
+	argTypes: {
+		type: {
+			control: 'select',
+			options: ['text', 'email', 'password', 'number', 'tel', 'url'],
+		},
+		controlSize: {
+			control: 'select',
+			options: ['sm', 'lg', undefined],
+		},
+	},
+} satisfies Meta<typeof TextInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Wrapper component for react-hook-form integration
+const FormWrapper = ({ children }: { children: React.ReactNode }) => {
+	const methods = useForm({
+		defaultValues: {
+			username: '',
+			email: '',
+			search: '',
+			skill: '',
+		},
+	});
+
+	return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
+export const Basic: Story = {
+	args: {
+		name: 'username',
+		label: 'Username',
+		placeholder: 'Enter your username',
+	},
+	render: (args) => (
+		<FormWrapper>
+			<TextInput {...args} />
+		</FormWrapper>
+	),
+};
+
+export const Required: Story = {
+	args: {
+		name: 'email',
+		label: 'Email',
+		type: 'email',
+		placeholder: 'your.email@example.com',
+		required: true,
+	},
+	render: (args) => (
+		<FormWrapper>
+			<TextInput {...args} />
+		</FormWrapper>
+	),
+};
+
+export const WithMaxLength: Story = {
+	args: {
+		name: 'username',
+		label: 'Username',
+		maxLength: 20,
+		placeholder: 'Max 20 characters',
+	},
+	render: (args) => (
+		<FormWrapper>
+			<TextInput {...args} />
+		</FormWrapper>
+	),
+};
+
+export const WithAutocomplete: Story = {
+	args: {
+		name: 'skill',
+		label: 'Primary Skill',
+		shouldAutoComplete: true,
+		values: ['JavaScript', 'TypeScript', 'React', 'Node.js', 'Python', 'Java'],
+		placeholder: 'Type to search...',
+	},
+	render: (args) => (
+		<FormWrapper>
+			<TextInput {...args} />
+		</FormWrapper>
+	),
+};
+
+export const WithDebounce: Story = {
+	args: {
+		name: 'search',
+		label: 'Search',
+		placeholder: 'Search with 300ms debounce...',
+		debounceMs: 300,
+	},
+	render: (args) => (
+		<FormWrapper>
+			<TextInput {...args} />
+		</FormWrapper>
+	),
+};
+
+export const Disabled: Story = {
+	args: {
+		name: 'username',
+		label: 'Username',
+		placeholder: 'This field is disabled',
+		disabled: true,
+	},
+	render: (args) => (
+		<FormWrapper>
+			<TextInput {...args} />
+		</FormWrapper>
+	),
+};
+
+export const ReadOnly: Story = {
+	args: {
+		name: 'username',
+		label: 'Username',
+		fieldValue: 'ReadOnlyValue',
+		isReadOnly: true,
+	},
+	render: (args) => (
+		<FormWrapper>
+			<TextInput {...args} />
+		</FormWrapper>
+	),
+};
+
+export const SmallSize: Story = {
+	args: {
+		name: 'username',
+		label: 'Username (Small)',
+		controlSize: 'sm',
+		placeholder: 'Small input',
+	},
+	render: (args) => (
+		<FormWrapper>
+			<TextInput {...args} />
+		</FormWrapper>
+	),
+};
+
+export const LargeSize: Story = {
+	args: {
+		name: 'username',
+		label: 'Username (Large)',
+		controlSize: 'lg',
+		placeholder: 'Large input',
+	},
+	render: (args) => (
+		<FormWrapper>
+			<TextInput {...args} />
+		</FormWrapper>
+	),
+};

package/vitest.config.ts

@@ -0,0 +1,37 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig } from 'vitest/config';
+
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
+import { playwright } from '@vitest/browser-playwright';
+
+const dirname =
+  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default defineConfig({
+  test: {
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({ configDir: path.join(dirname, '.storybook') }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [{ browser: 'chromium' }],
+          },
+          setupFiles: ['.storybook/vitest.setup.ts'],
+        },
+      },
+    ],
+  },
+});

package/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />