Alert and inout field

src/components/alert/alert.jsx

@@ -1,4 +1,4 @@
-import { cn } from '@/utilities/functions';
+import { cn } from '../../utilities/functions';
 import { getIcon, getAction, getContent, getTitle } from '../toaster/utils';
 import { X } from 'lucide-react';
 

src/components/alert/alert.stories.js

@@ -0,0 +1,149 @@
+import Alert from './alert.jsx';
+import { fn } from '@storybook/test';
+
+// Alert component story configuration
+export default {
+	title: 'Components/Alert',
+	component: Alert,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		variant: {
+			name: 'Variant',
+			description: 'Defines the style variant of the badge.',
+			control: 'select',
+			options: [ 'neutral', 'red', 'yellow', 'green', 'blue', 'inverse' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'neutral' },
+			},
+		},
+		size: {
+			name: 'Size',
+			description: 'Defines the size of the badge.',
+			control: 'select',
+			options: [ 'xs', 'sm', 'md', 'lg' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'md' },
+			},
+		},
+		type: {
+			name: 'Type',
+			description: 'Defines the type of the badge.',
+			control: 'select',
+			options: [ 'pill', 'rounded' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'pill' },
+			},
+		},
+		disabled: {
+			name: 'Disabled',
+			description: 'Defines if the badge is disabled.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		closable: {
+			name: 'Clasable',
+			description: 'Defines if the badge is closable.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+			},
+		},
+		label: { control: 'text', defaultValue: 'Badge' },
+	},
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Neutral = {
+	args: {
+		variant: 'neutral',
+		children: 'Badge',
+		type: 'pill',
+		size: 'sm',
+		label: 'Badge',
+		onClose: fn(),
+		onMouseDown: fn(),
+	},
+};
+
+export const Disabled = {
+	args: {
+		variant: 'neutral',
+		children: 'Badge',
+		type: 'pill',
+		size: 'sm',
+		label: 'Badge',
+		onClose: fn(),
+		onMouseDown: fn(),
+		disabled: true,
+	},
+};
+
+export const Red = {
+	args: {
+		variant: 'red',
+		children: 'Badge',
+		type: 'rounded',
+		size: 'sm',
+		label: 'Badge',
+		onClose: fn(),
+		onMouseDown: fn(),
+	},
+};
+
+export const Yellow = {
+	args: {
+		variant: 'yellow',
+		children: 'Badge',
+		type: 'rounded',
+		size: 'sm',
+		label: 'Badge',
+		onClose: fn(),
+		onMouseDown: fn(),
+	},
+};
+
+export const Green = {
+	args: {
+		variant: 'green',
+		children: 'Badge',
+		type: 'rounded',
+		size: 'sm',
+		label: 'Badge',
+		onClose: fn(),
+		onMouseDown: fn(),
+	},
+};
+
+export const Blue = {
+	args: {
+		variant: 'blue',
+		children: 'Badge',
+		type: 'rounded',
+		size: 'sm',
+		label: 'Badge',
+		onClose: fn(),
+		onMouseDown: fn(),
+	},
+};
+
+export const Inverse = {
+	args: {
+		variant: 'inverse',
+		children: 'Badge',
+		type: 'rounded',
+		size: 'sm',
+		label: 'Badge',
+		onClose: fn(),
+		onMouseDown: fn(),
+	},
+};

src/components/badge/badge.stories.js

