fulldev-ui 0.4.29 → 0.5.0-beta.0

package/src/components/Card.astro

@@ -1,188 +1,128 @@
 ---
-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'
+
+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']
+  slug?: CollectionEntry<'pages'>['slug'] | undefined
+  id?: any
+  panel?: boolean | undefined
+}
+
+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,
+  text: page.description,
+  href: `/${slug}/`,
+  ...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,
   list,
+  button,
   buttons,
-  badge,
-  badges,
-  ratio,
+  panel,
   image,
-  images,
-  rating,
-  button,
-  price,
   icon,
-  avatar,
-  mask,
-  avatars,
+  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
       {level}
+      {rating}
+      {badge}
+      {tagline}
+      {heading}
+      {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);
+          transition: all;
         }
 
         &:hover {
@@ -192,44 +132,21 @@ const buttonVariant = (i: number) => {
         }
       }
 
-      &.ratio-landscape {
-        aspect-ratio: 4/3;
-      }
+      &.panel {
+        --inset-top: var(--space-4);
+        --inset-left: var(--space-4);
+        --inset-right: var(--space-4);
+        --inset-bottom: 0px;
 
-      &.ratio-square {
-        aspect-ratio: 1/1;
-      }
-
-      &.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/Channel.astro

@@ -0,0 +1,70 @@
+---
+import type { ComponentProps } 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'
+
+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
+}
+
+const {
+  variant = 'secondary',
+  structure = 'row',
+  color = 'brand',
+  align = 'start',
+  heading,
+  text,
+  icon,
+  href,
+  ...rest
+} = Astro.props
+---
+
+<Element
+  class:list={`channel ${structure}`}
+  {align}
+  {...rest}
+>
+  <Button
+    {variant}
+    {color}
+    {href}
+    {icon}
+  />
+  <Element class:list={'column'}>
+    <Heading
+      level={6}
+      text={heading}
+    />
+    <Text text={text} />
+  </Element>
+</Element>
+
+<style>
+  .channel {
+    gap: var(--space-4);
+
+    &.column {
+      display: flex;
+      flex-direction: column;
+      align-items: inherit;
+      gap: var(--space-1);
+    }
+
+    &.row {
+      display: flex;
+      flex-direction: row;
+      align-items: inherit;
+      gap: var(--space-1);
+    }
+  }
+</style>

package/src/components/Channels.astro

@@ -0,0 +1,37 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Channel from 'fulldev-ui/components/Channel.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 Channel>['variant']
+  channels?: ComponentProps<typeof Channel>[] | undefined
+}
+
+const { channels, variant, ...rest } = Astro.props
+---
+
+<Element
+  class:list="channels"
+  {...rest}
+>
+  {
+    channels?.map((channel) => (
+      <Channel
+        {variant}
+        {...channel}
+      />
+    ))
+  }
+</Element>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .channels {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-2);
+    }
+  }
+</style>

package/src/components/Checkbox.astro

@@ -1,21 +1,17 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.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 = Omit<HTMLAttributes<'input'>, 'type'> & {
-  label?: string
-  color?: 'base' | 'brand'
-  contrast?: boolean
-  icon?: string
+interface Props extends GlobalProps, HTMLAttributes<'input'> {
+  label?: ComponentProps<typeof Label>['text']
 }
 
 const {
   label,
-  contrast,
-  icon,
-  name,
   id,
+  name,
   placeholder,
   value,
   disabled,
@@ -25,32 +21,32 @@ const {
 } = Astro.props
 ---
 
-<Root
-  structure="row"
+<Element
   class:list="checkbox"
   {...rest}
 >
-  <Root
+  <Element
     as="input"
     type="checkbox"
     id={id ?? name ?? label}
     if={id ?? name ?? label}
     name={name ?? label ?? id}
     {disabled}
+    {placeholder}
     {required}
     {checked}
     {...rest}
   />
   <Label
     for={id ?? name ?? label}
-    html={label}
-    {contrast}
+    text={label}
   />
-</Root>
+</Element>
 
 <style lang="scss" is:global>
   @layer fulldev {
     .checkbox {
+      display: flex;
       align-items: center;
       gap: var(--space-1);
 

package/src/components/Dialog.astro

@@ -1,11 +1,13 @@
 ---
-import type { ComponentProps, HTMLTag } from 'astro/types'
-import Button from './Button.astro'
-import Card from './Card.astro'
+import type { ComponentProps } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+import Card from 'fulldev-ui/components/Card.astro'
+import type Icon from './Icon.astro'
+import type Label from './Label.astro'
 
-type Props<As extends HTMLTag = 'a'> = ComponentProps<typeof Card<As>> & {
-  label?: string
-  icon?: string
+interface Props extends ComponentProps<typeof Card> {
+  icon?: ComponentProps<typeof Icon>['name']
+  label?: ComponentProps<typeof Label>['text']
 }
 
 const {
@@ -18,13 +20,10 @@ const {
 ---
 
 <Button
-  as="button"
-  type="button"
   id={`${id}-button`}
-  html={label}
-  icon={icon}
   variant="secondary"
   onclick={`document.getElementById('${id}').showModal()`}
+  {icon}
 />
 
 <dialog
@@ -33,8 +32,7 @@ const {
   onclick={`event.target === this && this.close()`}
 >
   <Card
-    as="div"
-    frame="panel"
+    panel
     {...rest}
   >
     <slot />