feat: refactor card grid component

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",

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)

src/lib/components/cardGrid.svelte

@@ -7,19 +7,19 @@
 
 <Card.Base>
     <Layout.Stack gap="xl" justifyContent="space-around">
-        <div class="common-section grid-1-2" class:hideOverflow>
-            <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-4">
+        <Layout.GridFraction gap="xxxl" rowGap="xl" start={1} end={2}>
+            <Layout.Stack gap="xxs">
                 <Typography.Title size="s"><slot name="title" /></Typography.Title>
                 {#if $$slots.default}
                     <Typography.Text>
                         <slot />
                     </Typography.Text>
                 {/if}
-            </div>
-            <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0">
+            </Layout.Stack>
+            <Layout.Stack gap="l">
                 <slot name="aside" />
-            </div>
-        </div>
+            </Layout.Stack>
+        </Layout.GridFraction>
         {#if $$slots.actions && !hideFooter}
             <span
                 style="margin-left: calc(-1* var(--space-9));margin-right: calc(-1* var(--space-9));width:auto;">
@@ -31,10 +31,3 @@
         {/if}
     </Layout.Stack>
 </Card.Base>
-
-<style lang="scss">
-    .hideOverflow > * {
-        width: 100%;
-        overflow: hidden;
-    }
-</style>

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}
                         <Configuration bind:variables templateVariables={data.template.variables} />
                     {/if}
-                    <!-- <Domain bind:domain bind:domainIsValid /> -->
                 </Layout.Stack>
             {:else}
                 {@const options = data.template.frameworks.map((framework) => {

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.
         <svelte:fragment slot="aside">
-            <InputSelect
-                id="framework"
-                label="Framework"
-                placeholder="Select framework"
-                bind:value={frameworkKey}
-                options={frameworks.map((framework) => ({
-                    value: framework.key,
-                    label: framework.name
-                }))}
-                on:change={() => {
-                    selectedFramework = frameworks.find(
-                        (framework) => framework.key === frameworkKey
-                    );
-                }} />
-
-            <Layout.Stack gap="s" direction="row" alignItems="flex-end">
-                <InputText
-                    id="installCommand"
-                    label="Install command"
-                    bind:value={installCommand}
-                    placeholder={frameworkData.adapters[site.adapter].defaultInstallCommand} />
-                <Button secondary size="s" on:click={() => (installCommand = '')}>Reset</Button>
-            </Layout.Stack>
-            <Layout.Stack gap="s" direction="row" alignItems="flex-end">
-                <InputText
-                    id="buildCommand"
-                    label="Build command"
-                    bind:value={buildCommand}
-                    placeholder={frameworkData.adapters[site.adapter].defaultBuildCommand} />
-                <Button secondary size="s" on:click={() => (buildCommand = '')}>Reset</Button>
-            </Layout.Stack>
-            <Layout.Stack gap="s" direction="row" alignItems="flex-end">
-                <InputText
-                    id="outputDirectory"
-                    label="Output directory"
-                    bind:value={outputDirectory}
-                    placeholder={frameworkData.adapters[site.adapter].defaultOutputDirectory} />
-                <Button secondary size="s" on:click={() => (outputDirectory = '')}>Reset</Button>
+            <Layout.Stack gap="xl">
+                <InputSelect
+                    required
+                    id="framework"
+                    label="Framework"
+                    placeholder="Select framework"
+                    bind:value={frameworkKey}
+                    options={frameworks.map((framework) => ({
+                        value: framework.key,
+                        label: framework.name,
+                        leadingHtml: `<img src='${$iconPath(getFrameworkIcon(framework.key), 'color')}' style='inline-size: var(--icon-size-m)' />`
+                    }))}
+                    on:change={() => {
+                        selectedFramework = frameworks.find(
+                            (framework) => framework.key === frameworkKey
+                        );
+                    }} />
+                <Layout.Grid columnsXS={1} columns={2} gap="l">
+                    <Card.Selector
+                        title="Server side rendering"
+                        variant="primary"
+                        radius="s"
+                        padding="s"
+                        value={Adapter.Ssr}
+                        bind:group={adapter}>
+                        Use <InlineCode code={`${frameworkKey}/node`} size="s" /> adapter in your {frameworkData.name}
+                        config file. <Link external href="#">Learn more</Link>.
+                    </Card.Selector>
+                    <Card.Selector
+                        title="Static site"
+                        variant="primary"
+                        radius="s"
+                        padding="s"
+                        value={Adapter.Static}
+                        bind:group={adapter}>
+                        Use <InlineCode code={`${frameworkKey}/static`} size="s" /> adapter in your {frameworkData.name}
+                        config file. <Link external href="#">Learn more</Link>.
+                    </Card.Selector>
+                </Layout.Grid>
+                <Fieldset legend="Settings">
+                    <Layout.Stack gap="s" direction="row" alignItems="flex-end">
+                        <InputText
+                            id="installCommand"
+                            label="Install command"
+                            bind:value={installCommand}
+                            placeholder={frameworkData.adapters[site.adapter]
+                                .defaultInstallCommand} />
+                        <Button secondary size="s" on:click={() => (installCommand = '')}
+                            >Reset</Button>
+                    </Layout.Stack>
+                    <Layout.Stack gap="s" direction="row" alignItems="flex-end">
+                        <InputText
+                            id="buildCommand"
+                            label="Build command"
+                            bind:value={buildCommand}
+                            placeholder={frameworkData.adapters[site.adapter]
+                                .defaultBuildCommand} />
+                        <Button secondary size="s" on:click={() => (buildCommand = '')}
+                            >Reset</Button>
+                    </Layout.Stack>
+                    <Layout.Stack gap="s" direction="row" alignItems="flex-end">
+                        <InputText
+                            id="outputDirectory"
+                            label="Output directory"
+                            bind:value={outputDirectory}
+                            placeholder={frameworkData.adapters[site.adapter]
+                                .defaultOutputDirectory} />
+                        <Button secondary size="s" on:click={() => (outputDirectory = '')}
+                            >Reset</Button>
+                    </Layout.Stack>
+                </Fieldset>
             </Layout.Stack>
         </svelte:fragment>