@platformatic/ui-components 0.1.12 → 0.1.14

package/.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: run tests
+
+on:
+  push:
+    branches:
+      - main
+    paths-ignore:
+      - '**.md'
+  pull_request:
+    paths-ignore:
+      - '**.md'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run build 
+      - run: npm run tailwind 
+      - run: npm test
+

package/index.js

@@ -17,6 +17,12 @@ import TabbedWindow from './src/components/TabbedWindow'
 import TextWithLabel from './src/components/TextWithLabel'
 import Versions from './src/components/Versions'
 import VerticalSeparator from './src/components/VerticalSeparator'
+import FollowUs from './src/components/FollowUs'
+import List from './src/components/List'
+import ListElement from './src/components/ListElement'
+import Logo from './src/components/Logo'
+import Box from './src/components/Box'
+import FrontpageBackground from './src/components/FrontpageBackground'
 export {
   ApiSummary,
   ApiDetails,
@@ -34,5 +40,11 @@ export {
   TabbedWindow,
   TextWithLabel,
   Versions,
-  VerticalSeparator
+  VerticalSeparator,
+  FollowUs,
+  List,
+  ListElement,
+  Logo,
+  Box,
+  FrontpageBackground
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "type": "module",
   "license": "Apache-2.0",
   "scripts": {
@@ -19,6 +19,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-brands-svg-icons": "^6.2.0",
+    "@fortawesome/free-regular-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "autoprefixer": "^10.4.12",
@@ -29,6 +30,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
+    "@fastify/pre-commit": "^2.0.2",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",
     "@storybook/addon-interactions": "^6.5.12",
@@ -42,6 +44,7 @@
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.1.0",
     "babel-loader": "^8.2.5",
+    "happy-dom": "^7.6.6",
     "jsdom": "^20.0.1",
     "react-test-renderer": "^18.2.0",
     "snazzy": "^9.0.0",
@@ -59,5 +62,9 @@
     "ignore": [
       "/dist"
     ]
-  }
+  },
+  "pre-commit": [
+    "lint",
+    "test"
+  ]
 }

package/src/components/Box.jsx

@@ -0,0 +1,11 @@
+'use strict'
+
+import styles from './Box.module.css'
+import React from 'react'
+export default function Box (props) {
+  return (
+    <div className={styles.box}>
+      {props.children}
+    </div>
+  )
+}

package/src/components/Box.module.css

@@ -0,0 +1,3 @@
+.box {
+  @apply mx-24 my-24 flex flex-col
+}

package/src/components/Button.jsx

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

package/src/components/Button.module.css

@@ -0,0 +1,17 @@
+.button {
+  @apply py-2 px-2 rounded text-center cursor-pointer
+}
+
+.primary-green {
+  @apply  text-main-dark-blue bg-light-green;
+}
+.secondary-green {
+  @apply border-main-green text-main-green bg-none border border-solid box-border rounded-md font-normal;
+}
+
+.primary-red {
+  @apply  text-main-dark-blue bg-error-red;
+}
+.secondary-red {
+  @apply border-error-red text-error-red bg-none border border-solid box-border rounded-md font-normal;
+}

package/src/components/FollowUs.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import styles from './FollowUs.module.css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGithub, faTwitter, faLinkedin, faDiscord } from '@fortawesome/free-brands-svg-icons'
+
+export default function FollowUs ({ label = 'FOLLOW US ON' }) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.label}>
+        {label}
+      </div>
+      <div className={styles.icon}>
+        <a href='https://twitter.com/platformatic' target='_blank' rel='noopener noreferrer'>
+          <FontAwesomeIcon icon={faTwitter} className='mr-2 text-white' />
+        </a>
+      </div>
+      <div className={styles.icon}>
+        <a href='https://www.linkedin.com/company/platformatic/' target='_blank' rel='noopener noreferrer'>
+          <FontAwesomeIcon icon={faLinkedin} className='mr-2 text-white' />
+        </a>
+      </div>
+      <div className={styles.icon}>
+        <a href='https://github.com/platformatic' target='_blank' rel='noopener noreferrer'>
+          <FontAwesomeIcon icon={faGithub} className='mr-2 text-white' />
+        </a>
+      </div>
+      <div className={styles.icon}>
+        <a href='https://discord.gg/platformatic' target='_blank' rel='noopener noreferrer'>
+          <FontAwesomeIcon icon={faDiscord} className='mr-2 text-white' />
+        </a>
+      </div>
+
+    </div>
+  )
+}

