Skip to content

Commit

Permalink
ui: basic Mantine setup
Browse files Browse the repository at this point in the history
  • Loading branch information
@phildenhoff
phildenhoff committed Apr 25, 2024
1 parent 2ebbd34 commit f833680
Show file tree
Hide file tree
Showing 11 changed files with 294 additions and 149 deletions.
2 changes: 1 addition & 1 deletion .vscode/extensions.json
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
"recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer", "vunguyentuan.vscode-postcss"]
}
7 changes: 7 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,12 @@
"rust-analyzer.linkedProjects": [
"./src-tauri/Cargo.toml",
"./src-tauri/Cargo.toml"
],
"cssVariables.lookupFiles": [
"**/*.css",
"**/*.scss",
"**/*.sass",
"**/*.less",
"node_modules/@mantine/core/styles.css"
]
}
Binary file modified bun.lockb
View file
Binary file not shown.
7 changes: 6 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,10 @@
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"postcss": "^8.4.32",
"postcss": "^8.4.38",
"postcss-load-config": "^5.0.2",
"postcss-preset-mantine": "^1.13.0",
"postcss-simple-vars": "^7.0.1",
"prettier": "3.2.5",
"prettier-plugin-svelte": "3.2.1",
"storybook": "^8.0.0-rc.1",
Expand All @@ -72,6 +74,9 @@
},
"dependencies": {
"@crabnebula/tauri-plugin-drag": "^0.2.0",
"@mantine/core": "^7.7.0",
"@mantine/form": "^7.7.0",
"@mantine/hooks": "^7.7.0",
"@tauri-apps/api": "^1",
"bits-ui": "^0.14.0",
"clsx": "^2.1.0",
Expand Down
18 changes: 12 additions & 6 deletions postcss.config.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,18 @@ const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");

const config = {
plugins: [
//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
tailwindcss(),
//But others, like autoprefixer, need to run after,
autoprefixer,
],
plugins: {
'postcss-preset-mantine': {},
'postcss-simple-vars': {
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
},
},
};

module.exports = config;
310 changes: 266 additions & 44 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,52 +2,274 @@ import { useState } from "react";
import reactLogo from "./assets/react.svg";
import { invoke } from "@tauri-apps/api/tauri";
import "./App.css";
import {
createTheme,
MantineProvider,
PinInput,
Burger,
Group,
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { AppShell } from "@mantine/core";

const catppuccinShades = {
rosewater: [
"#bca8a5",
"#c8b4b0",
"#d5c0bd",
"#e1cdc9",
"#eed9d5",
"#fbe6e2",
"#fff3ee",
"#fffffb",
"#ffffff",
"#ffffff",
],
flamingo: [
"#b99696",
"#c5a2a2",
"#d2aeae",
"#debaba",
"#ebc6c6",
"#f8d3d3",
"#ffdfdf",
"#ffecec",
"#fff9f9",
"#ffffff",
],
pink: [
"#bc8caf",
"#c897bb",
"#d5a3c7",
"#e1afd4",
"#eebbe0",
"#fbc8ed",
"#ffd4fa",
"#ffe1ff",
"#ffedff",
"#fffaff",
],
mauve: [
"#9371be",
"#9f7dca",
"#ab88d7",
"#b894e3",
"#c4a0f0",
"#d1acfd",
"#deb8ff",
"#eac4ff",
"#f7d0ff",
"#ffddff",
],
red: [
"#b85674",
"#c5617f",
"#d26d8a",
"#df7996",
"#ec85a2",
"#f991ad",
"#ff9dba",
"#ffa9c6",
"#ffb5d2",
"#ffc2df",
],
maroon: [
"#b16b77",
"#be7683",
"#ca828e",
"#d78e9a",
"#e49aa6",
"#f1a6b2",
"#feb2be",
"#ffbeca",
"#ffcad6",
"#ffd7e3",
],
peach: [
"#be7e54",
"#cb895f",
"#d8956a",
"#e6a075",
"#f3ac81",
"#ffb98c",
"#ffc598",
"#ffd1a4",
"#ffdeb0",
"#ffeabc",
],
yellow: [
"#bfaa7a",
"#ccb685",
"#d8c291",
"#e5cf9d",
"#f2dba8",
"#ffe8b5",
"#fff5c1",
"#ffffcd",
"#ffffda",
"#ffffe6",
],
green: [
"#70ab6c",
"#7bb778",
"#87c383",
"#93d08f",
"#9fdc9b",
"#ace9a6",
"#b8f6b3",
"#c4ffbf",
"#d1ffcb",
"#deffd8",
],
teal: [
"#5daa9e",
"#69b6aa",
"#75c2b6",
"#81cfc2",
"#8ddbce",
"#9ae8db",
"#a6f5e7",
"#b3fff4",
"#bfffff",
"#ccffff",
],
sky: [
"#4fa4b3",
"#5cb0bf",
"#69bccb",
"#76c9d8",
"#82d5e4",
"#8fe2f1",
"#9beffe",
"#a8fbff",
"#b5ffff",
"#c2ffff",
],
sapphire: [
"#3691b4",
"#449cc0",
"#52a8cc",
"#60b4d9",
"#6dc0e5",
"#7acdf2",
"#87d9ff",
"#94e6ff",
"#a1f2ff",
"#aeffff",
],
blue: [
"#4f7fc1",
"#5c8acd",
"#6996da",
"#76a2e6",
"#82aef3",
"#8fbaff",
"#9cc6ff",
"#a8d2ff",
"#b5dfff",
"#c2ebff",
],
lavender: [
"#7d88c5",
"#8994d1",
"#95a0de",
"#a1abea",
"#adb7f7",
"#bac4ff",
"#c6d0ff",
"#d3dcff",
"#e0e9ff",
"#edf6ff",
],
} as const;

const theme = createTheme({
colors: {
...catppuccinShades,
},
});

function App() {
const [greetMsg, setGreetMsg] = useState("");
const [name, setName] = useState("");

async function greet() {
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
setGreetMsg(await invoke("greet", { name }));
}

return (
<div className="container">
<h1>Welcome to Tauri!</h1>

<div className="row">
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" className="logo vite" alt="Vite logo" />
</a>
<a href="https://tauri.app" target="_blank">
<img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
</a>
<a href="https://reactjs.org" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>

<p>Click on the Tauri, Vite, and React logos to learn more.</p>

<form
className="row"
onSubmit={(e) => {
e.preventDefault();
greet();
}}
>
<input
id="greet-input"
onChange={(e) => setName(e.currentTarget.value)}
placeholder="Enter a name..."
/>
<button type="submit">Greet</button>
</form>

<p>{greetMsg}</p>
</div>
);
const [greetMsg, setGreetMsg] = useState("");
const [name, setName] = useState("");
const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);

async function greet() {
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
setGreetMsg(await invoke("greet", { name }));
}

return (
<MantineProvider theme={theme}>
<AppShell
padding="md"
header={{ height: 60 }}
navbar={{
width: 300,
breakpoint: "sm",
collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
}}
>
<div className="container">
<AppShell.Header h={48}>
<Group h="100%" px="md">
<Burger
opened={mobileOpened}
onClick={toggleMobile}
hiddenFrom="sm"
size="sm"
/>
<Burger
opened={desktopOpened}
onClick={toggleDesktop}
visibleFrom="sm"
size="sm"
/>
</Group>
</AppShell.Header>

<AppShell.Navbar p="md">
<PinInput />
Navbar
</AppShell.Navbar>

<AppShell.Main>
<div className="row">
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" className="logo vite" alt="Vite logo" />
</a>
<a href="https://tauri.app" target="_blank">
<img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
</a>
<a href="https://reactjs.org" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>

<p>Click on the Tauri, Vite, and React logos to learn more.</p>

<form
className="row"
onSubmit={(e) => {
e.preventDefault();
greet();
}}
>
<input
id="greet-input"
onChange={(e) => setName(e.currentTarget.value)}
placeholder="Enter a name..."
/>
<button type="submit">Greet</button>
</form>

<p>{greetMsg}</p>
</AppShell.Main>
</div>
</AppShell>
</MantineProvider>
);
}

export default App;
13 changes: 0 additions & 13 deletions src/app.d.ts
View file

This file was deleted.

Loading

0 comments on commit f833680

Please sign in to comment.