@platformatic/ui-components 0.3.5 → 0.4.0

package/src/stories/forms/InputWithSeparator.stories.jsx

@@ -37,8 +37,20 @@ const TemplateDefault = (args) => {
     <>
       <p>Chunks: {chunks.toString()} </p>
       <p>Value inserted: {value} </p>
-      <label>Add Error message: <input type='checkbox' onChange={() => setErrorMessage(errorMessage === '' ? 'custom message' : '')} /></label>
-      <InputWithSeparator {...args} value={value} onChange={handleChange} errorMessage={errorMessage} />
+      <label>
+        Add Error message:{' '}
+        <input
+          type='checkbox'
+          onChange={() =>
+            setErrorMessage(errorMessage === '' ? 'custom message' : '')}
+        />
+      </label>
+      <InputWithSeparator
+        {...args}
+        value={value}
+        onChange={handleChange}
+        errorMessage={errorMessage}
+      />
     </>
   )
 }
@@ -53,7 +65,7 @@ Default.args = {
   afterIcon: {
     iconName: 'AddIcon',
     color: ERROR_RED,
-    handleClick: () => alert('I\'m an AddIcon')
+    handleClick: () => alert("I'm an AddIcon")
   }
 }
 
@@ -72,8 +84,20 @@ const TemplateDefaultWithValues = (args) => {
     <>
       <p>Chunks: {chunks.toString()} </p>
       <p>Value inserted: {value} </p>
-      <label>Add Error message: <input type='checkbox' onChange={() => setErrorMessage(errorMessage === '' ? 'custom message' : '')} /></label>
-      <InputWithSeparator {...args} value={value} onChange={handleChange} errorMessage={errorMessage} />
+      <label>
+        Add Error message:{' '}
+        <input
+          type='checkbox'
+          onChange={() =>
+            setErrorMessage(errorMessage === '' ? 'custom message' : '')}
+        />
+      </label>
+      <InputWithSeparator
+        {...args}
+        value={value}
+        onChange={handleChange}
+        errorMessage={errorMessage}
+      />
     </>
   )
 }
@@ -89,9 +113,8 @@ PredefinedValues.args = {
   afterIcon: {
     iconName: 'AddIcon',
     color: ERROR_RED,
-    handleClick: () => alert('I\'m an AddIcon')
+    handleClick: () => alert("I'm an AddIcon")
   }
-
 }
 
 export const DifferentsSeparators = TemplateDefaultWithValues.bind({})
@@ -105,7 +128,6 @@ DifferentsSeparators.args = {
   afterIcon: {
     iconName: 'AddIcon',
     color: ERROR_RED,
-    handleClick: () => alert('I\'m an AddIcon')
+    handleClick: () => alert("I'm an AddIcon")
   }
-
 }

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

@@ -43,7 +43,11 @@ Default.args = {
   placeholder: 'Platformatic'
 }
 
-const TemplateBorderMainDarkBlue = (args) => <div style={{ backgroundColor: 'white', padding: '2px' }}><Password {...args} /></div>
+const TemplateBorderMainDarkBlue = (args) => (
+  <div style={{ backgroundColor: 'white', padding: '2px' }}>
+    <Password {...args} />
+  </div>
+)
 
 export const BorderMainDarkBlue = TemplateBorderMainDarkBlue.bind({})
 

package/src/stories/forms/Preview.stories.jsx

@@ -37,7 +37,12 @@ WithLink.args = {
   isLink: true
 }
 
-const TemplateWithChildren = (args) => <Preview {...args}><p>1st paragraph</p><p>2nd paragraph</p></Preview>
+const TemplateWithChildren = (args) => (
+  <Preview {...args}>
+    <p>1st paragraph</p>
+    <p>2nd paragraph</p>
+  </Preview>
+)
 
 export const WithChildren = TemplateWithChildren.bind({})
 

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

@@ -9,7 +9,11 @@ const divStyle = {
   backgroundColor: 'white'
 }
 
