@platformatic/ui-components 0.1.48 → 0.1.50

package/src/stories/Sidebar.stories.jsx

@@ -1,61 +1,61 @@
-'use strict'
-import { useState } from 'react'
-import Sidebar from '../components/Sidebar'
-import BorderedBox from '../components/BorderedBox'
-
-const divStyle = {
-  display: 'flex',
-  width: '100%',
-  minHeight: '400px',
-  gap: '10px'
-}
-
-export default {
-  title: 'Platformatic/Sidebar',
-  component: Sidebar,
-  decorators: [
-    (Story) => (
-      <div style={divStyle}>
-        <Story />
-        <BorderedBox>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</BorderedBox>
-      </div>
-    )
-  ]
-}
-
-const Template = (args) => <Sidebar {...args} />
-
-export const EmptySidebar = Template.bind({})
-
-EmptySidebar.args = {
-  title: 'Sidebar bar empty',
-  addTitle: 'Create',
-  onClickAdd: () => alert('clicked on add EmptySidebar'),
-  onClickSettings: () => alert('settings')
-}
-
-const FullSidebarTemplate = (args) => {
-  const [items, setItems] = useState([
-    { iconName: 'StaticWorkspaceIcon', subTitle: 'Subtitle', title: 'a very very very very very long title 1' },
-    { title: 'Title number 2', subTitle: 'Subtitle 2' },
-    { title: 'Another Title', subTitle: 'Subtitle 3', iconName: 'DynamicWorkspaceIcon' }
-  ])
-  function onClickAdd () {
-    const tmpItem = items.map(item => item)
-    tmpItem.push('Title number ' + (items.length + 1))
-    setItems(tmpItem)
-  }
-
-  return (
-    <Sidebar items={items} onClickAdd={() => onClickAdd()} {...args} />
-  )
-}
-
-export const FullSidebar = FullSidebarTemplate.bind({})
-
-FullSidebar.args = {
-  title: 'Sidebar bar Full',
-  addTitle: 'Create',
-  onClickItemSelected: (index) => alert('selected: ' + index),
-  onClickSettings: () => alert('settings')
-}
+'use strict'
+import { useState } from 'react'
+import Sidebar from '../components/Sidebar'
+import BorderedBox from '../components/BorderedBox'
+
+const divStyle = {
+  display: 'flex',
+  width: '100%',
+  minHeight: '400px',
+  gap: '10px'
+}
+
+export default {
+  title: 'Platformatic/Sidebar',
+  component: Sidebar,
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+        <BorderedBox>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</BorderedBox>
+      </div>
+    )
+  ]
+}
+
+const Template = (args) => <Sidebar {...args} />
+
+export const EmptySidebar = Template.bind({})
+
+EmptySidebar.args = {
+  title: 'Sidebar bar empty',
+  addTitle: 'Create',
+  onClickAdd: () => alert('clicked on add EmptySidebar'),
+  onClickSettings: () => alert('settings')
+}
+
+const FullSidebarTemplate = (args) => {
+  const [items, setItems] = useState([
+    { iconName: 'StaticWorkspaceIcon', subTitle: 'Subtitle', title: 'a very very very very very long title 1' },
+    { title: 'Title number 2', subTitle: 'Subtitle 2' },
+    { title: 'Another Title', subTitle: 'Subtitle 3', iconName: 'DynamicWorkspaceIcon' }
+  ])
+  function onClickAdd () {
+    const tmpItem = items.map(item => item)
+    tmpItem.push('Title number ' + (items.length + 1))
+    setItems(tmpItem)
+  }
+
+  return (
+    <Sidebar items={items} onClickAdd={() => onClickAdd()} {...args} />
+  )
+}
+
+export const FullSidebar = FullSidebarTemplate.bind({})
+
+FullSidebar.args = {
+  title: 'Sidebar bar Full',
+  addTitle: 'Create',
+  onClickItemSelected: (index) => alert('selected: ' + index),
+  onClickSettings: () => alert('settings')
+}

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