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

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/Header.astro

@@ -1,7 +0,0 @@
----
-import HeaderComponent from 'fulldev-ui/components/Header.astro'
-
-const { ...rest } = Astro.props
----
-
-<HeaderComponent {...rest} />

package/src/blocks/Intro.astro

@@ -1,101 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
-import Badge from 'fulldev-ui/components/Badge.astro'
-import Breadcrumb from 'fulldev-ui/components/Breadcrumb.astro'
-import Buttons from 'fulldev-ui/components/Buttons.astro'
-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 Lead from 'fulldev-ui/components/Lead.astro'
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Rating from 'fulldev-ui/components/Rating.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-
-interface Props extends HTMLAttributes<'section'> {
-  rating?: ComponentProps<typeof Rating> | undefined
-  badge?: ComponentProps<typeof Badge> | undefined
-  tagline?: ComponentProps<typeof Tagline>['text']
-  heading?: ComponentProps<typeof Heading>['text']
-  lead?: ComponentProps<typeof Lead>['text']
-  paragraph?: ComponentProps<typeof Paragraph>['text']
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-  image?: ComponentProps<typeof Image>['id']
-  level?: ComponentProps<typeof Heading>['level']
-  as?: HTMLTag
-  size?: 'sm' | 'md' | 'lg' | undefined
-  variant?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | undefined
-}
-
-const {
-  as = 'section',
-  size = 'lg',
-  variant = 1,
-  level = 1,
-  slug,
-  rating,
-  tagline,
-  badge,
-  heading,
-  lead,
-  paragraph,
-  buttons,
-  image,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="intro"
-  {as}
-  {size}
-  {variant}
-  {...rest}
->
-  <Element class:list="intro-container">
-    <Element class:list="intro-content">
-      <!-- <Breadcrumb {slug} /> -->
-      <Heading
-        text={heading}
-        as="h1"
-        level={3}
-        {size}
-      />
-      <Paragraph
-        text={paragraph}
-        {size}
-      />
-    </Element>
-    <slot />
-  </Element>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .intro {
-      @apply relative w-full;
-
-      .intro-container {
-        @apply flex h-full w-full flex-col;
-      }
-
-      .intro-content {
-        @apply flex max-w-screen-md flex-col gap-6;
-      }
-
-      &.dark {
-        @apply bg-background;
-      }
-
-      /* Background left */
-      &.variant-1 {
-        .intro-container {
-          @apply container justify-center py-16;
-        }
-
-        .intro-image {
-          @apply absolute inset-0 h-full w-full object-cover opacity-30;
-        }
-      }
-    }
-  }
-</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 >
-  @layer fulldev {
-    .prices {
-      .card {
-        .wrap {
-          margin-top: auto;
-        }
-      }
-    }
-  }
-</style>

package/src/blocks/Product.astro

@@ -1,89 +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/Gallery.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import List from 'fulldev-ui/components/List.astro'
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-
-const {
-  as = 'section',
-  size = 'md',
-  variant = 1,
-  level = 1,
-  heading,
-  paragraph,
-  title,
-  list,
-  price,
-  images,
-  text,
-  subheading,
-  variants,
-  button,
-  description,
-  form,
-  uitverkocht,
-  ...rest
-} = Astro.props
-
-const slug = Astro.url.pathname.replace(/^\/|\/$/g, '') || 'index'
-const imageId = images?.[0]?.id
-const src = `/src/images/${imageId}`
-const allImages = import.meta.glob<{ default: ImageMetadata }>('/src/images/*')
-const foundImage = allImages[src]
-const gotImage =
-  imageId && (await getImage({ src: foundImage ? foundImage() : src }))
----
-
-<Element
-  class:list="product"
-  {as}
-  {size}
-  {...rest}
->
-  <Element class:list="product-container">
-    <Gallery {images} />
-    <Element class:list="product-segment">
-      <Element class:list="product-content">
-        <Heading
-          {level}
-          text={heading || title}
-        />
-        <Paragraph text={paragraph || description} />
-        <List items={list} />
-      </Element>
-      <CartForm
-        soldout={uitverkocht}
-        image={gotImage?.src}
-        {title}
-        {price}
-        {slug}
-        {variants}
-      />
-    </Element>
-  </Element>
-</Element>
-
-<style is:global>
-  .product {
-    @apply relative w-full;
-
-    .product-container {
-      @apply container flex h-full w-full flex-col gap-16 py-8 lg:grid lg:grid-cols-[3fr_2fr];
-    }
-
-    .product-segment {
-      @apply z-10 flex flex-col items-start gap-8;
-    }
-
-    .product-content {
-      @apply flex max-w-screen-md flex-col gap-6;
-    }
-
-    &.dark {
-      @apply bg-background;
-    }
-  }
-</style> -->

package/src/blocks/Products.astro

@@ -1,101 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import Button from 'fulldev-ui/components/Button.astro'
-import Buttons from 'fulldev-ui/components/Buttons.astro'
-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'
-
-interface Props extends HTMLAttributes<'section'> {
-  heading?: ComponentProps<typeof Heading>['text']
-  button?: ComponentProps<typeof Buttons> | undefined
-  products?: CollectionEntry<'products'>[]
-}
-
-const { heading, button, products, ...rest } = Astro.props
----
-
-<Element
-  class:list="products"
-  if={products?.length}
-  as="section"
-  {...rest}
->
-  <Element class:list="products-container">
-    <Element class:list="products-segment">
-      <Heading
-        level={2}
-        size="sm"
-        text={heading}
-      />
-      <Button
-        variant="ghost"
-        size="sm"
-        {...button}
-      />
-    </Element>
-    <Element class:list="products-cards">
-      {
-        products?.map(({ slug, data }) => (
-          <Element
-            class:list="products-card"
-            as="a"
-            href={`/producten/${slug}/`}
-          >
-            <Image
-              class:list="products-card-image"
-              {...data.images?.[0]}
-            />
-            <Element class:list="products-card-content">
-              <Heading
-                as="h3"
-                level={5}
-                size={'sm'}
-                text={data.title}
-              />
-              <Price value={data.price} />
-            </Element>
-          </Element>
-        ))
-      }
-    </Element>
-  </Element>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .products {
-      @apply relative w-full py-16;
-
-      .products-container {
-        @apply container flex flex-col gap-8;
-      }
-
-      .products-segment {
-        @apply flex items-center justify-between gap-8;
-      }
-
-      .products-cards {
-        @apply grid grid-cols-2 items-start gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6;
-      }
-
-      .products-card {
-        @apply relative flex flex-col gap-3;
-
-        &:hover > .image {
-          @apply opacity-75 transition-opacity;
-        }
-
-        .image {
-          @apply rounded-md border;
-        }
-      }
-
-      .products-card-content {
-        @apply flex h-full flex-col gap-2;
-      }
-    }
-  }
-</style>

package/src/blocks/Reviews.astro

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

package/src/blocks/_Contact.astro

@@ -1,112 +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/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 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"
-        variant="primary"
-        text={form.button}
-      />
-    </Form>
-  </Element>
-
-  <Image
-    {position}
-    {...image}
-  />
-</Section>
-
-<style is:global>
-  @layer fulldev {
-    .oldcontact {
-      .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/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>