@platformatic/ui-components 0.1.10 → 0.1.12

package/index.js

@@ -12,6 +12,7 @@ import TwoColumnsLayout from './src/components/layouts/TwoColumnsLayout'
 import Playground from './src/components/Playground'
 import PullRequest from './src/components/PullRequest'
 import SearchBar from './src/components/SearchBar'
+import Status from './src/components/Status'
 import TabbedWindow from './src/components/TabbedWindow'
 import TextWithLabel from './src/components/TextWithLabel'
 import Versions from './src/components/Versions'
@@ -29,6 +30,7 @@ export {
   Playground,
   PullRequest,
   SearchBar,
+  Status,
   TabbedWindow,
   TextWithLabel,
   Versions,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "type": "module",
   "license": "Apache-2.0",
   "scripts": {
@@ -12,7 +12,9 @@
     "build-storybook": "NODE_OPTIONS='--openssl-legacy-provider' build-storybook",
     "tailwind:watch": "tailwindcss -i ./src/styles/main.css -o ./dist/main.css --watch",
     "tailwind": "tailwindcss -i ./src/styles/main.css -o ./dist/main.css",
-    "lint": "standard --fix"
+    "lint": "standard src | snazzy",
+    "lint:fix": "standard src --fix",
+    "test": "vitest run"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
@@ -34,17 +36,28 @@
     "@storybook/builder-vite": "^0.2.4",
     "@storybook/react": "^6.5.12",
     "@storybook/testing-library": "^0.0.13",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.1.0",
     "babel-loader": "^8.2.5",
+    "jsdom": "^20.0.1",
+    "react-test-renderer": "^18.2.0",
+    "snazzy": "^9.0.0",
     "standard": "^17.0.0",
     "tailwindcss": "^3.1.8",
-    "vite": "^3.1.0"
+    "vite": "^3.1.0",
+    "vitest": "^0.24.3"
   },
   "standard": {
-    "global": [
+    "globals": [
+      "expect",
+      "test",
       "alert"
+    ],
+    "ignore": [
+      "/dist"
     ]
   }
 }

package/src/components/ApiSummary.jsx

@@ -8,7 +8,7 @@ import ApiIcon from './icons/ApiIcon'
 import ApiIconClosed from './icons/ApiIconClosed'
 import VerticalSeparator from './VerticalSeparator'
 import TextWithLabel from './TextWithLabel'
-import ApiStatus from './Api/Status'
+import Status from './Status'
 import BorderedBox from './BorderedBox'
 import HorizontalSeparator from './HorizontalSeparator'
 import styles from './Api.module.css'
@@ -41,7 +41,7 @@ export default function ApiSummary (props) {
                     <ApiVersion version={version} />
                   </div>
                   <div className={styles.status}>
-                    <ApiStatus online={online} />
+                    <Status color={color} status={online ? 'online' : 'offline'} />
                   </div>
 
                 </div>

package/src/components/GHLoginButton.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import LoginButton from './LoginButton'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 

package/src/components/LoginButton.jsx

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

package/src/components/LoginButton.test.jsx

@@ -0,0 +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()
+})

package/src/components/Main.jsx

@@ -1,8 +1,8 @@
 'use strict'
 
 import SearchBar from './SearchBar'
-import Api from './Api'
 import ApiDetails from './ApiDetail'
+import ApiSummary from './ApiSummary'
 import TabbedWindow from './TabbedWindow'
 import Prs from './PullRequest'
 import Playground from './Playground'
@@ -63,7 +63,7 @@ export default function Main () {
       <TabbedWindow
         tabs={tabs}
       />
-      {apis.map((api) => { return (<Api key={api.id} data={api} />) })}
+      {apis.map((api) => { return (<ApiSummary key={api.id} data={api} />) })}
     </>
   )
 }

package/src/components/PullRequest.jsx

@@ -6,26 +6,61 @@ import PullRequestIcon from './icons/PullRequestIcon'
 import styles from './PullRequest.module.css'
 import TextWithLabel from './TextWithLabel'
 import VerticalSeparator from './VerticalSeparator'
