fulldev-ui 0.6.0-beta.2 → 0.6.0-beta.6

package/src/schemas/components/image.ts

@@ -1,23 +1,40 @@
-import { reference, z } from 'astro:content'
+import { z } from 'astro:content'
 
-const imagePath = z.preprocess((data: unknown) => {
-  if (typeof data === 'string') {
-    return data.split('/').pop()
-  }
-  return data
-}, reference('images'))
+// const imagePath = z.preprocess((data: unknown) => {
+//   if (typeof data === 'string') {
+//     return data.split('/').pop()
+//   }
+//   return data
+// }, reference('images'))
 
-export default 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()
-)
+// 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

@@ -1,23 +1,17 @@
 import { z } from 'astro:content'
 
-// 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 default z
+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()
-  .optional()
+
+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,15 +1,14 @@
 import { z } from 'astro:content'
-import buttons from './buttons'
-import heading from './heading'
-import links from './links'
+import { linkSchema } from 'fulldev-ui/schemas/components/link.ts'
+import { headingSchema } from './heading'
 
-export default z.array(
-  z
-    .object({
-      heading,
-      buttons,
-      links,
-    })
-    .partial()
-    .passthrough()
-)
+export const menuSchema = z
+  .object({
+    heading: headingSchema.shape.text,
+    href: z.string().optional(),
+    links: linkSchema.array().optional(),
+    size: z.enum(['sm', 'md', 'lg']).default('md').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

@@ -0,0 +1,9 @@
+import { z } from 'astro:content'
+
+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,16 +1,18 @@
 import { z } from 'astro:content'
-import logo from '../components/logo'
-import menu from '../components/menu'
-import heading from './heading'
-import themer from './themer'
+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({
-    themer,
-    logo,
-    heading,
-    menu,
+    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()
-  .optional()
+  .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,12 +1,41 @@
 import { z } from 'astro:content'
 
-export default z
+export const imageSchema = z
   .object({
     id: z.string(),
     src: z.string(),
     alt: z.string().default(''),
-    width: z.number(),
-    height: z.number(),
-    format: z.string(),
+    width: z.number().optional(),
+    height: z.number().optional(),
+    format: z.string().optional(),
   })
   .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/page.ts

@@ -0,0 +1,40 @@
+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({
+    _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(),
+    list: z.string().array().optional(),
+    image: imageSchema.optional(),
+    images: imageSchema.array().optional(),
+    price: priceSchema.shape.amount,
+    order: z.number().optional(),
+    variants: z.record(z.string(), z.string().array()).optional(),
+    soldout: z.boolean().optional(),
+    head: headSchema.optional(),
+    button: buttonSchema.optional(),
+    buttons: buttonSchema.array().optional(),
+    banner: blockSchema.optional(),
+    navigation: blockSchema.optional(),
+    header: blockSchema.optional(),
+    blocks: blockSchema.array().optional(),
+    subheader: blockSchema.array().optional(),
+    sidebar: blockSchema.optional(),
+    footer: blockSchema.optional(),
+    parents: pathSchema('pages').array().optional(),
+    children: pathSchema('pages').array().optional(),
+    siblings: pathSchema('pages').array().optional(),
+  })
+  .strict()
+
+export type PageSchema = z.infer<typeof pageSchema>

package/src/types/global-props.ts

@@ -5,12 +5,3 @@ export type GlobalProps = {
   size?: 'sm' | 'md' | 'lg' | string | number | null | undefined
   contrast?: boolean | undefined
 }
-
-// declare global {
-//   type GlobalProps = {
-//     theme?: 'light' | 'dark' | undefined
-//     color?: 'base' | 'brand' | undefined
-//     size?: 'sm' | 'md' | 'lg' | undefined
-//     contrast?: boolean | undefined
-//   }
-// }

package/src/types/{virtual-modules.d.ts → virtual.d.ts}

@@ -1,4 +1,4 @@
-declare module 'virtual:*' {
+declare module 'virtual:fulldev-ui/config' {
   import type { Config } from 'fulldev-ui/integration'
   const content: Config
   export default content

package/src/utils/getHref.ts

@@ -1,22 +1,6 @@
-import type { CollectionEntry, ContentCollectionKey } from 'astro:content'
+import type { CollectionEntry } from 'astro:content'
 
-const routes: {
-  [key in ContentCollectionKey]: string
-} = {
-  categories: 'categorieen',
-  docs: 'docs',
-  pages: '',
-  posts: 'blog',
-  products: 'producten',
-}
-
-export function getHref(
-  collection: ContentCollectionKey,
-  slug: CollectionEntry<ContentCollectionKey>['slug']
-) {
-  let href
-  if (slug === 'index') href = `/`
-  else if (slug) href = `/${routes[collection]}/${slug}/`
-  href = href?.replace('//', '/')
-  return href
+export function getHref(slug: CollectionEntry<'pages'>['slug']) {
+  if (slug === 'index') return '/'
+  else return `/${slug}/`
 }

package/tailwind.config.ts

@@ -16,6 +16,10 @@ export default {
         gutter: 'clamp(16px, 4vw, 32px)',
         container: 'var(--container, 1536px)',
         hero: 'calc(100vh - var(--header-height, 0px) - var(--subheader-height, 0px) - var(--banner-height, 0px))',
+        'sticky-8':
+          'calc(var(--header-height, 0px) + var(--subheader-height, 0px) + 2rem)',
+        'sticky-16':
+          'calc(var(--header-height, 0px) + var(--subheader-height, 0px) + 4rem)',
       },
       colors: {
         border: 'hsl(var(--border))',

package/tsconfig.json

@@ -4,9 +4,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "fulldev-ui/*": [
-        "src/*"
-      ]
+      "fulldev-ui/*": ["src/*"],
     }
   },
 }

package/src/blocks/Categories.astro

@@ -1,12 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="categories"
-  structure="grid"
-  position="inset"
-  {...rest}
-/>

package/src/blocks/Colleagues.astro

@@ -1,12 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="colleagues"
-  structure="grid"
-  position="inset"
-  {...rest}
-/>

package/src/blocks/Contact.astro

@@ -1,117 +0,0 @@
----
-import Channels from 'fulldev-ui/components/Channels.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Form from 'fulldev-ui/components/Form.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Socials from 'fulldev-ui/components/Socials.astro'
-import Tagline from 'fulldev-ui/components/Tagline.astro'
-
-const {
-  as = 'section',
-  size = 'md',
-  variant = 1,
-  heading,
-  form,
-  text,
-  tagline,
-  googleMaps,
-  paragraph,
-  buttons,
-  socials,
-  position,
-  image,
-  channels,
-  level = 1,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="contact"
-  {as}
-  {size}
-  {variant}
-  {...rest}
->
-  <Element class:list="contact-container">
-    <Element class:list="contact-segment">
-      <Element class:list="contact-content">
-        <Tagline text={tagline} />
-        <Heading
-          size={'sm'}
-          level={level}
-          text={heading}
-        />
-        <Paragraph text={paragraph} />
-      </Element>
-      <Channels {channels} />
-      <Socials {socials} />
-      <Form
-        action="/thank-you"
-        method="POST"
-        {...form}
-      />
-    </Element>
-    <Image
-      class:list="contact-image"
-      {position}
-      {...image}
-    />
-  </Element>
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .contact {
-      @apply relative w-full;
-
-      .contact-container {
-        @apply mx-auto flex h-full w-full flex-col;
-      }
-
-      .contact-segment {
-        @apply z-10 flex flex-col items-start gap-8;
-      }
-
-      .contact-content {
-        @apply flex max-w-screen-md flex-col gap-6;
-      }
-
-      &.dark {
-        @apply bg-background;
-      }
-
-      /* Narrow left aligned */
-      &.variant-1 {
-        .contact-container {
-          @apply max-w-screen-md px-gutter py-8;
-        }
-
-        .contact-segment {
-          @apply gap-8 py-16;
-        }
-
-        .content-image {
-          @apply rounded-lg;
-        }
-      }
-
-      /* Split */
-      &.variant-2 {
-        .contact-container {
-          @apply container gap-x-gutter gap-y-16 py-20 lg:grid lg:grid-cols-2 lg:items-center;
-        }
-
-        .contact-segment {
-          @apply max-w-xl;
-        }
-
-        .contact-image {
-          @apply rounded-lg;
-        }
-      }
-    }
-  }
-</style>