@dimaan/ui 0.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/LICENSE ADDED
@@ -0,0 +1,18 @@
1
+ Copyright (c) Diman. All rights reserved.
2
+
3
+ This software and associated documentation files (the "Software") are the
4
+ proprietary and confidential property of Diman. The Software is licensed,
5
+ not sold, and is intended solely for internal use within Diman and its
6
+ authorized projects.
7
+
8
+ No part of the Software may be reproduced, distributed, sublicensed, or
9
+ disclosed to any third party without the express prior written consent of
10
+ Diman. Any unauthorized use, copying, modification, merger, publication,
11
+ distribution, sublicensing, or sale of the Software is strictly prohibited.
12
+
13
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15
+ FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. IN NO EVENT SHALL
16
+ DIMAN BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY ARISING FROM,
17
+ OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
18
+ THE SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,116 @@
1
+ # @dimaan/ui
2
+
3
+ Shared React UI component library for Diman company projects.
4
+
5
+ Built with **React 19**, **TypeScript**, **Tailwind CSS v4**, and a CSS-first design token system. Distributed as dual ESM/CJS with full type definitions, intended for Vite-based dashboard apps.
6
+
7
+ ## Documentation
8
+
9
+ - **[USAGE.md](USAGE.md)** — full consumer guide: install, Tailwind setup, framework-specific examples (Next.js / Vite / Remix), theming, and pitfalls.
10
+ - **[CONTRIBUTING.md](CONTRIBUTING.md)** — local development, adding components, testing conventions, commit/PR workflow, and the release process.
11
+
12
+ ---
13
+
14
+ ## Install
15
+
16
+ ```bash
17
+ pnpm add @dimaan/ui
18
+ # peer deps required in your app:
19
+ pnpm add react react-dom tailwindcss
20
+ ```
21
+
22
+ ## Set up Tailwind v4
23
+
24
+ This library ships a Tailwind v4 **preset** as a CSS file. Add three lines to your app's main stylesheet:
25
+
26
+ ```css
27
+ /* app.css (or globals.css) */
28
+ @import "tailwindcss";
29
+ @import "@dimaan/ui/preset.css";
30
+ @source "../node_modules/@dimaan/ui/dist";
31
+ ```
32
+
33
+ What each line does:
34
+
35
+ - `@import "tailwindcss"` — Tailwind itself.
36
+ - `@import "@dimaan/ui/preset.css"` — design tokens (colors, radii, fonts) become Tailwind utilities (`bg-primary`, `text-foreground`, …).
37
+ - `@source "../node_modules/@dimaan/ui/dist"` — tells Tailwind to scan our compiled output so utility classes used inside library components are generated. Adjust the relative path so it resolves to `node_modules/@dimaan/ui/dist` from your CSS file's location.
38
+
39
+ > **Note:** Tailwind v4 is CSS-first — there is no `tailwind.config.js`. If your app still has one, you can delete it.
40
+
41
+ ## Usage
42
+
43
+ ```tsx
44
+ import { cn } from "@dimaan/ui";
45
+
46
+ export function Example() {
47
+ return <div className={cn("rounded-md bg-primary p-4")} />;
48
+ }
49
+ ```
50
+
51
+ Components will be added to this barrel as the library grows.
52
+
53
+ ---
54
+
55
+ ## Theming
56
+
57
+ All design tokens are CSS variables. Override any of them in your app's CSS to re-skin the library:
58
+
59
+ ```css
60
+ :root {
61
+ --color-primary: oklch(0.55 0.2 250);
62
+ --radius: 0.75rem;
63
+ }
64
+ ```
65
+
66
+ Tokens are defined in [`src/styles/preset.css`](./src/styles/preset.css).
67
+
68
+ ---
69
+
70
+ ## Development
71
+
72
+ ```bash
73
+ pnpm install
74
+ pnpm dev # Vite playground at http://localhost:5173
75
+ pnpm test # Vitest
76
+ pnpm typecheck # tsc --noEmit
77
+ pnpm lint # Biome
78
+ pnpm build # tsup → dist/
79
+ ```
80
+
81
+ ### Repository layout
82
+
83
+ ```
84
+ src/
85
+ index.ts # public barrel
86
+ lib/utils.ts # cn() helper
87
+ styles/preset.css # Tailwind v4 design tokens
88
+ playground/ # Vite dev sandbox (not published)
89
+ test/setup.ts # vitest + @testing-library/jest-dom
90
+ .changeset/ # version & changelog management
91
+ .github/workflows/ # CI + release automation
92
+ ```
93
+
94
+ ### Adding a component
95
+
96
+ 1. Create `src/components/<name>/<name>.tsx` and `src/components/<name>/index.ts`.
97
+ 2. Re-export from `src/index.ts`.
98
+ 3. Add a test next to it (`<name>.test.tsx`).
99
+
100
+ ### Releasing
101
+
102
+ This package uses [Changesets](https://github.com/changesets/changesets) for versioning. Releases are fully automated:
103
+
104
+ 1. Open a PR with your code changes.
105
+ 2. The **auto-changeset** workflow adds a `patch` changeset using your PR title — no manual step needed.
106
+ 3. Need a `minor` or `major` bump instead? Run `pnpm changeset` locally and commit the file before opening the PR.
107
+ 4. Need to skip a release entirely (docs, internal CI)? Add the `skip-changeset` label on the PR.
108
+ 5. After merge, the release workflow opens a **"chore: version packages"** PR that bumps the version and updates `CHANGELOG.md`. Merging that PR publishes `@dimaan/ui` to npm and pushes a git tag.
109
+
110
+ See [CONTRIBUTING.md](./CONTRIBUTING.md#releasing-maintainers-only) for full details.
111
+
112
+ ---
113
+
114
+ ## License
115
+
116
+ Proprietary — internal use only.