Skip to content

Commit ca377dc

Browse files
khatastroffikkhatastroffik
committed
docs: improve storybook introduction page
1 parent dea0d6a commit ca377dc

File tree

1 file changed

+31
-31
lines changed

1 file changed

+31
-31
lines changed

‎src/components/introduction.mdx‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Canvas, Source, Meta, Story } from '@storybook/blocks';
1+
import { Canvas, Source, Meta, Story, Markdown } from '@storybook/blocks';
22
import { DateRenderer } from "./DateRenderer";
33
import { TimeRenderer } from "./TimeRenderer";
44
import { DateTimeRenderer } from "./DateTimeRenderer";
@@ -188,11 +188,11 @@ import banner from '../../docs/johannes-plenio-2QUvkQTBh5s-unsplash.jpg';
188188

189189
<div className="previewoutput">
190190
<DateRenderer value={new Date()} /> &rarr; <QuarterRenderer value={new Date()} /><br />
191-
<DateRenderer value={new Date("2024-12-31T11:11:11.111Z")} /> &rarr; <QuarterRenderer value={new Date("2024-12-31T11:11:11.111Z")} pure /><br />
192-
<DateRenderer value={new Date("2025-01-01T11:11:11.111Z")} /> &rarr; <QuarterRenderer value={new Date("2025-01-01T11:11:11.111Z")} displayYear pure /><br />
193-
<DateRenderer value={new Date("2026-04-28T11:11:11.111Z")} /> &rarr; <QuarterRenderer value={new Date("2026-04-28T11:11:11.111Z")} pure /><br />
194-
<DateRenderer value={new Date("2027-07-31T11:11:11.111Z")} /> &rarr; <QuarterRenderer value={new Date("2027-07-31T11:11:11.111Z")} displayYear pure /><br />
195-
<DateRenderer value={new Date("2027-10-04T11:11:11.111Z")} /> &rarr; <QuarterRenderer value={new Date("2027-10-04T11:11:11.111Z")} displayYear /><br />
191+
<DateRenderer value={new Date("2024-12-31")} /> &rarr; <QuarterRenderer value={new Date("2024-12-31")} pure /><br />
192+
<DateRenderer value={new Date("2025-01-01")} /> &rarr; <QuarterRenderer value={new Date("2025-01-01")} displayYear pure /><br />
193+
<DateRenderer value={new Date("2026-04-28")} /> &rarr; <QuarterRenderer value={new Date("2026-04-28")} pure /><br />
194+
<DateRenderer value={new Date("2027-07-31")} /> &rarr; <QuarterRenderer value={new Date("2027-07-31")} displayYear pure /><br />
195+
<DateRenderer value={new Date("2027-10-04")} /> &rarr; <QuarterRenderer value={new Date("2027-10-04")} displayYear /><br />
196196
</div>
197197
<section className="accordion">
198198
<input type="checkbox" name="collapse4" id="preview4" tabIndex="0" />
@@ -202,29 +202,29 @@ import banner from '../../docs/johannes-plenio-2QUvkQTBh5s-unsplash.jpg';
202202
<div className="content">
203203
<Source code={`
204204
<QuarterRenderer value={new Date()} />
205-
<QuarterRenderer value={new Date("2024-12-31T11:11:11.111Z")} pure />
206-
<QuarterRenderer value={new Date("2025-01-01T11:11:11.111Z")} displayYear pure />
207-
<QuarterRenderer value={new Date("2026-04-28T11:11:11.111Z")} pure />
208-
<QuarterRenderer value={new Date("2027-07-31T11:11:11.111Z")} displayYear pure />
209-
<QuarterRenderer value={new Date("2027-10-04T11:11:11.111Z")} displayYear />
205+
<QuarterRenderer value={new Date("2024-12-31")} pure />
206+
<QuarterRenderer value={new Date("2025-01-01")} displayYear pure />
207+
<QuarterRenderer value={new Date("2026-04-28")} pure />
208+
<QuarterRenderer value={new Date("2027-07-31")} displayYear pure />
209+
<QuarterRenderer value={new Date("2027-10-04")} displayYear />
210210
`} dark />
211211
</div>
212-
<p>Note: the Date value passed as property to the TimeRenderer component should be a **UTC** date</p>
212+
<p>Note: the Date value passed as property to the QuarterRenderer component should be a **UTC** date</p>
213213
</section>
214214

215215
### WeekRenderer
216216

