Packages located at packages/
dir.
Each package has its own tsconfig.json
, own build & testing configs and their specific user guidelines in README
files.
icons
package contains only raw SVGs for now.theme
package contains theme-related tools - Windi CSS helpers & theme variables, as well as fonts.ui
package contains components.
Install packages:
yarn
Build theme: (you need to rebuild it each time you use it from ui lib)
yarn build:theme
Open storybook:
yarn sb:serve
OR cypress component-testing:
yarn cy
Build all packages:
yarn build
Build Storybook:
yarn sb:build
- Create a component directory in
ui/src/components
(e.g.ui/src/components/Button
) with component itself prefixed withS
(e.g.SButton.vue
) and theindex.ts
file exporting it. The file's name becomes component's name. There are also can be subsidiary entities like other components, composables types, constants and so on that can be exported too. - Every exported component must be added to
ui/src/components/all-components.ts
andui/src/components/index.ts
. - Then it's necessary to add a story for being able to manually test the components. It can be done by adding a
*.stories.ts
file inui/stories
directory (e.g.ui/stories/SButton.stories.ts
). - Then added component should be tested. A test should be an
ui/cypress/component/*.spec.cy.ts
file, where*
is component's name. For searching elements in a component you should usedata-testid
attribute. - If there are any quite complex utils they should have their own unit tests nearby.
- When everything is working, use repo root script
lint:format:fix
to bring the code to common style (more details in the section Linting & Format). - Then you should update
ui.api.md
using two commands inui
package:build:tsc
and thenapi:extract:local
. - Using
yarn changeset
create a minor change with**feat**
prefix about new component (e.g.**feat**: added button component
). - Create pull request.
- Create a release branch.
- Make sure that everything is ready.
- Use the command
yarn changeset version
to updateCHANGELOG.md
files. - Create a pull request with a release version in name.
- Merge the pull request. It will automatically publish packages.
- There are a useful library VueUse with a lot of composition utilities that can be used in develop, so it is good idea to regularly check it.
- We often use provide/inject mechanism for main-subsidiary components communication (e.g. checkbox group - checkbox).
It should be done by creating
api.ts
with a provided payload type, an injection key and an api hook in component directory.
-
Previously enums was defined as plain TypeScript enums, but they don't work well with tree shaking, so now we define enums as follows:
const Status = { Info: 'info', } as const type Status = typeof Status[keyof typeof Status]
-
There is no need to create folders for every type of subsidiary entities, e.g. composables, utilities, etc., if their number is small.
-
Move composables to its own files started with
use
. It's helps to detect and group composables in directory tree. -
We are using BEM with underscores for class names (e.g.
button__icon_hidden
orbutton__icon_size_small
). -
Try to use Windi CSS utility classes.
-
Messages in changesets should start with
**type**
, wheretype
can befix
,feat
or something like this, that describes a type of change. After the type should go a scope in brackets if it can be defined. (For example, it can be the name of a component). Then after colon goes a change description. Examples:**fix**(`STable`): remove unnecessary border
or**feat**: add pagination component
. More info: https://www.conventionalcommits.org/en/v1.0.0/
Available scripts:
lint:es
- calls eslint to find formatting errors for all projectlint:es:fix
- calls eslint to find and fix formatting errors for all projectlint:format:base
- calls prettier and then eslintlint:format:check
- calls prettier and then eslint to find files with formatting errorslint:format:fix
- calls prettier and then eslint to fix formatting errorslint:check
- callslint:es
and thenlint:format:check
To use "Format On Save" feature you should setup your (I)DE to run:
# From the project root
./node_modules/.bin/prettier-eslint --write <target file name>
Maybe you will also need to specify paths for prettier config, prettier binary, eslint config or eslint binary. See all list of options with yarn prettier-eslint -h
.
If you are using VSCode, take a lot at Prettier ESLint extension, it may help with auto formatting.