<div align="center">
npm install @deepsource/zeal
Zeal is the component system used across DeepSource Assets
#### Setting up tailwind
Add this in the tailwind.config.js
``javascript`
// tailwind.config.js
module.exports = {
// import the tailwind config from Zeal.
presets: [require('@deepsourcelabs/zeal/tailwind.config')],
// Don't purge zeal styles
purge: {
enabled: true,
content: ['./pages//', './components//', './node_modules/@deepsourcelabs/*/.vue']
}
}
1. Node: v14@latest
2. yarn: v1
1. Clone the Repo using git clone https://github.com/DeepSourceCorp/zealyarn
2. Run to install all dependenciesyarn storybook:serve
3. Run to run the dev server and storybook for development
The following NPM scripts help building the library
1. yarn build-lib: This will build the library with main.ts as the input fileyarn build-storybook
2. : This will build the Storybookyarn build_icons
3. : This will fetch the svg icons from the src/icons and build a JSON fileyarn build:css
4. : This will run post css and generate the CSS files for tailwind and other componentsyarn build-lib-icons
5. : This will build the library, css files and the icons
Before you begin, ensure you have the .npmrc file setup.
1. Bump the version in package.json and commit that changeprivate: true
2. Remove from the package.json (revert after publishing)yarn test:unit && yarn build-lib-icons
3. Run npm publish
4. On successful test and build run
> Note: Add private: true back after publishing. In CI, don't forget to run yarn before step 3
1. For generic icons, replace all custom colors added to the SVG file with currentColorsrc/icons
2. Optimize the SVG using SVGOMG
3. Create a new SVG file unde the folder and paste the optimized SVG into ityarn build_icons
4. Run to update the icons.json fileyarn storybook:serve`
5. Verify the icons look alright by starting the storybook locally using
6. Make a pull request for it with the screenshots of the icon preview in storybook