Storybook documentation and fixes (#629)

CHANGELOG.md

@@ -2,12 +2,14 @@
 
 ## Not released
 
+- Storybook documentation and fixes [#629](https://github.com/CartoDB/carto-react/pull/629)
+
 ## 2.0
 
 ### 2.0.0 (2023-04-05)
 
 - Bump to latest @deck.gl 8.9.6, @emotion and @mui packages [#626](https://github.com/CartoDB/carto-react/pull/626)
-- Add missing form stories [#627](https://github.com/CartoDB/carto-react/pull/627/files)
+- Add missing form stories [#627](https://github.com/CartoDB/carto-react/pull/627)
 
 ### 2.0.0-beta.8 (2023-04-04)
 

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

@@ -11,12 +11,31 @@ import Storybook from '../assets/storybook.svg';
 # CARTO for React - Widgets and UI Components
 
 This storybook includes the UI Components (@carto/react-ui) for CARTO for React.
-They are based on [Mui](https://mui.com/), and they include a CARTO theme + custom widgets.
+
+## Tech stack
+
+The components are based on [Mui v5](https://mui.com/), and they include a CARTO theme + custom components and widgets.
+
+We have currently support for `React` 17 (and we're working on having it for v18 asap)
 
 ## Library version
 
 <p className='text-tag'>{version}</p>
 
+## Development state
+
+We have a label in the story of each component that indicates its maturity and recommended use:
+
+**Recommended use**
+- `Validated`: Fully validated and ready-to-use implementation of a component
+- `Needs update`: Needs an update due to some design changes, but it can be used in this state
+- `Deprecated`: Legacy component that might be currently in use, but it shouldn't be used in new projects
+
+**Not supported**
+- `In development`: Work in progress or experimental. Not ready to use in production yet
+- `Ready to review`: Ready to review and validation by CARTO design team and other stakeholders, prior to be consider fully done (it can be considered as a 2nd phase of `In development`).
+
+
 ## Resources
 
 <div className='link-list'>

packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js

@@ -63,7 +63,7 @@ const options = {
 };
 export default options;
 
-const Toggle = ({ label, ...rest }) => {
+const Toggle = ({ label, exclusive, ...rest }) => {
   const [selected, setSelected] = React.useState(false);
 
   return (
@@ -81,7 +81,7 @@ const Toggle = ({ label, ...rest }) => {
   );
 };
 
-const ToggleRow = ({ label, divider, fullWidth, ...rest }) => {
+const ToggleRow = ({ label, divider, fullWidth, exclusive, ...rest }) => {
   const [selected, setSelected] = React.useState(() => ['AlignLeft']);
 
   const handleAlignment = (event, newAlignment) => {
@@ -94,6 +94,7 @@ const ToggleRow = ({ label, divider, fullWidth, ...rest }) => {
       value={selected}
       onChange={handleAlignment}
       fullWidth={fullWidth}
+      exclusive={exclusive}
       aria-label='text alignment'
     >
       <ToggleButton value='AlignLeft' aria-label='AlignLeft'>
@@ -113,7 +114,7 @@ const ToggleRow = ({ label, divider, fullWidth, ...rest }) => {
   );
 };
 
-const IconTemplate = (args) => {
+const IconTemplate = ({ exclusive, ...args }) => {
   return (
     <Grid container alignItems='center' spacing={4}>
       <Grid item>
@@ -129,7 +130,7 @@ const IconTemplate = (args) => {
   );
 };
 
-const TextTemplate = (args) => {
+const TextTemplate = ({ exclusive, ...args }) => {
   return (
     <Grid container alignItems='center' spacing={4}>
       <Grid item>
@@ -142,7 +143,7 @@ const TextTemplate = (args) => {
   );
 };
 
-const GroupTemplate = (args) => {
+const GroupTemplate = ({ exclusive, ...args }) => {
   return (
     <Grid container direction='column' spacing={4}>
       <Grid item>
@@ -155,7 +156,7 @@ const GroupTemplate = (args) => {
   );
 };
 
-const VerticalGroupTemplate = (args) => {
+const VerticalGroupTemplate = ({ exclusive, ...args }) => {
   return (
     <Grid container spacing={4}>
       <Grid item>
@@ -168,20 +169,20 @@ const VerticalGroupTemplate = (args) => {
   );
 };
 
-const DividedTemplate = (args) => {
+const DividedTemplate = ({ exclusive, ...args }) => {
   return (
     <Grid container direction='column' spacing={4}>
       <Grid item>
-        <ToggleRow divider />
+        <ToggleRow {...args} divider />
       </Grid>
       <Grid item>
-        <ToggleRow divider size='small' />
+        <ToggleRow {...args} divider size='small' />
       </Grid>
     </Grid>
   );
 };
 
-const BehaviorTemplate = (args) => {
+const BehaviorTemplate = ({ exclusive, ...args }) => {
   const [selected, setSelected] = React.useState(() => ['opt1']);
   const [selected2, setSelected2] = React.useState(() => ['opt1']);
 
@@ -198,7 +199,12 @@ const BehaviorTemplate = (args) => {
         <Typography variant='body1'>{'Hug Text'}</Typography>
         <Typography variant='body2'>{'Default behavior'}</Typography>
 
-        <ToggleButtonGroup {...args} value={selected} onChange={handleAlignment}>
+        <ToggleButtonGroup
+          {...args}
+          value={selected}
+          onChange={handleAlignment}
+          exclusive={exclusive}
+        >
           <ToggleButton value='opt1'>{'Opt 1'}</ToggleButton>
           <ToggleButton value='opt2'>{'Opt 2'}</ToggleButton>
           <ToggleButton value='opt3'>{'Option 3'}</ToggleButton>
@@ -214,6 +220,7 @@ const BehaviorTemplate = (args) => {
           value={selected2}
           onChange={handleAlignment2}
           fullWidth
+          exclusive={exclusive}
           style={{ width: '496px' }}
         >
           <ToggleButton value='opt1'>{'Opt 1'}</ToggleButton>

packages/react-ui/storybook/stories/organisms/Tabs.stories.js

@@ -235,7 +235,7 @@ const TemplateVertical = ({ label, wrapped, disabled, ...args }) => {
   );
 };
 
-const BehaviorTemplate = (args) => {
+const BehaviorTemplate = ({ wrapped, ...args }) => {
   const [value, setValue] = React.useState(0);
   const [value2, setValue2] = React.useState(0);
 
@@ -253,9 +253,9 @@ const BehaviorTemplate = (args) => {
         <Typography variant='body2'>{'Default behavior'}</Typography>
         <Box style={{ width: '100%' }}>
           <Tabs {...args} value={value} onChange={handleChange} aria-label='tabs example'>
-            <Tab label='Extra Long Label' icon={<MapOutlined />} />
-            <Tab label='Label' icon={<LayersOutlined />} />
-            <Tab label='Long Label' icon={<LocalOfferOutlined />} />
+            <Tab label='Extra Long Label' icon={<MapOutlined />} wrapped={wrapped} />
+            <Tab label='Label' icon={<LayersOutlined />} wrapped={wrapped} />
+            <Tab label='Long Label' icon={<LocalOfferOutlined />} wrapped={wrapped} />
           </Tabs>
         </Box>
       </Grid>
@@ -274,9 +274,9 @@ const BehaviorTemplate = (args) => {
             aria-label='tabs example'
             variant='fullWidth'
           >
-            <Tab label='Extra Long Label' icon={<MapOutlined />} />
-            <Tab label='Label' icon={<LayersOutlined />} />
-            <Tab label='Long Label' icon={<LocalOfferOutlined />} />
+            <Tab label='Extra Long Label' icon={<MapOutlined />} wrapped={wrapped} />
+            <Tab label='Label' icon={<LayersOutlined />} wrapped={wrapped} />
+            <Tab label='Long Label' icon={<LocalOfferOutlined />} wrapped={wrapped} />
           </Tabs>
         </Box>
       </Grid>

packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import LegendWidgetUI from '../../../src/widgets/legend/LegendWidgetUI';
+import CartoIcon from '../../assets/carto-symbol.svg';
 
 const options = {
   title: 'Organisms/Widgets/LegendWidgetUI',
@@ -181,9 +182,9 @@ const LegendIconTemplate = () => {
         type: 'icon',
         labels: ['Icon 1', 'Icon 2', 'Icon 3'],
         icons: [
-          'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fnolan%2FMaps%2Fmarker1600.png&f=1&nofb=1',
-          'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fnolan%2FMaps%2Fmarker1600.png&f=1&nofb=1',
-          'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fnolan%2FMaps%2Fmarker1600.png&f=1&nofb=1'
+          '/static/media/storybook/assets/carto-symbol.svg',
+          '/static/media/storybook/assets/carto-symbol.svg',
+          '/static/media/storybook/assets/carto-symbol.svg'
         ]
       }
     }