Skip to content

Commit 5aaf000

Browse files
author
Aleksander Katan
committed
Merge remote-tracking branch 'origin/main' into feat/root-configure-context
2 parents 2b7aa1d + f8b23cf commit 5aaf000

File tree

9 files changed

+118
-174
lines changed

9 files changed

+118
-174
lines changed

‎apps/typegpu-docs/src/components/ControlPanel.tsx‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import cs from 'classnames';
2-
import { useAtom, useAtomValue } from 'jotai';
3-
import { useSetAtom } from 'jotai';
2+
import { useAtom, useAtomValue, useSetAtom } from 'jotai';
43
import { useId, useState } from 'react';
5-
import { codeEditorShownAtom } from '../utils/examples/codeEditorShownAtom.ts';
64
import { runWithCatchAtom } from '../utils/examples/currentSnackbarAtom.ts';
75
import {
86
type ExampleControlParam,
97
exampleControlsAtom,
108
} from '../utils/examples/exampleControlAtom.ts';
11-
import { menuShownAtom } from '../utils/examples/menuShownAtom.ts';
9+
import {
10+
codeEditorShownAtom,
11+
menuShownAtom,
12+
} from '../utils/examples/exampleViewStateAtoms.ts';
1213
import { isGPUSupported } from '../utils/isGPUSupported.ts';
1314
import { Button } from './design/Button.tsx';
1415
import { ColorPicker } from './design/ColorPicker.tsx';
@@ -344,16 +345,14 @@ export function ControlPanel() {
344345
<hr className='my-0 box-border w-full border-tameplum-100 border-t' />
345346
</div>
346347

347-
{isGPUSupported
348-
? (
349-
<>
350-
<h2 className='m-0 font-medium text-xl'>Example controls</h2>
351-
<div className='grid grid-cols-2 items-center gap-4 overflow-auto p-1 pb-2'>
352-
{exampleControlParams.map((param) => paramToControlRow(param))}
353-
</div>
354-
</>
355-
)
356-
: null}
348+
{isGPUSupported && (
349+
<>
350+
<h2 className='m-0 font-medium text-xl'>Example controls</h2>
351+
<div className='grid grid-cols-2 items-center gap-4 overflow-auto p-1 pb-2'>
352+
{exampleControlParams.map(paramToControlRow)}
353+
</div>
354+
</>
355+
)}
357356
</div>
358357
);
359358
}

‎apps/typegpu-docs/src/components/ExampleLayout.tsx‎

Lines changed: 23 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,62 @@
1-
import cs from 'classnames';
2-
import { useAtom, useAtomValue } from 'jotai';
1+
import { useAtom, useSetAtom } from 'jotai';
32
import type { ReactNode } from 'react';
43
import { useId, useRef } from 'react';
54
import CrossSvg from '../assets/cross.svg';
65
import DiscordIconSvg from '../assets/discord-icon.svg';
76
import GithubIconSvg from '../assets/github-icon.svg';
87
import HamburgerSvg from '../assets/hamburger.svg';
9-
import { codeEditorShownMobileAtom } from '../utils/examples/codeEditorShownAtom.ts';
108
import {
9+
codeEditorShownAtom,
10+
experimentalExamplesShownAtom,
1111
menuShownAtom,
12-
menuShownMobileAtom,
13-
} from '../utils/examples/menuShownAtom.ts';
12+
} from '../utils/examples/exampleViewStateAtoms.ts';
1413
import { SearchableExampleList } from './SearchableExampleList.tsx';
1514
import { Button } from './design/Button.tsx';
1615
import { Toggle } from './design/Toggle.tsx';
17-
import { experimentalExamplesShownAtom } from '../utils/examples/showExperimentalExamplesAtom.ts';
16+
import { useHydrated } from '../utils/useHydrated.ts';
1817

1918
interface ExampleLayoutProps {
2019
children?: ReactNode | undefined;
2120
}
2221

2322
export function ExampleLayout(props: ExampleLayoutProps) {
24-
const menuShown = useAtomValue(menuShownAtom);
25-
const [menuShownMobile, setMenuShownMobile] = useAtom(menuShownMobileAtom);
26-
const [codeShownMobile, setCodeShownMobile] = useAtom(
27-
codeEditorShownMobileAtom,
28-
);
23+
const [menuShown, setMenuShown] = useAtom(menuShownAtom);
24+
const [codeShown, setCodeShown] = useAtom(codeEditorShownAtom);
25+
const hydrated = useHydrated();
2926

3027
return (
3128
<>
3229
<div className='absolute top-4 left-4 z-50 flex gap-2 text-sm md:hidden'>
33-
{menuShownMobile
34-
? null
35-
: (
36-
<Button onClick={() => setMenuShownMobile(true)}>
37-
<img src={HamburgerSvg.src} alt='menu' className='-m-2 h-6 w-6' />
38-
</Button>
39-
)}
30+
{!menuShown && (
31+
<Button onClick={() => setMenuShown(true)}>
32+
<img src={HamburgerSvg.src} alt='menu' className='-m-2 h-6 w-6' />
33+
</Button>
34+
)}
4035

41-
<Button
42-
onClick={() =>
43-
setCodeShownMobile((codeShownMobile) => !codeShownMobile)}
44-
>
45-
{codeShownMobile ? 'Preview' : 'Code'}
36+
<Button onClick={() => setCodeShown((prev) => !prev)}>
37+
{/* Applying the actual label only after the component has been hydrated */}
38+
{codeShown && hydrated ? 'Preview' : 'Code'}
4639
</Button>
4740
</div>
4841

4942
<div className='box-border flex h-dvh gap-4 bg-tameplum-50 p-4'>
50-
{menuShown || menuShownMobile ? <SideMenu /> : null}
43+
{menuShown && <SideMenu />}
5144
{props.children}
5245
</div>
5346
</>
5447
);
5548
}
5649

