Monorepo containing the codebase for the Genesys UI components library.
Warning This is an
alphaversion and it is not yet production ready.
The project is built using npm workspaces and includes the following packages:
- genesys-ui: Core package containing base components.
- genesys-ui-color: Color components.
- genesys-ui-upload: Upload components.
- genesys-ui-datetime: Date and time components.
- genesys-ui-code: Code editing and code visualization components.
- genesys-ui-table: Table components.
The packages have the following interdependencies:
├─┬ @devoinc/genesys-ui-datetime
│ └── @devoinc/genesys-ui
├─┬ @devoinc/genesys-ui-color
│ ├── @devoinc/genesys-ui
├─┬ @devoinc/genesys-ui-upload
│ ├── @devoinc/genesys-ui
├─┬ @devoinc/genesys-ui
├─┬ @devoinc/genesys-ui-code
│ ├── @devoinc/genesys-ui
├─┬ @devoinc/genesys-ui-table
│ ├── @devoinc/genesys-ui
The available components can be previewed in the Genesys UI Storybook. The Storybook includes a live preview of the components, as well as their documentation and code examples.
Ensure you are using npm ≥ v7 and Node.js ≥ v18.
## Clone the repository
git clone https://github.com/devoinc/genesys-ui
## Go to folder
cd genesys-ui
## Install dependencies
npm ci
## Build the packages
npm run build
## Run Storybook
npm start
## Build the storybook
npm run build-storybook
## Run tests
npm run test
## Run lint
npm run lintThis project uses Vite for development. Vite serves the code via native
ES Module imports during development. Therefore, Vite converts all dependencies that are shipped
as CommonJS modules to ES modules. To improve the performance, it
pre-bundles and caches them
inside the node_modules/.cache directory.
If you want to link an external package to the project, you need to make sure that the package is available in ESM format. Besides, you have to ensure that the package is not listed in the optimizeDeps.include section of the main.ts file. If the package is listed there, Vite will pre-bundle it and will always use the cached version, even if you link a local version of the package. In that case, you will have to temporarily remove or comment the package from the optimizeDeps.include section.
Once the above conditions are met, you can link the package to the project by running the following commands:
# Create a link to the package
cd <package-name>
npm link
# Link the package to the project
cd genesys-ui
npm link <package-name>
# Clean the cache
cd genesys-ui
npm run clean:cache
# Restart the development server
npm start
Note: You might have to reload the browser o every change you make to the linked package to see the changes.
For detailed documentation please refer to the READMEs of the internal packages:
- genesys-ui/README.md
- genesys-ui-color/README.md
- genesys-ui-upload/README.md
- genesys-ui-table/README.md
- genesys-ui-datetime/README.md
- genesys-ui-code/README.md
The changelog is available here.
Instructions on how to contribute are detailed here.
The code of conduct is detailed here.
Find the full license content here.
The team in charge of this codebase is DevoInc/Quvis.