@platformatic/ui-components 0.1.50 → 0.1.52

package/src/components/icons/WorkspaceStaticIcon.jsx

@@ -0,0 +1,84 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const WorkspaceStaticIcon = ({ 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}
+        >
+          <rect x={2} y={2} width={4} height={5.03497} rx={1} stroke='none' />
+          <rect x={8} y={2} width={6} height={5.03497} rx={1} stroke='none' />
+          <rect x={14} y={14} width={4} height={5.03496} rx={1} transform='rotate(-180 14 14)' stroke='none' />
+          <rect x={8} y={14} width={6} height={5.03497} rx={1} transform='rotate(-180 8 14)' 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}
+        >
+          <rect x={3} y={3} width={6} height={7.55245} rx={1} stroke='none' strokeWidth={1.5} />
+          <rect x={12} y={3} width={9} height={7.55245} rx={1} stroke='none' strokeWidth={1.5} />
+          <rect x={21} y={21} width={6} height={7.55245} rx={1} transform='rotate(-180 21 21)' stroke='none' strokeWidth={1.5} />
+          <rect x={12} y={21} width={9} height={7.55245} rx={1} transform='rotate(-180 12 21)' 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}
+        >
+          <rect x={5} y={5} width={10} height={12.5874} rx={1} stroke='none' strokeWidth={2} />
+          <rect x={20} y={5} width={15} height={12.5874} rx={1} stroke='none' strokeWidth={2} />
+          <rect x={35} y={35} width={10} height={12.5874} rx={1} transform='rotate(-180 35 35)' stroke='none' strokeWidth={2} />
+          <rect x={20} y={35} width={15} height={12.5874} rx={1} transform='rotate(-180 20 35)' stroke='none' strokeWidth={2} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+WorkspaceStaticIcon.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'])
+}
+
+WorkspaceStaticIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default WorkspaceStaticIcon

package/src/components/icons/index.js

@@ -1,12 +1,21 @@
+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 Calendar1Icon from './Calendar1Icon'
-import Calendar7Icon from './Calendar7Icon'
+import Calendar1DayIcon from './Calendar1DayIcon'
+import Calendar7DaysIcon from './Calendar7DaysIcon'
 import CircleAddIcon from './CircleAddIcon'
 import CircleBackIcon from './CircleBackIcon'
 import CircleExclamationIcon from './CircleExclamationIcon'
@@ -14,31 +23,41 @@ 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 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 StaticWorkspaceIcon from './StaticWorkspaceIcon'
 import StopIcon from './StopIcon'
 import TerminalIcon from './TerminalIcon'
-import TriangleExclamationIcon from './TriangleExclamationIcon'
+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,
-  Calendar1Icon,
-  Calendar7Icon,
+  Calendar1DayIcon,
+  Calendar7DaysIcon,
   CircleAddIcon,
   CircleBackIcon,
   CircleCheckMarkIcon,
@@ -46,18 +65,19 @@ export default {
   CircleCloseIcon,
   CircleCloseHoverIcon,
   CloseIcon,
-  CopyIcon,
-  CreatedWorkspaceIcon,
-  DynamicWorkspaceIcon,
+  CopyPasteIcon,
+  DatabaseIcon,
   GearIcon,
   EditIcon,
   LiveIcon,
   MetricsIcon,
   PlayIcon,
   PullRequestIcon,
-  StaticWorkspaceIcon,
   StopIcon,
   TerminalIcon,
-  TriangleExclamationIcon,
-  UpgradeIcon
+  UpgradeIcon,
+  Users2Icon,
+  WorkspaceDynamicIcon,
+  WorkspaceReadyIcon,
+  WorkspaceStaticIcon
 }

package/src/stories/PlatformaticIcon.stories.jsx

