fulldev-ui 0.3.35 → 0.4.0-beta.0

package/src/components/{base/Badge.astro → Badge.astro}

@@ -1,10 +1,9 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-import Icon from './Icon.astro'
+import Icon from 'fulldev-ui/components/Icon.astro'
+import Root from 'fulldev-ui/components/Root.astro'
 
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
-  variant?: 'solid' | 'surface' | 'soft' | 'outline' | 'ghost'
+type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
   radius?: 'none' | 'auto' | 'full'
   size?: 'sm' | 'md' | 'lg'
   color?: 'base' | 'brand'
@@ -14,23 +13,33 @@ type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
   icon?: string
 }
 
-const { variant = 'outline', radius = 'auto', icon, ...rest } = Astro.props
+const {
+  href,
+  html,
+  text,
+  as = href ? 'a' : 'div',
+  radius = 'full',
+  icon,
+  ...rest
+} = Astro.props
 ---
 
-<Component
-  class:list={['badge']}
-  {variant}
+<Root
+  class:list="badge"
   {radius}
+  {as}
+  {href}
   {...rest}
 >
-  <slot />
-  <Icon name={icon} />
-</Component>
+  <slot>
+    <Fragment set:text={text} />
+    <Fragment set:html={html} />
+    <Icon name={icon} />
+  </slot>
+</Root>
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('badge') {
+  .badge {
     display: inline-flex;
     flex-shrink: 0;
     justify-content: center;
@@ -38,20 +47,25 @@ const { variant = 'outline', radius = 'auto', icon, ...rest } = Astro.props
     vertical-align: top;
     gap: var(--space-2);
     transition: var(--transition);
-    border: 1px solid var(--border);
-    background-color: var(--background);
-    padding-right: var(--space-3);
-    padding-left: var(--space-3);
+    border: 1px solid var(--color-a6);
+    padding: 0 var(--space-3);
     height: calc(var(--text-1) + 2 * var(--space-2));
-    color: var(--text);
-    font-weight: var(--button-font-weight);
+    color: var(--color-11);
+    font-weight: 500;
     font-size: var(--text-1);
-    line-height: 1.625;
-    font-family: var(--button-font-family);
+    line-height: 1;
     text-align: center;
     text-decoration: none;
     white-space: nowrap;
 
+    &[href] {
+      border-color: var(--color-7);
+
+      &:hover {
+        border-color: var(--color-8);
+      }
+    }
+
     &.radius-none {
       border-radius: 0;
     }

package/src/components/{structure/Bento.astro → Bento.astro}

@@ -1,27 +1,24 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
+import Root from 'fulldev-ui/components/Root.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  size?: 'sm' | 'md' | 'lg'
   color?: 'base' | 'brand'
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  compact?: boolean
 }
 
 const { ...rest } = Astro.props
 ---
 
-<Component
-  class:list={['bento']}
+<Root
+  class:list="bento"
   {...rest}
 >
   <slot />
-</Component>
+</Root>
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('bento') {
+  .bento {
     display: grid;
     position: relative;
     grid-template-columns: 1fr;

package/src/components/Block.astro

@@ -0,0 +1,157 @@
+---
+import { getCollection, getEntries, getEntry } from 'astro:content'
+import { assign, mapKeys } from 'radash'
+
+interface Props {
+  _bookshop_name?: string
+  [key: string | number | symbol]: any
+}
+
+let { _bookshop_name, records, pages, source, ...rest } = Astro.props
+
+const packageBlocks = import.meta.glob('../blocks/**/*.astro')
+const userBlocks = import.meta.glob('/src/blocks/**/*.astro')
+
+const mapBlockKeys = (blocks: any) =>
+  mapKeys(blocks, (key: any) => key.split('/').pop().split('.').shift())
+
+const components = {
+  ...mapBlockKeys(packageBlocks),
+  ...mapBlockKeys(userBlocks),
+}
+
+const found = components[_bookshop_name as any] as any
+const functioncomp = found && (await found())
+const Component = functioncomp?.default
+
+records = records
+  ? (await getEntries(records)).map((entry: any) => entry?.data)
+  : undefined
+
+pages = pages
+  ? (await getEntries(pages)).map((entry: any) => ({
+      href: `/${entry.slug}/`,
+      ...entry?.data,
+    }))
+  : undefined
+
+const slug = Astro.url.pathname.replace(/^\/|\/$/g, '')
+
+const children =
+  source === 'children' && slug
+    ? [
+        ...(
+          await getCollection(
+            'pages',
+            (page: any) =>
+              page.slug.startsWith(slug) &&
+              page.slug !== slug &&
+              !page.slug.replace(`${slug}/`, '').includes('/')
+          )
+        ).map((page: any) => ({ href: `/${page.slug}/`, ...page.data })),
+        ...(
+          await getCollection(
+            'records',
+            (record: any) =>
+              record.id.startsWith(slug) &&
+              record.id !== slug &&
+              !record.id.replace(`${slug}/`, '').includes('/')
+          )
+        ).map((record: any) => record.data),
+      ]
+    : undefined
+
+const references =
+  source === 'references' && slug
+    ? (
+        await getCollection('pages', (page: any) =>
+          page.data?.pages?.find(
+            (page: any) =>
+              page.slug
+                .replace('.md', '')
+                .replace('/index', '')
+                .replace('src/content/', '') === slug
+          )
+        )
+      ).map((item: any) => ({ href: `/${item.slug}/`, ...item.data }))
+    : undefined
+
+const siblings =
+  source === 'siblings' && slug
+    ? (
+        await getCollection('pages', (page: any) => {
+          const currentPageFolder = slug.split('/').slice(0, -1).join('/')
+          const pageFolder = page.slug.split('/').slice(0, -1).join('/')
+          return (
+            page.slug !== slug &&
+            pageFolder === currentPageFolder &&
+            page.slug.startsWith(currentPageFolder)
+          )
+        })
+      )
+        .map((item: any) => ({ href: `/${item.slug}/`, ...item.data }))
+        .sort(() => Math.random() - 0.5) // Randomize the order
+    : undefined
+
+const mergedPages = pages
+  ? await Promise.all(
+      pages.map(async (page: any) => {
+        if (!page.i18n) return page
+        const i18n = await getEntry(page.i18n)
+        return assign(i18n?.data, page)
+      })
+    )
+  : undefined
+
+const mergedChildren = children
+  ? await Promise.all(
+      children.map(async (child: any) => {
+        if (!child.i18n) return child
+        const i18n = await getEntry(child.i18n)
+        return assign(i18n?.data, child)
+      })
+    )
+  : undefined
+
+const mergedReferences = references
+  ? await Promise.all(
+      references.map(async (reference: any) => {
+        if (!reference.i18n) return reference
+        const i18n = await getEntry(reference.i18n)
+        return assign(i18n?.data, reference)
+      })
+    )
+  : undefined
+
+const mergedSiblings = siblings
+  ? await Promise.all(
+      siblings.map(async (sibling: any) => {
+        if (!sibling.i18n) return sibling
+        const i18n = await getEntry(sibling.i18n)
+        return assign(i18n?.data, sibling)
+      })
+    )
+  : undefined
+---
+
+{
+  Component && (
+    <Component
+      cards={
+        mergedPages ||
+        mergedSiblings ||
+        records ||
+        mergedChildren ||
+        mergedReferences
+      }
+      pages={
+        mergedPages ||
+        mergedSiblings ||
+        records ||
+        mergedChildren ||
+        mergedReferences
+      }
+      {...rest}
+    />
+  )
+}

package/src/components/Blocks.astro

@@ -0,0 +1,5 @@
+---
+import Block from './Block.astro'
+---
+
+{Object.values(Astro.props ?? {})?.map((block: any) => <Block {...block} />)}

package/src/components/Box.astro

@@ -0,0 +1,60 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Bento from './Bento.astro'
+import Carousel from './Carousel.astro'
+import Column from './Column.astro'
+import Grid from './Grid.astro'
+import Masonry from './Masonry.astro'
+import Row from './Row.astro'
+import Split from './Split.astro'
+import Spread from './Spread.astro'
+import Wrap from './Wrap.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  align?: 'start' | 'center' | 'end'
+  position?: 'inset'
+  space?: 'none' | 'auto'
+  size?: 'sm' | 'md' | 'lg'
+  structure?:
+    | 'bento'
+    | 'carousel'
+    | 'column'
+    | 'grid'
+    | 'masonry'
+    | 'row'
+    | 'split'
+    | 'spread'
+    | 'wrap'
+}
+
+const structuresMap = {
+  bento: Bento,
+  carousel: Carousel,
+  column: Column,
+  grid: Grid,
+  masonry: Masonry,
+  row: Row,
+  split: Split,
+  spread: Spread,
+  wrap: Wrap,
+}
+
+const {
+  as = 'div',
+  space = 'auto',
+  structure = 'column',
+  align = 'start',
+  ...rest
+} = Astro.props
+
+const Structure = structuresMap[structure] ?? structuresMap['column']
+---
+
+<Structure
+  {as}
+  {align}
+  {space}
+  {...rest as any}
+>
+  <slot />
+</Structure>

package/src/components/Button.astro

@@ -0,0 +1,140 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Avatar from 'fulldev-ui/components/Avatar.astro'
+import Icon from 'fulldev-ui/components/Icon.astro'
+import Root from 'fulldev-ui/components/Root.astro'
+
+type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
+  variant?: 'primary' | 'secondary' | 'tertiary'
+  radius?: 'none' | 'auto' | 'full'
+  size?: 'sm' | 'md' | 'lg'
+  color?: 'base' | 'brand'
+  contrast?: boolean
+  avatar?: string
+  icon?: string
+  html?: string
+  text?: string
+}
+
+const {
+  as = 'a',
+  variant = 'primary',
+  radius = 'auto',
+  avatar,
+  icon,
+  html,
+  text,
+  ...rest
+} = Astro.props
+---
+
+<Root
+  class:list="button"
+  {as}
+  {variant}
+  {radius}
+  {...rest}
+>
+  <slot>
+    <Avatar src={avatar} />
+    <Icon name={icon} />
+    <Fragment set:html={html} />
+    <Fragment set:text={text} />
+  </slot>
+</Root>
+
+<style is:global lang="scss">
+  .button {
+    display: inline-flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    vertical-align: top;
+    gap: var(--space-2);
+    appearance: none;
+    transition: background-color var(--transition);
+    cursor: pointer;
+    outline: none;
+    box-shadow: none;
+    border: none;
+    background: none;
+    padding: 0 var(--space-4);
+    height: calc(var(--text-2) + 2 * var(--space-4));
+    color: var(--text);
+    font-weight: 500;
+    font-size: var(--text-2);
+    line-height: 1;
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+
+    .avatar {
+      margin-right: calc(-1 * (var(--space-4)));
+      margin-left: var(--space-1);
+      padding: calc(var(--space-1) / 3);
+      width: calc(var(--text-2) + 2 * var(--space-4)) !important;
+      height: calc(var(--text-2) + 2 * var(--space-4)) !important;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--focus) !important;
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    &.radius-none {
+      border-radius: 0;
+    }
+
+    &.radius-auto {
+      border-radius: var(--radius-1);
+    }
+
+    &.radius-full {
+      border-radius: 9999px;
+    }
+
+    &.variant-primary {
+      background-color: var(--color-9);
+      color: var(--color-contrast);
+
+      &:hover,
+      &:active {
+        background-color: var(--color-10);
+      }
+    }
+
+    &.variant-secondary {
+      box-shadow: 0 var(--space-1) var(--space-3) 0 rgba(0, 0, 0, 0.05);
+      background-color: var(--color-3);
+      color: var(--color-11);
+
+      &:hover {
+        background-color: var(--color-4);
+      }
+
+      &:active {
+        background-color: var(--color-5);
+      }
+    }
+
+    &.variant-tertiary {
+      box-shadow: 0 var(--space-1) var(--space-3) 0 rgba(0, 0, 0, 0.05);
+      background-color: transparent;
+      color: var(--color-11);
+
+      &:hover {
+        background-color: var(--color-3);
+      }
+
+      &:active {
+        background-color: var(--color-4);
+      }
+    }
+  }
+</style>

package/src/components/Card.astro

@@ -0,0 +1,212 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+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 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'
+
+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'
+  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
+  button?: ComponentProps<typeof Button<'a'>>
+  buttons?: ComponentProps<typeof Button<'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 {
+  href,
+  as = href ? 'a' : 'div',
+  space = 'auto',
+  frame = 'panel',
+  radius = 'auto',
+  align = 'start',
+  variant,
+  level = 4,
+  position,
+  label,
+  heading,
+  title,
+  tagline,
+  text,
+  html,
+  description,
+  list,
+  buttons,
+  ratio,
+  image,
+  rating,
+  button,
+  price,
+  icon,
+  avatar,
+  mask,
+  avatars,
+  ...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'
+}
+---
+
+<Root
+  class:list="card"
+  ratio={position === 'background' ? ratio : undefined}
+  structure="column"
+  {align}
+  {href}
+  {radius}
+  {space}
+  {frame}
+  {as}
+  {...rest}
+>
+  <Image
+    {position}
+    {mask}
+    ratio={position === 'background' ? undefined : ratio}
+    src={image}
+  />
+  <Icon name={icon} />
+  <Rating
+    color="brand"
+    {...typeof rating === 'number' ? { value: rating } : rating}
+  />
+  <Tagline
+    color="base"
+    html={tagline}
+  />
+  <Spread>
+    <Heading
+      color="base"
+      html={heading ?? title}
+      {level}
+    />
+    <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 />
+</Root>
+
+<style is:global lang="scss">
+  .card {
+    --inset-top: var(--space-5);
+    --inset-left: var(--space-5);
+    --inset-right: var(--space-5);
+    --inset-bottom: var(--space-5);
+
+    position: relative;
+    text-decoration: none;
+
+    &[href] {
+      cursor: pointer;
+
+      > .root.image {
+        transition: var(--transition);
+      }
+
+      &:hover {
+        > .root.image {
+          opacity: 0.8;
+        }
+      }
+    }
+
+    &.ratio-landscape {
+      aspect-ratio: 4/3;
+    }
+
+    &.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);
+      background-color: var(--color-2);
+      padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
+        var(--inset-left);
+      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);
+    }
+  }
+</style>