@innovaccer/design-system 2.9.1 → 3.0.0-2

package/src/utils/index.tsx

@@ -0,0 +1,3 @@
+export * as css from './css';
+// export * as validators from './validators';
+// export * as masks from './masks';

package/src/utils/masks.ts

@@ -0,0 +1,170 @@
+// import { Mask } from '@/utils/types';
+// import { DatePickerProps, InputMaskProps } from '@/index.type';
+
+// type DateFormat = DatePickerProps['inputFormat'];
+// export const date: Record<DateFormat, Mask> = {
+//   'dd/mm/yyyy': [/[0123]/, /\d/, '/', /\[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
+//   'mm/dd/yyyy': [/[01]/, /\d/, '/', /[0123]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
+//   'yyyy/mm/dd': [/\d/, /\d/, /\d/, /\d/, '/', /[01]/, /\d/, '/', /[0123]/, /\d/],
+//   'dd-mm-yyyy': [/[0123]/, /\d/, '-', /[01]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+//   'mm-dd-yyyy': [/[01]/, /\d/, '-', /[0123]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+//   'yyyy-mm-dd': [/\d/, /\d/, /\d/, /\d/, '-', /[01]/, /\d/, '-', /[0123]/, /\d/],
+// };
+
+// export const rangeDate: Record<DateFormat, Mask> = {
+//   'dd/mm/yyyy': [
+//     /[0123]/,
+//     /\d/,
+//     '/',
+//     /\[01]/,
+//     /\d/,
+//     '/',
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     ' ',
+//     '-',
+//     ' ',
+//     /[0123]/,
+//     /\d/,
+//     '/',
+//     /\[01]/,
+//     /\d/,
+//     '/',
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//   ],
+//   'mm/dd/yyyy': [
+//     /[01]/,
+//     /\d/,
+//     '/',
+//     /[0123]/,
+//     /\d/,
+//     '/',
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     ' ',
+//     '-',
+//     ' ',
+//     /[01]/,
+//     /\d/,
+//     '/',
+//     /[0123]/,
+//     /\d/,
+//     '/',
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//   ],
+//   'yyyy/mm/dd': [
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     '/',
+//     /[01]/,
+//     /\d/,
+//     '/',
+//     /[0123]/,
+//     /\d/,
+//     ' ',
+//     '-',
+//     ' ',
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     '/',
+//     /[01]/,
+//     /\d/,
+//     '/',
+//     /[0123]/,
+//     /\d/,
+//   ],
+//   'dd-mm-yyyy': [
+//     /[0123]/,
+//     /\d/,
+//     '-',
+//     /[01]/,
+//     /\d/,
+//     '-',
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     ' ',
+//     '-',
+//     ' ',
+//     /[0123]/,
+//     /\d/,
+//     '-',
+//     /[01]/,
+//     /\d/,
+//     '-',
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//   ],
+//   'mm-dd-yyyy': [
+//     /[01]/,
+//     /\d/,
+//     '-',
+//     /[0123]/,
+//     /\d/,
+//     '-',
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     ' ',
+//     '-',
+//     ' ',
+//     /[01]/,
+//     /\d/,
+//     '-',
+//     /[0123]/,
+//     /\d/,
+//     '-',
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//   ],
+//   'yyyy-mm-dd': [
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     '-',
+//     /[01]/,
+//     /\d/,
+//     '-',
+//     /[0123]/,
+//     /\d/,
+//     ' ',
+//     '-',
+//     ' ',
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     /\d/,
+//     '-',
+//     /[01]/,
+//     /\d/,
+//     '-',
+//     /[0123]/,
+//     /\d/,
+//   ],
+// };
+
+// export const time: { [key: string]: InputMaskProps['mask'] } = {
+//   ['hh:mm']: [/[0-1-2]/, /\d/, ':', /[0-5]/, /\d/],
+//   ['hh:mm AM']: [/[0-1]/, /\d/, ':', /[0-5]/, /\d/, ' ', /[APap]/, 'M'],
+// };

