diff --git a/packages/web-react/src/components/Button/stories/args.tsx b/packages/web-react/src/components/Button/stories/args.tsx index 37f9f37fbe..16ffd3f71d 100644 --- a/packages/web-react/src/components/Button/stories/args.tsx +++ b/packages/web-react/src/components/Button/stories/args.tsx @@ -5,12 +5,12 @@ import { Icon } from '../../Icon'; export const argTypes = { children: { control: 'text', - description: - 'This is the place for the content of the button. In the real code you can pass in any JSX. ' + - 'In this demo you can set any text you want, or use one of the predefined texts: `` ' + - '(to see how it looks with an Icon) or ` Text` (to see how it looks with an Icon ' + - 'and text). Please note the predefined texts in this demo are not customizable and have ' + - 'to be written exactly as shown.', + description: `This is the place for the content of the button. In the real code you + can pass in any JSX. In this demo you can set any text you want, or use one + of the predefined texts: \`\` (to see how it looks with an Icon) or + \` Text\` (to see how it looks with an Icon and text). Please note the + predefined texts in this demo are not customizable and have to be written exactly + as shown.`, mapping: { '': , ' Text': ( diff --git a/packages/web-react/src/components/Checkbox/Checkbox.stories.ts b/packages/web-react/src/components/Checkbox/Checkbox.stories.ts deleted file mode 100644 index bdc1286d2d..0000000000 --- a/packages/web-react/src/components/Checkbox/Checkbox.stories.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import argTypes from './demo/argTypes'; -import Checkbox from './Checkbox'; - -export default { - title: 'Components/Checkbox', - component: Checkbox, - parameters: { - docs: { - description: { - component: 'Use Checkbox when you have a group of choices and any selection from the group is allowed.', - }, - }, - }, - args: { - label: 'Checkbox', - }, - argTypes, -} as ComponentMeta; - -export { default as Checkbox } from './demo/Checkbox'; diff --git a/packages/web-react/src/components/Checkbox/Checkbox.stories.tsx b/packages/web-react/src/components/Checkbox/Checkbox.stories.tsx new file mode 100644 index 0000000000..401660abf3 --- /dev/null +++ b/packages/web-react/src/components/Checkbox/Checkbox.stories.tsx @@ -0,0 +1,101 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { ValidationStates } from '../../constants'; +import { Checkbox } from './Checkbox'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/Checkbox', + component: Checkbox, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + autoComplete: { + control: 'text', + }, + helperText: { + control: 'text', + }, + id: { + control: 'text', + }, + isDisabled: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + isChecked: { + control: 'boolean', + table: { + defaultValue: { summary: true }, + }, + }, + isItem: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + isLabelHidden: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + isRequired: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + label: { + control: 'text', + }, + name: { + control: 'text', + }, + validationState: { + control: 'select', + options: [...Object.values(ValidationStates), undefined], + table: { + defaultValue: { summary: undefined }, + }, + }, + validationText: { + control: 'object', + description: + 'The validation text. Only visible if validationState is set. Use a string `"foo"` for single validation text or an array for multiple validation texts `["foo", "bar"]`.', + }, + value: { + control: 'text', + }, + }, + args: { + autoComplete: 'off', + helperText: 'Helper text', + id: 'checkbox', + isDisabled: false, + isChecked: true, + isItem: false, + isLabelHidden: false, + isRequired: false, + label: 'Label', + name: 'checkbox', + validationState: undefined, + validationText: 'Validation text', + value: 'checkbox', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + name: 'Checkbox', +}; diff --git a/packages/web-react/src/components/Checkbox/demo/argTypes.ts b/packages/web-react/src/components/Checkbox/demo/argTypes.ts deleted file mode 100644 index a275189ac8..0000000000 --- a/packages/web-react/src/components/Checkbox/demo/argTypes.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { ValidationStates } from '../../../constants'; - -export default { - validationState: { - control: { - type: 'select', - options: [...Object.values(ValidationStates), undefined], - }, - defaultValue: undefined, - }, - isDisabled: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - isRequired: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - isChecked: { - control: { - type: 'boolean', - }, - defaultValue: true, - }, - isLabelHidden: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - isItem: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - indeterminate: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - label: { - control: { - type: 'text', - }, - defaultValue: 'Field label', - }, - name: { - control: { - type: 'text', - }, - defaultValue: 'example', - }, - for: { - control: { - type: 'text', - }, - defaultValue: '', - }, - validationText: { - control: { - type: 'object', - }, - defaultValue: '', - description: - 'The validation text. Only visible if validationState is set. Use a string `"foo"` for single validation text or an array for multiple validation texts `["foo", "bar"]`.', - }, - helperText: { - control: { - type: 'text', - }, - defaultValue: '', - }, -}; diff --git a/packages/web-react/src/components/FieldGroup/FieldGroup.stories.ts b/packages/web-react/src/components/FieldGroup/FieldGroup.stories.ts deleted file mode 100644 index 0d2049608d..0000000000 --- a/packages/web-react/src/components/FieldGroup/FieldGroup.stories.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import argTypes from './demo/argTypes'; -import FieldGroup from './FieldGroup'; - -export default { - title: 'Components/FieldGroup', - component: FieldGroup, - parameters: { - docs: { - description: { - component: 'FieldGroup is a component that groups form fields together', - }, - }, - }, - argTypes, -} as ComponentMeta; - -export { default as FieldGroup } from './demo/FieldGroup'; diff --git a/packages/web-react/src/components/FieldGroup/FieldGroup.stories.tsx b/packages/web-react/src/components/FieldGroup/FieldGroup.stories.tsx new file mode 100644 index 0000000000..6dc78ffd36 --- /dev/null +++ b/packages/web-react/src/components/FieldGroup/FieldGroup.stories.tsx @@ -0,0 +1,115 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { ValidationStates } from '../../constants'; +import { Radio } from '../Radio'; +import { Checkbox } from '../Checkbox'; +import FieldGroup from './FieldGroup'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/FieldGroup', + component: FieldGroup, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + children: { + control: 'select', + options: ['boxes', 'radios', 'checkboxes'], + description: `This is the place for the content of the FieldGroup. In the real code + you can pass in any children you want. In this demo we have predefined options: + \`boxes\`, \`radios\` and \`checkboxes\`. Please note the predefined options + in this demo are not customizable.`, + mapping: { + boxes: ( + <> +
Item
+
Item
+
Item
+ + ), + radios: ( + <> + + + + ), + checkboxes: ( + <> + + + + ), + }, + }, + form: { + control: 'text', + }, + helperText: { + control: 'text', + }, + id: { + control: 'text', + }, + isDisabled: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + isLabelHidden: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + isRequired: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + label: { + control: 'text', + }, + name: { + control: 'text', + }, + validationState: { + control: 'FieldGroup', + options: [...Object.values(ValidationStates), undefined], + table: { + defaultValue: { summary: undefined }, + }, + }, + validationText: { + control: 'object', + description: + 'The validation text. Only visible if validationState is set. Use a string `"foo"` for single validation text or an array for multiple validation texts `["foo", "bar"]`.', + }, + }, + args: { + children: 'boxes', + helperText: 'Helper text', + id: 'FieldGroup', + isDisabled: false, + isFluid: false, + isLabelHidden: false, + isRequired: false, + label: 'Label', + name: 'FieldGroup', + validationState: undefined, + validationText: 'Validation text', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + name: 'FieldGroup', +}; diff --git a/packages/web-react/src/components/FieldGroup/demo/argTypes.ts b/packages/web-react/src/components/FieldGroup/demo/argTypes.ts deleted file mode 100644 index d71befcd99..0000000000 --- a/packages/web-react/src/components/FieldGroup/demo/argTypes.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { ValidationStates } from '../../../constants'; - -export default { - helperText: { - control: { - type: 'text', - }, - defaultValue: '', - }, - isDisabled: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - isFluid: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - isLabelHidden: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - isRequired: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - label: { - control: { - type: 'text', - }, - defaultValue: 'Label', - }, - validationState: { - control: { - type: 'select', - options: [...Object.values(ValidationStates), undefined], - }, - defaultValue: undefined, - }, - validationText: { - control: { - type: 'text', - }, - defaultValue: '', - }, -}; diff --git a/packages/web-react/src/components/FileUploader/FileUploader.stories.ts b/packages/web-react/src/components/FileUploader/FileUploader.stories.ts deleted file mode 100644 index 52771abd22..0000000000 --- a/packages/web-react/src/components/FileUploader/FileUploader.stories.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import FileUploader from './FileUploader'; - -export default { - title: 'Components/FileUploader', - component: FileUploader, -} as ComponentMeta; - -export { default as FileUploader } from './demo/FileUploader'; diff --git a/packages/web-react/src/components/FileUploader/FileUploader.stories.tsx b/packages/web-react/src/components/FileUploader/FileUploader.stories.tsx new file mode 100644 index 0000000000..9bb97d145b --- /dev/null +++ b/packages/web-react/src/components/FileUploader/FileUploader.stories.tsx @@ -0,0 +1,108 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { SpiritFileUploaderAttachmentProps, SpiritFileUploaderProps } from '../../types'; +import FileUploader from './FileUploader'; +import FileUploaderAttachment from './FileUploaderAttachment'; +import FileUploaderInput from './FileUploaderInput'; +import FileUploaderList from './FileUploaderList'; +import { useFileQueue } from './useFileQueue'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/FileUploader', + component: FileUploader, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + addToQueue: { + control: 'function', + }, + children: { + control: 'text', + }, + clearQueue: { + control: 'function', + }, + errorMessages: { + control: 'object', + }, + fileQueue: { + control: 'object', + }, + findInQueue: { + control: 'function', + }, + id: { + control: 'text', + }, + isFluid: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + onDismiss: { + control: 'function', + }, + updateQueue: { + control: 'function', + }, + }, + args: { + id: 'file-uploader', + isFluid: false, + }, +}; + +export default meta; +type Story = StoryObj; + +const FileUploaderWithHooks = (args: SpiritFileUploaderProps) => { + const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); + + const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( + + ); + + return ( + + console.error('My error log', error)} + isMultiple + /> + + + ); +}; + +export const Playground: Story = { + name: 'FileUploader', + render: (args) => , +}; diff --git a/packages/web-react/src/components/FileUploader/FileUploaderAttachment.stories.tsx b/packages/web-react/src/components/FileUploader/FileUploaderAttachment.stories.tsx new file mode 100644 index 0000000000..777cb92818 --- /dev/null +++ b/packages/web-react/src/components/FileUploader/FileUploaderAttachment.stories.tsx @@ -0,0 +1,94 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import FileUploader from './FileUploader'; +import FileUploaderAttachment from './FileUploaderAttachment'; +import ReadMe from './README.md'; + +const base64Image = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P4z8AAwADgPwMH2I7PAAAAAElFTkSuQmCC'; + +// Convert Base64 to Uint8Array +const byteCharacters = atob(base64Image); +const byteNumbers = new Array(byteCharacters.length); +for (let i = 0; i < byteCharacters.length; i++) { + byteNumbers[i] = byteCharacters.charCodeAt(i); +} +const byteArray = new Uint8Array(byteNumbers); + +const meta: Meta = { + title: 'Components/FileUploader', + component: FileUploaderAttachment, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + editText: { + control: 'text', + table: { + defaultValue: { summary: 'Edit' }, + }, + }, + file: { + control: 'file', + }, + hasImagePreview: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + iconName: { + control: 'text', + table: { + defaultValue: { summary: 'file' }, + }, + }, + id: { + control: 'text', + }, + label: { + control: 'text', + }, + name: { + control: 'text', + }, + onDismiss: { + control: 'text', + }, + onEdit: { + control: 'text', + }, + onError: { + control: 'text', + }, + removeText: { + control: 'text', + table: { + defaultValue: { summary: 'Remove' }, + }, + }, + }, + args: { + editText: 'Edit', + file: new File([byteArray], 'test1.png', { type: 'image/png', lastModified: 123456789 }), + hasImagePreview: false, + id: 'file-uploader-attachment-example', + iconName: 'file', + label: 'File name', + name: 'attachments', + onDismiss: undefined, + onEdit: undefined, + onError: undefined, + removeText: 'Remove', + }, +}; + +export default meta; +type Story = StoryObj; + +export const FileUploaderAttachmentPlayground: Story = { + name: 'FileUploaderAttachment', +}; diff --git a/packages/web-react/src/components/FileUploader/FileUploaderInput.stories.tsx b/packages/web-react/src/components/FileUploader/FileUploaderInput.stories.tsx new file mode 100644 index 0000000000..5196939207 --- /dev/null +++ b/packages/web-react/src/components/FileUploader/FileUploaderInput.stories.tsx @@ -0,0 +1,169 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { ValidationStates } from '../../constants'; +import { SpiritFileUploaderAttachmentProps, SpiritFileUploaderInputProps } from '../../types'; +import FileUploader from './FileUploader'; +import FileUploaderAttachment from './FileUploaderAttachment'; +import FileUploaderInput from './FileUploaderInput'; +import FileUploaderList from './FileUploaderList'; +import { useFileQueue } from './useFileQueue'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/FileUploader', + component: FileUploaderInput, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + accept: { + control: 'text', + }, + helperText: { + control: 'text', + }, + iconName: { + control: 'text', + table: { + defaultValue: { summary: 'upload' }, + }, + }, + id: { + control: 'text', + }, + isDisabled: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + isLabelHidden: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + isMultiple: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + isRequired: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + label: { + control: 'text', + }, + labelText: { + control: 'text', + }, + linkText: { + control: 'text', + }, + maxFileSize: { + control: 'number', + table: { + defaultValue: { summary: 1000000 }, + }, + }, + maxUploadedFiles: { + control: 'number', + table: { + defaultValue: { summary: 10 }, + }, + }, + name: { + control: 'text', + }, + onError: { + control: 'text', + }, + queueLimitBehavior: { + control: 'select', + options: ['hide', 'disable', 'none'], + table: { + defaultValue: { summary: 'none' }, + }, + }, + validationState: { + control: 'select', + options: [...Object.values(ValidationStates), undefined], + table: { + defaultValue: { summary: undefined }, + }, + }, + validationText: { + control: 'object', + description: + 'The validation text. Only visible if validationState is set. Use a string `"foo"` for single validation text or an array for multiple validation texts `["foo", "bar"]`.', + }, + }, + args: { + helperText: 'Max file size is 10 MB', + id: 'fileUploaderExampleInput', + isDisabled: false, + isLabelHidden: false, + isMultiple: false, + isRequired: false, + label: 'Label', + labelText: 'or drag and drop here', + linkText: 'Upload your file(s)', + maxUploadedFiles: 2, + name: 'attachments', + onError: undefined, + validationState: undefined, + validationText: 'Validation message', + }, +}; + +export default meta; +type Story = StoryObj; + +const FileUploaderWithHooks = (args: SpiritFileUploaderInputProps) => { + const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); + + const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( + + ); + + return ( + + + + + ); +}; + +export const FileUploaderInputPlayground: Story = { + name: 'FileUploaderInput', + render: (args) => ( + console.error('My error log', error)} + /> + ), +}; diff --git a/packages/web-react/src/components/FileUploader/FileUploaderList.stories.tsx b/packages/web-react/src/components/FileUploader/FileUploaderList.stories.tsx new file mode 100644 index 0000000000..6a5565a89d --- /dev/null +++ b/packages/web-react/src/components/FileUploader/FileUploaderList.stories.tsx @@ -0,0 +1,87 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { SpiritFileUploaderAttachmentProps, SpiritFileUploaderListProps } from '../../types'; +import FileUploader from './FileUploader'; +import FileUploaderAttachment from './FileUploaderAttachment'; +import FileUploaderInput from './FileUploaderInput'; +import FileUploaderList from './FileUploaderList'; +import { useFileQueue } from './useFileQueue'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/FileUploader', + component: FileUploaderList, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + hasImagePreview: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + id: { + control: 'text', + }, + inputName: { + control: 'text', + }, + label: { + control: 'text', + }, + }, + args: { + hasImagePreview: false, + id: 'fileUploaderExampleList', + inputName: 'attachments', + label: 'Attachments', + }, +}; + +export default meta; +type Story = StoryObj; + +const FileUploaderWithHooks = (args: SpiritFileUploaderListProps) => { + const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue(); + + const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( + + ); + + return ( + + console.error('My error log', error)} + isMultiple + /> + + + ); +}; + +export const FileUploaderListPlayground: Story = { + name: 'FileUploaderList', + render: (args) => , +}; diff --git a/packages/web-react/src/components/FileUploader/UncontrolledFileUploader.stories.tsx b/packages/web-react/src/components/FileUploader/UncontrolledFileUploader.stories.tsx index dd88aad594..351568043c 100644 --- a/packages/web-react/src/components/FileUploader/UncontrolledFileUploader.stories.tsx +++ b/packages/web-react/src/components/FileUploader/UncontrolledFileUploader.stories.tsx @@ -1,11 +1,229 @@ -import { ComponentMeta } from '@storybook/react'; -import argTypes from './demo/argTypesUncontrolled'; +import React, { createRef, FormEvent, MutableRefObject, useState } from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { ValidationStates } from '../../constants'; +import { + FileQueueMapType, + SpiritFileUploaderAttachmentProps, + SpiritUncontrolledFileUploaderProps, + ValidationState, +} from '../../types'; +import { Button } from '../Button'; +import FileUploaderAttachment from './FileUploaderAttachment'; import UncontrolledFileUploader from './UncontrolledFileUploader'; +import ReadMe from './README.md'; -export default { +const meta: Meta = { title: 'Components/FileUploader', component: UncontrolledFileUploader, - argTypes, -} as ComponentMeta; + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + helperText: { + control: 'text', + }, + iconName: { + control: 'text', + table: { + defaultValue: { summary: 'upload' }, + }, + }, + id: { + control: 'text', + }, + inputId: { + control: 'text', + }, + inputLabel: { + control: 'text', + }, + inputName: { + control: 'text', + }, + isDisabled: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + isFluid: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + isLabelHidden: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + isMultiple: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + isRequired: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + labelText: { + control: 'text', + }, + linkText: { + control: 'text', + }, + listId: { + control: 'text', + }, + maxFileSize: { + control: 'number', + table: { + defaultValue: { summary: 1000000 }, + }, + }, + maxUploadedFiles: { + control: 'number', + table: { + defaultValue: { summary: 10 }, + }, + }, + queueLimitBehavior: { + control: 'select', + options: ['hide', 'disable', 'none'], + table: { + defaultValue: { summary: 'none' }, + }, + }, + validationState: { + control: 'select', + options: [...Object.values(ValidationStates), undefined], + table: { + defaultValue: { summary: undefined }, + }, + }, + validationText: { + control: 'object', + description: + 'The validation text. Only visible if validationState is set. Use a string `"foo"` for single validation text or an array for multiple validation texts `["foo", "bar"]`.', + }, + }, + args: { + id: 'fileUploaderUncontrolled', + inputId: 'fileUploaderUncontrolledInput', + inputName: 'attachments', + inputLabel: 'Input label', + listId: 'fileUploaderUncontrolledList', + linkText: 'Upload your file(s)', + labelText: 'or drag and drop here', + helperText: 'Max file size is 10 MB', + isDisabled: false, + isFluid: false, + isLabelHidden: false, + isMultiple: true, + isRequired: false, + }, +}; + +export default meta; +type Story = StoryObj; + +const UncontrolledFileUploaderWithHooks = (args: SpiritUncontrolledFileUploaderProps) => { + const [submitting, setSubmitting] = useState(false); + const [submitted, setSubmitted] = useState(false); + const [validationText, setValidationText] = useState(undefined); + const [validationState, setValidationState] = useState(undefined); + const [queue, setQueue] = useState(new Map()); + + const inputReference = createRef() as MutableRefObject; + const dropZoneReference = createRef() as MutableRefObject; + + const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => ( + + ); + + const changeHandler = (fileQueue: FileQueueMapType) => { + setQueue(fileQueue); + console.log('change handler:', fileQueue); + }; + + const submitHandler = (event: FormEvent) => { + event.preventDefault(); + const master = new Map(queue); + + setSubmitting(true); + console.log('inputReference:', inputReference); + console.log('dropZoneReference:', dropZoneReference); + + setTimeout(() => { + console.info('form data:', master, event); + setSubmitting(false); + setSubmitted(true); + + queue.clear(); + setQueue(new Map(queue)); + }, 2500); + }; + + const errorHandler = (error: string | Error) => { + console.error(error); + setValidationState('danger'); + setValidationText(String(error)); + + setTimeout(() => { + setValidationState(undefined); + setValidationText(undefined); + }, 5000); + }; + + const resetStateHandler = () => { + setValidationState(undefined); + setValidationText(undefined); + setSubmitted(false); + }; + + return ( +
+

+ + When you open your console in a browser, you can see the changes as you send or add/remove items from the + queue. + +

+ +
+ + {submitted && ( + + )} +
+ + ); +}; -export { default as FileUploaderUncontrolled } from './demo/FileUploaderUncontrolled'; +export const UncontrolledFileUploaderPlayground: Story = { + name: 'UncontrolledFileUploader', + render: (args) => , +}; diff --git a/packages/web-react/src/components/FileUploader/demo/argTypesUncontrolled.ts b/packages/web-react/src/components/FileUploader/demo/argTypesUncontrolled.ts deleted file mode 100644 index 3535107c45..0000000000 --- a/packages/web-react/src/components/FileUploader/demo/argTypesUncontrolled.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { ValidationStates } from '../../../constants'; - -export default { - validationState: { - control: { - type: 'select', - options: [...Object.values(ValidationStates), undefined], - }, - defaultValue: undefined, - }, - iconName: { - control: { - type: 'text', - }, - }, - isDisabled: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - isLabelHidden: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - queueLimitBehavior: { - control: { - type: 'select', - options: ['hide', 'disable', 'none'], - }, - defaultValue: 'none', - }, - isFluid: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - isRequired: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - inputLabel: { - control: { - type: 'text', - }, - defaultValue: 'Label', - }, - linkText: { - control: { - type: 'text', - }, - defaultValue: 'Upload your file', - }, - labelText: { - control: { - type: 'text', - }, - defaultValue: 'or drag and drop here', - }, - helperText: { - control: { - type: 'text', - }, - defaultValue: 'Max file size is 10 MB', - }, - maxFileSize: { - control: { - type: 'number', - }, - defaultValue: 10000000, - }, - maxUploadedFiles: { - control: { - type: 'number', - }, - defaultValue: 10, - }, -}; diff --git a/packages/web-react/src/components/Radio/Radio.stories.ts b/packages/web-react/src/components/Radio/Radio.stories.ts deleted file mode 100644 index d8dc3db284..0000000000 --- a/packages/web-react/src/components/Radio/Radio.stories.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import argTypes from './demo/argTypes'; -import Radio from './Radio'; - -export default { - title: 'Components/Radio', - component: Radio, - parameters: { - docs: { - description: { - component: - 'Use Radio when you have a group of mutually exclusive choices and only one selection from the group is allowed.', - }, - }, - }, - args: { - label: 'Radio', - }, - argTypes, -} as ComponentMeta; - -export { default as Radio } from './demo/Radio'; diff --git a/packages/web-react/src/components/Radio/Radio.stories.tsx b/packages/web-react/src/components/Radio/Radio.stories.tsx new file mode 100644 index 0000000000..f1ba4b9dff --- /dev/null +++ b/packages/web-react/src/components/Radio/Radio.stories.tsx @@ -0,0 +1,88 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { ValidationStates } from '../../constants'; +import { Radio } from './Radio'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/Radio', + component: Radio, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + autoComplete: { + control: 'text', + }, + helperText: { + control: 'text', + }, + id: { + control: 'text', + }, + isDisabled: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + isChecked: { + control: 'boolean', + table: { + defaultValue: { summary: true }, + }, + }, + isItem: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + isLabelHidden: { + control: 'boolean', + table: { + defaultValue: { summary: false }, + }, + }, + label: { + control: 'text', + }, + name: { + control: 'text', + }, + validationState: { + control: 'select', + options: [...Object.values(ValidationStates), undefined], + table: { + defaultValue: { summary: undefined }, + }, + }, + value: { + control: 'text', + }, + }, + args: { + autoComplete: 'off', + helperText: 'Helper text', + id: 'Radio', + isDisabled: false, + isChecked: true, + isItem: false, + isLabelHidden: false, + label: 'Label', + name: 'Radio', + validationState: undefined, + value: 'Radio', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + name: 'Radio', +}; diff --git a/packages/web-react/src/components/Radio/demo/argTypes.ts b/packages/web-react/src/components/Radio/demo/argTypes.ts deleted file mode 100644 index 96810021aa..0000000000 --- a/packages/web-react/src/components/Radio/demo/argTypes.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { ValidationStates } from '../../../constants'; - -export default { - validationState: { - control: { - type: 'select', - options: [...Object.values(ValidationStates), undefined], - }, - defaultValue: undefined, - }, - isDisabled: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - isChecked: { - control: { - type: 'boolean', - }, - defaultValue: true, - }, - isLabelHidden: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - isItem: { - control: { - type: 'boolean', - }, - defaultValue: false, - }, - label: { - control: { - type: 'text', - }, - defaultValue: 'Field label', - }, - name: { - control: { - type: 'text', - }, - defaultValue: 'example', - }, - for: { - control: { - type: 'text', - }, - defaultValue: '', - }, - helperText: { - control: { - type: 'text', - }, - defaultValue: '', - }, -}; diff --git a/packages/web-react/src/components/Select/Select.stories.ts b/packages/web-react/src/components/Select/Select.stories.ts deleted file mode 100644 index 060935f37e..0000000000 --- a/packages/web-react/src/components/Select/Select.stories.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import argTypes from './demo/argTypes'; -import Select from './Select'; - -export default { - title: 'Components/Select', - component: Select, - parameters: { - docs: { - description: { - component: 'The Select component serves the user to select one option from several defined options', - }, - }, - }, - argTypes, -} as ComponentMeta; - -export { default as Select } from './demo/Select'; diff --git a/packages/web-react/src/components/Select/Select.stories.tsx b/packages/web-react/src/components/Select/Select.stories.tsx new file mode 100644 index 0000000000..eb972ce6a4 --- /dev/null +++ b/packages/web-react/src/components/Select/Select.stories.tsx @@ -0,0 +1,138 @@ +import React from 'react'; +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { ValidationStates } from '../../constants'; +import { Select } from './Select'; +import ReadMe from './README.md'; + +const meta: Meta = { + title: 'Components/Select', + component: Select, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + autoComplete: { + control: 'text', + }, + children: { + control: 'select', + options: ['simple', 'placeholder', 'placeholder & disabled', 'suboptions'], + description: `This is the place for the content of the Select. In the real code you can + pass in any usuall \`