@platformatic/ui-components 0.1.49 → 0.1.51

package/src/stories/SimpleMetric.stories.jsx

@@ -1,41 +1,41 @@
-'use strict'
-
-import SimpleMetric from '../components/SimpleMetric'
-
-export default {
-  title: 'Platformatic/Metrics/SimpleMetric',
-  component: SimpleMetric
-}
-
-const Template = (args) => <SimpleMetric {...args} />
-
-export const Green = Template.bind({})
-
-Green.args = {
-  title: 'Requests',
-  color: 'green',
-  unit: 'ms',
-  value: 120,
-  tooltip: 'This is a tooltip for the metric'
-}
-
-export const Red = Template.bind({})
-
-Red.args = {
-  title: 'Requests',
-  color: 'red',
-  unit: 'ms',
-  value: 120,
-  tooltip: 'This is a tooltip for the metric'
-}
-
-export const WithPrefix = Template.bind({})
-
-WithPrefix.args = {
-  title: 'Requests',
-  color: 'green',
-  unit: 'ms',
-  value: 120,
-  pre: 'P90',
-  tooltip: 'This is a tooltip for the metric'
-}
+'use strict'
+
+import SimpleMetric from '../components/SimpleMetric'
+
+export default {
+  title: 'Platformatic/Metrics/SimpleMetric',
+  component: SimpleMetric
+}
+
+const Template = (args) => <SimpleMetric {...args} />
+
+export const Green = Template.bind({})
+
+Green.args = {
+  title: 'Requests',
+  color: 'green',
+  unit: 'ms',
+  value: 120,
+  tooltip: 'This is a tooltip for the metric'
+}
+
+export const Red = Template.bind({})
+
+Red.args = {
+  title: 'Requests',
+  color: 'red',
+  unit: 'ms',
+  value: 120,
+  tooltip: 'This is a tooltip for the metric'
+}
+
+export const WithPrefix = Template.bind({})
+
+WithPrefix.args = {
+  title: 'Requests',
+  color: 'green',
+  unit: 'ms',
+  value: 120,
+  pre: 'P90',
+  tooltip: 'This is a tooltip for the metric'
+}

package/src/stories/Status.stories.jsx

@@ -1,31 +1,31 @@
-'use strict'
-import Status from '../components/Status'
-
-export default {
-  title: 'Platformatic/Status',
-  component: Status,
-  argTypes: {}
-}
-
-const Template = (args) => <Status {...args} />
-
-export const White = Template.bind({})
-
-White.args = {
-  color: 'white',
-  status: 'available'
-}
-
-export const Green = Template.bind({})
-
-Green.args = {
-  color: 'green',
-  status: 'online'
-}
-
-export const Red = Template.bind({})
-
-Red.args = {
-  color: 'red',
-  status: 'offline'
-}
+'use strict'
+import Status from '../components/Status'
+
+export default {
+  title: 'Platformatic/Status',
+  component: Status,
+  argTypes: {}
+}
+
+const Template = (args) => <Status {...args} />
+
+export const White = Template.bind({})
+
+White.args = {
+  color: 'white',
+  status: 'available'
+}
+
+export const Green = Template.bind({})
+
+Green.args = {
+  color: 'green',
+  status: 'online'
+}
+
+export const Red = Template.bind({})
+
+Red.args = {
+  color: 'red',
+  status: 'offline'
+}

package/src/stories/TextWithLabel.stories.jsx

@@ -1,25 +1,25 @@
-'use strict'
-
-import TextWithLabel from '../components/TextWithLabel'
-export default {
-  title: 'Platformatic/TextWithLabel',
-  component: TextWithLabel,
-  argTypes: {
-    label: { control: 'text' },
-    text: { control: 'text' }
-  }
-}
-const Template = (args) => <TextWithLabel {...args} />
-
-export const Standard = Template.bind({})
-
-Standard.args = {
-  label: 'Created By',
-  text: 'Platformatic Team'
-}
-
-export const WithLink = (args) => <TextWithLabel {...args}><a href='https://example.com'>Standard Link</a></TextWithLabel>
-
-WithLink.args = {
-  label: 'External Link'
-}
+'use strict'
+
+import TextWithLabel from '../components/TextWithLabel'
+export default {
+  title: 'Platformatic/TextWithLabel',
+  component: TextWithLabel,
+  argTypes: {
+    label: { control: 'text' },
+    text: { control: 'text' }
+  }
+}
+const Template = (args) => <TextWithLabel {...args} />
+
+export const Standard = Template.bind({})
+
+Standard.args = {
+  label: 'Created By',
+  text: 'Platformatic Team'
+}
+
+export const WithLink = (args) => <TextWithLabel {...args}><a href='https://example.com'>Standard Link</a></TextWithLabel>
+
+WithLink.args = {
+  label: 'External Link'
+}