package/src/components/FollowUs.module.css

@@ -0,0 +1,11 @@
+.container {
+  @apply flex w-96
+}
+
+.label {
+  @apply uppercase text-light-green
+}
+
+.icon {
+  @apply text-white ml-4
+}

package/src/components/FrontpageBackground.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import styles from './FrontpageBackground.module.css'
+
+export default function FrontpageBackgound ({ label = 'platformatic', ...props }) {
+  return (
+    <div className={styles.bg}>
+      <div className={styles.label}> {label} </div>
+      {props.children}
+    </div>
+  )
+}

package/src/components/FrontpageBackground.module.css

@@ -0,0 +1,10 @@
+/* let's use some direct CSS here, with tailwind is quite convoluted to obtain the correct radial gradient  */
+.bg {
+  background: radial-gradient(circle at 0% 0%, rgba(33, 250, 144, 0.4) 0%, rgba(6, 31, 55, 0.4) 35%);
+}
+
+.label {
+  @apply text-light-green font-semibold w-full text-left uppercase px-8 py-4 text-clip
+}
+
+

package/src/components/Input.jsx

@@ -0,0 +1,10 @@
+'use strict'
+import styles from './Input.module.css'
+import commonStyles from './Common.module.css'
+export default function Input ({ placeholder, value, name }) {
+  return (
+    <div className={`${styles.inputContainer} ${commonStyles.padded}`}>
+      <input type='text' name={name} value={value} placeholder={placeholder} className='grow' />
+    </div>
+  )
+}

package/src/components/Input.module.css

@@ -0,0 +1,7 @@
+.inputContainer {
+  @apply flex justify-between w-full h-10  text-white border-main-green border border-solid box-border rounded-md;
+}
+
+.input {
+  @apply grow focus:outline-none
+}

package/src/components/List.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import styles from './List.module.css'
+
+export default function List ({ title, ...props }) {
+  return (
+    <div className={styles.container}>
+      {title &&
+        <div
+          className={styles.title}
+          data-testid='list-title'
+          {...props}
+        >
+          {title}
+        </div>}
+      <div className={styles.elements}>
+        {props.children}
+      </div>
+    </div>
+  )
+}

package/src/components/List.module.css

@@ -0,0 +1,11 @@
+.title {
+  @apply text-light-green font-bold w-full text-left uppercase
+}
+
+.container {
+  @apply w-full
+}
+
+.elements {
+  @apply flex flex-col
+}

package/src/components/ListElement.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
+import styles from './ListElement.module.css'
+export default function List ({ title, detail }) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.iconCol}>
+        <div data-testid='list-element-title-icon' className={styles.icon}>
+          <FontAwesomeIcon icon={faCircleCheck} />
+        </div>
+      </div>
+      <div className={styles.textCol}>
+        <div className={styles.title} data-testid='list-element-title'>
+          {title}
+        </div>
+        <div data-test-id='list-element-detail'>
+          {detail}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/ListElement.module.css

@@ -0,0 +1,23 @@
+.container {
+  @apply flex flex-row my-4
+}
+
+.iconCol {
+  @apply flex flex-col w-6
+}
+
+.icon {
+  @apply text-light-green
+}
+
+.title {
+  @apply flex text-light-green font-bold w-full text-left 
+}
+
+.textCol {
+  @apply flex flex-col text-white text-justify w-96
+}
+
+.detailSpace {
+  @apply w-6
+}

