@platformatic/ui-components 0.1.31 → 0.1.33

package/src/components/Loadable.jsx

@@ -1,34 +1,34 @@
-import React, { useState, cloneElement, Children } from 'react'
-import styles from './Loadable.module.css'
-import { SpinnerCircular } from 'spinners-react'
-
-export default function List ({ ...props }) {
-  // If null then loading not started, if true then loading, if false then done loading
-  const [loading, setLoading] = useState(null)
-  const startLoading = (reset = false) => {
-    // We can start only once (unless we reset)
-    if (loading === null || reset) {
-      setLoading(true)
-    }
-  }
-  const stopLoading = () => setLoading(false)
-
-  const children = Children.map(props.children, child => cloneElement(child, { startLoading, stopLoading }))
-
-  return (
-    <div className={styles.container} data-testid='loadable'>
-      {
-        loading
-          ? (
-            <>
-              <div data-testid='loadable-content' className={styles.relative}>
-                <SpinnerCircular className={styles.spinner} thickness={180} size={60} />
-                <div className={styles.blurred}>{children}</div>
-              </div>
-            </>
-            )
-          : <>{children}</>
-      }
-    </div>
-  )
-}
+import React, { useState, cloneElement, Children } from 'react'
+import styles from './Loadable.module.css'
+import { SpinnerCircular } from 'spinners-react'
+
+export default function List ({ ...props }) {
+  // If null then loading not started, if true then loading, if false then done loading
+  const [loading, setLoading] = useState(null)
+  const startLoading = (reset = false) => {
+    // We can start only once (unless we reset)
+    if (loading === null || reset) {
+      setLoading(true)
+    }
+  }
+  const stopLoading = () => setLoading(false)
+
+  const children = Children.map(props.children, child => cloneElement(child, { startLoading, stopLoading }))
+
+  return (
+    <div className={styles.container} data-testid='loadable'>
+      {
+        loading
+          ? (
+            <>
+              <div data-testid='loadable-content' className={styles.relative}>
+                <SpinnerCircular className={styles.spinner} thickness={180} size={60} />
+                <div className={styles.blurred}>{children}</div>
+              </div>
+            </>
+            )
+          : <>{children}</>
+      }
+    </div>
+  )
+}

package/src/components/Loadable.module.css

@@ -1,13 +1,13 @@
-
-.container {
-  @apply relative
-}
-
-.spinner {
-    @apply z-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2
-}
-
-.blurred {
-  @apply blur-sm
-}
-
+
+.container {
+  @apply relative
+}
+
+.spinner {
+    @apply z-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2
+}
+
+.blurred {
+  @apply blur-sm
+}
+

package/src/components/LoginButton.jsx

@@ -1,17 +1,17 @@
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import styles from './LoginButton.module.css'
-
-export default function LoginButton ({ icon, label, onClick, ...props }) {
-  return (
-    <div className={styles.container} onClick={onClick}>
-      <div
-        className={styles.button}
-        data-testid='login-button'
-        {...props}
-      >
-        {icon ? <FontAwesomeIcon icon={icon} className='mr-2' data-testid='login-button-icon' /> : null} {label}
-      </div>
-    </div>
-  )
-}
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import styles from './LoginButton.module.css'
+
+export default function LoginButton ({ icon, label, onClick, ...props }) {
+  return (
+    <div className={styles.container} onClick={onClick}>
+      <div
+        className={styles.button}
+        data-testid='login-button'
+        {...props}
+      >
+        {icon ? <FontAwesomeIcon icon={icon} className='mr-2' data-testid='login-button-icon' /> : null} {label}
+      </div>
+    </div>
+  )
+}

package/src/components/LoginButton.module.css

@@ -1,7 +1,7 @@
-.button {
-  @apply bg-light-green text-main-dark-blue font-bold py-2 px-4 rounded w-full text-center cursor-pointer
-}
-
-.container {
-  @apply w-64
-}
+.button {
+  @apply bg-light-green text-main-dark-blue font-bold py-2 px-4 rounded w-full text-center cursor-pointer
+}
+
+.container {
+  @apply w-64
+}

package/src/components/LoginButton.test.jsx

