@spaced-out/ui-design-system 0.4.13-beta.0 → 0.4.13-beta.1

package/lib/components/Input/NativeDatepicker.stories.tsx

@@ -1,424 +0,0 @@
-import * as React from 'react';
-
-import type {InputProps} from './Input';
-import {Input} from './Input';
-
-import css from './Input.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Form Components/Native Pickers',
-  component: Input,
-  argTypes: {
-    size: {
-      options: ['small', 'medium'],
-      description:
-        'Input supports only two size variants namely small and medium. `small` < `medium`',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    iconLeftName: {
-      description:
-        'Left icon to be applied to the button, it internally uses the `Icon` component to render icons',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    iconLeftType: {
-      description:
-        'Type of Left Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',
-      options: ['regular', 'solid', 'duotone', 'brands'],
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'regular'},
-      },
-    },
-    iconRightName: {
-      description:
-        'Right icon to be applied to the button, it internally uses the `Icon` component to render icons',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    iconRightType: {
-      description:
-        'Type of Right Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',
-      options: ['regular', 'solid', 'duotone', 'brands'],
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'regular'},
-      },
-    },
-    value: {
-      description: 'Value of the input',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    name: {
-      description: 'Name of the input',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    disabled: {
-      description: 'if **true**, the component is disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    required: {
-      description: 'if **true**, a red star would be added to the label',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    placeholder: {
-      description: 'Placeholder of input. This appears inside the input box',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    locked: {
-      description:
-        'if **true**, the component is locked, Locked state is the readonly state of the input',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    error: {
-      description:
-        'if **true**, the component is moved to error state, Error state displays a red border surrounding input',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    errorText: {
-      description:
-        'Error text to be displayed on the bottom of the input. This uses `colorTextDanger`',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    label: {
-      description: 'Primary label of the input. This appears on top of input',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    helperText: {
-      description:
-        'Secondary label of the input. This appears on bottom of input, if the input is in `error` state the priority is given to `errorText`, in such cases secondary label wont be displayed',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    classNames: {
-      description: 'External classnames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{box?: string, iconLeft?: string, iconRight?: string}',
-        },
-      },
-    },
-    readOnly: {
-      description: 'if **true**, component would move to readonly state',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-      },
-    },
-    minLength: {
-      description: 'Minimum length (number of characters) of `value`',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    maxLength: {
-      description: 'Maximum length (number of characters) of `value`',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    pattern: {
-      description: 'Pattern the `value` must match to be valid',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    min: {
-      description: 'Minimum `value`',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    max: {
-      description: 'Maximum `value`',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    step: {
-      description: 'Incremental `values` that are valid',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    onChange: {
-      description:
-        '**onChange** handler is triggered when there is a change in input value',
-      action: 'changed',
-      table: {
-        type: {
-          summary:
-            'onChange?: ( evt: SyntheticInputEvent<HTMLInputElement>, isEnter?: boolean, ) => mixed',
-        },
-      },
-    },
-    onFocus: {
-      description: '**onFocus** handler is triggered when input is focussed',
-      action: 'focussed',
-      table: {
-        type: {summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'},
-      },
-    },
-    onBlur: {
-      description: '**onBlur** handler is triggered when input is blurred',
-      action: 'blurred',
-      table: {
-        type: {summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'},
-      },
-    },
-    onKeyDown: {
-      description: '**onKeyDown** handler is triggered on keypress',
-      action: 'onKeyDowned',
-      table: {
-        type: {summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'},
-      },
-    },
-    onIconRightClick: {
-      description:
-        '**onIconRightClick** handler is triggered on click of the right icon',
-      action: 'onIconRightClicked',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    onPaste: {
-      description:
-        '**onPaste** handler is triggered when text is pasted from the clipboard',
-      action: 'pasted',
-      table: {
-        type: {summary: '(e: ClipboardEvent) => mixed'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Input component',
-      description: {
-        component: `
-\`\`\`js
-import { Input } from "@spaced-out/ui-design-system/lib/components/Input";
-\`\`\`
-Basic input type \`date\` component which supports error, disabled and locked states. All values from the input component are sent as \`string\`<br>
-Input alo supports a bunch of **callbacks** listed below.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Input',
-    },
-  },
-};
-
-export const _DatePicker = (args: InputProps) => {
-  const [value, setValue] = React.useState(args.value);
-
-  React.useEffect(() => {
-    setValue(args.value);
-  }, [args.value]);
-
-  return (
-    <div className={css.inputContainer}>
-      <Input
-        {...args}
-        type="date"
-        onChange={(e) => setValue(e.target.value)}
-        value={value}
-      />
-    </div>
-  );
-};
-
-_DatePicker.args = {
-  label: 'Input a date',
-  value: '',
-};
-
-export const _TimePicker = (args: InputProps) => {
-  const [value, setValue] = React.useState(args.value);
-
-  React.useEffect(() => {
-    setValue(args.value);
-  }, [args.value]);
-
-  return (
-    <div className={css.inputContainer}>
-      <Input
-        {...args}
-        type="time"
-        onChange={(e) => setValue(e.target.value)}
-        value={value}
-      />
-    </div>
-  );
-};
-
-_TimePicker.args = {
-  label: 'Input time',
-  value: '',
-};
-
-export const _DateTimePicker = (args: InputProps) => {
-  const [value, setValue] = React.useState(args.value);
-
-  React.useEffect(() => {
-    setValue(args.value);
-  }, [args.value]);
-
-  return (
-    <div className={css.inputContainer}>
-      <Input
-        {...args}
-        type="datetime-local"
-        onChange={(e) => setValue(e.target.value)}
-        value={value}
-      />
-    </div>
-  );
-};
-
-_DateTimePicker.args = {
-  label: 'Input a date time',
-  value: '',
-};
-
-export const _WeekPicker = (args: InputProps) => {
-  const [value, setValue] = React.useState(args.value);
-
-  React.useEffect(() => {
-    setValue(args.value);
-  }, [args.value]);
-
-  return (
-    <div className={css.inputContainer}>
-      <Input
-        {...args}
-        type="week"
-        onChange={(e) => setValue(e.target.value)}
-        value={value}
-      />
-    </div>
-  );
-};
-
-_WeekPicker.args = {
-  label: 'Input a Week',
-  value: '',
-};
-
-export const _MonthPicker = (args: InputProps) => {
-  const [value, setValue] = React.useState(args.value);
-
-  React.useEffect(() => {
-    setValue(args.value);
-  }, [args.value]);
-
-  return (
-    <div className={css.inputContainer}>
-      <Input
-        {...args}
-        type="month"
-        onChange={(e) => setValue(e.target.value)}
-        value={value}
-      />
-    </div>
-  );
-};
-
-_MonthPicker.args = {
-  label: 'Input a Month',
-  value: '',
-};

package/lib/components/Input/index.ts

@@ -1 +0,0 @@
-export * from './Input';