diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json index f5a353a92..6aaf26005 100644 --- a/apps/nextjs/package.json +++ b/apps/nextjs/package.json @@ -16,6 +16,7 @@ "@alparr/api": "workspace:^0.1.0", "@alparr/auth": "workspace:^0.1.0", "@alparr/db": "workspace:^0.1.0", + "@alparr/ui": "workspace:^", "@mantine/core": "^7.3.1", "@mantine/dates": "^7.3.1", "@mantine/form": "^7.3.1", diff --git a/apps/nextjs/src/app/layout.tsx b/apps/nextjs/src/app/layout.tsx index 78929d038..4dda802ad 100644 --- a/apps/nextjs/src/app/layout.tsx +++ b/apps/nextjs/src/app/layout.tsx @@ -7,6 +7,7 @@ import '@mantine/notifications/styles.css'; import { MantineProvider, ColorSchemeScript } from '@mantine/core'; import { headers } from "next/headers"; +import { uiConfiguration } from "@alparr/ui"; import { TRPCReactProvider } from "./providers"; @@ -35,7 +36,7 @@ export default function Layout(props: { children: React.ReactNode }) { - {props.children} + {props.children} diff --git a/apps/nextjs/src/app/page.tsx b/apps/nextjs/src/app/page.tsx index 347cb9ad9..8af6b3e8a 100644 --- a/apps/nextjs/src/app/page.tsx +++ b/apps/nextjs/src/app/page.tsx @@ -1,7 +1,10 @@ -import { Title } from "@mantine/core"; +import { Button, Stack, Title } from "@mantine/core"; export default function HomePage() { return ( - Home + + Home + + ); } diff --git a/packages/ui/index.ts b/packages/ui/index.ts new file mode 100644 index 000000000..8879d7a13 --- /dev/null +++ b/packages/ui/index.ts @@ -0,0 +1 @@ +export * from './src'; \ No newline at end of file diff --git a/packages/ui/package.json b/packages/ui/package.json new file mode 100644 index 000000000..c008d80b5 --- /dev/null +++ b/packages/ui/package.json @@ -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" + } +} \ No newline at end of file diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts new file mode 100644 index 000000000..784934b7d --- /dev/null +++ b/packages/ui/src/index.ts @@ -0,0 +1,7 @@ +import type { MantineProviderProps } from "@mantine/core"; +import { theme } from "./theme"; + + +export const uiConfiguration = ({ + theme, +}) satisfies MantineProviderProps; diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts new file mode 100644 index 000000000..9c5438c8b --- /dev/null +++ b/packages/ui/src/theme.ts @@ -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", + }); \ No newline at end of file diff --git a/packages/ui/src/theme/colors/primary.ts b/packages/ui/src/theme/colors/primary.ts new file mode 100644 index 000000000..47b322663 --- /dev/null +++ b/packages/ui/src/theme/colors/primary.ts @@ -0,0 +1,14 @@ +import type { MantineColorsTuple } from "@mantine/core"; + +export const primaryColor: MantineColorsTuple = [ + '#eafbf0', + '#ddefe3', + '#bedcc7', + '#9bc8aa', + '#7eb892', + '#6bad81', + '#60a878', + '#509265', + '#438359', + '#35724a' +]; diff --git a/packages/ui/src/theme/colors/secondary.ts b/packages/ui/src/theme/colors/secondary.ts new file mode 100644 index 000000000..809230bac --- /dev/null +++ b/packages/ui/src/theme/colors/secondary.ts @@ -0,0 +1,14 @@ +import type { MantineColorsTuple } from "@mantine/core"; + +export const secondaryColor: MantineColorsTuple = [ + '#e6f7ff', + '#d9e8f6', + '#b6cde6', + '#90b2d4', + '#6f9ac5', + '#5a8bbd', + '#4d84ba', + '#3d71a4', + '#326595', + '#205885' + ]; \ No newline at end of file diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json new file mode 100644 index 000000000..5d2933359 --- /dev/null +++ b/packages/ui/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "@alparr/tsconfig/base.json", + "compilerOptions": { + "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json" + }, + "include": ["*.ts", "src"], + "exclude": ["node_modules"] +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b7041a981..addb54829 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -66,6 +66,9 @@ importers: '@alparr/db': specifier: workspace:^0.1.0 version: link:../../packages/db + '@alparr/ui': + specifier: workspace:^ + version: link:../../packages/ui '@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) @@ -299,6 +302,28 @@ importers: specifier: ^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: dependencies: '@next/eslint-plugin-next': diff --git a/tooling/prettier/index.mjs b/tooling/prettier/index.mjs index ec54262e9..104edff96 100644 --- a/tooling/prettier/index.mjs +++ b/tooling/prettier/index.mjs @@ -8,7 +8,7 @@ const config = { "@ianvs/prettier-plugin-sort-imports" ], importOrder: [ - "^(react/(.*)$)|^(react$)|^(react-native(.*)$)", + "^(react/(.*)$)|^(react$)$)", "^(next/(.*)$)|^(next$)", "", "",