Skip to content

Commit 3c6471f

Browse files
stampaaaronstampaaaron
committed
docs: migrate timeline story to tsx
1 parent e5f721c commit 3c6471f

File tree

5 files changed

+162
-69
lines changed

5 files changed

+162
-69
lines changed

‎.storybook/main.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const react = require('@vitejs/plugin-react');
22
module.exports = {
3-
stories: ['../stories/*.mdx', '../src/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
3+
stories: ['../stories/*.mdx', '../src/**/*.stories.tsx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
44
staticDirs: [
55
{
66
from: '../docs',

‎.storybook/preview.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
export const parameters = {
22
viewMode: 'canvas',
3-
actions: { argTypesRegex: "^on[A-Z].*" },
3+
actions: { argTypesRegex: '^on[A-Z].*' },
44
controls: {
55
matchers: {
66
color: /(background|color)$/i,
77
date: /Date$/,
88
},
99
},
10-
}
10+
};

‎src/components/Timeline.stories.mdx

Lines changed: 0 additions & 63 deletions
This file was deleted.

‎src/components/Timeline.stories.tsx

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import { Meta, StoryObj } from '@storybook/react';
2+
import { Fragment } from 'react';
3+
import { defaultTimelineConfig, Timeline } from './Timeline';
4+
5+
export default {
6+
component: Timeline,
7+
decorators: [
8+
(Story) => (
9+
<div style={{ maxWidth: '80rem', marginInline: 'auto' }}>
10+
<Story />
11+
</div>
12+
),
13+
],
14+
} as Meta<typeof Timeline>;
15+
16+
const items = [
17+
{
18+
key: 1,
19+
title: '1 First date',
20+
date: new Date(),
21+
children: (
22+
<Fragment>
23+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti ut aspernatur quidem blanditiis quibusdam cum deserunt debitis
24+
recusandae quisquam fuga, aut numquam tempora consequatur doloremque! Nobis ipsam nisi omnis officiis
25+
</Fragment>
26+
),
27+
},
28+
{
29+
key: 2,
30+
title: '2 Another date',
31+
date: new Date(),
32+
children: (
33+
<Fragment>
34+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error explicabo obcaecati praesentium tenetur, perspiciatis tempora,
35+
distinctio quod voluptate a aliquam aspernatur nulla inventore quas unde, nostrum deserunt architecto commodi quidem tempore itaque
36+
molestias. Praesentium asperiores, tempore voluptatibus eveniet assumenda autem libero magni, eaque repudiandae quasi harum quas
37+
illum saepe corporis?
38+
</Fragment>
39+
),
40+
},
41+
{
42+
key: 3,
43+
title: '3 A cool event',
44+
date: new Date(),
45+
children: (
46+
<Fragment>
47+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, quia illum? Quam sint unde ratione deleniti incidunt eos eaque eum
48+
numquam tempore asperiores recusandae porro, odit qui. Fugiat fuga obcaecati architecto? Earum laborum itaque maiores eveniet quam?
49+
Numquam, dolorem cumque laboriosam natus perspiciatis quo nam ea exercitationem illum veniam aspernatur, commodi pariatur, eligendi
50+
maiores et porro incidunt optio molestias nisi voluptatibus quidem mollitia. Cum illo fugiat iste dolorum voluptatibus debitis?
51+
<img
52+
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/SMPTE_Color_Bars.svg/1200px-SMPTE_Color_Bars.svg.png"
53+
alt="test"
54+
/>
55+
</Fragment>
56+
),
57+
},
58+
{
59+
key: 4,
60+
title: '4 Something else happend',
61+
date: new Date(),
62+
children: (
63+
<Fragment>
64+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis eius earum tempora sit vitae odit id voluptatem quam, explicabo
65+
quisquam assumenda laudantium doloribus facere, perspiciatis amet molestiae ad accusamus omnis. Explicabo repellendus deserunt omnis
66+
doloribus eum velit aperiam illo excepturi.
67+
</Fragment>
68+
),
69+
},
70+
{
71+
key: 5,
72+
title: '5 Another event',
73+
date: new Date(),
74+
children: (
75+
<Fragment>
76+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt nulla, nisi sed molestiae veritatis officia architecto quam ea
77+
eos exercitationem rerum possimus debitis suscipit. Accusamus eveniet recusandae molestias nihil facere molestiae error quas harum
78+
incidunt delectus et ducimus provident quos, ipsa repellat iste beatae maiores voluptas at voluptates illo fugit aperiam alias. At
79+
expedita aut itaque! Labore minus quam excepturi fuga accusantium amet a error vero animi necessitatibus delectus eveniet sit
80+
explicabo tenetur laboriosam, voluptates dolorem veritatis doloremque sed nisi quia molestiae, cumque minima earum. Fuga dignissimos
81+
veniam dicta, mollitia totam officia dolor earum id unde recusandae aliquid ullam, numquam esse atque, nemo laboriosam? Dolorum unde
82+
dolores incidunt ipsam ad eligendi quod ut pariatur exercitationem quam aperiam nostrum excepturi nam perspiciatis odit impedit
83+
eaque eum, delectus distinctio nihil totam blanditiis. Placeat aliquid sunt a rerum odit suscipit facilis qui sit voluptatem,
84+
dolores provident ea velit quam omnis pariatur officiis. Eos fugiat libero a laborum quo eum, eaque quis, impedit cupiditate
85+
perspiciatis aliquam repudiandae eligendi voluptas. Dolore sed, numquam eveniet reprehenderit minus id rerum possimus itaque
86+
voluptate temporibus atque earum soluta deserunt provident necessitatibus? Perspiciatis, natus doloribus dolores sequi provident
87+
corporis quae soluta libero aut esse numquam consequuntur optio eius reiciendis!
88+
</Fragment>
89+
),
90+
},
91+
{
92+
key: 6,
93+
title: '6 This happend aswell',
94+
date: new Date(),
95+
children: (
96+
<Fragment>
97+
Lorem ipsum dolor sit amet consectetur adipisicing elit. In ducimus deserunt, nam recusandae amet sit quo nobis ut aliquam
98+
similique?
99+
</Fragment>
100+
),
101+
},
102+
{
103+
key: 7,
104+
title: '7 Interessting date here',
105+
date: new Date(),
106+
children: (
107+
<Fragment>
108+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque debitis sint ratione et id nisi quo error? Doloremque fugit
109+
provident accusamus optio autem, ex maxime voluptas perferendis tenetur temporibus alias reiciendis itaque quisquam! Asperiores
110+
voluptates laboriosam vel necessitatibus, ipsum reprehenderit sed eum eaque optio fugit blanditiis illo qui quisquam architecto quo
111+
nihil, quidem illum amet fugiat eos! Distinctio temporibus enim animi laborum mollitia exercitationem inventore natus iure maiores
112+
aliquam? Officia odio, iure dicta suscipit natus ratione cupiditate odit ipsa commodi enim voluptas doloribus nemo adipisci.
113+
Debitis, corrupti qui omnis, veritatis eaque, porro sapiente vitae aliquam eligendi inventore maxime excepturi voluptates.
114+
</Fragment>
115+
),
116+
},
117+
{
118+
key: 8,
119+
title: '8 Cool stuff going on',
120+
date: new Date(),
121+
children: (
122+
<Fragment>
123+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum modi iure, corporis ea sequi placeat hic. Ea esse quos dolorum eius,
124+
similique ipsum facilis illum nemo! Obcaecati tenetur in voluptatem.
125+
</Fragment>
126+
),
127+
},
128+
{
129+
key: 9,
130+
title: '9 No more ideas',
131+
date: new Date(),
132+
children: (
133+
<Fragment>
134+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, dolorum ex assumenda voluptate aliquam quo possimus saepe libero
135+
expedita ipsa fugit nesciunt amet sint earum culpa veritatis vero dolor eaque consectetur! Ex quasi nemo provident, minus quis ipsam
136+
sint adipisci ut quisquam culpa ipsa obcaecati quo possimus assumenda. Repellat, obcaecati, accusamus saepe voluptatibus minus nisi
137+
exercitationem maxime non assumenda nulla iusto et facere ullam nostrum temporibus consequuntur ipsa quibusdam, eius possimus.
138+
Porro, nemo harum ipsa totam dignissimos sit voluptatibus dolorem?
139+
</Fragment>
140+
),
141+
},
142+
{
143+
key: 10,
144+
title: '10 Date with image',
145+
date: new Date(),
146+
children: (
147+
<Fragment>
148+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat tempora quia corrupti facere in. Blanditiis quae sunt corrupti
149+
beatae vitae nobis nisi, architecto dolorum explicabo, veniam libero maiores quo nihil distinctio in totam vero quibusdam
150+
voluptatem. Provident tempora quam quos.
151+
</Fragment>
152+
),
153+
},
154+
];
155+
156+
export const Basic: StoryObj<typeof Timeline> = { args: { items, ...defaultTimelineConfig } };

‎src/components/Timeline.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { convertToCssVariable, StyleConfig } from '../models/style';
77

88
export type TimelineProps = {
99
items: TimelineItemsProps;
10-
positioning: Positioning;
10+
positioning?: Positioning;
1111
gap?: number;
1212
offset?: OffsetConfig;
1313
minMarkerGap?: number;
@@ -20,7 +20,7 @@ export type TimelineProps = {
2020
className?: string;
2121
};
2222

23-
const defaultTimelineConfig: Partial<TimelineProps> = {
23+
export const defaultTimelineConfig: Partial<TimelineProps> = {
2424
positioning: 'alternating',
2525
gap: 50,
2626
offset: 50,
@@ -72,7 +72,7 @@ export function Timeline(props: TimelineProps) {
7272
function positionTimelineItems() {
7373
const elements = Array.from(getRefMap().values());
7474

75-
const { left, right } = resolveOffsets(offset ?? 0, positioning);
75+
const { left, right } = resolveOffsets(offset ?? 0, positioning ?? 'alternating');
7676
let leftHeight = left;
7777
let rightHeight = right;
7878

0 commit comments

Comments
 (0)