@hazelcast/ui 4.0.1-canary.12 → 4.0.1-canary.18
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 +27 -175
- package/lib/components/Alert.js +3 -4
- package/lib/components/Alert.js.map +1 -1
- package/lib/components/Alert.module.css +111 -0
- package/lib/components/Notification.js +3 -3
- package/lib/components/Notification.js.map +1 -1
- package/lib/components/Notification.module.css +64 -0
- package/lib/old/Alert.d.ts +33 -0
- package/lib/old/Alert.js +51 -0
- package/lib/old/Alert.js.map +1 -0
- package/lib/old/Notification.d.ts +25 -0
- package/lib/old/Notification.js +39 -0
- package/lib/old/Notification.js.map +1 -0
- package/lib/old/index.d.ts +4 -0
- package/lib/old/index.js +2 -0
- package/lib/old/index.js.map +1 -1
- package/package.json +1 -1
- package/styles/variables.css +1 -0
- /package/lib/{components/Alert.module.scss → old/AlertLegacy.module.scss} +0 -0
- /package/lib/{components/Notification.module.scss → old/NotificationLegacy.module.scss} +0 -0
package/README.md
CHANGED
|
@@ -2,201 +2,53 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
**Design system is available live at URL**: https://5f80b6aa3ceb290022dfea61-tultjjrhhk.chromatic.com/?path=/story/getting-started-intro--page
|
|
5
|
+
Hazelcast's React design system, built with accessibility in mind.
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
1. `npm i @hazelcast/ui` (`npm i @hazelcast/ui@next` - canary version) - set of Hive UI components
|
|
11
|
-
2. `npm i @hazelcast/services` (`npm i @hazelcast/services@next` - canary version) - Hive services
|
|
12
|
-
3. `npm i @hazelcast/helpers` (`npm i @hazelcast/helpers@next` - canary version) - Hiver helpers
|
|
13
|
-
4. `npm i -D @hazelcast/test-helpers` (`npm i -D @hazelcast/test-helpers@next` - canary version) - Hive test helpers
|
|
7
|
+
**Live Storybook**: https://master--5f80b6aa3ceb290022dfea61.chromatic.com/
|
|
14
8
|
|
|
15
|
-
##
|
|
9
|
+
## Installation
|
|
16
10
|
|
|
17
|
-
|
|
18
|
-
|
|
11
|
+
```
|
|
12
|
+
npm i @hazelcast/ui
|
|
13
|
+
```
|
|
19
14
|
|
|
20
|
-
|
|
15
|
+
Use the `@next` dist-tag for the latest canary build: `npm i @hazelcast/ui@next`.
|
|
21
16
|
|
|
22
|
-
##
|
|
17
|
+
## Usage
|
|
23
18
|
|
|
24
|
-
|
|
25
|
-
Individual projects should transpile @hazelcast/ui.
|
|
26
|
-
However, Next.js still [forbids](https://github.com/vercel/next.js/blob/master/errors/css-global.md) to import files with .css / .scss extension unless they're in \_app.tsx
|
|
19
|
+
The package ships TypeScript compiled to `ES2018` — configure your bundler if you need to support older environments.
|
|
27
20
|
|
|
28
|
-
|
|
21
|
+
Styles are SCSS modules imported per-component; no global stylesheet is bundled. If you're on Next.js, it [forbids importing non-module CSS/SCSS](https://github.com/vercel/next.js/blob/master/errors/css-global.md) outside `_app.tsx`, so import any global styles you need there, e.g.:
|
|
29
22
|
|
|
30
23
|
```typescript
|
|
31
24
|
import '@hazelcast/ui/styles/datepicker.scss'
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
or
|
|
35
|
-
|
|
36
|
-
```typescript
|
|
25
|
+
// or the CSS modules version
|
|
37
26
|
import '@hazelcast/ui/styles/datepicker.module.scss'
|
|
38
27
|
```
|
|
39
28
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
## SSR
|
|
43
|
-
|
|
44
|
-
### Stable IDs
|
|
45
|
-
|
|
46
|
-
We use [`react-uid`](https://github.com/thearnica/react-uid) to generate stable IDs. you'll need `UIDReset` and `UIDFork` (optionally) to properly handle SSR. See the [README](https://github.com/thearnica/react-uid#code-splitting).
|
|
47
|
-
|
|
48
|
-
## Project structure
|
|
49
|
-
|
|
50
|
-
`packages` contains a list of published packages:
|
|
51
|
-
|
|
52
|
-
- `helpers` (full name `@hazelcast/helpers`)
|
|
53
|
-
- `services` (full name `@hazelcast/services`)
|
|
54
|
-
- `test-helpers` (full name `@hazelcast/test-helpers`)
|
|
55
|
-
- `ui` (full name `@hazelcast/ui`)
|
|
56
|
-
|
|
57
|
-
### Automated visual regression testing
|
|
58
|
-
|
|
59
|
-
Uses stories from [Storybook](https://storybook.js.org/) as test cases. In other words, any story is going to result in a set of screenshots. Moreover, any story is required to have an associated set of screenshots. Based on [Loki](https://loki.js.org/), which uses headless Chrome to render the screenshots in Docker.
|
|
60
|
-
|
|
61
|
-
## How-to
|
|
62
|
-
|
|
63
|
-
### Install [PnpM](https://pnpm.io/installation)
|
|
64
|
-
|
|
65
|
-
```
|
|
66
|
-
npm install -g pnpm
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
### Setup
|
|
70
|
-
|
|
71
|
-
```
|
|
72
|
-
pnpm i
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
#### Under the hood
|
|
76
|
-
|
|
77
|
-
It runs a regular `pnpm install` and executes a `postinstall` hook. In that hook it runs:
|
|
78
|
-
|
|
79
|
-
- `pnpm run compile`
|
|
80
|
-
Our child packages are written in TypeScript. To import them from `node_modules` in other packages they must be compiled to JavaScript first.
|
|
81
|
-
|
|
82
|
-
### Deploy
|
|
29
|
+
### SSR
|
|
83
30
|
|
|
84
|
-
|
|
31
|
+
Components use [`react-uid`](https://github.com/thearnica/react-uid) for stable IDs. Wrap your app in `UIDReset` (and `UIDFork` for code-splitting) — see the [react-uid README](https://github.com/thearnica/react-uid#code-splitting).
|
|
85
32
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
In the root folder run
|
|
89
|
-
|
|
90
|
-
```
|
|
91
|
-
pnpm add [-D] dependency-name
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
### Add a new local dependency (for one package only)
|
|
95
|
-
|
|
96
|
-
In the root folder run (replace @hazelcast/ui with @hazelcast/helpers, @hazelcast/test-helpers or @hazelcast/services if needed)
|
|
33
|
+
## Development
|
|
97
34
|
|
|
98
35
|
```
|
|
99
|
-
|
|
36
|
+
npm install
|
|
37
|
+
npm run dev # Storybook on :6006
|
|
38
|
+
npm test # Jest unit tests
|
|
39
|
+
npm run lint # ESLint
|
|
40
|
+
npm run compile # compile src/ to lib/
|
|
41
|
+
npm run verify-all # lint + test + build-storybook + visual regression
|
|
100
42
|
```
|
|
101
43
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
When Lerna does the bootstrapping, it creates symlinks to the local packages other packages depend on. In our case, `@hazelcast/ui` depends on `@hazelcast/helpers`. Lerna is going to create a symlink `./packages/ui/node_modules/@hazelcast/helpers` that points to `./packages/helpers`. When we change our TypeScript code, the associated compiled JavaScript is not updated automatically. So if we change something in `@hazelcast/helpers` and we want to test how it works in `@hazelcast/ui`, we need to compile our changes in `@hazelcast/helpers`. To do that we have two options:
|
|
105
|
-
|
|
106
|
-
1. Compile all packages with `pnpm run compile` in the root directory
|
|
107
|
-
2. Compile a specific package, e.g. `cd packages/helpers && pnpm run compile`
|
|
108
|
-
|
|
109
|
-
Now we can use the updated code in `@hazelcast/ui`.
|
|
110
|
-
|
|
111
|
-
### Run storybook for development
|
|
112
|
-
|
|
113
|
-
In the root directory
|
|
114
|
-
|
|
115
|
-
```
|
|
116
|
-
pnpm start
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
### Run linting
|
|
120
|
-
|
|
121
|
-
In the root directory
|
|
122
|
-
|
|
123
|
-
```
|
|
124
|
-
pnpm run lint
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
### Run unit tests
|
|
128
|
-
|
|
129
|
-
In the root directory
|
|
130
|
-
|
|
131
|
-
```
|
|
132
|
-
pnpm test
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
### Run visual regression tests
|
|
136
|
-
|
|
137
|
-
In the root directory
|
|
138
|
-
|
|
139
|
-
```
|
|
140
|
-
pnpm run build-storybook
|
|
141
|
-
pnpm run test:visual
|
|
142
|
-
```
|
|
143
|
-
|
|
144
|
-
### Approve the updated for visual regression test screenshots
|
|
145
|
-
|
|
146
|
-
Say, we have changed something in our components.
|
|
147
|
-
First we need to run the visual regression tests to make sure that the change affected how the component is displayed.
|
|
148
|
-
|
|
149
|
-
```
|
|
150
|
-
pnpm run build-storybook
|
|
151
|
-
pnpm run test:visual
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
Now, if the test suite failed, we need to go to `packages/ui/.loki` and manually review the screenshots in the `current` folder and the diff in the `difference` folder. If we like what we see, we need to run `pnpm run test:visual:approve` in the `packages/ui` folder. It will update the reference screenshots.
|
|
155
|
-
|
|
156
|
-
### Run all checks at once
|
|
157
|
-
|
|
158
|
-
```
|
|
159
|
-
pnpm run verify-all
|
|
160
|
-
```
|
|
161
|
-
|
|
162
|
-
If you PR passes this check locally, it is almost guaranteed to pass it on the CI.
|
|
163
|
-
|
|
164
|
-
## Releasing a new version
|
|
165
|
-
|
|
166
|
-
Assuming you're on latest master and the build is alright (`pnpm run build` runs without errors).
|
|
167
|
-
|
|
168
|
-
1. First we create a release branch for the next version locally (in this case v1.1.0):
|
|
169
|
-
|
|
170
|
-
```
|
|
171
|
-
git checkout -b release/v1.1.0
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
We push this new branch to Github:
|
|
175
|
-
|
|
176
|
-
```
|
|
177
|
-
git push -u origin release/v1.1.0
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
2. Then we run:
|
|
181
|
-
|
|
182
|
-
```
|
|
183
|
-
pnpm exec lerna version 1.1.0
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
This updates the package versions (in package.json, package-lock.json), creates a commit with necessary tags and pushes to Github automatically.
|
|
187
|
-
|
|
188
|
-
At this point you should create a pull request and merge the new version branch (v1.1.0) to master.
|
|
189
|
-
|
|
190
|
-
3. Now, after merging this pull request, we have the latest version available on GitHub. And it will be automatically published to npm with the required tags and releases;
|
|
44
|
+
Visual regression tests use [Loki](https://loki.js.org/) against Storybook stories. If `npm run test:visual` fails on an intended change, review the diffs under `.loki`, then run `npm run test:visual:approve` to update the reference screenshots.
|
|
191
45
|
|
|
192
|
-
|
|
46
|
+
See `CLAUDE.md` for project structure and code conventions.
|
|
193
47
|
|
|
194
|
-
|
|
195
|
-
pnpm view @hazelcast/ui versions
|
|
196
|
-
```
|
|
48
|
+
## Releasing
|
|
197
49
|
|
|
198
|
-
|
|
50
|
+
Releases are triggered manually via the ["manual release" GitHub Actions workflow](.github/workflows/release.yml):
|
|
199
51
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
52
|
+
1. Run the workflow (`workflow_dispatch`) with the desired version bump type.
|
|
53
|
+
2. It opens a PR bumping the version and enables auto-merge.
|
|
54
|
+
3. Once a code owner approves and it merges, npm publish and git tagging happen automatically.
|
package/lib/components/Alert.js
CHANGED
|
@@ -7,8 +7,7 @@ import { Link } from './Link';
|
|
|
7
7
|
import { Button } from './Button';
|
|
8
8
|
import { ToastIcon } from './Toast';
|
|
9
9
|
import { Icon } from './Icon';
|
|
10
|
-
import
|
|
11
|
-
import styles from './Alert.module.scss';
|
|
10
|
+
import styles from './Alert.module.css';
|
|
12
11
|
const isAlertActionButton = (action) => action.onClick !== undefined;
|
|
13
12
|
export const Alert = ({ type, title, content, actions, className, dismissableByEscKey = true, closeToast, titleClassName, bodyClassName, }) => {
|
|
14
13
|
const { icon, ariaLabel } = ToastIcon[type];
|
|
@@ -29,7 +28,8 @@ export const Alert = ({ type, title, content, actions, className, dismissableByE
|
|
|
29
28
|
React.createElement("div", { className: styles.rightSide },
|
|
30
29
|
React.createElement("div", { className: styles.header },
|
|
31
30
|
title && (React.createElement("div", { "data-test": "alert-title", className: cn(styles.title, titleClassName) }, title)),
|
|
32
|
-
!!closeToast && React.createElement(
|
|
31
|
+
!!closeToast && (React.createElement("button", { type: "button", "data-test": "alert-close", className: styles.closeButton, onClick: closeToast, "aria-label": "Close icon" },
|
|
32
|
+
React.createElement(X, { size: 16, "aria-hidden": true })))),
|
|
33
33
|
React.createElement("div", { "data-test": "alert-body", className: cn(styles.body, bodyClassName) },
|
|
34
34
|
content && React.createElement("div", { "data-test": "alert-content" }, content),
|
|
35
35
|
(actions === null || actions === void 0 ? void 0 : actions.length) ? (React.createElement("div", { "data-test": "alert-actions", className: styles.actions }, actions.map((action, aI) => {
|
|
@@ -39,7 +39,6 @@ export const Alert = ({ type, title, content, actions, className, dismissableByE
|
|
|
39
39
|
? {
|
|
40
40
|
iconLeft: icon,
|
|
41
41
|
iconLeftAriaLabel: ariaLabel,
|
|
42
|
-
iconLeftClassName: styles.actionButtonIcon,
|
|
43
42
|
}
|
|
44
43
|
: {};
|
|
45
44
|
return (React.createElement(Button, { key: aI, variant: "ghost", color: "secondary", className: cn(styles.action, styles.actionButton), bodyClassName: styles.actionButtonBody, onClick: onClick, ...iconLeftProps }, text));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,WAAW,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AACzD,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAA;AAChE,OAAO,EAAE,SAAS,EAAa,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
.alert {
|
|
2
|
+
--alert-color: var(--hive-color-text);
|
|
3
|
+
--alert-surface: lab(from var(--alert-color) 95% a b);
|
|
4
|
+
--alert-border: lab(from var(--alert-color) 84% a b);
|
|
5
|
+
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
display: flex;
|
|
8
|
+
align-items: flex-start;
|
|
9
|
+
gap: calc(var(--hive-grid) * 3);
|
|
10
|
+
width: 100%;
|
|
11
|
+
padding: calc(var(--hive-grid) * 3) calc(var(--hive-grid) * 4);
|
|
12
|
+
border: var(--hive-border-width) solid var(--alert-border);
|
|
13
|
+
border-radius: var(--hive-border-radius);
|
|
14
|
+
background-color: var(--alert-surface);
|
|
15
|
+
color: var(--alert-color);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.icon {
|
|
19
|
+
flex-shrink: 0;
|
|
20
|
+
margin-top: calc(var(--hive-grid) * 0.5);
|
|
21
|
+
color: var(--alert-color);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.rightSide {
|
|
25
|
+
flex-grow: 1;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
min-width: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.header {
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-direction: row;
|
|
34
|
+
align-items: center;
|
|
35
|
+
min-width: 0;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.title {
|
|
39
|
+
flex: 1 1 auto;
|
|
40
|
+
min-width: 0;
|
|
41
|
+
margin-right: calc(var(--hive-grid) * 8.5);
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
font-family: var(--hive-font-family-text);
|
|
44
|
+
font-size: var(--hive-font-size-body-normal);
|
|
45
|
+
font-weight: var(--hive-font-weight-text-bold);
|
|
46
|
+
text-overflow: ellipsis;
|
|
47
|
+
white-space: nowrap;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.closeButton {
|
|
51
|
+
flex: 0 0 auto;
|
|
52
|
+
margin-left: auto;
|
|
53
|
+
padding: 0;
|
|
54
|
+
border: none;
|
|
55
|
+
background: none;
|
|
56
|
+
color: var(--alert-color);
|
|
57
|
+
line-height: 0;
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.body {
|
|
62
|
+
font-size: var(--hive-font-size-body-small);
|
|
63
|
+
line-height: var(--hive-line-height-body-normal);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.success {
|
|
67
|
+
--alert-color: var(--hive-color-success-darkest);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.info {
|
|
71
|
+
--alert-color: var(--hive-color-info-darkest);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.warning {
|
|
75
|
+
--alert-color: var(--hive-color-warning-darkest);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.critical {
|
|
79
|
+
--alert-color: var(--hive-color-error);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.actions {
|
|
83
|
+
display: flex;
|
|
84
|
+
margin: calc(var(--hive-grid) * 3) 0 calc(var(--hive-grid) * 1);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.action {
|
|
88
|
+
color: var(--alert-color);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.action:not(:last-child) {
|
|
92
|
+
margin-right: calc(var(--hive-grid) * 4);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.actionButton {
|
|
96
|
+
--button-bg-hover: transparent;
|
|
97
|
+
--button-bg-active: transparent;
|
|
98
|
+
|
|
99
|
+
height: auto;
|
|
100
|
+
padding: 0;
|
|
101
|
+
font-size: var(--hive-font-size-body-small);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.actionButton:hover,
|
|
105
|
+
.actionButton.hover {
|
|
106
|
+
text-decoration: underline solid;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.actionButtonBody {
|
|
110
|
+
padding: 0;
|
|
111
|
+
}
|
|
@@ -2,9 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { AlertTriangle, CheckCircle, AlertCircle, Info, ChevronRight, X } from 'react-feather';
|
|
4
4
|
import { Icon } from './Icon';
|
|
5
|
-
import { IconButton } from './IconButton';
|
|
6
5
|
import { Link } from './Link';
|
|
7
|
-
import styles from './Notification.module.
|
|
6
|
+
import styles from './Notification.module.css';
|
|
8
7
|
export const NotificationIcon = {
|
|
9
8
|
success: {
|
|
10
9
|
icon: CheckCircle,
|
|
@@ -34,6 +33,7 @@ export const Notification = ({ type, children, className, link, linkHref, onClos
|
|
|
34
33
|
React.createElement(Icon, { "data-test": "notification-icon", ariaLabel: ariaLabel, icon: icon, className: styles.icon }),
|
|
35
34
|
React.createElement("div", { "data-test": "notification-content", className: styles.content }, children),
|
|
36
35
|
link && linkHref && (React.createElement(Link, { "data-test": "notification-link", component: "a", size: "small", className: styles.link, href: linkHref, icon: ChevronRight, ariaLabel: "Icon chevron right", bold: true }, link)),
|
|
37
|
-
onClose && (React.createElement(
|
|
36
|
+
onClose && (React.createElement("button", { type: "button", "data-test": "notification-close", className: styles.closeButton, onClick: onClose, "aria-label": "Notification close button" },
|
|
37
|
+
React.createElement(X, { size: 16, "aria-hidden": true })))));
|
|
38
38
|
};
|
|
39
39
|
//# sourceMappingURL=Notification.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../src/components/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAoB,CAAC,EAAE,MAAM,eAAe,CAAA;AAEhH,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../src/components/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAoB,CAAC,EAAE,MAAM,eAAe,CAAA;AAEhH,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAS9C,MAAM,CAAC,MAAM,gBAAgB,GAA8D;IACzF,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,mBAAmB;KAC/B;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,uBAAuB;KACnC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,wBAAwB;KACpC;CACF,CAAA;AAmBD,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;IAC5G,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAA;IAElD,OAAO,CACL,0CACY,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,YAAY,EACnB;YACE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,MAAM;YAC9B,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;SACjC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBAAW,mBAAmB,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;QAChG,0CAAe,sBAAsB,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IAC5D,QAAQ,CACL;QACL,IAAI,IAAI,QAAQ,IAAI,CACnB,oBAAC,IAAI,iBACO,mBAAmB,EAC7B,SAAS,EAAC,GAAG,EACb,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,YAAY,EAClB,SAAS,EAAC,oBAAoB,EAC9B,IAAI,UAEH,IAAI,CACA,CACR;QACA,OAAO,IAAI,CACV,gCACE,IAAI,EAAC,QAAQ,eACH,oBAAoB,EAC9B,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,OAAO,EAAE,OAAO,gBACL,2BAA2B;YAEtC,oBAAC,CAAC,IAAC,IAAI,EAAE,EAAE,wBAAgB,CACpB,CACV,CACG,CACP,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
.notification {
|
|
2
|
+
--notification-color: var(--hive-color-text);
|
|
3
|
+
--notification-surface: lab(from var(--notification-color) 95% a b);
|
|
4
|
+
--notification-border: lab(from var(--notification-color) 84% a b);
|
|
5
|
+
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
display: flex;
|
|
8
|
+
align-items: flex-start;
|
|
9
|
+
gap: calc(var(--hive-grid) * 2);
|
|
10
|
+
padding: calc(var(--hive-grid) * 2) calc(var(--hive-grid) * 3);
|
|
11
|
+
border: var(--hive-border-width) solid var(--notification-border);
|
|
12
|
+
border-radius: var(--hive-border-radius);
|
|
13
|
+
background-color: var(--notification-surface);
|
|
14
|
+
color: var(--notification-color);
|
|
15
|
+
font-size: var(--hive-font-size-body-small);
|
|
16
|
+
line-height: var(--hive-line-height-body-normal);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.icon {
|
|
20
|
+
flex: 0 0 auto;
|
|
21
|
+
color: var(--notification-color);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.content {
|
|
25
|
+
display: flex;
|
|
26
|
+
flex: 1 1 auto;
|
|
27
|
+
align-items: center;
|
|
28
|
+
min-width: 0;
|
|
29
|
+
min-height: calc(var(--hive-grid) * 6);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.link {
|
|
33
|
+
min-height: calc(var(--hive-grid) * 6);
|
|
34
|
+
margin-left: calc(var(--hive-grid) * 2);
|
|
35
|
+
color: var(--notification-color);
|
|
36
|
+
font-weight: var(--hive-font-weight-text-bold);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.closeButton {
|
|
40
|
+
flex: 0 0 auto;
|
|
41
|
+
margin-left: calc(var(--hive-grid) * 3);
|
|
42
|
+
padding: 0;
|
|
43
|
+
border: none;
|
|
44
|
+
background: none;
|
|
45
|
+
color: var(--notification-color);
|
|
46
|
+
line-height: 0;
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.success {
|
|
51
|
+
--notification-color: var(--hive-color-success-darkest);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.info {
|
|
55
|
+
--notification-color: var(--hive-color-info-darkest);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.warning {
|
|
59
|
+
--notification-color: var(--hive-color-warning-darkest);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.error {
|
|
63
|
+
--notification-color: var(--hive-color-error);
|
|
64
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React, { FC, ReactNode } from 'react';
|
|
2
|
+
import { LinkProps } from '../components/Link';
|
|
3
|
+
import { IconProps } from '../components/Icon';
|
|
4
|
+
import { ToastType } from './Toast';
|
|
5
|
+
import { PartialRequired } from '../helpers/types';
|
|
6
|
+
type AlertAccessibleActionButtonIconProps = {
|
|
7
|
+
icon: IconProps['icon'];
|
|
8
|
+
ariaLabel: string;
|
|
9
|
+
} | {
|
|
10
|
+
icon?: never;
|
|
11
|
+
ariaLabel?: never;
|
|
12
|
+
};
|
|
13
|
+
export type AlertActionButton = {
|
|
14
|
+
text: string;
|
|
15
|
+
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
16
|
+
} & AlertAccessibleActionButtonIconProps;
|
|
17
|
+
export type AlertActionLink = {
|
|
18
|
+
text: string;
|
|
19
|
+
} & Omit<PartialRequired<LinkProps, 'href'>, 'children' | 'size'>;
|
|
20
|
+
export type AlertAction = AlertActionButton | AlertActionLink;
|
|
21
|
+
export type AlertProps = {
|
|
22
|
+
type: ToastType;
|
|
23
|
+
title?: ReactNode;
|
|
24
|
+
content?: ReactNode;
|
|
25
|
+
actions?: AlertAction[];
|
|
26
|
+
className?: string;
|
|
27
|
+
titleClassName?: string;
|
|
28
|
+
bodyClassName?: string;
|
|
29
|
+
dismissableByEscKey?: boolean;
|
|
30
|
+
closeToast?: (e?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
|
|
31
|
+
};
|
|
32
|
+
export declare const Alert: FC<AlertProps>;
|
|
33
|
+
export {};
|
package/lib/old/Alert.js
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
|
+
import cn from 'classnames';
|
|
3
|
+
import { ChevronRight, X } from 'react-feather';
|
|
4
|
+
import useKey from 'react-use/lib/useKey';
|
|
5
|
+
import { escKeyFilterPredicate } from '../utils/keyboard';
|
|
6
|
+
import { Link } from '../components/Link';
|
|
7
|
+
import { Button } from '../components/Button';
|
|
8
|
+
import { Icon } from '../components/Icon';
|
|
9
|
+
import { IconButton } from '../components/IconButton';
|
|
10
|
+
import { ToastIcon } from './Toast';
|
|
11
|
+
import styles from './AlertLegacy.module.scss';
|
|
12
|
+
const isAlertActionButton = (action) => action.onClick !== undefined;
|
|
13
|
+
export const Alert = ({ type, title, content, actions, className, dismissableByEscKey = true, closeToast, titleClassName, bodyClassName, }) => {
|
|
14
|
+
const { icon, ariaLabel } = ToastIcon[type];
|
|
15
|
+
const closeByEsc = useCallback((nativeEvent) => {
|
|
16
|
+
if (dismissableByEscKey) {
|
|
17
|
+
closeToast === null || closeToast === void 0 ? void 0 : closeToast();
|
|
18
|
+
nativeEvent.stopImmediatePropagation();
|
|
19
|
+
}
|
|
20
|
+
}, [closeToast, dismissableByEscKey]);
|
|
21
|
+
useKey(escKeyFilterPredicate, closeByEsc, { options: { once: true } }, [closeByEsc, dismissableByEscKey]);
|
|
22
|
+
return (React.createElement("div", { "data-test": "alert", className: cn(styles.alert, {
|
|
23
|
+
[styles.success]: type === 'success',
|
|
24
|
+
[styles.info]: type === 'info',
|
|
25
|
+
[styles.warning]: type === 'warning',
|
|
26
|
+
[styles.critical]: type === 'critical',
|
|
27
|
+
}, className) },
|
|
28
|
+
React.createElement(Icon, { "data-test": "alert-icon", ariaLabel: ariaLabel, icon: icon, className: styles.icon }),
|
|
29
|
+
React.createElement("div", { className: styles.rightSide },
|
|
30
|
+
React.createElement("div", { className: styles.header },
|
|
31
|
+
title && (React.createElement("div", { "data-test": "alert-title", className: cn(styles.title, titleClassName) }, title)),
|
|
32
|
+
!!closeToast && React.createElement(IconButton, { "data-test": "alert-close", variant: "ghost", ariaLabel: "Close icon", icon: X, onClick: closeToast })),
|
|
33
|
+
React.createElement("div", { "data-test": "alert-body", className: cn(styles.body, bodyClassName) },
|
|
34
|
+
content && React.createElement("div", { "data-test": "alert-content" }, content),
|
|
35
|
+
(actions === null || actions === void 0 ? void 0 : actions.length) ? (React.createElement("div", { "data-test": "alert-actions", className: styles.actions }, actions.map((action, aI) => {
|
|
36
|
+
if (isAlertActionButton(action)) {
|
|
37
|
+
const { text, icon, ariaLabel, onClick } = action;
|
|
38
|
+
const iconLeftProps = icon && ariaLabel
|
|
39
|
+
? {
|
|
40
|
+
iconLeft: icon,
|
|
41
|
+
iconLeftAriaLabel: ariaLabel,
|
|
42
|
+
iconLeftClassName: styles.actionButtonIcon,
|
|
43
|
+
}
|
|
44
|
+
: {};
|
|
45
|
+
return (React.createElement(Button, { key: aI, variant: "ghost", color: "secondary", className: cn(styles.action, styles.actionButton), bodyClassName: styles.actionButtonBody, onClick: onClick, ...iconLeftProps }, text));
|
|
46
|
+
}
|
|
47
|
+
const { text, href, ...props } = action;
|
|
48
|
+
return (React.createElement(Link, { key: aI, href: href, icon: ChevronRight, ariaLabel: "Icon chevron right", className: styles.action, size: "small", ...props }, text));
|
|
49
|
+
}))) : null))));
|
|
50
|
+
};
|
|
51
|
+
//# sourceMappingURL=Alert.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/old/Alert.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
import { Icon as IconType } from 'react-feather';
|
|
3
|
+
export type NotificationType = 'success' | 'info' | 'warning' | 'error';
|
|
4
|
+
export type NotificationIconDescriptor = {
|
|
5
|
+
icon: IconType;
|
|
6
|
+
ariaLabel: string;
|
|
7
|
+
};
|
|
8
|
+
export declare const NotificationIcon: {
|
|
9
|
+
[key in NotificationType]: NotificationIconDescriptor;
|
|
10
|
+
};
|
|
11
|
+
type NotificationLink = {
|
|
12
|
+
link: ReactNode;
|
|
13
|
+
linkHref: string;
|
|
14
|
+
} | {
|
|
15
|
+
link?: never;
|
|
16
|
+
linkHref?: never;
|
|
17
|
+
};
|
|
18
|
+
export type NotificationProps = {
|
|
19
|
+
className?: string;
|
|
20
|
+
type: NotificationType;
|
|
21
|
+
children: ReactNode;
|
|
22
|
+
onClose?: () => void;
|
|
23
|
+
} & NotificationLink;
|
|
24
|
+
export declare const Notification: FC<NotificationProps>;
|
|
25
|
+
export {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import cn from 'classnames';
|
|
3
|
+
import { AlertTriangle, CheckCircle, AlertCircle, Info, ChevronRight, X } from 'react-feather';
|
|
4
|
+
import { Icon } from '../components/Icon';
|
|
5
|
+
import { IconButton } from '../components/IconButton';
|
|
6
|
+
import { Link } from '../components/Link';
|
|
7
|
+
import styles from './NotificationLegacy.module.scss';
|
|
8
|
+
export const NotificationIcon = {
|
|
9
|
+
success: {
|
|
10
|
+
icon: CheckCircle,
|
|
11
|
+
ariaLabel: 'Check circle icon',
|
|
12
|
+
},
|
|
13
|
+
info: {
|
|
14
|
+
icon: Info,
|
|
15
|
+
ariaLabel: 'Info circle icon',
|
|
16
|
+
},
|
|
17
|
+
warning: {
|
|
18
|
+
icon: AlertTriangle,
|
|
19
|
+
ariaLabel: 'Warning triangle icon',
|
|
20
|
+
},
|
|
21
|
+
error: {
|
|
22
|
+
icon: AlertCircle,
|
|
23
|
+
ariaLabel: 'Info error circle icon',
|
|
24
|
+
},
|
|
25
|
+
};
|
|
26
|
+
export const Notification = ({ type, children, className, link, linkHref, onClose }) => {
|
|
27
|
+
const { icon, ariaLabel } = NotificationIcon[type];
|
|
28
|
+
return (React.createElement("div", { "data-test": "notification", className: cn(styles.notification, {
|
|
29
|
+
[styles.success]: type === 'success',
|
|
30
|
+
[styles.info]: type === 'info',
|
|
31
|
+
[styles.warning]: type === 'warning',
|
|
32
|
+
[styles.error]: type === 'error',
|
|
33
|
+
}, className) },
|
|
34
|
+
React.createElement(Icon, { "data-test": "notification-icon", ariaLabel: ariaLabel, icon: icon, className: styles.icon }),
|
|
35
|
+
React.createElement("div", { "data-test": "notification-content", className: styles.content }, children),
|
|
36
|
+
link && linkHref && (React.createElement(Link, { "data-test": "notification-link", component: "a", size: "small", className: styles.link, href: linkHref, icon: ChevronRight, ariaLabel: "Icon chevron right", bold: true }, link)),
|
|
37
|
+
onClose && (React.createElement(IconButton, { "data-test": "notification-close", className: styles.closeButton, icon: X, onClick: onClose, ariaLabel: "Notification close button" }))));
|
|
38
|
+
};
|
|
39
|
+
//# sourceMappingURL=Notification.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../src/old/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAoB,CAAC,EAAE,MAAM,eAAe,CAAA;AAEhH,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAEzC,OAAO,MAAM,MAAM,kCAAkC,CAAA;AASrD,MAAM,CAAC,MAAM,gBAAgB,GAA8D;IACzF,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,mBAAmB;KAC/B;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,uBAAuB;KACnC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,wBAAwB;KACpC;CACF,CAAA;AAmBD,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;IAC5G,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAA;IAElD,OAAO,CACL,0CACY,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,YAAY,EACnB;YACE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,MAAM;YAC9B,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;SACjC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBAAW,mBAAmB,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;QAChG,0CAAe,sBAAsB,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IAC5D,QAAQ,CACL;QACL,IAAI,IAAI,QAAQ,IAAI,CACnB,oBAAC,IAAI,iBACO,mBAAmB,EAC7B,SAAS,EAAC,GAAG,EACb,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,YAAY,EAClB,SAAS,EAAC,oBAAoB,EAC9B,IAAI,UAEH,IAAI,CACA,CACR;QACA,OAAO,IAAI,CACV,oBAAC,UAAU,iBACC,oBAAoB,EAC9B,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,2BAA2B,GACrC,CACH,CACG,CACP,CAAA;AACH,CAAC,CAAA"}
|
package/lib/old/index.d.ts
CHANGED
|
@@ -56,3 +56,7 @@ export type { SimpleTableProps } from './SimpleTable';
|
|
|
56
56
|
export { Toast } from './Toast';
|
|
57
57
|
export type { ToastProps, ToastType, ToastIconDescriptor } from './Toast';
|
|
58
58
|
export { ToastIcon } from './Toast';
|
|
59
|
+
export { Alert } from './Alert';
|
|
60
|
+
export type { AlertProps, AlertAction, AlertActionButton, AlertActionLink } from './Alert';
|
|
61
|
+
export { Notification, NotificationIcon } from './Notification';
|
|
62
|
+
export type { NotificationProps, NotificationType, NotificationIconDescriptor } from './Notification';
|
package/lib/old/index.js
CHANGED
|
@@ -31,4 +31,6 @@ export { Modal, setAppElement } from './Modal';
|
|
|
31
31
|
export { SimpleTable } from './SimpleTable';
|
|
32
32
|
export { Toast } from './Toast';
|
|
33
33
|
export { ToastIcon } from './Toast';
|
|
34
|
+
export { Alert } from './Alert';
|
|
35
|
+
export { Notification, NotificationIcon } from './Notification';
|
|
34
36
|
//# sourceMappingURL=index.js.map
|
package/lib/old/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/old/index.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yDAAyD;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAcjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAQlD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAE5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AAMpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAA;AAEhF,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAElE,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAExG,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAG/D,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAY5H,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/old/index.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yDAAyD;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAcjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAQlD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAE5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AAMpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAA;AAEhF,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAElE,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAExG,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAG/D,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAY5H,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA"}
|
package/package.json
CHANGED
package/styles/variables.css
CHANGED
|
File without changes
|
|
File without changes
|