fulldev-ui 0.6.4 → 0.7.0-beta.1

package/src/components/CartForm.svelte

@@ -1,130 +0,0 @@
-<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

@@ -1,88 +0,0 @@
-<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

@@ -1,81 +0,0 @@
-<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>

package/src/components/CartSummary.astro

@@ -1,59 +0,0 @@
----
-// @ts-nocheck
-import { STRIPE_RESTRICTED_KEY, URL } from 'astro:env/client'
-import CartCheckout from './CartCheckout.svelte'
-import CartTotal from './CartTotal.svelte'
-import Element from './Element.astro'
-import Paragraph from './Paragraph.astro'
-
-interface Props {}
-
-const { ...rest } = Astro.props
----
-
-<Element
-  size="md"
-  class="cart-summary"
->
-  <div
-    class="row"
-    {...rest}
-  >
-    <Paragraph
-      class:list="total"
-      text="Totaal"
-      contrast
-    />
-    <CartTotal client:load />
-  </div>
-  <Paragraph
-    class:list="shipping"
-    text="Verzendkosten worden berekend bij het afrekenen."
-  />
-  <CartCheckout
-    {STRIPE_RESTRICTED_KEY}
-    {URL}
-    client:load
-  />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .cart-summary {
-      @apply flex flex-col gap-3 text-foreground;
-
-      .price,
-      .total {
-        @apply text-lg;
-      }
-
-      .row {
-        @apply flex w-full justify-between;
-      }
-
-      .shipping {
-        @apply text-sm text-muted-foreground;
-      }
-    }
-  }
-</style>

package/src/components/CartTotal.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import { cart } from 'fulldev-ui/stores/cart.svelte.ts'
-  import { formatPrice } from 'fulldev-ui/utils/cart'
-
-  let total = $derived(
-    $cart.reduce(
-      (acc, item) => acc + (item.price || 0) * (item.quantity || 0),
-      0
-    )
-  )
-</script>
-
-<div>
-  {formatPrice(total)}
-</div>

package/src/components/Channel.astro

@@ -1,89 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import type { ComponentProps } from 'svelte'
-
-interface Props extends HTMLAttributes<'div'> {
-  variant?: 'secondary' | 'outline' | undefined
-  size?: 'sm' | 'md' | 'lg' | undefined
-  heading?: string | undefined
-  text?: string | undefined
-  href?: string | undefined
-  icon?: string | undefined
-  target?: ComponentProps<typeof Button>['target']
-}
-
-const {
-  variant = 'secondary',
-  size = 'md',
-  href,
-  icon,
-  heading,
-  text,
-  target,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="channel"
-  {size}
-  {...rest}
->
-  <Button
-    {variant}
-    {size}
-    {href}
-    {icon}
-    {target}
-  />
-  <Element class:list="channel-content">
-    <Heading
-      as="h6"
-      {size}
-      text={heading}
-    />
-    <Fragment set:html={text} />
-    <slot />
-  </Element>
-</Element>
-
-<style is:global>
-  .channel {
-    @apply flex gap-3;
-
-    .channel-content {
-      @apply flex flex-col text-muted-foreground;
-
-      .heading {
-        @apply leading-snug;
-      }
-    }
-
-    &.size-sm {
-      @apply gap-2;
-
-      .channel-content {
-        @apply text-xs leading-tight;
-      }
-    }
-
-    &.size-md {
-      @apply gap-2.5;
-
-      .channel-content {
-        @apply text-sm leading-tight;
-      }
-    }
-
-    &.size-lg {
-      @apply gap-3;
-
-      .channel-content {
-        @apply text-base leading-tight;
-      }
-    }
-  }
-</style>

package/src/components/Channels.astro

@@ -1,20 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import Channel from 'fulldev-ui/components/Channel.astro'
-
-interface Props extends ComponentProps<typeof Channel> {
-  channel?: ComponentProps<typeof Channel> | undefined
-  channels?: ComponentProps<typeof Channel>[] | undefined
-}
-
-const { channel, channels, ...rest } = Astro.props
----
-
-{
-  [channel, ...(channels || [])].filter(Boolean).map((channel) => (
-    <Channel
-      {...rest}
-      {...channel}
-    />
-  ))
-}

package/src/components/Checkbox.astro

@@ -1,76 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import Icon from 'fulldev-ui/components/Icon.astro'
-import Label from 'fulldev-ui/components/Label.astro'
-
-interface Props extends HTMLAttributes<'input'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  label?: string | undefined
-}
-
-const { label, name = label, id = name, size = 'md', ...rest } = Astro.props
----
-
-<Label
-  class:list="checkbox"
-  for={id}
-  {size}
->
-  <Element
-    class:list="checkbox-input"
-    as="input"
-    type="checkbox"
-    show={id}
-    {id}
-    {name}
-    {...rest}
-  />
-  <Icon
-    class="checkbox-icon"
-    name="check"
-    {size}
-  />
-  <Fragment set:html={label} />
-</Label>
-
-<style is:global>
-  @layer fulldev {
-    .checkbox {
-      @apply relative flex items-center gap-2;
-
-      .checkbox-input {
-        @apply size-[1em] cursor-pointer rounded-sm border border-primary bg-transparent accent-primary;
-        @apply appearance-none border border-primary bg-background checked:bg-primary;
-      }
-
-      .icon.checkbox-icon {
-        @apply absolute bg-transparent p-0.5 text-background;
-
-        * {
-          stroke-width: 3.5px !important;
-        }
-      }
-
-      &.size-sm {
-        .checkbox-input,
-        .icon.checkbox-icon {
-          @apply !size-3.5;
-        }
-      }
-      &.size-md {
-        .checkbox-input,
-        .checkbox-icon {
-          @apply !size-4;
-        }
-      }
-
-      &.size-lg {
-        .checkbox-input,
-        .checkbox-icon {
-          @apply !size-[1.125rem];
-        }
-      }
-    }
-  }
-</style>

