@innovaccer/design-system 2.7.0 → 2.9.0-0

package/docs/src/util/HeaderItems.js

@@ -0,0 +1,21 @@
+import { useStaticQuery, graphql } from 'gatsby';
+
+export function useHeaderItems() {
+  const {
+    allHeaderItemsYaml: { edges },
+  } = useStaticQuery(graphql`
+    query HEADER_QUERY {
+      allHeaderItemsYaml {
+        edges {
+          node {
+            label
+            link            
+          }
+        }
+      }
+    }
+  `);
+
+  const items = edges.map(({ node }) => node);
+  return items;
+}

package/docs/src/util/Helpers.js

@@ -0,0 +1,7 @@
+export function debounce(func, delay = 500) {
+  let timerId;
+  return function () {
+    clearTimeout(timerId)
+    timerId = setTimeout(() => func.apply(this, arguments), delay)
+  };
+};

package/docs/src/util/HomeMenu.js

@@ -0,0 +1,24 @@
+import { useStaticQuery, graphql } from 'gatsby';
+
+export default function useHomeMenu() {
+  const {
+    allHomeMenuYaml: { edges },
+  } = useStaticQuery(graphql`
+    query HOME_QUERY {
+      allHomeMenuYaml {
+        edges {
+          node {
+            name
+            link
+            content
+            icon
+            appearance
+          }
+        }
+      }
+    }
+  `);
+
+  const items = edges.map(({ node }) => node);
+  return items;
+}

package/docs/src/util/HomeResources.js

@@ -0,0 +1,23 @@
+import { useStaticQuery, graphql } from 'gatsby';
+
+export default function useHomeResources() {
+  const {
+    allHomeResourcesYaml: { edges },
+  } = useStaticQuery(graphql`
+    query HOME_RESOURCES {
+      allHomeResourcesYaml {
+        edges {
+          node {
+            description
+            link
+            name
+            imgSrc
+          }
+        }
+      }
+    }
+  `);
+
+  const items = edges.map(({ node }) => node);
+  return items;
+}

package/docs/src/util/InPageNavItems.js