package/src/stories/TwoColumnsLayout.stories.jsx

@@ -1,42 +1,42 @@
-'use strict'
-import TwoColumnsLayout from '../components/layouts/TwoColumnsLayout'
-import BorderedBox from '../components/BorderedBox'
-export default {
-  title: 'Platformatic/TwoColumnsLayout',
-  component: TwoColumnsLayout
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  /* argTypes: {
-    gridTemplate: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: ['Default', 'Columns', 'Rows', 'Responsive' ],
-      }
-    }
-  } */
-}
-
-// 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>
-
-export const Default = Template.bind({})
-
-Default.args = { }
-
-export const Columns = Template.bind({})
-
-Columns.args = {
-  gridTemplate: 'columns'
-}
-
-export const Rows = Template.bind({})
-
-Rows.args = {
-  gridTemplate: 'rows'
-}
-
-export const Responsive = Template.bind({})
-
-Responsive.args = {
-  gridTemplate: 'responsive'
-}
+'use strict'
+import TwoColumnsLayout from '../components/layouts/TwoColumnsLayout'
+import BorderedBox from '../components/BorderedBox'
+export default {
+  title: 'Platformatic/TwoColumnsLayout',
+  component: TwoColumnsLayout
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  /* argTypes: {
+    gridTemplate: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['Default', 'Columns', 'Rows', 'Responsive' ],
+      }
+    }
+  } */
+}
+
+// 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>
+
+export const Default = Template.bind({})
+
+Default.args = { }
+
+export const Columns = Template.bind({})
+
+Columns.args = {
+  gridTemplate: 'columns'
+}
+
+export const Rows = Template.bind({})
+
+Rows.args = {
+  gridTemplate: 'rows'
+}
+
+export const Responsive = Template.bind({})
+
+Responsive.args = {
+  gridTemplate: 'responsive'
+}

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

@@ -1,81 +1,89 @@
-'use strict'
-import Field from '../../components/forms/Field'
-import Button from '../../components/Button'
-import Input from '../../components/forms/Input'
-
-const divStyle = {
-  width: '100%',
-  height: 'auto',
-  padding: '10px',
-  backgroundColor: 'white'
-}
-
-export default {
-  title: 'Platformatic/Forms/Field',
-  component: Field,
-  parameters: {
-    backgrounds: {
-      default: 'white'
-    }
-  }
-}
-
-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'
-}
-
-const InputTemplate = (args) => {
-  function renderChild (combinationSelected) {
-    let rendered = <></>
-
-    switch (combinationSelected) {
-      case 'button':
-        rendered = (<Button label='Button for a purpose' color='error-red' onClick={() => { alert('clicked') }} />)
-        break
-      case 'input-buttons':
-        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') }} />
-          </>
-        )
-        break
-      case 'input':
-        rendered = (<Input name='test' placeholder='Platformatic' />)
-        break
-      case 'input-button':
-        rendered =
-        (
-          <>
-            <Input name='test' placeholder='Platformatic' />
-            <Button label='Button Simple' color='main-dark-blue' onClick={() => { alert('clicked') }} />
-          </>
-        )
-        break
-      default:
-        break
-    }
-    return rendered
-  }
-  return (
-    <div style={divStyle}>
-      {['input', 'input-button', 'input-buttons', 'button'].map(how => {
-        return (<Field key={how} {...args}>{renderChild(how)}</Field>)
-      })}
-    </div>
-  )
-}
-
-export const WithInput = InputTemplate.bind({})
-
-WithInput.args = {
-  title: 'Different cases',
-  helper: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-}
+'use strict'
+import Field from '../../components/forms/Field'
+import Button from '../../components/Button'
+import Input from '../../components/forms/Input'
+
+const divStyle = {
+  width: '100%',
+  height: 'auto',
+  padding: '10px',
+  backgroundColor: 'white'
+}
+
+export default {
+  title: 'Platformatic/Forms/Field',
+  component: Field,
+  parameters: {
+    backgrounds: {
+      default: 'white'
+    }
+  }
+}
+
+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'
+}
+
+const InputTemplate = (args) => {
+  function renderChild (combinationSelected) {
+    let rendered = <></>
+
+    switch (combinationSelected) {
+      case 'button':
+        rendered = (<Button label='Button for a purpose' color='error-red' onClick={() => { alert('clicked') }} />)
+        break
+      case 'input-buttons':
+        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') }} />
+          </>
+        )
+        break
+      case 'input':
+        rendered = (<Input name='test' placeholder='Platformatic' />)
+        break
+      case 'input-button':
+        rendered =
+        (
+          <>
+            <Input name='test' placeholder='Platformatic' />
+            <Button label='Button Simple' color='main-dark-blue' onClick={() => { alert('clicked') }} />
+          </>
+        )
+        break
+      default:
+        break
+    }
+    return rendered
+  }
+  return (
+    <div style={divStyle}>
+      {['input', 'input-button', 'input-buttons', 'button'].map(how => {
+        return (<Field key={how} {...args}>{renderChild(how)}</Field>)
+      })}
+    </div>
+  )
+}
+
+export const WithInput = InputTemplate.bind({})
+
+WithInput.args = {
+  title: 'Different cases',
+  helper: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+}
+
+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'
+}

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

