@demvsystems/design-components v6.26.1
DEMV Design System
This repository contains the design standard for the products of DEMV Systems.
Installation
Install the package:
pnpm add @demvsystems/design-components
The DS needs Tailwind CSS to function properly. See their docs on how to install it.
Register the DS in you tailwind.config.js
module.exports = { plugins: [ // load the design system tailwind plugin require('@demvsystems/design-components').tailwindPlugin, ], content: [ // ... // the DS ships without any tailwind css, // so you have to reference the components location here './node_modules/@demvsystems/design-components/dist/design-components.mjs', ], };
Import the css for our font into your main css file.
@import url(https://d33aibdhl8v9sf.cloudfront.net/inter.css);
Since we're using Font Awesome for the icons, you have to follow these steps to integrate the FA library:
Copy
/.npmrc
to your project rootInstall these fontawesome packages
pnpm add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome@latest-3 @fortawesome/pro-solid-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons
Add icons that you use to you project like so:
!NOTE
All icons needed for the design-system are automatically bundled when you import them.// example path: /assets/Icons/icons.ts import { library } from '@fortawesome/fontawesome-svg-core'; // Solid import { faCircleNotch as fasCircleNotch, } from '@fortawesome/pro-solid-svg-icons'; // Regular import { faSync as farSync, } from '@fortawesome/pro-regular-svg-icons'; library.add( fasCircleNotch, farSync, );
Include your icon configuration in your main setup file (
app.ts
,main.ts
. ...), e.g.... import '@/assets/Icons/icons'; ...
Contributing
Contributions should be done in form of a pull request that is approved by at least one other programmer.
Commit messages must follow the Conventional Commits specification.
Release
Releases are triggered automatically on merge to main
by
semantic-release.
Therefore it is necessary that the PR merge commit has a semantic commit message.
!IMPORTANT Breaking changes should always be communicated by adding
BREAKING CHANGE:
in the commit footer (See the Conventional Commits specification). This automatically results in a major version change, which indicates a breaking change.!WARNING
Not all semantic commit messages trigger a release. See the semantic-release readme for more information.
Setup
You can set up design-system with docker or locally on your machine.
Docker
- run
docker-compose up -d
- (optional) add
127.0.0.1 design.local
to your systems hosts file. - design-system should be available at http://localhost:3099 (or http://design.local)
Local
- Make sure Node 20 is installed
pnpm install
to install dependencies- Start dev watcher
pnpm dev
- design-system should be available at http://localhost:3000 (or
:3001
if:3000
is occupied etc.)
Creating a new component
Our components are written in Vue 3 TypeScript with the Composition API.
- Create a folder for your new component in
/src/components
. - Inside the new folder:
- Create your component(s). Each component should be prefixed with
Ds
:Ds<ComponentName>.vue
. - Create an
index.ts
file. Here you should export your component(s), types, composables, etc. - Create a file
<componentName>.stories.ts
. In here you may later add usage examples in form of stories. See storybook documentation for help.
- Create your component(s). Each component should be prefixed with
- Register your component in
/src/components/index.ts
- Start developing!
Icons
There are two locations to register icons. Which one should be used depends on whether an icon is used in a component or only in a story:
/src/icons.ts
for icons that are used by components and should be included in the bundle/.storybook/icons.ts
for icons that are only used in a story
Z-Index
Please make sure, DsPopover
always uses the max z-index in the whole project.
Otherwise, it will interfere with DsModal
e.g.
Right now, we have the following stack:
DsPopover - z-[1000]
DsModal - z-[999]
... all the other components
Test changes locally within another repository
If you want to test your changes with a local project where you include the DesignSystem package, do the following:
- Make your changes
- run
pnpm build
- go to you local project and add the DS dependency like this:
"@demvsystems/design-components": "file:/home/xyz/DEMV/design",
(obviously use your local path to the DS repo ;)) - install the dependencies in your local project by running your package manager
yarn || pnpm i
Now you should have the local changes available in your project to test against your actual application. If you do further modifications to the DS, you always have to run the build (Step 2) first and then update the ds dependency in the local project like this:
yarn|pnpm upgrade @demvsystems/design-components
This is necessary to reflect every change made in the DS.
Happy testing
9 days ago
8 days ago
9 days ago
12 days ago
18 days ago
22 days ago
24 days ago
25 days ago
26 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
10 months ago
6 months ago
6 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
7 months ago
8 months ago
7 months ago
7 months ago
10 months ago
6 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
10 months ago
6 months ago
6 months ago
10 months ago
10 months ago
6 months ago
6 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago