@platformatic/ui-components 0.1.36 → 0.1.38

package/dist/main.css

@@ -660,11 +660,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-dark-green {
-  --tw-text-opacity: 1;
-  color: rgb(2 120 63 / var(--tw-text-opacity));
-}
-
 .text-main-green {
   --tw-text-opacity: 1;
   color: rgb(33 250 144 / var(--tw-text-opacity));
@@ -675,6 +670,11 @@ video {
   color: rgb(250 33 33 / var(--tw-text-opacity));
 }
 
+.text-dark-green {
+  --tw-text-opacity: 1;
+  color: rgb(2 120 63 / var(--tw-text-opacity));
+}
+
 .blur {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

package/index.js

@@ -11,9 +11,9 @@ import DropDown from './src/components/DropDown'
 import FollowUs from './src/components/FollowUs'
 import GHLoginButton from './src/components/GHLoginButton'
 import HorizontalSeparator from './src/components/HorizontalSeparator'
+import Forms from './src/components/forms'
 import Icons from './src/components/icons'
-import Input from './src/components/Input'
-import Sidebar from './src/components/Sidebar'
+import SideBar from './src/components/SideBar'
 import Layout from './src/components/layouts/Layout'
 import List from './src/components/List'
 import ListElement from './src/components/ListElement'
@@ -30,6 +30,7 @@ import TextWithLabel from './src/components/TextWithLabel'
 import TwoColumnsLayout from './src/components/layouts/TwoColumnsLayout'
 import Versions from './src/components/Versions'
 import VerticalSeparator from './src/components/VerticalSeparator'
+
 export {
   BorderedBox,
   BorderedText,
@@ -42,9 +43,9 @@ export {
   FollowUs,
   HorizontalSeparator,
   GHLoginButton,
+  Forms,
   Icons,
-  Input,
-  Sidebar,
+  SideBar,
   Layout,
   List,
   ListElement,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.36",
+  "version": "0.1.38",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/src/components/Button.module.css

@@ -38,7 +38,6 @@
   @apply text-main-green border-0 bg-transparent hover:underline;
 }
 
-
 .primary-red {
   @apply text-main-dark-blue bg-error-red;
 }
@@ -59,10 +58,13 @@
   @apply text-white border-0 bg-transparent hover:underline;
 }
 
+.tertiary-white {
+  @apply bg-main-dark-blue border-0 text-white !important;
+}
+
 .disabled {
   @apply opacity-30 cursor-default;
 }
-
 .disabled-transparent {
   @apply hover:no-underline;
 }

package/src/components/Common.module.css

@@ -1,7 +1,25 @@
+.bordered {
+  @apply border border-solid box-border rounded-md;
+}
+.bordered--green {
+  @apply border-main-green
+}
+.bordered--main-dark-blue {
+  @apply border-main-dark-blue;
+}
+
+.error-message {
+  @apply text-error-red text-xs px-2;
+}
+
 .padded {
   @apply px-2 py-2.5;
 }
 
-.bordered {
-  @apply border border-solid box-border rounded-md;
+.text--green {
+  @apply text-main-green
+}
+.text--main-dark-blue {
+  @apply text-main-dark-blue;
 }
+

package/src/components/HorizontalSeparator.jsx

@@ -1,9 +1,14 @@
 'use strict'
 import React from 'react'
 import styles from './HorizontalSeparator.module.css'
-export default function HorizontalSeparator ({ marginTop = 4, marginBottom = 4 }) {
+export default function HorizontalSeparator ({ marginTop = 4, marginBottom = 4, color = 'dark-green', opacity = 1 }) {
   function getClassName () {
-    return 'text-dark-green ' + (marginTop === marginBottom ? `${styles['marginY-' + marginTop]}` : `${styles['marginT-' + marginTop]} ${styles['marginB-' + marginBottom]}`)
+    let className = `text-${color} `
+    // margin
+    className += (marginTop === marginBottom ? `${styles['marginY-' + marginTop]}` : `${styles['marginT-' + marginTop]} ${styles['marginB-' + marginBottom]}`)
+    // opacity
+    if (opacity > 1) className += ' ' + styles[`apply-opacity-${opacity}`]
+    return className
   }
 
   return <hr className={getClassName()} />

package/src/components/HorizontalSeparator.module.css

@@ -20,4 +20,8 @@
 
 .marginB-10 {
   @apply mb-10;
+}
+
+.apply-opacity-20 {
+  @apply opacity-20;
 }

package/src/components/Logo.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-export default function Logo ({ width = 107, heigth = 86 }) {
+import styles from './Logo.module.css'
+export default function Logo ({ width = 107, heigth = 86, color = 'white' }) {
+  const className = styles[`${color}`]
   return (
     <svg
       width={width}
@@ -7,10 +9,12 @@ export default function Logo ({ width = 107, heigth = 86 }) {
       viewBox='0 0 107 86'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      className={className}
     >
       <path
+        id='platformatic-cloud'
         d='M30.8197 62.5803H89.7919V62.5614C92.0266 62.4574 94.2096 61.8539 96.1799 60.7954C98.1502 59.7369 99.8577 58.2503 101.177 56.4452C102.496 54.6401 103.392 52.5624 103.801 50.3652C104.21 48.168 104.12 45.9072 103.538 43.7493C102.956 41.5915 101.897 39.5915 100.438 37.8967C98.9799 36.202 97.1596 34.8556 95.1114 33.9567C93.0632 33.0579 90.8392 32.6294 88.6032 32.703C86.3673 32.7765 84.1763 33.3502 82.1917 34.3817C80.9669 31.5572 79.1131 29.0491 76.7716 27.0482C74.43 25.0473 71.6623 23.6064 68.6792 22.8352M18.1691 22.8352C13.8266 23.9537 9.97973 26.4828 7.23367 30.0244C4.48761 33.566 2.99827 37.9192 3 42.399C3.00173 46.8787 4.49443 51.2307 7.24322 54.7702C9.992 58.3098 13.8409 60.8359 18.1841 61.951'
-        stroke='white'
+        stroke='none'
         strokeWidth={4.21053}
         strokeLinecap='round'
         strokeLinejoin='round'

package/src/components/Logo.module.css

@@ -0,0 +1,6 @@
+.white > path[id='platformatic-cloud']{
+  @apply stroke-white
+}
+.main-dark-blue > path[id='platformatic-cloud']{
+  @apply stroke-main-dark-blue
+}

package/src/components/Modal.jsx

@@ -1,9 +1,12 @@
 import React, { useState } from 'react'
 import useEscapeKey from '../hooks/useEscapeKey'
 import CloseModalIcon from './icons/CloseModalIcon'
-import CloseModalGreenIcon from './icons/CloseModalGreenIcon'
-import CloseModalGreenHoverIcon from './icons/CloseModalGreenHoverIcon'
+import RoundCloseIcon from './icons/RoundCloseIcon'
+import RoundCloseHoverIcon from './icons/RoundCloseHoverIcon'
+import Logo from './Logo'
+import HorizontalSeparator from './HorizontalSeparator'
 import styles from './Modal.module.css'
+
 export default function Modal (props) {
   const { setIsOpen, title, layout = 'info' } = props
   const [isHoverCloseModal, setIsHoverCloseModal] = useState(false)
@@ -31,6 +34,7 @@ export default function Modal (props) {
         </>
       )
       break
+
     case 'invite':
       whichModal = (
         <>
@@ -44,7 +48,7 @@ export default function Modal (props) {
                   onMouseEnter={() => setIsHoverCloseModal(true)}
                   onMouseLeave={() => setIsHoverCloseModal(false)}
                 >
-                  {isHoverCloseModal ? <CloseModalGreenHoverIcon /> : <CloseModalGreenIcon />}
+                  {isHoverCloseModal ? <RoundCloseHoverIcon /> : <RoundCloseIcon />}
                 </div>
               </div>
               <p className={styles.titleInvite}>{title}</p>
@@ -54,6 +58,36 @@ export default function Modal (props) {
         </>
       )
       break
+
+    case 'fullscreen':
+      whichModal = (
+        <>
+          <div className={`${styles.container} ${styles.fullscreen}`}>
+            <div className={styles.modalFullscreen}>
+              <div className={styles.headerInvite}>
+                <div
+                  className={styles.close}
+                  onClick={() => setIsOpen(false)}
+                  onMouseEnter={() => setIsHoverCloseModal(true)}
+                  onMouseLeave={() => setIsHoverCloseModal(false)}
+                >
+                  {isHoverCloseModal ? <RoundCloseHoverIcon color='main-dark-blue' /> : <RoundCloseIcon color='main-dark-blue' />}
+                </div>
+              </div>
+              <div className={styles.contentFullscreen}>
+                <div className={styles.titleFullscreen}>
+                  <Logo width={100} heigth={80} color='main-dark-blue' />
+                  <h3>PLATFORMATIC</h3>
+                </div>
+                <HorizontalSeparator marginTop={10} marginBottom={10} color='main-dark-blue' opacity={20} />
+                <div>{props.children}</div>
+              </div>
+            </div>
+          </div>
+        </>
+      )
+      break
+
     default:
       break
   }

package/src/components/Modal.module.css

@@ -17,6 +17,9 @@
 .modalInvite {
   @apply bg-main-dark-blue border-light-green border shadow-wrap shadow-main-green max-w-[432px] max-h-[300px];
 }
+.fullscreen {
+  @apply fixed top-0 left-0 bg-light-blue h-screen w-full min-h-screen min-w-full py-4 pl-20 pr-4 overflow-y-auto;
+}
 .header {
   @apply flex justify-between items-center;
 }
@@ -35,3 +38,14 @@
 .titleInvite {
   @apply font-bold text-lg text-main-green text-center;
 }
+.contentFullscreen {
+  @apply h-auto max-w-[70%] w-full pt-4;
+}
+
+.titleFullscreen {
+  @apply inline-flex items-center;
+}
+.titleFullscreen h3 {
+  @apply text-[22px] text-dark-blue font-bold tracking-widest mx-3;
+}
+

package/src/components/SideBar.jsx

@@ -2,10 +2,10 @@ import React, { useState } from 'react'
 import PuzzleIcon from './icons/PuzzleIcon'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faChevronLeft, faPlus } from '@fortawesome/free-solid-svg-icons'
-import styles from './Sidebar.module.css'
+import styles from './SideBar.module.css'
 import ReactTooltip from 'react-tooltip'
 import HorizontalSeparator from './HorizontalSeparator'
-export default function Sidebar (props) {
+export default function SideBar (props) {
   const { title, defaultSelected = 0, onClickItemSelectedParent = () => {}, items = [], onClickAdd = () => {}, addTitle = 'Add' } = props
   const [collapsed, setCollapsed] = useState(false)
   const [selectedItem, setSelectedItem] = useState(defaultSelected)

package/src/components/forms/Input.jsx

@@ -0,0 +1,15 @@
+'use strict'
+import React from 'react'
+import styles from './Input.module.css'
+import commonStyles from '../Common.module.css'
+export default function Input ({ placeholder, value, name, borderColor = 'green', errorMessage = '', onChange = () => {} }) {
+  const className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles.padded
+  return (
+    <>
+      <div className={className}>
+        <input type='text' name={name} value={value} placeholder={placeholder} className='grow' onChange={onChange} />
+      </div>
+      {errorMessage.length > 0 && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+    </>
+  )
+}

package/src/components/forms/Input.module.css

@@ -0,0 +1,9 @@
+.inputContainer {
+  @apply flex justify-between w-full h-10 border border-solid box-border rounded-md;
+}
+.input {
+  @apply grow focus:outline-none focus-within:outline-none focus-visible:outline-none;
+}
+[type='text']:focus {
+  outline: none;
+}

package/src/components/forms/ToggleSwitch.jsx

@@ -0,0 +1,18 @@
+'use strict'
+import React from 'react'
+import styles from './ToggleSwitch.module.css'
+import commonStyles from '../Common.module.css'
+export default function ToggleSwitch ({ name, label, errorMessage = '', onChange = () => {} }) {
+  return (
+    <>
+      <div className={styles.container}>
+        <label className={styles.switch}>
+          <input type='checkbox' name={name} onChange={onChange} />
+          <span className={`${styles.slider} ${styles.round}`} />
+        </label>
+        <span className={styles.label}>{label}</span>
+      </div>
+      {errorMessage.length > 0 && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+    </>
+  )
+}

package/src/components/forms/ToggleSwitch.module.css

@@ -0,0 +1,43 @@
+.container {
+  @apply flex w-full h-10 items-center;
+}
+.switch {
+  @apply relative inline-block w-[50px] h-[24px];
+}
+.switch input { 
+  @apply opacity-0 w-0 h-0;
+}
+.slider {
+  @apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 h-full;
+  background-color: #707070;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+.label {
+  @apply px-2 text-xs font-normal text-main-dark-blue;
+}
+.slider:before {
+  @apply absolute h-4 w-4 left-[4px] bottom-[4px] bg-white;
+  content: "";
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  @apply bg-main-green;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 100px;
+}
+
+.slider.round:before {
+  @apply rounded-full;
+}

package/src/components/forms/index.js

@@ -0,0 +1,6 @@
+import ToggleSwitch from './ToggleSwitch'
+import Input from './Input'
+
+export default {
+  ToggleSwitch, Input
+}

package/src/components/icons/Icons.module.css

@@ -13,6 +13,17 @@
 .white > path {
   @apply stroke-white;
 }
+.main-dark-blue > circle,
+.main-dark-blue > rect,
+.main-dark-blue > path {
+  @apply stroke-main-dark-blue;
+}
+.fill-circle-green > circle {
+  @apply fill-white;
+}
+.fill-circle-main-dark-blue > circle {
+  @apply fill-main-dark-blue;
+}
 
 .noShrinkForFlex {
   @apply shrink-0

package/src/components/icons/RoundCloseHoverIcon.jsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const RoundCloseHoverIcon = ({ color = 'green' }) => {
+  const className = styles[`${color}`] + ' ' + styles[`fill-circle-${color}`]
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <circle
+        cx={12}
+        cy={12}
+        r={11.25}
+        fill='none'
+        fillOpacity={0.2}
+        stroke='none'
+        strokeWidth={1.5}
+      />
+      <path
+        d='M6 6L18 18'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M6 18L18 6'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+export default RoundCloseHoverIcon

package/src/components/icons/RoundCloseIcon.jsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const RoundCloseIcon = ({ color = 'green' }) => {
+  const className = styles[`${color}`]
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <circle cx={12} cy={12} r={11.5} stroke='none' />
+      <path
+        d='M6 6L18 18'
+        stroke='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M6 18L18 6'
+        stroke='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+export default RoundCloseIcon

package/src/components/icons/index.js

@@ -2,11 +2,11 @@ import ApiIcon from './ApiIcon'
 import ApiIconClosed from './ApiIconClosed'
 import ApiEmptyIcon from './ApiEmptyIcon'
 import CloseModalIcon from './CloseModalIcon'
-import CloseModalGreenIcon from './CloseModalGreenIcon'
-import CloseModalGreenHoverIcon from './CloseModalGreenHoverIcon'
+import RoundCloseIcon from './RoundCloseIcon'
+import RoundCloseHoverIcon from './RoundCloseHoverIcon'
 import MetricsIcon from './MetricsIcon'
 import PullRequestIcon from './PullRequestIcon'
 
 export default {
-  ApiIcon, ApiIconClosed, ApiEmptyIcon, CloseModalIcon, CloseModalGreenIcon, CloseModalGreenHoverIcon, MetricsIcon, PullRequestIcon
+  ApiIcon, ApiIconClosed, ApiEmptyIcon, CloseModalIcon, RoundCloseIcon, RoundCloseHoverIcon, MetricsIcon, PullRequestIcon
 }

package/src/stories/Modal.stories.jsx

@@ -12,7 +12,7 @@ export default {
       type: 'string',
       control: {
         type: 'radio',
-        options: ['info', 'invite']
+        options: ['info', 'invite', 'fullscreen']
       }
     }
   }
@@ -92,3 +92,9 @@ InviteLayout.args = {
   title: 'Give me an invite',
   layout: 'invite'
 }
+
+export const FullscreenLayout = Template.bind({})
+FullscreenLayout.args = {
+  title: 'Give me an invite',
+  layout: 'fullscreen'
+}

package/src/stories/SideBar.stories.jsx

@@ -1,6 +1,6 @@
 'use strict'
 import { useState } from 'react'
-import Sidebar from '../components/Sidebar'
+import SideBar from '../components/SideBar'
 import BorderedBox from '../components/BorderedBox'
 
 const divStyle = {
@@ -11,8 +11,8 @@ const divStyle = {
 }
 
 export default {
-  title: 'Platformatic/Sidebar',
-  component: Sidebar,
+  title: 'Platformatic/SideBar',
+  component: SideBar,
   decorators: [
     (Story) => (
       <div style={divStyle}>
@@ -23,17 +23,17 @@ export default {
   ]
 }
 
-const Template = (args) => <Sidebar {...args} />
+const Template = (args) => <SideBar {...args} />
 
-export const EmptySidebar = Template.bind({})
+export const EmptySideBar = Template.bind({})
 
-EmptySidebar.args = {
-  title: 'Sidebar bar empty',
+EmptySideBar.args = {
+  title: 'SideBar bar empty',
   addTitle: 'Create',
-  onClickAdd: () => alert('clicked on add EmptySidebar')
+  onClickAdd: () => alert('clicked on add EmptySideBar')
 }
 
-const FullSidebarTemplate = (args) => {
+const FullSideBarTemplate = (args) => {
   const [items, setItems] = useState(['a very very very very very long title 1', 'Title number 2'])
   function onClickAdd () {
     const tmpItem = items.map(item => item)
@@ -42,14 +42,14 @@ const FullSidebarTemplate = (args) => {
   }
 
   return (
-    <Sidebar items={items} onClickAdd={() => onClickAdd()} {...args} />
+    <SideBar items={items} onClickAdd={() => onClickAdd()} {...args} />
   )
 }
 
-export const FullSidebar = FullSidebarTemplate.bind({})
+export const FullSideBar = FullSideBarTemplate.bind({})
 
-FullSidebar.args = {
-  title: 'Sidebar bar Full',
+FullSideBar.args = {
+  title: 'SideBar bar Full',
   addTitle: 'Create',
   onClickItemSelected: (index) => alert('selected: ' + index)
 }

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

@@ -0,0 +1,56 @@
+'use strict'
+import React, { useState } from 'react'
+import Input from '../../components/forms/Input'
+export default {
+  title: 'Platformatic/Input',
+  component: Input
+}
+
+const Template = (args) => <Input {...args} />
+
+export const Default = Template.bind({})
+
+Default.args = {
+  name: 'test',
+  placeholder: 'Platformatic'
+}
+
+const TemplateBorderMainDarkBlue = (args) => <div style={{ backgroundColor: 'white', padding: '2px' }}><Input {...args} /></div>
+
+export const BorderMainDarkBlue = TemplateBorderMainDarkBlue.bind({})
+
+BorderMainDarkBlue.args = {
+  name: 'test',
+  placeholder: 'Platformatic',
+  borderColor: 'main-dark-blue'
+}
+
+export const DefaultInvalid = Template.bind({})
+
+DefaultInvalid.args = {
+  name: 'test',
+  placeholder: 'Platformatic',
+  errorMessage: 'This is an error message'
+}
+
+const TemplateValuedAndAlertChange = (args) => {
+  const [value, setValue] = useState('Initial value')
+
+  function handleChange (event) {
+    setValue(event.target.value)
+  }
+
+  return (
+    <>
+      <p>Value of the input {value}</p>
+      <Input {...args} value={value} onChange={handleChange} />
+    </>
+  )
+}
+
+export const ValuedAndAlertChange = TemplateValuedAndAlertChange.bind({})
+
+ValuedAndAlertChange.args = {
+  name: 'test',
+  placeholder: 'Platformatic'
+}

package/src/stories/forms/ToggleSwitch.stories.jsx

@@ -0,0 +1,15 @@
+'use strict'
+import ToggleSwitch from '../../components/forms/ToggleSwitch'
+export default {
+  title: 'Platformatic/ToggleSwitch',
+  component: ToggleSwitch
+}
+
+const Template = (args) => <ToggleSwitch {...args} />
+
+export const Default = Template.bind({})
+
+Default.args = {
+  name: 'test',
+  label: 'This is a label'
+}

package/src/components/Input.jsx

@@ -1,11 +0,0 @@
-'use strict'
-import React from 'react'
-import styles from './Input.module.css'
-import commonStyles from './Common.module.css'
-export default function Input ({ placeholder, value, name }) {
-  return (
-    <div className={`${styles.inputContainer} ${commonStyles.padded}`}>
-      <input type='text' name={name} value={value} placeholder={placeholder} className='grow' />
-    </div>
-  )
-}

package/src/components/Input.module.css

@@ -1,7 +0,0 @@
-.inputContainer {
-  @apply flex justify-between w-full h-10  text-white border-main-green border border-solid box-border rounded-md;
-}
-
-.input {
-  @apply grow focus:outline-none
-}

package/src/components/icons/CloseModalGreenHoverIcon.jsx

@@ -1,37 +0,0 @@
-import * as React from 'react'
-
-const CloseModalGreenHoverIcon = () => (
-  <svg
-    width={24}
-    height={24}
-    viewBox='0 0 24 24'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
-  >
-    <circle
-      cx={12}
-      cy={12}
-      r={11.25}
-      fill='#21FA90'
-      fillOpacity={0.2}
-      stroke='#21FA90'
-      strokeWidth={1.5}
-    />
-    <path
-      d='M6 6L18 18'
-      stroke='#21FA90'
-      strokeWidth={1.5}
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-    <path
-      d='M6 18L18 6'
-      stroke='#21FA90'
-      strokeWidth={1.5}
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-  </svg>
-)
-
-export default CloseModalGreenHoverIcon

package/src/components/icons/CloseModalGreenIcon.jsx

@@ -1,27 +0,0 @@
-import * as React from 'react'
-
-const CloseModalGreenIcon = () => (
-  <svg
-    width={24}
-    height={24}
-    viewBox='0 0 24 24'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
-  >
-    <circle cx={12} cy={12} r={11.5} stroke='#21FA90' />
-    <path
-      d='M6 6L18 18'
-      stroke='#21FA90'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-    <path
-      d='M6 18L18 6'
-      stroke='#21FA90'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-  </svg>
-)
-
-export default CloseModalGreenIcon

package/src/stories/Input.stories.jsx

@@ -1,15 +0,0 @@
-'use strict'
-import Input from '../components/Input'
-export default {
-  title: 'Platformatic/Input',
-  component: Input
-}
-
-const Template = (args) => <Input {...args} />
-
-export const Default = Template.bind({})
-
-Default.args = {
-  name: 'test',
-  placeholder: 'Platformatic'
-}