package/src/utils/navigationHelper.tsx

@@ -0,0 +1,53 @@
+export type Menu = {
+  name: string;
+  label: string;
+  link?: string;
+  icon?: string;
+  group?: string;
+  count?: number;
+  disabled?: boolean;
+  subMenu?: Menu[];
+};
+
+export type ActiveMenu = ({ name: string } | { link: string }) & Partial<Menu>;
+
+export const getTextAppearance = (isActive: boolean, disabled?: boolean) => {
+  return disabled ? 'disabled' : isActive ? 'link' : 'default';
+};
+
+export const getIconAppearance = (isActive: boolean, disabled?: boolean) => {
+  return disabled ? 'disabled' : isActive ? 'info' : 'default';
+};
+
+export const getPillsAppearance = (isActive: boolean) => {
+  return isActive ? 'primary' : 'secondary';
+};
+
+export const getMenu = (menus: Menu[], active: ActiveMenu): Menu | null => {
+  for (const menu of menus) {
+    if ((active.name && menu.name === active.name) || (active.link && menu.link === active.link)) {
+      return menu;
+    }
+    if (menu.subMenu) {
+      const activeMenu = menu.subMenu.find(
+        (submenu) => (active.name && submenu.name === active.name) || (active.link && submenu.link === active.link)
+      );
+      if (activeMenu) return activeMenu;
+    }
+  }
+  return null;
+};
+
+export const isMenuActive = (menus: Menu[], menu: Menu, active?: ActiveMenu): boolean => {
+  if (active) {
+    const currActiveMenu = getMenu(menus, active);
+    return (
+      !!currActiveMenu &&
+      (currActiveMenu === menu ||
+        currActiveMenu.name.split('.')[0] === menu.name ||
+        currActiveMenu.name === menu.name ||
+        (!!currActiveMenu.link && currActiveMenu.link === menu.link))
+    );
+  }
+  return false;
+};

package/src/utils/overlayHelper.ts

@@ -0,0 +1,48 @@
+export const getWrapperElement = (): Element => {
+  let element = document.querySelector('.Overlay-wrapper');
+  if (element === null) {
+    element = document.createElement('div');
+    element.classList.add('Overlay-wrapper');
+    document.body.appendChild(element);
+  }
+  return element;
+};
+
+interface elementData {
+  element: Element;
+  containerClassName: string;
+  elementRef: React.RefObject<HTMLDivElement>;
+}
+
+export const getUpdatedZIndex = (ele: elementData): number | undefined => {
+  const { containerClassName, elementRef, element } = ele;
+
+  if (element === null) return;
+
+  const elements = element.querySelectorAll(containerClassName);
+  if (elements.length < 1) return;
+
+  const siblings = Array.from(elements).filter((el) => el !== elementRef.current);
+  let zIndex = -1;
+
+  siblings.forEach((element) => {
+    const prevZIndex = parseInt(window.getComputedStyle(element).zIndex || '0', 10);
+    zIndex = Math.max(zIndex, prevZIndex + 10);
+  });
+
+  return zIndex > 0 ? zIndex : undefined;
+};
+
+// keyboard event, boolean?, (event: Event) => void
+export const closeOnEscapeKeypress = (
+  event: KeyboardEvent,
+  isTopOverlay: boolean | undefined,
+  onClose: (event: Event) => void
+) => {
+  if (event.key === 'Escape' && isTopOverlay) {
+    onClose(event);
+
+    // prevent browser-specific escape key behavior (Safari exits fullscreen)
+    event.preventDefault();
+  }
+};

package/src/utils/storybookEventEmitter.ts

@@ -0,0 +1,5 @@
+import addons from '@storybook/addons';
+
+const emitter = (type: any, options: any) => addons.getChannel().emit(type, options);
+
+export const updateKnob = (name: any, value: any) => emitter('storybookjs/knobs/change', { name, value });

package/src/utils/testHelper.ts

