@sqlrooms/ui 0.6.0 → 0.7.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 +111 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
A comprehensive UI component library for SQLRooms applications, built on top of React and Tailwind CSS. This package provides a collection of reusable, accessible, and customizable components designed to create consistent and beautiful user interfaces.
|
|
2
|
+
|
|
3
|
+
This library is based on [shadcn/ui](https://ui.shadcn.com/), a collection of beautifully designed, accessible components that can be copied and pasted into your apps.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🎨 **Modern Design**: Clean, modern components following design best practices
|
|
8
|
+
- ♿ **Accessibility**: Components built with accessibility in mind
|
|
9
|
+
- 🌗 **Theming**: Support for light and dark modes
|
|
10
|
+
- 📱 **Responsive**: Mobile-friendly components that adapt to different screen sizes
|
|
11
|
+
- 🧩 **Composable**: Components designed to work together seamlessly
|
|
12
|
+
- 🔄 **React Hooks**: Useful hooks for common UI patterns
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @sqlrooms/ui
|
|
18
|
+
# or
|
|
19
|
+
yarn add @sqlrooms/ui
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Basic Usage
|
|
23
|
+
|
|
24
|
+
### Using Components
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import {Button, Card, Input} from '@sqlrooms/ui';
|
|
28
|
+
|
|
29
|
+
function LoginForm() {
|
|
30
|
+
return (
|
|
31
|
+
<Card className="p-6 max-w-md mx-auto">
|
|
32
|
+
<h2 className="text-2xl font-bold mb-4">Login</h2>
|
|
33
|
+
<form>
|
|
34
|
+
<div className="space-y-4">
|
|
35
|
+
<div>
|
|
36
|
+
<Input type="email" placeholder="Email" required />
|
|
37
|
+
</div>
|
|
38
|
+
<div>
|
|
39
|
+
<Input type="password" placeholder="Password" required />
|
|
40
|
+
</div>
|
|
41
|
+
<Button type="submit" className="w-full">
|
|
42
|
+
Sign In
|
|
43
|
+
</Button>
|
|
44
|
+
</div>
|
|
45
|
+
</form>
|
|
46
|
+
</Card>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Using Hooks
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import {useToast, useDisclosure} from '@sqlrooms/ui';
|
|
55
|
+
|
|
56
|
+
function MyComponent() {
|
|
57
|
+
const {toast} = useToast();
|
|
58
|
+
const {isOpen, onOpen, onClose} = useDisclosure();
|
|
59
|
+
|
|
60
|
+
const handleAction = () => {
|
|
61
|
+
// Perform some action
|
|
62
|
+
toast({
|
|
63
|
+
title: 'Success!',
|
|
64
|
+
description: 'Your action was completed successfully.',
|
|
65
|
+
variant: 'success',
|
|
66
|
+
});
|
|
67
|
+
onClose();
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
return (
|
|
71
|
+
<div>
|
|
72
|
+
<Button onClick={onOpen}>Open Dialog</Button>
|
|
73
|
+
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
74
|
+
<DialogContent>
|
|
75
|
+
<DialogHeader>
|
|
76
|
+
<DialogTitle>Confirm Action</DialogTitle>
|
|
77
|
+
<DialogDescription>
|
|
78
|
+
Are you sure you want to perform this action?
|
|
79
|
+
</DialogDescription>
|
|
80
|
+
</DialogHeader>
|
|
81
|
+
<DialogFooter>
|
|
82
|
+
<Button variant="outline" onClick={onClose}>
|
|
83
|
+
Cancel
|
|
84
|
+
</Button>
|
|
85
|
+
<Button onClick={handleAction}>Confirm</Button>
|
|
86
|
+
</DialogFooter>
|
|
87
|
+
</DialogContent>
|
|
88
|
+
</Dialog>
|
|
89
|
+
</div>
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## Available Components
|
|
95
|
+
|
|
96
|
+
- **Layout**: Card, Resizable, Tabs
|
|
97
|
+
- **Forms**: Button, Checkbox, Input, Select, Slider, Switch, Textarea
|
|
98
|
+
- **Feedback**: Alert, Progress, Spinner, Toast
|
|
99
|
+
- **Navigation**: Accordion, Breadcrumb, Dropdown Menu
|
|
100
|
+
- **Overlay**: Dialog, Popover, Tooltip
|
|
101
|
+
- **Data Display**: Badge, Table
|
|
102
|
+
- **Utility**: Error Boundary, Theme Switch
|
|
103
|
+
|
|
104
|
+
## Advanced Features
|
|
105
|
+
|
|
106
|
+
- **Component Composition**: Build complex UIs by composing simple components
|
|
107
|
+
- **Form Handling**: Integrated with React Hook Form for easy form management
|
|
108
|
+
- **Custom Styling**: Extend components with custom styles using Tailwind CSS
|
|
109
|
+
- **Animation**: Smooth transitions and animations for interactive elements
|
|
110
|
+
|
|
111
|
+
For more information, visit the SQLRooms documentation.
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC","sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nexport * from './components/accordion';\nexport * from './components/alert';\nexport * from './components/badge';\nexport * from './components/breadcrumb';\nexport * from './components/button';\nexport * from './components/card';\nexport * from './components/checkbox';\nexport * from './components/dialog';\nexport * from './components/dropdown-menu';\nexport * from './components/editable-text';\nexport * from './components/error-boundary';\nexport * from './components/error-pane';\nexport * from './components/form';\nexport * from './components/input';\nexport * from './components/label';\nexport * from './components/popover';\nexport * from './components/progress';\nexport * from './components/progress-modal';\nexport * from './components/resizable';\nexport * from './components/select';\nexport * from './components/skeleton';\nexport * from './components/skeleton-pane';\nexport * from './components/spinner';\nexport * from './components/spinner-pane';\nexport * from './components/switch';\nexport * from './components/theme-switch';\nexport * from './components/table';\nexport * from './components/tabs';\nexport * from './components/textarea';\nexport * from './components/toast';\nexport * from './components/toaster';\nexport * from './components/tooltip';\nexport * from './hooks/use-toast';\nexport * from './hooks/useDisclosure';\nexport * from './hooks/useAspectRatioDimensions';\nexport * from './hooks/useRelativeCoordinates';\nexport * from './lib/utils';\nexport * from './tailwind-preset';\nexport * from './theme/theme-provider';\nexport * from './components/slider';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"author": "Ilya Boyandin <ilya@boyandin.me>",
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"autoprefixer": "^10.4.20",
|
|
63
63
|
"tailwindcss": "^3.4.17"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "8be65f051c588d3a963f721322429657913b6c63"
|
|
66
66
|
}
|