@innovaccer/design-system 2.5.0 → 2.7.0-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,16 +1,13 @@
-// @ts-nocheck
-
 import * as React from 'react';
-import { Title, Subtitle, Subheading, Description, Canvas, PropsProps, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Title, Description, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import { renderToStaticMarkup } from 'react-dom/server';
 import reactElementToJSXString from 'react-element-to-jsx-string';
 import { html as beautifyHTML } from 'js-beautify';
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { docco, dark, a11yDark, githubGist, dracula, vs2015 } from 'react-syntax-highlighter/dist/esm/styles/hljs';
-import * as DS from '@/';
+import { vs2015 } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import * as DS from '@';
 import { Button, Card, TabsWrapper, Tab, Heading } from '@/index';
 import vsDark from 'prism-react-renderer/themes/vsDark';
-import { resetComponents, Story as PureStory } from '@storybook/components';
 import { LiveProvider, LiveEditor, LiveError, LivePreview, withLive } from 'react-live';
 import openSandbox from './sandbox';
 import generateImports from './generateImports';
@@ -24,13 +21,6 @@ export interface Example {
   component: React.ReactNode;
 }
 
-interface DocPageProps {
-  title?: string;
-  description?: React.ReactNode;
-  props?: PropsProps;
-  customCode?: string;
-}
-
 const beautifyHTMLOptions = {
   indent_size: 2,
   wrap_line_length: 0,
@@ -50,14 +40,16 @@ const beautifyJSXOptions = {
 };
 
 const JSXtoStringOptions = {
-  filterProps: (val: any, key: string) => {
+  filterProps: (val: any) => {
     if (!val) return false;
     if (val && val.name === 'actionHandler') return false;
     // if(val && typeof val === 'function') return false;
     return true;
   },
   showFunctions: true,
-  functionValue: (_fn) => (_) => {},
+  functionValue: () => () => {
+    return;
+  },
   // maxInlineAttributesLineLength: 10,
   showDefaultProps: false,
   useBooleanShorthandSyntax: false,
@@ -65,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
@@ -94,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',
@@ -138,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}
@@ -161,12 +155,17 @@ ${jsx
   return code;
 };
 
-const StoryComp = (props) => {
-  const { customCode, noHtml, noStory, noSandbox, isEmbed } = props;
-  const { story, storyId } = getStory();
-  const sp = story.parameters;
+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);
@@ -175,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;
 
@@ -186,20 +185,22 @@ 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);
-        } catch (e) {}
+        } catch (e) {
+          return;
+        }
       }