@@ -0,0 +1,153 @@
+import * as React from 'react';
+
+interface IValueHelper {
+  required?: boolean;
+  iterate?: boolean;
+  maxLen?: number;
+}
+
+const isMapper = (value: any) => typeof value === 'object' && !Array.isArray(value) && !React.isValidElement(value);
+
+const filterRequired = (props: Record<string, any>) =>
+  Object.keys(props).reduce(
+    (out, curr) => {
+      if (props[curr].required) out.required[curr] = props[curr];
+      else {
+        out.optional[curr] = props[curr];
+      }
+      return out;
+    },
+    { required: {}, optional: {} } as Record<string, any>
+  );
+
+const iterateComb = (
+  requiredComb: Record<string, any>[],
+  optionalComb: Record<string, any>[],
+  testFunc?: (props: Record<string, any>) => void
+): Record<string, any>[] => {
+  const combinations: Record<string, any>[] = [];
+
+  requiredComb.forEach((reqProps) => {
+    optionalComb.forEach((optProps) => {
+      const allProps = { ...reqProps, ...optProps };
+      if (testFunc) testFunc(allProps);
+      else combinations.push(allProps);
+    });
+  });
+
+  return combinations;
+};
+
+const getCombinations = (Props: Record<string, any>): Record<string, any>[] => {
+  const combinations: Record<string, any>[] = [];
+  const propNames = Object.keys(Props);
+
+  const iterateProps = (curr: Record<string, any> = {}, propIndex = 0): void => {
+    const iterateValues = (propValues: any[]) => {
+      for (const propValue of propValues) {
+        if (isMapper(propValue)) {
+          const propComb = iterateMapper(propValue);
+          for (const propVal of propComb as Record<string, any>[]) {
+            currProps[propName] = propVal;
+            iterateProps(currProps, propIndex + 1);
+          }
+        } else {
+          currProps[propName] = propValue;
+          iterateProps(currProps, propIndex + 1);
+        }
+      }
+    };
+
+    const currProps = { ...curr };
+
+    if (propIndex === propNames.length) {
+      combinations.push(currProps);
+      return;
+    }
+
+    const propName = propNames[propIndex];
+    const propValue = Props[propName].value;
+    if (Props[propName].iterate) {
+      iterateValues(propValue);
+    } else {
+      currProps[propName] = propValue;
+      iterateProps(currProps, propIndex + 1);
+    }
+  };
+
+  if (propNames.length) iterateProps(Props);
+  return combinations.length ? combinations : [{}];
+};
+
+const iterateMapper = (
+  Mapper: Record<string, any>,
+  testFunc?: (props: Record<string, any>) => void
+): Record<string, any>[] | void => {
+  Mapper = filterRequired(Mapper);
+  const requiredComb = getCombinations(Mapper.required);
+  const optionalComb = getCombinations(Mapper.optional);
+  if (!testFunc) {
+    const allComb = iterateComb(requiredComb, optionalComb);
+    return allComb;
+  } else {
+    iterateComb(requiredComb, optionalComb, testFunc);
+  }
+};
+
+export const testHelper = (Mapper: Record<string, any>, testFunc: (props: Record<string, any>) => void): void => {
+  iterateMapper(Mapper, testFunc);
+};
+
+export const filterUndefined = (props: Record<string, any>) =>
+  Object.keys(props)
+    .filter((prop) => props[prop] !== undefined)
+    .reduce((out: Record<string, any>, curr) => {
+      out[curr] = props[curr];
+      return out;
+    }, {});
+
+export const valueHelper = (props: any, options: IValueHelper = {}): Record<string, any> => {
+  const { required, iterate } = options;
+  if (!required) props = [undefined, ...props];
+  return { required, iterate, value: props };
+};
+
+export const arrayHelper = (props: any[], options: IValueHelper = {}) => {
+  const { maxLen = props.length } = options;
+
+  const generateComb = () => {
+    const combinations: any[] = [];
+    const iterate = (i: number, curr: any[] = []) => {
+      if (isMapper(props[i])) {
+        const propValues = iterateMapper(props[i]) as Record<string, any>[];
+        propValues.forEach((propValue) => {
+          const newCurr = [...curr, propValue];
+          combinations.push(newCurr);
+          if (i < maxLen - 1) iterate(i + 1, newCurr);
+        });
+      } else {
+        const newCurr = [...curr, props[i]];
+        combinations.push(newCurr);
+        if (i < maxLen - 1) iterate(i + 1, newCurr);
+      }
+    };
+    for (let i = 0; i < props.length; i++) {
+      iterate(i);
+    }
+    return combinations;
+  };
+
+  return valueHelper(generateComb(), { iterate: true });
+};
+
+export const testMessageHelper = (attr: Record<string, any>) => `
+  ${Object.keys(attr)
+    .map((k) => `${k}: ${JSON.stringify(attr[k], JSONStringifyHelper)}`)
+    .join(', ')}
+`;
+
+export const JSONStringifyHelper = (_key: string, value: any) => {
+  if (typeof value === 'function') return '[Function]';
+  if (React.isValidElement(value)) return '[ReactNode]';
+  return value;
+};

