Add other components

index.js

@@ -1,16 +1,28 @@
 'use strict'
 
-import API from './src/components/Api'
+import Api from './src/components/Api'
+import ApiDetails from './src/components/ApiDetail'
 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 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'
 export {
-  API,
+  Api,
+  ApiDetails,
   BorderedBox,
   BorderedText,
   HorizontalSeparator,
+  Layout,
+  Playground,
+  Prs,
   SearchBar,
+  TabbedWindow,
+  Versions,
   VerticalSeparator
 }

package.json

@@ -20,7 +20,8 @@
     "autoprefixer": "^10.4.12",
     "postcss": "^8.4.17",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "storybook-tailwind-foundations": "^1.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",

src/App.jsx

@@ -1,12 +1,11 @@
-import './styles/main.css'
-
+import Layout from './components/layouts/Layout'
 import Main from './components/Main'
 
 function App () {
   return (
-    <div className='App'>
+    <Layout>
       <Main />
-    </div>
+    </Layout>
   )
 }
 

src/components/Api.jsx

@@ -8,49 +8,76 @@ import Separator from './VerticalSeparator'
 import ApiStatus from './Api/Status'
 import BorderedBox from './BorderedBox'
 import HorizontalSeparator from './HorizontalSeparator'
+import styles from './Api.module.css'
+import { useState } from 'react'
 
+function ApiName (props) {
+  const { name } = props
+  return (
+    <span className='text-main-green font-semibold text-2xl'>{name}</span>
+  )
+}
 export default function API (props) {
+  const [isOpen, setIsOpen] = useState(false)
   const { name, version, source, lastDeploy, graphql, openapi, online } = props.data
   const color = online ? 'green' : 'red'
+  function getApiIcon () {
+    if (isOpen) {
+      return 'api-icon.svg'
+    }
+    return 'api-icon-closed.svg'
+  }
   return (
     <BorderedBox
       color={color}
     >
-      <div className='api-main'>
-        <div className='flex w-full'>
-          <img className='w-9 mr-5' src='api-icon.svg' />
-          <div className='api-data'>
-            <div className='flex items-center justify-between'>
-              <div className='flex items-center justify-between gap-4'>
-                <span className='text-main-green font-semibold text-2xl'>{name}</span>
-                <span>
-                  <a href='#' className='border p-2 rounded-full'>
-                    <FontAwesomeIcon color='white' icon={faLink} />
-                  </a>
-                </span>
-                <ApiVersion version={version} />
-              </div>
-              <div className='api-status'>
-                <ApiStatus online={online} />
+      {isOpen && (
+        <>
+          <div className={styles.main}>
+            <div className='flex w-full'>
+              <img className='w-9 mr-5' src={getApiIcon()} />
+              <div className={styles.data}>
+                <div className='flex items-center justify-between'>
+                  <div className='flex items-center justify-between gap-4'>
+                    <ApiName name={name} />
+                    <span>
+                      <a href='#' className='border p-2 rounded-full'>
+                        <FontAwesomeIcon color='white' icon={faLink} />
+                      </a>
+                    </span>
+                    <ApiVersion version={version} />
+                  </div>
+                  <div className='api-status'>
+                    <ApiStatus online={online} />
+                  </div>
+
+                </div>
+
+                <div className='flex gap-2 items-center'>
+                  <span>Generated with: {source}</span>
+                  <Separator />
+                  <span>Last deployed: {lastDeploy}</span>
+                </div>
               </div>
 
             </div>
 
-            <div className='flex gap-2 items-center'>
-              <span>Generated with: {source}</span>
-              <Separator />
-              <span>Last deployed: {lastDeploy}</span>
-            </div>
           </div>
-
+          <HorizontalSeparator />
+          <ApiFooter
+            graphql={graphql}
+            openapi={openapi}
+          />
+        </>
+      )}
+      {!isOpen && (
+        <div className='flex items-center'>
+          <img className='w-9 mr-5' src={getApiIcon()} />
+          <ApiName name={name} />
+          <span onClick={() => { setIsOpen(!isOpen) }} className='ml-4 hover:cursor-pointer'>Click here to set up your api</span>
         </div>
 
-      </div>
-      <HorizontalSeparator />
-      <ApiFooter
-        graphql={graphql}
-        openapi={openapi}
-      />
+      )}
     </BorderedBox>
   )
 }

