@innovaccer/design-system 2.7.0 → 2.9.0-0

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

@@ -0,0 +1,248 @@
+import React, { useState, useRef } from 'react';
+import '@innovaccer/design-system/css';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { html as beautifyHTML } from 'js-beautify';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import openSandbox from './sandbox.tsx';
+import vsDark from 'prism-react-renderer/themes/vsDark';
+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,
+  Toast
+} from '@innovaccer/design-system';
+import {
+  LiveProvider,
+  LiveEditor,
+  LiveError,
+  LivePreview,
+  withLive
+} from 'react-live';
+import './prism.css';
+
+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 getRawPreviewCode = (customCode, comp) => {
+  if (customCode) {
+    return `${generateImports(
+      customCode,
+      DS,
+      '@innovaccer/design-system'
+    )}
+
+${customCode}
+    `;
+  }
+};
+
+const StoryComp = ({
+  componentData,
+}) => {
+  const testRef = useRef(null);
+  const [zoom, setZoom] = useState(1);
+  const [htmlCode, setHtmlCode] = useState('');
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [activeButton, setActiveButton] = useState('React');
+  const [showToast, setShowToast] = useState(false);
+  const [jsxCode, setJsxCode] = React.useState(getRawPreviewCode(componentData));
+
+  const TabsWrap = withLive(({ live }) => {
+    const { element: Element } = live;
+    try {
+      const htmlValue = beautifyHTML(renderToStaticMarkup(<Element />), beautifyHTMLOptions);
+      setHtmlCode(htmlValue);
+    } catch (e) { }
+    return null;
+  });
+
+  const renderCodeBlock = (val) => (
+    <div>
+      <style>
+        {`pre {
+        margin: 0;
+        text-align: left;
+
+      }`}
+      </style>
+      <SyntaxHighlighter
+        language='javascript'
+        style={vs2015}
+        showLineNumbers={true}
+      >
+        {val}
+      </SyntaxHighlighter>
+    </div>
+  );
+
+  const copyToClipboard = (reactCode, htmlCode) => {
+    if (activeButton === 'React') {
+      navigator.clipboard.writeText(reactCode);
+    } else {
+      navigator.clipboard.writeText(htmlCode);
+    }
+    setShowToast(true);
+    setTimeout(() => setShowToast(false), 1000);
+  }
+
+  const CopyCode = (props) => {
+    const { onClick } = props;
+    return (
+      <div className='ml-auto d-flex'>
+        {activeButton === 'React' &&
+          <img
+            src="/icons/4691539_codesandbox_icon.svg"
+            className='codesandBox-icon cursor-pointer mr-6 align-self-center'
+            onClick={(e) => {
+              e.preventDefault();
+              openSandbox(jsxCode);
+            }}
+          />
+        }
+        <Icon
+          name='content_copy'
+          size={20}
+          appearance='white'
+          onClick={onClick}
+          className='align-self-center cursor-pointer'
+        />
+      </div>
+    );
+  };
+
+  const handleZoomIn = () => {
+    setZoom(zoom + 0.5);
+  };
+
+  const handleZoomOut = () => {
+    setZoom(zoom - 0.5);
+  };
+
+  const showLiveEditorContent = () => {
+    if (activeButton === 'React') {
+      return (
+        <div className="px-4">
+          <LiveEditor theme={vsDark} />
+        </div>
+      );
+    } else {
+      return renderCodeBlock(htmlCode);
+    }
+  };
+
+  const imports = React.useMemo(() => ({ ...DS }), []);
+
+  return (
+    <>
+      <div className='pb-8 pt-4 d-flex w-100 m-auto flex-column align-items-center'>
+        <LiveProvider code={jsxCode} 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 overflow-x-scroll' ref={testRef}>
+                <LivePreview
+                  className='p-8 mw-100 mh-100 d-block'
+                  style={{ zoom: zoom }}
+                />
+                <LiveError />
+              </div>
+              <div className='d-flex justify-content-end w-100 mb-6'>
+                <Button
+                  appearance='basic'
+                  onClick={() => setIsExpanded(!isExpanded)}
+                >
+                  {isExpanded ? 'Hide code' : 'Show code'}
+                </Button>
+              </div>
+            </CardBody>
+          </Card>
+          <TabsWrap />
+          {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>
+        {
+          showToast &&
+          <Toast
+            appearance="success"
+            title="Copied to clipboard"
+            className="position-fixed ml-5 toast"
+            onClose={() => setShowToast(false)}
+          />
+        }
+      </div>
+    </>
+  );
+};
+
+export default StoryComp;

package/docs/src/components/PropsTable/prism.css

@@ -0,0 +1,146 @@
+/* PrismJS 1.16.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+graphql+jsx+regex */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+.npm__react-simple-code-editor__textarea {
+  font-family: "Roboto Mono" !important;
+}
+
+code[class*="language-"],
+pre[class*="language-"] {
+  background: none;
+  font-family: "Roboto Mono";
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #dd4a68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

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

@@ -0,0 +1,81 @@
+import * as LZString from 'lz-string';
+
+// https://github.com/codesandbox/codesandbox-importers/blob/master/packages/import-utils/src/api/define.ts
+
+type IPackage = {
+  dependencies: object;
+};
+
+interface IFiles {
+  [key: string]: {
+    content: string | IPackage;
+    isBinary?: boolean;
+  };
+}
+
+const compress = (input: string) => {
+  return LZString.compressToBase64(input)
+    .replace(/\+/g, '-') // Convert '+' to '-'
+    .replace(/\//g, '_') // Convert '/' to '_'
+    .replace(/=+$/, ''); // Remove ending '='
+};
+
+const getParameters = (options: { files: IFiles }) => {
+  return compress(JSON.stringify(options));
+};
+
+export default (jsxStoryCode: string) => {
+  const structuredCode = jsxStoryCode
+    .trim()
+    // @ts-ignore
+    .replaceAll('// import', 'import')
+    .replace('() => ', 'const App = () => ')
+    .replaceAll('<>', '<React.Fragment>')
+    .replaceAll('</>', '</React.Fragment>');
+  const code = `
+import ReactDOM from "react-dom";
+import React from "react";
+import "@innovaccer/design-system/css";
+${structuredCode}
+
+ReactDOM.render(<App />, document.getElementById("root"));
+`;
+
+  const html = `
+<link
+  href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap"
+  rel="stylesheet"
+/>
+<link
+  href="https://fonts.googleapis.com/icon?family=Material+Icons"
+  rel="stylesheet"
+/>
+<div class="p-6">
+  <div id="root"></div>
+</div>
+
+  `;
+
+  const parameters = getParameters({
+    files: {
+      'package.json': {
+        content: {
+          dependencies: {
+            react: '16.12.0',
+            'react-dom': '16.12.0',
+            '@innovaccer/design-system': 'latest',
+          },
+        },
+      },
+      'index.js': {
+        content: code,
+      },
+      'index.html': {
+        content: html,
+      },
+    },
+  });
+
+  const url = `https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}`;
+  return window.open(url);
+};

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

@@ -0,0 +1,53 @@
+export const theme = {
+  base: 'light',
+
+  colorPrimary: '#0000001a',
+  colorSecondary: 'deepskyblue',
+
+  // UI
+  appBg: 'white',
+  appContentBg: 'white',
+  appBorderColor: '#0000001a',
+  appBorderRadius: 4,
+
+  // Typography
+  typography: {
+    fonts: {
+      mono: 'Roboto mono',
+    },
+  },
+  background: {
+    content: 'white',
+  },
+  animation: 'ease-out',
+  input: '',
+  color: {
+    defaultText: '#151414',
+    secondary: 'black',
+    negative: 'black',
+  },
+  fonts: {
+    base: '',
+  },
+  fontBase: '"Nunito Sans", "Open Sans", sans-serif',
+  fontCode: 'Roboto mono',
+
+  // Text colors
+  textColor: 'black',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+
+  // Toolbar default and active colors
+  barTextColor: 'silver',
+  barSelectedColor: 'black',
+  barBg: 'white',
+
+  // Form colors
+  inputBg: 'white',
+  inputBorder: 'silver',
+  inputTextColor: 'black',
+  inputBorderRadius: 4,
+  brand: 'Test',
+  code: '123',
+  easing: '',
+  layoutMargin: '',
+};

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

@@ -0,0 +1,44 @@
+export interface JsDocParam {
+  name: string;
+  description?: string;
+}
+
+export interface JsDocReturns {
+  description?: string;
+}
+
+export interface JsDocTags {
+  params?: JsDocParam[];
+  returns?: JsDocReturns;
+}
+
+export interface PropSummaryValue {
+  summary: string;
+  detail?: string;
+  required?: boolean;
+}
+
+export type PropType = PropSummaryValue;
+export type PropDefaultValue = PropSummaryValue;
+
+export interface TableAnnotation {
+  type: PropType;
+  jsDocTags?: JsDocTags;
+  defaultValue?: PropDefaultValue;
+  category?: string;
+}
+
+export interface ArgType {
+  name?: string;
+  description?: string;
+  defaultValue?: any;
+  [key: string]: any;
+}
+
+export interface ArgTypes {
+  [key: string]: ArgType;
+}
+
+export interface Args {
+  [key: string]: any;
+}

package/docs/src/components/Rules/DONTs.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import './Rules.css';
+
+const DONTs = ({ children }) => {
+
+  return (
+    <div className="px-6 Rules-Dont" >
+      {children}
+    </div>
+  );
+};
+
+export default DONTs;

package/docs/src/components/Rules/DOs.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import './Rules.css';
+
+const DOs = ({ children }) => {
+
+  return (
+    <div className="px-6 Rules-Do">
+      {children}
+    </div>
+  );
+};
+
+export default DOs;

package/docs/src/components/Rules/IconWrapper.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Icon } from '@innovaccer/design-system';
+
+const IconWrapper = ({ children, iconType = 'success' }) => {
+  return (
+    <div class='d-flex'>
+      {
+        iconType === 'error' ?
+          <Icon className='mr-4 mt-2' appearance="alert" name="cancel" size={14} />
+          :
+          <Icon className='mr-4 mt-2' appearance="success" name="check_circle" size={14} />
+      }
+      {children}
+    </div>
+  );
+};
+
+export default IconWrapper;

package/docs/src/components/Rules/InlineMessage.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const InlineMessage = ({ children }) => {
+  return (
+    <div className='py-6'>
+      {children}
+    </div>
+  );
+};
+
+export default InlineMessage;

package/docs/src/components/Rules/Rules.css

@@ -0,0 +1,17 @@
+.Rules-Container {
+  background-color: var(--secondary-lightest);
+  border-radius: var(--spacing-m);
+  pointer-events: none;
+  margin-top: var(--spacing-2);
+  margin-bottom: var(--spacing-4);
+}
+
+.Rules-Dont {
+  border-top: var(--spacing-s) solid var(--alert);
+  border-top-right-radius: var(--spacing-m);
+}
+
+.Rules-Do {
+  border-top: var(--spacing-s) solid var(--success);
+  border-top-left-radius: var(--spacing-m);
+}

package/docs/src/components/Rules/Rules.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Row, Column } from '@innovaccer/design-system';
+import './Rules.css';
+
+const Rules = ({ children, isPortraitMode = false }) => {
+
+  return (
+    <div className='Rules-Container'>
+      {
+        isPortraitMode ?
+          <>
+            <Row>
+              <Column>
+                {children.length > 0 && <div>{children[0]}</div>}
+              </Column>
+            </Row>
+            <Row>
+              <Column>
+                {children.length > 1 && <div>{children[1]}</div>}
+              </Column>
+            </Row>
+          </>
+          :
+          <>
+            <Row>
+              <Column>
+                {children.length > 0 && <div>{children[0]}</div>}
+              </Column>
+              <Column>
+                {children.length > 1 && <div>{children[1]}</div>}
+              </Column>
+            </Row>
+          </>
+      }
+    </div>
+  );
+};
+
+export default Rules;