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

package/src/components/Card.astro

@@ -1,173 +0,0 @@
----
-import { getEntry } from 'astro:content'
-import Element from 'fulldev-ui/components/Element.astro'
-import Icon from 'fulldev-ui/components/Icon.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Price from 'fulldev-ui/components/Price.astro'
-import Heading from './Heading.astro'
-import Lead from './Lead.astro'
-import Paragraph from './Paragraph.astro'
-import Rating from './Rating.astro'
-
-// interface Props
-//   extends GlobalProps,
-//     ComponentProps<typeof Writeup>,
-//     Omit<HTMLAttributes<'a'>, 'title'> {
-//   image?: ComponentProps<typeof Image>
-//   images?: ComponentProps<typeof Image>[]
-//   position?: ComponentProps<typeof Image>['position']
-//   buttons?: ComponentProps<typeof Buttons>['buttons']
-//   button?: ComponentProps<typeof Button> | undefined
-//   variant?: ComponentProps<typeof Button>['variant']
-//   align?: ComponentProps<typeof Writeup>['align']
-//   icon?: ComponentProps<typeof Icon>['name']
-//   price?: ComponentProps<typeof Price>['value']
-//   slug?: CollectionEntry<'pages'>['slug'] | undefined
-//   id?: any
-//   panel?: boolean | undefined
-//   title?: ComponentProps<typeof Writeup>['heading']
-// }
-
-const { slug, ...props } = Astro.props
-const page = slug && (await getEntry('pages', slug))
-
-const merged = {
-  ...props,
-  ...page?.data,
-}
-
-const {
-  href = slug === 'index' ? undefined : `/${slug}/`,
-  as = href ? 'a' : 'div',
-  heading = page?.data.title || props.title,
-  image = page?.data.images?.[0] || props.images?.[0],
-  size = 'md',
-  panel = true,
-  inset = panel,
-  level = 3,
-  lead,
-  paragraph,
-  rating,
-  price,
-  icon,
-  position,
-  ...rest
-} = merged
----
-
-<Element
-  class:list="card"
-  as={href ? 'a' : 'div'}
-  {href}
-  {panel}
-  {inset}
-  {size}
-  {...rest}
->
-  <Image
-    position={panel ? position : undefined}
-    {...image}
-  />
-  <Element class:list="card-content">
-    <Icon name={icon} />
-    <Rating
-      {size}
-      value={rating}
-    />
-    <Heading
-      {size}
-      {level}
-      text={heading}
-    />
-    <Lead
-      {size}
-      text={lead}
-    />
-    <Paragraph
-      {size}
-      text={paragraph}
-    />
-    <Price value={price} />
-  </Element>
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .card {
-      @apply relative flex flex-col items-start;
-
-      &:is(a[href]) > .image {
-        @apply transition hover:opacity-80;
-      }
-
-      .card-content {
-        @apply flex flex-col;
-      }
-
-      &.panel {
-        @apply overflow-hidden rounded-md border bg-card;
-      }
-
-      &.size-sm {
-        @apply gap-4;
-
-        .card-content {
-          @apply gap-2;
-        }
-
-        &.panel {
-          @apply p-4;
-        }
-
-        &.inset {
-          @apply gap-0 p-0;
-
-          .card-content {
-            @apply p-4;
-          }
-        }
-      }
-
-      &.size-md {
-        @apply gap-5;
-
-        .card-content {
-          @apply gap-2.5;
-        }
-
-        &.panel {
-          @apply p-5;
-        }
-
-        &.inset {
-          @apply gap-0 p-0;
-
-          .card-content {
-            @apply p-5;
-          }
-        }
-      }
-
-      &.size-lg {
-        @apply gap-6;
-
-        .card-content {
-          @apply gap-3;
-        }
-
-        &.panel {
-          @apply p-6;
-        }
-
-        &.inset {
-          @apply gap-0 p-0;
-
-          .card-content {
-            @apply p-6;
-          }
-        }
-      }
-    }
-  }
-</style>

package/src/components/Cards.astro