-export default function PullRequest ({ id, title, lastCommit, url }) {
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faStopCircle, faRotateRight } from '@fortawesome/free-solid-svg-icons'
+import Status from './Status'
+export default function PullRequest ({ id, title, lastCommit, url, status, onStop, onReload }) {
+  let prStatusColor
+  if (status === 'available') {
+    prStatusColor = 'white'
+  } else if (status === 'running') {
+    prStatusColor = 'green'
+  } else if (status === 'unavailable') {
+    prStatusColor = 'white'
+  }
+
+  function handleStop () {
+    if (onStop) {
+      onStop()
+    }
+  }
+  function handleReload () {
+    if (onReload) {
+      onReload()
+    }
+  }
   return (
-    <BorderedBox color='green'>
-      <div className={styles.header}>
-        <PullRequestIcon />
-        <span className={styles.id}>#{id}</span>
-        <span><a href={url} target='_blank' rel='noreferrer'>{url}</a></span>
-      </div>
-      <div className={styles.content}>
-        <TextWithLabel label='PR Title' text={title} />
-      </div>
+    <div className={status === 'unavailable' ? styles.unavailable : null}>
+      <BorderedBox color={prStatusColor}>
+        <div className={styles.header}>
+          <div className={styles.title}>
+            <PullRequestIcon />
+            <span className={styles.id}>#{id}</span>
+            <span><a href={url} target='_blank' rel='noreferrer'>{url}</a></span>
+          </div>
+          <div className={styles.status}>
+            <Status color={prStatusColor} status={status} />
+            <VerticalSeparator />
+            <div className={styles.icons}>
+              <FontAwesomeIcon icon={faStopCircle} mask={['circle']} onClick={handleStop} />
+              <FontAwesomeIcon icon={faRotateRight} mask={['circle']} onClick={handleReload} />
+            </div>
+          </div>
+        </div>
+        <div className={styles.content}>
+          <TextWithLabel label='PR Title' text={title} />
+        </div>
+
+        <HorizontalSeparator />
+        <div className={styles.footer}>
+          <TextWithLabel label='Last commit by' text={lastCommit.author} />
+          <VerticalSeparator />
+          <TextWithLabel label='Commit SHA' text={lastCommit.sha} />
+          <VerticalSeparator />
+          <TextWithLabel label='Last Update' text={lastCommit.date} />
+        </div>
+      </BorderedBox>
+    </div>
 
-      <HorizontalSeparator />
-      <div className={styles.footer}>
-        <TextWithLabel label='Last commit by' text={lastCommit.author} />
-        <VerticalSeparator />
-        <TextWithLabel label='Commit SHA' text={lastCommit.sha} />
-        <VerticalSeparator />
-        <TextWithLabel label='Last Update' text={lastCommit.date} />
-      </div>
-    </BorderedBox>
   )
 }

package/src/components/PullRequest.module.css

@@ -5,8 +5,23 @@
   @apply text-xl text-main-green font-semibold;
 }
 .header {
-  @apply flex items-center gap-x-4 mb-4;
+  @apply flex items-center justify-between mb-4;
+}
+.title {
+  @apply flex items-center gap-x-4;
 }
 .footer {
-  @apply flex items-center
+  @apply flex items-center;
+}
+.status {
+  @apply flex items-center;
+}
+.unavailable {
+  @apply opacity-30;
+}
+.icons {
+  @apply flex justify-between gap-x-2;
+}
+.icons > *:hover {
+  @apply cursor-pointer;
 }

package/src/components/Status.jsx

@@ -0,0 +1,26 @@
+'use strict'
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCircle } from '@fortawesome/free-solid-svg-icons'
+export default function Status (props) {
+  const { color, status } = props
+
+  function getColorClass (color) {
+    switch (color) {
+      case 'green':
+        return 'text-main-green'
+      case 'red':
+        return 'text-error-red'
+      case 'white':
+      default:
+        return 'text-white'
+    }
+  }
+  const colorClass = getColorClass(color)
+  return (
+    <div className={colorClass}>
+      <FontAwesomeIcon icon={faCircle} size='2xs' className={`text-${colorClass} mr-2`} />
+      {status}
+    </div>
+  )
+}

package/src/lib/utils.js

@@ -9,6 +9,9 @@ function getColor (type, color) {
     case 'red':
       convertedColor = 'error-red'
       break
+    case 'white':
+      convertedColor = 'white'
+      break
     default:
       convertedColor = 'main-green'
       break

package/src/stories/BorderedBox.stories.jsx

@@ -5,7 +5,10 @@ export default {
   component: BorderedBox,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
-    color: { control: 'color' }
+    color: {
+      options: ['green', 'red', 'white'],
+      control: { type: ' radio' }
+    }
   }
 }
 