-    }, [currentTab]);
+    }, [activeTab]);
 
     React.useEffect(() => {
-      if (codePanel.current?.clientHeight > '250') {
+      if (codePanel.current?.clientHeight && codePanel.current?.clientHeight > 250) {
         setShouldShowMore(true);
       }
     }, [codePanel]);
@@ -214,7 +215,7 @@ const StoryComp = (props) => {
   const actions = [
     {
       title: 'Edit in sandbox',
-      onClick: (ev) => {
+      onClick: (ev: React.MouseEvent) => {
         ev.preventDefault();
         openSandbox(jsxCode);
       },
@@ -225,15 +226,16 @@ const StoryComp = (props) => {
   if (!isEmbed) {
     actions.push({
       title: `${!isExpanded ? 'Show' : 'Hide'} code`,
-      onClick: (ev) => {
+      onClick: () => {
         setIsExpanded(!isExpanded);
       },
+      disabled: false,
     });
   }
 
   const imports = React.useMemo(() => ({ ...DS, ...importScope }), []);
 
-  const tabChangeHandler = (tab) => {
+  const tabChangeHandler = (tab: number) => {
     setActiveTab(tab);
     setShouldShowMore(false);
   };
@@ -243,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 />
@@ -265,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);
                     }}
                   />
@@ -304,18 +308,20 @@ export const docPage = () => {
     noProps = isEmbed,
     noSandbox,
     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>
         </>
       )}
@@ -331,6 +337,15 @@ export const docPage = () => {
         />
       )}
 
+      {a11yProps && (
+        <>
+          <br />
+          <br />
+          <Heading appearance="subtle">Accessibility</Heading>
+          <Description>{a11yProps}</Description>
+        </>
+      )}
+
       {!noProps && (
         <>
           <br />

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

@@ -30,7 +30,7 @@ const iterateComb = (
   requiredComb.forEach((reqProps) => {
     optionalComb.forEach((optProps) => {
       const allProps = { ...reqProps, ...optProps };
-      if (!!testFunc) testFunc(allProps);
+      if (testFunc) testFunc(allProps);
       else combinations.push(allProps);
     });
   });
@@ -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];
 };
 

package/core/utils/validators.ts

@@ -9,7 +9,7 @@ export const isValid = (validators: Validators, ...value: any[]) => {
 
 export const date = (val: string, format: string): boolean => {
   const validate = (date: number, month: number, year: number): boolean => {
-    var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+    const monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 
     // Adjust for leap years
     if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)) monthLength[1] = 29;
@@ -19,48 +19,51 @@ export const date = (val: string, format: string): boolean => {
   };
 
   switch (format) {
-    case 'dd/mm/yyyy':
-      var p = val.split('/');
-      var date = +p[0] || 1;
-      var month = +p[1] || 1;
-      var year = +p[2] || 1900;
+    case 'dd/mm/yyyy': {
+      const p = val.split('/');
+      const date = +p[0] || 1;
+      const month = +p[1] || 1;
+      const year = +p[2] || 1900;
       return validate(date, month, year);
-
-    case 'mm/dd/yyyy':
-      var p = val.split('/');
-      var date = +p[1] || 1;
-      var month = +p[0] || 1;
-      var year = +p[2] || 1900;
+    }
+    case 'mm/dd/yyyy': {
+      const p = val.split('/');
+      const date = +p[1] || 1;
+      const month = +p[0] || 1;
+      const year = +p[2] || 1900;
       return validate(date, month, year);
+    }
 
-    case 'yyyy/mm/dd':
-      var p = val.split('/');
-      var date = +p[2] || 1;
-      var month = +p[1] || 1;
-      var year = +p[0] || 1900;
+    case 'yyyy/mm/dd': {
+      const p = val.split('/');
+      const date = +p[2] || 1;
+      const month = +p[1] || 1;
+      const year = +p[0] || 1900;
       return validate(date, month, year);
-
-    case 'dd-mm-yyyy':
-      var p = val.split('-');
-      var date = +p[0] || 1;
-      var month = +p[1] || 1;
-      var year = +p[2] || 1900;
+    }
+    case 'dd-mm-yyyy': {
+      const p = val.split('-');
+      const date = +p[0] || 1;
+      const month = +p[1] || 1;
+      const year = +p[2] || 1900;
       return validate(date, month, year);
+    }
 
-    case 'mm-dd-yyyy':
-      var p = val.split('-');
-      var date = +p[1] || 1;
-      var month = +p[0] || 1;
-      var year = +p[2] || 1900;
+    case 'mm-dd-yyyy': {
+      const p = val.split('-');
+      const date = +p[1] || 1;
+      const month = +p[0] || 1;
+      const year = +p[2] || 1900;
       return validate(date, month, year);
+    }
 
-    case 'yyyy-mm-dd':
-      var p = val.split('-');
-      var date = +p[2] || 1;
-      var month = +p[1] || 1;
-      var year = +p[0] || 1900;
+    case 'yyyy-mm-dd': {
+      const p = val.split('-');
+      const date = +p[2] || 1;
+      const month = +p[1] || 1;
+      const year = +p[0] || 1900;
       return validate(date, month, year);
-
+    }
     default:
       return false;
   }