@innovaccer/design-system 2.9.1 → 3.0.0-2

package/.eslintignore

@@ -2,4 +2,5 @@ node_modules/
 public/
 coverage/
 docs/
-rollup.*
+rollup.*
+core/

package/.github/workflows/next.yml

@@ -0,0 +1,55 @@
+name: "Release next"
+on:
+  push:
+    branches:
+      - next
+jobs:
+  release:
+    # uncomment next line as soon as visual tesing starts working
+    # needs: visual_test 
+    name: Release tag
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      
+      - name: npm install
+        run: npm ci
+        
+      - name: setup git
+        run: git checkout -b preparing-module-for-npm-publish && git config --global user.email "release-bot@innovaccer.com" && git config --global user.name "release-bot"
+      
+      - name: bump module version
+        run: npm version --no-commit-hooks prerelease -m "Released %s [skip ci]"
+
+      - name: gnerate .npmrc
+        run: cp .npmrc.stub .npmrc
+
+      - name: Publish to npmjs
+        run: npm publish --access public --tag=next
+        env:
+          NPM_TOKEN: ${{secrets.NPM_TOKEN}}
+
+      - name: remove .npmrc
+        run: rm -rf .npmrc
+        
+      - name: push tag to github
+        run: git push https://${{ secrets.GH_TOKEN }}@github.com/$GITHUB_REPOSITORY.git --follow-tags
+
+      - name: remove css/dist dist/ from commit
+        run: |
+          git reset HEAD~1
+          git add package.json
+          git commit -m "Released $(git log -1 --pretty=format:%s)" --no-verify
+
+      - name: push version to github
+        run: git push https://${{ secrets.GH_TOKEN }}@github.com/$GITHUB_REPOSITORY.git HEAD:next
+    
+      
+      - name: notify release
+        uses: /innovaccer/design-system/actions/notify-release@next
+        env:
+          GCHAT_PATH: ${{ secrets.GCHAT_PATH }}

package/{docs/src/components/PropsTable → .storybook/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('<', ''))
@@ -12,9 +11,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/.storybook/docPage/index.tsx

