@capyx/components-library 0.0.1 → 0.0.2

package/stories/FileInput.stories.tsx

@@ -1,125 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-import { FileInput } from '../lib/components/FileInput';
-
-const meta = {
-	title: 'Components/FileInput',
-	component: FileInput,
-	parameters: {
-		layout: 'centered',
-	},
-	tags: ['autodocs'],
-} satisfies Meta<typeof FileInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const FormWrapper = ({ children }: { children: React.ReactNode }) => {
-	const methods = useForm({
-		defaultValues: {
-			profilePicture: null,
-			documents: null,
-			resume: null,
-		},
-	});
-
-	return <FormProvider {...methods}>{children}</FormProvider>;
-};
-
-export const Basic: Story = {
-	args: {
-		name: 'profilePicture',
-		label: 'Profile Picture',
-	},
-	render: (args) => (
-		<FormWrapper>
-			<FileInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const ImageOnly: Story = {
-	args: {
-		name: 'profilePicture',
-		label: 'Profile Picture',
-		accept: 'image/*',
-	},
-	render: (args) => (
-		<FormWrapper>
-			<FileInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const MultipleFiles: Story = {
-	args: {
-		name: 'documents',
-		label: 'Upload Documents',
-		multiple: true,
-		accept: '.pdf,.doc,.docx',
-	},
-	render: (args) => (
-		<FormWrapper>
-			<FileInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const WithMaxSize: Story = {
-	args: {
-		name: 'resume',
-		label: 'Upload Resume',
-		accept: '.pdf',
-		maxSize: 5 * 1024 * 1024, // 5MB
-	},
-	render: (args) => (
-		<FormWrapper>
-			<FileInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const Required: Story = {
-	args: {
-		name: 'profilePicture',
-		label: 'Profile Picture',
-		required: true,
-	},
-	render: (args) => (
-		<FormWrapper>
-			<FileInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const Disabled: Story = {
-	args: {
-		name: 'documents',
-		label: 'Documents',
-		disabled: true,
-	},
-	render: (args) => (
-		<FormWrapper>
-			<FileInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const CustomValidation: Story = {
-	args: {
-		name: 'document',
-		label: 'Upload PDF Only',
-		validateFile: (file: File) => {
-			if (!file.name.endsWith('.pdf')) {
-				return { valid: false, error: 'Only PDF files are allowed' };
-			}
-			return { valid: true };
-		},
-	},
-	render: (args) => (
-		<FormWrapper>
-			<FileInput {...args} />
-		</FormWrapper>
-	),
-};

package/stories/RichTextInput.stories.tsx

@@ -1,77 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-import { RichTextInput } from '../lib/components/RichTextInput';
-
-const meta = {
-	title: 'Components/RichTextInput',
-	component: RichTextInput,
-	parameters: {
-		layout: 'centered',
-	},
-	tags: ['autodocs'],
-} satisfies Meta<typeof RichTextInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-	render: () => {
-		const [content, setContent] = useState('');
-		return (
-			<div style={{ width: '600px' }}>
-				<RichTextInput value={content} onChange={setContent} />
-			</div>
-		);
-	},
-};
-
-export const WithMaxLength: Story = {
-	render: () => {
-		const [content, setContent] = useState('');
-		return (
-			<div style={{ width: '600px' }}>
-				<RichTextInput value={content} onChange={setContent} maxLength={1000} />
-			</div>
-		);
-	},
-};
-
-export const WithInitialContent: Story = {
-	render: () => {
-		const [content, setContent] = useState('<p><strong>Bold text</strong> and <em>italic text</em></p>');
-		return (
-			<div style={{ width: '600px' }}>
-				<RichTextInput value={content} onChange={setContent} />
-			</div>
-		);
-	},
-};
-
-export const ReadOnly: Story = {
-	render: () => {
-		const content = '<h2>Read-only Content</h2><p>This editor is in read-only mode.</p>';
-		return (
-			<div style={{ width: '600px' }}>
-				<RichTextInput value={content} readonly />
-			</div>
-		);
-	},
-};
-
-export const WithValidationError: Story = {
-	render: () => {
-		const [content, setContent] = useState('');
-		return (
-			<div style={{ width: '600px' }}>
-				<RichTextInput
-					value={content}
-					onChange={setContent}
-					isInvalid={true}
-				/>
-				<div style={{ color: 'red', fontSize: '14px', marginTop: '5px' }}>
-					This field is required
-				</div>
-			</div>
-		);
-	},
-};

package/stories/SelectInput.stories.tsx

@@ -1,131 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-import { SelectInput } from '../lib/components/SelectInput';
-
-const meta = {
-	title: 'Components/SelectInput',
-	component: SelectInput,
-	parameters: {
-		layout: 'centered',
-	},
-	tags: ['autodocs'],
-	argTypes: {
-		controlSize: {
-			control: 'select',
-			options: ['sm', 'lg', undefined],
-		},
-	},
-} satisfies Meta<typeof SelectInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const FormWrapper = ({ children }: { children: React.ReactNode }) => {
-	const methods = useForm({
-		defaultValues: {
-			country: '',
-			role: '',
-			priority: '',
-		},
-	});
-
-	return <FormProvider {...methods}>{children}</FormProvider>;
-};
-
-export const Basic: Story = {
-	args: {
-		name: 'country',
-		label: 'Country',
-		options: ['USA', 'Canada', 'UK', 'France', 'Germany', 'Spain', 'Italy'],
-	},
-	render: (args) => (
-		<FormWrapper>
-			<SelectInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const Required: Story = {
-	args: {
-		name: 'role',
-		label: 'User Role',
-		options: ['Admin', 'Editor', 'Viewer', 'Guest'],
-		required: true,
-	},
-	render: (args) => (
-		<FormWrapper>
-			<SelectInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const WithHighlightedValues: Story = {
-	args: {
-		name: 'priority',
-		label: 'Priority',
-		options: ['Critical', 'High', 'Medium', 'Low'],
-		highlightValues: ['Critical', 'High'],
-	},
-	render: (args) => (
-		<FormWrapper>
-			<SelectInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const CustomPlaceholder: Story = {
-	args: {
-		name: 'country',
-		label: 'Select your country',
-		options: ['USA', 'Canada', 'UK', 'France', 'Germany'],
-		helpText: 'Choose a country...',
-	},
-	render: (args) => (
-		<FormWrapper>
-			<SelectInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const Disabled: Story = {
-	args: {
-		name: 'role',
-		label: 'User Role',
-		options: ['Admin', 'Editor', 'Viewer'],
-		disabled: true,
-	},
-	render: (args) => (
-		<FormWrapper>
-			<SelectInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const SmallSize: Story = {
-	args: {
-		name: 'country',
-		label: 'Country (Small)',
-		options: ['USA', 'Canada', 'UK'],
-		controlSize: 'sm',
-	},
-	render: (args) => (
-		<FormWrapper>
-			<SelectInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const LargeSize: Story = {
-	args: {
-		name: 'country',
-		label: 'Country (Large)',
-		options: ['USA', 'Canada', 'UK'],
-		controlSize: 'lg',
-	},
-	render: (args) => (
-		<FormWrapper>
-			<SelectInput {...args} />
-		</FormWrapper>
-	),
-};

package/stories/SwitchInput.stories.tsx

@@ -1,80 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-import { SwitchInput } from '../lib/components/SwitchInput';
-
-const meta = {
-	title: 'Components/SwitchInput',
-	component: SwitchInput,
-	parameters: {
-		layout: 'centered',
-	},
-	tags: ['autodocs'],
-} satisfies Meta<typeof SwitchInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const FormWrapper = ({ children }: { children: React.ReactNode }) => {
-	const methods = useForm({
-		defaultValues: {
-			notifications: false,
-			darkMode: false,
-			autoSave: false,
-		},
-	});
-
-	return <FormProvider {...methods}>{children}</FormProvider>;
-};
-
-export const Basic: Story = {
-	args: {
-		name: 'notifications',
-		label: 'Enable notifications',
-	},
-	render: (args) => (
-		<FormWrapper>
-			<SwitchInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const Required: Story = {
-	args: {
-		name: 'autoSave',
-		label: 'Enable auto-save',
-		required: true,
-	},
-	render: (args) => (
-		<FormWrapper>
-			<SwitchInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const Disabled: Story = {
-	args: {
-		name: 'darkMode',
-		label: 'Dark mode',
-		disabled: true,
-	},
-	render: (args) => (
-		<FormWrapper>
-			<SwitchInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const DisabledOn: Story = {
-	args: {
-		name: 'darkMode',
-		label: 'Dark mode (enabled & disabled)',
-		disabled: true,
-		value: true,
-	},
-	render: (args) => (
-		<FormWrapper>
-			<SwitchInput {...args} />
-		</FormWrapper>
-	),
-};

package/stories/TagsInput.stories.tsx

@@ -1,69 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-import { TagsInput } from '../lib/components/TagsInput';
-
-const meta = {
-	title: 'Components/TagsInput',
-	component: TagsInput,
-	parameters: {
-		layout: 'centered',
-	},
-	tags: ['autodocs'],
-} satisfies Meta<typeof TagsInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-	render: () => {
-		const [tags, setTags] = useState<string[]>([]);
-		return (
-			<div style={{ width: '400px' }}>
-				<TagsInput name="skills" value={tags} onChange={setTags} />
-			</div>
-		);
-	},
-};
-
-export const WithInitialValues: Story = {
-	render: () => {
-		const [tags, setTags] = useState<string[]>(['JavaScript', 'TypeScript', 'React']);
-		return (
-			<div style={{ width: '400px' }}>
-				<TagsInput
-					name="skills"
-					value={tags}
-					onChange={setTags}
-					placeholder="Add more skills..."
-				/>
-			</div>
-		);
-	},
-};
-
-export const CustomPlaceholder: Story = {
-	render: () => {
-		const [tags, setTags] = useState<string[]>([]);
-		return (
-			<div style={{ width: '400px' }}>
-				<TagsInput
-					name="interests"
-					value={tags}
-					onChange={setTags}
-					placeholder="Enter your interests..."
-				/>
-			</div>
-		);
-	},
-};
-
-export const Disabled: Story = {
-	render: () => {
-		const [tags] = useState<string[]>(['Tag 1', 'Tag 2', 'Tag 3']);
-		return (
-			<div style={{ width: '400px' }}>
-				<TagsInput name="skills" value={tags} onChange={() => {}} disabled />
-			</div>
-		);
-	},
-};

package/stories/TextAreaInput.stories.tsx

@@ -1,117 +0,0 @@
-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>
-	),
-};