fulldev-ui 0.4.32 → 0.5.0-beta-16

package/src/components/Image.astro

@@ -1,72 +1,53 @@
 ---
+import type { ImageMetadata } from 'astro'
 import type { HTMLAttributes } from 'astro/types'
 import { Image as AstroImage } from 'astro:assets'
-import Root from 'fulldev-ui/components/Root.astro'
-import { isString } from 'remeda'
+import type { CollectionEntry } from 'astro:content'
+import { getEntry } from 'astro:content'
 
-type Props = HTMLAttributes<'img'> & {
-  position?: 'background' | 'cover' | 'inset'
-  ratio?: 'landscape' | 'portrait' | 'square' | number
-  frame?: 'inset'
-  width?: number | 1920
-  height?: number | 1920
-  radius?: 'none' | 'auto' | 'full'
-  mask?: 'sm' | 'md' | 'lg'
+interface Props extends HTMLAttributes<'img'> {
+  src?: string | undefined
+  position?: 'background' | 'cover' | 'inset' | undefined
+  id?: CollectionEntry<'images'>['id'] | undefined
 }
 
-function getAltBySrc(): string {
-  if (!isString(Astro.props.src)) return ''
-  const filename = Astro.props.src?.split('/').pop()
-  const slug = filename && filename.split('.')[0]
-  const unslugged = slug?.replace(/-/g, ' ')
-  return unslugged || ''
-}
+const { id } = Astro.props
+const entry = id ? (await getEntry('images', id))?.data : {}
 
 const {
-  loading = 'lazy',
-  alt = getAltBySrc(),
-  src = Astro.props.src,
+  width = 1920,
+  height = 1920,
   position,
-  frame,
-  width,
-  radius = 'auto',
-  height,
+  src,
+  alt,
   ...rest
-} = Astro.props
+} = {
+  ...Astro.props,
+  ...entry,
+}
 
