From 3075b63d4ade7cc0e94264941f9d2f87bf4dd9be Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 1 Mar 2025 00:16:38 +0530 Subject: [PATCH 01/90] chore: Add shadcn --- .vscode/settings.json | 1 - components.json | 17 ++++ package.json | 6 +- src/app.postcss | 86 ++++++++++++++--- src/lib/utils.ts | 6 ++ svelte.config.js | 5 +- tailwind.config.cjs | 10 -- tailwind.config.js | 96 +++++++++++++++++++ yarn.lock | 211 ++++++++++++++++++++++++------------------ 9 files changed, 323 insertions(+), 115 deletions(-) create mode 100644 components.json create mode 100644 src/lib/utils.ts delete mode 100644 tailwind.config.cjs create mode 100644 tailwind.config.js diff --git a/.vscode/settings.json b/.vscode/settings.json index b02e495c..e9221ced 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,7 +7,6 @@ "ckppp", "corg", "cssnano", - "daisyui", "esserializer", "gantt", "gitgraph", diff --git a/components.json b/components.json new file mode 100644 index 00000000..b4b4758a --- /dev/null +++ b/components.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://next.shadcn-svelte.com/schema.json", + "style": "new-york", + "tailwind": { + "config": "tailwind.config.js", + "css": "src/app.postcss", + "baseColor": "slate" + }, + "aliases": { + "components": "$lib/components", + "utils": "$lib/utils", + "ui": "$lib/components/ui", + "hooks": "$lib/hooks" + }, + "typescript": true, + "registry": "https://next.shadcn-svelte.com/registry" +} diff --git a/package.json b/package.json index 78a7b916..9b57d735 100644 --- a/package.json +++ b/package.json @@ -37,8 +37,10 @@ "@typescript-eslint/parser": "6.21.0", "@vitest/ui": "^2.1.4", "autoprefixer": "^10.4.14", + "bits-ui": "^1.3.4", "c8": "7.14.0", "chai": "^4.3.7", + "clsx": "^2.1.1", "cssnano": "^6.0.0", "cypress": "12.17.4", "cypress-localstorage-commands": "2.2.7", @@ -64,7 +66,10 @@ "prettier-plugin-tailwindcss": "^0.6.0", "svelte": "^5.0.0", "svelte-preprocess": "^6.0.0", + "tailwind-merge": "^3.0.2", + "tailwind-variants": "^0.3.1", "tailwindcss": "^3.4.1", + "tailwindcss-animate": "^1.0.7", "tslib": "^2.6.2", "typescript": "^5.5.0", "vite": "^5.4.4", @@ -74,7 +79,6 @@ "dependencies": { "@mermaid-js/layout-elk": "^0.1.4", "@mermaid-js/mermaid-zenuml": "^0.2.0", - "daisyui": "2.52.0", "dayjs": "^1.11.7", "dompurify": "^3.1.6", "js-base64": "3.7.7", diff --git a/src/app.postcss b/src/app.postcss index 1f611bac..9e939c87 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -3,18 +3,82 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 72.2% 50.6%; + --destructive-foreground: 210 40% 98%; + + --ring: 222.2 84% 4.9%; + + --radius: 0.5rem; + } + + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + + --ring: 212.7 26.8% 83.9%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} -.input { - @apply flex-1 rounded border-2 border-solid border-primary; -} -.action-btn { - @apply btn btn-primary; -} -#graph-div sub, -#graph-div sup { - position: initial; - vertical-align: revert; -} .d { @apply border border-red-500; diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 00000000..ac680b30 --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/svelte.config.js b/svelte.config.js index 7b34bfa1..53a66551 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,5 +1,5 @@ -import preprocess from 'svelte-preprocess'; import adapter from '@sveltejs/adapter-static'; +import preprocess from 'svelte-preprocess'; /** @type {import('@sveltejs/kit').Config} */ const config = { @@ -11,6 +11,9 @@ const config = { }) ], kit: { + alias: { + '$/*': './src/lib/*' + }, adapter: adapter({ pages: `docs` }), diff --git a/tailwind.config.cjs b/tailwind.config.cjs deleted file mode 100644 index 18cb32c1..00000000 --- a/tailwind.config.cjs +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = { - plugins: [require('daisyui')], - content: ['./src/**/*.{html,js,svelte,ts}'], - theme: { - extend: {} - }, - variants: { - extend: {} - } -}; diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 00000000..f8de7066 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,96 @@ +import { fontFamily } from "tailwindcss/defaultTheme"; +import tailwindcssAnimate from "tailwindcss-animate"; + +/** @type {import('tailwindcss').Config} */ +const config = { + darkMode: ["class"], + content: ["./src/**/*.{html,js,svelte,ts}"], + safelist: ["dark"], + theme: { + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px" + } + }, + extend: { + colors: { + border: "hsl(var(--border) / )", + input: "hsl(var(--input) / )", + ring: "hsl(var(--ring) / )", + background: "hsl(var(--background) / )", + foreground: "hsl(var(--foreground) / )", + primary: { + DEFAULT: "hsl(var(--primary) / )", + foreground: "hsl(var(--primary-foreground) / )" + }, + secondary: { + DEFAULT: "hsl(var(--secondary) / )", + foreground: "hsl(var(--secondary-foreground) / )" + }, + destructive: { + DEFAULT: "hsl(var(--destructive) / )", + foreground: "hsl(var(--destructive-foreground) / )" + }, + muted: { + DEFAULT: "hsl(var(--muted) / )", + foreground: "hsl(var(--muted-foreground) / )" + }, + accent: { + DEFAULT: "hsl(var(--accent) / )", + foreground: "hsl(var(--accent-foreground) / )" + }, + popover: { + DEFAULT: "hsl(var(--popover) / )", + foreground: "hsl(var(--popover-foreground) / )" + }, + card: { + DEFAULT: "hsl(var(--card) / )", + foreground: "hsl(var(--card-foreground) / )" + }, + sidebar: { + DEFAULT: "hsl(var(--sidebar-background))", + foreground: "hsl(var(--sidebar-foreground))", + primary: "hsl(var(--sidebar-primary))", + "primary-foreground": "hsl(var(--sidebar-primary-foreground))", + accent: "hsl(var(--sidebar-accent))", + "accent-foreground": "hsl(var(--sidebar-accent-foreground))", + border: "hsl(var(--sidebar-border))", + ring: "hsl(var(--sidebar-ring))", + }, + }, + borderRadius: { + xl: "calc(var(--radius) + 4px)", + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)" + }, + fontFamily: { + sans: [...fontFamily.sans] + }, + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--bits-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--bits-accordion-content-height)" }, + to: { height: "0" }, + }, + "caret-blink": { + "0%,70%,100%": { opacity: "1" }, + "20%,50%": { opacity: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + "caret-blink": "caret-blink 1.25s ease-out infinite", + }, + }, + }, + plugins: [tailwindcssAnimate], +}; + +export default config; diff --git a/yarn.lock b/yarn.lock index 0bb0c44d..58dd1d1c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -353,6 +353,13 @@ dependencies: "@floating-ui/utils" "^0.2.3" +"@floating-ui/core@^1.6.0", "@floating-ui/core@^1.6.4": + version "1.6.9" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.9.tgz#64d1da251433019dafa091de9b2886ff35ec14e6" + integrity sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw== + dependencies: + "@floating-ui/utils" "^0.2.9" + "@floating-ui/dom@^1.0.0": version "1.6.3" resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef" @@ -369,6 +376,14 @@ "@floating-ui/core" "^1.0.0" "@floating-ui/utils" "^0.2.3" +"@floating-ui/dom@^1.6.7": + version "1.6.13" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.13.tgz#a8a938532aea27a95121ec16e667a7cbe8c59e34" + integrity sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w== + dependencies: + "@floating-ui/core" "^1.6.0" + "@floating-ui/utils" "^0.2.9" + "@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1": version "0.2.1" resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2" @@ -379,6 +394,11 @@ resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.3.tgz#506fcc73f730affd093044cb2956c31ba6431545" integrity sha512-XGndio0l5/Gvd6CLIABvsav9HHezgDFFhDfHk1bvLfr9ni8dojqLSvBbotJEjmIwNHL7vK4QzBJTdBRoB+c1ww== +"@floating-ui/utils@^0.2.9": + version "0.2.9" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.9.tgz#50dea3616bc8191fb8e112283b49eaff03e78429" + integrity sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg== + "@floating-ui/vue@^1.0.3": version "1.0.7" resolved "https://registry.yarnpkg.com/@floating-ui/vue/-/vue-1.0.7.tgz#2678e8536ac3e9bf891d5f4fb5e8b10789cf702b" @@ -452,6 +472,13 @@ local-pkg "^0.5.1" mlly "^1.7.3" +"@internationalized/date@^3.5.6": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.7.0.tgz#23a4956308ee108e308517a7137c69ab8f5f2ad9" + integrity sha512-VJ5WS3fcVx0bejE/YHfbDKR/yawZgKqn/if+oEeLqNwBtPzVB06olkfcnojTmEMX+gTpH+FlQ69SHNitJ8/erQ== + dependencies: + "@swc/helpers" "^0.5.0" + "@isaacs/cliui@^8.0.2": version "8.0.2" resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550" @@ -698,6 +725,13 @@ magic-string "^0.30.12" vitefu "^1.0.3" +"@swc/helpers@^0.5.0": + version "0.5.15" + resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.15.tgz#79efab344c5819ecf83a43f3f9f811fc84b516d7" + integrity sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g== + dependencies: + tslib "^2.8.0" + "@tanstack/virtual-core@3.1.3": version "3.1.3" resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.1.3.tgz#77ced625f19ec9350f6e460f142b3be9bff03866" @@ -1689,6 +1723,19 @@ bindings@^1.5.0: dependencies: file-uri-to-path "1.0.0" +bits-ui@^1.3.4: + version "1.3.4" + resolved "https://registry.yarnpkg.com/bits-ui/-/bits-ui-1.3.4.tgz#8099427ef0ce870e5d9ef843b8b41e929705d09f" + integrity sha512-hmrYbmb5D3ecRHP9GWTlkoo/9IGsPwMCmy3dAPKAfztG/NhWk49JcpuPbWi/eIggetVnv5nYrFp3N8zWscePCA== + dependencies: + "@floating-ui/core" "^1.6.4" + "@floating-ui/dom" "^1.6.7" + "@internationalized/date" "^3.5.6" + esm-env "^1.1.2" + runed "^0.23.2" + svelte-toolbelt "^0.7.1" + tabbable "^6.2.0" + blob-util@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb" @@ -1959,7 +2006,7 @@ chevrotain@~11.0.3: "@chevrotain/utils" "11.0.3" lodash-es "4.17.21" -chokidar@^3.5.3, chokidar@^3.6.0: +chokidar@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b" integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw== @@ -2073,7 +2120,7 @@ color-name@^1.0.0, color-name@~1.1.4: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== -color-string@^1.5.5, color-string@^1.9.0: +color-string@^1.5.5: version "1.9.1" resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4" integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg== @@ -2081,14 +2128,6 @@ color-string@^1.5.5, color-string@^1.9.0: color-name "^1.0.0" simple-swizzle "^0.2.2" -color@^4.2: - version "4.2.3" - resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a" - integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A== - dependencies: - color-convert "^2.0.1" - color-string "^1.9.0" - colord@^2.9.3: version "2.9.3" resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43" @@ -2229,14 +2268,6 @@ css-select@^5.1.0: domutils "^3.0.1" nth-check "^2.0.1" -css-selector-tokenizer@^0.8.0: - version "0.8.0" - resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd" - integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg== - dependencies: - cssesc "^3.0.0" - fastparse "^1.1.2" - css-tree@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20" @@ -2688,16 +2719,6 @@ dagre-d3-es@7.0.11: d3 "^7.9.0" lodash-es "^4.17.21" -daisyui@2.52.0: - version "2.52.0" - resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-2.52.0.tgz#1e22abd655bf4a5cb466e1a1f264bb597e9ec254" - integrity sha512-LQTA5/IVXAJHBMFoeaEMfd7/akAFPPcdQPR3O9fzzcFiczneJFM73CFPnScmW2sOgn/D83cvkP854ep2T9OfTg== - dependencies: - color "^4.2" - css-selector-tokenizer "^0.8.0" - postcss-js "^4.0.0" - tailwindcss "^3" - dashdash@^1.12.0: version "1.14.1" resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0" @@ -3216,7 +3237,7 @@ eslint@8.57.1: strip-ansi "^6.0.1" text-table "^0.2.0" -esm-env@^1.2.1, esm-env@^1.2.2: +esm-env@^1.0.0, esm-env@^1.1.2, esm-env@^1.2.1, esm-env@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/esm-env/-/esm-env-1.2.2.tgz#263c9455c55861f41618df31b20cb571fc20b75e" integrity sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA== @@ -3382,7 +3403,7 @@ fast-glob@^3.2.5, fast-glob@^3.3.2: merge2 "^1.3.0" micromatch "^4.0.8" -fast-glob@^3.2.9, fast-glob@^3.3.0: +fast-glob@^3.2.9: version "3.3.2" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129" integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow== @@ -3408,11 +3429,6 @@ fast-redact@^3.1.1: resolved "https://registry.yarnpkg.com/fast-redact/-/fast-redact-3.3.0.tgz#7c83ce3a7be4898241a46560d51de10f653f7634" integrity sha512-6T5V1QK1u4oF+ATxs1lWUmlEk6P2T9HqJG3e2DnHOdVgZy2rFJBoEnrIedcTXlkAHU/zKC+7KETJ+KGGKwxgMQ== -fastparse@^1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9" - integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ== - fastq@^1.6.0: version "1.19.0" resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.19.0.tgz#a82c6b7c2bb4e44766d865f07997785fecfdcb89" @@ -3905,6 +3921,11 @@ ini@^1.3.4: resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c" integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew== +inline-style-parser@0.2.4: + version "0.2.4" + resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.2.4.tgz#f4af5fe72e612839fcd453d989a586566d695f22" + integrity sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q== + "internmap@1 - 2": version "2.0.3" resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009" @@ -4078,11 +4099,6 @@ jackspeak@^3.1.2: optionalDependencies: "@pkgjs/parseargs" "^0.11.0" -jiti@^1.19.1: - version "1.21.0" - resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d" - integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q== - jiti@^1.21.6: version "1.21.7" resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.7.tgz#9dd81043424a3d28458b193d965f0d18a2300ba9" @@ -4263,7 +4279,7 @@ levn@^0.4.1: prelude-ls "^1.2.1" type-check "~0.4.0" -lilconfig@^2.0.5, lilconfig@^2.1.0: +lilconfig@^2.0.5: version "2.1.0" resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52" integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ== @@ -4532,7 +4548,7 @@ mermaid@^11.3.0: ts-dedent "^2.2.0" uuid "^9.0.1" -micromatch@^4.0.4, micromatch@^4.0.5, micromatch@^4.0.8: +micromatch@^4.0.4, micromatch@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202" integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA== @@ -5128,7 +5144,7 @@ postcss-import@^15.1.0: read-cache "^1.0.0" resolve "^1.1.7" -postcss-js@^4.0.0, postcss-js@^4.0.1: +postcss-js@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2" integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw== @@ -5151,7 +5167,7 @@ postcss-load-config@^3.1.0, postcss-load-config@^3.1.4: lilconfig "^2.0.5" yaml "^1.10.2" -postcss-load-config@^4.0.1, postcss-load-config@^4.0.2: +postcss-load-config@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3" integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ== @@ -5237,7 +5253,7 @@ postcss-modules-values@^4.0.0: dependencies: icss-utils "^5.0.0" -postcss-nested@^6.0.1, postcss-nested@^6.2.0: +postcss-nested@^6.2.0: version "6.2.0" resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131" integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ== @@ -5392,15 +5408,6 @@ postcss@^8.3.0: picocolors "^1.0.0" source-map-js "^1.0.2" -postcss@^8.4.23, postcss@^8.4.33, postcss@^8.4.38, postcss@^8.4.39, postcss@^8.4.4, postcss@^8.4.43, postcss@^8.4.47: - version "8.5.3" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.3.tgz#1463b6f1c7fb16fe258736cba29a2de35237eafb" - integrity sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A== - dependencies: - nanoid "^3.3.8" - picocolors "^1.1.1" - source-map-js "^1.2.1" - postcss@^8.4.31: version "8.4.35" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.35.tgz#60997775689ce09011edf083a549cea44aabe2f7" @@ -5410,6 +5417,15 @@ postcss@^8.4.31: picocolors "^1.0.0" source-map-js "^1.0.2" +postcss@^8.4.33, postcss@^8.4.38, postcss@^8.4.39, postcss@^8.4.4, postcss@^8.4.43, postcss@^8.4.47: + version "8.5.3" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.3.tgz#1463b6f1c7fb16fe258736cba29a2de35237eafb" + integrity sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A== + dependencies: + nanoid "^3.3.8" + picocolors "^1.1.1" + source-map-js "^1.2.1" + prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" @@ -5661,15 +5677,6 @@ resolve@^1.10.0: path-parse "^1.0.7" supports-preserve-symlinks-flag "^1.0.0" -resolve@^1.22.2: - version "1.22.8" - resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d" - integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw== - dependencies: - is-core-module "^2.13.0" - path-parse "^1.0.7" - supports-preserve-symlinks-flag "^1.0.0" - restore-cursor@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e" @@ -5763,6 +5770,13 @@ run-parallel@^1.1.9: dependencies: queue-microtask "^1.2.2" +runed@^0.23.2: + version "0.23.4" + resolved "https://registry.yarnpkg.com/runed/-/runed-0.23.4.tgz#0b68fd24434e65dd8cbd9f7072521d6f5f409eba" + integrity sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA== + dependencies: + esm-env "^1.0.0" + rw@1: version "1.3.3" resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4" @@ -6136,6 +6150,13 @@ strip-json-comments@^3.1.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== +style-to-object@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-1.0.8.tgz#67a29bca47eaa587db18118d68f9d95955e81292" + integrity sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g== + dependencies: + inline-style-parser "0.2.4" + stylehacks@^6.1.1: version "6.1.1" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-6.1.1.tgz#543f91c10d17d00a440430362d419f79c25545a6" @@ -6149,7 +6170,7 @@ stylis@^4.3.1: resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.5.tgz#432cc99c81e28d7062c88d979d2163891e860489" integrity sha512-K7npNOKGRYuhAFFzkzMGfxFDpN6gDwf8hcMiE+uveTVbBgm93HrNP3ZDUpKqzZ4pG7TP6fmb+EMAQPjq9FqqvA== -sucrase@^3.32.0, sucrase@^3.35.0: +sucrase@^3.35.0: version "3.35.0" resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263" integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA== @@ -6209,6 +6230,15 @@ svelte-preprocess@^6.0.0: resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-6.0.3.tgz#fdc1f9dc41b6f22bf8b1f059e9f21eaaae181eeb" integrity sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA== +svelte-toolbelt@^0.7.1: + version "0.7.1" + resolved "https://registry.yarnpkg.com/svelte-toolbelt/-/svelte-toolbelt-0.7.1.tgz#63e9c6629456a1a0dd57812f85426e4631fd754e" + integrity sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ== + dependencies: + clsx "^2.1.1" + runed "^0.23.2" + style-to-object "^1.0.8" + svelte@^5.0.0: version "5.20.4" resolved "https://registry.yarnpkg.com/svelte/-/svelte-5.20.4.tgz#defab12c01a5c6502d04f2028a81923269860e0d" @@ -6266,33 +6296,32 @@ symbol-tree@^3.2.4: resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw== -tailwindcss@^3: - version "3.3.5" - resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.5.tgz#22a59e2fbe0ecb6660809d9cc5f3976b077be3b8" - integrity sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA== +tabbable@^6.2.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97" + integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew== + +tailwind-merge@2.5.4: + version "2.5.4" + resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.5.4.tgz#4bf574e81fa061adeceba099ae4df56edcee78d1" + integrity sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q== + +tailwind-merge@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-3.0.2.tgz#567eff76de12211e24dd909da0f5ed6f4f422b0c" + integrity sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw== + +tailwind-variants@^0.3.1: + version "0.3.1" + resolved "https://registry.yarnpkg.com/tailwind-variants/-/tailwind-variants-0.3.1.tgz#3ea13bd90b4086b41f8aef7ba8ee63597f95f86f" + integrity sha512-krn67M3FpPwElg4FsZrOQd0U26o7UDH/QOkK8RNaiCCrr052f6YJPBUfNKnPo/s/xRzNPtv1Mldlxsg8Tb46BQ== dependencies: - "@alloc/quick-lru" "^5.2.0" - arg "^5.0.2" - chokidar "^3.5.3" - didyoumean "^1.2.2" - dlv "^1.1.3" - fast-glob "^3.3.0" - glob-parent "^6.0.2" - is-glob "^4.0.3" - jiti "^1.19.1" - lilconfig "^2.1.0" - micromatch "^4.0.5" - normalize-path "^3.0.0" - object-hash "^3.0.0" - picocolors "^1.0.0" - postcss "^8.4.23" - postcss-import "^15.1.0" - postcss-js "^4.0.1" - postcss-load-config "^4.0.1" - postcss-nested "^6.0.1" - postcss-selector-parser "^6.0.11" - resolve "^1.22.2" - sucrase "^3.32.0" + tailwind-merge "2.5.4" + +tailwindcss-animate@^1.0.7: + version "1.0.7" + resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4" + integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA== tailwindcss@^3.2.4, tailwindcss@^3.4.1: version "3.4.17" @@ -6480,7 +6509,7 @@ ts-toolbelt@^6.15.1: resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-6.15.5.tgz#cb3b43ed725cb63644782c64fbcad7d8f28c0a83" integrity sha512-FZIXf1ksVyLcfr7M317jbB67XFJhOO1YqdTcuGaq9q5jLUoTikukZ+98TPjKiP2jC5CgmYdWWYs0s2nLSU0/1A== -tslib@^2.1.0, tslib@^2.6.2: +tslib@^2.1.0, tslib@^2.6.2, tslib@^2.8.0: version "2.8.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f" integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w== From 66566bd6af83fdd9a64ab8df5bee0563022fb458 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 1 Mar 2025 00:16:50 +0530 Subject: [PATCH 02/90] chore: Add shadcn/button --- src/lib/components/ui/button/button.svelte | 75 ++++++++++++++++++++++ src/lib/components/ui/button/index.ts | 1 + 2 files changed, 76 insertions(+) create mode 100644 src/lib/components/ui/button/button.svelte create mode 100644 src/lib/components/ui/button/index.ts diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte new file mode 100644 index 00000000..6353277d --- /dev/null +++ b/src/lib/components/ui/button/button.svelte @@ -0,0 +1,75 @@ + + + + +{#if href} + + {@render children?.()} + +{:else} + +{/if} diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts new file mode 100644 index 00000000..c68d2fbc --- /dev/null +++ b/src/lib/components/ui/button/index.ts @@ -0,0 +1 @@ +export { default as Button, buttonVariants, default as Root, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonProps as Props } from "./button.svelte"; From b8aa272bc670e1fb732bb3c7aae98c07aa4ec4d1 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 1 Mar 2025 00:17:09 +0530 Subject: [PATCH 03/90] fix: Promo bar --- src/lib/util/promos/January2025.svelte | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/lib/util/promos/January2025.svelte b/src/lib/util/promos/January2025.svelte index 339a4fb2..90662cd9 100644 --- a/src/lib/util/promos/January2025.svelte +++ b/src/lib/util/promos/January2025.svelte @@ -1,6 +1,7 @@ -
- -
+ + -
-
+ + diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte index d8949222..e7a91ae5 100644 --- a/src/lib/components/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -13,8 +13,9 @@ import { MCBaseURL } from '$lib/util/util'; import type { ComponentProps } from 'svelte'; import DropdownNavMenu from './DropdownNavMenu.svelte'; - import Privacy from './Privacy.svelte'; - import Theme from './Theme.svelte'; + import { Button } from './ui/button'; + import { Separator } from './ui/separator'; + import { Switch } from './ui/switch'; const { isEnabledMermaidChartLinks } = env; @@ -83,12 +84,14 @@ {/if} -
-
- Mermaid Live Editor +
-
+ From e33aed9cc6ed775616e648ef3718be60a7dfcf58 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 7 Mar 2025 17:00:16 +0900 Subject: [PATCH 17/90] fix: Action panel --- src/lib/components/Actions.svelte | 97 ++++++++----------- src/lib/components/ui/input/index.ts | 7 ++ src/lib/components/ui/input/input.svelte | 46 +++++++++ src/lib/components/ui/toggle-group/index.ts | 10 ++ .../ui/toggle-group/toggle-group-item.svelte | 30 ++++++ .../ui/toggle-group/toggle-group.svelte | 41 ++++++++ src/lib/components/ui/toggle/index.ts | 13 +++ src/lib/components/ui/toggle/toggle.svelte | 51 ++++++++++ 8 files changed, 236 insertions(+), 59 deletions(-) create mode 100644 src/lib/components/ui/input/index.ts create mode 100644 src/lib/components/ui/input/input.svelte create mode 100644 src/lib/components/ui/toggle-group/index.ts create mode 100644 src/lib/components/ui/toggle-group/toggle-group-item.svelte create mode 100644 src/lib/components/ui/toggle-group/toggle-group.svelte create mode 100644 src/lib/components/ui/toggle/index.ts create mode 100644 src/lib/components/ui/toggle/toggle.svelte diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte index 9c83bd50..82f3ad16 100644 --- a/src/lib/components/Actions.svelte +++ b/src/lib/components/Actions.svelte @@ -1,9 +1,9 @@ + +{#if type === "file"} + +{:else} + +{/if} diff --git a/src/lib/components/ui/toggle-group/index.ts b/src/lib/components/ui/toggle-group/index.ts new file mode 100644 index 00000000..12b14b96 --- /dev/null +++ b/src/lib/components/ui/toggle-group/index.ts @@ -0,0 +1,10 @@ +import Root from "./toggle-group.svelte"; +import Item from "./toggle-group-item.svelte"; + +export { + Root, + Item, + // + Root as ToggleGroup, + Item as ToggleGroupItem, +}; diff --git a/src/lib/components/ui/toggle-group/toggle-group-item.svelte b/src/lib/components/ui/toggle-group/toggle-group-item.svelte new file mode 100644 index 00000000..8143635f --- /dev/null +++ b/src/lib/components/ui/toggle-group/toggle-group-item.svelte @@ -0,0 +1,30 @@ + + + diff --git a/src/lib/components/ui/toggle-group/toggle-group.svelte b/src/lib/components/ui/toggle-group/toggle-group.svelte new file mode 100644 index 00000000..08860053 --- /dev/null +++ b/src/lib/components/ui/toggle-group/toggle-group.svelte @@ -0,0 +1,41 @@ + + + + + + diff --git a/src/lib/components/ui/toggle/index.ts b/src/lib/components/ui/toggle/index.ts new file mode 100644 index 00000000..8cb2936f --- /dev/null +++ b/src/lib/components/ui/toggle/index.ts @@ -0,0 +1,13 @@ +import Root from "./toggle.svelte"; +export { + toggleVariants, + type ToggleSize, + type ToggleVariant, + type ToggleVariants, +} from "./toggle.svelte"; + +export { + Root, + // + Root as Toggle, +}; diff --git a/src/lib/components/ui/toggle/toggle.svelte b/src/lib/components/ui/toggle/toggle.svelte new file mode 100644 index 00000000..e7b98376 --- /dev/null +++ b/src/lib/components/ui/toggle/toggle.svelte @@ -0,0 +1,51 @@ + + + + + From f608761fa22439ba931b5d50fc3bc9cc8d4b3543 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 10 Mar 2025 21:27:50 -0700 Subject: [PATCH 18/90] feat: Dark mode --- package.json | 1 + src/lib/components/Editor.svelte | 8 +++---- src/lib/components/Navbar.svelte | 13 ++++++++++- src/lib/util/theme.ts | 38 -------------------------------- src/routes/+layout.svelte | 18 +++++---------- yarn.lock | 5 +++++ 6 files changed, 27 insertions(+), 56 deletions(-) delete mode 100644 src/lib/util/theme.ts diff --git a/package.json b/package.json index 741e03a2..ec779ea2 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,7 @@ "js-base64": "3.7.7", "lodash-es": "^4.17.21", "mermaid": "^11.3.0", + "mode-watcher": "^0.5.1", "monaco-editor": "0.52.2", "pako": "2.1.0", "plausible-tracker": "^0.3.8", diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte index 8412d6a6..ff9ca6fd 100644 --- a/src/lib/components/Editor.svelte +++ b/src/lib/components/Editor.svelte @@ -13,8 +13,8 @@ import { sanitizeText } from '$lib/util/sanitize'; import { stateStore, updateCode, updateConfig } from '$lib/util/state'; import { logEvent } from '$lib/util/stats'; - import { themeStore } from '$lib/util/theme'; import { errorDebug, syncDiagram } from '$lib/util/util'; + import { mode } from 'mode-watcher'; import * as monaco from 'monaco-editor'; import monacoEditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'; import monacoJsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'; @@ -61,8 +61,8 @@ monaco.editor.setModelMarkers(model, 'mermaid', errorMarkers); }); - themeStore.subscribe(({ isDark }) => { - editor && monaco.editor.setTheme(isDark ? 'mermaid-dark' : 'mermaid'); + mode.subscribe((mode) => { + editor && monaco.editor.setTheme(mode === 'dark' ? 'mermaid-dark' : 'mermaid'); }); const handleUpdate = (text: string, mode: EditorMode) => { @@ -110,7 +110,7 @@ }); } }); - monaco.editor.setTheme($themeStore.isDark ? 'mermaid-dark' : 'mermaid'); + monaco.editor.setTheme($mode === 'dark' ? 'mermaid-dark' : 'mermaid'); const resizeObserver = new ResizeObserver((entries) => { editor?.layout({ height: entries[0].contentRect.height, diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte index c984dc6d..99c4e78c 100644 --- a/src/lib/components/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -14,6 +14,7 @@ import { dismissPromotion, getActivePromotion } from '$lib/util/promos/promo'; import { stateStore } from '$lib/util/state'; import { MCBaseURL } from '$lib/util/util'; + import { toggleMode } from 'mode-watcher'; import type { ComponentProps } from 'svelte'; import DropdownNavMenu from './DropdownNavMenu.svelte'; @@ -84,7 +85,7 @@ {/if} - - - diff --git a/src/lib/util/promos/January2025.svelte b/src/lib/util/promos/January2025.svelte index 13cadaf4..ff7518af 100644 --- a/src/lib/util/promos/January2025.svelte +++ b/src/lib/util/promos/January2025.svelte @@ -137,7 +137,7 @@ in:fade={{ delay: 800 }} out:fade={{ duration: 1000 }}> {currentTagline.label} - + {/key} diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte index 4a009bba..cc6dd5d4 100644 --- a/src/routes/edit/+page.svelte +++ b/src/routes/edit/+page.svelte @@ -133,7 +133,7 @@
- + @@ -183,63 +183,16 @@
- - -
{#if isHistoryOpen} - - + -
+
Code editing not supported on mobile. Please use a desktop browser.
From 6a55d67c4e648c695d12e9d868de98a5d8d94e6b Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 13 Mar 2025 15:18:38 -0700 Subject: [PATCH 33/90] feat: Tweak links --- src/lib/components/MainMenu.svelte | 6 +++--- src/routes/edit/+page.svelte | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/lib/components/MainMenu.svelte b/src/lib/components/MainMenu.svelte index a36c5d1f..b0765d95 100644 --- a/src/lib/components/MainMenu.svelte +++ b/src/lib/components/MainMenu.svelte @@ -14,9 +14,9 @@ import SunIcon from '~icons/material-symbols/sunny-rounded'; const menuItems = [ { label: 'New Diagram', icon: AddIcon, href: '/' }, - { label: 'Home', icon: HomeIcon, href: '/' }, - { label: 'Docs', icon: BookIcon, href: '/docs' }, - { label: 'Help', icon: HelpIcon, href: '/pricing' } + { label: 'Home', icon: HomeIcon, href: 'https://mermaid.js.org/' }, + { label: 'Docs', icon: BookIcon, href: 'https://mermaid.js.org/intro/' }, + { label: 'Help', icon: HelpIcon, href: 'https://discord.gg/sKeNQX4Wtj' } ]; diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte index cc6dd5d4..46820b02 100644 --- a/src/routes/edit/+page.svelte +++ b/src/routes/edit/+page.svelte @@ -136,7 +136,7 @@ - + {#if env.isEnabledMermaidChartLinks}
From 7abe8f82b16a115c4cb1ca6677c6acd78419775c Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 13 Mar 2025 17:42:52 -0700 Subject: [PATCH 35/90] format: prettier --- components.json | 30 +++++----- .../ui/dialog/dialog-description.svelte | 21 ++++--- .../components/ui/dialog/dialog-footer.svelte | 27 +++++---- .../components/ui/dialog/dialog-header.svelte | 27 +++++---- .../ui/dialog/dialog-overlay.svelte | 27 +++++---- .../components/ui/dialog/dialog-title.svelte | 21 ++++--- src/lib/components/ui/dialog/index.ts | 57 +++++++++---------- src/lib/components/ui/sonner/index.ts | 2 +- src/lib/components/ui/sonner/sonner.svelte | 30 +++++----- 9 files changed, 118 insertions(+), 124 deletions(-) diff --git a/components.json b/components.json index b4b4758a..4398a0f7 100644 --- a/components.json +++ b/components.json @@ -1,17 +1,17 @@ { - "$schema": "https://next.shadcn-svelte.com/schema.json", - "style": "new-york", - "tailwind": { - "config": "tailwind.config.js", - "css": "src/app.postcss", - "baseColor": "slate" - }, - "aliases": { - "components": "$lib/components", - "utils": "$lib/utils", - "ui": "$lib/components/ui", - "hooks": "$lib/hooks" - }, - "typescript": true, - "registry": "https://next.shadcn-svelte.com/registry" + "$schema": "https://next.shadcn-svelte.com/schema.json", + "style": "new-york", + "tailwind": { + "config": "tailwind.config.js", + "css": "src/app.postcss", + "baseColor": "slate" + }, + "aliases": { + "components": "$lib/components", + "utils": "$lib/utils", + "ui": "$lib/components/ui", + "hooks": "$lib/hooks" + }, + "typescript": true, + "registry": "https://next.shadcn-svelte.com/registry" } diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte index bc048e4b..6d2b04fd 100644 --- a/src/lib/components/ui/dialog/dialog-description.svelte +++ b/src/lib/components/ui/dialog/dialog-description.svelte @@ -1,16 +1,15 @@ + bind:ref + class={cn('text-sm text-muted-foreground', className)} + {...restProps} /> diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte index 91ecaba6..88af15c0 100644 --- a/src/lib/components/ui/dialog/dialog-footer.svelte +++ b/src/lib/components/ui/dialog/dialog-footer.svelte @@ -1,20 +1,19 @@
- {@render children?.()} + bind:this={ref} + class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} + {...restProps}> + {@render children?.()}
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte index 8d1abfc4..0bc0d2ad 100644 --- a/src/lib/components/ui/dialog/dialog-header.svelte +++ b/src/lib/components/ui/dialog/dialog-header.svelte @@ -1,20 +1,19 @@
- {@render children?.()} + bind:this={ref} + class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} + {...restProps}> + {@render children?.()}
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte index 05c30ac2..07932582 100644 --- a/src/lib/components/ui/dialog/dialog-overlay.svelte +++ b/src/lib/components/ui/dialog/dialog-overlay.svelte @@ -1,19 +1,18 @@ + bind:ref + class={cn( + 'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', + className + )} + {...restProps} /> diff --git a/src/lib/components/ui/dialog/dialog-title.svelte b/src/lib/components/ui/dialog/dialog-title.svelte index 9cf592cf..5da14f94 100644 --- a/src/lib/components/ui/dialog/dialog-title.svelte +++ b/src/lib/components/ui/dialog/dialog-title.svelte @@ -1,16 +1,15 @@ + bind:ref + class={cn('text-lg font-semibold leading-none tracking-tight', className)} + {...restProps} /> diff --git a/src/lib/components/ui/dialog/index.ts b/src/lib/components/ui/dialog/index.ts index 7c2cd739..c3483281 100644 --- a/src/lib/components/ui/dialog/index.ts +++ b/src/lib/components/ui/dialog/index.ts @@ -1,11 +1,10 @@ -import { Dialog as DialogPrimitive } from "bits-ui"; - -import Title from "./dialog-title.svelte"; -import Footer from "./dialog-footer.svelte"; -import Header from "./dialog-header.svelte"; -import Overlay from "./dialog-overlay.svelte"; -import Content from "./dialog-content.svelte"; -import Description from "./dialog-description.svelte"; +import { Dialog as DialogPrimitive } from 'bits-ui'; +import Content from './dialog-content.svelte'; +import Description from './dialog-description.svelte'; +import Footer from './dialog-footer.svelte'; +import Header from './dialog-header.svelte'; +import Overlay from './dialog-overlay.svelte'; +import Title from './dialog-title.svelte'; const Root: typeof DialogPrimitive.Root = DialogPrimitive.Root; const Trigger: typeof DialogPrimitive.Trigger = DialogPrimitive.Trigger; @@ -13,25 +12,25 @@ const Close: typeof DialogPrimitive.Close = DialogPrimitive.Close; const Portal: typeof DialogPrimitive.Portal = DialogPrimitive.Portal; export { - Root, - Title, - Portal, - Footer, - Header, - Trigger, - Overlay, - Content, - Description, - Close, - // - Root as Dialog, - Title as DialogTitle, - Portal as DialogPortal, - Footer as DialogFooter, - Header as DialogHeader, - Trigger as DialogTrigger, - Overlay as DialogOverlay, - Content as DialogContent, - Description as DialogDescription, - Close as DialogClose, + Close, + Content, + Description, + // + Root as Dialog, + Close as DialogClose, + Content as DialogContent, + Description as DialogDescription, + Footer as DialogFooter, + Header as DialogHeader, + Overlay as DialogOverlay, + Portal as DialogPortal, + Title as DialogTitle, + Trigger as DialogTrigger, + Footer, + Header, + Overlay, + Portal, + Root, + Title, + Trigger }; diff --git a/src/lib/components/ui/sonner/index.ts b/src/lib/components/ui/sonner/index.ts index 1ad9f4a2..fcaf06bf 100644 --- a/src/lib/components/ui/sonner/index.ts +++ b/src/lib/components/ui/sonner/index.ts @@ -1 +1 @@ -export { default as Toaster } from "./sonner.svelte"; +export { default as Toaster } from './sonner.svelte'; diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte index 8050e049..06609dcb 100644 --- a/src/lib/components/ui/sonner/sonner.svelte +++ b/src/lib/components/ui/sonner/sonner.svelte @@ -1,20 +1,20 @@ + theme={$mode} + class="toaster group" + toastOptions={{ + classes: { + toast: + 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg', + description: 'group-[.toast]:text-muted-foreground', + actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground', + cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground' + } + }} + {...restProps} /> From 30cb61b966992497f8f9f7a7003e9600d544bf9b Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 13 Mar 2025 19:50:41 -0700 Subject: [PATCH 36/90] feat: Share modal --- src/lib/components/Actions.svelte | 47 +++++----------------- src/lib/components/CopyInput.svelte | 51 ++++++++++++++++++++++++ src/lib/components/MainMenu.svelte | 16 +++++--- src/lib/components/Navbar.svelte | 12 +++--- src/lib/components/Preset.svelte | 2 +- src/lib/components/Share.svelte | 41 +++++++++++++++++++ src/lib/components/ui/input/input.svelte | 7 ++-- src/lib/types.d.ts | 3 ++ src/lib/util/env.ts | 2 +- src/lib/util/state.ts | 20 +++++++++- src/lib/util/util.ts | 41 ++++++++++++++++++- src/routes/edit/+page.svelte | 13 +++--- 12 files changed, 187 insertions(+), 68 deletions(-) create mode 100644 src/lib/components/CopyInput.svelte create mode 100644 src/lib/components/Share.svelte diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte index 67c7b3f2..a3ba7fcc 100644 --- a/src/lib/components/Actions.svelte +++ b/src/lib/components/Actions.svelte @@ -6,8 +6,7 @@ import { browser } from '$app/environment'; import { waitForRender } from '$lib/util/autoSync'; import { env } from '$lib/util/env'; - import { pakoSerde } from '$lib/util/serde'; - import { stateStore } from '$lib/util/state'; + import { stateStore, urlsStore } from '$lib/util/state'; import { logEvent } from '$lib/util/stats'; import { version as FAVersion } from '@fortawesome/fontawesome-free/package.json'; import dayjs from 'dayjs'; @@ -16,6 +15,7 @@ import DownloadIcon from '~icons/material-symbols/download'; import ExternalLinkIcon from '~icons/material-symbols/open-in-new-rounded'; import WidthIcon from '~icons/material-symbols/width-rounded'; + import CopyInput from './CopyInput.svelte'; import { Separator } from './ui/separator'; const FONT_AWESOME_URL = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}/css/all.min.css`; @@ -151,12 +151,6 @@ ${svgString}`); }); }; - const onCopyMarkdown = () => { - document.querySelector('#markdown')?.select(); - document.execCommand('Copy'); - logEvent('copyMarkdown'); - }; - let gistURL = $state(''); stateStore.subscribe(({ loader }) => { if (loader?.type === 'gist') { @@ -173,10 +167,6 @@ ${svgString}`); logEvent('loadGist'); }; - let iUrl: string | undefined = $state(); - let svgUrl: string | undefined = $state(); - let krokiUrl: string | undefined = $state(); - let mdCode: string | undefined = $state(); let imageSizeMode: 'auto' | 'width' | 'height' = $state('auto'); $effect(() => { @@ -187,16 +177,8 @@ ${svgString}`); let imageSize = $state(1080); - let isNetlify = $state(false); - if (browser && ['mermaid.live', 'netlify'].some((path) => window.location.host.includes(path))) { - isNetlify = true; - } - stateStore.subscribe(({ code, serialized }) => { - iUrl = `${rendererUrl}/img/${serialized}?type=png`; - svgUrl = `${rendererUrl}/svg/${serialized}`; - krokiUrl = `${krokiRendererUrl}/mermaid/svg/${pakoSerde.serialize(code)}`; - mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#${serialized})`; - }); + const isNetlify = + browser && ['mermaid.live', 'netlify'].some((path) => window.location.host.includes(path)); {#snippet dualActionButton(text: string, download: (event: Event) => unknown, url?: string)} @@ -221,13 +203,6 @@ ${svgString}`); Width Height - - - {#if imageSizeMode !== 'auto'}
@@ -239,14 +214,13 @@ ${svgString}`); max="10000" disabled={imageSizeMode === 'auto'} bind:value={imageSize} /> -
- {@render dualActionButton('PNG', onDownloadPNG, iUrl)} - {@render dualActionButton('SVG', onDownloadSVG, svgUrl)} + {@render dualActionButton('PNG', onDownloadPNG, $urlsStore.png)} + {@render dualActionButton('SVG', onDownloadSVG, $urlsStore.svg)} {#if krokiRendererUrl} - + @@ -259,11 +233,8 @@ ${svgString}`); Copy Image {/if} - {#if rendererUrl} -
- - -
+ {#if $urlsStore.mdCode} + {/if}
diff --git a/src/lib/components/CopyInput.svelte b/src/lib/components/CopyInput.svelte new file mode 100644 index 00000000..e4068825 --- /dev/null +++ b/src/lib/components/CopyInput.svelte @@ -0,0 +1,51 @@ + + +
+ { + e.currentTarget.setSelectionRange(0, e.currentTarget.value.length); + }} /> + +
diff --git a/src/lib/components/MainMenu.svelte b/src/lib/components/MainMenu.svelte index b0765d95..cf9035a0 100644 --- a/src/lib/components/MainMenu.svelte +++ b/src/lib/components/MainMenu.svelte @@ -1,6 +1,8 @@ - +
{#each diagramOrder as sample} - diff --git a/src/lib/components/View.svelte b/src/lib/components/View.svelte index 9b00f6f5..542cd263 100644 --- a/src/lib/components/View.svelte +++ b/src/lib/components/View.svelte @@ -12,7 +12,10 @@ import { Svg2Roughjs } from 'svg2roughjs'; import SyncIcon from '~icons/fa6-solid/arrows-rotate'; - let { panZoomState = new PanZoomState() }: { panZoomState?: PanZoomState } = $props(); + let { + panZoomState = new PanZoomState(), + shouldShowGrid = true + }: { panZoomState?: PanZoomState; shouldShowGrid?: boolean } = $props(); let code = ''; let config = ''; let container: HTMLDivElement | undefined = $state(); @@ -162,7 +165,7 @@
diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts index f449b1d8..416792d7 100644 --- a/src/lib/util/state.ts +++ b/src/lib/util/state.ts @@ -128,6 +128,7 @@ export const urlsStore = derived([stateStore], ([{ code, serialized }]) => { svg: `${rendererUrl}/svg/${serialized}`, kroki: `${krokiRendererUrl}/mermaid/svg/${pakoSerde.serialize(code)}`, mdCode: `[![](${png})](${window.location.protocol}//${window.location.host}${window.location.pathname}#${serialized})`, + view: `/view#${serialized}`, mermaidChart: { save: `${MCBaseURL}/app/plugin/save?state=${serialized}`, playground: `${MCBaseURL}/play#${serialized}` diff --git a/src/routes/view/+page.svelte b/src/routes/view/+page.svelte index b2d25334..3a794b6b 100644 --- a/src/routes/view/+page.svelte +++ b/src/routes/view/+page.svelte @@ -9,4 +9,4 @@ - + From b624ecb859298a1759f562c36509d8c0755acada Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 13 Mar 2025 20:21:38 -0700 Subject: [PATCH 40/90] feat: Error popup --- src/lib/components/Editor.svelte | 31 ++++++++++++++++++++++++------- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte index b136aa6d..3feede90 100644 --- a/src/lib/components/Editor.svelte +++ b/src/lib/components/Editor.svelte @@ -8,10 +8,11 @@ + + + + + {@render children()} + + +

+ Opens a new tab in Mermaid Chart +

+ + + diff --git a/src/lib/components/MainMenu.svelte b/src/lib/components/MainMenu.svelte index cf9035a0..329ea838 100644 --- a/src/lib/components/MainMenu.svelte +++ b/src/lib/components/MainMenu.svelte @@ -1,4 +1,5 @@ + + diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte index 7ea8f80e..14cce1ff 100644 --- a/src/routes/edit/+page.svelte +++ b/src/routes/edit/+page.svelte @@ -1,5 +1,6 @@ diff --git a/src/lib/components/View.svelte b/src/lib/components/View.svelte index 542cd263..67a29c6f 100644 --- a/src/lib/components/View.svelte +++ b/src/lib/components/View.svelte @@ -10,7 +10,7 @@ import { mode } from 'mode-watcher'; import { onMount } from 'svelte'; import { Svg2Roughjs } from 'svg2roughjs'; - import SyncIcon from '~icons/fa6-solid/arrows-rotate'; + import SyncIcon from '~icons/material-symbols/sync-rounded'; let { panZoomState = new PanZoomState(), diff --git a/yarn.lock b/yarn.lock index b42d4a4a..dd6f2cf2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -471,13 +471,19 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3" integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA== -"@iconify/json@^2.2.315": - version "2.2.315" - resolved "https://registry.yarnpkg.com/@iconify/json/-/json-2.2.315.tgz#7e201f0d985c7cc6ccf685c25da811d7c23d38a1" - integrity sha512-ST+F6ZF+IpKm2eaABWftJ4stWbB8pcEd9Q5bshW8hcIW/kcvzwit3fI/5x3tFFscWUCxHGNU3JNVMtNlodHweQ== +"@iconify-json/material-symbols@^1.2.15": + version "1.2.15" + resolved "https://registry.yarnpkg.com/@iconify-json/material-symbols/-/material-symbols-1.2.15.tgz#b03f239056ac04ec45d21a687d21e099d884467b" + integrity sha512-KkHRnMh1s08N1Olf3xk+z3ZIrke/7Ys3uUIMfKuSkZPbNssG4IApKkJOV5po6mg6oxMooXdNpab4PS0S5LMSOA== + dependencies: + "@iconify/types" "*" + +"@iconify-json/mdi@^1.2.3": + version "1.2.3" + resolved "https://registry.yarnpkg.com/@iconify-json/mdi/-/mdi-1.2.3.tgz#5e4ee9d8c8aaad04381c8cc6c6edbe3327f031b5" + integrity sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg== dependencies: "@iconify/types" "*" - pathe "^1.1.2" "@iconify/types@*", "@iconify/types@^2.0.0": version "2.0.0" From 9e453e84f66f155448dedd8a86cdac927a8a39be Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 13 Mar 2025 23:17:06 -0700 Subject: [PATCH 43/90] feat: MermaidChart tooltip --- src/lib/components/MCTooltip.svelte | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/lib/components/MCTooltip.svelte b/src/lib/components/MCTooltip.svelte index eec5c4ff..f80abb62 100644 --- a/src/lib/components/MCTooltip.svelte +++ b/src/lib/components/MCTooltip.svelte @@ -12,9 +12,12 @@ {@render children()} -

- Opens a new tab in Mermaid Chart -

+
+ + + Opens a new tab in
MermaidChart.com
+ +
From f951ad055b2f1248aef5b62cb6351e83354f4961 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 13 Mar 2025 23:35:59 -0700 Subject: [PATCH 44/90] feat: Remove autoSync, add grid toggle --- src/lib/components/SyncRoughToolbar.svelte | 37 ++++++---------------- src/lib/components/View.svelte | 13 ++------ src/lib/types.d.ts | 3 +- src/lib/util/autoSync.ts | 6 ---- src/lib/util/fileLoaders/loader.ts | 7 ++-- src/lib/util/state.ts | 4 +-- src/routes/edit/+page.svelte | 2 +- 7 files changed, 20 insertions(+), 52 deletions(-) diff --git a/src/lib/components/SyncRoughToolbar.svelte b/src/lib/components/SyncRoughToolbar.svelte index dea5fc41..0f56fd84 100644 --- a/src/lib/components/SyncRoughToolbar.svelte +++ b/src/lib/components/SyncRoughToolbar.svelte @@ -1,43 +1,26 @@ - diff --git a/src/lib/components/View.svelte b/src/lib/components/View.svelte index 67a29c6f..0068c074 100644 --- a/src/lib/components/View.svelte +++ b/src/lib/components/View.svelte @@ -5,12 +5,10 @@ import { render as renderDiagram } from '$lib/util/mermaid'; import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state'; import { logEvent, saveStatistics } from '$lib/util/stats'; - import { cmdKey } from '$lib/util/util'; import type { MermaidConfig } from 'mermaid'; import { mode } from 'mode-watcher'; import { onMount } from 'svelte'; import { Svg2Roughjs } from 'svg2roughjs'; - import SyncIcon from '~icons/material-symbols/sync-rounded'; let { panZoomState = new PanZoomState(), @@ -59,10 +57,7 @@ error = false; let diagramType: string | undefined; try { - if (container && state && (state.updateDiagram || state.autoSync)) { - if (!state.autoSync) { - $inputStateStore.updateDiagram = false; - } + if (container && state?.updateDiagram) { outOfSync = false; manualUpdate = true; // Do not render if there is no change in Code/Config/PanZoom @@ -154,11 +149,7 @@ class="bg-base-100 absolute z-10 w-full bg-opacity-80 p-2 text-left font-mono text-yellow-600" id="errorContainer"> Diagram out of sync.
- {#if $stateStore.autoSync} - It will be updated automatically. - {:else} - Press (Sync button) or {cmdKey} + Enter to sync. - {/if} + It will be updated automatically.
{/if} diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts index 72c6b2ad..ae8db03f 100644 --- a/src/lib/types.d.ts +++ b/src/lib/types.d.ts @@ -26,8 +26,9 @@ export interface State { code: string; mermaid: string; updateDiagram: boolean; - autoSync: boolean; rough: boolean; + // All new options must be optional, as users would have old states saved + grid?: boolean; editorMode?: EditorMode; panZoom?: boolean; pan?: { x: number; y: number }; diff --git a/src/lib/util/autoSync.ts b/src/lib/util/autoSync.ts index 7b7faf06..ca5557e6 100644 --- a/src/lib/util/autoSync.ts +++ b/src/lib/util/autoSync.ts @@ -1,6 +1,4 @@ import debounce from 'lodash-es/debounce'; -import { get } from 'svelte/store'; -import { stateStore } from './state'; let shouldSync = true; let updater: () => void; @@ -16,10 +14,6 @@ const debouncedRender = debounce(() => { export const recordRenderTime = (renderTimeMs: number, updaterFunction: () => void): void => { resolveRenderPromise?.(); - const { autoSync } = get(stateStore); - if (!autoSync) { - return; - } updater = updaterFunction; const isSlow = renderTimeMs > slowRenderThreshold; if (!shouldSync) { diff --git a/src/lib/util/fileLoaders/loader.ts b/src/lib/util/fileLoaders/loader.ts index ce2ea348..091ba545 100644 --- a/src/lib/util/fileLoaders/loader.ts +++ b/src/lib/util/fileLoaders/loader.ts @@ -1,7 +1,7 @@ -import { loadGistData } from './gist'; -import { updateCodeStore, defaultState } from '$lib/util/state'; -import { fetchText } from '$lib/util/util'; import type { Loader, State } from '$lib/types'; +import { defaultState, updateCodeStore } from '$lib/util/state'; +import { fetchText } from '$lib/util/util'; +import { loadGistData } from './gist'; const loaders: Record = { gist: loadGistData @@ -52,7 +52,6 @@ export const loadDataFromUrl = async (): Promise => { loaded && updateCodeStore({ ...state, - autoSync: true, updateDiagram: true }); }; diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts index 416792d7..e2eff367 100644 --- a/src/lib/util/state.ts +++ b/src/lib/util/state.ts @@ -24,9 +24,9 @@ export const defaultState: State = { mermaid: formatJSON({ theme: 'default' }), - autoSync: true, rough: false, - updateDiagram: true + updateDiagram: true, + grid: true }; const urlParseFailedState = `flowchart TD diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte index 14cce1ff..955bcc62 100644 --- a/src/routes/edit/+page.svelte +++ b/src/routes/edit/+page.svelte @@ -181,7 +181,7 @@ - +
From 02ef7eab787a7cb12043582f0054828de17aaf98 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 14 Mar 2025 11:03:10 -0700 Subject: [PATCH 45/90] chore: Simplify docs button --- .eslintrc.cjs | 11 ++- package.json | 1 + src/lib/components/DiagramDocButton.svelte | 106 +++++++++++++++++++++ src/lib/components/Preset.svelte | 4 +- src/lib/types.d.ts | 1 + src/lib/util/mermaid.ts | 20 +++- src/lib/util/state.ts | 3 +- src/routes/edit/+page.svelte | 95 +----------------- vite.config.js | 15 ++- yarn.lock | 9 +- 10 files changed, 167 insertions(+), 98 deletions(-) create mode 100644 src/lib/components/DiagramDocButton.svelte diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 5e9b065b..7d7a177d 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -11,7 +11,15 @@ module.exports = { 'plugin:svelte/prettier', 'prettier' ], - plugins: ['tailwindcss', '@typescript-eslint', 'es', 'vitest', 'no-only-tests', 'unicorn'], + plugins: [ + 'tailwindcss', + '@typescript-eslint', + 'es', + 'vitest', + 'no-only-tests', + 'sort-keys', + 'unicorn' + ], ignorePatterns: [ 'docs/*', '*.cjs', @@ -54,6 +62,7 @@ module.exports = { es2020: true }, rules: { + 'sort-keys': 'off', '@typescript-eslint/ban-ts-comment': [ 'error', { diff --git a/package.json b/package.json index 8b4ef1bd..511bc4a8 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "eslint-plugin-es": "^4.1.0", "eslint-plugin-no-only-tests": "^3.1.0", "eslint-plugin-postcss-modules": "^2.0.0", + "eslint-plugin-sort-keys": "^2.3.5", "eslint-plugin-svelte": "^2.45.1", "eslint-plugin-tailwindcss": "^3.13.1", "eslint-plugin-unicorn": "^50.0.1", diff --git a/src/lib/components/DiagramDocButton.svelte b/src/lib/components/DiagramDocButton.svelte new file mode 100644 index 00000000..70cfe670 --- /dev/null +++ b/src/lib/components/DiagramDocButton.svelte @@ -0,0 +1,106 @@ + + + diff --git a/src/lib/components/Preset.svelte b/src/lib/components/Preset.svelte index 78925faf..27ccc804 100644 --- a/src/lib/components/Preset.svelte +++ b/src/lib/components/Preset.svelte @@ -95,7 +95,7 @@ Popularisation British popular psychology author Tony Buzan Research - On effectivness
and features + On effectiveness
and features On Automatic creation Uses Creative techniques @@ -201,8 +201,6 @@ packet-beta logEvent('loadSampleDiagram', { diagramType }); }; - // Adding in this array will add an icon to the preset menu - const newDiagrams: SampleTypes[] = ['QuadrantChart', 'XYChart', 'Block', 'Packet']; const diagramOrder: SampleTypes[] = [ 'Flow', 'Sequence', diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts index ae8db03f..b5ef884a 100644 --- a/src/lib/types.d.ts +++ b/src/lib/types.d.ts @@ -38,6 +38,7 @@ export interface State { export interface ValidatedState extends State { editorMode: EditorMode; + diagramType?: string; error?: Error; errorMarkers: MarkerData[]; serialized: string; diff --git a/src/lib/util/mermaid.ts b/src/lib/util/mermaid.ts index c4a5c6c5..12693c10 100644 --- a/src/lib/util/mermaid.ts +++ b/src/lib/util/mermaid.ts @@ -18,6 +18,24 @@ export const render = async ( return await mermaid.render(id, code); }; -export const parse = async (code: string): Promise => { +export const parse = async (code: string) => { return await mermaid.parse(code); }; + +export const standardizeDiagramType = (diagramType: string) => { + switch (diagramType) { + case 'class': + case 'classDiagram': { + return 'classDiagram'; + } + case 'graph': + case 'flowchart': + case 'flowchart-elk': + case 'flowchart-v2': { + return 'flowchart'; + } + default: { + return diagramType; + } + } +}; diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts index e2eff367..677b17e4 100644 --- a/src/lib/util/state.ts +++ b/src/lib/util/state.ts @@ -65,7 +65,8 @@ const processState = async (state: State) => { // No changes should be done to fields part of `state`. try { processed.serialized = serializeState(state); - await parse(state.code); + const { diagramType } = await parse(state.code); + processed.diagramType = diagramType; JSON.parse(state.mermaid); } catch (error) { processed.error = error as Error; diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte index 955bcc62..1d00313d 100644 --- a/src/routes/edit/+page.svelte +++ b/src/routes/edit/+page.svelte @@ -1,4 +1,5 @@ + bind:ref + {sideOffset} + class={cn( + 'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', + className + )} + {...restProps} /> From feb3ba88a53e31b9eccbdd422a77d0d6f64420ef Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 14 Mar 2025 11:24:44 -0700 Subject: [PATCH 47/90] format: eslint + prettier --- .eslintrc.cjs | 7 +- src/lib/components/Actions.svelte | 2 +- src/lib/components/Card/Tabs.svelte | 9 - src/lib/components/CopyInput.svelte | 4 +- ...elte => DiagramDocumentationButton.svelte} | 0 src/lib/components/DropdownNavMenu.svelte | 6 +- src/lib/components/Navbar.svelte | 9 - src/lib/components/Preset.svelte | 168 ++-- src/lib/components/View.svelte | 2 +- src/lib/components/ui/button/button.svelte | 2 +- src/lib/util/env.ts | 6 +- src/lib/util/fileLoaders/gist.ts | 14 +- src/lib/util/fileLoaders/loader.ts | 8 +- src/lib/util/monacoExtra.ts | 764 +++++++++--------- src/lib/util/panZoom.ts | 12 +- src/lib/util/persist.ts | 14 +- src/lib/util/state.ts | 34 +- src/lib/util/stats.ts | 24 +- src/routes/edit/+page.svelte | 10 +- 19 files changed, 540 insertions(+), 555 deletions(-) rename src/lib/components/{DiagramDocButton.svelte => DiagramDocumentationButton.svelte} (100%) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index b13edb48..8300399a 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -53,7 +53,9 @@ module.exports = { files: ['**/components/ui/**'], rules: { 'unicorn/prefer-export-from': 'off', - 'unicorn/prevent-abbreviations': 'off' + 'unicorn/prevent-abbreviations': 'off', + 'unicorn/explicit-length-check': 'off', + 'sort-keys/sort-keys-fix': 'off' } } ], @@ -69,7 +71,7 @@ module.exports = { es2020: true }, rules: { - 'sort-keys': 'error', + 'sort-keys/sort-keys-fix': ['error', 'asc', { minKeys: 5 }], '@typescript-eslint/ban-ts-comment': [ 'error', { @@ -104,6 +106,7 @@ module.exports = { k: true, param: true, Props: true, + props: true, req: true, res: true, str: true, diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte index 9afcd5d8..77a91ffc 100644 --- a/src/lib/components/Actions.svelte +++ b/src/lib/components/Actions.svelte @@ -20,7 +20,7 @@ const FONT_AWESOME_URL = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}/css/all.min.css`; - const { krokiRendererUrl, rendererUrl } = env; + const { krokiRendererUrl } = env; type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void; const getFileName = (extension: string) => diff --git a/src/lib/components/Card/Tabs.svelte b/src/lib/components/Card/Tabs.svelte index d945499e..b38174d0 100644 --- a/src/lib/components/Card/Tabs.svelte +++ b/src/lib/components/Card/Tabs.svelte @@ -50,12 +50,3 @@ {/each}
- - diff --git a/src/lib/components/CopyInput.svelte b/src/lib/components/CopyInput.svelte index e4068825..6950ec1d 100644 --- a/src/lib/components/CopyInput.svelte +++ b/src/lib/components/CopyInput.svelte @@ -21,8 +21,8 @@ { - e.currentTarget.setSelectionRange(0, e.currentTarget.value.length); + onclick={(event) => { + event.currentTarget.setSelectionRange(0, event.currentTarget.value.length); }} />