chore(Calendar): add stories (#3711)

* chore(Calendar): add stories

* fix: texts and format

* fix: flaky tests

* fix: slight change to default dates

packages/picasso/src/Calendar/story/Default.example.tsx

@@ -3,7 +3,9 @@ import type { DateOrDateRangeType } from '@toptal/picasso'
 import { Calendar } from '@toptal/picasso'
 
 const DefaultExample = () => {
-  const [value, setValue] = useState<DateOrDateRangeType>(new Date())
+  const [value, setValue] = useState<DateOrDateRangeType>(
+    new Date('2021-07-09')
+  )
 
   return <Calendar value={value} onChange={setValue} />
 }

packages/picasso/src/Calendar/story/Range.example.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Calendar } from '@toptal/picasso'
+import { noop } from '@toptal/picasso/utils'
+
+const RangeExample = () => {
+  return (
+    <Calendar
+      value={[new Date('2021-07-11'), new Date('2021-07-18')]}
+      range
+      onChange={noop}
+    />
+  )
+}
+
+export default RangeExample

packages/picasso/src/Calendar/story/WithCustomDayRendering.example.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Calendar, Tooltip } from '@toptal/picasso'
+import { noop } from '@toptal/picasso/utils'
+
+const WithCustomDayRenderingExample = () => {
+  return (
+    <Calendar
+      value={new Date('2021-07-11')}
+      onChange={noop}
+      renderDay={({ children }) => {
+        return <Tooltip content='Message in tooltip'>{children}</Tooltip>
+      }}
+    />
+  )
+}
+
+export default WithCustomDayRenderingExample

packages/picasso/src/Calendar/story/WithDisabledIntervals.example.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Calendar } from '@toptal/picasso'
+import { noop } from '@toptal/picasso/utils'
+
+const WithDisabledIntervalsExample = () => {
+  return (
+    <Calendar
+      activeMonth={new Date('2021-07-05')}
+      onChange={noop}
+      disabledIntervals={[
+        { start: new Date('2021-07-11'), end: new Date('2021-07-14') },
+        { start: new Date('2021-07-28'), end: new Date('2021-07-30') },
+      ]}
+    />
+  )
+}
+
+export default WithDisabledIntervalsExample

packages/picasso/src/Calendar/story/WithIndicatedIntervals.example.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Calendar } from '@toptal/picasso'
+import { noop } from '@toptal/picasso/utils'
+
+const WithIndicatedIntervalsExample = () => {
+  return (
+    <Calendar
+      activeMonth={new Date('2021-07-05')}
+      onChange={noop}
+      indicatedIntervals={[
+        { start: new Date('2021-07-11'), end: new Date('2021-07-14') },
+        { start: new Date('2021-07-28'), end: new Date('2021-07-30') },
+      ]}
+    />
+  )
+}
+
+export default WithIndicatedIntervalsExample

packages/picasso/src/Calendar/story/WithSelectableDaysLimit.example.tsx

@@ -0,0 +1,20 @@
+import React, { useState } from 'react'
+import type { DateOrDateRangeType } from '@toptal/picasso'
+import { Calendar } from '@toptal/picasso'
+
+const WithSelectableDaysLimitExample = () => {
+  const [value, setValue] = useState<DateOrDateRangeType>(
+    new Date('2021-07-09')
+  )
+
+  return (
+    <Calendar
+      value={value}
+      onChange={setValue}
+      minDate={new Date('2021-07-08')}
+      maxDate={new Date('2021-07-15')}
+    />
+  )
+}
+
+export default WithSelectableDaysLimitExample

packages/picasso/src/Calendar/story/WithTwoMonths.example.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { Calendar } from '@toptal/picasso'
+import { noop } from '@toptal/picasso/utils'
+
+const WithTwoMonthsExample = () => {
+  return <Calendar onChange={noop} range numberOfMonths={2} />
+}
+
+export default WithTwoMonthsExample

packages/picasso/src/Calendar/story/WithWeekStartsOnSunday.example.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { Calendar } from '@toptal/picasso'
+import { noop } from '@toptal/picasso/utils'
+
+const WithWeekStartsOnSundayExample = () => {
+  return <Calendar onChange={noop} weekStartsOn={0} />
+}
+
+export default WithWeekStartsOnSundayExample

packages/picasso/src/Calendar/story/index.jsx

@@ -15,4 +15,30 @@ page.createTabChapter('Props').addComponentDocs({
   name: 'Calendar',
 })
 
-page.createChapter().addExample('Calendar/story/Default.example.tsx', 'Default')
+page
+  .createChapter()
+  .addExample('Calendar/story/Default.example.tsx', 'Default')
+  .addExample(
+    'Calendar/story/WithSelectableDaysLimit.example.tsx',
+    'With selectable days limit'
+  )
+  .addExample('Calendar/story/Range.example.tsx', 'Range')
+  .addExample('Calendar/story/WithCustomDayRendering.example.tsx', {
+    title: 'With custom day rendering',
+    description: 'Hover over the days to see a tooltip',
+    takeScreenshot: false,
+  })
+  .addExample(
+    'Calendar/story/WithDisabledIntervals.example.tsx',
+    'With disabled intervals'
+  )
+  .addExample(
+    'Calendar/story/WithIndicatedIntervals.example.tsx',
+    'With indicated intervals'
+  )
+  .addExample('Calendar/story/WithTwoMonths.example.tsx', 'With two months')
+  .addExample('Calendar/story/WithWeekStartsOnSunday.example.tsx', {
+    title: 'With week starts on Sunday',
+    description:
+      'Calendars that start on Sunday, which you’ll more often see in the US, use an old-fashioned notation based on Christianity. Which makes the day that Christians go to church the first day of the week.',
+  })