@innovaccer/design-system 2.6.0 → 2.7.0-0

package/core/components/molecules/sidesheet/__stories__/variants/CustomHeader.story.tsx

@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { boolean } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { updateKnob } from '@/utils/storybookEventEmitter';
+import { Text, Paragraph, Sidesheet, ModalDescription, Button, Badge, Heading, Divider } from '@/index';
+
+export const customHeader = () => {
+  const open = boolean('open', true);
+  const seperator = boolean('seperator', false);
+  const stickFooter = boolean('stick bottom', false);
+  const backdropClose = boolean('backdropClose', false);
+
+  const onClose = () => {
+    updateKnob('open', false);
+    action('on close triggered')();
+  };
+
+  const options = {
+    onClose,
+    open,
+    seperator,
+    stickFooter,
+    backdropClose,
+    footer: (
+      <>
+        <Button appearance="primary" className="mr-4">
+          Primary
+        </Button>
+        <Button appearance="basic">Basic</Button>
+      </>
+    ),
+  };
+
+  const modalDescriptionOptions = {
+    title: 'Description Title',
+    description: 'Adding a subheading clearly indicates the hierarchy of the information.',
+    removePadding: true,
+  };
+
+  const modalDescriptionOptionsWithoutTitle = {
+    description: 'Card Sections include supporting text like an article summary or a restaurant description.',
+    removePadding: true,
+  };
+
+  return (
+    <div>
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+        <br />
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        <br />
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br />
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        <br />
+      </Paragraph>
+      <Sidesheet
+        {...options}
+        dimension="regular"
+        header={
+          <div className="pl-7">
+            <Heading size="s">Untitled document</Heading>
+            <div className="d-flex">
+              <div className="mr-3">
+                <Badge appearance="primary">User Interface</Badge>
+              </div>
+              <div className="mr-3">
+                <Badge>Design</Badge>
+              </div>
+              <div className="mr-3">
+                <Badge>Development</Badge>
+              </div>
+            </div>
+            <Divider></Divider>
+          </div>
+        }
+      >
+        <Text>Modal Body</Text>
+        <ModalDescription {...modalDescriptionOptions} />
+        <ModalDescription {...modalDescriptionOptionsWithoutTitle} />
+      </Sidesheet>
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const [open, setOpen] = React.useState(true);
+
+  const onClose = () => {
+    setOpen(!open);
+  };
+
+  const options = {
+    onClose,
+    open,
+    footer: (
+      <>
+        <Button appearance="primary" className="mr-4">
+          Primary
+        </Button>
+        <Button appearance="basic">Basic</Button>
+      </>
+    ),
+  };
+
+  const modalDescriptionOptions = {
+    title: 'Description Title',
+    description: 'Adding a subheading clearly indicates the hierarchy of the information.',
+    removePadding: true,
+  };
+
+  const modalDescriptionOptionsWithoutTitle = {
+    description: 'Card Sections include supporting text like an article summary or a restaurant description.',
+    removePadding: true,
+  };
+
+  return (
+    <div>
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. <br />
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.{' '}
+        <br />
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br />
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{' '}
+        <br />
+        <Button appearance="primary" onClick={() => setOpen(true)}>
+          Open
+        </Button>
+      </Paragraph>
+      <Sidesheet
+        {...options}
+        dimension="regular"
+        header={
+          <div className="pl-7">
+            <Heading size="s">Untitled document</Heading>
+            <div className="d-flex">
+              <div className="mr-3">
+                <Badge appearance="primary">User Interface</Badge>
+              </div>
+              <div className="mr-3">
+                <Badge>Design</Badge>
+              </div>
+              <div className="mr-3">
+                <Badge>Development</Badge>
+              </div>
+            </div>
+            <Divider></Divider>
+          </div>
+        }
+      >
+        <Text>Modal Body</Text>
+        <ModalDescription {...modalDescriptionOptions} />
+        <ModalDescription {...modalDescriptionOptionsWithoutTitle} />
+      </Sidesheet>
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Sidesheet/Custom Header',
+  component: Sidesheet,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'Modal',
+        noHtml: true,
+      },
+    },
+  },
+};

package/core/components/molecules/tooltip/Tooltip.tsx

@@ -3,7 +3,7 @@ import { Popover, Text } from '@/index';
 import { PopoverProps } from '@/index.type';
 import { BaseProps, filterProps } from '@/utils/types';
 
