fulldev-ui 0.5.0-beta.9 → 0.6.0-beta-5

package/src/layouts/Product.astro

@@ -0,0 +1,114 @@
+---
+import type { ComponentProps } from 'astro/types'
+import { getImage } from 'astro:assets'
+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 Layout from 'fulldev-ui/components/Layout.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 type { PageSchema } from 'fulldev-ui/schemas/page'
+
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: CollectionEntry<'pages'>['render']
+}
+
+const {
+  render,
+  title,
+  price,
+  images,
+  description,
+  soldout,
+  categories,
+  variants,
+} = Astro.props
+
+const slug = Astro.url.pathname.replace(/^\/|\/$/g, '') || 'index'
+const imageId = images?.[0]?.id
+const src = `/src/images/${imageId}`
+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
+  class:list="product"
+  {...Astro.props}
+>
+  <Element
+    class:list="product"
+    as="section"
+  >
+    <Element class:list="product-container">
+      <Element class:list="product-main">
+        <Gallery {images} />
+        <!-- <Prose {render} /> -->
+      </Element>
+      <Element class:list="product-segment">
+        <Element class:list="product-content">
+          <Heading
+            as="h1"
+            size="3xl"
+            text={title}
+          />
+          <Paragraph text={description} />
+        </Element>
+        <!-- <CartForm
+          product={Astro.props}
+          client:load
+        /> -->
+        <List
+          size="sm"
+          items={baseLayout.data.banner?.split('|')}
+        />
+      </Element>
+    </Element>
+  </Element>
+  <Products1
+    heading="Gerelateerde producten"
+    products={[...relatedProducts].sort(() => Math.random() - 0.5).slice(0, 6)}
+  />
+  <slot />
+</Layout>
+
+<style is:global>
+  .product {
+    @apply relative w-full;
+
+    .product-container {
+      @apply flex h-full w-full flex-col items-start gap-32 lg:container lg:grid lg:grid-cols-2 lg:py-8;
+    }
+
+    .product-segment {
+      @apply z-10 flex flex-col items-start gap-8 max-lg:container lg:sticky lg:top-0;
+
+      --height: calc(
+        var(--header-height, 0px) + var(--subheader-height, 0px) + 2rem
+      );
+      top: var(--height);
+    }
+
+    .product-content {
+      @apply flex max-w-screen-md flex-col gap-6;
+    }
+
+    &.dark {
+      @apply bg-background;
+    }
+  }
+</style>

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

@@ -1,43 +1,48 @@
 ---
-import { getCollection } from 'astro:content'
-import Layout from 'fulldev-ui/layouts/Layout.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 layoutName = Astro.props.data._layout ?? 'Page'
+const layoutComponentName = pascal(layoutName)
 
