fulldev-ui 0.4.33 → 0.5.0-beta-16

package/src/components/Card.astro

@@ -1,235 +1,157 @@
 ---
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import { getEntry } from 'astro:content'
 import Button from 'fulldev-ui/components/Button.astro'
-import Price from 'fulldev-ui/components/experimental/Price.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Icon from 'fulldev-ui/components/Icon.astro'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Element from 'fulldev-ui/components/Element.astro'
 import Image from 'fulldev-ui/components/Image.astro'
-import List from 'fulldev-ui/components/List.astro'
-import Rating from 'fulldev-ui/components/Rating.astro'
-import Root from 'fulldev-ui/components/Root.astro'
-import Spread from 'fulldev-ui/components/Spread.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-import Text from 'fulldev-ui/components/Text.astro'
-import Wrap from 'fulldev-ui/components/Wrap.astro'
-import Badge from './Badge.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Icon from './Icon.astro'
+import Price from './Price.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 } = Astro.props
+const page = slug ? (await getEntry('pages', slug)).data : {}
 
-type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
-  ratio?: 'landscape' | 'portrait' | 'square' | number
-  variant?: 'primary' | 'secondary' | 'tertiary'
-  position?: 'background' | 'cover' | 'inset'
-  align?: 'start' | 'center' | 'end'
-  justify?: 'start' | 'center' | 'end'
-  level?: 1 | 2 | 3 | 4 | 5 | 6
-  size?: 'sm' | 'md' | 'lg'
-  radius?: 'auto' | 'none'
-  frame?: 'panel' | 'none'
-  color?: 'base' | 'brand'
-  space?: 'auto' | 'none'
-  mask?: 'sm' | 'md' | 'lg'
-  image?: string | ComponentProps<typeof Image>
-  images?: string[]
-  button?: ComponentProps<typeof Button<'a'>>
-  buttons?: ComponentProps<typeof Button<'a'>>[]
-  badge?: string | ComponentProps<typeof Badge<'a'>>
-  badges?: (string | ComponentProps<typeof Badge<'a'>>)[]
-  rating?: number | ComponentProps<typeof Rating>
-  price?: number
-  icon?: string
-  avatar?: string
-  avatars?: string[]
-  label?: string
-  tagline?: string
-  contrast?: boolean
-  heading?: string
-  title?: string
-  description?: string
-  html?: string
-  text?: string
-  list?: string[]
+const entryProps = {
+  heading: page.title,
+  href: slug ? `/${slug}/` : undefined,
+  ...page,
 }
 
 const {
-  href,
-  as = href ? 'a' : 'div',
-  space = 'auto',
-  frame = 'none',
-  radius = 'auto',
   align = 'start',
-  variant,
   level = 4,
-  position,
-  label,
-  heading,
-  title,
+  href,
+  badge,
   tagline,
+  rating,
+  heading,
   text,
-  html,
-  description,
+  variant,
+  price,
   list,
+  button,
   buttons,
-  badge,
-  badges,
-  ratio,
+  panel,
   image,
-  images,
-  rating,
-  button,
-  price,
   icon,
-  avatar,
-  mask,
-  avatars,
+  title,
+  images,
+  position,
   ...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 'tertiary'
-  else if (variant === 'secondary' && i === 0) return 'secondary'
-  else if (variant === 'secondary' && i > 0) return 'tertiary'
-  else if (variant === 'tertiary') return 'tertiary'
+} = {
+  ...entryProps,
+  ...Astro.props,
 }
 ---
 
-<Root
+<Element
   class:list="card"
-  ratio={position === 'background' ? ratio : undefined}
-  structure="column"
-  {align}
+  as={href ? 'a' : 'div'}
   {href}
-  {radius}
-  {space}
-  {frame}
-  {as}
+  {align}
+  {panel}
   {...rest}
 >
-  <Image
-    {position}
-    {mask}
-    ratio={position === 'background' ? undefined : ratio}
-    src={images?.[0]}
-    {...typeof image === 'string' ? { src: image } : image}
-  />
-  <Icon name={icon} />
-  <Rating
-    color="brand"
-    {avatars}
-    {avatar}
-    {label}
-    {...typeof rating === 'number' ? { value: rating } : rating}
-  />
-  <Wrap>
-    {
-      [badge, ...(badges ?? [])].filter(Boolean)?.map((badge: any) => (
-        <Badge
-          color="base"
-          {...(typeof badge === 'string' ? { html: badge } : badge)}
-        />
-      ))
-    }
-  </Wrap>
-  <Tagline
-    color="base"
-    html={tagline}
-  />
-  <Spread>
-    <Heading
-      color="base"
-      html={heading ?? title}
+  <slot name="image">
+    <Image
+      position={panel ? position : undefined}
+      {...image || images?.[0]}
+    />
+  </slot>
+  <slot name="icon">
+    <Icon name={icon} />
+  </slot>
+  <slot name="writeup">
+    <Writeup
+      heading={heading || title}
       {level}
