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

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>

package/src/schemas/components/rating.ts

@@ -1,15 +1,10 @@
 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()
-)
+export const ratingSchema = z
+  .object({
+    score: z.number().optional(),
+    size: z.enum(['sm', 'md', 'lg']).default('md').optional(),
+  })
+  .strict()
+
+export type RatingSchema = z.infer<typeof ratingSchema>

package/src/schemas/components/sidebar.ts

@@ -1,15 +1,18 @@
 import { z } from 'astro:content'
-import logo from '../components/logo'
-import menu from '../components/menu'
-import heading from './heading'
-import toc from './toc'
+import { logoSchema } from '../components/logo'
+import { headingSchema } from './heading'
+import { linkSchema } from './link'
+import { menuSchema } from './menu'
 
-export default z
+export const sidebarSchema = z
   .object({
-    logo,
-    heading,
-    menu,
-    toc,
+    company: z.string().optional(),
+    logo: logoSchema.optional(),
+    heading: headingSchema.shape.text,
+    themer: z.boolean().optional(),
+    menus: menuSchema.array().optional(),
+    links: linkSchema.array().optional(),
   })
-  .partial()
-  .passthrough()
+  .strict()
+
+export type SidebarSchema = z.infer<typeof sidebarSchema>

package/src/schemas/components/social.ts

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

package/src/schemas/components/tagline.ts

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

package/src/schemas/imageSchema.ts

@@ -1,6 +1,6 @@
 import { z } from 'astro:content'
 
-export default z
+export const imageSchema = z
   .object({
     id: z.string(),
     src: z.string(),
@@ -10,3 +10,32 @@ export default z
     format: z.string(),
   })
   .passthrough()
+
+export type ImageSchema = z.infer<typeof imageSchema>
+
+export const imageLoader = 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/schemas/layoutSchema.ts

@@ -0,0 +1,22 @@
+import { z } from 'astro:content'
+import { bannerSchema } from 'fulldev-ui/schemas/blocks/banner.ts'
+import { footerSchema } from 'fulldev-ui/schemas/components/footer.ts'
+import { headSchema } from 'fulldev-ui/schemas/components/head.ts'
+import { headerSchema } from 'fulldev-ui/schemas/components/header.ts'
+import { linkSchema } from 'fulldev-ui/schemas/components/link.ts'
+import { navigationSchema } from 'fulldev-ui/schemas/components/navigation.ts'
+import { sidebarSchema } from 'fulldev-ui/schemas/components/sidebar.ts'
+
+export const layoutSchema = z
+  .object({
+    head: headSchema.optional(),
+    banner: bannerSchema.optional(),
+    navigation: navigationSchema.optional(),
+    header: headerSchema.optional(),
+    subheader: linkSchema.array().optional(),
+    sidebar: sidebarSchema.optional(),
+    footer: footerSchema.optional(),
+  })
+  .strict()
+
+export type LayoutSchema = z.infer<typeof layoutSchema>

package/src/schemas/pageSchema.ts

