@xqmsg/ui-core 0.23.1-rc.0 → 0.23.1-rc.2

package/src/components/icons/workspace/index.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
-import { Image } from '@chakra-ui/react';
-import path from './workspace.png';
-
-export interface WorkspaceProps {
-  boxSize: number | string;
-}
-
-/**
- * A functional React component utilized to render the `Workspace` icon component
- */
-export const Workspace: React.FC<WorkspaceProps> = ({ boxSize }) => {
-  return <Image src={path} boxSize={boxSize} />;
-};
+import React from 'react';
+import { Image } from '@chakra-ui/react';
+import path from './workspace.png';
+
+export interface WorkspaceProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `Workspace` icon component
+ */
+export const Workspace: React.FC<WorkspaceProps> = ({ boxSize }) => {
+  return <Image src={path} boxSize={boxSize} />;
+};

package/src/components/input/Input.stories.tsx

@@ -1,286 +1,287 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import { Input, InputProps } from '.';
-import { useFormHandler } from '../form/hooks/useFormHandler';
-import * as Yup from 'yup';
-import { Form } from '../form';
-import { SelectNative } from '../select';
-
-const meta: Meta<InputProps<StoryFormSchema>> = {
-  title: 'Input example',
-  component: Input,
-  argTypes: {
-    label: {
-      control: {
-        type: 'text',
-      },
-      description: 'The label for the input',
-    },
-    inputType: {
-      description: 'The type of the input',
-    },
-    options: {
-      control: 'array',
-      description: 'The options for select/radio fields',
-    },
-    maxLength: {
-      control: {
-        type: 'number',
-      },
-      description: 'The max length for the input value',
-    },
-    helperText: {
-      control: {
-        type: 'text',
-      },
-      description: 'The helper text for the input',
-    },
-    errorText: {
-      control: {
-        type: 'text',
-      },
-      description: 'The error message for the input',
-    },
-    isInvalid: {
-      control: 'boolean',
-      description: 'The flag for whether the input value is valid or not',
-    },
-    isRequired: {
-      control: 'boolean',
-      description: 'The flag for whether the input field is required or not',
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-interface StoryFormSchema {
-  prop?: string;
-  prop2?: string;
-  prop3?: string;
-  prop4?: string;
-  prop5?: string;
-  prop6?: boolean;
-}
-
-const onStubbedSubmit = () => null;
-
-const storyFormDefaultValues: StoryFormSchema = {
-  prop: '',
-  prop2: '',
-  prop3: '',
-  prop4: '',
-  prop5: '',
-  prop6: true,
-};
-
-const storyFormSchema: Yup.SchemaOf<StoryFormSchema> = Yup.object().shape({
-  prop: Yup.string(),
-  prop2: Yup.string(),
-  prop3: Yup.string(),
-  prop4: Yup.string(),
-  prop5: Yup.string(),
-  prop6: Yup.boolean(),
-});
-
-export default meta;
-const Template: Story<InputProps<StoryFormSchema>> = args => {
-  const formHandler = useFormHandler<StoryFormSchema>(
-    onStubbedSubmit,
-    storyFormDefaultValues,
-    storyFormSchema,
-    false,
-    'all'
-  );
-
-  const { form } = formHandler;
-
-  return (
-    <Form formHandler={formHandler}>
-      <Input
-        {...args}
-        inputType="multi-select"
-        setValue={form.setValue}
-        setError={form.setError}
-        clearErrors={form.clearErrors}
-        isInvalid={!!form.formState.errors['prop5']?.message}
-        errorText={form.formState.errors['prop5']?.message}
-        name="prop5"
-      />
-      <Input
-        {...args}
-        inputType="multi-select"
-        variant="mobile"
-        setValue={form.setValue}
-        setError={form.setError}
-        clearErrors={form.clearErrors}
-        isInvalid={!!form.formState.errors['prop5']?.message}
-        errorText={form.formState.errors['prop5']?.message}
-        name="prop5"
-      />
-      <Input
-        {...args}
-        inputType="text"
-        name="prop3"
-        onChange={e => form.setValue('prop3', e.target.value)}
-      />
-      <Input
-        {...args}
-        inputType="text"
-        variant="mobile"
-        name="prop3"
-        onChange={e => form.setValue('prop3', e.target.value)}
-      />
-      <Input
-        {...args}
-        inputType="textarea"
-        name="prop2"
-        onChange={e => form.setValue('prop2', e.target.value)}
-      />
-      <Input
-        {...args}
-        inputType="textarea"
-        variant="mobile"
-        name="prop2"
-        onChange={e => form.setValue('prop2', e.target.value)}
-      />
-      <Input
-        {...args}
-        name="prop"
-        inputType="pilled-text"
-        setValue={form.setValue}
-        setError={form.setError}
-        clearErrors={form.clearErrors}
-        isInvalid={!!form.formState.errors['prop']?.message}
-        errorText={form.formState.errors['prop']?.message}
-      />
-      <Input
-        {...args}
-        name="prop"
-        variant="mobile"
-        inputType="pilled-text"
-        setValue={form.setValue}
-        setError={form.setError}
-        clearErrors={form.clearErrors}
-        isInvalid={!!form.formState.errors['prop']?.message}
-        errorText={form.formState.errors['prop']?.message}
-      />
-      <Input
-        {...args}
-        inputType="select"
-        setValue={form.setValue}
-        name="prop4"
-        defaultValue={'value1'}
-      />
-      <SelectNative
-        {...args}
-        setValue={form.setValue}
-        name="prop4"
-        setError={form.setError}
-        clearErrors={form.clearErrors}
-        isInvalid={!!form.formState.errors['prop']?.message}
-        errorText={form.formState.errors['prop']?.message}
-        disabled={false}
-        isRequired
-        control={form.control}
-        ariaLabel="expires in input"
-        defaultValue={'value1'}
-      />
-      <Input
-        {...args}
-        name="prop6"
-        inputType="switch"
-        setValue={form.setValue}
-      />
-      <Input
-        {...args}
-        name="prop6"
-        variant="mobile"
-        inputType="switch"
-        setValue={form.setValue}
-      />
-      <Input
-        {...args}
-        name="prop6"
-        inputType="checkbox"
-        setValue={form.setValue}
-      />
-      <Input
-        {...args}
-        name="prop6"
-        inputType="checkbox"
-        variant="mobile"
-        setValue={form.setValue}
-      />
-    </Form>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Input Label',
-  inputType: 'text',
-  options: [
-    { value: 'section_header', label: 'Section 1', sortValue: 0 },
-    {
-      value: 'value1',
-      label: 'Value 1',
-      sortValue: 1,
-    },
-    {
-      value: 'value2',
-      label: 'Value 2',
-      sortValue: 2,
-    },
-    {
-      value: 'value3',
-      label: 'Value 3',
-      sortValue: 3,
-    },
-    {
-      value: 'value4',
-      label: 'Value 4 Which is very long',
-      sortValue: 4,
-    },
-    { value: 'section_header', label: 'Section 2', sortValue: 5 },
-    {
-      value: 'value5',
-      label: 'Value 5',
-      sortValue: 6,
-    },
-    {
-      value: 'value6',
-      label: 'Value 6',
-      sortValue: 7,
-    },
-    {
-      value: 'value7',
-      label: 'Value 7',
-      sortValue: 8,
-    },
-    {
-      value: 'value8',
-      label: 'Value 8',
-      sortValue: 9,
-    },
-    {
-      value: 'value9',
-      label: 'Value 9',
-      sortValue: 10,
-    },
-    {
-      value: 'value10',
-      label: 'Balue 10',
-      sortValue: 11,
-    },
-    {
-      value: 'value11',
-      label: 'C 11',
-      sortValue: 12,
-    },
-  ],
-  isRequired: true,
-  isInvalid: false,
-};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { Input, InputProps } from '.';
+import { useFormHandler } from '../form/hooks/useFormHandler';
+import * as Yup from 'yup';
+import { Form } from '../form';
+import { SelectNative } from '../select';
+
+const meta: Meta<InputProps<StoryFormSchema>> = {
+  title: 'Input example',
+  component: Input,
+  argTypes: {
+    label: {
+      control: {
+        type: 'text',
+      },
+      description: 'The label for the input',
+    },
+    inputType: {
+      description: 'The type of the input',
+    },
+    options: {
+      control: 'array',
+      description: 'The options for select/radio fields',
+    },
+    maxLength: {
+      control: {
+        type: 'number',
+      },
+      description: 'The max length for the input value',
+    },
+    helperText: {
+      control: {
+        type: 'text',
+      },
+      description: 'The helper text for the input',
+    },
+    errorText: {
+      control: {
+        type: 'text',
+      },
+      description: 'The error message for the input',
+    },
+    isInvalid: {
+      control: 'boolean',
+      description: 'The flag for whether the input value is valid or not',
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'The flag for whether the input field is required or not',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+interface StoryFormSchema {
+  prop?: string;
+  prop2?: string;
+  prop3?: string;
+  prop4?: string;
+  prop5?: string;
+  prop6?: boolean;
+}
+
+const onStubbedSubmit = () => null;
+
+const storyFormDefaultValues: StoryFormSchema = {
+  prop: '',
+  prop2: '',
+  prop3: '',
+  prop4: '',
+  prop5: '',
+  prop6: true,
+};
+
+const storyFormSchema: Yup.SchemaOf<StoryFormSchema> = Yup.object().shape({
+  prop: Yup.string(),
+  prop2: Yup.string(),
+  prop3: Yup.string(),
+  prop4: Yup.string(),
+  prop5: Yup.string(),
+  prop6: Yup.boolean(),
+});
+
+export default meta;
+const Template: Story<InputProps<StoryFormSchema>> = args => {
+  const formHandler = useFormHandler<StoryFormSchema>(
+    onStubbedSubmit,
+    storyFormDefaultValues,
+    storyFormSchema,
+    false,
+    'all'
+  );
+
+  const { form } = formHandler;
+
+  return (
+    <Form formHandler={formHandler}>
+      <Input
+        {...args}
+        inputType="multi-select"
+        setValue={form.setValue}
+        setError={form.setError}
+        clearErrors={form.clearErrors}
+        isInvalid={!!form.formState.errors['prop5']?.message}
+        errorText={form.formState.errors['prop5']?.message}
+        name="prop5"
+      />
+      <Input
+        {...args}
+        inputType="multi-select"
+        variant="mobile"
+        setValue={form.setValue}
+        setError={form.setError}
+        clearErrors={form.clearErrors}
+        isInvalid={!!form.formState.errors['prop5']?.message}
+        errorText={form.formState.errors['prop5']?.message}
+        name="prop5"
+      />
+      <Input
+        {...args}
+        inputType="text"
+        name="prop3"
+        onChange={e => form.setValue('prop3', e.target.value)}
+      />
+      <Input
+        {...args}
+        inputType="text"
+        variant="mobile"
+        name="prop3"
+        onChange={e => form.setValue('prop3', e.target.value)}
+      />
+      <Input
+        {...args}
+        inputType="textarea"
+        name="prop2"
+        onChange={e => form.setValue('prop2', e.target.value)}
+      />
+      <Input
+        {...args}
+        inputType="textarea"
+        variant="mobile"
+        name="prop2"
+        onChange={e => form.setValue('prop2', e.target.value)}
+      />
+      <Input
+        {...args}
+        name="prop"
+        inputType="pilled-text"
+        setValue={form.setValue}
+        setError={form.setError}
+        clearErrors={form.clearErrors}
+        isInvalid={!!form.formState.errors['prop']?.message}
+        errorText={form.formState.errors['prop']?.message}
+      />
+      <Input
+        {...args}
+        name="prop"
+        variant="mobile"
+        inputType="pilled-text"
+        setValue={form.setValue}
+        setError={form.setError}
+        clearErrors={form.clearErrors}
+        isInvalid={!!form.formState.errors['prop']?.message}
+        errorText={form.formState.errors['prop']?.message}
+      />
+      <Input
+        {...args}
+        inputType="select"
+        setValue={form.setValue}
+        name="prop4"
+        defaultValue={'value1'}
+      />
+      <SelectNative
+        {...args}
+        setValue={form.setValue}
+        name="prop4"
+        setError={form.setError}
+        clearErrors={form.clearErrors}
+        isInvalid={!!form.formState.errors['prop']?.message}
+        errorText={form.formState.errors['prop']?.message}
+        disabled={false}
+        isRequired
+        control={form.control}
+        ariaLabel="expires in input"
+        defaultValue={'value1'}
+        variant="mobile"
+      />
+      <Input
+        {...args}
+        name="prop6"
+        inputType="switch"
+        setValue={form.setValue}
+      />
+      <Input
+        {...args}
+        name="prop6"
+        variant="mobile"
+        inputType="switch"
+        setValue={form.setValue}
+      />
+      <Input
+        {...args}
+        name="prop6"
+        inputType="checkbox"
+        setValue={form.setValue}
+      />
+      <Input
+        {...args}
+        name="prop6"
+        inputType="checkbox"
+        variant="mobile"
+        setValue={form.setValue}
+      />
+    </Form>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Input Label',
+  inputType: 'text',
+  options: [
+    { value: 'section_header', label: 'Section 1', sortValue: 0 },
+    {
+      value: 'value1',
+      label: 'Value 1',
+      sortValue: 1,
+    },
+    {
+      value: 'value2',
+      label: 'Value 2',
+      sortValue: 2,
+    },
+    {
+      value: 'value3',
+      label: 'Value 3',
+      sortValue: 3,
+    },
+    {
+      value: 'value4',
+      label: 'Value 4 Which is very long',
+      sortValue: 4,
+    },
+    { value: 'section_header', label: 'Section 2', sortValue: 5 },
+    {
+      value: 'value5',
+      label: 'Value 5',
+      sortValue: 6,
+    },
+    {
+      value: 'value6',
+      label: 'Value 6',
+      sortValue: 7,
+    },
+    {
+      value: 'value7',
+      label: 'Value 7',
+      sortValue: 8,
+    },
+    {
+      value: 'value8',
+      label: 'Value 8',
+      sortValue: 9,
+    },
+    {
+      value: 'value9',
+      label: 'Value 9',
+      sortValue: 10,
+    },
+    {
+      value: 'value10',
+      label: 'Balue 10',
+      sortValue: 11,
+    },
+    {
+      value: 'value11',
+      label: 'C 11',
+      sortValue: 12,
+    },
+  ],
+  isRequired: true,
+  isInvalid: false,
+};