@platformatic/ui-components 0.1.1 → 0.1.3

package/dist/main.css

@@ -710,26 +710,14 @@ video {
   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;
-}
 
+  src: local('Montserrat'), url(./fonts/Montserrat/Montserrat-VariableFont_wght.ttf) format('truetype');
 
-@font-face {
-  font-family: 'Montserrat';
-  src: local('Montserrat'), url(./fonts/Montserrat/static/Montserrat-Regular.ttf) format('truetype');
-  font-weight: 500;
+  font-weight: 100 900;
 }
 
-@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));
@@ -741,44 +729,6 @@ a {
   color: rgb(37 136 228 / var(--tw-text-opacity));
 }
 
-.bordered {
-  box-sizing: border-box;
-  border-radius: 0.375rem;
-  border-width: 1px;
-  border-style: solid;
-}
-
-.api-footer {
-  margin-left: 2.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.5rem;
-  padding-left: 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: 0.375rem;
-  border-width: 1px;
-  border-style: solid;
-}
-
 input {
   background-color: transparent;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "license": "Apache-2.0",
   "scripts": {
@@ -10,7 +10,8 @@
     "preview": "vite preview",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "tailwind": "tailwindcss -i ./src/styles/main.css -o ./dist/main.css --watch",
+    "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": {

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/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/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/StatsView.module.css

@@ -1,5 +1,5 @@
 .stats-header {
-  @apply flex justify-between items-center font-bold
+  @apply flex justify-between items-center font-bold;
 }
 .stats-main-stat {
   @apply flex justify-center items-center;

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/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()]
 })