Skip to content

Commit 87ea132

Browse files
chris-laplantechris-laplante
committed
WIP
1 parent b3017d6 commit 87ea132

File tree

8 files changed

+465
-514
lines changed

8 files changed

+465
-514
lines changed

‎package-lock.json

Lines changed: 219 additions & 420 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
"@babel/preset-env": "^7.24.5",
1616
"@babel/preset-react": "^7.24.1",
1717
"@babel/preset-typescript": "^7.24.1",
18-
"@mantine/core": "^7.9.1",
1918
"@pyodide/webpack-plugin": "^1.3.2",
2019
"@shopify/react-web-worker": "^5.0.17",
2120
"@types/jquery": "^3.5.30",
@@ -48,7 +47,6 @@
4847
"mini-css-extract-plugin": "^2.9.0",
4948
"postcss": "^8.4.38",
5049
"postcss-loader": "^7.3.4",
51-
"postcss-preset-mantine": "^1.15.0",
5250
"postcss-simple-vars": "^7.0.1",
5351
"react": "^18.3.1",
5452
"react-ace": "^11.0.1",
@@ -71,21 +69,23 @@
7169
"webpack-virtual-modules": "^0.6.1"
7270
},
7371
"dependencies": {
74-
"@mantine/core": "^7.9.1",
75-
"@mantine/hooks": "^7.9.1",
7672
"@types/react": "^18.2.77",
7773
"@types/react-dom": "^18.2.25",
7874
"ace-builds": "^1.33.2",
7975
"axios": "^1.6.8",
76+
"bootstrap": "^5.3.3",
8077
"classnames": "^2.5.1",
78+
"flexlayout-react": "^0.7.15",
8179
"immer": "^10.1.1",
8280
"jquery": "^3.7.1",
8381
"jquery.terminal": "^2.41.2",
8482
"pyodide": "^0.25.1",
8583
"react": "^18.2.0",
8684
"react-ace": "^11.0.1",
85+
"react-bootstrap": "^2.10.2",
8786
"react-dom": "^18.2.0",
8887
"react-error-boundary": "^4.0.13",
88+
"sass-rem": "^4.0.0",
8989
"swr": "^2.2.5",
9090
"use-immer": "^0.9.0"
9191
}

‎postcss.config.cjs

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/main/components/App.tsx

Lines changed: 108 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,112 @@
11
import React, {useEffect, useMemo, useRef} from "react";
22

3-
import {AppShell, Burger, createTheme, Group, MantineColorsTuple, MantineProvider} from '@mantine/core';
4-
import {useDisclosure} from "@mantine/hooks";
53
import {PlaygroundTerminal} from "./PlaygroundTerminal";
64
import AceEditor from "react-ace";
75
import BitBakeMode from "../BitBakeMode";
86
import {createWorkerFactory, useWorker} from "@shopify/react-web-worker";
7+
import {Layout, Model} from 'flexlayout-react';
8+
import 'flexlayout-react/style/light.css';
9+
import {Button, ButtonGroup, Container, Dropdown, DropdownButton, Navbar} from "react-bootstrap";
10+
import ButtonToolbar from 'react-bootstrap/ButtonToolbar'
11+
import {IJsonModel} from "flexlayout-react/src/model/IJsonModel";
912

