fulldev-ui 0.6.0-beta.0 → 0.6.0-beta.10

package/src/layouts/Jobs.astro

@@ -0,0 +1,72 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Footer from 'fulldev-ui/blocks/Footer.astro'
+import Header from 'fulldev-ui/blocks/Header.astro'
+import Intro1 from 'fulldev-ui/blocks/Intro1.astro'
+import Jobs1 from 'fulldev-ui/blocks/Jobs1.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Sidebar from 'fulldev-ui/components/Sidebar.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Layout from 'fulldev-ui/structures/Layout.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+
+type Props = ComponentProps<typeof Layout> &
+  PageSchema & {
+    slug: CollectionEntry<'pages'>['slug']
+    render: CollectionEntry<'pages'>['render']
+  }
+
+const { slug, header, sidebar, render, title, description, footer } =
+  Astro.props
+
+const { Content } = await render()
+
+// const children = (
+//   await getCollection('pages', ({ data }) =>
+//     data.parents?.some((p) => p.slug.includes(slug))
+//   )
+// )?.map(({ collection, slug }) => ({ collection, slug }))
+---
+
+<Layout
+  class:list="jobs"
+  {...Astro.props}
+>
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Container class:list="jobs-container">
+    <Sidebar {...sidebar} />
+    <Element
+      class:list="jobs-main"
+      as="main"
+    >
+      <Intro1
+        heading={title}
+        paragraph={description}
+      />
+      <!-- <Jobs1 pages={children} /> -->
+      <Prose>
+        <Content />
+      </Prose>
+    </Element>
+  </Container>
+</Layout>
+<Footer {...footer} />
+
+<style is:global>
+  @layer fulldev {
+    .jobs {
+      .jobs-container {
+        @apply flex !pr-0;
+      }
+
+      .jobs-main {
+        @apply flex w-full flex-col;
+      }
+    }
+  }
+</style>

package/src/layouts/Page.astro

@@ -0,0 +1,84 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Block from 'fulldev-ui/components/Block.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+import Layout from 'fulldev-ui/structures/Layout.astro'
+
+type Props = ComponentProps<typeof Layout> &
+  PageSchema & {
+    render: CollectionEntry<'pages'>['render']
+    headings?: any
+    heading?: string
+    paragraph?: string
+  }
+
+const {
+  heading,
+  title,
+  paragraph,
+  description,
+  banner,
+  sidebar,
+  header,
+  sections,
+  footer,
+  render,
+  navigation,
+  ...rest
+} = Astro.props
+
+const { Content, headings } = await render()
+
+const h1 = headings?.find((heading) => heading.depth === 1)
+const links = headings
+  ?.filter((heading) => heading.depth >= 2 && heading.depth <= 4)
+  .map(({ text, depth, slug }) => ({
+    text,
+    depth,
+    href: `#${slug}`,
+  }))
+---
+
+<Layout
+  class:list="page"
+  {...rest}
+>
+  <Block
+    _block="Banner"
+    {...banner}
+  />
+  <Block
+    _block="Header"
+    {sidebar}
+    {...header}
+  />
+  <Element as="main">
+    <Block
+      depth={1}
+      heading={h1 ? undefined : heading || title}
+      paragraph={h1 ? undefined : paragraph || description}
+      toc={{
+        heading: h1?.text || heading || title,
+        links,
+      }}
+      {sidebar}
+      {...rest}
+    >
+      <Content />
+    </Block>
+    {
+      sections?.map((section, i) => (
+        <Block
+          depth={i === 0 && !rest._block ? 1 : 2}
+          {...section}
+        />
+      ))
+    }
+  </Element>
+  <Block
+    _block="Footer"
+    {...footer}
+  />
+</Layout>

package/src/layouts/Post.astro