+      {rating}
+      {badge}
+      {tagline}
+      {text}
+      {list}
     />
     <Price value={price} />
-  </Spread>
-  <Text
-    color="base"
-    contrast={position === 'background' && true}
-    html={html || text || description}
-  />
-  <List
-    color="base"
-    contrast
-    items={list}
-  />
-  <Wrap>
-    {
-      [button, ...(buttons ?? [])]
-        .filter(Boolean)
-        ?.map((button: any, i: number) => (
-          <Button
-            variant={buttonVariant(i)}
-            {...button}
-          />
-        ))
-    }
-  </Wrap>
+  </slot>
+  <slot name="buttons">
+    <Button
+      {variant}
+      {...button}
+    />
+    <Buttons
+      {variant}
+      {buttons}
+    />
+  </slot>
   <slot />
-</Root>
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
     .card {
-      --inset-top: var(--space-5);
-      --inset-left: var(--space-5);
-      --inset-right: var(--space-5);
-      --inset-bottom: var(--space-5);
+      --inset-top: 0px;
+      --inset-left: 0px;
+      --inset-right: 0px;
+      --inset-bottom: 0px;
 
+      display: flex;
       position: relative;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--space-4);
       text-decoration: none;
 
       &[href] {
         cursor: pointer;
 
-        > .root.image {
-          transition: var(--transition);
+        > .image {
+          transition: all 0.2s ease;
         }
 
         &:hover {
-          > .root.image {
+          > .image {
             opacity: 0.8;
           }
         }
       }
 
-      &.ratio-landscape {
-        aspect-ratio: 4/3;
-      }
-
-      &.ratio-square {
-        aspect-ratio: 1/1;
-      }
+      &.panel {
+        --inset-top: var(--space-4);
+        --inset-left: var(--space-4);
+        --inset-right: var(--space-4);
+        --inset-bottom: 0px;
 
-      &.ratio-portrait {
-        aspect-ratio: 3/4;
-      }
-
-      &.frame-fill {
-        border-radius: 0 !important;
-      }
-
-      &.frame-panel {
         border: 1px solid var(--color-a6);
+        border-radius: var(--radius-2);
         background-color: var(--color-2);
-        padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
-          var(--inset-left);
+        padding: var(--space-4);
         overflow: hidden;
 
         &[href]:hover {
           border: 1px solid var(--color-a7);
         }
-
-        &.radius-none {
-          border-radius: 0;
-        }
-
-        &.radius-auto {
-          border-radius: var(--radius-2);
-        }
-      }
-
-      > .image + * {
-        margin-top: var(--space-5);
       }
     }
   }

package/src/components/Cards.astro

@@ -0,0 +1,135 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Card from 'fulldev-ui/components/Card.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  level?: ComponentProps<typeof Card>['level']
+  panel?: ComponentProps<typeof Card>['panel']
+  position?: ComponentProps<typeof Card>['position']
+  cards?: ComponentProps<typeof Card>[] | undefined
+  structure?: 'grid' | 'masonry' | 'stack' | 'carousel' | 'bento' | undefined
+}
+
+const { level, panel, position, cards, ...rest } = Astro.props
+---
+
+<Element
+  class:list="cards"
+  {panel}
+  {...rest}
+>
+  {
+    cards?.map((card: any) => (
+      <Card
+        {level}
+        {panel}
+        {position}
+        {...card}
+      />
+    ))
+  }
+</Element>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .cards {
+      --column-width: calc(21 * var(--space-4));
+      --gap: var(--space-5);
+
+      position: relative;
+      width: 100%;
+
+      &.panel {
+        --gap: var(--space-4);
+      }
+
+      &.position-inset {
+        margin-right: calc(var(--inset-right) * -1);
+        margin-left: calc(var(--inset-left) * -1);
+        padding-right: var(--inset-right);
+        padding-left: var(--inset-left);
+        width: calc(100% + var(--inset-left) + var(--inset-right));
+      }
+
+      &.structure-grid {
+        display: grid;
+        grid-template-columns: repeat(
+          auto-fill,
+          minmax(var(--column-width), 1fr)
+        );
+        gap: var(--gap);
+        width: 100%;
+      }
+
+      &.structure-masonry {
+        column-gap: var(--gap);
+        column-fill: balance;
+        column-width: var(--column-width);
+        column-count: 6;
+        break-inside: avoid;
+        width: 100%;
+
+        & > .root + .root,
+        & > * + * {
+          break-inside: avoid;
+          margin-top: var(--gap);
+          margin-bottom: var(--gap);
+        }
+      }
+
+      &.structure-carousel {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--gap);
+        padding-bottom: var(--gap);
+        overflow-x: auto;
+        scroll-behavior: smooth;
+        scroll-snap-type: x mandatory;
+
+        > .root {
+          flex-grow: 0;
+          flex-shrink: 0;
+          width: var(--column-width);
+          scroll-snap-align: center;
+        }
+      }
+
+      &.structure-stack {
+        display: grid;
+        position: relative;
+        grid-template-columns: 1fr;
+        align-items: flex-start;
+        gap: var(--space-6);
+        width: 100%;
+
+        @media (min-width: 1024px) {
+          grid-auto-columns: 1fr;
+          grid-auto-flow: column;
+        }
+      }
+
+      &.structure-bento {
+        display: grid;
+        position: relative;
+        grid-template-columns: 1fr;
+        gap: var(--space-4);
+        width: 100%;
+
+        @media (min-width: 1024px) {
+          grid-template-columns: repeat(5, 1fr);
+
+          & > * {
+            grid-column: span 2;
+          }
+
+          & > *:nth-child(3n + 2),
+          & > *:nth-child(3n + 3) {
+            grid-column: span 3;
+          }
+        }
+      }
+    }
+  }
+</style>

