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

package/src/components/CartForm.astro

@@ -1,120 +0,0 @@
----
-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 {
-  product: CollectionEntry<'products'>
-}
-
-const { slug, data } = Astro.props.product
-
-const src = data.images?.[0]?.src || `/${data.images?.[0]?.id}`
----
-
-<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}
-      />
-      <Button
-        variant="primary"
-        type="submit"
-        class="cart-add"
-        text={data.soldout ? 'Uitverkocht' : 'Toevoegen aan winkelwagen'}
-        disabled={data.soldout}
-      />
-    </Element>
-  </Form>
-</RootElement>
-
-<script>
-  import { addItem, openCart } from 'fulldev-ui/stores/cart.ts'
-
-  RootElement.ready(($, ctx) => {
-    $('form').addEventListener('submit', async (e) => {
-      if (!(e.target instanceof HTMLFormElement)) return
-      e.preventDefault()
-
-      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>
-
-<style is:global>
-  @layer fulldev {
-    .cart-form {
-      @apply flex flex-col gap-4;
-
-      .inputs {
-        @apply flex gap-2;
-      }
-
-      .quantity-input {
-        @apply w-16;
-      }
-
-      .price-input {
-        @apply hidden;
-      }
-    }
-  }
-</style>

package/src/components/CartList.astro

@@ -1,122 +0,0 @@
----
-import Element from 'fulldev-ui/components/Element.astro'
-import { scope } from 'simple:scope'
-import Button from './Button.astro'
-import Heading from './Heading.astro'
-import Input from './Input.astro'
-import Price from './Price.astro'
-
-const { ...rest } = Astro.props
----
-
-<RootElement>
-  <Element
-    data-target={scope('list')}
-    class:list={'cart-list'}
-    if={true}
-    {...rest}
-  />
-
-  <template data-target={scope('template')}>
-    <Element class="cart-list-card">
-      <img class="image" />
-      <Element class="cart-list-card-segment">
-        <Element class="cart-list-card-content">
-          <Heading
-            if
-            level={6}
-          />
-          <Price if />
-        </Element>
-        <Element class="cart-list-card-actions">
-          <Input
-            type="number"
-            name="quantity"
-            value={1}
-            min={0}
-          />
-          <Button
-            type="button"
-            variant="outline"
-            icon="trash"
-            type="button"
-          />
-        </Element>
-      </Element>
-    </Element>
-  </template>
-</RootElement>
-
-<script>
-  import { $cart, removeItem, updateQuantity } from 'fulldev-ui/stores/cart.ts'
-  import { formatPrice } from 'fulldev-ui/utils/cart'
-
-  RootElement.ready(($) => {
-    $cart.subscribe((items) => {
-      const list = $('list')
-      const template = $('template') as HTMLTemplateElement
-
-      // list.innerHTML = ''
-      items.forEach((item) => {
-        const clone = template?.content.cloneNode(true) as HTMLElement
-        const clonedCard = clone.querySelector('.cart-list-card') as HTMLElement
-        const existingCard = list.querySelector(`[data-slug="${item.slug}"]`)
-        const card = existingCard || (clonedCard as HTMLElement)
-        const heading = card.querySelector('.heading') as HTMLElement
-        const price = card.querySelector('.price') as HTMLElement
-        const image = card.querySelector('.image') as HTMLImageElement
-        const remove = card.querySelector('.button') as HTMLButtonElement
-        const quantity = card.querySelector('.input') as HTMLInputElement
-
-        card.dataset.slug = item.slug
-        heading.textContent = item.title
-        price.textContent = formatPrice(item.price)
-        image.src = item.image
-
-        remove.addEventListener('click', () => removeItem(item.slug))
-
-        quantity.addEventListener('change', (e) => {
-          console.log('blur')
-          const target = e.target as HTMLInputElement
-          const value = Number(target.value)
-          updateQuantity(item.slug, value)
-        })
-
-        $('list').appendChild(clone)
-      })
-    })
-  })
-</script>
-
-<style is:global>
-  @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;
-      }
-
-      .input {
-        @apply w-16;
-      }
-    }
-  }
-</style>

package/src/components/Lead.astro

@@ -1,46 +0,0 @@
----
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-
-interface Props extends GlobalProps, HTMLAttributes<'p'> {
-  as?: HTMLTag
-  text?: string | undefined
-}
-
-const { as = 'p', text, ...rest } = Astro.props
----
-
-<Element
-  class:list="lead"
-  {as}
-  {...rest}
->
-  <slot />
-  <Fragment set:html={text} />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .lead,
-    .prose-content h1 + p {
-      @apply text-muted-foreground;
-
-      &.size-sm {
-        @apply text-sm;
-      }
-
-      &.size-md {
-        @apply text-base;
-      }
-
-      &.size-lg {
-        @apply text-lg;
-
-        &:is(h1 + p) {
-          @apply text-xl;
-        }
-      }
-    }
-  }
-</style>

