npm - @platformatic/ui-components - Versions diffs - 0.1.5 → 0.1.7 - Mend

@platformatic/ui-components 0.1.5 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (143) hide show

package/dist/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Platformatic UI Components</title>
-    <script type="module" crossorigin src="/assets/index.e67c83bd.js"></script>
-    <link rel="stylesheet" href="/assets/index.2da5d0ca.css">
+    <script type="module" crossorigin src="/assets/index.fcbe6de7.js"></script>
+    <link rel="stylesheet" href="/platformatic-ui.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/platformatic-ui.css ADDED Viewed

@@ -0,0 +1 @@

+ ._input_1v03r_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.375rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._input_1v03r_1>input:focus{outline:2px solid transparent;outline-offset:2px}._padded_1atg3_1{padding:.625rem .5rem}._bordered_1ece3_1{border-radius:.375rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity));padding:.25rem .5rem;letter-spacing:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._main_sk3z1_1{display:flex;align-items:center;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._data_sk3z1_5{display:flex;width:100%;flex-direction:column}._stats-header_19k8x_1{display:flex;align-items:center;justify-content:space-between;font-weight:700}._stats-main-stat_19k8x_4{display:flex;align-items:center;justify-content:center;gap:1rem}._tabbed-container_129x6_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_129x6_5{margin-bottom:1rem;display:flex;height:4rem;justify-content:space-between;text-transform:uppercase;letter-spacing:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._tabs-header_129x6_5:hover{cursor:pointer}._selected-tab_129x6_8{font-weight:700;--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:8px}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.m-3{margin:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mr-5{margin-right:1.25rem}.ml-4{margin-left:1rem}.mr-2{margin-right:.5rem}.mr-1{margin-right:.25rem}.flex{display:flex}.grid{display:grid}.contents{display:contents}.w-full{width:100%}.w-9{width:2.25rem}.grow{flex-grow:1}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:1rem}.gap-2{gap:.5rem}.gap-10{gap:2.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-error-red{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}.border-main-green{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}.p-2{padding:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-5xl{font-size:3rem;line-height:1}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-light{font-weight:300}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}@font-face{font-family:Montserrat;src:local("Montserrat"),url(./fonts/Montserrat/static/Montserrat-Light.ttf) format("truetype");font-weight:300}@font-face{font-family:Montserrat;src:local("Montserrat"),url(./fonts/Montserrat/static/Montserrat-Regular.ttf) format("truetype");font-weight:500}@font-face{font-family:Montserrat;src:local("Montserrat"),url(./fonts/Montserrat/static/Montserrat-Bold.ttf) format("truetype");font-weight:700}:root{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity));font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}.bordered{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}.padded{padding:.625rem .5rem}.api-footer{margin-left:2.25rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .5rem .5rem 1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.api-status{justify-self:end}.bordered-box{margin-bottom:1rem;flex:1 1 0%;row-gap:1rem;--tw-bg-opacity: 1;background-color:rgb(0 52 79 / var(--tw-bg-opacity));padding:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}input{background-color:transparent}.hover\:cursor-pointer:hover{cursor:pointer}

package/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict'
-import Api from './src/components/Api'
+import ApiSummary from './src/components/ApiSummary'
 import ApiDetails from './src/components/ApiDetail'
 import BorderedBox from './src/components/BorderedBox'
 import BorderedText from './src/components/BorderedText'
@@ -16,7 +16,7 @@ import VerticalSeparator from './src/components/VerticalSeparator'
 import LoginButton from './src/components/LoginButton'
 import GHLoginButton from './src/components/GHLoginButton'
 export {
-  Api,
+  ApiSummary,
   ApiDetails,
   BorderedBox,
   BorderedText,

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "type": "module",
   "license": "Apache-2.0",
   "scripts": {

package/src/components/Api/ApiIcon.jsx ADDED Viewed

@@ -0,0 +1,28 @@
+export default function ApiIcon () {
+  return (
+    <svg
+      width={38}
+      height={56}
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M8.12 22.358A7.12 7.12 0 0 1 8.118 8.12a7.12 7.12 0 0 1 13.631-2.88c.2-.02.404-.029.61-.029a7.121 7.121 0 0 1 6.864 5.236 6.079 6.079 0 1 1 1.7 11.912'
+        stroke='#fff'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M13 11.5V31h-1.5M25 13v18h3M19 15.4v35.8h11.4'
+        stroke='#fff'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <circle cx={7} cy={31} r={3} stroke='#fff' strokeWidth={2} />
+      <circle cx={31} cy={31} r={3} stroke='#fff' strokeWidth={2} />
+      <circle cx={34} cy={51.2} r={3} stroke='#fff' strokeWidth={2} />
+    </svg>
+  )
+}

package/src/components/Api/ApiIconClosed.jsx ADDED Viewed

@@ -0,0 +1,18 @@
+export default function ApiIconClosed () {
+  return (
+    <svg
+      width={38}
+      height={42}
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M8.12 22.358A7.12 7.12 0 0 1 8.118 8.12a7.12 7.12 0 0 1 13.631-2.88c.2-.02.404-.029.61-.029a7.121 7.121 0 0 1 6.864 5.236 6.079 6.079 0 1 1 1.7 11.912M13 11.5v7M13 31v-3m0-3v-3.5M25 13v6m0 15.5V31m0-3v-6M19 15.4v7.1m0 18v-4m0-11v8'
+        stroke='#fff'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}

package/src/components/Api/Footer.jsx CHANGED Viewed

@@ -6,7 +6,7 @@ import BorderedText from '../BorderedText'
 import styles from './Footer.module.css'
 import React from 'react'
 export default function ApiFooter (props) {
-  const { graphql, openapi } = props
+  const { graphql, openapi, db } = props
   return (
     <div className={styles.footer}>
       <div className='flex gap-2'>
@@ -18,7 +18,7 @@ export default function ApiFooter (props) {
         <Separator />
         <span><FontAwesomeIcon icon={faFileLines} /> API Docs</span>
         <Separator />
-        <span><FontAwesomeIcon icon={faDatabase} /> SQLite</span>
+        <span><FontAwesomeIcon icon={faDatabase} /> {db}</span>
       </div>
     </div>
   )

package/src/components/ApiDetail.jsx CHANGED Viewed

@@ -9,8 +9,7 @@ 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
+  const { url, repository, version, openapi, graphql, source, lastDeploy } = props
   const requestStats = {
     mainStat: {
       value: 12,

package/src/components/{Api.jsx → ApiSummary.jsx} RENAMED Viewed

@@ -4,6 +4,8 @@ import ApiFooter from './Api/Footer'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faLink } from '@fortawesome/free-solid-svg-icons'
 import ApiVersion from './Api/Version'
+import ApiIcon from './Api/ApiIcon'
+import ApiIconClosed from './Api/ApiIconClosed'
 import Separator from './VerticalSeparator'
 import ApiStatus from './Api/Status'
 import BorderedBox from './BorderedBox'
@@ -17,16 +19,10 @@ function ApiName (props) {
     <span className='text-main-green font-semibold text-2xl'>{name}</span>
   )
 }
-export default function API (props) {
+export default function ApiSummary (props) {
   const [isOpen, setIsOpen] = useState(true)
-  const { name, version, source, lastDeploy, graphql, openapi, online } = props.data
+  const { name, version, source, lastDeploy, graphql, openapi, online, db } = props
   const color = online ? 'green' : 'red'
-  function getApiIcon () {
-    if (isOpen) {
-      return 'api-icon.svg'
-    }
-    return 'api-icon-closed.svg'
-  }
   return (
     <BorderedBox
       color={color}
@@ -35,7 +31,7 @@ export default function API (props) {
         <>
           <div className={styles.main}>
             <div className='flex w-full'>
-              <img className='w-9 mr-5' src={getApiIcon()} />
+              <div className='w-9 mr-5'><ApiIcon /></div>
               <div className={styles.data}>
                 <div className='flex items-center justify-between'>
                   <div className='flex items-center justify-between gap-4'>
@@ -67,12 +63,13 @@ export default function API (props) {
           <ApiFooter
             graphql={graphql}
             openapi={openapi}
+            db={db}
           />
         </>
       )}
       {!isOpen && (
         <div className='flex items-center'>
-          <img className='w-9 mr-5' src={getApiIcon()} />
+          <img className='w-9 mr-5' src={<ApiIconClosed />} />
           <ApiName name={name} />
           <span onClick={() => { setIsOpen(!isOpen) }} className='ml-4 hover:cursor-pointer'>Click here to set up your api</span>
         </div>

package/src/components/LoginButton.jsx CHANGED Viewed

@@ -5,13 +5,13 @@ 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>
+    <div className={styles.container} onClick={onClick}>
+      <div
+        className={styles.button}
+        {...props}
+      >
+        {icon ? <FontAwesomeIcon icon={icon} className='mr-2' /> : null} {label}
+      </div>
+    </div>
   )
 }

package/src/components/LoginButton.module.css CHANGED Viewed

@@ -1,3 +1,7 @@
 .button {
-  @apply bg-light-green text-main-dark-blue font-bold py-2 px-4 rounded;
-}
+  @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/stories/ApiDetail.stories.jsx ADDED Viewed

@@ -0,0 +1,43 @@
+'use strict'
+import ApiDetail from '../components/ApiDetail'
+export default {
+  title: 'Platformatic/ApiDetail',
+  component: ApiDetail,
+  argTypes: {
+    text: { control: 'string' }
+  }
+}
+const Template = (args) => <ApiDetail {...args} />
+export const Online = Template.bind({})
+Online.args = {
+  id: 1,
+  name: 'api-online',
+  version: '1.2.3',
+  source: 'Platformatic DB',
+  lastDeploy: '2022-10-10',
+  graphql: true,
+  openapi: true,
+  online: true,
+  url: 'https://example.com',
+  repository: 'platformatic/example',
+  db: 'SQLite'
+}
+export const Offline = Template.bind({})
+Offline.args = {
+  id: 1,
+  name: 'api-offline',
+  version: '1.2.3',
+  source: 'Platformatic DB',
+  lastDeploy: '2022-10-10',
+  graphql: true,
+  openapi: true,
+  online: false,
+  url: 'https://example.com',
+  repository: 'platformatic/example',
+  db: 'PostgreSQL'
+}

package/src/stories/ApiSummary.stories.jsx ADDED Viewed

@@ -0,0 +1,43 @@
+'use strict'
+import ApiSummary from '../components/ApiSummary'
+export default {
+  title: 'Platformatic/ApiSummary',
+  component: ApiSummary,
+  argTypes: {
+    text: { control: 'string' }
+  }
+}
+const Template = (args) => <ApiSummary {...args} />
+export const Online = Template.bind({})
+Online.args = {
+  id: 1,
+  name: 'api-online',
+  version: '1.2.3',
+  source: 'Platformatic DB',
+  lastDeploy: '2022-10-10',
+  graphql: true,
+  openapi: true,
+  online: true,
+  url: 'https://example.com',
+  repository: 'platformatic/example',
+  db: 'SQLite'
+}
+export const Offline = Template.bind({})
+Offline.args = {
+  id: 1,
+  name: 'api-offline',
+  version: '1.2.3',
+  source: 'Platformatic DB',
+  lastDeploy: '2022-10-10',
+  graphql: true,
+  openapi: true,
+  online: false,
+  url: 'https://example.com',
+  repository: 'platformatic/example',
+  db: 'PostgreSQL'
+}

package/src/stories/BorderedBox.stories.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 'use strict'
 import BorderedBox from '../components/BorderedBox'
 export default {
-  title: 'Example/BorderedBox',
+  title: 'Platformatic/BorderedBox',
   component: BorderedBox,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {

package/src/stories/BorderedText.stories.jsx ADDED Viewed

@@ -0,0 +1,24 @@
+'use strict'
+import BorderedText from '../components/BorderedText'
+export default {
+  title: 'Platformatic/BorderedText',
+  component: BorderedText,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    text: { control: 'string' }
+  }
+}
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <BorderedText {...args} />
+export const Sample = Template.bind({})
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Sample.args = {
+  text: 'Hello Platformatic!'
+}
+export const Version = Template.bind({})
+Version.args = {
+  text: 'v1.2.3'
+}

package/src/stories/Button.stories.jsx CHANGED Viewed

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

package/src/stories/GHLoginButton.stories.jsx CHANGED Viewed

@@ -2,7 +2,7 @@ import React from 'react'
 import GHLoginButton from '../components/GHLoginButton'
 export default {
-  title: 'Example/GHLoginButton',
+  title: 'Platformatic/GHLoginButton',
   component: GHLoginButton
 }

package/src/stories/LoginButton.stories.jsx CHANGED Viewed

@@ -1,8 +1,8 @@
 import React from 'react'
-import LoginButton  from '../components/LoginButton'
+import LoginButton from '../components/LoginButton'
 export default {
-  title: 'Example/LoginButton',
+  title: 'Platformatic/LoginButton',
   component: LoginButton
 }

package/tailwind.config.cjs CHANGED Viewed

@@ -22,7 +22,11 @@ module.exports = {
   },
   safelist: [
     'border-error-red',
-    'border-main-green'
+    'border-main-green',
+    'text-3xl',
+    'text-4xl',
+    'text-5xl',
+    'text-6xl'
   ],
   plugins: []
 }

package/dist/assets/index.2da5d0ca.css DELETED Viewed

@@ -1 +0,0 @@

- ._input_1v03r_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.375rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._input_1v03r_1>input:focus{outline:2px solid transparent;outline-offset:2px}._padded_650jz_1{padding:.625rem .5rem}._bordered_650jz_5{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered_1ece3_1{border-radius:.375rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity));padding:.25rem .5rem;letter-spacing:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._footer_kawbk_1{margin-left:2.25rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .5rem .5rem 1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._borderedBox_1fd0d_1{margin-bottom:1rem;flex:1 1 0%;row-gap:1rem;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(0 52 79 / var(--tw-bg-opacity));padding:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._main_1uwu5_1{display:flex;align-items:center;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._data_1uwu5_5{display:flex;width:100%;flex-direction:column}._status_1uwu5_9{justify-self:end}._stats-header_w45a1_1{display:flex;align-items:center;justify-content:space-between;font-weight:700}._stats-main-stat_w45a1_4{display:flex;align-items:center;justify-content:center;gap:1rem}._tabbed-container_129x6_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_129x6_5{margin-bottom:1rem;display:flex;height:4rem;justify-content:space-between;text-transform:uppercase;letter-spacing:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._tabs-header_129x6_5:hover{cursor:pointer}._selected-tab_129x6_8{font-weight:700;--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:8px}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.m-3{margin:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mr-5{margin-right:1.25rem}.ml-4{margin-left:1rem}.mr-2{margin-right:.5rem}.mr-1{margin-right:.25rem}.flex{display:flex}.grid{display:grid}.contents{display:contents}.w-full{width:100%}.w-9{width:2.25rem}.grow{flex-grow:1}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:1rem}.gap-2{gap:.5rem}.gap-10{gap:2.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-error-red{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}.border-main-green{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}.p-2{padding:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-5xl{font-size:3rem;line-height:1}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-light{font-weight:300}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}@font-face{font-family:Montserrat;src:local("Montserrat"),url(./fonts/Montserrat/Montserrat-VariableFont_wght.ttf) format("truetype");font-weight:100 900}:root{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity));font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}input{background-color:transparent}.hover\:cursor-pointer:hover{cursor:pointer}

package/src/stories/Header.jsx DELETED Viewed

@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button } from './Button';
-import './header.css';
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
-  <header>
-    <div className="wrapper">
-      <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
-      </div>
-      <div>
-        {user ? (
-          <>
-            <span className="welcome">
-              Welcome, <b>{user.name}</b>!
-            </span>
-            <Button size="small" onClick={onLogout} label="Log out" />
-          </>
-        ) : (
-          <>
-            <Button size="small" onClick={onLogin} label="Log in" />
-            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
-          </>
-        )}
-      </div>
-    </div>
-  </header>
-);
-Header.propTypes = {
-  user: PropTypes.shape({}),
-  onLogin: PropTypes.func.isRequired,
-  onLogout: PropTypes.func.isRequired,
-  onCreateAccount: PropTypes.func.isRequired,
-};
-Header.defaultProps = {
-  user: null,
-};

package/src/stories/Header.stories.jsx DELETED Viewed

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Header } from './Header';
-export default {
-  title: 'Example/Header',
-  component: Header,
-  parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
-  },
-};
-const Template = (args) => <Header {...args} />;
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
-  },
-};
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};

package/src/stories/Page.jsx DELETED Viewed

@@ -1,69 +0,0 @@
-import React from 'react';
-import { Header } from './Header';
-import './page.css';
-export const Page = () => {
-  const [user, setUser] = React.useState();
-  return (
-    <article>
-      <Header
-        user={user}
-        onLogin={() => setUser({ name: 'Jane Doe' })}
-        onLogout={() => setUser(undefined)}
-        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
-      />
-      <section>
-        <h2>Pages in Storybook</h2>
-        <p>
-          We recommend building UIs with a{' '}
-          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
-            <strong>component-driven</strong>
-          </a>{' '}
-          process starting with atomic components and ending with pages.
-        </p>
-        <p>
-          Render pages with mock data. This makes it easy to build and review page states without
-          needing to navigate to them in your app. Here are some handy patterns for managing page
-          data in Storybook:
-        </p>
-        <ul>
-          <li>
-            Use a higher-level connected component. Storybook helps you compose such data from the
-            "args" of child component stories
-          </li>
-          <li>
-            Assemble data in the page component from your services. You can mock these services out
-            using Storybook.
-          </li>
-        </ul>
-        <p>
-          Get a guided tutorial on component-driven development at{' '}
-          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
-            Storybook tutorials
-          </a>
-          . Read more in the{' '}
-          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
-            docs
-          </a>
-          .
-        </p>
-        <div className="tip-wrapper">
-          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
-          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-            <g fill="none" fillRule="evenodd">
-              <path
-                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-                id="a"
-                fill="#999"
-              />
-            </g>
-          </svg>
-          Viewports addon in the toolbar
-        </div>
-      </section>
-    </article>
-  );
-};

package/src/stories/Page.stories.jsx DELETED Viewed

@@ -1,25 +0,0 @@
-import React from 'react';
-import { within, userEvent } from '@storybook/testing-library';
-import { Page } from './Page';
-export default {
-  title: 'Example/Page',
-  component: Page,
-  parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
-  },
-};
-const Template = (args) => <Page {...args} />;
-// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
-export const LoggedOut = Template.bind({});
-export const LoggedIn = Template.bind({});
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
-};