@platformatic/ui-components 0.1.104 → 0.1.106

package/src/components/icons/WorkspaceEmptyIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, MEDIUM, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceEmptyIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'extra-large':
+    case EXTRA_LARGE:
       icon = (
         <svg width={104} height={105} viewBox='0 0 104 105' fill='none' xmlns='http://www.w3.org/2000/svg' className={className}>
           <path d='M29.8467 60.0705V87.4275C29.8467 87.9797 30.2944 88.4275 30.8467 88.4275H73.1544C73.7067 88.4275 74.1544 87.9797 74.1544 87.4275V60.0705' stroke='none' strokeWidth={3} strokeLinecap='round' />
@@ -48,8 +48,8 @@ WorkspaceEmptyIcon.propTypes = {
 }
 
 WorkspaceEmptyIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default WorkspaceEmptyIcon

package/src/components/icons/WorkspaceFailIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceFailIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -28,7 +28,7 @@ const WorkspaceFailIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -47,7 +47,7 @@ const WorkspaceFailIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -67,7 +67,7 @@ const WorkspaceFailIcon = ({ color, size }) => {
       )
       break
 
-    case 'extra-large':
+    case EXTRA_LARGE:
       icon = (
         <svg
           width={120}
@@ -106,8 +106,8 @@ WorkspaceFailIcon.propTypes = {
 }
 
 WorkspaceFailIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default WorkspaceFailIcon

package/src/components/icons/WorkspaceGitHubIcon.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceGitHubIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -9,7 +9,7 @@ const WorkspaceGitHubIcon = ({ color, size }) => {
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -33,7 +33,7 @@ const WorkspaceGitHubIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -57,7 +57,7 @@ const WorkspaceGitHubIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -82,7 +82,7 @@ const WorkspaceGitHubIcon = ({ color, size }) => {
       )
       break
 
-    case 'extra-large':
+    case EXTRA_LARGE:
       icon = (
         <svg
           width={120}
@@ -125,8 +125,8 @@ WorkspaceGitHubIcon.propTypes = {
 }
 
 WorkspaceGitHubIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default WorkspaceGitHubIcon

package/src/components/icons/WorkspaceLoadingIcon.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, EXTRA_LARGE, MEDIUM, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceLoadingIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -10,7 +10,7 @@ const WorkspaceLoadingIcon = ({ color, size }) => {
   let icon = <></>
 
   switch (size) {
-    case 'extra-large':
+    case EXTRA_LARGE:
       icon = (
         <svg
           width={105}
@@ -50,8 +50,8 @@ WorkspaceLoadingIcon.propTypes = {
 }
 
 WorkspaceLoadingIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default WorkspaceLoadingIcon

package/src/components/icons/WorkspaceReadyIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceReadyIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -27,7 +27,7 @@ const WorkspaceReadyIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -45,7 +45,7 @@ const WorkspaceReadyIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -64,7 +64,7 @@ const WorkspaceReadyIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'extra-large':
+    case EXTRA_LARGE:
       icon = (
         <svg
           width={120}
@@ -138,8 +138,8 @@ WorkspaceReadyIcon.propTypes = {
 }
 
 WorkspaceReadyIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default WorkspaceReadyIcon

package/src/components/icons/WorkspaceStaticIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceStaticIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -25,7 +25,7 @@ const WorkspaceStaticIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -42,7 +42,7 @@ const WorkspaceStaticIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -78,8 +78,8 @@ WorkspaceStaticIcon.propTypes = {
 }
 
 WorkspaceStaticIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default WorkspaceStaticIcon

package/src/components/icons/index.js

@@ -19,11 +19,13 @@ import BillingIcon from './BillingIcon'
 import CalendarIcon from './CalendarIcon'
 import Calendar1DayIcon from './Calendar1DayIcon'
 import Calendar7DaysIcon from './Calendar7DaysIcon'
+import ChatGPTIcon from './ChatGPTIcon'
 import CheckListIcon from './CheckListIcon'
 import CircleAddIcon from './CircleAddIcon'
 import CircleArrowLeftIcon from './CircleArrowLeftIcon'
 import CircleArrowRightIcon from './CircleArrowRightIcon'
 import CircleCheckMarkIcon from './CircleCheckMarkIcon'
+import CircleCheckMarkFullIcon from './CircleCheckMarkFullIcon'
 import CircleCloseIcon from './CircleCloseIcon'
 import CircleCloseHoverIcon from './CircleCloseHoverIcon'
 import CircleExclamationIcon from './CircleExclamationIcon'
@@ -34,7 +36,12 @@ import CircleTwoArrowsUpIcon from './CircleTwoArrowsUpIcon'
 import CloseIcon from './CloseIcon'
 import CreditCardIcon from './CreditCardIcon'
 import CopyPasteIcon from './CopyPasteIcon'
+import ConfigureDatabaseIcon from './ConfigureDatabaseIcon'
+import CreatingAppIcon from './CreatingAppIcon'
 import DatabaseIcon from './DatabaseIcon'
+import DatabaseMigrationIcon from './DatabaseMigrationIcon'
+import EyeClosedIcon from './EyeClosedIcon'
+import EyeOpenedIcon from './EyeOpenedIcon'
 import EditIcon from './EditIcon'
 import ExploreDocIcon from './ExploreDocIcon'
 import EnlargeIcon from './EnlargeIcon'
@@ -42,6 +49,7 @@ import EntryIcon from './EntryIcon'
 import GearIcon from './GearIcon'
 import GenerationLoadingIcon from './GenerationLoadingIcon'
 import GiveOwnershipIcon from './GiveOwnershipIcon'
+import GitHubRepoIcon from './GitHubRepoIcon'
 import GraphQLIcon from './GraphQLIcon'
 import KeyIcon from './KeyIcon'
 import LabelIcon from './LabelIcon'
@@ -52,6 +60,7 @@ import LoadingAppIcon from './LoadingAppIcon'
 import LogOutIcon from './LogOutIcon'
 import MetricsIcon from './MetricsIcon'
 import MetricsLoadingIcon from './MetricsLoadingIcon'
+import NameAppIcon from './NameAppIcon'
 import OrganizationIcon from './OrganizationIcon'
 import PlayIcon from './PlayIcon'
 import PullRequestIcon from './PullRequestIcon'
@@ -59,6 +68,7 @@ import PullRequestLoadingIcon from './PullRequestLoadingIcon'
 import RequestOwnershipIcon from './RequestOwnershipIcon'
 import RestartIcon from './RestartIcon'
 import RocketIcon from './RocketIcon'
+import RunningIcon from './RunningIcon'
 import SendIcon from './SendIcon'
 import ServiceIcon from './ServiceIcon'
 import SlotIcon from './SlotIcon'
@@ -107,11 +117,13 @@ export default {
   CalendarIcon,
   Calendar1DayIcon,
   Calendar7DaysIcon,
+  ChatGPTIcon,
   CheckListIcon,
   CircleAddIcon,
   CircleArrowLeftIcon,
   CircleArrowRightIcon,
   CircleCheckMarkIcon,
+  CircleCheckMarkFullIcon,
   CircleExclamationIcon,
   CircleCloseIcon,
   CircleCloseHoverIcon,
@@ -122,14 +134,20 @@ export default {
   CloseIcon,
   CreditCardIcon,
   CopyPasteIcon,
+  ConfigureDatabaseIcon,
+  CreatingAppIcon,
   DatabaseIcon,
+  DatabaseMigrationIcon,
   EditIcon,
+  EyeClosedIcon,
+  EyeOpenedIcon,
   ExploreDocIcon,
   EnlargeIcon,
   EntryIcon,
   GearIcon,
   GenerationLoadingIcon,
   GiveOwnershipIcon,
+  GitHubRepoIcon,
   GraphQLIcon,
   KeyIcon,
   LabelIcon,
@@ -140,6 +158,7 @@ export default {
   LogOutIcon,
   MetricsIcon,
   MetricsLoadingIcon,
+  NameAppIcon,
   OrganizationIcon,
   PlayIcon,
   PullRequestIcon,
@@ -147,6 +166,7 @@ export default {
   RequestOwnershipIcon,
   RestartIcon,
   RocketIcon,
+  RunningIcon,
   SendIcon,
   ServiceIcon,
   StopIcon,

package/src/stories/ModalStepsForward.stories.jsx

@@ -0,0 +1,60 @@
+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'
+export default {
+  title: 'Platformatic/ModalStepsForward',
+  component: ModalStepsForward,
+  argTypes: {
+    layout: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: MODAL_LAYOUTS
+      }
+    },
+    size: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: MODAL_SIZES
+      }
+    }
+  }
+}
+
+const Template = (args) => {
+  const [isOpen, setIsOpen] = useState(false)
+  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>}
+    </main>
+  )
+}
+
+export const Default = Template.bind({})
+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>
+}
+
+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.
+    </div>
+  )
+}

package/src/stories/PlatformaticIcon.stories.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PlatformaticIcon from '../components/PlatformaticIcon'
 import Icons from '../components/icons'
-import { COLORS_ICON, EXTRA_LARGE, EXTRA_SMALL, LARGE, MEDIUM, SMALL } from '../components/constants'
+import { COLORS_ICON, EXTRA_LARGE, EXTRA_SMALL, LARGE, MEDIUM, SIZES, SMALL, WHITE } from '../components/constants'
 
 const divStyle = {
   width: '100%'
@@ -27,25 +27,28 @@ export default {
   title: 'Platformatic/PlatformaticIcon',
   component: PlatformaticIcon,
   argTypes: {
-    color: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: COLORS_ICON
-      }
-    },
-    size: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: ['small', 'medium', 'large', 'extra-large']
-      }
-    },
     checked: {
       type: 'boolean',
       control: {
         type: 'boolean'
       }
+    },
+    classes: {
+      type: 'string'
+    },
+    color: {
+      options: COLORS_ICON,
+      control: { type: 'radio' }
+    },
+    onClick: {
+      type: 'function'
+    },
+    size: {
+      options: SIZES,
+      control: { type: 'radio' }
+    },
+    tip: {
+      type: 'string'
     }
   }
 }