-const { component, ...restData } = data
-
-const allComponents = {
-  ...import.meta.glob('/src/**/*.astro'),
-  ...import.meta.glob('../../**/*.astro'),
+const layoutsComponents = {
+  ...import.meta.glob('/src/layouts/**/*.astro'),
+  ...import.meta.glob('../layouts/**/*.astro'),
 }
 
-const componentPath = Object.keys(allComponents).find(
-  (path) => path.split('/').pop()?.split('.')[0] === component
+const layoutComponentPath = Object.keys(layoutsComponents).find(
+  (path) => path.split('/').pop()?.split('.')[0] === layoutComponentName
 )
 
-const Component =
-  componentPath && (await (allComponents[componentPath] as any)()).default
+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 ? (
-    <Component
-      {...restData}
-      {...rest}
-    />
-  ) : (
-    <Layout
-      {...(data as any)}
+  LayoutComponent && (
+    <LayoutComponent
+      {...data}
       {...rest}
     />
   )

package/src/pages/test.astro

@@ -0,0 +1,37 @@
+---
+import Hero1 from 'fulldev-ui/blocks/Hero1.astro'
+import Layout from 'fulldev-ui/components/Layout.astro'
+
+import { $cart } from 'fulldev-ui/stores/cart'
+
+const value = $cart.get()
+
+console.log({ value })
+---
+
+<Layout>
+  <Hero1
+    heading="hello world"
+    class="hoi"
+  />
+  {value}
+
+  <button id="myyy-button">Add item</button>
+
+  <script>
+    import { addItem } from 'fulldev-ui/stores/cart'
+
+    const button = document.querySelector('#myyy-button')
+    button?.addEventListener('click', () => {
+      console.log('clicked')
+      addItem({
+        slug: 'test',
+        title: 'title',
+        price: 10,
+        quantity: 10,
+        image: '',
+        variants: [],
+      })
+    })
+  </script>
+</Layout>

package/src/schemas/components/avatar.ts

@@ -1,3 +1,6 @@
 import { z } from 'astro:content'
+import { imageSchema } from 'fulldev-ui/schemas/components/image.ts'
 
-export default z.string()
+export const avatarSchema = imageSchema
+
+export type AvatarSchema = z.infer<typeof avatarSchema>

package/src/schemas/components/badge.ts

@@ -1,13 +1,18 @@
 import { z } from 'astro:content'
-import pathSchema from '../utils/pathSchema'
+import { iconSchema } from './icon'
 
-export default pathSchema('pages').or(
-  z
-    .object({
-      text: z.string(),
-      href: z.string(),
-      icon: z.string(),
-    })
-    .partial()
-    .passthrough()
-)
+export const badgeSchema = z
+  .object({
+    icon: iconSchema.shape.name,
+    text: z.string().optional(),
+    href: z.string().optional(),
+    target: z.literal('_blank').optional(),
+    size: z.enum(['sm', 'md', 'lg']).default('md').optional(),
+    variant: z
+      .enum(['primary', 'secondary', 'outline', 'ghost'])
+      .default('outline')
+      .optional(),
+  })
+  .strict()
+
+export type BadgeSchema = z.infer<typeof badgeSchema>

package/src/schemas/components/block.ts

@@ -0,0 +1,60 @@
+import { z } from 'astro:content'
+import pathSchema from '../utils/pathSchema'
+import { badgeSchema } from './badge'
+import { buttonSchema } from './button'
+import { channelSchema } from './channel'
+import { headingSchema } from './heading'
+import { iconSchema } from './icon'
+import { imageSchema } from './image'
+import { linkSchema } from './link'
+import { logoSchema } from './logo'
+import { menuSchema } from './menu'
+import { paragraphSchema } from './paragraph'
+import { socialSchema } from './social'
+import { taglineSchema } from './tagline'
+
+export const blockSchema = z.object({
+  _block: z.string().optional(),
+  dark: z.boolean().optional(),
+  logo: logoSchema.optional(),
+  link: linkSchema.optional(),
+  links: linkSchema.array().optional(),
+  menus: menuSchema.array().optional(),
+  themer: z.boolean().optional(),
+  search: z.boolean().optional(),
+  cart: z.boolean().optional(),
+  text: z.string().optional(),
+  tagline: taglineSchema.shape.text,
+  badge: badgeSchema.optional(),
+  badges: badgeSchema.array().optional(),
+  heading: headingSchema.shape.text,
+  paragraph: paragraphSchema.shape.text,
+  list: z.string().array().optional(),
+  content: z.string().optional(),
+  button: buttonSchema.optional(),
+  buttons: buttonSchema.array().optional(),
+  image: imageSchema.optional(),
+  images: imageSchema.array().optional(),
+  channels: channelSchema.array().optional(),
+  socials: socialSchema.shape.href.array().optional(),
+  pages: pathSchema('pages').array().optional(),
+  products: pathSchema('pages').array().optional(),
+  cards: z
+    .object({
+      image: imageSchema.optional(),
+      icon: iconSchema.shape.name,
+      tagline: taglineSchema.shape.text,
+      badge: badgeSchema.optional(),
+      badges: badgeSchema.array().optional(),
+      heading: headingSchema.shape.text,
+      paragraph: paragraphSchema.shape.text,
+      list: z.string().array().optional(),
+      button: buttonSchema.optional(),
+      buttons: buttonSchema.array().optional(),
+    })
+    .strict()
+    .array()
+    .optional(),
+})
+
+export type BlockSchema = z.infer<typeof blockSchema>

package/src/schemas/components/button.ts

@@ -1,16 +1,19 @@
 import { z } from 'astro:content'
-import pathSchema from '../utils/pathSchema'
+import { iconSchema } from './icon'
 
-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()
-)
+export const buttonSchema = z
+  .object({
+    icon: iconSchema.shape.name,
+    text: z.string().optional(),
+    href: z.string().optional(),
+    target: z.literal('_blank').optional(),
+    size: z.enum(['sm', 'md', 'lg']).default('md').optional(),
+    reverse: z.boolean().optional(),
+    variant: z
+      .enum(['primary', 'secondary', 'outline', 'ghost'])
+      .default('primary')
+      .optional(),
+  })
+  .strict()
+
+export type ButtonSchema = z.infer<typeof buttonSchema>

package/src/schemas/components/channel.ts

@@ -1,13 +1,19 @@
 import { z } from 'astro:content'
-import heading from './heading'
-import icon from './icon'
-import text from './text'
+import { headingSchema } from './heading'
+import { iconSchema } from './icon'
 
-export default z
+export const channelSchema = z
   .object({
-    heading,
-    text,
-    icon,
-    href: z.string(),
+    icon: iconSchema.shape.name,
+    heading: headingSchema.shape.text,
+    text: z.string().optional(),
+    href: z.string().optional(),
+    size: z.enum(['sm', 'md', 'lg']).default('md').optional(),
+    variant: z
+      .enum(['primary', 'secondary', 'outline', 'ghost'])
+      .default('secondary')
+      .optional(),
   })
-  .partial()
+  .strict()
+
+export type ChannelSchema = z.infer<typeof channelSchema>

package/src/schemas/components/footer.ts

@@ -1,25 +1,19 @@
 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'
+import { channelSchema } from 'fulldev-ui/schemas/components/channel.ts'
+import { logoSchema } from 'fulldev-ui/schemas/components/logo.ts'
+import { menuSchema } from 'fulldev-ui/schemas/components/menu.ts'
+import { headingSchema } from './heading'
+import { paragraphSchema } from './paragraph'
 
-export default z
+export const footerSchema = z
   .object({
-    logo,
-    text,
-    socials,
-    channels,
-    columns: z.array(
-      z
-        .object({
-          heading,
-          buttons,
-        })
-        .partial()
-    ),
+    logo: logoSchema.optional(),
+    heading: headingSchema.shape.text,
+    paragraph: paragraphSchema.shape.text,
+    socials: z.string().url().array().optional(),
+    channels: channelSchema.array().optional(),
+    menus: menuSchema.array().optional(),
   })
-  .partial()
-  .passthrough()
+  .strict()
+
+export type FooterSchema = z.infer<typeof footerSchema>

package/src/schemas/components/head.ts

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

package/src/schemas/components/header.ts

@@ -1,11 +1,23 @@
 import { z } from 'astro:content'
-import buttons from './buttons'
-import logo from './logo'
+import { buttonSchema } from 'fulldev-ui/schemas/components/button.ts'
+import { linkSchema } from 'fulldev-ui/schemas/components/link.ts'
+import { logoSchema } from 'fulldev-ui/schemas/components/logo.ts'
+import { menuSchema } from 'fulldev-ui/schemas/components/menu.ts'
+import { headingSchema } from './heading'
+import { socialSchema } from './social'
 
-export default z
+export const headerSchema = z
   .object({
-    logo,
-    buttons,
+    logo: logoSchema.optional(),
+    heading: headingSchema.shape.text,
+    links: linkSchema.array().optional(),
+    socials: socialSchema.shape.href.array().optional(),
+    buttons: buttonSchema.array().optional(),
+    menus: menuSchema.array().optional(),
+    themer: z.boolean().optional(),
+    cart: z.boolean().optional(),
+    search: z.boolean().optional(),
   })
-  .partial()
-  .passthrough()
+  .strict()
+
+export type HeaderSchema = z.infer<typeof headerSchema>

package/src/schemas/components/heading.ts

@@ -1,3 +1,9 @@
 import { z } from 'astro:content'
 
-export default z.string()
+export const headingSchema = z
+  .object({
+    text: z.string().optional(),
+  })
+  .strict()
+
+export type HeadingSchema = z.infer<typeof headingSchema>

package/src/schemas/components/icon.ts

@@ -1,3 +1,9 @@
 import { z } from 'astro:content'
 
-export default z.string()
+export const iconSchema = z
+  .object({
+    name: z.string().optional(),
+  })
+  .strict()
+
+export type IconSchema = z.infer<typeof iconSchema>

package/src/schemas/components/image.ts

@@ -1,18 +1,40 @@
-import { reference, z } from 'astro:content'
+import { 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()
-)
+// const imagePath = z.preprocess((data: unknown) => {
+//   if (typeof data === 'string') {
+//     return data.split('/').pop()
+//   }
+//   return data
+// }, reference('images'))
 
-// export default z.any()
+// 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
+  .preprocess(
+    (data: unknown) => (typeof data === 'string' ? { src: data } : data),
+    z
+      .object({
+        src: z.string().optional(),
+        alt: z.string().optional(),
+        width: z.number().optional(),
+        height: z.number().optional(),
+      })
+      .strict()
+  )
+  .optional()

package/src/schemas/components/link.ts

@@ -0,0 +1,17 @@
+import { z } from 'astro:content'
+
+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']).default('md').optional(),
+    variant: z
+      .enum(['primary', 'underline', 'muted'])
+      .default('primary')
+      .optional(),
+  })
+  .strict()
+
+export type LinkSchema = z.infer<typeof linkSchema>

