@platformatic/ui-components 0.1.49 → 0.1.51

package/src/components/icons/index.js

@@ -1,61 +1,83 @@
-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 AddIcon from './AddIcon'
+import AlertIcon from './AlertIcon'
+import AllInOneIcon from './AllInOneIcon'
+import ApiCloudIcon from './ApiCloudIcon'
+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 ArrowDownFullIcon from './ArrowDownFullIcon'
+import ArrowDownIcon from './ArrowDownIcon'
+import ArrowLeftIcon from './ArrowLeftIcon'
+import ArrowRightIcon from './ArrowRightIcon'
+import ArrowUpIcon from './ArrowUpIcon'
+import CalendarIcon from './CalendarIcon'
+import Calendar1DayIcon from './Calendar1DayIcon'
+import Calendar7DaysIcon from './Calendar7DaysIcon'
+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 CopyPasteIcon from './CopyPasteIcon'
+import DatabaseIcon from './DatabaseIcon'
+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 StopIcon from './StopIcon'
+import TerminalIcon from './TerminalIcon'
+import Users2Icon from './Users2Icon'
+import UpgradeIcon from './UpgradeIcon'
+import WorkspaceDynamicIcon from './WorkspaceDynamicIcon'
+import WorkspaceReadyIcon from './WorkspaceReadyIcon'
+import WorkspaceStaticIcon from './WorkspaceStaticIcon'
+
+export default {
+  AddIcon,
+  AlertIcon,
+  AllInOneIcon,
+  ApiCloudIcon,
+  ApiIcon,
+  ApiIconClosed,
+  ApiEmptyIcon,
+  AppIcon,
+  AppListIcon,
+  AppEmptyIcon,
+  ArrowDownFullIcon,
+  ArrowDownIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ArrowUpIcon,
+  CalendarIcon,
+  Calendar1DayIcon,
+  Calendar7DaysIcon,
+  CircleAddIcon,
+  CircleBackIcon,
+  CircleCheckMarkIcon,
+  CircleExclamationIcon,
+  CircleCloseIcon,
+  CircleCloseHoverIcon,
+  CloseIcon,
+  CopyPasteIcon,
+  DatabaseIcon,
+  GearIcon,
+  EditIcon,
+  LiveIcon,
+  MetricsIcon,
+  PlayIcon,
+  PullRequestIcon,
+  StopIcon,
+  TerminalIcon,
+  UpgradeIcon,
+  Users2Icon,
+  WorkspaceDynamicIcon,
+  WorkspaceReadyIcon,
+  WorkspaceStaticIcon
+}

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

package/src/stories/Button.stories.jsx

@@ -1,114 +1,114 @@
-'use strict'
-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,
-  argTypes: {
-    label: {
-      type: 'string',
-      control: 'text'
-    },
-    bold: {
-      type: 'boolean'
-    },
-    backgroundColor: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: colors
-      }
-    },
-    color: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: colors
-      }
-    },
-    disabled: {
-      type: 'boolean'
-    },
-    size: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: ['small', 'medium', 'large', 'extra-large']
-      }
-    },
-    hoverEffect: {
-      type: 'radio',
-      options: ['hover', 'underline']
-    },
-    bordered: {
-      type: 'boolean'
-    },
-    fullWidth: {
-      type: 'boolean'
-    }
-  }
-}
-
-const Template = (args) => <Button {...args} />
-
-export const OnlyLabel = Template.bind({})
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-OnlyLabel.args = {
-  label: 'Sample label',
-  backgroundColor: 'main-green'
-}
-
-export const BorderedRed = Template.bind({})
-BorderedRed.args = {
-  label: 'Borderer Red',
-  color: 'error-red'
-}
-
-export const TransparentWhite = Template.bind({})
-TransparentWhite.args = {
-  label: 'White',
-  color: 'white',
-  icon: faCheck
-}
-
-const DisabledTemplate = (args) => {
-  const [enabled, setEnabled] = useState(false)
-  return (
-    <div className='flex flex-col gap-y-6 text-white'>
-      <div>
-        <Button {...args} disabled={!enabled} onClick={() => alert('clicked')} />
-        <span className='ml-4 text-xl'>👈 This button is {enabled ? 'enabled' : 'disabled'}</span>
-      </div>
-      <div>
-        <Button label='Toggle Disabled' backgroundColor='main-green' onClick={() => setEnabled(!enabled)} />
-      </div>
-    </div>
-  )
-}
-
-export const DisabledGreen = DisabledTemplate.bind({})
-
-DisabledGreen.args = {
-  backgroundColor: 'main-green',
-  label: 'A simple button',
-  color: 'main-dark-blue',
-  disabled: true
-}
-
-export const DisabledRed = DisabledTemplate.bind({})
-DisabledRed.args = {
-  label: 'A simple button',
-  color: 'error-red',
-  disabled: true
-}
-
-export const UsingPlatformaticIcon = Template.bind({})
-UsingPlatformaticIcon.args = {
-  label: 'White',
-  color: 'white',
-  platformaticIcon: { iconName: 'GearIcon', color: 'white' }
-}
+'use strict'
+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,
+  argTypes: {
+    label: {
+      type: 'string',
+      control: 'text'
+    },
+    bold: {
+      type: 'boolean'
+    },
+    backgroundColor: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: colors
+      }
+    },
+    color: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: colors
+      }
+    },
+    disabled: {
+      type: 'boolean'
+    },
+    size: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large', 'extra-large']
+      }
+    },
+    hoverEffect: {
+      type: 'radio',
+      options: ['hover', 'underline']
+    },
+    bordered: {
+      type: 'boolean'
+    },
+    fullWidth: {
+      type: 'boolean'
+    }
+  }
+}
+
+const Template = (args) => <Button {...args} />
+
+export const OnlyLabel = Template.bind({})
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+OnlyLabel.args = {
+  label: 'Sample label',
+  backgroundColor: 'main-green'
+}
+
+export const BorderedRed = Template.bind({})
+BorderedRed.args = {
+  label: 'Borderer Red',
+  color: 'error-red'
+}
+
+export const TransparentWhite = Template.bind({})
+TransparentWhite.args = {
+  label: 'White',
+  color: 'white',
+  icon: faCheck
+}
+
+const DisabledTemplate = (args) => {
+  const [enabled, setEnabled] = useState(false)
+  return (
+    <div className='flex flex-col gap-y-6 text-white'>
+      <div>
+        <Button {...args} disabled={!enabled} onClick={() => alert('clicked')} />
+        <span className='ml-4 text-xl'>👈 This button is {enabled ? 'enabled' : 'disabled'}</span>
+      </div>
+      <div>
+        <Button label='Toggle Disabled' backgroundColor='main-green' onClick={() => setEnabled(!enabled)} />
+      </div>
+    </div>
+  )
+}
+
+export const DisabledGreen = DisabledTemplate.bind({})
+
+DisabledGreen.args = {
+  backgroundColor: 'main-green',
+  label: 'A simple button',
+  color: 'main-dark-blue',
+  disabled: true
+}
+
+export const DisabledRed = DisabledTemplate.bind({})
+DisabledRed.args = {
+  label: 'A simple button',
+  color: 'error-red',
+  disabled: true
+}
+
+export const UsingPlatformaticIcon = Template.bind({})
+UsingPlatformaticIcon.args = {
+  label: 'White',
+  color: 'white',
+  platformaticIcon: { iconName: 'GearIcon', color: 'white' }
+}