@@ -0,0 +1,53 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Content1 from 'fulldev-ui/blocks/Content1.astro'
+import Footer from 'fulldev-ui/blocks/Footer.astro'
+import Header from 'fulldev-ui/blocks/Header.astro'
+import Block from 'fulldev-ui/components/Block.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page'
+import Layout from 'fulldev-ui/structures/Layout.astro'
+
+type Props = ComponentProps<typeof Layout> &
+  PageSchema & {
+    render: CollectionEntry<'pages'>['render']
+  }
+
+const {
+  title,
+  description,
+  list,
+  button,
+  header,
+  sidebar,
+  sections,
+  footer,
+  render,
+} = Astro.props
+
+const { Content, headings } = await render()
+---
+
+<Layout
+  class:list="post"
+  {...Astro.props}
+>
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Element as="main">
+    <Content1
+      heading={title}
+      paragraph={description}
+      {list}
+      {button}
+      {headings}
+    >
+      <Content />
+    </Content1>
+    {sections?.map((section) => <Block {...section} />)}
+  </Element>
+  <Footer {...footer} />
+</Layout>

package/src/layouts/{ProductLayout.astro → Product.astro}

@@ -1,34 +1,33 @@
 ---
+// @ts-nocheck
+import type { ComponentProps } from 'astro/types'
 import { getImage } from 'astro:assets'
-import CartForm from 'fulldev-ui/components/CartForm.astro'
+import type { CollectionEntry } from 'astro:content'
+import { getCollection, getEntry } from 'astro:content'
+import Products1 from 'fulldev-ui/blocks/Products1.astro'
+import CartForm from 'fulldev-ui/components/CartForm.svelte'
 import Element from 'fulldev-ui/components/Element.astro'
 import Gallery from 'fulldev-ui/components/Gallery.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import List from 'fulldev-ui/components/List.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Prose from 'fulldev-ui/components/Prose.astro'
-import Sections from 'fulldev-ui/components/sections.astro'
-import Layout from 'fulldev-ui/layouts/Layout.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page'
+import Layout from 'fulldev-ui/structures/Layout.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: CollectionEntry<'pages'>['render']
+}
 
 const {
-  variant = 1,
-  level = 1,
-  heading,
-  paragraph,
+  render,
   title,
-  list,
   price,
   images,
-  text,
-  subheading,
-  variants,
-  button,
   description,
-  form,
-  uitverkocht,
-  render,
-  sections,
-  banner,
+  soldout,
+  categories,
+  variants,
 } = Astro.props
 
 const slug = Astro.url.pathname.replace(/^\/|\/$/g, '') || 'index'
@@ -38,9 +37,20 @@ const allImages = import.meta.glob<{ default: ImageMetadata }>('/src/images/*')
 const foundImage = allImages[src]
 const gotImage =
   imageId && (await getImage({ src: foundImage ? foundImage() : src }))
+
+const relatedProducts = await getCollection('products', (product) =>
+  product.data.categories?.some((category) =>
+    categories?.map((c) => c.slug).includes(category.slug)
+  )
+)
+
+const baseLayout = await getEntry('layouts', 'base')
 ---
 
-<Layout {...Astro.props}>
+<Layout
+  class:list="product"
+  {...Astro.props}
+>
   <Element
     class:list="product"
     as="section"
@@ -53,27 +63,27 @@ const gotImage =
       <Element class:list="product-segment">
         <Element class:list="product-content">
           <Heading
-            {level}
-            text={heading || title}
+            as="h1"
+            size="3xl"
+            text={title}
           />
-          <Paragraph text={paragraph || description} />
+          <Paragraph text={description} />
         </Element>
-        <CartForm
-          soldout={uitverkocht}
-          image={gotImage?.src}
-          {title}
-          {price}
-          {slug}
-          {variants}
-        />
+        <!-- <CartForm
+          product={Astro.props}
+          client:load
+        /> -->
         <List
           size="sm"
-          items={banner.split('|')}
+          items={baseLayout.data.banner?.split('|')}
         />
       </Element>
     </Element>
   </Element>
-  <Sections {sections} />
+  <Products1
+    heading="Gerelateerde producten"
+    products={[...relatedProducts].sort(() => Math.random() - 0.5).slice(0, 6)}
+  />
   <slot />
 </Layout>
 

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

@@ -1,36 +1,49 @@
 ---
