Dacast-ui

Intro

This is the dacast npm package for all Dacast front end components. You will require a Node version 16 or higher to run this project as it uses Vite.js

Installation

1. Install Dacast UI

Add the library to your project:

npm install dacast-ui

2. Install required peer dependencies

If your project does not already include React, styled-components, or Redux, you also need to install the following core dependencies:

npm install react react-dom styled-components @reduxjs/toolkit react-redux @datepicker-react/hooks react-color react-device-detect

3. (Optional) Install feature-specific dependencies

Some Dacast UI components rely on additional third-party libraries. Install these only if you plan to use the corresponding components:

To enable Analytics components:

npm install chart.js react-chartjs-2 chartjs-plugin-crosshair leaflet react-leaflet

Development process

When developing locally, you can connect the dacast-ui component library to your project in two ways:

Option 1: Using npm link

This method creates a symlink between your local dacast-ui package and your target project (the app using the library).

In the components library project:

npm link
npm run build:watch

In the target project:

npm link dacast-ui
npm run start

The second line can be any command that runs your dev server.

Revert library after finishing development

In the target project:

npm unlink dacast-ui
npm install [email protected] -E

Replace with the actual package version on second line

Notes

• Make sure both projects use the same React version (react and react-dom) to avoid hook errors.

• If you don’t see changes when using npm link, update your Vite config in the target project to include:

server: {
  watch: { ignored: ['!**/node_modules/dacast-ui/**'] },
},
optimizeDeps: {
  exclude: ['dacast-ui'],
},

Option 2: Using a local file path

If npm link doesn’t work properly in your environment, you can install the library via a direct local file path.

In the components library project:

npm run build:watch

In the target project:

npm install dacast-ui@file:../dacast-ui
npm run start

The second line can be any command that runs your dev server.

Revert library after finishing development

In the target project:

npm uninstall dacast-ui
npm install [email protected] -E

Replace with the actual package version on second line

Storybook

To test isolated components locally run:

npm run storybook

This loads the stories from ./stories.

Icons

All the svg icons are under the ./static directory. Run:

npm run generate-icons

To have all the svg icons copied into react components under ./src/lib/Icon

Publish

Before publishing, make sure you’ve updated the version in package.json according to semantic versioning:

For patch update:

npm version patch

For consistent builds, you may also want to clear old dependencies:

npm run clean

Build and publish:

npm run build

npm publish