chore(calendar): expose in story book with default story (#3710)

* chore(calendar): expose in story book with default story * fix: grammar Co-authored-by: Aleksandr Shumilov <[email protected]> * fix: add link to DatePicker --------- Co-authored-by: Aleksandr Shumilov <[email protected]>
toptal · Jul 11, 2023 · 7ec7c1a · 7ec7c1a
1 parent 47b0d54
commit 7ec7c1a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 0 deletions.
diff --git a/packages/picasso/src/Calendar/Calendar.tsx b/packages/picasso/src/Calendar/Calendar.tsx
@@ -38,20 +38,35 @@ export type CalendarMonthsAmount = 1 | 2
 export interface Props
   extends BaseProps,
     Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur'> {
+  /** Callback invoked when date is selected */
   onChange: (value: DateOrDateRangeType) => void
+  /** Callback invoked when calendar loses focus */
   onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void
+  /** Minimum date that can be selected */
   minDate?: Date
+  /** Maximum date that can be selected */
   maxDate?: Date
+  /** Whether to use range mode */
   range?: boolean
+  /** Selected date or date range */
   value?: DateOrDateRangeType
+  /** Active (visible) month of the calendar that is required for manual entering of a single date */
   activeMonth?: Date
+  /** Custom root renderer */
   renderRoot?: RenderRoot
+  /** Custom month header renderer */
   renderMonthHeader?: RenderMonthHeader
+  /** Custom day renderer */
   renderDay?: RenderDay
+  /** Intervals that should be indicated as disabled */
   disabledIntervals?: CalendarDateRange[]
+  /** Intervals that should be indicated with orange dots */
   indicatedIntervals?: CalendarDateRange[]
+  /** First day of the week */
   weekStartsOn?: WeekStart
+  /** Whether to display footer */
   hasFooter?: boolean
+  /** Number of months to display */
   numberOfMonths?: CalendarMonthsAmount
 }
 

diff --git a/packages/picasso/src/Calendar/story/Default.example.tsx b/packages/picasso/src/Calendar/story/Default.example.tsx
@@ -0,0 +1,11 @@
+import React, { useState } from 'react'
+import type { DateOrDateRangeType } from '@toptal/picasso'
+import { Calendar } from '@toptal/picasso'
+
+const DefaultExample = () => {
+  const [value, setValue] = useState<DateOrDateRangeType>(new Date())
+
+  return <Calendar value={value} onChange={setValue} />
+}
+
+export default DefaultExample
diff --git a/packages/picasso/src/Calendar/story/index.jsx b/packages/picasso/src/Calendar/story/index.jsx
@@ -0,0 +1,18 @@
+import { Calendar } from '../Calendar'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const page = PicassoBook.section('Components').createPage(
+  'Calendar',
+  `Container for displaying data in calendar form. See even more use cases in [DatePicker](/?path=/story/forms-datepicker--datepicker).
+
+
+  ${PicassoBook.createSourceLink(__filename)}
+  `
+)
+
+page.createTabChapter('Props').addComponentDocs({
+  component: Calendar,
+  name: 'Calendar',
+})
+
+page.createChapter().addExample('Calendar/story/Default.example.tsx', 'Default')