fulldev-ui 0.5.0-beta.9 → 0.6.0-beta-5

package/src/blocks/Contact.astro

@@ -1,116 +0,0 @@
----
-import Button from 'fulldev-ui/components/Button.astro'
-import Buttons from 'fulldev-ui/components/Buttons.astro'
-import Channels from 'fulldev-ui/components/Channels.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Form from 'fulldev-ui/components/experimental/Form.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Input from 'fulldev-ui/components/Input.astro'
-import Section from 'fulldev-ui/components/Section.astro'
-import Socials from 'fulldev-ui/components/Socials.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Text from 'fulldev-ui/components/Text.astro'
-import Textarea from 'fulldev-ui/components/Textarea.astro'
-
-const {
-  heading,
-  form,
-  text,
-  tagline,
-  googleMaps,
-  buttons,
-  socials,
-  position,
-  image,
-  channels,
-  level = 1,
-  ...rest
-} = Astro.props
----
-
-<Section
-  class:list="contact"
-  structure="split"
-  {...rest}
->
-  <Element class:list="column">
-    <Tagline
-      color="brand"
-      text={tagline}
-    />
-    <Heading
-      size={'sm'}
-      level={level}
-      text={heading}
-    />
-    <Text text={text} />
-    <Buttons {buttons} />
-    <Channels {channels} />
-    <Socials {socials} />
-    <Form
-      action="/thank-you"
-      method="POST"
-    >
-      {
-        form.fields.map((field: any) => {
-          if (field.type === 'textarea') {
-            return (
-              <Textarea
-                label={field.label}
-                id={field.name}
-                name={field.name}
-                required={field.required}
-              />
-            )
-          }
-          return (
-            <Input
-              label={field.label}
-              id={field.name}
-              name={field.name}
-              type={field.type}
-              required={field.required}
-            />
-          )
-        })
-      }
-      <Button
-        type="submit"
-        color="brand"
-        variant="primary"
-        text={form.button}
-      />
-    </Form>
-  </Element>
-
-  <Image
-    {position}
-    {...image}
-  />
-</Section>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .contact {
-      .column {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-      }
-
-      > .column {
-        gap: var(--space-5);
-      }
-
-      .channel + .channel {
-        margin-top: var(--space-3) !important;
-      }
-
-      .socials {
-        display: flex;
-        gap: var(--space-2);
-      }
-    }
-  }
-</style>

package/src/blocks/Content.astro

@@ -1,12 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="content"
-  structure="split"
-  align="center"
-  {...rest}
-/>

package/src/blocks/Cta.astro

@@ -1,15 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="cta"
-  variant="primary"
-  align="center"
-  size="lg"
-  color="brand"
-  panel
-  {...rest}
-/>

package/src/blocks/Excerpt.astro

@@ -1,14 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  level={1}
-  size="lg"
-  align="center"
-  variant="primary"
-  color="brand"
-  {...rest}
-/>

package/src/blocks/Features.astro

@@ -1,11 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="features"
-  structure="stack"
-  {...rest}
-/>

package/src/blocks/Hero.astro

@@ -1,15 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="hero"
-  level={1}
-  size="lg"
-  align="center"
-  variant="primary"
-  color="brand"
-  {...rest}
-/>

package/src/blocks/Intro.astro

@@ -1,23 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { image, ...rest } = Astro.props
----
-
-<Section
-  class:list="intro"
-  structure="column"
-  size="sm"
-  level={1}
-  {...rest}
-/>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .intro {
-      border-bottom: 1px solid var(--base-6);
-      padding-top: var(--space-7);
-      padding-bottom: var(--space-7);
-    }
-  }
-</style>

package/src/blocks/Jobs.astro

@@ -1,12 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="jobs"
-  structure="grid"
-  panel
-  {...rest}
-/>

package/src/blocks/Posts.astro

@@ -1,11 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="posts"
-  structure="grid"
-  {...rest}
-/>

package/src/blocks/Prices.astro

@@ -1,24 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="prices"
-  structure="stack"
-  panel
-  {...rest}
-/>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .prices {
-      .card {
-        .wrap {
-          margin-top: auto;
-        }
-      }
-    }
-  }
-</style>

package/src/blocks/Product.astro

