@cystackapp/ui 1.4.0 → 1.4.1
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 +105 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# @cystackapp/ui
|
|
2
|
+
|
|
3
|
+
Reusable React UI components used across CyStack's platform dashboards. Built
|
|
4
|
+
with React 18, TypeScript and Tailwind CSS v4.
|
|
5
|
+
|
|
6
|
+
## Installation
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
yarn add @cystackapp/ui
|
|
10
|
+
# or
|
|
11
|
+
npm install @cystackapp/ui
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
### Peer dependencies
|
|
15
|
+
|
|
16
|
+
Install these in the host app if not already present:
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
yarn add react react-dom react-router-dom react-i18next i18next @untitled-ui/icons-react
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
| Package | Version |
|
|
23
|
+
| -------------------------- | ------------ |
|
|
24
|
+
| `react` | `^18.0.0` |
|
|
25
|
+
| `react-dom` | `^18.0.0` |
|
|
26
|
+
| `react-router-dom` | `^6.0.0` |
|
|
27
|
+
| `react-i18next` | `^15.0.0` |
|
|
28
|
+
| `i18next` | `23.7.7` |
|
|
29
|
+
| `@untitled-ui/icons-react` | `^0.1.4` |
|
|
30
|
+
|
|
31
|
+
## Setup
|
|
32
|
+
|
|
33
|
+
The package ships components and a Tailwind theme stylesheet. The host app must
|
|
34
|
+
use **Tailwind CSS v4** and import the theme once in its root stylesheet:
|
|
35
|
+
|
|
36
|
+
```css
|
|
37
|
+
/* src/app/index.css (or your global CSS) */
|
|
38
|
+
@import "tailwindcss";
|
|
39
|
+
@import "@cystackapp/ui/theme.css";
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
`theme.css` registers CSS variables (color tokens, spacing, etc.) and a `@source`
|
|
43
|
+
directive so Tailwind can scan the package's classes.
|
|
44
|
+
|
|
45
|
+
## Usage
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
import { Badge, Tooltip, Popover, cn } from "@cystackapp/ui";
|
|
49
|
+
|
|
50
|
+
export const Example = () => (
|
|
51
|
+
<Tooltip content="Hello">
|
|
52
|
+
<Badge color="brand" size="md">
|
|
53
|
+
New
|
|
54
|
+
</Badge>
|
|
55
|
+
</Tooltip>
|
|
56
|
+
);
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Available exports
|
|
60
|
+
|
|
61
|
+
**Components**
|
|
62
|
+
|
|
63
|
+
- `Badge`, `BadgeTag`, `BadgeMore`
|
|
64
|
+
- `Combobox`
|
|
65
|
+
- `ErrorState`
|
|
66
|
+
- `PageTitle`
|
|
67
|
+
- `Popover`
|
|
68
|
+
- `Switch`
|
|
69
|
+
- `Tooltip`
|
|
70
|
+
|
|
71
|
+
**Hooks**
|
|
72
|
+
|
|
73
|
+
- `useResizeObserver`
|
|
74
|
+
- `useScrollListener`
|
|
75
|
+
- `useWindowResizeListener`
|
|
76
|
+
- `useMutationObserver`
|
|
77
|
+
- `useTransitionEndListener`
|
|
78
|
+
- `useAnimationFrame`
|
|
79
|
+
- `useElementShift`
|
|
80
|
+
- `usePopoverCoord`
|
|
81
|
+
- `useValidatedCombobox`
|
|
82
|
+
|
|
83
|
+
**Utilities**
|
|
84
|
+
|
|
85
|
+
- `cn` — `clsx` + `tailwind-merge` wrapper for conditional class names
|
|
86
|
+
- `getBadgeAutoColor`, `TAG_ICON_COLOR_CLASSES`
|
|
87
|
+
|
|
88
|
+
**Types**
|
|
89
|
+
|
|
90
|
+
- `BadgeProps`, `BadgeColor`, `BadgeSize`, `BadgeType`
|
|
91
|
+
- `ComboboxSuggestionItem`
|
|
92
|
+
- `PopoverPosition`
|
|
93
|
+
|
|
94
|
+
The authoritative list lives in
|
|
95
|
+
[`src/index.ts`](./src/index.ts) — anything not exported there is internal and
|
|
96
|
+
may change without notice.
|
|
97
|
+
|
|
98
|
+
## Versioning
|
|
99
|
+
|
|
100
|
+
Semver via [Changesets](https://github.com/changesets/changesets). Release notes
|
|
101
|
+
in [`CHANGELOG.md`](./CHANGELOG.md).
|
|
102
|
+
|
|
103
|
+
## License
|
|
104
|
+
|
|
105
|
+
MIT
|