Skip to content

Commit

Permalink
reconstruct nav and styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@sin-bufan
sin-bufan committed Jan 31, 2024
1 parent 3f93b1c commit 5332d5b
Show file tree
Hide file tree
Showing 31 changed files with 716 additions and 894 deletions.
250 changes: 133 additions & 117 deletions packages/client/dashboard/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import { Us3rAuthWithRainbowkitProvider } from '@us3r-network/auth-with-rainbowkit'
import { ProfileStateProvider } from '@us3r-network/profile'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { useEffect, useState } from 'react'
import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components'
import {
NavLink,
Outlet,
Expand All @@ -7,37 +12,29 @@ import {
useLocation,
useParams
} from 'react-router-dom'
import styled from 'styled-components'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { Us3rAuthWithRainbowkitProvider } from '@us3r-network/auth-with-rainbowkit'
import { ProfileStateProvider } from '@us3r-network/profile'
import { ToastContainer } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.min.css'

import { DappCompositeDto, ModelStream } from './types.d'
import styled from 'styled-components'
import DappModelAndComposites from './components/model/DappModelAndComposites'
import Header from './components/nav/Header'
import Nav from './components/nav/Nav'
import { CERAMIC_TESTNET_HOST, WALLET_CONNECT_PROJECT_ID } from './constants'

import AppProvider, { useAppCtx } from './context/AppCtx'
import CeramicNodeProvider from './context/CeramicNodeCtx'

import MyDapps from './container/MyDapps'
import CeramicNodes from './container/CeramicNodes'
import Components from './container/Components'
import DappCreate from './container/DappCreate'
import DappEditor from './container/DappEditor'
import DappHome from './container/DappHome'
import DappInfo from './container/DappInfo'
import DappModelEditor from './container/DappModelEditor'
import DappModelPlayground from './container/DappModelPlayground'
import DappModelSdk from './container/DappModelSdk'
import DappDataStatistic from './container/DappDataStatistic'
import Components from './container/Components'
import CeramicNodes from './container/CeramicNodes'
import DappMetrics from './container/DappMetrics'
import DappPlayground from './container/DappPlayground'
import DappSdk from './container/DappSdk'
import ExploreComposite from './container/ExploreComposite'
import ExploreModel from './container/ExploreModel'
import MyDapps from './container/MyDapps'
import NoMatch from './container/NoMatch'

import Header from './components/nav/Header'
import Nav from './components/nav/Nav'
import DappModelAndComposites from './components/model/DappModelAndComposites'
import ExploreComposite from './container/ExploreComposite'
import AppProvider, { useAppCtx } from './context/AppCtx'
import CeramicNodeProvider from './context/CeramicNodeCtx'
import { DappCompositeDto, ModelStream } from './types.d'

dayjs.extend(relativeTime)

Expand All @@ -49,23 +46,19 @@ function Routers () {
<Route path='dapp/create' element={<DappCreate />} />
<Route path='dapp/:appId' element={<DappLayout />}>
<Route path='index' element={<DappHome />} />
<Route path='node' element={<CeramicNodes />} />
<Route element={<ModelEditorLayout />}>
<Route path='model-editor' element={<DappModelEditor />} />
<Route path='model-playground' element={<DappModelPlayground />} />
<Route path='model-sdk' element={<DappModelSdk />} />
<Route path='statistic' element={<DappDataStatistic />} />
</Route>
<Route path='info' element={<DappInfo />} />
<Route path='explore' element={<ExploreLayout />}>
<Route path='model' element={<ExploreModel />} />
<Route path='composite' element={<ExploreComposite />} />
<Route path='components' element={<Components />} />
</Route>
<Route path='favorite' element={<ExploreLayout />}>
<Route path='model' element={<ExploreModel />} />
<Route path='composite' element={<ExploreComposite />} />
<Route path='build' element={<BuildLayout />}>
<Route path='editor' element={<DappEditor />} />
<Route path='playground' element={<DappPlayground />} />
<Route path='sdk' element={<DappSdk />} />
<Route path='metrics' element={<DappMetrics />} />
</Route>
<Route path='components' element={<Components />} />
<Route path='info' element={<DappInfo />} />
<Route path='node' element={<CeramicNodes />} />
</Route>
</Route>
<Route path='*' element={<NoMatch />} />
Expand Down Expand Up @@ -174,14 +167,31 @@ const AppContainer = styled.div`
}
`

function ModelEditorLayout () {
function BuildLayout () {
const [selectModel, setSelectModel] = useState<ModelStream>()
const [selectComposite, setSelectComposite] = useState<DappCompositeDto>()

const { pathname } = useLocation()

const defaultKey = pathname.split('/explore/')[1]
const PAGES = [
{
id: 'editor',
label: 'Editor'
},
{
id: 'playground',
label: 'Playground'
},
{
id: 'sdk',
label: 'SDK'
},
{
id: 'metrics',
label: 'Metrics'
}
]
return (
<EditorLayoutContainer>
<LayoutContainer>
<DappModelAndComposites
selectModel={selectModel}
setSelectModel={data => {
Expand All @@ -195,93 +205,99 @@ function ModelEditorLayout () {
selectComposite={selectComposite}
editable={pathname.includes('model-editor')}
/>
<Outlet
context={{
selectModel,
selectComposite
}}
/>
</EditorLayoutContainer>
<div className='build-content'>
<Tabs selectedKey={defaultKey}>
{PAGES.map(page => (
<div className='tab-panel'>
<TabPanel id={page.id}>
<Outlet
context={{
selectModel,
selectComposite
}}
/>
</TabPanel>
</div>
))}
<div className='tab-list'>
<TabList aria-label='Explore'>
{PAGES.map(page => (
<Tab id={page.id}>
<NavLink to={page.id} key={page.id}>
{page.label}
</NavLink>
</Tab>
))}
</TabList>
</div>
</Tabs>
</div>
</LayoutContainer>
)
}

const EditorLayoutContainer = styled.div`
margin-top: 25px;
margin-bottom: 25px;
display: flex;
gap: 20px;
> .list {
flex-grow: 1;
}
.ops {
flex-grow: 1;
overflow: hidden;
}
.playground-ops {
flex-grow: 1;
overflow: hidden;
> div {
height: calc(100vh - 100px);
}
.graphiql-container {
height: 100%;
}
}
`

function ExploreLayout () {
const { pathname } = useLocation()
const defaultExploreKey = pathname.split('/explore/')[1]
const EXPLORE_PAGES = [
{
id: 'model',
label: 'Models'
},
{
id: 'composite',
label: 'Composites'
},
{
id: 'components',
label: 'Components'
}
]
return (
<ExploreLayoutContainer>
<div className='explore-catalog'>
<NavLink to='model' key='model'>
{({ isActive }) => (
<div className={`item ${isActive ? 'active' : ''}`}>
<span>Models</span>
</div>
)}
</NavLink>

{!pathname.includes('favorite') && (
<NavLink to='composite' key='model'>
{({ isActive }) => (
<div className={`item ${isActive ? 'active' : ''}`}>
<span>Composites</span>
</div>
)}
</NavLink>
)}
</div>
<div>
<Outlet />
</div>
</ExploreLayoutContainer>
<LayoutContainer>
<Tabs selectedKey={defaultExploreKey}>
{EXPLORE_PAGES.map(page => (
<div className='tab-panel'>
<TabPanel id={page.id}>
<Outlet />
</TabPanel>
</div>
))}
<div className='tab-list'>
<TabList aria-label='Explore'>
{EXPLORE_PAGES.map(page => (
<Tab id={page.id}>
<NavLink to={page.id} key={page.id}>
{page.label}
</NavLink>
</Tab>
))}
</TabList>
</div>
</Tabs>
</LayoutContainer>
)
}

const ExploreLayoutContainer = styled.div`
margin-top: 25px;
margin-bottom: 25px;
.explore-catalog {
const LayoutContainer = styled.div`
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
display: flex;
gap: 20px;
.tab-list {
position: absolute;
display: flex;
gap: 20px;
.item {
font-size: 24px;
font-weight: 700;
color: #718096;
> span {
transition: opacity 0.09s ease-in-out;
}
&.active {
background: #14171a;
color: #fff;
}
}
top: 0px;
right: 0px;
}
.tab-panel {
position: absolute;
width: 100%;
top: 0;
margin: 0;
padding: 0;
}
.build-content{
flex-grow: 1;
}
`
5 changes: 3 additions & 2 deletions packages/client/dashboard/src/components/model/CompositeEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const Box = styled.div`
justify-content: space-between;
background-color: #14171a;
margin-bottom: 20px;
height: 100%;
> div {
display: flex;
align-items: center;
Expand All @@ -100,7 +100,6 @@ const Box = styled.div`
`

const EditorBox = styled.div`
height: calc(100vh - 300px);
max-height: 800px;
background: #14171a;
border: 1px solid #39424c;
Expand All @@ -110,13 +109,15 @@ const EditorBox = styled.div`
* {
box-sizing: border-box;
}
flex: 1;
`

const ResultBox = styled.div`
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 20px;
flex: 0 0 100px;
> div {
background: #1b1e23;
border: 1px solid #39424c;
Expand Down
6 changes: 1 addition & 5 deletions packages/client/dashboard/src/components/model/CompositePlaygroundGraphiQL.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,12 +144,8 @@ export default function CompositePlaygroundGraphiQL(
const GraphiqlContainer = styled.div`
border-radius: 20px;
overflow: hidden;
height: calc(100vh - 200px);
height: 100%;
> div {
height: 100%;
.graphiql-container {
height: 100%;
width: 100%;
}
}
`
2 changes: 1 addition & 1 deletion packages/client/dashboard/src/components/model/DappModelAndComposites.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ export default function DappModelAndComposites ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [appId])

const isMetrics = location.pathname.endsWith('statistic')
const isMetrics = location.pathname.endsWith('metrics')
const isSdk = location.pathname.endsWith('sdk')

const [openModal, setOpenModal] = useState(OPEN_MODAL.NONE)
Expand Down
4 changes: 2 additions & 2 deletions packages/client/dashboard/src/components/model/ModelInstance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import PlusIcon from '../icons/PlusIcon'
import ModelInstanceFormModal from './ModelInstanceFormModal'
import ModelStreamList from './ModelStreamList'

export default function Instance ({
export default function ModelInstance ({
streamId,
network,
schema,
Expand Down Expand Up @@ -271,7 +271,7 @@ export default function Instance ({
onSubmit={() => submitStream()}
/>
<ListHeading>
<h3>{name}</h3>
{/* <h3>{name}</h3> */}
{composeClientAuthenticated && (
<PlusButton
onPress={() => {
Expand Down
Loading

0 comments on commit 5332d5b

Please sign in to comment.