@platformatic/ui-components 0.1.32 → 0.1.33

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,65 +1,65 @@
-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
-}
-
-const Template = (args) => {
-  const [isOpen, setIsOpen] = useState(false)
-  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'>{args.text}</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'
-}
-
-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({})
+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
+}
+
+const Template = (args) => {
+  const [isOpen, setIsOpen] = useState(false)
+  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'>{args.text}</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'
+}
+
+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({})

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/SimpleMetric.stories.jsx

@@ -1,41 +1,41 @@
-'use strict'
-
-import SimpleMetric from '../components/SimpleMetric'
-
-export default {
-  title: 'Platformatic/SimpleMetric',
-  component: SimpleMetric
-}
-
-const Template = (args) => <SimpleMetric {...args} />
-
-export const Green = Template.bind({})
-
-Green.args = {
-  title: 'Requests',
-  color: 'green',
-  unit: 'ms',
-  value: 120,
-  tooltip: 'This is a tooltip for the metric'
-}
-
-export const Red = Template.bind({})
-
-Red.args = {
-  title: 'Requests',
-  color: 'red',
-  unit: 'ms',
-  value: 120,
-  tooltip: 'This is a tooltip for the metric'
-}
-
-export const WithPrefix = Template.bind({})
-
-WithPrefix.args = {
-  title: 'Requests',
-  color: 'green',
-  unit: 'ms',
-  value: 120,
-  pre: 'P90',
-  tooltip: 'This is a tooltip for the metric'
-}
+'use strict'
+
+import SimpleMetric from '../components/SimpleMetric'
+
+export default {
+  title: 'Platformatic/SimpleMetric',
+  component: SimpleMetric
+}
+
+const Template = (args) => <SimpleMetric {...args} />
+
+export const Green = Template.bind({})
+
+Green.args = {
+  title: 'Requests',
+  color: 'green',
+  unit: 'ms',
+  value: 120,
+  tooltip: 'This is a tooltip for the metric'
+}
+
+export const Red = Template.bind({})
+
+Red.args = {
+  title: 'Requests',
+  color: 'red',
+  unit: 'ms',
+  value: 120,
+  tooltip: 'This is a tooltip for the metric'
+}
+
+export const WithPrefix = Template.bind({})
+
+WithPrefix.args = {
+  title: 'Requests',
+  color: 'green',
+  unit: 'ms',
+  value: 120,
+  pre: 'P90',
+  tooltip: 'This is a tooltip for the metric'
+}

package/src/stories/Status.stories.jsx

@@ -1,31 +1,31 @@
-'use strict'
-import Status from '../components/Status'
-
-export default {
-  title: 'Platformatic/Status',
-  component: Status,
-  argTypes: {}
-}
-
-const Template = (args) => <Status {...args} />
-
-export const White = Template.bind({})
-
-White.args = {
-  color: 'white',
-  status: 'available'
-}
-
-export const Green = Template.bind({})
-
-Green.args = {
-  color: 'green',
-  status: 'online'
-}
-
-export const Red = Template.bind({})
-
-Red.args = {
-  color: 'red',
-  status: 'offline'
-}
+'use strict'
+import Status from '../components/Status'
+
+export default {
+  title: 'Platformatic/Status',
+  component: Status,
+  argTypes: {}
+}
+
+const Template = (args) => <Status {...args} />
+
+export const White = Template.bind({})
+
+White.args = {
+  color: 'white',
+  status: 'available'
+}
+
+export const Green = Template.bind({})
+
+Green.args = {
+  color: 'green',
+  status: 'online'
+}
+
+export const Red = Template.bind({})
+
+Red.args = {
+  color: 'red',
+  status: 'offline'
+}

package/src/stories/TextWithLabel.stories.jsx

@@ -1,25 +1,25 @@
-'use strict'
-
-import TextWithLabel from '../components/TextWithLabel'
-export default {
-  title: 'Platformatic/TextWithLabel',
-  component: TextWithLabel,
-  argTypes: {
-    label: { control: 'text' },
-    text: { control: 'text' }
-  }
-}
-const Template = (args) => <TextWithLabel {...args} />
-
-export const Standard = Template.bind({})
-
-Standard.args = {
-  label: 'Created By',
-  text: 'Platformatic Team'
-}
-
-export const WithLink = (args) => <TextWithLabel {...args}><a href='https://example.com'>Standard Link</a></TextWithLabel>
-
-WithLink.args = {
-  label: 'External Link'
-}
+'use strict'
+
+import TextWithLabel from '../components/TextWithLabel'
+export default {
+  title: 'Platformatic/TextWithLabel',
+  component: TextWithLabel,
+  argTypes: {
+    label: { control: 'text' },
+    text: { control: 'text' }
+  }
+}
+const Template = (args) => <TextWithLabel {...args} />
+
+export const Standard = Template.bind({})
+
+Standard.args = {
+  label: 'Created By',
+  text: 'Platformatic Team'
+}
+
+export const WithLink = (args) => <TextWithLabel {...args}><a href='https://example.com'>Standard Link</a></TextWithLabel>
+
+WithLink.args = {
+  label: 'External Link'
+}