@@ -58,40 +61,43 @@ PlatformaticIconDefault.args = {
 }
 
 const AllIconsTemplate = (args) => {
-  const icons = Object.values(Icons)
+  const icons = Object.keys(Icons)
 
   return (
     <>
       <div style={divStyle}>
         <p style={paragraph}> All Platformatic Icons: {icons.length} </p>
-        {icons.map((IconComponent, index) => (
+        {icons.map((icon, index) => (
           <div style={row} key={index}>
             <div style={col}>
-              <p style={paragraph}>#{index + 1}: {IconComponent.name}</p>
+              <p style={paragraph}>#{index + 1}: {icon}</p>
             </div>
             <div style={col}>
-              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size={EXTRA_SMALL} {...args} />
+              <PlatformaticIcon key={icon} iconName={icon} size={EXTRA_SMALL} {...args} />
             </div>
             <div style={col}>
-              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size={SMALL} {...args} />
+              <PlatformaticIcon key={icon} iconName={icon} size={SMALL} {...args} />
             </div>
             <div style={col}>
-              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size={MEDIUM} {...args} />
+              <PlatformaticIcon key={icon} iconName={icon} size={MEDIUM} {...args} />
             </div>
             <div style={col}>
-              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size={LARGE} {...args} />
+              <PlatformaticIcon key={icon} iconName={icon} size={LARGE} {...args} />
             </div>
             <div style={col}>
-              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size={EXTRA_LARGE} {...args} />
+              <PlatformaticIcon key={icon} iconName={icon} size={EXTRA_LARGE} {...args} />
             </div>
           </div>
-        ))}
+        )
+        )}
       </div>
     </>
   )
 }
 export const PlatformaticIconAll = AllIconsTemplate.bind({})
 PlatformaticIconAll.args = {
-  color: 'white',
-  onClick: null
+  color: WHITE,
+  classes: '',
+  onClick: null,
+  tip: ''
 }