@@ -1,110 +0,0 @@
----
-import { getImage } from 'astro:assets'
-import CartForm from 'fulldev-ui/components/CartForm.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Gallery from 'fulldev-ui/components/experimental/Gallery.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import List from 'fulldev-ui/components/List.astro'
-import Section from 'fulldev-ui/components/Section.astro'
-import Text from 'fulldev-ui/components/Text.astro'
-
-const {
-  heading,
-  title,
-  list,
-  price,
-  image,
-  images,
-  rating,
-  buttons,
-  text,
-  subheading,
-  variants,
-  button,
-  description,
-  form,
-  gallery = 'horizontal',
-  ...rest
-} = Astro.props
-
-const slug = Astro.url.pathname.replace(/^\/|\/$/g, '') || 'index'
-const src = `/src/images/${images?.[0].id}`
-const gotImage = await getImage({ src, width: 200, height: 200 })
-
-console.log({ hoi: gotImage.src })
----
-
-<Section
-  class:list="product"
-  structure="split"
-  {...rest}
->
-  {
-    images && images.length > 1 ? (
-      <Gallery
-        {images}
-        direction={gallery}
-      />
-    ) : (
-      <Image {...(image || images?.[0])} />
-    )
-  }
-  <Element class:list="column">
-    <Heading
-      level={2}
-      text={heading || title}
-    />
-    <Text
-      style={{ maxWidth: '420px' }}
-      text={text || description}
-    />
-    <List
-      items={list}
-      style={{ marginTop: 'var(--space-5)' }}
-    />
-    <CartForm
-      image={gotImage.src}
-      {title}
-      {price}
-      {slug}
-      {variants}
-    />
-  </Element>
-</Section>
-
-<style is:global lang="scss">
-  .product {
-    padding-top: 0px;
-
-    @media (min-width: 1024px) {
-      padding-top: var(--space-6);
-    }
-
-    .column {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--space-5);
-    }
-
-    .row {
-      display: flex;
-      align-items: center;
-      gap: var(--space-5);
-    }
-
-    @media (max-width: 1023.99px) {
-      .gallery {
-        margin-right: calc(-1 * var(--gutter));
-        margin-left: calc(-1 * var(--gutter));
-        width: calc(100% + (var(--gutter) * 2));
-
-        .small-carousel {
-          padding-right: var(--gutter);
-          padding-left: var(--gutter);
-        }
-      }
-    }
-  }
-</style>

package/src/blocks/Products.astro

@@ -1,11 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="products"
-  structure="carousel"
-  {...rest}
-/>

package/src/blocks/Reviews.astro

@@ -1,13 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="reviews"
-  structure="masonry"
-  align="center"
-  panel
-  {...rest}
-/>

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 './experimental/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
-  variants?:
-    | {
-        [key: string]: string[]
-      }
-    | undefined
-}
-
-const { title, slug, image, price, variants, ...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={Astro.url.origin ? Astro.url.origin + image : undefined}
-  />
-  {
-    Object.entries(variants ?? {}).map(([key, options]) => (
-      <Select
-        label={capitalize(key)}
-        name={`variant-${key}`}
-        options={options}
-      />
-    ))
-  }
-  <Price value={price} />
-  <Input
-    type="hidden"
-    name="price"
-    value={price}
-  />
-  <Button
-    variant="primary"
-    color="brand"
-    type="submit"
-    class="cart-add"
-    text="Toevoegen aan winkelwagen"
-  />
-</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 lang="scss">
-  @layer fulldev {
-    .cart-form {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-4);
-
-      .input {
-        display: none;
-      }
-    }
-  }
-</style>

package/src/components/CartList.astro

@@ -1,134 +0,0 @@
----
-import Element from 'fulldev-ui/components/Element.astro'
-import Button from './Button.astro'
-import Card from './Card.astro'
-import Heading from './Heading.astro'
-import Text from './Text.astro'
-
-const { ...rest } = Astro.props
----
-
-<Element
-  if
-  class:list="cart-list"
-  {...rest}
-/>
-
-<template>
-  <Card 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="tertiary"
-          icon="trash"
-          type="button"
-        />
-      </Element>
-    </Element>
-  </Card>
-</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 lang="scss" is:global>
-  @layer fulldev {
-    .cart-list {
-      display: flex;
-      flex-direction: column;
-
-      .card {
-        display: flex;
-        flex-direction: row;
-        gap: var(--space-5);
-        width: 100%;
-
-        &:not(:first-child) {
-          margin-top: var(--space-5);
-          border-top: 1px solid var(--color-a6);
-          padding-top: var(--space-5);
-        }
-
-        .image {
-          display: block;
-          width: 100px;
-          height: auto;
-        }
-
-        .column {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          gap: var(--space-3);
-          width: 100%;
-          height: 100%;
-        }
-
-        .row {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          align-items: center;
-        }
-      }
-    }
-  }
-</style>