@beautinique/frontend-components 1.0.4 → 1.0.5
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 +17 -2
- package/dist/index.cjs +17 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -0
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -34,11 +34,22 @@ use have a path of their own, so an app only bundles what it imports.
|
|
|
34
34
|
|
|
35
35
|
| Import path | What it gives |
|
|
36
36
|
| --------------------------------------------- | -------------------------------------------------------------------------------------------- |
|
|
37
|
-
| `@beautinique/frontend-components` |
|
|
37
|
+
| `@beautinique/frontend-components` | Everything `/ui` and `/toast` give (the very same values), and the types (`IButton`, ...) |
|
|
38
38
|
| `@beautinique/frontend-components/ui` | `Button`, `Tooltip` |
|
|
39
39
|
| `@beautinique/frontend-components/toast` | `ToastContainer`, `toaster`, the toast store, and the helpers for toasts that follow uploads |
|
|
40
40
|
| `@beautinique/frontend-components/source.css` | The `@source` line of the setup above |
|
|
41
41
|
|
|
42
|
+
`Button` can be imported from the root or from `/ui`, it is the same component either way:
|
|
43
|
+
|
|
44
|
+
```ts
|
|
45
|
+
import { Button } from '@beautinique/frontend-components'; // or
|
|
46
|
+
import { Button } from '@beautinique/frontend-components/ui';
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
The root only re-exports, it does not copy: a toast shown with `toaster` from one path appears in the
|
|
50
|
+
`ToastContainer` of the other, and an app that imports only `Button` from the root bundles the same as
|
|
51
|
+
with `/ui` (the bundler leaves out what is not used).
|
|
52
|
+
|
|
42
53
|
```tsx
|
|
43
54
|
import { Button, Tooltip } from '@beautinique/frontend-components/ui';
|
|
44
55
|
import { ToastContainer, toaster } from '@beautinique/frontend-components/toast';
|
|
@@ -127,7 +138,11 @@ The icons of the toasts are bundled, so a toast shows its icon without a network
|
|
|
127
138
|
- **State lives in exactly one import path.** The toast store is part of `/toast` only. A component
|
|
128
139
|
of another path that needs it must import it from `@beautinique/frontend-components/toast`, never
|
|
129
140
|
copy it: every entry is built as one file, so a copy would be a second store, and a toast shown
|
|
130
|
-
through it would never reach the `ToastContainer`.
|
|
141
|
+
through it would never reach the `ToastContainer`. The root is such a path: its built file only
|
|
142
|
+
imports `/ui` and `/toast` (`tsup.config.ts` keeps them external, and `built-files.test.ts` checks
|
|
143
|
+
the built files after `npm run build`).
|
|
144
|
+
- **The root has what most screens use** (`/ui`, later `/layout`, and `/toast`). A component that few
|
|
145
|
+
screens use gets a path of its own and is not in the root.
|
|
131
146
|
- **A component's own css lives next to the component** and is imported by it, not by the styles
|
|
132
147
|
package. It uses the variables of the styles package (`var(--smoke-eerie)`, ...) and does not
|
|
133
148
|
import them again: importing them a second time, after the app's own css, would undo the app's
|
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,21 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var toast = require('@beautinique/frontend-components/toast');
|
|
4
|
+
var ui = require('@beautinique/frontend-components/ui');
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
Object.keys(toast).forEach(function (k) {
|
|
9
|
+
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
10
|
+
enumerable: true,
|
|
11
|
+
get: function () { return toast[k]; }
|
|
12
|
+
});
|
|
13
|
+
});
|
|
14
|
+
Object.keys(ui).forEach(function (k) {
|
|
15
|
+
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
16
|
+
enumerable: true,
|
|
17
|
+
get: function () { return ui[k]; }
|
|
18
|
+
});
|
|
19
|
+
});
|
|
3
20
|
//# sourceMappingURL=index.cjs.map
|
|
4
21
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs","sourcesContent":[]}
|
package/dist/index.d.cts
CHANGED
package/dist/index.d.cts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,cAAc,kBAAkB,CAAC;AACjC,mBAAmB,sBAAsB,CAAC;AAC1C,cAAc,eAAe,CAAC"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,cAAc,kBAAkB,CAAC;AACjC,mBAAmB,sBAAsB,CAAC;AAC1C,cAAc,eAAe,CAAC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}
|