jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: add ui package and custom theme colors

Browse Source
This commit is contained in:
Meier Lukas
2023-12-08 23:47:55 +01:00
parent 9ea96899b1
commit f6094c6ae2
12 changed files with 127 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/nextjs/package.json
View File

@@ -16,6 +16,7 @@
"@alparr/api": "workspace:^0.1.0", "@alparr/api": "workspace:^0.1.0",
"@alparr/auth": "workspace:^0.1.0", "@alparr/auth": "workspace:^0.1.0",
"@alparr/db": "workspace:^0.1.0", "@alparr/db": "workspace:^0.1.0",
"@alparr/ui": "workspace:^",
"@mantine/core": "^7.3.1", "@mantine/core": "^7.3.1",
"@mantine/dates": "^7.3.1", "@mantine/dates": "^7.3.1",
"@mantine/form": "^7.3.1", "@mantine/form": "^7.3.1",

3
apps/nextjs/src/app/layout.tsx
View File

@@ -7,6 +7,7 @@ import '@mantine/notifications/styles.css';
import { MantineProvider, ColorSchemeScript } from '@mantine/core'; import { MantineProvider, ColorSchemeScript } from '@mantine/core';
import { headers } from "next/headers"; import { headers } from "next/headers";
import { uiConfiguration } from "@alparr/ui";
import { TRPCReactProvider } from "./providers"; import { TRPCReactProvider } from "./providers";
@@ -35,7 +36,7 @@ export default function Layout(props: { children: React.ReactNode }) {
</head> </head>
<body className={["font-sans", fontSans.variable].join(" ")}> <body className={["font-sans", fontSans.variable].join(" ")}>
<TRPCReactProvider headers={headers()}> <TRPCReactProvider headers={headers()}>
<MantineProvider>{props.children}</MantineProvider> <MantineProvider defaultColorScheme="dark" {...uiConfiguration}>{props.children}</MantineProvider>
</TRPCReactProvider> </TRPCReactProvider>
</body> </body>
</html> </html>

7
apps/nextjs/src/app/page.tsx
View File

@@ -1,7 +1,10 @@
import { Title } from "@mantine/core"; import { Button, Stack, Title } from "@mantine/core";
export default function HomePage() { export default function HomePage() {
return ( return (
<Title>Home</Title> <Stack>
<Title>Home</Title>
<Button>Test</Button>
</Stack>
); );
} }

1
packages/ui/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './src';

38
packages/ui/package.json Normal file
View File

@@ -0,0 +1,38 @@
{
"name": "@alparr/ui",
"private": true,
"version": "0.1.0",
"exports": {
".": "./index.ts"
},
"typesVersions": {
"*": {
"*": [
"src/*"
]
}
},
"license": "MIT",
"scripts": {
"clean": "rm -rf .turbo node_modules",
"lint": "eslint .",
"format": "prettier --check . --ignore-path ../../.gitignore",
"typecheck": "tsc --noEmit"
},
"devDependencies": {
"@alparr/eslint-config": "workspace:^0.2.0",
"@alparr/prettier-config": "workspace:^0.1.0",
"@alparr/tsconfig": "workspace:^0.1.0",
"eslint": "^8.53.0",
"typescript": "^5.3.3"
},
"eslintConfig": {
"extends": [
"@alparr/eslint-config/base"
]
},
"prettier": "@alparr/prettier-config",
"dependencies": {
"@mantine/core": "^7.3.1"
}
}

7
packages/ui/src/index.ts Normal file
View File

@@ -0,0 +1,7 @@
import type { MantineProviderProps } from "@mantine/core";
import { theme } from "./theme";
export const uiConfiguration = ({
theme,
}) satisfies MantineProviderProps;

11
packages/ui/src/theme.ts Normal file
View File

@@ -0,0 +1,11 @@
import { createTheme } from "@mantine/core";
import { primaryColor } from "./theme/colors/primary";
import { secondaryColor } from "./theme/colors/secondary";
export const theme = createTheme({
colors: {
primaryColor,
secondaryColor,
},
primaryColor: "primaryColor",
});

14
packages/ui/src/theme/colors/primary.ts Normal file
View File

@@ -0,0 +1,14 @@
import type { MantineColorsTuple } from "@mantine/core";
export const primaryColor: MantineColorsTuple = [
'#eafbf0',
'#ddefe3',
'#bedcc7',
'#9bc8aa',
'#7eb892',
'#6bad81',
'#60a878',
'#509265',
'#438359',
'#35724a'
];

14
packages/ui/src/theme/colors/secondary.ts Normal file
View File

@@ -0,0 +1,14 @@
import type { MantineColorsTuple } from "@mantine/core";
export const secondaryColor: MantineColorsTuple = [
'#e6f7ff',
'#d9e8f6',
'#b6cde6',
'#90b2d4',
'#6f9ac5',
'#5a8bbd',
'#4d84ba',
'#3d71a4',
'#326595',
'#205885'
];

8
packages/ui/tsconfig.json Normal file
View File

@@ -0,0 +1,8 @@
{
"extends": "@alparr/tsconfig/base.json",
"compilerOptions": {
"tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
},
"include": ["*.ts", "src"],
"exclude": ["node_modules"]
}

25
pnpm-lock.yaml generated
View File

@@ -66,6 +66,9 @@ importers:
'@alparr/db': '@alparr/db':
specifier: workspace:^0.1.0 specifier: workspace:^0.1.0
version: link:../../packages/db version: link:../../packages/db
'@alparr/ui':
specifier: workspace:^
version: link:../../packages/ui
'@mantine/core': '@mantine/core':
specifier: ^7.3.1 specifier: ^7.3.1
version: 7.3.1(@mantine/hooks@7.3.1)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0) version: 7.3.1(@mantine/hooks@7.3.1)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0)
@@ -299,6 +302,28 @@ importers:
specifier: ^5.3.3 specifier: ^5.3.3
version: 5.3.3 version: 5.3.3
packages/ui:
dependencies:
'@mantine/core':
specifier: ^7.3.1
version: 7.3.1(@mantine/hooks@7.3.1)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0)
devDependencies:
'@alparr/eslint-config':
specifier: workspace:^0.2.0
version: link:../../tooling/eslint
'@alparr/prettier-config':
specifier: workspace:^0.1.0
version: link:../../tooling/prettier
'@alparr/tsconfig':
specifier: workspace:^0.1.0
version: link:../../tooling/typescript
eslint:
specifier: ^8.53.0
version: 8.53.0
typescript:
specifier: ^5.3.3
version: 5.3.3
tooling/eslint: tooling/eslint:
dependencies: dependencies:
'@next/eslint-plugin-next': '@next/eslint-plugin-next':

2
tooling/prettier/index.mjs
View File

@@ -8,7 +8,7 @@ const config = {
"@ianvs/prettier-plugin-sort-imports" "@ianvs/prettier-plugin-sort-imports"
], ],
importOrder: [ importOrder: [
"^(react/(.*)$)|^(react$)|^(react-native(.*)$)", "^(react/(.*)$)|^(react$)$)",
"^(next/(.*)$)|^(next$)", "^(next/(.*)$)|^(next$)",
"<THIRD_PARTY_MODULES>", "<THIRD_PARTY_MODULES>",
"", "",