package/src/components/ProductCard.astro

@@ -1,52 +0,0 @@
----
-import type { CollectionEntry } from 'astro:content'
-import Element from 'fulldev-ui/components/Element.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Price from 'fulldev-ui/components/Price.astro'
-import type { ProductSchema } from 'fulldev-ui/schemas/productSchema'
-
-interface Props extends ProductSchema {
-  slug?: CollectionEntry<'products'>['slug']
-}
-
-const { slug, images, title, price, ...rest } = Astro.props
----
-
-<Element
-  class:list="product-card"
-  as="a"
-  href={`/producten/${slug}/`}
-  {...rest}
->
-  <Image {...images?.[0]} />
-  <Element class:list="product-card-content">
-    <Heading
-      as="h3"
-      level={5}
-      size={'sm'}
-      text={title}
-    />
-    <Price value={price} />
-  </Element>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .product-card {
-      @apply relative flex flex-col gap-3;
-
-      &:hover > .image {
-        @apply opacity-75 transition-opacity;
-      }
-
-      .image {
-        @apply rounded-md border;
-      }
-
-      .product-card-content {
-        @apply flex h-full flex-col gap-2;
-      }
-    }
-  }
-</style>

package/src/components/Text.astro

@@ -1,43 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-
-interface Props extends HTMLAttributes<'p'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  color?: 'base' | 'brand' | undefined
-  theme?: 'light' | 'dark' | undefined
-  contrast?: boolean | undefined
-  lead?: boolean | undefined
-  text?: string | undefined
-  if?: any
-}
-
-const { color = 'base', text, ...rest } = Astro.props
----
-
-<Element
-  class:list="text"
-  as="p"
-  {color}
-  {...rest}
->
-  <slot />
-  <Fragment set:html={text} />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .text {
-      margin: 0;
-      max-width: calc(var(--space-4) * 44);
-      color: var(--color-11);
-      font-size: var(--text-3);
-      line-height: 1.625;
-
-      &.lead {
-        font-size: var(--text-4);
-        text-wrap: balance;
-      }
-    }
-  }
-</style>

package/src/components/_CartList backup.astro

@@ -1,125 +0,0 @@
-<!-- ---
-import Element from 'fulldev-ui/components/Element.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Button from './Button.astro'
-import Heading from './Heading.astro'
-import Input from './Input.astro'
-import Price from './Price.astro'
-
-const { ...rest } = Astro.props
----
-
-<Element
-  if={true}
-  class:list="cart-list"
-  {...rest}
-/>
-
-<template id="cart-list-template">
-  <Element class="cart-list-card">
-    <Image src="/placeholder-portrait.webp" />
-    <Element class="cart-list-card-segment">
-      <Element class="cart-list-card-content">
-        <Heading
-          level={6}
-          text="Product title"
-        />
-        <Price value={999} />
-      </Element>
-      <Element class="cart-list-card-actions">
-        <Input
-          type="number"
-          name="quantity"
-          value={1}
-          min={0}
-        />
-        <Button
-          variant="outline"
-          icon="trash"
-          type="button"
-        />
-      </Element>
-    </Element>
-  </Element>
-</template>
-
-<script>
-  import { $cart } from 'fulldev-ui/stores/cart.ts'
-  import { formatPrice } from 'fulldev-ui/utils/cart'
-
-  function setCards(items: any) {
-    const template = document.querySelector('template')
-    const container = document.querySelector('.cart-list')
-    if (!(container instanceof HTMLElement)) return
-    if (!(template instanceof HTMLTemplateElement)) return
-
-    container.innerHTML = ''
-
-    items.forEach((item: any, index: number) => {
-      const clone = template?.content.cloneNode(true)
-      if (!(clone instanceof DocumentFragment)) return
-      const card = clone.querySelector('.cart-list-card')
-      if (!card) return
-
-      const image = card.querySelector('img')
-      const heading = card.querySelector('.heading')
-      const price = card.querySelector('.price')
-      // const input = card.querySelector('.input-input')
-      const remove = card.querySelector('.button')
-
-      if (image) image.src = item.image
-      if (heading) heading.textContent = item.name
-      if (price) price.textContent = formatPrice(item.price)
-
-      remove?.addEventListener('click', () => {
-        const currentCart = $cart.get()
-        const newCart = [...currentCart]
-        newCart.splice(index, 1)
-        $cart.set(newCart)
-      })
-
-      container.appendChild(clone)
-    })
-  }
-
-  document.addEventListener('astro:page-load', () => {
-    setCards($cart.get())
-
-    $cart.subscribe((items: any) => {
-      setCards(items)
-    })
-  })
-</script>
-
-<style is:global>
-  @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;
-      }
-
-      .input {
-        @apply w-16;
-      }
-    }
-  }
-</style> -->