@ttoss/components 1.27.3 → 1.28.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 +67 -4
- package/dist/esm/index.js +47 -47
- package/dist/index.d.ts +25 -21
- package/dist/index.js +48 -46
- package/package.json +9 -9
- package/src/components/{Accordion/Accordion.tsx → Accordion.tsx} +1 -1
- package/src/components/{InstallPwa/InstallPwaUi.tsx → InstallPwa.tsx} +34 -0
- package/src/components/{Modal/Modal.tsx → Modal.tsx} +15 -17
- package/src/components/Toast.tsx +37 -0
- package/src/index.ts +4 -4
- package/src/components/InstallPwa/InstallPwa.tsx +0 -34
- package/src/components/Toast/Toast.tsx +0 -35
- package/src/index.spec.tsx +0 -11
package/README.md
CHANGED
|
@@ -2,14 +2,77 @@
|
|
|
2
2
|
|
|
3
3
|
## About
|
|
4
4
|
|
|
5
|
-
<strong>@ttoss/components</strong> is a set of React components that you can use to build your apps using ttoss
|
|
5
|
+
<strong>@ttoss/components</strong> is a set of React components that you can use to build your apps using ttoss ecosystem.
|
|
6
6
|
|
|
7
7
|
## Getting Started
|
|
8
8
|
|
|
9
9
|
### Install @ttoss/components
|
|
10
10
|
|
|
11
11
|
```shell
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
pnpm add @ttoss/components @ttoss/ui
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Components
|
|
16
|
+
|
|
17
|
+
You can check all the components of the library `@ttoss/ui` on the [Storybook](https://storybook.ttoss.dev/?path=/story/components).
|
|
18
|
+
|
|
19
|
+
### Modal
|
|
20
|
+
|
|
21
|
+
Modal uses [react-modal](https://reactcommunity.org/react-modal/) under the hood, so the props are the same. The only difference is that the styles are theme-aware. You can [style the modal](https://reactcommunity.org/react-modal/styles/) using theme tokens, except that [array as value](https://theme-ui.com/sx-prop#responsive-values) don't work.
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { Modal } from '@ttoss/components';
|
|
25
|
+
import { Box, Button, Flex, Text } from '@ttoss/ui';
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* See https://reactcommunity.org/react-modal/accessibility/#app-element
|
|
29
|
+
*/
|
|
30
|
+
// Modal.setAppElement('#root'); // You can set the app element here or in prop `appElement`.
|
|
31
|
+
|
|
32
|
+
const Component = () => {
|
|
33
|
+
const [isOpen, setIsOpen] = React.useState(false);
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<Box id="modal-root">
|
|
37
|
+
<Modal
|
|
38
|
+
isOpen={isOpen}
|
|
39
|
+
onAfterOpen={action('onAfterOpen')}
|
|
40
|
+
onAfterClose={action('onAfterClose')}
|
|
41
|
+
onRequestClose={() => {
|
|
42
|
+
action('onRequestClose')();
|
|
43
|
+
setIsOpen(false);
|
|
44
|
+
}}
|
|
45
|
+
appElement={document.getElementById('modal-root') as HTMLElement}
|
|
46
|
+
style={{
|
|
47
|
+
overlay: {
|
|
48
|
+
backgroundColor: 'primary',
|
|
49
|
+
},
|
|
50
|
+
content: {
|
|
51
|
+
backgroundColor: 'secondary',
|
|
52
|
+
padding: ['lg', 'xl'], // Array as value don't work.
|
|
53
|
+
},
|
|
54
|
+
}}
|
|
55
|
+
>
|
|
56
|
+
<Flex>
|
|
57
|
+
<Text>This is a modal.</Text>
|
|
58
|
+
<Text>Here is the content.</Text>
|
|
59
|
+
<Button
|
|
60
|
+
onClick={() => {
|
|
61
|
+
setIsOpen(false);
|
|
62
|
+
}}
|
|
63
|
+
>
|
|
64
|
+
Close Modal
|
|
65
|
+
</Button>
|
|
66
|
+
</Flex>
|
|
67
|
+
</Modal>
|
|
68
|
+
<Button
|
|
69
|
+
onClick={() => {
|
|
70
|
+
setIsOpen(true);
|
|
71
|
+
}}
|
|
72
|
+
>
|
|
73
|
+
Open Modal
|
|
74
|
+
</Button>
|
|
75
|
+
</Box>
|
|
76
|
+
);
|
|
77
|
+
};
|
|
15
78
|
```
|
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
2
|
|
|
3
|
-
// src/components/Accordion
|
|
3
|
+
// src/components/Accordion.tsx
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
import { AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel, Accordion as ReactAccessibleAccordion } from "react-accessible-accordion";
|
|
6
6
|
import { Box, useTheme } from "@ttoss/ui";
|
|
@@ -24,7 +24,7 @@ var Accordion = ({
|
|
|
24
24
|
marginBottom: 3
|
|
25
25
|
},
|
|
26
26
|
".accordion__heading": {
|
|
27
|
-
padding:
|
|
27
|
+
padding: "md",
|
|
28
28
|
border: "1px solid",
|
|
29
29
|
borderColor: "black"
|
|
30
30
|
},
|
|
@@ -55,10 +55,8 @@ Accordion.ItemButton = AccordionItemButton;
|
|
|
55
55
|
Accordion.ItemHeading = AccordionItemHeading;
|
|
56
56
|
Accordion.ItemPanel = AccordionItemPanel;
|
|
57
57
|
|
|
58
|
-
// src/components/InstallPwa
|
|
59
|
-
import * as
|
|
60
|
-
|
|
61
|
-
// src/components/InstallPwa/InstallPwaUi.tsx
|
|
58
|
+
// src/components/InstallPwa.tsx
|
|
59
|
+
import * as React2 from "react";
|
|
62
60
|
import { Button, Flex, Text } from "@ttoss/ui";
|
|
63
61
|
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
64
62
|
var InstallPwaUi = ({
|
|
@@ -92,20 +90,19 @@ var InstallPwaUi = ({
|
|
|
92
90
|
})
|
|
93
91
|
});
|
|
94
92
|
};
|
|
95
|
-
|
|
96
|
-
// src/components/InstallPwa/InstallPwa.tsx
|
|
97
|
-
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
98
93
|
var InstallPwa = () => {
|
|
99
|
-
const [supportsPwa, setSupportsPwa] =
|
|
100
|
-
const [promptInstall, setPromptInstall] =
|
|
101
|
-
|
|
94
|
+
const [supportsPwa, setSupportsPwa] = React2.useState(false);
|
|
95
|
+
const [promptInstall, setPromptInstall] = React2.useState(null);
|
|
96
|
+
React2.useEffect(() => {
|
|
102
97
|
const handler = e => {
|
|
103
98
|
e.preventDefault();
|
|
104
99
|
setSupportsPwa(true);
|
|
105
100
|
setPromptInstall(e);
|
|
106
101
|
};
|
|
107
102
|
window.addEventListener("beforeinstallprompt", handler);
|
|
108
|
-
return () =>
|
|
103
|
+
return () => {
|
|
104
|
+
return window.removeEventListener("transitionend", handler);
|
|
105
|
+
};
|
|
109
106
|
}, []);
|
|
110
107
|
const onInstall = e => {
|
|
111
108
|
e.preventDefault();
|
|
@@ -117,15 +114,16 @@ var InstallPwa = () => {
|
|
|
117
114
|
if (!supportsPwa) {
|
|
118
115
|
return null;
|
|
119
116
|
}
|
|
120
|
-
return /* @__PURE__ */
|
|
117
|
+
return /* @__PURE__ */jsx2(InstallPwaUi, {
|
|
121
118
|
onInstall
|
|
122
119
|
});
|
|
123
120
|
};
|
|
124
121
|
|
|
125
|
-
// src/components/Modal
|
|
122
|
+
// src/components/Modal.tsx
|
|
123
|
+
import { css as transformStyleObject2 } from "@theme-ui/css";
|
|
126
124
|
import { useResponsiveValue, useTheme as useTheme2 } from "@ttoss/ui";
|
|
127
125
|
import ReactModal from "react-modal";
|
|
128
|
-
import { jsx as
|
|
126
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
129
127
|
ReactModal.defaultStyles = {
|
|
130
128
|
overlay: {},
|
|
131
129
|
content: {}
|
|
@@ -134,27 +132,30 @@ var Modal = props => {
|
|
|
134
132
|
const {
|
|
135
133
|
theme
|
|
136
134
|
} = useTheme2();
|
|
137
|
-
const
|
|
135
|
+
const space = theme.space;
|
|
136
|
+
const padding = useResponsiveValue([space?.["lg"], space?.["xl"], space?.["xl"]]) || 0;
|
|
138
137
|
const style = {
|
|
139
|
-
overlay: {
|
|
138
|
+
overlay: transformStyleObject2({
|
|
140
139
|
position: "fixed",
|
|
141
140
|
top: 0,
|
|
142
141
|
left: 0,
|
|
143
142
|
right: 0,
|
|
144
143
|
bottom: 0,
|
|
145
|
-
backgroundColor: "rgba(
|
|
144
|
+
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
146
145
|
display: "flex",
|
|
147
146
|
justifyContent: "center",
|
|
148
147
|
alignItems: "center",
|
|
149
|
-
padding,
|
|
150
148
|
...props.style?.overlay
|
|
151
|
-
},
|
|
152
|
-
content: {
|
|
149
|
+
})(theme),
|
|
150
|
+
content: transformStyleObject2({
|
|
153
151
|
/**
|
|
154
152
|
* Theme
|
|
155
153
|
*/
|
|
156
|
-
backgroundColor:
|
|
154
|
+
backgroundColor: "surface",
|
|
157
155
|
padding,
|
|
156
|
+
border: "default",
|
|
157
|
+
borderColor: "surface",
|
|
158
|
+
borderRadius: "default",
|
|
158
159
|
/**
|
|
159
160
|
* General
|
|
160
161
|
*/
|
|
@@ -165,48 +166,47 @@ var Modal = props => {
|
|
|
165
166
|
left: "0px",
|
|
166
167
|
right: "0px",
|
|
167
168
|
bottom: "0px",
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
display: "flex",
|
|
171
|
-
flexDirection: "column",
|
|
172
|
-
alignItems: "center",
|
|
169
|
+
maxHeight: "90%",
|
|
170
|
+
maxWidth: "90%",
|
|
173
171
|
...props.style?.content
|
|
174
|
-
}
|
|
172
|
+
})(theme)
|
|
175
173
|
};
|
|
176
|
-
return /* @__PURE__ */
|
|
174
|
+
return /* @__PURE__ */jsx3(ReactModal, {
|
|
177
175
|
...props,
|
|
178
176
|
style
|
|
179
177
|
});
|
|
180
178
|
};
|
|
181
179
|
Modal.setAppElement = ReactModal.setAppElement;
|
|
182
180
|
|
|
183
|
-
// src/components/Toast
|
|
184
|
-
import * as
|
|
181
|
+
// src/components/Toast.tsx
|
|
182
|
+
import * as React3 from "react";
|
|
185
183
|
import { Box as Box2 } from "@ttoss/ui";
|
|
186
184
|
import { ToastContainer as ReactToastifyToastContainer, toast } from "react-toastify";
|
|
187
185
|
import { injectStyle } from "react-toastify/dist/inject-style";
|
|
188
|
-
import { jsx as
|
|
186
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
189
187
|
var ToastContainer = props => {
|
|
190
|
-
|
|
188
|
+
React3.useEffect(() => {
|
|
191
189
|
injectStyle();
|
|
192
190
|
}, []);
|
|
193
|
-
return /* @__PURE__ */
|
|
191
|
+
return /* @__PURE__ */jsx4(Box2, {
|
|
194
192
|
sx: ({
|
|
195
193
|
colors,
|
|
196
194
|
fonts
|
|
197
|
-
}) =>
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
195
|
+
}) => {
|
|
196
|
+
return {
|
|
197
|
+
"--toastify-color-light": "#fff",
|
|
198
|
+
"--toastify-color-dark": "#121212",
|
|
199
|
+
"--toastify-color-info": colors?.info || "#3498db",
|
|
200
|
+
"--toastify-color-success": colors?.success || "#07bc0c",
|
|
201
|
+
"--toastify-color-warning": "#f1c40f",
|
|
202
|
+
"--toastify-color-error": "#e74c3c",
|
|
203
|
+
"--toastify-color-progress-light": `linear-gradient(to right, ${colors?.primary}, ${colors?.secondary})`,
|
|
204
|
+
"--toastify-font-family": fonts.body
|
|
205
|
+
};
|
|
206
|
+
},
|
|
207
|
+
children: /* @__PURE__ */jsx4(ReactToastifyToastContainer, {
|
|
208
208
|
...props
|
|
209
209
|
})
|
|
210
210
|
});
|
|
211
211
|
};
|
|
212
|
-
export { Accordion, InstallPwa, Modal, ToastContainer, toast };
|
|
212
|
+
export { Accordion, InstallPwa, InstallPwaUi, Modal, ToastContainer, toast };
|
package/dist/index.d.ts
CHANGED
|
@@ -38,15 +38,15 @@ declare const Accordion: {
|
|
|
38
38
|
accessKey?: string | undefined;
|
|
39
39
|
autoFocus?: boolean | undefined;
|
|
40
40
|
className?: string | undefined;
|
|
41
|
-
contentEditable?: "inherit" | (boolean | "
|
|
41
|
+
contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
|
|
42
42
|
contextMenu?: string | undefined;
|
|
43
43
|
dir?: string | undefined;
|
|
44
|
-
draggable?: (boolean | "
|
|
44
|
+
draggable?: (boolean | "true" | "false") | undefined;
|
|
45
45
|
hidden?: boolean | undefined;
|
|
46
46
|
lang?: string | undefined;
|
|
47
47
|
nonce?: string | undefined;
|
|
48
48
|
placeholder?: string | undefined;
|
|
49
|
-
spellCheck?: (boolean | "
|
|
49
|
+
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
50
50
|
translate?: "yes" | "no" | undefined;
|
|
51
51
|
radioGroup?: string | undefined;
|
|
52
52
|
about?: string | undefined;
|
|
@@ -75,44 +75,44 @@ declare const Accordion: {
|
|
|
75
75
|
inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
76
76
|
is?: string | undefined;
|
|
77
77
|
'aria-activedescendant'?: string | undefined;
|
|
78
|
-
'aria-atomic'?: (boolean | "
|
|
79
|
-
'aria-autocomplete'?: "none" | "
|
|
80
|
-
'aria-busy'?: (boolean | "
|
|
81
|
-
'aria-checked'?: boolean | "
|
|
78
|
+
'aria-atomic'?: (boolean | "true" | "false") | undefined;
|
|
79
|
+
'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
|
|
80
|
+
'aria-busy'?: (boolean | "true" | "false") | undefined;
|
|
81
|
+
'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
|
|
82
82
|
'aria-colcount'?: number | undefined;
|
|
83
83
|
'aria-colindex'?: number | undefined;
|
|
84
84
|
'aria-colspan'?: number | undefined;
|
|
85
|
-
'aria-current'?: boolean | "time" | "page" | "
|
|
85
|
+
'aria-current'?: boolean | "time" | "page" | "true" | "false" | "step" | "location" | "date" | undefined;
|
|
86
86
|
'aria-describedby'?: string | undefined;
|
|
87
87
|
'aria-details'?: string | undefined;
|
|
88
|
-
'aria-dropeffect'?: "link" | "none" | "copy" | "
|
|
88
|
+
'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
|
|
89
89
|
'aria-errormessage'?: string | undefined;
|
|
90
90
|
'aria-flowto'?: string | undefined;
|
|
91
|
-
'aria-grabbed'?: (boolean | "
|
|
92
|
-
'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "
|
|
93
|
-
'aria-hidden'?: (boolean | "
|
|
94
|
-
'aria-invalid'?: boolean | "
|
|
91
|
+
'aria-grabbed'?: (boolean | "true" | "false") | undefined;
|
|
92
|
+
'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree" | undefined;
|
|
93
|
+
'aria-hidden'?: (boolean | "true" | "false") | undefined;
|
|
94
|
+
'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
|
|
95
95
|
'aria-keyshortcuts'?: string | undefined;
|
|
96
96
|
'aria-label'?: string | undefined;
|
|
97
97
|
'aria-labelledby'?: string | undefined;
|
|
98
98
|
'aria-level'?: number | undefined;
|
|
99
99
|
'aria-live'?: "off" | "assertive" | "polite" | undefined;
|
|
100
|
-
'aria-modal'?: (boolean | "
|
|
101
|
-
'aria-multiline'?: (boolean | "
|
|
102
|
-
'aria-multiselectable'?: (boolean | "
|
|
100
|
+
'aria-modal'?: (boolean | "true" | "false") | undefined;
|
|
101
|
+
'aria-multiline'?: (boolean | "true" | "false") | undefined;
|
|
102
|
+
'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
|
|
103
103
|
'aria-orientation'?: "horizontal" | "vertical" | undefined;
|
|
104
104
|
'aria-owns'?: string | undefined;
|
|
105
105
|
'aria-placeholder'?: string | undefined;
|
|
106
106
|
'aria-posinset'?: number | undefined;
|
|
107
|
-
'aria-pressed'?: boolean | "
|
|
108
|
-
'aria-readonly'?: (boolean | "
|
|
107
|
+
'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
|
|
108
|
+
'aria-readonly'?: (boolean | "true" | "false") | undefined;
|
|
109
109
|
'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
110
|
-
'aria-required'?: (boolean | "
|
|
110
|
+
'aria-required'?: (boolean | "true" | "false") | undefined;
|
|
111
111
|
'aria-roledescription'?: string | undefined;
|
|
112
112
|
'aria-rowcount'?: number | undefined;
|
|
113
113
|
'aria-rowindex'?: number | undefined;
|
|
114
114
|
'aria-rowspan'?: number | undefined;
|
|
115
|
-
'aria-selected'?: (boolean | "
|
|
115
|
+
'aria-selected'?: (boolean | "true" | "false") | undefined;
|
|
116
116
|
'aria-setsize'?: number | undefined;
|
|
117
117
|
'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
|
|
118
118
|
'aria-valuemax'?: number | undefined;
|
|
@@ -292,6 +292,10 @@ declare const Accordion: {
|
|
|
292
292
|
}) => JSX.Element;
|
|
293
293
|
};
|
|
294
294
|
|
|
295
|
+
type InstallPwaUiProps = {
|
|
296
|
+
onInstall: React.MouseEventHandler<HTMLButtonElement>;
|
|
297
|
+
};
|
|
298
|
+
declare const InstallPwaUi: ({ onInstall }: InstallPwaUiProps) => JSX.Element;
|
|
295
299
|
declare const InstallPwa: () => JSX.Element | null;
|
|
296
300
|
|
|
297
301
|
type ModalProps = ReactModal.Props;
|
|
@@ -302,4 +306,4 @@ declare const Modal: {
|
|
|
302
306
|
|
|
303
307
|
declare const ToastContainer: (props: ToastContainerProps) => JSX.Element;
|
|
304
308
|
|
|
305
|
-
export { Accordion, AccordionProps, InstallPwa, Modal, ModalProps, ToastContainer };
|
|
309
|
+
export { Accordion, AccordionProps, InstallPwa, InstallPwaUi, InstallPwaUiProps, Modal, ModalProps, ToastContainer };
|
package/dist/index.js
CHANGED
|
@@ -40,13 +40,14 @@ var src_exports = {};
|
|
|
40
40
|
__export(src_exports, {
|
|
41
41
|
Accordion: () => Accordion,
|
|
42
42
|
InstallPwa: () => InstallPwa,
|
|
43
|
+
InstallPwaUi: () => InstallPwaUi,
|
|
43
44
|
Modal: () => Modal,
|
|
44
45
|
ToastContainer: () => ToastContainer,
|
|
45
46
|
toast: () => import_react_toastify.toast
|
|
46
47
|
});
|
|
47
48
|
module.exports = __toCommonJS(src_exports);
|
|
48
49
|
|
|
49
|
-
// src/components/Accordion
|
|
50
|
+
// src/components/Accordion.tsx
|
|
50
51
|
var React = __toESM(require("react"));
|
|
51
52
|
var import_react_accessible_accordion = require("react-accessible-accordion");
|
|
52
53
|
var import_ui = require("@ttoss/ui");
|
|
@@ -70,7 +71,7 @@ var Accordion = ({
|
|
|
70
71
|
marginBottom: 3
|
|
71
72
|
},
|
|
72
73
|
".accordion__heading": {
|
|
73
|
-
padding:
|
|
74
|
+
padding: "md",
|
|
74
75
|
border: "1px solid",
|
|
75
76
|
borderColor: "black"
|
|
76
77
|
},
|
|
@@ -101,10 +102,8 @@ Accordion.ItemButton = import_react_accessible_accordion.AccordionItemButton;
|
|
|
101
102
|
Accordion.ItemHeading = import_react_accessible_accordion.AccordionItemHeading;
|
|
102
103
|
Accordion.ItemPanel = import_react_accessible_accordion.AccordionItemPanel;
|
|
103
104
|
|
|
104
|
-
// src/components/InstallPwa
|
|
105
|
-
var
|
|
106
|
-
|
|
107
|
-
// src/components/InstallPwa/InstallPwaUi.tsx
|
|
105
|
+
// src/components/InstallPwa.tsx
|
|
106
|
+
var React2 = __toESM(require("react"));
|
|
108
107
|
var import_ui2 = require("@ttoss/ui");
|
|
109
108
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
110
109
|
var InstallPwaUi = ({
|
|
@@ -138,20 +137,19 @@ var InstallPwaUi = ({
|
|
|
138
137
|
})
|
|
139
138
|
});
|
|
140
139
|
};
|
|
141
|
-
|
|
142
|
-
// src/components/InstallPwa/InstallPwa.tsx
|
|
143
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
144
140
|
var InstallPwa = () => {
|
|
145
|
-
const [supportsPwa, setSupportsPwa] =
|
|
146
|
-
const [promptInstall, setPromptInstall] =
|
|
147
|
-
|
|
141
|
+
const [supportsPwa, setSupportsPwa] = React2.useState(false);
|
|
142
|
+
const [promptInstall, setPromptInstall] = React2.useState(null);
|
|
143
|
+
React2.useEffect(() => {
|
|
148
144
|
const handler = e => {
|
|
149
145
|
e.preventDefault();
|
|
150
146
|
setSupportsPwa(true);
|
|
151
147
|
setPromptInstall(e);
|
|
152
148
|
};
|
|
153
149
|
window.addEventListener("beforeinstallprompt", handler);
|
|
154
|
-
return () =>
|
|
150
|
+
return () => {
|
|
151
|
+
return window.removeEventListener("transitionend", handler);
|
|
152
|
+
};
|
|
155
153
|
}, []);
|
|
156
154
|
const onInstall = e => {
|
|
157
155
|
e.preventDefault();
|
|
@@ -163,15 +161,16 @@ var InstallPwa = () => {
|
|
|
163
161
|
if (!supportsPwa) {
|
|
164
162
|
return null;
|
|
165
163
|
}
|
|
166
|
-
return /* @__PURE__ */(0,
|
|
164
|
+
return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(InstallPwaUi, {
|
|
167
165
|
onInstall
|
|
168
166
|
});
|
|
169
167
|
};
|
|
170
168
|
|
|
171
|
-
// src/components/Modal
|
|
169
|
+
// src/components/Modal.tsx
|
|
170
|
+
var import_css3 = require("@theme-ui/css");
|
|
172
171
|
var import_ui3 = require("@ttoss/ui");
|
|
173
172
|
var import_react_modal = __toESM(require("react-modal"));
|
|
174
|
-
var
|
|
173
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
175
174
|
import_react_modal.default.defaultStyles = {
|
|
176
175
|
overlay: {},
|
|
177
176
|
content: {}
|
|
@@ -180,27 +179,30 @@ var Modal = props => {
|
|
|
180
179
|
const {
|
|
181
180
|
theme
|
|
182
181
|
} = (0, import_ui3.useTheme)();
|
|
183
|
-
const
|
|
182
|
+
const space = theme.space;
|
|
183
|
+
const padding = (0, import_ui3.useResponsiveValue)([space?.["lg"], space?.["xl"], space?.["xl"]]) || 0;
|
|
184
184
|
const style = {
|
|
185
|
-
overlay: {
|
|
185
|
+
overlay: (0, import_css3.css)({
|
|
186
186
|
position: "fixed",
|
|
187
187
|
top: 0,
|
|
188
188
|
left: 0,
|
|
189
189
|
right: 0,
|
|
190
190
|
bottom: 0,
|
|
191
|
-
backgroundColor: "rgba(
|
|
191
|
+
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
192
192
|
display: "flex",
|
|
193
193
|
justifyContent: "center",
|
|
194
194
|
alignItems: "center",
|
|
195
|
-
padding,
|
|
196
195
|
...props.style?.overlay
|
|
197
|
-
},
|
|
198
|
-
content: {
|
|
196
|
+
})(theme),
|
|
197
|
+
content: (0, import_css3.css)({
|
|
199
198
|
/**
|
|
200
199
|
* Theme
|
|
201
200
|
*/
|
|
202
|
-
backgroundColor:
|
|
201
|
+
backgroundColor: "surface",
|
|
203
202
|
padding,
|
|
203
|
+
border: "default",
|
|
204
|
+
borderColor: "surface",
|
|
205
|
+
borderRadius: "default",
|
|
204
206
|
/**
|
|
205
207
|
* General
|
|
206
208
|
*/
|
|
@@ -211,46 +213,45 @@ var Modal = props => {
|
|
|
211
213
|
left: "0px",
|
|
212
214
|
right: "0px",
|
|
213
215
|
bottom: "0px",
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
display: "flex",
|
|
217
|
-
flexDirection: "column",
|
|
218
|
-
alignItems: "center",
|
|
216
|
+
maxHeight: "90%",
|
|
217
|
+
maxWidth: "90%",
|
|
219
218
|
...props.style?.content
|
|
220
|
-
}
|
|
219
|
+
})(theme)
|
|
221
220
|
};
|
|
222
|
-
return /* @__PURE__ */(0,
|
|
221
|
+
return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_react_modal.default, {
|
|
223
222
|
...props,
|
|
224
223
|
style
|
|
225
224
|
});
|
|
226
225
|
};
|
|
227
226
|
Modal.setAppElement = import_react_modal.default.setAppElement;
|
|
228
227
|
|
|
229
|
-
// src/components/Toast
|
|
230
|
-
var
|
|
228
|
+
// src/components/Toast.tsx
|
|
229
|
+
var React3 = __toESM(require("react"));
|
|
231
230
|
var import_ui4 = require("@ttoss/ui");
|
|
232
231
|
var import_react_toastify = require("react-toastify");
|
|
233
232
|
var import_inject_style = require("react-toastify/dist/inject-style");
|
|
234
|
-
var
|
|
233
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
235
234
|
var ToastContainer = props => {
|
|
236
|
-
|
|
235
|
+
React3.useEffect(() => {
|
|
237
236
|
(0, import_inject_style.injectStyle)();
|
|
238
237
|
}, []);
|
|
239
|
-
return /* @__PURE__ */(0,
|
|
238
|
+
return /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Box, {
|
|
240
239
|
sx: ({
|
|
241
240
|
colors,
|
|
242
241
|
fonts
|
|
243
|
-
}) =>
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
242
|
+
}) => {
|
|
243
|
+
return {
|
|
244
|
+
"--toastify-color-light": "#fff",
|
|
245
|
+
"--toastify-color-dark": "#121212",
|
|
246
|
+
"--toastify-color-info": colors?.info || "#3498db",
|
|
247
|
+
"--toastify-color-success": colors?.success || "#07bc0c",
|
|
248
|
+
"--toastify-color-warning": "#f1c40f",
|
|
249
|
+
"--toastify-color-error": "#e74c3c",
|
|
250
|
+
"--toastify-color-progress-light": `linear-gradient(to right, ${colors?.primary}, ${colors?.secondary})`,
|
|
251
|
+
"--toastify-font-family": fonts.body
|
|
252
|
+
};
|
|
253
|
+
},
|
|
254
|
+
children: /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_react_toastify.ToastContainer, {
|
|
254
255
|
...props
|
|
255
256
|
})
|
|
256
257
|
});
|
|
@@ -259,6 +260,7 @@ var ToastContainer = props => {
|
|
|
259
260
|
0 && (module.exports = {
|
|
260
261
|
Accordion,
|
|
261
262
|
InstallPwa,
|
|
263
|
+
InstallPwaUi,
|
|
262
264
|
Modal,
|
|
263
265
|
ToastContainer,
|
|
264
266
|
toast
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ttoss/components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.28.0",
|
|
4
4
|
"description": "React components.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"author": "ttoss",
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
"sideEffects": false,
|
|
22
22
|
"typings": "dist/index.d.ts",
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@emotion/css": "^11.10.
|
|
25
|
-
"@theme-ui/css": "^0.15.
|
|
26
|
-
"@types/react-modal": "^3.
|
|
24
|
+
"@emotion/css": "^11.10.8",
|
|
25
|
+
"@theme-ui/css": "^0.15.7",
|
|
26
|
+
"@types/react-modal": "^3.16.0",
|
|
27
27
|
"react-accessible-accordion": "^5.0.0",
|
|
28
28
|
"react-modal": "^3.16.1",
|
|
29
|
-
"react-toastify": "^9.1.
|
|
29
|
+
"react-toastify": "^9.1.2"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"@ttoss/ui": "^",
|
|
@@ -34,10 +34,10 @@
|
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@ttoss/config": "^1.30.0",
|
|
37
|
-
"@ttoss/test-utils": "^1.
|
|
38
|
-
"@ttoss/ui": "^1.
|
|
37
|
+
"@ttoss/test-utils": "^1.23.0",
|
|
38
|
+
"@ttoss/ui": "^1.36.0",
|
|
39
39
|
"@types/jest": "^29.5.1",
|
|
40
|
-
"@types/react": "^18.2.
|
|
40
|
+
"@types/react": "^18.2.5",
|
|
41
41
|
"jest": "^29.5.0",
|
|
42
42
|
"tsup": "^6.7.0"
|
|
43
43
|
},
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"publishConfig": {
|
|
49
49
|
"access": "public"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "2b412ebe0b92fbccb102636f843f84bd7616b43b"
|
|
52
52
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import { Button, Flex, Text } from '@ttoss/ui';
|
|
2
3
|
|
|
3
4
|
export type InstallPwaUiProps = {
|
|
@@ -33,3 +34,36 @@ export const InstallPwaUi = ({ onInstall }: InstallPwaUiProps) => {
|
|
|
33
34
|
</Flex>
|
|
34
35
|
);
|
|
35
36
|
};
|
|
37
|
+
|
|
38
|
+
export const InstallPwa = () => {
|
|
39
|
+
const [supportsPwa, setSupportsPwa] = React.useState(false);
|
|
40
|
+
const [promptInstall, setPromptInstall] = React.useState<any>(null);
|
|
41
|
+
|
|
42
|
+
React.useEffect(() => {
|
|
43
|
+
const handler = (e: any) => {
|
|
44
|
+
e.preventDefault();
|
|
45
|
+
setSupportsPwa(true);
|
|
46
|
+
setPromptInstall(e);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
window.addEventListener('beforeinstallprompt', handler);
|
|
50
|
+
|
|
51
|
+
return () => {
|
|
52
|
+
return window.removeEventListener('transitionend', handler);
|
|
53
|
+
};
|
|
54
|
+
}, []);
|
|
55
|
+
|
|
56
|
+
const onInstall = (e: any) => {
|
|
57
|
+
e.preventDefault();
|
|
58
|
+
if (!promptInstall) {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
promptInstall.prompt();
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
if (!supportsPwa) {
|
|
65
|
+
return null;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
return <InstallPwaUi onInstall={onInstall} />;
|
|
69
|
+
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { css as transformStyleObject } from '@theme-ui/css';
|
|
1
2
|
import { useResponsiveValue, useTheme } from '@ttoss/ui';
|
|
2
3
|
import ReactModal from 'react-modal';
|
|
3
4
|
|
|
@@ -11,33 +12,33 @@ export type ModalProps = ReactModal.Props;
|
|
|
11
12
|
export const Modal = (props: ModalProps) => {
|
|
12
13
|
const { theme } = useTheme();
|
|
13
14
|
|
|
15
|
+
const space = theme.space as Record<string, string>;
|
|
16
|
+
|
|
14
17
|
const padding =
|
|
15
|
-
useResponsiveValue([
|
|
16
|
-
theme.space?.[2],
|
|
17
|
-
theme.space?.[3],
|
|
18
|
-
theme.space?.[4],
|
|
19
|
-
]) || 0;
|
|
18
|
+
useResponsiveValue([space?.['lg'], space?.['xl'], space?.['xl']]) || 0;
|
|
20
19
|
|
|
21
20
|
const style: ReactModal.Styles = {
|
|
22
|
-
overlay: {
|
|
21
|
+
overlay: transformStyleObject({
|
|
23
22
|
position: 'fixed',
|
|
24
23
|
top: 0,
|
|
25
24
|
left: 0,
|
|
26
25
|
right: 0,
|
|
27
26
|
bottom: 0,
|
|
28
|
-
backgroundColor: 'rgba(
|
|
27
|
+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
29
28
|
display: 'flex',
|
|
30
29
|
justifyContent: 'center',
|
|
31
30
|
alignItems: 'center',
|
|
32
|
-
padding,
|
|
33
31
|
...props.style?.overlay,
|
|
34
|
-
},
|
|
35
|
-
content: {
|
|
32
|
+
})(theme) as any,
|
|
33
|
+
content: transformStyleObject({
|
|
36
34
|
/**
|
|
37
35
|
* Theme
|
|
38
36
|
*/
|
|
39
|
-
backgroundColor:
|
|
37
|
+
backgroundColor: 'surface',
|
|
40
38
|
padding,
|
|
39
|
+
border: 'default',
|
|
40
|
+
borderColor: 'surface',
|
|
41
|
+
borderRadius: 'default',
|
|
41
42
|
/**
|
|
42
43
|
* General
|
|
43
44
|
*/
|
|
@@ -48,13 +49,10 @@ export const Modal = (props: ModalProps) => {
|
|
|
48
49
|
left: '0px',
|
|
49
50
|
right: '0px',
|
|
50
51
|
bottom: '0px',
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
display: 'flex',
|
|
54
|
-
flexDirection: 'column',
|
|
55
|
-
alignItems: 'center',
|
|
52
|
+
maxHeight: '90%',
|
|
53
|
+
maxWidth: '90%',
|
|
56
54
|
...props.style?.content,
|
|
57
|
-
},
|
|
55
|
+
})(theme) as any,
|
|
58
56
|
};
|
|
59
57
|
|
|
60
58
|
return <ReactModal {...props} style={style} />;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Box } from '@ttoss/ui';
|
|
3
|
+
import {
|
|
4
|
+
ToastContainer as ReactToastifyToastContainer,
|
|
5
|
+
type ToastContainerProps,
|
|
6
|
+
toast,
|
|
7
|
+
} from 'react-toastify';
|
|
8
|
+
import { injectStyle } from 'react-toastify/dist/inject-style';
|
|
9
|
+
|
|
10
|
+
export { toast };
|
|
11
|
+
|
|
12
|
+
export { type ToastContainerProps };
|
|
13
|
+
|
|
14
|
+
export const ToastContainer = (props: ToastContainerProps) => {
|
|
15
|
+
React.useEffect(() => {
|
|
16
|
+
injectStyle();
|
|
17
|
+
}, []);
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<Box
|
|
21
|
+
sx={({ colors, fonts }) => {
|
|
22
|
+
return {
|
|
23
|
+
'--toastify-color-light': '#fff',
|
|
24
|
+
'--toastify-color-dark': '#121212',
|
|
25
|
+
'--toastify-color-info': colors?.info || '#3498db',
|
|
26
|
+
'--toastify-color-success': colors?.success || '#07bc0c',
|
|
27
|
+
'--toastify-color-warning': '#f1c40f',
|
|
28
|
+
'--toastify-color-error': '#e74c3c',
|
|
29
|
+
'--toastify-color-progress-light': `linear-gradient(to right, ${colors?.primary}, ${colors?.secondary})`,
|
|
30
|
+
'--toastify-font-family': (fonts as { body: string }).body,
|
|
31
|
+
};
|
|
32
|
+
}}
|
|
33
|
+
>
|
|
34
|
+
<ReactToastifyToastContainer {...props} />
|
|
35
|
+
</Box>
|
|
36
|
+
);
|
|
37
|
+
};
|
package/src/index.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export * from './components/Accordion
|
|
2
|
-
export * from './components/InstallPwa
|
|
3
|
-
export * from './components/Modal
|
|
4
|
-
export * from './components/Toast
|
|
1
|
+
export * from './components/Accordion';
|
|
2
|
+
export * from './components/InstallPwa';
|
|
3
|
+
export * from './components/Modal';
|
|
4
|
+
export * from './components/Toast';
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
import { InstallPwaUi } from './InstallPwaUi';
|
|
4
|
-
|
|
5
|
-
export const InstallPwa = () => {
|
|
6
|
-
const [supportsPwa, setSupportsPwa] = React.useState(false);
|
|
7
|
-
const [promptInstall, setPromptInstall] = React.useState<any>(null);
|
|
8
|
-
|
|
9
|
-
React.useEffect(() => {
|
|
10
|
-
const handler = (e: any) => {
|
|
11
|
-
e.preventDefault();
|
|
12
|
-
setSupportsPwa(true);
|
|
13
|
-
setPromptInstall(e);
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
window.addEventListener('beforeinstallprompt', handler);
|
|
17
|
-
|
|
18
|
-
return () => window.removeEventListener('transitionend', handler);
|
|
19
|
-
}, []);
|
|
20
|
-
|
|
21
|
-
const onInstall = (e: any) => {
|
|
22
|
-
e.preventDefault();
|
|
23
|
-
if (!promptInstall) {
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
promptInstall.prompt();
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
if (!supportsPwa) {
|
|
30
|
-
return null;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
return <InstallPwaUi onInstall={onInstall} />;
|
|
34
|
-
};
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { Box } from '@ttoss/ui';
|
|
3
|
-
import {
|
|
4
|
-
ToastContainer as ReactToastifyToastContainer,
|
|
5
|
-
ToastContainerProps,
|
|
6
|
-
toast,
|
|
7
|
-
} from 'react-toastify';
|
|
8
|
-
import { injectStyle } from 'react-toastify/dist/inject-style';
|
|
9
|
-
|
|
10
|
-
export { toast };
|
|
11
|
-
|
|
12
|
-
export { type ToastContainerProps };
|
|
13
|
-
|
|
14
|
-
export const ToastContainer = (props: ToastContainerProps) => {
|
|
15
|
-
React.useEffect(() => {
|
|
16
|
-
injectStyle();
|
|
17
|
-
}, []);
|
|
18
|
-
|
|
19
|
-
return (
|
|
20
|
-
<Box
|
|
21
|
-
sx={({ colors, fonts }) => ({
|
|
22
|
-
'--toastify-color-light': '#fff',
|
|
23
|
-
'--toastify-color-dark': '#121212',
|
|
24
|
-
'--toastify-color-info': colors?.info || '#3498db',
|
|
25
|
-
'--toastify-color-success': colors?.success || '#07bc0c',
|
|
26
|
-
'--toastify-color-warning': '#f1c40f',
|
|
27
|
-
'--toastify-color-error': '#e74c3c',
|
|
28
|
-
'--toastify-color-progress-light': `linear-gradient(to right, ${colors?.primary}, ${colors?.secondary})`,
|
|
29
|
-
'--toastify-font-family': (fonts as { body: string }).body,
|
|
30
|
-
})}
|
|
31
|
-
>
|
|
32
|
-
<ReactToastifyToastContainer {...props} />
|
|
33
|
-
</Box>
|
|
34
|
-
);
|
|
35
|
-
};
|
package/src/index.spec.tsx
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import * as componentsModule from './index';
|
|
2
|
-
|
|
3
|
-
test.each([
|
|
4
|
-
componentsModule.Accordion,
|
|
5
|
-
componentsModule.InstallPwa,
|
|
6
|
-
componentsModule.Modal,
|
|
7
|
-
componentsModule.ToastContainer,
|
|
8
|
-
componentsModule.toast,
|
|
9
|
-
])('should export components %#', (Component) => {
|
|
10
|
-
expect(Component).toBeDefined();
|
|
11
|
-
});
|