5750
function SideMenu() {
58-
const menuShown = useAtomValue(menuShownAtom);
59-
const [menuShownMobile, setMenuShownMobile] = useAtom(menuShownMobileAtom);
51+
const setMenuShown = useSetAtom(menuShownAtom);
6052
const [experimentalShowing, setExperimentalShowing] = useAtom(
6153
experimentalExamplesShownAtom,
6254
);
6355
const scrollRef = useRef<HTMLDivElement>(null);
6456
const experimentalExamplesToggleId = useId();
6557

6658
return (
67-
<aside
68-
className={cs(
69-
menuShown ? '' : 'md:hidden',
70-
menuShownMobile
71-
? 'absolute inset-0 z-50 w-full md:static'
72-
: 'hidden md:flex',
73-
'box-border flex flex-col bg-white md:w-75 md:rounded-2xl',
74-
)}
75-
>
59+
<aside className='absolute inset-0 z-50 box-border flex w-full flex-col bg-white md:static md:w-75 md:rounded-2xl'>
7660
<header className='p-5'>
7761
<div className='grid place-items-center'>
7862
<a
@@ -87,11 +71,9 @@ function SideMenu() {
8771
</a>
8872
</div>
8973
<div className='absolute top-5 right-5 md:hidden'>
90-
{menuShownMobile && (
91-
<Button onClick={() => setMenuShownMobile(false)}>
92-
<img src={CrossSvg.src} alt='Close menu' className='h-3 w-3' />
93-
</Button>
94-
)}
74+
<Button onClick={() => setMenuShown(false)}>
75+
<img src={CrossSvg.src} alt='Close menu' className='h-3 w-3' />
76+
</Button>
9577
</div>
9678
</header>
9779

@@ -115,7 +97,7 @@ function SideMenu() {
11597
</section>
11698

11799
<SearchableExampleList
118-
excludeTags={[experimentalShowing ? [] : ['experimental']].flat()}
100+
excludeTags={experimentalShowing ? [] : ['experimental']}
119101
scrollContainerRef={scrollRef}
120102
/>
121103
</div>

‎apps/typegpu-docs/src/components/ExampleLink.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useAtom, useSetAtom } from 'jotai';
33
import { RESET } from 'jotai/utils';
44
import type { MouseEvent, ReactNode } from 'react';
55
import { currentExampleAtom } from '../utils/examples/currentExampleAtom.ts';
6-
import { menuShownMobileAtom } from '../utils/examples/menuShownAtom.ts';
6+
import { menuShownAtom } from '../utils/examples/exampleViewStateAtoms.ts';
77
import useEvent from '../utils/useEvent.ts';
88
import { useHydrated } from '../utils/useHydrated.ts';
99

@@ -17,12 +17,14 @@ export function ExampleLink(props: Props) {
1717

1818
const hydrated = useHydrated();
1919
const [currentExample, setCurrentExample] = useAtom(currentExampleAtom);
20-
const setMenuShownMobile = useSetAtom(menuShownMobileAtom);
20+
const setMenuShown = useSetAtom(menuShownAtom);
2121

2222
const handleClick = useEvent((e: MouseEvent) => {
2323
e.preventDefault();
2424
setCurrentExample(exampleKey ?? RESET);
25-
setMenuShownMobile(false);
25+
if (window.matchMedia('(max-width: 767px)').matches) {
26+
setMenuShown(false);
27+
}
2628
});
2729

2830
const isCurrentExample = hydrated && currentExample === exampleKey;

‎apps/typegpu-docs/src/components/ExamplePage.tsx‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -40,32 +40,6 @@ function ExamplePage() {
4040
return <RedirectToFlagship />;
4141
}
4242

43-
// if (currentExample === PLAYGROUND_KEY) {
44-
// setCurrentExample(
45-
// `${PLAYGROUND_KEY}${localStorage.getItem(PLAYGROUND_KEY) ?? ''}`,
46-
// );
47-
// }
48-
49-
// if (currentExample.startsWith(PLAYGROUND_KEY)) {
50-
// return (
51-
// <ExampleView
52-
// key={PLAYGROUND_KEY}
53-
// example={{
54-
// key: PLAYGROUND_KEY,
55-
// code:
56-
// decompressFromEncodedURIComponent(
57-
// currentExample.slice(PLAYGROUND_KEY.length),
58-
// ) ?? '',
59-
// metadata: {
60-
// title: 'Playground',
61-
// category: '',
62-
// },
63-
// }}
64-
// isPlayground={true}
65-
// />
66-
// );
67-
// }
68-
6943
if (currentExample in examples) {
7044
return (
7145
<ExampleView

0 commit comments

Comments
 (0)