fulldev-ui 0.6.0-beta.0 → 0.6.0-beta.2

package/src/blocks/Products.astro

@@ -1,119 +1,100 @@
 ---
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
 import Button from 'fulldev-ui/components/Button.astro'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
-import Cards from 'fulldev-ui/components/Cards.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Price from 'fulldev-ui/components/Price.astro'
 
 interface Props extends HTMLAttributes<'section'> {
-  tagline?: ComponentProps<typeof Tagline>['text']
   heading?: ComponentProps<typeof Heading>['text']
-  paragraph?: ComponentProps<typeof Paragraph>['text']
   button?: ComponentProps<typeof Buttons> | undefined
-  cards?: ComponentProps<typeof Cards>['cards']
-  level?: ComponentProps<typeof Heading>['level']
-  as?: HTMLTag
-  size?: 'sm' | 'md' | 'lg' | undefined
-  variant?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | undefined
+  products?: CollectionEntry<'products'>[]
 }
 
-const {
-  as = 'section',
-  size = 'sm',
-  variant = 1,
-  level = 2,
-  tagline,
-  heading,
-  paragraph,
-  button,
-  cards,
-  ...rest
-} = Astro.props
+const { heading, button, products, ...rest } = Astro.props
 ---
 
 <Element
   class:list="products"
-  {as}
-  {size}
-  {variant}
+  if={products?.length}
+  as="section"
   {...rest}
 >
   <Element class:list="products-container">
     <Element class:list="products-segment">
-      <Element class:list="products-content">
-        <Tagline
-          text={tagline}
-          {size}
-        />
-        <Heading
-          text={heading}
-          {level}
-          {size}
-        />
-        <Paragraph
-          text={paragraph}
-          {size}
-        />
-        <slot name="content" />
-      </Element>
+      <Heading
+        level={2}
+        size="sm"
+        text={heading}
+      />
       <Button
         variant="ghost"
-        {size}
+        size="sm"
         {...button}
       />
-      <slot name="segment" />
     </Element>
