@platformatic/ui-components 0.1.49 → 0.1.51

package/src/stories/Loader.stories.jsx

@@ -1,44 +1,44 @@
-import React, { useState } from 'react'
-import Loader from '../components/Loader'
-import Button from '../components/Button'
-import BorderedBox from '../components/BorderedBox'
-
-const loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est nisl, maximus aliquet urna eu, consequat semper nisi. Nam vel elit feugiat dui congue elementum. Sed turpis urna, egestas at pharetra et, lacinia ac mauris. Pellentesque cursus, ipsum nec malesuada ornare, dui purus ultrices elit, non blandit nisi quam non nisi. Suspendisse sapien leo, ultricies pretium vulputate sed, malesuada sed justo. Suspendisse euismod erat ut lacus feugiat malesuada. In tempor a eros et egestas. Nam pretium dolor sollicitudin, cursus sem vitae, elementum enim. Nam in nisi ipsum.'
-
-export default {
-  title: 'Platformatic/Loader',
-  component: Loader
-}
-
-export const Loading = args =>
-  <Loader {...args}>
-    <BorderedBox>{loremIpsum}</BorderedBox>
-  </Loader>
-
-Loading.args = {
-  loading: true
-}
-
-export const LoadsAndStops = ({ loading, ...args }) => {
-  const [showLoader, setShowLoader] = useState(args.loading)
-  const show = () => setShowLoader(true)
-  const hide = () => setShowLoader(false)
-
-  function load () {
-    show()
-    const timer = setTimeout(() => {
-      hide()
-    }, 2000)
-    return () => clearTimeout(timer)
-  }
-
-  return (
-    <Loader loading={showLoader} {...args}>
-      <Button label='Start Loading' color='error-red' onClick={() => load()} />
-      <BorderedBox>{loremIpsum}</BorderedBox>
-    </Loader>
-  )
-}
-LoadsAndStops.args = {
-  loading: false
-}
+import React, { useState } from 'react'
+import Loader from '../components/Loader'
+import Button from '../components/Button'
+import BorderedBox from '../components/BorderedBox'
+
+const loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est nisl, maximus aliquet urna eu, consequat semper nisi. Nam vel elit feugiat dui congue elementum. Sed turpis urna, egestas at pharetra et, lacinia ac mauris. Pellentesque cursus, ipsum nec malesuada ornare, dui purus ultrices elit, non blandit nisi quam non nisi. Suspendisse sapien leo, ultricies pretium vulputate sed, malesuada sed justo. Suspendisse euismod erat ut lacus feugiat malesuada. In tempor a eros et egestas. Nam pretium dolor sollicitudin, cursus sem vitae, elementum enim. Nam in nisi ipsum.'
+
+export default {
+  title: 'Platformatic/Loader',
+  component: Loader
+}
+
+export const Loading = args =>
+  <Loader {...args}>
+    <BorderedBox>{loremIpsum}</BorderedBox>
+  </Loader>
+
+Loading.args = {
+  loading: true
+}
+
+export const LoadsAndStops = ({ loading, ...args }) => {
+  const [showLoader, setShowLoader] = useState(args.loading)
+  const show = () => setShowLoader(true)
+  const hide = () => setShowLoader(false)
+
+  function load () {
+    show()
+    const timer = setTimeout(() => {
+      hide()
+    }, 2000)
+    return () => clearTimeout(timer)
+  }
+
+  return (
+    <Loader loading={showLoader} {...args}>
+      <Button label='Start Loading' color='error-red' onClick={() => load()} />
+      <BorderedBox>{loremIpsum}</BorderedBox>
+    </Loader>
+  )
+}
+LoadsAndStops.args = {
+  loading: false
+}

package/src/stories/LoginButton.stories.jsx

@@ -1,15 +1,15 @@
-import React from 'react'
-import LoginButton from '../components/LoginButton'
-
-export default {
-  title: 'Platformatic/LoginButton',
-  component: LoginButton
-}
-
-const Template = (args) => <LoginButton {...args} />
-
-export const NoIcon = Template.bind({})
-NoIcon.args = {
-  label: 'Click here',
-  onClick: () => alert('clicked')
-}
+import React from 'react'
+import LoginButton from '../components/LoginButton'
+
+export default {
+  title: 'Platformatic/LoginButton',
+  component: LoginButton
+}
+
+const Template = (args) => <LoginButton {...args} />
+
+export const NoIcon = Template.bind({})
+NoIcon.args = {
+  label: 'Click here',
+  onClick: () => alert('clicked')
+}