package/src/stories/forms/Password.stories.jsx

@@ -0,0 +1,63 @@
+'use strict'
+import React, { useState } from 'react'
+import Password from '../../components/forms/Password'
+
+const divStyle = {
+  width: '100%',
+  height: 'auto',
+  padding: '20px',
+  backgroundColor: 'white'
+}
+
+export default {
+  title: 'Platformatic/Forms/Password',
+  component: Password,
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+      </div>
+    )
+  ]
+}
+
+const Template = (args) => {
+  const [value, setValue] = useState('')
+
+  function handleChange (event) {
+    setValue(event.target.value)
+  }
+
+  return (
+    <>
+      <p>Value of the input {value}</p>
+      <Password {...args} value={value} onChange={handleChange} />
+    </>
+  )
+}
+
+export const Default = Template.bind({})
+
+Default.args = {
+  name: 'test',
+  placeholder: 'Platformatic'
+}
+
+const TemplateBorderMainDarkBlue = (args) => <div style={{ backgroundColor: 'white', padding: '2px' }}><Password {...args} /></div>
+
+export const BorderMainDarkBlue = TemplateBorderMainDarkBlue.bind({})
+
+BorderMainDarkBlue.args = {
+  name: 'test',
+  placeholder: 'Platformatic',
+  borderColor: 'main-dark-blue'
+}
+
+export const DefaultInvalid = Template.bind({})
+
+DefaultInvalid.args = {
+  name: 'test',
+  placeholder: 'Platformatic',
+  borderColor: 'main-dark-blue',
+  errorMessage: 'This is an error message'
+}

