reso-ui v2.0.5
Reso UI
Home to reusable React components to Reso Applications.
For more information, please see our Storybook instance.
Requirements
Node 18 >
React ^18.2
React Dom ^18.2
Install
npm install reso-ui
Basic Usage
- Import the styles in your project root
index.ts
orindex.tsx
orindex.js
. Import it BEFORE importing Application-spcific styles:
import "reso-ui/styles";
// your application-specific styles should override reso-ui styles
import "./index.css";
- Import and use our components:
import { Example } from "reso-ui";
export const SampleApp = () => {
return (
<Example theme="light" name="john" rootClassName="example_app_styles" />
);
};
- 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
ImageContainer and Image are now combined to form 1 component: Image
BannerImageContainer were removed, replaced with Hero
Flex Container now have Margins and Padding props
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.Popup-container renamed to Modal
Banner-Image-Container renamed to Hero
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.
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.
Add to Cart to be rewritted using library components.
Generic-Button renamed to Button. fullWidth prop renamed to inheritWidth
Link-Button added as a variant of Button.
Multiselect Button to utilize library's Button component with custom width and height.
Collapse-Banner and Info-Banner combined to form 1 Component: Banner.
Dashboard/Card and Product-Card to be combined into 1 component: Card. Both of these components will need to be rewritten using library components.
Modal has been decomposed to 3 parts - Container, Header, Body
All components now have an optional prop theme
Confirmation Dialog now has
type
prop to either ask yes/no questions or just an 'OK' button. Propquestion
replaced withheader
Footer is now made more generic, in which you can pass children to render whatever you want.
FormGroup component is now replaced with SubForm. The
heading
prop is replaced withtitle
InputLabel value prop is replaced with descriptionSelectedKey
ComponentLoader is replaced with Loader, and combined with FullScreenLoader
To Be Reconstructed using library in Client
Generic Modal for Popups that utilise libary components
Admin-Product-Panel
Admin-User-Panel
Add-To-Cart
Update Order Status Buttons
Analysis Title
Dashboard/Overview
Dashboard/Card
Product-Card
Reso Footer
Development Setup
Reference for Typescript and Webpack
1. Typescript
Install
npm install -D typescript ts-loader @types/node @types/react @types/react-dom
Create tsconfig.json
2. Webpack
- 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
- Create
webpack.config.js
3. ts-lint
- Install
npm install tslint tslint-react --save-dev
Create
tslint.json
Add lint command to
Package.json
script
4. jest
- Install Globally
npm intall jest --global
- 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
- Generate
jestConfig.json
file
jest --init
5. testing-library
- Install
npm install --save-dev @testing-library/react @testing-library/jest-dom
Notes
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.
provided rootClassName should override theme classNames
-> Works, but Component imports must happen BEFORE style imports
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
6 months ago
6 months ago
6 months ago
8 months ago
8 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago