fulldev-ui 0.4.28 → 0.5.0-beta.0

package/src/components/Block.astro

@@ -1,157 +0,0 @@
----
-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

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

package/src/components/Box.astro

@@ -1,63 +0,0 @@
----
-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 Stack from './Stack.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'
-    | 'stack'
-}
-
-const structuresMap = {
-  bento: Bento,
-  carousel: Carousel,
-  column: Column,
-  grid: Grid,
-  masonry: Masonry,
-  row: Row,
-  split: Split,
-  spread: Spread,
-  wrap: Wrap,
-  stack: Stack,
-}
-
-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/Carousel.astro

@@ -1,54 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
-  color?: 'base' | 'brand'
-  size?: 'sm' | 'md' | 'lg'
-  position?: 'inset'
-}
-
-const { ...rest } = Astro.props
----
-
-<Root
-  class:list="carousel"
-  {...rest}
->
-  <slot />
-</Root>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .carousel {
-      --column-width: calc(21 * var(--space-4));
-
-      display: flex;
-      position: relative;
-      position: relative;
-      flex-direction: row;
-      align-items: flex-start;
-      gap: var(--space-4);
-      padding-bottom: var(--space-4);
-      width: 100%;
-      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;
-      }
-
-      &.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));
-      }
-    }
-  }
-</style>

package/src/components/Column.astro

@@ -1,73 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
-  color?: 'base' | 'brand'
-  size?: 'sm' | 'md' | 'lg'
-  align?: 'start' | 'center' | 'end'
-  space?: 'none' | 'auto'
-}
-
-const { space = 'auto', align = 'start', ...rest } = Astro.props
----
-
-<Root
-  class:list="column"
-  {align}
-  {space}
-  {...rest}
->
-  <slot />
-</Root>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .column {
-      display: flex;
-      position: relative;
-      flex-direction: column;
-
-      &.align-start {
-        align-items: flex-start;
-        text-align: left;
-      }
-
-      &.align-center {
-        align-items: center;
-        text-align: center;
-
-        & > *:not(.align-center) > *:not(.align-center) {
-          text-align: left;
-        }
-      }
-
-      &.align-end {
-        align-items: flex-end;
-      }
-
-      &.justify-start {
-        justify-content: center;
-      }
-
-      &.justify-center {
-        justify-content: center;
-      }
-
-      &.justify-end {
-        justify-content: flex-end;
-      }
-
-      &.space-auto {
-        > * + * {
-          margin-top: var(--space-auto);
-        }
-
-        > * + .carousel {
-          margin-top: 0;
-          padding-top: var(--space-auto);
-        }
-      }
-    }
-  }
-</style>

package/src/components/Grid.astro

@@ -1,32 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
-  color?: 'base' | 'brand'
-  size?: 'sm' | 'md' | 'lg'
-}
-
-const { ...rest } = Astro.props
----
-
-<Root
-  class:list="grid"
-  {...rest}
->
-  <slot />
-</Root>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .grid {
-      --column-width: calc(21 * var(--space-4));
-
-      display: grid;
-      position: relative;
-      grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));
-      gap: var(--space-4);
-      width: 100%;
-    }
-  }
-</style>

package/src/components/Masonry.astro

@@ -1,42 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
-  color?: 'base' | 'brand'
-  size?: 'sm' | 'md' | 'lg'
-}
-
-const { ...rest } = Astro.props
----
-
-<Root
-  class:list="masonry"
-  {...rest}
->
-  <slot />
-</Root>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .masonry {
-      --column-width: calc(21 * var(--space-4));
-      --gap: var(--space-4);
-
-      position: relative;
-      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);
-      }
-    }
-  }
-</style>

package/src/components/Root.astro

