@platformatic/ui-components 0.1.104 → 0.1.105

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'
+}

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

@@ -0,0 +1,71 @@
+'use strict'
+import React, { useState } from 'react'
+import Select from '../../components/forms/Select'
+import { MAIN_DARK_BLUE, MAIN_GREEN } from '../../components/constants'
+
+const divStyle = {
+  width: '100%',
+  height: 'auto',
+  padding: '20px',
+  backgroundColor: 'transparent'
+}
+
+export default {
+  title: 'Platformatic/Forms/Select',
+  component: Select,
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+      </div>
+    )
+  ]
+}
+
+const Template = (args) => <Select {...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>
+      <Select {...args} value={value} onChange={handleChange} onSelect={handleSelect} />
+    </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}` })),
+  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'
+}

package/src/stories/forms/TextArea.stories.jsx

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