@innovaccer/design-system 2.5.0-4 → 2.6.0

package/core/utils/docPage/index.tsx

@@ -1,16 +1,15 @@
 // @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 { 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 +23,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 +42,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,
@@ -162,9 +156,8 @@ ${jsx
 };
 
 const StoryComp = (props) => {
-  const { customCode, noHtml, noStory, noSandbox, isEmbed } = props;
-  const { story, storyId } = getStory();
-  const sp = story.parameters;
+  const { customCode, noHtml, noSandbox, isEmbed } = props;
+  const { story } = getStory();
   // const comp = sp.storySource.source;
   const comp = story.getOriginal()();
   const html = !noHtml ? beautifyHTML(renderToStaticMarkup(comp), beautifyHTMLOptions) : '';
@@ -194,7 +187,9 @@ const StoryComp = (props) => {
         try {
           const htmlValue = beautifyHTML(renderToStaticMarkup(<Element />), beautifyHTMLOptions);
           setHtmlCode(htmlValue);
-        } catch (e) {}
+        } catch (e) {
+          return;
+        }
       }
     }, [currentTab]);
 
@@ -225,7 +220,7 @@ const StoryComp = (props) => {
   if (!isEmbed) {
     actions.push({
       title: `${!isExpanded ? 'Show' : 'Hide'} code`,
-      onClick: (ev) => {
+      onClick: () => {
         setIsExpanded(!isExpanded);
       },
     });
@@ -304,6 +299,7 @@ export const docPage = () => {
     noProps = isEmbed,
     noSandbox,
     imports,
+    a11yProps,
   } = sp.docs.docPage || {};
   const { component: { displayName } = {} } = sp;
   const pageClassnames = classNames({
@@ -331,6 +327,15 @@ export const docPage = () => {
         />
       )}
 
+      {a11yProps && (
+        <>
+          <br />
+          <br />
+          <Heading appearance="subtle">Accessibility</Heading>
+          <Description>{a11yProps}</Description>
+        </>
+      )}
+
       {!noProps && (
         <>
           <br />

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);
     });
   });

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;
   }