@canonical/react-ds-core 0.5.1-experimental.0
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 +91 -0
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/ui/Button/Button.js +10 -0
- package/dist/esm/ui/Button/Button.js.map +1 -0
- package/dist/esm/ui/Button/index.js +2 -0
- package/dist/esm/ui/Button/index.js.map +1 -0
- package/dist/esm/ui/Button/styles.css +63 -0
- package/dist/esm/ui/Button/types.js +2 -0
- package/dist/esm/ui/Button/types.js.map +1 -0
- package/dist/esm/ui/Chip/Chip.css +79 -0
- package/dist/esm/ui/Chip/Chip.js +15 -0
- package/dist/esm/ui/Chip/Chip.js.map +1 -0
- package/dist/esm/ui/Chip/index.js +4 -0
- package/dist/esm/ui/Chip/index.js.map +1 -0
- package/dist/esm/ui/Chip/types.js +2 -0
- package/dist/esm/ui/Chip/types.js.map +1 -0
- package/dist/esm/ui/index.js +2 -0
- package/dist/esm/ui/index.js.map +1 -0
- package/dist/types/index.d.ts +2 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/ui/Button/Button.d.ts +6 -0
- package/dist/types/ui/Button/Button.d.ts.map +1 -0
- package/dist/types/ui/Button/index.d.ts +3 -0
- package/dist/types/ui/Button/index.d.ts.map +1 -0
- package/dist/types/ui/Button/types.d.ts +15 -0
- package/dist/types/ui/Button/types.d.ts.map +1 -0
- package/dist/types/ui/Chip/Chip.d.ts +10 -0
- package/dist/types/ui/Chip/Chip.d.ts.map +1 -0
- package/dist/types/ui/Chip/index.d.ts +3 -0
- package/dist/types/ui/Chip/index.d.ts.map +1 -0
- package/dist/types/ui/Chip/types.d.ts +27 -0
- package/dist/types/ui/Chip/types.d.ts.map +1 -0
- package/dist/types/ui/index.d.ts +2 -0
- package/dist/types/ui/index.d.ts.map +1 -0
- package/package.json +73 -0
package/README.md
ADDED
@@ -0,0 +1,91 @@
|
|
1
|
+
# React + TypeScript + Vite
|
2
|
+
|
3
|
+
This template provides a minimal setup to get React working in Vite with HMR.
|
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/README.md)
|
8
|
+
uses [Babel](https://babeljs.io/) for Fast Refresh
|
9
|
+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc)
|
10
|
+
uses [SWC](https://swc.rs/) for Fast Refresh
|
11
|
+
|
12
|
+
## Caveats
|
13
|
+
|
14
|
+
### TSConfig
|
15
|
+
|
16
|
+
#### Skip library check
|
17
|
+
|
18
|
+
We use [skipLibCheck](https://www.typescriptlang.org/tsconfig/#skipLibCheck) to
|
19
|
+
skip type checking of declaration files. This is needed for compatibility with
|
20
|
+
storybook dependencies. If this option is not enabled, the following error occurs:
|
21
|
+
|
22
|
+
```
|
23
|
+
The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("storybook/internal/types")' call instead.
|
24
|
+
```
|
25
|
+
|
26
|
+
Library checking is only disabled for Storybook files. This is due to
|
27
|
+
Storybook dependencies using CommonJS modules alongside ECMAScript modules,
|
28
|
+
which causes issues when TypeScript tries to type-check them together.
|
29
|
+
|
30
|
+
Storybook files are excluded from builds in [tsconfig.build.json](tsconfig.build.json).
|
31
|
+
Library type-checking is enabled for builds.
|
32
|
+
|
33
|
+
|
34
|
+
### Bun
|
35
|
+
|
36
|
+
[Bun](https://bun.sh/) is being experimentally used as a package manager.
|
37
|
+
|
38
|
+
### Build tool
|
39
|
+
|
40
|
+
Bun includes a [native JS bundler](https://bun.sh/docs/bundler) that can
|
41
|
+
transpile Typescript.
|
42
|
+
|
43
|
+
#### Downsides
|
44
|
+
|
45
|
+
We are not currently considering using `bun build` for production builds for
|
46
|
+
the following reasons:
|
47
|
+
|
48
|
+
##### Globstar
|
49
|
+
|
50
|
+
Bun's [implementation of globstar](https://bun.sh/docs/api/glob) is non-standard.
|
51
|
+
It is difficult to build arbitrarily deep filepaths, as Bun expects a globstar
|
52
|
+
for each level of supported nesting. Most glob implementations treat a globstar
|
53
|
+
as representing an arbitrary number of non-hidden directories. However, with
|
54
|
+
Bun, matching `.ts` files in `src/ui/Button` requires the glob pattern
|
55
|
+
`**/**/*.ts`, which does not match files in other levels of nesting.
|
56
|
+
|
57
|
+
##### Dist Depth
|
58
|
+
|
59
|
+
Generating `dist/` output that has the correct folder structure (i.e.,
|
60
|
+
`dist/ui/Button/`) is non-trivial. `bun build` generates output with folder
|
61
|
+
structure starting from matching the shallowest source file. However, this is
|
62
|
+
not always desired. For example, if `ui/` is inside `src/`, one must `cd` into
|
63
|
+
`src` before running `bun build` to generate the appropriate folder structure.
|
64
|
+
You must then set build output to `../dist` to place build results in the
|
65
|
+
project root. This makes the build script unnecessarily complex.
|
66
|
+
|
67
|
+
##### Type emitting
|
68
|
+
|
69
|
+
`bun build` does not generate types, so it must be accompanied by the usage of
|
70
|
+
some other tool that generates type declarations.
|
71
|
+
|
72
|
+
#### Upsides
|
73
|
+
|
74
|
+
##### Speed
|
75
|
+
|
76
|
+
Bun builds slightly faster than the Typescript compiler.
|
77
|
+
|
78
|
+
| Tool | Command | Real Time | User Time | Sys Time |
|
79
|
+
| ---- | --------------------------------------------------------------------| --------- | --------- | -------- |
|
80
|
+
| Bun | `bun run build:package:bun` | 0m0.648s | 0m1.498s | 0m0.117s |
|
81
|
+
| Typescript | `bun run build:package:tsc && bun run build:package:copycss` | 0m0.707s | 0m1.615s | 0m0.094s |
|
82
|
+
|
83
|
+
Note that the bun build must also call `tsc` to generate type declarations, and
|
84
|
+
the tsc build must call the external `copyfiles` dependency to copy assets into
|
85
|
+
`dist/`.
|
86
|
+
|
87
|
+
##### Non-TS bundling
|
88
|
+
|
89
|
+
`bun build` copies non-TS assets (such as images, stylesheets, etc) into `dist`.
|
90
|
+
`tsc` must be followed up with a manual step that copies non-TS files (currently,
|
91
|
+
this is only CSS) into `dist`.
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
import "./styles.css";
|
3
|
+
/** Buttons are clickable elements used to perform an action. */
|
4
|
+
const Button = ({ id, className, appearance, label, ...props }) => {
|
5
|
+
return (_jsx("button", { id: id, className: ["ds", "button", appearance, className]
|
6
|
+
.filter(Boolean)
|
7
|
+
.join(" "), ...props, "aria-label": label, children: label }));
|
8
|
+
};
|
9
|
+
export default Button;
|
10
|
+
//# sourceMappingURL=Button.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/ui/Button/Button.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,CAAC;AAEtB,gEAAgE;AAChE,MAAM,MAAM,GAAG,CAAC,EACd,EAAE,EACF,SAAS,EACT,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACF,EAAsB,EAAE;IAC9B,OAAO,CACL,iBACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,CAAC;aAC/C,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,KACR,KAAK,gBACG,KAAK,YAEhB,KAAK,GACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC"}
|
@@ -0,0 +1,63 @@
|
|
1
|
+
/* component styles */
|
2
|
+
|
3
|
+
/* component variables
|
4
|
+
--button-color-background: background color of the button
|
5
|
+
--button-color-background-hover: background color of the button on hover
|
6
|
+
--button-color-background-active: background color of the button on active
|
7
|
+
--button-color-text: text color of the button
|
8
|
+
--button-color-border: border color of the button
|
9
|
+
--button-color-border-hover: border color of the button on hover
|
10
|
+
--button-color-border-active: border color of the button on active
|
11
|
+
|
12
|
+
--button-margin-left: left margin of the button
|
13
|
+
--button-margin-bottom: bottom margin of the button
|
14
|
+
--button-padding-vertical: vertical padding of the button
|
15
|
+
--button-padding-horizontal: horizontal padding of the button
|
16
|
+
--button-border-width: border width of the button
|
17
|
+
--button-font-size: font size of the button
|
18
|
+
--button-font-weight: font weight of the button
|
19
|
+
--button-line-height: line height of the button
|
20
|
+
*/
|
21
|
+
.ds.button {
|
22
|
+
display: inline-block;
|
23
|
+
cursor: pointer;
|
24
|
+
|
25
|
+
color: var(--intent-color-text, var(--button-color-text));
|
26
|
+
background-color: var(--intent-color, var(--button-color-background));
|
27
|
+
border-color: var(--intent-color-border, var(--button-color-border));
|
28
|
+
border-style: solid;
|
29
|
+
border-width: var(--button-border-width);
|
30
|
+
font-size: var(--button-font-size);
|
31
|
+
font-weight: var(--button-font-weight);
|
32
|
+
line-height: var(--button-line-height);
|
33
|
+
margin-block-end: var(--button-margin-bottom);
|
34
|
+
margin-inline-end: var(--button-margin-left);
|
35
|
+
padding-block: var(--button-padding-vertical);
|
36
|
+
padding-inline: var(--button-padding-horizontal);
|
37
|
+
|
38
|
+
text-align: left;
|
39
|
+
text-decoration: none;
|
40
|
+
|
41
|
+
/* component states */
|
42
|
+
&:hover {
|
43
|
+
background-color: var(
|
44
|
+
--intent-color-hover,
|
45
|
+
var(--button-color-background-hover)
|
46
|
+
);
|
47
|
+
border-color: var(
|
48
|
+
--intent-color-border-hover,
|
49
|
+
var(--button-color-border-hover)
|
50
|
+
);
|
51
|
+
}
|
52
|
+
|
53
|
+
&:active {
|
54
|
+
background-color: var(
|
55
|
+
--intent-color-active,
|
56
|
+
var(--button-color-background-active)
|
57
|
+
);
|
58
|
+
border-color: var(
|
59
|
+
--intent-color-border-active,
|
60
|
+
var(--button-color-border-active)
|
61
|
+
);
|
62
|
+
}
|
63
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":""}
|
@@ -0,0 +1,79 @@
|
|
1
|
+
/* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
|
2
|
+
|
3
|
+
.ds.chip {
|
4
|
+
border-color: var(--intent-color-border, var(--chip-color-border));
|
5
|
+
border-style: solid;
|
6
|
+
border-radius: var(--chip-border-radius);
|
7
|
+
border-width: var(--chip-border-width);
|
8
|
+
|
9
|
+
color: var(--intent-color-text-tinted, var(--chip-color-text));
|
10
|
+
background-color: var(--intent-color-tinted, var(--chip-color-background));
|
11
|
+
|
12
|
+
display: inline-flex;
|
13
|
+
align-items: baseline;
|
14
|
+
|
15
|
+
user-select: none;
|
16
|
+
white-space: nowrap;
|
17
|
+
|
18
|
+
font-size: var(--chip-font-size);
|
19
|
+
font-weight: var(--chip-font-weight);
|
20
|
+
line-height: var(--chip-line-height);
|
21
|
+
|
22
|
+
margin-block-end: var(--chip-margin-bottom);
|
23
|
+
margin-inline-end: var(--chip-margin-left);
|
24
|
+
padding-block: var(--chip-padding-vertical);
|
25
|
+
padding-inline: var(--chip-padding-horizontal);
|
26
|
+
|
27
|
+
& > .lead {
|
28
|
+
font-variant-caps: all-small-caps;
|
29
|
+
font-variant-numeric: oldstyle-nums;
|
30
|
+
}
|
31
|
+
|
32
|
+
& > .lead + .value::before {
|
33
|
+
content: ": ";
|
34
|
+
}
|
35
|
+
|
36
|
+
& > .lead,
|
37
|
+
& > .value {
|
38
|
+
display: inline;
|
39
|
+
overflow: hidden;
|
40
|
+
text-overflow: ellipsis;
|
41
|
+
}
|
42
|
+
|
43
|
+
& > .dismiss {
|
44
|
+
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' fill-rule='nonzero' d='M13.041 1.898l1.06 1.06L9.062 8l5.04 5.042-1.06 1.06L8 9.062 2.96 14.1l-1.06-1.06L6.938 8 1.9 2.96l1.06-1.06 5.04 5.04z'/%3E%3C/svg%3E");
|
45
|
+
background-color: var(--chip-color-background);
|
46
|
+
align-self: center;
|
47
|
+
background-size: 0.75rem;
|
48
|
+
background-repeat: no-repeat;
|
49
|
+
background-position: center;
|
50
|
+
display: inline-block;
|
51
|
+
cursor: pointer;
|
52
|
+
margin-left: var(--spacing-horizontal-xsmall);
|
53
|
+
flex: 0 0 auto;
|
54
|
+
border-radius: 50%;
|
55
|
+
border-color: transparent;
|
56
|
+
height: var(--font-size-default);
|
57
|
+
width: var(--font-size-default);
|
58
|
+
}
|
59
|
+
|
60
|
+
&:is(button) {
|
61
|
+
cursor: pointer;
|
62
|
+
}
|
63
|
+
|
64
|
+
&:hover:not(:has(.dismiss)),
|
65
|
+
& > .dismiss:hover {
|
66
|
+
background-color: var(
|
67
|
+
--intent-color-tinted-hover,
|
68
|
+
var(--chip-color-background-hover)
|
69
|
+
);
|
70
|
+
}
|
71
|
+
|
72
|
+
&:active:not(:has(.dismiss)),
|
73
|
+
& > .dismiss:active {
|
74
|
+
background-color: var(
|
75
|
+
--intent-color-tinted-active,
|
76
|
+
var(--chip-color-background-active)
|
77
|
+
);
|
78
|
+
}
|
79
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
+
import "./Chip.css";
|
3
|
+
const componentCssClassName = "ds chip";
|
4
|
+
/**
|
5
|
+
* description of the Chip component
|
6
|
+
* @returns {React.ReactElement} - Rendered Chip
|
7
|
+
*/
|
8
|
+
const Chip = ({ appearance = "neutral", lead, value, onClick, onDismiss, id, className, style, ...props }) => {
|
9
|
+
const Container = onClick ? "button" : "span";
|
10
|
+
return (_jsxs(Container, { id: id, style: style, className: [componentCssClassName, appearance, className]
|
11
|
+
.filter(Boolean)
|
12
|
+
.join(" "), onClick: onClick, ...props, children: [lead && _jsx("span", { className: "lead", children: lead }), value && _jsx("span", { className: "value", children: value }), onDismiss && (_jsx("button", { type: "button", className: "dismiss", "aria-label": "Dismiss", onClick: () => onDismiss() }))] }));
|
13
|
+
};
|
14
|
+
export default Chip;
|
15
|
+
//# sourceMappingURL=Chip.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../../src/ui/Chip/Chip.tsx"],"names":[],"mappings":";AAEA,OAAO,YAAY,CAAC;AAGpB,MAAM,qBAAqB,GAAG,SAAS,CAAC;AAExC;;;GAGG;AACH,MAAM,IAAI,GAAG,CAAC,EACZ,UAAU,GAAG,SAAS,EACtB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,SAAS,EACT,EAAE,EACF,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACM,EAAsB,EAAE;IACtC,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;IAC9C,OAAO,CACL,MAAC,SAAS,IACR,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,UAAU,EAAE,SAAS,CAAC;aACtD,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,EACZ,OAAO,EAAE,OAAO,KACZ,KAAK,aAER,IAAI,IAAI,eAAM,SAAS,EAAC,MAAM,YAAE,IAAI,GAAQ,EAC5C,KAAK,IAAI,eAAM,SAAS,EAAC,OAAO,YAAE,KAAK,GAAQ,EAC/C,SAAS,IAAI,CACZ,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,SAAS,gBACR,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,GAC1B,CACH,IACS,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/Chip/index.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,cAAc,YAAY,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Chip/types.ts"],"names":[],"mappings":""}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAoB,MAAM,mBAAmB,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import type Props from "./types.js";
|
2
|
+
import "./styles.css";
|
3
|
+
/** Buttons are clickable elements used to perform an action. */
|
4
|
+
declare const Button: ({ id, className, appearance, label, ...props }: Props) => React.ReactElement;
|
5
|
+
export default Button;
|
6
|
+
//# sourceMappingURL=Button.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,cAAc,CAAC;AAEtB,gEAAgE;AAChE,QAAA,MAAM,MAAM,mDAMT,KAAK,KAAG,KAAK,CAAC,YAahB,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,YAAY,EACV,OAAO,IAAI,WAAW,EACtB,SAAS,IAAI,eAAe,GAC7B,MAAM,YAAY,CAAC"}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import type React from "react";
|
2
|
+
export interface BaseProps {
|
3
|
+
id?: string;
|
4
|
+
/** Additional CSS classes */
|
5
|
+
className?: string;
|
6
|
+
/** The visual style of the button */
|
7
|
+
appearance?: "neutral" | "base" | "positive" | "negative" | "link";
|
8
|
+
/** Button contents */
|
9
|
+
label: string;
|
10
|
+
/** Optional click handler */
|
11
|
+
onClick?: () => void;
|
12
|
+
}
|
13
|
+
type Props = BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
|
14
|
+
export default Props;
|
15
|
+
//# sourceMappingURL=types.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,SAAS;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IACnE,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,KAAK,KAAK,GAAG,SAAS,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEvE,eAAe,KAAK,CAAC"}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import type React from "react";
|
2
|
+
import "./Chip.css";
|
3
|
+
import type { ChipPropsType } from "./types.js";
|
4
|
+
/**
|
5
|
+
* description of the Chip component
|
6
|
+
* @returns {React.ReactElement} - Rendered Chip
|
7
|
+
*/
|
8
|
+
declare const Chip: ({ appearance, lead, value, onClick, onDismiss, id, className, style, ...props }: ChipPropsType) => React.ReactElement;
|
9
|
+
export default Chip;
|
10
|
+
//# sourceMappingURL=Chip.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/ui/Chip/Chip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAIhD;;;GAGG;AACH,QAAA,MAAM,IAAI,oFAUP,aAAa,KAAG,KAAK,CAAC,YAwBxB,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Chip/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,cAAc,YAAY,CAAC"}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import type React from "react";
|
2
|
+
/**
|
3
|
+
* Props for the `Chip` component.
|
4
|
+
*/
|
5
|
+
export interface ChipProps {
|
6
|
+
/**
|
7
|
+
* The chip’s appearance.
|
8
|
+
* @default "neutral"
|
9
|
+
*/
|
10
|
+
appearance?: "neutral" | "positive" | "negative" | "caution" | "information";
|
11
|
+
/** Text shown before the value. */
|
12
|
+
lead?: string;
|
13
|
+
/** The chip’s value text. */
|
14
|
+
value?: string;
|
15
|
+
/** Called when the chip is clicked. */
|
16
|
+
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
17
|
+
/** Called when the chip is dismissed. */
|
18
|
+
onDismiss?: () => void;
|
19
|
+
/** Unique identifier for the chip. */
|
20
|
+
id?: string;
|
21
|
+
/** Additional CSS class names. */
|
22
|
+
className?: string;
|
23
|
+
/** Inline styles for the chip. */
|
24
|
+
style?: React.CSSProperties;
|
25
|
+
}
|
26
|
+
export type ChipPropsType = ChipProps & Omit<React.HTMLAttributes<HTMLButtonElement>, "children">;
|
27
|
+
//# sourceMappingURL=types.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Chip/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;IAE7E,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,uCAAuC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE/D,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,kCAAkC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,MAAM,aAAa,GAAG,SAAS,GACnC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC"}
|
package/package.json
ADDED
@@ -0,0 +1,73 @@
|
|
1
|
+
{
|
2
|
+
"name": "@canonical/react-ds-core",
|
3
|
+
"version": "0.5.1-experimental.0",
|
4
|
+
"type": "module",
|
5
|
+
"module": "dist/esm/index.js",
|
6
|
+
"types": "dist/types/index.d.ts",
|
7
|
+
"files": ["dist"],
|
8
|
+
"author": {
|
9
|
+
"email": "webteam@canonical.com",
|
10
|
+
"name": "Canonical Webteam"
|
11
|
+
},
|
12
|
+
"repository": {
|
13
|
+
"type": "git",
|
14
|
+
"url": "https://github.com/canonical/ds25"
|
15
|
+
},
|
16
|
+
"license": "LGPL-3.0",
|
17
|
+
"bugs": {
|
18
|
+
"url": "https://github.com/canonical/ds25/issues"
|
19
|
+
},
|
20
|
+
"homepage": "https://github.com/canonical/ds25#readme",
|
21
|
+
"scripts": {
|
22
|
+
"build": "bun run build:package",
|
23
|
+
"build:storybook": "storybook build",
|
24
|
+
"build:package": "bun run build:package:tsc && bun run build:package:copycss",
|
25
|
+
"build:package:copycss": "copyfiles -u 1 src/ui/**/*.css dist/esm",
|
26
|
+
"build:package:tsc": "tsc -p tsconfig.build.json",
|
27
|
+
"check": "bun run check:biome && bun run check:ts",
|
28
|
+
"check:fix": "bun run check:biome:fix && bun run check:ts",
|
29
|
+
"check:biome": "biome check src *.json",
|
30
|
+
"check:biome:fix": "biome check --write src *.json",
|
31
|
+
"check:ts": "tsc --noEmit",
|
32
|
+
"storybook": "storybook dev -p 6006 --no-open --host 0.0.0.0",
|
33
|
+
"test": "bun run test:vitest",
|
34
|
+
"test:watch": "bun run test:vitest:watch",
|
35
|
+
"test:vitest": "vitest run",
|
36
|
+
"test:vitest:watch": "vitest"
|
37
|
+
},
|
38
|
+
"dependencies": {
|
39
|
+
"@canonical/storybook-addon-baseline-grid": "^0.5.1-experimental.0",
|
40
|
+
"@canonical/styles": "^0.5.0-experimental.0",
|
41
|
+
"react": "^19.0.0",
|
42
|
+
"react-dom": "^19.0.0"
|
43
|
+
},
|
44
|
+
"devDependencies": {
|
45
|
+
"@biomejs/biome": "^1.9.4",
|
46
|
+
"@canonical/biome-config": "^0.4.0-experimental.0",
|
47
|
+
"@canonical/typescript-config-react": "^0.4.0-experimental.0",
|
48
|
+
"@chromatic-com/storybook": "^3.2.2",
|
49
|
+
"@storybook/addon-essentials": "^8.4.7",
|
50
|
+
"@storybook/addon-interactions": "^8.4.7",
|
51
|
+
"@storybook/addon-links": "^8.4.7",
|
52
|
+
"@storybook/addon-onboarding": "^8.4.7",
|
53
|
+
"@storybook/addon-themes": "^8.4.7",
|
54
|
+
"@storybook/blocks": "^8.4.7",
|
55
|
+
"@storybook/react": "^8.4.7",
|
56
|
+
"@storybook/react-vite": "^8.4.7",
|
57
|
+
"@storybook/test": "^8.4.7",
|
58
|
+
"@testing-library/jest-dom": "^6.6.3",
|
59
|
+
"@testing-library/react": "^16.1.0",
|
60
|
+
"@types/node": "^22.10.1",
|
61
|
+
"@types/react": "^19.0.1",
|
62
|
+
"@types/react-dom": "^19.0.2",
|
63
|
+
"@vitejs/plugin-react": "^4.3.4",
|
64
|
+
"copyfiles": "^2.4.1",
|
65
|
+
"globals": "^15.13.0",
|
66
|
+
"jsdom": "^25.0.1",
|
67
|
+
"storybook": "^8.4.7",
|
68
|
+
"typescript": "^5.7.2",
|
69
|
+
"vite": "^6.0.3",
|
70
|
+
"vite-tsconfig-paths": "^5.1.4",
|
71
|
+
"vitest": "^2.1.8"
|
72
|
+
}
|
73
|
+
}
|