fulldev-ui 0.4.29 → 0.5.0-beta.1

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

package/src/components/Section.astro

@@ -1,291 +1,251 @@
 ---
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import Badge from 'fulldev-ui/components/Badge.astro'
-import Box from 'fulldev-ui/components/Box.astro'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
-import Card from 'fulldev-ui/components/Card.astro'
-import Column from 'fulldev-ui/components/Column.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import type Card from 'fulldev-ui/components/Card.astro'
+import Cards from 'fulldev-ui/components/Cards.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 Text from 'fulldev-ui/components/Text.astro'
-import Wrap from 'fulldev-ui/components/Wrap.astro'
-import Tagline from './Tagline.astro'
-
-type Props<As extends HTMLTag = 'section'> = Polymorphic<{ as: As }> & {
-  position?: 'background' | 'cover' | 'inset'
-  ratio?: 'landscape' | 'portrait' | 'square' | number
-  mask?: 'sm' | 'md' | 'lg'
-  buttons?: ComponentProps<typeof Button<'a'>>[]
-  button?: ComponentProps<typeof Button<'a'>>
-  cards?: ComponentProps<typeof Card<'a'>>[]
-  badge?: string | ComponentProps<typeof Badge<'a'>>
-  image?: ComponentProps<typeof Image>['src']
-  rating?: number
-  pages?: CollectionEntry<'pages'>['data'][]
-  records?: CollectionEntry<'records'>['data'][]
-  heading?: string
-  title?: string
-  text?: string
-  html?: string
-  description?: string
-  label?: string
-  tagline?: string
-  list?: string[]
-  theme?: 'light' | 'dark'
-  color?: 'base' | 'brand'
-  size?: 'sm' | 'md' | 'lg'
-  frame?: 'none' | 'fill' | 'panel'
-  align?: 'start' | 'center' | 'end'
-  justify?: 'start' | 'center' | 'end'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props.js'
+
+interface Props
+  extends GlobalProps,
+    ComponentProps<typeof Writeup>,
+    HTMLAttributes<'section'> {
+  image?: ComponentProps<typeof Image>
+  position?: ComponentProps<typeof Image>['position']
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  button?: ComponentProps<typeof Button> | undefined
+  variant?: ComponentProps<typeof Button>['variant']
+  cards?: ComponentProps<typeof Cards>['cards']
+  panel?: ComponentProps<typeof Card>['panel']
+  component?: string
   structure?:
+    | ComponentProps<typeof Cards>['structure']
     | 'column'
     | 'split'
     | 'spread'
-    | 'carousel'
-    | 'grid'
-    | 'masonry'
-    | 'stack'
-  level?: 1 | 2 | 3 | 4 | 5 | 6
-  space?: 'auto' | 'none'
-  reverse?: 'odd' | 'even'
-  variant?: 'primary' | 'secondary' | 'tertiary'
 }
 
 const {
-  as = 'section',
-  space = 'auto',
-  frame = 'none',
-  structure = 'column',
-  variant = 'secondary',
+  cards,
+  structure = cards ? 'grid' : 'column',
   align = 'start',
   level = 2,
-  position,
-  label,
-  heading,
+  size = 'md',
   badge,
-  title,
+  tagline,
+  rating,
+  heading,
   text,
   list,
-  html,
-  tagline,
-  description,
+  button,
   buttons,
+  variant,
+  panel,
   image,
-  rating,
-  size,
-  button,
-  cards,
-  pages,
-  records,
-  mask,
-  justify,
   theme,
-  ratio,
+  position,
   ...rest
 } = Astro.props
 
-const mergedCards = (pages || records || cards)?.filter(Boolean)
-const hasCards = mergedCards && mergedCards?.length > 0
-const hasText = text || html || description || list
-const hasButton = button || (buttons && buttons?.length > 0)
+const { component, ...props } = 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'
+const allComponents = {
+  ...import.meta.glob('/src/**/*.astro'),
+  ...import.meta.glob('../../**/*.astro'),
 }
+
+const componentPath = Object.keys(allComponents).find(
+  (path) => path.split('/').pop()?.split('.')[0] === component
+)
+
+const Component =
+  componentPath && (await (allComponents[componentPath] as any)()).default
 ---
 
-<Root
-  class:list="section"
-  variant={hasCards ? undefined : variant}
-  justify={hasCards ? undefined : justify}
-  theme={hasCards ? undefined : theme}
-  structure={structure === 'split' ? 'split' : 'column'}
-  frame={frame === 'panel' && hasCards ? 'none' : frame}
-  {as}
-  {align}
-  {space}
-  {size}
-  {...rest}
->
-  <Box
-    structure={structure === 'spread' ||
-    structure === 'carousel' ||
-    (!hasText && hasButton)
-      ? 'spread'
-      : 'column'}
-    align={structure === 'split' ? 'start' : align}
-  >
-    <slot name="segment">
-      <Column
-        style={{ textWrap: 'balance' }}
-        align={structure === 'split' || structure === 'spread'
-          ? 'start'
-          : align}
-      >
-        <slot name="writeup">
-          <Rating
-            color="brand"
-            {align}
-            {...typeof rating === 'number' ? { value: rating } : rating}
-          />
-          <Badge
-            color="base"
-            radius="full"
-            {...typeof badge === 'string' ? { html: badge } : badge}
-          />
-          <Tagline
-            color="brand"
-            html={tagline}
-          />
-          <Heading
-            html={heading || title}
-            {level}
-          />
-          <Text
-            contrast={!hasCards && position === 'background' && true}
-            html={html || text || description}
-            lead={level === 1}
-          />
-          <List items={list} />
-        </slot>
-      </Column>
-      <Wrap>
-        <slot name="actions">
-          {
-            [button, ...(buttons ?? [])]
-              .filter(Boolean)
-              ?.map((button: any, i: number) => (
-                <Button
-                  variant={buttonVariant(i)}
-                  {...button}
-                />
-              ))
-          }
-        </slot>
-      </Wrap>
-    </slot>
-  </Box>
-  <slot>
-    <Box
-      structure={structure === 'split' || structure === 'spread'
-        ? 'column'
-        : structure}
-      position={structure === 'carousel' ? 'inset' : undefined}
-      size={size === 'lg' ? 'md' : 'sm'}
+{
+  Component ? (
+    <Component {...props} />
+  ) : (
+    <Element
+      class:list="section"
+      as="section"
+      panel={!cards && panel}
+      theme={cards ? undefined : theme}
+      structure={
+        structure === 'grid' ||
+        structure === 'carousel' ||
+        structure === 'stack'
+          ? text
+            ? 'column'
+            : 'spread'
+          : structure
+      }
+      {align}
+      {size}
+      {...rest}
     >
-      <slot name="deck">
-        {
-          mergedCards?.map(({ ...rest }: any) => (
-            <Card
-              align="start"
-              level={Number(level) + 2}
-              {position}
-              {frame}
-              {justify}
-              {theme}
+      <Element class:list="segment">
+        <slot name="segment">
+          <slot name="writeup">
+            <Writeup
+              {level}
+              {rating}
+              {badge}
+              {tagline}
+              {heading}
+              {text}
+              {list}
+            />
+          </slot>
+          <slot name="buttons">
+            <Button
               {variant}
-              {ratio}
-              {mask}
-              {...rest}
+              {...button}
             />
-          ))
-        }
+            <Buttons
+              {variant}
+              {buttons}
+            />
+          </slot>
+        </slot>
+      </Element>
+      <slot>
+        <Cards
+          level={(level + 2) as any}
+          size={size === 'lg' ? 'md' : 'sm'}
+          structure={
+            structure === 'grid' ||
+            structure === 'masonry' ||
+            structure === 'stack' ||
+            structure === 'carousel' ||
+            structure === 'bento'
+              ? structure
+              : undefined
+          }
+          position={cards ? position : undefined}
+          {theme}
+          {cards}
+          {panel}
+          {position}
+        />
+        <Image
+          position={cards ? undefined : position}
+          {...image}
+        />
       </slot>
-    </Box>
-    <Image
-      position={hasCards ? undefined : position}
-      ratio={hasCards ? undefined : ratio}
-      mask={hasCards ? undefined : mask}
-      src={image}
-    />
-  </slot>
-</Root>
+    </Element>
+  )
+}
 
 <style is:global lang="scss">
   @layer fulldev {
     .section {
-      --inset-top: var(--space-7);
-      --inset-left: var(--gutter-left);
-      --inset-right: var(--gutter-right);
-      --inset-bottom: var(--space-7);
+      --inset-top: 0px;
+      --inset-left: var(--gutter);
+      --inset-right: var(--gutter);
+      --inset-bottom: var(--spacer);
 
       position: relative;
-
-      &:first-child {
-        --inset-top: var(--space-6);
-        --inset-bottom: var(--space-6);
-      }
-
-      &.frame-none {
-        padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
-          var(--inset-left);
+      align-items: flex-start;
+      gap: var(--space-6) var(--space-7);
+      padding: var(--spacer) var(--gutter);
+      overflow: auto;
+
+      .segment {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--space-5);
+        z-index: 1;
       }
 
-      &.frame-fill {
-        background-color: var(--color-2);
-        padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
-          var(--inset-left);
-      }
-
-      &.frame-panel {
-        --inset-top: var(--space-6);
-        --inset-left: min(var(--gutter), var(--space-7));
-        --inset-right: min(var(--gutter), var(--space-7));
-        --inset-bottom: var(--space-6);
-
-        margin: var(--inset-top) var(--gutter-right) var(--inset-bottom)
-          var(--gutter-left);
+      &.panel {
+        margin: var(--spacer) var(--gutter);
         border: 1px solid var(--base-a6);
         border-radius: var(--radius-2);
-        background-color: var(--color-2);
-        padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
-          var(--inset-left);
-        max-width: calc(
-          100vw - var(--sidebar-width) - var(--toc-width) - var(--gutter-left) - var(
-              --gutter-right
-            )
-        );
+        background-color: var(--base-2);
+        padding: min(var(--gutter), var(--spacer));
         overflow: hidden;
+      }
+
+      &.reverse {
+        --inset-top: var(--spacer);
+        --inset-left: var(--gutter);
+        --inset-right: var(--gutter);
+        --inset-bottom: 0px;
+
+        &:not(.structure-split) {
+          .segment {
+            order: 999;
+          }
+        }
 
         @media (min-width: 1024px) {
-          --inset-top: var(--space-7);
-          --inset-bottom: var(--space-7);
+          .segment {
+            order: 999;
+          }
         }
       }
 
-      &.frame-viewport {
-        padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
-          var(--inset-left);
-        min-height: 100vh;
-      }
+      &.structure-column {
+        display: flex;
+        flex-direction: column;
 
-      @media (min-width: 1024px) {
-        &:nth-of-type(odd).split.reverse-odd {
-          > :first-child {
-            order: 999;
-          }
+        &.align-center {
+          align-items: center;
 
-          > :last-child {
-            order: 0;
+          .segment {
+            align-items: center;
+            text-align: center;
           }
         }
+      }
+
+      &.structure-split {
+        display: grid;
+        grid-template-columns: 1fr;
+        width: 100%;
+
+        @media (min-width: 1024px) {
+          --inset-top: var(--spacer);
+          --inset-left: 0px;
+          --inset-right: var(--gutter);
+          --inset-bottom: var(--spacer);
 
-        &:nth-of-type(even).split.reverse-even {
-          > :first-child {
-            order: 0;
+          grid-auto-columns: 1fr;
+          grid-auto-flow: column;
+
+          &.reverse {
+            --inset-right: 0px;
+            --inset-left: var(--gutter);
           }
+        }
 
-          > :last-child {
-            order: 999;
+        &.align-center {
+          align-items: center;
+        }
+      }
+
+      &.structure-spread {
+        display: flex;
+        flex-direction: column;
+
+        .segment {
+          flex-direction: row;
+          justify-content: space-between;
+          width: 100%;
+        }
+
+        &.align-center {
+          .segment {
+            align-items: center;
+
+            .writeup {
+              align-items: flex-start;
+            }
           }
         }
       }