-// TODO get alt from image collection with yaml files
-// const imageEntry =
-//   src && (await getEntry('images', src?.replace('/images/', '')))
+function getAltBySrc() {
+  if (!src) return
+  const filename = src?.split('/').pop()
+  const slug = filename && filename.split('.')[0]
+  const unslugged = slug?.replace(/-/g, ' ')
+  return unslugged || ''
+}
+
+const images = import.meta.glob<{ default: ImageMetadata }>('/src/images/*')
+const image = images[src as keyof typeof images]
 ---
 
 {
-  src && (
-    <>
-      {!width && !height && (
-        <Root
-          class:list="image"
-          if={src}
-          {src}
-          {alt}
-          as="img"
-          {frame}
-          {position}
-          {radius}
-          {...rest}
-        />
-      )}
-      {width && height && (
-        <AstroImage
-          class:list="image"
-          {src}
-          {alt}
-          width={width}
-          height={height}
-          loading="eager"
-          {...rest}
-        />
-      )}
-    </>
+  image && (
+    <AstroImage
+      class:list={['image', position && `position-${position}`]}
+      alt={alt || getAltBySrc()}
+      src={image ? image() : src}
+      width={width}
+      height={height}
+      {...(rest as any)}
+    />
   )
 }
 
@@ -77,40 +58,12 @@ const {
       width: 100%;
       height: auto;
 
-      &.mask-sm {
-        -webkit-mask-image: linear-gradient(to top, transparent 0%, black 30%);
-        mask-image: linear-gradient(to top, transparent 0%, black 30%);
-      }
-
-      &.mask-md {
-        -webkit-mask-image: linear-gradient(to top, transparent 0%, black 65%);
-        mask-image: linear-gradient(to top, transparent 0%, black 65%);
-      }
-
-      &.mask-lg {
-        -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
-        mask-image: linear-gradient(to top, transparent 0%, black 100%);
-      }
-
-      &.radius-none {
-        border-radius: 0;
-      }
-
-      &.radius-auto {
-        border-radius: var(--radius-1);
-      }
-
-      &.radius-full {
-        border-radius: 9999px;
-      }
-
       &.position-background {
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
-        z-index: -1;
         margin: 0 !important;
         border-radius: 0;
         width: 100%;
@@ -126,78 +79,15 @@ const {
         object-fit: cover;
       }
 
-      &.position-container {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-        object-position: center;
-      }
-
       &.position-inset {
+        margin-top: calc(var(--inset-top) * -1);
+        margin-right: calc(var(--inset-right) * -1);
+        margin-bottom: calc(var(--inset-bottom) * -1);
+        margin-left: calc(var(--inset-left) * -1);
+        width: calc(100% + var(--inset-left) + var(--inset-right));
         max-width: none;
+        height: calc(100% + var(--inset-top) + var(--inset-bottom));
         object-fit: cover;
-
-        &:is(.structure-column > &) {
-          margin-right: calc(var(--inset-right) * -1);
-          margin-left: calc(var(--inset-left) * -1);
-          width: calc(100% + var(--inset-left) + var(--inset-right));
-
-          &.image:first-child {
-            margin-top: calc(var(--inset-top) * -1);
-            height: calc(100% + var(--inset-top) * 1);
-          }
-
-          &.image:last-child {
-            margin-bottom: calc(var(--inset-bottom) * -1);
-            height: calc(100% + var(--inset-bottom) * 1);
-          }
-        }
-
-        &:is(.structure-split > &) {
-          @media (max-width: 1023.999px) {
-            margin-right: calc(var(--inset-right) * -1);
-            margin-left: calc(var(--inset-left) * -1);
-            width: calc(100% + var(--inset-left) + var(--inset-right));
-
-            &.image:first-child {
-              margin-top: calc(var(--inset-top) * -1);
-              height: calc(100% + var(--inset-top) * 1);
-            }
-
-            &.image:last-child {
-              margin-bottom: calc(var(--inset-bottom) * -1);
-              height: calc(100% + var(--inset-bottom) * 1);
-            }
-          }
-
-          @media (min-width: 1024px) {
-            margin-top: calc(var(--inset-top) * -1);
-            margin-bottom: calc(var(--inset-bottom) * -1);
-            height: calc(100% + var(--inset-top) * 1 + var(--inset-bottom) * 1);
-
-            &.image:first-child {
-              margin-left: calc(var(--inset-left) * -1);
-              width: calc(100% + var(--inset-left) * 1);
-            }
-
-            &.image:last-child {
-              margin-right: calc(var(--inset-right) * -1);
-              width: calc(100% + var(--inset-right) * 1);
-            }
-          }
-        }
-      }
-
-      &.ratio-landscape {
-        aspect-ratio: 4/3;
-      }
-
-      &.ratio-square {
-        aspect-ratio: 1/1;
-      }
-
-      &.ratio-portrait {
-        aspect-ratio: 3/4;
       }
     }
   }

package/src/components/Input.astro

@@ -1,55 +1,51 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { ComponentProps, 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 Root from 'fulldev-ui/components/Root.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-type Props = HTMLAttributes<'input'> & {
-  variant?: 'outline'
-  color?: 'base' | 'brand'
-  label?: string
-  icon?: string
-  radius?: 'none' | 'auto' | 'full'
+interface Props extends GlobalProps, HTMLAttributes<'input'> {
+  label?: ComponentProps<typeof Label>['text']
+  icon?: ComponentProps<typeof Icon>['name']
 }
 
 const {
-  variant = 'outline',
   label,
   icon,
   value,
   disabled,
   required,
-  radius = 'auto',
   placeholder,
+  readonly,
   name = placeholder,
   type = 'text',
   ...rest
 } = Astro.props
 ---
 
-<Root
+<Element
   class:list="input"
   {...rest}
 >
   <Label
     for={name}
-    html={label}
+    text={label}
   />
-  <Root
+  <Element
     as="input"
     if={name}
     id={name}
     {name}
-    {variant}
     {placeholder}
-    {radius}
     {type}
     {value}
     {disabled}
     {required}
+    {readonly}
   />
   <Icon name={icon} />
-</Root>
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
@@ -84,18 +80,6 @@ const {
         font-size: var(--text-2);
         line-height: 1.25;
 
-        &.radius-none {
-          border-radius: 0;
-        }
-
-        &.radius-auto {
-          border-radius: var(--radius-1);
-        }
-
-        &.radius-full {
-          border-radius: 9999px;
-        }
-
         &::placeholder {
           color: var(--color-11);
         }
@@ -115,6 +99,10 @@ const {
           cursor: not-allowed;
           pointer-events: none;
         }
+
+        &[readonly] {
+          pointer-events: none;
+        }
       }
     }
   }

package/src/components/Label.astro

@@ -1,28 +1,26 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
+import type { HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-type Props<As extends HTMLTag = 'label'> = Polymorphic<{ as: As }> & {
-  size?: 'sm' | 'md' | 'lg'
-  color?: 'base' | 'brand'
-  contrast?: boolean
-  html?: string
-  text?: string
+interface Props extends GlobalProps, HTMLAttributes<'label'> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+  color?: 'base' | 'brand' | undefined
+  contrast?: boolean | undefined
+  text?: string | undefined
 }
 
-const { as = 'label', html, text, ...rest } = Astro.props
+const { text, ...rest } = Astro.props
 ---
 
-<Root
+<Element
   class:list="label"
-  {as}
+  as="label"
   {...rest}
 >
-  <slot>
-    <Fragment set:html={html} />
-    <Fragment set:text={text} />
-  </slot>
-</Root>
+  <slot />
+  <Fragment set:html={text} />
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
@@ -32,7 +30,6 @@ const { as = 'label', html, text, ...rest } = Astro.props
       color: var(--color-11);
       font-size: var(--text-2);
       line-height: 1;
-      font-family: var(--font-family);
       text-align: left;
       white-space: nowrap;
     }

package/src/components/Link.astro

@@ -1,30 +1,29 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
-
-type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
-  underline?: 'auto' | 'always' | 'hover' | 'none'
-  size?: 'sm' | 'md' | 'lg'
-  color?: 'base' | 'brand'
-  contrast?: boolean
-  html?: string
-  text?: string
+import type { HTMLAttributes } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import { getEntry } from 'astro:content'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'a'> {
+  slug?: CollectionEntry<'pages'>['slug'] | undefined
+  text?: string | undefined
 }
 
