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

package/src/components/Block.astro

@@ -0,0 +1,38 @@
+---
+import { getEntries } from 'astro:content'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+
+interface Props extends BlockSchema {
+  headings?: any
+  depth?: number
+  toc?: any
+  sidebar?: any
+  first?: boolean
+}
+
+let { _block, pages, ...rest } = Astro.props
+
+pages = pages && (await getEntries(pages))
+
+const blocks = {
+  ...import.meta.glob('/src/blocks/**/*.astro'),
+  ...import.meta.glob('../blocks/**/*.astro'),
+}
+
+const path = Object.keys(blocks).find(
+  (path) => path.split('/').pop()?.split('.')[0] === _block
+)
+
+const BlockComponent = path && (await (blocks[path] as any)()).default
+---
+
+{
+  BlockComponent && (
+    <BlockComponent
+      {pages}
+      {...rest}
+    >
+      <slot />
+    </BlockComponent>
+  )
+}

package/src/components/Blocks.astro

@@ -0,0 +1,26 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Block from 'fulldev-ui/components/Block.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  blocks?: ComponentProps<typeof Block>[] | undefined
+}
+
+const { blocks, ...rest } = Astro.props
+---
+
+<Element
+  class:list="blocks"
+  {...rest}
+>
+  {blocks?.map((block) => <Block {...block} />)}
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .blocks {
+      @apply flex flex-col;
+    }
+  }
+</style>

package/src/components/Button.astro

@@ -1,62 +1,39 @@
 ---
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import { getEntry } from 'astro:content'
+import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
 interface Props
