@innovaccer/design-system 2.9.0 → 2.10.0

package/core/components/molecules/verificationCodeInput/__stories__/index.story.tsx

@@ -1,59 +0,0 @@
-import * as React from 'react';
-import { VerificationCodeInput, Label } from '@/index';
-import { select, text, boolean } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-
-// CSF format story
-export const all = () => {
-  const inputType = select('type', ['text', 'password', 'number'], 'number');
-
-  const fields = select('fields', [4, 6], undefined);
-
-  const value = text('values', '6543');
-
-  const placeholder = text('placeholder', '-');
-
-  const disabled = boolean('disabled', false);
-
-  const autoFocus = boolean('autoFocus', true);
-
-  const readOnly = boolean('readOnly', false);
-
-  const error = boolean('error', false);
-
-  const pattern = text('pattern', '');
-
-  return (
-    <>
-      <Label withInput={true}>Verification code</Label>
-      <VerificationCodeInput
-        fields={fields}
-        type={inputType}
-        value={value}
-        disabled={disabled}
-        readOnly={readOnly}
-        onComplete={action('on-complete')}
-        onFocus={action('on-focus')}
-        onBlur={action('on-blur')}
-        placeholder={placeholder}
-        error={error}
-        pattern={pattern}
-        // TODO(a11y)
-        //  eslint-disable-next-line
-        autoFocus={autoFocus}
-      />
-    </>
-  );
-};
-
-export default {
-  title: 'Components/VerificationCodeInput/All',
-  component: VerificationCodeInput,
-  parameters: {
-    docs: {
-      docPage: {
-        title: 'Input',
-      },
-    },
-  },
-};

package/core/components/organisms/calendar/__stories__/index.story.tsx

@@ -1,69 +0,0 @@
-import * as React from 'react';
-import { boolean, select, date, number } from '@storybook/addon-knobs';
-import Calendar from '../Calendar';
-import Card from '@/components/atoms/card';
-import { action } from '@storybook/addon-actions';
-import { convertToDate } from '@/components/organisms/calendar/utility';
-
-// CSF format story
-export const all = () => {
-  const monthsInView = number('monthsInView', 1);
-
-  const dateValue = date('date', undefined);
-
-  const startDate = date('startDate', undefined);
-
-  const endDate = date('endDate', undefined);
-
-  const view = select('view', ['date', 'month', 'year'], undefined);
-
-  const rangePicker = boolean('rangePicker', false);
-
-  const rangeLimit = number('rangeLimit', 0);
-
-  const firstDayOfWeek = select(
-    'firstDayOfWeek',
-    ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'],
-    undefined
-  );
-
-  const disabledBefore = date('disabledBefore', new Date('Jan 20 2015'));
-
-  const disabledAfter = date('disabledAfter', new Date('Jan 20 2028'));
-
-  const jumpView = boolean('jumpView', true);
-
-  const yearNav = number('yearNav', -1);
-
-  const monthNav = number('monthNav', -1);
-
-  const attr: Record<string, any> = {};
-  if (disabledBefore) attr.disabledBefore = disabledBefore;
-  if (disabledAfter) attr.disabledAfter = disabledAfter;
-  if (rangeLimit) attr.rangeLimit = rangeLimit;
-  if (yearNav !== -1) attr.yearNav = yearNav;
-  if (monthNav !== -1) attr.monthNav = monthNav;
-
-  return (
-    <Card className="d-inline-flex" shadow="light">
-      <Calendar
-        monthsInView={monthsInView}
-        rangePicker={rangePicker}
-        jumpView={jumpView}
-        date={convertToDate(dateValue)}
-        startDate={convertToDate(startDate)}
-        endDate={convertToDate(endDate)}
-        onDateChange={(currDate?: Date) => action(`on date change : ${currDate}`)()}
-        onRangeChange={(sDate?: Date, eDate?: Date) => action(`on range change: ${sDate} - ${eDate}`)()}
-        view={view}
-        firstDayOfWeek={firstDayOfWeek}
-        {...attr}
-      />
-    </Card>
-  );
-};
-
-export default {
-  title: 'Components/Calendar/All',
-  component: Calendar,
-};

