fulldev-ui 0.4.28 → 0.5.0-beta.0

package/src/components/Image.astro

@@ -1,72 +1,54 @@
 ---
+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}`]}
+      style={{ '--screen': '100vw' }}
+      alt={alt || getAltBySrc()}
+      src={image ? image() : src}
+      width={width}
+      height={height}
+      {...(rest as any)}
+    />
   )
 }
 
@@ -77,40 +59,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 +80,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,25 +1,21 @@
 ---
-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,
   name = placeholder,
   type = 'text',
@@ -27,29 +23,27 @@ const {
 } = 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}
   />
   <Icon name={icon} />
-</Root>
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
@@ -84,18 +78,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);
         }

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:text={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/Price.astro

@@ -0,0 +1,38 @@
+---
+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<'div'> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+  color?: 'base' | 'brand' | undefined
+  contrast?: boolean | undefined
+  value?: number | undefined
+}
+
+const { value, ...rest } = Astro.props
+---
+
+{
+  value && (
+    <Element
+      if={value}
+      class:list="price"
+      {...rest}
+    >
+      €{value?.toFixed(2).replace('.', ',')}
+    </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>

package/src/components/Rating.astro

@@ -1,19 +1,17 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
+import Avatar from 'fulldev-ui/components/Avatar.astro'
+import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
-import Root from 'fulldev-ui/components/Root.astro'
-import Avatar from './Avatar.astro'
-import Column from './Column.astro'
-import Label from './Label.astro'
+import Label from 'fulldev-ui/components/Label.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-type Props = HTMLAttributes<'div'> & {
-  color?: 'base' | 'brand'
-  align?: 'start' | 'center' | 'end'
-  value?: number
-  size?: string
-  label?: string
-  avatars?: string[]
-  avatar?: string
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  align?: 'start' | 'center' | 'end' | undefined
+  value?: number | undefined
+  label?: string | undefined
+  avatars?: string[] | undefined
+  avatar?: string | undefined
 }
 
 const { value, label, avatars, avatar, align, ...rest } = Astro.props
@@ -29,20 +27,20 @@ const getIcon = (count: number) => {
 const hasAvatars = avatars && avatars?.length > 0
 ---
 
-<Root
+<Element
   class:list="rating"
   {...rest}
 >
   {
-    [avatar, ...(avatars ?? [])]?.filter(Boolean)?.map((avatar) => (
-      <Avatar
-        radius="full"
-        src={avatar}
-      />
-    ))
+    [avatar, ...(avatars ?? [])]
+      ?.filter(Boolean)
+      ?.map((avatar) => <Avatar src={avatar} />)
   }
-  <Column align={!hasAvatars ? align : undefined}>
-    <Root
+  <Element
+    class:list="column"
+    align={!hasAvatars ? align : undefined}
+  >
+    <Element
       class:list={'stars'}
       {...rest}
     >
@@ -55,13 +53,13 @@ const hasAvatars = avatars && avatars?.length > 0
             />
           ))
       }
-    </Root>
+    </Element>
     <Label
       color="base"
-      html={label}
+      text={label}
     />
-  </Column>
-</Root>
+  </Element>
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
@@ -70,6 +68,12 @@ const hasAvatars = avatars && avatars?.length > 0
       align-items: center;
       gap: var(--space-4);
 
+      .column {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
       .avatar + .avatar {
         margin-left: calc(var(--space-4) * -2.5);
       }

package/src/components/Search.astro

@@ -1,15 +1,15 @@
 ---
 import Pagefind from 'astro-pagefind/components/Search'
-import Dialog from './Dialog.astro'
+import Dialog from 'fulldev-ui/components/Dialog.astro'
 
-const { variant = 'secondary', icon, ...rest } = Astro.props
+const { variant = 'secondary', ...rest } = Astro.props
 ---
 
 <Dialog
   class:list="search"
   id="search"
+  icon="search"
   {variant}
-  {icon}
   {...rest}
 >
   <Pagefind uiOptions={{ showImages: false }} />