@platformatic/ui-components 0.1.105 → 0.1.107

package/src/components/icons/TwoUsersIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const TwoUsersIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -25,7 +25,7 @@ const TwoUsersIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -42,7 +42,7 @@ const TwoUsersIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -78,8 +78,8 @@ TwoUsersIcon.propTypes = {
 }
 
 TwoUsersIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default TwoUsersIcon

package/src/components/icons/UpgradeIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const UpgradeIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -25,7 +25,7 @@ const UpgradeIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -41,7 +41,7 @@ const UpgradeIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -58,7 +58,7 @@ const UpgradeIcon = ({ color, size }) => {
       )
       break
 
-    case 'extra-large':
+    case EXTRA_LARGE:
       icon = (
         <svg
           width={120}
@@ -111,8 +111,8 @@ UpgradeIcon.propTypes = {
 }
 
 UpgradeIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default UpgradeIcon

package/src/components/icons/UserIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const UserIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -24,7 +24,7 @@ const UserIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -39,7 +39,7 @@ const UserIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -73,8 +73,8 @@ UserIcon.propTypes = {
 }
 
 UserIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default UserIcon

package/src/components/icons/UserRemoveIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const UserRemoveIcon = ({ color, size, tip }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -28,7 +28,7 @@ const UserRemoveIcon = ({ color, size, tip }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -47,7 +47,7 @@ const UserRemoveIcon = ({ color, size, tip }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -89,8 +89,8 @@ UserRemoveIcon.propTypes = {
 }
 
 UserRemoveIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium',
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM,
   tip: ''
 }
 

package/src/components/icons/UserRoleIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const UserRoleIcon = ({ color, size, tip }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -27,7 +27,7 @@ const UserRoleIcon = ({ color, size, tip }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -46,7 +46,7 @@ const UserRoleIcon = ({ color, size, tip }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -88,8 +88,8 @@ UserRoleIcon.propTypes = {
 }
 
 UserRoleIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium',
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM,
   tip: ''
 }
 

package/src/components/icons/WorkspaceDynamicIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceDynamicIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -26,7 +26,7 @@ const WorkspaceDynamicIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -44,7 +44,7 @@ const WorkspaceDynamicIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -81,8 +81,8 @@ WorkspaceDynamicIcon.propTypes = {
 }
 
 WorkspaceDynamicIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default WorkspaceDynamicIcon

package/src/components/icons/WorkspaceEmptyIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, MEDIUM, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceEmptyIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'extra-large':
+    case EXTRA_LARGE:
       icon = (
         <svg width={104} height={105} viewBox='0 0 104 105' fill='none' xmlns='http://www.w3.org/2000/svg' className={className}>
           <path d='M29.8467 60.0705V87.4275C29.8467 87.9797 30.2944 88.4275 30.8467 88.4275H73.1544C73.7067 88.4275 74.1544 87.9797 74.1544 87.4275V60.0705' stroke='none' strokeWidth={3} strokeLinecap='round' />
@@ -48,8 +48,8 @@ WorkspaceEmptyIcon.propTypes = {
 }
 
 WorkspaceEmptyIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default WorkspaceEmptyIcon

package/src/components/icons/WorkspaceFailIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceFailIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -28,7 +28,7 @@ const WorkspaceFailIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -47,7 +47,7 @@ const WorkspaceFailIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -67,7 +67,7 @@ const WorkspaceFailIcon = ({ color, size }) => {
       )
       break
 
-    case 'extra-large':
+    case EXTRA_LARGE:
       icon = (
         <svg
           width={120}
@@ -106,8 +106,8 @@ WorkspaceFailIcon.propTypes = {
 }
 
 WorkspaceFailIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default WorkspaceFailIcon

package/src/components/icons/WorkspaceGitHubIcon.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceGitHubIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -9,7 +9,7 @@ const WorkspaceGitHubIcon = ({ color, size }) => {
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -33,7 +33,7 @@ const WorkspaceGitHubIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -57,7 +57,7 @@ const WorkspaceGitHubIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -82,7 +82,7 @@ const WorkspaceGitHubIcon = ({ color, size }) => {
       )
       break
 
-    case 'extra-large':
+    case EXTRA_LARGE:
       icon = (
         <svg
           width={120}
@@ -125,8 +125,8 @@ WorkspaceGitHubIcon.propTypes = {
 }
 
 WorkspaceGitHubIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default WorkspaceGitHubIcon

package/src/components/icons/WorkspaceLoadingIcon.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, EXTRA_LARGE, MEDIUM, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceLoadingIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -10,7 +10,7 @@ const WorkspaceLoadingIcon = ({ color, size }) => {
   let icon = <></>
 
   switch (size) {
-    case 'extra-large':
+    case EXTRA_LARGE:
       icon = (
         <svg
           width={105}
@@ -50,8 +50,8 @@ WorkspaceLoadingIcon.propTypes = {
 }
 
 WorkspaceLoadingIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default WorkspaceLoadingIcon

package/src/components/icons/WorkspaceReadyIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceReadyIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -27,7 +27,7 @@ const WorkspaceReadyIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -45,7 +45,7 @@ const WorkspaceReadyIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -64,7 +64,7 @@ const WorkspaceReadyIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'extra-large':
+    case EXTRA_LARGE:
       icon = (
         <svg
           width={120}
@@ -138,8 +138,8 @@ WorkspaceReadyIcon.propTypes = {
 }
 
 WorkspaceReadyIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default WorkspaceReadyIcon

package/src/components/icons/WorkspaceStaticIcon.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceStaticIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -25,7 +25,7 @@ const WorkspaceStaticIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -42,7 +42,7 @@ const WorkspaceStaticIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -78,8 +78,8 @@ WorkspaceStaticIcon.propTypes = {
 }
 
 WorkspaceStaticIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default WorkspaceStaticIcon

package/src/components/icons/index.js

@@ -19,6 +19,7 @@ import BillingIcon from './BillingIcon'
 import CalendarIcon from './CalendarIcon'
 import Calendar1DayIcon from './Calendar1DayIcon'
 import Calendar7DaysIcon from './Calendar7DaysIcon'
+import ChatGPTIcon from './ChatGPTIcon'
 import CheckListIcon from './CheckListIcon'
 import CircleAddIcon from './CircleAddIcon'
 import CircleArrowLeftIcon from './CircleArrowLeftIcon'
@@ -116,6 +117,7 @@ export default {
   CalendarIcon,
   Calendar1DayIcon,
   Calendar7DaysIcon,
+  ChatGPTIcon,
   CheckListIcon,
   CircleAddIcon,
   CircleArrowLeftIcon,

package/src/stories/PlatformaticIcon.stories.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PlatformaticIcon from '../components/PlatformaticIcon'
 import Icons from '../components/icons'
-import { COLORS_ICON, EXTRA_LARGE, EXTRA_SMALL, LARGE, MEDIUM, SMALL } from '../components/constants'
+import { COLORS_ICON, EXTRA_LARGE, EXTRA_SMALL, LARGE, MEDIUM, SIZES, SMALL, WHITE } from '../components/constants'
 
 const divStyle = {
   width: '100%'
@@ -27,25 +27,28 @@ export default {
   title: 'Platformatic/PlatformaticIcon',
   component: PlatformaticIcon,
   argTypes: {
-    color: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: COLORS_ICON
-      }
-    },
-    size: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: ['small', 'medium', 'large', 'extra-large']
-      }
-    },
     checked: {
       type: 'boolean',
       control: {
         type: 'boolean'
       }
+    },
+    classes: {
+      type: 'string'
+    },
+    color: {
+      options: COLORS_ICON,
+      control: { type: 'radio' }
+    },
+    onClick: {
+      type: 'function'
+    },
+    size: {
+      options: SIZES,
+      control: { type: 'radio' }
+    },
+    tip: {
+      type: 'string'
     }
   }
 }
@@ -58,40 +61,43 @@ PlatformaticIconDefault.args = {
 }
 
 const AllIconsTemplate = (args) => {
-  const icons = Object.values(Icons)
+  const icons = Object.keys(Icons)
 
   return (
     <>
       <div style={divStyle}>
         <p style={paragraph}> All Platformatic Icons: {icons.length} </p>
-        {icons.map((IconComponent, index) => (
+        {icons.map((icon, index) => (
           <div style={row} key={index}>
             <div style={col}>
-              <p style={paragraph}>#{index + 1}: {IconComponent.name}</p>
+              <p style={paragraph}>#{index + 1}: {icon}</p>
             </div>
             <div style={col}>
-              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size={EXTRA_SMALL} {...args} />
+              <PlatformaticIcon key={icon} iconName={icon} size={EXTRA_SMALL} {...args} />
             </div>
             <div style={col}>
-              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size={SMALL} {...args} />
+              <PlatformaticIcon key={icon} iconName={icon} size={SMALL} {...args} />
             </div>
             <div style={col}>
-              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size={MEDIUM} {...args} />
+              <PlatformaticIcon key={icon} iconName={icon} size={MEDIUM} {...args} />
             </div>
             <div style={col}>
-              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size={LARGE} {...args} />
+              <PlatformaticIcon key={icon} iconName={icon} size={LARGE} {...args} />
             </div>
             <div style={col}>
-              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size={EXTRA_LARGE} {...args} />
+              <PlatformaticIcon key={icon} iconName={icon} size={EXTRA_LARGE} {...args} />
             </div>
           </div>
-        ))}
+        )
+        )}
       </div>
     </>
   )
 }
 export const PlatformaticIconAll = AllIconsTemplate.bind({})
 PlatformaticIconAll.args = {
-  color: 'white',
-  onClick: null
+  color: WHITE,
+  classes: '',
+  onClick: null,
+  tip: ''
 }