reso-ui 1.1.0

package/.github/workflows/cd.yml

@@ -0,0 +1,49 @@
+name: Deploy
+
+on:
+  workflow_run:
+    workflows: ["Build and Test"]
+    branches: ["main", "beta"]
+    types:
+      - completed
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Use Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: npm install
+        run: |
+          npm install
+
+      - name: Build Storybook
+        run: |
+          npm run build-storybook
+
+      - name: Info
+        run: |
+          pwd
+          ls -l
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v2
+        with:
+          aws-access-key-id: ${{ secrets.AWS_S3_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_S3_ACCESS_KEY_SECRET }}
+          aws-region: ${{ secrets.AWS_S3_REGION }}
+
+      - name: Deploy
+        run: aws s3 sync ./storybook-static s3://${{ secrets.AWS_S3_BUCKET_NAME }}
+# References
+# https://faun.pub/deploying-website-to-aws-s3-w-github-actions-279998db5dae
+# https://github.com/aws-actions/configure-aws-credentials
+# https://github.com/marketplace/actions/upload-s3
+# https://medium.com/tradeling/how-to-upload-files-on-amazon-s3-using-githubactions-ffe1243331ed

package/.github/workflows/ci.yml

@@ -0,0 +1,55 @@
+name: Build and Test
+
+on:
+  push:
+    branches: ["main", "beta"]
+  pull_request:
+    branches: ["main", "beta"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 15.x, 16.x, 17.x, 18.x]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: npm install
+        run: |
+          npm install
+
+      - name: Lint
+        run: |
+          npm run lint
+
+      - name: Unit Tests
+        run: |
+          npm run test-coverage
+
+      - name: Current Path and Files
+        run: |
+          pwd
+          ls -l
+
+      - name: Upload Test Coverage Results to Github
+        uses: actions/upload-artifact@v3
+        with:
+          name: Test Coverage Results for Node ${{ matrix.node-version }}
+          path: coverage
+
+      - name: Build Webpack
+        run: |
+          npm run build
+
+      - name: Build Storybook
+        run: |
+          npm run build-storybook

package/.github/workflows/release.yml

@@ -0,0 +1,41 @@
+name: Release
+
+on:
+  workflow_run:
+    workflows: ["Deploy"]
+    branches: ["main", "beta"]
+    types:
+      - completed
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: npm clean install
+        run: |
+          npm clean-install
+
+      - name: Install semantic-release additional plugins
+        run: npm install --save-dev @semantic-release/changelog @semantic-release/git
+
+      - name: Build
+        run: |
+          npm run build
+
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release
+# References
+# https://dev.to/kouts/automated-versioning-and-package-publishing-using-github-actions-and-semantic-release-1kce
+# https://stackoverflow.com/questions/58311847/github-action-for-updating-package-json

package/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit 

package/.storybook/main.js

@@ -0,0 +1,51 @@
+const webpackConfig = require("../webpack.config");
+
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "@storybook/builder-webpack5",
+  },
+  staticDirs: ["../public"],
+  // https://storybook.js.org/docs/react/builders/webpack#using-your-existing-config
+  webpackFinal: async (config) => {
+    return {
+      ...config,
+      module: {
+        ...config.module,
+        rules: [
+          ...webpackConfig.module.rules,
+          {
+            test: /\.mdx?$/,
+            use: [
+              {
+                loader: "@mdx-js/loader",
+                options: {},
+              },
+            ],
+          },
+          {
+            test: /(.*\.)?stories\.tsx$/,
+            loader: "@storybook/source-loader",
+          },
+        ],
+      },
+      resolve: {
+        plugins: [...webpackConfig.resolve.plugins],
+        extensions: [
+          ...config.resolve.extensions,
+          ...webpackConfig.resolve.extensions,
+        ],
+        alias: {
+          ...config.resolve.alias,
+          ...webpackConfig.resolve.alias,
+        },
+      },
+    };
+  },
+};

