fulldev-ui 0.4.29 → 0.5.0-beta.0

package/src/components/Header.astro

@@ -1,212 +1,130 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import { getCollection } from 'astro:content'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
-import Drawer from 'fulldev-ui/components/Drawer.astro'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Element from 'fulldev-ui/components/Element.astro'
 import Logo from 'fulldev-ui/components/experimental/Logo.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Link from 'fulldev-ui/components/Link.astro'
-import Root from 'fulldev-ui/components/Root.astro'
-import Row from 'fulldev-ui/components/Row.astro'
 import Search from 'fulldev-ui/components/Search.astro'
-
-type Props<As extends HTMLTag = 'header'> = Polymorphic<{ as: As }> & {
-  structure?: 'spread' | 'row' | 'column'
-  position?: 'relative' | 'sticky' | 'fixed' | 'absolute'
-  variant?: 'ghost' | 'base' | 'subtle' | 'soft' | 'surface' | 'outline'
-  size?: 'sm' | 'md' | 'lg'
-  frame?: 'fill' | 'panel'
-  align?: 'start' | 'center' | 'end'
-  space?: 'none' | 'auto'
-  logo?: string
-  heading?: string
-  links?: any[]
-  buttons?: any[]
-  drawer?: any[]
-  search?: any
+import ThemeSelect from 'fulldev-ui/components/ThemeSelect.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+
+interface Props extends GlobalProps, HTMLAttributes<'header'> {
+  logo?: ComponentProps<typeof Logo>['src']
+  company?: ComponentProps<typeof Logo>['company']
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  panel?: boolean | undefined
+  search?: boolean | undefined
+  open?: boolean | undefined
+  themeselect?: boolean | undefined
 }
 
 const {
-  as = 'header',
-  align = 'center',
-  structure = 'spread',
-  space = 'auto',
   size = 'sm',
-  frame = 'none',
+  open = true,
   logo,
-  heading,
-  links,
+  company,
   buttons,
-  drawer,
   search,
+  panel,
+  themeselect,
   ...rest
 } = Astro.props
-
-const slug = Astro.url.pathname.replace(/^\/|\/$/g, '')
-const url = Astro.url.href
 ---
 
-<Root
-  class:list={'header'}
-  {as}
-  {frame}
-  {structure}
-  {space}
+<Element
+  class:list={['header']}
+  as="header"
+  {panel}
   {size}
+  {open}
   {...rest}
 >
-  <Row
-    style={{ textDecoration: 'none', height: '100%' }}
-    as="a"
-    href="/"
-  >
-    <Logo src={logo} />
-    <Heading
-      as="p"
-      level={3}
-      html={heading}
-    />
-  </Row>
-  <Row>
-    {
-      links?.map((link) => (
-        <Link
-          class={'header-link'}
-          {...link}
-        />
-      ))
-    }
-    {
-      buttons?.map((button) => (
-        <Button
-          variant="secondary"
-          {...button}
-        />
-      ))
-    }
-    {search && <Search {...search} />}
-    {
-      drawer && (
-        <Drawer
-          icon="menu-2"
-          id="navigation-drawer"
-        >
-          {drawer &&
-            drawer.length > 0 &&
-            drawer.map((item: any) => (
-              <>
-                <Heading
-                  level={6}
-                  html={item.heading}
-                />
-                {item.links?.map((link: any) => (
-                  <Link
-                    {...link}
-                    class="sidebar-link"
-                    color={
-                      url.replace(/\/$/, '').endsWith(link.href)
-                        ? 'brand'
-                        : undefined
-                    }
-                  />
-                ))}
-                {item.folder &&
-                  (async () => {
-                    const pages = await getCollection(
-                      'pages',
-                      (entry: any) =>
-                        entry.slug.startsWith(item.folder) &&
-                        !entry.slug.endsWith(item.folder)
-                    )
-                    return pages.map((page: any) => (
-                      <Link
-                        href={`/${page.slug}`}
-                        class="sidebar-link"
-                        color={slug === page.slug ? 'brand' : undefined}
-                        html={page.data.title}
-                      />
-                    ))
-                  })()}
-              </>
-            ))}
-        </Drawer>
-      )
-    }
-  </Row>
-</Root>
+  <Logo
+    id={logo}
+    src={logo}
+    {company}
+  />
+  <Buttons
+    {buttons}
+    variant="link"
+  />
+  {search && <Search />}
+  {themeselect && <ThemeSelect />}
+  <Button
+    class="menu-button"
+    variant="tertiary"
+    icon="menu-2"
+    for="sidebar"
+  />
+</Element>
 
 <style lang="scss" is:global>
-  :root {
-    --header-height: calc(
-      var(--text-2) + 2 * var(--space-4) + 2 * var(--space-3)
-    );
-  }
-
   @layer fulldev {
     .header {
-      --screen: 1536px;
-      --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
-
       display: flex;
-      position: relative;
+      position: sticky;
       top: 0;
-      right: 0;
       left: 0;
+      justify-content: flex-end;
       align-items: center;
-      z-index: 10;
-      border-bottom: 1px solid var(--color-a6);
+      gap: var(--space-4);
+      z-index: 20;
+      border-bottom-width: 1px;
+      border-style: solid;
+      border-color: var(--base-a6);
+      background-color: var(--base-2);
+      padding: 0 var(--gutter);
       width: 100%;
-      // TODO: fix this
-      max-width: calc(100% - (2 * var(--outer-x)));
       height: var(--header-height);
+      overflow: hidden;
 
-      &.frame-none {
-        padding: 0 var(--gutter);
+      &,
+      & ~ * {
+        --header-height: 56px;
       }
 
-      &.frame-fill {
-        background-color: var(--color-2);
-        padding: 0 var(--gutter);
-      }
-
-      &.frame-panel {
-        margin: var(--space-3) var(--gutter);
-        border: 1px solid var(--color-a6);
+      &.panel {
+        margin: var(--space-4) var(--gutter);
+        border-width: 1px solid;
         border-radius: var(--radius-2);
-        padding: var(--space-4) min(var(--gutter), var(--space-4));
+        padding: var(--sapce-4) min(var(--gutter), var(--space-4));
         width: auto;
-        overflow: hidden;
       }
 
-      &.position-fixed {
-        position: fixed;
+      .logo {
+        margin-right: auto;
       }
 
-      &.position-absolute {
-        position: absolute;
-      }
+      @media (min-width: 1024px) {
+        &:not(.open) {
+          display: none;
 
-      &.position-sticky {
-        position: sticky;
-        top: -1px;
+          & ~ * {
+            --header-height: 0px;
+          }
+        }
       }
 
-      .header-link {
+      .buttons {
         display: none;
-        font-size: var(--text-2);
 
         @media (min-width: 1024px) {
           display: flex;
+          gap: var(--space-2);
+
+          .button.variant-link + .button {
+            margin-left: var(--space-3);
+          }
         }
       }
 
-      .drawer-link {
-        font-size: var(--text-2);
-      }
+      .menu-button {
+        .icon {
+          transform: scale(1.56);
+        }
 
-      .drawer-button {
         @media (min-width: 1024px) {
-          display: none !important;
+          display: none;
         }
       }
     }

package/src/components/Heading.astro

@@ -1,43 +1,35 @@
 ---
-import type { 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 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'> =
-  Polymorphic<{
-    as: As
-  }> & {
-    level?: 1 | 2 | 3 | 4 | 5 | 6
-    size?: 'sm' | 'md' | 'lg'
-    color?: 'base' | 'brand'
-    contrast?: boolean
-    html?: string
-    text?: string
-  }
+interface Props
+  extends GlobalProps,
+    HTMLAttributes<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> {
+  level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined
+  text?: string | undefined
+}
 
 const {
-  level = 2,
-  as = `h${level}`,
-  color = 'base',
   contrast = true,
-  html,
+  color = 'base',
+  level = 2,
   text,
   ...rest
 } = Astro.props
 ---
 
-<Root
+<Element
   class:list="heading"
-  {as}
+  as=`h${level}`
   {contrast}
   {color}
   {level}
   {...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 {
@@ -46,15 +38,15 @@ const {
       max-width: calc(var(--space-4) * 44);
       scroll-margin: var(--space-5);
       color: var(--color-11);
-      font-weight: var(--heading-font-weight);
       font-weight: 700;
       line-height: 1.1;
-      font-family: var(--heading-font-family);
       letter-spacing: -0.025em;
+      text-align: inherit;
       text-decoration: none;
 
       &.level-1 {
         font-size: var(--text-8);
+        text-wrap: balance;
       }
 
       &.level-2 {

package/src/components/Icon.astro

@@ -1,14 +1,14 @@
 ---
 import tablerIcons from '@iconify-json/tabler/icons.json'
-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 = 'i'> = Polymorphic<{ as: As }> & {
-  name?: string
-  color?: 'base' | 'brand'
+interface Props extends GlobalProps, HTMLAttributes<'i'> {
+  name?: string | undefined
 }
 
-const { as = 'i', name, ...rest } = Astro.props
+const { name, ...rest } = Astro.props
 
 const trimmedName = name?.trim() as string | undefined
 const icon = trimmedName
@@ -16,10 +16,10 @@ const icon = trimmedName
   : undefined
 ---
 
-<Root
+<Element
   class:list="icon"
   if={icon}
-  {as}
+  as="i"
   {...rest}
 >
   {
@@ -31,7 +31,7 @@ const icon = trimmedName
       />
     )
   }
-</Root>
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {

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;
       }
     }
   }