@platformatic/ui-components 0.1.38 → 0.1.40

package/index.js

@@ -18,6 +18,7 @@ import Layout from './src/components/layouts/Layout'
 import List from './src/components/List'
 import ListElement from './src/components/ListElement'
 import Loadable from './src/components/Loadable'
+import Loader from './src/components/Loader'
 import LoginButton from './src/components/LoginButton'
 import Logo from './src/components/Logo'
 import Modal from './src/components/Modal'
@@ -50,6 +51,7 @@ export {
   List,
   ListElement,
   Loadable,
+  Loader,
   LoginButton,
   Logo,
   Modal,
@@ -61,5 +63,5 @@ export {
   TextWithLabel,
   TwoColumnsLayout,
   Versions,
-  VerticalSeparator
+  VerticalSeparator,
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/src/components/Button.jsx

@@ -1,16 +1,17 @@
 'use strict'
-
 import React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Button.module.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-export default function Button (props) {
-  const { icon, label, buttonClass = 'secondary', color = 'green', disabled, size = 'large', bold = false, ...rest } = props
-  let className = `${styles.button} ${styles[buttonClass + '-' + color]} ${styles['button-' + size]}`
+
+function Button (props) {
+  const { icon, label, color, backgroundColor, size, disabled, bold, underlineEffect, bordered, ...rest } = props
+  let className = `${styles.button} ${styles['background-color-' + backgroundColor]} ${styles['color-' + color]} ${styles['button-' + size]}`
+  if (!bordered) className += ` ${styles['no-border']}`
   if (disabled) {
     className += ` ${styles.disabled}`
-    if (buttonClass === 'transparent') {
-      className += ` ${styles['disabled-transparent']}`
-    }
+  } else {
+    if (underlineEffect) className += ` ${styles['underline-effect']}`
   }
   if (bold) className += ` ${styles.fontBold}`
 
@@ -21,3 +22,54 @@ export default function Button (props) {
     </button>
   )
 }
+
+Button.propTypes = {
+  /**
+   * Icon
+   */
+  icon: PropTypes.object,
+  /**
+   * label
+   */
+  label: PropTypes.string,
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['main-green', 'dark-green', 'light-green', 'main-dark-blue', 'dark-blue', 'light-blue', 'white', 'error-red', 'tertiary-blue', 'transparent']),
+  /**
+   * background color of the button
+   */
+  backgroundColor: PropTypes.oneOf(['main-green', 'dark-green', 'light-green', 'main-dark-blue', 'dark-blue', 'light-blue', 'white', 'error-red', 'tertiary-blue', 'transparent']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large']),
+  /**
+   * Disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Bold
+   */
+  bold: PropTypes.bool,
+  /**
+   * Underline effect on hover
+   */
+  underlineEffect: PropTypes.bool,
+  /**
+   * Apply border: default true
+   */
+  bordered: PropTypes.bool
+}
+
+Button.defaultProps = {
+  color: 'main-dark-blue',
+  backgroundColor: 'transparent',
+  disabled: false,
+  size: 'large',
+  bold: false,
+  underlineEffect: false,
+  bordered: true
+}
+
+export default Button

package/src/components/Button.module.css

@@ -1,5 +1,5 @@
 .button {
-  @apply rounded text-center cursor-pointer font-normal;
+  @apply rounded text-center cursor-pointer font-normal rounded-md border border-solid box-border;
 }
 .fontBold {
   @apply font-semibold;
@@ -27,44 +27,72 @@
 .margin-right-extra-large {
   @apply mr-3;
 }
-
-.primary-green {
-  @apply text-main-dark-blue bg-light-green;
+.background-color-main-green {
+  @apply bg-main-green !important;
 }
-.secondary-green {
-  @apply border-main-green text-main-green bg-none border border-solid box-border rounded-md;
+.background-color-light-green {
+  @apply bg-light-green !important;
 }
-.transparent-green {
-  @apply text-main-green border-0 bg-transparent hover:underline;
+.background-color-dark-green {
+  @apply bg-dark-green !important;
 }
-
-.primary-red {
-  @apply text-main-dark-blue bg-error-red;
+.background-color-main-dark-blue{
+  @apply bg-main-dark-blue !important;
 }
-.secondary-red {
-  @apply border-error-red text-error-red bg-none border border-solid box-border rounded-md;
+.background-color-dark-blue{
+  @apply bg-dark-blue !important;
 }
-.transparent-red {
-  @apply text-error-red border-0 bg-transparent hover:underline;
+.background-color-light-blue{
+  @apply bg-light-blue !important;
 }
-
-.primary-white {
-  @apply text-main-dark-blue bg-white;
+.background-color-white{
+  @apply bg-white !important;
 }
-.secondary-white {
-  @apply border-white text-white bg-none border border-solid box-border rounded-md;
+.background-color-error-red{
+  @apply bg-error-red !important;
 }
-.transparent-white {
-  @apply text-white border-0 bg-transparent hover:underline;
+.background-color-tertiary-blue{
+  @apply bg-tertiary-blue !important;
 }
-
-.tertiary-white {
-  @apply bg-main-dark-blue border-0 text-white !important;
+.background-color-transparent{
+  @apply bg-transparent;
+}
+.color-main-green {
+  @apply text-main-green border-main-green;
+}
+.color-light-green {
+  @apply text-light-green border-light-green;
+}
+.color-dark-green {
+  @apply text-dark-green border-dark-green;
+}
+.color-main-dark-blue{
+  @apply text-main-dark-blue border-main-dark-blue;
+}
+.color-dark-blue{
+  @apply text-dark-blue border-dark-blue;
+}
+.color-light-blue{
+  @apply text-light-blue border-light-blue;
+}
+.color-white{
+  @apply text-white border-white;
+}
+.color-error-red{
+  @apply text-error-red border-error-red;
+}
+.color-tertiary-blue{
+  @apply text-tertiary-blue border-tertiary-blue;
+}
+.color-transparent{
+  @apply text-transparent border-transparent;
+}
+.no-border {
+  @apply border-0;
 }
-
 .disabled {
   @apply opacity-30 cursor-default;
 }
-.disabled-transparent {
-  @apply hover:no-underline;
-}
+.underline-effect {
+  @apply hover:underline;
+}

package/src/components/Common.module.css

@@ -1,7 +1,7 @@
 .bordered {
   @apply border border-solid box-border rounded-md;
 }
-.bordered--green {
+.bordered--main-green {
   @apply border-main-green
 }
 .bordered--main-dark-blue {
@@ -9,7 +9,7 @@
 }
 
 .error-message {
-  @apply text-error-red text-xs px-2;
+  @apply absolute -bottom-5 text-error-red text-xs px-2;
 }
 
 .padded {

package/src/components/Loadable.jsx

@@ -2,7 +2,7 @@ import React, { useState, cloneElement, Children } from 'react'
 import styles from './Loadable.module.css'
 import { SpinnerCircular } from 'spinners-react'
 
-export default function List ({ ...props }) {
+export default function Loadable ({ ...props }) {
   // If null then loading not started, if true then loading, if false then done loading
   const [loading, setLoading] = useState(null)
   const startLoading = (reset = false) => {

package/src/components/Loader.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import styles from './Loader.module.css'
+import { SpinnerCircular } from 'spinners-react'
+
+export default function Loader ({ loading, children }) {
+  return (
+    <>
+      {
+        loading
+          ? (
+            <div className={styles.container} data-testid='loading'>
+              <div data-testid='loading-content' className={styles.content}>
+                <SpinnerCircular className={styles.spinner} thickness={180} size={60} />
+                <div className={styles.blurred}>{children}</div>
+              </div>
+            </div>
+            )
+          : children
+      }
+    </>
+  )
+}

package/src/components/Loader.module.css

@@ -0,0 +1,13 @@
+.container {
+  @apply fixed top-0 left-0 h-full w-full z-40;
+}
+.content {
+  @apply h-full w-full;
+}
+.spinner {
+  @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50;
+}
+.blurred {
+  @apply blur-sm;
+}
+

package/src/components/Modal.module.css

@@ -1,9 +1,9 @@
 .blur {
-  @apply absolute top-[50%] left-[50%] z-0 w-[100vw] h-[100vh] translate-x-[-50%] translate-y-[-50%] z-[9999];
+  @apply fixed top-[50%] left-[50%] w-full h-screen translate-x-[-50%] translate-y-[-50%] z-10;
   background-color: rgba(0, 0, 0, 0.75);
 }
 .container {
-  @apply z-[9999];
+  @apply z-20;
 }
 .centered {
   @apply fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]

package/src/components/forms/Field.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import styles from './Field.module.css'
+import HorizontalSeparator from '../HorizontalSeparator'
+
+export default function Field ({ title, helper, children, disabled }) {
+  let className = `${styles.container}`
+  if (disabled) className += ` ${styles.disabled}`
+  return (
+    <>
+      <div className={className}>
+        <p className={styles.title}>{title}</p>
+        <p className={styles.helper}>{helper}</p>
+        <div className={styles.content}>
+          {children}
+        </div>
+      </div>
+      <HorizontalSeparator color='main-dark-green' opacity={20} marginBottom={10} marginTop={10} />
+    </>
+  )
+}

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

@@ -0,0 +1,18 @@
+.container {
+  @apply flex flex-col;
+}
+.title{
+  @apply text-xl font-semibold text-main-dark-blue;
+}
+.helper{
+  @apply text-sm text-main-dark-blue pb-4;
+}
+.content {
+  @apply flex gap-x-1 w-full;
+}
+.content button {
+  @apply shrink-0;
+}
+.disabled {
+  @apply opacity-20;
+}

package/src/components/forms/Input.jsx

@@ -1,15 +1,55 @@
 'use strict'
 import React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Input.module.css'
 import commonStyles from '../Common.module.css'
-export default function Input ({ placeholder, value, name, borderColor = 'green', errorMessage = '', onChange = () => {} }) {
+function Input ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled }) {
   const className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles.padded
   return (
-    <>
+    <div className={styles.container}>
       <div className={className}>
-        <input type='text' name={name} value={value} placeholder={placeholder} className='grow' onChange={onChange} />
+        <input type='text' name={name} value={value} placeholder={placeholder} className={styles.fullWidth} onChange={onChange} disabled={disabled} />
       </div>
       {errorMessage.length > 0 && <span className={commonStyles['error-message']}>{errorMessage}</span>}
-    </>
+    </div>
   )
 }
+
+Input.propTypes = {
+  /**
+   * placeholder
+   */
+  placeholder: PropTypes.string,
+  /**
+   * value
+   */
+  value: PropTypes.string,
+  /**
+   * name
+   */
+  name: PropTypes.string,
+  /**
+   * color of border
+   */
+  borderColor: PropTypes.oneOf(['main-green', 'main-dark-blue']),
+  /**
+   * onChange
+   */
+  onChange: PropTypes.func,
+  /**
+   * Disabled
+   */
+  disabled: PropTypes.bool
+}
+
+Input.defaultProps = {
+  placeholder: '',
+  value: null,
+  name: '',
+  borderColor: 'main-green',
+  errorMessage: '',
+  onChange: () => {},
+  disabled: false
+}
+
+export default Input

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

@@ -1,8 +1,14 @@
+.container {
+  @apply flex flex-col w-full relative;
+}
 .inputContainer {
-  @apply flex justify-between w-full h-10 border border-solid box-border rounded-md;
+  @apply flex h-10 border border-solid box-border rounded-md;
+}
+.fullWidth {
+  @apply w-full;
 }
 .input {
-  @apply grow focus:outline-none focus-within:outline-none focus-visible:outline-none;
+  @apply focus:outline-none focus-within:outline-none focus-visible:outline-none;
 }
 [type='text']:focus {
   outline: none;

package/src/components/forms/Preview.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import styles from './Preview.module.css'
+import HorizontalSeparator from '../HorizontalSeparator'
+
+export default function Preview ({ title, value, isLink = false }) {
+  return (
+    <>
+      <div className={styles.container}>
+        <p className={styles.title}>{title}</p>
+        {isLink ? <a className={styles.link} href={value} target='_blank' rel='noreferrer'>{value}</a> : <p className={styles.value}>{value}</p>}
+      </div>
+      <HorizontalSeparator color='main-dark-green' opacity={20} marginBottom={10} marginTop={10} />
+    </>
+  )
+}

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

@@ -0,0 +1,12 @@
+.container {
+  @apply flex flex-col
+}
+.title{
+  @apply text-sm text-main-dark-blue pb-1;
+}
+.value{
+  @apply text-xl font-semibold text-main-dark-blue;
+}
+.link {
+  @apply font-semibold;
+}

package/src/components/forms/index.js

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

package/src/components/icons/index.js

@@ -5,8 +5,17 @@ import CloseModalIcon from './CloseModalIcon'
 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, RoundCloseIcon, RoundCloseHoverIcon, 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/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

@@ -2,7 +2,7 @@
 import React, { useState } from 'react'
 import Input from '../../components/forms/Input'
 export default {
-  title: 'Platformatic/Input',
+  title: 'Platformatic/Forms/Input',
   component: Input
 }
 

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

@@ -1,7 +1,7 @@
 'use strict'
 import ToggleSwitch from '../../components/forms/ToggleSwitch'
 export default {
-  title: 'Platformatic/ToggleSwitch',
+  title: 'Platformatic/Forms/ToggleSwitch',
   component: ToggleSwitch
 }