@platformatic/ui-components 0.1.37 → 0.1.39

package/src/components/forms/ToggleSwitch.module.css

@@ -0,0 +1,43 @@
+.container {
+  @apply flex w-full h-10 items-center;
+}
+.switch {
+  @apply relative inline-block w-[50px] h-[24px];
+}
+.switch input { 
+  @apply opacity-0 w-0 h-0;
+}
+.slider {
+  @apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 h-full;
+  background-color: #707070;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+.label {
+  @apply px-2 text-xs font-normal text-main-dark-blue;
+}
+.slider:before {
+  @apply absolute h-4 w-4 left-[4px] bottom-[4px] bg-white;
+  content: "";
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  @apply bg-main-green;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 100px;
+}
+
+.slider.round:before {
+  @apply rounded-full;
+}

package/src/components/forms/index.js

@@ -0,0 +1,8 @@
+import Input from './Input'
+import Field from './Field'
+import Preview from './Preview'
+import ToggleSwitch from './ToggleSwitch'
+
+export default {
+  Input, Field, Preview, ToggleSwitch
+}

package/src/components/icons/Icons.module.css

@@ -13,6 +13,17 @@
 .white > path {
   @apply stroke-white;
 }
+.main-dark-blue > circle,
+.main-dark-blue > rect,
+.main-dark-blue > path {
+  @apply stroke-main-dark-blue;
+}
+.fill-circle-green > circle {
+  @apply fill-white;
+}
+.fill-circle-main-dark-blue > circle {
+  @apply fill-main-dark-blue;
+}
 
 .noShrinkForFlex {
   @apply shrink-0

package/src/components/icons/RoundCloseHoverIcon.jsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const RoundCloseHoverIcon = ({ color = 'green' }) => {
+  const className = styles[`${color}`] + ' ' + styles[`fill-circle-${color}`]
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <circle
+        cx={12}
+        cy={12}
+        r={11.25}
+        fill='none'
+        fillOpacity={0.2}
+        stroke='none'
+        strokeWidth={1.5}
+      />
+      <path
+        d='M6 6L18 18'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M6 18L18 6'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+export default RoundCloseHoverIcon

package/src/components/icons/RoundCloseIcon.jsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const RoundCloseIcon = ({ color = 'green' }) => {
+  const className = styles[`${color}`]
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <circle cx={12} cy={12} r={11.5} stroke='none' />
+      <path
+        d='M6 6L18 18'
+        stroke='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M6 18L18 6'
+        stroke='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+export default RoundCloseIcon

package/src/components/icons/index.js

@@ -2,11 +2,20 @@ import ApiIcon from './ApiIcon'
 import ApiIconClosed from './ApiIconClosed'
 import ApiEmptyIcon from './ApiEmptyIcon'
 import CloseModalIcon from './CloseModalIcon'
-import CloseModalGreenIcon from './CloseModalGreenIcon'
-import CloseModalGreenHoverIcon from './CloseModalGreenHoverIcon'
+import RoundCloseIcon from './RoundCloseIcon'
+import RoundCloseHoverIcon from './RoundCloseHoverIcon'
 import MetricsIcon from './MetricsIcon'
+import PuzzleIcon from './PuzzleIcon'
 import PullRequestIcon from './PullRequestIcon'
 
 export default {
-  ApiIcon, ApiIconClosed, ApiEmptyIcon, CloseModalIcon, CloseModalGreenIcon, CloseModalGreenHoverIcon, MetricsIcon, PullRequestIcon
+  ApiIcon,
+  ApiIconClosed,
+  ApiEmptyIcon,
+  CloseModalIcon,
+  RoundCloseIcon,
+  RoundCloseHoverIcon,
+  MetricsIcon,
+  PuzzleIcon,
+  PullRequestIcon
 }

package/src/stories/Button.stories.jsx

@@ -3,6 +3,8 @@ 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,
@@ -14,18 +16,18 @@ export default {
     bold: {
       type: 'boolean'
     },
-    buttonClass: {
+    backgroundColor: {
       type: 'string',
       control: {
         type: 'radio',
-        options: ['primary', 'secondary', 'transparent']
+        options: colors
       }
     },
     color: {
       type: 'string',
       control: {
         type: 'radio',
-        options: ['green', 'red', 'white']
+        options: colors
       }
     },
     disabled: {
@@ -37,57 +39,38 @@ export default {
         type: 'radio',
         options: ['small', 'medium', 'large', 'extra-large']
       }
+    },
+    underlineEffect: {
+      type: 'boolean'
+    },
+    bordered: {
+      type: 'boolean'
     }
   }
 }
 
 const Template = (args) => <Button {...args} />
 
-export const PrimaryGreen = Template.bind({})
+export const OnlyLabel = 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
+OnlyLabel.args = {
+  label: 'Sample label',
+  backgroundColor: 'light-green'
 }
 
-export const SecondaryRed = Template.bind({})
-SecondaryRed.args = {
-  label: 'Secondary Green',
-  color: 'red'
+export const BorderedRed = Template.bind({})
+BorderedRed.args = {
+  label: 'Borderer Red',
+  color: 'error-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',
+  label: 'White',
+  color: 'white',
   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 (
@@ -97,28 +80,25 @@ const DisabledTemplate = (args) => {
         <span className='ml-4 text-xl'>👈 This button is {enabled ? 'enabled' : 'disabled'}</span>
       </div>
       <div>
-        <Button label='Toggle Disabled' primary='true' onClick={() => setEnabled(!enabled)} />
+        <Button label='Toggle Disabled' backgroundColor='main-green' onClick={() => setEnabled(!enabled)} />
       </div>
-
     </div>
-
   )
 }
 
 export const DisabledGreen = DisabledTemplate.bind({})
 
 DisabledGreen.args = {
-  buttonClass: 'primary',
+  backgroundColor: 'main-green',
   label: 'A simple button',
-  color: 'green',
+  color: 'main-dark-blue',
   disabled: true
 }
 
 export const DisabledRed = DisabledTemplate.bind({})
 
 DisabledRed.args = {
-  buttonClass: 'primary',
   label: 'A simple button',
-  color: 'red',
+  color: 'error-red',
   disabled: true
 }

package/src/stories/Loader.stories.jsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react'
+import Loader from '../components/Loader'
+import Button from '../components/Button'
+import BorderedBox from '../components/BorderedBox'
+
+const loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est nisl, maximus aliquet urna eu, consequat semper nisi. Nam vel elit feugiat dui congue elementum. Sed turpis urna, egestas at pharetra et, lacinia ac mauris. Pellentesque cursus, ipsum nec malesuada ornare, dui purus ultrices elit, non blandit nisi quam non nisi. Suspendisse sapien leo, ultricies pretium vulputate sed, malesuada sed justo. Suspendisse euismod erat ut lacus feugiat malesuada. In tempor a eros et egestas. Nam pretium dolor sollicitudin, cursus sem vitae, elementum enim. Nam in nisi ipsum.'
+
+export default {
+  title: 'Platformatic/Loader',
+  component: Loader
+}
+
+export const Loading = args =>
+  <Loader {...args}>
+    <BorderedBox>{loremIpsum}</BorderedBox>
+  </Loader>
+
+Loading.args = {
+  loading: true
+}
+
+export const LoadsAndStops = ({ loading, ...args }) => {
+  const [showLoader, setShowLoader] = useState(args.loading)
+  const show = () => setShowLoader(true)
+  const hide = () => setShowLoader(false)
+
+  function load () {
+    show()
+    const timer = setTimeout(() => {
+      hide()
+    }, 2000)
+    return () => clearTimeout(timer)
+  }
+
+  return (
+    <Loader loading={showLoader} {...args}>
+      <Button label='Start Loading' color='error-red' onClick={() => load()} />
+      <BorderedBox>{loremIpsum}</BorderedBox>
+    </Loader>
+  )
+}
+LoadsAndStops.args = {
+  loading: false
+}

package/src/stories/Modal.stories.jsx

@@ -12,7 +12,7 @@ export default {
       type: 'string',
       control: {
         type: 'radio',
-        options: ['info', 'invite']
+        options: ['info', 'invite', 'fullscreen']
       }
     }
   }
@@ -92,3 +92,9 @@ InviteLayout.args = {
   title: 'Give me an invite',
   layout: 'invite'
 }
+
+export const FullscreenLayout = Template.bind({})
+FullscreenLayout.args = {
+  title: 'Give me an invite',
+  layout: 'fullscreen'
+}

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

@@ -0,0 +1,81 @@
+'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.'
+}

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

@@ -0,0 +1,56 @@
+'use strict'
+import React, { useState } from 'react'
+import Input from '../../components/forms/Input'
+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',
+  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'
+}

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

@@ -0,0 +1,36 @@
+'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,
+  parameters: {
+    backgrounds: {
+      default: 'white'
+    }
+  }
+}
+
+const SimpleTemplate = (args) => <div style={divStyle}><Preview {...args} /></div>
+
+export const NormalPreview = SimpleTemplate.bind({})
+
+NormalPreview.args = {
+  title: 'My title',
+  value: 'My value'
+}
+
+export const WithLink = SimpleTemplate.bind({})
+
+WithLink.args = {
+  title: 'My value is a link',
+  value: 'https://example.com',
+  isLink: true
+}

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

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

package/src/components/Input.jsx

@@ -1,11 +0,0 @@
-'use strict'
-import React from 'react'
-import styles from './Input.module.css'
-import commonStyles from './Common.module.css'
-export default function Input ({ placeholder, value, name }) {
-  return (
-    <div className={`${styles.inputContainer} ${commonStyles.padded}`}>
-      <input type='text' name={name} value={value} placeholder={placeholder} className='grow' />
-    </div>
-  )
-}

package/src/components/Input.module.css

@@ -1,7 +0,0 @@
-.inputContainer {
-  @apply flex justify-between w-full h-10  text-white border-main-green border border-solid box-border rounded-md;
-}
-
-.input {
-  @apply grow focus:outline-none
-}

package/src/components/icons/CloseModalGreenHoverIcon.jsx

@@ -1,37 +0,0 @@
-import * as React from 'react'
-
-const CloseModalGreenHoverIcon = () => (
-  <svg
-    width={24}
-    height={24}
-    viewBox='0 0 24 24'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
-  >
-    <circle
-      cx={12}
-      cy={12}
-      r={11.25}
-      fill='#21FA90'
-      fillOpacity={0.2}
-      stroke='#21FA90'
-      strokeWidth={1.5}
-    />
-    <path
-      d='M6 6L18 18'
-      stroke='#21FA90'
-      strokeWidth={1.5}
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-    <path
-      d='M6 18L18 6'
-      stroke='#21FA90'
-      strokeWidth={1.5}
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-  </svg>
-)
-
-export default CloseModalGreenHoverIcon

package/src/components/icons/CloseModalGreenIcon.jsx

@@ -1,27 +0,0 @@
-import * as React from 'react'
-
-const CloseModalGreenIcon = () => (
-  <svg
-    width={24}
-    height={24}
-    viewBox='0 0 24 24'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
-  >
-    <circle cx={12} cy={12} r={11.5} stroke='#21FA90' />
-    <path
-      d='M6 6L18 18'
-      stroke='#21FA90'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-    <path
-      d='M6 18L18 6'
-      stroke='#21FA90'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-  </svg>
-)
-
-export default CloseModalGreenIcon

package/src/stories/Input.stories.jsx

@@ -1,15 +0,0 @@
-'use strict'
-import Input from '../components/Input'
-export default {
-  title: 'Platformatic/Input',
-  component: Input
-}
-
-const Template = (args) => <Input {...args} />
-
-export const Default = Template.bind({})
-
-Default.args = {
-  name: 'test',
-  placeholder: 'Platformatic'
-}