@innovaccer/design-system 2.13.3 → 2.13.4-2

package/docs/src/components/MDXComponents.js

@@ -0,0 +1,213 @@
+import React from 'react';
+import * as MDSComponents from '@innovaccer/design-system';
+import PropsTable from './PropsTable';
+import { ArgsTable } from './PropsTable/Table';
+import axios from 'axios';
+import Markdown from 'markdown-to-jsx';
+import Rules from './Rules/Rules';
+import DOs from './Rules/DOs';
+import DONTs from './Rules/DONTs';
+import InlineMessage from './Rules/InlineMessage';
+import IconWrapper from './Rules/IconWrapper';
+import MDXHeading from './MDXHeading';
+
+const Rectangle = ({ name }) => {
+  return (
+    <div className='rectangle'>{name}</div>
+  );
+};
+
+const useGetStorybookData = async (name) => {
+  let componentName = name;
+  let componentPath = `/sb/${componentName}.json`;
+
+  // To handle Rich Text Editor Stories
+  if (name.startsWith('library')) {
+    componentPath = `/rte/${componentName}.json`;
+  }
+
+  const data = await axios.get(componentPath).then(({ data = {} }) => {
+    if (!Object.keys(data).length) {
+      return Promise.reject(`Could not get details for id: ${componentName}`);
+    }
+    return data;
+  });
+
+  return data;
+};
+
+function getJsxCode(name) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useGetStorybookData(name)
+    .then(componentData => {
+      const jsxCode = componentData && componentData.parameters
+        ? componentData.parameters.docs.docPage?.customCode ||
+        componentData.parameters.storySource?.source
+        : '';
+      return jsxCode;
+
+    })
+}
+
+const Preview = ({ name }) => {
+  return (
+    <div>
+      <PropsTable
+        dataProvider={() => getJsxCode(name)}
+      />
+    </div>
+  );
+};
+
+function getPropTableData(name) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useGetStorybookData(name)
+    .then(componentData => {
+      const jsxCode = componentData
+        ? componentData.parameters.argTypes
+        : '';
+      return jsxCode;
+
+    })
+}
+
+const FrameWrapper = ({ componentName }) => {
+  const onLoad = () => {
+    document.getElementById('iframe-loader').style.display = 'none';
+  };
+
+  return (
+    <>
+      <div id="iframe-loader">Loading ...</div>
+      <iframe
+        id="myFrame"
+        width="100%"
+        height="800px"
+        scrolling="no"
+        frameBorder="0"
+        onLoad={onLoad}
+        src={`https://mds.innovaccer.com/iframe.html?id=${componentName}&viewMode=docs&panel=true&nav=false&addons=1&stories=0&embed=prop-table`}
+      />
+    </>
+  );
+};
+
+const PreviewWithPropTable = ({ name, embed }) => {
+  const [data, setData] = React.useState({});
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+
+  React.useEffect(() => {
+    if (!embed) {
+      getPropTableData(name)
+        .then((data) => {
+          setData(data);
+          setLoading(false);
+        })
+        .catch((err) => {
+          setError(`Could not get details for id: ${name}`);
+          setLoading(false);
+        });
+    }
+  }, []);
+
+  if (loading && !embed) {
+    return <div> Loading ... </div>;
+  }
+
+  if (error) {
+    return (
+      <MDSComponents.Message
+        className="my-7"
+        appearance="alert"
+        title={error}
+        description="Hold tight, we are working to get it up for you to interact with."
+      />
+    );
+  }
+
+  return (
+    <div className="overflow-x-scroll">{embed ? <FrameWrapper componentName={name} /> : <ArgsTable rows={data} />}</div>
+  );
+};
+
+const A11yBlock = ({ name }) => {
+  const [data, setData] = React.useState([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+
+  React.useEffect(() => {
+    useGetStorybookData(name)
+      .then((componentData) => {
+        const a11yProps = componentData && componentData.parameters.docs.docPage?.a11yProps;
+
+        setData(a11yProps);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return <div>Loading ...</div>;
+  }
+
+  if (error) {
+    return (
+      <MDSComponents.Message
+        className="my-7"
+        appearance="alert"
+        title={error}
+        description="Hold tight, we are working to get it up for you to interact with."
+      />
+    );
+  }
+  return <div className="mb-8">{data && <Markdown className="A11y-markdown">{data}</Markdown>}</div>;
+};
+
+const List = ({ children }) => {
+  return (
+    <div className='list'>
+      {children}
+    </div>
+  )
+}
+
+const OrderedList = ({ children }) => {
+  return (
+    <ol className='ordered-list'>
+      {children}
+    </ol>
+  )
+}
+
+const Caption = ({ children }) => {
+  return (
+    <MDSComponents.Text size="small" appearance="subtle" className="d-flex my-4 justify-content-center text-align--center">
+      {children}
+    </MDSComponents.Text>
+  );
+};
+
+export const MDXComponents = {
+  ...MDSComponents,
+  Preview: Preview,
+  PreviewWithPropTable: PreviewWithPropTable,
+  A11yBlock: A11yBlock,
+  Rules,
+  DOs,
+  DONTs,
+  InlineMessage,
+  IconWrapper,
+  Caption,
+  ul: List,
+  ol: OrderedList,
+  h1: (props) => <MDXHeading size='xxl' headingInfo={props} />,
+  h2: (props) => <MDXHeading size='xl' headingInfo={props} />,
+  h3: (props) => <MDXHeading size='l' headingInfo={props} />,
+  h4: (props) => <MDXHeading size="m" headingInfo={props} />,
+  h5: (props) => <MDXHeading size="s" headingInfo={props} />,
+  Rectangle: (props) => <Rectangle {...props} />,
+}

package/docs/src/components/MDXHeading.js

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
-import { Heading, Icon, Tooltip } from "@innovaccer/design-system";
-import { copyMessage, copyMessageSuccess } from "../util/constants.js";
+import React, { useState } from 'react';
+import { Heading, Icon, Tooltip } from '@innovaccer/design-system';
+import { copyMessage, copyMessageSuccess } from '../util/constants.js';
 
 const copyToClipboard = (str) => {
   navigator.clipboard.writeText(str);
@@ -23,22 +23,20 @@ const MDXHeading = ({ size, headingInfo }) => {
 
     if (currURL.includes(id)) {
       copyToClipboard(currURL);
-    }
-    else if (currURL.includes("#")) {
-      copyToClipboard(currURL.slice(0, currURL.indexOf("#") + 1) + id);
-    }
-    else {
-      copyToClipboard(currURL + "#" + id);
+    } else if (currURL.includes('#')) {
+      copyToClipboard(currURL.slice(0, currURL.indexOf('#') + 1) + id);
+    } else {
+      copyToClipboard(currURL + '#' + id);
     }
     setTooltipActive(true);
     setTooltipName(copyMessageSuccess);
   };
 
   const sizeMarginMapper = {
-    s: "mt-4",
-    m: "mt-4",
-    l: "mt-6"
-  }
+    s: 'mt-4',
+    m: 'mt-4',
+    l: 'mt-6',
+  };
 
   return (
     <div
@@ -47,11 +45,7 @@ const MDXHeading = ({ size, headingInfo }) => {
       onMouseLeave={onMouseLeaveHandler}
       className={`d-inline-flex w-100 align-items-center ${sizeMarginMapper[size]}`}
     >
-      <Heading
-        className="mr-4"
-        size={size}
-        {...headingInfo}
-      />
+      <Heading className="mr-4" size={size} {...headingInfo} />
       <div className="cursor-pointer d-flex">
         {isHovered && (
           <Tooltip

package/docs/src/components/Meta.js

@@ -6,7 +6,7 @@ const favicon = '/icons/favicon_io/favicon-16x16.png';
 const faviconLarge = '/icons/favicon_io/favicon-32x32.png';
 const faviconApple = '/icons/favicon_io/apple-touch-icon.png';
 const cardImage = '/icons/card-image.png';
-const GA_MEASUREMENT_ID = "G-HTLCYE0XZT";
+const GA_MEASUREMENT_ID = 'G-HTLCYE0XZT';
 
 const Meta = ({ docTitle, docDescription, pageKeywords, titleType, frontmatter, relativePagePath }) => {
   const { title, description, keywords, lang } = useMetadata();
@@ -32,9 +32,11 @@ const Meta = ({ docTitle, docDescription, pageKeywords, titleType, frontmatter,
 
   function embedGoogleAnalytics() {
     // <!-- Global site tag (gtag.js) - Google Analytics -->
-    if (typeof window !== "undefined") {
+    if (typeof window !== 'undefined') {
       window.dataLayer = window.dataLayer || [];
-      function gtag() { window.dataLayer && window.dataLayer.push(arguments); }
+      function gtag() {
+        window.dataLayer && window.dataLayer.push(arguments);
+      }
       gtag('js', new Date());
       gtag('config', GA_MEASUREMENT_ID);
     }
@@ -105,14 +107,12 @@ const Meta = ({ docTitle, docDescription, pageKeywords, titleType, frontmatter,
       ]}
     >
       <html lang={lang} />
-      <link rel='icon' href={favicon} />
-      <link rel='icon' href={faviconLarge} />
-      <link rel='icon' href={faviconApple} />
+      <link rel="icon" href={favicon} />
+      <link rel="icon" href={faviconLarge} />
+      <link rel="icon" href={faviconApple} />
       {/* <!-- Global site tag (gtag.js) - Google Analytics --> */}
       <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}></script>
-      <script>
-        {embedGoogleAnalytics()}
-      </script>
+      <script>{embedGoogleAnalytics()}</script>
     </Helmet>
   );
 };

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

@@ -63,13 +63,9 @@ export const Table = styled.table(({ theme }) => ({
 }));
 
 export const ArgJsDoc: FC<ArgJsDocArgs> = ({ tags }) => {
-  const params = (tags.params || []).filter(
-    (x) => x.description
-  );
+  const params = (tags.params || []).filter((x) => x.description);
   const hasDisplayableParams = params.length !== 0;
-  const hasDisplayableReturns =
-    tags.returns != null &&
-    tags.returns.description != null;
+  const hasDisplayableReturns = tags.returns != null && tags.returns.description != null;
 
   if (!hasDisplayableParams && !hasDisplayableReturns) {
     return null;

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

@@ -44,15 +44,13 @@ const Description = styled.div(() => ({
   },
 }));
 
-const Type = styled.div<{ hasDescription: boolean }>(
-  ({ hasDescription }) => ({
-    color:
-      theme.base === 'light'
-        ? transparentize(0.1, theme.color.defaultText)
-        : transparentize(0.2, theme.color.defaultText),
-    marginTop: hasDescription ? 4 : 0,
-  })
-);
+const Type = styled.div<{ hasDescription: boolean }>(({ hasDescription }) => ({
+  color:
+    theme.base === 'light'
+      ? transparentize(0.1, theme.color.defaultText)
+      : transparentize(0.2, theme.color.defaultText),
+  marginTop: hasDescription ? 4 : 0,
+}));
 
 const TypeWithJsDoc = styled.div<{
   hasDescription: boolean;
@@ -65,35 +63,24 @@ const TypeWithJsDoc = styled.div<{
   marginBottom: 12,
 }));
 
-const StyledTd = styled.td<{ expandable: boolean }>(
-  ({ expandable }) => ({
-    paddingLeft: '20px',
-  })
-);
+const StyledTd = styled.td<{ expandable: boolean }>(({ expandable }) => ({
+  paddingLeft: '20px',
+}));
 
 export const ArgRow: FC<ArgRowProps> = (props) => {
-  const {
-    row,
-    updateArgs,
-    compact,
-    initialExpandedArgs,
-  } = props;
+  const { row, updateArgs, compact, initialExpandedArgs } = props;
   const { name, description } = row;
   const table = (row.table || {}) as TableAnnotation;
   const type = table.type || row.type;
-  const defaultValue =
-    table.defaultValue || row.defaultValue;
+  const defaultValue = table.defaultValue || row.defaultValue;
   const required = row.type?.required;
-  const hasDescription =
-    description != null && description !== '';
+  const hasDescription = description != null && description !== '';
 
   return (
     <tr>
       <StyledTd expandable={true}>
         <Name>{name}</Name>
-        {required ? (
-          <Required title="Required">*</Required>
-        ) : null}
+        {required ? <Required title="Required">*</Required> : null}
       </StyledTd>
       {compact ? null : (
         <td>
@@ -104,39 +91,24 @@ export const ArgRow: FC<ArgRowProps> = (props) => {
           )}
           {table.jsDocTags != null ? (
             <>
-              <TypeWithJsDoc
-                hasDescription={hasDescription}
-              >
-                <ArgValue
-                  value={type}
-                  initialExpandedArgs={initialExpandedArgs}
-                />
+              <TypeWithJsDoc hasDescription={hasDescription}>
+                <ArgValue value={type} initialExpandedArgs={initialExpandedArgs} />
               </TypeWithJsDoc>
               <ArgJsDoc tags={table.jsDocTags} />
             </>
           ) : (
             <Type hasDescription={hasDescription}>
-              <ArgValue
-                value={type}
-                initialExpandedArgs={initialExpandedArgs}
-              />
+              <ArgValue value={type} initialExpandedArgs={initialExpandedArgs} />
             </Type>
           )}
         </td>
       )}
       {compact ? null : (
         <td>
-          <ArgValue
-            value={defaultValue}
-            initialExpandedArgs={initialExpandedArgs}
-          />
+          <ArgValue value={defaultValue} initialExpandedArgs={initialExpandedArgs} />
         </td>
       )}
-      {updateArgs ? (
-        <td>
-          {/* <ArgControl {...(props as ArgControlProps)} /> */}
-        </td>
-      ) : null}
+      {updateArgs ? <td>{/* <ArgControl {...(props as ArgControlProps)} /> */}</td> : null}
     </tr>
   );
 };

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

@@ -22,39 +22,34 @@ interface ArgSummaryProps {
 
 const ITEMS_BEFORE_EXPANSION = 8;
 
-const Summary = styled.div<{ isExpanded?: boolean }>(
-  ({ isExpanded }) => ({
-    display: 'flex',
-    flexDirection: isExpanded ? 'column' : 'row',
-    flexWrap: 'wrap',
-    alignItems: 'flex-start',
-    marginBottom: '-4px',
-    minWidth: 100,
-  })
-);
-
-const Text = styled.span<{ simple?: boolean }>(
-  codeCommon,
-  ({ simple = false }) => ({
-    flex: '0 0 auto',
-    fontFamily: theme.typography.fonts.mono,
-    fontSize: '12px',
-    wordBreak: 'break-word',
-    whiteSpace: 'normal',
-    maxWidth: '100%',
-    margin: 0,
-    marginRight: '4px',
-    marginBottom: '4px',
-    paddingTop: '2px',
-    paddingBottom: '2px',
-    lineHeight: '13px',
-    ...(simple && {
-      background: 'transparent',
-      border: '0 none',
-      paddingLeft: 0,
-    }),
-  })
-);
+const Summary = styled.div<{ isExpanded?: boolean }>(({ isExpanded }) => ({
+  display: 'flex',
+  flexDirection: isExpanded ? 'column' : 'row',
+  flexWrap: 'wrap',
+  alignItems: 'flex-start',
+  marginBottom: '-4px',
+  minWidth: 100,
+}));
+
+const Text = styled.span<{ simple?: boolean }>(codeCommon, ({ simple = false }) => ({
+  flex: '0 0 auto',
+  fontFamily: theme.typography.fonts.mono,
+  fontSize: '12px',
+  wordBreak: 'break-word',
+  whiteSpace: 'normal',
+  maxWidth: '100%',
+  margin: 0,
+  marginRight: '4px',
+  marginBottom: '4px',
+  paddingTop: '2px',
+  paddingBottom: '2px',
+  lineHeight: '13px',
+  ...(simple && {
+    background: 'transparent',
+    border: '0 none',
+    paddingLeft: 0,
+  }),
+}));
 
 const ExpandButton = styled.button<{}>(() => ({
   fontFamily: theme.typography?.fonts.mono,
@@ -64,18 +59,15 @@ const ExpandButton = styled.button<{}>(() => ({
   border: 'none',
 }));
 
-const Expandable = styled.div<{}>(
-  codeCommon,
-  ({ theme }) => ({
-    fontFamily: theme.typography?.fonts.mono,
-    color: theme.color?.secondary,
-    fontSize: theme.typography?.size.s1, // overrides codeCommon
-    margin: 0,
-    whiteSpace: 'nowrap',
-    display: 'flex',
-    alignItems: 'center',
-  })
-);
+const Expandable = styled.div<{}>(codeCommon, ({ theme }) => ({
+  fontFamily: theme.typography?.fonts.mono,
+  color: theme.color?.secondary,
+  fontSize: theme.typography?.size.s1, // overrides codeCommon
+  margin: 0,
+  whiteSpace: 'nowrap',
+  display: 'flex',
+  alignItems: 'center',
+}));
 
 const EmptyArg = () => {
   return <span>-</span>;
@@ -88,50 +80,32 @@ const ArgText: FC<ArgTextProps> = ({ text, simple }) => {
 const getSummaryItems = (summary: string) => {
   if (!summary) return [summary];
   const splittedItems = summary.split('|');
-  const summaryItems = splittedItems.map((value) =>
-    value.trim()
-  );
+  const summaryItems = splittedItems.map((value) => value.trim());
 
   return uniq(summaryItems);
 };
 
-const renderSummaryItems = (
-  summaryItems: string[],
-  isExpanded = true
-) => {
+const renderSummaryItems = (summaryItems: string[], isExpanded = true) => {
   let items = summaryItems;
   if (!isExpanded) {
     items = summaryItems.slice(0, ITEMS_BEFORE_EXPANSION);
   }
 
-  return items.map((item) => (
-    <ArgText key={item} text={item === '' ? '""' : item} />
-  ));
+  return items.map((item) => <ArgText key={item} text={item === '' ? '""' : item} />);
 };
 
-const ArgSummary: FC<ArgSummaryProps> = ({
-  value,
-  initialExpandedArgs,
-}) => {
+const ArgSummary: FC<ArgSummaryProps> = ({ value, initialExpandedArgs }) => {
   const { summary, detail } = value;
 
-  const [isExpanded, setIsExpanded] = useState(
-    initialExpandedArgs || false
-  );
+  const [isExpanded, setIsExpanded] = useState(initialExpandedArgs || false);
 
-  if (summary === undefined || summary === null)
-    return null;
+  if (summary === undefined || summary === null) return null;
   // summary is used for the default value
   // below check fixes not displaying default values for boolean typescript vars
-  const summaryAsString =
-    typeof summary.toString === 'function'
-      ? summary.toString()
-      : summary;
+  const summaryAsString = typeof summary.toString === 'function' ? summary.toString() : summary;
 
   if (detail == null) {
-    const cannotBeSafelySplitted = /[(){}[\]<>]/.test(
-      summaryAsString
-    );
+    const cannotBeSafelySplitted = /[(){}[\]<>]/.test(summaryAsString);
 
     if (cannotBeSafelySplitted) {
       return <ArgText text={summaryAsString} />;
@@ -139,20 +113,13 @@ const ArgSummary: FC<ArgSummaryProps> = ({
 
     const summaryItems = getSummaryItems(summaryAsString);
     const itemsCount = summaryItems.length;
-    const hasManyItems =
-      itemsCount > ITEMS_BEFORE_EXPANSION;
+    const hasManyItems = itemsCount > ITEMS_BEFORE_EXPANSION;
 
     return hasManyItems ? (
       <Summary isExpanded={isExpanded}>
         {renderSummaryItems(summaryItems, isExpanded)}
-        <ExpandButton
-          onClick={() => setIsExpanded(!isExpanded)}
-        >
-          {isExpanded
-            ? 'Show less...'
-            : `Show ${
-                itemsCount - ITEMS_BEFORE_EXPANSION
-              } more...`}
+        <ExpandButton onClick={() => setIsExpanded(!isExpanded)}>
+          {isExpanded ? 'Show less...' : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`}
         </ExpandButton>
       </Summary>
     ) : (
@@ -167,16 +134,6 @@ const ArgSummary: FC<ArgSummaryProps> = ({
   );
 };
 
-export const ArgValue: FC<ArgValueProps> = ({
-  value,
-  initialExpandedArgs,
-}) => {
-  return value == null ? (
-    <EmptyArg />
-  ) : (
-    <ArgSummary
-      value={value}
-      initialExpandedArgs={initialExpandedArgs}
-    />
-  );
+export const ArgValue: FC<ArgValueProps> = ({ value, initialExpandedArgs }) => {
+  return value == null ? <EmptyArg /> : <ArgSummary value={value} initialExpandedArgs={initialExpandedArgs} />;
 };

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

@@ -3,8 +3,7 @@ import { styled } from '@storybook/theming';
 import { withReset } from './Shared';
 
 const Wrapper = styled.div<{}>(withReset, ({ theme }) => ({
-  backgroundColor:
-    theme.base === 'light' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)',
+  backgroundColor: theme.base === 'light' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)',
   borderRadius: theme.appBorderRadius,
   border: `1px dashed ${theme.appBorderColor}`,
   display: 'flex',
@@ -17,6 +16,4 @@ const Wrapper = styled.div<{}>(withReset, ({ theme }) => ({
   // fontSize: theme.typography.size.s2,
 }));
 
-export const EmptyBlock = (props: any) => (
-  <Wrapper {...props} className="docblock-emptyblock" />
-);
+export const EmptyBlock = (props: any) => <Wrapper {...props} className="docblock-emptyblock" />;