package/.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# [1.1.0](https://github.com/asyrul21/reso-ui/compare/v1.0.0...v1.1.0) (2023-06-22)
+
+
+### Features
+
+* **rename:** replace component loader component with Loader and add fullscreen and text props ([33e4d26](https://github.com/asyrul21/reso-ui/commit/33e4d26d278d3f4a12e3bdbb941a6605ef289996))
+
+# 1.0.0 (2023-06-22)
+
+
+### Features
+
+* reso-ui initial commit and reset App.tsx ([d26f0b1](https://github.com/asyrul21/reso-ui/commit/d26f0b1ebeedb2af9213e679d77f339997fed703))
+
+# 1.0.0 (2023-06-22)
+
+
+### Features
+
+* reso-ui initial commit and reset App.tsx ([9bf7a9f](https://github.com/asyrul21/reso-ui/commit/9bf7a9f1358d71dc8c736fe45019a10f8c21dc9a))

package/README.md

@@ -0,0 +1,209 @@
+# Reso UI (Beta/Pre-release)
+
+PLEASE NOTE THAT THIS LIBRARY IS STILL UNDER DEVELOPMENT AND MAY STILL HAVE MISSING CRUCIAL INFORMATION
+
+Home to reusable react components to Reso Applications.
+
+For more information, please see our [Storybook instance](http://reso-ui-storybook.s3-website-ap-southeast-1.amazonaws.com/).
+
+## Install
+
+```bash
+npm install reso-ui
+```
+
+## Import Components
+
+You can import our ExampleComponent as below:
+
+```javascript
+import { Example } from "reso-ui";
+```
+
+For other components, please see our [Storybook instance](http://reso-ui-storybook.s3-website-ap-southeast-1.amazonaws.com/) for information on import statements and component properties.
+
+## Using the Component
+
+You can then use our ExampleComponent as below:
+
+```jsx
+import { Example } from "reso-ui";
+
+export const SampleApp = () => {
+  return (
+    <Example theme="light" name="john" rootClassName="example_app_styles" />
+  );
+};
+```
+
+For other components, please see our [Storybook instance](http://reso-ui-storybook.s3-website-ap-southeast-1.amazonaws.com/) for information on components' usage.
+
+# Authors' Notes
+
+If you are not insterested in contributing, please ignore this section.
+
+## Run
+
+```bash
+# storybook
+npm run dev
+
+# or
+
+# run a single component imported in src/index.tsx
+npm start
+
+```
+
+## Changes from Original
+
+1. ImageContainer and Image are now combined to form 1 component: Image
+
+2. BannerImageContainer were removed, replaced with Hero
+
+3. Flex Container now have Margins and Padding props
+
+4. Loading-Component and Loading-Container has been combined to form 1 component: Loading-Container, with a _type_ prop. For Layer type (previously Component Loader), with width has been made `fit-content`. May need to change widths of table containers accordingly.
+
+5. Popup-container renamed to Modal
+
+6. Banner-Image-Container renamed to Hero
+
+7. multi-image-container renamed to Multi-Image-Viewer. [setViewedIndex] renamed to [setIndexOverride]. [getMiniImagePath] hook only passes the imageObj as argument. Any processing related to image types etc. is done by client.
+
+8. Admin-Product-Panel - sales count logic is taken out from component, removed dependency on Product all together. rename onToggleArchive to onArchive. Admin-Product-Panel has been decomposed into several Panel primitive components. Clients _need to rewrite Admin-Product-Panel and Admin-User-Panel in reso-client using the library_.
+
+9. Add to Cart to be rewritted using library components.
+
+10. Generic-Button renamed to Button. [fullWidth] prop renamed to [inheritWidth]
+
+11. Link-Button added as a variant of Button.
+
+12. Multiselect Button to utilize library's Button component with custom width and height.
+
+13. Collapse-Banner and Info-Banner combined to form 1 Component: Banner.
+
+14. Dashboard/Card and Product-Card to be combined into 1 component: Card. Both of these components will need to be rewritten using library components.
+
+15. Modal has been decomposed to 3 parts - Container, Header, Body
+
+16. All components now have an optional prop _theme_
+
+17. Confirmation Dialog now has `type` prop to either ask yes/no questions or just an 'OK' button. Prop `question` replaced with `header`
+
+18. Footer is now made more generic, in which you can pass children to render whatever you want.
+
+19. FormGroup component is now replaced with SubForm. The `heading` prop is replaced with `title`
+
+20. InputLabel [value] prop is replaced with [descriptionSelectedKey]
+
+21. ComponentLoader is replaced with Loader, and combined with FullScreenLoader
+
+## To Be Reconstructed using library in Client
+
+1. Generic Modal for Popups that utilise libary components
+
+2. Admin-Product-Panel
+
+3. Admin-User-Panel
+
+4. Add-To-Cart
+
+5. Update Order Status Buttons
+
+6. Analysis Title
+
+7. Dashboard/Overview
+
+8. Dashboard/Card
+
+9. Product-Card
+
+10. Reso Footer
+
+## Development Setup
+
+[Reference for Typescript and Webpack](https://dev.to/shivampawar/setup-react-application-using-typescript-and-webpack-2kn6)
+
+[Jest](https://jestjs.io/docs/getting-started)
+
+[React Webpack Typscript Jest](https://maxpolski.medium.com/react-typescript-webpack-jest-93a58c8458e5)
+
+## 1. Typescript
+
+1. Install
+
+   ```bash
+   npm install -D typescript ts-loader @types/node @types/react @types/react-dom
+   ```
+
+2. Create _tsconfig.json_
+
+## 2. Webpack
+
+1. Install
+
+```bash
+# webpack
+npm install webpack webpack-cli webpack-dev-server --save-dev
+
+# webpack plugins to be used
+npm install html-webpack-plugin sass sass-loader css-loader style-loader --save-dev url-loader
+```
+
+NOTE: We dont need babel since we are using ts-loader
+
+2. Create `webpack.config.js`
+
+## 3. ts-lint
+
+1. Install
+
+```bash
+npm install tslint tslint-react --save-dev
+```
+
+2. Create `tslint.json`
+
+3. Add lint command to `Package.json` script
+
+## 4. jest
+
+1. Install Globally
+
+```bash
+npm intall jest --global
+```
+
+2. Install jest as devDependency
+
+```bash
+# install jest
+npm install jest jest-environment-jsdom --save-dev
+# use ts-jest
+npm install ts-jest @types/jest --save-dev
+```
+
+3. Generate `jestConfig.json` file
+
+```bash
+jest --init
+```
+
+## 5. testing-library
+
+1. Install
+
+```bash
+npm install --save-dev @testing-library/react @testing-library/jest-dom
+```
+
+# Notes
+
+1. Light theme should be default. If no dark theme style is provided, it fallbacks to Light theme
+
+   -> Done. Hence every component MUST have a light theme.
+
+2. provided rootClassName should override theme classNames
+
+   -> Works, but Component imports must happen BEFORE style imports

package/__mocks__/fileMock.js

@@ -0,0 +1,2 @@
+// https://jestjs.io/docs/29.2/webpack
+module.exports = "test-file-stub";

package/__mocks__/styleMock.js

@@ -0,0 +1,2 @@
+// https://jestjs.io/docs/29.2/webpack
+module.exports = {};

package/commitlint.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ["@commitlint/config-conventional"],
+  rules: {
+    "subject-case": [2, "never", ["upper-case", "pascal-case", "start-case"]],
+  },
+};

package/custom.d.ts

@@ -0,0 +1,8 @@
+declare module "*.svg" {
+  import React from "react";
+  const SVG: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default SVG;
+}
+
+// https://stackoverflow.com/questions/44717164/unable-to-import-svg-files-in-typescript
+// https://github.com/gregberge/svgr/issues/546

package/dist/0d5fdfd739931f51a5df.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "32743a4d0c4282e2070b574e6e5038ab.ttf";

package/dist/2e942562af5b9b655c1f.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "404e299be26d78e6679447ea7cb2d41f.ttf";

package/dist/2f6d81277badc25ac944.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "cce5625b56ec678e42021270b84ef400.ttf";

package/dist/3fcedd69c66d642ae94c.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "ce3fff31c0f262aca227664f6f0d2fa2.ttf";

package/dist/47afb8d0034314dd9508.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "a61eaf4c2e4d44d6db6a576706e9e6ae.ttf";

package/dist/4a24733ca942ad738fa2.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "3727d88dec67e1e78cf987dab60d9887.ttf";

package/dist/4e860c8656d815bb2429.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "4e8cea18952c83074ec35f7bf1b176c4.ttf";

package/dist/5568b72206d0e08121c5.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "09f84f6035cfbf7c3984b6177d36b516.ttf";

package/dist/6fca6423291a2d06943a.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "cc7ee35ca49c83d4cfca932a03139f99.ttf";

package/dist/791134e64e8ef9da3f77.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "9445d60ed014306b6aec1c69bf9d0174.ttf";

package/dist/8c5e890c33607ed0e632.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "f41b63c0bb0963ace821a2b99458c1cd.ttf";

package/dist/9e50c04f0efdf7813013.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "eacee5bb9c7fee5939aebf2335e5106a.ttf";

package/dist/c0ee626f116bbcc4c721.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "fb248a35b11180453c6879a29d94eff4.ttf";

package/dist/c27d458a5358094ac974.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "b10e7a6e913ca664cbdcb17894f9b419.ttf";

package/dist/c27efdacccfbcbd14ff2.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "c76ea376f095f2e1e5138b226ad0f9cd.ttf";

package/dist/d01ea7f941ca3838ae97.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "0e407c5680c91e584bb084ebfb5c086b.ttf";

package/dist/db767bc3ab4b2e42b4b1.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "9e1bb626874ed49aa343d66b8d66ceaf.ttf";

package/dist/eebe2ceaa4fd239fe3fb.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "4ed78cd5d64af4efc3c714622b9372d4.ttf";

package/dist/eef56d4542bc2932ff9f.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "8081832fc5cfbf634aa664a9eff0350e.ttf";

package/dist/f072662071f642a2e2b9.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "9f57e7d4017ef9b93ae75e2c86f00d60.ttf";

package/dist/f456d233db96b6889eeb.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "5ccd942a8800a68d44b6d3f5431909ec.ttf";

package/dist/fb71f2d88c40660bb2e0.ttf

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "94b768c07879dde09ab4d5f6ad92cbc6.ttf";