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

package/src/schemas/components/block.ts

@@ -1,18 +1,61 @@
 import { z } from 'astro:content'
-import { categoriesSchema } from 'fulldev-ui/schemas/blocks/categories'
-import { ctaSchema } from 'fulldev-ui/schemas/blocks/cta'
-import { featureSchema } from 'fulldev-ui/schemas/blocks/feature'
-import { heroSchema } from 'fulldev-ui/schemas/blocks/hero'
-import { productsSchema } from 'fulldev-ui/schemas/blocks/products'
-import { headerSchema } from './header'
+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'
 
-const _block = { _block: z.string() }
+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,
+      rating: z.number().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(),
+      button: buttonSchema.optional(),
+      buttons: buttonSchema.array().optional(),
+    })
+    .strict()
+    .array()
+    .optional(),
+})
 
-export const blockSchema = z.union([
-  heroSchema.extend(_block),
-  ctaSchema.extend(_block),
-  featureSchema.extend(_block),
-  productsSchema.extend(_block),
-  categoriesSchema.extend(_block),
-  headerSchema.extend(_block),
-])
+export type BlockSchema = z.infer<typeof blockSchema>

package/src/schemas/components/button.ts

@@ -8,6 +8,7 @@ export const buttonSchema = z
     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')

package/src/schemas/components/image.ts

@@ -1,26 +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 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
-  .union([imagePath, z.object({}).passthrough()])
-  .pipe(
+  .preprocess(
+    (data: unknown) => (typeof data === 'string' ? { src: data } : data),
     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(),
+        src: z.string().optional(),
+        alt: z.string().optional(),
+        width: z.number().optional(),
+        height: z.number().optional(),
       })
-      .partial()
-      .passthrough()
+      .strict()
   )
   .optional()

package/src/schemas/components/menu.ts

@@ -7,6 +7,7 @@ export const menuSchema = z
     heading: headingSchema.shape.text,
     href: z.string().optional(),
     links: linkSchema.array().optional(),
+    size: z.enum(['sm', 'md', 'lg']).default('md').optional(),
   })
   .strict()
 

package/src/schemas/imageSchema.ts

@@ -5,9 +5,9 @@ export const imageSchema = z
     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()
 

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/utils/getHref.ts

@@ -1,23 +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 (collection === 'pages' && slug === 'index') href = `/`
-  else if (slug === 'index') href = `/${routes[collection]}/`
-  else 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/src/blocks/Banner1.astro

@@ -1,35 +0,0 @@
----
-import type { HTMLTag } from 'astro/types'
-import Banner from 'fulldev-ui/components/Banner.astro'
-import Container from 'fulldev-ui/components/Container.astro'
-import Header from 'fulldev-ui/components/Header.astro'
-import type { BannerSchema } from 'fulldev-ui/schemas/blocks/banner'
-import type { ComponentProps } from 'svelte'
-
-interface Props extends ComponentProps<typeof Header>, BannerSchema {
-  as?: HTMLTag
-}
-
-const { text, ...rest } = Astro.props
----
-
-<Banner
-  class:list="banner-1"
-  {...rest}
->
-  <Container>
-    <Fragment set:html={text} />
-  </Container>
-</Banner>
-
-<style is:global>
-  @layer fulldev {
-    .banner-1 {
-      @apply bg-primary text-primary-foreground;
-
-      .container {
-        @apply flex items-center justify-center overflow-hidden bg-primary text-center text-sm leading-none text-primary-foreground;
-      }
-    }
-  }
-</style>

package/src/blocks/Header1.astro

