@platformatic/ui-components 0.1.48 → 0.1.50

package/src/stories/Button.stories.jsx

@@ -1,114 +1,114 @@
-'use strict'
-import { faCheck } from '@fortawesome/free-solid-svg-icons'
-import { useState } from 'react'
-import Button from '../components/Button'
-
-const colors = ['main-green', 'dark-green', 'light-green', 'main-dark-blue', 'dark-blue', 'light-blue', 'white', 'error-red', 'tertiary-blue', 'transparent']
-
-export default {
-  title: 'Platformatic/Button',
-  component: Button,
-  argTypes: {
-    label: {
-      type: 'string',
-      control: 'text'
-    },
-    bold: {
-      type: 'boolean'
-    },
-    backgroundColor: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: colors
-      }
-    },
-    color: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: colors
-      }
-    },
-    disabled: {
-      type: 'boolean'
-    },
-    size: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: ['small', 'medium', 'large', 'extra-large']
-      }
-    },
-    hoverEffect: {
-      type: 'radio',
-      options: ['hover', 'underline']
-    },
-    bordered: {
-      type: 'boolean'
-    },
-    fullWidth: {
-      type: 'boolean'
-    }
-  }
-}
-
-const Template = (args) => <Button {...args} />
-
-export const OnlyLabel = Template.bind({})
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-OnlyLabel.args = {
-  label: 'Sample label',
-  backgroundColor: 'main-green'
-}
-
-export const BorderedRed = Template.bind({})
-BorderedRed.args = {
-  label: 'Borderer Red',
-  color: 'error-red'
-}
-
-export const TransparentWhite = Template.bind({})
-TransparentWhite.args = {
-  label: 'White',
-  color: 'white',
-  icon: faCheck
-}
-
-const DisabledTemplate = (args) => {
-  const [enabled, setEnabled] = useState(false)
-  return (
-    <div className='flex flex-col gap-y-6 text-white'>
-      <div>
-        <Button {...args} disabled={!enabled} onClick={() => alert('clicked')} />
-        <span className='ml-4 text-xl'>👈 This button is {enabled ? 'enabled' : 'disabled'}</span>
-      </div>
-      <div>
-        <Button label='Toggle Disabled' backgroundColor='main-green' onClick={() => setEnabled(!enabled)} />
-      </div>
-    </div>
-  )
-}
-
-export const DisabledGreen = DisabledTemplate.bind({})
-
-DisabledGreen.args = {
-  backgroundColor: 'main-green',
-  label: 'A simple button',
-  color: 'main-dark-blue',
-  disabled: true
-}
-
-export const DisabledRed = DisabledTemplate.bind({})
-DisabledRed.args = {
-  label: 'A simple button',
-  color: 'error-red',
-  disabled: true
-}
-
-export const UsingPlatformaticIcon = Template.bind({})
-UsingPlatformaticIcon.args = {
-  label: 'White',
-  color: 'white',
-  platformaticIcon: { iconName: 'GearIcon', color: 'white' }
-}
+'use strict'
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { useState } from 'react'
+import Button from '../components/Button'
+
+const colors = ['main-green', 'dark-green', 'light-green', 'main-dark-blue', 'dark-blue', 'light-blue', 'white', 'error-red', 'tertiary-blue', 'transparent']
+
+export default {
+  title: 'Platformatic/Button',
+  component: Button,
+  argTypes: {
+    label: {
+      type: 'string',
+      control: 'text'
+    },
+    bold: {
+      type: 'boolean'
+    },
+    backgroundColor: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: colors
+      }
+    },
+    color: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: colors
+      }
+    },
+    disabled: {
+      type: 'boolean'
+    },
+    size: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large', 'extra-large']
+      }
+    },
+    hoverEffect: {
+      type: 'radio',
+      options: ['hover', 'underline']
+    },
+    bordered: {
+      type: 'boolean'
+    },
+    fullWidth: {
+      type: 'boolean'
+    }
+  }
+}
+
+const Template = (args) => <Button {...args} />
+
+export const OnlyLabel = Template.bind({})
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+OnlyLabel.args = {
+  label: 'Sample label',
+  backgroundColor: 'main-green'
+}
+
+export const BorderedRed = Template.bind({})
+BorderedRed.args = {
+  label: 'Borderer Red',
+  color: 'error-red'
+}
+
+export const TransparentWhite = Template.bind({})
+TransparentWhite.args = {
+  label: 'White',
+  color: 'white',
+  icon: faCheck
+}
+
+const DisabledTemplate = (args) => {
+  const [enabled, setEnabled] = useState(false)
+  return (
+    <div className='flex flex-col gap-y-6 text-white'>
+      <div>
+        <Button {...args} disabled={!enabled} onClick={() => alert('clicked')} />
+        <span className='ml-4 text-xl'>👈 This button is {enabled ? 'enabled' : 'disabled'}</span>
+      </div>
+      <div>
+        <Button label='Toggle Disabled' backgroundColor='main-green' onClick={() => setEnabled(!enabled)} />
+      </div>
+    </div>
+  )
+}
+
+export const DisabledGreen = DisabledTemplate.bind({})
+
+DisabledGreen.args = {
+  backgroundColor: 'main-green',
+  label: 'A simple button',
+  color: 'main-dark-blue',
+  disabled: true
+}
+
+export const DisabledRed = DisabledTemplate.bind({})
+DisabledRed.args = {
+  label: 'A simple button',
+  color: 'error-red',
+  disabled: true
+}
+
+export const UsingPlatformaticIcon = Template.bind({})
+UsingPlatformaticIcon.args = {
+  label: 'White',
+  color: 'white',
+  platformaticIcon: { iconName: 'GearIcon', color: 'white' }
+}

