@orsetra/shared-ui 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 +85 -0
- package/index.ts +2 -0
- package/lib/utils.ts +6 -0
- package/package.json +61 -0
package/README.md
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# @orsetra/shared-ui
|
|
2
|
+
|
|
3
|
+
Shared UI components library for Orsetra platform, built with React, Radix UI, and Tailwind CSS.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @orsetra/shared-ui
|
|
9
|
+
# or
|
|
10
|
+
pnpm add @orsetra/shared-ui
|
|
11
|
+
# or
|
|
12
|
+
yarn add @orsetra/shared-ui
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Peer Dependencies
|
|
16
|
+
|
|
17
|
+
This package requires the following peer dependencies:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install react react-dom
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { Button } from '@orsetra/shared-ui'
|
|
27
|
+
import { cn } from '@orsetra/shared-ui/lib/utils'
|
|
28
|
+
|
|
29
|
+
function App() {
|
|
30
|
+
return (
|
|
31
|
+
<Button variant="default" size="lg">
|
|
32
|
+
Click me
|
|
33
|
+
</Button>
|
|
34
|
+
)
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Components
|
|
39
|
+
|
|
40
|
+
This library includes pre-built components based on Radix UI:
|
|
41
|
+
|
|
42
|
+
- **Button** - Customizable button component
|
|
43
|
+
- **Dialog** - Modal dialog component
|
|
44
|
+
- **Dropdown Menu** - Dropdown menu component
|
|
45
|
+
- **Select** - Select input component
|
|
46
|
+
- **Tabs** - Tab navigation component
|
|
47
|
+
- **Toast** - Toast notification component
|
|
48
|
+
- **Tooltip** - Tooltip component
|
|
49
|
+
- And many more...
|
|
50
|
+
|
|
51
|
+
## Utilities
|
|
52
|
+
|
|
53
|
+
### `cn` - Class Name Utility
|
|
54
|
+
|
|
55
|
+
Merge Tailwind CSS classes with proper precedence:
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import { cn } from '@orsetra/shared-ui/lib/utils'
|
|
59
|
+
|
|
60
|
+
const className = cn('px-4 py-2', 'bg-blue-500', 'hover:bg-blue-600')
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Styling
|
|
64
|
+
|
|
65
|
+
This library uses Tailwind CSS. Make sure to configure your `tailwind.config.js`:
|
|
66
|
+
|
|
67
|
+
```js
|
|
68
|
+
import sharedConfig from '@orsetra/shared-config/tailwind'
|
|
69
|
+
|
|
70
|
+
export default {
|
|
71
|
+
...sharedConfig,
|
|
72
|
+
content: [
|
|
73
|
+
'./app/**/*.{js,ts,jsx,tsx}',
|
|
74
|
+
'./node_modules/@orsetra/shared-ui/**/*.{js,ts,jsx,tsx}',
|
|
75
|
+
],
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## License
|
|
80
|
+
|
|
81
|
+
MIT
|
|
82
|
+
|
|
83
|
+
## Repository
|
|
84
|
+
|
|
85
|
+
[GitHub](https://github.com/orsetra/console-ui/tree/main/packages/shared-ui)
|
package/index.ts
ADDED
package/lib/utils.ts
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@orsetra/shared-ui",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Shared UI components for Orsetra platform",
|
|
5
|
+
"main": "./index.ts",
|
|
6
|
+
"types": "./index.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": "./index.ts",
|
|
9
|
+
"./components/*": "./components/*.tsx",
|
|
10
|
+
"./lib/*": "./lib/*.ts"
|
|
11
|
+
},
|
|
12
|
+
"files": [
|
|
13
|
+
"index.ts",
|
|
14
|
+
"components",
|
|
15
|
+
"lib",
|
|
16
|
+
"README.md"
|
|
17
|
+
],
|
|
18
|
+
"publishConfig": {
|
|
19
|
+
"access": "public"
|
|
20
|
+
},
|
|
21
|
+
"repository": {
|
|
22
|
+
"type": "git",
|
|
23
|
+
"url": "https://github.com/orsetra/console-ui.git",
|
|
24
|
+
"directory": "packages/shared-ui"
|
|
25
|
+
},
|
|
26
|
+
"keywords": [
|
|
27
|
+
"react",
|
|
28
|
+
"components",
|
|
29
|
+
"ui",
|
|
30
|
+
"orsetra",
|
|
31
|
+
"radix-ui",
|
|
32
|
+
"tailwind"
|
|
33
|
+
],
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
36
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
37
|
+
},
|
|
38
|
+
"dependencies": {
|
|
39
|
+
"@radix-ui/react-accordion": "1.2.2",
|
|
40
|
+
"@radix-ui/react-alert-dialog": "1.1.4",
|
|
41
|
+
"@radix-ui/react-avatar": "1.1.2",
|
|
42
|
+
"@radix-ui/react-checkbox": "1.1.3",
|
|
43
|
+
"@radix-ui/react-dialog": "1.1.4",
|
|
44
|
+
"@radix-ui/react-dropdown-menu": "2.1.4",
|
|
45
|
+
"@radix-ui/react-label": "2.1.1",
|
|
46
|
+
"@radix-ui/react-popover": "1.1.4",
|
|
47
|
+
"@radix-ui/react-select": "2.1.4",
|
|
48
|
+
"@radix-ui/react-separator": "1.1.1",
|
|
49
|
+
"@radix-ui/react-tabs": "1.1.2",
|
|
50
|
+
"@radix-ui/react-toast": "1.2.4",
|
|
51
|
+
"@radix-ui/react-tooltip": "1.1.6",
|
|
52
|
+
"class-variance-authority": "^0.7.1",
|
|
53
|
+
"clsx": "^2.1.1",
|
|
54
|
+
"lucide-react": "^0.454.0",
|
|
55
|
+
"tailwind-merge": "^2.5.5"
|
|
56
|
+
},
|
|
57
|
+
"devDependencies": {
|
|
58
|
+
"@types/react": "^19",
|
|
59
|
+
"typescript": "^5"
|
|
60
|
+
}
|
|
61
|
+
}
|