@regardio/react 0.3.2 → 0.3.3
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/stories/BackgroundSlideshow.stories.d.ts +2 -2
- package/dist/stories/BackgroundSlideshow.stories.d.ts.map +1 -1
- package/dist/stories/BackgroundSlideshow.stories.js +22 -22
- package/dist/stories/BlurryGradient.stories.d.ts +2 -2
- package/dist/stories/BlurryGradient.stories.js +25 -25
- package/dist/stories/Carousel.stories.d.ts +2 -2
- package/dist/stories/Carousel.stories.d.ts.map +1 -1
- package/dist/stories/Carousel.stories.js +12 -12
- package/dist/stories/Countdown.stories.d.ts +2 -2
- package/dist/stories/Countdown.stories.js +4 -4
- package/dist/stories/DefinitionList.stories.d.ts +2 -2
- package/dist/stories/DefinitionList.stories.js +4 -4
- package/dist/stories/GenericError.stories.d.ts +2 -2
- package/dist/stories/GenericError.stories.d.ts.map +1 -1
- package/dist/stories/GenericError.stories.js +12 -12
- package/dist/stories/IconButton.stories.d.ts +2 -2
- package/dist/stories/IconButton.stories.js +6 -6
- package/dist/stories/Iframe.stories.d.ts +2 -2
- package/dist/stories/Iframe.stories.js +9 -9
- package/dist/stories/Item.stories.d.ts +2 -2
- package/dist/stories/Item.stories.js +7 -7
- package/dist/stories/ListItem.stories.d.ts +2 -2
- package/dist/stories/ListItem.stories.d.ts.map +1 -1
- package/dist/stories/ListItem.stories.js +9 -8
- package/dist/stories/PasswordInput.stories.d.ts +2 -2
- package/dist/stories/PasswordInput.stories.js +9 -9
- package/dist/stories/Picture.stories.d.ts +2 -2
- package/dist/stories/Picture.stories.js +20 -20
- package/dist/stories/ProtectedEmail.stories.d.ts +2 -2
- package/dist/stories/ProtectedEmail.stories.js +13 -13
- package/dist/stories/Text.stories.d.ts +2 -2
- package/dist/stories/Text.stories.js +9 -9
- package/dist/stories/UnorderedList.stories.d.ts +2 -2
- package/dist/stories/UnorderedList.stories.js +6 -6
- package/package.json +1 -1
- package/src/stories/ListItem.stories.tsx +3 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { BackgroundSlideshow } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { BackgroundSlideshow } from '../components/background-slideshow';
|
|
3
3
|
declare const meta: Meta<typeof BackgroundSlideshow>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof BackgroundSlideshow>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BackgroundSlideshow.stories.d.ts","sourceRoot":"","sources":["../../src/stories/BackgroundSlideshow.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,
|
|
1
|
+
{"version":3,"file":"BackgroundSlideshow.stories.d.ts","sourceRoot":"","sources":["../../src/stories/BackgroundSlideshow.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAkB,MAAM,oCAAoC,CAAC;AAEzF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAO1C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAC;AA0BlD,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAS5B,CAAC"}
|
|
@@ -1,59 +1,59 @@
|
|
|
1
|
-
import { BackgroundSlideshow
|
|
1
|
+
import { BackgroundSlideshow } from '../components/background-slideshow';
|
|
2
2
|
const meta = {
|
|
3
3
|
component: BackgroundSlideshow,
|
|
4
4
|
parameters: {
|
|
5
|
-
layout:
|
|
5
|
+
layout: 'fullscreen',
|
|
6
6
|
},
|
|
7
|
-
tags: [
|
|
8
|
-
title:
|
|
7
|
+
tags: ['autodocs'],
|
|
8
|
+
title: 'Components/BackgroundSlideshow',
|
|
9
9
|
};
|
|
10
10
|
export default meta;
|
|
11
11
|
const sampleImages = [
|
|
12
12
|
{
|
|
13
|
-
at: { de:
|
|
14
|
-
fn:
|
|
13
|
+
at: { de: 'Bild 1', en: 'Image 1' },
|
|
14
|
+
fn: 'image1.jpg',
|
|
15
15
|
hu: 200,
|
|
16
|
-
id:
|
|
16
|
+
id: '1',
|
|
17
17
|
po: false,
|
|
18
18
|
},
|
|
19
19
|
{
|
|
20
|
-
at: { de:
|
|
21
|
-
fn:
|
|
20
|
+
at: { de: 'Bild 2', en: 'Image 2' },
|
|
21
|
+
fn: 'image2.jpg',
|
|
22
22
|
hu: 150,
|
|
23
|
-
id:
|
|
23
|
+
id: '2',
|
|
24
24
|
po: false,
|
|
25
25
|
},
|
|
26
26
|
{
|
|
27
|
-
at: { de:
|
|
28
|
-
fn:
|
|
27
|
+
at: { de: 'Bild 3', en: 'Image 3' },
|
|
28
|
+
fn: 'image3.jpg',
|
|
29
29
|
hu: 100,
|
|
30
|
-
id:
|
|
30
|
+
id: '3',
|
|
31
31
|
po: false,
|
|
32
32
|
},
|
|
33
33
|
];
|
|
34
34
|
export const Default = {
|
|
35
35
|
args: {
|
|
36
|
-
baseUrl:
|
|
37
|
-
className:
|
|
36
|
+
baseUrl: 'https://via.placeholder.com/{format}?text=Image+{id}',
|
|
37
|
+
className: 'h-[400px] w-full',
|
|
38
38
|
images: sampleImages,
|
|
39
|
-
locale:
|
|
39
|
+
locale: 'en',
|
|
40
40
|
},
|
|
41
41
|
};
|
|
42
42
|
export const WithoutSlideshow = {
|
|
43
43
|
args: {
|
|
44
|
-
baseUrl:
|
|
45
|
-
className:
|
|
44
|
+
baseUrl: 'https://via.placeholder.com/{format}?text=Static',
|
|
45
|
+
className: 'h-[400px] w-full',
|
|
46
46
|
images: sampleImages,
|
|
47
|
-
locale:
|
|
47
|
+
locale: 'en',
|
|
48
48
|
slideshow: false,
|
|
49
49
|
},
|
|
50
50
|
};
|
|
51
51
|
export const FastTransition = {
|
|
52
52
|
args: {
|
|
53
|
-
baseUrl:
|
|
54
|
-
className:
|
|
53
|
+
baseUrl: 'https://via.placeholder.com/{format}?text=Fast',
|
|
54
|
+
className: 'h-[400px] w-full',
|
|
55
55
|
images: sampleImages,
|
|
56
|
-
locale:
|
|
56
|
+
locale: 'en',
|
|
57
57
|
slideshowInterval: 2000,
|
|
58
58
|
transitionDuration: 1000,
|
|
59
59
|
},
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { BlurryGradient } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { BlurryGradient } from '../components/blurry-gradient';
|
|
3
3
|
declare const meta: Meta<typeof BlurryGradient>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof BlurryGradient>;
|
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
import { BlurryGradient } from
|
|
1
|
+
import { BlurryGradient } from '../components/blurry-gradient';
|
|
2
2
|
const meta = {
|
|
3
3
|
component: BlurryGradient,
|
|
4
4
|
parameters: {
|
|
5
|
-
layout:
|
|
5
|
+
layout: 'centered',
|
|
6
6
|
},
|
|
7
|
-
tags: [
|
|
8
|
-
title:
|
|
7
|
+
tags: ['autodocs'],
|
|
8
|
+
title: 'Components/BlurryGradient',
|
|
9
9
|
};
|
|
10
10
|
export default meta;
|
|
11
11
|
export const Default = {
|
|
12
12
|
args: {
|
|
13
|
-
neutralColor:
|
|
14
|
-
primaryColor:
|
|
15
|
-
secondaryColor:
|
|
16
|
-
style: { height:
|
|
13
|
+
neutralColor: '#f0f0f0',
|
|
14
|
+
primaryColor: '#3b82f6',
|
|
15
|
+
secondaryColor: '#8b5cf6',
|
|
16
|
+
style: { height: '400px', width: '400px' },
|
|
17
17
|
},
|
|
18
18
|
};
|
|
19
19
|
export const WarmColors = {
|
|
20
20
|
args: {
|
|
21
|
-
neutralColor:
|
|
22
|
-
primaryColor:
|
|
23
|
-
secondaryColor:
|
|
24
|
-
style: { height:
|
|
21
|
+
neutralColor: '#fef3c7',
|
|
22
|
+
primaryColor: '#f97316',
|
|
23
|
+
secondaryColor: '#ef4444',
|
|
24
|
+
style: { height: '400px', width: '400px' },
|
|
25
25
|
},
|
|
26
26
|
};
|
|
27
27
|
export const CoolColors = {
|
|
28
28
|
args: {
|
|
29
|
-
neutralColor:
|
|
30
|
-
primaryColor:
|
|
31
|
-
secondaryColor:
|
|
32
|
-
style: { height:
|
|
29
|
+
neutralColor: '#e0f2fe',
|
|
30
|
+
primaryColor: '#0ea5e9',
|
|
31
|
+
secondaryColor: '#06b6d4',
|
|
32
|
+
style: { height: '400px', width: '400px' },
|
|
33
33
|
},
|
|
34
34
|
};
|
|
35
35
|
export const NatureColors = {
|
|
36
36
|
args: {
|
|
37
|
-
neutralColor:
|
|
38
|
-
primaryColor:
|
|
39
|
-
secondaryColor:
|
|
40
|
-
style: { height:
|
|
37
|
+
neutralColor: '#fef9c3',
|
|
38
|
+
primaryColor: '#22c55e',
|
|
39
|
+
secondaryColor: '#84cc16',
|
|
40
|
+
style: { height: '400px', width: '400px' },
|
|
41
41
|
},
|
|
42
42
|
};
|
|
43
43
|
export const FullWidth = {
|
|
44
44
|
args: {
|
|
45
|
-
neutralColor:
|
|
46
|
-
primaryColor:
|
|
47
|
-
secondaryColor:
|
|
48
|
-
style: { height:
|
|
45
|
+
neutralColor: '#f0f0f0',
|
|
46
|
+
primaryColor: '#3b82f6',
|
|
47
|
+
secondaryColor: '#8b5cf6',
|
|
48
|
+
style: { height: '200px', width: '100%' },
|
|
49
49
|
},
|
|
50
50
|
parameters: {
|
|
51
|
-
layout:
|
|
51
|
+
layout: 'fullscreen',
|
|
52
52
|
},
|
|
53
53
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { Carousel } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Carousel } from '../components/carousel';
|
|
3
3
|
declare const meta: Meta<typeof Carousel>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof Carousel>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Carousel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EACL,QAAQ,EAKT,MAAM,wBAAwB,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAO/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAmBvC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"Carousel.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Carousel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EACL,QAAQ,EAKT,MAAM,wBAAwB,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAO/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAmBvC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAoB1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from
|
|
2
|
+
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from '../components/carousel';
|
|
3
3
|
const meta = {
|
|
4
4
|
component: Carousel,
|
|
5
5
|
parameters: {
|
|
6
|
-
layout:
|
|
6
|
+
layout: 'padded',
|
|
7
7
|
},
|
|
8
|
-
tags: [
|
|
9
|
-
title:
|
|
8
|
+
tags: ['autodocs'],
|
|
9
|
+
title: 'Components/Carousel',
|
|
10
10
|
};
|
|
11
11
|
export default meta;
|
|
12
12
|
const SlideCard = ({ children }) => (_jsx("div", { style: {
|
|
13
|
-
alignItems:
|
|
14
|
-
background:
|
|
15
|
-
border:
|
|
16
|
-
borderRadius:
|
|
17
|
-
display:
|
|
18
|
-
height:
|
|
19
|
-
justifyContent:
|
|
20
|
-
width:
|
|
13
|
+
alignItems: 'center',
|
|
14
|
+
background: '#f0f0f0',
|
|
15
|
+
border: '1px solid #ddd',
|
|
16
|
+
borderRadius: '8px',
|
|
17
|
+
display: 'flex',
|
|
18
|
+
height: '200px',
|
|
19
|
+
justifyContent: 'center',
|
|
20
|
+
width: '300px',
|
|
21
21
|
}, children: children }));
|
|
22
22
|
export const Default = {
|
|
23
23
|
render: () => (_jsx(Carousel, { className: "w-full max-w-md", children: _jsxs(CarouselContent, { className: "gap-4", children: [_jsx(CarouselItem, { children: _jsx(SlideCard, { children: "Slide 1" }) }), _jsx(CarouselItem, { children: _jsx(SlideCard, { children: "Slide 2" }) }), _jsx(CarouselItem, { children: _jsx(SlideCard, { children: "Slide 3" }) })] }) })),
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { Countdown } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Countdown } from '../components/countdown';
|
|
3
3
|
declare const meta: Meta<typeof Countdown>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof Countdown>;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { Countdown } from
|
|
1
|
+
import { Countdown } from '../components/countdown';
|
|
2
2
|
const meta = {
|
|
3
3
|
component: Countdown,
|
|
4
4
|
parameters: {
|
|
5
|
-
layout:
|
|
5
|
+
layout: 'centered',
|
|
6
6
|
},
|
|
7
|
-
tags: [
|
|
8
|
-
title:
|
|
7
|
+
tags: ['autodocs'],
|
|
8
|
+
title: 'Components/Countdown',
|
|
9
9
|
};
|
|
10
10
|
export default meta;
|
|
11
11
|
export const Default = {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { DefinitionList } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { DefinitionList } from '../components/definition-list';
|
|
3
3
|
declare const meta: Meta<typeof DefinitionList>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof DefinitionList>;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Dd, DefinitionList, Dt } from
|
|
2
|
+
import { Dd, DefinitionList, Dt } from '../components/definition-list';
|
|
3
3
|
const meta = {
|
|
4
4
|
component: DefinitionList,
|
|
5
5
|
parameters: {
|
|
6
|
-
layout:
|
|
6
|
+
layout: 'padded',
|
|
7
7
|
},
|
|
8
|
-
tags: [
|
|
9
|
-
title:
|
|
8
|
+
tags: ['autodocs'],
|
|
9
|
+
title: 'Components/DefinitionList',
|
|
10
10
|
};
|
|
11
11
|
export default meta;
|
|
12
12
|
export const Default = {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { GenericError } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { GenericError } from '../components/generic-error';
|
|
3
3
|
declare const meta: Meta<typeof GenericError>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof GenericError>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenericError.stories.d.ts","sourceRoot":"","sources":["../../src/stories/GenericError.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAsB,MAAM,6BAA6B,CAAC;AAE/E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAOnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAoB3C,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,
|
|
1
|
+
{"version":3,"file":"GenericError.stories.d.ts","sourceRoot":"","sources":["../../src/stories/GenericError.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAsB,MAAM,6BAA6B,CAAC;AAE/E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAOnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAoB3C,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAepC,CAAC"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { createMemoryRouter, RouterProvider } from
|
|
3
|
-
import { GenericError, getErrorDescriptor } from
|
|
2
|
+
import { createMemoryRouter, RouterProvider } from 'react-router';
|
|
3
|
+
import { GenericError, getErrorDescriptor } from '../components/generic-error';
|
|
4
4
|
const meta = {
|
|
5
5
|
component: GenericError,
|
|
6
6
|
parameters: {
|
|
7
|
-
layout:
|
|
7
|
+
layout: 'fullscreen',
|
|
8
8
|
},
|
|
9
|
-
tags: [
|
|
10
|
-
title:
|
|
9
|
+
tags: ['autodocs'],
|
|
10
|
+
title: 'Components/GenericError',
|
|
11
11
|
};
|
|
12
12
|
export default meta;
|
|
13
13
|
const ErrorWrapper = ({ status }) => {
|
|
@@ -16,11 +16,11 @@ const ErrorWrapper = ({ status }) => {
|
|
|
16
16
|
element: _jsx(GenericError, {}),
|
|
17
17
|
errorElement: _jsx(GenericError, {}),
|
|
18
18
|
loader: () => {
|
|
19
|
-
throw new Response(
|
|
19
|
+
throw new Response('Not Found', { status, statusText: 'Not Found' });
|
|
20
20
|
},
|
|
21
|
-
path:
|
|
21
|
+
path: '/',
|
|
22
22
|
},
|
|
23
|
-
], { initialEntries: [
|
|
23
|
+
], { initialEntries: ['/'] });
|
|
24
24
|
return _jsx(RouterProvider, { router: router });
|
|
25
25
|
};
|
|
26
26
|
export const Error404 = {
|
|
@@ -31,9 +31,9 @@ export const Error500 = {
|
|
|
31
31
|
};
|
|
32
32
|
export const GetErrorDescriptorDemo = {
|
|
33
33
|
render: () => {
|
|
34
|
-
const httpError = getErrorDescriptor(new Response(
|
|
35
|
-
const runtimeError = getErrorDescriptor(new Error(
|
|
36
|
-
const unknownError = getErrorDescriptor(
|
|
37
|
-
return (_jsxs("div", { style: { padding:
|
|
34
|
+
const httpError = getErrorDescriptor(new Response('Not Found', { status: 404 }));
|
|
35
|
+
const runtimeError = getErrorDescriptor(new Error('Something went wrong'));
|
|
36
|
+
const unknownError = getErrorDescriptor('unknown');
|
|
37
|
+
return (_jsxs("div", { style: { padding: '24px' }, children: [_jsx("h3", { children: "Error Descriptor Examples" }), _jsx("pre", { style: { background: '#f5f5f5', padding: '16px' }, children: JSON.stringify({ httpError, runtimeError, unknownError }, null, 2) })] }));
|
|
38
38
|
},
|
|
39
39
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { IconButton } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { IconButton } from '../components/icon-button';
|
|
3
3
|
declare const meta: Meta<typeof IconButton>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof IconButton>;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { IconButton } from
|
|
2
|
+
import { IconButton } from '../components/icon-button';
|
|
3
3
|
const meta = {
|
|
4
4
|
component: IconButton,
|
|
5
5
|
parameters: {
|
|
6
|
-
layout:
|
|
6
|
+
layout: 'centered',
|
|
7
7
|
},
|
|
8
|
-
tags: [
|
|
9
|
-
title:
|
|
8
|
+
tags: ['autodocs'],
|
|
9
|
+
title: 'Components/IconButton',
|
|
10
10
|
};
|
|
11
11
|
export default meta;
|
|
12
12
|
const PlusIcon = () => (_jsxs("svg", { fill: "none", height: "24", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", width: "24", children: [_jsx("line", { x1: "12", x2: "12", y1: "5", y2: "19" }), _jsx("line", { x1: "5", x2: "19", y1: "12", y2: "12" })] }));
|
|
@@ -23,10 +23,10 @@ export const Close = {
|
|
|
23
23
|
};
|
|
24
24
|
export const WithCustomClass = {
|
|
25
25
|
args: {
|
|
26
|
-
className:
|
|
26
|
+
className: 'p-2 bg-gray-100 rounded hover:bg-gray-200',
|
|
27
27
|
icon: _jsx(PlusIcon, {}),
|
|
28
28
|
},
|
|
29
29
|
};
|
|
30
30
|
export const AllIcons = {
|
|
31
|
-
render: () => (_jsxs("div", { style: { display:
|
|
31
|
+
render: () => (_jsxs("div", { style: { display: 'flex', gap: '16px' }, children: [_jsx(IconButton, { icon: _jsx(PlusIcon, {}) }), _jsx(IconButton, { icon: _jsx(CloseIcon, {}) })] })),
|
|
32
32
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { Iframe } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Iframe } from '../components/iframe';
|
|
3
3
|
declare const meta: Meta<typeof Iframe>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof Iframe>;
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { Iframe } from
|
|
1
|
+
import { Iframe } from '../components/iframe';
|
|
2
2
|
const meta = {
|
|
3
3
|
component: Iframe,
|
|
4
4
|
parameters: {
|
|
5
|
-
layout:
|
|
5
|
+
layout: 'padded',
|
|
6
6
|
},
|
|
7
|
-
tags: [
|
|
8
|
-
title:
|
|
7
|
+
tags: ['autodocs'],
|
|
8
|
+
title: 'Components/Iframe',
|
|
9
9
|
};
|
|
10
10
|
export default meta;
|
|
11
11
|
export const YouTubeVideo = {
|
|
12
12
|
args: {
|
|
13
|
-
src:
|
|
14
|
-
title:
|
|
13
|
+
src: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
|
|
14
|
+
title: 'YouTube Video',
|
|
15
15
|
},
|
|
16
16
|
};
|
|
17
17
|
export const WithCustomClass = {
|
|
18
18
|
args: {
|
|
19
|
-
className:
|
|
20
|
-
src:
|
|
21
|
-
title:
|
|
19
|
+
className: 'rounded-lg shadow-lg',
|
|
20
|
+
src: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
|
|
21
|
+
title: 'Styled YouTube Video',
|
|
22
22
|
},
|
|
23
23
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { Item } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Item } from '../components/item';
|
|
3
3
|
declare const meta: Meta<typeof Item>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof Item>;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { MemoryRouter } from
|
|
3
|
-
import { Item } from
|
|
2
|
+
import { MemoryRouter } from 'react-router';
|
|
3
|
+
import { Item } from '../components/item';
|
|
4
4
|
const meta = {
|
|
5
5
|
component: Item,
|
|
6
6
|
decorators: [
|
|
7
7
|
(Story) => (_jsx(MemoryRouter, { children: _jsx(Story, {}) })),
|
|
8
8
|
],
|
|
9
9
|
parameters: {
|
|
10
|
-
layout:
|
|
10
|
+
layout: 'padded',
|
|
11
11
|
},
|
|
12
|
-
tags: [
|
|
13
|
-
title:
|
|
12
|
+
tags: ['autodocs'],
|
|
13
|
+
title: 'Components/Item',
|
|
14
14
|
};
|
|
15
15
|
export default meta;
|
|
16
16
|
export const Default = {
|
|
@@ -21,12 +21,12 @@ export const Default = {
|
|
|
21
21
|
export const WithLink = {
|
|
22
22
|
args: {
|
|
23
23
|
children: _jsx("div", { className: "p-4", children: "Clickable item" }),
|
|
24
|
-
link:
|
|
24
|
+
link: '/example',
|
|
25
25
|
},
|
|
26
26
|
};
|
|
27
27
|
export const WidthVariants = {
|
|
28
28
|
render: () => (_jsxs("div", { className: "grid grid-cols-12 gap-4", children: [_jsx(Item, { width: "xs", children: _jsx("div", { className: "p-2 bg-gray-100", children: "XS" }) }), _jsx(Item, { width: "sm", children: _jsx("div", { className: "p-2 bg-gray-100", children: "SM" }) }), _jsx(Item, { width: "md", children: _jsx("div", { className: "p-2 bg-gray-100", children: "MD" }) }), _jsx(Item, { width: "lg", children: _jsx("div", { className: "p-2 bg-gray-100", children: "LG" }) }), _jsx(Item, { width: "full", children: _jsx("div", { className: "p-2 bg-gray-100", children: "Full" }) })] })),
|
|
29
29
|
};
|
|
30
30
|
export const ThemeColors = {
|
|
31
|
-
render: () => (_jsxs("div", { style: { display:
|
|
31
|
+
render: () => (_jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', gap: '8px' }, children: [_jsx(Item, { themeColor: "blue", children: _jsx("div", { className: "p-4", children: "Blue" }) }), _jsx(Item, { themeColor: "green", children: _jsx("div", { className: "p-4", children: "Green" }) }), _jsx(Item, { themeColor: "red", children: _jsx("div", { className: "p-4", children: "Red" }) }), _jsx(Item, { themeColor: "orange", children: _jsx("div", { className: "p-4", children: "Orange" }) }), _jsx(Item, { themeColor: "purple", children: _jsx("div", { className: "p-4", children: "Purple" }) })] })),
|
|
32
32
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { ListItem } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { ListItem } from '../components/list-item';
|
|
3
3
|
declare const meta: Meta<typeof ListItem>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof ListItem>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../src/stories/ListItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../src/stories/ListItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAGnD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAO/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC"}
|
|
@@ -1,25 +1,26 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ListItem } from
|
|
2
|
+
import { ListItem } from '../components/list-item';
|
|
3
|
+
import { UnorderedList } from '../components/unordered-list';
|
|
3
4
|
const meta = {
|
|
4
5
|
component: ListItem,
|
|
5
6
|
parameters: {
|
|
6
|
-
layout:
|
|
7
|
+
layout: 'padded',
|
|
7
8
|
},
|
|
8
|
-
tags: [
|
|
9
|
-
title:
|
|
9
|
+
tags: ['autodocs'],
|
|
10
|
+
title: 'Components/ListItem',
|
|
10
11
|
};
|
|
11
12
|
export default meta;
|
|
12
13
|
export const Default = {
|
|
13
14
|
args: {
|
|
14
|
-
children:
|
|
15
|
+
children: 'List item content',
|
|
15
16
|
},
|
|
16
17
|
};
|
|
17
18
|
export const InList = {
|
|
18
|
-
render: () => (_jsxs(
|
|
19
|
+
render: () => (_jsxs(UnorderedList, { children: [_jsx(ListItem, { children: "First item" }), _jsx(ListItem, { children: "Second item" }), _jsx(ListItem, { children: "Third item" })] })),
|
|
19
20
|
};
|
|
20
21
|
export const WithCustomClass = {
|
|
21
22
|
args: {
|
|
22
|
-
children:
|
|
23
|
-
className:
|
|
23
|
+
children: 'Styled list item',
|
|
24
|
+
className: 'font-bold text-blue-600',
|
|
24
25
|
},
|
|
25
26
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { PasswordInput } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { PasswordInput } from '../components/password-input';
|
|
3
3
|
declare const meta: Meta<typeof PasswordInput>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof PasswordInput>;
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import { PasswordInput } from
|
|
1
|
+
import { PasswordInput } from '../components/password-input';
|
|
2
2
|
const meta = {
|
|
3
3
|
component: PasswordInput,
|
|
4
4
|
parameters: {
|
|
5
|
-
layout:
|
|
5
|
+
layout: 'padded',
|
|
6
6
|
},
|
|
7
|
-
tags: [
|
|
8
|
-
title:
|
|
7
|
+
tags: ['autodocs'],
|
|
8
|
+
title: 'Components/PasswordInput',
|
|
9
9
|
};
|
|
10
10
|
export default meta;
|
|
11
11
|
export const Default = {
|
|
12
12
|
args: {
|
|
13
|
-
placeholder:
|
|
13
|
+
placeholder: 'Enter password',
|
|
14
14
|
},
|
|
15
15
|
};
|
|
16
16
|
export const WithValue = {
|
|
17
17
|
args: {
|
|
18
|
-
defaultValue:
|
|
19
|
-
placeholder:
|
|
18
|
+
defaultValue: 'secretpassword',
|
|
19
|
+
placeholder: 'Enter password',
|
|
20
20
|
},
|
|
21
21
|
};
|
|
22
22
|
export const WithCustomClass = {
|
|
23
23
|
args: {
|
|
24
|
-
className:
|
|
25
|
-
placeholder:
|
|
24
|
+
className: 'border border-gray-300 rounded px-3 py-2',
|
|
25
|
+
placeholder: 'Styled password input',
|
|
26
26
|
},
|
|
27
27
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { Picture } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Picture } from '../components/picture';
|
|
3
3
|
declare const meta: Meta<typeof Picture>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof Picture>;
|
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
import { Picture } from
|
|
1
|
+
import { Picture } from '../components/picture';
|
|
2
2
|
const meta = {
|
|
3
3
|
component: Picture,
|
|
4
4
|
parameters: {
|
|
5
|
-
layout:
|
|
5
|
+
layout: 'padded',
|
|
6
6
|
},
|
|
7
|
-
tags: [
|
|
8
|
-
title:
|
|
7
|
+
tags: ['autodocs'],
|
|
8
|
+
title: 'Components/Picture',
|
|
9
9
|
};
|
|
10
10
|
export default meta;
|
|
11
11
|
export const SimpleImage = {
|
|
12
12
|
args: {
|
|
13
|
-
alt:
|
|
14
|
-
baseUrl:
|
|
13
|
+
alt: 'Placeholder image',
|
|
14
|
+
baseUrl: 'https://via.placeholder.com/400x300',
|
|
15
15
|
},
|
|
16
16
|
};
|
|
17
17
|
export const WithFormats = {
|
|
18
18
|
args: {
|
|
19
|
-
alt:
|
|
20
|
-
baseUrl:
|
|
19
|
+
alt: 'Responsive image',
|
|
20
|
+
baseUrl: 'https://via.placeholder.com/{format}',
|
|
21
21
|
formats: [
|
|
22
|
-
{ size:
|
|
23
|
-
{ size:
|
|
24
|
-
{ size:
|
|
22
|
+
{ size: '480x360', width: 480 },
|
|
23
|
+
{ size: '800x600', width: 800 },
|
|
24
|
+
{ size: '1200x900', width: 1200 },
|
|
25
25
|
],
|
|
26
26
|
},
|
|
27
27
|
};
|
|
28
28
|
export const WithCustomSizes = {
|
|
29
29
|
args: {
|
|
30
|
-
alt:
|
|
31
|
-
baseUrl:
|
|
30
|
+
alt: 'Custom sizes image',
|
|
31
|
+
baseUrl: 'https://via.placeholder.com/{format}',
|
|
32
32
|
formats: [
|
|
33
|
-
{ size:
|
|
34
|
-
{ size:
|
|
33
|
+
{ size: '320x240', width: 320 },
|
|
34
|
+
{ size: '640x480', width: 640 },
|
|
35
35
|
],
|
|
36
|
-
sizes:
|
|
36
|
+
sizes: '(max-width: 640px) 320px, 640px',
|
|
37
37
|
},
|
|
38
38
|
};
|
|
39
39
|
export const WithClassName = {
|
|
40
40
|
args: {
|
|
41
|
-
alt:
|
|
42
|
-
baseUrl:
|
|
43
|
-
className:
|
|
44
|
-
imgClassName:
|
|
41
|
+
alt: 'Styled image',
|
|
42
|
+
baseUrl: 'https://via.placeholder.com/400x300',
|
|
43
|
+
className: 'rounded-lg shadow-lg',
|
|
44
|
+
imgClassName: 'object-cover',
|
|
45
45
|
},
|
|
46
46
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { ProtectedEmail } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { ProtectedEmail } from '../components/protected-email';
|
|
3
3
|
declare const meta: Meta<typeof ProtectedEmail>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof ProtectedEmail>;
|
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ProtectedEmail } from
|
|
2
|
+
import { ProtectedEmail } from '../components/protected-email';
|
|
3
3
|
const meta = {
|
|
4
4
|
component: ProtectedEmail,
|
|
5
5
|
parameters: {
|
|
6
|
-
layout:
|
|
6
|
+
layout: 'padded',
|
|
7
7
|
},
|
|
8
|
-
tags: [
|
|
9
|
-
title:
|
|
8
|
+
tags: ['autodocs'],
|
|
9
|
+
title: 'Components/ProtectedEmail',
|
|
10
10
|
};
|
|
11
11
|
export default meta;
|
|
12
12
|
export const Default = {
|
|
13
13
|
args: {
|
|
14
|
-
domain:
|
|
15
|
-
username:
|
|
14
|
+
domain: 'example.com',
|
|
15
|
+
username: 'contact',
|
|
16
16
|
},
|
|
17
17
|
};
|
|
18
18
|
export const WithCustomText = {
|
|
19
19
|
args: {
|
|
20
|
-
domain:
|
|
21
|
-
text:
|
|
22
|
-
username:
|
|
20
|
+
domain: 'example.com',
|
|
21
|
+
text: 'Send us an email',
|
|
22
|
+
username: 'info',
|
|
23
23
|
},
|
|
24
24
|
};
|
|
25
25
|
export const WithClassName = {
|
|
26
26
|
args: {
|
|
27
|
-
className:
|
|
28
|
-
domain:
|
|
29
|
-
username:
|
|
27
|
+
className: 'text-blue-600 underline hover:text-blue-800',
|
|
28
|
+
domain: 'company.org',
|
|
29
|
+
username: 'support',
|
|
30
30
|
},
|
|
31
31
|
};
|
|
32
32
|
export const MultipleEmails = {
|
|
33
|
-
render: () => (_jsxs("div", { style: { display:
|
|
33
|
+
render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx(ProtectedEmail, { domain: "example.com", username: "sales" }), _jsx(ProtectedEmail, { domain: "example.com", username: "support" }), _jsx(ProtectedEmail, { domain: "example.com", text: "General Inquiries", username: "info" })] })),
|
|
34
34
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { Text } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Text } from '../components/text';
|
|
3
3
|
declare const meta: Meta<typeof Text>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof Text>;
|
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Text } from
|
|
2
|
+
import { Text } from '../components/text';
|
|
3
3
|
const meta = {
|
|
4
4
|
component: Text,
|
|
5
5
|
parameters: {
|
|
6
|
-
layout:
|
|
6
|
+
layout: 'padded',
|
|
7
7
|
},
|
|
8
|
-
tags: [
|
|
9
|
-
title:
|
|
8
|
+
tags: ['autodocs'],
|
|
9
|
+
title: 'Components/Text',
|
|
10
10
|
};
|
|
11
11
|
export default meta;
|
|
12
12
|
export const Default = {
|
|
13
13
|
args: {
|
|
14
|
-
children:
|
|
14
|
+
children: 'This is default text content.',
|
|
15
15
|
},
|
|
16
16
|
};
|
|
17
17
|
export const Subtitle = {
|
|
18
18
|
args: {
|
|
19
|
-
children:
|
|
20
|
-
variant:
|
|
19
|
+
children: 'This is subtitle text with larger size.',
|
|
20
|
+
variant: 'subtitle',
|
|
21
21
|
},
|
|
22
22
|
};
|
|
23
23
|
export const Code = {
|
|
24
24
|
args: {
|
|
25
25
|
children: "const example = 'monospace code text';",
|
|
26
|
-
variant:
|
|
26
|
+
variant: 'code',
|
|
27
27
|
},
|
|
28
28
|
};
|
|
29
29
|
export const AllVariants = {
|
|
30
|
-
render: () => (_jsxs("div", { style: { display:
|
|
30
|
+
render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [_jsx(Text, { variant: "primary", children: "Primary text (default)" }), _jsx(Text, { variant: "subtitle", children: "Subtitle text" }), _jsx(Text, { variant: "code", children: "Code text with monospace font" })] })),
|
|
31
31
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { UnorderedList } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { UnorderedList } from '../components/unordered-list';
|
|
3
3
|
declare const meta: Meta<typeof UnorderedList>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof UnorderedList>;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ListItem } from
|
|
3
|
-
import { UnorderedList } from
|
|
2
|
+
import { ListItem } from '../components/list-item';
|
|
3
|
+
import { UnorderedList } from '../components/unordered-list';
|
|
4
4
|
const meta = {
|
|
5
5
|
component: UnorderedList,
|
|
6
6
|
parameters: {
|
|
7
|
-
layout:
|
|
7
|
+
layout: 'padded',
|
|
8
8
|
},
|
|
9
|
-
tags: [
|
|
10
|
-
title:
|
|
9
|
+
tags: ['autodocs'],
|
|
10
|
+
title: 'Components/UnorderedList',
|
|
11
11
|
};
|
|
12
12
|
export default meta;
|
|
13
13
|
export const Default = {
|
|
@@ -20,5 +20,5 @@ export const Unstyled = {
|
|
|
20
20
|
render: () => (_jsxs(UnorderedList, { variant: "unstyled", children: [_jsx(ListItem, { children: "No bullet 1" }), _jsx(ListItem, { children: "No bullet 2" }), _jsx(ListItem, { children: "No bullet 3" })] })),
|
|
21
21
|
};
|
|
22
22
|
export const AllVariants = {
|
|
23
|
-
render: () => (_jsxs("div", { style: { display:
|
|
23
|
+
render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [_jsxs("div", { children: [_jsx("h4", { children: "Primary (default)" }), _jsxs(UnorderedList, { variant: "primary", children: [_jsx(ListItem, { children: "Item 1" }), _jsx(ListItem, { children: "Item 2" })] })] }), _jsxs("div", { children: [_jsx("h4", { children: "Inline" }), _jsxs(UnorderedList, { variant: "inline", children: [_jsx(ListItem, { children: "Item 1" }), _jsx(ListItem, { children: "Item 2" })] })] }), _jsxs("div", { children: [_jsx("h4", { children: "Unstyled" }), _jsxs(UnorderedList, { variant: "unstyled", children: [_jsx(ListItem, { children: "Item 1" }), _jsx(ListItem, { children: "Item 2" })] })] })] })),
|
|
24
24
|
};
|
package/package.json
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
2
|
import { ListItem } from '../components/list-item';
|
|
3
|
+
import { UnorderedList } from '../components/unordered-list';
|
|
3
4
|
|
|
4
5
|
const meta: Meta<typeof ListItem> = {
|
|
5
6
|
component: ListItem,
|
|
@@ -21,11 +22,11 @@ export const Default: Story = {
|
|
|
21
22
|
|
|
22
23
|
export const InList: Story = {
|
|
23
24
|
render: () => (
|
|
24
|
-
<
|
|
25
|
+
<UnorderedList>
|
|
25
26
|
<ListItem>First item</ListItem>
|
|
26
27
|
<ListItem>Second item</ListItem>
|
|
27
28
|
<ListItem>Third item</ListItem>
|
|
28
|
-
</
|
|
29
|
+
</UnorderedList>
|
|
29
30
|
),
|
|
30
31
|
};
|
|
31
32
|
|