package/src/stories/TwoColumnsLayout.stories.jsx

@@ -1,42 +1,42 @@
-'use strict'
-import TwoColumnsLayout from '../components/layouts/TwoColumnsLayout'
-import BorderedBox from '../components/BorderedBox'
-export default {
-  title: 'Platformatic/TwoColumnsLayout',
-  component: TwoColumnsLayout
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  /* argTypes: {
-    gridTemplate: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: ['Default', 'Columns', 'Rows', 'Responsive' ],
-      }
-    }
-  } */
-}
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <TwoColumnsLayout {...args}><BorderedBox>1st</BorderedBox><BorderedBox>2nd</BorderedBox></TwoColumnsLayout>
-
-export const Default = Template.bind({})
-
-Default.args = { }
-
-export const Columns = Template.bind({})
-
-Columns.args = {
-  gridTemplate: 'columns'
-}
-
-export const Rows = Template.bind({})
-
-Rows.args = {
-  gridTemplate: 'rows'
-}
-
-export const Responsive = Template.bind({})
-
-Responsive.args = {
-  gridTemplate: 'responsive'
-}
+'use strict'
+import TwoColumnsLayout from '../components/layouts/TwoColumnsLayout'
+import BorderedBox from '../components/BorderedBox'
+export default {
+  title: 'Platformatic/TwoColumnsLayout',
+  component: TwoColumnsLayout
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  /* argTypes: {
+    gridTemplate: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['Default', 'Columns', 'Rows', 'Responsive' ],
+      }
+    }
+  } */
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <TwoColumnsLayout {...args}><BorderedBox>1st</BorderedBox><BorderedBox>2nd</BorderedBox></TwoColumnsLayout>
+
+export const Default = Template.bind({})
+
+Default.args = { }
+
+export const Columns = Template.bind({})
+
+Columns.args = {
+  gridTemplate: 'columns'
+}
+
+export const Rows = Template.bind({})
+
+Rows.args = {
+  gridTemplate: 'rows'
+}
+
+export const Responsive = Template.bind({})
+
+Responsive.args = {
+  gridTemplate: 'responsive'
+}

package/src/styles/main.css

@@ -1,16 +1,16 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  @apply bg-main-dark-blue;
-  font-family: 'Montserrat';
-}
-a {
-  @apply text-tertiary-blue;
-}
-
-input {
-  background-color: transparent;
-
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  @apply bg-main-dark-blue;
+  font-family: 'Montserrat';
+}
+a {
+  @apply text-tertiary-blue;
+}
+
+input {
+  background-color: transparent;
+
 }

package/tailwind.config.cjs

@@ -1,37 +1,37 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./src/**/*.{html,jsx}'],
-  theme: {
-    container: {
-      center: true
-    },
-    extend: {
-      screens: {
-        'lg': '1440px',
-        // => @media (min-width: 1440px) { ... }
-      },  
-    },
-    colors: {
-      'main-green': '#21FA90',
-      'dark-green': '#02783F',
-      'light-green': '#21F190',
-      'main-dark-blue': '#00283D',
-      'dark-blue': '#00344F',
-      white: '#FFFFFF',
-      'error-red': '#FA2121',
-      'tertiary-blue': '#2588E4'
-    },
-    fontFamily: {
-      sans: ['Montserrat']
-    }
-  },
-  safelist: [
-    'border-error-red',
-    'border-main-green',
-    'text-3xl',
-    'text-4xl',
-    'text-5xl',
-    'text-6xl'
-  ],
-  plugins: []
-}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{html,jsx}'],
+  theme: {
+    container: {
+      center: true
+    },
+    extend: {
+      screens: {
+        'lg': '1440px',
+        // => @media (min-width: 1440px) { ... }
+      },  
+    },
+    colors: {
+      'main-green': '#21FA90',
+      'dark-green': '#02783F',
+      'light-green': '#21F190',
+      'main-dark-blue': '#00283D',
+      'dark-blue': '#00344F',
+      white: '#FFFFFF',
+      'error-red': '#FA2121',
+      'tertiary-blue': '#2588E4'
+    },
+    fontFamily: {
+      sans: ['Montserrat']
+    }
+  },
+  safelist: [
+    'border-error-red',
+    'border-main-green',
+    'text-3xl',
+    'text-4xl',
+    'text-5xl',
+    'text-6xl'
+  ],
+  plugins: []
+}

package/vite.config.js

@@ -1,6 +1,6 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-/** @type {import('vite').UserConfig} */
-export default defineConfig({
-  plugins: [react()]
-})
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+/** @type {import('vite').UserConfig} */
+export default defineConfig({
+  plugins: [react()]
+})