src/components/Api.module.css

@@ -0,0 +1,7 @@
+.main {
+  @apply flex items-center text-white;
+}
+
+.data {
+  @apply flex flex-col w-full;
+}

src/components/BorderedText.jsx

@@ -1,7 +1,8 @@
 'use strict'
+import styles from './BorderedText.module.css'
 
 export default function BorderedText (props) {
   return (
-    <span className='bordered-text'>{props.text}</span>
+    <span className={styles.bordered}>{props.text}</span>
   )
 }

src/components/BorderedText.module.css

@@ -0,0 +1,3 @@
+.bordered {
+  @apply border border-solid rounded-md px-2 py-1 border-white tracking-[.25rem] text-white;
+}

src/components/Common.module.css

@@ -0,0 +1,3 @@
+.padded {
+  @apply px-2 py-2.5;
+}

src/components/Main.jsx

@@ -6,7 +6,10 @@ import ApiDetails from './ApiDetail'
 import TabbedWindow from './TabbedWindow'
 import Prs from './Pr'
 import Playground from './Playground'
+import Versions from './Versions'
+import { useState } from 'react'
 export default function Main () {
+  const [currentSearch, setCurrentSearch] = useState('')
   const apis = [
     {
       id: 1,
@@ -46,19 +49,21 @@ export default function Main () {
     },
     {
       label: 'Versions',
-      component: () => <h1>Versions</h1>
+      component: () => <Versions />
     }
 
   ]
   return (
-    <div className='container mx-auto px-4 my-5 flex flex-col gap-10'>
+    <>
       <h1 className='text-white text-2xl font-bold'>My APIs</h1>
-      <SearchBar action={() => alert('asd')} />
+      <SearchBar action={(value) => setCurrentSearch(value)} />
+      {currentSearch !== '' && (
+        <span className='text-main-green'>You searched for {currentSearch}</span>
+      )}
       <TabbedWindow
         tabs={tabs}
       />
       {apis.map((api) => { return (<Api key={api.id} data={api} />) })}
-
-    </div>
+    </>
   )
 }

src/components/SearchBar.jsx

@@ -1,12 +1,21 @@
 'use strict'
 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) {
-  const { action } = props.action
+  const inputRef = useRef()
+  const { action } = props
+
+  function handleSearch () {
+    const value = inputRef.current.value
+    return action(value)
+  }
   return (
-    <div className='input-container border-main-green'>
-      <input type='text' placeholder='Search' className='grow' />
-      <button className='-m8' onClick={action}>
+    <div className={`${styles.input} ${commonStyles.padded}`}>
+      <input type='text' placeholder='Search' className='grow' ref={inputRef} />
+      <button onClick={handleSearch}>
         <FontAwesomeIcon color='white' icon={faSearch} />
       </button>
 

src/components/SearchBar.module.css

@@ -0,0 +1,6 @@
+.input {
+  @apply flex justify-between w-full h-10  text-white border-main-green border border-solid box-border rounded-md;
+}
+.input > input:focus {
+  @apply outline-none;
+}

src/components/TabbedWindow.jsx

@@ -15,7 +15,6 @@ export default function TabbedWindow (props) {
 
   useEffect(() => {
     currentComponent = components[selected]
-    console.log(currentComponent)
   }, [selected])
 
   return (

src/components/Versions.jsx

@@ -0,0 +1,9 @@
+'use strict'
+
+import BorderedBox from './BorderedBox'
+
+export default function Versions () {
+  return (
+    <BorderedBox color='green'>Versions</BorderedBox>
+  )
+}

src/components/layouts/Layout.jsx

@@ -0,0 +1,10 @@
+'use strict'
+
+export default function Layout (props) {
+  return (
+    <div className='container mx-auto px-4 my-5 flex flex-col gap-10'>
+      {props.children}
+    </div>
+
+  )
+}

src/main.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-
+import './styles/main.css'
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />

src/stories/BorderedBox.stories.jsx

@@ -0,0 +1,19 @@
+'use strict'
+import BorderedBox from '../components/BorderedBox'
+export default {
+  title: 'Example/BorderedBox',
+  component: BorderedBox,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    color: { control: 'color' }
+  }
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <BorderedBox {...args}>Hello Platformatic</BorderedBox>
+
+export const Green = Template.bind({})
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Green.args = {
+  color: 'green'
+}