@platformatic/ui-components 0.1.49 → 0.1.50

package/src/components/icons/TriangleExclamationIcon.jsx

@@ -1,26 +1,26 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-const TriangleExclamationIcon = ({ color = 'red' }) => {
-  const className = styles[`${color}`]
-  return (
-    <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>
-  )
-}
-
-export default TriangleExclamationIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+const TriangleExclamationIcon = ({ color = 'red' }) => {
+  const className = styles[`${color}`]
+  return (
+    <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>
+  )
+}
+
+export default TriangleExclamationIcon

package/src/components/icons/UpgradeIcon.jsx

@@ -1,48 +1,48 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const UpgradeIcon = ({ color = 'green', size = 'normal' }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
-  let icon = <></>
-  switch (size) {
-    case 'extra-large':
-      icon = (
-        <svg
-          width={120}
-          height={120}
-          viewBox='0 0 120 120'
-          fill='none'
-          xmlns='http://www.w3.org/2000/svg'
-          className={className}
-        >
-          <path
-            d='M73.5692 71.2499C70.4961 74.9505 65.8773 77.3043 60.7127 77.3043C55.2863 77.3043 50.4624 74.7057 47.4009 70.6768'
-            stroke='none'
-            strokeWidth={6.5}
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <path
-            d='M23.2957 51.3793L17.6102 51.3793C16.1675 51.3793 15 52.5551 15 54.0082L15 66.8661C15 68.3192 16.1675 69.495 17.6102 69.495L23.2957 69.495C24.3778 69.495 25.3554 70.1738 25.7351 71.1967L28.4782 78.5003C28.8483 79.4946 28.5921 80.6226 27.8138 81.3491L24.074 84.8576C22.973 85.89 22.973 87.649 24.0645 88.691L32.9677 97.161C33.9549 98.1074 35.5115 98.117 36.5176 97.1897L41.4343 92.6775C42.2126 91.97 43.3326 91.7884 44.2913 92.2377L50.8405 95.2968C51.7707 95.727 52.3592 96.6639 52.3592 97.6868L52.3592 102.371C52.3592 103.824 53.5267 105 54.9694 105L65.9608 105C67.4035 105 68.571 103.824 68.571 102.371L68.571 97.4573C68.571 96.3197 69.3018 95.3064 70.3744 94.9527L77.9393 92.4671C78.8315 92.1804 79.8091 92.3907 80.502 93.0216L84.9346 97.0654C86.0167 98.05 87.6967 97.9545 88.6553 96.8455L96.7517 87.5247C97.6819 86.4541 97.5965 84.8289 96.5619 83.8634L93.088 80.613C92.3191 79.9056 92.0534 78.8062 92.3951 77.8216L94.749 71.0342C95.1192 69.973 96.1063 69.2656 97.2168 69.2656L102.39 69.2656C103.833 69.2656 105 68.0898 105 66.6367L105 54.2472C105 52.7941 103.833 51.6183 102.39 51.6183L97.2168 51.6183'
-            stroke='none'
-            strokeWidth={6.5}
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <path
-            d='M59.1684 15.3455L37.5 36.8033L48.75 36.8034L48.75 60.1728L71.25 60.1728L71.25 37.7592L82.5 37.7592L59.1684 15.3455Z'
-            stroke='none'
-            strokeWidth={6.5}
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default UpgradeIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const UpgradeIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'extra-large':
+      icon = (
+        <svg
+          width={120}
+          height={120}
+          viewBox='0 0 120 120'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path
+            d='M73.5692 71.2499C70.4961 74.9505 65.8773 77.3043 60.7127 77.3043C55.2863 77.3043 50.4624 74.7057 47.4009 70.6768'
+            stroke='none'
+            strokeWidth={6.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M23.2957 51.3793L17.6102 51.3793C16.1675 51.3793 15 52.5551 15 54.0082L15 66.8661C15 68.3192 16.1675 69.495 17.6102 69.495L23.2957 69.495C24.3778 69.495 25.3554 70.1738 25.7351 71.1967L28.4782 78.5003C28.8483 79.4946 28.5921 80.6226 27.8138 81.3491L24.074 84.8576C22.973 85.89 22.973 87.649 24.0645 88.691L32.9677 97.161C33.9549 98.1074 35.5115 98.117 36.5176 97.1897L41.4343 92.6775C42.2126 91.97 43.3326 91.7884 44.2913 92.2377L50.8405 95.2968C51.7707 95.727 52.3592 96.6639 52.3592 97.6868L52.3592 102.371C52.3592 103.824 53.5267 105 54.9694 105L65.9608 105C67.4035 105 68.571 103.824 68.571 102.371L68.571 97.4573C68.571 96.3197 69.3018 95.3064 70.3744 94.9527L77.9393 92.4671C78.8315 92.1804 79.8091 92.3907 80.502 93.0216L84.9346 97.0654C86.0167 98.05 87.6967 97.9545 88.6553 96.8455L96.7517 87.5247C97.6819 86.4541 97.5965 84.8289 96.5619 83.8634L93.088 80.613C92.3191 79.9056 92.0534 78.8062 92.3951 77.8216L94.749 71.0342C95.1192 69.973 96.1063 69.2656 97.2168 69.2656L102.39 69.2656C103.833 69.2656 105 68.0898 105 66.6367L105 54.2472C105 52.7941 103.833 51.6183 102.39 51.6183L97.2168 51.6183'
+            stroke='none'
+            strokeWidth={6.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M59.1684 15.3455L37.5 36.8033L48.75 36.8034L48.75 60.1728L71.25 60.1728L71.25 37.7592L82.5 37.7592L59.1684 15.3455Z'
+            stroke='none'
+            strokeWidth={6.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default UpgradeIcon

package/src/components/icons/index.js

@@ -1,61 +1,63 @@
-import ApiIcon from './ApiIcon'
-import ApiIconClosed from './ApiIconClosed'
-import ApiEmptyIcon from './ApiEmptyIcon'
-import AppIcon from './AppIcon'
-import AppListIcon from './AppListIcon'
-import AppEmptyIcon from './AppEmptyIcon'
-import CalendarIcon from './CalendarIcon'
-import Calendar1Icon from './Calendar1Icon'
-import Calendar7Icon from './Calendar7Icon'
-import CircleAddIcon from './CircleAddIcon'
-import CircleBackIcon from './CircleBackIcon'
-import CircleExclamationIcon from './CircleExclamationIcon'
-import CircleCloseIcon from './CircleCloseIcon'
-import CircleCloseHoverIcon from './CircleCloseHoverIcon'
-import CloseIcon from './CloseIcon'
-import CopyIcon from './CopyIcon'
-import CreatedWorkspaceIcon from './CreatedWorkspaceIcon'
-import DynamicWorkspaceIcon from './DynamicWorkspaceIcon'
-import EditIcon from './EditIcon'
-import GearIcon from './GearIcon'
-import LiveIcon from './LiveIcon'
-import MetricsIcon from './MetricsIcon'
-import PlayIcon from './PlayIcon'
-import PullRequestIcon from './PullRequestIcon'
-import StaticWorkspaceIcon from './StaticWorkspaceIcon'
-import StopIcon from './StopIcon'
-import TerminalIcon from './TerminalIcon'
-import TriangleExclamationIcon from './TriangleExclamationIcon'
-import UpgradeIcon from './UpgradeIcon'
-
-export default {
-  ApiIcon,
-  ApiIconClosed,
-  ApiEmptyIcon,
-  AppIcon,
-  AppListIcon,
-  AppEmptyIcon,
-  CalendarIcon,
-  Calendar1Icon,
-  Calendar7Icon,
-  CircleAddIcon,
-  CircleBackIcon,
-  CircleExclamationIcon,
-  CircleCloseIcon,
-  CircleCloseHoverIcon,
-  CloseIcon,
-  CopyIcon,
-  CreatedWorkspaceIcon,
-  DynamicWorkspaceIcon,
-  GearIcon,
-  EditIcon,
-  LiveIcon,
-  MetricsIcon,
-  PlayIcon,
-  PullRequestIcon,
-  StaticWorkspaceIcon,
-  StopIcon,
-  TerminalIcon,
-  TriangleExclamationIcon,
-  UpgradeIcon
-}
+import ApiIcon from './ApiIcon'
+import ApiIconClosed from './ApiIconClosed'
+import ApiEmptyIcon from './ApiEmptyIcon'
+import AppIcon from './AppIcon'
+import AppListIcon from './AppListIcon'
+import AppEmptyIcon from './AppEmptyIcon'
+import CalendarIcon from './CalendarIcon'
+import Calendar1Icon from './Calendar1Icon'
+import Calendar7Icon from './Calendar7Icon'
+import CircleAddIcon from './CircleAddIcon'
+import CircleBackIcon from './CircleBackIcon'
+import CircleExclamationIcon from './CircleExclamationIcon'
+import CircleCheckMarkIcon from './CircleCheckMarkIcon'
+import CircleCloseIcon from './CircleCloseIcon'
+import CircleCloseHoverIcon from './CircleCloseHoverIcon'
+import CloseIcon from './CloseIcon'
+import CopyIcon from './CopyIcon'
+import CreatedWorkspaceIcon from './CreatedWorkspaceIcon'
+import DynamicWorkspaceIcon from './DynamicWorkspaceIcon'
+import EditIcon from './EditIcon'
+import GearIcon from './GearIcon'
+import LiveIcon from './LiveIcon'
+import MetricsIcon from './MetricsIcon'
+import PlayIcon from './PlayIcon'
+import PullRequestIcon from './PullRequestIcon'
+import StaticWorkspaceIcon from './StaticWorkspaceIcon'
+import StopIcon from './StopIcon'
+import TerminalIcon from './TerminalIcon'
+import TriangleExclamationIcon from './TriangleExclamationIcon'
+import UpgradeIcon from './UpgradeIcon'
+
+export default {
+  ApiIcon,
+  ApiIconClosed,
+  ApiEmptyIcon,
+  AppIcon,
+  AppListIcon,
+  AppEmptyIcon,
+  CalendarIcon,
+  Calendar1Icon,
+  Calendar7Icon,
+  CircleAddIcon,
+  CircleBackIcon,
+  CircleCheckMarkIcon,
+  CircleExclamationIcon,
+  CircleCloseIcon,
+  CircleCloseHoverIcon,
+  CloseIcon,
+  CopyIcon,
+  CreatedWorkspaceIcon,
+  DynamicWorkspaceIcon,
+  GearIcon,
+  EditIcon,
+  LiveIcon,
+  MetricsIcon,
+  PlayIcon,
+  PullRequestIcon,
+  StaticWorkspaceIcon,
+  StopIcon,
+  TerminalIcon,
+  TriangleExclamationIcon,
+  UpgradeIcon
+}

package/src/components/layouts/Layout.jsx

@@ -1,11 +1,11 @@
-'use strict'
-import React from 'react'
-
-export default function Layout (props) {
-  return (
-    <div className='container mx-auto px-5 my-5 flex flex-col gap-10 h-screen'>
-      {props.children}
-    </div>
-
-  )
-}
+'use strict'
+import React from 'react'
+
+export default function Layout (props) {
+  return (
+    <div className='container mx-auto px-5 my-5 flex flex-col gap-10 h-screen'>
+      {props.children}
+    </div>
+
+  )
+}

package/src/components/layouts/TwoColumnsLayout.jsx

@@ -1,12 +1,12 @@
-'use strict'
-import React from 'react'
-import styles from './TwoColumnsLayout.module.css'
-
-export default function TwoColumnsLayout ({ children, gridTemplate = 'columns' }) {
-  const className = styles[`${gridTemplate}`]
-  return (
-    <div className={className}>
-      {children}
-    </div>
-  )
-}
+'use strict'
+import React from 'react'
+import styles from './TwoColumnsLayout.module.css'
+
+export default function TwoColumnsLayout ({ children, gridTemplate = 'columns' }) {
+  const className = styles[`${gridTemplate}`]
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  )
+}

package/src/components/layouts/TwoColumnsLayout.module.css

@@ -1,10 +1,10 @@
-
-.columns {
-    @apply grid grid-cols-2 gap-x-4;
-}
-.rows {
-    @apply grid grid-rows-2 gap-y-4;
-}
-.responsive {
-    @apply grid grid-rows-2 gap-y-4 md:grid-rows-none md:gap-y-0 md:grid-cols-2 md:gap-x-4;
+
+.columns {
+    @apply grid grid-cols-2 gap-x-4;
+}
+.rows {
+    @apply grid grid-rows-2 gap-y-4;
+}
+.responsive {
+    @apply grid grid-rows-2 gap-y-4 md:grid-rows-none md:gap-y-0 md:grid-cols-2 md:gap-x-4;
 }

package/src/hooks/useEscapeKey.js

@@ -1,20 +1,20 @@
-import { useCallback, useEffect } from 'react'
-const KEY_NAME_ESC = 'Escape'
-const KEY_EVENT_TYPE = 'keyup'
-function useEscapeKey (handleClose) {
-  const handleEscKey = useCallback((event) => {
-    if (event.key === KEY_NAME_ESC) {
-      handleClose()
-    }
-  }, [handleClose])
-
-  useEffect(() => {
-    document.addEventListener(KEY_EVENT_TYPE, handleEscKey, false)
-
-    return () => {
-      document.removeEventListener(KEY_EVENT_TYPE, handleEscKey, false)
-    }
-  }, [handleEscKey])
-}
-
-export default useEscapeKey
+import { useCallback, useEffect } from 'react'
+const KEY_NAME_ESC = 'Escape'
+const KEY_EVENT_TYPE = 'keyup'
+function useEscapeKey (handleClose) {
+  const handleEscKey = useCallback((event) => {
+    if (event.key === KEY_NAME_ESC) {
+      handleClose()
+    }
+  }, [handleClose])
+
+  useEffect(() => {
+    document.addEventListener(KEY_EVENT_TYPE, handleEscKey, false)
+
+    return () => {
+      document.removeEventListener(KEY_EVENT_TYPE, handleEscKey, false)
+    }
+  }, [handleEscKey])
+}
+
+export default useEscapeKey

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'
+}