@platformatic/ui-components 0.1.48 → 0.1.50

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

@@ -1,69 +1,89 @@
-'use strict'
-import React, { useState } from 'react'
-import Input from '../../components/forms/Input'
-import { faAdd, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
-
-export default {
-  title: 'Platformatic/Forms/Input',
-  component: Input
-}
-
-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',
-  beforeInputIcon: faAdd,
-  afterInputIcon: faCheckCircle,
-  afterInputIconColor: 'error-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: 'CopyIcon',
+    color: 'main-dark-blue',
+    size: 'small',
+    onClick: () => { alert('clicked') }
+  },
+  afterIcon: {
+    iconName: 'CircleAddIcon',
+    color: 'red'
+  }
+}

package/src/stories/forms/Preview.stories.jsx

@@ -1,57 +1,57 @@
-'use strict'
-import Preview from '../../components/forms/Preview'
-
-const divStyle = {
-  width: '100%',
-  height: 'auto',
-  padding: '10px',
-  backgroundColor: 'white'
-}
-
-export default {
-  title: 'Platformatic/Forms/Preview',
-  component: Preview,
-  decorators: [
-    (Story) => (
-      <div style={divStyle}>
-        <Story />
-      </div>
-    )
-  ]
-}
-
-const Template = (args) => <Preview {...args} />
-
-export const NormalPreview = Template.bind({})
-
-NormalPreview.args = {
-  title: 'My title',
-  value: 'My value'
-}
-
-export const WithLink = Template.bind({})
-
-WithLink.args = {
-  title: 'My value is a link',
-  value: 'https://example.com',
-  isLink: true
-}
-
-const TemplateWithChildren = (args) => <Preview {...args}><p>1st paragraph</p><p>2nd paragraph</p></Preview>
-
-export const WithChildren = TemplateWithChildren.bind({})
-
-WithChildren.args = {
-  title: 'My title',
-  value: 'My value'
-}
-
-export const WithIcon = Template.bind({})
-
-WithIcon.args = {
-  title: 'My title',
-  value: 'My value',
-  afterValueIcon: 'StaticWorkspaceIcon',
-  afterValueIconColor: 'green',
-  onClickAfterValueIcon: () => alert('icon clicked')
-}
+'use strict'
+import Preview from '../../components/forms/Preview'
+
+const divStyle = {
+  width: '100%',
+  height: 'auto',
+  padding: '10px',
+  backgroundColor: 'white'
+}
+
+export default {
+  title: 'Platformatic/Forms/Preview',
+  component: Preview,
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+      </div>
+    )
+  ]
+}
+
+const Template = (args) => <Preview {...args} />
+
+export const NormalPreview = Template.bind({})
+
+NormalPreview.args = {
+  title: 'My title',
+  value: 'My value'
+}
+
+export const WithLink = Template.bind({})
+
+WithLink.args = {
+  title: 'My value is a link',
+  value: 'https://example.com',
+  isLink: true
+}
+
+const TemplateWithChildren = (args) => <Preview {...args}><p>1st paragraph</p><p>2nd paragraph</p></Preview>
+
+export const WithChildren = TemplateWithChildren.bind({})
+
+WithChildren.args = {
+  title: 'My title',
+  value: 'My value'
+}
+
+export const WithIcon = Template.bind({})
+
+WithIcon.args = {
+  title: 'My title',
+  value: 'My value',
+  afterValueIcon: 'StaticWorkspaceIcon',
+  afterValueIconColor: 'green',
+  onClickAfterValueIcon: () => alert('icon clicked')
+}

package/src/stories/forms/ToggleSwitch.stories.jsx

@@ -1,15 +1,15 @@
-'use strict'
-import ToggleSwitch from '../../components/forms/ToggleSwitch'
-export default {
-  title: 'Platformatic/Forms/ToggleSwitch',
-  component: ToggleSwitch
-}
-
-const Template = (args) => <ToggleSwitch {...args} />
-
-export const Default = Template.bind({})
-
-Default.args = {
-  name: 'test',
-  label: 'This is a label'
-}
+'use strict'
+import ToggleSwitch from '../../components/forms/ToggleSwitch'
+export default {
+  title: 'Platformatic/Forms/ToggleSwitch',
+  component: ToggleSwitch
+}
+
+const Template = (args) => <ToggleSwitch {...args} />
+
+export const Default = Template.bind({})
+
+Default.args = {
+  name: 'test',
+  label: 'This is a label'
+}