package/src/stories/ButtonFullRounded.stories.jsx

@@ -1,61 +1,61 @@
-'use strict'
-import { faStop, faRefresh } from '@fortawesome/free-solid-svg-icons'
-import ButtonFullRounded from '../components/ButtonFullRounded'
-
-export default {
-  title: 'Platformatic/ButtonFullRounded',
-  component: ButtonFullRounded,
-  argTypes: {
-    label: {
-      type: 'string',
-      control: 'text'
-    },
-    bold: {
-      type: 'boolean'
-    },
-    color: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: ['green', 'red', 'white']
-      }
-    },
-    size: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: ['small', 'medium', 'large']
-      }
-    }
-  }
-}
-
-const Template = (args) => <ButtonFullRounded {...args} />
-
-export const WhiteLarge = Template.bind({})
-WhiteLarge.args = {
-  icon: faStop,
-  size: 'large'
-}
-
-export const GreenSmall = Template.bind({})
-GreenSmall.args = {
-  icon: faStop,
-  color: 'green',
-  size: 'small'
-}
-
-export const Disabled = Template.bind({})
-
-Disabled.args = {
-  icon: faRefresh,
-  disabled: true
-}
-
-export const DisabledRed = Template.bind({})
-
-DisabledRed.args = {
-  icon: faRefresh,
-  color: 'red',
-  disabled: true
-}
+'use strict'
+import { faStop, faRefresh } from '@fortawesome/free-solid-svg-icons'
+import ButtonFullRounded from '../components/ButtonFullRounded'
+
+export default {
+  title: 'Platformatic/ButtonFullRounded',
+  component: ButtonFullRounded,
+  argTypes: {
+    label: {
+      type: 'string',
+      control: 'text'
+    },
+    bold: {
+      type: 'boolean'
+    },
+    color: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['green', 'red', 'white']
+      }
+    },
+    size: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large']
+      }
+    }
+  }
+}
+
+const Template = (args) => <ButtonFullRounded {...args} />
+
+export const WhiteLarge = Template.bind({})
+WhiteLarge.args = {
+  icon: faStop,
+  size: 'large'
+}
+
+export const GreenSmall = Template.bind({})
+GreenSmall.args = {
+  icon: faStop,
+  color: 'green',
+  size: 'small'
+}
+
+export const Disabled = Template.bind({})
+
+Disabled.args = {
+  icon: faRefresh,
+  disabled: true
+}
+
+export const DisabledRed = Template.bind({})
+
+DisabledRed.args = {
+  icon: faRefresh,
+  color: 'red',
+  disabled: true
+}

