Skip to content

Commit 67502dd

Browse files
mfranzkemfranzke
authored
Merge pull request #238 from db-ui/feat-readme-packages
feat: add readmes for packages
2 parents 620dee2 + a09b365 commit 67502dd

File tree

9 files changed

+254
-7
lines changed

9 files changed

+254
-7
lines changed

‎README.md‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,22 @@ designers, and content authors build, maintain, and scale best of class digital
2121
<figcaption><a href="https://bradfrost.com/blog/post/bdconf-stephen-hay-presents-responsive-design-workflow/" target="_blank" rel="noopener noreferrer">Stephen Hay</a>. <a href="https://vimeo.com/67476280" title="Brad Frosts at beyond tellerrand conference regarding Atomic Design" target="_blank" rel="noopener noreferrer">Citated in a talk by Brad Frost at beyond tellerrand conference.</a></figcaption>
2222
</figure>
2323

24-
## How to use
24+
## Packages
2525

26-
TODO
26+
| Package | Content | Version |
27+
| ----------------------------------- | ----------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
28+
| [foundations](packages/foundations) | CSS/Scss/Tailwind styles and assets | [![@db-ui/foundations on Npmjs](https://img.shields.io/npm/v/@db-ui/foundations.svg?color=rgb%28237%2C%2028%2C%2036%29 "npm version")](https://npmjs.com/package/@db-ui/foundations "DB UI – on NPM") |
29+
| [components](packages/components) | CSS/Scss styles for components | [![@db-ui/components on Npmjs](https://img.shields.io/npm/v/@db-ui/components.svg?color=rgb%28237%2C%2028%2C%2036%29 "npm version")](https://npmjs.com/package/@db-ui/components "DB UI – on NPM") |
30+
| [ngx-components](output/angular) | Native Angular components | [![@db-ui/ngx-components on Npmjs](https://img.shields.io/npm/v/@db-ui/ngx-components.svg?color=rgb%28237%2C%2028%2C%2036%29 "npm version")](https://npmjs.com/package/@db-ui/ngx-components "DB UI – on NPM") |
31+
| [react-components](output/react) | Native React components | [![@db-ui/react-components on Npmjs](https://img.shields.io/npm/v/@db-ui/react-components.svg?color=rgb%28237%2C%2028%2C%2036%29 "npm version")](https://npmjs.com/package/@db-ui/react-components "DB UI – on NPM") |
32+
| [v-components](output/vue/vue3) | Native Vue components | [![@db-ui/v-components on Npmjs](https://img.shields.io/npm/v/@db-ui/v-components.svg?color=rgb%28237%2C%2028%2C%2036%29 "npm version")](https://npmjs.com/package/@db-ui/v-components "DB UI – on NPM") |
2733

28-
## Packages
34+
## How to use
35+
36+
Install your preferred package via npm or yarn e.g. `npm i @db-ui/react-components`.
2937

30-
| Package | Version (click for changelogs) |
31-
| ----------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
32-
| [foundations](packages/foundations) | [![@db-ui/components on Npmjs](https://img.shields.io/npm/v/@db-ui/components.svg?color=rgb%28237%2C%2028%2C%2036%29 "npm version")](https://npmjs.com/package/@db-ui/foundations "DB UI – on NPM") |
33-
| [components](packages/components) | [![@db-ui/components on Npmjs](https://img.shields.io/npm/v/@db-ui/components.svg?color=rgb%28237%2C%2028%2C%2036%29 "npm version")](https://npmjs.com/package/@db-ui/components "DB UI – on NPM") |
38+
Afterwards you need to add the specific css or scss files to provide the styles of DB UX System.
39+
For a detailed overview look at our [examples](examples).
3440

3541
## Core principals
3642

‎output/react/README.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# @db-ui/react-components
2+
3+
A React library containing all styles & components of [DB UX System](https://github.com/db-ui/mono).
4+
5+
## Install
6+
7+
`npm i @db-ui/react-components`
8+
9+
## Dependencies (simple)
10+
11+
Import the styles in scss or css. Based on your technology the file names could be different.
12+
13+
- Default (db-ui-42): points to `../assets`
14+
- Webpack (db-ui-42-webpack): points to `~@db-ui/foundations/assets`
15+
- Rollup (db-ui-42-rollup): points to `@db-ui/foundations/assets`
16+
17+
<details>
18+
<summary><strong>SCSS</strong></summary>
19+
20+
```scss
21+
// index.scss
22+
@use "@db-ui/components/src/styles/db-ui-42-rollup" as *;
23+
```
24+
25+
</details>
26+
<details>
27+
<summary><strong>CSS</strong></summary>
28+
29+
```tsx
30+
// main.tsx
31+
import "@db-ui/components/src/styles/db-ui-42-rollup.css";
32+
```
33+
34+
</details>
35+
36+
## Dependencies (advanced)
37+
38+
<details>
39+
<summary><strong>SCSS</strong></summary>
40+
41+
```scss
42+
@use "@db-ui/foundations/build/scss/rollup.assets-paths" as *;
43+
@use "@db-ui/foundations/build/scss/icon/icons" as *;
44+
@use "@db-ui/react-components/dist/db-ui-components" as *;
45+
```
46+
47+
</details>
48+
<details>
49+
<summary><strong>CSS</strong></summary>
50+
51+
```tsx
52+
// main.tsx
53+
import "@db-ui/foundations/build/scss/icon/icons.css";
54+
import "@db-ui/react-components/dist/db-ui-components.css";
55+
```
56+
57+
</details>
58+
59+
## Usage
60+
61+
```tsx
62+
import { DBButton } from '@db-ui/react-components';
63+
...
64+
<DBButton icon="account" onClick={()=>{console.log("Test")}}>Test</DBButton>
65+
...
66+
```

‎output/react/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"build": "npm-run-all tsc copy:sass",
1515
"mv:dist": "cpr dist ../../build-outputs/react/dist -o",
1616
"mv:package.json": "cpr package.json ../../build-outputs/react/package.json -o",
17+
"mv:readme": "cpr README.md ../../build-outputs/react/README.md -o",
1718
"postbuild": "npm-run-all -p mv:*"
1819
},
1920
"main": "./dist/index.js",

‎output/vue/vue3/README.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# @db-ui/v-components
2+
3+
A Vue library containing all styles & components of [DB UX System](https://github.com/db-ui/mono).
4+
5+
## Install
6+
7+
`npm i @db-ui/v-components`
8+
9+
## Dependencies (simple)
10+
11+
<details>
12+
<summary><strong>SCSS</strong></summary>
13+
14+
```scss
15+
// style.scss
16+
@use "@db-ui/components/src/styles/db-ui-42-rollup" as *;
17+
```
18+
19+
```ts
20+
// main.ts
21+
import "./style.scss";
22+
import "@db-ui/v-components/dist/style.css";
23+
```
24+
25+
</details>
26+
<details>
27+
<summary><strong>CSS</strong></summary>
28+
29+
```ts
30+
// main.ts
31+
import "@db-ui/components/src/styles/db-ui-42-rollup.css";
32+
import "@db-ui/v-components/dist/style.css";
33+
```
34+
35+
</details>
36+
37+
## Dependencies (advanced)
38+
39+
<details>
40+
<summary><strong>SCSS</strong></summary>
41+
42+
```scss
43+
@use "@db-ui/foundations/build/scss/rollup.assets-paths" as *;
44+
@use "@db-ui/foundations/build/scss/icon/icons" as *;
45+
@use "@db-ui/v-components/dist/db-ui-components" as *;
46+
```
47+
48+
</details>
49+
<details>
50+
<summary><strong>CSS</strong></summary>
51+
52+
```tsx
53+
// main.tsx
54+
import "@db-ui/foundations/build/scss/icon/icons.css";
55+
import "@db-ui/v-components/dist/db-ui-components.css";
56+
```
57+
58+
</details>
59+
60+
## Usage
61+
62+
```ts
63+
<script setup lang="ts">
64+
import { DBButton } from "@db-ui/v-components";
65+
</script>
66+
67+
...
68+
<DBButton icon="account">Test</DBButton>
69+
...
70+
```

‎output/vue/vue3/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"build": "npm-run-all build:*",
1616
"mv:dist": "cpr dist ../../../build-outputs/vue/dist -o",
1717
"mv:package.json": "cpr package.json ../../../build-outputs/vue/package.json -o",
18+
"mv:readme": "cpr README.md ../../../build-outputs/vue/README.md -o",
1819
"postbuild": "npm-run-all -p mv:*"
1920
},
2021
"source": "src/index.ts",

‎packages/components/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# @db-ui/components
2+
3+
A library containing all styles for components of [DB UX System](https://github.com/db-ui/mono).
4+
5+
We currently support:
6+
7+
- [Angular components](https://www.npmjs.com/package/@db-ui/ngx-components)
8+
- [React components](https://www.npmjs.com/package/@db-ui/react-components)
9+
- [Vue components](https://www.npmjs.com/package/@db-ui/v-components)
10+
11+
Please look at your desired framework to retrieve more information.

‎packages/components/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"build:post": "node scripts/post-build/index.js",
1313
"copy:outputs": "cpr src ../../build-outputs/components/dist -o -f \"(.ts|.tsx)$\"",
1414
"copy:package.json": "cpr package.json ../../build-outputs/components/package.json -o",
15+
"copy:readme": "cpr README.md ../../build-outputs/components/README.md -o",
1516
"copy-output": "npm-run-all copy:*",
1617
"build": "npm-run-all build:*",
1718
"start": "nodemon --watch src --watch scripts --watch overrides -e js,tsx,ts,scss,json -x \"npm run build\""

‎packages/foundations/README.md‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
# @db-ui/foundations
2+
3+
A library containing all tokens of [DB UX System](https://github.com/db-ui/mono).
4+
5+
We currently support:
6+
7+
- [CSS](#css)
8+
- [SCSS](#scss)
9+
- [Tailwind](#tailwind)
10+
11+
## Install
12+
13+
`npm i @db-ui/foundations`
14+
15+
## Usage
16+
17+
### CSS
18+
19+
```ts
20+
// main.ts / main.js
21+
import "@db-ui/foundations/build/db-ui-foundations.css";
22+
// optional: to use classes like e.g. db-ui-bg-success
23+
import "@db-ui/foundations/build/color-classes.css";
24+
```
25+
26+
```css
27+
.my-container {
28+
padding: var(--db-spacing-fixed-md);
29+
}
30+
```
31+
32+
```html
33+
<div class="db-ui-regular db-ui-bg-success my-container"></div>
34+
```
35+
36+
### SCSS
37+
38+
Based on your technology/setup you need to change the paths of the assets folder:
39+
40+
- Default: points to `../assets`
41+
- Webpack: points to `~@db-ui/foundations/assets`
42+
- Rollup: points to `@db-ui/foundations/assets`
43+
-
44+
45+
```scss
46+
// index.scss
47+
@use "@db-ui/foundations/build/scss/rollup.assets-paths" as *;
48+
@use "@db-ui/foundations/build/scss/icon/icons" as *;
49+
@use "@db-ui/foundations/build/db-ui-foundations" as *;
50+
// optional: to use db-ui-bg-success
51+
@import "@db-ui/foundations/build/color-classes" as *;
52+
// optional: to use use $db-spacing-fixed-md
53+
@use "@db-ui/foundations/build/scss/variables.global" as *;
54+
55+
.my-container {
56+
padding: $db-spacing-fixed-md;
57+
}
58+
```
59+
60+
```html
61+
<div class="db-ui-regular db-ui-bg-success my-container"></div>
62+
```
63+
64+
### Tailwind
65+
66+
```javascript
67+
//tailwind.config.cjs
68+
69+
const tokens = require("@db-ui/foundations/build/tailwind/tailwind-tokens.json");
70+
71+
module.exports = {
72+
content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
73+
plugins: [],
74+
theme: {
75+
screens: tokens.screens,
76+
spacing: tokens.spacing,
77+
boxShadow: tokens.elevation,
78+
gap: ({ theme }) => ({
79+
...theme("spacing")
80+
}),
81+
space: ({ theme }) => ({
82+
...theme("spacing")
83+
})
84+
}
85+
};
86+
```
87+
88+
```html
89+
<div class="p-fix-md"></div>
90+
```

‎packages/foundations/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"copy-build:web": "cpr build ../../build-outputs/foundations/build -o -f \"(compose|ios-swift)\"",
99
"copy-build:assets": "cpr assets ../../build-outputs/foundations/assets -o",
1010
"copy-build:package.json": "cpr package.json ../../build-outputs/foundations/package.json -o",
11+
"copy-build:readme": "cpr README.md ../../build-outputs/foundations/README.md -o",
1112
"copy-build": "npm-run-all copy-build:*",
1213
"build:style-dictionary": "node style-dictionary.js && npm run copy:scss",
1314
"build:tailwind": "node scripts/tailwind-config-generator.mjs false true && cpr scripts/tailwind-config-generator.mjs build/tailwind/tailwind-config-generator.mjs -o",

0 commit comments

Comments
 (0)