@innovaccer/design-system 2.13.3 → 2.13.4-2

package/docs/src/components/PropsTable/SectionRow.tsx

@@ -80,28 +80,21 @@ export const SectionRow: FC<SectionRowProps> = ({
   colSpan = 3,
 }) => {
   const [expanded, setExpanded] = useState(initialExpanded);
-  const Level =
-    level === 'subsection' ? Subsection : Section;
+  const Level = level === 'subsection' ? Subsection : Section;
   // @ts-ignore
   const itemCount = children?.length || 0;
-  const caption =
-    level === 'subsection'
-      ? `${itemCount} item${itemCount !== 1 ? 's' : ''}`
-      : '';
+  const caption = level === 'subsection' ? `${itemCount} item${itemCount !== 1 ? 's' : ''}` : '';
   const icon = expanded ? 'arrowdown' : 'arrowright';
 
-  const helperText = `${expanded ? 'Hide' : 'Side'} ${
-    level === 'subsection' ? itemCount : label
-  } item${itemCount !== 1 ? 's' : ''}`;
+  const helperText = `${expanded ? 'Hide' : 'Side'} ${level === 'subsection' ? itemCount : label} item${
+    itemCount !== 1 ? 's' : ''
+  }`;
 
   return (
     <>
       <StyledTr title={helperText}>
         <Level colSpan={1}>
-          <ClickIntercept
-            onClick={(e) => setExpanded(!expanded)}
-            tabIndex={0}
-          >
+          <ClickIntercept onClick={(e) => setExpanded(!expanded)} tabIndex={0}>
             {helperText}
           </ClickIntercept>
           <FlexWrapper>
@@ -110,11 +103,7 @@ export const SectionRow: FC<SectionRowProps> = ({
           </FlexWrapper>
         </Level>
         <StyledTd colSpan={colSpan - 1}>
-          <ClickIntercept
-            onClick={(e) => setExpanded(!expanded)}
-            tabIndex={-1}
-            style={{ outline: 'none' }}
-          >
+          <ClickIntercept onClick={(e) => setExpanded(!expanded)} tabIndex={-1} style={{ outline: 'none' }}>
             {helperText}
           </ClickIntercept>
           {expanded ? null : caption}

package/docs/src/components/PropsTable/Table.tsx

@@ -112,10 +112,7 @@ export const TableWrapper = styled.table<{
           ...(!inAddonPanel && {
             borderColor:
               theme.base === 'light'
-                ? transparentize(
-                    0.035,
-                    theme.appBorderColor
-                  )
+                ? transparentize(0.035, theme.appBorderColor)
                 : opacify(0.05, theme.appBorderColor),
           }),
         },
@@ -146,19 +143,13 @@ const ResetButton = styled.button(({ theme }) => ({
   userSelect: 'none',
   margin: 0,
 
-  backgroundColor:
-    theme.base === 'light' ? '#EAF3FC' : theme.color.border,
+  backgroundColor: theme.base === 'light' ? '#EAF3FC' : theme.color.border,
   boxShadow:
-    theme.base === 'light'
-      ? `${theme.color.border} 0 0 0 1px inset`
-      : `${theme.color.darker}  0 0 0 1px inset`,
+    theme.base === 'light' ? `${theme.color.border} 0 0 0 1px inset` : `${theme.color.darker}  0 0 0 1px inset`,
   color: theme.color.secondary,
 
   '&:hover': {
-    background:
-      theme.base === 'light'
-        ? darken(0.03, '#EAF3FC')
-        : opacify(0.1, theme.color.border),
+    background: theme.base === 'light' ? darken(0.03, '#EAF3FC') : opacify(0.1, theme.color.border),
   },
 
   '&:focus': {
@@ -187,12 +178,9 @@ export type SortType = 'alpha' | 'requiredFirst' | 'none';
 type SortFn = (a: ArgType, b: ArgType) => number;
 
 const sortFns: Record<SortType, SortFn | null> = {
-  alpha: (a: ArgType, b: ArgType) =>
-    a.name.localeCompare(b.name),
+  alpha: (a: ArgType, b: ArgType) => a.name.localeCompare(b.name),
   requiredFirst: (a: ArgType, b: ArgType) =>
-    Number(!!b.type?.required) -
-      Number(!!a.type?.required) ||
-    a.name.localeCompare(b.name),
+    Number(!!b.type?.required) - Number(!!a.type?.required) || a.name.localeCompare(b.name),
   none: undefined,
 };
 export interface ArgsTableRowProps {
@@ -210,9 +198,7 @@ export interface ArgsTableErrorProps {
   error: ArgsTableError;
 }
 
-export type ArgsTableProps =
-  | ArgsTableRowProps
-  | ArgsTableErrorProps;
+export type ArgsTableProps = ArgsTableRowProps | ArgsTableErrorProps;
 
 type Rows = ArgType[];
 type Subsection = Rows;
@@ -244,19 +230,15 @@ const groupRows = (rows: ArgType, sort: SortType) => {
       if (!subcategory) {
         section.ungrouped.push({ key, ...row });
       } else {
-        const subsection =
-          section.subsections[subcategory] || [];
+        const subsection = section.subsections[subcategory] || [];
         subsection.push({ key, ...row });
         section.subsections[subcategory] = subsection;
       }
       sections.sections[category] = section;
     } else if (subcategory) {
-      const subsection =
-        sections.ungroupedSubsections[subcategory] || [];
+      const subsection = sections.ungroupedSubsections[subcategory] || [];
       subsection.push({ key, ...row });
-      sections.ungroupedSubsections[
-        subcategory
-      ] = subsection;
+      sections.ungroupedSubsections[subcategory] = subsection;
     } else {
       sections.ungrouped.push({ key, ...row });
     }
@@ -265,13 +247,9 @@ const groupRows = (rows: ArgType, sort: SortType) => {
   // apply sort
   const sortFn = sortFns[sort];
 
-  const sortSubsection = (
-    record: Record<string, Subsection>
-  ) => {
+  const sortSubsection = (record: Record<string, Subsection>) => {
     if (!sortFn) return record;
-    return Object.keys(record).reduce<
-      Record<string, Subsection>
-    >(
+    return Object.keys(record).reduce<Record<string, Subsection>>(
       (acc, cur) => ({
         ...acc,
         [cur]: record[cur].sort(sortFn),
@@ -282,21 +260,13 @@ const groupRows = (rows: ArgType, sort: SortType) => {
 
   const sorted = {
     ungrouped: sections.ungrouped.sort(sortFn),
-    ungroupedSubsections: sortSubsection(
-      sections.ungroupedSubsections
-    ),
-    sections: Object.keys(sections.sections).reduce<
-      Record<string, Section>
-    >(
+    ungroupedSubsections: sortSubsection(sections.ungroupedSubsections),
+    sections: Object.keys(sections.sections).reduce<Record<string, Section>>(
       (acc, cur) => ({
         ...acc,
         [cur]: {
-          ungrouped: sections.sections[cur].ungrouped.sort(
-            sortFn
-          ),
-          subsections: sortSubsection(
-            sections.sections[cur].subsections
-          ),
+          ungrouped: sections.sections[cur].ungrouped.sort(sortFn),
+          subsections: sortSubsection(sections.sections[cur].subsections),
         },
       }),
       {}
@@ -343,18 +313,13 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     Object.entries(groups.sections).length === 0 &&
     Object.entries(groups.ungroupedSubsections).length === 0
   ) {
-    return (
-      <EmptyBlock>
-        No inputs found for this component.&nbsp;
-      </EmptyBlock>
-    );
+    return <EmptyBlock>No inputs found for this component.&nbsp;</EmptyBlock>;
   }
 
   let colSpan = 1;
   if (updateArgs) colSpan += 1;
   if (!compact) colSpan += 2;
-  const expandable =
-    Object.keys(groups.sections).length > 0;
+  const expandable = Object.keys(groups.sections).length > 0;
 
   const common = {
     updateArgs,
@@ -363,10 +328,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     initialExpandedArgs,
   };
   return (
-    <TableWrapper
-      {...{ compact, inAddonPanel }}
-      className="docblock-argstable"
-    >
+    <TableWrapper {...{ compact, inAddonPanel }} className="docblock-argstable">
       <thead className="docblock-argstable-head">
         <tr>
           <th>Name</th>
@@ -375,13 +337,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
           {updateArgs ? (
             <th>
               <ControlHeadingWrapper>
-                Control{' '}
-                {resetArgs && (
-                  <ResetButton
-                    onClick={() => resetArgs()}
-                    title="Reset controls"
-                  ></ResetButton>
-                )}
+                Control {resetArgs && <ResetButton onClick={() => resetArgs()} title="Reset controls"></ResetButton>}
               </ControlHeadingWrapper>
             </th>
           ) : null}
@@ -389,74 +345,31 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
       </thead>
       <tbody className="docblock-argstable-body">
         {groups.ungrouped.map((row) => (
-          <ArgRow
-            key={row.key}
-            row={row}
-            arg={args && args[row.key]}
-            {...common}
-          />
+          <ArgRow key={row.key} row={row} arg={args && args[row.key]} {...common} />
         ))}
 
-        {Object.entries(groups.ungroupedSubsections).map(
-          ([subcategory, subsection]) => (
-            <SectionRow
-              key={subcategory}
-              label={subcategory}
-              level="subsection"
-              colSpan={colSpan}
-            >
-              {subsection.map((row) => (
-                <ArgRow
-                  key={row.key}
-                  row={row}
-                  arg={args && args[row.key]}
-                  expandable={expandable}
-                  {...common}
-                />
-              ))}
-            </SectionRow>
-          )
-        )}
-
-        {Object.entries(groups.sections).map(
-          ([category, section]) => (
-            <SectionRow
-              key={category}
-              label={category}
-              level="section"
-              colSpan={colSpan}
-            >
-              {section.ungrouped.map((row) => (
-                <ArgRow
-                  key={row.key}
-                  row={row}
-                  arg={args && args[row.key]}
-                  {...common}
-                />
-              ))}
-              {Object.entries(section.subsections).map(
-                ([subcategory, subsection]) => (
-                  <SectionRow
-                    key={subcategory}
-                    label={subcategory}
-                    level="subsection"
-                    colSpan={colSpan}
-                  >
-                    {subsection.map((row) => (
-                      <ArgRow
-                        key={row.key}
-                        row={row}
-                        arg={args && args[row.key]}
-                        expandable={expandable}
-                        {...common}
-                      />
-                    ))}
-                  </SectionRow>
-                )
-              )}
-            </SectionRow>
-          )
-        )}
+        {Object.entries(groups.ungroupedSubsections).map(([subcategory, subsection]) => (
+          <SectionRow key={subcategory} label={subcategory} level="subsection" colSpan={colSpan}>
+            {subsection.map((row) => (
+              <ArgRow key={row.key} row={row} arg={args && args[row.key]} expandable={expandable} {...common} />
+            ))}
+          </SectionRow>
+        ))}
+
+        {Object.entries(groups.sections).map(([category, section]) => (
+          <SectionRow key={category} label={category} level="section" colSpan={colSpan}>
+            {section.ungrouped.map((row) => (
+              <ArgRow key={row.key} row={row} arg={args && args[row.key]} {...common} />
+            ))}
+            {Object.entries(section.subsections).map(([subcategory, subsection]) => (
+              <SectionRow key={subcategory} label={subcategory} level="subsection" colSpan={colSpan}>
+                {subsection.map((row) => (
+                  <ArgRow key={row.key} row={row} arg={args && args[row.key]} expandable={expandable} {...common} />
+                ))}
+              </SectionRow>
+            ))}
+          </SectionRow>
+        ))}
       </tbody>
     </TableWrapper>
   );

package/docs/src/components/PropsTable/generateImports.tsx

@@ -12,9 +12,7 @@ const generateImports = (str = '', lib = {}, libName: string) => {
       return finalMap;
     }, {});
 
-  return `// import { ${Object.keys(componentsMap).join(
-    ', '
-  )} } from '${libName}';`;
+  return `// import { ${Object.keys(componentsMap).join(', ')} } from '${libName}';`;
 };
 
 export default generateImports;

package/docs/src/components/PropsTable/index.js

@@ -9,21 +9,8 @@ import generateImports from './generateImports';
 import * as DS from '@innovaccer/design-system';
 import './card.css';
 import { vs2015 } from 'react-syntax-highlighter/dist/esm/styles/hljs';
-import {
-  Card,
-  CardHeader,
-  CardBody,
-  Button,
-  Icon,
-  Tooltip
-} from '@innovaccer/design-system';
-import {
-  LiveProvider,
-  LiveEditor,
-  LiveError,
-  LivePreview,
-  withLive
-} from 'react-live';
+import { Card, CardHeader, CardBody, Button, Icon, Tooltip } from '@innovaccer/design-system';
+import { LiveProvider, LiveEditor, LiveError, LivePreview, withLive } from 'react-live';
 import './prism.css';
 import { copyMessage, copyMessageSuccess } from '../../util/constants';
 import { useEffect } from 'react';
@@ -43,15 +30,11 @@ const beautifyHTMLOptions = {
 };
 
 const getRawPreviewCode = (customCode, dataProvider) => {
-  if(dataProvider) {
-    return `() => <div><Spinner /></div>`
+  if (dataProvider) {
+    return `() => <div><Spinner /></div>`;
   }
   if (customCode) {
-    return `${generateImports(
-      customCode,
-      DS,
-      '@innovaccer/design-system'
-    )}
+    return `${generateImports(customCode, DS, '@innovaccer/design-system')}
 
 ${customCode}
     `;
@@ -61,11 +44,11 @@ ${customCode}
 const TabsWrap = withLive(({ live, onUpdate }) => {
   useEffect(() => {
     const { element: Element } = live;
-    if(!!live.element) {
+    if (live.element) {
       try {
         const htmlValue = beautifyHTML(renderToStaticMarkup(<Element />), beautifyHTMLOptions);
         onUpdate(htmlValue);
-      } catch (e) { 
+      } catch (e) {
         console.log(e);
       }
     }
@@ -73,10 +56,7 @@ const TabsWrap = withLive(({ live, onUpdate }) => {
   return null;
 });
 
-const StoryComp = ({
-  componentData,
-  dataProvider,
-}) => {
+const StoryComp = ({ componentData, dataProvider }) => {
   const testRef = useRef(null);
   const [zoom, setZoom] = useState(1);
   const [htmlCode, setHtmlCode] = useState('');
@@ -87,21 +67,23 @@ const StoryComp = ({
   const [tooltipName, setTooltipName] = useState(copyMessage);
 
   React.useEffect(() => {
-    if(dataProvider) {
+    if (dataProvider) {
       dataProvider()
         .then((data) => {
           setJsxCode(getRawPreviewCode(data));
         })
         .catch((err) => {
-        setJsxCode(`<Message className="my-7" appearance="alert" title="${err}" description="We are working to get it up for you to interact with." />`);
+          setJsxCode(
+            `<Message className="my-7" appearance="alert" title="${err}" description="We are working to get it up for you to interact with." />`
+          );
         });
     }
   }, []);
 
   const updateHtml = (htmlValue) => {
     setHtmlCode(htmlValue);
-  }
-  
+  };
+
   const renderCodeBlock = (val) => (
     <div>
       <style>
@@ -111,11 +93,7 @@ const StoryComp = ({
 
       }`}
       </style>
-      <SyntaxHighlighter
-        language='javascript'
-        style={vs2015}
-        showLineNumbers={true}
-      >
+      <SyntaxHighlighter language="javascript" style={vs2015} showLineNumbers={true}>
         {val}
       </SyntaxHighlighter>
     </div>
@@ -128,44 +106,39 @@ const StoryComp = ({
       navigator.clipboard.writeText(htmlCode);
     }
     setTooltipName(copyMessageSuccess);
-    setTooltipActive(true)
-  }
+    setTooltipActive(true);
+  };
 
   const CopyCode = (props) => {
     const { onClick } = props;
     return (
-      <div className='ml-auto d-flex'>
-        {activeButton === 'React' &&
-          <Tooltip
-            tooltip="Open in CodeSandbox"
-            position="bottom"
-            on="hover"
-          >
+      <div className="ml-auto d-flex">
+        {activeButton === 'React' && (
+          <Tooltip tooltip="Open in CodeSandbox" position="bottom" on="hover">
             <img
               src="/icons/4691539_codesandbox_icon.svg"
-              className='codesandBox-icon cursor-pointer mr-6 align-self-center'
+              className="codesandBox-icon cursor-pointer mr-6 align-self-center"
               onClick={(e) => {
                 e.preventDefault();
                 openSandbox(jsxCode);
               }}
             />
           </Tooltip>
-        }
+        )}
         <div
-          className='align-self-end'
-          onMouseLeave={() => { setTooltipActive(false); setTooltipName(copyMessage) }}
+          className="align-self-end"
+          onMouseLeave={() => {
+            setTooltipActive(false);
+            setTooltipName(copyMessage);
+          }}
         >
-          <Tooltip
-            open={isTooltipActive}
-            tooltip={tooltipName}
-            position="bottom"
-          >
+          <Tooltip open={isTooltipActive} tooltip={tooltipName} position="bottom">
             <Icon
-              name='content_copy'
+              name="content_copy"
               size={20}
-              appearance='white'
+              appearance="white"
               onClick={onClick}
-              className='align-self-center cursor-pointer'
+              className="align-self-center cursor-pointer"
             />
           </Tooltip>
         </div>
@@ -197,89 +170,70 @@ const StoryComp = ({
 
   return (
     <>
-      <div className='pb-8 pt-4 d-flex w-100 m-auto flex-column align-items-center'>
-      <ErrorBoundary>
-        <LiveProvider code={jsxCode ? jsxCode.replaceAll('action(', '() => console.log(') : ''} scope={imports}>
-          <Card
-            shadow='none'
-            className='w-100 overflow-hidden'
-          >
-            <CardHeader>
-              <div className='d-flex justify-content-end'>
-                <Button
-                  appearance="transparent"
-                  aria-label="Zoom In"
-                  onClick={() => handleZoomIn()}
-                  icon='zoom_in'
-                  largeIcon
-                />
-                <Button
-                  onClick={() => handleZoomOut()}
-                  icon='zoom_out'
-                  appearance='transparent'
-                  aria-label="Zoom Out"
-                  largeIcon
-                ></Button>
-              </div>
-            </CardHeader>
-            <CardBody className='d-flex flex-column align-items-center'>
-              <div className='w-100' ref={testRef}>
-                <LivePreview
-                  className='p-8 mw-100 mh-100 d-block live-provider mb-3'
-                  style={{ zoom: zoom }}
-                />
-                <LiveError />
-              </div>
-              <div className='d-flex justify-content-end w-100 mb-6'>
-                <Button
-                  appearance='basic'
-                  onClick={() => setIsExpanded(!isExpanded)}
-                  size="tiny"
-                >
-                  {isExpanded ? 'Hide code' : 'Show code'}
-                </Button>
-              </div>
-            </CardBody>
-          </Card>
-          <TabsWrap onUpdate={updateHtml} />
-          {isExpanded && (
-            <Card
-              shadow='none'
-              className='w-100 overflow-hidden mt-4 live-editor-card'
-            >
-              <div className='d-flex px-5 pt-5 pb-4'>
-                <Button
-                  appearance='basic'
-                  onClick={() => setActiveButton('React')}
-                  selected={
-                    activeButton === 'React'
-                      ? true
-                      : false
-                  }
-                  className='mr-3'
-                >
-                  React
-                </Button>
-                <Button
-                  appearance='basic'
-                  onClick={() => setActiveButton('HTML')}
-                  selected={
-                    activeButton === 'HTML' ? true : false
-                  }
-                >
-                  HTML
-                </Button>
-                <CopyCode
-                  onClick={() => {
-                    copyToClipboard(jsxCode, htmlCode);
-                  }}
-                />
-              </div>
-
-              {showLiveEditorContent()}
+      <div className="pb-8 pt-4 d-flex w-100 m-auto flex-column align-items-center">
+        <ErrorBoundary>
+          <LiveProvider code={jsxCode ? jsxCode.replaceAll('action(', '() => console.log(') : ''} scope={imports}>
+            <Card shadow="none" className="w-100 overflow-hidden">
+              <CardHeader>
+                <div className="d-flex justify-content-end">
+                  <Button
+                    appearance="transparent"
+                    aria-label="Zoom In"
+                    onClick={() => handleZoomIn()}
+                    icon="zoom_in"
+                    largeIcon
+                  />
+                  <Button
+                    onClick={() => handleZoomOut()}
+                    icon="zoom_out"
+                    appearance="transparent"
+                    aria-label="Zoom Out"
+                    largeIcon
+                  ></Button>
+                </div>
+              </CardHeader>
+              <CardBody className="d-flex flex-column align-items-center">
+                <div className="w-100" ref={testRef}>
+                  <LivePreview className="p-8 mw-100 mh-100 d-block live-provider mb-3" style={{ zoom: zoom }} />
+                  <LiveError />
+                </div>
+                <div className="d-flex justify-content-end w-100 mb-6">
+                  <Button appearance="basic" onClick={() => setIsExpanded(!isExpanded)} size="tiny">
+                    {isExpanded ? 'Hide code' : 'Show code'}
+                  </Button>
+                </div>
+              </CardBody>
             </Card>
-          )}
-        </LiveProvider>
+            <TabsWrap onUpdate={updateHtml} />
+            {isExpanded && (
+              <Card shadow="none" className="w-100 overflow-hidden mt-4 live-editor-card">
+                <div className="d-flex px-5 pt-5 pb-4">
+                  <Button
+                    appearance="basic"
+                    onClick={() => setActiveButton('React')}
+                    selected={activeButton === 'React' ? true : false}
+                    className="mr-3"
+                  >
+                    React
+                  </Button>
+                  <Button
+                    appearance="basic"
+                    onClick={() => setActiveButton('HTML')}
+                    selected={activeButton === 'HTML' ? true : false}
+                  >
+                    HTML
+                  </Button>
+                  <CopyCode
+                    onClick={() => {
+                      copyToClipboard(jsxCode, htmlCode);
+                    }}
+                  />
+                </div>
+
+                {showLiveEditorContent()}
+              </Card>
+            )}
+          </LiveProvider>
         </ErrorBoundary>
       </div>
     </>