fulldev-ui 0.4.29 → 0.5.0-beta.1

package/src/layouts/PageLayout.astro

@@ -1,32 +1,15 @@
 ---
-import type { CollectionEntry } from 'astro:content'
-import Block from 'fulldev-ui/components/Block.astro'
-import Blocks from 'fulldev-ui/components/Blocks.astro'
-import Prose from 'fulldev-ui/components/experimental/Prose.astro'
-import Section from 'fulldev-ui/components/Section.astro'
+import type { ComponentProps } from 'astro/types'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
 
-type Props = CollectionEntry<'pages'>
+type Props = ComponentProps<typeof Layout>
 
-const { data, render } = Astro.props
-const { hero, section, sections, block, blocks } = data
-const { Content } = await render()
+const { ...rest } = Astro.props
 ---
 
-<Layout {...Astro.props}>
-  <Block
-    _bookshop_name="Hero"
-    {...data}
-    {...hero}
-  />
-  <Block {...section} />
-  <Block {...block} />
-  <Section style={{ '--screen': '768px' }}>
-    <Prose id="prose">
-      <Content />
-    </Prose>
-  </Section>
-  <Blocks {...sections} />
-  <Blocks {...blocks} />
+<Layout
+  class:list="page-layout"
+  {...rest}
+>
   <slot />
 </Layout>

package/src/layouts/PostLayout.astro

@@ -1,32 +1,21 @@
 ---
-import type { CollectionEntry } from 'astro:content'
+import type { ComponentProps } from 'astro/types'
+import Article from 'fulldev-ui/blocks/Article.astro'
 import Intro from 'fulldev-ui/blocks/Intro.astro'
-import Blocks from 'fulldev-ui/components/Blocks.astro'
-import Prose from 'fulldev-ui/components/experimental/Prose.astro'
-import Section from 'fulldev-ui/components/Section.astro'
+import Sections from 'fulldev-ui/components/sections.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
 
-type Props = CollectionEntry<'pages'>
+type Props = ComponentProps<typeof Layout>
 
-const { data, render } = Astro.props
-const { section, sections, blocks } = data
-const { Content } = await render()
+const { render, sections, ...rest } = Astro.props
 ---
 
 <Layout {...Astro.props}>
   <Intro
-    _bookshop_name="Intro"
-    style={{ '--screen': '768px' }}
     align="start"
-    {...section}
-    {...data}
+    {...rest}
   />
-  <Section>
-    <Prose id="prose">
-      <Content />
-    </Prose>
-  </Section>
-  <Blocks {...sections} />
-  <Blocks {...blocks} />
+  <Article />
+  <Sections {sections} />
   <slot />
 </Layout>

package/src/layouts/ProductLayout.astro

@@ -1,31 +1,18 @@
 ---
-import type { CollectionEntry } from 'astro:content'
-import Block from 'fulldev-ui/components/Block.astro'
-import Blocks from 'fulldev-ui/components/Blocks.astro'
-import Prose from 'fulldev-ui/components/experimental/Prose.astro'
-import Section from 'fulldev-ui/components/Section.astro'
+import type { ComponentProps } from 'astro/types'
+import Article from 'fulldev-ui/blocks/Article.astro'
+import Product from 'fulldev-ui/blocks/Product.astro'
+import Sections from 'fulldev-ui/components/sections.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
 
-type Props = CollectionEntry<'pages'>
+type Props = ComponentProps<typeof Layout>
 
-const { data, render } = Astro.props
-const { section, sections, block, blocks } = data
-const { Content } = await render()
+const { render, sections, ...rest } = Astro.props
 ---
 
 <Layout {...Astro.props}>
-  <Block
-    _bookshop_name="ProductSection"
-    {...data}
-  />
-  <Block {...section} />
-  <Block {...block} />
-  <Section style={{ '--screen': '768px' }}>
-    <Prose id="prose">
-      <Content />
-    </Prose>
-  </Section>
-  <Blocks {...sections} />
-  <Blocks {...blocks} />
+  <Product {...rest} />
+  <Article />
+  <Sections {sections} />
   <slot />
 </Layout>

package/src/loaders/imageLoader.ts

@@ -0,0 +1,26 @@
+export default async () => {
+  const files = import.meta.glob('/src/images/**/*.{webp,png,jpg,jpeg,svg}', {
+    eager: true,
+  })
+  const entries = import.meta.glob('/src/images/**/*.{yml,yaml,json}', {
+    eager: true,
+  })
+
+  const allImages = Object.entries(files).map(([src, file]) => {
+    const id = src.split('/images/').pop()
+    const matchPath = Object.keys(entries).find(
+      (entry) => entry.split('.').shift() === src
+    ) as any
+    const matchFile = entries[matchPath]
+    const matchData = matchFile ? (matchFile as any).default : {}
+    const fileData = file ? (file as any).default : {}
+    return {
+      id,
+      ...fileData,
+      src,
+      ...matchData,
+    }
+  })
+
+  return allImages as any
+}

