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

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

@@ -75,6 +75,12 @@ const {
       <Menu groups={menu} />
       <slot />
     </Element>
+    <Element
+      class:list="drawer-footer"
+      as="footer"
+    >
+      <slot name="footer" />
+    </Element>
   </Element>
 </Element>
 
@@ -99,7 +105,7 @@ const {
       max-height: 100%;
 
       @media (min-width: 768px) {
-        width: 360px;
+        width: 440px;
       }
 
       &::backdrop {
@@ -108,19 +114,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 +151,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/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,7 +52,6 @@ const {
     {buttons}
     variant="link"
   />
-  {search && <Search />}
   {themeselect && <ThemeSelect />}
   <Drawer
     icon="menu-2"
@@ -61,13 +60,7 @@ const {
     {logo}
     {company}
   />
-  <Drawer
-    icon="shopping-cart"
-    class="cart-button"
-    color="brand"
-    id="cart"
-    heading={cart}
-  />
+  <Cart heading={cart} />
 </Element>
 
 <style lang="scss" is:global>

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/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">

package/src/content/config.ts

@@ -2,6 +2,7 @@ import { defineCollection } from 'astro:content'
 import imageLoader from 'fulldev-ui/loaders/imageLoader.ts'
 import imageSchema from 'fulldev-ui/schemas/imageSchema.ts'
 import pageSchema from 'fulldev-ui/schemas/pageSchema.ts'
+import presetSchema from 'fulldev-ui/schemas/presetSchema.ts'
 
 export const collections = {
   pages: defineCollection({
@@ -10,7 +11,7 @@ export const collections = {
   }),
   presets: defineCollection({
     type: 'data',
-    schema: pageSchema,
+    schema: presetSchema,
   }),
   images: defineCollection({
     loader: imageLoader,

package/src/content/pages/base/select.mdx

@@ -2,14 +2,6 @@
 presets: [docs]
 
 title: Select
-
-example:
-  label: Select
-  name: select
-  placeholder: Select an option
-  options:
-    - Option 1
-    - Option 2
 ---
 
 # Select

package/src/content/pages/base/textarea.mdx

@@ -2,11 +2,6 @@
 presets: [docs]
 
 title: Textarea
-
-example:
-  name: textarea
-  placeholder: Write a message..
-  label: Textarea
 ---
 
 # Textarea

package/src/content/presets/docs.yml

@@ -1,5 +1,4 @@
 component: DocsLayout
-presets: [base]
 
 sidebar: true
 header: false

package/src/env.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="astro/client" />
-/// <reference path="../.astro/types.d.ts" />
+/// <reference path="../.astro/types.d.ts" />

package/src/layouts/Layout.astro

@@ -7,6 +7,7 @@ import Footer from 'fulldev-ui/blocks/Footer.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Head from 'fulldev-ui/components/Head.astro'
 import Header from 'fulldev-ui/components/Header.astro'
+import Section from 'fulldev-ui/components/Section.astro'
 import Sections from 'fulldev-ui/components/sections.astro'
 import Sidebar from 'fulldev-ui/components/Sidebar.astro'
 import Toc from 'fulldev-ui/components/Toc.astro'
@@ -19,6 +20,7 @@ type Props = GlobalProps &
     header?: ComponentProps<typeof Header>
     footer?: ComponentProps<typeof Footer>
     sections?: ComponentProps<typeof Sections>['sections']
+    section?: ComponentProps<typeof Section> | undefined
     banner?: any
     toc?: any
     sidebar?: any
@@ -47,6 +49,7 @@ const {
   toc,
   sections,
   theme,
+  section,
   banner,
   code,
   themeselect,
@@ -84,6 +87,7 @@ const {
       </slot>
       <main data-pagefind-body>
         <slot>
+          <Section {...section} />
           <Article />
           <Sections {sections} />
         </slot>

package/src/schemas/pageSchema.ts

@@ -4,6 +4,9 @@ import fulldevConfig from 'virtual:fulldev-ui/config'
 import footer from './components/footer'
 import header from './components/header'
 import image from './components/image'
+import images from './components/images'
+import price from './components/price'
+import section from './components/section'
 import sections from './components/sections'
 import sidebar from './components/sidebar'
 import toc from './components/toc'
@@ -12,7 +15,7 @@ import navigation from './utils/navigation'
 import parents from './utils/parents'
 import pathSchema from './utils/pathSchema'
 
-const i18n = z
+export const i18n = z
   .object({
     i18n: pathSchema('pages').optional(),
   })
@@ -24,7 +27,7 @@ const i18n = z
     return merged as typeof rest
   })
 
-const presets = z
+export const presets = z
   .object({
     presets: z.array(pathSchema('presets')).optional(),
   })
@@ -48,29 +51,51 @@ const presets = z
     return mergedData as typeof rest
   })
 
-export default i18n.pipe(presets).pipe(
-  z
-    .object({
-      component,
-      parents,
-      theme: z.enum(['light', 'dark']),
-      lang: z.string(),
-      seo: z
-        .object({
-          title: z.string().optional(),
-          description: z.string().optional(),
-        })
-        .optional(),
-      title: z.string(),
-      description: z.string().optional(),
-      image,
-      sections,
-      footer,
-      header: z.boolean().or(header),
-      sidebar: z.boolean().or(sidebar),
-      navigation,
-      toc,
-    })
-    .partial()
-    .passthrough()
-)
+export const basePreset = z
+  .object({})
+  .passthrough()
+  .transform(async (data) => {
+    if (!fulldevConfig.basePreset) return data
+    const baseEntry = await getEntry('presets', fulldevConfig.basePreset)
+    const mergedData = assign(baseEntry?.data ?? {}, data)
+    return mergedData as typeof data
+  })
+
+export const page = z
+  .object({
+    component,
+    parents,
+    theme: z.enum(['light', 'dark']),
+    lang: z.string(),
+    seo: z
+      .object({
+        title: z.string().optional(),
+        description: z.string().optional(),
+      })
+      .optional(),
+    title: z.string(),
+    description: z.string().optional(),
+    image,
+    images,
+    section,
+    sections,
+    footer,
+    header: z.boolean().or(header),
+    sidebar: z.boolean().or(sidebar),
+    navigation,
+    toc,
+    price,
+    code: z.any(),
+    sizes: z.any(),
+    banner: z.any(),
+    _schema: z.any(),
+    uitverkocht: z.any(),
+    rating: z.any(),
+    variants: z.any(),
+    heading: z.any(),
+    href: z.any(),
+  })
+  .partial()
+  .strict()
+
+export default i18n.pipe(basePreset).pipe(presets).pipe(page)

package/src/schemas/presetSchema.ts

@@ -0,0 +1,3 @@
+import { page } from './pageSchema'
+
+export default page

package/src/stores/cart.ts

@@ -0,0 +1,23 @@
+import { persistentAtom } from '@nanostores/persistent'
+import { computed } from 'nanostores'
+
+// type Item = CollectionEntry<'products'>['data'] & {
+//   quantity: number
+// }
+
+type Item = any
+
+export const $cart = persistentAtom<Item[] | []>('cart', [], {
+  encode: JSON.stringify,
+  decode: JSON.parse,
+})
+
+// export const cartIsOpen = atom(false)
+
+export const $totalPrice = computed($cart, ($cart) =>
+  $cart.reduce((a, b) => +a + b.price * b.quantity, 0)
+)
+
+// export const totalQuantity = computed(cart, ($cart) =>
+//   $cart.reduce((a, b) => +a + b.quantity, 0)
+// )