@definable/ui 0.1.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 +136 -0
- package/dist/index.cjs.js +315 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.ts +489 -0
- package/dist/index.esm.js +75433 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/styles.css +1 -0
- package/package.json +100 -0
package/README.md
ADDED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
# Definable UI Component Library
|
|
2
|
+
|
|
3
|
+
A beautiful, modern UI component library with support for Tailwind CSS, designed for building production-ready web applications.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 35+ accessible UI components
|
|
8
|
+
- Responsive design
|
|
9
|
+
- Fully customizable via Tailwind CSS
|
|
10
|
+
- TypeScript support
|
|
11
|
+
- Storybook documentation for all components
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
# npm
|
|
17
|
+
npm install @definable/storybook
|
|
18
|
+
|
|
19
|
+
# yarn
|
|
20
|
+
yarn add @definable/storybook
|
|
21
|
+
|
|
22
|
+
# pnpm
|
|
23
|
+
pnpm add @definable/storybook
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Setup
|
|
27
|
+
|
|
28
|
+
Add the import for the CSS file in your main entry file:
|
|
29
|
+
|
|
30
|
+
```jsx
|
|
31
|
+
// Next.js example (pages/_app.js or app/layout.js)
|
|
32
|
+
import '@definable/storybook/dist/styles.css';
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Make sure your tailwind.config.js extends the necessary theme values:
|
|
36
|
+
|
|
37
|
+
```js
|
|
38
|
+
// tailwind.config.js
|
|
39
|
+
module.exports = {
|
|
40
|
+
content: [
|
|
41
|
+
// ...
|
|
42
|
+
'./node_modules/@definable/storybook/**/*.{js,ts,jsx,tsx}',
|
|
43
|
+
],
|
|
44
|
+
theme: {
|
|
45
|
+
extend: {
|
|
46
|
+
// The component library uses CSS variables for theming
|
|
47
|
+
// Add any custom theme extensions here
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
plugins: [],
|
|
51
|
+
};
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Usage
|
|
55
|
+
|
|
56
|
+
Import components directly from the package:
|
|
57
|
+
|
|
58
|
+
```jsx
|
|
59
|
+
import { Button, Card, Input } from '@definable/storybook';
|
|
60
|
+
|
|
61
|
+
function MyComponent() {
|
|
62
|
+
return (
|
|
63
|
+
<Card>
|
|
64
|
+
<h2>Login</h2>
|
|
65
|
+
<Input placeholder="Email" type="email" />
|
|
66
|
+
<Button>Sign In</Button>
|
|
67
|
+
</Card>
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Available Components
|
|
73
|
+
|
|
74
|
+
- Alert
|
|
75
|
+
- Badge
|
|
76
|
+
- Breadcrumb
|
|
77
|
+
- Button
|
|
78
|
+
- Card
|
|
79
|
+
- Carousel
|
|
80
|
+
- Charts
|
|
81
|
+
- Checkbox
|
|
82
|
+
- Collapse
|
|
83
|
+
- ConfirmationModal
|
|
84
|
+
- Dialog
|
|
85
|
+
- DropdownMenu
|
|
86
|
+
- Input
|
|
87
|
+
- Label
|
|
88
|
+
- Loader
|
|
89
|
+
- LoadingPlaceholder
|
|
90
|
+
- Markdown
|
|
91
|
+
- Modal
|
|
92
|
+
- Notification
|
|
93
|
+
- Popover
|
|
94
|
+
- Progress
|
|
95
|
+
- RadioGroup
|
|
96
|
+
- ScrollArea
|
|
97
|
+
- Select
|
|
98
|
+
- SelectionBar
|
|
99
|
+
- Separator
|
|
100
|
+
- Sheet
|
|
101
|
+
- Slider
|
|
102
|
+
- Switch
|
|
103
|
+
- Table
|
|
104
|
+
- TableEmpty
|
|
105
|
+
- Tabs
|
|
106
|
+
- Textarea
|
|
107
|
+
- Tooltip
|
|
108
|
+
- Stepper
|
|
109
|
+
- MonacoEditor
|
|
110
|
+
|
|
111
|
+
## Storybook
|
|
112
|
+
|
|
113
|
+
Run the Storybook to see all available components and their usage:
|
|
114
|
+
|
|
115
|
+
```bash
|
|
116
|
+
# Clone the repository
|
|
117
|
+
git clone https://github.com/definable/storybook.git
|
|
118
|
+
|
|
119
|
+
# Install dependencies
|
|
120
|
+
npm install
|
|
121
|
+
|
|
122
|
+
# Run Storybook
|
|
123
|
+
npm run storybook
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
## Development
|
|
127
|
+
|
|
128
|
+
To build the package locally:
|
|
129
|
+
|
|
130
|
+
```bash
|
|
131
|
+
npm run build
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## License
|
|
135
|
+
|
|
136
|
+
MIT
|