package/src/utils/types.tsx

@@ -0,0 +1,54 @@
+export type SingleOrArray<T> = T | T[];
+
+export type MakeRequired<T> = Exclude<T, null | undefined>;
+
+export type MakeOptional<T extends object, K extends keyof any> = Omit<T, K> & {
+  [OK in keyof T & K]?: T[OK];
+};
+
+type ValidatorFn<K extends any[] = any[]> = (...values: K) => boolean;
+export type Validators = SingleOrArray<ValidatorFn>;
+
+export type Mask = (string | RegExp)[];
+
+// export type DefaultProps<T> = T extends { defaultProps: any }
+//   ? T['defaultProps']
+//   : {};
+// export type Props<T, U> = Omit<T, keyof U> & {
+//   [P in keyof T & keyof U]?: T[P];
+// };
+
+export type BaseProps = {
+  /**
+   * Adds custom class
+   */
+  className?: string;
+  /**
+   * Stores custom testing data private to the component.
+   */
+  'data-test'?: string;
+};
+
+export type BaseHtmlProps<T> = Omit<React.HTMLProps<T>, 'ref' | 'size' | 'className'>;
+export type OmitNativeProps<T, K extends keyof any> = Omit<BaseHtmlProps<T>, K>;
+
+export const extractBaseProps = (props: Record<string, any>) => {
+  const baseProps = ['className', 'data-test'];
+  const basePropsObj = baseProps.reduce((acc, curr) => {
+    return props[curr] ? { ...acc, [curr]: props[curr] } : { ...acc };
+  }, {});
+
+  return basePropsObj;
+};
+
+export const filterProps = (
+  props: Record<string, any>,
+  propsList: ReadonlyArray<string>,
+  include?: boolean
+): Record<string, any> =>
+  Object.entries(props)
+    .filter((obj) => (include ? propsList.includes(obj[0]) : !propsList.includes(obj[0])))
+    .reduce((acc: Record<string, any>, curr) => {
+      acc[curr[0]] = curr[1];
+      return acc;
+    }, {});

package/src/utils/uidGenerator.tsx

@@ -0,0 +1,12 @@
+export const uidGenerator = () => {
+  let dt = new Date().getTime();
+  const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (dt + Math.random() * 16) % 16 | 0;
+    dt = Math.floor(dt / 16);
+    const s = (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
+    return s;
+  });
+  return uuid;
+};
+
+export default uidGenerator;

package/src/utils/validators.ts

