@myghf/ui 0.1.0 → 0.2.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 +124 -5
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/tailwindPreset.js +70 -68
- package/dist/tokens.css +72 -72
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -1,6 +1,24 @@
|
|
|
1
1
|
# @myghf/ui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@myghf/ui)
|
|
4
|
+
[](./LICENSE)
|
|
5
|
+
|
|
6
|
+
The **Magdi Yacoub Global Heart Foundation (MYGHF)** shared Vue 3 design system — Tailwind-based,
|
|
7
|
+
app-agnostic, accessible components for MYGHF / Aswan Heart Centre applications.
|
|
8
|
+
|
|
9
|
+
- **Built on** [Vue 3](https://vuejs.org) + [Reka UI](https://reka-ui.com) primitives, styled with
|
|
10
|
+
[Tailwind CSS](https://tailwindcss.com).
|
|
11
|
+
- **Brand-aligned** to the MYGHF palette, typography, and spacing (see [DESIGN.md](./DESIGN.md)).
|
|
12
|
+
- **Bilingual-ready**: English and Arabic, with RTL support.
|
|
13
|
+
- **Tree-shakeable** ESM output with bundled TypeScript types.
|
|
14
|
+
- **Accessible**: keyboard-operable primitives, focus-visible states, and WCAG-minded contrast.
|
|
15
|
+
|
|
16
|
+
## Requirements
|
|
17
|
+
|
|
18
|
+
| Dependency | Version |
|
|
19
|
+
| --- | --- |
|
|
20
|
+
| `vue` | `^3.5.0` (peer) |
|
|
21
|
+
| `tailwindcss` | `^3.4.0` (peer) |
|
|
4
22
|
|
|
5
23
|
## Install
|
|
6
24
|
|
|
@@ -8,24 +26,125 @@ The MYGHF shared Vue 3 design system — Tailwind-based, app-agnostic components
|
|
|
8
26
|
npm install @myghf/ui
|
|
9
27
|
```
|
|
10
28
|
|
|
11
|
-
##
|
|
29
|
+
## Setup
|
|
30
|
+
|
|
31
|
+
Import the design tokens once, in your app entry stylesheet:
|
|
12
32
|
|
|
13
33
|
```css
|
|
14
|
-
/*
|
|
34
|
+
/* app.css */
|
|
15
35
|
@import '@myghf/ui/tokens.css';
|
|
16
36
|
```
|
|
17
37
|
|
|
38
|
+
Then load the Tailwind preset and make sure your `content` globs include the library's output so its
|
|
39
|
+
utility classes are generated:
|
|
40
|
+
|
|
18
41
|
```js
|
|
19
42
|
// tailwind.config.js
|
|
20
43
|
import myghfPreset from '@myghf/ui/tailwind-preset'
|
|
44
|
+
|
|
21
45
|
export default {
|
|
22
46
|
presets: [myghfPreset],
|
|
23
47
|
content: [/* your globs */, './node_modules/@myghf/ui/dist/**/*.js'],
|
|
24
48
|
}
|
|
25
49
|
```
|
|
26
50
|
|
|
51
|
+
The preset provides the brand colour scale (`primary`, `secondary`, `success`, `warning`, `error`,
|
|
52
|
+
`info`), semantic colours (`background`, `foreground`, `surface`, `surface-muted`, `border`,
|
|
53
|
+
`muted`), and the font families (`font-sans`, `font-serif`, `font-ar`).
|
|
54
|
+
|
|
55
|
+
## Usage
|
|
56
|
+
|
|
27
57
|
```ts
|
|
28
|
-
import { Button } from '@myghf/ui'
|
|
58
|
+
import { Button, Input, DataTable } from '@myghf/ui'
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
```vue
|
|
62
|
+
<template>
|
|
63
|
+
<form @submit.prevent="submit">
|
|
64
|
+
<Input v-model="email" type="email" placeholder="you@example.com" />
|
|
65
|
+
<Button type="submit" variant="primary">Continue</Button>
|
|
66
|
+
</form>
|
|
67
|
+
</template>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Components
|
|
71
|
+
|
|
72
|
+
| Area | Exports |
|
|
73
|
+
| --- | --- |
|
|
74
|
+
| Actions & display | `Button`, `Tag`, `Icon` |
|
|
75
|
+
| Form controls | `Input`, `Textarea`, `Password`, `Checkbox`, `Select`, `SelectButton`, `DatePicker`, `TreeSelect` |
|
|
76
|
+
| Navigation & overlays | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `Dialog`, `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem` |
|
|
77
|
+
| Data | `Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`, `TableEmpty`, `TablePagination`, `DataTable`, `TreeTable`, `TransferList` |
|
|
78
|
+
| Utilities & types | `cn`, date helpers, `toPascalCase`, `resolveIconName`, `TagTone`, `DataTableFeatures`, `TreeTableColumn`, `TreeNode`, `FlatTreeRow`, `CheckedState` |
|
|
79
|
+
|
|
80
|
+
### Entry points
|
|
81
|
+
|
|
82
|
+
| Import | Contents |
|
|
83
|
+
| --- | --- |
|
|
84
|
+
| `@myghf/ui` | Components, utilities, and types |
|
|
85
|
+
| `@myghf/ui/tokens.css` | CSS custom properties (`--myghf-*`) |
|
|
86
|
+
| `@myghf/ui/tailwind-preset` | Tailwind preset |
|
|
87
|
+
|
|
88
|
+
## Theming
|
|
89
|
+
|
|
90
|
+
Tokens are space-separated RGB channels so Tailwind's `<alpha-value>` opacity modifiers keep working.
|
|
91
|
+
Override any `--myghf-*` variable after importing `tokens.css`:
|
|
92
|
+
|
|
93
|
+
```css
|
|
94
|
+
:root {
|
|
95
|
+
--myghf-primary-500: 0 130 177; /* custom brand blue */
|
|
96
|
+
--myghf-background: 255 255 255; /* brand-white page background */
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
Do not hard-code hex values in component code — use the tokens or the Tailwind classes. See
|
|
101
|
+
[DESIGN.md](./DESIGN.md) for the full palette and rules.
|
|
102
|
+
|
|
103
|
+
## Bilingual & RTL
|
|
104
|
+
|
|
105
|
+
Wrap RTL content with `dir="rtl"` and the Arabic font:
|
|
106
|
+
|
|
107
|
+
```vue
|
|
108
|
+
<div dir="rtl" class="font-ar">
|
|
109
|
+
<!-- Arabic content -->
|
|
110
|
+
</div>
|
|
29
111
|
```
|
|
30
112
|
|
|
31
|
-
|
|
113
|
+
Prefer logical utilities (`ps-*`, `pe-*`, `ms-*`, `me-*`, `text-start`, `text-end`) over physical
|
|
114
|
+
ones, and use the `rtl:` variant for directional icons.
|
|
115
|
+
|
|
116
|
+
## Design system
|
|
117
|
+
|
|
118
|
+
Brand rules, the colour/token reference, typography, and logo usage live in
|
|
119
|
+
[DESIGN.md](./DESIGN.md). It is written for both developers and AI agents — follow it when building
|
|
120
|
+
MYGHF UI.
|
|
121
|
+
|
|
122
|
+
## Development
|
|
123
|
+
|
|
124
|
+
```bash
|
|
125
|
+
npm ci # install from the lockfile
|
|
126
|
+
npm run typecheck # vue-tsc --noEmit
|
|
127
|
+
npm test # vitest run
|
|
128
|
+
npm run build # vite build + copy tokens/preset into dist/
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
Contributor and release conventions are documented in [AGENTS.md](./AGENTS.md).
|
|
132
|
+
|
|
133
|
+
## Releasing
|
|
134
|
+
|
|
135
|
+
This package uses [Changesets](https://changesets.dev) for versioning and publishing, and ships
|
|
136
|
+
from CI via npm Trusted Publishing (OIDC) — there is no `NPM_TOKEN`.
|
|
137
|
+
|
|
138
|
+
1. Add a changeset describing your change and commit it with your work:
|
|
139
|
+
```bash
|
|
140
|
+
npx changeset
|
|
141
|
+
```
|
|
142
|
+
2. Open a pull request into `main` as usual.
|
|
143
|
+
3. When it merges, CI opens (or updates) a **Version Packages** pull request that bumps `version`
|
|
144
|
+
and updates `CHANGELOG.md`.
|
|
145
|
+
4. Merge that pull request to publish to npm. CI creates the git tag and GitHub Release
|
|
146
|
+
automatically, with provenance.
|
|
147
|
+
|
|
148
|
+
## License
|
|
149
|
+
|
|
150
|
+
[MIT](./LICENSE) © Magdi Yacoub Global Heart Foundation
|
package/dist/index.js
CHANGED
|
@@ -432,7 +432,7 @@ var q = /* @__PURE__ */ p({
|
|
|
432
432
|
default: j(() => [(y(!0), l(a, null, x(e.options, (e) => (y(), s(T(je), {
|
|
433
433
|
key: String(p(e)),
|
|
434
434
|
value: p(e),
|
|
435
|
-
class: "relative flex cursor-pointer select-none items-center rounded px-2 py-1.5
|
|
435
|
+
class: "relative flex cursor-pointer select-none items-center rounded px-2 py-1.5 pe-8 text-sm text-foreground outline-none transition-colors focus:bg-surface-muted data-[highlighted]:bg-surface-muted data-[disabled]:opacity-50"
|
|
436
436
|
}, {
|
|
437
437
|
default: j(() => [f(T(Ne), null, {
|
|
438
438
|
default: j(() => [d(w(h(e)), 1)]),
|