@platformatic/ui-components 0.2.16 → 0.2.19

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

@@ -35,18 +35,13 @@ Default.args = {
 const TemplateBorderMainDarkBlue = (args) => {
   const [value, setValue] = useState('')
 
-  function handleChange (event) {
-    setValue(event.target.value)
-  }
-
   function handleSelect (event) {
     setValue(event.detail.label)
   }
 
   return (
     <div style={{ backgroundColor: 'white', padding: '20px 10px' }}>
-      <p>Value of the input {value}</p>
-      <Select {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+      <Select {...args} value={value} onSelect={handleSelect} />
     </div>
   )
 }
@@ -54,10 +49,6 @@ const TemplateBorderMainDarkBlue = (args) => {
 const TemplateBorderMainDarkBlue2 = (args) => {
   const [value, setValue] = useState('')
 
-  function handleChange (event) {
-    setValue(event.target.value)
-  }
-
   function handleSelect (event) {
     setValue(event.detail.label)
   }
@@ -66,7 +57,7 @@ const TemplateBorderMainDarkBlue2 = (args) => {
     <>
       <div style={{ backgroundColor: 'white', padding: '20px 10px' }}>
         <p>Value of the input {value}</p>
-        <Select {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+        <Select {...args} value={value} onSelect={handleSelect} />
         <br />
         <Select placeholder='Disabled' disabled />
 
@@ -146,10 +137,6 @@ githubRepoExample.args = {
 const TemplateTransparent = (args) => {
   const [value, setValue] = useState('')
 
-  function handleChange (event) {
-    setValue(event.target.value)
-  }
-
   function handleSelect (event) {
     setValue(event.detail.label)
   }
@@ -157,7 +144,7 @@ const TemplateTransparent = (args) => {
   return (
     <div style={{ padding: '20px 10px' }}>
       <p>Value of the input {value}</p>
-      <Select {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+      <Select {...args} value={value} onSelect={handleSelect} />
     </div>
   )
 }

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

@@ -0,0 +1,176 @@
+'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'
+
+const divStyle = {
+  width: '100%',
+  height: 'auto',
+  padding: '20px',
+  backgroundColor: 'transparent'
+}
+
+export default {
+  title: 'Platformatic/Forms/SelectWithInput',
+  component: SelectWithInput,
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+      </div>
+    )
+  ]
+}
+
+const Template = (args) => <SelectWithInput {...args} />
+
+export const Default = Template.bind({})
+
+Default.args = {
+  name: 'test',
+  placeholder: 'Platformatic empty select',
+  borderColor: MAIN_GREEN
+}
+
+const TemplateBorderMainDarkBlue = (args) => {
+  const [value, setValue] = useState('')
+
+  function handleChange (event) {
+    setValue(event.target.value)
+  }
+
+  function handleSelect (event) {
+    setValue(event.detail.label)
+  }
+
+  return (
+    <div style={{ backgroundColor: 'white', padding: '20px 10px' }}>
+      <p>Value of the input {value}</p>
+      <SelectWithInput {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+    </div>
+  )
+}
+
+const TemplateBorderMainDarkBlue2 = (args) => {
+  const [value, setValue] = useState('')
+
+  function handleChange (event) {
+    setValue(event.target.value)
+  }
+
+  function handleSelect (event) {
+    setValue(event.detail.label)
+  }
+
+  return (
+    <>
+      <div style={{ backgroundColor: 'white', padding: '20px 10px' }}>
+        <p>Value of the input {value}</p>
+        <SelectWithInput {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+        <br />
+        <SelectWithInput placeholder='Disabled' disabled />
+
+      </div>
+    </>
+  )
+}
+
+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' })),
+  borderColor: MAIN_DARK_BLUE
+}
+
+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' }],
+  borderColor: MAIN_GREEN,
+  errorMessage: 'This is an error message'
+}
+
+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
+  }),
+  borderColor: MAIN_DARK_BLUE
+}
+
+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
+  }),
+  borderColor: MAIN_DARK_BLUE
+}
+
+const TemplateTransparent = (args) => {
+  const [value, setValue] = useState('')
+
+  function handleChange (event) {
+    setValue(event.target.value)
+  }
+
+  function handleSelect (event) {
+    setValue(event.detail.label)
+  }
+
+  return (
+    <div style={{ padding: '20px 10px' }}>
+      <p>Value of the input {value}</p>
+      <SelectWithInput {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+    </div>
+  )
+}
+
+export const TemplateBackgroundTransparent = TemplateTransparent.bind({})
+
+TemplateBackgroundTransparent.args = {
+  name: 'test',
+  placeholder: 'Defaul option',
+  optionsBorderedBottom: false,
+  options: [...Array(20).keys()].map(ele => ({ label: `Option ${ele}`, value: `Value${ele}`, iconName: 'OrganizationIcon' })),
+  borderColor: WHITE,
+  mainColor: WHITE,
+  backgroundColor: RICH_BLACK,
+  borderListColor: WHITE
+}