From f329496679f2738b8c424d497de5c19e9c164a5e Mon Sep 17 00:00:00 2001 From: Ivan <8611739+IRBorisov@users.noreply.github.com> Date: Mon, 7 Apr 2025 15:15:34 +0300 Subject: [PATCH] F: Introduce shadcn, implement okclh colors --- .vscode/settings.json | 1 + README.md | 1 + rsconcept/frontend/components.json | 21 +++ rsconcept/frontend/package-lock.json | 44 ++++++ rsconcept/frontend/package.json | 4 + .../editor-term-graph/graph-selectors.tsx | 2 +- rsconcept/frontend/src/index.css | 114 ++++++++++++++- rsconcept/frontend/src/lib/utils.ts | 6 + rsconcept/frontend/src/styling/constants.css | 138 +++++++++--------- 9 files changed, 259 insertions(+), 72 deletions(-) create mode 100644 rsconcept/frontend/components.json create mode 100644 rsconcept/frontend/src/lib/utils.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index 2f1b2b94..014e532e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -161,6 +161,7 @@ "rstabs", "rstemplates", "setexpr", + "shadcn", "SIDELIST", "signup", "simplebezier", diff --git a/README.md b/README.md index c7e47e04..996b13f5 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,7 @@ This readme file is used mostly to document project dependencies and conventions - babel-plugin-react-compiler - vite - jest + - shadcn - ts-jest - stylelint - stylelint-config-recommended diff --git a/rsconcept/frontend/components.json b/rsconcept/frontend/components.json new file mode 100644 index 00000000..13e1db0b --- /dev/null +++ b/rsconcept/frontend/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "", + "css": "src/index.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} diff --git a/rsconcept/frontend/package-lock.json b/rsconcept/frontend/package-lock.json index 95aa14a4..f1a86f19 100644 --- a/rsconcept/frontend/package-lock.json +++ b/rsconcept/frontend/package-lock.json @@ -17,9 +17,11 @@ "@uiw/codemirror-themes": "^4.23.10", "@uiw/react-codemirror": "^4.23.10", "axios": "^1.8.4", + "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "global": "^4.4.0", "js-file-download": "^0.4.12", + "lucide-react": "^0.487.0", "qrcode.react": "^4.2.0", "react": "^19.1.0", "react-dom": "^19.1.0", @@ -35,6 +37,8 @@ "react-tooltip": "^5.28.0", "react-zoom-pan-pinch": "^3.7.0", "reactflow": "^11.11.4", + "tailwind-merge": "^3.1.0", + "tw-animate-css": "^1.2.5", "use-debounce": "^10.0.4", "zod": "^3.24.2", "zustand": "^5.0.3" @@ -4979,6 +4983,18 @@ "dev": true, "license": "MIT" }, + "node_modules/class-variance-authority": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz", + "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==", + "license": "Apache-2.0", + "dependencies": { + "clsx": "^2.1.1" + }, + "funding": { + "url": "https://polar.sh/cva" + } + }, "node_modules/classcat": { "version": "5.0.5", "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz", @@ -8970,6 +8986,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.487.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.487.0.tgz", + "integrity": "sha512-aKqhOQ+YmFnwq8dWgGjOuLc8V1R9/c/yOd+zDY4+ohsR2Jo05lSGc3WsstYPIzcTpeosN7LoCkLReUUITvaIvw==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/make-dir": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz", @@ -11266,6 +11291,16 @@ "dev": true, "license": "MIT" }, + "node_modules/tailwind-merge": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.1.0.tgz", + "integrity": "sha512-aV27Oj8B7U/tAOMhJsSGdWqelfmudnGMdXIlMnk1JfsjwSjts6o8HyfN7SFH3EztzH4YH8kk6GbLTHzITJO39Q==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.3.tgz", @@ -11925,6 +11960,15 @@ "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==", "license": "ISC" }, + "node_modules/tw-animate-css": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.2.5.tgz", + "integrity": "sha512-ABzjfgVo+fDbhRREGL4KQZUqqdPgvc5zVrLyeW9/6mVqvaDepXc7EvedA+pYmMnIOsUAQMwcWzNvom26J2qYvQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/Wombosvideo" + } + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/rsconcept/frontend/package.json b/rsconcept/frontend/package.json index 9e88b3ed..ae548ed0 100644 --- a/rsconcept/frontend/package.json +++ b/rsconcept/frontend/package.json @@ -23,9 +23,11 @@ "@uiw/codemirror-themes": "^4.23.10", "@uiw/react-codemirror": "^4.23.10", "axios": "^1.8.4", + "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "global": "^4.4.0", "js-file-download": "^0.4.12", + "lucide-react": "^0.487.0", "qrcode.react": "^4.2.0", "react": "^19.1.0", "react-dom": "^19.1.0", @@ -41,6 +43,8 @@ "react-tooltip": "^5.28.0", "react-zoom-pan-pinch": "^3.7.0", "reactflow": "^11.11.4", + "tailwind-merge": "^3.1.0", + "tw-animate-css": "^1.2.5", "use-debounce": "^10.0.4", "zod": "^3.24.2", "zustand": "^5.0.3" diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph-selectors.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph-selectors.tsx index 09e050ea..59aef9d9 100644 --- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph-selectors.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph-selectors.tsx @@ -22,7 +22,7 @@ export function GraphSelectors() {
{coloring === 'status' ? : null} - {coloring === 'type' ? : null} + {coloring === 'type' ? : null} {coloring === 'schemas' ? : null}