package/src/stories/Checkbox.stories.jsx

@@ -1,27 +1,27 @@
-'use strict'
-import Checkbox from '../components/Checkbox'
-
-export default {
-  title: 'Platformatic/Checkbox',
-  component: Checkbox,
-  argTypes: {
-    id: {
-      type: 'string',
-      control: 'text'
-    },
-    disabled: {
-      type: 'boolean'
-    }
-  }
-}
-
-const Template = (args) => <Checkbox {...args} />
-
-export const CheckboxRegular = Template.bind({})
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-CheckboxRegular.args = {}
-
-export const CheckboxDisabled = Template.bind({})
-CheckboxDisabled.args = {
-  disabled: true
-}
+'use strict'
+import Checkbox from '../components/Checkbox'
+
+export default {
+  title: 'Platformatic/Checkbox',
+  component: Checkbox,
+  argTypes: {
+    id: {
+      type: 'string',
+      control: 'text'
+    },
+    disabled: {
+      type: 'boolean'
+    }
+  }
+}
+
+const Template = (args) => <Checkbox {...args} />
+
+export const CheckboxRegular = Template.bind({})
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+CheckboxRegular.args = {}
+
+export const CheckboxDisabled = Template.bind({})
+CheckboxDisabled.args = {
+  disabled: true
+}

package/src/stories/DetailedMetric.stories.jsx

@@ -1,33 +1,33 @@
-'use strict'
-
-import DetailedMetric from '../components/DetailedMetric'
-
-export default {
-  title: 'Platformatic/Metrics/DetailedMetric',
-  component: DetailedMetric
-}
-
-const Template = (args) => <DetailedMetric {...args} />
-
-export const Default = Template.bind({})
-
-Default.args = {
-  title: 'Requests',
-  color: 'green',
-  unit: 'ms',
-  value: 120,
-  pre: 'P90',
-  tooltip: 'This is a tooltip for the metric',
-  leftDetail: {
-    value: 600,
-    unit: 'ms',
-    color: 'green',
-    pre: 'P99'
-  },
-  rightDetail: {
-    value: 4.42,
-    unit: 's',
-    color: 'green',
-    pre: 'P95'
-  }
-}
+'use strict'
+
+import DetailedMetric from '../components/DetailedMetric'
+
+export default {
+  title: 'Platformatic/Metrics/DetailedMetric',
+  component: DetailedMetric
+}
+
+const Template = (args) => <DetailedMetric {...args} />
+
+export const Default = Template.bind({})
+
+Default.args = {
+  title: 'Requests',
+  color: 'green',
+  unit: 'ms',
+  value: 120,
+  pre: 'P90',
+  tooltip: 'This is a tooltip for the metric',
+  leftDetail: {
+    value: 600,
+    unit: 'ms',
+    color: 'green',
+    pre: 'P99'
+  },
+  rightDetail: {
+    value: 4.42,
+    unit: 's',
+    color: 'green',
+    pre: 'P95'
+  }
+}

package/src/stories/DropDown.stories.jsx

