@mittwald/flow-react-components 0.1.0-alpha.125 → 0.1.0-alpha.127
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/dist/{Accordion-Bszrsi-4.js → Accordion-ws4Zm_8c.js} +3 -3
- package/dist/Accordion.js +1 -1
- package/dist/Avatar.js +1 -1
- package/dist/Breadcrumb.js +2 -2
- package/dist/Button-54Eoq_9o.js +120 -0
- package/dist/Button.js +1 -1
- package/dist/ButtonGroup.js +1 -1
- package/dist/{Checkbox-CHueH9FZ.js → Checkbox-DKGPBvfB.js} +4 -4
- package/dist/Checkbox.js +1 -1
- package/dist/{CheckboxButton-Ch3zxviG.js → CheckboxButton-Dq2LZ-cZ.js} +2 -2
- package/dist/CheckboxButton.js +1 -1
- package/dist/CheckboxGroup.js +3 -3
- package/dist/{Content-xPY804ey.js → Content-CqXiq55k.js} +1 -1
- package/dist/Content.js +1 -1
- package/dist/{ContextMenu-ChxMleeO.js → ContextMenu-C0R1LgPo.js} +1 -1
- package/dist/ContextMenu.js +2 -2
- package/dist/CopyButton.js +4 -4
- package/dist/CounterLabel.js +18 -0
- package/dist/FieldDescription.js +2 -2
- package/dist/{FieldError-Bl_SXH5M.js → FieldError-B-DZZKmM.js} +3 -3
- package/dist/FieldError.js +1 -1
- package/dist/{Header-uOS96l33.js → Header-CNcwT0A-.js} +1 -1
- package/dist/Header.js +1 -1
- package/dist/{Heading-CSfMC_V6.js → Heading-BoOpj4Y4.js} +1 -1
- package/dist/Heading.js +1 -1
- package/dist/{Icon-DXq5lwp4.js → Icon-BwDd2GzD.js} +1 -1
- package/dist/Icon.js +1 -1
- package/dist/{IconCheck-BLXj9z4I.js → IconCheck-B3-gj5Z4.js} +1 -1
- package/dist/{IconCheckboxEmpty-CseDZ77J.js → IconCheckboxEmpty-DL20lMih.js} +1 -1
- package/dist/{IconCheckboxIndeterminate-BdEkNKEg.js → IconCheckboxIndeterminate-DEX0y_6i.js} +1 -1
- package/dist/{IconChevronDown-DGMWVrr9.js → IconChevronDown-xHLf7Pku.js} +1 -1
- package/dist/{IconChevronRight-Sd5qEgz9.js → IconChevronRight-D4wPdDfY.js} +1 -1
- package/dist/{IconClose-BuJDcvk1.js → IconClose-D5lPIOIs.js} +1 -1
- package/dist/{IconContextMenu-BtDEfs_U.js → IconContextMenu-Bf-D1luy.js} +1 -1
- package/dist/{IconCopy-Y4GR1Z03.js → IconCopy-B_1cohk1.js} +1 -1
- package/dist/{IconDanger-D3n1sEDX.js → IconDanger-9AHctjFi.js} +1 -1
- package/dist/{IconPending-C0IPPa0F.js → IconPending-DDMMJh8P.js} +1 -1
- package/dist/{IconPlus-BL-Zqbnv.js → IconPlus-DIghO9AS.js} +1 -1
- package/dist/{IconRadioOn-D0pCkmJ4.js → IconRadioOn-CQ6Wifij.js} +1 -1
- package/dist/{IconSearch-B9UA2NmT.js → IconSearch-DB2-YIVR.js} +1 -1
- package/dist/{IconSucceeded-B4DEKa6J.js → IconSucceeded-14t0usjT.js} +1 -1
- package/dist/{IconWarning-CmSsxAnH.js → IconWarning-Cxwzhq8-.js} +1 -1
- package/dist/Icons.js +16 -16
- package/dist/Image.js +1 -1
- package/dist/Initials.js +1 -1
- package/dist/InlineAlert.js +2 -2
- package/dist/{Label-CfPzBQtx.js → Label-BuZlD5RR.js} +1 -1
- package/dist/Label.js +1 -1
- package/dist/LayoutCard.js +1 -1
- package/dist/{Link-BNozTXoN.js → Link-CUdps5_K.js} +1 -1
- package/dist/Link.js +1 -1
- package/dist/List.js +12 -12
- package/dist/{LoadingSpinner-smFm5pXR.js → LoadingSpinner-qv2jHNni.js} +2 -2
- package/dist/LoadingSpinner.js +1 -1
- package/dist/{MenuItem-CgrBX4na.js → MenuItem-BJwqcaQl.js} +5 -5
- package/dist/MenuItem.js +1 -1
- package/dist/Modal.js +1 -1
- package/dist/Navigation.js +2 -2
- package/dist/NumberField.js +6 -6
- package/dist/OffCanvas.js +4 -4
- package/dist/RadioGroup.js +5 -5
- package/dist/Section.js +1 -1
- package/dist/Select.js +4 -4
- package/dist/StatusBadge.js +3 -3
- package/dist/{StatusIcon-CzfeqAZQ.js → StatusIcon-CvKvGN7C.js} +3 -3
- package/dist/StatusIcon.js +1 -1
- package/dist/Switch.js +5 -5
- package/dist/Table.js +40 -0
- package/dist/Tabs.js +7 -7
- package/dist/{Text-DOQUStg_.js → Text-cmKqNaYE.js} +1 -1
- package/dist/Text.js +1 -1
- package/dist/TextArea.js +2 -2
- package/dist/TextField.js +2 -2
- package/dist/{TextFieldBase-B6lQlCmE.js → TextFieldBase-CVi18EEt.js} +1 -1
- package/dist/{flowComponent-Cv_SURLH.js → flowComponent-DHBRxUvd.js} +12 -11
- package/dist/react-hook-form.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/types/components/CounterLabel/CounterLabel.d.ts +9 -0
- package/dist/types/components/CounterLabel/index.d.ts +4 -0
- package/dist/types/components/CounterLabel/stories/Default.stories.d.ts +10 -0
- package/dist/types/components/Table/Table.d.ts +6 -0
- package/dist/types/components/Table/components/TableBody/TableBody.d.ts +6 -0
- package/dist/types/components/Table/components/TableBody/index.d.ts +4 -0
- package/dist/types/components/Table/components/TableCell/TableCell.d.ts +6 -0
- package/dist/types/components/Table/components/TableCell/index.d.ts +4 -0
- package/dist/types/components/Table/components/TableColumn/TableColumn.d.ts +6 -0
- package/dist/types/components/Table/components/TableColumn/index.d.ts +4 -0
- package/dist/types/components/Table/components/TableHeader/TableHeader.d.ts +6 -0
- package/dist/types/components/Table/components/TableHeader/index.d.ts +4 -0
- package/dist/types/components/Table/components/TableRow/TableRow.d.ts +6 -0
- package/dist/types/components/Table/components/TableRow/index.d.ts +4 -0
- package/dist/types/components/Table/index.d.ts +9 -0
- package/dist/types/components/Table/stories/Default.stories.d.ts +7 -0
- package/dist/types/components/propTypes/index.d.ts +2 -0
- package/dist/types/lib/propsContext/propsContext.d.ts +1 -0
- package/package.json +12 -4
- package/dist/Button-tEtjVHFC.js +0 -116
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { PropsWithElementType } from '../../lib/types/props';
|
|
3
|
+
import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
|
|
4
|
+
|
|
5
|
+
export interface CounterLabelProps extends PropsWithElementType<"span">, FlowComponentProps<"CounterLabel"> {
|
|
6
|
+
count?: number;
|
|
7
|
+
}
|
|
8
|
+
export declare const CounterLabel: FC<CounterLabelProps>;
|
|
9
|
+
export default CounterLabel;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { CounterLabel } from '..';
|
|
3
|
+
|
|
4
|
+
declare const meta: Meta<typeof CounterLabel>;
|
|
5
|
+
export default meta;
|
|
6
|
+
type Story = StoryObj<typeof CounterLabel>;
|
|
7
|
+
export declare const Default: Story;
|
|
8
|
+
export declare const WithoutContent: Story;
|
|
9
|
+
export declare const WithHighNumber: Story;
|
|
10
|
+
export declare const WithButton: Story;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Table } from './Table';
|
|
2
|
+
|
|
3
|
+
export { type TableProps, Table } from './Table';
|
|
4
|
+
export * from './components/TableBody';
|
|
5
|
+
export * from './components/TableCell';
|
|
6
|
+
export * from './components/TableColumn';
|
|
7
|
+
export * from './components/TableHeader';
|
|
8
|
+
export * from './components/TableRow';
|
|
9
|
+
export default Table;
|
|
@@ -30,6 +30,7 @@ import { CheckboxButtonProps } from '../CheckboxButton';
|
|
|
30
30
|
import { TabsProps } from '../Tabs';
|
|
31
31
|
import { ModalProps } from '../Modal';
|
|
32
32
|
import { SectionProps } from '../Section';
|
|
33
|
+
import { CounterLabelProps } from '../CounterLabel';
|
|
33
34
|
|
|
34
35
|
export * from './types';
|
|
35
36
|
export interface FlowComponentPropsTypes {
|
|
@@ -43,6 +44,7 @@ export interface FlowComponentPropsTypes {
|
|
|
43
44
|
Content: ContentProps;
|
|
44
45
|
ContextMenu: ContextMenuProps;
|
|
45
46
|
CopyButton: CopyButtonProps;
|
|
47
|
+
CounterLabel: CounterLabelProps;
|
|
46
48
|
FieldDescription: FieldDescriptionProps;
|
|
47
49
|
FieldError: FieldErrorProps;
|
|
48
50
|
Header: HeaderProps;
|
|
@@ -11,6 +11,7 @@ export declare const propsContext: import('react').Context<Partial<{
|
|
|
11
11
|
Content: import('./types').ComponentPropsContext<"Content">;
|
|
12
12
|
ContextMenu: import('./types').ComponentPropsContext<"ContextMenu">;
|
|
13
13
|
CopyButton: import('./types').ComponentPropsContext<"CopyButton">;
|
|
14
|
+
CounterLabel: import('./types').ComponentPropsContext<"CounterLabel">;
|
|
14
15
|
FieldDescription: import('./types').ComponentPropsContext<"FieldDescription">;
|
|
15
16
|
FieldError: import('./types').ComponentPropsContext<"FieldError">;
|
|
16
17
|
Header: import('./types').ComponentPropsContext<"Header">;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.127",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -50,6 +50,10 @@
|
|
|
50
50
|
"types": "./dist/types/components/Content/index.d.ts",
|
|
51
51
|
"import": "./dist/Content.js"
|
|
52
52
|
},
|
|
53
|
+
"./CounterLabel": {
|
|
54
|
+
"types": "./dist/types/components/CounterLabel/index.d.ts",
|
|
55
|
+
"import": "./dist/CounterLabel.js"
|
|
56
|
+
},
|
|
53
57
|
"./IllustratedMessage": {
|
|
54
58
|
"types": "./dist/types/components/IllustratedMessage/index.d.ts",
|
|
55
59
|
"import": "./dist/IllustratedMessage.js"
|
|
@@ -198,6 +202,10 @@
|
|
|
198
202
|
"types": "./dist/types/components/Switch/index.d.ts",
|
|
199
203
|
"import": "./dist/Switch.js"
|
|
200
204
|
},
|
|
205
|
+
"./Table": {
|
|
206
|
+
"types": "./dist/types/components/Table/index.d.ts",
|
|
207
|
+
"import": "./dist/Table.js"
|
|
208
|
+
},
|
|
201
209
|
"./Tabs": {
|
|
202
210
|
"types": "./dist/types/components/Tabs/index.d.ts",
|
|
203
211
|
"import": "./dist/Tabs.js"
|
|
@@ -251,7 +259,7 @@
|
|
|
251
259
|
},
|
|
252
260
|
"dependencies": {
|
|
253
261
|
"@chakra-ui/live-region": "^2.1.0",
|
|
254
|
-
"@mittwald/react-tunnel": "^0.1.0-alpha.
|
|
262
|
+
"@mittwald/react-tunnel": "^0.1.0-alpha.127",
|
|
255
263
|
"@mittwald/react-use-promise": "^2.3.13",
|
|
256
264
|
"@react-aria/utils": "^3.24.1",
|
|
257
265
|
"@react-types/shared": "^3.23.1",
|
|
@@ -275,7 +283,7 @@
|
|
|
275
283
|
},
|
|
276
284
|
"devDependencies": {
|
|
277
285
|
"@faker-js/faker": "^8.4.1",
|
|
278
|
-
"@mittwald/flow-design-tokens": "^0.1.0-alpha.
|
|
286
|
+
"@mittwald/flow-design-tokens": "^0.1.0-alpha.127",
|
|
279
287
|
"@mittwald/react-use-promise": "^2.3.13",
|
|
280
288
|
"@nx/storybook": "^19.0.5",
|
|
281
289
|
"@storybook/addon-a11y": "^8.1.2",
|
|
@@ -351,5 +359,5 @@
|
|
|
351
359
|
"optional": true
|
|
352
360
|
}
|
|
353
361
|
},
|
|
354
|
-
"gitHead": "
|
|
362
|
+
"gitHead": "0344a25da2cf7f981180c9035758696649ae8236"
|
|
355
363
|
}
|
package/dist/Button-tEtjVHFC.js
DELETED
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
/* */
|
|
3
|
-
import o, { useEffect as x } from "react";
|
|
4
|
-
import * as F from "react-aria-components";
|
|
5
|
-
import E from "clsx";
|
|
6
|
-
import { C as y } from "./ClearPropsContext-CeCMjUK9.js";
|
|
7
|
-
import { P as h } from "./PropsContextProvider-ChpH8eF2.js";
|
|
8
|
-
import "@react-aria/utils";
|
|
9
|
-
import "./propsContext-CauylOgH.js";
|
|
10
|
-
import "remeda";
|
|
11
|
-
import "@tabler/icons-react";
|
|
12
|
-
import "./Icon-DXq5lwp4.js";
|
|
13
|
-
import { I as C, a as I } from "./IconSucceeded-B4DEKa6J.js";
|
|
14
|
-
import { W as u } from "./Wrap-DGT1h1o3.js";
|
|
15
|
-
import { T as N } from "./Text-DOQUStg_.js";
|
|
16
|
-
import { f as k } from "./flowComponent-Cv_SURLH.js";
|
|
17
|
-
import { L as A } from "./LoadingSpinner-smFm5pXR.js";
|
|
18
|
-
import { useLocalizedStringFormatter as D } from "react-aria";
|
|
19
|
-
import { useLiveRegion as T } from "@chakra-ui/live-region";
|
|
20
|
-
const z = "flow--button", B = "flow--button--content", L = "flow--button--state-icon", R = "flow--button--avatar", K = "flow--button--icon", U = "flow--button--text", W = "flow--button--is-succeeded", $ = "flow--button--is-failed", j = "flow--button--is-pending", q = "flow--button--plain", G = "flow--button--primary", H = "flow--button--solid", J = "flow--button--aria-disabled", M = "flow--button--accent", O = "flow--button--danger", Q = "flow--button--secondary", V = "flow--button--dark", X = "flow--button--light", Y = "flow--button--soft", t = {
|
|
21
|
-
button: z,
|
|
22
|
-
content: B,
|
|
23
|
-
stateIcon: L,
|
|
24
|
-
avatar: R,
|
|
25
|
-
icon: K,
|
|
26
|
-
text: U,
|
|
27
|
-
isSucceeded: W,
|
|
28
|
-
isFailed: $,
|
|
29
|
-
isPending: j,
|
|
30
|
-
plain: q,
|
|
31
|
-
"size-s": "flow--button--size-s",
|
|
32
|
-
primary: G,
|
|
33
|
-
solid: H,
|
|
34
|
-
ariaDisabled: J,
|
|
35
|
-
accent: M,
|
|
36
|
-
danger: O,
|
|
37
|
-
secondary: Q,
|
|
38
|
-
dark: V,
|
|
39
|
-
light: X,
|
|
40
|
-
soft: Y
|
|
41
|
-
}, Z = {
|
|
42
|
-
"de-DE": {
|
|
43
|
-
"action.isFailed": "Fehlgeschlagen",
|
|
44
|
-
"action.isPending": "Ausstehend...",
|
|
45
|
-
"action.isSucceeded": "Erfolgreich"
|
|
46
|
-
},
|
|
47
|
-
"en-EN": {
|
|
48
|
-
"action.isFailed": "Failed",
|
|
49
|
-
"action.isPending": "Pending...",
|
|
50
|
-
"action.isSucceeded": "Succeeded"
|
|
51
|
-
}
|
|
52
|
-
}, _ = (e, r = {}) => {
|
|
53
|
-
const i = D(Z), {
|
|
54
|
-
isPendingText: a = i.format("action.isPending"),
|
|
55
|
-
isSucceededText: c = i.format("action.isSucceeded"),
|
|
56
|
-
isFailedText: s = i.format("action.isFailed")
|
|
57
|
-
} = r, n = T({
|
|
58
|
-
"aria-live": "polite",
|
|
59
|
-
"aria-atomic": !1,
|
|
60
|
-
"aria-relevant": "text additions",
|
|
61
|
-
role: "status"
|
|
62
|
-
});
|
|
63
|
-
x(() => {
|
|
64
|
-
e === "isPending" ? n.speak(a) : e === "isSucceeded" ? n.speak(c) : e === "isFailed" && n.speak(s);
|
|
65
|
-
}, [e]);
|
|
66
|
-
}, ee = (e) => ((e.isPending || e.isSucceeded || e.isFailed || e["aria-disabled"]) && (e = { ...e }, e.onPress = void 0, e.onPressStart = void 0, e.onPressEnd = void 0, e.onPressChange = void 0, e.onPressUp = void 0, e.onKeyDown = void 0, e.onKeyUp = void 0), e), we = k("Button", (e) => {
|
|
67
|
-
e = ee(e);
|
|
68
|
-
const {
|
|
69
|
-
color: r = "primary",
|
|
70
|
-
variant: i = "solid",
|
|
71
|
-
children: a,
|
|
72
|
-
className: c,
|
|
73
|
-
size: s = "m",
|
|
74
|
-
isPending: n,
|
|
75
|
-
isSucceeded: d,
|
|
76
|
-
isFailed: l,
|
|
77
|
-
"aria-disabled": b,
|
|
78
|
-
refProp: g,
|
|
79
|
-
unstyled: m,
|
|
80
|
-
...P
|
|
81
|
-
} = e, w = m ? c : E(
|
|
82
|
-
t.button,
|
|
83
|
-
n && t.isPending,
|
|
84
|
-
d && t.isSucceeded,
|
|
85
|
-
l && t.isFailed,
|
|
86
|
-
t[`size-${s}`],
|
|
87
|
-
t[r],
|
|
88
|
-
t[i],
|
|
89
|
-
c,
|
|
90
|
-
/**
|
|
91
|
-
* Workaround warning: The Aria.Button does not support "aria-disabled"
|
|
92
|
-
* by now, so this Button will be visually disabled via CSS.
|
|
93
|
-
*/
|
|
94
|
-
b && t.ariaDisabled
|
|
95
|
-
);
|
|
96
|
-
_(
|
|
97
|
-
n ? "isPending" : d ? "isSucceeded" : l ? "isFailed" : "isIdle"
|
|
98
|
-
);
|
|
99
|
-
const v = {
|
|
100
|
-
Icon: {
|
|
101
|
-
className: t.icon,
|
|
102
|
-
"aria-hidden": !0,
|
|
103
|
-
size: s
|
|
104
|
-
},
|
|
105
|
-
Text: {
|
|
106
|
-
className: t.text
|
|
107
|
-
},
|
|
108
|
-
Avatar: {
|
|
109
|
-
className: t.avatar
|
|
110
|
-
}
|
|
111
|
-
}, f = d ? C : l ? I : n ? A : void 0, p = f && /* @__PURE__ */ o.createElement(f, { size: s, className: t.stateIcon }), S = typeof a == "string";
|
|
112
|
-
return /* @__PURE__ */ o.createElement(y, null, /* @__PURE__ */ o.createElement(F.Button, { className: w, ref: g, ...P }, /* @__PURE__ */ o.createElement(h, { props: v }, /* @__PURE__ */ o.createElement(u, { if: !m }, /* @__PURE__ */ o.createElement("span", { className: t.content }, /* @__PURE__ */ o.createElement(u, { if: S }, /* @__PURE__ */ o.createElement(N, null, a))))), p));
|
|
113
|
-
});
|
|
114
|
-
export {
|
|
115
|
-
we as B
|
|
116
|
-
};
|