@dnanpm/ui-components 0.0.0 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -30
- package/package.json +78 -74
package/README.md
CHANGED
|
@@ -2,7 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
React component library for the DNA Design System. Built with TypeScript, CSS Modules, and design tokens.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
- [Design System](https://designsystem.dna.fi)
|
|
6
|
+
- [Figma Specification](https://www.figma.com/design/xxZhh9vmHVpGRCHctZrLpx/Design-Tokens--WIP---Copy-?node-id=0-1&t=BiQBcrkSbZynccb5-1)
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
- Accessible, responsive, and customizable components
|
|
11
|
+
- Built with TypeScript and CSS Modules
|
|
12
|
+
- Themed with design tokens from `@dnanpm/design-tokens`
|
|
13
|
+
- Supports server-side rendering and tree-shaking
|
|
14
|
+
- Comprehensive documentation and examples
|
|
6
15
|
|
|
7
16
|
## Installation
|
|
8
17
|
|
|
@@ -35,35 +44,6 @@ function App() {
|
|
|
35
44
|
|
|
36
45
|
Design tokens are available as CSS custom properties: `var(--colors-primitive-pink-500)`, `var(--spacing-ui-md)`, etc.
|
|
37
46
|
|
|
38
|
-
## Components
|
|
39
|
-
|
|
40
|
-
### Button
|
|
41
|
-
|
|
42
|
-
**Variants:** `primary` | `secondary`
|
|
43
|
-
**Sizes:** `default` | `small`
|
|
44
|
-
**Features:** Loading states, full width, polymorphic (button/anchor)
|
|
45
|
-
|
|
46
|
-
### Box
|
|
47
|
-
|
|
48
|
-
**Elevations:** `none` | `low` | `high` | `extraHigh`
|
|
49
|
-
**Features:** Polymorphic rendering, ref forwarding
|
|
50
|
-
|
|
51
|
-
## Development
|
|
52
|
-
|
|
53
|
-
```bash
|
|
54
|
-
pnpm build # Build library
|
|
55
|
-
pnpm dev # Watch mode
|
|
56
|
-
pnpm test # Run tests
|
|
57
|
-
pnpm lint # Lint code
|
|
58
|
-
pnpm type-check # Type checking
|
|
59
|
-
```
|
|
60
|
-
|
|
61
47
|
## Contributing
|
|
62
48
|
|
|
63
49
|
See [CONTRIBUTING.md](./CONTRIBUTING.md) for contribution guidelines.
|
|
64
|
-
|
|
65
|
-
## Resources
|
|
66
|
-
|
|
67
|
-
- [How to Add a Component](../../docs/how-to/HOW-TO-COMPONENT.md)
|
|
68
|
-
- [How to Publish](../../docs/how-to/HOW-TO-PUBLISH.md)
|
|
69
|
-
- [How to Changelog](../../docs/how-to/HOW-TO-CHANGELOG.md)
|
package/package.json
CHANGED
|
@@ -1,76 +1,80 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
"
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
2
|
+
"name": "@dnanpm/ui-components",
|
|
3
|
+
"version": "0.0.2",
|
|
4
|
+
"description": "DNA Design System - React UI Components",
|
|
5
|
+
"author": "DNA Oy",
|
|
6
|
+
"license": "ISC",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"main": "./dist/index.cjs",
|
|
9
|
+
"module": "./dist/index.js",
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"types": "./dist/index.d.ts",
|
|
14
|
+
"import": "./dist/index.js",
|
|
15
|
+
"require": "./dist/index.cjs"
|
|
16
|
+
},
|
|
17
|
+
"./styles.css": "./dist/styles.css"
|
|
14
18
|
},
|
|
15
|
-
"
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
"
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
"
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
"
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
"
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
"
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
"
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}
|
|
19
|
+
"files": [
|
|
20
|
+
"dist"
|
|
21
|
+
],
|
|
22
|
+
"scripts": {
|
|
23
|
+
"build": "tsc --project tsconfig.build.json && vite build",
|
|
24
|
+
"dev": "vite build --watch",
|
|
25
|
+
"test": "vitest run",
|
|
26
|
+
"test:watch": "vitest",
|
|
27
|
+
"format": "prettier --write .",
|
|
28
|
+
"format:check": "prettier --check .",
|
|
29
|
+
"lint": "eslint .",
|
|
30
|
+
"lint:fix": "eslint . --fix",
|
|
31
|
+
"clean": "rm -rf dist node_modules",
|
|
32
|
+
"type-check": "tsc --noEmit",
|
|
33
|
+
"tar": "bash scripts/generate-tar.sh"
|
|
34
|
+
},
|
|
35
|
+
"keywords": [
|
|
36
|
+
"DNA",
|
|
37
|
+
"style-guide",
|
|
38
|
+
"ui-components",
|
|
39
|
+
"react",
|
|
40
|
+
"design-system",
|
|
41
|
+
"DTCG"
|
|
42
|
+
],
|
|
43
|
+
"publishConfig": {
|
|
44
|
+
"access": "public"
|
|
45
|
+
},
|
|
46
|
+
"engines": {
|
|
47
|
+
"node": ">=24"
|
|
48
|
+
},
|
|
49
|
+
"peerDependencies": {
|
|
50
|
+
"react": "^18.0.0 || ^19.0.0"
|
|
51
|
+
},
|
|
52
|
+
"devDependencies": {
|
|
53
|
+
"@dnanpm/design-tokens": "workspace:*",
|
|
54
|
+
"@repo/eslint-config": "workspace:*",
|
|
55
|
+
"@repo/typescript-config": "workspace:*",
|
|
56
|
+
"@storybook/react-vite": "^10.2.17",
|
|
57
|
+
"@storybook/addon-docs": "^10.2.8",
|
|
58
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
59
|
+
"@testing-library/react": "^16.1.0",
|
|
60
|
+
"@testing-library/user-event": "^14.5.2",
|
|
61
|
+
"@types/react": "^19.2.14",
|
|
62
|
+
"@types/react-dom": "^19.2.3",
|
|
63
|
+
"@vitejs/plugin-react": "^5.1.4",
|
|
64
|
+
"eslint": "^9.39.2",
|
|
65
|
+
"jsdom": "^28.1.0",
|
|
66
|
+
"prettier": "^3.8.1",
|
|
67
|
+
"react": "^19.2.4",
|
|
68
|
+
"react-dom": "^19.2.4",
|
|
69
|
+
"typescript": "^5.9.3",
|
|
70
|
+
"vite": "^7.3.1",
|
|
71
|
+
"vite-plugin-dts": "^4.5.4",
|
|
72
|
+
"vitest": "^4.0.18"
|
|
73
|
+
},
|
|
74
|
+
"repository": {
|
|
75
|
+
"type": "git",
|
|
76
|
+
"url": "https://github.com/DNA-Online-Services/dna-design-system.git",
|
|
77
|
+
"directory": "packages/ui-components"
|
|
78
|
+
},
|
|
79
|
+
"homepage": "https://github.com/DNA-Online-Services/dna-design-system/tree/main/packages/ui-components#readme"
|
|
80
|
+
}
|