@@ -1,62 +1,62 @@
-'use strict'
-import DropDown from '../components/DropDown'
-import BorderedBox from '../components/BorderedBox'
-import HorizontalSeparator from '../components/HorizontalSeparator'
-import { useState } from 'react'
-export default {
-  title: 'Platformatic/DropDown',
-  component: DropDown,
-  decorators: [dd => <div className='text-white'>{dd()}</div>]
-}
-
-const Template = (args) => (
-  <div>
-    <DropDown {...args} />
-    <HorizontalSeparator />
-    <ContentThatLoads />
-  </div>
-)
-
-const ContentThatLoads = () => {
-  const [content, setContent] = useState(null)
-  setTimeout(() => {
-    setContent(<div className='mt-4'><BorderedBox>This is rendered after</BorderedBox></div>)
-  }, 1000)
-
-  return content
-}
-
-export const DefaultAlignment = Template.bind({})
-
-DefaultAlignment.args = {
-  header: 'My Menu',
-  items: [
-    <span key='1'>Menu 1</span>,
-    <span key='2'>Menu 2</span>,
-    <span key='3'>This is a very long menu item</span>
-  ]
-}
-
-export const AlignRight = Template.bind({})
-
-AlignRight.args = {
-  header: 'My Menu',
-  align: 'right',
-  items: [
-    <span key='1'>Menu 1</span>,
-    <span key='2'>Menu 2</span>,
-    <span key='3'>This is a very long menu item</span>
-  ]
-}
-
-export const AlignLeft = Template.bind({})
-
-AlignLeft.args = {
-  header: 'My Menu',
-  align: 'left',
-  items: [
-    <span key='1'>Menu 1</span>,
-    <span key='2'>Menu 2</span>,
-    <span key='3'>This is a very long menu item</span>
-  ]
-}
+'use strict'
+import DropDown from '../components/DropDown'
+import BorderedBox from '../components/BorderedBox'
+import HorizontalSeparator from '../components/HorizontalSeparator'
+import { useState } from 'react'
+export default {
+  title: 'Platformatic/DropDown',
+  component: DropDown,
+  decorators: [dd => <div className='text-white'>{dd()}</div>]
+}
+
+const Template = (args) => (
+  <div>
+    <DropDown {...args} />
+    <HorizontalSeparator />
+    <ContentThatLoads />
+  </div>
+)
+
+const ContentThatLoads = () => {
+  const [content, setContent] = useState(null)
+  setTimeout(() => {
+    setContent(<div className='mt-4'><BorderedBox>This is rendered after</BorderedBox></div>)
+  }, 1000)
+
+  return content
+}
+
+export const DefaultAlignment = Template.bind({})
+
+DefaultAlignment.args = {
+  header: 'My Menu',
+  items: [
+    <span key='1'>Menu 1</span>,
+    <span key='2'>Menu 2</span>,
+    <span key='3'>This is a very long menu item</span>
+  ]
+}
+
+export const AlignRight = Template.bind({})
+
+AlignRight.args = {
+  header: 'My Menu',
+  align: 'right',
+  items: [
+    <span key='1'>Menu 1</span>,
+    <span key='2'>Menu 2</span>,
+    <span key='3'>This is a very long menu item</span>
+  ]
+}
+
+export const AlignLeft = Template.bind({})
+
+AlignLeft.args = {
+  header: 'My Menu',
+  align: 'left',
+  items: [
+    <span key='1'>Menu 1</span>,
+    <span key='2'>Menu 2</span>,
+    <span key='3'>This is a very long menu item</span>
+  ]
+}

package/src/stories/FollowUs.stories.jsx

@@ -1,14 +1,14 @@
-import React from 'react'
-import FollowUs from '../components/FollowUs'
-
-export default {
-  title: 'Platformatic/FollowUs',
-  component: FollowUs
-}
-
-const Template = (args) => <FollowUs {...args} />
-
-export const FollowUsDefault = Template.bind({})
-FollowUsDefault.args = {
-  label: 'Follow us on'
-}
+import React from 'react'
+import FollowUs from '../components/FollowUs'
+
+export default {
+  title: 'Platformatic/FollowUs',
+  component: FollowUs
+}
+
+const Template = (args) => <FollowUs {...args} />
+
+export const FollowUsDefault = Template.bind({})
+FollowUsDefault.args = {
+  label: 'Follow us on'
+}

package/src/stories/GHLoginButton.stories.jsx

@@ -1,14 +1,14 @@
-import React from 'react'
-import GHLoginButton from '../components/GHLoginButton'
-
-export default {
-  title: 'Platformatic/GHLoginButton',
-  component: GHLoginButton
-}
-
-const Template = (args) => <GHLoginButton {...args} />
-
-export const Default = Template.bind({})
-Default.args = {
-  onClick: () => alert('clicked')
-}
+import React from 'react'
+import GHLoginButton from '../components/GHLoginButton'
+
+export default {
+  title: 'Platformatic/GHLoginButton',
+  component: GHLoginButton
+}
+
+const Template = (args) => <GHLoginButton {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  onClick: () => alert('clicked')
+}