Skip to content

Commit 10d755e

Browse files
captaaintcaptaaint
authored
refactor: xmlui-playground - design update (#2318)
1 parent 603ecef commit 10d755e

18 files changed

+147
-644
lines changed

‎.changeset/fluffy-ways-smell.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"xmlui-playground": patch
3+
"xmlui": patch
4+
---
5+
6+
refactor: xmlui-playground - design update

‎packages/xmlui-playground/src/playground/CodeSelector.module.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@use "xmlui/themes.scss" as themes;
2+
3+
.sectionTitle {
4+
width: 100%;
5+
padding-left: themes.$space-3;
6+
padding-right: themes.$space-3;
7+
font-size: themes.$space-3_5;
8+
}

‎packages/xmlui-playground/src/playground/CodeSelector.tsx‎

Lines changed: 53 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,18 @@
1-
import { forwardRef, useMemo, useState } from "react";
2-
import * as RadixSelect from "@radix-ui/react-select";
3-
import selectStyles from "./Select.module.scss";
1+
import { useMemo } from "react";
42
import { usePlayground } from "../hooks/usePlayground";
53
import { contentChanged } from "../state/store";
6-
import { useTheme, Button, type CompoundComponentDef, Icon, type ThemeDefinition } from "xmlui";
7-
8-
export const SelectItem = forwardRef(({ children, className, ...props }: any, forwardedRef) => {
9-
return (
10-
<RadixSelect.Item className={selectStyles.RadixMenuItem} {...props} ref={forwardedRef}>
11-
<RadixSelect.ItemText>{children}</RadixSelect.ItemText>
12-
</RadixSelect.Item>
13-
);
14-
});
15-
16-
SelectItem.displayName = "SelectItem";
4+
import {
5+
type CompoundComponentDef,
6+
type ThemeDefinition,
7+
DropdownMenu,
8+
Icon,
9+
MenuItem,
10+
Text,
11+
} from "xmlui";
12+
import styles from "./CodeSelector.module.scss";
1713

1814
export const CodeSelector = () => {
1915
const { appDescription, options, dispatch } = usePlayground();
20-
const [open, setOpen] = useState(false);
21-
const { root } = useTheme();
2216

2317
const selectedValue = useMemo(() => {
2418
let content = "";
@@ -42,60 +36,48 @@ export const CodeSelector = () => {
4236
}, [appDescription.components, appDescription.config?.themes, options.content]);
4337

4438
return (
45-
<RadixSelect.Root
46-
open={open}
47-
onOpenChange={(open) => setOpen(open)}
48-
value={options.content}
49-
onValueChange={(value) => dispatch(contentChanged(value))}
50-
>
51-
<RadixSelect.Trigger aria-label="component">
52-
<Button themeColor="primary" variant="ghost">
53-
<RadixSelect.Value>{selectedValue}</RadixSelect.Value>
54-
<RadixSelect.Icon className={selectStyles.SelectIcon}>
55-
{open ? <Icon name="chevronup" /> : <Icon name="chevrondown" />}
56-
</RadixSelect.Icon>
57-
</Button>
58-
</RadixSelect.Trigger>
59-
<RadixSelect.Portal container={root}>
60-
<RadixSelect.Content
61-
className={selectStyles.RadixMenuContent}
62-
side="bottom"
63-
align="start"
64-
position="popper"
65-
>
66-
<RadixSelect.Viewport>
67-
<RadixSelect.Group>
68-
<SelectItem value="app" key="app">
69-
Main.xmlui
70-
</SelectItem>
71-
</RadixSelect.Group>
72-
{appDescription.config?.themes?.length > 0 && (
73-
<RadixSelect.Group>
74-
<RadixSelect.Label className={selectStyles.SelectLabel}>Themes</RadixSelect.Label>
75-
{appDescription.config?.themes?.map((theme: ThemeDefinition, index: number) => (
76-
<SelectItem value={theme.id} key={index}>
77-
{`${theme.id}.json`}
78-
</SelectItem>
79-
))}
80-
</RadixSelect.Group>
81-
)}
82-
{appDescription.components?.length > 0 && (
83-
<RadixSelect.Group>
84-
<RadixSelect.Label className={selectStyles.SelectLabel}>
85-
Components
86-
</RadixSelect.Label>
87-
{appDescription.components?.map(
88-
(component: CompoundComponentDef, index: number) => (
89-
<SelectItem value={component.name} key={index}>
90-
{`${component.name}.xmlui`}
91-
</SelectItem>
92-
),
93-
)}
94-
</RadixSelect.Group>
95-
)}
96-
</RadixSelect.Viewport>
97-
</RadixSelect.Content>
98-
</RadixSelect.Portal>
99-
</RadixSelect.Root>
39+
<DropdownMenu label={selectedValue}>
40+
<MenuItem
41+
iconPosition="end"
42+
icon={"app" === options.content ? <Icon name="checkmark" /> : undefined}
43+
key={"app"}
44+
label={"Main.xmlui"}
45+
onClick={() => dispatch(contentChanged("app"))}
46+
/>
47+
48+
{appDescription.config?.themes?.length > 0 && (
49+
<>
50+
<Text className={styles.sectionTitle} variant="strong">
51+
Themes
52+
</Text>
53+
{appDescription.config?.themes?.map((theme: ThemeDefinition, index: number) => (
54+
<MenuItem
55+
iconPosition="end"
56+
icon={theme.id === options.content ? <Icon name="checkmark" /> : undefined}
57+
key={index}
58+
label={`${theme.id}.json`}
59+
onClick={() => dispatch(contentChanged(theme.id))}
60+
/>
61+
))}
62+
</>
63+
)}
64+
65+
{appDescription.components?.length > 0 && (
66+
<>
67+
<Text className={styles.sectionTitle} variant="strong">
68+
Components
69+
</Text>
70+
{appDescription.components?.map((component: CompoundComponentDef, index: number) => (
71+
<MenuItem
72+
iconPosition="end"
73+
icon={component.name === options.content ? <Icon name="checkmark" /> : undefined}
74+
key={index}
75+
label={`${component.name}.xmlui`}
76+
onClick={() => dispatch(contentChanged(component.name))}
77+
/>
78+
))}
79+
</>
80+
)}
81+
</DropdownMenu>
10082
);
10183
};

‎packages/xmlui-playground/src/playground/Editor.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { editorStatusChanged, textChanged } from "../state/store";
22
import { startTransition, useCallback, useEffect, useState } from "react";
33
import { usePlayground } from "../hooks/usePlayground";
44
import { Editor as XMLUIEditor } from "xmlui-devtools";
5+
import { overflows } from "xmlui/testing";
56

67
export const Editor = () => {
78
const { text, dispatch, options } = usePlayground();

‎packages/xmlui-playground/src/playground/Header.module.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
gap: .2rem;
2424
}
2525

26-
.button {
27-
padding: 0.5rem 1rem;
26+
.separator {
27+
height: 20px;
28+
min-height: auto;
2829
}

‎packages/xmlui-playground/src/playground/Header.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,15 @@ import classnames from "classnames";
44
import { RxOpenInNewWindow, RxDownload, RxShare2 } from "react-icons/rx";
55
import { LiaUndoAltSolid } from "react-icons/lia";
66
import { usePlayground } from "../hooks/usePlayground";
7-
import { resetApp } from "../state/store";
7+
import { resetApp, toneChanged } from "../state/store";
88
import { handleDownloadZip } from "../utils/helpers";
99
import { createQueryString } from "./utils";
1010
import { Box } from "./Box";
11-
import { Tooltip } from "./Tooltip";
1211
import ConfirmationDialog from "./ConfirmationDialog";
1312
import { ThemeSwitcher } from "./ThemeSwitcher";
1413
import { CodeSelector } from "./CodeSelector";
15-
import { Button, Text, Logo } from "xmlui";
16-
import { ToneSwitcher } from "./ToneSwitcher";
14+
import { Button, Text, Logo, Tooltip } from "xmlui";
15+
import { ToneSwitch, ContentSeparator } from "xmlui";
1716
import { useToast } from "../hooks/useToast";
1817

1918
export const Header = ({ standalone = false }: { standalone?: boolean }) => {
@@ -84,27 +83,18 @@ export const Header = ({ standalone = false }: { standalone?: boolean }) => {
8483
{!options.previewMode && standalone && <CodeSelector />}
8584
</div>
8685
<Text>{appDescription.config?.name}</Text>
87-
<div style={{ display: "flex", alignItems: "center" }}>
86+
<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
8887
{standalone && (
8988
<>
90-
{!options.fixedTheme && (
91-
<Tooltip label="Change tone">
92-
<ToneSwitcher />
93-
</Tooltip>
94-
)}
9589
{!options.fixedTheme &&
9690
appDescription.availableThemes &&
97-
appDescription.availableThemes.length > 1 && (
98-
<Tooltip label="Change theme">
99-
<ThemeSwitcher />
100-
</Tooltip>
101-
)}
91+
appDescription.availableThemes.length > 1 && <ThemeSwitcher />}
10292
</>
10393
)}
10494
{!options.previewMode && show && (
10595
<>
10696
{!standalone && (
107-
<Tooltip label="View and edit in new full-width window">
97+
<Tooltip text="View and edit in new full-width window">
10898
<Button variant="ghost" onClick={() => openStandaloneApp(false)}>
10999
<RxOpenInNewWindow />
110100
</Button>
@@ -122,7 +112,7 @@ export const Header = ({ standalone = false }: { standalone?: boolean }) => {
122112
confirmText="Confirm"
123113
cancelText="Cancel"
124114
/>
125-
<Tooltip label="Reset the app">
115+
<Tooltip text="Reset the app">
126116
<Button
127117
variant="ghost"
128118
onClick={() => {
@@ -140,21 +130,31 @@ export const Header = ({ standalone = false }: { standalone?: boolean }) => {
140130
)}
141131
{standalone && (
142132
<>
143-
<Tooltip label="Share this app">
133+
<ContentSeparator className={styles.separator} orientation="vertical" size={1} />
134+
135+
<Tooltip text="Share this app">
144136
<Button variant="ghost" onClick={() => share()}>
145137
<RxShare2 />
146138
</Button>
147139
</Tooltip>
148-
<Tooltip label="Preview in fullscreen">
140+
<Tooltip text="Preview in fullscreen">
149141
<Button variant="ghost" onClick={() => openStandaloneApp()}>
150142
<RxOpenInNewWindow height={24} width={24} />
151143
</Button>
152144
</Tooltip>
153-
<Tooltip label="Download app">
145+
<Tooltip text="Download app">
154146
<Button variant="ghost" onClick={() => download()}>
155147
<RxDownload height={24} width={24} />
156148
</Button>
157149
</Tooltip>
150+
151+
<ContentSeparator className={styles.separator} orientation="vertical" size={1} />
152+
153+
{!options.fixedTheme && (
154+
<Tooltip text="Change tone">
155+
<ToneSwitch onChange={(tone) => dispatch(toneChanged(tone))} />
156+
</Tooltip>
157+
)}
158158
</>
159159
)}
160160
</div>

‎packages/xmlui-playground/src/playground/Preview.module.scss‎

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

‎packages/xmlui-playground/src/playground/Preview.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export function Preview() {
1212

1313
return (
1414
<NestedApp
15+
withSplashScreen={true}
1516
app={appDescription.app}
1617
activeTone={options.activeTone}
1718
activeTheme={options.activeTheme}

0 commit comments

Comments
 (0)