@innovaccer/design-system 2.9.1 → 3.0.0-2

package/dts.config.js

@@ -1,22 +1,22 @@
 const config = {
-	compilationOptions: {
-	preferredConfigPath: './tsconfig.json',
-	},
-	entries: [
-		{
-			filePath: 'core/index.type.tsx',
-			outFile: 'types/index.d.ts',
-			libraries: {
-                /**
-                 * Array of package names from node_modules to import typings from.
-                 * Used types will be imported using `import { First, Second } from 'library-name';`.
-                 * By default all libraries will be imported (except inlined libraries and libraries from @types).
-                 * Optional. Default value is `undefined`.
-                 */
-			importedLibraries: ['react'],
-            },
-		},
-	],
+  compilationOptions: {
+    preferredConfigPath: './tsconfig.json',
+  },
+  entries: [
+    {
+      filePath: 'src/index.type.tsx',
+      outFile: 'types/index.d.ts',
+      libraries: {
+        /**
+         * Array of package names from node_modules to import typings from.
+         * Used types will be imported using `import { First, Second } from 'library-name';`.
+         * By default all libraries will be imported (except inlined libraries and libraries from @types).
+         * Optional. Default value is `undefined`.
+         */
+        importedLibraries: ['react'],
+      },
+    },
+  ],
 };
 
 module.exports = config;

package/jest.config.js

@@ -2,37 +2,38 @@ const esModules = ['@agm', 'ngx-bootstrap', 'lodash-es'].join('|');
 
 const config = {
   transform: {
-    '^.+\\.(ts|tsx)$': 'ts-jest'
+    '^.+\\.(ts|tsx)$': 'ts-jest',
   },
   testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  modulePaths: ['core'],
+  modulePaths: ['src'],
   setupFilesAfterEnv: ['./scripts/setupTest.ts'],
   globalSetup: './scripts/setupGlobalJest.ts',
   transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
+  modulePathIgnorePatterns: ['/core'],
   // snapshotSerializers: ['enzyme-to-json/serializer'],
   testEnvironment: 'jest-environment-jsdom-fifteen',
   collectCoverage: true,
   coverageReporters: ['json', 'lcov', 'text', 'text-summary', 'html'],
   verbose: true,
   collectCoverageFrom: [
-    'core/**/*.{ts,tsx}',
-    '!core/components/css-utilities/**',
-    '!core/utils/**',
+    'src/**/*.{ts,tsx}',
+    '!src/components/css-utilities/**',
+    '!src/utils/**',
     '!**/dist/**/*',
     '!**/__stories__/**/*',
     '!**/*.story.tsx',
   ],
   globals: {
     window: true,
-    timers: "fake",
+    timers: 'fake',
     'ts-jest': {
-      diagnostics: false
-    }
+      diagnostics: false,
+    },
   },
   moduleNameMapper: {
-    '@/(.*)$': '<rootDir>/core/$1'
-  }
+    '@/(.*)$': '<rootDir>/src/$1',
+  },
 };
 
 module.exports = config;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@innovaccer/design-system",
-  "version": "2.9.1",
+  "version": "3.0.0-2",
   "description": "React components library project for Innovaccer Design System",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
-  "types": "dist/core/index.type.d.ts",
+  "types": "dist/src/index.type.d.ts",
   "directories": {
     "css": "css"
   },
@@ -19,7 +19,7 @@
     "deploy-storybook": "storybook-to-ghpages",
     "setup-css-dev": "./scripts/setup-local-css.sh",
     "pre-commit": "lint-staged",
-    "lint:check": "eslint ./core --ext .tsx,.ts",
+    "lint:check": "eslint ./src --ext .tsx,.ts",
     "lint": "npm run lint:check -- --fix",
     "prettier:check": "prettier --config ./.prettierrc --check",
     "prettier": "prettier --config ./.prettierrc --write 'css/src/**/*.css'",
@@ -43,6 +43,7 @@
     "@babel/preset-typescript": "^7.8.3",
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
+    "@innovaccer/design-system": "^2.8.0-0",
     "@rollup/plugin-alias": "^3.0.1",
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-json": "^4.0.2",
@@ -74,6 +75,7 @@
     "autoprefixer": "^9.7.3",
     "babel-loader": "^8.0.6",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "bl": ">=1.2.3",
     "brotli": "^1.3.2",
     "chromatic": "^5.9.0",
     "commitlint": "^12.1.4",
@@ -91,11 +93,13 @@
     "gulp-postcss": "^8.0.0",
     "gulp-sourcemaps": "^2.6.5",
     "husky": "^7.0.1",
