@altimateai/ui-components 0.0.1-beta.5 → 0.0.1-beta.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/dist/CoachForm.js +1 -1
- package/dist/storybook/Accordion.stories.tsx +52 -52
- package/dist/storybook/Alert.stories.tsx +61 -61
- package/dist/storybook/AlertDialog.stories.tsx +161 -161
- package/dist/storybook/Avatar.stories.tsx +58 -58
- package/dist/storybook/Badge.stories.tsx +36 -36
- package/dist/storybook/Button.stories.tsx +109 -109
- package/dist/storybook/Card.stories.tsx +69 -69
- package/dist/storybook/Checkbox.stories.tsx +65 -65
- package/dist/storybook/Command.stories.tsx +35 -35
- package/dist/storybook/DropdownMenu.stories.tsx +36 -36
- package/dist/storybook/Form.stories.tsx +114 -114
- package/dist/storybook/HoverCard.stories.tsx +99 -99
- package/dist/storybook/Input.stories.tsx +53 -53
- package/dist/storybook/Label.stories.tsx +42 -42
- package/dist/storybook/Menubar.stories.tsx +159 -159
- package/dist/storybook/Pagination.stories.tsx +152 -152
- package/dist/storybook/Popover.stories.tsx +23 -23
- package/dist/storybook/Progress.stories.tsx +89 -89
- package/dist/storybook/RadioGroup.stories.tsx +58 -58
- package/dist/storybook/Resizable.stories.tsx +119 -119
- package/dist/storybook/ScrollArea.stories.tsx +101 -101
- package/dist/storybook/Select.stories.tsx +95 -95
- package/dist/storybook/Sheet.stories.tsx +69 -69
- package/dist/storybook/Sidebar.stories.tsx +97 -97
- package/dist/storybook/Slider.stories.tsx +79 -79
- package/dist/storybook/Switch.stories.tsx +90 -90
- package/dist/storybook/Textarea.stories.tsx +50 -50
- package/dist/storybook/Toast.stories.tsx +107 -107
- package/dist/storybook/Tooltip.stories.tsx +28 -28
- package/dist/storybook/Typography.stories.tsx +178 -178
- package/package.json +2 -2
- package/readme.md +11 -11
|
@@ -1,159 +1,159 @@
|
|
|
1
|
-
import { Meta, StoryFn } from "@storybook/react";
|
|
2
|
-
import {
|
|
3
|
-
Menubar,
|
|
4
|
-
MenubarMenu,
|
|
5
|
-
MenubarTrigger,
|
|
6
|
-
MenubarContent,
|
|
7
|
-
MenubarItem,
|
|
8
|
-
MenubarSeparator,
|
|
9
|
-
MenubarShortcut,
|
|
10
|
-
MenubarCheckboxItem,
|
|
11
|
-
MenubarRadioGroup,
|
|
12
|
-
MenubarRadioItem,
|
|
13
|
-
MenubarSubTrigger,
|
|
14
|
-
MenubarSubContent,
|
|
15
|
-
MenubarLabel,
|
|
16
|
-
MenubarSub,
|
|
17
|
-
} from "../shadcn";
|
|
18
|
-
|
|
19
|
-
export default {
|
|
20
|
-
title: "Shadcn/Components/Menubar",
|
|
21
|
-
component: Menubar,
|
|
22
|
-
} as Meta;
|
|
23
|
-
|
|
24
|
-
export const Default: StoryFn = () => (
|
|
25
|
-
<Menubar>
|
|
26
|
-
<MenubarMenu>
|
|
27
|
-
<MenubarTrigger>File</MenubarTrigger>
|
|
28
|
-
<MenubarContent>
|
|
29
|
-
<MenubarItem>
|
|
30
|
-
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
|
|
31
|
-
</MenubarItem>
|
|
32
|
-
<MenubarItem>
|
|
33
|
-
New Window <MenubarShortcut>⌘N</MenubarShortcut>
|
|
34
|
-
</MenubarItem>
|
|
35
|
-
<MenubarItem disabled>New Incognito Window</MenubarItem>
|
|
36
|
-
<MenubarSeparator />
|
|
37
|
-
<MenubarItem>
|
|
38
|
-
Share <MenubarShortcut>⌘S</MenubarShortcut>
|
|
39
|
-
</MenubarItem>
|
|
40
|
-
<MenubarSeparator />
|
|
41
|
-
<MenubarItem>
|
|
42
|
-
Print... <MenubarShortcut>⌘P</MenubarShortcut>
|
|
43
|
-
</MenubarItem>
|
|
44
|
-
</MenubarContent>
|
|
45
|
-
</MenubarMenu>
|
|
46
|
-
</Menubar>
|
|
47
|
-
);
|
|
48
|
-
|
|
49
|
-
export const WithSubmenus: StoryFn = () => (
|
|
50
|
-
<Menubar>
|
|
51
|
-
<MenubarMenu>
|
|
52
|
-
<MenubarTrigger>Edit</MenubarTrigger>
|
|
53
|
-
<MenubarContent>
|
|
54
|
-
<MenubarItem>
|
|
55
|
-
Undo <MenubarShortcut>⌘Z</MenubarShortcut>
|
|
56
|
-
</MenubarItem>
|
|
57
|
-
<MenubarItem>
|
|
58
|
-
Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
|
|
59
|
-
</MenubarItem>
|
|
60
|
-
<MenubarSeparator />
|
|
61
|
-
<MenubarSub>
|
|
62
|
-
<MenubarSubTrigger>Find</MenubarSubTrigger>
|
|
63
|
-
<MenubarSubContent>
|
|
64
|
-
<MenubarItem>Search the web</MenubarItem>
|
|
65
|
-
<MenubarItem>Find in page</MenubarItem>
|
|
66
|
-
<MenubarItem>Find in files</MenubarItem>
|
|
67
|
-
</MenubarSubContent>
|
|
68
|
-
</MenubarSub>
|
|
69
|
-
<MenubarSeparator />
|
|
70
|
-
<MenubarItem>Cut</MenubarItem>
|
|
71
|
-
<MenubarItem>Copy</MenubarItem>
|
|
72
|
-
<MenubarItem>Paste</MenubarItem>
|
|
73
|
-
</MenubarContent>
|
|
74
|
-
</MenubarMenu>
|
|
75
|
-
</Menubar>
|
|
76
|
-
);
|
|
77
|
-
|
|
78
|
-
export const WithCheckboxItems: StoryFn = () => (
|
|
79
|
-
<Menubar>
|
|
80
|
-
<MenubarMenu>
|
|
81
|
-
<MenubarTrigger>View</MenubarTrigger>
|
|
82
|
-
<MenubarContent>
|
|
83
|
-
<MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
|
|
84
|
-
<MenubarCheckboxItem checked>Always Show Full URLs</MenubarCheckboxItem>
|
|
85
|
-
<MenubarSeparator />
|
|
86
|
-
<MenubarItem inset>Reload</MenubarItem>
|
|
87
|
-
<MenubarItem disabled inset>
|
|
88
|
-
Force Reload
|
|
89
|
-
</MenubarItem>
|
|
90
|
-
<MenubarSeparator />
|
|
91
|
-
<MenubarItem inset>Toggle Fullscreen</MenubarItem>
|
|
92
|
-
</MenubarContent>
|
|
93
|
-
</MenubarMenu>
|
|
94
|
-
</Menubar>
|
|
95
|
-
);
|
|
96
|
-
|
|
97
|
-
export const WithRadioItems: StoryFn = () => (
|
|
98
|
-
<Menubar>
|
|
99
|
-
<MenubarMenu>
|
|
100
|
-
<MenubarTrigger>Zoom</MenubarTrigger>
|
|
101
|
-
<MenubarContent>
|
|
102
|
-
<MenubarRadioGroup value="100%">
|
|
103
|
-
<MenubarRadioItem value="50%">50%</MenubarRadioItem>
|
|
104
|
-
<MenubarRadioItem value="75%">75%</MenubarRadioItem>
|
|
105
|
-
<MenubarRadioItem value="100%">100%</MenubarRadioItem>
|
|
106
|
-
<MenubarRadioItem value="150%">150%</MenubarRadioItem>
|
|
107
|
-
<MenubarRadioItem value="200%">200%</MenubarRadioItem>
|
|
108
|
-
</MenubarRadioGroup>
|
|
109
|
-
</MenubarContent>
|
|
110
|
-
</MenubarMenu>
|
|
111
|
-
</Menubar>
|
|
112
|
-
);
|
|
113
|
-
|
|
114
|
-
export const CompleteExample: StoryFn = () => (
|
|
115
|
-
<Menubar className="al-w-[600px]">
|
|
116
|
-
<MenubarMenu>
|
|
117
|
-
<MenubarTrigger>File</MenubarTrigger>
|
|
118
|
-
<MenubarContent>
|
|
119
|
-
<MenubarItem>
|
|
120
|
-
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
|
|
121
|
-
</MenubarItem>
|
|
122
|
-
<MenubarItem>New Window</MenubarItem>
|
|
123
|
-
<MenubarSeparator />
|
|
124
|
-
<MenubarItem>Share</MenubarItem>
|
|
125
|
-
<MenubarSeparator />
|
|
126
|
-
<MenubarItem>Print</MenubarItem>
|
|
127
|
-
</MenubarContent>
|
|
128
|
-
</MenubarMenu>
|
|
129
|
-
<MenubarMenu>
|
|
130
|
-
<MenubarTrigger>Edit</MenubarTrigger>
|
|
131
|
-
<MenubarContent>
|
|
132
|
-
<MenubarItem>Undo</MenubarItem>
|
|
133
|
-
<MenubarItem>Redo</MenubarItem>
|
|
134
|
-
<MenubarSeparator />
|
|
135
|
-
<MenubarSub>
|
|
136
|
-
<MenubarSubTrigger>Find</MenubarSubTrigger>
|
|
137
|
-
<MenubarSubContent>
|
|
138
|
-
<MenubarItem>Search Web</MenubarItem>
|
|
139
|
-
<MenubarItem>Find in Page</MenubarItem>
|
|
140
|
-
</MenubarSubContent>
|
|
141
|
-
</MenubarSub>
|
|
142
|
-
</MenubarContent>
|
|
143
|
-
</MenubarMenu>
|
|
144
|
-
<MenubarMenu>
|
|
145
|
-
<MenubarTrigger>View</MenubarTrigger>
|
|
146
|
-
<MenubarContent>
|
|
147
|
-
<MenubarCheckboxItem>Show Toolbar</MenubarCheckboxItem>
|
|
148
|
-
<MenubarCheckboxItem checked>Show Statusbar</MenubarCheckboxItem>
|
|
149
|
-
<MenubarSeparator />
|
|
150
|
-
<MenubarRadioGroup value="medium">
|
|
151
|
-
<MenubarLabel inset>Zoom</MenubarLabel>
|
|
152
|
-
<MenubarRadioItem value="small">Small</MenubarRadioItem>
|
|
153
|
-
<MenubarRadioItem value="medium">Medium</MenubarRadioItem>
|
|
154
|
-
<MenubarRadioItem value="large">Large</MenubarRadioItem>
|
|
155
|
-
</MenubarRadioGroup>
|
|
156
|
-
</MenubarContent>
|
|
157
|
-
</MenubarMenu>
|
|
158
|
-
</Menubar>
|
|
159
|
-
);
|
|
1
|
+
import { Meta, StoryFn } from "@storybook/react";
|
|
2
|
+
import {
|
|
3
|
+
Menubar,
|
|
4
|
+
MenubarMenu,
|
|
5
|
+
MenubarTrigger,
|
|
6
|
+
MenubarContent,
|
|
7
|
+
MenubarItem,
|
|
8
|
+
MenubarSeparator,
|
|
9
|
+
MenubarShortcut,
|
|
10
|
+
MenubarCheckboxItem,
|
|
11
|
+
MenubarRadioGroup,
|
|
12
|
+
MenubarRadioItem,
|
|
13
|
+
MenubarSubTrigger,
|
|
14
|
+
MenubarSubContent,
|
|
15
|
+
MenubarLabel,
|
|
16
|
+
MenubarSub,
|
|
17
|
+
} from "../shadcn";
|
|
18
|
+
|
|
19
|
+
export default {
|
|
20
|
+
title: "Shadcn/Components/Menubar",
|
|
21
|
+
component: Menubar,
|
|
22
|
+
} as Meta;
|
|
23
|
+
|
|
24
|
+
export const Default: StoryFn = () => (
|
|
25
|
+
<Menubar>
|
|
26
|
+
<MenubarMenu>
|
|
27
|
+
<MenubarTrigger>File</MenubarTrigger>
|
|
28
|
+
<MenubarContent>
|
|
29
|
+
<MenubarItem>
|
|
30
|
+
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
|
|
31
|
+
</MenubarItem>
|
|
32
|
+
<MenubarItem>
|
|
33
|
+
New Window <MenubarShortcut>⌘N</MenubarShortcut>
|
|
34
|
+
</MenubarItem>
|
|
35
|
+
<MenubarItem disabled>New Incognito Window</MenubarItem>
|
|
36
|
+
<MenubarSeparator />
|
|
37
|
+
<MenubarItem>
|
|
38
|
+
Share <MenubarShortcut>⌘S</MenubarShortcut>
|
|
39
|
+
</MenubarItem>
|
|
40
|
+
<MenubarSeparator />
|
|
41
|
+
<MenubarItem>
|
|
42
|
+
Print... <MenubarShortcut>⌘P</MenubarShortcut>
|
|
43
|
+
</MenubarItem>
|
|
44
|
+
</MenubarContent>
|
|
45
|
+
</MenubarMenu>
|
|
46
|
+
</Menubar>
|
|
47
|
+
);
|
|
48
|
+
|
|
49
|
+
export const WithSubmenus: StoryFn = () => (
|
|
50
|
+
<Menubar>
|
|
51
|
+
<MenubarMenu>
|
|
52
|
+
<MenubarTrigger>Edit</MenubarTrigger>
|
|
53
|
+
<MenubarContent>
|
|
54
|
+
<MenubarItem>
|
|
55
|
+
Undo <MenubarShortcut>⌘Z</MenubarShortcut>
|
|
56
|
+
</MenubarItem>
|
|
57
|
+
<MenubarItem>
|
|
58
|
+
Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
|
|
59
|
+
</MenubarItem>
|
|
60
|
+
<MenubarSeparator />
|
|
61
|
+
<MenubarSub>
|
|
62
|
+
<MenubarSubTrigger>Find</MenubarSubTrigger>
|
|
63
|
+
<MenubarSubContent>
|
|
64
|
+
<MenubarItem>Search the web</MenubarItem>
|
|
65
|
+
<MenubarItem>Find in page</MenubarItem>
|
|
66
|
+
<MenubarItem>Find in files</MenubarItem>
|
|
67
|
+
</MenubarSubContent>
|
|
68
|
+
</MenubarSub>
|
|
69
|
+
<MenubarSeparator />
|
|
70
|
+
<MenubarItem>Cut</MenubarItem>
|
|
71
|
+
<MenubarItem>Copy</MenubarItem>
|
|
72
|
+
<MenubarItem>Paste</MenubarItem>
|
|
73
|
+
</MenubarContent>
|
|
74
|
+
</MenubarMenu>
|
|
75
|
+
</Menubar>
|
|
76
|
+
);
|
|
77
|
+
|
|
78
|
+
export const WithCheckboxItems: StoryFn = () => (
|
|
79
|
+
<Menubar>
|
|
80
|
+
<MenubarMenu>
|
|
81
|
+
<MenubarTrigger>View</MenubarTrigger>
|
|
82
|
+
<MenubarContent>
|
|
83
|
+
<MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
|
|
84
|
+
<MenubarCheckboxItem checked>Always Show Full URLs</MenubarCheckboxItem>
|
|
85
|
+
<MenubarSeparator />
|
|
86
|
+
<MenubarItem inset>Reload</MenubarItem>
|
|
87
|
+
<MenubarItem disabled inset>
|
|
88
|
+
Force Reload
|
|
89
|
+
</MenubarItem>
|
|
90
|
+
<MenubarSeparator />
|
|
91
|
+
<MenubarItem inset>Toggle Fullscreen</MenubarItem>
|
|
92
|
+
</MenubarContent>
|
|
93
|
+
</MenubarMenu>
|
|
94
|
+
</Menubar>
|
|
95
|
+
);
|
|
96
|
+
|
|
97
|
+
export const WithRadioItems: StoryFn = () => (
|
|
98
|
+
<Menubar>
|
|
99
|
+
<MenubarMenu>
|
|
100
|
+
<MenubarTrigger>Zoom</MenubarTrigger>
|
|
101
|
+
<MenubarContent>
|
|
102
|
+
<MenubarRadioGroup value="100%">
|
|
103
|
+
<MenubarRadioItem value="50%">50%</MenubarRadioItem>
|
|
104
|
+
<MenubarRadioItem value="75%">75%</MenubarRadioItem>
|
|
105
|
+
<MenubarRadioItem value="100%">100%</MenubarRadioItem>
|
|
106
|
+
<MenubarRadioItem value="150%">150%</MenubarRadioItem>
|
|
107
|
+
<MenubarRadioItem value="200%">200%</MenubarRadioItem>
|
|
108
|
+
</MenubarRadioGroup>
|
|
109
|
+
</MenubarContent>
|
|
110
|
+
</MenubarMenu>
|
|
111
|
+
</Menubar>
|
|
112
|
+
);
|
|
113
|
+
|
|
114
|
+
export const CompleteExample: StoryFn = () => (
|
|
115
|
+
<Menubar className="al-w-[600px]">
|
|
116
|
+
<MenubarMenu>
|
|
117
|
+
<MenubarTrigger>File</MenubarTrigger>
|
|
118
|
+
<MenubarContent>
|
|
119
|
+
<MenubarItem>
|
|
120
|
+
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
|
|
121
|
+
</MenubarItem>
|
|
122
|
+
<MenubarItem>New Window</MenubarItem>
|
|
123
|
+
<MenubarSeparator />
|
|
124
|
+
<MenubarItem>Share</MenubarItem>
|
|
125
|
+
<MenubarSeparator />
|
|
126
|
+
<MenubarItem>Print</MenubarItem>
|
|
127
|
+
</MenubarContent>
|
|
128
|
+
</MenubarMenu>
|
|
129
|
+
<MenubarMenu>
|
|
130
|
+
<MenubarTrigger>Edit</MenubarTrigger>
|
|
131
|
+
<MenubarContent>
|
|
132
|
+
<MenubarItem>Undo</MenubarItem>
|
|
133
|
+
<MenubarItem>Redo</MenubarItem>
|
|
134
|
+
<MenubarSeparator />
|
|
135
|
+
<MenubarSub>
|
|
136
|
+
<MenubarSubTrigger>Find</MenubarSubTrigger>
|
|
137
|
+
<MenubarSubContent>
|
|
138
|
+
<MenubarItem>Search Web</MenubarItem>
|
|
139
|
+
<MenubarItem>Find in Page</MenubarItem>
|
|
140
|
+
</MenubarSubContent>
|
|
141
|
+
</MenubarSub>
|
|
142
|
+
</MenubarContent>
|
|
143
|
+
</MenubarMenu>
|
|
144
|
+
<MenubarMenu>
|
|
145
|
+
<MenubarTrigger>View</MenubarTrigger>
|
|
146
|
+
<MenubarContent>
|
|
147
|
+
<MenubarCheckboxItem>Show Toolbar</MenubarCheckboxItem>
|
|
148
|
+
<MenubarCheckboxItem checked>Show Statusbar</MenubarCheckboxItem>
|
|
149
|
+
<MenubarSeparator />
|
|
150
|
+
<MenubarRadioGroup value="medium">
|
|
151
|
+
<MenubarLabel inset>Zoom</MenubarLabel>
|
|
152
|
+
<MenubarRadioItem value="small">Small</MenubarRadioItem>
|
|
153
|
+
<MenubarRadioItem value="medium">Medium</MenubarRadioItem>
|
|
154
|
+
<MenubarRadioItem value="large">Large</MenubarRadioItem>
|
|
155
|
+
</MenubarRadioGroup>
|
|
156
|
+
</MenubarContent>
|
|
157
|
+
</MenubarMenu>
|
|
158
|
+
</Menubar>
|
|
159
|
+
);
|
|
@@ -1,152 +1,152 @@
|
|
|
1
|
-
import { Meta, StoryFn } from "@storybook/react";
|
|
2
|
-
import {
|
|
3
|
-
Pagination,
|
|
4
|
-
PaginationContent,
|
|
5
|
-
PaginationEllipsis,
|
|
6
|
-
PaginationItem,
|
|
7
|
-
PaginationLink,
|
|
8
|
-
PaginationNext,
|
|
9
|
-
PaginationPrevious,
|
|
10
|
-
} from "../shadcn";
|
|
11
|
-
|
|
12
|
-
export default {
|
|
13
|
-
title: "Shadcn/Components/Pagination",
|
|
14
|
-
component: Pagination,
|
|
15
|
-
} as Meta;
|
|
16
|
-
|
|
17
|
-
export const Default: StoryFn = () => (
|
|
18
|
-
<Pagination>
|
|
19
|
-
<PaginationContent>
|
|
20
|
-
<PaginationItem>
|
|
21
|
-
<PaginationPrevious href="#" />
|
|
22
|
-
</PaginationItem>
|
|
23
|
-
<PaginationItem>
|
|
24
|
-
<PaginationLink href="#" isActive>
|
|
25
|
-
1
|
|
26
|
-
</PaginationLink>
|
|
27
|
-
</PaginationItem>
|
|
28
|
-
<PaginationItem>
|
|
29
|
-
<PaginationLink href="#">2</PaginationLink>
|
|
30
|
-
</PaginationItem>
|
|
31
|
-
<PaginationItem>
|
|
32
|
-
<PaginationLink href="#">3</PaginationLink>
|
|
33
|
-
</PaginationItem>
|
|
34
|
-
<PaginationItem>
|
|
35
|
-
<PaginationNext href="#" />
|
|
36
|
-
</PaginationItem>
|
|
37
|
-
</PaginationContent>
|
|
38
|
-
</Pagination>
|
|
39
|
-
);
|
|
40
|
-
|
|
41
|
-
export const WithEllipsis: StoryFn = () => (
|
|
42
|
-
<Pagination>
|
|
43
|
-
<PaginationContent>
|
|
44
|
-
<PaginationItem>
|
|
45
|
-
<PaginationPrevious href="#" />
|
|
46
|
-
</PaginationItem>
|
|
47
|
-
<PaginationItem>
|
|
48
|
-
<PaginationLink href="#" isActive>
|
|
49
|
-
1
|
|
50
|
-
</PaginationLink>
|
|
51
|
-
</PaginationItem>
|
|
52
|
-
<PaginationItem>
|
|
53
|
-
<PaginationEllipsis />
|
|
54
|
-
</PaginationItem>
|
|
55
|
-
<PaginationItem>
|
|
56
|
-
<PaginationLink href="#">10</PaginationLink>
|
|
57
|
-
</PaginationItem>
|
|
58
|
-
<PaginationItem>
|
|
59
|
-
<PaginationNext href="#" />
|
|
60
|
-
</PaginationItem>
|
|
61
|
-
</PaginationContent>
|
|
62
|
-
</Pagination>
|
|
63
|
-
);
|
|
64
|
-
|
|
65
|
-
export const ManyPages: StoryFn = () => (
|
|
66
|
-
<Pagination>
|
|
67
|
-
<PaginationContent>
|
|
68
|
-
<PaginationItem>
|
|
69
|
-
<PaginationPrevious href="#" />
|
|
70
|
-
</PaginationItem>
|
|
71
|
-
<PaginationItem>
|
|
72
|
-
<PaginationLink href="#">1</PaginationLink>
|
|
73
|
-
</PaginationItem>
|
|
74
|
-
<PaginationItem>
|
|
75
|
-
<PaginationLink href="#">2</PaginationLink>
|
|
76
|
-
</PaginationItem>
|
|
77
|
-
<PaginationItem>
|
|
78
|
-
<PaginationLink href="#" isActive>
|
|
79
|
-
3
|
|
80
|
-
</PaginationLink>
|
|
81
|
-
</PaginationItem>
|
|
82
|
-
<PaginationItem>
|
|
83
|
-
<PaginationLink href="#">4</PaginationLink>
|
|
84
|
-
</PaginationItem>
|
|
85
|
-
<PaginationItem>
|
|
86
|
-
<PaginationLink href="#">5</PaginationLink>
|
|
87
|
-
</PaginationItem>
|
|
88
|
-
<PaginationItem>
|
|
89
|
-
<PaginationNext href="#" />
|
|
90
|
-
</PaginationItem>
|
|
91
|
-
</PaginationContent>
|
|
92
|
-
</Pagination>
|
|
93
|
-
);
|
|
94
|
-
|
|
95
|
-
export const WithDisabledControls: StoryFn = () => (
|
|
96
|
-
<Pagination>
|
|
97
|
-
<PaginationContent>
|
|
98
|
-
<PaginationItem>
|
|
99
|
-
<PaginationPrevious href="#" className="pointer-events-none opacity-50" />
|
|
100
|
-
</PaginationItem>
|
|
101
|
-
<PaginationItem>
|
|
102
|
-
<PaginationLink href="#" isActive>
|
|
103
|
-
1
|
|
104
|
-
</PaginationLink>
|
|
105
|
-
</PaginationItem>
|
|
106
|
-
<PaginationItem>
|
|
107
|
-
<PaginationLink href="#">2</PaginationLink>
|
|
108
|
-
</PaginationItem>
|
|
109
|
-
<PaginationItem>
|
|
110
|
-
<PaginationLink href="#">3</PaginationLink>
|
|
111
|
-
</PaginationItem>
|
|
112
|
-
<PaginationItem>
|
|
113
|
-
<PaginationNext href="#" />
|
|
114
|
-
</PaginationItem>
|
|
115
|
-
</PaginationContent>
|
|
116
|
-
</Pagination>
|
|
117
|
-
);
|
|
118
|
-
|
|
119
|
-
export const CustomStyling: StoryFn = () => (
|
|
120
|
-
<Pagination>
|
|
121
|
-
<PaginationContent>
|
|
122
|
-
<PaginationItem>
|
|
123
|
-
<PaginationPrevious
|
|
124
|
-
href="#"
|
|
125
|
-
className="al-bg-primary al-text-primary-foreground hover:al-bg-primary/90"
|
|
126
|
-
/>
|
|
127
|
-
</PaginationItem>
|
|
128
|
-
<PaginationItem>
|
|
129
|
-
<PaginationLink
|
|
130
|
-
href="#"
|
|
131
|
-
className="al-bg-primary al-text-primary-foreground hover:al-bg-primary/90"
|
|
132
|
-
>
|
|
133
|
-
1
|
|
134
|
-
</PaginationLink>
|
|
135
|
-
</PaginationItem>
|
|
136
|
-
<PaginationItem>
|
|
137
|
-
<PaginationLink href="#" isActive>
|
|
138
|
-
2
|
|
139
|
-
</PaginationLink>
|
|
140
|
-
</PaginationItem>
|
|
141
|
-
<PaginationItem>
|
|
142
|
-
<PaginationLink href="#">3</PaginationLink>
|
|
143
|
-
</PaginationItem>
|
|
144
|
-
<PaginationItem>
|
|
145
|
-
<PaginationNext
|
|
146
|
-
href="#"
|
|
147
|
-
className="al-bg-primary al-text-primary-foreground hover:al-bg-primary/90"
|
|
148
|
-
/>
|
|
149
|
-
</PaginationItem>
|
|
150
|
-
</PaginationContent>
|
|
151
|
-
</Pagination>
|
|
152
|
-
);
|
|
1
|
+
import { Meta, StoryFn } from "@storybook/react";
|
|
2
|
+
import {
|
|
3
|
+
Pagination,
|
|
4
|
+
PaginationContent,
|
|
5
|
+
PaginationEllipsis,
|
|
6
|
+
PaginationItem,
|
|
7
|
+
PaginationLink,
|
|
8
|
+
PaginationNext,
|
|
9
|
+
PaginationPrevious,
|
|
10
|
+
} from "../shadcn";
|
|
11
|
+
|
|
12
|
+
export default {
|
|
13
|
+
title: "Shadcn/Components/Pagination",
|
|
14
|
+
component: Pagination,
|
|
15
|
+
} as Meta;
|
|
16
|
+
|
|
17
|
+
export const Default: StoryFn = () => (
|
|
18
|
+
<Pagination>
|
|
19
|
+
<PaginationContent>
|
|
20
|
+
<PaginationItem>
|
|
21
|
+
<PaginationPrevious href="#" />
|
|
22
|
+
</PaginationItem>
|
|
23
|
+
<PaginationItem>
|
|
24
|
+
<PaginationLink href="#" isActive>
|
|
25
|
+
1
|
|
26
|
+
</PaginationLink>
|
|
27
|
+
</PaginationItem>
|
|
28
|
+
<PaginationItem>
|
|
29
|
+
<PaginationLink href="#">2</PaginationLink>
|
|
30
|
+
</PaginationItem>
|
|
31
|
+
<PaginationItem>
|
|
32
|
+
<PaginationLink href="#">3</PaginationLink>
|
|
33
|
+
</PaginationItem>
|
|
34
|
+
<PaginationItem>
|
|
35
|
+
<PaginationNext href="#" />
|
|
36
|
+
</PaginationItem>
|
|
37
|
+
</PaginationContent>
|
|
38
|
+
</Pagination>
|
|
39
|
+
);
|
|
40
|
+
|
|
41
|
+
export const WithEllipsis: StoryFn = () => (
|
|
42
|
+
<Pagination>
|
|
43
|
+
<PaginationContent>
|
|
44
|
+
<PaginationItem>
|
|
45
|
+
<PaginationPrevious href="#" />
|
|
46
|
+
</PaginationItem>
|
|
47
|
+
<PaginationItem>
|
|
48
|
+
<PaginationLink href="#" isActive>
|
|
49
|
+
1
|
|
50
|
+
</PaginationLink>
|
|
51
|
+
</PaginationItem>
|
|
52
|
+
<PaginationItem>
|
|
53
|
+
<PaginationEllipsis />
|
|
54
|
+
</PaginationItem>
|
|
55
|
+
<PaginationItem>
|
|
56
|
+
<PaginationLink href="#">10</PaginationLink>
|
|
57
|
+
</PaginationItem>
|
|
58
|
+
<PaginationItem>
|
|
59
|
+
<PaginationNext href="#" />
|
|
60
|
+
</PaginationItem>
|
|
61
|
+
</PaginationContent>
|
|
62
|
+
</Pagination>
|
|
63
|
+
);
|
|
64
|
+
|
|
65
|
+
export const ManyPages: StoryFn = () => (
|
|
66
|
+
<Pagination>
|
|
67
|
+
<PaginationContent>
|
|
68
|
+
<PaginationItem>
|
|
69
|
+
<PaginationPrevious href="#" />
|
|
70
|
+
</PaginationItem>
|
|
71
|
+
<PaginationItem>
|
|
72
|
+
<PaginationLink href="#">1</PaginationLink>
|
|
73
|
+
</PaginationItem>
|
|
74
|
+
<PaginationItem>
|
|
75
|
+
<PaginationLink href="#">2</PaginationLink>
|
|
76
|
+
</PaginationItem>
|
|
77
|
+
<PaginationItem>
|
|
78
|
+
<PaginationLink href="#" isActive>
|
|
79
|
+
3
|
|
80
|
+
</PaginationLink>
|
|
81
|
+
</PaginationItem>
|
|
82
|
+
<PaginationItem>
|
|
83
|
+
<PaginationLink href="#">4</PaginationLink>
|
|
84
|
+
</PaginationItem>
|
|
85
|
+
<PaginationItem>
|
|
86
|
+
<PaginationLink href="#">5</PaginationLink>
|
|
87
|
+
</PaginationItem>
|
|
88
|
+
<PaginationItem>
|
|
89
|
+
<PaginationNext href="#" />
|
|
90
|
+
</PaginationItem>
|
|
91
|
+
</PaginationContent>
|
|
92
|
+
</Pagination>
|
|
93
|
+
);
|
|
94
|
+
|
|
95
|
+
export const WithDisabledControls: StoryFn = () => (
|
|
96
|
+
<Pagination>
|
|
97
|
+
<PaginationContent>
|
|
98
|
+
<PaginationItem>
|
|
99
|
+
<PaginationPrevious href="#" className="pointer-events-none opacity-50" />
|
|
100
|
+
</PaginationItem>
|
|
101
|
+
<PaginationItem>
|
|
102
|
+
<PaginationLink href="#" isActive>
|
|
103
|
+
1
|
|
104
|
+
</PaginationLink>
|
|
105
|
+
</PaginationItem>
|
|
106
|
+
<PaginationItem>
|
|
107
|
+
<PaginationLink href="#">2</PaginationLink>
|
|
108
|
+
</PaginationItem>
|
|
109
|
+
<PaginationItem>
|
|
110
|
+
<PaginationLink href="#">3</PaginationLink>
|
|
111
|
+
</PaginationItem>
|
|
112
|
+
<PaginationItem>
|
|
113
|
+
<PaginationNext href="#" />
|
|
114
|
+
</PaginationItem>
|
|
115
|
+
</PaginationContent>
|
|
116
|
+
</Pagination>
|
|
117
|
+
);
|
|
118
|
+
|
|
119
|
+
export const CustomStyling: StoryFn = () => (
|
|
120
|
+
<Pagination>
|
|
121
|
+
<PaginationContent>
|
|
122
|
+
<PaginationItem>
|
|
123
|
+
<PaginationPrevious
|
|
124
|
+
href="#"
|
|
125
|
+
className="al-bg-primary al-text-primary-foreground hover:al-bg-primary/90"
|
|
126
|
+
/>
|
|
127
|
+
</PaginationItem>
|
|
128
|
+
<PaginationItem>
|
|
129
|
+
<PaginationLink
|
|
130
|
+
href="#"
|
|
131
|
+
className="al-bg-primary al-text-primary-foreground hover:al-bg-primary/90"
|
|
132
|
+
>
|
|
133
|
+
1
|
|
134
|
+
</PaginationLink>
|
|
135
|
+
</PaginationItem>
|
|
136
|
+
<PaginationItem>
|
|
137
|
+
<PaginationLink href="#" isActive>
|
|
138
|
+
2
|
|
139
|
+
</PaginationLink>
|
|
140
|
+
</PaginationItem>
|
|
141
|
+
<PaginationItem>
|
|
142
|
+
<PaginationLink href="#">3</PaginationLink>
|
|
143
|
+
</PaginationItem>
|
|
144
|
+
<PaginationItem>
|
|
145
|
+
<PaginationNext
|
|
146
|
+
href="#"
|
|
147
|
+
className="al-bg-primary al-text-primary-foreground hover:al-bg-primary/90"
|
|
148
|
+
/>
|
|
149
|
+
</PaginationItem>
|
|
150
|
+
</PaginationContent>
|
|
151
|
+
</Pagination>
|
|
152
|
+
);
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { Meta, StoryFn } from "@storybook/react";
|
|
2
|
-
import { Popover, PopoverContent, PopoverTrigger, Button } from "../shadcn";
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: "Shadcn/Components/Popover",
|
|
6
|
-
component: Popover,
|
|
7
|
-
} as Meta;
|
|
8
|
-
|
|
9
|
-
const Template: StoryFn = () => (
|
|
10
|
-
<Popover>
|
|
11
|
-
<PopoverTrigger asChild>
|
|
12
|
-
<Button variant="outline">Open Popover</Button>
|
|
13
|
-
</PopoverTrigger>
|
|
14
|
-
<PopoverContent>
|
|
15
|
-
<div className="al-space-y-2">
|
|
16
|
-
<h4 className="al-font-medium al-leading-none">Popover Content</h4>
|
|
17
|
-
<p className="al-text-sm al-text-muted-foreground">This is the popover content.</p>
|
|
18
|
-
</div>
|
|
19
|
-
</PopoverContent>
|
|
20
|
-
</Popover>
|
|
21
|
-
);
|
|
22
|
-
|
|
23
|
-
export const Default = Template.bind({});
|
|
1
|
+
import { Meta, StoryFn } from "@storybook/react";
|
|
2
|
+
import { Popover, PopoverContent, PopoverTrigger, Button } from "../shadcn";
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: "Shadcn/Components/Popover",
|
|
6
|
+
component: Popover,
|
|
7
|
+
} as Meta;
|
|
8
|
+
|
|
9
|
+
const Template: StoryFn = () => (
|
|
10
|
+
<Popover>
|
|
11
|
+
<PopoverTrigger asChild>
|
|
12
|
+
<Button variant="outline">Open Popover</Button>
|
|
13
|
+
</PopoverTrigger>
|
|
14
|
+
<PopoverContent>
|
|
15
|
+
<div className="al-space-y-2">
|
|
16
|
+
<h4 className="al-font-medium al-leading-none">Popover Content</h4>
|
|
17
|
+
<p className="al-text-sm al-text-muted-foreground">This is the popover content.</p>
|
|
18
|
+
</div>
|
|
19
|
+
</PopoverContent>
|
|
20
|
+
</Popover>
|
|
21
|
+
);
|
|
22
|
+
|
|
23
|
+
export const Default = Template.bind({});
|