@innovaccer/design-system 2.6.0 → 2.7.0-0

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

@@ -1,5 +1,3 @@
-// @ts-ignore
-import image from './image.png';
 import { GridProps } from '../../Grid';
 
 const loaderSchema: GridProps['loaderSchema'] = [

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

@@ -1,6 +1,4 @@
 import { Schema } from '../../Grid';
-// @ts-ignore
-import iconImg from './image.png';
 
 const schema: Schema = [
   {

package/core/components/organisms/inlineMessage/InlineMessage.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Icon, Text } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
+import { MessageAppearance } from '@/common.type';
 
-export type Appearance = 'default' | 'alert' | 'info' | 'success' | 'warning';
 const IconMapping = {
   success: 'check_circle',
   info: 'info',
@@ -15,7 +15,7 @@ export interface InlineMessageProps extends BaseProps {
   /**
    * Color of `Inline Message`
    */
-  appearance: Appearance;
+  appearance: MessageAppearance;
   /**
    * Description of `Inline Message`
    */

package/core/components/organisms/inlineMessage/__tests__/InlineMessage.test.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
-import { Appearance, InlineMessage } from '../InlineMessage';
+import { InlineMessage } from '../InlineMessage';
 import { InlineMessageProps as Props } from '@/index.type';
+import { MessageAppearance } from '@/common.type';
 
-const appearance: Appearance[] = ['default', 'alert', 'info', 'success', 'warning'];
+const appearance: MessageAppearance[] = ['default', 'alert', 'info', 'success', 'warning'];
 
 const description = 'Inline Message here.';
 

package/core/components/organisms/list/__stories__/_common_/types.tsx

@@ -1,4 +1,7 @@
 import { SyncListProps, AsyncListProps } from '@/components/organisms/list';
 
+// TODO(eslint): Fix this
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const SyncList = (_props: SyncListProps) => {};
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const AsyncList = (_props: AsyncListProps) => {};

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

@@ -12,22 +12,8 @@ import { SyncList, AsyncList } from './_common_/types';
 export const all = () => {
   const async = boolean('async', true);
 
-  let loading;
-  let error;
-  let applyData;
-  let applySchema;
   const applyLoaderSchema = boolean('applyLoaderSchema', true);
 
-  if (!async) {
-    loading = boolean('loading', false);
-
-    error = boolean('error', false);
-
-    applySchema = boolean('applySchema', true);
-
-    applyData = boolean('applyData', true);
-  }
-
   const type = select('type', ['resource', 'data'], 'resource');
 
   const size = select('size', ['comfortable', 'standard', 'compressed', 'tight'], 'comfortable');
@@ -46,8 +32,6 @@ export const all = () => {
 
   const multipleSorting = boolean('multipleSorting', false);
 
-  const headCellTooltip = boolean('headCellTooltip', false);
-
   const separator = boolean('separator', false);
 
   let dataAttr = {};

package/core/components/organisms/table/Table.tsx

@@ -23,7 +23,7 @@ export interface ErrorTemplateProps {
 
 export type FilterPosition = 'GRID' | 'HEADER';
 
-interface SyncProps {
+interface TableSyncProps {
   /**
    * <pre className="DocPage-codeBlock">
    *    Data: RowData[]
@@ -326,7 +326,7 @@ interface SharedTableProps extends BaseProps {
   filterPosition: FilterPosition;
 }
 
-export type SyncTableProps = SharedTableProps & SyncProps;
+export type SyncTableProps = SharedTableProps & TableSyncProps;
 export type AsyncTableProps = SharedTableProps & AsyncProps;
 export type TableProps = AsyncTableProps & SyncTableProps;
 

package/core/components/organisms/table/__stories__/CompressedTable.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, Table } from '@/index';
 import { TableProps } from '@/index.type';
 import { AsyncTable, SyncTable } from './_common_/types';

package/core/components/organisms/table/__stories__/DataTable.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, Table } from '@/index';
 import { TableProps } from '@/index.type';
 import { AsyncTable, SyncTable } from './_common_/types';

package/core/components/organisms/table/__stories__/NestedTableWithNestedCard.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, Table, CardSubdued, Text } from '@/index';
 import { AsyncTable, SyncTable } from './_common_/types';
 import { TableProps } from '@/index.type';

package/core/components/organisms/table/__stories__/PinnedColumn.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, Table } from '@/index';
 import { TableProps } from '@/index.type';
 import { AsyncTable, SyncTable } from './_common_/types';

package/core/components/organisms/table/__stories__/ResourceTable.story.tsx

@@ -135,7 +135,7 @@ export const resourceTable = () => {
           <div style={{ width: 'var(--spacing-3)' }} className="ml-6">
             <Dropdown
               triggerOptions={{
-                customTrigger: (_label: string) => <Button icon="more_horiz" appearance="transparent" />,
+                customTrigger: () => <Button icon="more_horiz" appearance="transparent" />,
               }}
               menu={true}
               align="left"

package/core/components/organisms/table/__stories__/StandardTable.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, Table } from '@/index';
 import { TableProps } from '@/index.type';
 import { AsyncTable, SyncTable } from './_common_/types';

package/core/components/organisms/table/__stories__/TableAsDescriptionList.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, List, Text, Button } from '@/index';
 import { TableProps } from '@/index.type';
 import { AsyncTable, SyncTable } from './_common_/types';

package/core/components/organisms/table/__stories__/TableAsOptionList.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, List, Text } from '@/index';
 import { TableProps } from '@/index.type';
 import { AsyncTable, SyncTable } from './_common_/types';

package/core/components/organisms/table/__stories__/TightStory.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Card, Table } from '@/index';
 import { TableProps } from '@/index.type';
 import { AsyncTable, SyncTable } from './_common_/types';

package/core/components/organisms/table/__stories__/_common_/types.tsx

@@ -1,4 +1,7 @@
 import { SyncTableProps, AsyncTableProps } from '@/components/organisms/table';
 
+// TODO(eslint): Fix this
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const SyncTable = (_props: SyncTableProps) => {};
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const AsyncTable = (_props: AsyncTableProps) => {};

package/core/components/organisms/table/__stories__/variants/showHead.story.tsx

@@ -12,10 +12,10 @@ export const showHead = () => {
   const style = {
     display: 'flex',
     flexWrap: 'wrap',
-  };
+  } as const;
+  // to freeze the object for typescript
 
   return (
-    // @ts-ignore
     <div style={style}>
       {values.map((v, index) => (
         <div

package/core/components/organisms/table/__stories__/variants/showMenu.story.tsx

@@ -12,10 +12,10 @@ export const showMenu = () => {
   const style = {
     display: 'flex',
     flexWrap: 'wrap',
-  };
+  } as const;
+  // to freeze the object for typescript
 
   return (
-    // @ts-ignore
     <div style={style}>
       {values.map((v, index) => (
         <div

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

@@ -12,10 +12,10 @@ export const size = () => {
   const style = {
     display: 'flex',
     flexWrap: 'wrap',
-  };
+  } as const;
+  // to freeze the object for typescript
 
   return (
-    // @ts-ignore
     <div style={style}>
       {values.map((v, index) => (
         <div

package/core/components/organisms/table/__stories__/variants/type.story.tsx

@@ -13,10 +13,10 @@ export const type = () => {
   const style = {
     display: 'flex',
     flexWrap: 'wrap',
-  };
+  } as const;
+  // to freeze the object for typescript
 
   return (
-    // @ts-ignore
     <div style={style}>
       {values.map((v, index) => (
         <div

package/core/components/organisms/table/__stories__/variants/withCheckbox.story.tsx

@@ -13,10 +13,10 @@ export const withCheckbox = () => {
   const style = {
     display: 'flex',
     flexWrap: 'wrap',
-  };
+  } as const;
+  // to freeze the object for typescript
 
   return (
-    // @ts-ignore
     <div style={style}>
       {values.map((v, index) => (
         <div

package/core/components/organisms/table/__stories__/variants/withPagination.story.tsx

@@ -13,10 +13,10 @@ export const withPagination = () => {
   const style = {
     display: 'flex',
     flexWrap: 'wrap',
-  };
+  } as const;
+  // to freeze the object for typescript
 
   return (
-    // @ts-ignore
     <div style={style}>
       {values.map((v, index) => (
         <div

package/core/components/organisms/timePicker/TimePicker.tsx

@@ -57,7 +57,7 @@ export const TimePicker = (props: TimePickerProps) => {
     setTime(updatedTime);
   }, [timeProp]);
 
-  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, val: string = '') => {
+  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, val = '') => {
     const updatedTime = val?.toUpperCase();
     setTime(updatedTime);
 
@@ -66,7 +66,7 @@ export const TimePicker = (props: TimePickerProps) => {
     }
   };
 
-  const onBlurHandler = (e: React.ChangeEvent<HTMLInputElement>, val: string = '') => {
+  const onBlurHandler = (e: React.ChangeEvent<HTMLInputElement>, val = '') => {
     const updatedTime = translateToTime(inputFormat, time);
     setInit(true);
 
@@ -102,11 +102,7 @@ export const TimePicker = (props: TimePickerProps) => {
       {...inputOptions}
       mask={mask}
       value={
-        time
-          ? translateToTime(inputFormat, time)
-          : init // @ts-ignore
-          ? InputMask.utils.getDefaultValue(mask, placeholderChar)
-          : ''
+        time ? translateToTime(inputFormat, time) : init ? InputMask.utils.getDefaultValue(mask, placeholderChar) : ''
       }
       validators={inputValidator}
       onChange={onChangeHandler}

package/core/components/organisms/verticalNav/__stories__/schema.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { Schema } from '@/components/organisms/grid';
-// @ts-ignore
-import iconImg from './image.png';
 import { Icon, GridCell } from '@/index';
 
 const schema: Schema = [

package/core/components/organisms/verticalNav/__tests__/VerticalNav.test.tsx

@@ -240,7 +240,6 @@ describe('Vertical Navigation component prop: onClick', () => {
     const activeMenu = getAllByTestId('DesignSystem-VerticalNav--Item')[menuClicked];
     fireEvent.click(activeMenu);
     expect(onClick).toHaveBeenCalled();
-    // @ts-ignore
-    expect(onClick).toHaveBeenCalledWith(menus[menuClicked].subMenu[0]);
+    expect(onClick).toHaveBeenCalledWith(menus[menuClicked].subMenu![0]);
   });
 });

package/core/global.d.ts

@@ -0,0 +1,9 @@
+declare module '@' {
+  const x: any;
+  export = x;
+}
+
+declare module '*.json';
+declare module 'react-dynamic-virtual-scroll';
+
+declare const __STORYBOOK_STORY_STORE__: any;

package/core/index.tsx

@@ -82,5 +82,5 @@ export { VerificationCodeInput } from './components/molecules/verificationCodeIn
 export { InlineMessage } from './components/organisms/inlineMessage';
 export { ChoiceList } from './components/organisms/choiceList';
 export { Divider } from './components/atoms/divider';
-// @ts-ignore
+
 export { version } from '../package.json';

package/core/utils/__tests__/__snapshots__/TS.test.tsx.snap

@@ -926,12 +926,19 @@ exports[`TS renders children 1`] = `
     Hello World!
   </a>
   <div
-    class="Message Message--default"
+    class="Message Message--info"
     data-test="DesignSystem-Message"
   >
+    <i
+      class="material-icons material-icons-round Icon Icon--info Message-icon Message-icon--info"
+      data-test="DesignSystem-Message--Icon"
+      style="font-size: 16px; width: 16px;"
+    >
+      info_round
+    </i>
     <div>
       <span
-        class="Text Text--default Text--regular Message-text Message-text--default"
+        class="Text Text--default Text--regular Message-text Message-text--info"
         data-test="DesignSystem-Message--Description"
       >
         Hello World!
@@ -1482,8 +1489,14 @@ exports[`TS renders children 1`] = `
     rows="3"
   />
   <div
-    class="Toast Toast--default"
+    class="Toast Toast--info"
   >
+    <i
+      class="material-icons material-icons-round Icon Toast-icon Toast-icon--left Toast-icon--info"
+      style="font-size: 16px; width: 16px;"
+    >
+      info_round
+    </i>
     <div
       class="Toast-body"
     >
@@ -1491,13 +1504,13 @@ exports[`TS renders children 1`] = `
         class="Toast-title"
       >
         <h5
-          class="Heading Heading--s Heading--white Toast-heading Toast-heading--default"
+          class="Heading Heading--s Heading--white Toast-heading Toast-heading--info"
           data-test="DesignSystem-Heading"
         >
           Hello World!
         </h5>
         <i
-          class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--default"
+          class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--info"
           role="button"
           style="font-size: 16px; width: 16px;"
           tabindex="0"

package/core/utils/docPage/generateImports.tsx

@@ -1,7 +1,6 @@
-// @ts-nocheck
-const generateImports = (str = '', lib = {}, libName: string) => {
+const generateImports = (str = '', lib: Record<string, unknown> = {}, libName: string) => {
   const regexp = /<[A-Z]\w*/g;
-  const matchedArray = [...str.matchAll(regexp)];
+  const matchedArray = Array.from(str.matchAll(regexp));
 
   const componentsMap = matchedArray
     .flatMap((item) => item[0].replace('<', ''))

package/core/utils/docPage/index.tsx

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 import * as React from 'react';
 import { Title, Description, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import { renderToStaticMarkup } from 'react-dom/server';
@@ -7,7 +5,7 @@ import reactElementToJSXString from 'react-element-to-jsx-string';
 import { html as beautifyHTML } from 'js-beautify';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { vs2015 } from 'react-syntax-highlighter/dist/esm/styles/hljs';
-import * as DS from '@/';
+import * as DS from '@';
 import { Button, Card, TabsWrapper, Tab, Heading } from '@/index';
 import vsDark from 'prism-react-renderer/themes/vsDark';
 import { LiveProvider, LiveEditor, LiveError, LivePreview, withLive } from 'react-live';
@@ -59,7 +57,9 @@ const JSXtoStringOptions = {
 
 const copyCode = (val: string) => navigator.clipboard.writeText(val);
 
-const CopyComp = (props) => {
+type OnClickType = (e: React.MouseEvent) => void;
+
+const CopyComp = (props: { onClick: OnClickType }) => {
   const { onClick } = props;
   return (
     <div
@@ -88,7 +88,7 @@ const buttonStyles = {
   background: 'white',
 };
 
-const ShowMoreLessButton = ({ onClick, text = 'More' }) => (
+const ShowMoreLessButton = ({ onClick, text = 'More' }: { onClick: OnClickType; text: string }) => (
   <div
     style={{
       display: 'grid',
@@ -132,7 +132,7 @@ const getStory = () => {
   return { storyId, story };
 };
 
-const getRawPreviewCode = (customCode, comp) => {
+const getRawPreviewCode = (customCode: string, comp: React.ReactNode) => {
   if (customCode) {
     return `${generateImports(customCode, componentLib, '@innovaccer/design-system')}
 ${customCode}
@@ -155,11 +155,17 @@ ${jsx
   return code;
 };
 
-const StoryComp = (props) => {
+const StoryComp = (props: {
+  noHtml: boolean;
+  customCode: string;
+  noSandbox: boolean;
+  isEmbed: boolean;
+  imports: string[];
+}) => {
   const { customCode, noHtml, noSandbox, isEmbed } = props;
   const { story } = getStory();
   // const comp = sp.storySource.source;
-  const comp = story.getOriginal()();
+  const comp = story.originalStoryFn();
   const html = !noHtml ? beautifyHTML(renderToStaticMarkup(comp), beautifyHTMLOptions) : '';
 
   const [activeTab, setActiveTab] = React.useState<number>(0);
@@ -168,7 +174,7 @@ const StoryComp = (props) => {
   const [isExpanded, setIsExpanded] = React.useState(isEmbed);
   const [showMore, setShowMore] = React.useState<boolean>(false);
   const [shouldShowMore, setShouldShowMore] = React.useState<boolean>(false);
-  const codePanel = React.useRef(null);
+  const codePanel = React.useRef<HTMLDivElement>(null);
 
   const importScope = props.imports;
 
@@ -179,11 +185,11 @@ const StoryComp = (props) => {
     return <></>;
   };
 
-  const TabsWrap = withLive(({ live, currentTab }) => {
+  const TabsWrap = withLive<{ live?: any; activeTab: number }>(({ live, activeTab }) => {
     const { error, element: Element } = live;
 
     React.useEffect(() => {
-      if (!error && currentTab === 1) {
+      if (!error && activeTab === 1) {
         try {
           const htmlValue = beautifyHTML(renderToStaticMarkup(<Element />), beautifyHTMLOptions);
           setHtmlCode(htmlValue);
@@ -191,10 +197,10 @@ const StoryComp = (props) => {
           return;
         }
       }
-    }, [currentTab]);
+    }, [activeTab]);
 
     React.useEffect(() => {
-      if (codePanel.current?.clientHeight > '250') {
+      if (codePanel.current?.clientHeight && codePanel.current?.clientHeight > 250) {
         setShouldShowMore(true);
       }
     }, [codePanel]);
@@ -209,7 +215,7 @@ const StoryComp = (props) => {
   const actions = [
     {
       title: 'Edit in sandbox',
-      onClick: (ev) => {
+      onClick: (ev: React.MouseEvent) => {
         ev.preventDefault();
         openSandbox(jsxCode);
       },
@@ -223,12 +229,13 @@ const StoryComp = (props) => {
       onClick: () => {
         setIsExpanded(!isExpanded);
       },
+      disabled: false,
     });
   }
 
   const imports = React.useMemo(() => ({ ...DS, ...importScope }), []);
 
-  const tabChangeHandler = (tab) => {
+  const tabChangeHandler = (tab: number) => {
     setActiveTab(tab);
     setShouldShowMore(false);
   };
@@ -238,9 +245,9 @@ const StoryComp = (props) => {
       <LiveProvider code={jsxCode} scope={imports}>
         <Canvas
           className="my-0"
-          withSource="none"
           withToolbar={true}
           isExpanded={isExpanded}
+          withSource={'none' as any}
           additionalActions={actions}
         >
           <LivePreview />
@@ -260,11 +267,13 @@ const StoryComp = (props) => {
               }}
               className="DocPage-editorTabs"
             >
-              <TabsWrapper activeTab={activeTab} onTabChange={tabChangeHandler}>
+              <TabsWrapper active={activeTab} onTabChange={tabChangeHandler}>
                 <Tab label={'React'}>
                   <CopyComp
                     onClick={() => {
-                      const editor = document.querySelector('.npm__react-simple-code-editor__textarea');
+                      const editor = document.querySelector(
+                        '.npm__react-simple-code-editor__textarea'
+                      ) as HTMLTextAreaElement;
                       if (editor) copyCode(editor.value);
                     }}
                   />
@@ -301,17 +310,18 @@ export const docPage = () => {
     imports,
     a11yProps,
   } = sp.docs.docPage || {};
-  const { component: { displayName } = {} } = sp;
+  const { component: { displayName = '' } = {} } = story;
   const pageClassnames = classNames({
     DocPage: true,
     'pt-8 pb-8': !(isEmbed || isEmbedWithProp),
   });
+  const docPageTitle: string = title || displayName;
 
   return (
     <div className={pageClassnames}>
       {!isEmbed && !isEmbedWithProp && (
         <>
-          <Title> {title || displayName} </Title>
+          <Title>{docPageTitle}</Title>
           <Description>{description}</Description>
         </>
       )}

package/core/utils/docPage/sandbox.tsx

@@ -24,14 +24,21 @@ const getParameters = (options: { files: IFiles }) => {
   return compress(JSON.stringify(options));
 };
 
+const replaceAll = function (original: string, matchString: string, replaceString: string) {
+  // If a regex pattern
+  if (Object.prototype.toString.call(matchString).toLowerCase() === '[object regexp]') {
+    return original.replace(matchString, replaceString);
+  }
+
+  // If a string
+  return original.replace(new RegExp(matchString, 'g'), replaceString);
+};
+
 export default (jsxStoryCode: string) => {
-  const structuredCode = jsxStoryCode
-    .trim()
-    // @ts-ignore
-    .replaceAll('// import', 'import')
-    .replace('() => {', 'const App = () => {')
-    .replaceAll('<>', '<React.Fragment>')
-    .replaceAll('</>', '</React.Fragment>');
+  let structuredCode = replaceAll(jsxStoryCode.trim(), '// import', 'import').replace('() => {', 'const App = () => {');
+  structuredCode = replaceAll(structuredCode, '<>', '<React.Fragment>');
+  structuredCode = replaceAll(structuredCode, '</>', '</React.Fragment>');
+
   const code = `
 import ReactDOM from "react-dom";
 import React from "react";

package/core/utils/overlayHelper.ts

@@ -33,12 +33,16 @@ export const getUpdatedZIndex = (ele: elementData): number | undefined => {
   return zIndex > 0 ? zIndex : undefined;
 };
 
-export const closeOnEscapeKeypress = (event: KeyboardEvent, isTopOverlay: boolean | undefined, onClose: Function) => {
-
+// keyboard event, boolean?, (event: Event) => void
+export const closeOnEscapeKeypress = (
+  event: KeyboardEvent,
+  isTopOverlay: boolean | undefined,
+  onClose: (event: Event) => void
+) => {
   if (event.key === 'Escape' && isTopOverlay) {
     onClose(event);
 
     // prevent browser-specific escape key behavior (Safari exits fullscreen)
     event.preventDefault();
   }
-}
+};

package/core/utils/testHelper.ts

@@ -42,7 +42,7 @@ const getCombinations = (Props: Record<string, any>): Record<string, any>[] => {
   const combinations: Record<string, any>[] = [];
   const propNames = Object.keys(Props);
 
-  const iterateProps = (curr: Record<string, any> = {}, propIndex: number = 0): void => {
+  const iterateProps = (curr: Record<string, any> = {}, propIndex = 0): void => {
     const iterateValues = (propValues: any[]) => {
       for (const propValue of propValues) {
         if (isMapper(propValue)) {

package/core/utils/types.tsx

@@ -2,7 +2,7 @@ export type SingleOrArray<T> = T | T[];
 
 export type MakeRequired<T> = Exclude<T, null | undefined>;
 
-export type MakeOptional<T extends {}, K extends keyof any> = Omit<T, K> & {
+export type MakeOptional<T extends object, K extends keyof any> = Omit<T, K> & {
   [OK in keyof T & K]?: T[OK];
 };