@ambita/design-system 5.0.12 → 5.1.1-1301.0

package/README.md

@@ -1,75 +1,105 @@
 # Design System
 
-This template should help get you started developing with Vue 3 in Vite.
+Written in Vue 3 using Vite and TypeScript.
 
-## Recommended IDE Setup
+## Getting started
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+### First run
 
-## Type Support for `.vue` Imports in TS
+Generate NPM token (try the 'npm whoami' command to see if you get any response). If no response, complete the following guide: https://ambita.atlassian.net/wiki/spaces/AI/pages/3060006975/Generate+NPM_TOKEN
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+To get the project up and running locally, install npm packages and start vite:
 
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+```sh
+npm i && npm run storybook
+```
 
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+### [Vivid Blueprint](https://github.com/Ambita/vivid-blueprint)
 
-## Customize configuration
+We also have an optional front-end template which we highly recommend using for new Ambita front-end projects. It is based on the create-vue project and comes pre-installed with this design system along with other goodies.
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
+### Contribution
 
-## Project Setup
+New features must be developed on separate feature branches and merged into dev through pull requests. A GitHub workflow will then automatically publish a new npm package to @ambita/design-system.
+It will have a dev tag and can be installed like this:
 
 ```sh
-npm install
+npm i @ambita/design-system@dev
 ```
 
-### Compile and Hot-Reload for Development
+To be able to commit, the code must pass a lint-check and all unit tests must run successfully.
+The code will be automatically formatted, but can also be run manually with a script shown below.
+
+After testing the @dev package, a PR to main from dev can be created.
+Post-merge, another workflow will be run, publishing a @latest package to npm which can be installed like this.
 
 ```sh
-npm run dev
+npm i @ambita/design-system
 ```
 
-### Type-Check, Compile and Minify for Production
+#### New Components
+
+Every new component and helper should have a storybook document associated with it and preferably unit tests as well. Remember to export it in `./src/index.ts`.
+
+### Scripts
+
+#### Compile and Hot-Reload for Development
 
 ```sh
-npm run build
+npm start
 ```
 
-### Run Unit Tests with [Vitest](https://vitest.dev/)
+#### Documentation and manual testing with [Storybook](https://storybook.js.org/)
 
 ```sh
-npm run test:unit
+npm run storybook
 ```
 
-### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
+#### Type-Check, Compile and Minify for Production
 
 ```sh
-npm run test:e2e:dev
+npm run build
 ```
 
-This runs the end-to-end tests against the Vite development server.
-It is much faster than the production build.
+#### Run Unit Tests with [Vitest](https://vitest.dev/)
 
-But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
+Once:
 
 ```sh
-npm run build
-npm run test:e2e
+npm test
 ```
 
-### Lint with [ESLint](https://eslint.org/)
+Continuously:
 
 ```sh
-npm run lint
+npm run test:unit
+```
+
+#### Test coverage with [v8](https://vitest.dev/guide/coverage)
+
+```sh
+npm run test:coverage
 ```
 
+#### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
 
-### Format with [Prettier](https://prettier.io/)
+#### Format with [Prettier](https://prettier.io/)
 
 ```sh
 npm run format
 ```
+
+#### Type Check [TypeScript](https://www.typescriptlang.org/)
+
+```sh
+npm run type-check
+```
+
+## Links
+
+- https://github.com/Ambita/vivid-blueprint
+- https://github.com/Ambita/design-system-icons