@@ -0,0 +1,374 @@
+import React, { useContext } from 'react';
+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 { vs2015 } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import * as DS from '@';
+import { Button, Card, TabsWrapper, Tab, Heading } from '@innovaccer/design-system';
+import vsDark from 'prism-react-renderer/themes/vsDark';
+import { LiveProvider, LiveEditor, LiveError, LivePreview, withLive } from 'react-live';
+import openSandbox from './sandbox';
+import generateImports from './generateImports';
+import * as componentLib from '@/index';
+import classNames from 'classnames';
+
+import { DocsContext } from '@storybook/addon-docs/dist/esm/blocks/DocsContext';
+import { SourceContext } from '@storybook/addon-docs/dist/esm/blocks/SourceContainer';
+import { getSourceProps } from '@storybook/addon-docs/dist/esm/blocks/Source';
+
+export interface Example {
+  title: string;
+  description?: string;
+  imports: string[];
+  component: React.ReactNode;
+}
+
+const beautifyHTMLOptions = {
+  indent_size: 2,
+  wrap_line_length: 0,
+  preserve_newlines: true,
+  jslint_happy: true,
+  end_with_newline: false,
+  indent_inner_html: true,
+  break_chained_methods: true,
+  keep_array_indentation: true,
+  good_stuff: true,
+  indent_empty_lines: true,
+};
+
+const beautifyJSXOptions = {
+  ...beautifyHTMLOptions,
+  e4x: true,
+};
+
+const JSXtoStringOptions = {
+  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: () => () => {
+    return;
+  },
+  // maxInlineAttributesLineLength: 10,
+  showDefaultProps: false,
+  useBooleanShorthandSyntax: false,
+};
+
+const copyCode = (val: string) => navigator.clipboard.writeText(val);
+
+type OnClickType = (e: React.MouseEvent) => void;
+
+const CopyComp = (props: { onClick: OnClickType }) => {
+  const { onClick } = props;
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        right: '0',
+        zIndex: 10,
+      }}
+    >
+      <Button
+        size="tiny"
+        style={{ borderRadius: '0', borderBottomLeftRadius: '4px' }}
+        appearance="basic"
+        onClick={onClick}
+      >
+        Copy
+      </Button>
+    </div>
+  );
+};
+
+const buttonStyles = {
+  borderRadius: '0',
+  borderBottomLeftRadius: '4px',
+  width: '100%',
+  background: 'white',
+};
+
+const ShowMoreLessButton = ({ onClick, text = 'More' }: { onClick: OnClickType; text: string }) => (
+  <div
+    style={{
+      display: 'grid',
+      placeItems: 'center',
+      position: 'absolute',
+      width: '100%',
+      bottom: '0',
+      zIndex: 10,
+    }}
+  >
+    <Button size="tiny" style={buttonStyles} appearance="basic" onClick={onClick}>
+      {`Show ${text}`}
+    </Button>
+  </div>
+);
+
+const getHeight = (shouldShowMore: boolean, showMoreHTML: boolean) => {
+  if (shouldShowMore) {
+    return showMoreHTML ? '100%' : '250px';
+  }
+  return '100%';
+};
+
+const renderCodeBlock = (val: string) => (
+  <>
+    <style>
+      {`pre {
+          margin: 0;
+        }`}
+    </style>
+    <CopyComp onClick={() => copyCode(val)} />
+    <SyntaxHighlighter language="javascript" style={vs2015} showLineNumbers={true}>
+      {val}
+    </SyntaxHighlighter>
+  </>
+);
+
+const getStory = () => {
+  const { storyId } = __STORYBOOK_STORY_STORE__.getSelection();
+  const story = __STORYBOOK_STORY_STORE__.fromId(storyId);
+  return { storyId, story };
+};
+
+const getRawPreviewCode = (customCode: string, comp: React.ReactNode) => {
+  if (customCode) {
+    return `${generateImports(customCode, componentLib, '@innovaccer/design-system')}
+${customCode}
+    `;
+  }
+  const jsx = `${beautifyHTML(reactElementToJSXString(comp, JSXtoStringOptions), beautifyJSXOptions)}`;
+  const importString = generateImports(jsx, componentLib, '@innovaccer/design-system');
+
+  const code = `
+${importString}
+() => {
+  return(
+${jsx
+  .split('\n')
+  .map((l) => `    ${l}`)
+  .join('\n')}
+  );
+}
+`;
+  return code;
+};
+
+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.originalStoryFn();
+  const html = !noHtml ? beautifyHTML(renderToStaticMarkup(comp), beautifyHTMLOptions) : '';
+
+  const [activeTab, setActiveTab] = React.useState<number>(0);
+  const [jsxCode, setJsxCode] = React.useState<string>(getRawPreviewCode(customCode, comp));
+  const [htmlCode, setHtmlCode] = React.useState<string>(`${html}`);
+  const [isExpanded, setIsExpanded] = React.useState(isEmbed);
+  const [showMore, setShowMore] = React.useState<boolean>(false);
+  const [shouldShowMore, setShouldShowMore] = React.useState<boolean>(false);
+  const codePanel = React.useRef<HTMLDivElement>(null);
+
+  const importScope = props.imports;
+
+  const renderHTMLTab = () => {
+    if (!noHtml) {
+      return <Tab label={'HTML'}>{renderCodeBlock(htmlCode)}</Tab>;
+    }
+    return <></>;
+  };
+
+  const TabsWrap = withLive<{ live?: any; activeTab: number }>(({ live, activeTab }) => {
+    const { error, element: Element } = live;
+
+    React.useEffect(() => {
+      if (!error && activeTab === 1) {
+        try {
+          const htmlValue = beautifyHTML(renderToStaticMarkup(<Element />), beautifyHTMLOptions);
+          setHtmlCode(htmlValue);
+        } catch (e) {
+          return;
+        }
+      }
+    }, [activeTab]);
+
+    React.useEffect(() => {
+      if (codePanel.current?.clientHeight && codePanel.current?.clientHeight > 250) {
+        setShouldShowMore(true);
+      }
+    }, [codePanel]);
+
+    return null;
+  });
+
+  const onChangeCode = React.useCallback((updatedCode) => {
+    setJsxCode(updatedCode);
+  }, []);
+
+  const actions = [
+    {
+      title: 'Edit in sandbox',
+      onClick: (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        openSandbox(jsxCode);
+      },
+      disabled: noSandbox,
+    },
+  ];
+
+  if (!isEmbed) {
+    actions.push({
+      title: `${!isExpanded ? 'Show' : 'Hide'} code`,
+      onClick: () => {
+        setIsExpanded(!isExpanded);
+      },
+      disabled: false,
+    });
+  }
+
+  const imports = React.useMemo(() => ({ ...DS, ...importScope }), []);
+
+  const tabChangeHandler = (tab: number) => {
+    setActiveTab(tab);
+    setShouldShowMore(false);
+  };
+
+  return (
+    <Card shadow={isEmbed ? 'none' : 'light'} className="overflow-hidden">
+      <LiveProvider code={jsxCode} scope={imports}>
+        <Canvas
+          className="my-0"
+          withToolbar={true}
+          isExpanded={isExpanded}
+          withSource={'none' as any}
+          additionalActions={actions}
+        >
+          <LivePreview />
+        </Canvas>
+
+        <LiveError className="px-7" />
+
+        {isExpanded && (
+          <>
+            <TabsWrap activeTab={activeTab} />
+            <div
+              ref={codePanel}
+              style={{
+                position: 'relative',
+                marginBottom: shouldShowMore ? '24px' : '',
+                height: getHeight(shouldShowMore, showMore),
+              }}
+              className="DocPage-editorTabs"
+            >
+              <TabsWrapper active={activeTab} onTabChange={tabChangeHandler}>
+                <Tab label={'React'}>
+                  <CopyComp
+                    onClick={() => {
+                      const editor = document.querySelector(
+                        '.npm__react-simple-code-editor__textarea'
+                      ) as HTMLTextAreaElement;
+                      if (editor) copyCode(editor.value);
+                    }}
+                  />
+                  <LiveEditor theme={vsDark} onChange={onChangeCode} />
+                </Tab>
+                {renderHTMLTab()}
+              </TabsWrapper>
+            </div>
+            {shouldShowMore && (
+              <ShowMoreLessButton onClick={() => setShowMore(!showMore)} text={showMore ? 'Less' : 'More'} />
+            )}
+          </>
+        )}
+      </LiveProvider>
+    </Card>
+  );
+};
+
+export const docPage = () => {
+  const { story, storyId } = getStory();
+  const sp = story.parameters;
+  const isEmbed = window.location.search.includes('embed=min');
+  const isEmbedWithProp = window.location.search.includes('embed=prop');
+
+  const {
+    title,
+    description,
+    props: propsAttr,
+    // customCode,
+    noHtml,
+    noStory,
+    noProps = isEmbed,
+    noSandbox,
+    imports,
+    a11yProps,
+  } = sp.docs.docPage || {};
+  const { component: { displayName = '' } = {} } = story;
+  const pageClassnames = classNames({
+    DocPage: true,
+    'pt-8 pb-8': !(isEmbed || isEmbedWithProp),
+  });
+  const docPageTitle: string = title || displayName;
+
+  // get raw source of the story
+  const docsContext = useContext(DocsContext);
+  const sourceContext = useContext(SourceContext);
+  const raw = getSourceProps({ ids: [storyId] }, docsContext, sourceContext);
+  const code = `${raw.code}`;
+  console.log(code);
+  const customCode = code;
+  // END: get raw source of the story
+
+  return (
+    <div className={pageClassnames}>
+      {!isEmbed && !isEmbedWithProp && (
+        <>
+          <Title>{docPageTitle}</Title>
+          <Description>{description}</Description>
+        </>
+      )}
+
+      {!noStory && (
+        <StoryComp
+          key={storyId}
+          customCode={customCode}
+          noHtml={noHtml}
+          noSandbox={noSandbox}
+          imports={imports}
+          isEmbed={isEmbed || isEmbedWithProp}
+        />
+      )}
+
+      {a11yProps && (
+        <>
+          <br />
+          <br />
+          <Heading appearance="subtle">Accessibility</Heading>
+          <Description>{a11yProps}</Description>
+        </>
+      )}
+
+      {!noProps && (
+        <>
+          <br />
+          <br />
+          <Heading appearance="subtle">Prop table</Heading>
+          <ArgsTable {...propsAttr} />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default docPage;

package/{docs/src/components/PropsTable → .storybook/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/.storybook/main.js

@@ -1,8 +1,9 @@
 const path = require('path');
 
 module.exports = {
+  staticDirs: ['../dist/static'],
   "stories": [
-    "../core/components/**/*.story.@(js|jsx|ts|tsx)"
+    "../src/components/**/*.story.@(js|jsx|ts|tsx)"
   ],
   "addons": [
     /**
@@ -17,7 +18,7 @@ module.exports = {
      */
     "@storybook/addon-essentials",
     '@storybook/addon-a11y',
-    "@storybook/addon-knobs",
+    // "@storybook/addon-knobs",
   ],
   typescript: {
     check: false,
@@ -34,18 +35,18 @@ module.exports = {
     },
   },
   webpackFinal: async (config, { configType }) => {
-    config.resolve.alias['@'] = path.resolve(__dirname, '../core');
+    config.resolve.alias['@'] = path.resolve(__dirname, '../src');
     // Return the altered config
     return config;
   },
-  refs: {
-    'rich-text-editor': {
-      title: "Rich Text Editor",
-      url: "https://innovaccer.github.io/mds-rich-text-editor/"
-    },
-    'mds-helpers': {
-      title: "MDS Helpers",
-      url: "https://innovaccer.github.io/mds-helpers/"
-    }
-   }
-}
+  // refs: {
+  //   'rich-text-editor': {
+  //     title: "Rich Text Editor",
+  //     url: "https://innovaccer.github.io/mds-rich-text-editor/"
+  //   },
+  //   'mds-helpers': {
+  //     title: "MDS Helpers",
+  //     url: "https://innovaccer.github.io/mds-helpers/"
+  //   }
+  //  }
+}

package/.storybook/preview.js

@@ -2,7 +2,7 @@ import React from 'react';
 import '../css';
 import './docPage.css'
 import { DocsContainer } from '@storybook/addon-docs/blocks';
-import { docPage } from '@/utils/docPage';
+import { docPage } from './docPage';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { primary } from './themes';
 

package/CHANGELOG.md

@@ -1,44 +1,4 @@
 
-## 2.9.0-0  (2022-02-01)
-### Highlights
-* feat: adds docs site (44ab33d3)
-* feat(verticalNav): add custom item renderer option (810a099f)
-
-### Breaking changes
-NA
-
-### Migration guide
-NA
-
-### Deprecations
-NA
-
-### Features
-* feat: adds docs site (44ab33d3)
-* feat(verticalNav): add custom item renderer option (810a099f)
-
-
-### Fixes
-* fix(verticalnav): fix verticalnav active hover state shadow (1b341516)
-* fix(button): fix button hover background color (1e696743)
-* fix(button): fix button hover and focus style (795ae48b)
-* fix(dropdown): fix dropdown items closing animation (dc8c6102)
-* fix(tabs): fix tabs conflict in selected focused state style (fa4ff904)
-* fix(toast): add message to  discription story (1cac895d)
-* fix(button): props table not showing (70ac3e39)
-* fix(leftNav): fix left navbar highlighting on tab changes (d836a42e)
-* fix(table): add border in table for mdx and fix overflow behaviour (233293ed)
-* fix(table): make scrollbar width consistent (af5da8f6)
-* fix(table): fix table data issue when rows are more than 27 (b33aafc1)
-
-### Improvements
-NA
-
-### Documentation
-* Adds documentations for components.
-
--------------------
-
 ## 2.8.0-0  (2022-01-12)
 ### Highlights
 

package/README.md

@@ -126,12 +126,6 @@ For css variables to work on IE we use a polyfill at runtime to achieve dynamic
 </script>
 ```
 
-## :card_file_box: Repos
-Here are the supporting repositories.
-- **[MDS Rich Text Editor](https://github.com/innovaccer/mds-rich-text-editor)** - Feature-rich WYSIWYG (What You See Is What You Get) HTML editor and WYSIWYG Markdown editor. It is used to create blogs, notes sections, comment sections etc. It has a variety of tools to edit and format rich content.
-- **[MDS Docs](https://github.com/innovaccer/mds-docs)** - Documentation site for Masala design system.
-- **[MDS Helpers](https://github.com/innovaccer/mds-helpers)** - Alert Service.
-
 ## :books: Documentation
 
 - [🌶 Masala Design System](http://design.innovaccer.com)

package/core/components/atoms/button/Button.tsx

@@ -97,7 +97,6 @@ const sizeMapping: Record<ButtonSize, number> = {
   large: 20,
 };
 
-// eslint-disable-next-line react/display-name
 const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     size = 'regular',
@@ -180,6 +179,8 @@ const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
   );
 });
 
+ButtonElement.displayName = 'ButtonElement';
+
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const { icon, tooltip, children } = props;
 

package/core/components/atoms/checkbox/__stories__/Group.story.tsx

@@ -3,7 +3,7 @@ import { Checkbox, Label } from '@/index';
 
 export const CheckboxGroup = () => (
   <div>
-    <Label className="mb-3">Problems</Label>
+    <Label>Problems</Label>
     <Checkbox label="Cardiovascular" defaultChecked={true} />
     <Checkbox label="Obesity" defaultChecked={true} className="mt-5" />
     <Checkbox label="Patient has language barriers" className="mt-5" />

package/core/components/atoms/checkbox/__stories__/Nested.story.tsx

@@ -51,7 +51,6 @@ export const NestedCheckboxes = () => {
               value={label}
               onChange={(c) => handleChildChange(c, ind)}
               defaultChecked={ind < 2}
-              className="mt-4"
             />
           );
         })}
@@ -106,7 +105,6 @@ const customCode = `() => {
                 checked={checked[ind]}
                 value={label}
                 onChange={c => handleChildChange(c, ind)}
-                className="mt-4"
               />
             );
           })