From c9e4aed8bd0e8219dd30979c54f1871ae707d7fb Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Thu, 20 Feb 2025 10:12:01 -0500 Subject: [PATCH 1/8] feat(repo): Add appearance variables to sandbox --- packages/clerk-js/sandbox/app.ts | 59 ++++++++++++ packages/clerk-js/sandbox/template.html | 114 +++++++++++++++++++++++- 2 files changed, 172 insertions(+), 1 deletion(-) diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts index 780e1817edd..0cc0862773f 100644 --- a/packages/clerk-js/sandbox/app.ts +++ b/packages/clerk-js/sandbox/app.ts @@ -125,8 +125,66 @@ function addCurrentRouteIndicator(currentRoute: string) { link.setAttribute('aria-current', 'page'); } +function appearanceVariableOptions() { + assertClerkIsLoaded(Clerk); + + const colorInputIds = [ + 'colorPrimary', + 'colorNeutral', + 'colorBackground', + 'colorTextOnPrimaryBackground', + 'colorDanger', + 'colorSuccess', + 'colorWarning', + 'colorText', + 'colorTextSecondary', + 'colorInputText', + 'colorInputBackground', + 'colorShimmer', + ] as const; + + const colorInputs = colorInputIds.reduce( + (acc, id) => { + const element = document.getElementById(id) as HTMLInputElement | null; + if (!element) { + throw new Error(`Could not find input element with id: ${id}`); + } + acc[id] = element; + return acc; + }, + {} as Record<(typeof colorInputIds)[number], HTMLInputElement>, + ); + + Object.entries(colorInputs).forEach(([key, input]) => { + const savedColor = sessionStorage.getItem(key); + if (savedColor) { + input.value = savedColor; + } + }); + + const renderColors = () => { + Clerk.__unstable__updateProps({ + appearance: { + variables: Object.fromEntries( + Object.entries(colorInputs).map(([key, input]) => { + sessionStorage.setItem(key, input.value); + return [key, input.value]; + }), + ), + }, + }); + }; + + Object.values(colorInputs).forEach(input => { + input.addEventListener('change', renderColors); + }); + + return { renderColors }; +} + (async () => { assertClerkIsLoaded(Clerk); + const { renderColors } = appearanceVariableOptions(); const routes = { '/': () => { @@ -185,6 +243,7 @@ function addCurrentRouteIndicator(currentRoute: string) { signUpUrl: '/sign-up', }); renderCurrentRoute(); + renderColors(); } else { console.error(`Unknown route: "${route}".`); } diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html index 9193428e975..c171fc1e7fc 100644 --- a/packages/clerk-js/sandbox/template.html +++ b/packages/clerk-js/sandbox/template.html @@ -269,8 +269,120 @@ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
Date: Thu, 20 Feb 2025 10:19:00 -0500 Subject: [PATCH 2/8] wip --- packages/clerk-js/sandbox/template.html | 40 ++++++++++--------------- 1 file changed, 15 insertions(+), 25 deletions(-) diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html index c171fc1e7fc..2332c0993b3 100644 --- a/packages/clerk-js/sandbox/template.html +++ b/packages/clerk-js/sandbox/template.html @@ -270,8 +270,9 @@
-
-
+
Date: Thu, 20 Feb 2025 10:50:59 -0500 Subject: [PATCH 3/8] changeset --- .changeset/witty-yaks-poke.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .changeset/witty-yaks-poke.md diff --git a/.changeset/witty-yaks-poke.md b/.changeset/witty-yaks-poke.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/witty-yaks-poke.md @@ -0,0 +1,2 @@ +--- +--- From 9679bc8f5da0310b83be2eb026bb2f540f102748 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Thu, 20 Feb 2025 11:47:48 -0500 Subject: [PATCH 4/8] wip --- packages/clerk-js/sandbox/app.ts | 7 +++++++ packages/clerk-js/sandbox/template.html | 14 ++++++++++---- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts index 0cc0862773f..a67d483d9bd 100644 --- a/packages/clerk-js/sandbox/app.ts +++ b/packages/clerk-js/sandbox/app.ts @@ -186,6 +186,13 @@ function appearanceVariableOptions() { assertClerkIsLoaded(Clerk); const { renderColors } = appearanceVariableOptions(); + const sidebars = document.querySelectorAll('[data-sidebar]'); + document.addEventListener('keydown', e => { + if (e.key === '/') { + sidebars.forEach(s => s.classList.toggle('hidden')); + } + }); + const routes = { '/': () => { mountIndex(app); diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html index 2332c0993b3..e044a734152 100644 --- a/packages/clerk-js/sandbox/template.html +++ b/packages/clerk-js/sandbox/template.html @@ -131,8 +131,11 @@ }; - -
+ +
-
+
Colors
Date: Thu, 20 Feb 2025 12:21:15 -0500 Subject: [PATCH 5/8] wip --- packages/clerk-js/sandbox/template.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html index e044a734152..f7c537448fb 100644 --- a/packages/clerk-js/sandbox/template.html +++ b/packages/clerk-js/sandbox/template.html @@ -131,7 +131,7 @@ }; - +
Date: Thu, 20 Feb 2025 12:23:44 -0500 Subject: [PATCH 6/8] wip --- packages/clerk-js/sandbox/template.html | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html index f7c537448fb..063463050d0 100644 --- a/packages/clerk-js/sandbox/template.html +++ b/packages/clerk-js/sandbox/template.html @@ -131,7 +131,7 @@ }; - +
-
+
Date: Thu, 20 Feb 2025 13:00:40 -0500 Subject: [PATCH 7/8] wip --- packages/clerk-js/sandbox/template.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html index 063463050d0..d48082df911 100644 --- a/packages/clerk-js/sandbox/template.html +++ b/packages/clerk-js/sandbox/template.html @@ -131,7 +131,7 @@ }; - +
Date: Thu, 20 Feb 2025 15:13:41 -0500 Subject: [PATCH 8/8] wip --- packages/clerk-js/sandbox/app.ts | 33 ++++++++++++++++--------- packages/clerk-js/sandbox/template.html | 28 ++++++++++++++++++++- 2 files changed, 49 insertions(+), 12 deletions(-) diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts index a67d483d9bd..ecfab6f9525 100644 --- a/packages/clerk-js/sandbox/app.ts +++ b/packages/clerk-js/sandbox/app.ts @@ -128,7 +128,9 @@ function addCurrentRouteIndicator(currentRoute: string) { function appearanceVariableOptions() { assertClerkIsLoaded(Clerk); - const colorInputIds = [ + const resetVariablesBtn = document.getElementById('resetVariablesBtn'); + + const variableInputIds = [ 'colorPrimary', 'colorNeutral', 'colorBackground', @@ -141,9 +143,11 @@ function appearanceVariableOptions() { 'colorInputText', 'colorInputBackground', 'colorShimmer', + 'spacingUnit', + 'borderRadius', ] as const; - const colorInputs = colorInputIds.reduce( + const variableInputs = variableInputIds.reduce( (acc, id) => { const element = document.getElementById(id) as HTMLInputElement | null; if (!element) { @@ -152,21 +156,21 @@ function appearanceVariableOptions() { acc[id] = element; return acc; }, - {} as Record<(typeof colorInputIds)[number], HTMLInputElement>, + {} as Record<(typeof variableInputIds)[number], HTMLInputElement>, ); - Object.entries(colorInputs).forEach(([key, input]) => { + Object.entries(variableInputs).forEach(([key, input]) => { const savedColor = sessionStorage.getItem(key); if (savedColor) { input.value = savedColor; } }); - const renderColors = () => { + const updateVariables = () => { Clerk.__unstable__updateProps({ appearance: { variables: Object.fromEntries( - Object.entries(colorInputs).map(([key, input]) => { + Object.entries(variableInputs).map(([key, input]) => { sessionStorage.setItem(key, input.value); return [key, input.value]; }), @@ -175,16 +179,23 @@ function appearanceVariableOptions() { }); }; - Object.values(colorInputs).forEach(input => { - input.addEventListener('change', renderColors); + Object.values(variableInputs).forEach(input => { + input.addEventListener('change', updateVariables); + }); + + resetVariablesBtn?.addEventListener('click', () => { + Object.values(variableInputs).forEach(input => { + input.value = input.defaultValue; + }); + updateVariables(); }); - return { renderColors }; + return { updateVariables }; } (async () => { assertClerkIsLoaded(Clerk); - const { renderColors } = appearanceVariableOptions(); + const { updateVariables } = appearanceVariableOptions(); const sidebars = document.querySelectorAll('[data-sidebar]'); document.addEventListener('keydown', e => { @@ -250,7 +261,7 @@ function appearanceVariableOptions() { signUpUrl: '/sign-up', }); renderCurrentRoute(); - renderColors(); + updateVariables(); } else { console.error(`Unknown route: "${route}".`); } diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html index d48082df911..eac5e00734a 100644 --- a/packages/clerk-js/sandbox/template.html +++ b/packages/clerk-js/sandbox/template.html @@ -277,7 +277,15 @@ class="fixed inset-y-0 right-0 w-72 overflow-y-auto border-l border-gray-100 bg-white px-2 py-4 max-lg:hidden" >
- Colors +
+ Variables + +
+ +