-  extends GlobalProps,
-    HTMLAttributes<'button'>,
-    HTMLAttributes<'a'> {
-  as?: HTMLTag
-  href?: string | null | undefined
-  type?: HTMLAttributes<'button'>['type'] & HTMLAttributes<'a'>['type']
-  icon?: ComponentProps<typeof Icon>['name']
-  slug?: CollectionEntry<'pages'>['slug'] | undefined
+  extends HTMLAttributes<'button'>,
+    Omit<HTMLAttributes<'a'>, 'type'>,
+    HTMLAttributes<'label'> {
   variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
   text?: string | undefined
-  reverse?: boolean | undefined
+  icon?: string | undefined
 }
 
-const {
-  slug,
-  href = slug === 'index' ? '/' : slug ? `/${slug}/` : undefined,
-  text = slug ? (await getEntry('pages', slug)).data.title : undefined,
-  as = href ? 'a' : 'button',
-  type = as === 'button' ? 'button' : undefined,
-  target = href?.startsWith('http') ? '_blank' : undefined,
-  variant = 'primary',
-  size = 'md',
-  icon,
-  reverse,
-  ...rest
-} = Astro.props
+const { variant = 'primary', size = 'md', text, icon, ...rest } = Astro.props
 ---
 
 <Element
   class:list={['button']}
-  {href}
-  {as}
-  {type}
-  {target}
+  as={rest.href ? 'a' : rest.for ? 'label' : 'button'}
   {variant}
   {size}
-  {reverse}
   {...rest}
 >
-  <Icon name={icon} />
   <Element as="span">
     <Fragment set:html={text} />
     <slot />
   </Element>
+  <Icon name={icon} />
 </Element>
 
 <style is:global>
   @layer fulldev {
     .button {
-      @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium leading-none ring-offset-background transition-colors;
+      @apply inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium leading-none ring-offset-background transition-colors;
       @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
       @apply disabled:pointer-events-none disabled:opacity-50;
 

package/src/components/Buttons.astro

@@ -1,59 +1,28 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { ComponentProps } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  variant?: ComponentProps<typeof Button>['variant']
+interface Props extends ComponentProps<typeof Button> {
   button?: ComponentProps<typeof Button> | undefined
   buttons?: ComponentProps<typeof Button>[] | undefined
-  direction?: 'row' | 'column' | undefined
 }
 
-const {
-  direction = 'row',
-  variant = 'primary',
-  buttons = [],
-  button,
-  size,
-  ...rest
-} = Astro.props
+const { variant = 'primary', button, buttons, ...rest } = Astro.props
 
 const buttonVariant = (i: number) => {
   if (variant === 'primary' && i === 0) return 'primary'
   else if (variant === 'primary' && i === 1) return 'secondary'
-  else if (variant === 'primary' && i > 1) return 'ghost'
   else if (variant === 'secondary' && i === 0) return 'secondary'
   else return 'ghost'
 }
 ---
 
-<Element
-  class:list="buttons"
-  {direction}
-  {...rest}
->
-  {
-    [button, ...buttons].filter(Boolean).map((button, i) => (
-      <Button
-        variant={buttonVariant(i)}
-        {size}
-        {...button}
-      />
-    ))
-  }
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .buttons {
-      @apply inline-flex flex-wrap justify-stretch gap-2;
-
-      &.direction-column {
-        @apply flex-col items-start;
-      }
-    }
-  }
-</style>
+{
+  [button, ...(buttons || [])].filter(Boolean).map((button, i) => (
+    <Button
+      variant={buttonVariant(i)}
+      {...rest}
+      {...button}
+    />
+  ))
+}

package/src/components/Cart.astro

@@ -1,33 +1,37 @@
 ---
+// @ts-nocheck
 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 Drawer from 'fulldev-ui/structures/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> {}
+interface Props extends Omit<ComponentProps<typeof Drawer>, 'id' | 'icon'> {}
 
-const {
-  icon = 'shopping-cart',
-  color = 'brand',
-  id = 'cart',
-  if: ifProp,
-  ...rest
-} = Astro.props
+const { variant = 'ghost', size = 'md', ...rest } = Astro.props
 ---
 
+<Select show={false} />
+<Button show={false} />
+<Input show={false} />
+<Icon show={false} />
+
 <Drawer
-  if={ifProp}
   class:list="cart"
-  {icon}
-  {color}
-  {id}
+  id="cart"
+  icon="shopping-cart"
+  {variant}
+  {size}
   {...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.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>

package/src/components/CartList.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { cart } from 'fulldev-ui/stores/cart.svelte.ts'
+  import { formatPrice } from 'fulldev-ui/utils/cart'
+  import CartQuantity from './CartQuantity.svelte'
+
+  function removeItem(index: number) {
+    cart.update((currentCart) => {
+      currentCart.splice(index, 1)
+      return [...currentCart]
+    })
+  }
+</script>
+
+<div class="cart-list">
+  {#each $cart as item, index}
+    <div
+      class="cart-list-card"
+      data-slug={item.slug}
+    >
+      <img
+        class="image"
+        src={item.image}
+        alt={item.title}
+      />
+      <div class="cart-list-card-segment">
+        <div class="cart-list-card-content">
+          <h3 class="heading">{item.title}</h3>
+          {#if item.price}
+            <div class="price">{formatPrice(item.price)}</div>
+          {/if}
+        </div>
+        <div class="cart-list-card-actions">
+          <CartQuantity bind:value={item.quantity} />
+          <button
+            class="button variant-outline size-sm"
+            type="button"
+            aria-label="trash"
+            on:click={() => removeItem(index)}
+          >
+            <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="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"
+              ></path>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  {/each}
+</div>
+
+<style lang="postcss">
+  @layer fulldev {
+    .cart-list {
+      @apply flex flex-col text-foreground;
+
+      .cart-list-card {
+        @apply flex w-full gap-5;
+
+        &:not(:first-child) {
+          @apply mt-5 border-t pt-5;
+        }
+      }
+
+      .image {
+        @apply block h-auto w-24;
+      }
+
+      .cart-list-card-segment {
+        @apply flex h-full w-full flex-col justify-between gap-4;
+      }
+
+      .cart-list-card-content,
+      .cart-list-card-actions {
+        @apply flex justify-between gap-2;
+      }
+    }
+  }
+</style>

package/src/components/CartQuantity.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { tick } from 'svelte'
+
+  interface Props {
+    value: number
+    size?: 'sm' | 'md' | 'lg'
+    change?: (quantity: number) => void
+  }
+
+  let { value = $bindable(), size = 'md', change }: Props = $props()
+  let inputElement: HTMLInputElement | null = $state(null)
+
+  let quantity = $state(value)
+
+  async function handleChange() {
+    value = quantity
+    if (change) change(value)
+    if (value === 11) {
+      await tick()
+      inputElement?.focus()
+    }
+  }
+</script>
+
+<label
+  class="quantity input select size-{size}"
+  for="quantity"
+>
+  {#if value > 10}
+    <input
+      bind:this={inputElement}
+      bind:value={quantity}
+      class="input-input"
+      name="quantity"
+      type="number"
+      min={1}
+      onchange={handleChange}
+    />
+  {:else}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      class="icon size-{size}"
+    >
+      <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"
+      bind:value={quantity}
+      onchange={handleChange}
+    >
+      {#each Array(10) as _, i}
+        <option
+          value={i + 1}
+          selected={value === i + 1}
+        >
+          {i + 1}
+        </option>
+      {/each}
+      <option
+        value={11}
+        selected={value > 10}
+      >
+        Meer
+      </option>
+    </select>
+  {/if}
+</label>
+
+<style lang="postcss">
+  .quantity {
+    @apply w-20;
+  }
+</style>