10-
const myColor: MantineColorsTuple = [
11-
'#e4f8ff',
12-
'#d3eafc',
13-
'#a9d1f1',
14-
'#7db7e6',
15-
'#58a1dd',
16-
'#3f94d8',
17-
'#2f8dd6',
18-
'#1e7abe',
19-
'#0c6cac',
20-
'#005e99'
21-
];
22-
23-
const theme = createTheme({
24-
colors: {
25-
myColor,
13+
14+
const json: IJsonModel = {
15+
global: {},
16+
borders: [],
17+
layout: {
18+
type: "row",
19+
weight: 100,
20+
children: [
21+
{
22+
type: "tabset",
23+
weight: 50,
24+
children: [
25+
{
26+
type: "tab",
27+
name: "Editor",
28+
component: "test",
29+
}
30+
]
31+
},
32+
{
33+
type: "tabset",
34+
weight: 50,
35+
children: [
36+
{
37+
type: "tab",
38+
name: "Terminal",
39+
component: "button",
40+
}
41+
]
42+
},
43+
]
2644
}
27-
});
45+
};
2846

29-
const createWorker = createWorkerFactory(() => import('../../pyodide-worker/worker'));
47+
const model = Model.fromJson(json);
3048

31-
const wat = (str: string) => {
32-
console.error(str);
33-
}
34-
35-
export const App: React.FC = () => {
36-
const [opened, {toggle}] = useDisclosure();
49+
const EditorWrapper = () => {
3750

3851
const editor = useRef(null);
3952

4053
useEffect(() => {
4154
editor.current.editor.getSession().setMode(new BitBakeMode());
4255
}, []);
4356

57+
return (
58+
<div>
59+
{/*<ButtonToolbar>*/}
60+
{/* <ButtonGroup>*/}
61+
{/* <Button>1</Button>*/}
62+
{/* <Button>2</Button>*/}
63+
64+
{/* <DropdownButton as={ButtonGroup} title="Dropdown" id="bg-nested-dropdown">*/}
65+
{/* <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>*/}
66+
{/* <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>*/}
67+
{/* </DropdownButton>*/}
68+
{/* </ButtonGroup>*/}
69+
{/*</ButtonToolbar>*/}
70+
<AceEditor
71+
ref={editor}
72+
mode="text"
73+
theme="github"
74+
editorProps={{$blockScrolling: true}}
75+
/>
76+
</div>
77+
);
78+
}
79+
80+
function Wat2() {
81+
82+
const factory = (node) => {
83+
const component = node.getComponent();
84+
85+
if (component === "button") {
86+
return <PlaygroundTerminal/>;
87+
} else if (component === "test") {
88+
return <EditorWrapper/>
89+
}
90+
}
91+
92+
return (
93+
<div style={{position: "relative", height: "calc(100vh - 56px)"}}>
94+
<Layout
95+
model={model}
96+
factory={factory}
97+
/>
98+
</div>
99+
);
100+
}
101+
102+
103+
const createWorker = createWorkerFactory(() => import('../../pyodide-worker/worker'));
104+
105+
const wat = (str: string) => {
106+
console.error(str);
107+
}
108+
109+
export const App: React.FC = () => {
44110
const worker = useWorker(createWorker);
45111

46112
useEffect(() => {
@@ -51,42 +117,21 @@ export const App: React.FC = () => {
51117
}, [worker])
52118

53119
return (
54-
<MantineProvider theme={theme}>
55-
<AppShell
56-
header={{height: 60}}
57-
navbar={{
58-
width: 300,
59-
breakpoint: 'sm',
60-
collapsed: {mobile: !opened},
61-
}}
62-
padding="md"
63-
>
64-
<AppShell.Header>
65-
<Group h="100%" px="md">
66-
<Burger
67-
68-
opened={opened}
69-
onClick={toggle}
70-
hiddenFrom="sm"
71-
size="sm"
72-
/>
73-
OK
74-
</Group>
75-
</AppShell.Header>
76-
77-
<AppShell.Navbar p="md">Navbar</AppShell.Navbar>
78-
79-
<AppShell.Main>
80-
{/*<PlaygroundTerminal/>*/}
81-
<AceEditor
82-
ref={editor}
83-
mode="text"
84-
theme="github"
85-
editorProps={{ $blockScrolling: true }}
86-
/>,
87-
</AppShell.Main>
88-
</AppShell>
89-
90-
</MantineProvider>
120+
<div>
121+
<Navbar className="bg-body-tertiary">
122+
<Container fluid>
123+
<Navbar.Brand href="#home" className="align-items-center d-flex">
124+
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
125+
className="bi bi-play-fill" viewBox="0 0 16 16">
126+
<path
127+
d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393"/>
128+
</svg>
129+
{' '}
130+
BB Datastore Playground
131+
</Navbar.Brand>
132+
</Container>
133+
</Navbar>
134+
<Wat2/>
135+
</div>
91136
);
92137
};

‎src/main/components/Header.tsx

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React, { useState } from 'react';
2+
import { Container, Anchor, Group, Burger, Box } from '@mantine/core';
3+
import { useDisclosure } from '@mantine/hooks';
4+
import classes from '../../styles/DoubleHeader.module.scss';
5+
import {AppShell} from '@mantine/core';
6+
7+
const userLinks = [
8+
{ link: '#', label: 'Privacy & Security' },
9+
{ link: '#', label: 'Account settings' },
10+
{ link: '#', label: 'Support options' },
11+
];
12+
13+
const mainLinks = [
14+
{ link: '#', label: 'Book a demo' },
15+
{ link: '#', label: 'Documentation' },
16+
{ link: '#', label: 'Community' },
17+
{ link: '#', label: 'Academy' },
18+
{ link: '#', label: 'Forums' },
19+
];
20+
21+
export function DoubleHeader() {
22+
const [opened, { toggle }] = useDisclosure(false);
23+
const [active, setActive] = useState(0);
24+
25+
const mainItems = mainLinks.map((item, index) => (
26+
<Anchor<'a'>
27+
href={item.link}
28+
key={item.label}
29+
className={classes.mainLink}
30+
data-active={index === active || undefined}
31+
onClick={(event) => {
32+
event.preventDefault();
33+
setActive(index);
34+
}}
35+
>
36+
{item.label}
37+
</Anchor>
38+
));
39+
40+
const secondaryItems = userLinks.map((item) => (
41+
<Anchor
42+
href={item.link}
43+
key={item.label}
44+
onClick={(event) => event.preventDefault()}
45+
className={classes.secondaryLink}
46+
>
47+
{item.label}
48+
</Anchor>
49+
));
50+
51+
return (<AppShell.Header className={classes.header}>
52+
<Container className={classes.inner}>
53+
OK
54+
<Box className={classes.links} visibleFrom="sm">
55+
<Group justify="flex-end">{secondaryItems}</Group>
56+
<Group gap={0} justify="flex-end" className={classes.mainLinks}>
57+
{mainItems}
58+
</Group>
59+
</Box>
60+
<Burger
61+
opened={opened}
62+
onClick={toggle}
63+
className={classes.burger}
64+
size="sm"
65+
hiddenFrom="sm"
66+
/>
67+
</Container>
68+
</AppShell.Header>
69+
);
70+
}

‎src/main/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import '@mantine/core/styles.css';
1+
import 'bootstrap/dist/css/bootstrap.min.css';
22

33
import {createRoot} from "react-dom/client";
44
import {App} from "./components/App";

‎src/styles/DoubleHeader.module.scss

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@use "~sass-rem" as rem-convert;
2+
3+
.header {
4+
height: rem-convert.convert(84px);
5+
margin-bottom: rem-convert.convert(120px);
6+
background-color: var(--mantine-color-body);
7+
border-bottom: rem-convert.convert(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
8+
}
9+
10+
.inner {
11+
height: rem-convert.convert(84px);
12+
display: flex;
13+
align-items: center;
14+
justify-content: space-between;
15+
}
16+
17+
.links {
18+
padding-top: var(--mantine-spacing-lg);
19+
height: rem-convert.convert(84px);
20+
display: flex;
21+
flex-direction: column;
22+
justify-content: space-between;
23+
}
24+
25+
.mainLinks {
26+
margin-right: calc(var(--mantine-spacing-sm) * -1);
27+
}
28+
29+
.mainLink {
30+
text-transform: uppercase;
31+
font-size: var(--mantine-font-size-xs);
32+
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-1));
33+
padding: rem-convert.convert(7px) var(--mantine-spacing-sm);
34+
font-weight: 700;
35+
border-bottom: rem-convert.convert(2px) solid transparent;
36+
transition:
37+
border-color 100ms ease,
38+
color 100ms ease;
39+
40+
@mixin hover {
41+
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
42+
text-decoration: none;
43+
}
44+
45+
&[data-active] {
46+
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
47+
border-bottom-color: var(--mantine-color-blue-6);
48+
}
49+
}
50+
51+
.secondaryLink {
52+
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-1));
53+
font-size: var(--mantine-font-size-xs);
54+
text-transform: uppercase;
55+
transition: color 100ms ease;
56+
57+
@mixin hover {
58+
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
59+
text-decoration: none;
60+
}
61+
}

0 commit comments

Comments
 (0)