@memobit/libs 1.0.73 → 2.0.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 +95 -95
- package/dist/index.css +1 -1
- package/dist/index.d.ts +1 -2
- package/dist/index.esm.js +8026 -21549
- package/dist/version.json +4 -4
- package/package.json +183 -183
package/README.md
CHANGED
|
@@ -1,95 +1,95 @@
|
|
|
1
|
-
# @memobit/libs
|
|
2
|
-
|
|
3
|
-
A TypeScript-first React component library — 100+ components,
|
|
4
|
-
|
|
5
|
-
**📚 Live documentation & component playground → [react.memobit.ro](https://react.memobit.ro/)**
|
|
6
|
-
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
## Install
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
npm install @memobit/libs
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
Peer dependencies (you provide these in your own app):
|
|
16
|
-
|
|
17
|
-
```bash
|
|
18
|
-
npm install react@^19 react-dom@^19
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## Quick start
|
|
22
|
-
|
|
23
|
-
```tsx
|
|
24
|
-
import { Button, Card, ToastProvider, useToast } from '@memobit/libs';
|
|
25
|
-
import '@memobit/libs/dist/index.css';
|
|
26
|
-
import '@memobit/libs/dist/styles/themes.scss'; // optional — only if you want the bundled themes
|
|
27
|
-
|
|
28
|
-
function App() {
|
|
29
|
-
return (
|
|
30
|
-
<ToastProvider>
|
|
31
|
-
<Demo />
|
|
32
|
-
</ToastProvider>
|
|
33
|
-
);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
function Demo() {
|
|
37
|
-
const { showToast } = useToast();
|
|
38
|
-
return (
|
|
39
|
-
<Card>
|
|
40
|
-
<Button onClick={() => showToast({ type: 'success', message: 'Hello' })}>
|
|
41
|
-
Click me
|
|
42
|
-
</Button>
|
|
43
|
-
</Card>
|
|
44
|
-
);
|
|
45
|
-
}
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
## What's in the box
|
|
49
|
-
|
|
50
|
-
- **Components** — Buttons, forms (Input/Select/Checkbox/DatePicker/ColorPicker/EmojiPicker/FileDropzone…), navigation (Breadcrumb/AppHeader/ControlPanel/Tabs…), overlays (Drawer/Modal/ConfirmDialog/ContextMenu/Tooltip…), data (DataView/Table/Calendar/CalendarHeatmap/Chart…), feedback (Toast/Banner/Badge/Chip/EmptyState…), and many more.
|
|
51
|
-
- **Icons** — 470+ stroke icons, each tree-shakeable.
|
|
52
|
-
- **Themes** — 70+ ready-made SCSS themes (Arctic Blue, Midnight Atlas, Terracotta Kitchen, Neon Tokyo, …). Theme tokens are pure CSS custom properties, so you can author your own.
|
|
53
|
-
- **Hooks** — `useBreakpoint`, `useBodyScrollLock`, `useComponentEffect`, `useAppPersistence`, `useAuth`.
|
|
54
|
-
- **Helpers** — date formatting, number formatting, string utilities, search/highlight, pagination, URL helpers.
|
|
55
|
-
|
|
56
|
-
See the [component reference](https://react.memobit.ro/) for props, variants, and live examples.
|
|
57
|
-
|
|
58
|
-
## Theming
|
|
59
|
-
|
|
60
|
-
Themes ship as standalone SCSS files. Pick what you need:
|
|
61
|
-
|
|
62
|
-
```scss
|
|
63
|
-
// import everything
|
|
64
|
-
@use '@memobit/libs/dist/styles/themes.scss';
|
|
65
|
-
|
|
66
|
-
// or a single theme
|
|
67
|
-
@use '@memobit/libs/dist/styles/theming/arctic-blue.scss';
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
All tokens — spacing, typography, radii, transitions, colors — are exposed as CSS custom properties (`--spacing-8`, `--card-bg`, `--button-primary-bg`, etc.) so you can override per-component or per-route without forking the library.
|
|
71
|
-
|
|
72
|
-
Token reference:
|
|
73
|
-
|
|
74
|
-
- Sizing / spacing / radii / transitions → `@memobit/libs/dist/styles/variables.scss`
|
|
75
|
-
- Theme colors → `@memobit/libs/dist/styles/theming/*.scss`
|
|
76
|
-
|
|
77
|
-
## Requirements
|
|
78
|
-
|
|
79
|
-
- React **19.2+** and React DOM **19.2+** (peer deps)
|
|
80
|
-
- ESM-only (your bundler must support ESM — Vite, Next.js 13+, Webpack 5, esbuild, Rollup all do)
|
|
81
|
-
- For SCSS imports: a Sass-capable bundler
|
|
82
|
-
|
|
83
|
-
## TypeScript
|
|
84
|
-
|
|
85
|
-
Type definitions are bundled (`dist/index.d.ts`). No `@types/...` package required.
|
|
86
|
-
|
|
87
|
-
## License
|
|
88
|
-
|
|
89
|
-
[Apache 2.0](./LICENSE) © Iulian Cristea
|
|
90
|
-
|
|
91
|
-
## Links
|
|
92
|
-
|
|
93
|
-
- 📚 Docs & playground — https://react.memobit.ro/
|
|
94
|
-
- 🐙 Source — https://github.com/CristeaIulian/memobit-react-library
|
|
95
|
-
- 📦 npm — https://www.npmjs.com/package/@memobit/libs
|
|
1
|
+
# @memobit/libs
|
|
2
|
+
|
|
3
|
+
A TypeScript-first React component library — 100+ components, 70+ themes, plus the hooks and helpers needed to glue them together. Built for, and battle-tested across, the [Memobit](https://memobit.ro) family of apps.
|
|
4
|
+
|
|
5
|
+
**📚 Live documentation & component playground → [react.memobit.ro](https://react.memobit.ro/)**
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @memobit/libs
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Peer dependencies (you provide these in your own app):
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install react@^19 react-dom@^19
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Quick start
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { Button, Card, ToastProvider, useToast } from '@memobit/libs';
|
|
25
|
+
import '@memobit/libs/dist/index.css';
|
|
26
|
+
import '@memobit/libs/dist/styles/themes.scss'; // optional — only if you want the bundled themes
|
|
27
|
+
|
|
28
|
+
function App() {
|
|
29
|
+
return (
|
|
30
|
+
<ToastProvider>
|
|
31
|
+
<Demo />
|
|
32
|
+
</ToastProvider>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
function Demo() {
|
|
37
|
+
const { showToast } = useToast();
|
|
38
|
+
return (
|
|
39
|
+
<Card>
|
|
40
|
+
<Button onClick={() => showToast({ type: 'success', message: 'Hello' })}>
|
|
41
|
+
Click me
|
|
42
|
+
</Button>
|
|
43
|
+
</Card>
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## What's in the box
|
|
49
|
+
|
|
50
|
+
- **Components** — Buttons, forms (Input/Select/Checkbox/DatePicker/ColorPicker/EmojiPicker/FileDropzone…), navigation (Breadcrumb/AppHeader/ControlPanel/Tabs…), overlays (Drawer/Modal/ConfirmDialog/ContextMenu/Tooltip…), data (DataView/Table/Calendar/CalendarHeatmap/Chart…), feedback (Toast/Banner/Badge/Chip/EmptyState…), and many more.
|
|
51
|
+
- **Icons** — 470+ stroke icons, each tree-shakeable.
|
|
52
|
+
- **Themes** — 70+ ready-made SCSS themes (Arctic Blue, Midnight Atlas, Terracotta Kitchen, Neon Tokyo, …). Theme tokens are pure CSS custom properties, so you can author your own.
|
|
53
|
+
- **Hooks** — `useBreakpoint`, `useBodyScrollLock`, `useComponentEffect`, `useAppPersistence`, `useAuth`.
|
|
54
|
+
- **Helpers** — date formatting, number formatting, string utilities, search/highlight, pagination, URL helpers.
|
|
55
|
+
|
|
56
|
+
See the [component reference](https://react.memobit.ro/) for props, variants, and live examples.
|
|
57
|
+
|
|
58
|
+
## Theming
|
|
59
|
+
|
|
60
|
+
Themes ship as standalone SCSS files. Pick what you need:
|
|
61
|
+
|
|
62
|
+
```scss
|
|
63
|
+
// import everything
|
|
64
|
+
@use '@memobit/libs/dist/styles/themes.scss';
|
|
65
|
+
|
|
66
|
+
// or a single theme
|
|
67
|
+
@use '@memobit/libs/dist/styles/theming/arctic-blue.scss';
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
All tokens — spacing, typography, radii, transitions, colors — are exposed as CSS custom properties (`--spacing-8`, `--card-bg`, `--button-primary-bg`, etc.) so you can override per-component or per-route without forking the library.
|
|
71
|
+
|
|
72
|
+
Token reference:
|
|
73
|
+
|
|
74
|
+
- Sizing / spacing / radii / transitions → `@memobit/libs/dist/styles/variables.scss`
|
|
75
|
+
- Theme colors → `@memobit/libs/dist/styles/theming/*.scss`
|
|
76
|
+
|
|
77
|
+
## Requirements
|
|
78
|
+
|
|
79
|
+
- React **19.2+** and React DOM **19.2+** (peer deps)
|
|
80
|
+
- ESM-only (your bundler must support ESM — Vite, Next.js 13+, Webpack 5, esbuild, Rollup all do)
|
|
81
|
+
- For SCSS imports: a Sass-capable bundler
|
|
82
|
+
|
|
83
|
+
## TypeScript
|
|
84
|
+
|
|
85
|
+
Type definitions are bundled (`dist/index.d.ts`). No `@types/...` package required.
|
|
86
|
+
|
|
87
|
+
## License
|
|
88
|
+
|
|
89
|
+
[Apache 2.0](./LICENSE) © Iulian Cristea
|
|
90
|
+
|
|
91
|
+
## Links
|
|
92
|
+
|
|
93
|
+
- 📚 Docs & playground — https://react.memobit.ro/
|
|
94
|
+
- 🐙 Source — https://github.com/CristeaIulian/memobit-react-library
|
|
95
|
+
- 📦 npm — https://www.npmjs.com/package/@memobit/libs
|