package/src/components/Element.astro

@@ -1,70 +0,0 @@
----
-const {
-  as: As = 'div',
-  show = 'content',
-  theme,
-  variant,
-  size,
-  align,
-  color,
-  position,
-  panel,
-  contrast,
-  structure,
-  level,
-  placement,
-  reverse,
-  open,
-  lead,
-  current,
-  direction,
-  center,
-  frame,
-  dark,
-  muted,
-  inset,
-  ...rest
-} = Astro.props
-
-const slot = await Astro.slots.render('default')
-const render = show === 'content' ? slot?.trim().length > 0 : show
----
-
-{
-  render && (
-    <As
-      class:list={[
-        {
-          contrast,
-          panel,
-          open,
-          reverse,
-          current,
-          center,
-          inset,
-          dark,
-          muted,
-          [`size-${size}`]: size,
-          [`color-${color}`]: color,
-          [`level-${level}`]: level,
-          [`frame-${frame}`]: frame,
-          [`variant-${variant}`]: variant,
-          [`structure-${structure}`]: structure,
-          [`align-${align}`]: align,
-          [`position-${position}`]: position,
-          [`direction-${direction}`]: direction,
-        },
-      ]}
-      {...rest}
-    >
-      <Fragment set:html={slot} />
-    </As>
-  )
-}
-
-<style is:global>
-  @import 'tailwindcss/base' layer(fulldev);
-  @import 'fulldev-ui/css/theme' layer(fulldev);
-  @import 'tailwindcss/components';
-  @import 'tailwindcss/utilities';
-</style>

package/src/components/Field.astro

@@ -1,33 +0,0 @@
----
-import Input from 'fulldev-ui/components/Input.astro'
-import Select from 'fulldev-ui/components/Select.astro'
-import Textarea from 'fulldev-ui/components/Textarea.astro'
-
-interface Props {
-  label?: string | undefined
-  placeholder?: string | undefined
-  value?: string | undefined
-  required?: boolean | undefined
-  disabled?: boolean | undefined
-  type?: keyof typeof components | undefined
-}
-
-const { type = 'text', ...rest } = Astro.props
-
-const components = {
-  select: Select,
-  textarea: Textarea,
-  text: Input,
-  number: Input,
-  tel: Input,
-  email: Input,
-  password: Input,
-}
-
-const Component = components[type]
----
-
-<Component
-  class:list="field"
-  {...rest}
-/>

package/src/components/Fields.astro

@@ -1,20 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import Field from 'fulldev-ui/components/Field.astro'
-
-interface Props extends ComponentProps<typeof Field> {
-  field?: ComponentProps<typeof Field> | undefined
-  fields?: ComponentProps<typeof Field>[] | undefined
-}
-
-const { field, fields, ...rest } = Astro.props
----
-
-{
-  [field, ...(fields || [])].filter(Boolean).map((field) => (
-    <Field
-      {...rest}
-      {...field}
-    />
-  ))
-}