package/core/components/organisms/calendar/__stories__/variants/disabled.story.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import Calendar from '../../Calendar';
-import { View } from '@/components/organisms/calendar/types';
-import Card from '@/components/atoms/card';
-import Heading from '@/components/atoms/heading';
-
-// CSF format story
-export const disabled = () => {
-  const view: View[] = ['year', 'month', 'date'];
-
-  return (
-    <>
-      <Heading>disabledBefore</Heading>
-      <div className="d-flex">
-        {view.map((v, index) => (
-          <div className="mr-8" key={index}>
-            <Card className="d-inline-flex" shadow="light">
-              <Calendar date={new Date(2020, 2, 15)} disabledBefore={new Date(2020, 2, 10)} view={v} />
-            </Card>
-          </div>
-        ))}
-      </div>
-
-      <Heading>disabledAfter</Heading>
-      <div className="d-flex">
-        {view.map((v, index) => (
-          <div className="mr-8" key={index}>
-            <Card className="d-inline-flex" shadow="light">
-              <Calendar date={new Date(2020, 2, 15)} disabledAfter={new Date(2020, 2, 20)} view={v} />
-            </Card>
-          </div>
-        ))}
-      </div>
-
-      <Heading>disabledBefore and disabledAfter</Heading>
-      <div className="d-flex">
-        {view.map((v, index) => (
-          <div className="mr-8" key={index}>
-            <Card className="d-inline-flex" shadow="light">
-              <Calendar
-                date={new Date(2020, 2, 15)}
-                disabledBefore={new Date(2020, 2, 10)}
-                disabledAfter={new Date(2020, 2, 20)}
-                view={v}
-              />
-            </Card>
-          </div>
-        ))}
-      </div>
-    </>
-  );
-};
-
-export default {
-  title: 'Components/Calendar/Variants/Disabled',
-  component: Calendar,
-  parameters: {
-    docs: {
-      docPage: {
-        title: 'Calendar',
-      },
-    },
-  },
-};