package/src/pages/[...page].astro

@@ -1,8 +1,6 @@
 ---
 import { getCollection } from 'astro:content'
-import PageLayout from 'fulldev-ui/layouts/PageLayout.astro'
-import { mapKeys } from 'radash'
-import { mergeEntries } from '../utils/mergeEntries'
+import Layout from 'fulldev-ui/layouts/Layout.astro'
 
 export async function getStaticPaths() {
   const pages = await getCollection('pages')
@@ -14,27 +12,33 @@ export async function getStaticPaths() {
   }))
 }
 
-const { data, slug, ...rest } = Astro.props
+const { data, ...rest } = Astro.props
 
-const merged = (await mergeEntries({ data, slug })) as any
+const { component, ...restData } = data
 
-const packageLayouts = import.meta.glob('../layouts/**/*.astro')
-const userLayouts = import.meta.glob('/src/layouts/**/*.astro')
-
-const mapBlockKeys = (blocks: any) =>
-  mapKeys(blocks, (key: any) => key.split('/').pop().split('.').shift())
-
-const components = {
-  ...mapBlockKeys(packageLayouts),
-  ...mapBlockKeys(userLayouts),
+const allComponents = {
+  ...import.meta.glob('/src/**/*.astro'),
+  ...import.meta.glob('../../**/*.astro'),
 }
 
-const found = components[(merged.data._layout ?? 'PageLayout') as string] as any
-const functioncomp = found && (await found())
-const Layout = functioncomp?.default ?? PageLayout
+const componentPath = Object.keys(allComponents).find(
+  (path) => path.split('/').pop()?.split('.')[0] === component
+)
+
+const Component =
+  componentPath && (await (allComponents[componentPath] as any)()).default
 ---
 
-<Layout
-  data={merged.data}
-  {...rest}
-/>
+{
+  Component ? (
+    <Component
+      {...restData}
+      {...rest}
+    />
+  ) : (
+    <Layout
+      {...(data as any)}
+      {...rest}
+    />
+  )
+}

package/src/schemas/components/avatar.ts

@@ -0,0 +1,3 @@
+import { z } from 'astro:content'
+
+export default z.string()

package/src/schemas/components/avatars.ts

@@ -0,0 +1,4 @@
+import { z } from 'astro:content'
+import avatar from './avatar'
+
+export default z.array(avatar)

package/src/schemas/components/badge.ts

@@ -0,0 +1,13 @@
+import { z } from 'astro:content'
+import pathSchema from '../utils/pathSchema'
+
+export default pathSchema('pages').or(
+  z
+    .object({
+      text: z.string(),
+      href: z.string(),
+      icon: z.string(),
+    })
+    .partial()
+    .passthrough()
+)

package/src/schemas/components/button.ts

@@ -0,0 +1,16 @@
+import { z } from 'astro:content'
+import pathSchema from '../utils/pathSchema'
+
+export default z.union([pathSchema('pages'), z.object({}).passthrough()]).pipe(
+  z
+    .object({
+      slug: z
+        .string()
+        .refine(async (data) => await pathSchema('pages').parseAsync(data)),
+      text: z.string(),
+      href: z.string(),
+      icon: z.string(),
+    })
+    .partial()
+    .passthrough()
+)

package/src/schemas/components/buttons.ts

@@ -0,0 +1,4 @@
+import { z } from 'astro:content'
+import button from './button'
+
+export default z.array(button)

package/src/schemas/components/card.ts

@@ -0,0 +1,25 @@
+import button from './button'
+import buttons from './buttons'
+import icon from './icon'
+import image from './image'
+import images from './images'
+
+import { z } from 'astro:content'
+import pathSchema from '../utils/pathSchema'
+import writeup from './writeup'
+
+export default z.union([pathSchema('pages'), z.object({}).passthrough()]).pipe(
+  writeup
+    .extend({
+      slug: z
+        .string()
+        .refine(async (data) => await pathSchema('pages').parseAsync(data)),
+      image,
+      images,
+      buttons,
+      button,
+      icon,
+    })
+    .partial()
+    .passthrough()
+)

package/src/schemas/components/cards.ts

@@ -0,0 +1,4 @@
+import { z } from 'astro:content'
+import card from './card'
+
+export default z.array(card)

package/src/schemas/components/channel.ts

@@ -0,0 +1,13 @@
+import { z } from 'astro:content'
+import heading from './heading'
+import icon from './icon'
+import text from './text'
+
+export default z
+  .object({
+    heading,
+    text,
+    icon,
+    href: z.string(),
+  })
+  .partial()

package/src/schemas/components/channels.ts

@@ -0,0 +1,4 @@
+import { z } from 'astro:content'
+import channel from './channel'
+
+export default z.array(channel)

package/src/schemas/components/footer.ts

@@ -0,0 +1,24 @@
+import { z } from 'astro:content'
+import buttons from './buttons'
+import channels from './channels'
+import heading from './heading'
+import logo from './logo'
+import socials from './socials'
+import text from './text'
+
+export default z
+  .object({
+    logo,
+    text,
+    socials,
+    channels,
+    columns: z.array(
+      z
+        .object({
+          heading,
+          buttons,
+        })
+        .partial()
+    ),
+  })
+  .partial()

package/src/schemas/components/header.ts

@@ -0,0 +1,10 @@
+import { z } from 'astro:content'
+import buttons from './buttons'
+import logo from './logo'
+
+export default z
+  .object({
+    logo,
+    buttons,
+  })
+  .partial()

package/src/schemas/components/heading.ts

@@ -0,0 +1,3 @@
+import { z } from 'astro:content'
+
+export default z.string()

package/src/schemas/components/icon.ts

@@ -0,0 +1,3 @@
+import { z } from 'astro:content'
+
+export default z.string()

package/src/schemas/components/image.ts

@@ -0,0 +1,18 @@
+import { reference, z } from 'astro:content'
+
+export default z.union([reference('images'), z.object({}).passthrough()]).pipe(
+  z
+    .object({
+      id: z
+        .string()
+        .refine(async (data) => await reference('images').parseAsync(data)),
+      src: z.string(),
+      alt: z.string(),
+      width: z.number(),
+      height: z.number(),
+    })
+    .partial()
+    .passthrough()
+)
+
+// export default z.any()

package/src/schemas/components/images.ts

@@ -0,0 +1,4 @@
+import { z } from 'astro:content'
+import image from './image'
+
+export default z.array(image)

package/src/schemas/components/list.ts

@@ -0,0 +1,3 @@
+import { z } from 'astro:content'
+
+export default z.array(z.string())

package/src/schemas/components/logo.ts

@@ -0,0 +1,3 @@
+import image from './image'
+
+export default image

package/src/schemas/components/price.ts

@@ -0,0 +1,3 @@
+import { z } from 'astro:content'
+
+export default z.number()

package/src/schemas/components/rating.ts

@@ -0,0 +1,15 @@
+import { z } from 'astro:content'
+import avatar from './avatar'
+import avatars from './avatars'
+import text from './text'
+
+export default z.number().or(
+  z
+    .object({
+      value: z.number(),
+      avatar,
+      avatars,
+      text,
+    })
+    .partial()
+)

package/src/schemas/components/section.ts

@@ -0,0 +1,15 @@
+import component from '../utils/component'
+import buttons from './buttons'
+import cards from './cards'
+import image from './image'
+import writeup from './writeup'
+
+export default writeup
+  .extend({
+    component,
+    image,
+    buttons,
+    cards,
+  })
+  .partial()
+  .passthrough()

package/src/schemas/components/sections.ts

@@ -0,0 +1,3 @@
+import section from './section'
+
+export default section.array()

package/src/schemas/components/social.ts

@@ -0,0 +1,3 @@
+import { z } from 'astro:content'
+
+export default z.string()

package/src/schemas/components/socials.ts

@@ -0,0 +1,4 @@
+import { z } from 'astro:content'
+import social from './social'
+
+export default z.array(social)

package/src/schemas/components/tagline.ts

@@ -0,0 +1,3 @@
+import { z } from 'astro:content'
+
+export default z.string()

package/src/schemas/components/text.ts

@@ -0,0 +1,3 @@
+import { z } from 'astro:content'
+
+export default z.string()

package/src/schemas/components/writeup.ts

@@ -0,0 +1,20 @@
+import { z } from 'astro:content'
+import badge from './badge'
+import heading from './heading'
+import list from './list'
+import price from './price'
+import rating from './rating'
+import tagline from './tagline'
+import text from './text'
+
+export default z
+  .object({
+    rating,
+    badge,
+    tagline,
+    heading,
+    text,
+    list,
+    price,
+  })
+  .partial()

package/src/schemas/imageSchema.ts

@@ -0,0 +1,12 @@
+import { z } from 'astro:content'
+
+export default z
+  .object({
+    id: z.string(),
+    src: z.string(),
+    alt: z.string().default(''),
+    width: z.number(),
+    height: z.number(),
+    format: z.string(),
+  })
+  .passthrough()

package/src/schemas/pageSchema.ts

@@ -0,0 +1,63 @@
+import { getEntries, getEntry, z } from 'astro:content'
+import { assign } from 'radash'
+import image from './components/image'
+import sections from './components/sections'
+import categories from './utils/categories'
+import component from './utils/component'
+import navigation from './utils/navigation'
+import pathSchema from './utils/pathSchema'
+
+const i18n = z
+  .object({
+    i18n: pathSchema('pages').optional(),
+  })
+  .passthrough()
+  .transform(async ({ i18n, ...rest }) => {
+    if (!i18n) return rest
+    const entry = await getEntry(i18n)
+    const merged = assign(entry.data, rest) as typeof rest
+    return merged as typeof rest
+  })
+
+const presets = z
+  .object({
+    presets: z.array(pathSchema('presets')).optional(),
+  })
+  .passthrough()
+  .transform(async ({ presets, ...rest }) => {
+    if (!presets) return rest
+    const entries = await getEntries(presets)
+    let mergedData = {}
+    entries.forEach(
+      (preset: any) => (mergedData = assign(mergedData, preset.data))
+    )
+    mergedData = assign(mergedData, rest)
+    return mergedData as typeof rest
+  })
+
+export default i18n.pipe(presets).pipe(
+  z
+    .object({
+      component,
+      categories,
+      theme: z.enum(['light', 'dark']),
+      lang: z.string(),
+      seo: z
+        .object({
+          title: z.string().optional(),
+          description: z.string().optional(),
+        })
+        .optional(),
+      title: z.string(),
+      description: z.string().optional(),
+      image,
+      sections,
+      header: z.any(),
+      footer: z.any(),
+      navigation,
+      toc: z.any(),
+      sidebar: z.any(),
+    })
+    .partial()
+    .passthrough()
+)

package/src/schemas/presetSchema.ts

@@ -0,0 +1,29 @@
+import { z } from 'astro:content'
+import image from './components/image'
+import sections from './components/sections'
+import categories from './utils/categories'
+import component from './utils/component'
+
+export default z
+  .object({
+    component,
+    categories,
+    theme: z.enum(['light', 'dark']),
+    lang: z.string(),
+    seo: z
+      .object({
+        title: z.string().optional(),
+        description: z.string().optional(),
+      })
+      .optional(),
+    title: z.string(),
+    description: z.string().optional(),
+    image,
+    sections,
+    header: z.any(),
+    footer: z.any(),
+    navigation: z.any(),
+    toc: z.any(),
+    sidebar: z.any(),
+  })
+  .partial()

package/src/schemas/utils/categories.ts

@@ -0,0 +1,3 @@
+import pathSchema from './pathSchema'
+
+export default pathSchema('pages').array().optional()

package/src/schemas/utils/component.ts

@@ -0,0 +1,17 @@
+import { z } from 'astro:content'
+import { mapKeys } from 'radash'
+
+export default z.string().refine(
+  (value) => {
+    const packageComponents = import.meta.glob('../../**/*.astro')
+    const userComponents = import.meta.glob('/src/**/*.astro')
+    const mapBlockKeys = (blocks: any) =>
+      mapKeys(blocks, (key: any) => key.split('/').pop().split('.').shift())
+    const mergedComponents = {
+      ...mapBlockKeys(packageComponents),
+      ...mapBlockKeys(userComponents),
+    }
+    return mergedComponents[value] !== undefined
+  },
+  (value) => ({ message: `component: the component "${value}" does not exist` })
+)

package/src/schemas/utils/navigation.ts

@@ -0,0 +1,53 @@
+// import { z } from 'astro:content'
+// import button from '../components/button'
+// import buttons from '../components/buttons'
+// import heading from '../components/heading'
+// import logo from '../components/logo'
+
+// export default z.object({
+//   logo,
+//   buttons: z.array(
+//     button.or(
+//       z.object({
+//         heading,
+//         buttons,
+//       })
+//     )
+//   ),
+// })
+
+import { z } from 'astro:content'
+import pathSchema from '../utils/pathSchema'
+
+const button = pathSchema('pages').or(
+  z
+    .object({
+      text: z.string(),
+      href: z.string(),
+      heading: z.never(),
+      buttons: z.never(),
+    })
+    .partial()
+    .passthrough()
+)
+
+const group = z
+  .object({
+    heading: z.string(),
+    buttons: z.array(button),
+    text: z.never(),
+    href: z.never(),
+  })
+  .partial()
+  .passthrough()
+
+export default z
+  .object({
+    logo: z.string(),
+    search: z.boolean(),
+    sidebar: z.boolean(),
+    toc: z.boolean(),
+    buttons: z.array(button.or(group)),
+  })
+  .partial()
+  .passthrough()