package/src/schemas/components/logo.ts

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

package/src/schemas/components/menu.ts

@@ -1,13 +1,13 @@
 import { z } from 'astro:content'
-import buttons from './buttons'
-import heading from './heading'
+import { linkSchema } from 'fulldev-ui/schemas/components/link.ts'
+import { headingSchema } from './heading'
 
-export default z.array(
-  z
-    .object({
-      heading,
-      buttons,
-    })
-    .partial()
-    .passthrough()
-)
+export const menuSchema = z
+  .object({
+    heading: headingSchema.shape.text,
+    href: z.string().optional(),
+    links: linkSchema.array().optional(),
+  })
+  .strict()
+
+export type MenuSchema = z.infer<typeof menuSchema>

package/src/schemas/components/navigation.ts

@@ -0,0 +1,10 @@
+import { z } from 'astro:content'
+import { headerSchema } from './header'
+import { sidebarSchema } from './sidebar'
+
+export const navigationSchema = headerSchema.merge(sidebarSchema).extend({
+  header: z.boolean().optional(),
+  sidebar: z.boolean().optional(),
+})
+
+export type NavigationSchema = z.infer<typeof navigationSchema>

package/src/schemas/components/paragraph.ts

@@ -0,0 +1,9 @@
+import { z } from 'astro:content'
+
+export const paragraphSchema = z
+  .object({
+    text: z.string().optional(),
+  })
+  .strict()
+
+export type ParagraphSchema = z.infer<typeof paragraphSchema>

package/src/schemas/components/price.ts

@@ -1,3 +1,9 @@
 import { z } from 'astro:content'
 
-export default z.number()
+export const priceSchema = z
+  .object({
+    amount: z.number().optional(),
+  })
+  .strict()
+
+export type PriceSchema = z.infer<typeof priceSchema>