add import React on each component

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

src/components/Api/Endpoints.jsx

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

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 (

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) {

src/components/Api/Version.jsx

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

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

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)

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>

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' />
 }

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 = [

src/components/Playground.jsx

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

src/components/Pr.jsx

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

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) {

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

src/components/StatView.jsx → src/components/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

src/components/Versions.jsx

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

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>
 }

src/components/layouts/Layout.jsx

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

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'>

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'
+}

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