Skip to content

Commit

Permalink
chore: split various playgrounds
Browse files Browse the repository at this point in the history
  • Loading branch information
jstarpl committed Nov 17, 2023
1 parent 8f4377c commit 8b4f745
Show file tree
Hide file tree
Showing 12 changed files with 339 additions and 91 deletions.
Binary file modified .yarn/install-state.gz
Binary file not shown.
11 changes: 9 additions & 2 deletions packages/apps/client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
"@types/bootstrap": "^5",
"@types/react": "^18.2.36",
"@types/react-dom": "^18.2.14",
"@types/react-helmet": "^6",
"@types/uuid": "^9",
"@typescript-eslint/eslint-plugin": "^6.10.0",
"@typescript-eslint/parser": "^6.10.0",
Expand All @@ -34,16 +33,24 @@
"vite": "^4.5.0"
},
"dependencies": {
"@popperjs/core": "^2.11.8",
"@sofie-prompter-editor/shared-lib": "0.0.0",
"@sofie-prompter-editor/shared-model": "0.0.0",
"bootstrap": "^5.3.2",
"eventemitter3": "^5.0.1",
"mobx": "^6.10.2",
"mobx-react-lite": "^4.0.5",
"prosemirror-commands": "^1.5.2",
"prosemirror-history": "^1.3.2",
"prosemirror-keymap": "^1.2.2",
"prosemirror-model": "^1.19.3",
"prosemirror-schema-basic": "^1.2.2",
"prosemirror-state": "^1.4.3",
"prosemirror-view": "^1.32.4",
"react": "^18.2.0",
"react-bootstrap": "^2.9.1",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-helmet-async": "^1.3.0",
"react-router-dom": "^6.18.0",
"socket.io-client": "^4.7.2",
"uuid": "^9.0.1"
Expand Down
52 changes: 30 additions & 22 deletions packages/apps/client/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,42 @@
import React, { useEffect } from 'react'
import { TestInterface } from './TestInterface.tsx'
import { APIConnection } from './api/ApiConnection.ts'

import './App.css'
import { RundownList } from './RundownList/RundownList.tsx'
import { CurrentRundown } from './CurrentRundown/CurrentRundown.tsx'
import { TestPlaylists } from './TestPlaylists.tsx'
import { Helmet } from 'react-helmet'
function App(props: { api: APIConnection }): React.JSX.Element {
useEffect(() => {
window.document.body.dataset['bsTheme'] = 'dark'
}, [])
import { Helmet } from 'react-helmet-async'
import { Container, Nav, Navbar } from 'react-bootstrap'
import { Link, Outlet } from 'react-router-dom'

function App(): React.JSX.Element {
return (
<>
<Helmet>
<title>App</title>
<body data-bs-theme="dark" />
</Helmet>
<div>
<RundownList />
</div>
<div>
<CurrentRundown />
</div>
<div>
<TestInterface api={props.api} />
</div>
<div>
<TestPlaylists api={props.api} />
</div>
<Navbar>
<Container>
<Navbar.Brand>Prompter</Navbar.Brand>
<Nav className="me-auto">
<Nav.Item>
<Link className="nav-link" to="/store">
MobX playground
</Link>
</Nav.Item>
<Nav.Item>
<Link className="nav-link" to="/backend">
Backend playground
</Link>
</Nav.Item>
<Nav.Item>
<Link className="nav-link" to="/editor">
Editor playground
</Link>
</Nav.Item>
</Nav>
</Container>
</Navbar>
<Container>
<Outlet />
</Container>
</>
)
}
Expand Down
19 changes: 19 additions & 0 deletions packages/apps/client/src/BackendPlayground/BackendPlayground.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React, { useContext } from 'react'
import { TestInterface } from '../TestInterface'
import { TestPlaylists } from '../TestPlaylists'
import { APIConnectionContext } from '../api/ApiConnectionContext'

export function BackendPlayground(): React.JSX.Element {
const api = useContext(APIConnectionContext)

return (
<>
<div>
<TestInterface api={api} />
</div>
<div>
<TestPlaylists api={api} />
</div>
</>
)
}
4 changes: 3 additions & 1 deletion packages/apps/client/src/CurrentRundown/CurrentRundown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ const CurrentRundown = observer((): React.JSX.Element => {
<>
<h1>{openRundown.name}</h1>
<p>
<Button onClick={onClose}>Close</Button>
<Button variant="secondary" onClick={onClose}>
Close
</Button>
</p>
<ul>
{openRundown.segmentsInOrder.map((segment) => (
Expand Down
15 changes: 15 additions & 0 deletions packages/apps/client/src/MobXPlayground/MobXPlayground.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { CurrentRundown } from '../CurrentRundown/CurrentRundown'
import { RundownList } from '../RundownList/RundownList'

export function MobXPlayground(): React.JSX.Element {
return (
<>
<div>
<RundownList />
</div>
<div>
<CurrentRundown />
</div>
</>
)
}
39 changes: 39 additions & 0 deletions packages/apps/client/src/ScriptEditor/Editor.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React, { useEffect, useRef } from 'react'
import { schema } from 'prosemirror-schema-basic'
import { undo, redo, history } from 'prosemirror-history'
import { keymap } from 'prosemirror-keymap'
import { EditorState } from 'prosemirror-state'
import { EditorView } from 'prosemirror-view'
import { baseKeymap } from 'prosemirror-commands'

export function Editor({
initialValue,
}: {
initialValue?: string
onChange?: (e: OnChangeEvent) => void
}): React.JSX.Element {
const containerEl = useRef<HTMLDivElement>(null)
const editorView = useRef<EditorView>()
const editorState = useRef<EditorState>()

void initialValue

useEffect(() => {
if (!containerEl.current) return

const state = EditorState.create({ schema })
const view = new EditorView(containerEl.current, {
state,
plugins: [history(), keymap({ 'Mod-z': undo, 'Mod-y': redo }), keymap(baseKeymap)],
})

editorView.current = view
editorState.current = state
}, [])

return <div ref={containerEl}></div>
}

type OnChangeEvent = {
value: string
}
10 changes: 10 additions & 0 deletions packages/apps/client/src/ScriptEditor/ScriptEditor.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from 'react'
import { Editor } from './Editor'

export function ScriptEditor(): React.JSX.Element {
return (
<>
<Editor />
</>
)
}
38 changes: 38 additions & 0 deletions packages/apps/client/src/api/ApiConnectionContext.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react'
import { APIConnection } from './ApiConnection'
import { assertType } from '@sofie-prompter-editor/shared-lib'
import { RundownPlaylist, RundownPlaylistId } from '@sofie-prompter-editor/shared-model'

const api = new APIConnection()
api.on('connected', () => console.log('connected'))
api.on('disconnected', () => console.log('disconnected'))

api.playlist.on('tmpPong', (payload) => {
assertType<string>(payload)
console.log(`Got a tmpPong message: "${payload}"`)
})
api.playlist.on('created', (payload) => {
assertType<RundownPlaylist>(payload)
console.log(`playlist created: "${JSON.stringify(payload)}"`)
})
api.playlist.on('patched', (payload) => {
assertType<Partial<RundownPlaylist>>(payload)
console.log(`playlist patched: "${JSON.stringify(payload)}"`)
})
api.playlist.on('updated', (payload) => {
assertType<RundownPlaylist>(payload)
console.log(`playlist updated: "${JSON.stringify(payload)}"`)
})
api.playlist.on('removed', (id) => {
assertType<RundownPlaylistId>(id)
console.log(`playlist removed: "${id}"`)
})
api.example.on('pongGeneric', (payload) => {
assertType<string>(payload)
console.log(`Got a pongGeneric message: "${payload}"`)
})
api.example.on('pongCategory', (message) => {
console.log(`Got a pongCategory "${message.category}" message: "${message.payload}"`)
})

export const APIConnectionContext = React.createContext<APIConnection>(api)
17 changes: 16 additions & 1 deletion packages/apps/client/src/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,29 @@
$primary: #1769ff;
$dark: #252627;

$font-sans-serif: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
$font-family-sans-serif: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
$font-size-base: 0.875rem;

$link-color: $primary;

$border-radius: 3px;

$btn-padding-x: 0.8em;
$btn-padding-y: 0.4em;
$btn-font-weight: 700;

$theme-colors: (
'primary': $primary,
'dark': $dark,
);

@import 'bootstrap/scss/bootstrap';

.btn {
letter-spacing: 0.2px;
}

:root {
-webkit-font-smoothing: antialiased;
}
62 changes: 28 additions & 34 deletions packages/apps/client/src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,38 @@ import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.scss'
import { APIConnection } from './api/ApiConnection.ts'
import { assertType } from '@sofie-prompter-editor/shared-lib'
import { RundownPlaylist, RundownPlaylistId } from '@sofie-prompter-editor/shared-model'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import { MobXPlayground } from './MobXPlayground/MobXPlayground.tsx'
import { BackendPlayground } from './BackendPlayground/BackendPlayground.tsx'
import { ScriptEditor } from './ScriptEditor/ScriptEditor.tsx'
import { HelmetProvider } from 'react-helmet-async'

const api = new APIConnection()
api.on('connected', () => console.log('connected'))
api.on('disconnected', () => console.log('disconnected'))
const router = createBrowserRouter([
{
path: '/',
element: <App />,
children: [
{
path: 'store',
element: <MobXPlayground />,
},
{
path: 'backend',
element: <BackendPlayground />,
},

api.playlist.on('tmpPong', (payload) => {
assertType<string>(payload)
console.log(`Got a tmpPong message: "${payload}"`)
})
api.playlist.on('created', (payload) => {
assertType<RundownPlaylist>(payload)
console.log(`playlist created: "${JSON.stringify(payload)}"`)
})
api.playlist.on('patched', (payload) => {
assertType<Partial<RundownPlaylist>>(payload)
console.log(`playlist patched: "${JSON.stringify(payload)}"`)
})
api.playlist.on('updated', (payload) => {
assertType<RundownPlaylist>(payload)
console.log(`playlist updated: "${JSON.stringify(payload)}"`)
})
api.playlist.on('removed', (id) => {
assertType<RundownPlaylistId>(id)
console.log(`playlist removed: "${id}"`)
})
api.example.on('pongGeneric', (payload) => {
assertType<string>(payload)
console.log(`Got a pongGeneric message: "${payload}"`)
})
api.example.on('pongCategory', (message) => {
console.log(`Got a pongCategory "${message.category}" message: "${message.payload}"`)
})
{
path: 'editor',
element: <ScriptEditor />,
},
],
},
])

ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App api={api} />
<HelmetProvider>
<RouterProvider router={router} />
</HelmetProvider>
</React.StrictMode>
)
Loading

0 comments on commit 8b4f745

Please sign in to comment.