@brainfish-ai/components 0.18.4-alpha.5 → 0.18.4-alpha.6
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 +253 -0
- package/package.json +2 -2
- package/dist/accordion.d.ts +0 -12
- package/dist/alert-dialog.d.ts +0 -46
- package/dist/alert.d.ts +0 -17
- package/dist/badge.d.ts +0 -14
- package/dist/button-group.d.ts +0 -21
- package/dist/button.d.ts +0 -16
- package/dist/calendar.d.ts +0 -12
- package/dist/card.d.ts +0 -15
- package/dist/chart-area-linear.d.ts +0 -41
- package/dist/chart-radial-stacked.d.ts +0 -31
- package/dist/chat-search.d.ts +0 -426
- package/dist/collapsible.d.ts +0 -10
- package/dist/colors.d.ts +0 -161
- package/dist/combobox.d.ts +0 -23
- package/dist/command.d.ts +0 -90
- package/dist/components/ui/accordion.d.ts +0 -2
- package/dist/components/ui/alert-dialog.d.ts +0 -2
- package/dist/components/ui/alert.d.ts +0 -2
- package/dist/components/ui/badge.d.ts +0 -2
- package/dist/components/ui/button-group.d.ts +0 -2
- package/dist/components/ui/button.d.ts +0 -2
- package/dist/components/ui/calendar.d.ts +0 -2
- package/dist/components/ui/card.d.ts +0 -2
- package/dist/components/ui/collapsible.d.ts +0 -2
- package/dist/components/ui/command.d.ts +0 -2
- package/dist/components/ui/dialog.d.ts +0 -2
- package/dist/components/ui/div-button.d.ts +0 -2
- package/dist/components/ui/dropdown-menu.d.ts +0 -2
- package/dist/components/ui/icon.d.ts +0 -2
- package/dist/components/ui/input.d.ts +0 -2
- package/dist/components/ui/item.d.ts +0 -2
- package/dist/components/ui/label.d.ts +0 -2
- package/dist/components/ui/popover.d.ts +0 -2
- package/dist/components/ui/progress.d.ts +0 -2
- package/dist/components/ui/scroll-area.d.ts +0 -2
- package/dist/components/ui/select.d.ts +0 -2
- package/dist/components/ui/separator.d.ts +0 -2
- package/dist/components/ui/sheet.d.ts +0 -2
- package/dist/components/ui/spinner.d.ts +0 -2
- package/dist/components/ui/switch.d.ts +0 -2
- package/dist/components/ui/table.d.ts +0 -2
- package/dist/components/ui/textarea.d.ts +0 -2
- package/dist/components/ui/tooltip.d.ts +0 -2
- package/dist/confirm-dialog.d.ts +0 -35
- package/dist/convos.d.ts +0 -184
- package/dist/data-table.d.ts +0 -23
- package/dist/date-picker.d.ts +0 -12
- package/dist/dialog.d.ts +0 -30
- package/dist/div-button.d.ts +0 -16
- package/dist/dropdown-menu.d.ts +0 -43
- package/dist/esm/ChatSearch.css +0 -1
- package/dist/esm/chunks/ChatSearch.DheHGnl7.js +0 -6482
- package/dist/esm/chunks/ChatSearch.DheHGnl7.js.map +0 -1
- package/dist/esm/chunks/FormattedMessage.ieoe4jPf.js +0 -39760
- package/dist/esm/chunks/FormattedMessage.ieoe4jPf.js.map +0 -1
- package/dist/esm/chunks/_commonjsHelpers.BFTU3MAI.js +0 -8
- package/dist/esm/chunks/_commonjsHelpers.BFTU3MAI.js.map +0 -1
- package/dist/esm/chunks/chart.DGCX9VIn.js +0 -219
- package/dist/esm/chunks/chart.DGCX9VIn.js.map +0 -1
- package/dist/esm/chunks/combobox.CkN-wAHB.js +0 -74
- package/dist/esm/chunks/combobox.CkN-wAHB.js.map +0 -1
- package/dist/esm/chunks/data-table.DbcAYxMY.js +0 -102
- package/dist/esm/chunks/data-table.DbcAYxMY.js.map +0 -1
- package/dist/esm/chunks/date-picker.sQXSlqNZ.js +0 -26
- package/dist/esm/chunks/date-picker.sQXSlqNZ.js.map +0 -1
- package/dist/esm/chunks/extends.mO86zOh3.js +0 -12
- package/dist/esm/chunks/extends.mO86zOh3.js.map +0 -1
- package/dist/esm/chunks/feedback.DkdQ_9Xt.js +0 -165
- package/dist/esm/chunks/feedback.DkdQ_9Xt.js.map +0 -1
- package/dist/esm/chunks/file-upload-status.Vw0Zxmir.js +0 -141
- package/dist/esm/chunks/file-upload-status.Vw0Zxmir.js.map +0 -1
- package/dist/esm/chunks/filters.Be4KPvMA.js +0 -565
- package/dist/esm/chunks/filters.Be4KPvMA.js.map +0 -1
- package/dist/esm/chunks/formatNumber.Bm2k8QrT.js +0 -10
- package/dist/esm/chunks/formatNumber.Bm2k8QrT.js.map +0 -1
- package/dist/esm/chunks/generating-star.CozjECmM.js +0 -1490
- package/dist/esm/chunks/generating-star.CozjECmM.js.map +0 -1
- package/dist/esm/chunks/index.BqibIWDw.js +0 -137
- package/dist/esm/chunks/index.BqibIWDw.js.map +0 -1
- package/dist/esm/chunks/love.o_d3F-ZG.js +0 -56
- package/dist/esm/chunks/love.o_d3F-ZG.js.map +0 -1
- package/dist/esm/chunks/simpleSelect.B1rktKkt.js +0 -23
- package/dist/esm/chunks/simpleSelect.B1rktKkt.js.map +0 -1
- package/dist/esm/chunks/two-level-combobox.DsWPDcI6.js +0 -132
- package/dist/esm/chunks/two-level-combobox.DsWPDcI6.js.map +0 -1
- package/dist/esm/chunks/utils.Cwtlq8dh.js +0 -45
- package/dist/esm/chunks/utils.Cwtlq8dh.js.map +0 -1
- package/dist/esm/colors.js +0 -198
- package/dist/esm/colors.js.map +0 -1
- package/dist/esm/components/chart-area-linear.js +0 -87
- package/dist/esm/components/chart-area-linear.js.map +0 -1
- package/dist/esm/components/chart-radial-stacked.js +0 -59
- package/dist/esm/components/chart-radial-stacked.js.map +0 -1
- package/dist/esm/components/chat-search.js +0 -2
- package/dist/esm/components/chat-search.js.map +0 -1
- package/dist/esm/components/combobox.js +0 -2
- package/dist/esm/components/combobox.js.map +0 -1
- package/dist/esm/components/confirm-dialog.js +0 -48
- package/dist/esm/components/confirm-dialog.js.map +0 -1
- package/dist/esm/components/convos.js +0 -510
- package/dist/esm/components/convos.js.map +0 -1
- package/dist/esm/components/data-table.js +0 -2
- package/dist/esm/components/data-table.js.map +0 -1
- package/dist/esm/components/date-picker.js +0 -2
- package/dist/esm/components/date-picker.js.map +0 -1
- package/dist/esm/components/feedback.js +0 -2
- package/dist/esm/components/feedback.js.map +0 -1
- package/dist/esm/components/file-upload.js +0 -2
- package/dist/esm/components/file-upload.js.map +0 -1
- package/dist/esm/components/filter.js +0 -2
- package/dist/esm/components/filter.js.map +0 -1
- package/dist/esm/components/generating-star.js +0 -2
- package/dist/esm/components/generating-star.js.map +0 -1
- package/dist/esm/components/markdown.js +0 -2
- package/dist/esm/components/markdown.js.map +0 -1
- package/dist/esm/components/metric-card.js +0 -61
- package/dist/esm/components/metric-card.js.map +0 -1
- package/dist/esm/components/select.js +0 -2
- package/dist/esm/components/select.js.map +0 -1
- package/dist/esm/components/two-level-combobox.js +0 -2
- package/dist/esm/components/two-level-combobox.js.map +0 -1
- package/dist/esm/components/ui/accordion.js +0 -47
- package/dist/esm/components/ui/accordion.js.map +0 -1
- package/dist/esm/components/ui/alert-dialog.js +0 -147
- package/dist/esm/components/ui/alert-dialog.js.map +0 -1
- package/dist/esm/components/ui/alert.js +0 -116
- package/dist/esm/components/ui/alert.js.map +0 -1
- package/dist/esm/components/ui/badge.js +0 -26
- package/dist/esm/components/ui/badge.js.map +0 -1
- package/dist/esm/components/ui/button-group.js +0 -74
- package/dist/esm/components/ui/button-group.js.map +0 -1
- package/dist/esm/components/ui/button.js +0 -51
- package/dist/esm/components/ui/button.js.map +0 -1
- package/dist/esm/components/ui/calendar.js +0 -26
- package/dist/esm/components/ui/calendar.js.map +0 -1
- package/dist/esm/components/ui/card.js +0 -56
- package/dist/esm/components/ui/card.js.map +0 -1
- package/dist/esm/components/ui/collapsible.js +0 -34
- package/dist/esm/components/ui/collapsible.js.map +0 -1
- package/dist/esm/components/ui/command.js +0 -103
- package/dist/esm/components/ui/command.js.map +0 -1
- package/dist/esm/components/ui/dialog.js +0 -88
- package/dist/esm/components/ui/dialog.js.map +0 -1
- package/dist/esm/components/ui/div-button.js +0 -59
- package/dist/esm/components/ui/div-button.js.map +0 -1
- package/dist/esm/components/ui/dropdown-menu.js +0 -132
- package/dist/esm/components/ui/dropdown-menu.js.map +0 -1
- package/dist/esm/components/ui/icon.js +0 -16
- package/dist/esm/components/ui/icon.js.map +0 -1
- package/dist/esm/components/ui/input.js +0 -29
- package/dist/esm/components/ui/input.js.map +0 -1
- package/dist/esm/components/ui/item.js +0 -179
- package/dist/esm/components/ui/item.js.map +0 -1
- package/dist/esm/components/ui/label.js +0 -20
- package/dist/esm/components/ui/label.js.map +0 -1
- package/dist/esm/components/ui/popover.js +0 -24
- package/dist/esm/components/ui/popover.js.map +0 -1
- package/dist/esm/components/ui/progress.js +0 -23
- package/dist/esm/components/ui/progress.js.map +0 -1
- package/dist/esm/components/ui/scroll-area.js +0 -34
- package/dist/esm/components/ui/scroll-area.js.map +0 -1
- package/dist/esm/components/ui/select.js +0 -81
- package/dist/esm/components/ui/select.js.map +0 -1
- package/dist/esm/components/ui/separator.js +0 -24
- package/dist/esm/components/ui/separator.js.map +0 -1
- package/dist/esm/components/ui/sheet.js +0 -99
- package/dist/esm/components/ui/sheet.js.map +0 -1
- package/dist/esm/components/ui/spinner.js +0 -18
- package/dist/esm/components/ui/spinner.js.map +0 -1
- package/dist/esm/components/ui/switch.js +0 -27
- package/dist/esm/components/ui/switch.js.map +0 -1
- package/dist/esm/components/ui/table.js +0 -83
- package/dist/esm/components/ui/table.js.map +0 -1
- package/dist/esm/components/ui/textarea.js +0 -34
- package/dist/esm/components/ui/textarea.js.map +0 -1
- package/dist/esm/components/ui/tooltip.js +0 -34
- package/dist/esm/components/ui/tooltip.js.map +0 -1
- package/dist/esm/convos.css +0 -1
- package/dist/esm/date-picker.css +0 -1
- package/dist/esm/global.css +0 -1
- package/dist/esm/index.js +0 -148
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/tailwind.preset.js +0 -1492
- package/dist/esm/tailwind.preset.js.map +0 -1
- package/dist/feedback.d.ts +0 -21
- package/dist/file-upload.d.ts +0 -45
- package/dist/filter.d.ts +0 -82
- package/dist/generating-star.d.ts +0 -15
- package/dist/icon.d.ts +0 -26
- package/dist/index.d.ts +0 -1350
- package/dist/input.d.ts +0 -11
- package/dist/item.d.ts +0 -39
- package/dist/label.d.ts +0 -8
- package/dist/markdown.d.ts +0 -55
- package/dist/metric-card.d.ts +0 -21
- package/dist/popover.d.ts +0 -12
- package/dist/progress.d.ts +0 -8
- package/dist/scroll-area.d.ts +0 -8
- package/dist/select.d.ts +0 -20
- package/dist/separator.d.ts +0 -6
- package/dist/sheet.d.ts +0 -39
- package/dist/spinner.d.ts +0 -5
- package/dist/stats.html +0 -4949
- package/dist/switch.d.ts +0 -6
- package/dist/table.d.ts +0 -19
- package/dist/tailwind.preset.d.ts +0 -1
- package/dist/textarea.d.ts +0 -9
- package/dist/tooltip.d.ts +0 -18
- package/dist/two-level-combobox.d.ts +0 -24
package/README.md
CHANGED
|
@@ -110,6 +110,259 @@ Build the library with individual component exports:
|
|
|
110
110
|
yarn build:components
|
|
111
111
|
```
|
|
112
112
|
|
|
113
|
+
---
|
|
114
|
+
|
|
115
|
+
## Development Guide
|
|
116
|
+
|
|
117
|
+
This section explains the architecture and patterns used in this component library to help new developers get started quickly.
|
|
118
|
+
|
|
119
|
+
### Color System
|
|
120
|
+
|
|
121
|
+
Our color system is built on CSS custom properties (variables) defined in `src/global.css`. All variables use the `--bfc-` prefix (Brainfish Components).
|
|
122
|
+
|
|
123
|
+
#### Color Token Scale
|
|
124
|
+
|
|
125
|
+
Colors follow a 100-1000 scale where lower numbers are lighter and higher numbers are darker:
|
|
126
|
+
|
|
127
|
+
```css
|
|
128
|
+
--bfc-v2-color-blue-100: #e9f2fe; /* lightest */
|
|
129
|
+
--bfc-v2-color-blue-500: #4688ec; /* mid-tone */
|
|
130
|
+
--bfc-v2-color-blue-1000: #1c2b42; /* darkest */
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
#### Available Color Palettes
|
|
134
|
+
|
|
135
|
+
| Palette | CSS Variable Pattern |
|
|
136
|
+
|-----------|-----------------------------------|
|
|
137
|
+
| Mono | `--bfc-v2-color-mono-{100-1000}` |
|
|
138
|
+
| Red | `--bfc-v2-color-red-{100-1000}` |
|
|
139
|
+
| Orange | `--bfc-v2-color-orange-{100-1000}`|
|
|
140
|
+
| Yellow | `--bfc-v2-color-yellow-{100-1000}`|
|
|
141
|
+
| Lime | `--bfc-v2-color-lime-{100-1000}` |
|
|
142
|
+
| Green | `--bfc-v2-color-green-{100-1000}` |
|
|
143
|
+
| Blue | `--bfc-v2-color-blue-{100-1000}` |
|
|
144
|
+
| Teal | `--bfc-v2-color-teal-{100-1000}` |
|
|
145
|
+
| Purple | `--bfc-v2-color-purple-{100-1000}`|
|
|
146
|
+
| Magenta | `--bfc-v2-color-magenta-{100-1000}`|
|
|
147
|
+
|
|
148
|
+
#### Semantic Color Tokens
|
|
149
|
+
|
|
150
|
+
Instead of using raw color values, use semantic tokens that adapt to themes:
|
|
151
|
+
|
|
152
|
+
| Token | Purpose |
|
|
153
|
+
|--------------------------|--------------------------------|
|
|
154
|
+
| `--bfc-primary` | Primary brand color |
|
|
155
|
+
| `--bfc-background` | Page background |
|
|
156
|
+
| `--bfc-foreground` | Primary text color |
|
|
157
|
+
| `--bfc-muted` | Subdued backgrounds |
|
|
158
|
+
| `--bfc-muted-foreground` | Subdued text |
|
|
159
|
+
| `--bfc-border` | Border color |
|
|
160
|
+
| `--bfc-destructive-bg` | Error/danger backgrounds |
|
|
161
|
+
| `--bfc-success-bg` | Success state backgrounds |
|
|
162
|
+
|
|
163
|
+
#### Dark Mode
|
|
164
|
+
|
|
165
|
+
Dark mode is activated by adding the `.dark` class to the <html> element. The color scale is automatically inverted (100 becomes the darkest, 1000 becomes the lightest), ensuring consistent contrast in both themes.
|
|
166
|
+
|
|
167
|
+
```html
|
|
168
|
+
<!-- Light mode (default) -->
|
|
169
|
+
<html>...</html>
|
|
170
|
+
|
|
171
|
+
<!-- Dark mode -->
|
|
172
|
+
<html class="dark">...</html>
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
### Tailwind CSS Integration
|
|
176
|
+
|
|
177
|
+
We use Tailwind CSS with a custom preset that maps our color system to Tailwind utilities.
|
|
178
|
+
|
|
179
|
+
#### Using the Tailwind Preset
|
|
180
|
+
|
|
181
|
+
Consumers of this library can import our Tailwind preset to use the same design tokens:
|
|
182
|
+
|
|
183
|
+
```js
|
|
184
|
+
// tailwind.config.js
|
|
185
|
+
module.exports = {
|
|
186
|
+
presets: [require('@brainfish-ai/components/tailwind')],
|
|
187
|
+
// ... your config
|
|
188
|
+
};
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
#### Semantic Color Classes
|
|
192
|
+
|
|
193
|
+
Use semantic Tailwind classes instead of raw colors:
|
|
194
|
+
|
|
195
|
+
```tsx
|
|
196
|
+
// Good - uses semantic colors that adapt to themes
|
|
197
|
+
<div className="bg-primary text-foreground border-border" />
|
|
198
|
+
<div className="bg-destructive text-destructive" />
|
|
199
|
+
<div className="bg-muted text-muted-foreground" />
|
|
200
|
+
|
|
201
|
+
// Bad - hardcoded colors won't adapt to dark mode
|
|
202
|
+
<div className="bg-[#a3e635] text-[#171717]" />
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
#### Typography Utilities
|
|
206
|
+
|
|
207
|
+
Custom typography classes are available for consistent text styles:
|
|
208
|
+
|
|
209
|
+
| Class | Font Size | Use Case |
|
|
210
|
+
|----------------|-----------|---------------------|
|
|
211
|
+
| `.heading-xxl` | 2rem | Page titles |
|
|
212
|
+
| `.heading-xl` | 1.75rem | Section headers |
|
|
213
|
+
| `.heading-lg` | 1.5rem | Card headers |
|
|
214
|
+
| `.heading-m` | 1.25rem | Subsections |
|
|
215
|
+
| `.heading-sm` | 1rem | Small headers |
|
|
216
|
+
| `.paragraph-lg`| 1rem | Body text |
|
|
217
|
+
| `.paragraph-md`| 0.875rem | Default text |
|
|
218
|
+
| `.paragraph-sm`| 0.75rem | Captions, labels |
|
|
219
|
+
|
|
220
|
+
#### The `cn()` Utility
|
|
221
|
+
|
|
222
|
+
Use `cn()` from `@/lib/utils` to merge Tailwind classes safely:
|
|
223
|
+
|
|
224
|
+
```tsx
|
|
225
|
+
import { cn } from '@/lib/utils';
|
|
226
|
+
|
|
227
|
+
// Merges classes and handles conflicts properly
|
|
228
|
+
<div className={cn('bg-primary p-4', isActive && 'bg-accent', className)} />
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
### Component Patterns (shadcn/ui)
|
|
232
|
+
|
|
233
|
+
Our UI components follow [shadcn/ui](https://ui.shadcn.com/) patterns and conventions.
|
|
234
|
+
|
|
235
|
+
#### Component Location
|
|
236
|
+
|
|
237
|
+
- Base UI components: `src/components/ui/`
|
|
238
|
+
- Complex/composite components: `src/components/`
|
|
239
|
+
|
|
240
|
+
#### Component Structure
|
|
241
|
+
|
|
242
|
+
Components use `class-variance-authority` (CVA) for variant management:
|
|
243
|
+
|
|
244
|
+
```tsx
|
|
245
|
+
import * as React from 'react';
|
|
246
|
+
import { cva, type VariantProps } from 'class-variance-authority';
|
|
247
|
+
import { cn } from '@/lib/utils';
|
|
248
|
+
|
|
249
|
+
// Define variants with CVA
|
|
250
|
+
const buttonVariants = cva(
|
|
251
|
+
'inline-flex items-center justify-center rounded-md text-sm font-medium',
|
|
252
|
+
{
|
|
253
|
+
variants: {
|
|
254
|
+
variant: {
|
|
255
|
+
default: 'bg-primary text-primary-foreground',
|
|
256
|
+
destructive: 'bg-destructive text-destructive-foreground',
|
|
257
|
+
outline: 'border border-input bg-background',
|
|
258
|
+
},
|
|
259
|
+
size: {
|
|
260
|
+
default: 'h-9 px-4 py-2',
|
|
261
|
+
sm: 'h-8 px-3 text-sm',
|
|
262
|
+
lg: 'h-10 px-8',
|
|
263
|
+
},
|
|
264
|
+
},
|
|
265
|
+
defaultVariants: {
|
|
266
|
+
variant: 'default',
|
|
267
|
+
size: 'default',
|
|
268
|
+
},
|
|
269
|
+
}
|
|
270
|
+
);
|
|
271
|
+
|
|
272
|
+
// Component with forwarded ref
|
|
273
|
+
export interface ButtonProps
|
|
274
|
+
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
275
|
+
VariantProps<typeof buttonVariants> {}
|
|
276
|
+
|
|
277
|
+
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
278
|
+
({ className, variant, size, ...props }, ref) => (
|
|
279
|
+
<button
|
|
280
|
+
className={cn(buttonVariants({ variant, size, className }))}
|
|
281
|
+
ref={ref}
|
|
282
|
+
{...props}
|
|
283
|
+
/>
|
|
284
|
+
)
|
|
285
|
+
);
|
|
286
|
+
Button.displayName = 'Button';
|
|
287
|
+
|
|
288
|
+
export { Button, buttonVariants };
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
#### Key Conventions
|
|
292
|
+
|
|
293
|
+
1. **Always use semantic colors** - Never use raw hex values in components
|
|
294
|
+
2. **Forward refs** - All components should forward refs for flexibility
|
|
295
|
+
3. **Use `cn()` for className** - Always merge with incoming className prop
|
|
296
|
+
4. **Export variants** - Export the CVA variants for reuse
|
|
297
|
+
5. **Set displayName** - Always set `displayName` for better debugging
|
|
298
|
+
|
|
299
|
+
### Storybook Requirements
|
|
300
|
+
|
|
301
|
+
**Every component MUST have an accompanying Storybook story file.**
|
|
302
|
+
|
|
303
|
+
#### Why Stories Matter
|
|
304
|
+
|
|
305
|
+
- Enable independent component testing and development
|
|
306
|
+
- Serve as living documentation for the component API
|
|
307
|
+
- Allow visual regression testing
|
|
308
|
+
- Help designers and developers collaborate
|
|
309
|
+
|
|
310
|
+
#### Story File Convention
|
|
311
|
+
|
|
312
|
+
For a component `Button.tsx`, create `Button.stories.tsx` in the same directory:
|
|
313
|
+
|
|
314
|
+
```
|
|
315
|
+
src/components/ui/
|
|
316
|
+
├── button.tsx
|
|
317
|
+
├── button.stories.tsx <-- Required!
|
|
318
|
+
└── button.test.tsx <-- Optional unit tests
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
#### Story Structure
|
|
322
|
+
|
|
323
|
+
```tsx
|
|
324
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
325
|
+
import { Button } from './button';
|
|
326
|
+
|
|
327
|
+
const meta: Meta<typeof Button> = {
|
|
328
|
+
title: 'UI/Button',
|
|
329
|
+
component: Button,
|
|
330
|
+
tags: ['autodocs'],
|
|
331
|
+
};
|
|
332
|
+
|
|
333
|
+
export default meta;
|
|
334
|
+
type Story = StoryObj<typeof Button>;
|
|
335
|
+
|
|
336
|
+
// Show all variants
|
|
337
|
+
export const Default: Story = {
|
|
338
|
+
args: { children: 'Click me' },
|
|
339
|
+
};
|
|
340
|
+
|
|
341
|
+
export const Destructive: Story = {
|
|
342
|
+
args: { variant: 'destructive', children: 'Delete' },
|
|
343
|
+
};
|
|
344
|
+
|
|
345
|
+
export const AllSizes: Story = {
|
|
346
|
+
render: () => (
|
|
347
|
+
<div className="flex gap-4">
|
|
348
|
+
<Button size="sm">Small</Button>
|
|
349
|
+
<Button size="default">Default</Button>
|
|
350
|
+
<Button size="lg">Large</Button>
|
|
351
|
+
</div>
|
|
352
|
+
),
|
|
353
|
+
};
|
|
354
|
+
```
|
|
355
|
+
|
|
356
|
+
#### Running Storybook
|
|
357
|
+
|
|
358
|
+
```bash
|
|
359
|
+
yarn storybook
|
|
360
|
+
```
|
|
361
|
+
|
|
362
|
+
Then open [http://localhost:6006](http://localhost:6006) in your browser.
|
|
363
|
+
|
|
364
|
+
---
|
|
365
|
+
|
|
113
366
|
## Linting and Code formating for Typescript
|
|
114
367
|
|
|
115
368
|
Linting and code formating is done via [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) using [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react) and
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brainfish-ai/components",
|
|
3
|
-
"version": "0.18.4-alpha.
|
|
3
|
+
"version": "0.18.4-alpha.6",
|
|
4
4
|
"description": "Brainfish Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "./dist/esm/index.js",
|
|
@@ -189,4 +189,4 @@
|
|
|
189
189
|
"y-webrtc": "^10.3.0",
|
|
190
190
|
"yjs": "^13.6.27"
|
|
191
191
|
}
|
|
192
|
-
}
|
|
192
|
+
}
|
package/dist/accordion.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
2
|
-
import * as React_2 from 'react';
|
|
3
|
-
|
|
4
|
-
export declare function Accordion({ ...props }: React_2.ComponentProps<typeof AccordionPrimitive.Root>): React_2.JSX.Element;
|
|
5
|
-
|
|
6
|
-
export declare function AccordionContent({ className, children, ...props }: React_2.ComponentProps<typeof AccordionPrimitive.Content>): React_2.JSX.Element;
|
|
7
|
-
|
|
8
|
-
export declare function AccordionItem({ className, ...props }: React_2.ComponentProps<typeof AccordionPrimitive.Item>): React_2.JSX.Element;
|
|
9
|
-
|
|
10
|
-
export declare function AccordionTrigger({ className, children, ...props }: React_2.ComponentProps<typeof AccordionPrimitive.Trigger>): React_2.JSX.Element;
|
|
11
|
-
|
|
12
|
-
export { }
|
package/dist/alert-dialog.d.ts
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
2
|
-
import { ClassProp } from 'class-variance-authority/types';
|
|
3
|
-
import * as React_2 from 'react';
|
|
4
|
-
import { VariantProps } from 'class-variance-authority';
|
|
5
|
-
|
|
6
|
-
export declare const AlertDialog: React_2.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogProps & React_2.RefAttributes<never>>;
|
|
7
|
-
|
|
8
|
-
export declare const AlertDialogAction: React_2.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
|
|
9
|
-
variant?: "link" | "dark" | "default" | "destructive" | "success" | "outline" | "secondary" | "ghost" | "shadow" | null | undefined;
|
|
10
|
-
size?: "default" | "icon" | "xs" | "sm" | "lg" | null | undefined;
|
|
11
|
-
} & ClassProp) | undefined) => string> & {
|
|
12
|
-
asChild?: boolean | undefined;
|
|
13
|
-
} & React_2.RefAttributes<HTMLButtonElement>>;
|
|
14
|
-
|
|
15
|
-
export declare const AlertDialogCancel: React_2.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
|
|
16
|
-
variant?: "link" | "dark" | "default" | "destructive" | "success" | "outline" | "secondary" | "ghost" | "shadow" | null | undefined;
|
|
17
|
-
size?: "default" | "icon" | "xs" | "sm" | "lg" | null | undefined;
|
|
18
|
-
} & ClassProp) | undefined) => string> & React_2.RefAttributes<HTMLButtonElement>>;
|
|
19
|
-
|
|
20
|
-
export declare const AlertDialogContent: React_2.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
21
|
-
zIndex?: string | undefined;
|
|
22
|
-
} & React_2.RefAttributes<HTMLDivElement>>;
|
|
23
|
-
|
|
24
|
-
export declare const AlertDialogDescription: React_2.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React_2.RefAttributes<HTMLParagraphElement>, "ref"> & React_2.RefAttributes<HTMLParagraphElement>>;
|
|
25
|
-
|
|
26
|
-
export declare const AlertDialogFooter: {
|
|
27
|
-
({ className, ...props }: React_2.HTMLAttributes<HTMLDivElement>): React_2.JSX.Element;
|
|
28
|
-
displayName: string;
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
export declare const AlertDialogHeader: {
|
|
32
|
-
({ className, ...props }: React_2.HTMLAttributes<HTMLDivElement>): React_2.JSX.Element;
|
|
33
|
-
displayName: string;
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
export declare const AlertDialogOverlay: React_2.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
37
|
-
zIndex?: string | undefined;
|
|
38
|
-
} & React_2.RefAttributes<HTMLDivElement>>;
|
|
39
|
-
|
|
40
|
-
export declare const AlertDialogPortal: React_2.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
|
|
41
|
-
|
|
42
|
-
export declare const AlertDialogTitle: React_2.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React_2.RefAttributes<HTMLHeadingElement>, "ref"> & React_2.RefAttributes<HTMLHeadingElement>>;
|
|
43
|
-
|
|
44
|
-
export declare const AlertDialogTrigger: React_2.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
|
|
45
|
-
|
|
46
|
-
export { }
|
package/dist/alert.d.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { ClassProp } from 'class-variance-authority/types';
|
|
2
|
-
import * as React_2 from 'react';
|
|
3
|
-
import { VariantProps } from 'class-variance-authority';
|
|
4
|
-
|
|
5
|
-
export declare const Alert: React_2.ForwardRefExoticComponent<Omit<React_2.ClassAttributes<HTMLDivElement> & React_2.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
6
|
-
variant?: "default" | "success" | "warning" | "danger" | "info" | null | undefined;
|
|
7
|
-
} & ClassProp) | undefined) => string>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
8
|
-
|
|
9
|
-
export declare const AlertAction: React_2.ForwardRefExoticComponent<Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
10
|
-
|
|
11
|
-
export declare const AlertContent: React_2.ForwardRefExoticComponent<Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
12
|
-
|
|
13
|
-
export declare const AlertDescription: React_2.ForwardRefExoticComponent<Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
14
|
-
|
|
15
|
-
export declare const AlertTitle: React_2.ForwardRefExoticComponent<Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React_2.RefAttributes<HTMLHeadingElement>>;
|
|
16
|
-
|
|
17
|
-
export { }
|
package/dist/badge.d.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { ClassProp } from 'class-variance-authority/types';
|
|
2
|
-
import * as React_2 from 'react';
|
|
3
|
-
import { VariantProps } from 'class-variance-authority';
|
|
4
|
-
|
|
5
|
-
export declare function Badge({ className, variant, ...props }: BadgeProps): React_2.JSX.Element;
|
|
6
|
-
|
|
7
|
-
export declare interface BadgeProps extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export declare const badgeVariants: (props?: ({
|
|
11
|
-
variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
|
|
12
|
-
} & ClassProp) | undefined) => string;
|
|
13
|
-
|
|
14
|
-
export { }
|
package/dist/button-group.d.ts
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { ClassProp } from 'class-variance-authority/types';
|
|
2
|
-
import { default as default_2 } from 'react';
|
|
3
|
-
import * as React_2 from 'react';
|
|
4
|
-
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
5
|
-
import { VariantProps } from 'class-variance-authority';
|
|
6
|
-
|
|
7
|
-
export declare function ButtonGroup({ className, orientation, ...props }: default_2.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): default_2.JSX.Element;
|
|
8
|
-
|
|
9
|
-
export declare function ButtonGroupSeparator({ className, orientation, ...props }: default_2.ComponentProps<typeof Separator>): default_2.JSX.Element;
|
|
10
|
-
|
|
11
|
-
export declare function ButtonGroupText({ className, asChild, ...props }: default_2.ComponentProps<"div"> & {
|
|
12
|
-
asChild?: boolean;
|
|
13
|
-
}): default_2.JSX.Element;
|
|
14
|
-
|
|
15
|
-
export declare const buttonGroupVariants: (props?: ({
|
|
16
|
-
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
17
|
-
} & ClassProp) | undefined) => string;
|
|
18
|
-
|
|
19
|
-
declare const Separator: React_2.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
20
|
-
|
|
21
|
-
export { }
|
package/dist/button.d.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { ClassProp } from 'class-variance-authority/types';
|
|
2
|
-
import * as React_2 from 'react';
|
|
3
|
-
import { VariantProps } from 'class-variance-authority';
|
|
4
|
-
|
|
5
|
-
export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
|
|
6
|
-
|
|
7
|
-
export declare interface ButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
8
|
-
asChild?: boolean;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export declare const buttonVariants: (props?: ({
|
|
12
|
-
variant?: "link" | "dark" | "default" | "destructive" | "success" | "outline" | "secondary" | "ghost" | "shadow" | null | undefined;
|
|
13
|
-
size?: "default" | "icon" | "xs" | "sm" | "lg" | null | undefined;
|
|
14
|
-
} & ClassProp) | undefined) => string;
|
|
15
|
-
|
|
16
|
-
export { }
|
package/dist/calendar.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { DayPicker } from 'react-day-picker';
|
|
2
|
-
import * as React_2 from 'react';
|
|
3
|
-
|
|
4
|
-
export declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): React_2.JSX.Element;
|
|
5
|
-
|
|
6
|
-
export declare namespace Calendar {
|
|
7
|
-
var displayName: string;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export declare type CalendarProps = React_2.ComponentProps<typeof DayPicker>;
|
|
11
|
-
|
|
12
|
-
export { }
|
package/dist/card.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import * as React_2 from 'react';
|
|
2
|
-
|
|
3
|
-
export declare const Card: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
|
|
4
|
-
|
|
5
|
-
export declare const CardContent: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
|
|
6
|
-
|
|
7
|
-
export declare const CardDescription: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
|
|
8
|
-
|
|
9
|
-
export declare const CardFooter: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
|
|
10
|
-
|
|
11
|
-
export declare const CardHeader: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
|
|
12
|
-
|
|
13
|
-
export declare const CardTitle: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
|
|
14
|
-
|
|
15
|
-
export { }
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { default as default_2 } from 'react';
|
|
2
|
-
import * as React_2 from 'react';
|
|
3
|
-
|
|
4
|
-
export declare function ChartAreaLinear({ title, metric, data, chartConfig, locale }: ChartAreaLinearProps): default_2.JSX.Element;
|
|
5
|
-
|
|
6
|
-
export declare interface ChartAreaLinearProps {
|
|
7
|
-
title: string;
|
|
8
|
-
metric: string;
|
|
9
|
-
data: {
|
|
10
|
-
date: Date | string;
|
|
11
|
-
key1: number;
|
|
12
|
-
key2?: number;
|
|
13
|
-
key3?: number;
|
|
14
|
-
key4?: number;
|
|
15
|
-
key5?: number;
|
|
16
|
-
}[];
|
|
17
|
-
chartConfig: ChartConfig;
|
|
18
|
-
locale?: string;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
declare type ChartConfig = {
|
|
22
|
-
[k in string]: {
|
|
23
|
-
label?: React_2.ReactNode;
|
|
24
|
-
icon?: React_2.ComponentType;
|
|
25
|
-
} & ({
|
|
26
|
-
color?: string;
|
|
27
|
-
theme?: never;
|
|
28
|
-
} | {
|
|
29
|
-
color?: never;
|
|
30
|
-
theme: Record<keyof typeof THEMES, string>;
|
|
31
|
-
});
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
export declare const description = "A linear area chart";
|
|
35
|
-
|
|
36
|
-
declare const THEMES: {
|
|
37
|
-
readonly light: "";
|
|
38
|
-
readonly dark: ".dark";
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
export { }
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { default as default_2 } from 'react';
|
|
2
|
-
import * as React_2 from 'react';
|
|
3
|
-
|
|
4
|
-
declare type ChartConfig = {
|
|
5
|
-
[k in string]: {
|
|
6
|
-
label?: React_2.ReactNode;
|
|
7
|
-
icon?: React_2.ComponentType;
|
|
8
|
-
} & ({
|
|
9
|
-
color?: string;
|
|
10
|
-
theme?: never;
|
|
11
|
-
} | {
|
|
12
|
-
color?: never;
|
|
13
|
-
theme: Record<keyof typeof THEMES, string>;
|
|
14
|
-
});
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export declare function ChartRadialStacked({ title, data, chartConfig, className }: ChartRadialStackedProps): default_2.JSX.Element | null;
|
|
18
|
-
|
|
19
|
-
export declare interface ChartRadialStackedProps {
|
|
20
|
-
title: string;
|
|
21
|
-
data: Record<string, number>[];
|
|
22
|
-
chartConfig: ChartConfig;
|
|
23
|
-
className?: string;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
declare const THEMES: {
|
|
27
|
-
readonly light: "";
|
|
28
|
-
readonly dark: ".dark";
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
export { }
|