@@ -1,25 +1,25 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import LoginButton from './LoginButton'
-import { faTwitter } from '@fortawesome/free-brands-svg-icons'
-
-test('<LoginButton /> with label', () => {
-  const label = 'My Button'
-  render(
-    <LoginButton label={label} />
-  )
-  expect(screen.getByTestId('login-button')).toHaveTextContent(label)
-  const icon = screen.queryByTestId('login-button-icon')
-  expect(icon).not.toBeInTheDocument()
-})
-
-test('<LoginButton /> with label and twitter icon', () => {
-  const label = 'My Twitter Button'
-  render(
-    <LoginButton label={label} icon={faTwitter} />
-  )
-  expect(screen.getByTestId('login-button')).toHaveTextContent(label)
-  const icon = screen.queryByTestId('login-button-icon')
-  expect(icon).toBeInTheDocument()
-})
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import LoginButton from './LoginButton'
+import { faTwitter } from '@fortawesome/free-brands-svg-icons'
+
+test('<LoginButton /> with label', () => {
+  const label = 'My Button'
+  render(
+    <LoginButton label={label} />
+  )
+  expect(screen.getByTestId('login-button')).toHaveTextContent(label)
+  const icon = screen.queryByTestId('login-button-icon')
+  expect(icon).not.toBeInTheDocument()
+})
+
+test('<LoginButton /> with label and twitter icon', () => {
+  const label = 'My Twitter Button'
+  render(
+    <LoginButton label={label} icon={faTwitter} />
+  )
+  expect(screen.getByTestId('login-button')).toHaveTextContent(label)
+  const icon = screen.queryByTestId('login-button-icon')
+  expect(icon).toBeInTheDocument()
+})

package/src/components/Logo.jsx

