feat(stream): convert stories to new format

Author: plouc

packages/stream/stories/stream.stories.js packages/stream/stories/stream.stories.tsx

@@ -1,10 +1,18 @@
 import range from 'lodash/range'
 import random from 'lodash/random'
-import { storiesOf } from '@storybook/react'
+import { Meta } from '@storybook/react'
 import { withKnobs, select } from '@storybook/addon-knobs'
+// @ts-ignore
 import { areaCurvePropKeys } from '@nivo/core'
+// @ts-ignore
 import { Stream } from '../src'
 
+export default {
+    component: Stream,
+    title: 'Stream',
+    decorators: [withKnobs],
+} as Meta
+
 const keys = ['Raoul', 'Josiane', 'Marcel', 'René', 'Paul', 'Jacques']
 
 const commonProperties = {
@@ -16,35 +24,31 @@ const commonProperties = {
         keys.reduce((layer, key) => {
             layer[key] = random(10, 200)
             return layer
-        }, {})
+        }, {} as any)
     ),
     animate: true,
 }
 
-const stories = storiesOf('Stream', module)
-
-stories.addDecorator(withKnobs)
-
-stories.add('default', () => <Stream {...commonProperties} />)
+export const Default = () => <Stream {...commonProperties} />
 
 const labelLookup = {
     al: 'Alabama',
     az: 'Arizona',
     nv: 'Nevada',
 }
 
-stories.add('custom label', () => (
+export const CustomLabel = () => (
     <Stream
         {...commonProperties}
         data={range(16).map(() =>
             Object.keys(labelLookup).reduce((layer, key) => {
                 layer[key] = random(10, 200)
                 return layer
-            }, {})
+            }, {} as any)
         )}
         keys={Object.keys(labelLookup)}
         margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
-        label={d => labelLookup[d.id]}
+        label={d => labelLookup[d.id as keyof typeof labelLookup]}
         legends={[
             {
                 anchor: 'bottom-right',
@@ -66,28 +70,28 @@ stories.add('custom label', () => (
             },
         ]}
     />
-))
+)
 
-stories.add('full height (expand offset)', () => (
+export const fullHeight = () => (
     <Stream
         {...commonProperties}
         offsetType="expand"
         curve={select('curve', areaCurvePropKeys, 'catmullRom')}
     />
-))
+)
 
-stories.add('regular stacked chart', () => (
+export const regularStackedChart = () => (
     <Stream
         {...commonProperties}
         offsetType="none"
         axisLeft={{}}
         curve={select('curve', areaCurvePropKeys, 'catmullRom')}
     />
-))
+)
 
-stories.add('custom curve', () => <Stream {...commonProperties} curve="step" />)
+export const CustomCurve = () => <Stream {...commonProperties} curve="step" />
 
-stories.add('formatting values', () => (
+export const formattingValues = () => (
     <Stream
         {...commonProperties}
         valueFormat={value =>
@@ -96,4 +100,4 @@ stories.add('formatting values', () => (
             })} ₽`
         }
     />
-))
+)