-const { html, text, as = 'a', underline = 'auto', ...rest } = Astro.props
+const { slug, href, text, ...rest } = Astro.props
+
+const entry = slug && (await getEntry('pages', slug))
 ---
 
-<Root
+<Element
   class:list="link"
-  {as}
-  {underline}
+  href={slug ? `/${slug}/` : href}
+  as="a"
   {...rest}
 >
-  <slot>
-    <Fragment set:text={text} />
-    <Fragment set:html={html} />
-  </slot>
-</Root>
+  <slot />
+  <Fragment set:html={entry?.data?.title ?? text} />
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
@@ -37,38 +36,17 @@ const { html, text, as = 'a', underline = 'auto', ...rest } = Astro.props
       border: none;
       background: none;
       color: var(--color-11);
-      font-weight: var(--font-weight);
       font-size: var(--text-3);
-      font-family: var(--font-family);
       text-decoration-color: var(--border); // FIXME, werkt niet
+      text-decoration: none;
       white-space: nowrap;
 
-      &:hover {
-        color: var(--color-12);
-      }
-
-      &.underline-auto {
-        text-decoration: none;
-
-        &:is(p > &) {
-          text-decoration: underline;
-        }
-      }
-
-      &.underline-always {
+      &:is(p > &) {
         text-decoration: underline;
       }
 
-      &.underline-hover {
-        text-decoration: none;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
-      &.underline-none {
-        text-decoration: none;
+      &:hover {
+        color: var(--color-12);
       }
     }
   }

package/src/components/List.astro

@@ -1,24 +1,26 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
+import type { HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-type Props<As extends HTMLTag = 'ul'> = Polymorphic<{ as: As }> & {
-  size?: 'sm' | 'md' | 'lg'
-  color?: 'base' | 'brand'
-  contrast?: boolean
-  items?: (string | { text: string })[]
+interface Props
+  extends GlobalProps,
+    HTMLAttributes<'ul'>,
+    HTMLAttributes<'ol'> {
+  items?: string[] | undefined
+  as?: 'ul' | 'ol'
 }
 
 const { as = 'ul', items, ...rest } = Astro.props
 ---
 
-<Root
+<Element
   class:list="list"
   {as}
   {...rest}
 >
-  {items?.map((item) => <li>{typeof item === 'string' ? item : item.text}</li>)}
-</Root>
+  {items?.map((item) => <li set:html={item} />)}
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {

package/src/components/LocaleSwitcher.astro

@@ -0,0 +1,25 @@
+---
+import Select from 'fulldev-ui/components/Select.astro'
+---
+
+{
+  Astro.props.locales && (
+    <Select
+      name="locale-switcher"
+      options={Astro.props.locales}
+      value={Astro.props.lang as string}
+      placeholder={Astro.props.lang as string}
+    />
+  )
+}
+
+<script>
+  const select = document.querySelector('.theme-switcher select')
+  select?.addEventListener('change', (event) => {
+    const target = event.target as HTMLSelectElement
+    const selectedLocale = target.value
+    const currentUrl = new URL(window.location.href)
+    currentUrl.pathname = '/' + selectedLocale + currentUrl.pathname
+    window.location.href = currentUrl.toString()
+  })
+</script>

package/src/components/Menu.astro

@@ -0,0 +1,57 @@
+---
+import type { ComponentProps, 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 type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  groups?:
+    | {
+        heading?: ComponentProps<typeof Heading>['text']
+        href?: string
+        buttons?: ComponentProps<typeof Button>[]
+      }[]
+    | undefined
+}
+
+const { groups, ...rest } = Astro.props
+---
+
+<Element
+  class:list="menu"
+  {...rest}
+>
+  {
+    groups?.map(({ heading, href, buttons }) => (
+      <Element class:list="menu-group">
+        <Heading
+          level={6}
+          text={href ? `<a href="${href}">${heading}</a>` : heading}
+        />
+        {buttons?.map((button) => (
+          <Button
+            variant="link"
+            {...button}
+          />
+        ))}
+      </Element>
+    ))
+  }
+</Element>
+
+<style lang="scss" is:global>
+  @layer fulldev {
+    .menu {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-6);
+
+      .menu-group {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--space-4) * 1.2);
+      }
+    }
+  }
+</style>

package/src/components/Price.astro

@@ -0,0 +1,34 @@
+---
+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
+  color?: 'base' | 'brand' | undefined
+  contrast?: boolean | undefined
+  value?: number | undefined
+}
+
+const { value, ...rest } = Astro.props
+---
+
+<Element
+  class:list="price"
+  {...rest}
+>
+  {value && <Fragment set:html={formatPrice(value)} />}
+</Element>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .price {
+      margin: 0;
+      max-width: calc(var(--space-4) * 44);
+      color: var(--color-12);
+      font-size: var(--text-5);
+      line-height: 1.25;
+    }
+  }
+</style>