@@ -1,58 +1,58 @@
-import React from 'react'
-export default function Logo ({ width = 107, heigth = 86 }) {
-  return (
-    <svg
-      width={width}
-      height={heigth}
-      viewBox='0 0 107 86'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-    >
-      <path
-        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-width='4.21053'
-        stroke-linecap='round'
-        stroke-linejoin='round'
-      />
-      <path
-        d='M41.4979 35.2219L33.6299 37.9838L37.0924 45.3197'
-        stroke='#21FA90'
-        stroke-width='4.21053'
-        stroke-linecap='round'
-        stroke-linejoin='round'
-      />
-      <path
-        d='M33.8069 38.1138C37.3946 40.2213 41.5789 41.0853 45.709 40.5715C49.8391 40.0577 53.6834 38.1948 56.6441 35.2727C59.6047 32.3505 61.5157 28.5329 62.0797 24.4136C62.6437 20.2943 61.8292 16.1043 59.7628 12.4953C57.6964 8.88629 54.494 6.0606 50.6537 4.45774C46.8135 2.85489 42.5506 2.56474 38.5281 3.63241C34.5057 4.70009 30.9492 7.06574 28.4119 10.3614C25.8745 13.6571 24.4986 17.698 24.498 21.8556V49.9806'
-        stroke='#21FA90'
-        stroke-width='4.21053'
-        stroke-linecap='round'
-        stroke-linejoin='round'
-      />
-      <path
-        opacity='0.2'
-        d='M24.498 79.7146V83.0001'
-        stroke='#21FA90'
-        stroke-width='4.21053'
-        stroke-linecap='round'
-        stroke-linejoin='round'
-      />
-      <path
-        opacity='0.4'
-        d='M24.5283 69.3757V74.5658'
-        stroke='#21FA90'
-        stroke-width='4.21053'
-        stroke-linecap='round'
-        stroke-linejoin='round'
-      />
-      <path
-        opacity='0.7'
-        d='M24.498 55.3254V64.0028'
-        stroke='#21FA90'
-        stroke-width='4.21053'
-        stroke-linecap='round'
-        stroke-linejoin='round'
-      />
-    </svg>
-  )
-}
+import React from 'react'
+export default function Logo ({ width = 107, heigth = 86 }) {
+  return (
+    <svg
+      width={width}
+      height={heigth}
+      viewBox='0 0 107 86'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        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'
+        strokeWidth={4.21053}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M41.4979 35.2219L33.6299 37.9838L37.0924 45.3197'
+        stroke='#21FA90'
+        strokeWidth={4.21053}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M33.8069 38.1138C37.3946 40.2213 41.5789 41.0853 45.709 40.5715C49.8391 40.0577 53.6834 38.1948 56.6441 35.2727C59.6047 32.3505 61.5157 28.5329 62.0797 24.4136C62.6437 20.2943 61.8292 16.1043 59.7628 12.4953C57.6964 8.88629 54.494 6.0606 50.6537 4.45774C46.8135 2.85489 42.5506 2.56474 38.5281 3.63241C34.5057 4.70009 30.9492 7.06574 28.4119 10.3614C25.8745 13.6571 24.4986 17.698 24.498 21.8556V49.9806'
+        stroke='#21FA90'
+        strokeWidth={4.21053}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        opacity='0.2'
+        d='M24.498 79.7146V83.0001'
+        stroke='#21FA90'
+        strokeWidth={4.21053}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        opacity='0.4'
+        d='M24.5283 69.3757V74.5658'
+        stroke='#21FA90'
+        strokeWidth={4.21053}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        opacity='0.7'
+        d='M24.498 55.3254V64.0028'
+        stroke='#21FA90'
+        strokeWidth={4.21053}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}

package/src/components/Main.jsx

@@ -1,33 +1,33 @@
-'use strict'
-
-import SearchBar from './SearchBar'
-import TabbedWindow from './TabbedWindow'
-import Playground from './Playground'
-import Versions from './Versions'
-import React, { useState } from 'react'
-export default function Main () {
-  const [currentSearch, setCurrentSearch] = useState('')
-  const tabs = [
-    {
-      label: 'Playground',
-      component: () => <Playground />
-    },
-    {
-      label: 'Versions',
-      component: () => <Versions />
-    }
-
-  ]
-  return (
-    <>
-      <h1 className='text-white text-2xl font-bold'>My APIs</h1>
-      <SearchBar action={(value) => setCurrentSearch(value)} />
-      {currentSearch !== '' && (
-        <span className='text-main-green'>You searched for {currentSearch}</span>
-      )}
-      <TabbedWindow
-        tabs={tabs}
-      />
-    </>
-  )
-}
+'use strict'
+
+import SearchBar from './SearchBar'
+import TabbedWindow from './TabbedWindow'
+import Playground from './Playground'
+import Versions from './Versions'
+import React, { useState } from 'react'
+export default function Main () {
+  const [currentSearch, setCurrentSearch] = useState('')
+  const tabs = [
+    {
+      label: 'Playground',
+      component: () => <Playground />
+    },
+    {
+      label: 'Versions',
+      component: () => <Versions />
+    }
+
+  ]
+  return (
+    <>
+      <h1 className='text-white text-2xl font-bold'>My APIs</h1>
+      <SearchBar action={(value) => setCurrentSearch(value)} />
+      {currentSearch !== '' && (
+        <span className='text-main-green'>You searched for {currentSearch}</span>
+      )}
+      <TabbedWindow
+        tabs={tabs}
+      />
+    </>
+  )
+}

package/src/components/MetricValue.jsx

@@ -1,15 +1,15 @@
-'use strict'
-import React from 'react'
-import styles from './MetricValue.module.css'
-import { getColor } from '../lib/utils'
-export default function MetricValue ({ pre, color, value, unit }) {
-  return (
-    <div className={styles.metric}>
-      {pre && <span>{pre}</span>}
-      <span className={`${styles.value} ${getColor('text', color)}`}>
-        {value}
-      </span>
-      <span>{unit}</span>
-    </div>
-  )
-}
+'use strict'
+import React from 'react'
+import styles from './MetricValue.module.css'
+import { getColor } from '../lib/utils'
+export default function MetricValue ({ pre, color, value, unit }) {
+  return (
+    <div className={styles.metric}>
+      {pre && <span>{pre}</span>}
+      <span className={`${styles.value} ${getColor('text', color)}`}>
+        {value}
+      </span>
+      <span>{unit}</span>
+    </div>
+  )
+}

package/src/components/MetricValue.module.css

@@ -1,8 +1,8 @@
-.metric {
-  @apply flex justify-center items-center;
-  gap: 1rem;
-}
-
-.value {
-  @apply text-5xl
+.metric {
+  @apply flex justify-center items-center;
+  gap: 1rem;
+}
+
+.value {
+  @apply text-5xl
 }

package/src/components/Modal.jsx

@@ -1,29 +1,29 @@
-import React from 'react'
-import useEscapeKey from '../hooks/useEscapeKey'
-import CloseModalIcon from './icons/CloseModalIcon'
-import styles from './Modal.module.css'
-export default function Modal (props) {
-  const { setIsOpen, title } = props
-  useEscapeKey(() => setIsOpen(false))
-  return (
-    <>
-      <div className={styles.blur} onClick={() => setIsOpen(false)} />
-      <div className={`${styles.container} ${styles.centered}`}>
-        <div className={styles.modal}>
-          <div className={styles.header}>
-            <div className={styles.title}>{title}</div>
-            <div className={styles.close} onClick={() => setIsOpen(false)}>
-              <CloseModalIcon />
-            </div>
-          </div>
-          <hr className={styles.hr} />
-          <div>
-            {props.children}
-          </div>
-          <hr className={styles.hr} />
-        </div>
-      </div>
-    </>
-
-  )
-}
+import React from 'react'
+import useEscapeKey from '../hooks/useEscapeKey'
+import CloseModalIcon from './icons/CloseModalIcon'
+import styles from './Modal.module.css'
+export default function Modal (props) {
+  const { setIsOpen, title } = props
+  useEscapeKey(() => setIsOpen(false))
+  return (
+    <>
+      <div className={styles.blur} onClick={() => setIsOpen(false)} />
+      <div className={`${styles.container} ${styles.centered}`}>
+        <div className={styles.modal}>
+          <div className={styles.header}>
+            <div className={styles.title}>{title}</div>
+            <div className={styles.close} onClick={() => setIsOpen(false)}>
+              <CloseModalIcon />
+            </div>
+          </div>
+          <hr className={styles.hr} />
+          <div>
+            {props.children}
+          </div>
+          <hr className={styles.hr} />
+        </div>
+      </div>
+    </>
+
+  )
+}

package/src/components/Modal.module.css

@@ -1,25 +1,25 @@
-.blur {
-  @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 {
-  @apply z-[9999];
-}
-.centered {
-  @apply fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]
-}
-.modal {
-  @apply bg-[#E9F7FF] p-4 rounded-md mx-auto my-auto min-w-[480px] max-h-[85vh] overflow-y-auto;
-}
-.header {
-  @apply flex justify-between items-center;
-}
-.close {
-  @apply hover:cursor-pointer;
-}
-.hr {
-  @apply text-[#00283D] my-2 opacity-20;
-}
-.title {
-  @apply font-bold text-lg;
+.blur {
+  @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 {
+  @apply z-[9999];
+}
+.centered {
+  @apply fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]
+}
+.modal {
+  @apply bg-[#E9F7FF] p-4 rounded-md mx-auto my-auto min-w-[480px] max-h-[85vh] overflow-y-auto;
+}
+.header {
+  @apply flex justify-between items-center;
+}
+.close {
+  @apply hover:cursor-pointer;
+}
+.hr {
+  @apply text-[#00283D] my-2 opacity-20;
+}
+.title {
+  @apply font-bold text-lg;
 }

package/src/components/Playground.jsx

@@ -1,9 +1,9 @@
-'use strict'
-import React from 'react'
-import BorderedBox from './BorderedBox'
-
-export default function Playground () {
-  return (
-    <BorderedBox color='green'>Playground</BorderedBox>
-  )
-}
+'use strict'
+import React from 'react'
+import BorderedBox from './BorderedBox'
+
+export default function Playground () {
+  return (
+    <BorderedBox color='green'>Playground</BorderedBox>
+  )
+}

package/src/components/SearchBar.jsx

@@ -1,33 +1,63 @@
-'use strict'
-import React, { useRef } from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSearch } from '@fortawesome/free-solid-svg-icons'
-import styles from './SearchBar.module.css'
-import commonStyles from './Common.module.css'
-export default function SearchBar (props) {
-  const inputRef = useRef()
-  const { onSubmit, onChange } = props
-  function handleSearch () {
-    if (onSubmit) {
-      const value = inputRef.current.value
-      return onSubmit(value)
-    }
-  }
-
-  function handleChange () {
-    if (onChange) {
-      const value = inputRef.current.value
-      return onChange(value)
-    }
-  }
-  return (
-    <div className={`${styles.input} ${commonStyles.padded}`}>
-      <input type='text' placeholder='Search' className='grow' ref={inputRef} onChange={handleChange} />
-      <button onClick={handleSearch}>
-        <FontAwesomeIcon color='white' icon={faSearch} />
-      </button>
-
-    </div>
-
-  )
-}
+'use strict'
+import React, { useRef, useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSearch } from '@fortawesome/free-solid-svg-icons'
+import styles from './SearchBar.module.css'
+import commonStyles from './Common.module.css'
+export default function SearchBar (props) {
+  const inputRef = useRef()
+  const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
+  const [isOnFocus, setIsOnFocus] = useState(false)
+  const { onSubmit, onChange, title } = props
+
+  function handleSearch () {
+    if (onSubmit) {
+      const value = inputRef.current.value
+      return onSubmit(value)
+    }
+  }
+
+  function handleChange () {
+    if (onChange) {
+      const value = inputRef.current.value
+      return onChange(value)
+    }
+  }
+
+  function onFocus () {
+    if (!isOnFocus) {
+      setIsOnFocus(true)
+      setWrapperClassName(onFocusClassName())
+    }
+  }
+
+  function onBlur () {
+    setIsOnFocus(false)
+    setWrapperClassName(normalClassName())
+  }
+
+  function onFocusClassName () {
+    return `${styles.input} ${commonStyles.padded} ${styles.onFocus}`
+  }
+
+  function normalClassName () {
+    return `${styles.input} ${commonStyles.padded} ${styles.onBlur}`
+  }
+
+  function iconClassName () {
+    return isOnFocus ? 'text-main-green' : 'text-white'
+  }
+
+  return (
+    <div>
+      {title && <h1 className={styles.title}>{title}</h1>}
+      <div className={wrapperClassName}>
+        <input type='text' placeholder='Search' className='grow' ref={inputRef} onChange={handleChange} onFocus={onFocus} onBlur={onBlur} />
+        <button onClick={handleSearch} onFocus={onFocus} onBlur={onBlur}>
+          <FontAwesomeIcon className={iconClassName()} icon={faSearch} />
+        </button>
+      </div>
+    </div>
+
+  )
+}