fulldev-ui 0.5.0-beta.1 → 0.5.0-beta.10

package/src/blocks/Product.astro

@@ -1,10 +1,11 @@
 ---
-import Button from 'fulldev-ui/components/Button.astro'
+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 Input from 'fulldev-ui/components/Input.astro'
-import Price from 'fulldev-ui/components/Price.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'
 
@@ -19,11 +20,19 @@ const {
   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
@@ -31,47 +40,71 @@ const {
   structure="split"
   {...rest}
 >
-  <Image {...image || images?.[0]} />
+  {
+    images && images.length > 1 ? (
+      <Gallery
+        {images}
+        direction={gallery}
+      />
+    ) : (
+      <Image {...(image || images?.[0])} />
+    )
+  }
   <Element class:list="column">
     <Heading
-      level={1}
+      level={2}
       text={heading || title}
     />
     <Text
       style={{ maxWidth: '420px' }}
       text={text || description}
     />
-    <Price value={price} />
-    <Element class:list="row">
-      <Input
-        value={1}
-        name={'quantity'}
-        style={{ width: 'var(--space-6)' }}
-        type="number"
-      />
-      <Button
-        color="brand"
-        text={form?.submit}
-      />
-    </Element>
-    <Button
-      style={{ marginTop: 'var(--space-3)', width: '100%', maxWidth: '400px' }}
-      variant="secondary"
-      {...button}
+    <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/components/Card.astro

@@ -9,6 +9,7 @@ import Image from 'fulldev-ui/components/Image.astro'
 import Writeup from 'fulldev-ui/components/Writeup.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
 import Icon from './Icon.astro'
+import Price from './Price.astro'
 
 interface Props
   extends GlobalProps,
@@ -22,9 +23,11 @@ interface Props
   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 } = Astro.props
@@ -33,7 +36,7 @@ const page = slug ? (await getEntry('pages', slug)).data : {}
 const entryProps = {
   heading: page.title,
   text: page.description,
-  href: `/${slug}/`,
+  href: slug ? `/${slug}/` : undefined,
   ...page,
 }
 
@@ -47,12 +50,14 @@ const {
   heading,
   text,
   variant,
+  price,
   list,
   button,
   buttons,
   panel,
   image,
   icon,
+  title,
   images,
   position,
   ...rest
@@ -81,14 +86,15 @@ const {
   </slot>
   <slot name="writeup">
     <Writeup
+      heading={heading || title}
       {level}
       {rating}
       {badge}
       {tagline}
-      {heading}
       {text}
       {list}
     />
+    <Price value={price} />
   </slot>
   <slot name="buttons">
     <Button
@@ -121,12 +127,12 @@ const {
       &[href] {
         cursor: pointer;
 
-        > .root.image {
-          transition: all;
+        > .image {
+          transition: all 0.2s ease;
         }
 
         &:hover {
-          > .root.image {
+          > .image {
             opacity: 0.8;
           }
         }

package/src/components/Cart.astro

@@ -0,0 +1,38 @@
+---
+import type { ComponentProps } from 'astro/types'
+import CartList from 'fulldev-ui/components/CartList.astro'
+import CartSummary from 'fulldev-ui/components/CartSummary.astro'
+import Drawer from 'fulldev-ui/components/Drawer.astro'
+
+interface Props extends ComponentProps<typeof Drawer> {}
+
+const {
+  icon = 'shopping-cart',
+  color = 'brand',
+  id = 'cart',
+  if: ifProp,
+  ...rest
+} = Astro.props
+---
+
+<Drawer
+  if={ifProp}
+  class:list="cart"
+  {icon}
+  {color}
+  {id}
+  {...rest}
+>
+  <CartList />
+  <CartSummary slot="footer" />
+</Drawer>
+
+<style lang="scss" is:global>
+  @layer fulldev {
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-4);
+    }
+  }
+</style>

package/src/components/CartForm.astro

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

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

package/src/components/CartSummary.astro

@@ -0,0 +1,147 @@
+---
+import Button from './Button.astro'
+import Element from './Element.astro'
+import Price from './Price.astro'
+import Text from './Text.astro'
+
+interface Props {}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  size="md"
+  class="cart-summary"
+>
+  <div
+    class="row"
+    {...rest}
+  >
+    <Text
+      class:list="total"
+      text="Totaal"
+      contrast
+    />
+    <Price value={10} />
+  </div>
+  <Text
+    class:list="shipping"
+    text="Verzendkosten worden berekend bij het afrekenen."
+  />
+  <Button
+    class:list="checkout-button"
+    variant="primary"
+    color="brand"
+    text="Afrekenen"
+  />
+</Element>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .cart-summary {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-3);
+
+      .price,
+      .total {
+        font-size: var(--text-4);
+      }
+
+      .row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .shipping {
+        font-size: var(--text-1);
+      }
+    }
+  }
+</style>
+
+<script>
+  import { $cart } from 'fulldev-ui/stores/cart.ts'
+  import { formatPrice } from 'fulldev-ui/utils/cart'
+  import Stripe from 'stripe'
+
+  const stripe = new Stripe(import.meta.env.PUBLIC_STRIPE_CHECKOUT_KEY)
+
+  function setPrice(items: any) {
+    const price = document.querySelector('.cart-summary .price')
+    if (price)
+      price.textContent = formatPrice(
+        items.reduce(
+          (acc: number, item: { price: number }) => acc + item.price,
+          0
+        )
+      )
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    setPrice($cart.get())
+
+    $cart.subscribe((items: any) => {
+      setPrice(items)
+    })
+
+    const button = document.querySelector('.cart-summary .checkout-button')
+
+    button?.addEventListener('click', async () => {
+      const items = $cart.get()
+
+      const checkoutConfig = {
+        success_url: `${import.meta.env.PUBLIC_SITE_URL}/checkout`,
+        mode: 'payment',
+        customer_creation: 'always',
+        shipping_address_collection: {
+          allowed_countries: ['NL'],
+        },
+        phone_number_collection: {
+          enabled: true,
+        },
+      }
+
+      try {
+        const lineItems = items.map((item: any) => ({
+          price_data: {
+            currency: 'eur',
+            product: item.id,
+          },
+          quantity: 1,
+        }))
+
+        // @ts-ignore
+        const checkoutSession = await stripe.checkout.sessions.create({
+          line_items: lineItems,
+          ...checkoutConfig,
+        })
+
+        checkoutSession.url && window.location.replace(checkoutSession.url)
+      } catch (error) {
+        console.error(error)
+
+        const lineItems = items.map((item: any) => ({
+          quantity: 1,
+          price_data: {
+            currency: 'eur',
+            product_data: {
+              name: item.name,
+              images: [window],
+            },
+            unit_amount: Math.round(item.price * 100),
+          },
+        }))
+
+        // @ts-ignore
+        const checkoutSession = await stripe.checkout.sessions.create({
+          line_items: lineItems,
+          ...checkoutConfig,
+        })
+
+        checkoutSession.url && window.location.replace(checkoutSession.url)
+      }
+    })
+  })
+</script>