Merge pull request #124 from square-li/feature-table

feat: set up table package and add createTableItems method

.eslintrc.js

@@ -44,5 +44,9 @@ module.exports = {
       files: ['./packages/related-table/**/*'],
       extends: './packages/related-table/.eslintrc.js',
     },
+    {
+      files: ['./packages/table/**/*'],
+      extends: './packages/table/.eslintrc.js',
+    },
   ],
 };

packages/table/.eslintrc.js

@@ -0,0 +1,29 @@
+const fs = require('fs');
+const path = require('path');
+
+const tsConfig = fs.existsSync('tsconfig.json')
+  ? path.resolve('tsconfig.json')
+  : path.resolve('./packages/table/tsconfig.json');
+
+module.exports = {
+  ignorePatterns: ['.storybook', 'stories', 'config', 'jest.config.ts', '**/*.js'],
+  plugins: [
+    'eslint-plugin-import',
+    'eslint-plugin-jsx-a11y',
+    'eslint-plugin-prettier',
+    'eslint-plugin-react',
+    'eslint-plugin-react-hooks',
+  ],
+  parserOptions: {
+    project: tsConfig,
+  },
+  rules: {
+    'import/prefer-default-export': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    '@typescript-eslint/comma-dangle': 'off',
+    'no-param-reassign': 'warn',
+    'react/no-array-index-key': 'warn',
+    'no-plusplus': 'warn',
+  },
+  extends: ['airbnb-typescript', 'airbnb/hooks', 'plugin:prettier/recommended'],
+};

packages/table/.gitignore

@@ -0,0 +1,8 @@
+*.log
+.DS_Store
+node_modules
+.cache
+dist
+build
+storybook-static
+coverage

packages/table/global.d.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import 'jest-extended';

packages/table/jest.config.js

@@ -0,0 +1,22 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  setupFilesAfterEnv: ['jest-extended/all'],
+  collectCoverageFrom: ['src/**/*.{ts,tsx}'],
+  testPathIgnorePatterns: ['/dist'],
+  coverageReporters: ['text-summary', 'cobertura', 'html', 'json', 'json-summary'],
+  moduleNameMapper: {
+    '\\.(css|scss|svg)$': 'identity-obj-proxy',
+    'd3-array': '<rootDir>/node_modules/d3-array/dist/d3-array.min.js',
+  },
+
+  coverageThreshold: {
+    global: {
+      statements: 80,
+      branches: 80,
+      functions: 80,
+      lines: 80,
+    },
+  },
+};

packages/table/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@iot-app-kit/table",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "1.3.0",
+  "description": "IoT Application Kit - Table component",
+  "license": "Apache-2.0",
+  "main": "./dist/index.cj.js",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "directories": {
+    "dist": "dist"
+  },
+  "files": [
+    "dist/",
+    "CHANGELOG.md",
+    "*NOTICE"
+  ],
+  "author": {
+    "name": "Amazon Web Services",
+    "url": "https://aws.amazon.com/"
+  },
+  "scripts": {
+    "clean": "rm -rf dist && rm -rf screenshot",
+    "build": "yarn run clean && yarn run build:types && rollup --config rollup.config.js",
+    "build:types": "tsc --outDir dist/types --declaration true --emitDeclarationOnly true",
+    "test": "npm-run-all -p test:jest test:typescript",
+    "test:jest": "TZ=UTC jest --coverage",
+    "test.watch": "TZ=UTC jest --watchAll",
+    "jest": "TZ=UTC jest",
+    "test:typescript": "tsc --noEmit",
+    "copy:license": "cp ../../LICENSE LICENSE",
+    "copy:notice": "cp ../../NOTICE NOTICE",
+    "prepack": "yarn run copy:license && yarn run copy:notice",
+    "pack": "yarn pack"
+  },
+  "devDependencies": {
+    "@aws-sdk/client-iotsitewise": "^3.39.0",
+    "@awsui/design-tokens": "^3.0.0",
+    "@rollup/plugin-typescript": "^8.3.2",
+    "@types/jest": "^28.1.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb-typescript": "^12.3.1",
+    "jest": "^28.1.0",
+    "jest-cli": "^28.1.0",
+    "jest-extended": "^2.0.0",
+    "rollup-plugin-import-css": "^3.0.3",
+    "sass": "^1.30.0",
+    "ts-jest": "^28.0.4"
+  },
+  "dependencies": {
+    "@awsui/collection-hooks": "^1.0.0",
+    "@awsui/components-react": "^3.0.0",
+    "@iot-app-kit/core": "^1.3.0",
+    "@synchro-charts/core": "^4.0.0",
+    "@synchro-charts/react": "^4.0.0",
+    "d3-array": "^3.1.6",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  }
+}

packages/table/rollup.config.js

@@ -0,0 +1,20 @@
+import typescript from '@rollup/plugin-typescript';
+import pkg from './package.json';
+import css from 'rollup-plugin-import-css';
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: pkg.main,
+        format: 'cjs',
+      },
+      {
+        file: pkg.module,
+        format: 'esm',
+      },
+    ],
+    plugins: [typescript({ tsconfig: './tsconfig.json' }), css()],
+  },
+];

packages/table/src/index.ts

@@ -0,0 +1,2 @@
+// export * from './table'; WIP
+export * from './utils';

packages/table/src/utils/createCellItem.spec.ts

@@ -0,0 +1,25 @@
+import { createCellItem } from './createCellItem';
+import { CellItem } from './types';
+
+describe('createCellItem', () => {
+  it('creates CellItem', () => {
+    const props = { value: 10, error: undefined, isLoading: false, threshold: undefined };
+    const item: CellItem = createCellItem(props);
+    expect(item).toMatchObject({ value: 10 });
+    expect(item.valueOf()).toEqual(10);
+  });
+
+  it('creates CellItem that returns error message on error', () => {
+    const props = { value: 10, error: { msg: 'Some error' }, isLoading: false, threshold: undefined };
+    const item: CellItem = createCellItem(props);
+
+    expect(`${item}`).toBe('Some error');
+  });
+
+  it('creates CellItem that returns loading message on loading', () => {
+    const props = { value: 10, isLoading: true, threshold: undefined };
+    const item: CellItem = createCellItem(props);
+
+    expect(`${item}`).toBe('Loading');
+  });
+});

packages/table/src/utils/createCellItem.ts

@@ -0,0 +1,34 @@
+import { Primitive, Threshold } from '@synchro-charts/core';
+import { ErrorDetails } from '@iot-app-kit/core';
+import { CellItem } from './types';
+
+type CellProps = {
+  value?: Primitive;
+  error?: ErrorDetails;
+  isLoading?: boolean;
+  threshold?: Threshold;
+};
+export const createCellItem: (props?: CellProps) => CellItem = ({ value, error, isLoading, threshold } = {}) => {
+  const valueOf = () => {
+    if (error) {
+      return error.msg;
+    }
+    if (isLoading) {
+      return 'Loading';
+    }
+    return value;
+  };
+
+  const toString = () => {
+    return `${valueOf()}`;
+  };
+
+  return {
+    value,
+    error,
+    isLoading,
+    threshold,
+    valueOf,
+    toString,
+  };
+};