@platformatic/ui-components 0.3.6 → 0.5.0

package/src/stories/Modal.stories.jsx

@@ -4,7 +4,17 @@ import Button from '../components/Button'
 import BorderedBox from '../components/BorderedBox'
 import DropDown from '../components/DropDown'
 import HorizontalSeparator from '../components/HorizontalSeparator'
-import { FULL_WIDTH, MAIN_DARK_BLUE, MAIN_GREEN, MODAL_COVER, MODAL_FULL_DARK, MODAL_FULL_LIGHT, MODAL_LAYOUTS, MODAL_POPUP_V2, MODAL_SIZES } from '../components/constants'
+import {
+  FULL_WIDTH,
+  MAIN_DARK_BLUE,
+  MAIN_GREEN,
+  MODAL_COVER,
+  MODAL_FULL_DARK,
+  MODAL_FULL_LIGHT,
+  MODAL_LAYOUTS,
+  MODAL_POPUP_V2,
+  MODAL_SIZES
+} from '../components/constants'
 export default {
   title: 'Platformatic/Modal',
   component: Modal,
@@ -33,14 +43,32 @@ const Template = (args) => {
   return (
     <main style={{ height: '1440px', overflow: 'scroll' }}>
       <BorderedBox>This Is another Content</BorderedBox>
-      <Button color={MAIN_GREEN} backgroundColor={MAIN_DARK_BLUE} onClick={() => setIsOpen(true)} label='Open Modal' />
-      {isOpen && <Modal setIsOpen={setIsOpen} {...rest}>{text}</Modal>}
+      <Button
+        color={MAIN_GREEN}
+        backgroundColor={MAIN_DARK_BLUE}
+        onClick={() => setIsOpen(true)}
+        label='Open Modal'
+      />
+      {isOpen && (
+        <Modal setIsOpen={setIsOpen} {...rest}>
+          {text}
+        </Modal>
+      )}
 
       <BorderedBox style={{ position: 'relative' }}>
         <p>This Is another Component with Modal inside</p>
 
-        <Button color={MAIN_GREEN} backgroundColor={MAIN_DARK_BLUE} onClick={() => setIsOpenInside(true)} label='Open Modal Inside' />
-        {isOpenInside && <Modal setIsOpen={setIsOpenInside} {...rest}>{text}</Modal>}
+        <Button
+          color={MAIN_GREEN}
+          backgroundColor={MAIN_DARK_BLUE}
+          onClick={() => setIsOpenInside(true)}
+          label='Open Modal Inside'
+        />
+        {isOpenInside && (
+          <Modal setIsOpen={setIsOpenInside} {...rest}>
+            {text}
+          </Modal>
+        )}
       </BorderedBox>
     </main>
   )
@@ -49,7 +77,11 @@ const Template = (args) => {
 const ContentThatLoads = () => {
   const [content, setContent] = useState(null)
   setTimeout(() => {
-    setContent(<div className='mt-4'><BorderedBox>This is a Future Component</BorderedBox></div>)
+    setContent(
+      <div className='mt-4'>
+        <BorderedBox>This is a Future Component</BorderedBox>
+      </div>
+    )
   }, 1000)
 
   return content
@@ -75,14 +107,26 @@ const MenuTemplate = () => {
   const dropDownArgs = {
     header: 'My Menu',
     items: [
-      <span className='hover:cursor-pointer' key='2' onClick={() => setIsOpen(true)}>Show Modal</span>
+      <span
+        className='hover:cursor-pointer'
+        key='2'
+        onClick={() => setIsOpen(true)}
+      >
+        Show Modal
+      </span>
     ]
   }
   return (
     <div>
-      <div className='text-white'><DropDown {...dropDownArgs} /></div>
+      <div className='text-white'>
+        <DropDown {...dropDownArgs} />
+      </div>
       <HorizontalSeparator />
-      {isOpen && <Modal setIsOpen={setIsOpen} title='Modal Title'>Hello world!</Modal>}
+      {isOpen && (
+        <Modal setIsOpen={setIsOpen} title='Modal Title'>
+          Hello world!
+        </Modal>
+      )}
       <ContentThatLoads />
     </div>
   )
@@ -115,15 +159,21 @@ const NestedModalsTemplate = () => {
 
   return (
     <main style={{ height: '1440px', overflow: 'scroll' }}>
-      <Button color={MAIN_GREEN} backgroundColor={MAIN_DARK_BLUE} onClick={() => setIsOpen1(true)} label='Open 1st Modal' />
+      <Button
+        color={MAIN_GREEN}
+        backgroundColor={MAIN_DARK_BLUE}
+        onClick={() => setIsOpen1(true)}
+        label='Open 1st Modal'
+      />
       {isOpen1 && (
-        <Modal
-          setIsOpen={setIsOpen1}
-          title='Fist One'
-          layout={MODAL_POPUP_V2}
-        >
+        <Modal setIsOpen={setIsOpen1} title='Fist One' layout={MODAL_POPUP_V2}>
           <p style={{ color: 'white' }}>This Is the first</p>
-          <Button color={MAIN_GREEN} backgroundColor={MAIN_DARK_BLUE} onClick={() => setIsOpen2(true)} label='Open 2nd Modal' />
+          <Button
+            color={MAIN_GREEN}
+            backgroundColor={MAIN_DARK_BLUE}
+            onClick={() => setIsOpen2(true)}
+            label='Open 2nd Modal'
+          />
           {isOpen2 && (
             <Modal
               setIsOpen={setIsOpen2}
@@ -131,7 +181,12 @@ const NestedModalsTemplate = () => {
               layout={MODAL_POPUP_V2}
             >
               <p style={{ color: 'white' }}>This Is the second</p>
-              <Button color={MAIN_GREEN} backgroundColor={MAIN_DARK_BLUE} onClick={() => setIsOpen3(true)} label='Open 3rd Modal' />
+              <Button
+                color={MAIN_GREEN}
+                backgroundColor={MAIN_DARK_BLUE}
+                onClick={() => setIsOpen3(true)}
+                label='Open 3rd Modal'
+              />
               {isOpen3 && (
                 <Modal
                   setIsOpen={setIsOpen3}

package/src/stories/ModalDirectional.stories.jsx

@@ -32,9 +32,19 @@ const Template = (args) => {
   return (
     <div style={divStyle}>
       <div>
-        <Button type='button' color={MAIN_GREEN} backgroundColor={MAIN_DARK_BLUE} onClick={() => setIsOpen(true)} label='Open Modal' />
+        <Button
+          type='button'
+          color={MAIN_GREEN}
+          backgroundColor={MAIN_DARK_BLUE}
+          onClick={() => setIsOpen(true)}
+          label='Open Modal'
+        />
       </div>
-      {isOpen && <ModalDirectional setIsOpen={setIsOpen} {...rest}>{text}</ModalDirectional>}
+      {isOpen && (
+        <ModalDirectional setIsOpen={setIsOpen} {...rest}>
+          {text}
+        </ModalDirectional>
+      )}
     </div>
   )
 }

package/src/stories/ModalStepsForward.stories.jsx

@@ -1,7 +1,12 @@
 import React, { useState } from 'react'
 import ModalStepsForward from '../components/ModalStepsForward'
 import Button from '../components/Button'
-import { MAIN_DARK_BLUE, MAIN_GREEN, MODAL_LAYOUTS, MODAL_SIZES } from '../components/constants'
+import {
+  MAIN_DARK_BLUE,
+  MAIN_GREEN,
+  MODAL_LAYOUTS,
+  MODAL_SIZES
+} from '../components/constants'
 export default {
   title: 'Platformatic/ModalStepsForward',
   component: ModalStepsForward,
@@ -28,8 +33,18 @@ const Template = (args) => {
   const { text, ...rest } = args
   return (
     <main>
-      <Button color={MAIN_GREEN} backgroundColor={MAIN_DARK_BLUE} onClick={() => setIsOpen(true)} label='Open Modal' bold />
-      {isOpen && <ModalStepsForward setIsOpen={setIsOpen} {...rest}>{text}</ModalStepsForward>}
+      <Button
+        color={MAIN_GREEN}
+        backgroundColor={MAIN_DARK_BLUE}
+        onClick={() => setIsOpen(true)}
+        label='Open Modal'
+        bold
+      />
+      {isOpen && (
+        <ModalStepsForward setIsOpen={setIsOpen} {...rest}>
+          {text}
+        </ModalStepsForward>
+      )}
     </main>
   )
 }
@@ -39,22 +54,76 @@ Default.args = {}
 
 export const SmallContentLeft = Template.bind({})
 SmallContentLeft.args = {
-  left: <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis, elit aliquam ullamcorper consectetur, nunc erat blandit turpis, dignissim efficitur risus eros a erat. Vestibulum rutrum odio turpis, vel mollis neque ullamcorper at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin accumsan leo sed nunc tristique tempor. Duis sit amet viverra nunc. Aliquam vehicula elit ut sodales pharetra. Sed imperdiet tempor urna id porta. Nullam ante velit, aliquet a eleifend quis, vulputate sit amet metus. Nullam faucibus libero at velit mattis tempus. Suspendisse potenti. Sed vitae enim ut magna rutrum volutpat at sed augue. Sed sed neque porttitor, gravida lorem vitae, semper felis.</div>
+  left: (
+    <div>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis,
+      elit aliquam ullamcorper consectetur, nunc erat blandit turpis, dignissim
+      efficitur risus eros a erat. Vestibulum rutrum odio turpis, vel mollis
+      neque ullamcorper at. Orci varius natoque penatibus et magnis dis
+      parturient montes, nascetur ridiculus mus. Proin accumsan leo sed nunc
+      tristique tempor. Duis sit amet viverra nunc. Aliquam vehicula elit ut
+      sodales pharetra. Sed imperdiet tempor urna id porta. Nullam ante velit,
+      aliquet a eleifend quis, vulputate sit amet metus. Nullam faucibus libero
+      at velit mattis tempus. Suspendisse potenti. Sed vitae enim ut magna
+      rutrum volutpat at sed augue. Sed sed neque porttitor, gravida lorem
+      vitae, semper felis.
+    </div>
+  )
 }
 
 export const LongContentLeft = Template.bind({})
 LongContentLeft.args = {
   left: (
     <div>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis, elit aliquam ullamcorper consectetur, nunc erat blandit turpis, dignissim efficitur risus eros a erat. Vestibulum rutrum odio turpis, vel mollis neque ullamcorper at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin accumsan leo sed nunc tristique tempor. Duis sit amet viverra nunc. Aliquam vehicula elit ut sodales pharetra. Sed imperdiet tempor urna id porta. Nullam ante velit, aliquet a eleifend quis, vulputate sit amet metus. Nullam faucibus libero at velit mattis tempus. Suspendisse potenti. Sed vitae enim ut magna rutrum volutpat at sed augue. Sed sed neque porttitor, gravida lorem vitae, semper felis.
-      <br /><br />
-      Mauris eget ultrices eros. Maecenas condimentum tristique odio, sit amet pellentesque lacus pretium sit amet. Etiam sed egestas nibh. Curabitur auctor posuere ante vel tempor. Etiam a vehicula erat. Cras aliquet eros ut magna vestibulum rhoncus. Sed sed vestibulum metus. Nam sed magna velit. Sed sit amet fermentum libero. Maecenas et faucibus elit. Integer ligula magna, congue et posuere nec, lobortis sed dui. Suspendisse potenti. Cras vestibulum nunc non volutpat tempus. In ultrices elementum consectetur. Vestibulum justo risus, rutrum et augue ac, suscipit lobortis erat. Sed rutrum sem at tortor molestie, tempus sagittis diam pulvinar.
-      <br /><br />
-      Nullam lacinia tortor ipsum. Curabitur nec nulla ut orci volutpat pulvinar ac ut sapien. Vestibulum aliquet ultricies leo, in cursus nibh cursus nec. In eget faucibus lorem. Sed fringilla efficitur tellus. Cras faucibus mauris eget dolor vehicula auctor. Vestibulum dignissim orci id fringilla bibendum.
-      <br /><br />
-      Morbi maximus sem ac nulla bibendum, eleifend blandit nunc sodales. Quisque maximus dapibus diam eu condimentum. Aenean ac justo viverra, pellentesque eros id, porta lectus. In ac risus orci. Fusce eleifend sollicitudin pellentesque. Nulla facilisi. Aenean nec nunc ut felis bibendum bibendum. Sed quam neque, scelerisque nec luctus a, facilisis non ante.
-      <br /><br />
-      Nullam id mauris vitae mi dignissim consequat eget sed leo. Maecenas venenatis orci sed blandit lobortis. Donec a purus risus. Phasellus mollis sem a ipsum cursus ultricies. Sed malesuada sit amet mi a ullamcorper. Mauris sodales eget nulla at porttitor. Etiam arcu mi, efficitur hendrerit metus ut, blandit molestie sapien. Nunc commodo justo nec mi volutpat, sit amet cursus tortor eleifend. Pellentesque tincidunt ac mauris at faucibus. Quisque sed purus quis nibh aliquet ullamcorper. Nunc est sem, accumsan eu pellentesque non, volutpat a nisl. Proin eu dolor ac quam dictum lobortis at ut elit. Aenean nec dui orci. Praesent aliquet eget metus vel elementum.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis,
+      elit aliquam ullamcorper consectetur, nunc erat blandit turpis, dignissim
+      efficitur risus eros a erat. Vestibulum rutrum odio turpis, vel mollis
+      neque ullamcorper at. Orci varius natoque penatibus et magnis dis
+      parturient montes, nascetur ridiculus mus. Proin accumsan leo sed nunc
+      tristique tempor. Duis sit amet viverra nunc. Aliquam vehicula elit ut
+      sodales pharetra. Sed imperdiet tempor urna id porta. Nullam ante velit,
+      aliquet a eleifend quis, vulputate sit amet metus. Nullam faucibus libero
+      at velit mattis tempus. Suspendisse potenti. Sed vitae enim ut magna
+      rutrum volutpat at sed augue. Sed sed neque porttitor, gravida lorem
+      vitae, semper felis.
+      <br />
+      <br />
+      Mauris eget ultrices eros. Maecenas condimentum tristique odio, sit amet
+      pellentesque lacus pretium sit amet. Etiam sed egestas nibh. Curabitur
+      auctor posuere ante vel tempor. Etiam a vehicula erat. Cras aliquet eros
+      ut magna vestibulum rhoncus. Sed sed vestibulum metus. Nam sed magna
+      velit. Sed sit amet fermentum libero. Maecenas et faucibus elit. Integer
+      ligula magna, congue et posuere nec, lobortis sed dui. Suspendisse
+      potenti. Cras vestibulum nunc non volutpat tempus. In ultrices elementum
+      consectetur. Vestibulum justo risus, rutrum et augue ac, suscipit lobortis
+      erat. Sed rutrum sem at tortor molestie, tempus sagittis diam pulvinar.
+      <br />
+      <br />
+      Nullam lacinia tortor ipsum. Curabitur nec nulla ut orci volutpat pulvinar
+      ac ut sapien. Vestibulum aliquet ultricies leo, in cursus nibh cursus nec.
+      In eget faucibus lorem. Sed fringilla efficitur tellus. Cras faucibus
+      mauris eget dolor vehicula auctor. Vestibulum dignissim orci id fringilla
+      bibendum.
+      <br />
+      <br />
+      Morbi maximus sem ac nulla bibendum, eleifend blandit nunc sodales.
+      Quisque maximus dapibus diam eu condimentum. Aenean ac justo viverra,
+      pellentesque eros id, porta lectus. In ac risus orci. Fusce eleifend
+      sollicitudin pellentesque. Nulla facilisi. Aenean nec nunc ut felis
+      bibendum bibendum. Sed quam neque, scelerisque nec luctus a, facilisis non
+      ante.
+      <br />
+      <br />
+      Nullam id mauris vitae mi dignissim consequat eget sed leo. Maecenas
+      venenatis orci sed blandit lobortis. Donec a purus risus. Phasellus mollis
+      sem a ipsum cursus ultricies. Sed malesuada sit amet mi a ullamcorper.
+      Mauris sodales eget nulla at porttitor. Etiam arcu mi, efficitur hendrerit
+      metus ut, blandit molestie sapien. Nunc commodo justo nec mi volutpat, sit
+      amet cursus tortor eleifend. Pellentesque tincidunt ac mauris at faucibus.
+      Quisque sed purus quis nibh aliquet ullamcorper. Nunc est sem, accumsan eu
+      pellentesque non, volutpat a nisl. Proin eu dolor ac quam dictum lobortis
+      at ut elit. Aenean nec dui orci. Praesent aliquet eget metus vel
+      elementum.
     </div>
   )
 }

package/src/stories/PlatformaticIcon.stories.jsx

@@ -1,7 +1,16 @@
 import React from 'react'
 import PlatformaticIcon from '../components/PlatformaticIcon'
 import Icons from '../components/icons'
-import { COLORS_ICON, EXTRA_LARGE, EXTRA_SMALL, LARGE, MEDIUM, SIZES, SMALL, WHITE } from '../components/constants'
+import {
+  COLORS_ICON,
+  EXTRA_LARGE,
+  EXTRA_SMALL,
+  LARGE,
+  MEDIUM,
+  SIZES,
+  SMALL,
+  WHITE
+} from '../components/constants'
 
 const divStyle = {
   width: '100%'
@@ -67,26 +76,52 @@ const AllIconsTemplate = (args) => {
         {icons.map((icon, index) => (
           <div style={row} key={index}>
             <div style={col}>
-              <p style={paragraph}>#{index + 1}: {icon}</p>
+              <p style={paragraph}>
+                #{index + 1}: {icon}
+              </p>
             </div>
             <div style={col}>
-              <PlatformaticIcon key={icon} iconName={icon} size={EXTRA_SMALL} {...args} />
+              <PlatformaticIcon
+                key={icon}
+                iconName={icon}
+                size={EXTRA_SMALL}
+                {...args}
+              />
             </div>
             <div style={col}>
-              <PlatformaticIcon key={icon} iconName={icon} size={SMALL} {...args} />
+              <PlatformaticIcon
+                key={icon}
+                iconName={icon}
+                size={SMALL}
+                {...args}
+              />
             </div>
             <div style={col}>
-              <PlatformaticIcon key={icon} iconName={icon} size={MEDIUM} {...args} />
+              <PlatformaticIcon
+                key={icon}
+                iconName={icon}
+                size={MEDIUM}
+                {...args}
+              />
             </div>
             <div style={col}>
-              <PlatformaticIcon key={icon} iconName={icon} size={LARGE} {...args} />
+              <PlatformaticIcon
+                key={icon}
+                iconName={icon}
+                size={LARGE}
+                {...args}
+              />
             </div>
             <div style={col}>
-              <PlatformaticIcon key={icon} iconName={icon} size={EXTRA_LARGE} {...args} />
+              <PlatformaticIcon
+                key={icon}
+                iconName={icon}
+                size={EXTRA_LARGE}
+                {...args}
+              />
             </div>
           </div>
-        )
-        )}
+        ))}
       </div>
     </>
   )

package/src/stories/SearchBar.stories.jsx

@@ -14,7 +14,6 @@ const Template = (args) => {
     <>
       <SearchBar {...args}>Hello Platformatic</SearchBar>
     </>
-
   )
 }
 export const Standard = Template.bind({})

package/src/stories/SearchBarV2.stories.jsx

@@ -9,7 +9,6 @@ const Template = (args) => {
     <>
       <SearchBarV2 {...args} />
     </>
-
   )
 }
 export const Standard = Template.bind({})

package/src/stories/Sidebar.stories.jsx

@@ -17,7 +17,15 @@ export default {
     (Story) => (
       <div style={divStyle}>
         <Story />
-        <BorderedBox>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</BorderedBox>
+        <BorderedBox>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </BorderedBox>
       </div>
     )
   ]
@@ -36,19 +44,27 @@ EmptySidebar.args = {
 
 const FullSidebarTemplate = (args) => {
   const [items, setItems] = useState([
-    { id: '1', iconName: 'WorkspaceStaticIcon', subTitle: 'Subtitle', title: 'a very very very very very long title 1' },
+    {
+      id: '1',
+      iconName: 'WorkspaceStaticIcon',
+      subTitle: 'Subtitle',
+      title: 'a very very very very very long title 1'
+    },
     { id: '2', title: 'Title number 2', subTitle: 'Subtitle 2' },
-    { id: '3', title: 'Another Title', subTitle: 'Subtitle 3', iconName: 'WorkspaceDynamicIcon' }
+    {
+      id: '3',
+      title: 'Another Title',
+      subTitle: 'Subtitle 3',
+      iconName: 'WorkspaceDynamicIcon'
+    }
   ])
   function onClickAdd () {
-    const tmpItem = items.map(item => item)
+    const tmpItem = items.map((item) => item)
     tmpItem.push('Title number ' + (items.length + 1))
     setItems(tmpItem)
   }
 
-  return (
-    <Sidebar items={items} onClickAdd={() => onClickAdd()} {...args} />
-  )
+  return <Sidebar items={items} onClickAdd={() => onClickAdd()} {...args} />
 }
 
 export const FullSidebar = FullSidebarTemplate.bind({})
@@ -68,9 +84,24 @@ AlreadySelected.args = {
   addTitle: 'Create',
   defaultSelected: '3',
   items: [
-    { id: '1', iconName: 'WorkspaceStaticIcon', title: 'Static 1', subTitle: 'Subtitle 1' },
-    { id: '2', iconName: 'WorkspaceStaticIcon', title: 'Static 2', subTitle: 'Subtitle 2' },
-    { id: '3', iconName: 'WorkspaceDynamicIcon', title: 'Dynamic', subTitle: 'Subtitle 3' }
+    {
+      id: '1',
+      iconName: 'WorkspaceStaticIcon',
+      title: 'Static 1',
+      subTitle: 'Subtitle 1'
+    },
+    {
+      id: '2',
+      iconName: 'WorkspaceStaticIcon',
+      title: 'Static 2',
+      subTitle: 'Subtitle 2'
+    },
+    {
+      id: '3',
+      iconName: 'WorkspaceDynamicIcon',
+      title: 'Dynamic',
+      subTitle: 'Subtitle 3'
+    }
   ],
   onClickItemSelected: (index) => alert('selected: ' + index),
   onClickSettings: () => alert('settings')

package/src/stories/TabbedWindow.stories.jsx

@@ -10,45 +10,85 @@ const Template = (args) => {
     <>
       <TabbedWindow {...args} />
     </>
-
   )
 }
 export const Default = Template.bind({})
 
 Default.args = {
-  tabs: [{
-    label: 'First',
-    key: 'first',
-    component: () => <TextWithLabel label='First component' text='Lorem ipsum dolor sit amet, consectetur adipiscing elit.' />
-  }, {
-    label: 'Second',
-    key: 'second',
-    component: () => <TextWithLabel label='Second component' text='Sed et dui facilisis, molestie urna sed, volutpat nibh' />
-  }, {
-    label: 'Third Third Third',
-    key: 'third',
-    component: () => <TextWithLabel label='Third component' text='ivamus est nisl, maximus aliquet urna eu, consequat semper nisi' />
-  }, {
-    label: 'Fourth',
-    key: 'fourth',
-    component: () => <TextWithLabel label='Fourth component' text='Ipse dixit' />
-  }]
+  tabs: [
+    {
+      label: 'First',
+      key: 'first',
+      component: () => (
+        <TextWithLabel
+          label='First component'
+          text='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+        />
+      )
+    },
+    {
+      label: 'Second',
+      key: 'second',
+      component: () => (
+        <TextWithLabel
+          label='Second component'
+          text='Sed et dui facilisis, molestie urna sed, volutpat nibh'
+        />
+      )
+    },
+    {
+      label: 'Third Third Third',
+      key: 'third',
+      component: () => (
+        <TextWithLabel
+          label='Third component'
+          text='ivamus est nisl, maximus aliquet urna eu, consequat semper nisi'
+        />
+      )
+    },
+    {
+      label: 'Fourth',
+      key: 'fourth',
+      component: () => (
+        <TextWithLabel label='Fourth component' text='Ipse dixit' />
+      )
+    }
+  ]
 }
 
 export const DefaultSelected = Template.bind({})
 DefaultSelected.args = {
-  tabs: [{
-    label: 'First',
-    key: 'first',
-    component: () => <TextWithLabel label='First component' text='Lorem ipsum dolor sit amet, consectetur adipiscing elit.' />
-  }, {
-    label: 'Second',
-    key: 'second',
-    component: () => <TextWithLabel label='Second component' text='Sed et dui facilisis, molestie urna sed, volutpat nibh' />
-  }, {
-    label: 'Third',
-    key: 'third',
-    component: () => <TextWithLabel label='Third component' text='ivamus est nisl, maximus aliquet urna eu, consequat semper nisi' />
-  }],
+  tabs: [
+    {
+      label: 'First',
+      key: 'first',
+      component: () => (
+        <TextWithLabel
+          label='First component'
+          text='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+        />
+      )
+    },
+    {
+      label: 'Second',
+      key: 'second',
+      component: () => (
+        <TextWithLabel
+          label='Second component'
+          text='Sed et dui facilisis, molestie urna sed, volutpat nibh'
+        />
+      )
+    },
+    {
+      label: 'Third',
+      key: 'third',
+      component: () => (
+        <TextWithLabel
+          label='Third component'
+          text='ivamus est nisl, maximus aliquet urna eu, consequat semper nisi'
+        />
+      )
+    }
+  ],
   keySelected: 'second'
 }

package/src/stories/TextWithLabel.stories.jsx

@@ -18,7 +18,11 @@ Standard.args = {
   text: 'Platformatic Team'
 }
 
-export const WithLink = (args) => <TextWithLabel {...args}><a href='https://example.com'>Standard Link</a></TextWithLabel>
+export const WithLink = (args) => (
+  <TextWithLabel {...args}>
+    <a href='https://example.com'>Standard Link</a>
+  </TextWithLabel>
+)
 
 WithLink.args = {
   label: 'External Link'

package/src/stories/Tooltip.stories.jsx

@@ -1,7 +1,15 @@
 'use strict'
 import React from 'react'
 import Tooltip from '../components/Tooltip'
-import { ANTI_FLASH_WHITE, CHANGE_BACKGROUND_COLOR, COLORS_BUTTON, HOVER_EFFECTS_BUTTONS, RICH_BLACK, SIZES, WHITE } from '../components/constants'
+import {
+  ANTI_FLASH_WHITE,
+  CHANGE_BACKGROUND_COLOR,
+  COLORS_BUTTON,
+  HOVER_EFFECTS_BUTTONS,
+  RICH_BLACK,
+  SIZES,
+  WHITE
+} from '../components/constants'
 import Button from '../components/Button'
 
 const divStyle = {
@@ -79,7 +87,7 @@ const TemplateWithButton = (args) => (
 export const TooltipBase = TemplateWithButton.bind({})
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 TooltipBase.args = {
-  content: (<span>I'm a tooltip over a button</span>),
+  content: <span>I'm a tooltip over a button</span>,
   delay: 100,
   offset: 44
 }

package/src/stories/TwoColumnsLayout.stories.jsx

@@ -17,11 +17,16 @@ export default {
 }
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <TwoColumnsLayout {...args}><BorderedBox>1st</BorderedBox><BorderedBox>2nd</BorderedBox></TwoColumnsLayout>
+const Template = (args) => (
+  <TwoColumnsLayout {...args}>
+    <BorderedBox>1st</BorderedBox>
+    <BorderedBox>2nd</BorderedBox>
+  </TwoColumnsLayout>
+)
 
 export const Default = Template.bind({})
 
-Default.args = { }
+Default.args = {}
 
 export const Columns = Template.bind({})