@@ -1,94 +0,0 @@
----
-import type { HTMLTag } from 'astro/types'
-
-type Props<As extends HTMLTag> = {
-  as?: As
-  slot?: any
-  if?: 'content' | any
-  [key: string | number | symbol]: any
-}
-
-const {
-  as: As = 'div',
-  if: ifProp = 'content',
-  space,
-  theme,
-  variant,
-  underline,
-  density,
-  size,
-  align,
-  justify,
-  color,
-  position,
-  frame,
-  ratio,
-  contrast,
-  structure,
-  text,
-  html,
-  radius,
-  level,
-  mask,
-  reverse,
-  lead,
-  ...rest
-} = Astro.props
-
-const slot = await Astro.slots.render('default')
-const hasContent = (str?: string) =>
-  typeof str === 'string' && str.trim().length > 0
-const render =
-  ifProp == 'content'
-    ? hasContent(slot) || hasContent(html) || hasContent(text)
-    : ifProp
----
-
-{
-  render && (
-    <As
-      class:list={[
-        'root',
-        structure,
-        {
-          lead,
-          contrast,
-          [`theme-${theme}`]: theme,
-          [`level-${level}`]: level,
-          [`variant-${variant}`]: variant,
-          [`structure-${structure}`]: structure,
-          [`size-${size}`]: size,
-          [`align-${align}`]: align,
-          [`justify-${justify}`]: justify,
-          [`position-${position}`]: position,
-          [`frame-${frame}`]: frame,
-          [`ratio-${ratio}`]: ratio,
-          [`color-${color}`]: color,
-          [`underline-${underline}`]: underline,
-          [`radius-${radius}`]: radius,
-          [`mask-${mask}`]: mask,
-          [`space-${space}`]: space,
-          [`reverse-${reverse}`]: reverse,
-        },
-      ]}
-      {...rest}
-    >
-      <Fragment set:html={slot} />
-    </As>
-  )
-}
-
-<style is:global lang="scss">
-  // @import '@unocss/reset/tailwind.css' layer(base);
-  @import '../css/color.css';
-  @import '../css/styles.css';
-  @import '../css/size.css';
-  @import '../css/space.css';
-
-  @layer fulldev {
-    .root {
-      z-index: 0;
-      box-sizing: border-box;
-    }
-  }
-</style>

package/src/components/Row.astro

@@ -1,49 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
-  color?: 'base' | 'brand'
-  size?: 'sm' | 'md' | 'lg'
-  align?: 'start' | 'center' | 'end'
-  space?: 'none' | 'auto'
-}
-
-const { space = 'auto', align = 'center', ...rest } = Astro.props
----
-
-<Root
-  class:list="row"
-  {align}
-  {space}
-  {...rest}
->
-  <slot />
-</Root>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .row {
-      display: flex;
-
-      &.align-start {
-        align-items: flex-start;
-        text-align: left;
-      }
-
-      &.align-center {
-        align-items: center;
-      }
-
-      &.align-end {
-        align-items: flex-end;
-      }
-
-      &.space-auto {
-        > * + * {
-          margin-left: var(--space-auto);
-        }
-      }
-    }
-  }
-</style>

package/src/components/Split.astro

@@ -1,59 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
-  color?: 'base' | 'brand'
-  size?: 'sm' | 'md' | 'lg'
-  align?: 'start' | 'center' | 'end'
-  space?: 'none' | 'auto'
-}
-
-const { space = 'auto', align = 'center', ...rest } = Astro.props
----
-
-<Root
-  class:list="split"
-  {align}
-  {space}
-  {...rest}
->
-  <slot />
-</Root>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .split {
-      display: grid;
-      grid-template-columns: 1fr;
-      column-gap: var(--space-6);
-      width: 100%;
-
-      @media (max-width: 1023.9999px) {
-        &.space-auto {
-          > * + * {
-            margin-top: var(--space-auto);
-          }
-        }
-      }
-
-      @media (min-width: 1024px) {
-        grid-auto-columns: 1fr;
-        grid-auto-flow: column;
-      }
-
-      &.align-start {
-        align-items: flex-start;
-        text-align: left;
-      }
-
-      &.align-center {
-        align-items: center;
-      }
-
-      &.align-end {
-        align-items: flex-end;
-      }
-    }
-  }
-</style>

package/src/components/Spread.astro

@@ -1,46 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
-  color?: 'base' | 'brand'
-  size?: 'sm' | 'md' | 'lg'
-  align?: 'start' | 'center' | 'end'
-}
-
-const { align = 'center', ...rest } = Astro.props
----
-
-<Root
-  class:list="spread"
-  {align}
-  {...rest}
->
-  <slot />
-</Root>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .spread {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      gap: var(--space-5);
-      width: 100%;
-
-      &.align-start {
-        align-items: flex-start;
-        text-align: left;
-      }
-
-      &.align-center {
-        align-items: center;
-      }
-
-      &.align-end {
-        align-items: flex-end;
-      }
-    }
-  }
-</style>