@platformatic/ui-components 0.1.2 → 0.1.4

package/index.js

@@ -6,12 +6,15 @@ import BorderedBox from './src/components/BorderedBox'
 import BorderedText from './src/components/BorderedText'
 import HorizontalSeparator from './src/components/HorizontalSeparator'
 import Layout from './src/components/layouts/Layout'
+import TwoColumnsLayout from './src/components/layouts/TwoColumnsLayout'
 import Playground from './src/components/Playground'
 import Prs from './src/components/Pr'
 import SearchBar from './src/components/SearchBar'
 import TabbedWindow from './src/components/TabbedWindow'
 import Versions from './src/components/Versions'
 import VerticalSeparator from './src/components/VerticalSeparator'
+import LoginButton from './src/components/LoginButton'
+import GHLoginButton from './src/components/GHLoginButton'
 export {
   Api,
   ApiDetails,
@@ -19,10 +22,13 @@ export {
   BorderedText,
   HorizontalSeparator,
   Layout,
+  TwoColumnsLayout,
   Playground,
   Prs,
   SearchBar,
   TabbedWindow,
   Versions,
-  VerticalSeparator
+  VerticalSeparator,
+  LoginButton,
+  GHLoginButton
 }

package/package.json

@@ -1,21 +1,22 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "license": "Apache-2.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "NODE_OPTIONS='--openssl-legacy-provider' start-storybook -p 6006",
+    "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"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-brands-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "autoprefixer": "^10.4.12",

package/src/components/Api/Endpoints.jsx

@@ -1,5 +1,5 @@
 'use strict'
-
+import React from 'react'
 import BorderedText from '../BorderedText'
 
 export default function Endpoints (props) {

package/src/components/Api/Footer.jsx

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faDatabase, faFileLines, faGear } from '@fortawesome/free-solid-svg-icons'
 import BorderedText from '../BorderedText'
 import styles from './Footer.module.css'
+import React from 'react'
 export default function ApiFooter (props) {
   const { graphql, openapi } = props
   return (

package/src/components/Api/Status.jsx

@@ -1,4 +1,5 @@
 '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) {

package/src/components/Api/Version.jsx

@@ -1,5 +1,5 @@
 'use strict'
-
+import React from 'react'
 import BorderedText from '../BorderedText'
 
 export default function ApiVersion (props) {

package/src/components/Api.jsx

@@ -9,7 +9,7 @@ import ApiStatus from './Api/Status'
 import BorderedBox from './BorderedBox'
 import HorizontalSeparator from './HorizontalSeparator'
 import styles from './Api.module.css'
-import { useState } from 'react'
+import React, { useState } from 'react'
 
 function ApiName (props) {
   const { name } = props

package/src/components/ApiDetail.jsx

@@ -5,9 +5,9 @@ import BorderedBox from './BorderedBox'
 import BorderedText from './BorderedText'
 import HorizontalSeparator from './HorizontalSeparator'
 import TwoColumnsLayout from './layouts/TwoColumnsLayout'
-import StatsView from './StatView'
+import StatsView from './StatsView'
 import VerticalSeparator from './VerticalSeparator'
-
+import React from 'react'
 export default function ApiDetails (props) {
   const apiData = props.data
   const { url, repository, version, openapi, graphql, source, lastDeploy } = apiData

package/src/components/BorderedBox.jsx

@@ -3,6 +3,7 @@
 import { getColor } from '../lib/utils'
 import styles from './BorderedBox.module.css'
 import commonStyles from './Common.module.css'
+import React from 'react'
 export default function BorderedBox (props) {
   const { classes, color, children } = props
   const borderColor = getColor('border', color)

package/src/components/BorderedText.jsx

@@ -1,6 +1,6 @@
 'use strict'
 import styles from './BorderedText.module.css'
-
+import React from 'react'
 export default function BorderedText (props) {
   return (
     <span className={styles.bordered}>{props.text}</span>

package/src/components/GHLoginButton.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import LoginButton from './LoginButton'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
+
+export default function GHLoginButton ({ onClick, ...props }) {
+  return (
+    <LoginButton
+      label='Continue with Github'
+      onClick={onClick}
+      icon={faGithub}
+      {...props}
+    />
+  )
+}

package/src/components/HorizontalSeparator.jsx

@@ -1,5 +1,5 @@
 'use strict'
-
+import React from 'react'
 export default function HorizontalSeparator () {
   return <hr className='text-dark-green my-4' />
 }

package/src/components/LoginButton.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import styles from './LoginButton.module.css'
+
+export default function LoginButton ({ icon, label, onClick, ...props }) {
+  return (
+    <button
+      type='button'
+      onClick={onClick}
+      className={styles.button}
+      {...props}
+    >
+      {icon ? <FontAwesomeIcon icon={icon} /> : null} &nbsp;{label}
+    </button>
+  )
+}

package/src/components/LoginButton.module.css

@@ -0,0 +1,3 @@
+.button {
+  @apply bg-light-green text-main-dark-blue font-bold py-2 px-4 rounded;
+} 

package/src/components/Main.jsx

@@ -7,7 +7,7 @@ import TabbedWindow from './TabbedWindow'
 import Prs from './Pr'
 import Playground from './Playground'
 import Versions from './Versions'
-import { useState } from 'react'
+import React, { useState } from 'react'
 export default function Main () {
   const [currentSearch, setCurrentSearch] = useState('')
   const apis = [

package/src/components/Playground.jsx

@@ -1,5 +1,5 @@
 'use strict'
-
+import React from 'react'
 import BorderedBox from './BorderedBox'
 
 export default function Playground () {

package/src/components/Pr.jsx

@@ -1,5 +1,5 @@
 'use strict'
-
+import React from 'react'
 import BorderedBox from './BorderedBox'
 
 export default function Prs () {

package/src/components/SearchBar.jsx

@@ -1,7 +1,7 @@
 'use strict'
+import React, { useRef } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSearch } from '@fortawesome/free-solid-svg-icons'
-import { useRef } from 'react'
 import styles from './SearchBar.module.css'
 import commonStyles from './Common.module.css'
 export default function SearchBar (props) {

package/src/components/StatValue.jsx

@@ -1,5 +1,5 @@
 'use strict'
-import { Fragment } from 'react'
+import React from 'react'
 import { getColor } from '../lib/utils'
 export default function StatValue (props) {
   const { value, color, label, pre } = props

package/src/components/{StatView.jsx → StatsView.jsx}

@@ -6,7 +6,7 @@ import styles from './StatsView.module.css'
 import HorizontalSeparator from './HorizontalSeparator'
 import VerticalSeparator from './VerticalSeparator'
 import StatValue from './StatValue'
-
+import React from 'react'
 export default function StatsView (props) {
   const { title, stats } = props
   const mainStat = stats.mainStat

package/src/components/Versions.jsx

@@ -1,5 +1,5 @@
 'use strict'
-
+import React from 'react'
 import BorderedBox from './BorderedBox'
 
 export default function Versions () {

package/src/components/VerticalSeparator.jsx

@@ -1,5 +1,5 @@
 'use strict'
-
+import React from 'react'
 export default function VerticalSeparator () {
   return <span className='text-dark-green m-3'> | </span>
 }

package/src/components/layouts/Layout.jsx

@@ -1,4 +1,5 @@
 'use strict'
+import React from 'react'
 
 export default function Layout (props) {
   return (

package/src/components/layouts/TwoColumnsLayout.jsx

@@ -1,5 +1,5 @@
 'use strict'
-
+import React from 'react'
 export default function TwoColumnsLayout (props) {
   return (
     <div className='grid grid-cols-2 gap-x-4'>

package/src/stories/BorderedBox.stories.jsx

@@ -17,3 +17,8 @@ export const Green = Template.bind({})
 Green.args = {
   color: 'green'
 }
+export const Red = Template.bind({})
+
+Red.args = {
+  color: 'red'
+}

package/src/stories/GHLoginButton.stories.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import GHLoginButton from '../components/GHLoginButton'
+
+export default {
+  title: 'Example/GHLoginButton',
+  component: GHLoginButton
+}
+
+const Template = (args) => <GHLoginButton {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  onClick: () => alert('clicked')
+}

package/src/stories/LoginButton.stories.jsx

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

package/tailwind.config.cjs

@@ -9,6 +9,7 @@ module.exports = {
     colors: {
       'main-green': '#21FA90',
       'dark-green': '#02783F',
+      'light-green': '#21F190',
       'main-dark-blue': '#00283D',
       'dark-blue': '#00344F',
       white: '#FFFFFF',

package/vite.config.js

@@ -2,14 +2,5 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 /** @type {import('vite').UserConfig} */
 export default defineConfig({
-  plugins: [react()],
-  build: {
-    rollupOptions: {
-      output: {
-        assetFileNames: 'platformatic-ui.css',
-        chunkFileNames: 'platformatic-ui.js',
-        manualChunks: undefined
-      }
-    }
-  }
+  plugins: [react()]
 })