fulldev-ui 0.6.0-beta.0 → 0.6.0-beta.10

package/src/components/CartSummary.astro

@@ -1,8 +1,10 @@
 ---
-import Button from './Button.astro'
+// @ts-nocheck
+import { STRIPE_RESTRICTED_KEY, URL } from 'astro:env/client'
+import CartCheckout from './CartCheckout.svelte'
+import CartTotal from './CartTotal.svelte'
 import Element from './Element.astro'
-import Price from './Price.astro'
-import Text from './Text.astro'
+import Paragraph from './Paragraph.astro'
 
 interface Props {}
 
@@ -17,21 +19,21 @@ const { ...rest } = Astro.props
     class="row"
     {...rest}
   >
-    <Text
+    <Paragraph
       class:list="total"
       text="Totaal"
       contrast
     />
-    <Price value={10} />
+    <CartTotal client:load />
   </div>
-  <Text
+  <Paragraph
     class:list="shipping"
     text="Verzendkosten worden berekend bij het afrekenen."
   />
-  <Button
-    class:list="checkout-button"
-    variant="primary"
-    text="Afrekenen"
+  <CartCheckout
+    {STRIPE_RESTRICTED_KEY}
+    {URL}
+    client:load
   />
 </Element>
 
@@ -55,90 +57,3 @@ const { ...rest } = Astro.props
     }
   }
 </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')
-    console.log('settings price', 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/CartTotal.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cart } from 'fulldev-ui/stores/cart.svelte.ts'
+  import { formatPrice } from 'fulldev-ui/utils/cart'
+
+  let total = $derived(
+    $cart.reduce(
+      (acc, item) => acc + (item.price || 0) * (item.quantity || 0),
+      0
+    )
+  )
+</script>
+
+<div>
+  {formatPrice(total)}
+</div>

package/src/components/Channel.astro

@@ -1,19 +1,16 @@
 ---
