@byline/ui 6.8.0 → 6.10.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.
Files changed (51) hide show
  1. package/README.md +43 -5
  2. package/package.json +16 -7
  3. package/src/components/accordion/accordion.stories.tsx +121 -0
  4. package/src/components/animation/fade-in-lift.stories.tsx +80 -0
  5. package/src/components/avatar/avatar.stories.tsx +39 -0
  6. package/src/components/badge/badge.stories.tsx +41 -0
  7. package/src/components/button/button-group.stories.tsx +44 -0
  8. package/src/components/button/button-intents.stories.tsx +97 -0
  9. package/src/components/button/button-overrides.stories.tsx +59 -0
  10. package/src/components/button/button-test.stories.tsx +59 -0
  11. package/src/components/button/button-variants.stories.tsx +57 -0
  12. package/src/components/button/combo-buttons.stories.tsx +82 -0
  13. package/src/components/button/control-buttons.stories.tsx +60 -0
  14. package/src/components/button/copy-button.stories.tsx +50 -0
  15. package/src/components/button/icon-button.stories.tsx +140 -0
  16. package/src/components/card/card.stories.tsx +60 -0
  17. package/src/components/chips/chip.stories.tsx +120 -0
  18. package/src/components/container/container.stories.tsx +35 -0
  19. package/src/components/dropdown/dropdown.stories.tsx +108 -0
  20. package/src/components/hamburger/hamburger.stories.tsx +33 -0
  21. package/src/components/inputs/autocomplete.stories.tsx +189 -0
  22. package/src/components/inputs/calendar.stories.tsx +141 -0
  23. package/src/components/inputs/checkbox-group.stories.tsx +43 -0
  24. package/src/components/inputs/checkbox.stories.tsx +284 -0
  25. package/src/components/inputs/input.stories.tsx +189 -0
  26. package/src/components/inputs/radio-group.stories.tsx +73 -0
  27. package/src/components/inputs/select.stories.tsx +70 -0
  28. package/src/components/inputs/text-area.stories.tsx +45 -0
  29. package/src/components/notifications/alert.stories.tsx +75 -0
  30. package/src/components/notifications/toast.stories.tsx +40 -0
  31. package/src/components/pager/pagination.stories.tsx +189 -0
  32. package/src/components/scroll-area/scroll-area.stories.tsx +33 -0
  33. package/src/components/shimmer/shimmer.stories.tsx +24 -0
  34. package/src/components/table/table.stories.tsx +94 -0
  35. package/src/components/tabs/tabs.stories.tsx +47 -0
  36. package/src/components/tooltip/tooltip.stories.tsx +56 -0
  37. package/src/icons/icons.stories.tsx +67 -0
  38. package/src/icons/index.stories.tsx +24 -0
  39. package/src/loaders/loaders.stories.tsx +188 -0
  40. package/src/styles/base/colors.stories.tsx +671 -0
  41. package/src/styles/theme/theme.stories.tsx +40 -0
  42. package/src/styles/typography/article.stories.tsx +39 -0
  43. package/src/styles/typography/code.stories.tsx +73 -0
  44. package/src/styles/typography/default.stories.tsx +49 -0
  45. package/src/styles/typography/lists.stories.tsx +48 -0
  46. package/src/styles/typography/quote.stories.tsx +38 -0
  47. package/src/widgets/datepicker/datepicker.stories.tsx +42 -0
  48. package/src/widgets/drawer/drawer.stories.tsx +281 -0
  49. package/src/widgets/modal/modal.stories.tsx +63 -0
  50. package/src/widgets/search/search.stories.tsx +18 -0
  51. package/src/widgets/timeline/timeline.stories.tsx +50 -0
