@platformatic/ui-components 0.1.25 → 0.1.27

package/package.json

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

package/src/components/Button.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import styles from './Button.module.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 export default function Button (props) {
-  const { icon, label, primary, color } = props
+  const { icon, label, primary, color, disabled } = props
   let buttonClass = 'primary'
   if (!primary) {
     buttonClass = 'secondary'
@@ -15,7 +15,7 @@ export default function Button (props) {
     colorClass = 'red'
   }
   return (
-    <button className={`${styles.button} ${styles[buttonClass + '-' + colorClass]}`} {...props}>
+    <button className={`${styles.button} ${styles[buttonClass + '-' + colorClass]} ${disabled ? styles.disabled : null}`} disabled={disabled} {...props}>
       {icon ? <FontAwesomeIcon icon={icon} className='mr-2' data-testid='button-icon' /> : null}
       <span>{label}</span>
     </button>

package/src/components/Button.module.css

@@ -14,4 +14,8 @@
 }
 .secondary-red {
   @apply border-error-red text-error-red bg-none border border-solid box-border rounded-md font-normal;
+}
+
+.disabled {
+  @apply bg-opacity-30 cursor-default;
 }

package/src/components/DropDown.module.css

@@ -16,7 +16,7 @@
   @apply hover:cursor-pointer
 }
 .menu {
-  @apply absolute border-solid border border-main-green p-4 bg-dark-blue mt-8 rounded-md z-[9999];
+  @apply absolute border-solid border border-main-green p-4 bg-dark-blue mt-8 rounded-md z-[999];
 }
 .item {
   @apply mb-2

package/src/components/Modal.module.css

@@ -1,5 +1,5 @@
 .blur {
-  @apply absolute top-[50%] left-[50%] z-0 w-[100vw] h-[100vh] translate-x-[-50%] translate-y-[-50%];
+  @apply absolute top-[50%] left-[50%] z-0 w-[100vw] h-[100vh] translate-x-[-50%] translate-y-[-50%] z-[9999];
   background-color: rgba(0, 0, 0, 0.75);
 }
 .container {

package/src/stories/Button.stories.jsx

@@ -1,5 +1,6 @@
 'use strict'
 import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { useState } from 'react'
 import Button from '../components/Button'
 
 export default {
@@ -69,3 +70,38 @@ SecondaryRed.args = {
   label: 'Secondary Red',
   color: 'red'
 }
+
+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' primary='true' onClick={() => setEnabled(!enabled)} />
+      </div>
+
+    </div>
+
+  )
+}
+
+export const DisabledGreen = DisabledTemplate.bind({})
+
+DisabledGreen.args = {
+  primary: true,
+  label: 'A simple button',
+  color: 'green',
+  disabeld: true
+}
+
+export const DisabledRed = DisabledTemplate.bind({})
+
+DisabledRed.args = {
+  primary: true,
+  label: 'A simple button',
+  color: 'red',
+  disabeld: true
+}

package/src/stories/DropDown.stories.jsx

@@ -2,6 +2,7 @@
 import DropDown from '../components/DropDown'
 import BorderedBox from '../components/BorderedBox'
 import HorizontalSeparator from '../components/HorizontalSeparator'
+import { useState } from 'react'
 export default {
   title: 'Platformatic/DropDown',
   component: DropDown,
@@ -12,10 +13,19 @@ const Template = (args) => (
   <div>
     <DropDown {...args} />
     <HorizontalSeparator />
-    <BorderedBox>This is another content</BorderedBox>
+    <ContentThatLoads />
   </div>
-
 )
+
+const ContentThatLoads = () => {
+  const [content, setContent] = useState(null)
+  setTimeout(() => {
+    setContent(<div className='mt-4'><BorderedBox>This is rendered after</BorderedBox></div>)
+  }, 1000)
+
+  return content
+}
+
 export const DefaultAlignment = Template.bind({})
 
 DefaultAlignment.args = {

package/src/stories/Modal.stories.jsx

@@ -2,6 +2,8 @@ import React, { useState } from 'react'
 import Modal from '../components/Modal'
 import Button from '../components/Button'
 import BorderedBox from '../components/BorderedBox'
+import DropDown from '../components/DropDown'
+import HorizontalSeparator from '../components/HorizontalSeparator'
 export default {
   title: 'Platformatic/Modal',
   component: Modal
@@ -12,13 +14,42 @@ const Template = (args) => {
   return (
     <main>
       <BorderedBox>This Is another Content</BorderedBox>
+      <ContentThatLoads />
       <Button color='green' primary='true' onClick={() => setIsOpen(true)} label='Open Modal' />
       {isOpen && <Modal setIsOpen={setIsOpen} title='Modal Title'>Hello world!</Modal>}
     </main>
   )
 }
 
+const ContentThatLoads = () => {
+  const [content, setContent] = useState(null)
+  setTimeout(() => {
+    setContent(<div className='mt-4'><BorderedBox>This is a Future Component</BorderedBox></div>)
+  }, 1000)
+
+  return content
+}
+
 export const Default = Template.bind({})
 Default.args = {
   title: 'List Title'
 }
+
+const MenuTemplate = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const dropDownArgs = {
+    header: 'My Menu',
+    items: [
+      <span className='hover:cursor-pointer' key='2' onClick={() => setIsOpen(true)}>Show Modal</span>
+    ]
+  }
+  return (
+    <div>
+      <div className='text-white'><DropDown {...dropDownArgs} /></div>
+      <HorizontalSeparator />
+      {isOpen && <Modal setIsOpen={setIsOpen} title='Modal Title'>Hello world!</Modal>}
+      <ContentThatLoads />
+    </div>
+  )
+}
+export const WithDropDown = MenuTemplate.bind({})