package/src/stories/Logo.stories.jsx

@@ -1,17 +1,17 @@
-import React from 'react'
-import Logo from '../components/Logo'
-
-export default {
-  title: 'Platformatic/Logo',
-  component: Logo
-}
-
-const Template = (args) => <Logo {...args} />
-export const LogoLarge = Template.bind({})
-LogoLarge.args = {
-  width: 300,
-  heigth: 300
-}
-
-export const LogoNormal = Template.bind({})
-LogoNormal.args = {}
+import React from 'react'
+import Logo from '../components/Logo'
+
+export default {
+  title: 'Platformatic/Logo',
+  component: Logo
+}
+
+const Template = (args) => <Logo {...args} />
+export const LogoLarge = Template.bind({})
+LogoLarge.args = {
+  width: 300,
+  heigth: 300
+}
+
+export const LogoNormal = Template.bind({})
+LogoNormal.args = {}

package/src/stories/Modal.stories.jsx

@@ -1,100 +1,100 @@
-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,
-  argTypes: {
-    layout: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: ['info', 'invite', 'fullscreen']
-      }
-    }
-  }
-}
-
-const Template = (args) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const { text, ...rest } = args
-  return (
-    <main>
-      <BorderedBox>This Is another Content</BorderedBox>
-      <ContentThatLoads />
-      <Button color='green' buttonClass='primary' onClick={() => setIsOpen(true)} label='Open Modal' />
-      {isOpen && <Modal setIsOpen={setIsOpen} {...rest}>{text}</Modal>}
-    </main>
-  )
-}
-
-const TemplateInvite = (args) => {
-  const [isOpen, setIsOpen] = useState(false)
-  return (
-    <main>
-      <BorderedBox>This Is another Content</BorderedBox>
-      <ContentThatLoads />
-      <Button color='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>
-  )
-}
-
-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',
-  text: 'Hello World',
-  layout: 'info'
-}
-
-export const WithLongText = Template.bind({})
-
-WithLongText.args = {
-  title: 'Modal',
-  text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum, lorem nec tincidunt pellentesque, odio orci posuere lacus, et hendrerit turpis dolor nec metus. Nunc quis finibus enim. Vestibulum a mollis velit. Ut nec vestibulum urna. Phasellus ut odio nec leo hendrerit laoreet eget at turpis. Nulla facilisi. Vivamus accumsan arcu malesuada, imperdiet ligula vitae, varius elit. Morbi blandit eros nec eros rutrum mattis. Nulla nibh nisi, pellentesque a ornare at, ultrices sit amet felis. Nulla bibendum metus diam, vitae gravida dui semper iaculis.
-  
-  `.repeat(5)
-}
-
-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({})
-
-export const InviteLayout = TemplateInvite.bind({})
-InviteLayout.args = {
-  title: 'Give me an invite',
-  layout: 'invite'
-}
-
-export const FullscreenLayout = Template.bind({})
-FullscreenLayout.args = {
-  title: 'Give me an invite',
-  layout: 'fullscreen'
-}
+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,
+  argTypes: {
+    layout: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['info', 'invite', 'fullscreen']
+      }
+    }
+  }
+}
+
+const Template = (args) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const { text, ...rest } = args
+  return (
+    <main>
+      <BorderedBox>This Is another Content</BorderedBox>
+      <ContentThatLoads />
+      <Button color='green' buttonClass='primary' onClick={() => setIsOpen(true)} label='Open Modal' />
+      {isOpen && <Modal setIsOpen={setIsOpen} {...rest}>{text}</Modal>}
+    </main>
+  )
+}
+
+const TemplateInvite = (args) => {
+  const [isOpen, setIsOpen] = useState(false)
+  return (
+    <main>
+      <BorderedBox>This Is another Content</BorderedBox>
+      <ContentThatLoads />
+      <Button color='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>
+  )
+}
+
+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',
+  text: 'Hello World',
+  layout: 'info'
+}
+
+export const WithLongText = Template.bind({})
+
+WithLongText.args = {
+  title: 'Modal',
+  text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum, lorem nec tincidunt pellentesque, odio orci posuere lacus, et hendrerit turpis dolor nec metus. Nunc quis finibus enim. Vestibulum a mollis velit. Ut nec vestibulum urna. Phasellus ut odio nec leo hendrerit laoreet eget at turpis. Nulla facilisi. Vivamus accumsan arcu malesuada, imperdiet ligula vitae, varius elit. Morbi blandit eros nec eros rutrum mattis. Nulla nibh nisi, pellentesque a ornare at, ultrices sit amet felis. Nulla bibendum metus diam, vitae gravida dui semper iaculis.
+  
+  `.repeat(5)
+}
+
+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({})
+
+export const InviteLayout = TemplateInvite.bind({})
+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/PlatformaticIcon.stories.jsx

