Skip to content

Commit 3045c4f

Browse files
aarolaarol
committed
update frontend dependencies
slightly improve the generate button UI
1 parent 3203663 commit 3045c4f

File tree

9 files changed

+816
-716
lines changed

9 files changed

+816
-716
lines changed

‎client/package.json‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,27 +10,28 @@
1010
"cypress": "concurrently \"vite\" \"cypress open\""
1111
},
1212
"dependencies": {
13-
"@mantine/code-highlight": "^7.14.3",
14-
"@mantine/core": "^7.14.3",
15-
"@mantine/form": "^7.14.3",
16-
"@mantine/hooks": "^7.14.3",
17-
"@tabler/icons-react": "^3.24.0",
13+
"@mantine/code-highlight": "^8.2.2",
14+
"@mantine/core": "^8.2.2",
15+
"@mantine/form": "^8.2.2",
16+
"@mantine/hooks": "^8.2.2",
17+
"@tabler/icons-react": "^3.34.1",
1818
"file-saver": "^2.0.5",
19+
"highlight.js": "^11.11.1",
1920
"jszip": "^3.10.1",
20-
"react": "^18.2.0",
21-
"react-dom": "^18.2.0"
21+
"react": "^19.1.1",
22+
"react-dom": "^19.1.1"
2223
},
2324
"devDependencies": {
24-
"@babel/core": "^7.26.0",
25+
"@babel/core": "^7.28.0",
2526
"@types/file-saver": "^2.0.7",
2627
"@types/node": "^20.12.2",
2728
"@types/react": "^18.2.74",
2829
"@types/react-dom": "^18.2.23",
29-
"@vitejs/plugin-react": "^4.3.4",
30-
"concurrently": "^9.1.0",
31-
"cypress": "^13.7.1",
30+
"@vitejs/plugin-react": "^4.7.0",
31+
"concurrently": "^9.2.0",
32+
"cypress": "^14.5.3",
3233
"prop-types": "^15.8.1",
33-
"typescript": "^5.4.3",
34-
"vite": "^6.0.3"
34+
"typescript": "^5.9.2",
35+
"vite": "^7.0.6"
3536
}
3637
}

‎client/pnpm-lock.yaml‎

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

‎client/pnpm-workspace.yaml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
onlyBuiltDependencies:
2+
- cypress
3+
- esbuild

‎client/src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ function App() {
150150
key={font.family} // to refresh config on font family change
151151
axes={fontAxes}
152152
font={font}
153-
submitColor={stylesheets.length !== 0 ? 'gray' : undefined}
153+
showGenerate={stylesheets.length === 0}
154154
onGenerate={onGenerate}
155155
onChange={resetOutput} />
156156

‎client/src/components/Configure.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,12 @@ function initialAxisState(axes: AxisRegistry[]): AxisState {
4242
type ConfigureProps = {
4343
font: FontFamily,
4444
axes: AxisRegistry[],
45-
submitColor: DefaultMantineColor | undefined,
45+
showGenerate: boolean,
4646
onGenerate: (fontFamily: string, axis: Axis[], subsets: string[], italic: boolean) => void,
4747
onChange: () => void,
4848
}
4949

50-
export function Configure({ onChange, font, axes, submitColor, onGenerate }: ConfigureProps) {
50+
export function Configure({ onChange, font, axes, showGenerate, onGenerate }: ConfigureProps) {
5151

5252
const [state, setState] = useState<AxisState>(initialAxisState(axes))
5353
const [mode, setMode] = useState<"simple" | "advanced">('simple')
@@ -221,10 +221,11 @@ export function Configure({ onChange, font, axes, submitColor, onGenerate }: Con
221221
</Chip.Group>
222222

223223
<Divider py="md" />
224-
<Button
225-
color={submitColor}
226-
disabled={subsets.length === 0}
227-
onClick={onSubmit} mb="md">Generate output</Button>
224+
{showGenerate ? (
225+
<Button
226+
disabled={subsets.length === 0}
227+
onClick={onSubmit} mb="md">Generate 🪄</Button>
228+
) : undefined}
228229
</>
229230
)
230231
}

‎client/src/components/Highlight.tsx‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,22 @@
1-
import { CodeHighlight } from "@mantine/code-highlight"
2-
import '@mantine/code-highlight/styles.css';
1+
import { CodeHighlight, CodeHighlightAdapterProvider, createHighlightJsAdapter } from '@mantine/code-highlight';
2+
import { useMantineColorScheme } from '@mantine/core';
3+
import hljs from 'highlight.js/lib/core';
4+
import cssLang from 'highlight.js/lib/languages/css';
5+
6+
hljs.registerLanguage('css', cssLang);
7+
8+
const highlightJsAdapter = createHighlightJsAdapter(hljs);
39
// Export Highlight as default to use code splitting
4-
export { CodeHighlight as default }
10+
const Highlight = ({ code }: { code: string }) => {
11+
const { colorScheme } = useMantineColorScheme();
12+
const themeClass = colorScheme === 'dark' ? 'hljs-dark' : 'hljs-light';
13+
return (
14+
<div className={themeClass}>
15+
<CodeHighlightAdapterProvider adapter={highlightJsAdapter} >
16+
<CodeHighlight language="css" key={code} my="sm" code={code} radius="md" copyLabel='Copy CSS' />
17+
</CodeHighlightAdapterProvider>
18+
</div>
19+
)
20+
}
21+
22+
export default Highlight

‎client/src/components/Output.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const renderStylesheets = (styles: Stylesheet[], url: string, fontName: string)
2121

2222
export const Output = ({ styles, fontName }: { styles: Stylesheet[], fontName: string }) => {
2323

24-
const [url, setUrl] = useState(`../${fontName}.woff2`)
24+
const [url, setUrl] = useState(`/${fontName}.woff2`)
2525

2626
const downloadFonts = async () => {
2727
downloadAllFiles(fontName, styles)
@@ -44,7 +44,7 @@ export const Output = ({ styles, fontName }: { styles: Stylesheet[], fontName: s
4444
</Group>
4545
<TextInput value={url} label="CSS import url" onChange={(e) => setUrl(e.target.value)} />
4646
<Suspense fallback={<Text>Loading...</Text>}>
47-
<Highlight my="sm" key={css} language="css" code={css} copyLabel='Copy CSS' />
47+
<Highlight code={css} />
4848
</Suspense>
4949
</>
5050
)

‎client/src/main.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1+
@import url('highlight.js/styles/stackoverflow-dark.min.css') screen and (prefers-color-scheme: dark);
2+
@import url('highlight.js/styles/stackoverflow-light.min.css') screen and (prefers-color-scheme: light);
3+
14
@font-face {
25
font-family: 'Inter';
36
font-style: normal;
47
font-weight: 100 900;
58
font-display: swap;
69
src:
7-
url('../Inter.woff2') format('woff2');
10+
url('/Inter.woff2') format('woff2');
811
}
912

1013
:root {
1114
color-scheme: light dark;
12-
}
15+
}

‎client/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"strict": true,
1212
"forceConsistentCasingInFileNames": true,
1313
"module": "ESNext",
14-
"moduleResolution": "Node",
14+
"moduleResolution": "bundler",
1515
"resolveJsonModule": true,
1616
"isolatedModules": true,
1717
"noEmit": true,

0 commit comments

Comments
 (0)