@@ -3,7 +3,7 @@ import { fn } from '@storybook/test';
 
 // Badge component story configuration
 export default {
-	title: 'Components/Badge',
+	title: 'Atoms/Badge',
 	component: Badge,
 	parameters: {
 		layout: 'centered',

src/components/button/button.stories.js

@@ -1,8 +1,9 @@
 import Button from './button.jsx';
+import { Plus } from 'lucide-react';
 
 // Button component story configuration
 export default {
-	title: 'Components/Button',
+	title: 'Atoms/Button',
 	component: Button,
 	parameters: {
 		layout: 'centered',
@@ -87,6 +88,42 @@ export const Primary = {
 	args: {
 		variant: 'primary',
 		children: 'Button',
+		icon: <Plus />,
+		iconPosition: 'left',
 	},
 };
 
+export const Disabled = {
+	args: {
+		...Primary.args,
+		disabled: true,
+	},
+};
+
+export const Secondary = {
+	args: {
+		...Primary.args,
+		variant: 'secondary',
+	},
+};
+
+export const Ghost = {
+	args: {
+		...Primary.args,
+		variant: 'ghost',
+	},
+};
+
+export const Outline = {
+	args: {
+		...Primary.args,
+		variant: 'outline',
+	},
+};
+
+export const Link = {
+	args: {
+		...Primary.args,
+		variant: 'link',
+	},
+};

src/components/container/container.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { cn } from '@/utilities/functions';
+import { cn } from '../../utilities/functions';
 
 const Container = ( props ) => {
 	const {

src/components/toaster/toaster.jsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { X } from 'lucide-react';
 import { ToastState } from './controller';
 import { withSingleton } from '@/hoc';
-import { cn } from '@/utilities/functions';
+import { cn } from '../../utilities/functions';
 import { getIcon, getAction, getContent, getTitle } from './utils';
 import {
 	closeIconClassNames,

src/components/toaster/utils.jsx

@@ -1,7 +1,7 @@
 import { cloneElement, isValidElement } from 'react';
 import { Check, Info, AlertTriangle, Trash2 } from 'lucide-react';
-import { cn } from '@/utilities/functions';
-import Button from '@/components/button';
+import { cn } from '../../utilities/functions';
+import Button from '../button/button.jsx';
 
 const DEFAULT_THEME = 'light';
 const DEFAULT_VARIANT = 'neutral';

src/molecules/input-field/input-field.stories.js

@@ -0,0 +1,118 @@
+import Label from '../../components/label/label.jsx';
+import Input from '../../components/input/input.jsx';
+import TextArea from '../../components/textarea/textarea.jsx';
+import Container from '../../components/container/container.jsx';
+import { Info } from 'lucide-react';
+
+export const InputField = {
+	render: () => (
+        <div style={{width: '800px'}}>
+            <Container direction="column" gap="xs">
+                <Label size="md">Label</Label>
+                <Input type="text" placeholder="Placeholder" />
+                <Label size="xs" variant="help">
+                    <Info/> Help label with a <a href="https://example.com">link</a>
+                    .
+                </Label>
+            </Container>
+        </div>
+    )
+};
+
+export const TextAreaField = {
+    render: () => (
+        <div style={{width: '800px'}}>
+            <Container direction="column" gap="xs">
+                <Label size="md">Label</Label>
+                <TextArea size="md" placeholder="Placeholder"/>
+                <Label size="xs" variant="help">
+                    <Info/> Help label with a <a href="https://example.com">link</a>
+                    .
+                </Label>
+            </Container>
+        </div>
+    )
+};
+
+// Badge component story configuration
+export const InputFileField = {
+    render: () => (
+        <div style={{width: '800px'}}>
+            <Container direction="column" gap="xs">
+                <Label size="md">Label</Label>
+                <Input type="file" />
+                <Label size="xs" variant="help">
+                    <Info/> Help label with a <a href="https://example.com">link</a>
+                    .
+                </Label>
+            </Container>
+        </div>
+    )
+};
+
+// Badge component story configuration
+export default {
+	title: 'Molecules/Input Field',
+	component: InputField,
+    render: () => (
+        <>
+            <Label size="md">Input Field</Label>
+            <Input type="text" />
+        </>
+    ),
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	// argTypes: {
+	// 	variant: {
+	// 		name: 'Variant',
+	// 		description: 'Defines the style variant of the badge.',
+	// 		control: 'select',
+	// 		options: [ 'neutral', 'red', 'yellow', 'green', 'blue', 'inverse' ],
+	// 		table: {
+	// 			type: { summary: 'string' },
+	// 			defaultValue: { summary: 'neutral' },
+	// 		},
+	// 	},
+	// 	size: {
+	// 		name: 'Size',
+	// 		description: 'Defines the size of the badge.',
+	// 		control: 'select',
+	// 		options: [ 'xs', 'sm', 'md', 'lg' ],
+	// 		table: {
+	// 			type: { summary: 'string' },
+	// 			defaultValue: { summary: 'md' },
+	// 		},
+	// 	},
+	// 	type: {
+	// 		name: 'Type',
+	// 		description: 'Defines the type of the badge.',
+	// 		control: 'select',
+	// 		options: [ 'pill', 'rounded' ],
+	// 		table: {
+	// 			type: { summary: 'string' },
+	// 			defaultValue: { summary: 'pill' },
+	// 		},
+	// 	},
+	// 	disabled: {
+	// 		name: 'Disabled',
+	// 		description: 'Defines if the badge is disabled.',
+	// 		control: 'boolean',
+	// 		table: {
+	// 			type: { summary: 'boolean' },
+	// 			defaultValue: { summary: 'false' },
+	// 		},
+	// 	},
+	// 	closable: {
+	// 		name: 'Clasable',
+	// 		description: 'Defines if the badge is closable.',
+	// 		control: 'boolean',
+	// 		table: {
+	// 			type: { summary: 'boolean' },
+	// 			defaultValue: { summary: 'true' },
+	// 		},
+	// 	},
+	// 	label: { control: 'text', defaultValue: 'Badge' },
+	// },
+};