feat: add ui package

openscript-ch · Sep 28, 2024 · 4b87614 · 4b87614
1 parent a37b1ec
commit 4b87614
Show file tree

Hide file tree

Showing 23 changed files with 1,186 additions and 207 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -3,10 +3,18 @@
  "changelog": "@changesets/cli/changelog",
  "commit": false,
  "fixed": [],
- "linked": [],
+ "linked": [
+ [
+ "frontend",
+ "@quassel/ui"
+ ]
+ ],
  "access": "restricted",
  "baseBranch": "main",
  "updateInternalDependencies": "patch",
  "ignore": [],
- "privatePackages": { "version": true, "tag": true }
+ "privatePackages": {
+ "version": true,
+ "tag": true
+ }
 }
diff --git a/.changeset/forty-candles-know.md b/.changeset/forty-candles-know.md
@@ -0,0 +1,6 @@
+---
+"frontend": patch
+"@quassel/ui": patch
+---
+
+Add quassel ui
diff --git a/apps/frontend/index.html b/apps/frontend/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
  <head>
  <meta charset="UTF-8" />
- <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Vite + React + TS</title>
+ <title>Quassel</title>
  </head>
  <body>
  <div id="root"></div>

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -5,15 +5,16 @@
  "type": "module",
  "scripts": {
  "dev": "vite --host",
- "build": "tsc -b && vite build",
+ "build": "tsc && vite build",
  "preview": "vite preview"
  },
  "dependencies": {
+ "@quassel/ui": "workspace:*",
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
  },
  "devDependencies": {
- "@types/react": "^18.3.9",
+ "@types/react": "^18.3.10",
  "@types/react-dom": "^18.3.0",
  "@vitejs/plugin-react": "^4.3.1",
  "typescript": "^5.5.3",

diff --git a/apps/frontend/src/App.css b/apps/frontend/src/App.css
diff --git a/apps/frontend/src/App.tsx b/apps/frontend/src/App.tsx
@@ -1,29 +1,9 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
+import { Button } from "@quassel/ui";
 
 function App() {
- const [count, setCount] = useState(0);
-
  return (
  <>
- <div>
- <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
- <img src={viteLogo} className="logo" alt="Vite logo" />
- </a>
- <a href="https://react.dev" target="_blank" rel="noreferrer">
- <img src={reactLogo} className="logo react" alt="React logo" />
- </a>
- </div>
- <h1>Vite + React</h1>
- <div className="card">
- <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
- <p>
- Edit <code>src/App.tsx</code> and save to test HMR
- </p>
- </div>
- <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
+ <Button variant="filled">Hello World</Button>
  </>
  );
 }

diff --git a/apps/frontend/src/assets/react.svg b/apps/frontend/src/assets/react.svg
diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
diff --git a/apps/frontend/src/main.tsx b/apps/frontend/src/main.tsx
@@ -1,10 +1,13 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
-import "./index.css";
+import "@quassel/ui/style.css";
+import { ThemeProvider } from "@quassel/ui";
 
 createRoot(document.getElementById("root")!).render(
  <StrictMode>
- <App />
+ <ThemeProvider>
+ <App />
+ </ThemeProvider>
  </StrictMode>
 );
diff --git a/apps/frontend/tsconfig.app.json b/apps/frontend/tsconfig.app.json
diff --git a/apps/frontend/tsconfig.json b/apps/frontend/tsconfig.json
@@ -1,7 +1,35 @@
 {
- "files": [],
+ "$schema": "https://json.schemastore.org/tsconfig",
+ "display": "Frontend",
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "lib": [
+ "DOM",
+ "DOM.Iterable",
+ "ESNext"
+ ],
+ "allowJs": false,
+ "skipLibCheck": true,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "allowImportingTsExtensions": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "types": []
+ },
+ "include": [
+ "src"
+ ],
  "references": [
- { "path": "./tsconfig.app.json" },
- { "path": "./tsconfig.node.json" }
+ {
+ "path": "./tsconfig.node.json"
+ }
  ]
 }
diff --git a/apps/frontend/tsconfig.node.json b/apps/frontend/tsconfig.node.json
@@ -1,22 +1,9 @@
 {
  "compilerOptions": {
- "target": "ES2022",
- "lib": ["ES2023"],
+ "composite": true,
  "module": "ESNext",
- "skipLibCheck": true,
-
- /* Bundler mode */
- "moduleResolution": "bundler",
- "allowImportingTsExtensions": true,
- "isolatedModules": true,
- "moduleDetection": "force",
- "noEmit": true,
-
- /* Linting */
- "strict": true,
- "noUnusedLocals": true,
- "noUnusedParameters": true,
- "noFallthroughCasesInSwitch": true
+ "moduleResolution": "Node",
+ "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
 }
diff --git a/libs/ui/.gitignore b/libs/ui/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/libs/ui/README.md b/libs/ui/README.md
@@ -0,0 +1 @@
+# `@quassel/ui`
diff --git a/libs/ui/package.json b/libs/ui/package.json
@@ -0,0 +1,40 @@
+{
+ "name": "@quassel/ui",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "main": "./dist/index.cjs",
+ "module": "./dist/index.js",
+ "types": "./dist/index.d.ts",
+ "style": "./dist/style.css",
+ "exports": {
+ ".": {
+ "import": "./dist/index.js",
+ "require": "./dist/index.cjs"
+ },
+ "./style.css": "./dist/style.css"
+ },
+ "scripts": {
+ "dev": "nx run-many -t build:dev --output-style stream-without-prefixes",
+ "build": "vite build --minify",
+ "build:dev": "vite build --watch --sourcemap",
+ "lint": "eslint .",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@mantine/core": "^7.13.0",
+ "@mantine/hooks": "^7.13.0",
+ "@tabler/icons-react": "^3.19.0",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1"
+ },
+ "devDependencies": {
+ "@eslint/js": "^9.9.0",
+ "@types/react": "^18.3.10",
+ "@types/react-dom": "^18.3.0",
+ "@vitejs/plugin-react": "^4.3.1",
+ "typescript": "^5.5.3",
+ "vite": "^5.4.1",
+ "vite-plugin-dts": "^4.2.2"
+ }
+}
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
@@ -0,0 +1,8 @@
+// Theme
+export { ThemeProvider } from "./theme/ThemeProvider";
+
+// modified components
+
+// external components
+export { AppShell, Button, Title, UnstyledButton, useMantineTheme } from "@mantine/core";
+export * from "@tabler/icons-react";
diff --git a/libs/ui/src/theme/Theme.css b/libs/ui/src/theme/Theme.css
diff --git a/libs/ui/src/theme/Theme.ts b/libs/ui/src/theme/Theme.ts
@@ -0,0 +1,9 @@
+import { MantineThemeOverride } from "@mantine/core";
+import "./Theme.css";
+
+export const theme: MantineThemeOverride = {
+ colors: {
+ orange: ["#FFECE5", "#FFC9B8", "#FFA68A", "#FF835C", "#FF602E", "#FF3D00", "#CC3100", "#992500", "#661800", "#330C00"],
+ },
+ primaryColor: "orange",
+};