@platformatic/ui-components 0.1.49 → 0.1.51

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

@@ -1,43 +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;
+.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

@@ -1,8 +1,8 @@
-import Input from './Input'
-import Field from './Field'
-import Preview from './Preview'
-import ToggleSwitch from './ToggleSwitch'
-
-export default {
-  Input, Field, Preview, ToggleSwitch
-}
+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/AddIcon.jsx

@@ -0,0 +1,78 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const AddIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M2 8H14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8 13.9999L8 1.99999' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M3 11.9999H20.9999' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12 20.9999L12 3.00001' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M5 19.9999H34.9999' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M20 34.9999L20 5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+AddIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+AddIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default AddIcon

package/src/components/icons/AlertIcon.jsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const AlertIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M14 14H2L8 2L14 14Z' stroke='none' strokeLinejoin='round' />
+          <path d='M8 6V10.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='8' cy='12' r='0.5' fill='none' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M21 21H3L12 3L21 21Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M12 9V15.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx={12} cy={18} r={0.75} fill='none' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M35 35H5L20 5L35 35Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M20 15V26.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx={20} cy={30} r={1.25} fill='none' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+AlertIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+AlertIcon.defaultProps = {
+  color: 'red',
+  size: 'small'
+}
+
+export default AlertIcon

package/src/components/icons/AllInOneIcon.jsx

@@ -0,0 +1,111 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const AllInOneIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={8} cy={8} r={2} stroke='none' />
+          <circle cx={13} cy={3} r={1} stroke='none' />
+          <circle cx={4} cy={4} r={1} stroke='none' />
+          <circle cx={8} cy={3} r={1} stroke='none' />
+          <circle cx={8} cy={13} r={1} transform='rotate(-180 8 13)' stroke='none' />
+          <circle cx={12} cy={12} r={1} stroke='none' />
+          <path d='M12 11V10C12 9.44772 11.5523 9 11 9H9.5' stroke='none' strokeLinejoin='round' />
+          <circle cx={3} cy={13} r={1} stroke='none' />
+          <path d='M3 12V10.5C3 9.94772 3.44772 9.5 4 9.5H6.5' stroke='none' strokeLinejoin='round' />
+          <path d='M4 5C4 5.53386 4 6.35273 4 7.00014C4 7.55243 4.44772 8 5 8H6' stroke='none' strokeLinejoin='round' />
+          <path d='M8 4V6' stroke='none' strokeLinejoin='round' />
+          <path d='M13 4V6C13 6.55228 12.5523 7 12 7H9.5' stroke='none' strokeLinejoin='round' />
+          <path d='M8 12L8 10' stroke='none' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <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={3} stroke='none' strokeWidth={1.5} />
+          <circle cx={19.5} cy={4.5} r={1.5} stroke='none' strokeWidth={1.5} />
+          <circle cx={6} cy={6} r={1.5} stroke='none' strokeWidth={1.5} />
+          <circle cx={12} cy={4.5} r={1.5} stroke='none' strokeWidth={1.5} />
+          <circle cx={12} cy={19.5} r={1.5} transform='rotate(-180 12 19.5)' stroke='none' strokeWidth={1.5} />
+          <circle cx={18} cy={18} r={1.5} stroke='none' strokeWidth={1.5} />
+          <path d='M18 16.5V14.5C18 13.9477 17.5523 13.5 17 13.5H14.25' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <circle cx={4.5} cy={19.5} r={1.5} stroke='none' strokeWidth={1.5} />
+          <path d='M4.5 18V15.25C4.5 14.6977 4.94772 14.25 5.5 14.25H9.75' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M6 7.5C6 8.44649 6 9.99022 6 11.0006C6 11.5529 6.44772 12 7 12H9' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M12 6V9' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M19.5 6V9.5C19.5 10.0523 19.0523 10.5 18.5 10.5H14.25' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M12 18L12 15' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={20} cy={20} r={5} stroke='none' strokeWidth={2} />
+          <circle cx={32.5} cy={7.5} r={2.5} stroke='none' strokeWidth={2} />
+          <circle cx={10} cy={10} r={2.5} stroke='none' strokeWidth={2} />
+          <circle cx={20} cy={7.5} r={2.5} stroke='none' strokeWidth={2} />
+          <circle cx={20} cy={32.5} r={2.5} transform='rotate(-180 20 32.5)' stroke='none' strokeWidth={2} />
+          <circle cx={30} cy={30} r={2.5} stroke='none' strokeWidth={2} />
+          <path d='M30 27.5V23.5C30 22.9477 29.5523 22.5 29 22.5H23.75' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <circle cx='7.5' cy='32.5' r={2.5} stroke='none' strokeWidth={2} />
+          <path d='M7.5 30V24.75C7.5 24.1977 7.94772 23.75 8.5 23.75H16.25' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M10 12.5C10 14.3046 10 17.4118 10 19.0008C10 19.5531 10.4477 20 11 20H15' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M20 10V15' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M32.5 10V16.5C32.5 17.0523 32.0523 17.5 31.5 17.5H23.75' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M20 30L20 25' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+AllInOneIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+AllInOneIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default AllInOneIcon