@@ -1,35 +1,57 @@
-import React from 'react'
-import PlatformaticIcon from '../components/PlatformaticIcon'
-import Icons from '../components/icons'
-
-const divStyle = {
-  width: '100%',
-  display: 'flex',
-  flexGap: '10px'
-}
-
-export default {
-  title: 'Platformatic/PlatformaticIcon',
-  component: PlatformaticIcon
-}
-
-const Template = (args) => <PlatformaticIcon {...args} />
-export const PlatformaticIconDefault = Template.bind({})
-PlatformaticIconDefault.args = {
-  iconName: 'CopyIcon',
-  onClick: () => alert('clicked')
-}
-
-const AllIconsTemplate = (args) => {
-  const icons = Object.values(Icons)
-  return (
-    <div style={divStyle}>
-      {icons.map(IconComponent => <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} {...args} />)}
-    </div>
-  )
-}
-export const PlatformaticIconAll = AllIconsTemplate.bind({})
-PlatformaticIconAll.args = {
-  color: 'white',
-  size: 'small'
-}
+import React from 'react'
+import PlatformaticIcon from '../components/PlatformaticIcon'
+import Icons from '../components/icons'
+
+const divStyle = {
+  width: '100%',
+  display: 'flex',
+  flexGap: '10px'
+}
+
+export default {
+  title: 'Platformatic/PlatformaticIcon',
+  component: PlatformaticIcon
+}
+
+const Template = (args) => <PlatformaticIcon {...args} />
+export const PlatformaticIconDefault = Template.bind({})
+PlatformaticIconDefault.args = {
+  iconName: 'CopyPasteIcon',
+  onClick: () => alert('clicked')
+}
+
+const AllIconsTemplate = (args) => {
+  const icons = Object.values(Icons)
+  return (
+    <>
+      <p className='text-white'> Platformatic all icons size {args.size}</p>
+      <div style={divStyle}>
+        {icons.map(IconComponent => <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} {...args} />)}
+      </div>
+    </>
+  )
+}
+export const PlatformaticIconSmall = AllIconsTemplate.bind({})
+PlatformaticIconSmall.args = {
+  color: 'white',
+  size: 'small',
+  onClick: null
+}
+
+export const PlatformaticIconNormal = AllIconsTemplate.bind({})
+PlatformaticIconNormal.args = {
+  color: 'white',
+  size: 'normal'
+}
+
+export const PlatformaticIconLarge = AllIconsTemplate.bind({})
+PlatformaticIconLarge.args = {
+  color: 'green',
+  size: 'large'
+}
+
+export const PlatformaticIconExtraLarge = AllIconsTemplate.bind({})
+PlatformaticIconExtraLarge.args = {
+  color: 'green',
+  size: 'extra-large'
+}

package/src/stories/SearchBar.stories.jsx