package/src/stories/forms/RadioGroup.stories.jsx

@@ -0,0 +1,77 @@
+'use strict'
+import React, { useState } from 'react'
+import RadioGroup from '../../components/forms/RadioGroup'
+
+const divStyle = {
+  width: '100%',
+  height: 'auto',
+  padding: '20px',
+  backgroundColor: 'white'
+}
+
+const radios = [{ label: 'One', value: '1' }, { label: 'Two', value: '2' }, { label: 'Three', value: '3' }]
+
+export default {
+  title: 'Platformatic/Forms/RadioGroup',
+  component: RadioGroup,
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+      </div>
+    )
+  ]
+}
+
+const Template = (args) => {
+  const [value, setValue] = useState(args.value || '')
+
+  function handleChange (event) {
+    setValue(event.target.value)
+  }
+
+  return (
+    <>
+      <p>Value of the radio {value}</p>
+      <RadioGroup {...args} value={value} onChange={handleChange} />
+    </>
+  )
+}
+
+export const Default = Template.bind({})
+
+Default.args = {
+  name: 'test',
+  radios
+}
+
+export const DefaultInvalid = Template.bind({})
+
+DefaultInvalid.args = {
+  name: 'test',
+  radios,
+  errorMessage: 'This is an error message'
+}
+
+export const Disabled = Template.bind({})
+
+Disabled.args = {
+  name: 'test',
+  radios,
+  disabled: true
+}
+
+export const Empty = Template.bind({})
+
+Empty.args = {
+  name: 'test',
+  radios: []
+}
+
+export const ValueSelected = Template.bind({})
+
+ValueSelected.args = {
+  name: 'test',
+  radios,
+  value: '3'
+}