217217
<div className="previewoutput">
218218
<DateRenderer value={new Date()} /> &rarr; <WeekRenderer value={new Date()} /><br />
219-
<DateRenderer value={new Date("2024-10-06T19:40:55.221Z")} /> &rarr; <WeekRenderer value={new Date("2024-10-06T19:40:55.221Z")} pure /><br />
220-
<DateRenderer value={new Date("2025-12-29T11:11:11.111Z")} /> &rarr; <WeekRenderer value={new Date("2025-12-29T11:11:11.111Z")} displayYear pure /><br />
221-
<DateRenderer value={new Date("2024-12-30T11:11:11.111Z")} /> &rarr; <WeekRenderer value={new Date("2024-12-30T11:11:11.111Z")} pure /><br />
222-
<DateRenderer value={new Date("2025-01-01T11:11:11.111Z")} /> &rarr; <WeekRenderer value={new Date("2025-01-01T11:11:11.111Z")} displayYear pure /><br />
223-
<DateRenderer value={new Date("2025-01-01T11:11:11.111Z")} /> &rarr; <WeekRenderer value={new Date("2025-01-01T11:11:11.111Z")} displayYear numberingSystem="tibt" pure /><br />
224-
<DateRenderer value={new Date("2026-12-28T11:11:11.111Z")} /> &rarr; <WeekRenderer value={new Date("2026-12-28T11:11:11.111Z")} displayYear pure /><br />
225-
<DateRenderer value={new Date("2027-01-03T11:11:11.111Z")} /> &rarr; <WeekRenderer value={new Date("2027-01-03T11:11:11.111Z")} displayYear pure /><br />
226-
<DateRenderer value={new Date("2027-01-04T11:11:11.111Z")} /> &rarr; <WeekRenderer value={new Date("2027-01-04T11:11:11.111Z")} displayYear pure /><br />
227-
<DateRenderer value={new Date("2025-12-29T11:11:11.111Z")} /> &rarr; <WeekRenderer value={new Date("2025-12-29T11:11:11.111Z")} displayYear pure /><br />
219+
<DateRenderer value={new Date("2024-10-06")} /> &rarr; <WeekRenderer value={new Date("2024-10-06")} pure /><br />
220+
<DateRenderer value={new Date("2025-12-29")} /> &rarr; <WeekRenderer value={new Date("2025-12-29")} displayYear pure /><br />
221+
<DateRenderer value={new Date("2024-12-30")} /> &rarr; <WeekRenderer value={new Date("2024-12-30")} pure /><br />
222+
<DateRenderer value={new Date("2025-01-01")} /> &rarr; <WeekRenderer value={new Date("2025-01-01")} displayYear pure /><br />
223+
<DateRenderer value={new Date("2025-01-01")} /> &rarr; <WeekRenderer value={new Date("2025-01-01")} displayYear numberingSystem="tibt" pure /><br />
224+
<DateRenderer value={new Date("2026-12-28")} /> &rarr; <WeekRenderer value={new Date("2026-12-28")} displayYear pure /><br />
225+
<DateRenderer value={new Date("2027-01-03")} /> &rarr; <WeekRenderer value={new Date("2027-01-03")} displayYear pure /><br />
226+
<DateRenderer value={new Date("2027-01-04")} /> &rarr; <WeekRenderer value={new Date("2027-01-04")} displayYear pure /><br />
227+
<DateRenderer value={new Date("2025-12-29")} /> &rarr; <WeekRenderer value={new Date("2025-12-29")} displayYear pure /><br />
228228
</div>
229229
<section className="accordion">
230230
<input type="checkbox" name="collapse5" id="preview5" tabIndex="0" />
@@ -234,18 +234,18 @@ import banner from '../../docs/johannes-plenio-2QUvkQTBh5s-unsplash.jpg';
234234
<div className="content">
235235
<Source code={`
236236
<WeekRenderer value={new Date()} />
237-
<WeekRenderer value={new Date("2024-10-06T19:40:55.221Z")} pure />
238-
<WeekRenderer value={new Date("2025-12-29T11:11:11.111Z")} displayYear pure />
239-
<WeekRenderer value={new Date("2024-12-30T11:11:11.111Z")} pure />
240-
<WeekRenderer value={new Date("2025-01-01T11:11:11.111Z")} displayYear pure />
241-
<WeekRenderer value={new Date("2025-01-01T11:11:11.111Z")} displayYear numberingSystem="tibt" pure />
242-
<WeekRenderer value={new Date("2026-12-28T11:11:11.111Z")} displayYear pure />
243-
<WeekRenderer value={new Date("2027-01-03T11:11:11.111Z")} displayYear pure />
244-
<WeekRenderer value={new Date("2027-01-04T11:11:11.111Z")} displayYear pure />
245-
<WeekRenderer value={new Date("2025-12-29T11:11:11.111Z")} displayYear pure />
237+
<WeekRenderer value={new Date("2024-10-06")} pure />
238+
<WeekRenderer value={new Date("2025-12-29")} displayYear pure />
239+
<WeekRenderer value={new Date("2024-12-30")} pure />
240+
<WeekRenderer value={new Date("2025-01-01")} displayYear pure />
241+
<WeekRenderer value={new Date("2025-01-01")} displayYear numberingSystem="tibt" pure />
242+
<WeekRenderer value={new Date("2026-12-28")} displayYear pure />
243+
<WeekRenderer value={new Date("2027-01-03")} displayYear pure />
244+
<WeekRenderer value={new Date("2027-01-04")} displayYear pure />
245+
<WeekRenderer value={new Date("2025-12-29")} displayYear pure />
246246
`} dark />
247247
</div>
248-
<p>Note: the Date value passed as property to the TimeRenderer component should be a **UTC** date</p>
248+
<p>Note: the Date value passed as property to the WeekRenderer component should be a **UTC** date</p>
249249
</section>
250250

251251
<hr />

0 commit comments

Comments
 (0)