package/src/stories/icons/Icons.stories.jsx

@@ -1,74 +1,74 @@
-import React from 'react'
-import PullRequestIcon from '../../components/icons/PullRequestIcon'
-import CloseIcon from '../../components/icons/CloseIcon'
-import CircleCloseIcon from '../../components/icons/CircleCloseIcon'
-import TriangleExclamationIcon from '../../components/icons/TriangleExclamationIcon'
-import StaticWorkspaceIcon from '../../components/icons/StaticWorkspaceIcon'
-import CreatedWorkspaceIcon from '../../components/icons/CreatedWorkspaceIcon'
-import UpgradeIcon from '../../components/icons/UpgradeIcon'
-import DynamicWorkspaceIcon from '../../components/icons/DynamicWorkspaceIcon'
-
-const divStyle = {
-  display: 'flex',
-  width: '100%',
-  minHeight: '400px',
-  gap: '10px',
-  backgroundColor: 'white'
-}
-
-export default {
-  title: 'Platformatic/Icons',
-  component: PullRequestIcon,
-  decorators: [
-    (Story) => (
-      <div style={divStyle}>
-        <Story />
-      </div>
-    )
-  ],
-  argTypes: {
-    color: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: ['green', 'white', 'red']
-      }
-    }
-  }
-}
-
-const PullRequestIconTemplate = (args) => <PullRequestIcon {...args} />
-export const PullRequestIconDefault = PullRequestIconTemplate.bind({})
-PullRequestIconDefault.args = {}
-
-const CloseIconTemplate = (args) => <CloseIcon {...args} />
-export const CloseIconDefault = CloseIconTemplate.bind({})
-CloseIconDefault.args = {}
-
-const CircleCloseIconTemplate = (args) => <CircleCloseIcon {...args} />
-export const CircleCloseIconDefault = CircleCloseIconTemplate.bind({})
-CircleCloseIconDefault.args = {}
-
-const TriangleExclamationIconTemplate = (args) => <TriangleExclamationIcon {...args} />
-export const TriangleExclamationIconDefault = TriangleExclamationIconTemplate.bind({})
-TriangleExclamationIconDefault.args = {}
-
-const WorkspaceIconsTemplate = () => (
-  [<StaticWorkspaceIcon key='a' />, <DynamicWorkspaceIcon key='b' />].map((component, index) => {
-    const listElement = []
-    listElement.push(React.cloneElement(component, { key: `0${index}` }))
-    listElement.push(React.cloneElement(component, { key: `1${index}`, size: 'small', color: 'green' }))
-    listElement.push(React.cloneElement(component, { key: `2${index}`, color: 'red' }))
-    listElement.push(React.cloneElement(component, { key: `3${index}`, size: 'small', color: 'red' }))
-    listElement.push(React.cloneElement(component, { key: `4${index}`, color: 'main-dark-blue' }))
-    listElement.push(React.cloneElement(component, { key: `5${index}`, size: 'small', color: 'main-dark-blue' }))
-    return listElement
-  })
-)
-
-export const WorkspaceIconsAll = WorkspaceIconsTemplate.bind({})
-WorkspaceIconsAll.args = {}
-
-const LargeIconsTemplate = () => ([<CreatedWorkspaceIcon key='a' size='extra-large' />, <UpgradeIcon key='b' size='extra-large' />].map(component => component))
-export const LargeIconsDefault = LargeIconsTemplate.bind({})
-LargeIconsDefault.args = {}
+import React from 'react'
+import PullRequestIcon from '../../components/icons/PullRequestIcon'
+import CloseIcon from '../../components/icons/CloseIcon'
+import CircleCloseIcon from '../../components/icons/CircleCloseIcon'
+import TriangleExclamationIcon from '../../components/icons/TriangleExclamationIcon'
+import StaticWorkspaceIcon from '../../components/icons/StaticWorkspaceIcon'
+import CreatedWorkspaceIcon from '../../components/icons/CreatedWorkspaceIcon'
+import UpgradeIcon from '../../components/icons/UpgradeIcon'
+import DynamicWorkspaceIcon from '../../components/icons/DynamicWorkspaceIcon'
+
+const divStyle = {
+  display: 'flex',
+  width: '100%',
+  minHeight: '400px',
+  gap: '10px',
+  backgroundColor: 'white'
+}
+
+export default {
+  title: 'Platformatic/Icons',
+  component: PullRequestIcon,
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+      </div>
+    )
+  ],
+  argTypes: {
+    color: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['green', 'white', 'red']
+      }
+    }
+  }
+}
+
+const PullRequestIconTemplate = (args) => <PullRequestIcon {...args} />
+export const PullRequestIconDefault = PullRequestIconTemplate.bind({})
+PullRequestIconDefault.args = {}
+
+const CloseIconTemplate = (args) => <CloseIcon {...args} />
+export const CloseIconDefault = CloseIconTemplate.bind({})
+CloseIconDefault.args = {}
+
+const CircleCloseIconTemplate = (args) => <CircleCloseIcon {...args} />
+export const CircleCloseIconDefault = CircleCloseIconTemplate.bind({})
+CircleCloseIconDefault.args = {}
+
+const TriangleExclamationIconTemplate = (args) => <TriangleExclamationIcon {...args} />
+export const TriangleExclamationIconDefault = TriangleExclamationIconTemplate.bind({})
+TriangleExclamationIconDefault.args = {}
+
+const WorkspaceIconsTemplate = () => (
+  [<StaticWorkspaceIcon key='a' />, <DynamicWorkspaceIcon key='b' />].map((component, index) => {
+    const listElement = []
+    listElement.push(React.cloneElement(component, { key: `0${index}` }))
+    listElement.push(React.cloneElement(component, { key: `1${index}`, size: 'small', color: 'green' }))
+    listElement.push(React.cloneElement(component, { key: `2${index}`, color: 'red' }))
+    listElement.push(React.cloneElement(component, { key: `3${index}`, size: 'small', color: 'red' }))
+    listElement.push(React.cloneElement(component, { key: `4${index}`, color: 'main-dark-blue' }))
+    listElement.push(React.cloneElement(component, { key: `5${index}`, size: 'small', color: 'main-dark-blue' }))
+    return listElement
+  })
+)
+
+export const WorkspaceIconsAll = WorkspaceIconsTemplate.bind({})
+WorkspaceIconsAll.args = {}
+
+const LargeIconsTemplate = () => ([<CreatedWorkspaceIcon key='a' size='extra-large' />, <UpgradeIcon key='b' size='extra-large' />].map(component => component))
+export const LargeIconsDefault = LargeIconsTemplate.bind({})
+LargeIconsDefault.args = {}

