@platformatic/ui-components 0.1.32 → 0.1.34

package/src/lib/utils.js

@@ -1,23 +1,23 @@
-'use strict'
-
-function getColor (type, color) {
-  let convertedColor
-  switch (color) {
-    case 'green':
-      convertedColor = 'main-green'
-      break
-    case 'red':
-      convertedColor = 'error-red'
-      break
-    case 'white':
-      convertedColor = 'white'
-      break
-    default:
-      convertedColor = 'main-green'
-      break
-  }
-  return `${type}-${convertedColor}`
-}
-export {
-  getColor
-}
+'use strict'
+
+function getColor (type, color) {
+  let convertedColor
+  switch (color) {
+    case 'green':
+      convertedColor = 'main-green'
+      break
+    case 'red':
+      convertedColor = 'error-red'
+      break
+    case 'white':
+      convertedColor = 'white'
+      break
+    default:
+      convertedColor = 'main-green'
+      break
+  }
+  return `${type}-${convertedColor}`
+}
+export {
+  getColor
+}

package/src/main.jsx

@@ -1,9 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './styles/main.css'
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './styles/main.css'
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

package/src/stories/BorderedBox.stories.jsx

@@ -1,33 +1,33 @@
-'use strict'
-import BorderedBox from '../components/BorderedBox'
-export default {
-  title: 'Platformatic/BorderedBox',
-  component: BorderedBox,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    color: {
-      options: ['green', 'red', 'white'],
-      control: { type: ' radio' }
-    }
-  }
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <BorderedBox {...args}>Hello Platformatic</BorderedBox>
-
-export const Green = Template.bind({})
-
-Green.args = {
-  color: 'green'
-}
-export const Red = Template.bind({})
-
-Red.args = {
-  color: 'red'
-}
-
-export const White = Template.bind({})
-
-White.args = {
-  color: 'white'
-}
+'use strict'
+import BorderedBox from '../components/BorderedBox'
+export default {
+  title: 'Platformatic/BorderedBox',
+  component: BorderedBox,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    color: {
+      options: ['green', 'red', 'white'],
+      control: { type: ' radio' }
+    }
+  }
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <BorderedBox {...args}>Hello Platformatic</BorderedBox>
+
+export const Green = Template.bind({})
+
+Green.args = {
+  color: 'green'
+}
+export const Red = Template.bind({})
+
+Red.args = {
+  color: 'red'
+}
+
+export const White = Template.bind({})
+
+White.args = {
+  color: 'white'
+}

package/src/stories/BorderedText.stories.jsx

@@ -1,24 +1,24 @@
-'use strict'
-import BorderedText from '../components/BorderedText'
-export default {
-  title: 'Platformatic/BorderedText',
-  component: BorderedText,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    text: { control: 'string' }
-  }
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <BorderedText {...args} />
-
-export const Sample = Template.bind({})
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Sample.args = {
-  text: 'Hello Platformatic!'
-}
-export const Version = Template.bind({})
-
-Version.args = {
-  text: 'v1.2.3'
-}
+'use strict'
+import BorderedText from '../components/BorderedText'
+export default {
+  title: 'Platformatic/BorderedText',
+  component: BorderedText,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    text: { control: 'string' }
+  }
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <BorderedText {...args} />
+
+export const Sample = Template.bind({})
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Sample.args = {
+  text: 'Hello Platformatic!'
+}
+export const Version = Template.bind({})
+
+Version.args = {
+  text: 'v1.2.3'
+}

package/src/stories/Button.stories.jsx

