Reso UI

Home to reusable React components to Reso Applications.

For more information, please see our Storybook instance.

Requirements

1. Node 18 >

2. React ^18.2

3. React Dom ^18.2

Install

npm install reso-ui

Basic Usage

1. Import the styles in your project root index.ts or index.tsx or index.js. Import it BEFORE importing Application-spcific styles:

import "reso-ui/styles";

// your application-specific styles should override reso-ui styles
import "./index.css";

2. Import and use our components:

import { Example } from "reso-ui";

export const SampleApp = () => {
  return (
    <Example theme="light" name="john" rootClassName="example_app_styles" />
  );
};

3. For other usage docs, please see our Storybook instance for information on import statements and component properties.

Version Warning

Reso UI now runs on React 18. Since some components (Form Control components especially) use React hooks internally, clients with other versions of React using the latest version of this library will face "Invalid Hook Call" errors, due to conflicting React versions. Therefore, please check peer dependency requirements before updating.

Authors' Notes

If you are not insterested in contributing, please ignore this section.

Run

# 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

Jest

React Webpack Typscript Jest

1. Typescript

1. Install

   npm install -D typescript ts-loader @types/node @types/react @types/react-dom

2. Create tsconfig.json

2. Webpack

1. Install

# 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

npm install tslint tslint-react --save-dev

2. Create tslint.json

3. Add lint command to Package.json script

4. jest

1. Install Globally

npm intall jest --global

2. Install jest as devDependency

# 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

jest --init

5. testing-library

1. Install

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