@@ -1,28 +1,28 @@
-'use strict'
-import SearchBar from '../components/SearchBar'
-export default {
-  title: 'Platformatic/SearchBar',
-  component: SearchBar,
-  argTypes: {
-    onChange: { control: 'function' },
-    onSubmit: { control: 'function' },
-    title: { control: 'text' }
-  }
-}
-const Template = (args) => {
-  return (
-    <>
-      <SearchBar {...args}>Hello Platformatic</SearchBar>
-    </>
-
-  )
-}
-export const Standard = Template.bind({})
-Standard.args = {
-  onChange: (value) => {
-    console.log('Current search: ' + value)
-  },
-  onSubmit: (value) => {
-    alert('Query value: ' + value)
-  }
-}
+'use strict'
+import SearchBar from '../components/SearchBar'
+export default {
+  title: 'Platformatic/SearchBar',
+  component: SearchBar,
+  argTypes: {
+    onChange: { control: 'function' },
+    onSubmit: { control: 'function' },
+    title: { control: 'text' }
+  }
+}
+const Template = (args) => {
+  return (
+    <>
+      <SearchBar {...args}>Hello Platformatic</SearchBar>
+    </>
+
+  )
+}
+export const Standard = Template.bind({})
+Standard.args = {
+  onChange: (value) => {
+    console.log('Current search: ' + value)
+  },
+  onSubmit: (value) => {
+    alert('Query value: ' + value)
+  }
+}

package/src/stories/Sidebar.stories.jsx

@@ -1,61 +1,61 @@
-'use strict'
-import { useState } from 'react'
-import Sidebar from '../components/Sidebar'
-import BorderedBox from '../components/BorderedBox'
-
-const divStyle = {
-  display: 'flex',
-  width: '100%',
-  minHeight: '400px',
-  gap: '10px'
-}
-
-export default {
-  title: 'Platformatic/Sidebar',
-  component: Sidebar,
-  decorators: [
-    (Story) => (
-      <div style={divStyle}>
-        <Story />
-        <BorderedBox>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</BorderedBox>
-      </div>
-    )
-  ]
-}
-
-const Template = (args) => <Sidebar {...args} />
-
-export const EmptySidebar = Template.bind({})
-
-EmptySidebar.args = {
-  title: 'Sidebar bar empty',
-  addTitle: 'Create',
-  onClickAdd: () => alert('clicked on add EmptySidebar'),
-  onClickSettings: () => alert('settings')
-}
-
-const FullSidebarTemplate = (args) => {
-  const [items, setItems] = useState([
-    { iconName: 'StaticWorkspaceIcon', 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' }
-  ])
-  function onClickAdd () {
-    const tmpItem = items.map(item => item)
-    tmpItem.push('Title number ' + (items.length + 1))
-    setItems(tmpItem)
-  }
-
-  return (
-    <Sidebar items={items} onClickAdd={() => onClickAdd()} {...args} />
-  )
-}
-
-export const FullSidebar = FullSidebarTemplate.bind({})
-
-FullSidebar.args = {
-  title: 'Sidebar bar Full',
-  addTitle: 'Create',
-  onClickItemSelected: (index) => alert('selected: ' + index),
-  onClickSettings: () => alert('settings')
-}
+'use strict'
+import { useState } from 'react'
+import Sidebar from '../components/Sidebar'
+import BorderedBox from '../components/BorderedBox'
+
+const divStyle = {
+  display: 'flex',
+  width: '100%',
+  minHeight: '400px',
+  gap: '10px'
+}
+
+export default {
+  title: 'Platformatic/Sidebar',
+  component: Sidebar,
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+        <BorderedBox>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</BorderedBox>
+      </div>
+    )
+  ]
+}
+
+const Template = (args) => <Sidebar {...args} />
+
+export const EmptySidebar = Template.bind({})
+
+EmptySidebar.args = {
+  title: 'Sidebar bar empty',
+  addTitle: 'Create',
+  onClickAdd: () => alert('clicked on add EmptySidebar'),
+  onClickSettings: () => alert('settings')
+}
+
+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' }
+  ])
+  function onClickAdd () {
+    const tmpItem = items.map(item => item)
+    tmpItem.push('Title number ' + (items.length + 1))
+    setItems(tmpItem)
+  }
+
+  return (
+    <Sidebar items={items} onClickAdd={() => onClickAdd()} {...args} />
+  )
+}
+
+export const FullSidebar = FullSidebarTemplate.bind({})
+
+FullSidebar.args = {
+  title: 'Sidebar bar Full',
+  addTitle: 'Create',
+  onClickItemSelected: (index) => alert('selected: ' + index),
+  onClickSettings: () => alert('settings')
+}