fulldev-ui 0.6.0-beta.2 → 0.6.0-beta.6

package/src/components/Button.astro

@@ -1,62 +1,48 @@
 ---
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import { getEntry } from 'astro:content'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import type { ButtonSchema } from 'fulldev-ui/schemas/components/button'
 
 interface Props
-  extends GlobalProps,
-    HTMLAttributes<'button'>,
-    HTMLAttributes<'a'> {
+  extends HTMLAttributes<'button'>,
+    Omit<HTMLAttributes<'a'>, 'href' | 'target'>,
+    ButtonSchema {
   as?: HTMLTag
-  href?: string | null | undefined
   type?: HTMLAttributes<'button'>['type'] & HTMLAttributes<'a'>['type']
-  icon?: ComponentProps<typeof Icon>['name']
-  slug?: CollectionEntry<'pages'>['slug'] | undefined
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | undefined
-  text?: string | undefined
-  reverse?: boolean | undefined
+  for?: HTMLAttributes<'label'>['for']
 }
 
 const {
-  slug,
-  href = slug === 'index' ? '/' : slug ? `/${slug}/` : undefined,
-  text = slug ? (await getEntry('pages', slug)).data.title : undefined,
+  href,
   as = href ? 'a' : 'button',
-  type = as === 'button' ? 'button' : undefined,
-  target = href?.startsWith('http') ? '_blank' : undefined,
   variant = 'primary',
   size = 'md',
+  text,
   icon,
-  reverse,
   ...rest
 } = Astro.props
 ---
 
 <Element
   class:list={['button']}
-  {href}
   {as}
-  {type}
-  {target}
+  {href}
   {variant}
   {size}
-  {reverse}
   {...rest}
 >
-  <Icon name={icon} />
   <Element as="span">
     <Fragment set:html={text} />
     <slot />
   </Element>
+  <Icon name={icon} />
 </Element>
 
 <style is:global>
   @layer fulldev {
     .button {
-      @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium leading-none ring-offset-background transition-colors;
+      @apply inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium leading-none ring-offset-background transition-colors;
       @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
       @apply disabled:pointer-events-none disabled:opacity-50;
 

package/src/components/Buttons.astro

@@ -1,59 +1,28 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { ComponentProps } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.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 Button>['variant']
+interface Props extends ComponentProps<typeof Button> {
   button?: ComponentProps<typeof Button> | undefined
   buttons?: ComponentProps<typeof Button>[] | undefined
-  direction?: 'row' | 'column' | undefined
 }
 
-const {
-  direction = 'row',
-  variant = 'primary',
-  buttons = [],
-  button,
-  size,
-  ...rest
-} = Astro.props
+const { variant = 'primary', button, buttons, ...rest } = Astro.props
 
 const buttonVariant = (i: number) => {
   if (variant === 'primary' && i === 0) return 'primary'
   else if (variant === 'primary' && i === 1) return 'secondary'
-  else if (variant === 'primary' && i > 1) return 'ghost'
   else if (variant === 'secondary' && i === 0) return 'secondary'
   else return 'ghost'
 }
 ---
 
-<Element
-  class:list="buttons"
-  {direction}
-  {...rest}
->
-  {
-    [button, ...buttons].filter(Boolean).map((button, i) => (
-      <Button
-        variant={buttonVariant(i)}
-        {size}
-        {...button}
-      />
-    ))
-  }
-  <slot />
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .buttons {
-      @apply inline-flex flex-wrap justify-stretch gap-2;
-
-      &.direction-column {
-        @apply flex-col items-start;
-      }
-    }
-  }
-</style>
+{
+  [button, ...(buttons || [])].filter(Boolean).map((button, i) => (
+    <Button
+      variant={buttonVariant(i)}
+      {...rest}
+      {...button}
+    />
+  ))
+}

package/src/components/Card.astro

@@ -1,172 +1,30 @@
 ---
-import { getEntry } from 'astro:content'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Icon from 'fulldev-ui/components/Icon.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Price from 'fulldev-ui/components/Price.astro'
-import Heading from './Heading.astro'
-import Lead from './Lead.astro'
-import Paragraph from './Paragraph.astro'
-import Rating from './Rating.astro'
 
-// interface Props
-//   extends GlobalProps,
-//     ComponentProps<typeof Writeup>,
-//     Omit<HTMLAttributes<'a'>, 'title'> {
-//   image?: ComponentProps<typeof Image>
-//   images?: ComponentProps<typeof Image>[]
-//   position?: ComponentProps<typeof Image>['position']
-//   buttons?: ComponentProps<typeof Buttons>['buttons']
-//   button?: ComponentProps<typeof Button> | undefined
-//   variant?: ComponentProps<typeof Button>['variant']
-//   align?: ComponentProps<typeof Writeup>['align']
-//   icon?: ComponentProps<typeof Icon>['name']
-//   price?: ComponentProps<typeof Price>['value']
-//   slug?: CollectionEntry<'pages'>['slug'] | undefined
-//   id?: any
-//   panel?: boolean | undefined
-//   title?: ComponentProps<typeof Writeup>['heading']
-// }
-
-const { slug, ...props } = Astro.props
-const page = slug && (await getEntry('pages', slug))
-
-const merged = {
-  ...props,
-  ...page?.data,
+interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> {
+  as?: HTMLTag
 }
 
-const {
-  href = slug === 'index' ? undefined : `/${slug}/`,
-  as = href ? 'a' : 'div',
-  heading = page?.data.title || props.title,
-  image = page?.data.images?.[0] || props.images?.[0],
-  size = 'md',
-  panel = true,
-  inset = panel,
-  level = 3,
-  lead,
-  paragraph,
-  rating,
-  price,
-  icon,
-  position,
-  ...rest
-} = merged
+const { href, as = href ? 'a' : 'div', ...rest } = Astro.props
 ---
 
 <Element
   class:list="card"
-  as={href ? 'a' : 'div'}
+  {as}
   {href}
-  {panel}
-  {inset}
-  {size}
   {...rest}
 >
-  <Image
-    position={panel ? position : undefined}
-    {...image}
-  />
-  <Element class:list="card-content">
-    <Icon name={icon} />
-    <Rating
-      {size}
-      value={rating}
-    />
-    <Heading
-      {size}
-      {level}
-      text={heading}
-    />
-    <Lead
-      {size}
-      text={lead}
-    />
-    <Paragraph
-      {size}
-      text={paragraph}
-    />
-    <Price value={price} />
-  </Element>
   <slot />
 </Element>
 
 <style is:global>
   @layer fulldev {
     .card {
-      @apply relative flex flex-col items-start;
-
-      &:is(a[href]):hover > .image {
-        @apply opacity-50 transition;
-      }
-
-      .card-content {
-        @apply flex flex-col;
-      }
-
-      &.panel {
-        @apply overflow-hidden rounded-md border bg-card;
-      }
-
-      &.size-sm {
-        @apply gap-4;
-
-        .card-content {
-          @apply gap-2;
-        }
-
-        &.panel {
-          @apply p-4;
-        }
-
-        &.inset {
-          @apply gap-0 p-0;
-
-          .card-content {
-            @apply p-4;
-          }
-        }
-      }
-
-      &.size-md {
-        @apply gap-5;
-
-        .card-content {
-          @apply gap-2.5;
-        }
-
-        &.panel {
-          @apply p-5;
-        }
-
-        &.inset {
-          @apply gap-0 p-0;
-
-          .card-content {
-            @apply p-5;
-          }
-        }
-      }
-
-      &.size-lg {
-        @apply gap-6;
-
-        .card-content {
-          @apply gap-3;
-        }
-
-        &.panel {
-          @apply p-6;
-        }
-
-        &.inset {
-          @apply gap-0 p-0;
+      @apply w-full rounded-lg border bg-card p-4 text-card-foreground;
 
-          .card-content {
-            @apply p-6;
-          }
-        }
+      &:is(a[href]) {
+        @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
       }
     }
   }

package/src/components/Cart.astro

@@ -8,15 +8,9 @@ import Icon from './Icon.astro'
 import Input from './Input.astro'
 import Select from './Select.astro'
 
-interface Props extends ComponentProps<typeof Drawer> {}
+interface Props extends Omit<ComponentProps<typeof Drawer>, 'id' | 'icon'> {}
 
-const {
-  icon = 'shopping-cart',
-  color = 'brand',
-  id = 'cart',
-  if: ifProp,
-  ...rest
-} = Astro.props
+const { variant = 'ghost', size = 'md', ...rest } = Astro.props
 ---
 
 <Select if={false} />
@@ -25,11 +19,12 @@ const {
 <Icon if={false} />
 
 <Drawer
-  if={ifProp}
   class:list="cart"
+  id="cart"
+  icon="shopping-cart"
+  {variant}
+  {size}
   {icon}
-  {color}
-  {id}
   {...rest}
 >
   <CartList client:load />

package/src/components/CartSummary.astro

@@ -3,7 +3,7 @@ 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 Text from './Text.astro'
+import Paragraph from './Paragraph.astro'
 
 interface Props {}
 
@@ -18,14 +18,14 @@ const { ...rest } = Astro.props
     class="row"
     {...rest}
   >
-    <Text
+    <Paragraph
       class:list="total"
       text="Totaal"
       contrast
     />
     <CartTotal client:load />
   </div>
-  <Text
+  <Paragraph
     class:list="shipping"
     text="Verzendkosten worden berekend bij het afrekenen."
   />

package/src/components/Channel.astro

@@ -1,20 +1,11 @@
 ---
-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'
+import type { ChannelSchema } from 'fulldev-ui/schemas/components/channel'
 
-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'>, ChannelSchema {}
 
 const {
   variant = 'secondary',
@@ -40,9 +31,9 @@ const {
   />
   <Element class:list="channel-content">
     <Heading
-      level={6}
+      as="h6"
+      size="sm"
       text={heading}
-      {size}
     />
     <Fragment set:html={text} />
     <slot />

package/src/components/Container.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag
+}
+
+const { ...rest } = Astro.props
+---
+
+<Element
+  class:list="container"
+  {...rest}
+>
+  <slot />
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .container {
+      @apply mx-auto w-full max-w-screen-2xl px-gutter;
+    }
+  }
+</style>

package/src/components/Drawer.astro

@@ -1,142 +1,80 @@
 ---
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
-import Logo from 'fulldev-ui/components/Logo.astro'
-import Menu from 'fulldev-ui/components/Menu.astro'
-import links from 'fulldev-ui/schemas/components/links'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Buttons from './Buttons.astro'
-import Heading from './Heading.astro'
-import Links from './Links.astro'
+import Button from './Button.astro'
 
-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']
-  buttons?: ComponentProps<typeof Buttons>['buttons']
-  links?: ComponentProps<typeof Links>['links']
-  size?: 'sm' | 'md' | 'lg' | undefined
+interface Props
+  extends HTMLAttributes<'aside'>,
+    Pick<ComponentProps<typeof Button>, 'variant' | 'size' | 'text' | 'icon'> {
+  id: string
+  icon: string
 }
 
-const {
-  id = 'drawer',
-  size = 'sm',
-  icon = 'menu-2',
-  color,
-  variant,
-  text,
-  buttons,
-  links,
-  heading,
-  logo,
-  company,
-  menu,
-  if: ifProp,
-  ...rest
-} = Astro.props
----
+const { id, variant = 'ghost', size = 'md', icon, text, ...rest } = Astro.props
 
-<Button
-  variant="secondary"
-  class:list={['drawer-button', `${id}-button`]}
-  onclick={`document.getElementById('${id}').showModal()`}
-  {variant}
-  {text}
-  {icon}
-  {color}
-  {size}
-/>
+const slot = await Astro.slots.render('default')
+const render = slot?.trim().length > 0
+---
 
-<Element
-  onclick={`event.target === this && this.close()`}
-  class:list="drawer"
-  as="dialog"
-  {id}
-  {text}
-  {size}
-  {icon}
-  {...rest}
->
-  <Element class:list="drawer-body">
-    <button autofocus></button>
-    <Element
-      class:list="drawer-header"
-      as="header"
-    >
-      <Logo
+{
+  render && (
+    <Element class:list="drawer">
+      <Button
+        class="drawer-button"
+        as="label"
+        for={id}
+        {variant}
         {size}
-        {company}
-        {...logo}
+        {text}
+        {icon}
       />
-      <Heading
-        level={4}
-        text={heading}
-      />
-      <Button
-        variant="secondary"
-        icon="x"
-        onclick={`document.getElementById('${id}').close()`}
+
+      <input
+        type="checkbox"
+        class="drawer-checkbox"
+        name={id}
+        {id}
       />
-      <slot name="header" />
-    </Element>
-    <Element class:list="drawer-content">
-      <Links
-        direction="column"
-        {links}
+
+      <Element
+        class:list="drawer-body"
+        as="aside"
+        {...rest}
+      >
+        <Fragment set:html={slot} />
+      </Element>
+
+      <label
+        for={id}
+        class="drawer-backdrop"
       />
-      <Menu groups={menu} />
-      <slot />
-    </Element>
-    <Element
-      class:list="drawer-footer"
-      as="footer"
-    >
-      <slot name="footer" />
     </Element>
-  </Element>
-</Element>
+  )
+}
 
 <style is:global>
   @layer fulldev {
-    body:has(dialog[open]) {
-      @apply max-md:overflow-hidden;
-    }
-
     .drawer {
-      @apply inset-0 m-0 h-full max-h-full w-full max-w-full p-0 md:max-w-md;
-
-      &::backdrop {
-        @apply cursor-pointer bg-background/50;
-      }
-
-      .drawer-body {
-        @apply flex h-full shrink flex-col overflow-auto bg-background;
+      @apply contents;
+    }
 
-        .drawer-content {
-          @apply flex flex-col gap-6 px-gutter py-12;
-        }
+    .drawer-checkbox {
+      @apply invisible hidden;
+    }
 
-        .drawer-header,
-        .drawer-footer {
-          @apply sticky z-10 flex shrink-0 bg-background;
-        }
+    .drawer-backdrop {
+      @apply pointer-events-none invisible fixed left-0 top-0 z-30 h-full w-full bg-black opacity-0 transition-opacity;
 
-        .drawer-header {
-          @apply top-0 h-14 items-center px-gutter;
+      &:is(.drawer-checkbox:checked ~ &) {
+        @apply pointer-events-auto visible opacity-50;
+      }
+    }
 
-          .button {
-            @apply ml-auto;
-          }
-        }
+    .drawer-body {
+      @apply fixed bottom-0 left-0 top-0 z-40 h-full w-80 max-w-[75vw] -translate-x-full rounded-r-lg border border-l-0 bg-background shadow-2xl transition-transform;
 
-        .drawer-footer {
-          @apply bottom-0 mt-auto flex-col px-gutter py-8;
-        }
+      &:is(.drawer-checkbox:checked ~ &) {
+        @apply translate-x-0;
       }
     }
   }