package/src/components/icons/ApiCloudIcon.jsx

@@ -0,0 +1,93 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const ApiCloudIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M4.37341 9.11943C3.0621 9.11943 2 8.05653 2 6.74602C2 5.43551 3.0621 4.37261 4.37261 4.37341C4.37261 3.0621 5.43551 2 6.74602 2C7.71497 2 8.54777 2.58041 8.9164 3.41322C8.98328 3.40685 9.05096 3.40366 9.11943 3.40366C10.2126 3.40366 11.1322 4.14331 11.4076 5.14889C11.5876 5.09634 11.7779 5.06768 11.9745 5.06768C13.0932 5.06768 14 5.97532 14 7.09395C14 8.21258 13.0932 9.11943 11.9745 9.11943' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M6 5.5V12H5.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10 6V12H11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8 7V12' stroke='none' strokeLinecap='round' />
+          <circle cx={4} cy={12} r={1} stroke='none' />
+          <circle cx={12} cy={12} r={1} stroke='none' />
+          <circle cx={8} cy={13} r={1} stroke='none' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M6.56011 13.6791C4.59315 13.6791 3 12.0848 3 10.119C3 8.15327 4.59315 6.55892 6.55892 6.56011C6.55892 4.59315 8.15327 3 10.119 3C11.5725 3 12.8217 3.87062 13.3746 5.11983C13.4749 5.11027 13.5764 5.10549 13.6791 5.10549C15.3189 5.10549 16.6982 6.21497 17.1115 7.72333C17.3814 7.64451 17.6668 7.60151 17.9618 7.60151C19.6397 7.60151 21 8.96298 21 10.6409C21 12.3189 19.6397 13.6791 17.9618 13.6791' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9 8.25V18H8.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M15 9V18H16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12 10.5V18' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <circle cx={6} cy={18} r={1.5} stroke='none' strokeWidth={1.5} />
+          <circle cx={18} cy={18} r={1.5} stroke='none' strokeWidth={1.5} />
+          <circle cx={12} cy={19.5} r={1.5} stroke='none' strokeWidth={1.5} />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M10.9335 22.7986C7.65526 22.7986 5 20.1413 5 16.865C5 13.5888 7.65526 10.9315 10.9315 10.9335C10.9315 7.65526 13.5888 5 16.865 5C19.2874 5 21.3694 6.45104 22.291 8.53304C22.4582 8.51712 22.6274 8.50916 22.7986 8.50916C25.5315 8.50916 27.8304 10.3583 28.5191 12.8722C28.969 12.7408 29.4447 12.6692 29.9363 12.6692C32.7329 12.6692 35 14.9383 35 17.7349C35 20.5315 32.7329 22.7986 29.9363 22.7986' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M15 13.75V30H13.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M25 15V30H27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M20 17.5V30' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <circle cx={10} cy={30} r={2.5} stroke='none' strokeWidth={2} />
+          <circle cx={30} cy={30} r={2.5} stroke='none' strokeWidth={2} />
+          <circle cx={20} cy={32.5} r={2.5} stroke='none' strokeWidth={2} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ApiCloudIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+ApiCloudIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default ApiCloudIcon