package/src/components/Logo.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+export default function Logo ({ width, heigth }) {
+  return (
+    <svg
+      data-name='Layer 1'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 2000 2000'
+      width={width}
+      height={heigth}
+    >
+      <path
+        d='M610.13 1336.34h1012v-.29c136.31-6.16 244.94-118.58 244.94-256.4 0-141.77-114.93-256.7-256.7-256.7a255.52 255.52 0 0 0-118.5 29c-42.1-97.31-127.47-171.53-231.86-198.36m-866.79 0C243.55 692.05 133 827.87 133 989.53s110.76 297.67 260.58 336'
+        style={{
+          strokeWidth: '67.96px',
+          stroke: '#FFFFFF',
+          fill: 'none',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round'
+        }}
+      />
+      <path
+        d='M661.56 916.05a322.34 322.34 0 0 0 164.19 44.64c178.89 0 323.91-145 323.91-323.92s-145-323.91-323.91-323.91-323.92 145-323.92 323.91v483.15'
+        style={{
+          stroke: '#21fa90',
+          strokeWidth: '67.96px',
+          fill: 'none',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round'
+        }}
+      />
+      <path
+        style={{
+          opacity: 0.2,
+          stroke: '#21fa90',
+          strokeWidth: '67.96px',
+          fill: 'none',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round'
+        }}
+        d='M501.83 1630.69v56.45'
+      />
+      <path
+        style={{
+          opacity: 0.4,
+          stroke: '#21fa90',
+          strokeWidth: '67.96px',
+          fill: 'none',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round'
+        }}
+        d='M502.33 1453.1v89.15'
+      />
+      <path
+        style={{
+          opacity: 0.7,
+          stroke: '#21fa90',
+          strokeWidth: '67.96px',
+          fill: 'none',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round'
+        }}
+        d='M501.83 1211.73v149.07'
+      />
+      <path
+        d='m793.55 866.39-135 47.43 59.44 126'
+        style={{
+          strokeWidth: '70.05px',
+          stroke: '#21fa90',
+          fill: 'none',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round'
+        }}
+      />
+    </svg>
+  )
+}

package/src/stories/Button.stories.jsx

@@ -1,40 +1,71 @@
-import React from 'react'
+'use strict'
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import Button from '../components/Button'
 
-import { Button } from './Button'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
-  title: 'Example/Button',
+  title: 'Platformatic/Button',
   component: Button,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
-    backgroundColor: { control: 'color' }
+    label: {
+      type: 'string',
+      control: 'text'
+    },
+    primary: {
+      type: 'boolean'
+    },
+    color: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['green', 'red']
+      }
+    }
   }
 }
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template = (args) => <Button {...args} />
 
-export const Primary = Template.bind({})
+export const PrimaryGreen = Template.bind({})
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
+PrimaryGreen.args = {
   primary: true,
-  label: 'Button'
+  label: 'Primary Green',
+  color: 'green'
 }
 