@@ -13,7 +16,7 @@ export default {
 const Template = (args) => <BorderedBox {...args}>Hello Platformatic</BorderedBox>
 
 export const Green = Template.bind({})
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
+
 Green.args = {
   color: 'green'
 }
@@ -22,3 +25,9 @@ export const Red = Template.bind({})
 Red.args = {
   color: 'red'
 }
+
+export const White = Template.bind({})
+
+White.args = {
+  color: 'white'
+}

package/src/stories/Button.jsx

@@ -1,23 +1,23 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './button.css';
+import React from 'react'
+import PropTypes from 'prop-types'
+import './button.css'
 
 /**
  * Primary UI component for user interaction
  */
 export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'
   return (
     <button
-      type="button"
+      type='button'
       className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
       style={backgroundColor && { backgroundColor }}
       {...props}
     >
       {label}
     </button>
-  );
-};
+  )
+}
 
 Button.propTypes = {
   /**
@@ -39,12 +39,12 @@ Button.propTypes = {
   /**
    * Optional click handler
    */
-  onClick: PropTypes.func,
-};
+  onClick: PropTypes.func
+}
 
 Button.defaultProps = {
   backgroundColor: null,
   primary: false,
   size: 'medium',
-  onClick: undefined,
-};
+  onClick: undefined
+}

package/src/stories/Button.stories.jsx

@@ -9,7 +9,7 @@ export default {
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' }
-  },
+  }
 }
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
@@ -20,21 +20,21 @@ export const Primary = Template.bind({})
 Primary.args = {
   primary: true,
   label: 'Button'
-};
+}
 
 export const Secondary = Template.bind({})
 Secondary.args = {
   label: 'Button'
-};
+}
 
 export const Large = Template.bind({})
 Large.args = {
   size: 'large',
   label: 'Button'
-};
+}
 
 export const Small = Template.bind({})
 Small.args = {
   size: 'small',
   label: 'Button'
-};
+}

package/src/stories/PullRequest.stories.jsx

@@ -4,14 +4,13 @@ export default {
   title: 'Platformatic/PullRequest',
   component: PullRequest,
   argTypes: {
-    color: { control: 'color' }
   }
 }
 
-const Template = (args) => <PullRequest {...args}>Hello Platformatic</PullRequest>
+const Template = (args) => <PullRequest {...args} />
 
-export const Standard = Template.bind({})
-Standard.args = {
+export const Available = Template.bind({})
+Available.args = {
   id: '88',
   title: 'doc: host => hostname, binded to 0.0.0.0 to be more container friendly',
   url: 'http://example.com',
@@ -19,5 +18,32 @@ Standard.args = {
     sha: 'bgb3ffe3',
     author: 'Foobar',
     date: '2022-10-11'
-  }
+  },
+  status: 'available'
+}
+
+export const Running = Template.bind({})
+Running.args = {
+  id: '88',
+  title: 'doc: host => hostname, binded to 0.0.0.0 to be more container friendly',
+  url: 'http://example.com',
+  lastCommit: {
+    sha: 'bgb3ffe3',
+    author: 'Foobar',
+    date: '2022-10-11'
+  },
+  status: 'running'
+}
+
+export const Unavailable = Template.bind({})
+Unavailable.args = {
+  id: '88',
+  title: 'doc: host => hostname, binded to 0.0.0.0 to be more container friendly',
+  url: 'http://example.com',
+  lastCommit: {
+    sha: 'bgb3ffe3',
+    author: 'Foobar',
+    date: '2022-10-11'
+  },
+  status: 'unavailable'
 }

package/src/stories/Status.stories.jsx

@@ -0,0 +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'
+}

package/vitest.config.js

@@ -0,0 +1,14 @@
+/// <reference types="vitest" />
+
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    exclude: ['node_modules']
+  }
+
+})

package/src/components/Api/Status.jsx

@@ -1,20 +0,0 @@
-'use strict'
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCircle } from '@fortawesome/free-solid-svg-icons'
-export default function ApiStatus (props) {
-  const { online } = props
-  const colorClass = online ? 'text-main-green' : 'text-error-red'
-  return (
-    <div className={colorClass}>
-      <FontAwesomeIcon icon={faCircle} size='2xs' className={`text-${colorClass} mr-1`} />
-      {online && (
-        'Online'
-      )}
-
-      {!online && (
-        'Offline'
-      )}
-    </div>
-  )
-}