@@ -1,192 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
-import Cart from 'fulldev-ui/components/Cart.astro'
-import Container from 'fulldev-ui/components/Container.astro'
-import Drawer from 'fulldev-ui/components/Drawer.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Header from 'fulldev-ui/components/Header.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Link from 'fulldev-ui/components/Link.astro'
-import Logo from 'fulldev-ui/components/Logo.astro'
-import Search from 'fulldev-ui/components/Search.astro'
-import Social from 'fulldev-ui/components/Social.astro'
-import Themer from 'fulldev-ui/components/Themer.astro'
-import type { HeaderSchema } from 'fulldev-ui/schemas/components/header'
-
-interface Props extends ComponentProps<typeof Header>, HeaderSchema {}
-
-const {
-  logo,
-  heading,
-  links,
-  socials,
-  menus,
-  search,
-  themer,
-  buttons,
-  cart,
-  ...rest
-} = Astro.props
----
-
-<Header
-  class:list="header-1"
-  {...rest}
->
-  <Container>
-    <Element class:list="header-1-start">
-      <Logo {...logo} />
-      {
-        links?.map((link) => (
-          <Link
-            size="sm"
-            variant="muted"
-            {...link}
-          />
-        ))
-      }
-    </Element>
-    <Element class:list="header-1-end">
-      {
-        search && (
-          <Search
-            if={search}
-            variant="ghost"
-            size="sm"
-          />
-        )
-      }
-      {
-        buttons?.map((button) => (
-          <Button
-            size="sm"
-            {...button}
-          />
-        ))
-      }
-      {
-        cart && (
-          <Cart
-            if={cart}
-            variant="ghost"
-            size="sm"
-          />
-        )
-      }
-      <Themer
-        if={themer}
-        variant="ghost"
-        size="sm"
-      />
-      {
-        socials?.map((social) => (
-          <Social
-            variant="ghost"
-            size="sm"
-            href={social}
-          />
-        ))
-      }
-      <!-- <Button
-        class:list="menu-button"
-        as="label"
-        for="sidebar-toggle"
-        icon="menu-2"
-        variant="ghost"
-        size="sm"
-      /> -->
-      <Drawer
-        id="header-1-drawer"
-        icon="menu-2"
-        size="sm"
-      >
-        <Container>
-          <Element class:list="header-1-links">
-            {
-              links?.map((link) => (
-                <Link
-                  variant="muted"
-                  {...link}
-                />
-              ))
-            }
-          </Element>
-          {
-            menus?.map(({ heading, links }) => (
-              <Element class:list="header-1-menu">
-                <Heading
-                  text={heading}
-                  size="md"
-                  as="h6"
-                />
-                <Element class:list="header-1-links">
-                  {links?.map((link) => (
-                    <Link
-                      variant="muted"
-                      {...link}
-                    />
-                  ))}
-                </Element>
-              </Element>
-            ))
-          }
-        </Container>
-      </Drawer>
-    </Element>
-  </Container>
-</Header>
-
-<style is:global>
-  @layer fulldev {
-    .header-1 {
-      @apply sticky left-0 top-0 z-20 flex h-14 items-center overflow-hidden border-b bg-background;
-
-      .container {
-        @apply flex items-center gap-6;
-      }
-
-      .header-1-start {
-        @apply flex items-center gap-6;
-
-        .link {
-          @apply max-lg:hidden;
-        }
-      }
-
-      .header-1-home {
-        @apply flex items-center gap-2;
-      }
-
-      .header-1-end {
-        @apply ml-auto flex items-center gap-1;
-
-        .social,
-        .themer {
-          @apply max-lg:hidden;
-        }
-
-        .menu-button {
-          @apply lg:hidden;
-        }
-      }
-
-      .drawer {
-        @apply lg:hidden;
-
-        .container {
-          @apply flex w-full flex-col items-start gap-6 overflow-y-auto px-gutter pb-14 pt-8;
-          @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
-        }
-
-        .header-1-menu {
-          @apply flex flex-col gap-4;
-        }
-
-        .header-1-links {
-          @apply flex flex-col gap-3;
-        }
-      }
-    }
-  }
-</style>

package/src/content/layouts/docs.yml

@@ -1,2 +0,0 @@
-navigation:
-  sidebar: true

package/src/layouts/DocLayout.astro

