From be75361e4be3e2fa90d557e9e3913e1b95baf9b9 Mon Sep 17 00:00:00 2001 From: Jonathan Gruber Date: Fri, 24 Nov 2023 19:57:38 +0100 Subject: [PATCH] Rearrange and rename stories --- src/component/ActivityCalendar.stories.tsx | 270 +++++++++++---------- 1 file changed, 146 insertions(+), 124 deletions(-) diff --git a/src/component/ActivityCalendar.stories.tsx b/src/component/ActivityCalendar.stories.tsx index d35e939..1cf86f5 100644 --- a/src/component/ActivityCalendar.stories.tsx +++ b/src/component/ActivityCalendar.stories.tsx @@ -1,25 +1,25 @@ -import { Tooltip as MuiTooltip } from '@mui/material'; -import LinkTo from '@storybook/addon-links/react'; -import { Source as StorybookSource } from '@storybook/blocks'; -import { Meta, StoryObj } from '@storybook/react'; -import React, { cloneElement } from 'react'; -import { Tooltip as ReactTooltip } from 'react-tooltip'; -import 'react-tooltip/dist/react-tooltip.css'; -import { useDarkMode } from 'storybook-dark-mode'; +import { Tooltip as MuiTooltip } from "@mui/material"; +import LinkTo from "@storybook/addon-links/react"; +import { Source as StorybookSource } from "@storybook/blocks"; +import { Meta, StoryObj } from "@storybook/react"; +import React, { cloneElement } from "react"; +import { Tooltip as ReactTooltip } from "react-tooltip"; +import "react-tooltip/dist/react-tooltip.css"; +import { useDarkMode } from "storybook-dark-mode"; -import Container from '../../.storybook/components/Container'; -import exampleCustomized from '../../examples/customization?raw'; -import exampleEventHandlersInterface from '../../examples/event-handlers-type?raw'; -import exampleEventHandlers from '../../examples/event-handlers?raw'; -import exampleLabelsShape from '../../examples/labels-shape?raw'; -import exampleLabels from '../../examples/labels?raw'; -import exampleThemeExplicit from '../../examples/themes-explicit?raw'; -import exampleTheme from '../../examples/themes?raw'; -import exampleTooltipsMui from '../../examples/tooltips-mui?raw'; -import exampleTooltipsReact from '../../examples/tooltips-react?raw'; -import { Theme } from '../types'; -import { generateData } from '../utils/calendar'; -import ActivityCalendar, { Props } from './ActivityCalendar'; +import Container from "../../.storybook/components/Container"; +import exampleCustomization from "../../examples/customization?raw"; +import exampleEventHandlersInterface from "../../examples/event-handlers-type?raw"; +import exampleEventHandlers from "../../examples/event-handlers?raw"; +import exampleLabelsShape from "../../examples/labels-shape?raw"; +import exampleLabels from "../../examples/labels?raw"; +import exampleThemeExplicit from "../../examples/themes-explicit?raw"; +import exampleTheme from "../../examples/themes?raw"; +import exampleTooltipsMui from "../../examples/tooltips-mui?raw"; +import exampleTooltipsReact from "../../examples/tooltips-react?raw"; +import { Theme } from "../types"; +import { generateData } from "../utils/calendar"; +import ActivityCalendar, { Props } from "./ActivityCalendar"; type Story = StoryObj; @@ -130,7 +130,7 @@ export const Loading: Story = { }, }; -export const WithSpecificLevelRange: Story = { +export const ActivityLevels: Story = { args: { ...defaultProps, maxLevel: 2, @@ -149,9 +149,10 @@ export const WithSpecificLevelRange: Story = { maxLevel {' '} - property to set the maximum activity level (zero indexed). -
- If set, each passed activity level must be in the interval from 0 to maxLevel. + prop to control the number of activity levels. This value is zero indexed (0 represents no + activity), so for example a maxLevel of 2 will result in 3 levels as + above. If set, each activity level must be in the interval from 0 to{' '} + maxLevel.

), @@ -164,30 +165,71 @@ export const WithSpecificLevelRange: Story = { }, }; -export const WithSpecificDateRange: Story = { +export const DateRanges: Story = { args: defaultProps, - render: args => ( - - ), parameters: { - docs: { - source: { - code: '', - }, - }, + // maxLevel cannot be used for static data + controls: { exclude: ['maxLevel'] }, }, + render: args => ( + <> + +
+
+ +
+
+ + + ), }; -export const WithTheme: Story = { +export const ColorThemes: Story = { args: { ...defaultProps, theme: { @@ -211,14 +253,23 @@ export const WithTheme: Story = { style={{ margin: '2rem 0' }} />

- Use the theme prop to set the calendar colors for the light and dark system{' '} + Use the{' '} + + theme + {' '} + prop to configure the calendar colors for the light and dark system{' '} color scheme. Define each color scale{' '} - + explicitly {' '} - with five colors or pass exactly two colors (the lowest and highest intensity) to calculate - a single-hue scale. Colors can be specified in any valid CSS format. + by settings all colors (5 per default) or pass exactly two colors (the lowest and highest + intensity) to calculate a single-hue scale. For explicit themes the color count must match + the number of activity levels, which is controlled by the{' '} + + maxLevel + {' '} + prop. Colors can be specified in any valid CSS format.

The colors for at least one scheme must be set. If undefined, the default theme is used. By @@ -234,7 +285,7 @@ export const WithTheme: Story = { ), }; -export const WithExplicitTheme: Story = { +export const ExplicitThemes: Story = { args: { ...defaultProps, theme: explicitTheme, @@ -254,7 +305,7 @@ export const WithExplicitTheme: Story = {

See the{' '} - + WithTheme {' '} story for details how to use the theme prop. @@ -268,7 +319,7 @@ export const WithExplicitTheme: Story = { ), }; -export const WithCustomizedLook: Story = { +export const Customization: Story = { args: { ...defaultProps, blockSize: 14, @@ -283,73 +334,49 @@ export const WithCustomizedLook: Story = { controls: { exclude: ['maxLevel'] }, docs: { source: { - code: exampleCustomized, + code: exampleCustomization, }, }, }, }; -export const WithMondayAsWeekStart: Story = { +export const EventHandlers: Story = { args: { ...defaultProps, - weekStart: 1, - }, - render: args => , - parameters: { - docs: { - source: { - code: '', - }, + eventHandlers: { + onClick: () => activity => alert(JSON.stringify(activity)), + onMouseEnter: () => () => console.log('on mouse enter'), }, }, -}; - -export const WithLittleData: Story = { - args: { - ...defaultProps, - data: [ - { - date: '2023-06-14', - count: 2, - level: 1, - }, - { - date: '2023-06-22', - count: 16, - level: 3, - }, - { - date: '2023-07-05', - count: 3, - level: 1, - }, - { - date: '2023-07-17', - count: 10, - level: 2, - }, - ], - }, - render: args => , -}; - -export const WithNarrowScreen: Story = { - args: defaultProps, parameters: { docs: { source: { - code: '', + code: exampleEventHandlers, }, }, }, render: args => ( -

- -
+ +

Event Handlers

+

+ You can register event handlers for the SVG <rect/> elements that are + used to render the calendar days. This way you can control the behaviour on click, hover, + etc. All event listeners have the following signature, so you can use the activity data of + the block inside the handler: +

+ +

Click on any block below to see it in action:

+ + + ), }; -export const WithTooltips: Story = { +export const Tooltips: Story = { args: defaultProps, parameters: { docs: { @@ -363,7 +390,7 @@ export const WithTooltips: Story = {

Tooltip Examples

To add a 3rd party tooltip component to the calendar you can use the{' '} - renderBlock property. + renderBlock prop.

Material UI @@ -422,7 +449,7 @@ export const WithoutLabels: Story = { }, }; -export const WithWeekdayLabels: Story = { +export const WeekdayLabels: Story = { args: { ...defaultProps, showWeekdayLabels: true, @@ -437,7 +464,7 @@ export const WithWeekdayLabels: Story = { }, }; -export const WithLocalizedLabels: Story = { +export const LocalizedLabels: Story = { args: { ...defaultProps, showWeekdayLabels: true, @@ -472,39 +499,34 @@ export const WithLocalizedLabels: Story = { ), }; -export const EventHandlers: Story = { +export const MondayAsWeekStart: Story = { args: { ...defaultProps, - eventHandlers: { - onClick: () => activity => alert(JSON.stringify(activity)), - onMouseEnter: () => () => console.log('on mouse enter'), + weekStart: 1, + }, + render: args => , + parameters: { + docs: { + source: { + code: '', + }, }, }, +}; + +export const NarrowScreens: Story = { + args: defaultProps, parameters: { docs: { source: { - code: exampleEventHandlers, + code: '', }, }, }, render: args => ( - -

Event Handlers

-

- You can register event handlers for the SVG <rect/> elements that are - used to render the calendar days. This way you can control the behaviour on click, hover, - etc. All event listeners have the following signature, so you can use the activity data of - the block inside the handler: -

- -

Click on any block below to see it in action:

- - - +
+ +
), };