fulldev-ui 0.5.0-beta.4 → 0.5.0-beta.6

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,146 @@
+---
+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,
+            },
+            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/Drawer.astro

@@ -1,95 +1,162 @@
 ---
-import type { ComponentProps } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
-import Card from 'fulldev-ui/components/Card.astro'
 import Element from 'fulldev-ui/components/Element.astro'
+import Logo from 'fulldev-ui/components/experimental/Logo.astro'
+import Menu from 'fulldev-ui/components/Menu.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Heading from './Heading.astro'
 
-interface Props extends Omit<ComponentProps<typeof Card>, 'position'> {
-  label?: string | undefined
-  icon?: string | undefined
-  position?: 'left' | 'right' | undefined
-  panel?: boolean | undefined
+interface Props extends GlobalProps, HTMLAttributes<'aside'> {
+  variant?: ComponentProps<typeof Button>['variant']
+  text?: ComponentProps<typeof Button>['text']
+  icon?: ComponentProps<typeof Button>['icon']
+  heading?: ComponentProps<typeof Heading>['text']
+  logo?: ComponentProps<typeof Logo> | undefined
+  company?: ComponentProps<typeof Logo>['company']
+  menu?: ComponentProps<typeof Menu>['groups']
 }
 
 const {
   id = 'drawer',
-  position = 'left',
-  panel,
-  label,
-  icon,
+  size = 'sm',
+  icon = 'menu-2',
+  color,
+  variant,
+  text,
+  heading,
+  logo,
+  company,
+  menu,
   ...rest
 } = Astro.props
 ---
 
 <Button
-  class:list="drawer-button"
   variant="secondary"
-  id={`${id}-button`}
-  text={label}
-  icon={icon}
+  class:list={['drawer-button', `${id}-button`]}
   onclick={`document.getElementById('${id}').showModal()`}
+  {variant}
+  {text}
+  {icon}
+  {color}
 />
 
 <Element
+  onclick={`event.target === this && this.close()`}
+  class:list="drawer"
   as="dialog"
-  class="drawer"
   {id}
-  {position}
-  onclick={`event.target === this && this.close()`}
+  {text}
+  {icon}
+  {...rest}
 >
-  <Element
-    class:list={[panel, `position-${position}`]}
-    {...rest}
-  >
-    <slot />
+  <Element class:list="drawer-body">
+    <Element
+      class:list="drawer-header"
+      as="header"
+    >
+      <Logo
+        {company}
+        {...logo}
+      />
+      <Heading
+        level={4}
+        text={heading}
+      />
+      <Button
+        variant="secondary"
+        icon="x"
+        onclick={`document.getElementById('${id}').close()`}
+      />
+      <slot name="header" />
+    </Element>
+    <Element class:list="drawer-content">
+      <Menu groups={menu} />
+      <slot />
+    </Element>
+    <Element
+      class:list="drawer-footer"
+      as="footer"
+    >
+      <slot name="footer" />
+    </Element>
   </Element>
 </Element>
 
 <style lang="scss" is:global>
   @layer fulldev {
+    body:has(dialog[open]) {
+      overflow: hidden;
+
+      @media (min-width: 768px) {
+        overflow: auto;
+      }
+    }
+
     .drawer {
-      flex-shrink: 0;
-      align-items: stretch;
-      box-sizing: border-box;
-      margin: 0 !important;
-      outline: 0;
-      border: 0;
-      background: var(--color-2);
+      top: 0;
+      bottom: 0;
+      margin: 0;
       padding: 0;
-      padding: var(--space-7) var(--space-7) var(--space-7) var(--gutter);
-      min-width: 260px;
-      max-width: 360px;
-      height: 100vh;
-      max-height: 100vh;
+      width: 100%;
+      max-width: 100%;
+      height: 100%;
+      max-height: 100%;
+
+      @media (min-width: 768px) {
+        width: 440px;
+      }
 
       &::backdrop {
+        cursor: pointer;
         background: rgba(0, 0, 0, 0.5);
       }
 
-      &.position-left {
-        margin-right: 0;
+      .drawer-body {
+        display: flex;
+        flex-shrink: 1;
+        flex-direction: column;
+        border-right: 1px solid var(--color-a6);
+        height: 100%;
+        overflow: auto;
+      }
+
+      .drawer-content {
+        display: flex;
+        flex-direction: column;
+        padding: var(--space-6) var(--gutter);
       }
 
-      &.position-right {
-        right: 0;
+      .drawer-header,
+      .drawer-footer {
+        display: flex;
+        position: sticky;
+        flex-shrink: 0;
+        z-index: 1;
+        border-style: solid;
+        border-color: var(--color-a6);
+        background-color: var(--base-background);
       }
 
-      .box {
-        padding: calc(var(--space-5) * 2) calc(var(--space-7) * 3);
-        min-width: calc(var(--space-7) * 14);
-        height: 100vh;
-        overflow-x: hidden;
-        overflow-y: auto;
+      .drawer-header {
+        top: 0;
+        align-items: center;
+        border-bottom-width: 1px;
+        padding: 0 var(--gutter);
+        height: 56px;
 
-        &.position-left {
-          border-right: 1px solid var(--color-a6);
-          padding-left: var(--gutter);
+        .button {
+          margin-left: auto;
         }
+      }
 
-        &.position-right {
-          border-left: 1px solid var(--color-a6);
-          padding-right: var(--gutter);
-        }
+      .drawer-footer {
+        bottom: 0;
+        flex-direction: column;
+        margin-top: auto;
+        border-top-width: 1px;
+        padding: var(--space-5) var(--gutter);
       }
     }
   }

package/src/components/Footer.astro

@@ -132,6 +132,10 @@ const {
         flex-direction: column;
       }
 
+      > .column {
+        gap: var(--space-4);
+      }
+
       .socials {
         display: flex;
       }

package/src/components/Form.astro

@@ -0,0 +1,49 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Input from 'fulldev-ui/components/Input.astro'
+import Select from 'fulldev-ui/components/Select.astro'
+import Textarea from 'fulldev-ui/components/Textarea.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'form'> {
+  fields: (
+    | ComponentProps<typeof Input>
+    | ComponentProps<typeof Select>
+    | (ComponentProps<typeof Textarea> & { type?: 'textarea' | undefined })
+  )[]
+  submit?: ComponentProps<typeof Button>['text']
+}
+
+const { fields, submit, ...rest } = Astro.props
+---
+
+<Element
+  class:list="form"
+  as="form"
+  {...rest}
+>
+  {
+    fields.map((field) => {
+      if ('options' in field) return <Select {...field} />
+      if ('type' in field && field.type === 'textarea')
+        return <Textarea {...field} />
+      return <Input {...(field as any)} />
+    })
+  }
+  <Button
+    type="submit"
+    text={submit}
+  />
+</Element>
+
+<style is:global lang="scss">
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    width: 100%;
+    max-width: calc(var(--space-4) * 44);
+  }
+</style>

package/src/components/Header.astro

@@ -1,21 +1,24 @@
 ---
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
-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 Logo from 'fulldev-ui/components/experimental/Logo.astro'
-import Search from 'fulldev-ui/components/Search.astro'
 import ThemeSelect from 'fulldev-ui/components/ThemeSelect.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Cart from './Cart.astro'
+import Drawer from './Drawer.astro'
+import type Menu from './Menu.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'header'> {
-  logo?: ComponentProps<typeof Logo>['src']
+  logo?: ComponentProps<typeof Logo>
   company?: ComponentProps<typeof Logo>['company']
   buttons?: ComponentProps<typeof Buttons>['buttons']
+  menu?: ComponentProps<typeof Menu>['groups']
   panel?: boolean | undefined
   search?: boolean | undefined
   open?: boolean | undefined
   themeselect?: boolean | undefined
+  cart?: string | undefined
 }
 
 const {
@@ -26,7 +29,9 @@ const {
   buttons,
   search,
   panel,
+  menu,
   themeselect,
+  cart,
   ...rest
 } = Astro.props
 ---
@@ -47,14 +52,15 @@ const {
     {buttons}
     variant="link"
   />
-  {search && <Search />}
   {themeselect && <ThemeSelect />}
-  <Button
-    class="menu-button"
-    variant="tertiary"
+  <Drawer
     icon="menu-2"
-    for="sidebar"
+    id="menu"
+    {menu}
+    {logo}
+    {company}
   />
+  <Cart heading={cart} />
 </Element>
 
 <style lang="scss" is:global>
@@ -118,10 +124,6 @@ const {
       }
 
       .menu-button {
-        .icon {
-          transform: scale(1.56);
-        }
-
         @media (min-width: 1024px) {
           display: none;
         }

package/src/components/Input.astro

@@ -17,6 +17,7 @@ const {
   disabled,
   required,
   placeholder,
+  readonly,
   name = placeholder,
   type = 'text',
   ...rest
@@ -41,6 +42,7 @@ const {
     {value}
     {disabled}
     {required}
+    {readonly}
   />
   <Icon name={icon} />
 </Element>
@@ -97,6 +99,10 @@ const {
           cursor: not-allowed;
           pointer-events: none;
         }
+
+        &[readonly] {
+          pointer-events: none;
+        }
       }
     }
   }

package/src/components/Menu.astro

@@ -0,0 +1,56 @@
+---
+import type { ComponentProps, HTMLAttributes } 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 type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  groups?:
+    | {
+        heading?: ComponentProps<typeof Heading>['text']
+        buttons?: ComponentProps<typeof Button>[]
+      }[]
+    | undefined
+}
+
+const { groups, ...rest } = Astro.props
+---
+
+<Element
+  class:list="menu"
+  {...rest}
+>
+  {
+    groups?.map(({ heading, buttons }) => (
+      <Element class:list="menu-group">
+        <Heading
+          level={6}
+          text={heading}
+        />
+        {buttons?.map((button) => (
+          <Button
+            variant="link"
+            {...button}
+          />
+        ))}
+      </Element>
+    ))
+  }
+</Element>
+
+<style lang="scss" is:global>
+  @layer fulldev {
+    .menu {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-5);
+
+      .menu-group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-4);
+      }
+    }
+  }
+</style>