@platformatic/ui-components 0.1.57 → 0.1.59

package/src/components/icons/PullRequestIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const PullRequestIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -77,11 +78,11 @@ PullRequestIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 PullRequestIcon.defaultProps = {

package/src/components/icons/SendIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const SendIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -60,11 +61,11 @@ SendIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 SendIcon.defaultProps = {

package/src/components/icons/SocialDiscordIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const SocialDiscordIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -64,11 +65,11 @@ SocialDiscordIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 SocialDiscordIcon.defaultProps = {

package/src/components/icons/SocialGitHubIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const SocialGitHubIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -83,11 +84,11 @@ SocialGitHubIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 SocialGitHubIcon.defaultProps = {

package/src/components/icons/SocialGitLabIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const SocialGitLabIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -107,11 +108,11 @@ SocialGitLabIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 SocialGitLabIcon.defaultProps = {

package/src/components/icons/SocialLinkedInIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const SocialLinkedInIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -70,11 +71,11 @@ SocialLinkedInIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 SocialLinkedInIcon.defaultProps = {

package/src/components/icons/SocialNPMIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const SocialNPMIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -62,11 +63,11 @@ SocialNPMIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 SocialNPMIcon.defaultProps = {

package/src/components/icons/SocialTwitterIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const SocialTwitterIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -62,11 +63,11 @@ SocialTwitterIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 SocialTwitterIcon.defaultProps = {

package/src/components/icons/StopIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const StopIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -63,11 +64,11 @@ StopIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 StopIcon.defaultProps = {

package/src/components/icons/TerminalIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const TerminalIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -67,11 +68,11 @@ TerminalIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 TerminalIcon.defaultProps = {

package/src/components/icons/TwoUsersIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const TwoUsersIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -69,11 +70,11 @@ TwoUsersIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 TwoUsersIcon.defaultProps = {

package/src/components/icons/UpgradeIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const UpgradeIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -102,11 +103,11 @@ UpgradeIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 UpgradeIcon.defaultProps = {

package/src/components/icons/WorkspaceDynamicIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const WorkspaceDynamicIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -72,11 +73,11 @@ WorkspaceDynamicIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 WorkspaceDynamicIcon.defaultProps = {

package/src/components/icons/WorkspaceFailIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const WorkspaceFailIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -97,11 +98,11 @@ WorkspaceFailIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 WorkspaceFailIcon.defaultProps = {

package/src/components/icons/WorkspaceReadyIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const WorkspaceReadyIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -129,11 +130,11 @@ WorkspaceReadyIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 WorkspaceReadyIcon.defaultProps = {

package/src/components/icons/WorkspaceStaticIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const WorkspaceStaticIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -69,11 +70,11 @@ WorkspaceStaticIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 WorkspaceStaticIcon.defaultProps = {

package/src/components/icons/index.js

@@ -25,6 +25,7 @@ import CircleExclamationIcon from './CircleExclamationIcon'
 import CircleCheckMarkIcon from './CircleCheckMarkIcon'
 import CircleCloseIcon from './CircleCloseIcon'
 import CircleCloseHoverIcon from './CircleCloseHoverIcon'
+import CircleFullIcon from './CircleFullIcon'
 import CircleTwoArrowsDownIcon from './CircleTwoArrowsDownIcon'
 import CircleTwoArrowsUpIcon from './CircleTwoArrowsUpIcon'
 import CloseIcon from './CloseIcon'
@@ -88,6 +89,7 @@ export default {
   CircleExclamationIcon,
   CircleCloseIcon,
   CircleCloseHoverIcon,
+  CircleFullIcon,
   CircleTwoArrowsDownIcon,
   CircleTwoArrowsUpIcon,
   CloseIcon,

package/src/stories/BorderedBox.stories.jsx

@@ -1,13 +1,14 @@
 'use strict'
 import BorderedBox from '../components/BorderedBox'
+import { COLORS_BORDERED_BOX } from '../components/constants'
 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' }
+      options: COLORS_BORDERED_BOX,
+      type: 'radio'
     }
   }
 }
@@ -18,16 +19,15 @@ const Template = (args) => <BorderedBox {...args}>Hello Platformatic</BorderedBo
 export const Green = Template.bind({})
 
 Green.args = {
-  color: 'green'
+  color: 'main-green'
 }
 export const Red = Template.bind({})
 
 Red.args = {
-  color: 'red'
+  color: 'error-red'
 }
 
 export const White = Template.bind({})
-
 White.args = {
   color: 'white'
 }

package/src/stories/Button.stories.jsx

@@ -2,8 +2,7 @@
 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']
+import { COLORS_BUTTON, SIZES } from '../components/constants'
 
 export default {
   title: 'Platformatic/Button',
@@ -20,14 +19,14 @@ export default {
       type: 'string',
       control: {
         type: 'radio',
-        options: colors
+        options: COLORS_BUTTON
       }
     },
     color: {
       type: 'string',
       control: {
         type: 'radio',
-        options: colors
+        options: COLORS_BUTTON
       }
     },
     disabled: {
@@ -37,7 +36,7 @@ export default {
       type: 'string',
       control: {
         type: 'radio',
-        options: ['small', 'medium', 'large', 'extra-large']
+        options: SIZES
       }
     },
     hoverEffect: {

package/src/stories/ButtonFullRounded.stories.jsx

@@ -1,6 +1,6 @@
 'use strict'
-import { faStop, faRefresh } from '@fortawesome/free-solid-svg-icons'
 import ButtonFullRounded from '../components/ButtonFullRounded'
+import { COLORS_ICON, SIZES } from '../components/constants'
 
 export default {
   title: 'Platformatic/ButtonFullRounded',
@@ -17,14 +17,14 @@ export default {
       type: 'string',
       control: {
         type: 'radio',
-        options: ['green', 'red', 'white']
+        options: [COLORS_ICON]
       }
     },
     size: {
       type: 'string',
       control: {
         type: 'radio',
-        options: ['small', 'medium', 'large']
+        options: [SIZES]
       }
     }
   }
@@ -34,28 +34,28 @@ const Template = (args) => <ButtonFullRounded {...args} />
 
 export const WhiteLarge = Template.bind({})
 WhiteLarge.args = {
-  icon: faStop,
-  size: 'large'
+  iconName: 'PlayIcon',
+  iconSize: 'large'
 }
 
 export const GreenSmall = Template.bind({})
 GreenSmall.args = {
-  icon: faStop,
-  color: 'green',
-  size: 'small'
+  iconName: 'StopIcon',
+  iconColor: 'main-green',
+  iconSize: 'small'
 }
 
 export const Disabled = Template.bind({})
 
 Disabled.args = {
-  icon: faRefresh,
+  iconName: 'BellIcon',
   disabled: true
 }
 
 export const DisabledRed = Template.bind({})
 
 DisabledRed.args = {
-  icon: faRefresh,
-  color: 'red',
+  iconName: 'StopIcon',
+  iconColor: 'error-red',
   disabled: true
 }

package/src/stories/InfoBox.stories.jsx

@@ -28,7 +28,6 @@ InfoBoxSample.args = {
   buttonProps: {
     label: 'Sample button',
     backgroundColor: 'main-green',
-    color: 'red',
     onClick: () => alert('Clicked InfoBoxSample')
   }
 }
@@ -48,7 +47,7 @@ InfoBoxContained.args = {
 export const InfoBoxErrorContained = ContainedTemplate.bind({})
 InfoBoxErrorContained.args = {
   iconName: 'WorkspaceFailIcon',
-  iconColor: 'red',
+  iconColor: 'error-red',
   helpText: 'Write your own content',
   buttonProps: {
     label: 'Sample button',

package/src/stories/Modal.stories.jsx

@@ -25,7 +25,7 @@ const Template = (args) => {
     <main>
       <BorderedBox>This Is another Content</BorderedBox>
       <ContentThatLoads />
-      <Button color='green' buttonClass='primary' onClick={() => setIsOpen(true)} label='Open Modal' />
+      <Button color='main-green' buttonClass='primary' onClick={() => setIsOpen(true)} label='Open Modal' />
       {isOpen && <Modal setIsOpen={setIsOpen} {...rest}>{text}</Modal>}
     </main>
   )
@@ -37,7 +37,7 @@ const TemplateInvite = (args) => {
     <main>
       <BorderedBox>This Is another Content</BorderedBox>
       <ContentThatLoads />
-      <Button color='green' buttonClass='primary' onClick={() => setIsOpen(true)} label='Open Modal' />
+      <Button color='main-green' buttonClass='primary' onClick={() => setIsOpen(true)} label='Open Modal' />
       {isOpen && <Modal setIsOpen={setIsOpen} {...args}><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</p><Button buttonClass='primary' onClick={() => setIsOpen(false)} label='Discard invite' /></Modal>}
     </main>
   )

package/src/stories/PlatformaticIcon.stories.jsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import PlatformaticIcon from '../components/PlatformaticIcon'
 import Icons from '../components/icons'
-
-const colors = ['green', 'white', 'red', 'main-dark-blue']
+import { COLORS_ICON } from '../components/constants'
 
 const divStyle = {
   width: '100%'
@@ -32,7 +31,7 @@ export default {
       type: 'string',
       control: {
         type: 'radio',
-        options: colors
+        options: COLORS_ICON
       }
     },
     size: {

package/src/stories/Sidebar.stories.jsx

@@ -36,9 +36,9 @@ EmptySidebar.args = {
 
 const FullSidebarTemplate = (args) => {
   const [items, setItems] = useState([
-    { 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: 'WorkspaceDynamicIcon' }
+    { id: '1', iconName: 'WorkspaceStaticIcon', subTitle: 'Subtitle', title: 'a very very very very very long title 1' },
+    { id: '2', title: 'Title number 2', subTitle: 'Subtitle 2' },
+    { id: '3', title: 'Another Title', subTitle: 'Subtitle 3', iconName: 'WorkspaceDynamicIcon' }
   ])
   function onClickAdd () {
     const tmpItem = items.map(item => item)
@@ -59,3 +59,18 @@ FullSidebar.args = {
   onClickItemSelected: (index) => alert('selected: ' + index),
   onClickSettings: () => alert('settings')
 }
+
+export const AlreadySelected = Template.bind({})
+
+AlreadySelected.args = {
+  title: 'Sidebar bar Full',
+  addTitle: 'Create',
+  defaultSelected: '3',
+  items: [
+    { id: '1', iconName: 'WorkspaceStaticIcon', title: 'Static 1', subTitle: 'Subtitle 1' },
+    { id: '2', iconName: 'WorkspaceStaticIcon', title: 'Static 2', subTitle: 'Subtitle 2' },
+    { id: '3', iconName: 'WorkspaceDynamicIcon', title: 'Dynamic', subTitle: 'Subtitle 3' }
+  ],
+  onClickItemSelected: (index) => alert('selected: ' + index),
+  onClickSettings: () => alert('settings')
+}

package/src/stories/Status.stories.jsx

@@ -19,13 +19,13 @@ White.args = {
 export const Green = Template.bind({})
 
 Green.args = {
-  color: 'green',
+  color: 'main-green',
   status: 'online'
 }
 
 export const Red = Template.bind({})
 
 Red.args = {
-  color: 'red',
+  color: 'error-red',
   status: 'offline'
 }

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

@@ -84,6 +84,6 @@ IconBeforeAndAfter.args = {
   },
   afterIcon: {
     iconName: 'CircleAddIcon',
-    color: 'red'
+    color: 'error-red'
   }
 }

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

@@ -52,6 +52,6 @@ WithIcon.args = {
   title: 'My title',
   value: 'My value',
   afterValueIcon: 'WorkspaceStaticIcon',
-  afterValueIconColor: 'green',
+  afterValueIconColor: 'main-green',
   onClickAfterValueIcon: () => alert('icon clicked')
 }