-const propsList = [
+const tooltipPropsList = [
   'trigger',
   'on',
   'open',
@@ -15,8 +15,8 @@ const propsList = [
   'hideOnReferenceEscape',
   'closeOnScroll',
 ] as const;
-type PopperProps = typeof propsList[number];
-export interface TooltipProps extends Omit<PopoverProps, PopperProps>, BaseProps {
+type TooltipPopperProps = typeof tooltipPropsList[number];
+export interface TooltipProps extends Omit<PopoverProps, TooltipPopperProps>, BaseProps {
   /**
    * Text to be rendered in `Tooltip`
    */
@@ -49,7 +49,7 @@ export const Tooltip = (props: TooltipProps) => {
 //   ...Popover.defaultProps,
 //   hoverable: false
 // }, propsList);
-Tooltip.defaultProps = Object.assign({}, filterProps(Popover.defaultProps, propsList), {
+Tooltip.defaultProps = Object.assign({}, filterProps(Popover.defaultProps, tooltipPropsList), {
   hoverable: false,
 });
 

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

@@ -9,10 +9,10 @@ export const firstDayOfWeek = () => {
 
   const style = {
     flexWrap: 'wrap',
-  };
+  } as const;
+  // to freeze the object for typescript
 
   return (
-    // @ts-ignore
     <div className="d-flex" style={style}>
       {values.map((v, index) => (
         <div className="mr-9 mt-5" key={index}>

package/core/components/organisms/calendar/utility.ts

@@ -151,9 +151,9 @@ export const translateToDate = (format: string, val: string, validators: Validat
   if (isValid(validators, val, format)) {
     const separator = format.includes('/') ? '/' : '-';
 
-    let year: number = -1,
-      month: number = -1,
-      date: number = -1;
+    let year = -1,
+      month = -1,
+      date = -1;
     const v = val.split(separator);
     format.split(separator).forEach((f, i) => {
       switch (f) {

package/core/components/organisms/choiceList/ChoiceList.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Checkbox, Radio, Label } from '@/index';
 import { BaseProps } from '@/utils/types';
+import { ChangeEvent } from '@/common.type';
 
-export type Alignment = 'horizontal' | 'vertical';
-export type Size = 'regular' | 'tiny';
-type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
+export type ChoiceListAlignment = 'horizontal' | 'vertical';
+export type ChoiceListSize = 'regular' | 'tiny';
 type noop = (ev: ChangeEvent) => void;
 
 export interface Choice {
@@ -43,12 +43,12 @@ export interface ChoiceListProps extends BaseProps {
    * Alignment in which the coices will be rendered
    * @default "vertical"
    */
-  alignment?: Alignment;
+  alignment?: ChoiceListAlignment;
   /**
    * Size of the `ChoiceList`
    * @default "regular"
    */
-  size?: Size;
+  size?: ChoiceListSize;
   /**
    * renders `checkbox` if `true` and renders `radio` if `false` of the `ChoiceList`
    * @default false
@@ -73,8 +73,8 @@ const renderCheckbox = (
   list: Choice[],
   handleOnChange: noop,
   ChoiceListDisabled: boolean,
-  size: Size,
-  alignment: Alignment,
+  size: ChoiceListSize,
+  alignment: ChoiceListAlignment,
   selected: string[]
 ) => {
   return list.map((item: Choice, checkboxIndex: number) => {
@@ -100,8 +100,8 @@ const renderRadio = (
   list: Choice[],
   handleOnChange: noop,
   ChoiceListDisabled: boolean,
-  size: Size,
-  alignment: Alignment,
+  size: ChoiceListSize,
+  alignment: ChoiceListAlignment,
   selected: string[]
 ) => {
   return list.map((item: Choice, radioIndex: number) => {
@@ -123,7 +123,7 @@ const renderRadio = (
   });
 };
 
-const getCheckboxClassName = (alignment: Alignment, index: number) => {
+const getCheckboxClassName = (alignment: ChoiceListAlignment, index: number) => {
   const ChoiceListCheckboxClass = classNames({
     [`ChoiceList-checkbox--${alignment}`]: true,
     ['ml-0']: index === 0 && alignment === 'horizontal',
@@ -132,7 +132,7 @@ const getCheckboxClassName = (alignment: Alignment, index: number) => {
   return ChoiceListCheckboxClass;
 };
 
-const getRadioClassName = (alignment: Alignment, index: number) => {
+const getRadioClassName = (alignment: ChoiceListAlignment, index: number) => {
   const ChoiceListRadioClass = classNames({
     [`ChoiceList-radio--${alignment}`]: true,
     ['ml-0']: index === 0 && alignment === 'horizontal',

package/core/components/organisms/datePicker/DatePicker.tsx

@@ -198,7 +198,7 @@ export class DatePicker extends React.Component<DatePickerProps, DatePickerState
     const { date } = this.state;
     const { months } = config;
     const todayDate = new Date(Date.now());
-    const todayMonthAndDate: string = `${months[todayDate.getMonth()]} ${todayDate.getDate()}`;
+    const todayMonthAndDate = `${months[todayDate.getMonth()]} ${todayDate.getDate()}`;
     const currDate = convertToDate(date, inputFormat, validators);
     const dateDisabledBefore = convertToDate(disabledBefore, inputFormat, validators);
     const dateDisabledAfter = convertToDate(disabledAfter, inputFormat, validators);

package/core/components/organisms/datePicker/Trigger.tsx

@@ -61,11 +61,7 @@ export const Trigger = (props: TriggerProps) => {
       error={showError}
       mask={mask}
       value={
-        date
-          ? translateToString(inputFormat, date)
-          : init // @ts-ignore
-          ? InputMask.utils.getDefaultValue(mask, placeholderChar)
-          : ''
+        date ? translateToString(inputFormat, date) : init ? InputMask.utils.getDefaultValue(mask, placeholderChar) : ''
       }
       onChange={onChangeHandler}
       onBlur={onBlurHandler}

package/core/components/organisms/dateRangePicker/DateRangePicker.tsx

@@ -119,6 +119,15 @@ export interface DateRangePickerState {
 }
 
 export class DateRangePicker extends React.Component<DateRangePickerProps, DateRangePickerState> {
+  static utils = {
+    getCurrentWeek,
+    getPreviousWeek,
+    getPreviousMonth,
+    getPrevious90Days,
+    getCustomDates,
+    getCurrentYear,
+    getCurrentMonth,
+  };
   static defaultProps = {
     ...Calendar.defaultProps,
     children: <></>,
@@ -431,15 +440,5 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
     return this.renderCalendar();
   }
 }
-// @ts-ignore
-DateRangePicker.utils = {
-  getCurrentWeek,
-  getPreviousWeek,
-  getPreviousMonth,
-  getPrevious90Days,
-  getCustomDates,
-  getCurrentYear,
-  getCurrentMonth,
-};
 
 export default DateRangePicker;

package/core/components/organisms/dateRangePicker/SingleInputTrigger.tsx

@@ -21,7 +21,6 @@ export const SingleInputTrigger = (props: TriggerProps) => {
   const errorMessage = inputOptions.caption === undefined ? 'Invalid value' : inputOptions.caption;
   const { label } = inputOptions;
   const { placeholderChar = '_' } = inputOptions;
-  // @ts-ignore
   const defaultValue = InputMask.utils.getDefaultValue(mask, placeholderChar).split(' - ');
   const sValue = startValue || defaultValue[0];
   const eValue = endValue || defaultValue[1];

package/core/components/organisms/dateRangePicker/Trigger.tsx

@@ -130,7 +130,7 @@ export const Trigger = (props: TriggerProps) => {
           value={
             startDate
               ? translateToString(inputFormat, startDate)
-              : init // @ts-ignore
+              : init
               ? InputMask.utils.getDefaultValue(mask, startPlaceholderChar)
               : ''
           }
@@ -162,7 +162,7 @@ export const Trigger = (props: TriggerProps) => {
           value={
             endDate
               ? translateToString(inputFormat, endDate)
-              : init // @ts-ignore
+              : init
               ? InputMask.utils.getDefaultValue(mask, endPlaceholderChar)
               : ''
           }

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

@@ -6,10 +6,10 @@ import Card from '@/components/atoms/card';
 export const monthsInView = () => {
   const style = {
     flexDirection: 'column',
-  };
+  } as const;
+  // to freeze the object for typescript
 
   return (
-    // @ts-ignore
     <div className="d-flex" style={style}>
       {Array.from([1, 2, 3], (x) => (
         <div className="mt-5" style={{ alignSelf: 'flex-start' }}>

package/core/components/organisms/dateRangePicker/__tests__/__snapshots__/DateRangePicker.test.tsx.snap

@@ -38981,22 +38981,22 @@ exports[`DateRangePicker component
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-monthValue Calendar-monthValue--large Calendar-value--currDateMonthYear"
+              class="Calendar-value Calendar-monthValue Calendar-monthValue--large"
               data-test="DesignSystem-Calendar--monthValue"
             >
               <span
-                class="Text Text--link Text--regular"
+                class="Text Text--default Text--regular"
                 data-test="DesignSystem-Text"
               >
                 Nov
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-monthValue Calendar-monthValue--large"
+              class="Calendar-value Calendar-monthValue Calendar-monthValue--large Calendar-value--currDateMonthYear"
               data-test="DesignSystem-Calendar--monthValue"
             >
               <span
-                class="Text Text--default Text--regular"
+                class="Text Text--link Text--regular"
                 data-test="DesignSystem-Text"
               >
                 Dec
@@ -40540,22 +40540,22 @@ exports[`DateRangePicker component
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-monthValue Calendar-monthValue--small Calendar-value--currDateMonthYear"
+              class="Calendar-value Calendar-monthValue Calendar-monthValue--small"
               data-test="DesignSystem-Calendar--monthValue"
             >
               <span
-                class="Text Text--link Text--small"
+                class="Text Text--default Text--small"
                 data-test="DesignSystem-Text"
               >
                 Nov
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-monthValue Calendar-monthValue--small"
+              class="Calendar-value Calendar-monthValue Calendar-monthValue--small Calendar-value--currDateMonthYear"
               data-test="DesignSystem-Calendar--monthValue"
             >
               <span
-                class="Text Text--default Text--small"
+                class="Text Text--link Text--small"
                 data-test="DesignSystem-Text"
               >
                 Dec
@@ -42099,22 +42099,22 @@ exports[`DateRangePicker component
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-monthValue Calendar-monthValue--large Calendar-value--currDateMonthYear"
+              class="Calendar-value Calendar-monthValue Calendar-monthValue--large"
               data-test="DesignSystem-Calendar--monthValue"
             >
               <span
-                class="Text Text--link Text--regular"
+                class="Text Text--default Text--regular"
                 data-test="DesignSystem-Text"
               >
                 Nov
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-monthValue Calendar-monthValue--large"
+              class="Calendar-value Calendar-monthValue Calendar-monthValue--large Calendar-value--currDateMonthYear"
               data-test="DesignSystem-Calendar--monthValue"
             >
               <span
-                class="Text Text--default Text--regular"
+                class="Text Text--link Text--regular"
                 data-test="DesignSystem-Text"
               >
                 Dec
@@ -46679,22 +46679,22 @@ exports[`DateRangePicker component
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-monthValue Calendar-monthValue--small Calendar-value--currDateMonthYear"
+              class="Calendar-value Calendar-monthValue Calendar-monthValue--small"
               data-test="DesignSystem-Calendar--monthValue"
             >
               <span
-                class="Text Text--link Text--small"
+                class="Text Text--default Text--small"
                 data-test="DesignSystem-Text"
               >
                 Nov
               </span>
             </div>
             <div
-              class="Calendar-value Calendar-monthValue Calendar-monthValue--small"
+              class="Calendar-value Calendar-monthValue Calendar-monthValue--small Calendar-value--currDateMonthYear"
               data-test="DesignSystem-Calendar--monthValue"
             >
               <span
-                class="Text Text--default Text--small"
+                class="Text Text--link Text--small"
                 data-test="DesignSystem-Text"
               >
                 Dec

package/core/components/organisms/grid/Cell.tsx

@@ -28,10 +28,12 @@ type BodyCellProps = SharedCellProps & {
   expandedState: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
 };
 
-export type CellProps = (HeaderCellProps | BodyCellProps) & {
-  isHead?: boolean;
-  firstCell: boolean;
-};
+export type CellProps = Partial<HeaderCellProps> &
+  Partial<BodyCellProps> &
+  SharedCellProps & {
+    isHead?: boolean;
+    firstCell: boolean;
+  };
 
 const HeaderCell = (props: HeaderCellProps) => {
   const context = React.useContext(GridContext);
@@ -265,24 +267,16 @@ export const Cell = (props: CellProps) => {
     isHead,
     firstCell,
     schema,
-    // @ts-ignore
     data,
-    // @ts-ignore
     rowIndex,
     colIndex,
-    // @ts-ignore
     expandedState,
-    // @ts-ignore
     onSelectAll,
-    // @ts-ignore
     onMenuChange,
-    // @ts-ignore
     onFilterChange,
-    // @ts-ignore
     updateColumnSchema,
-    // @ts-ignore
     reorderColumn,
-  } = props;
+  } = props as CellProps;
 
   const { draggable, separator, nestedRows, ref, withCheckbox } = context;
 
@@ -323,7 +317,7 @@ export const Cell = (props: CellProps) => {
             type: pinned || '',
           };
 
-          if (from.type === to.type) reorderColumn(from.name, to.name);
+          if (from.type === to.type && reorderColumn) reorderColumn(from.name, to.name);
         }
       }}
       style={{
@@ -337,13 +331,19 @@ export const Cell = (props: CellProps) => {
           colIndex={colIndex}
           schema={schema}
           onSelectAll={onSelectAll}
-          onMenuChange={onMenuChange}
-          onFilterChange={onFilterChange}
-          updateColumnSchema={updateColumnSchema}
-          reorderColumn={reorderColumn}
+          onMenuChange={onMenuChange!}
+          onFilterChange={onFilterChange!}
+          updateColumnSchema={updateColumnSchema!}
+          reorderColumn={reorderColumn!}
         />
       ) : (
-        <BodyCell rowIndex={rowIndex} colIndex={colIndex} data={data} schema={schema} expandedState={expandedState} />
+        <BodyCell
+          rowIndex={rowIndex!}
+          colIndex={colIndex}
+          data={data!}
+          schema={schema}
+          expandedState={expandedState!}
+        />
       )}
     </div>
   );

package/core/components/organisms/grid/Grid.tsx

@@ -288,6 +288,9 @@ export interface GridState {
 
 export class Grid extends React.Component<GridProps, GridState> {
   static defaultProps: GridProps;
+  gridRef: GridRef = null;
+  isHeadSyncing = false;
+  isBodySyncing = false;
 
   constructor(props: GridProps) {
     super(props);
@@ -327,10 +330,6 @@ export class Grid extends React.Component<GridProps, GridState> {
     }
   }
 
-  gridRef: GridRef = null;
-  isHeadSyncing: boolean = false;
-  isBodySyncing: boolean = false;
-
   addScrollListeners() {
     const gridHeadEl = this.gridRef!.querySelector('.Grid-head');
     const gridBodyEl = this.gridRef!.querySelector('.Grid-body');

package/core/components/organisms/grid/GridBody.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-// @ts-ignore
 import VirtualScroll from 'react-dynamic-virtual-scroll';
 import { GridRow } from './GridRow';
 import { GridState, onSelectFn, Schema, updatePrevPageInfoFunction } from './Grid';

package/core/components/organisms/grid/GridContext.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { GridProps } from '@/index.type';
 import { GridRef } from './Grid';
 import defaultProps from './defaultProps';

package/core/components/organisms/grid/__stories__/_common_/editableSchema.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { Schema } from '../../Grid';
-// @ts-ignore
-import iconImg from './image.png';
 import { GridCellProps } from '../../GridCell';
 import { PlaceholderParagraph, EditableInput } from '@/index';
 
@@ -89,7 +87,7 @@ const schema: Schema = [
     resizable: true,
     align: 'center',
     cellType: 'ICON',
-    translate: (_) => ({
+    translate: () => ({
       icon: 'events',
     }),
     // separator: true,

package/core/components/organisms/grid/__stories__/_common_/fetchData.ts

@@ -6,7 +6,7 @@ import { filterData, sortData } from '../../utility';
 export const fetchData: fetchDataFunction = (options) => {
   const { page, pageSize, sortingList, filterList, searchTerm } = options;
 
-  const onSearch = (d: RowData, searchTerm: string = '') => {
+  const onSearch = (d: RowData, searchTerm = '') => {
     return (
       d.firstName.toLowerCase().match(searchTerm.toLowerCase()) ||
       d.lastName.toLowerCase().match(searchTerm.toLowerCase())

package/core/components/organisms/grid/__stories__/_common_/loaderSchema.ts

@@ -1,5 +1,3 @@
-// @ts-ignore
-import image from './image.png';
 import { GridProps } from '../../Grid';
 import schema from './schema';
 

package/core/components/organisms/grid/__stories__/_common_/schema.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { Schema } from '../../Grid';
-// @ts-ignore
-import iconImg from './image.png';
 import { Icon, GridCell } from '@/index';
 
 const schema: Schema = [
@@ -88,7 +86,7 @@ const schema: Schema = [
     resizable: true,
     align: 'center',
     cellType: 'ICON',
-    translate: (_) => ({
+    translate: () => ({
       icon: 'events',
     }),
     // separator: true,