@juwel-development/design-system 0.1.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 +69 -0
- package/dist/design-system.js +19 -0
- package/dist/design-system.js.map +1 -0
- package/dist/design-system.umd.cjs +3 -0
- package/dist/design-system.umd.cjs.map +1 -0
- package/dist/index.css +1 -0
- package/dist/types/Interaction/Button.d.ts +26 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +56 -0
package/README.md
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
# React + TypeScript + Vite
|
|
2
|
+
|
|
3
|
+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
|
4
|
+
|
|
5
|
+
Currently, two official plugins are available:
|
|
6
|
+
|
|
7
|
+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
|
8
|
+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
9
|
+
|
|
10
|
+
## Expanding the ESLint configuration
|
|
11
|
+
|
|
12
|
+
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
|
13
|
+
|
|
14
|
+
```js
|
|
15
|
+
export default tseslint.config([
|
|
16
|
+
globalIgnores(['dist']),
|
|
17
|
+
{
|
|
18
|
+
files: ['**/*.{ts,tsx}'],
|
|
19
|
+
extends: [
|
|
20
|
+
// Other configs...
|
|
21
|
+
|
|
22
|
+
// Remove tseslint.configs.recommended and replace with this
|
|
23
|
+
...tseslint.configs.recommendedTypeChecked,
|
|
24
|
+
// Alternatively, use this for stricter rules
|
|
25
|
+
...tseslint.configs.strictTypeChecked,
|
|
26
|
+
// Optionally, add this for stylistic rules
|
|
27
|
+
...tseslint.configs.stylisticTypeChecked,
|
|
28
|
+
|
|
29
|
+
// Other configs...
|
|
30
|
+
],
|
|
31
|
+
languageOptions: {
|
|
32
|
+
parserOptions: {
|
|
33
|
+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
34
|
+
tsconfigRootDir: import.meta.dirname,
|
|
35
|
+
},
|
|
36
|
+
// other options...
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
])
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
|
43
|
+
|
|
44
|
+
```js
|
|
45
|
+
// eslint.config.js
|
|
46
|
+
import reactX from 'eslint-plugin-react-x'
|
|
47
|
+
import reactDom from 'eslint-plugin-react-dom'
|
|
48
|
+
|
|
49
|
+
export default tseslint.config([
|
|
50
|
+
globalIgnores(['dist']),
|
|
51
|
+
{
|
|
52
|
+
files: ['**/*.{ts,tsx}'],
|
|
53
|
+
extends: [
|
|
54
|
+
// Other configs...
|
|
55
|
+
// Enable lint rules for React
|
|
56
|
+
reactX.configs['recommended-typescript'],
|
|
57
|
+
// Enable lint rules for React DOM
|
|
58
|
+
reactDom.configs.recommended,
|
|
59
|
+
],
|
|
60
|
+
languageOptions: {
|
|
61
|
+
parserOptions: {
|
|
62
|
+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
63
|
+
tsconfigRootDir: import.meta.dirname,
|
|
64
|
+
},
|
|
65
|
+
// other options...
|
|
66
|
+
},
|
|
67
|
+
},
|
|
68
|
+
])
|
|
69
|
+
```
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import './index.css';const n = ({
|
|
3
|
+
children: r,
|
|
4
|
+
onClick$: t
|
|
5
|
+
}) => /* @__PURE__ */ o(
|
|
6
|
+
"button",
|
|
7
|
+
{
|
|
8
|
+
type: "button",
|
|
9
|
+
className: "bg-primary-500 py-2 px-4 rounded hover:bg-primary-600",
|
|
10
|
+
onClick: () => {
|
|
11
|
+
t && t.next();
|
|
12
|
+
},
|
|
13
|
+
children: r
|
|
14
|
+
}
|
|
15
|
+
);
|
|
16
|
+
export {
|
|
17
|
+
n as Button
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=design-system.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"design-system.js","sources":["../src/Interaction/Button.tsx"],"sourcesContent":["import type { FunctionComponent, PropsWithChildren } from 'react';\nimport type { Subject } from 'rxjs';\n\ntype IProps = {\n onClick$?: Subject<void>;\n};\n\n/**\n * Button component for user interactions.\n *\n * @component\n *\n * @uxguidelines\n * - Use clear, action-oriented text (e.g., \"Save\" instead of \"OK\")\n * - Keep button text concise (1-3 words)\n * - Use primary buttons for main actions, secondary buttons for alternative actions\n * - Maintain consistent button styling throughout the application\n * - Provide visual feedback on hover/active states\n * - Ensure sufficient touch target size (minimum 44x44px) for mobile users\n * - Position primary actions on the right for multi-button layouts\n *\n * @accessibility\n * - Ensure adequate color contrast (4.5:1 minimum ratio)\n * - Provide focus styles for keyboard navigation\n * - Use appropriate ARIA attributes when needed\n */\nexport const Button: FunctionComponent<PropsWithChildren<IProps>> = ({\n children,\n onClick$,\n}) => {\n return (\n <button\n type={'button'}\n className=\"bg-primary-500 py-2 px-4 rounded hover:bg-primary-600\"\n onClick={() => {\n if (onClick$) {\n onClick$.next();\n }\n }}\n >\n {children}\n </button>\n );\n};\n"],"names":["Button","children","onClick$","jsx"],"mappings":";AA0BO,MAAMA,IAAuD,CAAC;AAAA,EACnE,UAAAC;AAAA,EACA,UAAAC;AACF,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAM;AAAA,IACN,WAAU;AAAA,IACV,SAAS,MAAM;AACb,MAAID,KACFA,EAAS,KAAA;AAAA,IAEb;AAAA,IAEC,UAAAD;AAAA,EAAA;AAAA;"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
(function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.DesignSystem={},e.jsxRuntime))})(this,function(e,t){"use strict";var i=document.createElement("style");i.textContent=`@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary-500:#78dcca;--color-primary-600:#5cc9c0}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.rounded{border-radius:.25rem}.bg-primary-500{background-color:var(--color-primary-500)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}@media (hover:hover){.hover\\:bg-primary-600:hover{background-color:var(--color-primary-600)}}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.rounded{border-radius:.25rem}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}}
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(i);const n=({children:r,onClick$:o})=>t.jsx("button",{type:"button",className:"bg-primary-500 py-2 px-4 rounded hover:bg-primary-600",onClick:()=>{o&&o.next()},children:r});e.Button=n,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
|
|
3
|
+
//# sourceMappingURL=design-system.umd.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"design-system.umd.cjs","sources":["../src/Interaction/Button.tsx"],"sourcesContent":["import type { FunctionComponent, PropsWithChildren } from 'react';\nimport type { Subject } from 'rxjs';\n\ntype IProps = {\n onClick$?: Subject<void>;\n};\n\n/**\n * Button component for user interactions.\n *\n * @component\n *\n * @uxguidelines\n * - Use clear, action-oriented text (e.g., \"Save\" instead of \"OK\")\n * - Keep button text concise (1-3 words)\n * - Use primary buttons for main actions, secondary buttons for alternative actions\n * - Maintain consistent button styling throughout the application\n * - Provide visual feedback on hover/active states\n * - Ensure sufficient touch target size (minimum 44x44px) for mobile users\n * - Position primary actions on the right for multi-button layouts\n *\n * @accessibility\n * - Ensure adequate color contrast (4.5:1 minimum ratio)\n * - Provide focus styles for keyboard navigation\n * - Use appropriate ARIA attributes when needed\n */\nexport const Button: FunctionComponent<PropsWithChildren<IProps>> = ({\n children,\n onClick$,\n}) => {\n return (\n <button\n type={'button'}\n className=\"bg-primary-500 py-2 px-4 rounded hover:bg-primary-600\"\n onClick={() => {\n if (onClick$) {\n onClick$.next();\n }\n }}\n >\n {children}\n </button>\n );\n};\n"],"names":["Button","children","onClick$","jsx"],"mappings":";2CA0BO,MAAMA,EAAuD,CAAC,CACnE,SAAAC,EACA,SAAAC,CACF,IAEIC,EAAAA,IAAC,SAAA,CACC,KAAM,SACN,UAAU,wDACV,QAAS,IAAM,CACTD,GACFA,EAAS,KAAA,CAEb,EAEC,SAAAD,CAAA,CAAA"}
|
package/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary-500:#78dcca;--color-primary-600:#5cc9c0}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.rounded{border-radius:.25rem}.bg-primary-500{background-color:var(--color-primary-500)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}@media (hover:hover){.hover\:bg-primary-600:hover{background-color:var(--color-primary-600)}}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.rounded{border-radius:.25rem}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { FunctionComponent, PropsWithChildren } from 'react';
|
|
2
|
+
import { Subject } from 'rxjs';
|
|
3
|
+
type IProps = {
|
|
4
|
+
onClick$?: Subject<void>;
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* Button component for user interactions.
|
|
8
|
+
*
|
|
9
|
+
* @component
|
|
10
|
+
*
|
|
11
|
+
* @uxguidelines
|
|
12
|
+
* - Use clear, action-oriented text (e.g., "Save" instead of "OK")
|
|
13
|
+
* - Keep button text concise (1-3 words)
|
|
14
|
+
* - Use primary buttons for main actions, secondary buttons for alternative actions
|
|
15
|
+
* - Maintain consistent button styling throughout the application
|
|
16
|
+
* - Provide visual feedback on hover/active states
|
|
17
|
+
* - Ensure sufficient touch target size (minimum 44x44px) for mobile users
|
|
18
|
+
* - Position primary actions on the right for multi-button layouts
|
|
19
|
+
*
|
|
20
|
+
* @accessibility
|
|
21
|
+
* - Ensure adequate color contrast (4.5:1 minimum ratio)
|
|
22
|
+
* - Provide focus styles for keyboard navigation
|
|
23
|
+
* - Use appropriate ARIA attributes when needed
|
|
24
|
+
*/
|
|
25
|
+
export declare const Button: FunctionComponent<PropsWithChildren<IProps>>;
|
|
26
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Button } from './Interaction/Button';
|
package/package.json
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@juwel-development/design-system",
|
|
3
|
+
"private": false,
|
|
4
|
+
"version": "0.1.2",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"description": "A design system for Juwel Development",
|
|
7
|
+
"main": "dist/design-system.umd.cjs",
|
|
8
|
+
"module": "dist/design-system.js",
|
|
9
|
+
"types": "dist/types/index.d.ts",
|
|
10
|
+
"scripts": {
|
|
11
|
+
"build:components": "vite build",
|
|
12
|
+
"build:types": "tsc --emitDeclarationOnly --declarationDir dist/types",
|
|
13
|
+
"dev:types": "tsc --emitDeclarationOnly --declarationDir dist/types --watch",
|
|
14
|
+
"dev:components": "vite build --watch",
|
|
15
|
+
"lint": "biome check",
|
|
16
|
+
"lint:fix": "biome check --write",
|
|
17
|
+
"format": "biome format --write",
|
|
18
|
+
"test": "vitest run",
|
|
19
|
+
"preview": "vite preview"
|
|
20
|
+
},
|
|
21
|
+
"files": [
|
|
22
|
+
"dist"
|
|
23
|
+
],
|
|
24
|
+
"exports": {
|
|
25
|
+
".": {
|
|
26
|
+
"types": "./dist/types/index.d.ts",
|
|
27
|
+
"import": "./dist/design-system.js",
|
|
28
|
+
"require": "./dist/design-system.umd.cjs"
|
|
29
|
+
},
|
|
30
|
+
"./style.css": "./dist/index.css",
|
|
31
|
+
"./package.json": "./package.json"
|
|
32
|
+
},
|
|
33
|
+
"dependencies": {
|
|
34
|
+
"rxjs": "^7.8.2",
|
|
35
|
+
"react": "^19.1.0",
|
|
36
|
+
"react-dom": "^19.1.0"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@juwel-development/config": "*",
|
|
40
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
41
|
+
"@testing-library/react": "^16.3.0",
|
|
42
|
+
"@biomejs/biome": "^2.1.2",
|
|
43
|
+
"@tailwindcss/vite": "^4.1.11",
|
|
44
|
+
"@types/react": "^19.1.8",
|
|
45
|
+
"@types/react-dom": "^19.1.6",
|
|
46
|
+
"@vitejs/plugin-react-swc": "^3.10.2",
|
|
47
|
+
"globals": "^16.3.0",
|
|
48
|
+
"jsdom": "^26.1.0",
|
|
49
|
+
"typescript": "~5.8.3",
|
|
50
|
+
"typescript-eslint": "^8.35.1",
|
|
51
|
+
"vite": "^7.0.4",
|
|
52
|
+
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
53
|
+
"vite-plugin-dts": "^4.5.4",
|
|
54
|
+
"vitest": "^3.2.4"
|
|
55
|
+
}
|
|
56
|
+
}
|