package/src/components/Cart.astro

@@ -0,0 +1,38 @@
+---
+import type { ComponentProps } from 'astro/types'
+import CartList from 'fulldev-ui/components/CartList.astro'
+import CartSummary from 'fulldev-ui/components/CartSummary.astro'
+import Drawer from 'fulldev-ui/components/Drawer.astro'
+
+interface Props extends ComponentProps<typeof Drawer> {}
+
+const {
+  icon = 'shopping-cart',
+  color = 'brand',
+  id = 'cart',
+  if: ifProp,
+  ...rest
+} = Astro.props
+---
+
+<Drawer
+  if={ifProp}
+  class:list="cart"
+  {icon}
+  {color}
+  {id}
+  {...rest}
+>
+  <CartList />
+  <CartSummary slot="footer" />
+</Drawer>
+
+<style lang="scss" is:global>
+  @layer fulldev {
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-4);
+    }
+  }
+</style>

package/src/components/CartForm.astro

@@ -0,0 +1,122 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Input from 'fulldev-ui/components/Input.astro'
+import Select from 'fulldev-ui/components/Select.astro'
+import { capitalize } from 'radash'
+import Form from './experimental/Form.astro'
+import Price from './Price.astro'
+
+interface Props extends Omit<ComponentProps<typeof Form>, 'fields' | 'submit'> {
+  title: string
+  slug: string
+  price: number
+  image?: string | undefined
+  variants?:
+    | {
+        [key: string]: string[]
+      }
+    | undefined
+}
+
+const { title, slug, image, price, variants, ...rest } = Astro.props
+---
+
+<Form
+  class:list="cart-form"
+  {...rest}
+>
+  <Input
+    type="hidden"
+    name="title"
+    value={title}
+  />
+  <Input
+    type="hidden"
+    name="slug"
+    value={slug}
+  />
+  <Input
+    type="hidden"
+    name="url"
+    value={Astro.site ? Astro.site.href + slug : undefined}
+  />
+
+  <Input
+    type="hidden"
+    name="image"
+    value={image}
+  />
+  {
+    Object.entries(variants ?? {}).map(([key, options]) => (
+      <Select
+        label={capitalize(key)}
+        name={`variant-${key}`}
+        options={options}
+      />
+    ))
+  }
+  <Price value={price} />
+  <Input
+    type="hidden"
+    name="price"
+    value={price}
+  />
+  <Button
+    variant="primary"
+    color="brand"
+    type="submit"
+    class="cart-add"
+    text="Toevoegen aan winkelwagen"
+  />
+</Form>
+
+<script>
+  import { $cart } from 'fulldev-ui/stores/cart.ts'
+  import { generateProductId, generateProductName } from 'fulldev-ui/utils/cart'
+
+  document.addEventListener('astro:page-load', () => {
+    const cartForm = document.querySelector('.cart-form')
+
+    cartForm?.addEventListener('submit', (e) => {
+      e.preventDefault()
+
+      if (e.target instanceof HTMLFormElement) {
+        const formData = new FormData(e.target)
+
+        const title = formData.get('title') as string
+        const slug = formData.get('slug') as string
+        const url = formData.get('url') as string
+        const image = formData.get('image') as string
+        const price = Number(formData.get('price')) as number
+        const variants = Array.from(formData.entries())
+          .filter(([key]) => key.startsWith('variant-'))
+          .map(([_, value]) => value) as string[]
+
+        const id = generateProductId(slug, variants)
+        const name = generateProductName(title, variants)
+
+        const currentCart = $cart.get()
+        const newCart = [...currentCart, { id, name, price, image, url }]
+        $cart.set(newCart)
+
+        const cartDialog = document?.querySelector('dialog#cart')
+        if (cartDialog instanceof HTMLDialogElement) cartDialog.showModal()
+      }
+    })
+  })
+</script>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .cart-form {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-4);
+
+      .input {
+        display: none;
+      }
+    }
+  }
+</style>