From e1ba26d7df80d81a1fedff07736f95d32f6061a4 Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 5 Mar 2025 11:17:38 +0100 Subject: [PATCH] feat: refactor card grid component --- package.json | 2 +- pnpm-lock.yaml | 18 +-- src/lib/components/cardGrid.svelte | 19 +-- .../template-[template]/+page.svelte | 11 +- .../settings/updateBuildSettings.svelte | 119 ++++++++++++------ 5 files changed, 95 insertions(+), 74 deletions(-) diff --git a/package.json b/package.json index 599db568c..ffd46b672 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f57e0157 ", "@appwrite.io/pink-legacy": "^1.0.2", - "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3eb4dec", + "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@d1c8ba7", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.38.0", "@stripe/stripe-js": "^3.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c643202b5..3beeeee64 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: ^1.0.2 version: 1.0.2 '@appwrite.io/pink-svelte': - specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3eb4dec - version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3eb4dec(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) + specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@d1c8ba7 + version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@d1c8ba7(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 @@ -215,8 +215,8 @@ packages: resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ac51fcb} version: 1.2.1 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3eb4dec6693fb89b7704bbc361b0cc4518fdc29d': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3eb4dec6693fb89b7704bbc361b0cc4518fdc29d} + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@d1c8ba7e5842eca437ed583b635a6c712f73e6ce': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@d1c8ba7e5842eca437ed583b635a6c712f73e6ce} version: 1.0.0-next.7 peerDependencies: svelte: ^4.0.0 @@ -236,8 +236,8 @@ packages: '@appwrite.io/pink-legacy@1.0.2': resolution: {integrity: sha512-1AYNcfbV+x0Tyj56CoieSq5g7+u+7F5/LDVN/z+Hx1kp9gj7xc1eT39Dy832xxfihImF6ksjp0FXEMVSBR8cew==} - '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3eb4dec': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3eb4dec} + '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@d1c8ba7': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@d1c8ba7} version: 1.0.0-next.85 peerDependencies: react-dom: ^18.0.0 @@ -4099,7 +4099,7 @@ snapshots: '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ac51fcb': {} - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3eb4dec6693fb89b7704bbc361b0cc4518fdc29d(svelte@4.2.19)': + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@d1c8ba7e5842eca437ed583b635a6c712f73e6ce(svelte@4.2.19)': dependencies: svelte: 4.2.19 @@ -4116,9 +4116,9 @@ snapshots: '@appwrite.io/pink-icons': 1.0.0 the-new-css-reset: 1.11.3 - '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3eb4dec(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': + '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@d1c8ba7(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': dependencies: - '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3eb4dec6693fb89b7704bbc361b0cc4518fdc29d(svelte@4.2.19) + '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@d1c8ba7e5842eca437ed583b635a6c712f73e6ce(svelte@4.2.19) '@floating-ui/dom': 1.6.13 '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19) '@melt-ui/svelte': 0.86.3(svelte@4.2.19) diff --git a/src/lib/components/cardGrid.svelte b/src/lib/components/cardGrid.svelte index 54d23375e..031b30f0d 100644 --- a/src/lib/components/cardGrid.svelte +++ b/src/lib/components/cardGrid.svelte @@ -7,19 +7,19 @@ -
-
+ + {#if $$slots.default} {/if} -
-
+ + -
-
+ + {#if $$slots.actions && !hideFooter} @@ -31,10 +31,3 @@ {/if} - - diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte index fec535f81..8ac8b5d94 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte @@ -113,15 +113,7 @@ message: 'Please select a repository' }); return; - } - // else if (!domainIsValid) { - // addNotification({ - // type: 'error', - // message: 'Please enter a valid domain' - // }); - // return; - // } - else { + } else { try { domain = await buildVerboseDomain( data.template.name, @@ -253,7 +245,6 @@ {#if data.template.variables?.length} {/if} - {:else} {@const options = data.template.frameworks.map((framework) => { diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte index 653953ede..c351f0928 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte @@ -7,8 +7,11 @@ import { addNotification } from '$lib/stores/notifications'; import { sdk } from '$lib/stores/sdk'; import { onMount } from 'svelte'; - import { BuildRuntime, Framework, type Models } from '@appwrite.io/console'; - import { Layout } from '@appwrite.io/pink-svelte'; + import { Adapter, BuildRuntime, Framework, type Models } from '@appwrite.io/console'; + import { Card, Fieldset, InlineCode, Layout } from '@appwrite.io/pink-svelte'; + import { iconPath } from '$lib/stores/app'; + import { getFrameworkIcon } from '../../store'; + import { Link } from '$lib/elements'; export let site: Models.Site; export let frameworks: Models.Framework[]; @@ -18,6 +21,7 @@ let outputDirectory = undefined; let frameworkKey = site.framework; let isButtonDisabled = true; + let adapter: Adapter; onMount(async () => { selectedFramework ??= frameworks.find((framework) => framework.key === site.framework); @@ -66,7 +70,7 @@ } } - $: frameworkData = frameworks.find((framework) => framework.key === framework.key); + $: frameworkData = frameworks.find((framework) => framework.key === frameworkKey); $: if ( installCommand === site?.installCommand && buildCommand === site?.buildCommand && @@ -85,44 +89,77 @@ Default build settings are configured based on your framework, ensuring optimal performance. Adjust the settings here if needed. - ({ - value: framework.key, - label: framework.name - }))} - on:change={() => { - selectedFramework = frameworks.find( - (framework) => framework.key === frameworkKey - ); - }} /> - - - - - - - - - - - - + + ({ + value: framework.key, + label: framework.name, + leadingHtml: `` + }))} + on:change={() => { + selectedFramework = frameworks.find( + (framework) => framework.key === frameworkKey + ); + }} /> + + + Use adapter in your {frameworkData.name} + config file. Learn more. + + + Use adapter in your {frameworkData.name} + config file. Learn more. + + +
+ + + + + + + + + + + + +