@@ -16,7 +16,7 @@ export default {
 const Template = (args) => <PlatformaticIcon {...args} />
 export const PlatformaticIconDefault = Template.bind({})
 PlatformaticIconDefault.args = {
-  iconName: 'CopyIcon',
+  iconName: 'CopyPasteIcon',
   onClick: () => alert('clicked')
 }
 
@@ -49,3 +49,9 @@ PlatformaticIconLarge.args = {
   color: 'green',
   size: 'large'
 }
+
+export const PlatformaticIconExtraLarge = AllIconsTemplate.bind({})
+PlatformaticIconExtraLarge.args = {
+  color: 'green',
+  size: 'extra-large'
+}

package/src/stories/Sidebar.stories.jsx

@@ -36,9 +36,9 @@ EmptySidebar.args = {
 
 const FullSidebarTemplate = (args) => {
   const [items, setItems] = useState([
-    { iconName: 'StaticWorkspaceIcon', subTitle: 'Subtitle', title: 'a very very very very very long title 1' },
+    { iconName: 'WorkspaceStaticIcon', subTitle: 'Subtitle', title: 'a very very very very very long title 1' },
     { title: 'Title number 2', subTitle: 'Subtitle 2' },
-    { title: 'Another Title', subTitle: 'Subtitle 3', iconName: 'DynamicWorkspaceIcon' }
+    { title: 'Another Title', subTitle: 'Subtitle 3', iconName: 'WorkspaceDynamicIcon' }
   ])
   function onClickAdd () {
     const tmpItem = items.map(item => item)

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

@@ -77,7 +77,7 @@ IconBeforeAndAfter.args = {
   name: 'test',
   placeholder: 'Platformatic',
   beforeIcon: {
-    iconName: 'CopyIcon',
+    iconName: 'CopyPasteIcon',
     color: 'main-dark-blue',
     size: 'small',
     onClick: () => { alert('clicked') }

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

@@ -51,7 +51,7 @@ export const WithIcon = Template.bind({})
 WithIcon.args = {
   title: 'My title',
   value: 'My value',
-  afterValueIcon: 'StaticWorkspaceIcon',
+  afterValueIcon: 'WorkspaceStaticIcon',
   afterValueIconColor: 'green',
   onClickAfterValueIcon: () => alert('icon clicked')
 }

package/src/stories/icons/Icons.stories.jsx

@@ -2,11 +2,9 @@ import React from 'react'
 import PullRequestIcon from '../../components/icons/PullRequestIcon'
 import CloseIcon from '../../components/icons/CloseIcon'
 import CircleCloseIcon from '../../components/icons/CircleCloseIcon'
-import TriangleExclamationIcon from '../../components/icons/TriangleExclamationIcon'
-import StaticWorkspaceIcon from '../../components/icons/StaticWorkspaceIcon'
-import CreatedWorkspaceIcon from '../../components/icons/CreatedWorkspaceIcon'
+import WorkspaceStaticIcon from '../../components/icons/WorkspaceStaticIcon'
 import UpgradeIcon from '../../components/icons/UpgradeIcon'
-import DynamicWorkspaceIcon from '../../components/icons/DynamicWorkspaceIcon'
+import WorkspaceDynamicIcon from '../../components/icons/WorkspaceDynamicIcon'
 
 const divStyle = {
   display: 'flex',
@@ -49,12 +47,8 @@ const CircleCloseIconTemplate = (args) => <CircleCloseIcon {...args} />
 export const CircleCloseIconDefault = CircleCloseIconTemplate.bind({})
 CircleCloseIconDefault.args = {}
 
-const TriangleExclamationIconTemplate = (args) => <TriangleExclamationIcon {...args} />
-export const TriangleExclamationIconDefault = TriangleExclamationIconTemplate.bind({})
-TriangleExclamationIconDefault.args = {}
-
 const WorkspaceIconsTemplate = () => (
-  [<StaticWorkspaceIcon key='a' />, <DynamicWorkspaceIcon key='b' />].map((component, index) => {
+  [<WorkspaceStaticIcon key='a' />, <WorkspaceDynamicIcon key='b' />].map((component, index) => {
     const listElement = []
     listElement.push(React.cloneElement(component, { key: `0${index}` }))
     listElement.push(React.cloneElement(component, { key: `1${index}`, size: 'small', color: 'green' }))
@@ -69,6 +63,6 @@ const WorkspaceIconsTemplate = () => (
 export const WorkspaceIconsAll = WorkspaceIconsTemplate.bind({})
 WorkspaceIconsAll.args = {}
 
-const LargeIconsTemplate = () => ([<CreatedWorkspaceIcon key='a' size='extra-large' />, <UpgradeIcon key='b' size='extra-large' />].map(component => component))
+const LargeIconsTemplate = () => ([<UpgradeIcon key='b' size='extra-large' />].map(component => component))
 export const LargeIconsDefault = LargeIconsTemplate.bind({})
 LargeIconsDefault.args = {}

package/src/styles/main.css

@@ -2,15 +2,22 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: 'Montserrat';
+  src: url('/fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
 :root {
   @apply bg-main-dark-blue;
   font-family: 'Montserrat';
 }
+
 a {
   @apply text-tertiary-blue;
 }
 
 input {
   background-color: transparent;
-
 }

package/src/components/icons/Calendar1Icon.jsx

@@ -1,54 +0,0 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const Calendar1Icon = ({ color = 'green', size = 'normal' }) => {
-  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}
-        >
-          <rect x={2} y={4} width={12} height={10} rx={1} stroke='none' />
-          <path
-            d='M2 7H5M14 7H11'
-            stroke='none'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <line
-            x1={4.5}
-            y1={5.5}
-            x2={4.5}
-            y2={2.5}
-            stroke='none'
-            strokeLinecap='round'
-          />
-          <line
-            x1={11.5}
-            y1={5.5}
-            x2={11.5}
-            y2={2.5}
-            stroke='none'
-            strokeLinecap='round'
-          />
-          <path
-            d='M7.59712 13V6.5L8.21223 7.09L7.59712 8H7.5L6.5 9V7L7.5 6H9V13H7.59712Z'
-            fill='none'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default Calendar1Icon

package/src/components/icons/Calendar7Icon.jsx

@@ -1,55 +0,0 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const Calendar7Icon = ({ color = 'green', size = 'normal' }) => {
-  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}
-        >
-          <rect x={2} y={4} width={12} height={10} rx={1} stroke='none' />
-
-          <path
-            d='M2 7H4M14 7H12'
-            stroke='none'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <line
-            x1={4.5}
-            y1={5.5}
-            x2={4.5}
-            y2={2.5}
-            stroke='none'
-            strokeLinecap='round'
-          />
-          <line
-            x1={11.5}
-            y1={5.5}
-            x2={11.5}
-            y2={2.5}
-            stroke='none'
-            strokeLinecap='round'
-          />
-          <path
-            d='M6.46691 13L9.65441 6.52L10.0294 7.1H5.65074L6.33456 6.47V8.29H5V6H11V6.87L8 13H6.46691Z'
-            fill='none'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default Calendar7Icon

package/src/components/icons/CopyIcon.jsx

@@ -1,75 +0,0 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const CopyIcon = ({ color = 'green', size = 'normal' }) => {
-  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='M6 13.5V4.94496C6 4.66882 6.22386 4.44496 6.5 4.44496H10.5365C10.6594 4.44496 10.7779 4.49019 10.8696 4.57203L13.833 7.21858C13.9393 7.31345 14 7.4491 14 7.59152V13.5C14 13.7761 13.7761 14 13.5 14H6.5C6.22386 14 6 13.7761 6 13.5Z'
-            stroke='none'
-            strokeLinecap='round'
-          />
-          <path
-            d='M10.5 7.78923V4.44496L14 7.78923H10.5Z'
-            stroke='none'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <path
-            d='M9.5 3.96723L7.36816 2.12196C7.27729 2.0433 7.16112 2.00001 7.04093 2.00001H4.61364H2.5C2.22386 2.00001 2 2.22386 2 2.50001L2.00001 10.6335C2.00001 10.9096 2.22386 11.1335 2.50001 11.1335H5.50001'
-            stroke='none'
-            strokeLinecap='round'
-          />
-        </svg>
-      )
-      break
-    case 'normal':
-      icon = (
-        <svg
-          width={24}
-          height={25}
-          viewBox='0 0 24 25'
-          fill='none'
-          xmlns='http://www.w3.org/2000/svg'
-          className={className}
-        >
-          <path
-            d='M9 21.3333V8.00073C9 7.72459 9.22386 7.50073 9.5 7.50073H15.9001C16.023 7.50073 16.1416 7.54597 16.2332 7.6278L20.833 11.7357C20.9393 11.8306 21 11.9662 21 12.1086V21.3333C21 21.6094 20.7761 21.8333 20.5 21.8333H9.5C9.22386 21.8333 9 21.6094 9 21.3333Z'
-            stroke='none'
-            strokeWidth={1.5}
-            strokeLinecap='round'
-          />
-          <path
-            d='M15.75 12.5171V7.50073L21 12.5171H15.75Z'
-            stroke='none'
-            strokeWidth={1.5}
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <path
-            d='M14.25 6.78409L10.9818 3.95521C10.8909 3.87655 10.7748 3.83326 10.6546 3.83326H6.92045H3.5C3.22386 3.83326 3 4.05712 3 4.33326L3.00001 17.0335C3.00001 17.3096 3.22387 17.5335 3.50001 17.5335H8.25001'
-            stroke='none'
-            strokeWidth={1.5}
-            strokeLinecap='round'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default CopyIcon

package/src/components/icons/CreatedWorkspaceIcon.jsx

@@ -1,70 +0,0 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const CreatedWorkspaceIcon = ({ 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}
-        >
-          <rect
-            x={15}
-            y={15}
-            width={37.5}
-            height={37.5}
-            rx={1}
-            stroke='none'
-            strokeWidth={6.5}
-          />
-          <rect
-            x={45}
-            y={105}
-            width={30}
-            height={37.7622}
-            rx={1}
-            transform='rotate(-180 45 105)'
-            stroke='none'
-            strokeWidth={6.5}
-          />
-          <rect
-            x={105}
-            y={105}
-            width={45}
-            height={37.7622}
-            rx={1}
-            transform='rotate(-180 105 105)'
-            stroke='none'
-            strokeWidth={6.5}
-          />
-          <circle
-            cx={86.25}
-            cy={33.75}
-            r={18.75}
-            stroke='none'
-            strokeWidth={6.5}
-          />
-          <path
-            d='M76.875 33.7499L84.6875 39.9999L93.75 30'
-            stroke='none'
-            strokeWidth={6.5}
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default CreatedWorkspaceIcon

package/src/components/icons/DynamicWorkspaceIcon.jsx

@@ -1,125 +0,0 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const DynamicWorkspaceIcon = ({ color = 'green', size = 'normal', tip = '' }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
-  let icon = (
-    <svg
-      width={40}
-      height={40}
-      viewBox='0 0 40 40'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-      data-tip={tip}
-    >
-      <rect
-        x={5}
-        y={5}
-        width={10}
-        height={12.5874}
-        rx={1}
-        stroke='none'
-        strokeWidth={2}
-      />
-      <path
-        d='M20 5L27.5 11.25L20 17.5V5Z'
-        stroke='none'
-        strokeWidth={2}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <rect
-        x={35}
-        y={35}
-        width={10}
-        height={12.5874}
-        rx={1}
-        transform='rotate(-180 35 35)'
-        stroke='none'
-        strokeWidth={2}
-      />
-      <rect
-        x={20}
-        y={35}
-        width={15}
-        height={12.5874}
-        rx={1}
-        transform='rotate(-180 20 35)'
-        stroke='none'
-        strokeWidth={2}
-      />
-      <path
-        d='M27.5 15V17.5L35 11.25L27.5 5V7.5'
-        stroke='none'
-        strokeWidth={2}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-  switch (size) {
-    case 'small':
-      icon = (
-        <svg
-          width={24}
-          height={25}
-          viewBox='0 0 24 25'
-          fill='none'
-          xmlns='http://www.w3.org/2000/svg'
-          className={className}
-          data-tip={tip}
-        >
-          <rect
-            x={3}
-            y={3.5}
-            width={6}
-            height={7.55245}
-            rx={1}
-            stroke='none'
-            strokeWidth={1.5}
-          />
-          <path
-            d='M12 3.5L16.5 7.25L12 11V3.5Z'
-            stroke='none'
-            strokeWidth={1.5}
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <rect
-            x={21}
-            y={21.5}
-            width={6}
-            height={7.55245}
-            rx={1}
-            transform='rotate(-180 21 21.5)'
-            stroke='none'
-            strokeWidth={1.5}
-          />
-          <rect
-            x={12}
-            y={21.5}
-            width={9}
-            height={7.55245}
-            rx={1}
-            transform='rotate(-180 12 21.5)'
-            stroke='none'
-            strokeWidth={1.5}
-          />
-          <path
-            d='M16.5 9.5V11L21 7.25L16.5 3.5V5'
-            stroke='none'
-            strokeWidth={1.5}
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default DynamicWorkspaceIcon