fulldev-ui 0.5.0-beta.5 → 0.5.0-beta.7

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

@@ -5,6 +5,7 @@ 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 Buttons from './Buttons.astro'
 import Heading from './Heading.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'aside'> {
@@ -15,6 +16,7 @@ interface Props extends GlobalProps, HTMLAttributes<'aside'> {
   logo?: ComponentProps<typeof Logo> | undefined
   company?: ComponentProps<typeof Logo>['company']
   menu?: ComponentProps<typeof Menu>['groups']
+  buttons?: ComponentProps<typeof Buttons>['buttons']
 }
 
 const {
@@ -24,15 +26,21 @@ const {
   color,
   variant,
   text,
+  buttons,
   heading,
   logo,
   company,
   menu,
+  if: ifProp,
   ...rest
 } = Astro.props
+
+const buttonsGroup = { heading: '', buttons: buttons }
+const mergedMenu = [buttonsGroup, ...(menu || [])] as typeof menu
 ---
 
 <Button
+  if={ifProp}
   variant="secondary"
   class:list={['drawer-button', `${id}-button`]}
   onclick={`document.getElementById('${id}').showModal()`}
@@ -43,6 +51,7 @@ const {
 />
 
 <Element
+  if={ifProp}
   onclick={`event.target === this && this.close()`}
   class:list="drawer"
   as="dialog"
@@ -72,9 +81,15 @@ const {
       <slot name="header" />
     </Element>
     <Element class:list="drawer-content">
-      <Menu groups={menu} />
+      <Menu groups={mergedMenu} />
       <slot />
     </Element>
+    <Element
+      class:list="drawer-footer"
+      as="footer"
+    >
+      <slot name="footer" />
+    </Element>
   </Element>
 </Element>
 
@@ -99,7 +114,7 @@ const {
       max-height: 100%;
 
       @media (min-width: 768px) {
-        width: 360px;
+        width: 440px;
       }
 
       &::backdrop {
@@ -108,19 +123,35 @@ const {
       }
 
       .drawer-body {
+        display: flex;
         flex-shrink: 1;
+        flex-direction: column;
         border-right: 1px solid var(--color-a6);
         height: 100%;
         overflow: auto;
       }
 
-      .drawer-header {
+      .drawer-content {
+        display: flex;
+        flex-direction: column;
+        padding: var(--space-6) var(--gutter);
+      }
+
+      .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);
+      }
+
+      .drawer-header {
         top: 0;
         align-items: center;
-        border-bottom: 1px solid var(--color-a6);
-        background-color: var(--base-background);
+        border-bottom-width: 1px;
         padding: 0 var(--gutter);
         height: 56px;
 
@@ -129,10 +160,12 @@ const {
         }
       }
 
-      .drawer-content {
-        display: flex;
+      .drawer-footer {
+        bottom: 0;
         flex-direction: column;
-        padding: var(--space-6) var(--gutter);
+        margin-top: auto;
+        border-top-width: 1px;
+        padding: var(--space-5) var(--gutter);
       }
     }
   }

package/src/components/Footer.astro

@@ -115,7 +115,6 @@ const {
       background-color: var(--base-2);
       padding: var(--space-7) var(--gutter);
       width: 100%;
-      overflow: auto;
 
       @media (min-width: 1024px) {
         grid-auto-columns: 1fr;

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

@@ -3,9 +3,9 @@ import type { ComponentProps, HTMLAttributes } from 'astro/types'
 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'
 
@@ -52,20 +52,17 @@ const {
     {buttons}
     variant="link"
   />
-  {search && <Search />}
   {themeselect && <ThemeSelect />}
   <Drawer
     icon="menu-2"
     id="menu"
-    {menu}
     {logo}
     {company}
+    {buttons}
+    {menu}
   />
-  <Drawer
-    icon="shopping-cart"
-    class="cart-button"
-    color="brand"
-    id="cart"
+  <Cart
+    if={cart}
     heading={cart}
   />
 </Element>

package/src/components/Image.astro

@@ -42,7 +42,6 @@ const image = images[src as keyof typeof images]
   image && (
     <AstroImage
       class:list={['image', position && `position-${position}`]}
-      style={{ '--screen': '100vw' }}
       alt={alt || getAltBySrc()}
       src={image ? image() : src}
       width={width}

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

@@ -2,6 +2,7 @@
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import { formatPrice } from 'fulldev-ui/utils/cart'
 
 interface Props extends GlobalProps, HTMLAttributes<'div'> {
   size?: 'sm' | 'md' | 'lg' | undefined
@@ -13,17 +14,12 @@ interface Props extends GlobalProps, HTMLAttributes<'div'> {
 const { value, ...rest } = Astro.props
 ---
 
-{
-  value && (
-    <Element
-      if={value}
-      class:list="price"
-      {...rest}
-    >
-      €{value?.toFixed(2).replace('.', ',')}
-    </Element>
-  )
-}
+<Element
+  class:list="price"
+  {...rest}
+>
+  {value && <Fragment set:html={formatPrice(value)} />}
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {

package/src/components/Search.astro

@@ -1,5 +1,4 @@
 ---
-import Pagefind from 'astro-pagefind/components/Search'
 import Dialog from 'fulldev-ui/components/Dialog.astro'
 
 const { variant = 'secondary', ...rest } = Astro.props
@@ -11,9 +10,7 @@ const { variant = 'secondary', ...rest } = Astro.props
   icon="search"
   {variant}
   {...rest}
->
-  <Pagefind uiOptions={{ showImages: false }} />
-</Dialog>
+/>
 
 <style is:global lang="scss">
   :root {

package/src/components/Section.astro

@@ -154,7 +154,6 @@ const Component =
       align-items: flex-start;
       gap: var(--space-6) var(--space-7);
       padding: var(--spacer) var(--gutter);
-      overflow: auto;
 
       .segment {
         display: flex;

package/src/components/Sidebar.astro

@@ -91,7 +91,7 @@ const {
           top: 0;
           flex: 1;
           flex-direction: column;
-          padding: var(--space-6) var(--gutter);
+          padding: var(--space-md-6) var(--gutter);
           width: 100%;
           overflow-y: auto;
         }

package/src/components/Toc.astro

@@ -20,7 +20,7 @@ const filteredHeadings = headings?.filter(
 ---
 
 <Element
-  if={filteredHeadings?.length > 0}
+  if={filteredHeadings?.length > 1}
   class:list="toc"
   {size}
   {...rest}
@@ -49,17 +49,14 @@ const filteredHeadings = headings?.filter(
       @media (min-width: 1024px) {
         display: flex;
         position: sticky;
-        top: var(--header-height, 0px);
+        top: calc(var(--header-height, 0px) + var(--space-6));
         bottom: 0;
         flex-shrink: 0;
         flex-direction: column;
         justify-content: flex-start;
         gap: var(--space-4);
         z-index: 10;
-        padding: var(--space-md-6) var(--gutter);
-        width: calc(var(--space-7) * 4);
-        height: calc(100vh - var(--header-height, 0px));
-        overflow-y: auto;
+        min-width: calc(var(--space-7) * 3);
 
         .depth-3 {
           padding-left: var(--space-4);

package/src/components/docs/PropsTable.astro

@@ -3,7 +3,7 @@ import Table from 'fulldev-ui/components/Table.astro'
 import { readFileSync } from 'node:fs'
 import { pascal } from 'radash'
 
-const slug = Astro.url.pathname.replace(/\/$/, '').split('/').pop() || ''
+const slug = Astro.params.page || 'index'
 const componentName = pascal(slug)
 
 const allComponents = import.meta.glob('/src/**/*.astro', { eager: true })

package/src/components/experimental/Form.astro

@@ -1,21 +1,45 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Button from '../Button.astro'
+import Input from '../Input.astro'
+import Select from '../Select.astro'
+import Textarea from '../Textarea.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'form'> {
-  structure?: 'column' | 'row' | 'group' | undefined
+  submit?: ComponentProps<typeof Button>['text']
+  fields?:
+    | (
+        | ComponentProps<typeof Input>
+        | ComponentProps<typeof Select>
+        | (ComponentProps<typeof Textarea> & { type?: 'textarea' | undefined })
+      )[]
+    | undefined
 }
 
-const { structure = 'column', ...rest } = Astro.props
+const { fields, submit, ...rest } = Astro.props
 ---
 
 <Element
-  class:list={`form ${structure}`}
+  class:list="form"
   as="form"
   {...rest}
 >
-  <slot />
+  <slot>
+    {
+      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}
+    />
+  </slot>
 </Element>
 
 <style is:global lang="scss">