@platformatic/ui-components 0.1.3 → 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.3",
+  "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/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/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/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',