-import { getCollection } from 'astro:content'
-import PageLayout from 'fulldev-ui/layouts/PageLayout.astro'
+import { getCollection, getEntry } from 'astro:content'
+import { getHref } from 'fulldev-ui/utils/getHref.ts'
+import { dash, pascal } from 'radash'
+import { mergeDeep } from 'remeda'
 
 export async function getStaticPaths() {
-  const pages = await getCollection('pages')
-  return pages.map((page) => ({
+  const collection = await getCollection('pages')
+  return collection.map((entry) => ({
     params: {
-      page: page.slug === 'index' ? undefined : page.slug,
+      page: getHref(entry.slug),
     },
-    props: page,
+    props: entry,
   }))
 }
 
-const { data, ...rest } = Astro.props
-const { component, ...restData } = data
+const layoutName = Astro.props.data._layout ?? 'Page'
+const layoutComponentName = pascal(layoutName)
 
-const layouts = {
+const layoutsComponents = {
   ...import.meta.glob('/src/layouts/**/*.astro'),
   ...import.meta.glob('../layouts/**/*.astro'),
 }
 
-const componentPath = Object.keys(layouts).find((path) => {
-  const strip = (str?: string) => str?.split('/').pop()?.split('.')[0]
-  return strip(path) === strip(component)
-})
+const layoutComponentPath = Object.keys(layoutsComponents).find(
+  (path) => path.split('/').pop()?.split('.')[0] === layoutComponentName
+)
 
-const Component =
-  (componentPath && (await (layouts[componentPath] as any)()).default) ??
-  PageLayout
+const LayoutComponent =
+  layoutComponentPath &&
+  (await (layoutsComponents[layoutComponentPath] as any)()).default
+
+const layoutEntryName = dash(layoutName)
+const layoutEntry = await getEntry('layouts', layoutEntryName)
+const baseLayout = await getEntry('layouts', 'base')
+const mergedLayouts = mergeDeep(baseLayout || {}, layoutEntry || {})
+const merged = mergeDeep(mergedLayouts, Astro.props)
+
+const { data, ...rest } = merged
 ---
 
-<Component
-  {...restData}
-  {...rest}
-/>
+{
+  LayoutComponent && (
+    <LayoutComponent
+      {...data}
+      {...rest}
+    />
+  )
+}

package/src/schemas/badge.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'astro/types'
+import { z } from 'astro:content'
+import type Badge from 'fulldev-ui/components/Badge.astro'
+
+export const badgeSchema = z
+  .object({
+    icon: z.string().optional(),
+    text: z.string().optional(),
+    href: z.string().optional(),
+    target: z.literal('_blank').optional(),
+    size: z.enum(['sm', 'md', 'lg']).optional(),
+    variant: z.enum(['primary', 'secondary', 'outline']).optional(),
+  })
+  .strict() satisfies z.ZodType<ComponentProps<typeof Badge>>

package/src/schemas/block.ts

@@ -0,0 +1,59 @@
+import { z } from 'astro:content'
+import { badgeSchema } from 'fulldev-ui/schemas/badge.ts'
+import { buttonSchema } from 'fulldev-ui/schemas/button.ts'
+import { channelSchema } from 'fulldev-ui/schemas/channel.ts'
+import { imageSchema } from 'fulldev-ui/schemas/image.ts'
+import { linkSchema } from 'fulldev-ui/schemas/link.ts'
+import { logoSchema } from 'fulldev-ui/schemas/logo.ts'
+import { menuSchema } from 'fulldev-ui/schemas/menu.ts'
+import { pathSchema } from 'fulldev-ui/schemas/path.ts'
+
+export const blockSchema = z
+  .object({
+    _block: z.string().optional(),
+    dark: z.boolean().optional(),
+    themer: z.boolean().optional(),
+    search: z.boolean().optional(),
+    cart: z.boolean().optional(),
+    text: z.string().optional(),
+    content: z.string().optional(),
+    tagline: z.string().optional(),
+    heading: z.string().optional(),
+    paragraph: z.string().optional(),
+    list: z.string().array().optional(),
+    socials: z.string().array().optional(),
+    logo: logoSchema.optional(),
+    link: linkSchema.optional(),
+    links: linkSchema.array().optional(),
+    menus: menuSchema.array().optional(),
+    sidebar: menuSchema.array().optional(),
+    badge: badgeSchema.optional(),
+    badges: badgeSchema.array().optional(),
+    button: buttonSchema.optional(),
+    buttons: buttonSchema.array().optional(),
+    image: imageSchema.optional(),
+    images: imageSchema.array().optional(),
+    channels: channelSchema.array().optional(),
+    pages: pathSchema('pages').array().optional(),
+    products: pathSchema('pages').array().optional(),
+    cards: z
+      .object({
+        icon: z.string().optional(),
+        rating: z.number().optional(),
+        tagline: z.string().optional(),
+        heading: z.string().optional(),
+        paragraph: z.string().optional(),
+        list: z.string().array().optional(),
+        badge: badgeSchema.optional(),
+        badges: badgeSchema.array().optional(),
+        button: buttonSchema.optional(),
+        buttons: buttonSchema.array().optional(),
+        image: imageSchema.optional(),
+      })
+      .strict()
+      .array()
+      .optional(),
+  })
+  .strict()
+
+export type BlockSchema = z.infer<typeof blockSchema>

package/src/schemas/button.ts

@@ -0,0 +1,15 @@
+import { z } from 'astro:content'
+
+export const buttonSchema = z
+  .object({
+    icon: z.string().optional(),
+    text: z.string().optional(),
+    href: z.string().optional(),
+    target: z.literal('_blank').optional(),
+    size: z.enum(['sm', 'md', 'lg']).optional(),
+    reverse: z.boolean().optional(),
+    variant: z.enum(['primary', 'secondary', 'outline', 'ghost']).optional(),
+  })
+  .strict()
+
+export type ButtonSchema = z.infer<typeof buttonSchema>

package/src/schemas/channel.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'astro/types'
+import { z } from 'astro:content'
+import Channel from 'fulldev-ui/components/Channel.astro'
+
+export const channelSchema = z
+  .object({
+    icon: z.string().optional(),
+    heading: z.string().optional(),
+    text: z.string().optional(),
+    href: z.string().optional(),
+    size: z.enum(['sm', 'md', 'lg']).optional(),
+    variant: z.enum(['secondary', 'outline']).optional(),
+  })
+  .strict() satisfies z.ZodType<ComponentProps<typeof Channel>>

package/src/schemas/checkbox.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'astro/types'
+import { z } from 'astro:content'
+import type Checkbox from 'fulldev-ui/components/Checkbox.astro'
+
+export const checkboxSchema = z
+  .object({
+    name: z.string().optional(),
+    label: z.string().optional(),
+    id: z.string().optional(),
+    value: z.string().optional(),
+    size: z.enum(['sm', 'md', 'lg']).optional(),
+  })
+  .strict() satisfies z.ZodType<ComponentProps<typeof Checkbox>>

package/src/schemas/footer.ts

@@ -0,0 +1,17 @@
+import { z } from 'astro:content'
+import { channelSchema } from 'fulldev-ui/schemas/channel.ts'
+import { logoSchema } from 'fulldev-ui/schemas/logo.ts'
+import { menuSchema } from 'fulldev-ui/schemas/menu.ts'
+
+export const footerSchema = z
+  .object({
+    logo: logoSchema.optional(),
+    heading: z.string().optional(),
+    paragraph: z.string().optional(),
+    socials: z.string().url().array().optional(),
+    channels: channelSchema.array().optional(),
+    menus: menuSchema.array().optional(),
+  })
+  .strict()
+
+export type FooterSchema = z.infer<typeof footerSchema>

package/src/schemas/head.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'astro/types'
+import { z } from 'astro:content'
+import type Head from 'fulldev-ui/components/Head.astro'
+import { imageSchema } from 'fulldev-ui/schemas/image.ts'
+
+export const headSchema = z
+  .object({
+    title: z.string().optional(),
+    description: z.string().optional(),
+    image: imageSchema.optional(),
+    theme: z.enum(['light', 'dark', 'system']).optional(),
+    favicon: z.string().optional(),
+    company: z.string().optional(),
+    scripts: z.string().array().optional(),
+    code: z.string().optional(),
+  })
+  .strict() satisfies z.ZodType<ComponentProps<typeof Head>>

package/src/schemas/header.ts

@@ -0,0 +1,21 @@
+import { z } from 'astro:content'
+import { buttonSchema } from 'fulldev-ui/schemas/button.ts'
+import { linkSchema } from 'fulldev-ui/schemas/link.ts'
+import { logoSchema } from 'fulldev-ui/schemas/logo.ts'
+import { menuSchema } from 'fulldev-ui/schemas/menu.ts'
+
+export const headerSchema = z
+  .object({
+    logo: logoSchema.optional(),
+    heading: z.string().optional(),
+    links: linkSchema.array().optional(),
+    socials: z.string().array().optional(),
+    buttons: buttonSchema.array().optional(),
+    menus: menuSchema.array().optional(),
+    themer: z.boolean().optional(),
+    cart: z.boolean().optional(),
+    search: z.boolean().optional(),
+  })
+  .strict()
+
+export type HeaderSchema = z.infer<typeof headerSchema>

package/src/schemas/image.ts

@@ -0,0 +1,53 @@
+import type { ComponentProps } from 'astro/types'
+import { z } from 'astro:content'
+import type Image from 'fulldev-ui/components/Image.astro'
+
+// const imagePath = z.preprocess((data: unknown) => {
+//   if (typeof data === 'string') {
+//     return data.split('/').pop()
+//   }
+//   return data
+// }, reference('images'))
+
+// export const imageSchema = z
+//   .union([imagePath, 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()
+//   )
+//   .optional()
+
+// export const imageSchema = z
+//   .object({
+//     src: z.string().optional(),
+//     alt: z.string().optional(),
+//     width: z.number().optional(),
+//     height: z.number().optional(),
+//   })
+//   .strict() satisfies z.ZodType<ComponentProps<typeof Image>>
+
+const image = z
+  .object({
+    src: z.string().optional(),
+    alt: z.string().optional(),
+    width: z.number().optional(),
+    height: z.number().optional(),
+  })
+  .strict() satisfies z.ZodType<ComponentProps<typeof Image>>
+
+export const imageSchema = z
+  .preprocess(
+    (data: unknown) => (typeof data === 'string' ? { src: data } : data),
+    image
+  )
+  .optional() as z.ZodType<ComponentProps<typeof Image>>

package/src/schemas/input.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'astro/types'
+import { z } from 'astro:content'
+import Input from 'fulldev-ui/components/Input.astro'
+
+export const inputSchema = z
+  .object({
+    icon: z.string().optional(),
+    label: z.string().optional(),
+    placeholder: z.string().optional(),
+    value: z.string().optional(),
+    size: z.enum(['sm', 'md', 'lg']).optional(),
+  })
+  .strict() satisfies z.ZodType<ComponentProps<typeof Input>>

package/src/schemas/link.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'astro/types'
+import { z } from 'astro:content'
+import Link from 'fulldev-ui/components/Link.astro'
+
+export const linkSchema = z
+  .object({
+    text: z.string().optional(),
+    href: z.string().optional(),
+    icon: z.string().optional(),
+    target: z.literal('_blank').optional(),
+    size: z.enum(['sm', 'md', 'lg']).optional(),
+    variant: z.enum(['primary', 'underline', 'muted']).optional(),
+  })
+  .strict() satisfies z.ZodType<ComponentProps<typeof Link>>

package/src/schemas/logo.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'astro/types'
+import { z } from 'astro:content'
+import Logo from 'fulldev-ui/components/Logo.astro'
+import { imageSchema } from 'fulldev-ui/schemas/image.ts'
+
+export const logoSchema = z
+  .object({
+    image: imageSchema.optional(),
+    text: z.string().optional(),
+    href: z.string().optional(),
+    size: z.enum(['sm', 'md', 'lg']).optional(),
+  })
+  .strict() satisfies z.ZodType<ComponentProps<typeof Logo>>