@@ -1,107 +1,124 @@
-'use strict'
-import { faCheck } from '@fortawesome/free-solid-svg-icons'
-import { useState } from 'react'
-import Button from '../components/Button'
-
-export default {
-  title: 'Platformatic/Button',
-  component: Button,
-  argTypes: {
-    label: {
-      type: 'string',
-      control: 'text'
-    },
-    primary: {
-      type: 'boolean'
-    },
-    color: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: ['green', 'red']
-      }
-    }
-  }
-}
-
-const Template = (args) => <Button {...args} />
-
-export const PrimaryGreen = Template.bind({})
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-PrimaryGreen.args = {
-  primary: true,
-  label: 'Primary Green',
-  color: 'green'
-}
-
-export const SecondaryGreen = Template.bind({})
-SecondaryGreen.args = {
-  primary: false,
-  label: 'Secondary Green',
-  color: 'green'
-}
-
-export const PrimaryWithIcon = Template.bind({})
-PrimaryWithIcon.args = {
-  primary: true,
-  label: 'Primary with Icon',
-  icon: faCheck
-}
-
-export const SecondaryWithIcon = Template.bind({})
-SecondaryWithIcon.args = {
-  primary: false,
-  label: 'Secondary with Icon',
-  icon: faCheck
-
-}
-
-export const PrimaryRed = Template.bind({})
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-PrimaryRed.args = {
-  primary: true,
-  label: 'Primary Red',
-  color: 'red'
-}
-
-export const SecondaryRed = Template.bind({})
-SecondaryRed.args = {
-  primary: false,
-  label: 'Secondary Red',
-  color: 'red'
-}
-
-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' primary='true' onClick={() => setEnabled(!enabled)} />
-      </div>
-
-    </div>
-
-  )
-}
-
-export const DisabledGreen = DisabledTemplate.bind({})
-
-DisabledGreen.args = {
-  primary: true,
-  label: 'A simple button',
-  color: 'green',
-  disabeld: true
-}
-
-export const DisabledRed = DisabledTemplate.bind({})
-
-DisabledRed.args = {
-  primary: true,
-  label: 'A simple button',
-  color: 'red',
-  disabeld: true
-}
+'use strict'
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { useState } from 'react'
+import Button from '../components/Button'
+
+export default {
+  title: 'Platformatic/Button',
+  component: Button,
+  argTypes: {
+    label: {
+      type: 'string',
+      control: 'text'
+    },
+    bold: {
+      type: 'boolean'
+    },
+    buttonClass: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['primary', 'secondary', 'transparent']
+      }
+    },
+    color: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['green', 'red', 'white']
+      }
+    },
+    disabled: {
+      type: 'boolean'
+    },
+    size: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large', 'extra-large']
+      }
+    }
+  }
+}
+
+const Template = (args) => <Button {...args} />
+
+export const PrimaryGreen = Template.bind({})
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+PrimaryGreen.args = {
+  buttonClass: 'primary',
+  label: 'Primary Green',
+  color: 'green',
+  bold: true
+}
+
+export const SecondaryRed = Template.bind({})
+SecondaryRed.args = {
+  label: 'Secondary Green',
+  color: 'red'
+}
+
+export const TransparentWhite = Template.bind({})
+TransparentWhite.args = {
+  buttonClass: 'transparent',
+  label: 'Secondary Green',
+  color: 'white'
+}
+
+export const PrimaryWithIcon = Template.bind({})
+PrimaryWithIcon.args = {
+  buttonClass: 'primary',
+  label: 'Primary with Icon',
+  icon: faCheck
+}
+
+export const SecondaryWithIcon = Template.bind({})
+SecondaryWithIcon.args = {
+  buttonClass: 'secondary',
+  label: 'Secondary with Icon',
+  icon: faCheck,
+  color: 'white'
+}
+
+export const PrimaryRed = Template.bind({})
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+PrimaryRed.args = {
+  buttonClass: 'primary',
+  label: 'Primary Red',
+  color: 'red'
+}
+
+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' primary='true' onClick={() => setEnabled(!enabled)} />
+      </div>
+
+    </div>
+
+  )
+}
+
+export const DisabledGreen = DisabledTemplate.bind({})
+
+DisabledGreen.args = {
+  buttonClass: 'primary',
+  label: 'A simple button',
+  color: 'green',
+  disabled: true
+}
+
+export const DisabledRed = DisabledTemplate.bind({})
+
+DisabledRed.args = {
+  buttonClass: 'primary',
+  label: 'A simple button',
+  color: 'red',
+  disabled: true
+}

package/src/stories/ButtonFullRounded.stories.jsx

@@ -0,0 +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
+}

package/src/stories/Checkbox.stories.jsx

@@ -0,0 +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
+}

package/src/stories/DetailedMetric.stories.jsx

@@ -1,33 +1,33 @@
-'use strict'
-
-import DetailedMetric from '../components/DetailedMetric'
-
-export default {
-  title: 'Platformatic/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/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'
+  }
+}