@@ -0,0 +1,36 @@
+import { useStaticQuery, graphql } from 'gatsby';
+
+export function useNavItems(relativePagePath) {
+  const {
+    allMdx: { edges },
+  } = useStaticQuery(graphql`
+    query IN_PAGE_NAV_QUERY {
+      allMdx {
+        edges {
+          node {
+            tableOfContents
+            fileAbsolutePath
+            headings {
+              depth
+              value
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  const headings = edges
+    .filter(({ node }) => {
+      const fileName =
+        node.fileAbsolutePath.split('pages')[1];
+      if (
+        fileName === relativePagePath &&
+        node.headings.length
+      ) {
+        return node;
+      }
+    })
+    .map(({ node }) => node.tableOfContents);
+  return headings.length ? headings[0].items : [];
+}

package/docs/src/util/Logos.js

@@ -0,0 +1,19 @@
+import { useStaticQuery, graphql } from 'gatsby';
+
+export function useLogoItems() {
+  const {
+    allImageSharp: { nodes },
+  } = useStaticQuery(graphql`
+    query IMAGES {
+      allImageSharp {
+        nodes {
+          fluid {
+            src
+          }
+          gatsbyImageData
+        }
+      }
+    }
+  `);
+  return nodes;
+}

package/docs/src/util/MdsChangelog.js

@@ -0,0 +1,55 @@
+import { useStaticQuery, graphql } from 'gatsby';
+
+export default function MdsChangelog() {
+  const {
+    allMdx: { edges },
+  } = useStaticQuery(graphql`
+    query MDS_CHANGELOG {
+      allMdx(filter: {frontmatter: {title: {eq: "Release notes"}}}) {
+        edges {
+          node {
+            internal {
+              content
+            }
+            headings(depth: h2) {
+              value
+            }
+          }
+        }
+      }
+    }  
+  `);
+
+  const items = edges.map(({ node }) => node);
+
+  const record = {
+    version: '',
+    releaseDate: '',
+    updatesList: []
+  }
+
+  if (items.length > 0) {
+
+    const metadata = items[0].headings[0].value;
+
+    record.version = metadata.substring(0, metadata.indexOf('('));
+    record.releaseDate = metadata.substring(
+      metadata.indexOf("(") + 1,
+      metadata.lastIndexOf(")")
+    );
+
+    const htmlContent = items[0].internal.content;
+    const latestUpdate = htmlContent.split('\n----')[0];
+
+    let updateList = latestUpdate.split('###');
+
+    const listSeparator = '*';
+
+    updateList.shift();
+    updateList
+      .filter((item) => item.includes(listSeparator))
+      .map((item) => record.updatesList.push(item.split(listSeparator)));
+
+  }
+  return record;
+}

package/docs/src/util/MediumBlogs.js

@@ -0,0 +1,27 @@
+import { useStaticQuery, graphql } from 'gatsby';
+
+export default function MediumBlogs() {
+  const {
+    allMediumPost: { edges },
+  } = useStaticQuery(graphql`
+      query MEDIUM_BLOGS {
+        allMediumPost(sort: {fields: [createdAt], order: DESC}) {
+          edges {
+            node {
+              id
+              title
+              uniqueSlug
+              firstPublishedAt
+              author {
+                name
+                imageId
+              }
+            }
+          }
+        }
+      }
+  `)
+
+  const items = edges.map(({ node }) => node);
+  return items;
+}

package/docs/src/util/NavItems.js

@@ -0,0 +1,82 @@
+import { useStaticQuery, graphql } from 'gatsby';
+import { MOBILE } from '../util/constants';
+
+export function useNavItems(relativePagePath) {
+    const {
+      allNavYaml: { nodes },
+    } = useStaticQuery(graphql`
+      query LEFT_NAV_QUERY {
+        allNavYaml {
+          nodes {
+            base
+            menus {
+              label
+              link
+              subMenu {
+                label
+                link
+              }
+            }
+          }
+        }
+      }
+    `);
+
+  const getKey = (nodes, relativePath) => {
+    const keys = nodes.map((elt) => {
+      return elt.base;
+    });
+    const sortedKeys = keys
+      .sort((a, b) => {
+        const diff = a.split('/').length - b.split('/').length;
+        const val = diff ? diff : a.localeCompare(b);
+        return val;
+      })
+      .reverse();
+    let value = 'default';
+    sortedKeys.some((key) => {
+      const isPresent = relativePath.includes(key);
+      const nextValue = relativePath[key.length];
+      if (isPresent && (!nextValue || nextValue === '/')) {
+        value = key;
+        return true;
+      }
+      return false;
+    });
+
+    return value;
+  }
+
+  const pagePath = relativePagePath.includes(MOBILE)
+    ? relativePagePath.split('/')[2].replace('.mdx', '')
+    : relativePagePath.replace('/', '').split('.')[0];
+
+  const navPage = getKey(nodes, pagePath);
+
+  const navData = nodes.filter((node) => {
+    return node.base === navPage;
+  });
+
+
+  const navItems = navData[0].menus.map((node) => {
+    const menu = {
+      ...node,
+      name: node.label,
+      link: relativePagePath.includes(MOBILE) ? `/mobile${node.link}` : node.link,
+    };
+
+    if (menu.subMenu) {
+      menu.subMenu = menu.subMenu.map((item) => {
+        return {
+          ...item,
+          name: `${menu.name}.${item.label}`,
+          link: relativePagePath.includes(MOBILE)
+            ? `/mobile${item.link}`
+            : item.link,
+        };
+      });
+    }
+    return menu;
+  });
+  return navItems;
+}

package/docs/src/util/StorybookData.js

@@ -0,0 +1,24 @@
+import { useStaticQuery, graphql } from 'gatsby';
+
+export function useGetStorybookData(componentName) {
+  const {
+    allKeyValue: { edges },
+  } = useStaticQuery(graphql`
+    query STORYBOOK_DATA {
+      allKeyValue {
+        edges {
+          node {
+            key
+            value
+          }
+        }
+      }
+    }  
+  `);
+
+  const list = edges.filter((item) =>
+    item.node.key.includes(componentName.toLowerCase())
+  )
+  const result = JSON.parse(list[0].node.value);
+  return result;
+}

package/docs/src/util/constants.js

@@ -0,0 +1,7 @@
+export const MOBILE = 'mobile';
+export const buttonVariants = [
+  'basic-button',
+  'alert-button',
+  'split-button',
+];
+export const avatarVariants = ['default-avatar', 'size'];

package/docs/src/util/context/NavContext.js

@@ -0,0 +1,54 @@
+import React, { useReducer, useState } from 'react';
+
+const NavContext = React.createContext({
+  leftNavIsOpen: false,
+  searchIsOpen: false,
+  switcherIsOpen: false,
+  isManagingFocus: false,
+  leftNavScrollOffset: 0,
+});
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'open':
+      return { ...state, [action.nav]: true };
+    case 'close':
+      return { ...state, [action.nav]: false };
+    default:
+      return { ...state, [action.nav]: !state[action.nav] };
+  }
+};
+export const NavContextProvider = ({ children }) => {
+  const [
+    { leftNavIsOpen, searchIsOpen, switcherIsOpen, leftNavScrollOffset },
+    dispatch,
+  ] = useReducer(reducer, {
+    leftNavIsOpen: false,
+    searchIsOpen: false,
+    switcherIsOpen: false,
+  });
+
+  const [leftNavScrollTop, setLeftNavScrollTop] = useState(0);
+
+  const toggleNavState = (nav, type) => {
+    dispatch({ nav, type });
+  };
+
+  const [isManagingFocus, setIsManagingFocus] = useState(false);
+
+  const value = {
+    leftNavIsOpen,
+    searchIsOpen,
+    switcherIsOpen,
+    toggleNavState,
+    isManagingFocus,
+    setIsManagingFocus,
+    leftNavScrollOffset,
+    leftNavScrollTop,
+    setLeftNavScrollTop,
+  };
+
+  return <NavContext.Provider value={value}>{children}</NavContext.Provider>;
+};
+
+export default NavContext;

package/docs/src/util/hooks/index.js

@@ -0,0 +1 @@
+export { default as useMetadata } from './useMetadata';

package/docs/src/util/hooks/useMetadata.js

@@ -0,0 +1,21 @@
+import { graphql, useStaticQuery } from 'gatsby';
+
+const useMetadata = () => {
+  const data = useStaticQuery(graphql`
+    {
+      site {
+        siteMetadata {
+          title
+          description
+          keywords
+          isSearchEnabled          
+          lang
+        }
+      }
+    }
+  `);
+
+  return data.site.siteMetadata;
+};
+
+export default useMetadata;

package/docs/src/util/index.js

@@ -0,0 +1,4 @@
+export { default as useHomeMenu } from './HomeMenu';
+export { default as useHomeResources } from './HomeResources';
+export { default as MdsChangelog } from './MdsChangelog';
+export { default as MediumBlogs } from './MediumBlogs';

package/docs/static/icons/4691539_codesandbox_icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg width="20px" height="20px" fill="#FFFFFF" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title/><path d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"/></svg>

package/docs/tools/build.sh

@@ -0,0 +1,6 @@
+# !bin/sh
+
+
+./tools/update-mds.sh &&
+
+gatsby build;

package/docs/tools/changelog.sh

@@ -0,0 +1 @@
+cat tools/changeloghead.md node_modules/@innovaccer/design-system/CHANGELOG.md > site/src/pages/introduction/what\'s-new.mdx

package/docs/tools/changeloghead.md

@@ -0,0 +1,14 @@
+---
+title: Release notes
+description: Guide for new changes by the date we completed each change
+date: 15 June 2021
+---
+
+We’re continually improving our Masala Design System. The following changes are listed by the date we completed each change.
+
+<Link href="https://github.com/innovaccer/design-system" target="_blank">
+    Source code
+</Link>
+<br/>
+<br/>
+

package/docs/tools/develop.sh

@@ -0,0 +1,5 @@
+# !bin/sh
+
+./tools/update-mds.sh &&
+
+gatsby develop;

package/docs/tools/extract.js

@@ -0,0 +1,52 @@
+const path = require('path');
+const { writeFile } = require('fs-extra');
+const puppeteerCore = require('puppeteer-core');
+
+const STORYBOOK_HOST = "https://innovaccer.github.io/design-system/iframe.html?id=components-avatar-all--all&args=&viewMode=story"
+
+const read = async (url) => {
+    const browser = await usePuppeteerBrowser();
+    const page = await browser.newPage();
+    await page.goto(url);
+    await page.waitForFunction('window.__STORYBOOK_STORY_STORE__ && window.__STORYBOOK_STORY_STORE__.extract && window.__STORYBOOK_STORY_STORE__.extract()');
+    const data = JSON.parse(await page.evaluate(async () => {
+        const stories = __STORYBOOK_STORY_STORE__.extract();
+        // eslint-disable-next-line no-undef
+        return JSON.stringify(stories, null, 2);
+    }));
+    setImmediate(() => {
+        browser.close();
+    });
+    return data;
+};
+const useLocation = async (input) => {
+    if (input.match(/^http/)) {
+        return [input, async () => { }];
+    }
+};
+const usePuppeteerBrowser = async () => {
+    const args = ['--no-sandbox ', '--disable-setuid-sandbox'];
+    try {
+        return await puppeteerCore.launch({ args });
+    }
+    catch (e) {
+        // it's not installed
+        return new Promise((resolve, reject) => {
+            // eslint-disable-next-line global-require
+            require('child_process').exec(`node ${require.resolve(path.join('puppeteer-core', 'install.js'))}`, (error) => (error ? reject(error) : resolve(puppeteerCore.launch({ args }))));
+        });
+    }
+};
+async function extract(input, targetPath) {
+    if (input && targetPath) {
+        const [location, exit] = await useLocation(input);
+        const data = await read(location);
+        await writeFile(targetPath, JSON.stringify(data, null, 2));
+        await exit();
+    }
+    else {
+        throw new Error('Extract: please specify a path where your built-storybook is (can be a public url) and a target directory');
+    }
+}
+
+extract(STORYBOOK_HOST, path.join(__dirname, '../site/src/data', 'storybook.json'))

package/docs/tools/update-mds.sh

@@ -0,0 +1,3 @@
+# !bin/sh
+
+sed -i.bak 's/boundaryElement: document.body/boundaryElement: {}/' node_modules/@innovaccer/design-system/dist/index.esm.js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovaccer/design-system",
-  "version": "2.7.0",
+  "version": "2.9.0-0",
   "description": "React components library project for Innovaccer Design System",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",

package/tsconfig.json

@@ -22,5 +22,5 @@
       "@/*": ["core/*"]
     }
   },
-  "exclude": ["dist", "build", "node_modules", ".github", ".husky"]
+  "exclude": ["dist", "build", "node_modules", ".github", ".husky", "docs"]
 }

package/tsconfig.type.json

@@ -32,6 +32,7 @@
     "core/**/__tests__",
     "core/**/__stories__",
     ".github",
-    "types"
+    "types",
+    "docs"
   ]
 }