+    "immer": ">=9.0.6",
     "install": "^0.13.0",
     "jest": "^24.9.0",
     "jest-environment-jsdom-fifteen": "^1.0.2",
     "lint-staged": "^10.5.4",
     "lz-string": "^1.4.4",
+    "node-notifier": ">=8.0.1",
     "npm": "^6.14.7",
     "postcss-color-mod-function": "^3.0.3",
     "prettier": "^2.3.2",
@@ -108,6 +112,7 @@
     "rollup-plugin-gzip": "^2.5.0",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-uglify": "^6.0.4",
+    "trim": ">=0.0.3",
     "ts-jest": "^24.3.0",
     "ts-loader": "^6.2.1",
     "tslint": "^6.0.0-beta0",
@@ -115,13 +120,9 @@
     "tslint-config-prettier": "^1.18.0",
     "tslint-react": "^4.1.0",
     "ttypescript": "^1.5.10",
-    "typescript": "^3.7.4",
+    "typescript": "^4.5.5",
     "typescript-eslint-parser": "^22.0.0",
-    "typescript-transform-paths": "^1.1.14",
-    "immer": ">=9.0.6",
-    "trim": ">=0.0.3",
-    "node-notifier": ">=8.0.1",
-    "bl": ">=1.2.3"
+    "typescript-transform-paths": "^1.1.14"
   },
   "dependencies": {
     "classnames": "^2.3.1",

package/rollup.config.js

@@ -50,7 +50,7 @@ function globals() {
 }
 
 const baseConfig = {
-  input: './core/index.tsx',
+  input: './src/index.tsx',
   // Specify here external modules which you don't want to include in your bundle (for instance: 'lodash', 'moment' etc.)
   // https://rollupjs.org/guide/en#external-e-external
   external: ['react', 'react-dom'],
@@ -59,7 +59,7 @@ const baseConfig = {
 const commonJsPlugins =  [
     alias({
       entries: [
-        { find: '@', replacement: path.resolve('./core') },
+        { find: '@', replacement: path.resolve('./src') },
       ]
     }),
     
@@ -70,7 +70,7 @@ const commonJsPlugins =  [
     commonjs(),
 
     // Compile TypeScript/JavaScript files
-    babel({ extensions, include: ['core/**/*'] }),
+    babel({ extensions, include: ['src/**/*'] }),
 
     json(),
 
@@ -83,7 +83,7 @@ const commonJsPlugins =  [
 const jsUmdOutputConfig = {
     file: 'dist/index.umd.js',
     format: 'umd',
-    name: `InnovaccerDesignSystem`,
+    name: `InnovaccerDesignSystemNext`,
     globals: globals(),
     banner: banner()
 }
@@ -102,7 +102,7 @@ const jsEsmConfig = {
   output: {
     file: 'dist/index.esm.js',
     format: 'esm',
-    name: `InnovaccerDesignSystem`,
+    name: `InnovaccerDesignSystemNext`,
     globals: globals(),
     banner: banner()
   }
@@ -114,7 +114,7 @@ const tsConfig = {
   plugins: [
     alias({
       entries: [
-        { find: '@', replacement: path.resolve('./core') },
+        { find: '@', replacement: path.resolve('./src') },
       ]
     }),
 
@@ -132,7 +132,7 @@ const tsConfig = {
     commonjs(),
 
     // Compile TypeScript/JavaScript files
-    babel({ extensions, include: ['core/**/*'] }),
+    babel({ extensions, include: ['src/**/*'] }),
   ],
   output: {
     dir: 'dist',

package/scripts/setupTest.ts

@@ -1,24 +1,21 @@
 import '@testing-library/jest-dom';
-const ReactTestingLibrary = require('@testing-library/react');
-
-// Configure React Testing Library
-const { configure } = ReactTestingLibrary;
+import { configure } from '@testing-library/react';
 
 configure({ testIdAttribute: 'data-test' });
 
-jest.mock('@/utils/uidGenerator', () => () => ('Test-uid'));
+// jest.mock('@/utils/uidGenerator', () => () => 'Test-uid');
 
 document.createRange = () => ({
   setStart: () => {},
   setEnd: () => {},
   createContextualFragment: (str) => {
-    var temp = document.createElement('template');
+    const temp = document.createElement('template');
     temp.innerHTML = str;
     return temp.content;
   },
   // @ts-ignore
   commonAncestorContainer: {
-    nodeName: "BODY",
+    nodeName: 'BODY',
     ownerDocument: document,
   },
 });

package/scripts/version.sh

@@ -1,9 +1,9 @@
-LOG=$(git log $(git describe --tags --abbrev=0 @^)..@ --pretty=format:"%h %s" --no-merges | sed -e 's/^/* /')
-PACKAGE_VERSION=$(node -p -e "require('./package.json').version")
-DATE=$(date +%F)
+# LOG=$(git log $(git describe --tags --abbrev=0 @^)..@ --pretty=format:"%h %s" --no-merges | sed -e 's/^/* /')
+# PACKAGE_VERSION=$(node -p -e "require('./package.json').version")
+# DATE=$(date +%F)
 
 # Append changelog
-echo "\n-------------------\n **v$PACKAGE_VERSION**  ($DATE) \n\n$LOG";
+# echo "\n-------------------\n **v$PACKAGE_VERSION**  ($DATE) \n\n$LOG";
 
 # build
 npm run build && 

package/src/accessibility/utils/index.ts

@@ -0,0 +1,5 @@
+import isEnterKey from './isEnterKey';
+import isSpaceKey from './isSpaceKey';
+import useAccessibilityProps from './useAccessibilityProps';
+
+export { isEnterKey, useAccessibilityProps, isSpaceKey };

package/src/accessibility/utils/isEnterKey.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const isEnterKey = (e: React.KeyboardEvent) => e.key === 'Enter';
+
+export default isEnterKey;

package/src/accessibility/utils/isSpaceKey.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const isSpaceKey = (e: React.KeyboardEvent) => e.key === 'Space';
+
+export default isSpaceKey;

package/src/accessibility/utils/useAccessibilityProps.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+type AriaRoleType = React.AriaRole;
+type KeyboardEventKeyType = KeyboardEvent['key'];
+
+interface IProps {
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
+  role?: AriaRoleType;
+  'aria-label'?: React.AriaAttributes['aria-label'];
+}
+
+const allowed: Record<string, Set<KeyboardEventKeyType>> = {
+  button: new Set(['Enter', 'Space', 'Spacebar', ' ']),
+  link: new Set(['Enter']),
+  // onChange handles everything, no need for extra keyboard interaction
+  checkbox: new Set([]),
+  radio: new Set([]),
+};
+
+// Refer for keyboard interactions: https://webaim.org/techniques/keyboard/#testing
+const isKeyboardInteractionAllowed = (role: AriaRoleType, key: KeyboardEventKeyType) => {
+  if (!allowed[role]) {
+    return false;
+  }
+
+  const allowedKeys = allowed[role];
+  return allowedKeys.has(key);
+};
+
+const useAccessibilityProps = ({ onClick, onKeyDown, role = 'button', ...rest }: IProps) => {
+  return {
+    ...(onClick
+      ? {
+          onClick: onClick,
+          role: role,
+          tabIndex: 0,
+          'aria-label': rest['aria-label'],
+          onKeyDown: (e: React.SyntheticEvent<HTMLElement>) => {
+            if (onKeyDown) {
+              onKeyDown(e as React.KeyboardEvent<HTMLElement>);
+              return;
+            }
+            const key = (e as React.KeyboardEvent<HTMLElement>).key;
+            if (isKeyboardInteractionAllowed(role, key)) {
+              if (onClick) {
+                e.preventDefault();
+                onClick(e as React.MouseEvent<HTMLElement>);
+              }
+            }
+          },
+        }
+      : { role, 'aria-label': rest['aria-label'] }),
+  };
+};
+
+export default useAccessibilityProps;

package/src/common.type.tsx

@@ -0,0 +1,22 @@
+// import { OverlayFooterProps } from '@/components/overlayFooter';
+
+export type AccentAppearance =
+  | 'primary'
+  | 'secondary'
+  | 'alert'
+  | 'warning'
+  | 'success'
+  | 'accent1'
+  | 'accent2'
+  | 'accent3'
+  | 'accent4';
+
+export type HeadingAppearance = 'default' | 'subtle' | 'disabled' | 'white';
+export type MessageAppearance = 'default' | 'alert' | 'info' | 'success' | 'warning';
+export type FileStatus = 'uploading' | 'completed' | 'error';
+// export type FooterOptions = {
+//   actions: OverlayFooterProps['actions'];
+// };
+export type AutoComplete = 'on' | 'off';
+export type NumberRange = [number, number];
+export type ChangeEvent = React.ChangeEvent<HTMLInputElement>;

package/src/components/_text/__tests__/Text.test.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import Text from '../index';
+
+describe('Text component', () => {
+  it('should match the snapshot', () => {
+    const { baseElement } = render(<Text componentType="span">{'Generic text component'}</Text>);
+    expect(baseElement).toMatchSnapshot();
+  });
+});

package/src/components/_text/__tests__/__snapshots__/Text.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Text component should match the snapshot 1`] = `
+<body>
+  <div>
+    <span>
+      Generic text component
+    </span>
+  </div>
+</body>
+`;

package/src/components/_text/index.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+interface Props {
+  children: React.ReactNode;
+  componentType: string;
+  className?: string;
+}
+
+const GenericText = ({ children, componentType = 'span', className, ...props }: Props) => {
+  return React.createElement(componentType, { ...props, className }, children);
+};
+
+export default GenericText;

package/src/components/avatar/Avatar.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Text, Icon } from '@/index';
+import { BaseProps, extractBaseProps } from '@/utils/types';
+import { AccentAppearance } from '@/common.type';
+import { checkIfImageExists } from '@/utils/validators';
+
+export type AvatarSize = 'regular' | 'tiny';
+export interface AvatarProps extends BaseProps {
+  /**
+   * Color of the `Avatar`
+   */
+  appearance?: AccentAppearance;
+  /**
+   * Text to show in `Avatar`
+   */
+  text?: string;
+  /**
+   * Icon to show in `Avatar`
+   */
+  icon?: string;
+
+  image?: {
+    /**
+     * Image url to show in `Avatar`
+     */
+    src: string;
+    /**
+     * Image alt text to show in `Avatar`
+     */
+    altText: string;
+  };
+  /**
+   * Tooltip text to show in `Avatar`
+   */
+  tooltip?: string;
+  /**
+   * To set size of the `Avatar`
+   */
+  size: AvatarSize;
+}
+
+export const Avatar = (props: AvatarProps) => {
+  const { size, className, appearance, icon, text, tooltip, image, ...rest } = props;
+
+  // To check if the image src loads a valid image
+  const [isValidImage, setValidImage] = React.useState<boolean>(false);
+  React.useEffect(() => checkIfImageExists(image?.src ? image.src : '', setValidImage), [image]);
+
+  const baseProps = extractBaseProps(props);
+
+  const defaultAppearance = 'secondary';
+
+  const colors = ['accent4', 'primary', 'accent3', 'alert', 'accent2', 'warning', 'accent1', 'success'];
+
+  const avatarAppearance =
+    appearance || (text && colors[(text.charCodeAt(0) + (text.charCodeAt(1) || 0)) % 8]) || defaultAppearance;
+
+  const classes = classNames(
+    {
+      Avatar: true,
+      [`Avatar--${size}`]: size,
+      [`Avatar--${avatarAppearance}`]: avatarAppearance,
+      ['Avatar--disabled']: !text || !image?.src || !icon,
+      ['overflow-hidden']: !text,
+    },
+    className
+  );
+
+  const contentClass = classNames({
+    [`Avatar-content--${size}`]: size,
+    [`Avatar-content--${avatarAppearance}`]: avatarAppearance,
+  });
+
+  const iconClass = classNames({
+    [`Avatar-content--${avatarAppearance}`]: avatarAppearance,
+  });
+
+  const imageDimensions = {
+    width: `${size === 'regular' ? 32 : 24}px`,
+    height: `${size === 'regular' ? 32 : 24}px`,
+  };
+
+  return (
+    <span title={tooltip} data-test="DesignSystem-Avatar" {...baseProps} {...rest} className={classes}>
+      {text && (
+        <Text weight="medium" appearance={'white'} className={contentClass}>
+          {text}
+        </Text>
+      )}
+      {icon && (
+        <Icon
+          data-test="DesignSystem-Avatar--Icon"
+          name={icon}
+          size={size === 'regular' ? 16 : 12}
+          appearance={'white'}
+          className={iconClass}
+        />
+      )}
+      {image && isValidImage ? (
+        <img data-test="DesignSystem-Avatar--Image" src={image?.src} alt={image.altText} {...imageDimensions} />
+      ) : (
+        image?.altText.charAt(0)
+      )}
+      {!text && !isValidImage && !image?.altText && !icon && (
+        <Icon
+          data-test="DesignSystem-Avatar--Icon"
+          name="person"
+          size={size === 'regular' ? 16 : 12}
+          appearance={'white'}
+          className={iconClass}
+        />
+      )}
+    </span>
+  );
+};
+
+Avatar.displayName = 'Avatar';
+Avatar.defaultProps = {
+  size: 'regular',
+};
+
+export default Avatar;