-import type { ComponentProps } from 'astro/types'
+import type { 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 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
+interface Props extends HTMLAttributes<'div'> {
+  variant?: 'secondary' | 'outline' | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+  heading?: string | undefined
+  text?: string | undefined
+  href?: string | undefined
+  icon?: string | undefined
 }
 
 const {
@@ -40,9 +37,9 @@ const {
   />
   <Element class:list="channel-content">
     <Heading
-      level={6}
-      text={heading}
+      as="h6"
       {size}
+      text={heading}
     />
     <Fragment set:html={text} />
     <slot />

package/src/components/Channels.astro

@@ -1,51 +1,20 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { ComponentProps } 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']
-  size?: ComponentProps<typeof Channel>['size']
+interface Props extends ComponentProps<typeof Channel> {
   channel?: ComponentProps<typeof Channel> | undefined
   channels?: ComponentProps<typeof Channel>[] | undefined
 }
 
-const { channels = [], channel, variant, size, ...rest } = Astro.props
+const { channel, channels, ...rest } = Astro.props
 ---
 
-<Element
-  class:list="channels"
-  {size}
-  {...rest}
->
-  {
-    [channel, ...channels].filter(Boolean).map((channel) => (
-      <Channel
-        {variant}
-        {size}
-        {...channel}
-      />
-    ))
-  }
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .channels {
-      @apply flex flex-col gap-2.5;
-
-      &.size-sm {
-        @apply gap-2;
-      }
-
-      &.size-md {
-        @apply gap-2.5;
-      }
-
-      &.size-lg {
-        @apply gap-3;
-      }
-    }
-  }
-</style>
+{
+  [channel, ...(channels || [])].filter(Boolean).map((channel) => (
+    <Channel
+      {...rest}
+      {...channel}
+    />
+  ))
+}

package/src/components/Checkbox.astro

@@ -1,22 +1,15 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
+import Icon from 'fulldev-ui/components/Icon.astro'
 import Label from 'fulldev-ui/components/Label.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Icon from './Icon.astro'
 
-interface Props extends GlobalProps, HTMLAttributes<'input'> {
-  label?: ComponentProps<typeof Label>['text']
+interface Props extends HTMLAttributes<'input'> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+  label?: string | undefined
 }
 
-const {
-  label,
-  name = label,
-  id = name,
-  type = 'text',
-  size = 'md',
-  ...rest
-} = Astro.props
+const { label, name = label, id = name, size = 'md', ...rest } = Astro.props
 ---
 
 <Element
@@ -29,7 +22,7 @@ const {
     class:list="checkbox-input"
     as="input"
     type="checkbox"
-    if={id}
+    show={id}
     {id}
     {name}
     {...rest}
@@ -37,6 +30,7 @@ const {
   <Icon
     class="checkbox-icon"
     name="check"
+    {size}
   />
   <Label
     for={id}

package/src/components/Element.astro

@@ -1,6 +1,7 @@
 ---
 const {
   as: As = 'div',
+  show = 'content',
   theme,
   variant,
   size,
@@ -20,12 +21,13 @@ const {
   center,
   frame,
   dark,
+  muted,
   inset,
   ...rest
 } = Astro.props
 
 const slot = await Astro.slots.render('default')
-const render = 'if' in rest ? rest.if : slot?.trim().length > 0
+const render = show === 'content' ? slot?.trim().length > 0 : show
 ---
 
 {
@@ -41,6 +43,7 @@ const render = 'if' in rest ? rest.if : slot?.trim().length > 0
           center,
           inset,
           dark,
+          muted,
           [`size-${size}`]: size,
           [`color-${color}`]: color,
           [`level-${level}`]: level,
@@ -63,4 +66,5 @@ const render = 'if' in rest ? rest.if : slot?.trim().length > 0
   @import 'tailwindcss/base' layer(fulldev);
   @import 'fulldev-ui/css/theme' layer(fulldev);
   @import 'tailwindcss/components';
+  @import 'tailwindcss/utilities';
 </style>

package/src/components/Form.astro

@@ -5,15 +5,16 @@ 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'> {
+interface Props extends HTMLAttributes<'form'> {
   submit?: ComponentProps<typeof Button>['text']
   fields?:
     | (
         | ComponentProps<typeof Input>
         | ComponentProps<typeof Select>
-        | (ComponentProps<typeof Textarea> & { type?: 'textarea' | undefined })
+        | (ComponentProps<typeof Textarea> & {
+            type?: 'textarea' | undefined
+          })
       )[]
     | undefined
 }

package/src/components/Gallery.astro

@@ -1,11 +1,14 @@
 ---
+// @ts-nocheck
 import type { ComponentProps } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 
 interface Props {
-  images: (ComponentProps<typeof Image> | ComponentProps<typeof Image>['src'])[]
+  images?:
+    | (ComponentProps<typeof Image> | ComponentProps<typeof Image>['src'])[]
+    | undefined
 }
 
 const { images } = Astro.props
@@ -62,7 +65,7 @@ const hasMany = images?.length > 5
 <Element class:list="gallery">
   <Element class:list="gallery-large">
     <Button
-      if={hasMultiple}
+      show={hasMultiple}
       class="gallery-left"
       icon="chevron-left"
       variant="secondary"
@@ -78,7 +81,7 @@ const hasMany = images?.length > 5
       }
     </Element>
     <Button
-      if={hasMultiple}
+      show={hasMultiple}
       class="gallery-right"
       icon="chevron-right"
       variant="secondary"
@@ -86,11 +89,11 @@ const hasMany = images?.length > 5
     />
   </Element>
   <Element
-    if={hasMultiple}
+    show={hasMultiple}
     class:list="gallery-small"
   >
     <Button
-      if={hasMany}
+      show={hasMany}
       class="gallery-left"
       icon="chevron-left"
       variant="secondary"
@@ -109,7 +112,7 @@ const hasMany = images?.length > 5
       }
     </Element>
     <Button
-      if={hasMany}
+      show={hasMany}
       class="gallery-right"
       icon="chevron-right"
       variant="ghost"

package/src/components/Head.astro

@@ -1,21 +1,26 @@
 ---
 import { AstroSeo } from '@astrolib/seo'
-import type { ComponentProps } from 'astro/types'
-import { ViewTransitions } from 'astro:transitions'
-import type Layout from 'fulldev-ui/layouts/Layout.astro'
+import type { HTMLAttributes } from 'astro/types'
+import type Image from 'fulldev-ui/components/Image.astro'
+import type { ComponentProps } from 'svelte'
 
-type Props = ComponentProps<typeof Layout>
+type Props = HTMLAttributes<'head'> & {
+  title?: string | undefined
+  description?: string | undefined
+  image?: ComponentProps<typeof Image> | undefined
+  theme?: 'light' | 'dark' | 'system' | undefined
+  favicon?: string | undefined
+  company?: string | undefined
+  scripts?: string[] | undefined
+  code?: string | undefined
+}
 
-const { theme, title, description, image, seo, code, render } = Astro.props
+const { theme, title, description, image, code, ...rest } = Astro.props
 
-const renderTitle = render && (await render()).headings[0]?.text
-const mergedTitle = seo?.title || title || renderTitle
-const mergedDescription = seo?.description || description
-const mergedImage =
-  seo?.image || image ? Astro.url.origin + (seo?.image || image) : undefined
+const src = image?.src && Astro.url.origin + image.src
 ---
 
-<head>
+<head {...rest}>
   <meta charset="utf-8" />
   <meta
     content="width=device-width, initial-scale=1, viewport-fit=cover"
@@ -29,24 +34,22 @@ const mergedImage =
     rel="canonical"
     href={Astro.url.href.endsWith('/') ? Astro.url.href : Astro.url.href + '/'}
   />
-  <ViewTransitions />
   <AstroSeo
-    title={mergedTitle ?? ''}
-    description={mergedDescription ?? ''}
+    title={title ?? ''}
+    description={description ?? ''}
     openGraph={{
-      title: mergedTitle,
-      description: mergedDescription,
-      images: mergedImage
-        ? [
-            {
-              url: mergedImage,
-              alt: mergedTitle,
-            },
-          ]
-        : undefined,
-    } as any}
+      title: title ?? '',
+      description: description ?? '',
+      images: [
+        {
+          url: src ?? '',
+          alt: title ?? '',
+        },
+      ],
+    }}
   />
-  <Fragment set:html={code?.head} />
+
+  <Fragment set:html={code} />
 
   <script is:inline define:vars={{ theme }}>
     function setTheme(document) {
@@ -87,11 +90,4 @@ const mergedImage =
       setOption(document)
     })
   </script>
-
-  <!-- TrustBox script -->
-  <script
-    type="text/javascript"
-    src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js"
-    async
-  ></script>
 </head>

package/src/components/Heading.astro

@@ -1,31 +1,33 @@
 ---
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import { slugify } from 'fulldev-ui/utils/slugify'
 
-interface Props extends GlobalProps, HTMLAttributes<'h2'> {
-  as?: HTMLTag
-  level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined
+interface Props
+  extends HTMLAttributes<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> {
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined
+  depth?: 1 | 2 | 3 | 4 | 5 | 6 | undefined
   text?: string | undefined
+  muted?: boolean | undefined
+  size?:
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl'
+    | undefined
 }
 
-const {
-  text,
-  id = text ? slugify(text) : undefined,
-  size = 'md',
-  level = 2,
-  as = `h${level}`,
-  ...rest
-} = Astro.props
+const { depth = 2, as = `h${depth}`, text, ...rest } = Astro.props
 ---
 
 <Element
   class:list="heading"
-  {id}
   {as}
-  {level}
-  {size}
   {...rest}
 >
   <Fragment set:html={text} />
@@ -36,82 +38,48 @@ const {
   .heading {
     @apply scroll-mt-20 font-bold tracking-tight text-foreground;
 
-    &.size-sm {
-      &.level-1 {
-        @apply text-3xl;
-      }
-
-      &.level-2 {
-        @apply text-2xl;
-      }
-
-      &.level-3 {
-        @apply text-xl;
-      }
-
-      &.level-4 {
-        @apply text-lg;
-      }
+    &.muted {
+      @apply text-muted-foreground;
+    }
 
-      &.level-5 {
-        @apply text-base;
-      }
+    &.size-xs {
+      @apply text-xs;
+    }
 
-      &.level-6 {
-        @apply text-sm;
-      }
+    &.size-sm {
+      @apply text-sm;
     }
 
     &.size-md {
-      &.level-1 {
-        @apply text-4xl;
-      }
-
-      &.level-2 {
-        @apply text-3xl;
-      }
-
-      &.level-3 {
-        @apply text-2xl;
-      }
-
-      &.level-4 {
-        @apply text-xl;
-      }
-
-      &.level-5 {
-        @apply text-lg;
-      }
-
-      &.level-6 {
-        @apply text-base;
-      }
+      @apply text-base;
     }
 
     &.size-lg {
-      &.level-1 {
-        @apply text-5xl lg:text-6xl;
-      }
+      @apply text-lg;
+    }
 
-      &.level-2 {
-        @apply text-4xl;
-      }
+    &.size-xl {
+      @apply text-xl;
+    }
 
-      &.level-3 {
-        @apply text-3xl;
-      }
+    &.size-2xl {
+      @apply text-2xl;
+    }
 
-      &.level-4 {
-        @apply text-2xl;
-      }
+    &.size-3xl {
+      @apply text-3xl;
+    }
+
+    &.size-4xl {
+      @apply text-4xl;
+    }
 
-      &.level-5 {
-        @apply text-xl;
-      }
+    &.size-5xl {
+      @apply text-4xl lg:text-5xl;
+    }
 
-      &.level-6 {
-        @apply text-lg;
-      }
+    &.size-6xl {
+      @apply text-5xl lg:text-6xl;
     }
   }
 </style>

package/src/components/Icon.astro

@@ -2,15 +2,15 @@
 import tablerIcons from '@iconify-json/tabler/icons.json'
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends GlobalProps, HTMLAttributes<'i'> {
-  name?: keyof typeof tablerIcons.icons | undefined
+interface Props extends HTMLAttributes<'svg'> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+  name?: string | undefined
 }
 
 const { size = 'md', name, ...rest } = Astro.props
 
-const trimmedName = name?.trim() as string | undefined
+const trimmedName = name?.trim()
 const icon = trimmedName
   ? (tablerIcons as any)?.icons[trimmedName]?.body
   : undefined