package/core/components/organisms/calendar/__stories__/variants/firstDayOfWeek.story.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import Calendar from '../../Calendar';
-import { Day } from '@/components/organisms/calendar/types';
-import Card from '@/components/atoms/card';
-
-// CSF format story
-export const firstDayOfWeek = () => {
-  const values: Day[] = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
-
-  const style = {
-    flexWrap: 'wrap',
-  } as const;
-  // to freeze the object for typescript
-
-  return (
-    <div className="d-flex" style={style}>
-      {values.map((v, index) => (
-        <div className="mr-9 mt-5" key={index}>
-          <Card className="d-inline-flex" shadow="light">
-            <Calendar date={new Date(2020, 2, 1)} firstDayOfWeek={v} />
-          </Card>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default {
-  title: 'Components/Calendar/Variants/First Day Of Week',
-  component: Calendar,
-  parameters: {
-    docs: {
-      docPage: {
-        title: 'Calendar',
-      },
-    },
-  },
-};

package/core/components/organisms/calendar/__stories__/variants/size.story.tsx

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import Calendar from '../../Calendar';
-import { View } from '@/components/organisms/calendar/types';
-import Card from '@/components/atoms/card';
-import Heading from '@/components/atoms/heading';
-
-// CSF format story
-export const size = () => {
-  const view: View[] = ['year', 'month', 'date'];
-
-  return (
-    <>
-      <div className="mt-8">
-        <Heading>size: small</Heading>
-        <div className="d-flex">
-          {view.map((v, index) => (
-            <div className="mr-8" key={index}>
-              <Card className="d-inline-flex" shadow="light">
-                <Calendar date={new Date(2020, 2, 15)} size={'small'} view={v} />
-              </Card>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="mt-8">
-        <Heading>size: large</Heading>
-        <div className="d-flex">
-          {view.map((v, index) => (
-            <div className="mr-8" key={index}>
-              <Card className="d-inline-flex" shadow="light">
-                <Calendar date={new Date(2020, 2, 15)} size={'large'} view={v} />
-              </Card>
-            </div>
-          ))}
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default {
-  title: 'Components/Calendar/Variants/Size',
-  component: Calendar,
-  parameters: {
-    docs: {
-      docPage: {
-        title: 'Calendar',
-      },
-    },
-  },
-};

package/core/components/organisms/datePicker/__stories__/index.story.tsx

@@ -1,90 +0,0 @@
-import * as React from 'react';
-import { boolean, select, date, number } from '@storybook/addon-knobs';
-import { DatePicker, Card, InputMask } from '@/index';
-import { action } from '@storybook/addon-actions';
-
-// CSF format story
-export const all = () => {
-  const withInput = boolean('withInput', false);
-
-  const open = boolean('open', false);
-
-  const closeOnSelect = boolean('closeOnSelect', true);
-
-  const inputFormat = select(
-    'inputFormat',
-    ['mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd', 'mm-dd-yyyy', 'dd-mm-yyyy', 'yyyy-mm-dd'],
-    undefined
-  );
-
-  const outputFormat = select(
-    'outputFormat',
-    ['mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd', 'mm-dd-yyyy', 'dd-mm-yyyy', 'yyyy-mm-dd'],
-    undefined
-  );
-
-  const dateValue = date('date', undefined);
-
-  const view = select('view', ['date', 'month', 'year'], undefined);
-
-  const firstDayOfWeek = select(
-    'firstDayOfWeek',
-    ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'],
-    undefined
-  );
-
-  const disabledBefore = date('disabledBefore', new Date('Jan 20 2015'));
-
-  const disabledAfter = date('disabledAfter', new Date('Jan 20 2028'));
-
-  const jumpView = boolean('jumpView', true);
-
-  const yearNav = number('yearNav', -1);
-
-  const monthNav = number('monthNav', -1);
-
-  const attr: Record<string, any> = {};
-  if (disabledBefore) attr.disabledBefore = disabledBefore;
-  if (disabledAfter) attr.disabledAfter = disabledAfter;
-  if (yearNav !== -1) attr.yearNav = yearNav;
-  if (monthNav !== -1) attr.monthNav = monthNav;
-
-  if (withInput) {
-    return (
-      <DatePicker
-        withInput={withInput}
-        closeOnSelect={closeOnSelect}
-        open={open}
-        inputFormat={inputFormat}
-        outputFormat={outputFormat}
-        jumpView={jumpView}
-        date={dateValue}
-        onDateChange={(currDate?: Date) => action(`on date change : ${currDate}`)()}
-        view={view}
-        firstDayOfWeek={firstDayOfWeek}
-        {...attr}
-      />
-    );
-  }
-  return (
-    <Card className="d-inline-flex" shadow="light">
-      <DatePicker
-        withInput={withInput}
-        inputFormat={inputFormat}
-        outputFormat={outputFormat}
-        jumpView={jumpView}
-        date={dateValue}
-        onDateChange={(currDate?: Date) => action(`on date change : ${currDate}`)()}
-        view={view}
-        firstDayOfWeek={firstDayOfWeek}
-        {...attr}
-      />
-    </Card>
-  );
-};
-
-export default {
-  title: 'Components/DatePicker/All',
-  component: DatePicker,
-  subcomponents: { InputMask },
-};

package/core/components/organisms/datePicker/__stories__/variants/view.story.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { View } from '@/components/organisms/calendar/types';
-import { DatePicker, Card } from '@/index';
-
-// CSF format story
-export const view = () => {
-  const values: View[] = ['year', 'month', 'date'];
-
-  return (
-    <div className="d-flex">
-      {values.map((v, index) => (
-        <div key={index} className="mr-5">
-          <Card className="d-inline-flex" shadow="light">
-            <DatePicker date={new Date(2020, 2, 1)} view={v} />
-          </Card>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default {
-  title: 'Components/DatePicker/Variants/View',
-  component: DatePicker,
-  parameters: {
-    docs: {
-      docPage: {
-        title: 'DatePicker',
-      },
-    },
-  },
-};

package/core/components/organisms/datePicker/__stories__/variants/withInput.story.tsx

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import { boolean, select, date, number } from '@storybook/addon-knobs';
-import { DatePicker, InputMask } from '@/index';
-import { action } from '@storybook/addon-actions';
-
-// CSF format story
-export const withInput = () => {
-  const dateValue = date('date', undefined);
-
-  const inputFormat = select(
-    'inputFormat',
-    ['mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd', 'mm-dd-yyyy', 'dd-mm-yyyy', 'yyyy-mm-dd'],
-    undefined
-  );
-
-  const outputFormat = select(
-    'outputFormat',
-    ['mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd', 'mm-dd-yyyy', 'dd-mm-yyyy', 'yyyy-mm-dd'],
-    undefined
-  );
-
-  const view = select('view', ['date', 'month', 'year'], undefined);
-
-  const firstDayOfWeek = select(
-    'firstDayOfWeek',
-    ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'],
-    undefined
-  );
-
-  const disabledBefore = date('disabledBefore', new Date('Jan 20 2015'));
-
-  const disabledAfter = date('disabledAfter', new Date('Jan 20 2028'));
-
-  const jumpView = boolean('jumpView', true);
-
-  const yearNav = number('yearNav', -1);
-
-  const monthNav = number('monthNav', -1);
-
-  const closeOnSelect = boolean('closeOnSelect', true);
-
-  const attr: Record<string, any> = {};
-  if (disabledBefore) attr.disabledBefore = disabledBefore;
-  if (disabledAfter) attr.disabledAfter = disabledAfter;
-  if (yearNav !== -1) attr.yearNav = yearNav;
-  if (monthNav !== -1) attr.monthNav = monthNav;
-
-  return (
-    <div className="w-25">
-      <DatePicker
-        withInput={true}
-        closeOnSelect={closeOnSelect}
-        inputFormat={inputFormat}
-        outputFormat={outputFormat}
-        jumpView={jumpView}
-        date={dateValue}
-        onDateChange={(currDate?: Date, currValue?: string) => {
-          action(`on date change : ${currDate} --- ${currValue}`)();
-        }}
-        view={view}
-        firstDayOfWeek={firstDayOfWeek}
-        inputOptions={{
-          required: true,
-        }}
-        {...attr}
-      />
-    </div>
-  );
-};
-
-export default {
-  title: 'Components/DatePicker/Variants/With Input',
-  component: DatePicker,
-  subcomponents: { InputMask },
-};

package/core/components/organisms/dateRangePicker/__stories__/index.story.tsx

@@ -1,100 +0,0 @@
-import * as React from 'react';
-import { boolean, select, date, number } from '@storybook/addon-knobs';
-import { DateRangePicker, InputMask, Card } from '@/index';
-import { action } from '@storybook/addon-actions';
-
-// CSF format story
-export const all = () => {
-  const withInput = boolean('withInput', false);
-
-  const open = boolean('open', false);
-
-  const monthsInView = number('monthsInView', withInput ? 2 : 1);
-
-  const inputFormat = select(
-    'inputFormat',
-    ['mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd', 'mm-dd-yyyy', 'dd-mm-yyyy', 'yyyy-mm-dd'],
-    undefined
-  );
-
-  const outputFormat = select(
-    'outputFormat',
-    ['mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd', 'mm-dd-yyyy', 'dd-mm-yyyy', 'yyyy-mm-dd'],
-    undefined
-  );
-
-  const startDate = date('startDate', undefined);
-
-  const endDate = date('endDate', undefined);
-
-  const view = select('view', ['date', 'month', 'year'], undefined);
-
-  const rangeLimit = number('rangeLimit', 0);
-
-  const firstDayOfWeek = select(
-    'firstDayOfWeek',
-    ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'],
-    undefined
-  );
-
-  const disabledBefore = date('disabledBefore', new Date('Jan 20 2015'));
-
-  const disabledAfter = date('disabledAfter', new Date('Jan 20 2028'));
-
-  const jumpView = boolean('jumpView', true);
-
-  const yearNav = number('yearNav', -1);
-
-  const monthNav = number('monthNav', -1);
-
-  const attr: Record<string, any> = {};
-  if (disabledBefore) attr.disabledBefore = disabledBefore;
-  if (disabledAfter) attr.disabledAfter = disabledAfter;
-  if (rangeLimit) attr.rangeLimit = rangeLimit;
-  if (yearNav !== -1) attr.yearNav = yearNav;
-  if (monthNav !== -1) attr.monthNav = monthNav;
-
-  if (withInput) {
-    return (
-      <DateRangePicker
-        withInput={withInput}
-        open={open}
-        monthsInView={monthsInView}
-        inputFormat={inputFormat}
-        outputFormat={outputFormat}
-        jumpView={jumpView}
-        startDate={startDate}
-        endDate={endDate}
-        onRangeChange={(sDate?: Date, eDate?: Date, sValue?: string, eValue?: string) =>
-          action(`on range change: ${sDate} - ${eDate} ---- ${sValue} - ${eValue}`)()
-        }
-        view={view}
-        firstDayOfWeek={firstDayOfWeek}
-        {...attr}
-      />
-    );
-  }
-  return (
-    <Card className="d-inline-flex" shadow="light">
-      <DateRangePicker
-        withInput={withInput}
-        monthsInView={monthsInView}
-        jumpView={jumpView}
-        startDate={startDate}
-        endDate={endDate}
-        onRangeChange={(sDate?: Date, eDate?: Date, sValue?: string, eValue?: string) =>
-          action(`on range change: ${sDate} - ${eDate} ---- ${sValue} - ${eValue}`)()
-        }
-        view={view}
-        firstDayOfWeek={firstDayOfWeek}
-        {...attr}
-      />
-    </Card>
-  );
-};
-
-export default {
-  title: 'Components/DateRangePicker/All',
-  component: DateRangePicker,
-  subcomponents: { InputMask },
-};

package/core/components/organisms/dateRangePicker/__stories__/variants/view.story.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { View } from '@/components/organisms/calendar/types';
-import { DateRangePicker, Card } from '@/index';
-
-// CSF format story
-export const view = () => {
-  const values: View[] = ['year', 'month', 'date'];
-
-  return (
-    <div className="d-flex">
-      {values.map((v, index) => (
-        <div className="mr-9" key={index}>
-          <Card className="d-inline-flex" shadow="light">
-            <DateRangePicker
-              startDate={new Date(2020, 2, 3)}
-              endDate={new Date(2020, 2, 11)}
-              view={v}
-              yearNav={2020}
-              monthNav={2}
-            />
-          </Card>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default {
-  title: 'Components/DateRangePicker/Variants/View',
-  component: DateRangePicker,
-  parameters: {
-    docs: {
-      docPage: {
-        title: 'DateRangePicker',
-      },
-    },
-  },
-};