@platformatic/ui-components 0.3.6 → 0.4.0

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({})
 

package/src/stories/forms/Field.stories.jsx

@@ -20,13 +20,18 @@ export default {
   }
 }
 
-const SimpleTemplate = (args) => <div style={divStyle}><Field {...args} /></div>
+const SimpleTemplate = (args) => (
+  <div style={divStyle}>
+    <Field {...args} />
+  </div>
+)
 
 export const BasicField = SimpleTemplate.bind({})
 
 BasicField.args = {
   title: 'Field basic',
-  helper: 'A very very very very very very very very very very very very very very simple helper'
+  helper:
+    'A very very very very very very very very very very very very very very simple helper'
 }
 
 const InputTemplate = (args) => {
@@ -35,27 +40,55 @@ const InputTemplate = (args) => {
 
     switch (combinationSelected) {
       case 'button':
-        rendered = (<Button label='Button for a purpose' color='error-red' onClick={() => { alert('clicked') }} />)
+        rendered = (
+          <Button
+            label='Button for a purpose'
+            color='error-red'
+            onClick={() => {
+              alert('clicked')
+            }}
+          />
+        )
         break
       case 'input-buttons':
-        rendered =
-        (
+        rendered = (
           <>
-            <Input name='test' placeholder='Platformatic' errorMessage='this is an error message' />
-            <Button label='Button for some purposes' color='main-dark-blue' onClick={() => { alert('clicked') }} />
-            <Button label='Button for other purposes' color='error-red' onClick={() => { alert('clicked') }} />
+            <Input
+              name='test'
+              placeholder='Platformatic'
+              errorMessage='this is an error message'
+            />
+            <Button
+              label='Button for some purposes'
+              color='main-dark-blue'
+              onClick={() => {
+                alert('clicked')
+              }}
+            />
+            <Button
+              label='Button for other purposes'
+              color='error-red'
+              onClick={() => {
+                alert('clicked')
+              }}
+            />
           </>
         )
         break
       case 'input':
-        rendered = (<Input name='test' placeholder='Platformatic' />)
+        rendered = <Input name='test' placeholder='Platformatic' />
         break
       case 'input-button':
-        rendered =
-        (
+        rendered = (
           <>
             <Input name='test' placeholder='Platformatic' />
-            <Button label='Button Simple' color='main-dark-blue' onClick={() => { alert('clicked') }} />
+            <Button
+              label='Button Simple'
+              color='main-dark-blue'
+              onClick={() => {
+                alert('clicked')
+              }}
+            />
           </>
         )
         break
@@ -66,8 +99,12 @@ const InputTemplate = (args) => {
   }
   return (
     <div style={divStyle}>
-      {['input', 'input-button', 'input-buttons', 'button'].map(how => {
-        return (<Field key={how} {...args}>{renderChild(how)}</Field>)
+      {['input', 'input-button', 'input-buttons', 'button'].map((how) => {
+        return (
+          <Field key={how} {...args}>
+            {renderChild(how)}
+          </Field>
+        )
       })}
     </div>
   )
@@ -86,5 +123,6 @@ export const RedTitledField = SimpleTemplate.bind({})
 RedTitledField.args = {
   title: 'Red Field Title',
   titleColor: 'error-red',
-  helper: 'A very very very very very very very very very very very very very very simple helper'
+  helper:
+    'A very very very very very very very very very very very very very very simple helper'
 }

package/src/stories/forms/Input.stories.jsx

@@ -31,7 +31,11 @@ Default.args = {
   placeholder: 'Platformatic'
 }
 
-const TemplateBorderMainDarkBlue = (args) => <div style={{ backgroundColor: 'white', padding: '2px' }}><Input {...args} /></div>
+const TemplateBorderMainDarkBlue = (args) => (
+  <div style={{ backgroundColor: 'white', padding: '2px' }}>
+    <Input {...args} />
+  </div>
+)
 
 export const BorderMainDarkBlue = TemplateBorderMainDarkBlue.bind({})
 
@@ -81,7 +85,9 @@ IconBeforeAndAfter.args = {
     iconName: 'CopyPasteIcon',
     color: 'main-dark-blue',
     size: 'small',
-    onClick: () => { alert('clicked') }
+    onClick: () => {
+      alert('clicked')
+    }
   },
   afterIcon: {
     iconName: 'CircleAddIcon',

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
 }