-    <Cards
-      {cards}
-      {size}
-    />
-    <slot />
+    <Element class:list="products-cards">
+      {
+        products?.map(({ slug, data }) => (
+          <Element
+            class:list="products-card"
+            as="a"
+            href={`/producten/${slug}/`}
+          >
+            <Image
+              class:list="products-card-image"
+              {...data.images?.[0]}
+            />
+            <Element class:list="products-card-content">
+              <Heading
+                as="h3"
+                level={5}
+                size={'sm'}
+                text={data.title}
+              />
+              <Price value={data.price} />
+            </Element>
+          </Element>
+        ))
+      }
+    </Element>
   </Element>
 </Element>
 
 <style is:global>
   @layer fulldev {
     .products {
-      @apply relative w-full;
+      @apply relative w-full py-16;
 
       .products-container {
-        @apply flex h-full w-full flex-col;
+        @apply container flex flex-col gap-8;
       }
 
       .products-segment {
-        @apply z-10 flex flex-col items-start gap-8;
+        @apply flex items-center justify-between gap-8;
       }
 
-      .products-content {
-        @apply flex max-w-screen-md flex-col gap-6;
+      .products-cards {
+        @apply grid grid-cols-2 items-start gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6;
       }
 
-      &.dark {
-        @apply bg-background;
-      }
+      .products-card {
+        @apply relative flex flex-col gap-3;
 
-      /* Column left aligned */
-      &.variant-1 {
-        .products-container {
-          @apply container py-8;
+        &:hover > .image {
+          @apply opacity-75 transition-opacity;
         }
 
-        .products-segment {
-          @apply w-full flex-row flex-wrap justify-between gap-8 py-8;
+        .image {
+          @apply rounded-md border;
         }
+      }
 
-        .cards {
-          --column-width: 200px;
-
-          @apply gap-2;
-
-          .image {
-            @apply p-4;
-          }
-        }
+      .products-card-content {
+        @apply flex h-full flex-col gap-2;
       }
     }
   }

package/src/components/Card.astro

@@ -97,8 +97,8 @@ const {
     .card {
       @apply relative flex flex-col items-start;
 
-      &:is(a[href]) > .image {
-        @apply transition hover:opacity-80;
+      &:is(a[href]):hover > .image {
+        @apply opacity-50 transition;
       }
 
       .card-content {

package/src/components/Cart.astro

@@ -1,8 +1,12 @@
 ---
 import type { ComponentProps } from 'astro/types'
-import CartList from 'fulldev-ui/components/CartList.astro'
+import CartList from 'fulldev-ui/components/CartList.svelte'
 import CartSummary from 'fulldev-ui/components/CartSummary.astro'
 import Drawer from 'fulldev-ui/components/Drawer.astro'
+import Button from './Button.astro'
+import Icon from './Icon.astro'
+import Input from './Input.astro'
+import Select from './Select.astro'
 
 interface Props extends ComponentProps<typeof Drawer> {}
 
@@ -15,6 +19,11 @@ const {
 } = Astro.props
 ---
 
+<Select if={false} />
+<Button if={false} />
+<Input if={false} />
+<Icon if={false} />
+
 <Drawer
   if={ifProp}
   class:list="cart"
@@ -23,11 +32,11 @@ const {
   {id}
   {...rest}
 >
-  <CartList />
+  <CartList client:load />
   <CartSummary slot="footer" />
 </Drawer>
 
-<style  is:global>
+<style is:global>
   @layer fulldev {
     form {
       display: flex;

package/src/components/CartAdd.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { updateQuantity } from 'fulldev-ui/stores/cart.svelte.ts'
+  import { tick } from 'svelte'
+
+  let { uid, quantity } = $props()
+  let inputElement: HTMLInputElement | null = $state(null)
+
+  async function onQuantityChange(e: Event) {
+    const target = e.target as HTMLInputElement
+    const value = Number(target.value)
+    updateQuantity(uid, value)
+
+    if (value === 11) {
+      await tick()
+      inputElement?.focus()
+    }
+  }
+</script>
+
+<label
+  class="quantity input select size-md"
+  for="quantity"
+>
+  {#if quantity > 10}
+    <input
+      bind:this={inputElement}
+      class="input-input"
+      name="quantity"
+      type="number"
+      value={quantity}
+      min={0}
+      onchange={onQuantityChange}
+    />
+  {:else}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      class="icon size-md"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="m6 9l6 6l6-6"
+      ></path>
+    </svg>
+    <select
+      class="select-select"
+      value={quantity}
+      onchange={onQuantityChange}
+    >
+      {#each Array(10) as _, i}
+        <option
+          value={i + 1}
+          selected={quantity === i + 1}
+        >
+          {i + 1}
+        </option>
+      {/each}
+      <option
+        value="11"
+        selected={quantity > 10}
+      >
+        Meer
+      </option>
+    </select>
+  {/if}
+</label>
+
+<style lang="postcss">
+  .quantity {
+    @apply w-24;
+  }
+</style>

package/src/components/CartCheckout.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { cart } from 'fulldev-ui/stores/cart.svelte.ts'
+  import Stripe from 'stripe'
+
+  const { STRIPE_RESTRICTED_KEY, URL } = $props()
+
+  async function handeClick() {
+    if (!STRIPE_RESTRICTED_KEY) {
+      console.error('Stripe key is missing')
+      return
+    }
+    const stripe = new Stripe(STRIPE_RESTRICTED_KEY)
+    const checkoutConfig = {
+      success_url: `${URL}/checkout`,
+      mode: 'payment',
+      customer_creation: 'always',
+      shipping_address_collection: {
+        allowed_countries: ['NL'],
+      },
+      phone_number_collection: {
+        enabled: true,
+      },
+    }
+
+    const lineItems = $cart.map((item) => ({
+      quantity: item.quantity,
+      adjustable_quantity: {
+        enabled: true,
+        maximum: 999999,
+      },
+      price_data: {
+        currency: 'eur',
+        product_data: {
+          name:
+            item.variants && Object.values(item.variants || {}).length
+              ? `${item.title} - ${Object.values(item.variants).join(' / ')}`
+              : item.title,
+          // images: [item.image ? URL + item.image : ''],
+        },
+        unit_amount: Math.round(item.price || 0 * 100),
+      },
+    }))
+
+    const checkoutSession = await stripe.checkout.sessions.create({
+      line_items: lineItems,
+      ...checkoutConfig,
+    })
+
+    checkoutSession.url && window.location.replace(checkoutSession.url)
+  }
+</script>
+
+<button
+  class="button variant-primary size-md"
+  onclick={handeClick}
+>
+  Afrekenennn
+</button>

package/src/components/CartForm.astro

@@ -1,109 +1,100 @@
 ---
-import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
 import Button from 'fulldev-ui/components/Button.astro'
 import Input from 'fulldev-ui/components/Input.astro'
 import Select from 'fulldev-ui/components/Select.astro'
 import { capitalize } from 'radash'
+import { scope } from 'simple:scope'
+import Element from './Element.astro'
 import Form from './Form.astro'
 import Price from './Price.astro'
 
-interface Props extends Omit<ComponentProps<typeof Form>, 'fields' | 'submit'> {
-  title: string
-  slug: string
-  price: number
-  image?: string | undefined
-  soldout?: boolean
-  variants?:
-    | {
-        [key: string]: string[]
-      }
-    | undefined
+interface Props {
+  product: CollectionEntry<'products'>
 }
 
-const { title, slug, image, price, variants, soldout, ...rest } = Astro.props
+const { slug, data } = Astro.props.product
+
+const src = data.images?.[0]?.src || `/${data.images?.[0]?.id}`
 ---
 
-<Form
-  class:list="cart-form"
-  {...rest}
->
-  <Input
-    type="hidden"
-    name="title"
-    value={title}
-  />
-  <Input
-    type="hidden"
-    name="slug"
-    value={slug}
-  />
-  <Input
-    type="hidden"
-    name="url"
-    value={Astro.site ? Astro.site.href + slug : undefined}
-  />
-  <Input
-    type="hidden"
-    name="image"
-    value={image}
-  />
-  {
-    Object.entries(variants ?? {}).map(([key, options]) => (
-      <Select
-        label={capitalize(key)}
-        name={`variant-${key}`}
-        options={options}
-        disabled={soldout}
+<RootElement data={{ variants: Object.keys(data.variants || {}) }}>
+  <Form
+    class:list="cart-form"
+    data-target={scope('form')}
+  >
+    <Input
+      name="slug"
+      type="hidden"
+      value={slug}
+    />
+    <Input
+      name="title"
+      type="hidden"
+      value={data.title}
+    />
+    <Input
+      name="price"
+      type="hidden"
+      value={data.price}
+    />
+    <Input
+      name="image"
+      type="hidden"
+      value={Astro.site && (Astro.site.href + src).replace('//', '/')}
+    />
+    {
+      Object.entries(data.variants ?? {}).map(([key, options]) => (
+        <Select
+          name={key}
+          label={capitalize(key)}
+          name={key}
+          options={options}
+          disabled={data.soldout}
+        />
+      ))
+    }
+    <Price value={data.price} />
+    <Element class:list="inputs">
+      <Input
+        class:list="quantity-input"
+        name="quantity"
+        type="number"
+        min={1}
+        value={1}
       />
-    ))
-  }
-  <Price value={price} />
-  <Input
-    type="hidden"
-    name="price"
-    value={price}
-  />
-  <Button
-    variant="primary"
-    type="submit"
-    class="cart-add"
-    text={soldout ? 'Uitverkocht' : 'Toevoegen aan winkelwagen'}
-    disabled={soldout}
-  />
-</Form>
+      <Button
+        variant="primary"
+        type="submit"
+        class="cart-add"
+        text={data.soldout ? 'Uitverkocht' : 'Toevoegen aan winkelwagen'}
+        disabled={data.soldout}
+      />
+    </Element>
+  </Form>
+</RootElement>
 
 <script>
-  import { $cart } from 'fulldev-ui/stores/cart.ts'
-  import { generateProductId, generateProductName } from 'fulldev-ui/utils/cart'
-
-  document.addEventListener('astro:page-load', () => {
-    const cartForm = document.querySelector('.cart-form')
+  import { addItem, openCart } from 'fulldev-ui/stores/cart.ts'
 
-    cartForm?.addEventListener('submit', (e) => {
+  RootElement.ready(($, ctx) => {
+    $('form').addEventListener('submit', async (e) => {
+      if (!(e.target instanceof HTMLFormElement)) return
       e.preventDefault()
 
-      if (e.target instanceof HTMLFormElement) {
-        const formData = new FormData(e.target)
-
-        const title = formData.get('title') as string
-        const slug = formData.get('slug') as string
-        const url = formData.get('url') as string
-        const image = formData.get('image') as string
-        const price = Number(formData.get('price')) as number
-        const variants = Array.from(formData.entries())
-          .filter(([key]) => key.startsWith('variant-'))
-          .map(([_, value]) => value) as string[]
-
-        const id = generateProductId(slug, variants)
-        const name = generateProductName(title, variants)
-
-        const currentCart = $cart.get()
-        const newCart = [...currentCart, { id, name, price, image, url }]
-        $cart.set(newCart)
-
-        const cartDialog = document?.querySelector('dialog#cart')
-        if (cartDialog instanceof HTMLDialogElement) cartDialog.showModal()
+      const formData = new FormData(e.target)
+      const object = Object.fromEntries(formData.entries())
+      const formatted = {
+        slug: String(object['slug']),
+        title: String(object['title']),
+        price: Number(object['price']),
+        quantity: Number(object['quantity']),
+        image: String(object['image']),
+        variants: ctx.data.variants.map((key: string) => object[key]),
       }
+
+      addItem(formatted)
+      openCart()
     })
   })
 </script>
@@ -113,7 +104,15 @@ const { title, slug, image, price, variants, soldout, ...rest } = Astro.props
     .cart-form {
       @apply flex flex-col gap-4;
 
-      .input {
+      .inputs {
+        @apply flex gap-2;
+      }
+
+      .quantity-input {
+        @apply w-16;
+      }
+
+      .price-input {
         @apply hidden;
       }
     }

package/src/components/CartForm.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { cart, getUid, openCart } from 'fulldev-ui/stores/cart.svelte'
+
+  import { capitalize } from 'radash'
+  import CartQuantity from './CartQuantity.svelte'
+  import { formatPrice } from 'fulldev-ui/utils/cart'
+  import type { CollectionEntry } from 'astro:content'
+
+  interface Props {
+    product: CollectionEntry<'products'>
+  }
+
+  const { product }: Props = $props()
+  const { slug, data } = product
+
+  const form = $state({
+    slug: slug,
+    title: data.title,
+    price: data.price,
+    image: data.images?.[0]?.src || `/${data.images?.[0]?.id}`,
+    variants: Object.fromEntries(
+      Object.entries(data.variants ?? {}).map(([key, value]) => [key, value[0]])
+    ),
+    quantity: 1,
+  })
+
+  function handleSubmit(event: Event) {
+    event.preventDefault()
+
+    const variants = { ...form.variants }
+    const uid = getUid(slug, variants)
+    const item = { ...form, uid, variants }
+
+    const index = $cart.findIndex((i) => i.uid === item.uid)
+    if (index === -1) $cart = [...$cart, item]
+    else if ($cart[index]) $cart[index].quantity += form.quantity
+
+    openCart()
+  }
+</script>
+
+<form
+  class="cart-form"
+  onsubmit={handleSubmit}
+>
+  <input
+    name="slug"
+    type="hidden"
+    bind:value={form.slug}
+  />
+  <input
+    name="title"
+    type="hidden"
+    bind:value={form.title}
+  />
+  <input
+    name="price"
+    type="hidden"
+    bind:value={form.price}
+  />
+  <input
+    name="image"
+    type="hidden"
+    bind:value={form.image}
+  />
+  {#if form.variants}
+    {#each Object.entries(data.variants ?? {}) as [key, options]}
+      <label
+        class="select size-md"
+        for={`variant-${key}`}
+      >
+        <p class="label">
+          {capitalize(key)}
+        </p>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="icon size-md"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m6 9l6 6l6-6"
+          ></path>
+        </svg>
+        <select
+          class="select-select"
+          name={key}
+          disabled={data.soldout}
+          bind:value={form.variants[key]}
+        >
+          {#each options as option}
+            <option value={option}>{option}</option>
+          {/each}
+        </select>
+      </label>
+    {/each}
+  {/if}
+  {#if data.price}
+    <div class="price">
+      {formatPrice(data.price)}
+    </div>
+  {/if}
+
+  <div class="inputs">
+    <CartQuantity bind:value={form.quantity} />
+    <button
+      class="variant-primary button size-md cart-add"
+      type="submit"
+      disabled={data.soldout}
+    >
+      {data.soldout ? 'Uitverkocht' : 'Toevoegen aan winkelwagen'}
+    </button>
+  </div>
+</form>
+
+<style lang="postcss">
+  @layer fulldev {
+    .cart-form {
+      @apply flex flex-col gap-4;
+
+      .inputs {
+        @apply flex gap-2;
+      }
+    }
+  }
+</style>