feat: add react-widget to storybook

CHANGELOG.md

@@ -17,6 +17,7 @@
 - Fix histogram operations with values equal to zero [#113](https://github.com/CartoDB/carto-react/pull/113)
 - Return uniqueIdProperty from useCartoLayerProps hook [#113](https://github.com/CartoDB/carto-react/pull/113)
 - Fix lint-staged for multi package [#117](https://github.com/CartoDB/carto-react/pull/117)
+- Add Widgets from @carto/react-widgets to StoryBook [#120](https://github.com/CartoDB/carto-react/pull/120)
 
 ## 1.0.0-beta14 (2021-02-08)
 

packages/react-ui/package.json

@@ -58,6 +58,8 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "firebase-tools": "^8.17.0",
     "jest": "^26.6.3",
+    "react-redux": "^7.2.2",
+    "@reduxjs/toolkit": "^1.5.0",
     "webpack": "^5.24.2",
     "webpack-cli": "^4.5.0"
   },

packages/react-ui/storybook/.storybook/preview.js

@@ -44,11 +44,19 @@ export const parameters = {
     storySort: {
       order: [
         'Introduction',
-        'Getting Started',
+        'CARTO Theme',
         ['Palette', 'Typography'],
         'Common',
         'Widgets',
-        ['WrapperWidgetUI', 'FormulaWidgetUI', 'CategoryWidgetUI']
+        ['CategoryWidget', 'FormulaWidget', , 'HistogramWidget', 'PieWidget'],
+        'Widgets UI',
+        [
+          'CategoryWidgetUI',
+          'FormulaWidgetUI',
+          'HistogramWidgetUI',
+          'PieWidgetUI',
+          'WrapperWidgetUI'
+        ]
       ]
     }
   }

packages/react-ui/storybook/stories/Introduction.stories.mdx

@@ -2,36 +2,43 @@ import { Meta, Description } from '@storybook/addon-docs/blocks';
 
 <Meta title="Introduction" />
 
-# CARTO for React - UI Components
-This storybook includes the UI Components for CARTO for React (@carto/react-ui).
+# CARTO for React - Widgets and UI Components
+This storybook includes the UI Components (@carto/react-ui) and the powerful Widgets (@carto/react-widgets) for CARTO for React.
 They are based on [Material-UI](https://material-ui.com/), and they include a CARTO theme + custom widgets.
 
 ## Storybook Development
 
 ### How to add a new Story
 Put your `stories.js` files inside the `storybook/stories` folder following the same folder structure as the source files. For example:
-`stories/widgets/FormulaWidgetUI.stories.js` for `src/ui/widgets/FormulaWidgetUI.js` component.
+`stories/widgets/FormulaWidget.stories.js` for `react-widgets/src/widgets/FormulaWidget.js` component.
 
 As long as we are using a decorator to inject the MaterialUI theme, you just need to import and add your component to the `template` of your story.
 ```js
 import React from 'react';
-import FormulaWidgetUI from '../../../src/widgets/FormulaWidgetUI';
+import FormulaWidget from '../../../../react-widgets/src/widgets/FormulaWidget';
 
-const Template = (args) => <FormulaWidgetUI {...args} />;
+const Template = (args) => <FormulaWidget {...args} />;
 ```
 
 Then, export your story and the different variations:
 ```js
 export default {
-  title: 'Widgets/FormulaWidgetUI',
-  component: FormulaWidgetUI,
+  title: 'Widgets/FormulaWidget',
+  component: FormulaWidget,
+  // We use a decorator for mocking the Redux store in Widgets
+  decorators: [(Story) => <Provider store={store}><Story /></Provider>]
 };
 
-export const Empty = Template.bind({});
-Empty.args = {};
+const DEFAULT_PROPS = {
+  id: 'sb-formula-id',
+  title: 'wrapper title',
+  dataSource: 'sb-data-source',
+  column: 'sb-column',
+  operation: 'sum'
+};
 
-export const Text = Template.bind({});
-Text.args = { data: '$1000000'};
+export const Default = Template.bind({});
+Default.args = DEFAULT_PROPS;
 ```
 
 Optionally, you can add some extra controls to your story, but by default Storybook will add automatic controls for your story arguments.

packages/react-ui/storybook/stories/common/Palette.stories.js

@@ -3,7 +3,7 @@ import { Box, Grid, Typography } from '@material-ui/core';
 import { useTheme } from '@material-ui/core/styles';
 
 const options = {
-  title: 'Getting Started/Palette',
+  title: 'CARTO Theme/Palette',
   component: Box,
   argTypes: {
     colorVariant: {

packages/react-ui/storybook/stories/common/Typography.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Typography from '@material-ui/core/Typography';
 
 const options = {
-  title: 'Getting Started/Typography',
+  title: 'CARTO Theme/Typography',
   component: Typography,
   argTypes: {
     variant: {

packages/react-ui/storybook/stories/widgets/CategoryWidget.stories.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import {
+  Title,
+  Subtitle,
+  Primary,
+  ArgsTable,
+  Stories,
+  PRIMARY_STORY
+} from '@storybook/addon-docs/blocks';
+import * as cartoSlice from '../../../../react-redux/src/slices/cartoSlice';
+import { AggregationTypes } from '../../../../react-core/src';
+import CategoryWidget from '../../../../react-widgets/src/widgets/CategoryWidget';
+import { mockAppStoreConfiguration } from './utils';
+
+const store = mockAppStoreConfiguration();
+store.dispatch(
+  cartoSlice.setWidgetLoadingState({ widgetId: 'sb-category-id', isLoading: false })
+);
+
+const mockedData = [...Array(30)].map((_, idx) => ({
+  'sb-column': `Category ${
+    idx < 5 ? '1' : idx < 10 ? '2' : idx < 15 ? '3' : idx < 20 ? '4' : '5'
+  }`,
+  'sb-operation-column': idx * 100
+}));
+store.dispatch(
+  cartoSlice.setViewportFeatures({ sourceId: 'sb-data-source', features: mockedData })
+);
+
+const options = {
+  title: 'Widgets/CategoryWidget',
+  component: CategoryWidget,
+  decorators: [
+    (Story) => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ],
+  argTypes: {
+    operation: {
+      control: {
+        type: 'select',
+        options: Object.values(AggregationTypes)
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+          <Stories />
+        </>
+      )
+    }
+  }
+};
+
+export default options;
+
+const Template = (args) => <CategoryWidget {...args} />;
+
+const DEFAULT_PROPS = {
+  id: 'sb-category-id',
+  title: 'wrapper title',
+  dataSource: 'sb-data-source',
+  column: 'sb-column',
+  operationColumn: 'sb-operation-column',
+  operation: 'sum'
+};
+
+export const Default = Template.bind({});
+Default.args = DEFAULT_PROPS;
+
+export const WithFormatter = Template.bind({});
+WithFormatter.args = { ...DEFAULT_PROPS, formatter: (v) => `$${v}` };
+
+export const WithCustomLabels = Template.bind({});
+WithCustomLabels.args = {
+  ...DEFAULT_PROPS,
+  labels: {
+    'Category 1': 'Cat. 1',
+    'Category 2': 'Cat. 2',
+    'Category 3': 'Cat. 3',
+    'Category 4': 'Cat. 4',
+    'Category 5': 'Cat. 5'
+  }
+};

packages/react-ui/storybook/stories/widgets/FormulaWidget.stories.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import {
+  Title,
+  Subtitle,
+  Primary,
+  ArgsTable,
+  Stories,
+  PRIMARY_STORY
+} from '@storybook/addon-docs/blocks';
+import * as cartoSlice from '../../../../react-redux/src/slices/cartoSlice';
+import { AggregationTypes } from '../../../../react-core/src';
+import FormulaWidget from '../../../../react-widgets/src/widgets/FormulaWidget';
+import { mockAppStoreConfiguration } from './utils';
+
+const store = mockAppStoreConfiguration();
+store.dispatch(
+  cartoSlice.setWidgetLoadingState({ widgetId: 'sb-formula-id', isLoading: false })
+);
+store.dispatch(
+  cartoSlice.setViewportFeatures({
+    sourceId: 'sb-data-source',
+    features: [{ 'sb-column': 5000 }, { 'sb-column': 5000 }]
+  })
+);
+
+const options = {
+  title: 'Widgets/FormulaWidget',
+  component: FormulaWidget,
+  decorators: [
+    (Story) => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ],
+  argTypes: {
+    operation: {
+      control: {
+        type: 'select',
+        options: Object.values(AggregationTypes)
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+          <Stories />
+        </>
+      )
+    }
+  }
+};
+
+export default options;
+
+const Template = (args) => <FormulaWidget {...args} />;
+
+const DEFAULT_PROPS = {
+  id: 'sb-formula-id',
+  title: 'wrapper title',
+  dataSource: 'sb-data-source',
+  column: 'sb-column',
+  operation: 'sum'
+};
+
+export const Default = Template.bind({});
+Default.args = DEFAULT_PROPS;
+
+export const WithFormatter = Template.bind({});
+WithFormatter.args = { ...DEFAULT_PROPS, formatter: (v) => `$${v}` };

packages/react-ui/storybook/stories/widgets/HistogramWidget.stories.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import {
+  Title,
+  Subtitle,
+  Primary,
+  ArgsTable,
+  Stories,
+  PRIMARY_STORY
+} from '@storybook/addon-docs/blocks';
+import * as cartoSlice from '../../../../react-redux/src/slices/cartoSlice';
+import { AggregationTypes } from '../../../../react-core/src';
+import HistogramWidget from '../../../../react-widgets/src/widgets/HistogramWidget';
+import { mockAppStoreConfiguration } from './utils';
+
+const store = mockAppStoreConfiguration();
+store.dispatch(
+  cartoSlice.setWidgetLoadingState({ widgetId: 'sb-histogram-id', isLoading: false })
+);
+
+const mockedData = [...Array(40)].map((_, idx) => ({
+  'sb-column': idx < 10 ? 100 : idx < 25 ? 200 : idx < 33 ? 300 : idx < 35 ? 400 : 500
+}));
+store.dispatch(
+  cartoSlice.setViewportFeatures({ sourceId: 'sb-data-source', features: mockedData })
+);
+
+const options = {
+  title: 'Widgets/HistogramWidget',
+  component: HistogramWidget,
+  decorators: [
+    (Story) => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ],
+  argTypes: {
+    operation: {
+      control: {
+        type: 'select',
+        options: Object.values(AggregationTypes)
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+          <Stories />
+        </>
+      )
+    }
+  }
+};
+
+export default options;
+
+const Template = (args) => <HistogramWidget {...args} />;
+
+const DEFAULT_PROPS = {
+  id: 'sb-histogram-id',
+  title: 'wrapper title',
+  dataSource: 'sb-data-source',
+  column: 'sb-column',
+  ticks: [200, 300, 400, 500],
+  operation: 'count'
+};
+
+export const Default = Template.bind({});
+Default.args = DEFAULT_PROPS;
+
+export const xAxisFormatter = Template.bind({});
+xAxisFormatter.args = { ...DEFAULT_PROPS, xAxisFormatter: (v) => `${v}$` };
+
+export const yAxisFormatter = Template.bind({});
+yAxisFormatter.args = { ...DEFAULT_PROPS, formatter: (v) => `$${v}` };