@shipfox/react-ui 0.24.0 → 0.26.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/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/modal/modal.d.ts +2 -1
- package/dist/components/modal/modal.js +3 -2
- package/dist/components/slider/index.d.ts +2 -0
- package/dist/components/slider/index.js +3 -0
- package/dist/components/slider/slider.d.ts +10 -0
- package/dist/components/slider/slider.js +38 -0
- package/dist/components/table/data-table.js +57 -22
- package/dist/components/table/table.js +2 -1
- package/dist/components/table/table.stories.data.js +1 -1
- package/dist/styles.css +1 -1
- package/package.json +5 -5
- package/dist/colors.stories.js +0 -61
- package/dist/components/alert/alert.stories.js +0 -227
- package/dist/components/avatar/avatar.stories.js +0 -267
- package/dist/components/badge/badge.stories.js +0 -802
- package/dist/components/button/button-link.stories.js +0 -127
- package/dist/components/button/button.stories.js +0 -187
- package/dist/components/button/icon-button.stories.js +0 -344
- package/dist/components/button-group/button-group.stories.js +0 -644
- package/dist/components/card/card.stories.js +0 -216
- package/dist/components/checkbox/checkbox.stories.js +0 -566
- package/dist/components/code-block/code-block.stories.js +0 -341
- package/dist/components/combobox/combobox.stories.js +0 -191
- package/dist/components/command/command.stories.js +0 -228
- package/dist/components/confetti/confetti.stories.js +0 -41
- package/dist/components/count-up/count-up.stories.js +0 -568
- package/dist/components/dashboard/components/charts/bar-chart.stories.js +0 -287
- package/dist/components/dashboard/components/charts/line-chart.stories.js +0 -257
- package/dist/components/dashboard/dashboard.stories.js +0 -23
- package/dist/components/date-picker/date-picker.stories.js +0 -349
- package/dist/components/dropdown-input/dropdown-input.stories.js +0 -240
- package/dist/components/dropdown-menu/dropdown-menu.stories.js +0 -462
- package/dist/components/dynamic-item/dynamic-item.stories.js +0 -385
- package/dist/components/empty-state/empty-state.stories.js +0 -74
- package/dist/components/form/form.stories.js +0 -587
- package/dist/components/icon/icon.stories.js +0 -38
- package/dist/components/inline-tips/inline-tips.stories.js +0 -219
- package/dist/components/input/input.stories.js +0 -265
- package/dist/components/interval-selector/interval-selector.stories.js +0 -232
- package/dist/components/item/item.stories.js +0 -239
- package/dist/components/kbd/kbd.stories.js +0 -119
- package/dist/components/label/label.stories.js +0 -105
- package/dist/components/modal/modal.stories.js +0 -566
- package/dist/components/search/search.stories.js +0 -630
- package/dist/components/select/select.stories.js +0 -393
- package/dist/components/sheet/sheet.stories.js +0 -368
- package/dist/components/skeleton/skeleton.stories.js +0 -345
- package/dist/components/table/table.stories.js +0 -302
- package/dist/components/tabs/tabs.stories.js +0 -179
- package/dist/components/textarea/textarea.stories.js +0 -339
- package/dist/components/toast/toast.stories.js +0 -326
- package/dist/components/tooltip/tooltip.stories.js +0 -560
- package/dist/components/typography/code.stories.js +0 -54
- package/dist/components/typography/header.stories.js +0 -34
- package/dist/components/typography/text.stories.js +0 -105
- package/dist/onboarding/sign-in.stories.js +0 -101
|
@@ -1,216 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Button } from '../../components/button/index.js';
|
|
3
|
-
import { Input } from '../../components/input/index.js';
|
|
4
|
-
import { Label } from '../../components/label/index.js';
|
|
5
|
-
import { Text } from '../../components/typography/index.js';
|
|
6
|
-
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card.js';
|
|
7
|
-
const meta = {
|
|
8
|
-
title: 'Components/Card',
|
|
9
|
-
component: Card,
|
|
10
|
-
tags: [
|
|
11
|
-
'autodocs'
|
|
12
|
-
],
|
|
13
|
-
parameters: {
|
|
14
|
-
layout: 'centered'
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
export default meta;
|
|
18
|
-
export const Default = {
|
|
19
|
-
render: ()=>/*#__PURE__*/ _jsx("div", {
|
|
20
|
-
className: "w-400",
|
|
21
|
-
children: /*#__PURE__*/ _jsxs(Card, {
|
|
22
|
-
children: [
|
|
23
|
-
/*#__PURE__*/ _jsxs(CardHeader, {
|
|
24
|
-
children: [
|
|
25
|
-
/*#__PURE__*/ _jsx(CardTitle, {
|
|
26
|
-
children: "Card Title"
|
|
27
|
-
}),
|
|
28
|
-
/*#__PURE__*/ _jsx(CardDescription, {
|
|
29
|
-
children: "This is a description of the card content."
|
|
30
|
-
})
|
|
31
|
-
]
|
|
32
|
-
}),
|
|
33
|
-
/*#__PURE__*/ _jsx(CardContent, {
|
|
34
|
-
children: /*#__PURE__*/ _jsx(Text, {
|
|
35
|
-
children: "Card content goes here. This is where the main information is displayed."
|
|
36
|
-
})
|
|
37
|
-
})
|
|
38
|
-
]
|
|
39
|
-
})
|
|
40
|
-
})
|
|
41
|
-
};
|
|
42
|
-
export const WithFooter = {
|
|
43
|
-
render: ()=>/*#__PURE__*/ _jsx("div", {
|
|
44
|
-
className: "w-400",
|
|
45
|
-
children: /*#__PURE__*/ _jsxs(Card, {
|
|
46
|
-
children: [
|
|
47
|
-
/*#__PURE__*/ _jsxs(CardHeader, {
|
|
48
|
-
children: [
|
|
49
|
-
/*#__PURE__*/ _jsx(CardTitle, {
|
|
50
|
-
children: "Card with Footer"
|
|
51
|
-
}),
|
|
52
|
-
/*#__PURE__*/ _jsx(CardDescription, {
|
|
53
|
-
children: "This card includes a footer with actions."
|
|
54
|
-
})
|
|
55
|
-
]
|
|
56
|
-
}),
|
|
57
|
-
/*#__PURE__*/ _jsx(CardContent, {
|
|
58
|
-
children: /*#__PURE__*/ _jsx(Text, {
|
|
59
|
-
children: "Main content area with important information."
|
|
60
|
-
})
|
|
61
|
-
}),
|
|
62
|
-
/*#__PURE__*/ _jsxs(CardFooter, {
|
|
63
|
-
children: [
|
|
64
|
-
/*#__PURE__*/ _jsx(Button, {
|
|
65
|
-
variant: "secondary",
|
|
66
|
-
size: "sm",
|
|
67
|
-
children: "Cancel"
|
|
68
|
-
}),
|
|
69
|
-
/*#__PURE__*/ _jsx(Button, {
|
|
70
|
-
size: "sm",
|
|
71
|
-
children: "Save"
|
|
72
|
-
})
|
|
73
|
-
]
|
|
74
|
-
})
|
|
75
|
-
]
|
|
76
|
-
})
|
|
77
|
-
})
|
|
78
|
-
};
|
|
79
|
-
export const WithAction = {
|
|
80
|
-
render: ()=>/*#__PURE__*/ _jsx("div", {
|
|
81
|
-
className: "w-400",
|
|
82
|
-
children: /*#__PURE__*/ _jsxs(Card, {
|
|
83
|
-
children: [
|
|
84
|
-
/*#__PURE__*/ _jsx(CardHeader, {
|
|
85
|
-
children: /*#__PURE__*/ _jsxs("div", {
|
|
86
|
-
className: "flex items-start justify-between gap-16",
|
|
87
|
-
children: [
|
|
88
|
-
/*#__PURE__*/ _jsxs("div", {
|
|
89
|
-
className: "flex flex-col gap-4 flex-1",
|
|
90
|
-
children: [
|
|
91
|
-
/*#__PURE__*/ _jsx(CardTitle, {
|
|
92
|
-
children: "Card with Action"
|
|
93
|
-
}),
|
|
94
|
-
/*#__PURE__*/ _jsx(CardDescription, {
|
|
95
|
-
children: "This card has an action button in the header."
|
|
96
|
-
})
|
|
97
|
-
]
|
|
98
|
-
}),
|
|
99
|
-
/*#__PURE__*/ _jsx(CardAction, {
|
|
100
|
-
children: /*#__PURE__*/ _jsx(Button, {
|
|
101
|
-
variant: "transparent",
|
|
102
|
-
size: "sm",
|
|
103
|
-
children: "Edit"
|
|
104
|
-
})
|
|
105
|
-
})
|
|
106
|
-
]
|
|
107
|
-
})
|
|
108
|
-
}),
|
|
109
|
-
/*#__PURE__*/ _jsx(CardContent, {
|
|
110
|
-
children: /*#__PURE__*/ _jsx(Text, {
|
|
111
|
-
children: "Content that can be edited using the action button."
|
|
112
|
-
})
|
|
113
|
-
})
|
|
114
|
-
]
|
|
115
|
-
})
|
|
116
|
-
})
|
|
117
|
-
};
|
|
118
|
-
export const LoginForm = {
|
|
119
|
-
render: ()=>/*#__PURE__*/ _jsx("div", {
|
|
120
|
-
className: "w-400",
|
|
121
|
-
children: /*#__PURE__*/ _jsxs(Card, {
|
|
122
|
-
children: [
|
|
123
|
-
/*#__PURE__*/ _jsx(CardHeader, {
|
|
124
|
-
children: /*#__PURE__*/ _jsxs("div", {
|
|
125
|
-
className: "flex items-start justify-between gap-16",
|
|
126
|
-
children: [
|
|
127
|
-
/*#__PURE__*/ _jsxs("div", {
|
|
128
|
-
className: "flex flex-col gap-4 flex-1",
|
|
129
|
-
children: [
|
|
130
|
-
/*#__PURE__*/ _jsx(CardTitle, {
|
|
131
|
-
children: "Login to your account"
|
|
132
|
-
}),
|
|
133
|
-
/*#__PURE__*/ _jsx(CardDescription, {
|
|
134
|
-
children: "Enter your email below to login to your account"
|
|
135
|
-
})
|
|
136
|
-
]
|
|
137
|
-
}),
|
|
138
|
-
/*#__PURE__*/ _jsx(CardAction, {
|
|
139
|
-
children: /*#__PURE__*/ _jsx(Button, {
|
|
140
|
-
variant: "transparent",
|
|
141
|
-
size: "sm",
|
|
142
|
-
children: "Sign Up"
|
|
143
|
-
})
|
|
144
|
-
})
|
|
145
|
-
]
|
|
146
|
-
})
|
|
147
|
-
}),
|
|
148
|
-
/*#__PURE__*/ _jsx(CardContent, {
|
|
149
|
-
children: /*#__PURE__*/ _jsxs("form", {
|
|
150
|
-
className: "flex flex-col gap-16",
|
|
151
|
-
children: [
|
|
152
|
-
/*#__PURE__*/ _jsxs("div", {
|
|
153
|
-
className: "grid gap-6",
|
|
154
|
-
children: [
|
|
155
|
-
/*#__PURE__*/ _jsx(Label, {
|
|
156
|
-
htmlFor: "email",
|
|
157
|
-
children: "Email"
|
|
158
|
-
}),
|
|
159
|
-
/*#__PURE__*/ _jsx(Input, {
|
|
160
|
-
id: "email",
|
|
161
|
-
type: "email",
|
|
162
|
-
placeholder: "m@example.com",
|
|
163
|
-
required: true
|
|
164
|
-
})
|
|
165
|
-
]
|
|
166
|
-
}),
|
|
167
|
-
/*#__PURE__*/ _jsxs("div", {
|
|
168
|
-
className: "grid gap-6",
|
|
169
|
-
children: [
|
|
170
|
-
/*#__PURE__*/ _jsxs("div", {
|
|
171
|
-
className: "flex items-center",
|
|
172
|
-
children: [
|
|
173
|
-
/*#__PURE__*/ _jsx(Label, {
|
|
174
|
-
htmlFor: "password",
|
|
175
|
-
children: "Password"
|
|
176
|
-
}),
|
|
177
|
-
/*#__PURE__*/ _jsx(Button, {
|
|
178
|
-
variant: "transparent",
|
|
179
|
-
size: "xs",
|
|
180
|
-
className: "ml-auto",
|
|
181
|
-
children: "Forgot password?"
|
|
182
|
-
})
|
|
183
|
-
]
|
|
184
|
-
}),
|
|
185
|
-
/*#__PURE__*/ _jsx(Input, {
|
|
186
|
-
id: "password",
|
|
187
|
-
type: "password",
|
|
188
|
-
required: true
|
|
189
|
-
})
|
|
190
|
-
]
|
|
191
|
-
})
|
|
192
|
-
]
|
|
193
|
-
})
|
|
194
|
-
}),
|
|
195
|
-
/*#__PURE__*/ _jsxs(CardFooter, {
|
|
196
|
-
className: "flex-col gap-8",
|
|
197
|
-
children: [
|
|
198
|
-
/*#__PURE__*/ _jsx(Button, {
|
|
199
|
-
type: "submit",
|
|
200
|
-
className: "w-full",
|
|
201
|
-
children: "Login"
|
|
202
|
-
}),
|
|
203
|
-
/*#__PURE__*/ _jsx(Button, {
|
|
204
|
-
type: "submit",
|
|
205
|
-
variant: "secondary",
|
|
206
|
-
className: "w-full",
|
|
207
|
-
children: "Login with Google"
|
|
208
|
-
})
|
|
209
|
-
]
|
|
210
|
-
})
|
|
211
|
-
]
|
|
212
|
-
})
|
|
213
|
-
})
|
|
214
|
-
};
|
|
215
|
-
|
|
216
|
-
//# sourceMappingURL=card.stories.js.map
|