@platformatic/ui-components 0.1.34 → 0.1.35

package/package.json

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

package/src/components/Box.module.css

@@ -1,5 +1,5 @@
 .box {
-  @apply p-5 m-0 md:p-0 md:m-24 flex flex-col;
+  @apply p-5 m-0 md:px-24 md:py-56 flex flex-col;
 }
 
 .justifyCentered {

package/src/components/DropDown.module.css

@@ -16,8 +16,10 @@
   @apply hover:cursor-pointer relative pr-6;
 }
 .menu {
-  @apply absolute border-solid border border-white p-3 bg-light-blue mt-8 rounded-md z-[999] text-sm;
+  @apply absolute border-solid border border-white px-0 py-1 bg-light-blue mt-8 rounded-md z-[999] text-sm min-w-[175px];
 }
 .item {
-  @apply py-3 text-main-dark-blue border-t border-main-dark-blue first:border-t-0 text-sm uppercase hover:font-semibold hover:cursor-pointer; 
+  @apply py-3 px-3 text-main-dark-blue first:border-t-0 text-sm uppercase hover:font-semibold hover:cursor-pointer tracking-[0.15em]; 
+  /* it's a workaround due to opacity... */
+  border-top: 1px solid rgba(0, 40, 61, 0.2);;
 }

package/src/components/TabbedWindow.jsx

@@ -3,8 +3,8 @@ import React, { useEffect, useState } from 'react'
 import styles from './TabbedWindow.module.css'
 
 export default function TabbedWindow (props) {
-  const [selected, setSelected] = useState(0)
-  const { tabs } = props
+  const { tabs, defaultSelected = 0, callbackSelected = () => {} } = props
+  const [selected, setSelected] = useState(defaultSelected)
   const headers = []
   const components = []
   tabs.forEach((tab) => {
@@ -17,12 +17,17 @@ export default function TabbedWindow (props) {
     currentComponent = components[selected]
   }, [selected])
 
+  function setCurrentTab (index) {
+    setSelected(index)
+    callbackSelected(index)
+  }
+
   return (
     <div className={styles['tabbed-container']}>
       <div className={styles['tabs-header']}>
         {headers.map((header, index) => {
           return (
-            <span onClick={() => setSelected(index)} key={index} className={`${styles.tab} ${selected === index ? styles['selected-tab'] : ''}`}>
+            <span onClick={() => setCurrentTab(index)} key={index} className={`${styles.tab} ${selected === index ? styles['selected-tab'] : ''}`}>
               {header}
             </span>
           )

package/src/components/icons/Icons.module.css

@@ -0,0 +1,15 @@
+.green > circle,
+.green > rect, 
+.green > path {
+    @apply stroke-main-green;
+}
+.red > circle,
+.red > rect,
+.red > path {
+    @apply stroke-error-red;
+}
+.white > circle,
+.white > rect,
+.white > path {
+    @apply stroke-white;
+}

package/src/components/icons/MetricsIcon.jsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+const MetricsIcon = ({ color = 'white' }) => {
+  const className = styles[`${color}`]
+  return (
+    <svg
+      width={40}
+      height={40}
+      viewBox='0 0 40 40'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <rect
+        x={10}
+        y={12.5}
+        width={5}
+        height={17.5}
+        rx={0.5}
+        stroke='none'
+        strokeWidth={2}
+      />
+      <rect
+        x={20}
+        y={20}
+        width={5}
+        height={10}
+        rx={0.5}
+        stroke='none'
+        strokeWidth={2}
+      />
+      <rect
+        x={30}
+        y={5}
+        width={5}
+        height={25}
+        rx={0.5}
+        stroke='none'
+        strokeWidth={2}
+      />
+      <path
+        d='M5 5V35H35'
+        stroke='none'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+export default MetricsIcon

package/src/components/icons/PullRequestIcon.jsx

@@ -1,31 +1,35 @@
 import * as React from 'react'
-
-const PullRequestIcon = () => (
-  <svg
-    width={40}
-    height={40}
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
-  >
-    <circle cx={9.5} cy={30.5} r={4.5} stroke='#fff' strokeWidth={2} />
-    <circle cx={9.5} cy={9.5} r={4.5} stroke='#fff' strokeWidth={2} />
-    <path stroke='#fff' strokeWidth={2} d='M9 14v12' />
-    <circle cx={30.5} cy={30.5} r={4.5} stroke='#fff' strokeWidth={2} />
-    <path
-      d='M30.5 26V10.5a1 1 0 0 0-1-1H23'
-      stroke='#fff'
-      strokeWidth={2}
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-    <path
-      d='m26 5-4.5 4.5L26 14'
-      stroke='#fff'
-      strokeWidth={2}
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-  </svg>
-)
+import styles from './Icons.module.css'
+const PullRequestIcon = ({ color = 'white' }) => {
+  const className = styles[`${color}`]
+  return (
+    <svg
+      width={40}
+      height={40}
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <circle cx={9.5} cy={30.5} r={4.5} stroke='none' strokeWidth={2} />
+      <circle cx={9.5} cy={9.5} r={4.5} stroke='none' strokeWidth={2} />
+      <path stroke='none' strokeWidth={2} d='M9 14v12' />
+      <circle cx={30.5} cy={30.5} r={4.5} stroke='none' strokeWidth={2} />
+      <path
+        d='M30.5 26V10.5a1 1 0 0 0-1-1H23'
+        stroke='none'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='m26 5-4.5 4.5L26 14'
+        stroke='none'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
 
 export default PullRequestIcon

package/src/components/icons/index.js

@@ -4,8 +4,9 @@ import ApiEmptyIcon from './ApiEmptyIcon'
 import CloseModalIcon from './CloseModalIcon'
 import CloseModalGreenIcon from './CloseModalGreenIcon'
 import CloseModalGreenHoverIcon from './CloseModalGreenHoverIcon'
+import MetricsIcon from './MetricsIcon'
 import PullRequestIcon from './PullRequestIcon'
 
 export default {
-  ApiIcon, ApiIconClosed, ApiEmptyIcon, CloseModalIcon, CloseModalGreenIcon, CloseModalGreenHoverIcon, PullRequestIcon
+  ApiIcon, ApiIconClosed, ApiEmptyIcon, CloseModalIcon, CloseModalGreenIcon, CloseModalGreenHoverIcon, MetricsIcon, PullRequestIcon
 }

package/src/stories/icons/PullRequestIcon.stories.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import PullRequestIcon from '../../components/icons/PullRequestIcon'
+
+export default {
+  title: 'Platformatic/Icons',
+  component: PullRequestIcon,
+  argTypes: {
+    color: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['green', 'white', 'red']
+      }
+    }
+  }
+}
+
+const Template = (args) => <PullRequestIcon {...args} />
+export const PullRequestIconDefault = Template.bind({})
+PullRequestIconDefault.args = {}