package/src/styles/main.css

@@ -1,16 +1,16 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  @apply bg-main-dark-blue;
-  font-family: 'Montserrat';
-}
-a {
-  @apply text-tertiary-blue;
-}
-
-input {
-  background-color: transparent;
-
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  @apply bg-main-dark-blue;
+  font-family: 'Montserrat';
+}
+a {
+  @apply text-tertiary-blue;
+}
+
+input {
+  background-color: transparent;
+
 }

package/tailwind.config.cjs

@@ -1,60 +1,60 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./src/**/*.{html,jsx}'],
-  theme: {
-    container: {
-      center: true
-    },
-    extend: {
-      screens: {
-        lg: '1440px'
-        // => @media (min-width: 1440px) { ... }
-      },
-      boxShadow: {
-        wrap: '0px 0px 20px rgba(0, 0, 0, 0.6)',
-        'main-green': '0px 0px 10px rgba(33, 250, 144, 0.5)',
-        'dark-green': '0px 0px 10px rgba(2, 120, 63, 1)',
-        'light-green': '0px 0px 10px rgba(33, 241, 144, 0.5)',
-        'main-dark-blue': '0px 0px 10px rgba(33, 250, 144, 0.5)',
-        'dark-blue': '0px 0px 10px rgba(0, 52, 79, 0.5)',
-        'light-blue': '0px 0px 10px rgba(233, 247, 255, 0.5)',
-        'error-red': '0px 0px 10px rgba(250, 33, 33, 0.5)',
-        'tertiary-blue': '0px 0px 10px rgba(37, 136, 228, 0.5)'
-      }
-    },
-    colors: {
-      'main-green': '#21FA90',
-      'dark-green': '#02783F',
-      'light-green': '#21F190',
-      'main-dark-blue': '#00283D',
-      'dark-blue': '#00344F',
-      'light-blue': '#E9F7FF',
-      white: '#FFFFFF',
-      'error-red': '#FA2121',
-      'tertiary-blue': '#2588E4',
-      transparent: 'transparent'
-    },
-    fontFamily: {
-      sans: ['Montserrat']
-    },
-    letterSpacing: {
-      tighter: '-.05em',
-      tight: '-.025em',
-      normal: '0',
-      wide: '.025em',
-      wider: '.05em',
-      widest: '.1em',
-      'more-widest': '.15em',
-      'super-widest': '.25em'
-    }
-  },
-  safelist: [
-    'border-error-red',
-    'border-main-green',
-    'text-3xl',
-    'text-4xl',
-    'text-5xl',
-    'text-6xl'
-  ],
-  plugins: []
-}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{html,jsx}'],
+  theme: {
+    container: {
+      center: true
+    },
+    extend: {
+      screens: {
+        lg: '1440px'
+        // => @media (min-width: 1440px) { ... }
+      },
+      boxShadow: {
+        wrap: '0px 0px 20px rgba(0, 0, 0, 0.6)',
+        'main-green': '0px 0px 10px rgba(33, 250, 144, 0.5)',
+        'dark-green': '0px 0px 10px rgba(2, 120, 63, 1)',
+        'light-green': '0px 0px 10px rgba(33, 241, 144, 0.5)',
+        'main-dark-blue': '0px 0px 10px rgba(33, 250, 144, 0.5)',
+        'dark-blue': '0px 0px 10px rgba(0, 52, 79, 0.5)',
+        'light-blue': '0px 0px 10px rgba(233, 247, 255, 0.5)',
+        'error-red': '0px 0px 10px rgba(250, 33, 33, 0.5)',
+        'tertiary-blue': '0px 0px 10px rgba(37, 136, 228, 0.5)'
+      }
+    },
+    colors: {
+      'main-green': '#21FA90',
+      'dark-green': '#02783F',
+      'light-green': '#21F190',
+      'main-dark-blue': '#00283D',
+      'dark-blue': '#00344F',
+      'light-blue': '#E9F7FF',
+      white: '#FFFFFF',
+      'error-red': '#FA2121',
+      'tertiary-blue': '#2588E4',
+      transparent: 'transparent'
+    },
+    fontFamily: {
+      sans: ['Montserrat']
+    },
+    letterSpacing: {
+      tighter: '-.05em',
+      tight: '-.025em',
+      normal: '0',
+      wide: '.025em',
+      wider: '.05em',
+      widest: '.1em',
+      'more-widest': '.15em',
+      'super-widest': '.25em'
+    }
+  },
+  safelist: [
+    'border-error-red',
+    'border-main-green',
+    'text-3xl',
+    'text-4xl',
+    'text-5xl',
+    'text-6xl'
+  ],
+  plugins: []
+}

package/vite.config.js

@@ -1,6 +1,6 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-/** @type {import('vite').UserConfig} */
-export default defineConfig({
-  plugins: [react()]
-})
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+/** @type {import('vite').UserConfig} */
+export default defineConfig({
+  plugins: [react()]
+})

package/vitest.config.js

@@ -1,14 +1,14 @@
-/// <reference types="vitest" />
-
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
-  plugins: [react()],
-  test: {
-    globals: true,
-    environment: 'happy-dom',
-    exclude: ['node_modules']
-  }
-
-})
+/// <reference types="vitest" />
+
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    exclude: ['node_modules']
+  }
+
+})