-const radios = [{ label: 'One', value: '1' }, { label: 'Two', value: '2' }, { label: 'Three', value: '3' }]
+const radios = [
+  { label: 'One', value: '1' },
+  { label: 'Two', value: '2' },
+  { label: 'Three', value: '3' }
+]
 
 export default {
   title: 'Platformatic/Forms/RadioGroup',

package/src/stories/forms/Select.stories.jsx

@@ -1,7 +1,12 @@
 'use strict'
 import React, { useState } from 'react'
 import Select from '../../components/forms/Select'
-import { MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, WHITE } from '../../components/constants'
+import {
+  MAIN_DARK_BLUE,
+  MAIN_GREEN,
+  RICH_BLACK,
+  WHITE
+} from '../../components/constants'
 
 const divStyle = {
   width: '100%',
@@ -60,7 +65,6 @@ const TemplateBorderMainDarkBlue2 = (args) => {
         <Select {...args} value={value} onSelect={handleSelect} />
         <br />
         <Select placeholder='Disabled' disabled />
-
       </div>
     </>
   )
@@ -71,7 +75,11 @@ export const BorderMainDarkBlue = TemplateBorderMainDarkBlue.bind({})
 BorderMainDarkBlue.args = {
   name: 'test',
   placeholder: 'Defaul option',
-  options: [...Array(20).keys()].map(ele => ({ label: `Option ${ele}`, value: `Value${ele}`, iconName: 'SocialGitHubIcon' })),
+  options: [...Array(20).keys()].map((ele) => ({
+    label: `Option ${ele}`,
+    value: `Value${ele}`,
+    iconName: 'SocialGitHubIcon'
+  })),
   borderColor: MAIN_DARK_BLUE
 }
 
@@ -80,7 +88,11 @@ export const DefaultInvalid = TemplateBorderMainDarkBlue.bind({})
 DefaultInvalid.args = {
   name: 'test',
   placeholder: 'Platformatic empty select',
-  options: [{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }, { label: 'Option 3', value: '3' }],
+  options: [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3' }
+  ],
   borderColor: MAIN_GREEN,
   errorMessage: 'This is an error message'
 }
@@ -90,22 +102,25 @@ export const withDifferentOptions = TemplateBorderMainDarkBlue2.bind({})
 withDifferentOptions.args = {
   name: 'test',
   placeholder: 'Platformatic',
-  options: [...Array(20).keys()].map(ele => ({
-    label: `Option ${ele}`,
-    value: `Value${ele}`,
-    iconName: 'SocialGitHubIcon'
-  })).concat({
-    label: 'Last but not least',
-    iconName: 'AddIcon',
-    value: 123123,
-    notSelectable: true,
-    onClick: () => alert('you clicked last but not least')
-  }).concat({
-    label: 'Play',
-    iconName: 'PlayIcon',
-    value: 123123,
-    notSelectable: true
-  }),
+  options: [...Array(20).keys()]
+    .map((ele) => ({
+      label: `Option ${ele}`,
+      value: `Value${ele}`,
+      iconName: 'SocialGitHubIcon'
+    }))
+    .concat({
+      label: 'Last but not least',
+      iconName: 'AddIcon',
+      value: 123123,
+      notSelectable: true,
+      onClick: () => alert('you clicked last but not least')
+    })
+    .concat({
+      label: 'Play',
+      iconName: 'PlayIcon',
+      value: 123123,
+      notSelectable: true
+    }),
   borderColor: MAIN_DARK_BLUE
 }
 
@@ -114,23 +129,26 @@ export const githubRepoExample = TemplateBorderMainDarkBlue2.bind({})
 githubRepoExample.args = {
   name: 'test',
   placeholder: 'Platformatic',
-  options: [...Array(4).keys()].map(ele => ({
-    label: `GitHub Repo ${ele}`,
-    value: `Value${ele}`,
-    iconName: 'SocialGitHubIcon'
-  })).concat({
-    label: 'this is an option that is not selectable',
-    iconName: 'AddIcon',
-    value: 123123,
-    notSelectable: true,
-    onClick: () => alert('you clicked last but not least')
-  }).concat({
-    label: 'Add Github repo',
-    iconName: 'PlayIcon',
-    value: 123123,
-    notSelectable: true,
-    notFilterable: true
-  }),
+  options: [...Array(4).keys()]
+    .map((ele) => ({
+      label: `GitHub Repo ${ele}`,
+      value: `Value${ele}`,
+      iconName: 'SocialGitHubIcon'
+    }))
+    .concat({
+      label: 'this is an option that is not selectable',
+      iconName: 'AddIcon',
+      value: 123123,
+      notSelectable: true,
+      onClick: () => alert('you clicked last but not least')
+    })
+    .concat({
+      label: 'Add Github repo',
+      iconName: 'PlayIcon',
+      value: 123123,
+      notSelectable: true,
+      notFilterable: true
+    }),
   borderColor: MAIN_DARK_BLUE
 }
 
@@ -155,7 +173,11 @@ TemplateBackgroundTransparent.args = {
   name: 'test',
   placeholder: 'Defaul option',
   optionsBorderedBottom: false,
-  options: [...Array(20).keys()].map(ele => ({ label: `Option ${ele}`, value: `Value${ele}`, iconName: 'OrganizationIcon' })),
+  options: [...Array(20).keys()].map((ele) => ({
+    label: `Option ${ele}`,
+    value: `Value${ele}`,
+    iconName: 'OrganizationIcon'
+  })),
   borderColor: WHITE,
   mainColor: WHITE,
   backgroundColor: RICH_BLACK,

package/src/stories/forms/SelectWithInput.stories.jsx

@@ -1,7 +1,12 @@
 'use strict'
 import React, { useState } from 'react'
 import SelectWithInput from '../../components/forms/SelectWithInput'
-import { MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, WHITE } from '../../components/constants'
+import {
+  MAIN_DARK_BLUE,
+  MAIN_GREEN,
+  RICH_BLACK,
+  WHITE
+} from '../../components/constants'
 
 const divStyle = {
   width: '100%',
@@ -46,7 +51,12 @@ const TemplateBorderMainDarkBlue = (args) => {
   return (
     <div style={{ backgroundColor: 'white', padding: '20px 10px' }}>
       <p>Value of the input {value}</p>
-      <SelectWithInput {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+      <SelectWithInput
+        {...args}
+        value={value}
+        onChange={handleChange}
+        onSelect={handleSelect}
+      />
     </div>
   )
 }
@@ -66,10 +76,14 @@ const TemplateBorderMainDarkBlue2 = (args) => {
     <>
       <div style={{ backgroundColor: 'white', padding: '20px 10px' }}>
         <p>Value of the input {value}</p>
-        <SelectWithInput {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+        <SelectWithInput
+          {...args}
+          value={value}
+          onChange={handleChange}
+          onSelect={handleSelect}
+        />
         <br />
         <SelectWithInput placeholder='Disabled' disabled />
-
       </div>
     </>
   )
@@ -80,7 +94,11 @@ export const BorderMainDarkBlue = TemplateBorderMainDarkBlue.bind({})
 BorderMainDarkBlue.args = {
   name: 'test',
   placeholder: 'Defaul option',
-  options: [...Array(20).keys()].map(ele => ({ label: `Option ${ele}`, value: `Value${ele}`, iconName: 'SocialGitHubIcon' })),
+  options: [...Array(20).keys()].map((ele) => ({
+    label: `Option ${ele}`,
+    value: `Value${ele}`,
+    iconName: 'SocialGitHubIcon'
+  })),
   borderColor: MAIN_DARK_BLUE
 }
 
@@ -89,7 +107,11 @@ export const DefaultInvalid = TemplateBorderMainDarkBlue.bind({})
 DefaultInvalid.args = {
   name: 'test',
   placeholder: 'Platformatic empty select',
-  options: [{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }, { label: 'Option 3', value: '3' }],
+  options: [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3' }
+  ],
   borderColor: MAIN_GREEN,
   errorMessage: 'This is an error message'
 }
@@ -99,22 +121,25 @@ export const withDifferentOptions = TemplateBorderMainDarkBlue2.bind({})
 withDifferentOptions.args = {
   name: 'test',
   placeholder: 'Platformatic',
-  options: [...Array(20).keys()].map(ele => ({
-    label: `Option ${ele}`,
-    value: `Value${ele}`,
-    iconName: 'SocialGitHubIcon'
-  })).concat({
-    label: 'Last but not least',
-    iconName: 'AddIcon',
-    value: 123123,
-    notSelectable: true,
-    onClick: () => alert('you clicked last but not least')
-  }).concat({
-    label: 'Play',
-    iconName: 'PlayIcon',
-    value: 123123,
-    notSelectable: true
-  }),
+  options: [...Array(20).keys()]
+    .map((ele) => ({
+      label: `Option ${ele}`,
+      value: `Value${ele}`,
+      iconName: 'SocialGitHubIcon'
+    }))
+    .concat({
+      label: 'Last but not least',
+      iconName: 'AddIcon',
+      value: 123123,
+      notSelectable: true,
+      onClick: () => alert('you clicked last but not least')
+    })
+    .concat({
+      label: 'Play',
+      iconName: 'PlayIcon',
+      value: 123123,
+      notSelectable: true
+    }),
   borderColor: MAIN_DARK_BLUE
 }
 
@@ -123,23 +148,26 @@ export const githubRepoExample = TemplateBorderMainDarkBlue2.bind({})
 githubRepoExample.args = {
   name: 'test',
   placeholder: 'Platformatic',
-  options: [...Array(4).keys()].map(ele => ({
-    label: `GitHub Repo ${ele}`,
-    value: `Value${ele}`,
-    iconName: 'SocialGitHubIcon'
-  })).concat({
-    label: 'this is an option that is not selectable',
-    iconName: 'AddIcon',
-    value: 123123,
-    notSelectable: true,
-    onClick: () => alert('you clicked last but not least')
-  }).concat({
-    label: 'Add Github repo',
-    iconName: 'PlayIcon',
-    value: 123123,
-    notSelectable: true,
-    notFilterable: true
-  }),
+  options: [...Array(4).keys()]
+    .map((ele) => ({
+      label: `GitHub Repo ${ele}`,
+      value: `Value${ele}`,
+      iconName: 'SocialGitHubIcon'
+    }))
+    .concat({
+      label: 'this is an option that is not selectable',
+      iconName: 'AddIcon',
+      value: 123123,
+      notSelectable: true,
+      onClick: () => alert('you clicked last but not least')
+    })
+    .concat({
+      label: 'Add Github repo',
+      iconName: 'PlayIcon',
+      value: 123123,
+      notSelectable: true,
+      notFilterable: true
+    }),
   borderColor: MAIN_DARK_BLUE
 }
 
@@ -157,7 +185,12 @@ const TemplateTransparent = (args) => {
   return (
     <div style={{ padding: '20px 10px' }}>
       <p>Value of the input {value}</p>
-      <SelectWithInput {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+      <SelectWithInput
+        {...args}
+        value={value}
+        onChange={handleChange}
+        onSelect={handleSelect}
+      />
     </div>
   )
 }
@@ -168,7 +201,11 @@ TemplateBackgroundTransparent.args = {
   name: 'test',
   placeholder: 'Defaul option',
   optionsBorderedBottom: false,
-  options: [...Array(20).keys()].map(ele => ({ label: `Option ${ele}`, value: `Value${ele}`, iconName: 'OrganizationIcon' })),
+  options: [...Array(20).keys()].map((ele) => ({
+    label: `Option ${ele}`,
+    value: `Value${ele}`,
+    iconName: 'OrganizationIcon'
+  })),
   borderColor: WHITE,
   mainColor: WHITE,
   backgroundColor: RICH_BLACK,

package/src/stories/forms/ToggleSwitch.stories.jsx

@@ -8,9 +8,15 @@ export default {
 
 const Template = ({ checked, ...args }) => {
   const [localChecked, setLocalChecked] = useState(checked)
-  const onChange = () => { setLocalChecked(!localChecked) }
+  const onChange = () => {
+    setLocalChecked(!localChecked)
+  }
   return (
-    <ToggleSwitch {...args} checked={localChecked} onChange={() => onChange()} />
+    <ToggleSwitch
+      {...args}
+      checked={localChecked}
+      onChange={() => onChange()}
+    />
   )
 }
 
@@ -27,7 +33,9 @@ Checked.args = {
   name: 'test',
   label: 'This is a label',
   checked: true,
-  onChange: () => { alert('checked') }
+  onChange: () => {
+    alert('checked')
+  }
 }
 
 export const Disabled = Template.bind({})
@@ -36,6 +44,8 @@ Disabled.args = {
   name: 'test',
   label: 'This is a label',
   checked: true,
-  onChange: () => { alert('checked') },
+  onChange: () => {
+    alert('checked')
+  },
   disabled: true
 }

package/src/stories/icons/Icons.stories.jsx

@@ -48,22 +48,49 @@ const CircleCloseIconTemplate = (args) => <CircleCloseIcon {...args} />
 export const CircleCloseIconDefault = CircleCloseIconTemplate.bind({})
 CircleCloseIconDefault.args = {}
 
-const WorkspaceIconsTemplate = () => (
-  [<WorkspaceStaticIcon key='a' />, <WorkspaceDynamicIcon key='b' />].map((component, index) => {
-    const listElement = []
-    listElement.push(React.cloneElement(component, { key: `0${index}` }))
-    listElement.push(React.cloneElement(component, { key: `1${index}`, size: 'small', color: 'main-green' }))
-    listElement.push(React.cloneElement(component, { key: `2${index}`, color: 'error-red' }))
-    listElement.push(React.cloneElement(component, { key: `3${index}`, size: 'small', color: 'error-red' }))
-    listElement.push(React.cloneElement(component, { key: `4${index}`, color: 'main-dark-blue' }))
-    listElement.push(React.cloneElement(component, { key: `5${index}`, size: 'small', color: 'main-dark-blue' }))
-    return listElement
-  })
-)
+const WorkspaceIconsTemplate = () =>
+  [<WorkspaceStaticIcon key='a' />, <WorkspaceDynamicIcon key='b' />].map(
+    (component, index) => {
+      const listElement = []
+      listElement.push(React.cloneElement(component, { key: `0${index}` }))
+      listElement.push(
+        React.cloneElement(component, {
+          key: `1${index}`,
+          size: 'small',
+          color: 'main-green'
+        })
+      )
+      listElement.push(
+        React.cloneElement(component, { key: `2${index}`, color: 'error-red' })
+      )
+      listElement.push(
+        React.cloneElement(component, {
+          key: `3${index}`,
+          size: 'small',
+          color: 'error-red'
+        })
+      )
+      listElement.push(
+        React.cloneElement(component, {
+          key: `4${index}`,
+          color: 'main-dark-blue'
+        })
+      )
+      listElement.push(
+        React.cloneElement(component, {
+          key: `5${index}`,
+          size: 'small',
+          color: 'main-dark-blue'
+        })
+      )
+      return listElement
+    }
+  )
 
 export const WorkspaceIconsAll = WorkspaceIconsTemplate.bind({})
 WorkspaceIconsAll.args = {}
 
-const LargeIconsTemplate = () => ([<UpgradeIcon key='b' size='extra-large' />].map(component => component))
+const LargeIconsTemplate = () =>
+  [<UpgradeIcon key='b' size='extra-large' />].map((component) => component)
 export const LargeIconsDefault = LargeIconsTemplate.bind({})
 LargeIconsDefault.args = {}

package/src/stories/logos/Logos.stories.jsx

@@ -56,13 +56,20 @@ const AllLogosTemplate = (args) => {
       {logos.map((LogoComponent, index) => (
         <div style={row} key={index}>
           <div style={col}>
-            <p style={paragraphClass}>#{index + 1}: {LogoComponent.name}</p>
+            <p style={paragraphClass}>
+              #{index + 1}: {LogoComponent.name}
+            </p>
           </div>
           <div style={col}>
             <LogoComponent key={LogoComponent.name} {...args} />
           </div>
           <div style={col}>
-            <LogoComponent key={LogoComponent.name} width={142} height={63} {...args} />
+            <LogoComponent
+              key={LogoComponent.name}
+              width={142}
+              height={63}
+              {...args}
+            />
           </div>
         </div>
       ))}