@@ -1,101 +1,31 @@
-import { getEntries, getEntry, z } from 'astro:content'
-import { assign } from 'radash'
-import fulldevConfig from 'virtual:fulldev-ui/config'
-import footer from './components/footer'
-import header from './components/header'
-import image from './components/image'
-import images from './components/images'
-import price from './components/price'
-import section from './components/section'
-import sections from './components/sections'
-import sidebar from './components/sidebar'
-import toc from './components/toc'
-import component from './utils/component'
-import navigation from './utils/navigation'
-import parents from './utils/parents'
-import pathSchema from './utils/pathSchema'
-
-export 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
-  })
-
-export const presets = z
-  .object({
-    presets: z.array(pathSchema('presets')).optional(),
-  })
-  .passthrough()
-  .transform(async ({ presets, ...rest }) => {
-    let mergedData = {}
-
-    if (fulldevConfig.basePreset) {
-      const baseEntry = await getEntry('presets', fulldevConfig.basePreset)
-      mergedData = assign(mergedData, baseEntry?.data || {})
-    }
-
-    if (presets) {
-      const entries = await getEntries(presets)
-      entries.forEach(
-        (preset: any) => (mergedData = assign(mergedData, preset.data))
-      )
-    }
-
-    mergedData = assign(mergedData, rest)
-    return mergedData as typeof rest
-  })
-
-export const basePreset = z
-  .object({})
-  .passthrough()
-  .transform(async (data) => {
-    if (!fulldevConfig.basePreset) return data
-    const baseEntry = await getEntry('presets', fulldevConfig.basePreset)
-    const mergedData = assign(baseEntry?.data ?? {}, data)
-    return mergedData as typeof data
-  })
-
-export const page = z
+import { z } from 'astro:content'
+import { blockSchema } from 'fulldev-ui/schemas/components/block.ts'
+import { buttonSchema } from 'fulldev-ui/schemas/components/button.ts'
+import { headSchema } from 'fulldev-ui/schemas/components/head.ts'
+import { imageSchema } from 'fulldev-ui/schemas/components/image.ts'
+import { priceSchema } from 'fulldev-ui/schemas/components/price.ts'
+import pathSchema from 'fulldev-ui/schemas/utils/pathSchema.ts'
+
+export const pageSchema = z
   .object({
-    component,
-    parents,
-    theme: z.enum(['light', 'dark']),
-    lang: z.string(),
-    seo: z
-      .object({
-        title: z.string().optional(),
-        description: z.string().optional(),
-      })
-      .optional(),
-    title: z.string(),
+    _layout: z.string().default('Page').optional(),
+    _schema: z.string().optional(),
+    href: z.string().optional(),
+    draft: z.boolean().optional(),
+    title: z.string().optional(),
     description: z.string().optional(),
-    image,
-    images,
-    section,
-    sections,
-    footer,
-    header: header,
-    sidebar: sidebar,
-    navigation,
-    toc,
-    price,
-    code: z.any(),
-    sizes: z.any(),
-    banner: z.any(),
-    _schema: z.any(),
-    uitverkocht: z.any(),
-    rating: z.any(),
-    variants: z.any(),
-    heading: z.any(),
-    href: z.any(),
+    list: z.string().array().optional(),
+    image: imageSchema.optional(),
+    images: imageSchema.array().optional(),
+    price: priceSchema.shape.amount,
+    categories: pathSchema('pages').array().optional(),
+    blocks: blockSchema.array().optional(),
+    order: z.number().optional(),
+    variants: z.record(z.string(), z.string().array()).optional(),
+    soldout: z.boolean().optional(),
+    head: headSchema.optional(),
+    button: buttonSchema.optional(),
   })
-  .partial()
   .strict()
 
-export default i18n.pipe(basePreset).pipe(presets).pipe(page)
+export type PageSchema = z.infer<typeof pageSchema>

package/src/stores/cart.svelte.ts

@@ -0,0 +1,79 @@
+import { derived, writable } from 'svelte/store'
+
+export type CartItem = {
+  uid: string
+  quantity: number
+  slug: string
+  title: string
+  price?: number | undefined
+  image?: string | undefined
+  variants?:
+    | {
+        [k: string]: string | undefined
+      }
+    | undefined
+}
+
+export type Cart = CartItem[]
+
+const isServer = import.meta.env.SSR
+const storageJson = !isServer && localStorage.getItem('cart')
+const storageData = storageJson ? JSON.parse(storageJson) : []
+
+export const cart = writable<Cart>(storageData)
+
+cart.subscribe((newCart) => {
+  if (isServer) return
+  const json = JSON.stringify(newCart)
+  localStorage.setItem('cart', json)
+})
+
+export const getUid = (
+  slug: CartItem['slug'],
+  variants?: CartItem['variants']
+) => (variants ? `${slug}-${Object.values(variants)?.join('-')}` : slug)
+
+export const getItemIndex = (currentCart: Cart, uid: CartItem['uid']) => {
+  const index = currentCart.findIndex((i) => i.uid === uid)
+  if (index === -1) throw new Error(`Item with uid ${uid} not found`)
+  return index
+}
+
+export const addItem = (item: CartItem) =>
+  cart.update((currentCart) => [...currentCart, item])
+
+export const removeItem = (uid: CartItem['uid']) =>
+  cart.update((currentCart) => {
+    const index = getItemIndex(currentCart, uid)
+    currentCart.splice(index, 1)
+    return [...currentCart]
+  })
+
+export const updateQuantity = (
+  uid: CartItem['uid'],
+  quantity: CartItem['quantity']
+) =>
+  cart.update((currentCart) => {
+    const index = getItemIndex(currentCart, uid)
+    if (currentCart[index]) currentCart[index].quantity = quantity
+    return [...currentCart]
+  })
+
+export const openCart = () => {
+  const cartDialog = document.querySelector('dialog#cart')
+  if (cartDialog instanceof HTMLDialogElement) cartDialog.showModal()
+}
+
+export const closeCart = () => {
+  const cartDialog = document.querySelector('dialog#cart')
+  if (cartDialog instanceof HTMLDialogElement) cartDialog.close()
+}
+
+export const totalPrice = derived(cart, ($cart) => {
+  console.log('DERIVED', $cart)
+  return $cart.length
+  // return $cart.reduce(
+  //   (acc, item) => acc + (item.price || 0) * (item.quantity || 0),
+  //   0
+  // )
+})