@@ -0,0 +1,94 @@
+// import { Validators } from '@/utils/types';
+// import { getTimeObjFromStr, isFormat12hour } from '@/components/organisms/timePicker/utils';
+
+// export const isValid = (validators: Validators, ...value: any[]) => {
+//   const iterator = Array.isArray(validators) ? validators : [validators];
+
+//   return iterator.every((validator) => validator(...value));
+// };
+
+// export const date = (val: string, format: string): boolean => {
+//   const validate = (date: number, month: number, year: number): boolean => {
+//     const monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+//     // Adjust for leap years
+//     if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)) monthLength[1] = 29;
+
+//     // Check the range of the day
+//     return month <= 12 && date <= monthLength[month - 1];
+//   };
+
+//   switch (format) {
+//     case 'dd/mm/yyyy': {
+//       const p = val.split('/');
+//       const date = +p[0] || 1;
+//       const month = +p[1] || 1;
+//       const year = +p[2] || 1900;
+//       return validate(date, month, year);
+//     }
+//     case 'mm/dd/yyyy': {
+//       const p = val.split('/');
+//       const date = +p[1] || 1;
+//       const month = +p[0] || 1;
+//       const year = +p[2] || 1900;
+//       return validate(date, month, year);
+//     }
+
+//     case 'yyyy/mm/dd': {
+//       const p = val.split('/');
+//       const date = +p[2] || 1;
+//       const month = +p[1] || 1;
+//       const year = +p[0] || 1900;
+//       return validate(date, month, year);
+//     }
+//     case 'dd-mm-yyyy': {
+//       const p = val.split('-');
+//       const date = +p[0] || 1;
+//       const month = +p[1] || 1;
+//       const year = +p[2] || 1900;
+//       return validate(date, month, year);
+//     }
+
+//     case 'mm-dd-yyyy': {
+//       const p = val.split('-');
+//       const date = +p[1] || 1;
+//       const month = +p[0] || 1;
+//       const year = +p[2] || 1900;
+//       return validate(date, month, year);
+//     }
+
+//     case 'yyyy-mm-dd': {
+//       const p = val.split('-');
+//       const date = +p[2] || 1;
+//       const month = +p[1] || 1;
+//       const year = +p[0] || 1900;
+//       return validate(date, month, year);
+//     }
+//     default:
+//       return false;
+//   }
+// };
+
+// export const time = (val: string, format: string): boolean => {
+//   const { hours, minutes } = getTimeObjFromStr(format, val);
+//   const hoursCond = isFormat12hour(format) ? hours <= 12 : hours < 24;
+
+//   return hoursCond && minutes <= 60;
+// };
+
+export const checkIfImageExists = (url: string, callback: (arg0: boolean) => void) => {
+  const img = new Image();
+  img.src = url;
+
+  if (img.complete) {
+    callback(true);
+  } else {
+    img.onload = () => {
+      callback(true);
+    };
+
+    img.onerror = () => {
+      callback(false);
+    };
+  }
+};

package/tsconfig.json

@@ -19,8 +19,8 @@
     "lib": ["es6", "es7", "es2017", "dom"],
     "baseUrl": "./",
     "paths": {
-      "@/*": ["core/*"]
+      "@/*": ["src/*"]
     }
   },
-  "exclude": ["dist", "build", "node_modules", ".github", ".husky", "docs"]
+  "exclude": ["dist", "build", "node_modules", ".github", ".husky", "core"]
 }

package/tsconfig.type.json

@@ -17,7 +17,7 @@
     "baseUrl": "./",
     "paths": {
       "@/*": [
-        "core/*"
+        "src/*"
       ]
     },
     "plugins": [
@@ -26,13 +26,13 @@
     ]
   },
   "exclude": [
+    "core",
     "dist",
     "build",
     "node_modules",
-    "core/**/__tests__",
-    "core/**/__stories__",
+    "src/**/__tests__",
+    "src/**/__stories__",
     ".github",
-    "types",
-    "docs"
+    "types"
   ]
 }

package/.github/workflows/docs_pull_request.yml

@@ -1,20 +0,0 @@
-name: Pull request
-
-on: pull_request
-
-jobs:
-  lint_test_build:
-    name: lint, test and build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v1
-
-      - uses: actions/setup-node@v1
-        with:
-          node-version: '14.x'
-
-      - name: yarn install
-        run: cd docs && yarn install
-
-      - name: build
-        run: cd docs && yarn build