-export const Secondary = Template.bind({})
-Secondary.args = {
-  label: 'Button'
+export const SecondaryGreen = Template.bind({})
+SecondaryGreen.args = {
+  primary: false,
+  label: 'Secondary Green',
+  color: 'green'
 }
 
-export const Large = Template.bind({})
-Large.args = {
-  size: 'large',
-  label: 'Button'
+export const PrimaryWithIcon = Template.bind({})
+PrimaryWithIcon.args = {
+  primary: true,
+  label: 'Primary with Icon',
+  icon: faCheck
+}
+
+export const SecondaryWithIcon = Template.bind({})
+SecondaryWithIcon.args = {
+  primary: false,
+  label: 'Secondary with Icon',
+  icon: faCheck
+
+}
+
+export const PrimaryRed = Template.bind({})
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+PrimaryRed.args = {
+  primary: true,
+  label: 'Primary Red',
+  color: 'red'
 }
 
-export const Small = Template.bind({})
-Small.args = {
-  size: 'small',
-  label: 'Button'
+export const SecondaryRed = Template.bind({})
+SecondaryRed.args = {
+  primary: false,
+  label: 'Secondary Red',
+  color: 'red'
 }

package/src/stories/FollowUs.stories.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import FollowUs from '../components/FollowUs'
+
+export default {
+  title: 'Platformatic/FollowUs',
+  component: FollowUs
+}
+
+const Template = (args) => <FollowUs {...args} />
+
+export const FollowUsDefault = Template.bind({})
+FollowUsDefault.args = {
+  label: 'Follow us on'
+}

package/src/stories/Frontpage.stories.jsx

@@ -0,0 +1,42 @@
+
+import React from 'react'
+import FrontpageBackground from '../components/FrontpageBackground'
+import TwoColumnsLayout from '../components/layouts/TwoColumnsLayout'
+import Box from '../components/Box'
+import GHLoginButton from '../components/GHLoginButton'
+import Logo from '../components/Logo'
+import List from '../components/List'
+import ListElement from '../components/ListElement'
+import HorizontalSeparator from '../components/HorizontalSeparator'
+import FollowUs from '../components/FollowUs'
+
+export default {
+  title: 'Platformatic/Frontpage'
+}
+
+const Template = (args) =>
+  <FrontpageBackground>
+
+    <TwoColumnsLayout>
+      <Box>
+        <Logo width={80} />
+        <List title='platformatic'>
+          <ListElement title='Instant edge deploy' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
+          <ListElement title='Collaborate with previews' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
+          <ListElement title='Turn static to dynamic' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
+          <ListElement title='Ship directly to the edge' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
+        </List>
+        <HorizontalSeparator />
+        <FollowUs />
+      </Box>
+      <Box>
+        <p className='text-5xl text-main-green font-bold mt-24 mb-16'>Join the best backend teams</p>
+        <GHLoginButton />
+        <p className='text-white my-8 w-80'> by clicking continue, you agree to our <a href="javascript:alert('todo')">Terms of Service</a> and <a href="javascript:alert('todo')">Privacy policy.</a> </p>
+        <HorizontalSeparator />
+      </Box>
+    </TwoColumnsLayout>
+  </FrontpageBackground>
+
+export const Frontpage = Template.bind({})
+Frontpage.args = {}

package/src/stories/FrontpageBackground.stories.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import FrontpageBackground from '../components/FrontpageBackground'
+
+export default {
+  title: 'Platformatic/FrontpageBackground',
+  component: FrontpageBackground
+}
+
+const Template = (args) =>
+  <FrontpageBackground>
+    <div className='grid h-screen place-items-center'>
+      <p className='text-main-green text-4xl'>Frontpage Background</p>
+    </div>
+  </FrontpageBackground>
+
+export const FrontpageBackgroundDefault = Template.bind({})
+FrontpageBackgroundDefault.args = {}

package/src/stories/HorizontalSeparator.stories.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import HorizontalSeparator from '../components/HorizontalSeparator'
+
+export default {
+  title: 'Platformatic/HorizontalSeparator',
+  component: HorizontalSeparator
+}
+
+const Template = (args) => <HorizontalSeparator {...args} />
+
+export const HorizontalSeparatorDefault = Template.bind({})
+HorizontalSeparatorDefault.args = {}

package/src/stories/Input.stories.jsx

@@ -0,0 +1,15 @@
+'use strict'
+import Input from '../components/Input'
+export default {
+  title: 'Platformatic/Input',
+  component: Input
+}
+
+const Template = (args) => <Input {...args} />
+
+export const Default = Template.bind({})
+
+Default.args = {
+  name: 'test',
+  placeholder: 'Platformatic'
+}

package/src/stories/List.stories.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import List from '../components/List'
+import ListElement from '../components/ListElement'
+
+export default {
+  title: 'Platformatic/List',
+  component: List
+}
+
+const Template = (args) => <List {...args} />
+export const ListWithNoElements = Template.bind({})
+ListWithNoElements.args = {
+  title: 'List Title'
+}
+
+const TemplateWithElements = (args) => (
+  <List {...args}>
+    <ListElement title='List Element 1' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
+    <ListElement title='List Element 2' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
+  </List>
+)
+
+export const ListWithElements = TemplateWithElements.bind({})
+ListWithElements.args = {
+  title: 'List Title'
+}
+
+export const ListWithElementsNoTitle = TemplateWithElements.bind({})
+ListWithElementsNoTitle.args = {}

package/src/stories/ListElement.stories.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import ListElement from '../components/ListElement'
+
+export default {
+  title: 'Platformatic/ListElement',
+  component: ListElement
+}
+
+const Template = (args) => <ListElement {...args} />
+
+export const ListElementFull = Template.bind({})
+ListElementFull.args = {
+  title: 'List Element Title',
+  detail: 'Lorem Ipsum dolor sit amet consectetur adipiscing elit. Qui enim potest, nisi quis potest, negare'
+}

package/src/stories/Logo.stories.jsx

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

package/vitest.config.js

@@ -7,7 +7,7 @@ export default defineConfig({
   plugins: [react()],
   test: {
     globals: true,
-    environment: 'jsdom',
+    environment: 'happy-dom',
     exclude: ['node_modules']
   }
 

package/src/stories/Button.jsx

@@ -1,50 +0,0 @@
-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'
-  return (
-    <button
-      type='button'
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={backgroundColor && { backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  )
-}
-
-Button.propTypes = {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary: PropTypes.bool,
-  /**
-   * What background color to use
-   */
-  backgroundColor: PropTypes.string,
-  /**
-   * How large should the button be?
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Button contents
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Optional click handler
-   */
-  onClick: PropTypes.func
-}
-
-Button.defaultProps = {
-  backgroundColor: null,
-  primary: false,
-  size: 'medium',
-  onClick: undefined
-}

package/src/stories/button.css

@@ -1,30 +0,0 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
-}