fulldev-ui 0.4.32 → 0.5.0-beta-16

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,148 @@
+---
+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 { STRIPE_RESTRICTED_KEY, URL } from 'astro:env/client'
+  import { $cart } from 'fulldev-ui/stores/cart.ts'
+  import { formatPrice } from 'fulldev-ui/utils/cart'
+  import Stripe from 'stripe'
+
+  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', () => {
+    if (!STRIPE_RESTRICTED_KEY) return
+    const stripe = new Stripe(STRIPE_RESTRICTED_KEY)
+    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: `${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: [URL + item.image],
+            },
+            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>

package/src/components/Channel.astro

@@ -0,0 +1,70 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Text from 'fulldev-ui/components/Text.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, ComponentProps<typeof Button> {
+  variant?: ComponentProps<typeof Button>['variant']
+  icon?: ComponentProps<typeof Button>['icon']
+  href?: ComponentProps<typeof Button>['href']
+  heading?: ComponentProps<typeof Heading>['text']
+  text?: ComponentProps<typeof Text>['text']
+  structure?: 'row' | 'column' | undefined
+  align?: 'start' | 'center' | undefined
+}
+
+const {
+  variant = 'secondary',
+  structure = 'row',
+  color = 'brand',
+  align = 'start',
+  heading,
+  text,
+  icon,
+  href,
+  ...rest
+} = Astro.props
+---
+
+<Element
+  class:list={`channel ${structure}`}
+  {align}
+  {...rest}
+>
+  <Button
+    {variant}
+    {color}
+    {href}
+    {icon}
+  />
+  <Element class:list={'column'}>
+    <Heading
+      level={6}
+      text={heading}
+    />
+    <Text text={text} />
+  </Element>
+</Element>
+
+<style>
+  .channel {
+    gap: var(--space-4);
+
+    &.column {
+      display: flex;
+      flex-direction: column;
+      align-items: inherit;
+      gap: var(--space-1);
+    }
+
+    &.row {
+      display: flex;
+      flex-direction: row;
+      align-items: inherit;
+      gap: var(--space-1);
+    }
+  }
+</style>

package/src/components/Channels.astro

@@ -0,0 +1,37 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Channel from 'fulldev-ui/components/Channel.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  variant?: ComponentProps<typeof Channel>['variant']
+  channels?: ComponentProps<typeof Channel>[] | undefined
+}
+
+const { channels, variant, ...rest } = Astro.props
+---
+
+<Element
+  class:list="channels"
+  {...rest}
+>
+  {
+    channels?.map((channel) => (
+      <Channel
+        {variant}
+        {...channel}
+      />
+    ))
+  }
+</Element>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .channels {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-2);
+    }
+  }
+</style>

package/src/components/Checkbox.astro

@@ -1,21 +1,17 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
 import Label from 'fulldev-ui/components/Label.astro'
-import Root from 'fulldev-ui/components/Root.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-type Props = Omit<HTMLAttributes<'input'>, 'type'> & {
-  label?: string
-  color?: 'base' | 'brand'
-  contrast?: boolean
-  icon?: string
+interface Props extends GlobalProps, HTMLAttributes<'input'> {
+  label?: ComponentProps<typeof Label>['text']
 }
 
 const {
   label,
-  contrast,
-  icon,
-  name,
   id,
+  name,
   placeholder,
   value,
   disabled,
@@ -25,32 +21,32 @@ const {
 } = Astro.props
 ---
 
-<Root
-  structure="row"
+<Element
   class:list="checkbox"
   {...rest}
 >
-  <Root
+  <Element
     as="input"
     type="checkbox"
     id={id ?? name ?? label}
     if={id ?? name ?? label}
     name={name ?? label ?? id}
     {disabled}
+    {placeholder}
     {required}
     {checked}
     {...rest}
   />
   <Label
     for={id ?? name ?? label}
-    html={label}
-    {contrast}
+    text={label}
   />
-</Root>
+</Element>
 
 <style lang="scss" is:global>
   @layer fulldev {
     .checkbox {
+      display: flex;
       align-items: center;
       gap: var(--space-1);
 

package/src/components/Dialog.astro

@@ -1,11 +1,13 @@
 ---
-import type { ComponentProps, HTMLTag } from 'astro/types'
-import Button from './Button.astro'
-import Card from './Card.astro'
+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'
 
-type Props<As extends HTMLTag = 'a'> = ComponentProps<typeof Card<As>> & {
-  label?: string
-  icon?: string
+interface Props extends ComponentProps<typeof Card> {
+  icon?: ComponentProps<typeof Icon>['name']
+  label?: ComponentProps<typeof Label>['text']
 }
 
 const {
@@ -18,13 +20,10 @@ const {
 ---
 
 <Button
-  as="button"
-  type="button"
   id={`${id}-button`}
-  html={label}
-  icon={icon}
   variant="secondary"
   onclick={`document.getElementById('${id}').showModal()`}
+  {icon}
 />
 
 <dialog
@@ -33,8 +32,7 @@ const {
   onclick={`event.target === this && this.close()`}
 >
   <Card
-    as="div"
-    frame="panel"
+    panel
     {...rest}
   >
     <slot />