@sharpnr/ui 0.0.6 → 1.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 +160 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
# @sharpnr/ui
|
|
2
|
+
|
|
3
|
+
The official shared UI component library for the [sharpnr](https://sharpnr.com) suite of applications. Built with React, shadcn/ui, Tailwind CSS, and Radix UI primitives.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @sharpnr/ui
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Requirements
|
|
16
|
+
|
|
17
|
+
Your app must have the following peer dependencies installed:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install react react-dom radix-ui lucide-react
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## Setup
|
|
26
|
+
|
|
27
|
+
### 1. Configure Vite
|
|
28
|
+
|
|
29
|
+
Add `dedupe` and `optimizeDeps` to your app's `vite.config.ts` to prevent duplicate React instances:
|
|
30
|
+
|
|
31
|
+
```ts
|
|
32
|
+
export default defineConfig({
|
|
33
|
+
resolve: {
|
|
34
|
+
dedupe: ["react", "react-dom"],
|
|
35
|
+
},
|
|
36
|
+
optimizeDeps: {
|
|
37
|
+
include: ["react", "react-dom"],
|
|
38
|
+
},
|
|
39
|
+
});
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### 2. Configure Tailwind
|
|
43
|
+
|
|
44
|
+
In your app's `index.css`, tell Tailwind to scan `@sharpnr/ui`'s components:
|
|
45
|
+
|
|
46
|
+
```css
|
|
47
|
+
@import "tailwindcss";
|
|
48
|
+
@source "../node_modules/@sharpnr/ui/dist/index.es.js";
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
That's it — no separate CSS import needed.
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
## Usage
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import { Button, Input, cn } from "@sharpnr/ui";
|
|
59
|
+
|
|
60
|
+
export default function LoginPage() {
|
|
61
|
+
return (
|
|
62
|
+
<div className={cn("flex flex-col gap-4 p-8")}>
|
|
63
|
+
<Input placeholder="Email" />
|
|
64
|
+
<Button>Login</Button>
|
|
65
|
+
</div>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## Available Components
|
|
73
|
+
|
|
74
|
+
| Component | Import |
|
|
75
|
+
| --------- | -------------------------------------- |
|
|
76
|
+
| `Button` | `import { Button } from '@sharpnr/ui'` |
|
|
77
|
+
| `Input` | `import { Input } from '@sharpnr/ui'` |
|
|
78
|
+
|
|
79
|
+
> More components are added with each release. See [CHANGELOG](#changelog) for details.
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## Utilities
|
|
84
|
+
|
|
85
|
+
### `cn(...classes)`
|
|
86
|
+
|
|
87
|
+
A utility for merging Tailwind classes cleanly using `clsx` and `tailwind-merge`.
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
import { cn } from "@sharpnr/ui";
|
|
91
|
+
|
|
92
|
+
<div className={cn("px-4 py-2", isActive && "bg-primary")} />;
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
## Versioning
|
|
98
|
+
|
|
99
|
+
This package follows [Semantic Versioning](https://semver.org/):
|
|
100
|
+
|
|
101
|
+
| Release | When | Command |
|
|
102
|
+
| --------------- | -------------------- | ------------------- |
|
|
103
|
+
| `patch` `1.0.x` | Bug fix, style tweak | `npm version patch` |
|
|
104
|
+
| `minor` `1.x.0` | New component added | `npm version minor` |
|
|
105
|
+
| `major` `x.0.0` | Breaking change | `npm version major` |
|
|
106
|
+
|
|
107
|
+
Pin your app to a safe version range:
|
|
108
|
+
|
|
109
|
+
```json
|
|
110
|
+
{
|
|
111
|
+
"dependencies": {
|
|
112
|
+
"@sharpnr/ui": "^1.0.0"
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
## Contributing
|
|
120
|
+
|
|
121
|
+
This library is maintained by the sharpnr UI team. To contribute:
|
|
122
|
+
|
|
123
|
+
```bash
|
|
124
|
+
# Clone the repo
|
|
125
|
+
git clone https://github.com/sharpnr/sharp-ui.git
|
|
126
|
+
cd sharp-ui
|
|
127
|
+
|
|
128
|
+
# Install dependencies
|
|
129
|
+
npm install
|
|
130
|
+
|
|
131
|
+
# Start development build watcher
|
|
132
|
+
npm run dev
|
|
133
|
+
|
|
134
|
+
# Add a new shadcn component
|
|
135
|
+
npx shadcn@latest add [component-name]
|
|
136
|
+
|
|
137
|
+
# Export it in src/index.ts
|
|
138
|
+
export { ComponentName } from './components/ui/component-name';
|
|
139
|
+
|
|
140
|
+
# Build and verify
|
|
141
|
+
npm run build
|
|
142
|
+
cat dist/index.d.ts # verify types are exported
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
---
|
|
146
|
+
|
|
147
|
+
## Tech Stack
|
|
148
|
+
|
|
149
|
+
- [React 19](https://react.dev)
|
|
150
|
+
- [shadcn/ui](https://ui.shadcn.com)
|
|
151
|
+
- [Radix UI](https://www.radix-ui.com)
|
|
152
|
+
- [Tailwind CSS v4](https://tailwindcss.com)
|
|
153
|
+
- [Lucide React](https://lucide.dev)
|
|
154
|
+
- [Vite](https://vite.dev)
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
## License
|
|
159
|
+
|
|
160
|
+
Private — © [Sharpnr](https://sharpnr.com). All rights reserved.
|