@@ -1,133 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Card from 'fulldev-ui/components/Card.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  level?: ComponentProps<typeof Card>['level']
-  panel?: ComponentProps<typeof Card>['panel']
-  position?: ComponentProps<typeof Card>['position']
-  cards?: ComponentProps<typeof Card>[] | undefined
-  structure?: 'grid' | 'masonry' | 'stack' | 'carousel' | 'bento' | undefined
-}
-
-const {
-  structure = 'grid',
-  level,
-  panel,
-  position,
-  cards,
-  size,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="cards"
-  {panel}
-  {size}
-  {structure}
-  {...rest}
->
-  {
-    cards?.map((card: any) => (
-      <Card
-        level={level + 3}
-        {panel}
-        {size}
-        {position}
-        {...card}
-      />
-    ))
-  }
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .cards {
-      --column-width: 20rem;
-      @apply relative w-full;
-
-      &.structure-grid {
-        @apply grid w-full grid-cols-[repeat(auto-fill,minmax(var(--column-width),1fr))] gap-5;
-      }
-
-      &.structure-masonry {
-        @apply w-full columns-6 break-inside-avoid gap-5 space-y-5;
-        column-fill: balance;
-        column-width: var(--column-width);
-
-        /* & > * + * {
-          break-inside: avoid;
-          margin-top: var(--gap);
-          margin-bottom: var(--gap);
-        } */
-      }
-
-      &.structure-carousel {
-        display: flex;
-        align-items: flex-start;
-        gap: var(--gap);
-        padding-bottom: var(--gap);
-        overflow-x: auto;
-        scroll-behavior: smooth;
-        scroll-snap-type: x mandatory;
-
-        > * {
-          flex-grow: 0;
-          flex-shrink: 0;
-          width: var(--column-width);
-          scroll-snap-align: center;
-        }
-      }
-
-      &.structure-stack {
-        display: grid;
-        position: relative;
-        grid-template-columns: 1fr;
-        align-items: flex-start;
-        gap: var(--space-6);
-        width: 100%;
-
-        @media (min-width: 1024px) {
-          grid-auto-columns: 1fr;
-          grid-auto-flow: column;
-        }
-      }
-
-      &.structure-bento {
-        display: grid;
-        position: relative;
-        grid-template-columns: 1fr;
-        gap: var(--space-4);
-        width: 100%;
-
-        @media (min-width: 1024px) {
-          grid-template-columns: repeat(5, 1fr);
-
-          & > * {
-            grid-column: span 2;
-          }
-
-          & > *:nth-child(3n + 2),
-          & > *:nth-child(3n + 3) {
-            grid-column: span 3;
-          }
-        }
-      }
-
-      &.size-sm {
-        --column-width: 16rem;
-      }
-
-      &.size-md {
-        --column-width: 20rem;
-      }
-
-      &.size-lg {
-        --column-width: 26rem;
-      }
-    }
-  }
-</style>

package/src/components/CartForm.astro

@@ -1,121 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-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 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
-}
-
-const { title, slug, image, price, variants, soldout, ...rest } = Astro.props
----
-
-<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}
-      />
-    ))
-  }
-  <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>
-
-<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')
-
-    cartForm?.addEventListener('submit', (e) => {
-      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()
-      }
-    })
-  })
-</script>
-
-<style is:global>
-  @layer fulldev {
-    .cart-form {
-      @apply flex flex-col gap-4;
-
-      .input {
-        @apply hidden;
-      }
-    }
-  }
-</style>

package/src/components/CartList.astro

@@ -1,117 +0,0 @@
----
-import Element from 'fulldev-ui/components/Element.astro'
-import Button from './Button.astro'
-import Heading from './Heading.astro'
-import Text from './Text.astro'
-
-const { ...rest } = Astro.props
----
-
-<Element
-  if
-  class:list="cart-list"
-  {...rest}
-/>
-
-<template>
-  <Element class="cart-list-card">
-    <img class="cart-list-image image" />
-    <Element class="column">
-      <Heading
-        if
-        level={4}
-        class="heading"
-      />
-      <Element class="row">
-        <Text
-          if
-          class="cart-list-price"
-        />
-        <Button
-          class:list="cart-list-remove"
-          variant="ghost"
-          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 || !template) 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 img = card.querySelector('img')
-      if (img) img.src = item.image
-
-      const h4 = card.querySelector('h4')
-      if (h4) h4.textContent = item.name
-
-      const p = card.querySelector('p')
-      if (p) p.textContent = formatPrice(item.price)
-
-      const button = card.querySelector('button')
-      if (button) {
-        button.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;
-        }
-
-        .column {
-          @apply flex h-full w-full flex-col justify-between gap-3;
-        }
-
-        .row {
-          @apply flex w-full flex-row justify-between;
-        }
-      }
-    }
-  }
-</style>

package/src/components/Dialog.astro

@@ -1,66 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
-import Card from 'fulldev-ui/components/Card.astro'
-import type Icon from './Icon.astro'
-import type Label from './Label.astro'
-
-interface Props extends ComponentProps<typeof Card> {
-  icon?: ComponentProps<typeof Icon>['name']
-  label?: ComponentProps<typeof Label>['text']
-}
-
-const {
-  variant = 'secondary',
-  label,
-  icon,
-  id = 'dialog',
-  ...rest
-} = Astro.props
----
-
-<Button
-  id={`${id}-button`}
-  variant="secondary"
-  onclick={`document.getElementById('${id}').showModal()`}
-  {icon}
-/>
-
-<dialog
-  class="dialog"
-  id={id as string}
-  onclick={`event.target === this && this.close()`}
->
-  <Card
-    panel
-    {...rest}
-  >
-    <slot />
-  </Card>
-</dialog>
-
-<style is:global>
-  @layer fulldev {
-    .dialog {
-      margin: auto !important;
-      outline: 0;
-      border: 0;
-      background: none;
-      padding: var(--space-7) var(--gutter);
-      max-width: 768px;
-      max-height: 80vh;
-      overflow: hidden;
-
-      &::backdrop {
-        background: rgba(0, 0, 0, 0.5);
-      }
-
-      .card {
-        width: 100%;
-        height: 100%;
-        max-height: 80vh !important;
-        overflow: auto !important;
-      }
-    }
-  }
-</style>