package/src/loaders/loaders.stories.tsx ADDED
@@ -0,0 +1,188 @@
1
+ import type React from 'react'
2
+
3
+ import { LoaderEllipsis } from './ellipses.js'
4
+ import { LoaderRing } from './ring.js'
5
+ import { LoaderSpinner } from './spinner.js'
6
+
7
+ interface LoaderProps {
8
+ loader: React.JSX.Element
9
+ label: string
10
+ }
11
+
12
+ function Loader({ loader, label }: LoaderProps): React.JSX.Element {
13
+ return (
14
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}>
15
+ {loader}
16
+ <span style={{ fontSize: '0.875rem', color: 'var(--muted)' }}>{label}</span>
17
+ </div>
18
+ )
19
+ }
20
+
21
+ const LoaderDemo = (): React.JSX.Element => (
22
+ <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '1.25rem' }}>
23
+ <Loader loader={<LoaderRing size={48} />} label="Ring" />
24
+ <Loader loader={<LoaderEllipsis size={48} />} label="Ellipsis" />
25
+ <Loader loader={<LoaderSpinner size={48} />} label="Spinner" />
26
+ </div>
27
+ )
28
+
29
+ export default {
30
+ title: 'Loaders/All',
31
+ component: LoaderDemo,
32
+ argTypes: {},
33
+ }
34
+
35
+ export const Default = (): React.JSX.Element => {
36
+ return (
37
+ <div style={{ marginBottom: '1.5rem' }}>
38
+ <div style={{ maxWidth: 700 }}>
39
+ <LoaderDemo />
40
+ </div>
41
+ </div>
42
+ )
43
+ }
44
+
45
+ const sizes: (number | string)[] = [24, 36, 48, 64, 80]
46
+
47
+ export const Sizes = (): React.JSX.Element => {
48
+ return (
49
+ <div style={{ maxWidth: '800px', margin: '1.5rem auto' }}>
50
+ <div style={{ maxWidth: '800px', display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
51
+ <div>
52
+ <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Ring</h3>
53
+ <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
54
+ {sizes.map((size) => (
55
+ <Loader
56
+ key={String(size)}
57
+ loader={<LoaderRing size={size} />}
58
+ label={`${size}${typeof size === 'number' ? 'px' : ''}`}
59
+ />
60
+ ))}
61
+ </div>
62
+ </div>
63
+ <div>
64
+ <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Ellipsis</h3>
65
+ <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
66
+ {sizes.map((size) => (
67
+ <Loader
68
+ key={String(size)}
69
+ loader={<LoaderEllipsis size={size} />}
70
+ label={`${size}${typeof size === 'number' ? 'px' : ''}`}
71
+ />
72
+ ))}
73
+ </div>
74
+ </div>
75
+ <div>
76
+ <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Spinner</h3>
77
+ <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
78
+ {sizes.map((size) => (
79
+ <Loader
80
+ key={String(size)}
81
+ loader={<LoaderSpinner size={size} />}
82
+ label={`${size}${typeof size === 'number' ? 'px' : ''}`}
83
+ />
84
+ ))}
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ )
90
+ }
91
+
92
+ const colors = [
93
+ { value: 'var(--theme-500)', label: 'Theme' },
94
+ { value: '#e53e3e', label: '#e53e3e' },
95
+ { value: '#38a169', label: '#38a169' },
96
+ { value: '#3182ce', label: '#3182ce' },
97
+ { value: '#d69e2e', label: '#d69e2e' },
98
+ ]
99
+
100
+ export const Colors = (): React.JSX.Element => {
101
+ return (
102
+ <div style={{ maxWidth: '800px', margin: '1.5rem auto' }}>
103
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
104
+ <div>
105
+ <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Ring</h3>
106
+ <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
107
+ {colors.map(({ value, label }) => (
108
+ <Loader key={label} loader={<LoaderRing size={48} color={value} />} label={label} />
109
+ ))}
110
+ </div>
111
+ </div>
112
+ <div>
113
+ <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Ellipsis</h3>
114
+ <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
115
+ {colors.map(({ value, label }) => (
116
+ <Loader
117
+ key={label}
118
+ loader={<LoaderEllipsis size={48} color={value} />}
119
+ label={label}
120
+ />
121
+ ))}
122
+ </div>
123
+ </div>
124
+ <div>
125
+ <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Spinner</h3>
126
+ <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
127
+ {colors.map(({ value, label }) => (
128
+ <Loader
129
+ key={label}
130
+ loader={<LoaderSpinner size={48} color={value} />}
131
+ label={label}
132
+ />
133
+ ))}
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ )
139
+ }
140
+
141
+ const stringSizes: (number | string)[] = ['1.5rem', '2rem', '3rem', '4rem']
142
+
143
+ export const StringSizes = (): React.JSX.Element => {
144
+ return (
145
+ <div style={{ maxWidth: '800px', margin: '1.5rem auto' }}>
146
+ <div style={{ maxWidth: '800px', display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
147
+ <div>
148
+ <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>
149
+ Ring (rem units)
150
+ </h3>
151
+ <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
152
+ {stringSizes.map((size) => (
153
+ <Loader key={String(size)} loader={<LoaderRing size={size} />} label={String(size)} />
154
+ ))}
155
+ </div>
156
+ </div>
157
+ <div>
158
+ <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>
159
+ Ellipsis (rem units)
160
+ </h3>
161
+ <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
162
+ {stringSizes.map((size) => (
163
+ <Loader
164
+ key={String(size)}
165
+ loader={<LoaderEllipsis size={size} />}
166
+ label={String(size)}
167
+ />
168
+ ))}
169
+ </div>
170
+ </div>
171
+ <div>
172
+ <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>
173
+ Spinner (rem units)
174
+ </h3>
175
+ <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
176
+ {stringSizes.map((size) => (
177
+ <Loader
178
+ key={String(size)}
179
+ loader={<LoaderSpinner size={size} />}
180
+ label={String(size)}
181
+ />
182
+ ))}
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ )
188
+ }