@@ -1,89 +1,89 @@
-'use strict'
-import React, { useState } from 'react'
-import Input from '../../components/forms/Input'
-
-const divStyle = {
-  width: '100%',
-  height: 'auto',
-  padding: '20px',
-  backgroundColor: 'white'
-}
-
-export default {
-  title: 'Platformatic/Forms/Input',
-  component: Input,
-  decorators: [
-    (Story) => (
-      <div style={divStyle}>
-        <Story />
-      </div>
-    )
-  ]
-}
-
-const Template = (args) => <Input {...args} />
-
-export const Default = Template.bind({})
-
-Default.args = {
-  name: 'test',
-  placeholder: 'Platformatic'
-}
-
-const TemplateBorderMainDarkBlue = (args) => <div style={{ backgroundColor: 'white', padding: '2px' }}><Input {...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'
-}
-
-const TemplateValuedAndAlertChange = (args) => {
-  const [value, setValue] = useState('Initial value')
-
-  function handleChange (event) {
-    setValue(event.target.value)
-  }
-
-  return (
-    <>
-      <p>Value of the input {value}</p>
-      <Input {...args} value={value} onChange={handleChange} />
-    </>
-  )
-}
-
-export const ValuedAndAlertChange = TemplateValuedAndAlertChange.bind({})
-
-ValuedAndAlertChange.args = {
-  name: 'test',
-  placeholder: 'Platformatic'
-}
-
-export const IconBeforeAndAfter = Template.bind({})
-
-IconBeforeAndAfter.args = {
-  name: 'test',
-  placeholder: 'Platformatic',
-  beforeIcon: {
-    iconName: 'CopyIcon',
-    color: 'main-dark-blue',
-    size: 'small',
-    onClick: () => { alert('clicked') }
-  },
-  afterIcon: {
-    iconName: 'CircleAddIcon',
-    color: 'red'
-  }
-}
+'use strict'
+import React, { useState } from 'react'
+import Input from '../../components/forms/Input'
+
+const divStyle = {
+  width: '100%',
+  height: 'auto',
+  padding: '20px',
+  backgroundColor: 'white'
+}
+
+export default {
+  title: 'Platformatic/Forms/Input',
+  component: Input,
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+      </div>
+    )
+  ]
+}
+
+const Template = (args) => <Input {...args} />
+
+export const Default = Template.bind({})
+
+Default.args = {
+  name: 'test',
+  placeholder: 'Platformatic'
+}
+
+const TemplateBorderMainDarkBlue = (args) => <div style={{ backgroundColor: 'white', padding: '2px' }}><Input {...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'
+}
+
+const TemplateValuedAndAlertChange = (args) => {
+  const [value, setValue] = useState('Initial value')
+
+  function handleChange (event) {
+    setValue(event.target.value)
+  }
+
+  return (
+    <>
+      <p>Value of the input {value}</p>
+      <Input {...args} value={value} onChange={handleChange} />
+    </>
+  )
+}
+
+export const ValuedAndAlertChange = TemplateValuedAndAlertChange.bind({})
+
+ValuedAndAlertChange.args = {
+  name: 'test',
+  placeholder: 'Platformatic'
+}
+
+export const IconBeforeAndAfter = Template.bind({})
+
+IconBeforeAndAfter.args = {
+  name: 'test',
+  placeholder: 'Platformatic',
+  beforeIcon: {
+    iconName: 'CopyPasteIcon',
+    color: 'main-dark-blue',
+    size: 'small',
+    onClick: () => { alert('clicked') }
+  },
+  afterIcon: {
+    iconName: 'CircleAddIcon',
+    color: 'red'
+  }
+}