@@ -1,59 +0,0 @@
----
-import type { CollectionEntry } from 'astro:content'
-import { getEntry } from 'astro:content'
-import Container from 'fulldev-ui/components/Container.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Prose from 'fulldev-ui/components/Prose.astro'
-import Toc from 'fulldev-ui/components/Toc.astro'
-import Layout from 'fulldev-ui/layouts/Layout.astro'
-import { mergeDeep } from 'remeda'
-
-type Props = CollectionEntry<'docs'>
-
-const layout = await getEntry('layouts', 'docs')
-const merged = mergeDeep(layout || {}, Astro.props)
-
-const {
-  render,
-  data: { title, description },
-} = merged
-
-const { Content } = await render()
----
-
-<Layout
-  class:list="doc-layout"
-  {...merged}
->
-  <Container class:list="doc-layout-container">
-    <Toc {render} />
-    <Prose>
-      <Heading
-        as="h1"
-        size="4xl"
-        text={title}
-      />
-      <Paragraph
-        muted
-        size="lg"
-        text={description}
-      />
-      <Content />
-    </Prose>
-  </Container>
-</Layout>
-
-<style is:global>
-  @layer fulldev {
-    .doc-layout {
-      .doc-layout-container {
-        @apply relative flex w-full grow items-start justify-evenly gap-x-gutter;
-      }
-
-      .toc {
-        @apply order-last;
-      }
-    }
-  }
-</style>

package/src/layouts/Layout.astro

@@ -1,107 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import type { CollectionEntry, ContentCollectionKey } from 'astro:content'
-import { getEntry } from 'astro:content'
-import Footer from 'fulldev-ui/blocks/Footer.astro'
-import Block from 'fulldev-ui/components/Block.astro'
-import Container from 'fulldev-ui/components/Container.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Head from 'fulldev-ui/components/Head.astro'
-import Sidebar from 'fulldev-ui/components/Sidebar.astro'
-import Subheader from 'fulldev-ui/components/Subheader.astro'
-import { mergeDeep } from 'remeda'
-
-type Props = HTMLAttributes<'body'> & CollectionEntry<ContentCollectionKey>
-
-const layout = await getEntry('layouts', 'base')
-const merged = mergeDeep(layout || {}, Astro.props)
-
-const {
-  collection,
-  slug,
-  id,
-  render,
-  body,
-  data: {
-    banner,
-    header,
-    subheader,
-    sidebar,
-    footer,
-    head,
-    navigation,
-    title,
-    description,
-    image,
-  },
-  ...rest
-} = merged
----
-
-<!doctype html>
-<Element
-  class:list="layout"
-  as="html"
-  {...rest}
->
-  <Head
-    {title}
-    {description}
-    {image}
-    {...head}
-  />
-  <Element
-    class:list="layout-body"
-    as="body"
-  >
-    <Block
-      _block="Banner1"
-      {...banner}
-    />
-    <Block
-      _block="Header1"
-      {...navigation?.header && navigation}
-      {...header}
-    />
-    <Subheader {...subheader} />
-    <Container class:list={['layout-container', { 'has-sidebar': sidebar }]}>
-      <Sidebar
-        {...navigation?.sidebar && navigation}
-        {...sidebar}
-      />
-      <main class="layout-main">
-        <slot />
-      </main>
-    </Container>
-    <Footer {...footer} />
-    <style is:global>
-      @layer fulldev {
-        .layout {
-          @apply w-full font-sans text-base leading-relaxed text-foreground;
-          color-scheme: light;
-        }
-
-        .dark {
-          color-scheme: dark;
-        }
-
-        .layout-body {
-          @apply flex min-h-screen w-full flex-col bg-background font-sans text-foreground;
-        }
-
-        .layout-container {
-          @apply flex w-full grow !px-0;
-        }
-
-        .layout-main {
-          @apply flex w-full max-w-full flex-1 shrink flex-col;
-
-          /* full width minus sidebar width */
-          @media (min-width: 1024px) {
-            max-width: calc(100% - var(--sidebar-width, 0px));
-          }
-        }
-      }
-    </style>
-  </Element>
-</Element>

package/src/layouts/PageLayout.astro

@@ -1,27 +0,0 @@
----
-import type { CollectionEntry } from 'astro:content'
-import { getEntry } from 'astro:content'
-import Blocks from 'fulldev-ui/components/Blocks.astro'
-import Prose from 'fulldev-ui/components/Prose.astro'
-import Layout from 'fulldev-ui/layouts/Layout.astro'
-import { mergeDeep } from 'remeda'
-
-type Props = CollectionEntry<'pages'>
-
-const layout = await getEntry('layouts', 'pages')
-const merged = mergeDeep(layout || {}, Astro.props)
-
-const {
-  render,
-  data: { blocks },
-} = merged
----
-
-<Layout {...merged}>
-  <Prose
-    {render}
-    toc={false}
-  />
-  <Blocks {blocks} />
-  <slot />
-</Layout>