Merge branch 'staging' of https://github.com/brainstormforce/force-ui …

…into SUR-293

dist/force-ui.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom'), 'version' => '2313942efbf357138322');
+<?php return array('dependencies' => array('react', 'react-dom'), 'version' => 'bf6216ffd684ee62b8cd');

src/components/input/input.stories.js

@@ -0,0 +1,133 @@
+import React from 'react';
+import Input from './input.jsx';
+import { Phone } from 'lucide-react';
+
+export default {
+	title: 'Atoms/Input',
+	component: Input,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		type: {
+			name: 'Type',
+			description: 'Defines the input type.',
+			control: 'select',
+			options: [ 'text', 'password', 'email', 'file' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'text' },
+			},
+		},
+		size: {
+			name: 'Size',
+			description: 'Defines the size of the input.',
+			control: 'select',
+			options: [ 'sm', 'md', 'lg' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'sm' },
+			},
+		},
+		disabled: {
+			name: 'Disabled',
+			description: 'Defines if the input is disabled.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		error: {
+			name: 'Error',
+			description: 'Defines if the input has an error state.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		defaultValue: {
+			name: 'Default Value',
+			description: 'Initial value of the input.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
+		prefix: {
+			name: 'Prefix',
+			description: 'Prefix element for the input.',
+			control: 'text',
+			table: {
+				type: { summary: 'ReactNode' },
+			},
+		},
+		suffix: {
+			name: 'Suffix',
+			description: 'Suffix element for the input.',
+			control: 'text',
+			table: {
+				type: { summary: 'ReactNode' },
+			},
+		},
+	},
+};
+
+// Basic Input
+export const Basic = {
+	args: {
+		type: 'text',
+		size: 'sm',
+		disabled: false,
+		error: false,
+		defaultValue: 'Basic Input',
+	},
+};
+
+// Input with Error
+export const ErrorState = {
+	args: {
+		type: 'text',
+		size: 'sm',
+		disabled: false,
+		error: true,
+		defaultValue: 'Input with Error',
+	},
+};
+
+// Disabled Input
+export const Disabled = {
+	args: {
+		type: 'text',
+		size: 'sm',
+		disabled: true,
+		error: false,
+		defaultValue: 'Disabled Input',
+	},
+};
+
+// File Input
+export const FileInput = {
+	args: {
+		type: 'file',
+		size: 'md',
+		disabled: false,
+		error: false,
+	},
+};
+
+// Input with Prefix and Suffix
+export const WithPrefixSuffix = {
+	args: {
+		type: 'text',
+		size: 'md',
+		disabled: false,
+		error: false,
+		prefix: <Phone />,
+		suffix: '#',
+		defaultValue: '',
+	},
+};

src/components/label/label.stories.js

@@ -0,0 +1,87 @@
+import Label from './label.jsx';
+
+export default {
+	title: 'Atoms/Label',
+	component: Label,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		size: {
+			name: 'Size',
+			description: 'Defines the size of the label.',
+			control: 'select',
+			options: [ 'xs', 'sm', 'md' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'sm' },
+			},
+		},
+		variant: {
+			name: 'Variant',
+			description: 'Defines the style variant of the label.',
+			control: 'select',
+			options: [ 'neutral', 'help', 'error', 'disabled' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'neutral' },
+			},
+		},
+		required: {
+			name: 'Required',
+			description: 'Defines if the label is required.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		children: {
+			name: 'Text',
+			description: 'The label text or content.',
+			control: 'text',
+			defaultValue: 'Label Text',
+		},
+	},
+};
+
+// Basic Label
+export const Basic = {
+	args: {
+		size: 'sm',
+		variant: 'neutral',
+		required: false,
+		children: 'Basic Label',
+	},
+};
+
+// Required Label
+export const Required = {
+	args: {
+		size: 'sm',
+		variant: 'neutral',
+		required: true,
+		children: 'Required Label',
+	},
+};
+
+// Error Variant
+export const Error = {
+	args: {
+		size: 'sm',
+		variant: 'error',
+		required: false,
+		children: 'Error Label',
+	},
+};
+
+// Disabled Variant
+export const Disabled = {
+	args: {
+		size: 'sm',
+		variant: 'disabled',
+		required: false,
+		children: 'Disabled Label',
+	},
+};

src/components/loader/loader.stories.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import Loader from './loader.jsx';
+import { LoaderPinwheel } from 'lucide-react';
+
+export default {
+	title: 'Atoms/Loader',
+	component: Loader,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		variant: {
+			name: 'Variant',
+			description: 'Defines the variant style of the loader.',
+			control: 'select',
+			options: [ 'primary', 'secondary' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'primary' },
+			},
+		},
+		size: {
+			name: 'Size',
+			description: 'Defines the size of the loader.',
+			control: 'select',
+			options: [ 'sm', 'md', 'lg', 'xl' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'md' },
+			},
+		},
+		icon: {
+			name: 'Icon',
+			description: 'Custom icon for the loader.',
+			control: 'none',
+			table: {
+				type: { summary: 'ReactNode' },
+			},
+		},
+	},
+};
+
+// Basic
+export const Basic = {
+	args: {
+		variant: 'primary',
+		size: 'md',
+		icon: null,
+	},
+};
+
+// Secondary Variant
+export const Secondary = {
+	args: {
+		variant: 'secondary',
+		size: 'md',
+		icon: null,
+	},
+};
+
+// Large Size
+export const Large = {
+	args: {
+		variant: 'primary',
+		size: 'lg',
+		icon: null,
+	},
+};
+
+// Custom Icon
+export const CustomIcon = {
+	args: {
+		variant: 'primary',
+		size: 'md',
+		icon: <LoaderPinwheel className="animate-spin" />,
+	},
+};