fe-shared-lib

Contents

• Start
• Local Development
• Testing in a UAT
• Storybook

npm install

Start

This command will build all of the necessary Tailwind files for each theme and setup the configuration for Storybook. Once complete, Storybook will open and you can preview the shared components.

npm start

Local Development

To edit the design system locally whilst being using in a consumer you need to run npm link in this directory and then npm link @designcrowd/fe-shared-lib in the consumer.

Testing in a UAT

If you want to have an experimental version of your change, like have it in a uat env without publishing it to prod:

1. Update package.json with "version": "[current]-[short description of your work]"
2. Run npm i
3. run docker build . --build-arg NPM_TOKEN=$NPM_TOKEN in the project directory (make sure you have $NPM_TOKEN properly set in your local env)
4. Update package reference in the consumer to the version you have just built

If you are making changes to components used into the BrandPage Tab in BC.NET

1. Get latest app.maker source code.
2. Update its reference to @designcrowd/fe-shared-lib with the one you just built
3. Bump its version (app.maker version)
4. Run npm run docker:publish:bp
5. IN BC.Net Update reference of @designcrowd/library.brand-page to use the version you just set in the app.maker

Storybook

Storybook is published with each new commit to master and can be found here:

https://brandcrowd-storybook.s3.amazonaws.com/fe-shared-lib/live/index.html

atoms (formerly shared-component-library)

This flow chart describes the workflow for the shared component library. https://app.diagrams.net/#G1TtCW8-zgVQz7bacsfQpqL5ZYCzeCGnXu

Project setup

npm i

Start

This command will build all necessary Tailwind files for each theme and set up the configuration for Storybook. Once complete, Storybook will open and you can preview the shared components.

npm start

Local Development

Storybook

Update Storybook: npx storybook@latest upgrade

Writing stories:

• Storybook Vue 3 docs: https://storybook.js.org/docs/get-started/vue3-vite
• Official examples: https://github.com/storybookjs/storybook/blob/next/test-storybooks/portable-stories-kitchen-sink/vue3/stories/Button.stories.ts

DesignCrowd Tailwind Configuration

The purpose of the themes directory is to build up a library of themes for our different products in a single place. These themes are then exported and consumed into each product using a local Tailwind CSS setup specific to that product. This provides us with a consistent approach for our colours, fonts, spacing etc whilst also being able to control the Tailwind CSS styles across all of our products.

TODO This repository is published as an NPM package and it's themes and helper functions are exposed in the index.js file.

Adding new configuration styles

New configuration styles can be added to the themes/base.js file which will be shared by all child themes. If you want to add a new option only in a specific theme, then edit the themes/xx.js file. The format for the theme files follows the structure of the tailwind.config.js file. https://tailwindcss.com/docs/configuration

Adding new themes

New themes can be added by creating a new xx.js file in the themes folder. Once the new theme has been configured, it will need to be made exportable in the index.js file.

Versioning

Ensure to bump the version number in package.json followed by running npm i before each commit. And then run npm run docker:publish to publish the version to NPM.