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

package/src/layouts/Job.astro

@@ -0,0 +1,64 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import { getEntries } from 'astro:content'
+import Footer from 'fulldev-ui/blocks/Footer.astro'
+import Header from 'fulldev-ui/blocks/Header.astro'
+import Job1 from 'fulldev-ui/blocks/Job1.astro'
+import Blocks from 'fulldev-ui/components/Blocks.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Layout from 'fulldev-ui/components/Layout.astro'
+import type { LayoutSchema } from 'fulldev-ui/schemas/layoutSchema.ts'
+import type { PageSchema } from 'fulldev-ui/schemas/pageSchema.ts'
+import { getHref } from 'fulldev-ui/utils/getHref'
+
+type Props = ComponentProps<typeof Layout> &
+  LayoutSchema &
+  PageSchema &
+  Pick<CollectionEntry<'pages'>, 'render'>
+
+const {
+  title,
+  description,
+  list,
+  button,
+  header,
+  sidebar,
+  render,
+  categories,
+  blocks,
+  footer,
+} = Astro.props
+
+const categoriesEntries = categories && (await getEntries(categories))
+---
+
+<Layout
+  class:list="job"
+  {...Astro.props}
+>
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Element as="main">
+    <Job1
+      badges={categoriesEntries?.map((category) => ({
+        text: category.data.title,
+        href: getHref(category.slug),
+      }))}
+      heading={title}
+      paragraph={description}
+      list={list}
+      button={button}
+      render={render}
+    />
+    <Blocks {blocks} />
+  </Element>
+  <Footer {...footer} />
+</Layout>
+
+<style is:global>
+  @layer fulldev {
+  }
+</style>

package/src/layouts/Page.astro

@@ -0,0 +1,30 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Footer from 'fulldev-ui/blocks/Footer.astro'
+import Header from 'fulldev-ui/blocks/Header.astro'
+import Banner from 'fulldev-ui/components/Banner.astro'
+import Blocks from 'fulldev-ui/components/Blocks.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Layout from 'fulldev-ui/components/Layout.astro'
+import type { LayoutSchema } from 'fulldev-ui/schemas/layoutSchema.ts'
+import type { PageSchema } from 'fulldev-ui/schemas/pageSchema.ts'
+
+type Props = ComponentProps<typeof Layout> & LayoutSchema & PageSchema
+
+const { banner, sidebar, header, blocks, footer } = Astro.props
+---
+
+<Layout
+  class:list="page"
+  {...Astro.props}
+>
+  <Banner {...banner} />
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Element as="main">
+    <Blocks {blocks} />
+  </Element>
+  <Footer {...footer} />
+</Layout>

package/src/layouts/Post.astro

@@ -0,0 +1,20 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Layout from 'fulldev-ui/components/Layout.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+
+type Props = ComponentProps<typeof Layout>
+
+const { render } = Astro.props
+---
+
+<Layout
+  class:list="post"
+  {...Astro.props}
+>
+  <Prose
+    {render}
+    toc={true}
+  />
+  <slot />
+</Layout>

package/src/layouts/Product.astro

@@ -0,0 +1,110 @@
+---
+import type { ComponentProps } from 'astro/types'
+import { getImage } from 'astro:assets'
+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'
+
+type Props = ComponentProps<typeof Layout>
+
+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/blocks/banner.ts

@@ -0,0 +1,10 @@
+import { z } from 'astro:content'
+
+export const bannerSchema = z.preprocess(
+  (data: unknown) => (typeof data === 'string' ? { text: data } : data),
+  z.object({
+    text: z.string().optional(),
+  })
+)
+
+export type BannerSchema = z.infer<typeof bannerSchema>

package/src/schemas/blocks/categories.ts

@@ -0,0 +1,14 @@
+import { z } from 'astro:content'
+import { buttonSchema } from 'fulldev-ui/schemas/components/button.ts'
+import { headingSchema } from '../components/heading'
+import pathSchema from '../utils/pathSchema'
+
+export const categoriesSchema = z
+  .object({
+    heading: headingSchema.shape.text,
+    button: buttonSchema.optional(),
+    categories: pathSchema('categories').array().optional(),
+  })
+  .strict()
+
+export type CategoriesSchema = z.infer<typeof categoriesSchema>

package/src/schemas/blocks/contact.ts

@@ -0,0 +1,18 @@
+import { z } from 'astro:content'
+import { headingSchema } from 'fulldev-ui/schemas/components/heading'
+import { taglineSchema } from 'fulldev-ui/schemas/components/tagline'
+import { channelSchema } from '../components/channel'
+import { paragraphSchema } from '../components/paragraph'
+import { socialSchema } from '../components/social'
+
+export const contactSchema = z
+  .object({
+    tagline: taglineSchema.shape.text,
+    heading: headingSchema.shape.text,
+    paragraph: paragraphSchema.shape.text,
+    channels: channelSchema.array().optional(),
+    socials: socialSchema.shape.href.array().optional(),
+  })
+  .strict()
+
+export type ContactSchema = z.infer<typeof contactSchema>

package/src/schemas/blocks/cta.ts

@@ -0,0 +1,19 @@
+import { z } from 'astro:content'
+import { buttonSchema } from 'fulldev-ui/schemas/components/button.ts'
+import { imageSchema } from 'fulldev-ui/schemas/components/image.ts'
+import { headingSchema } from '../components/heading'
+import { paragraphSchema } from '../components/paragraph'
+import { taglineSchema } from '../components/tagline'
+
+export const ctaSchema = z
+  .object({
+    tagline: taglineSchema.shape.text,
+    heading: headingSchema.shape.text,
+    paragraph: paragraphSchema.shape.text,
+    buttons: buttonSchema.array().optional(),
+    image: imageSchema.optional(),
+    dark: z.boolean().optional(),
+  })
+  .strict()
+
+export type CtaSchema = z.infer<typeof ctaSchema>

package/src/schemas/blocks/feature.ts

@@ -0,0 +1,18 @@
+import { z } from 'astro:content'
+import { buttonSchema } from 'fulldev-ui/schemas/components/button.ts'
+import { imageSchema } from 'fulldev-ui/schemas/components/image.ts'
+import { headingSchema } from '../components/heading'
+import { paragraphSchema } from '../components/paragraph'
+import { taglineSchema } from '../components/tagline'
+
+export const featureSchema = z
+  .object({
+    tagline: taglineSchema.shape.text,
+    heading: headingSchema.shape.text,
+    paragraph: paragraphSchema.shape.text,
+    buttons: buttonSchema.array().optional(),
+    image: imageSchema.optional(),
+  })
+  .strict()
+
+export type FeatureSchema = z.infer<typeof featureSchema>

package/src/schemas/blocks/features.ts

@@ -0,0 +1,24 @@
+import { z } from 'astro:content'
+import { headingSchema } from 'fulldev-ui/schemas/components/heading'
+import { iconSchema } from '../components/icon'
+import { paragraphSchema } from '../components/paragraph'
+import { taglineSchema } from '../components/tagline'
+
+export const featuresSchema = z
+  .object({
+    tagline: taglineSchema.shape.text,
+    heading: headingSchema.shape.text,
+    paragraph: paragraphSchema.shape.text,
+    cards: z
+      .object({
+        icon: iconSchema.shape.name,
+        heading: headingSchema.shape.text,
+        paragraph: paragraphSchema.shape.text,
+      })
+      .strict()
+      .array()
+      .optional(),
+  })
+  .strict()
+
+export type FeaturesSchema = z.infer<typeof featuresSchema>

package/src/schemas/blocks/hero.ts

@@ -0,0 +1,20 @@
+import { z } from 'astro:content'
+import { badgeSchema } from 'fulldev-ui/schemas/components/badge.ts'
+import { buttonSchema } from 'fulldev-ui/schemas/components/button.ts'
+import { headingSchema } from 'fulldev-ui/schemas/components/heading'
+import { imageSchema } from 'fulldev-ui/schemas/components/image.ts'
+import { taglineSchema } from 'fulldev-ui/schemas/components/tagline'
+import { paragraphSchema } from '../components/paragraph'
+
+export const heroSchema = z
+  .object({
+    badge: badgeSchema.optional(),
+    tagline: taglineSchema.shape.text,
+    heading: headingSchema.shape.text,
+    paragraph: paragraphSchema.shape.text,
+    buttons: buttonSchema.array().optional(),
+    image: imageSchema.optional(),
+  })
+  .strict()
+
+export type HeroSchema = z.infer<typeof heroSchema>

package/src/schemas/blocks/intro.ts

@@ -0,0 +1,16 @@
+import { z } from 'astro:content'
+import { buttonSchema } from 'fulldev-ui/schemas/components/button.ts'
+import { headingSchema } from 'fulldev-ui/schemas/components/heading'
+import { taglineSchema } from 'fulldev-ui/schemas/components/tagline'
+import { paragraphSchema } from '../components/paragraph'
+
+export const introSchema = z
+  .object({
+    tagline: taglineSchema.shape.text,
+    heading: headingSchema.shape.text,
+    paragraph: paragraphSchema.shape.text,
+    buttons: buttonSchema.array().optional(),
+  })
+  .strict()
+
+export type IntroSchema = z.infer<typeof introSchema>

package/src/schemas/blocks/products.ts

@@ -0,0 +1,14 @@
+import { z } from 'astro:content'
+import { buttonSchema } from 'fulldev-ui/schemas/components/button.ts'
+import { headingSchema } from 'fulldev-ui/schemas/components/heading'
+import pathSchema from '../utils/pathSchema'
+
+export const productsSchema = z
+  .object({
+    heading: headingSchema.shape.text,
+    button: buttonSchema.optional(),
+    products: pathSchema('products').array().optional(),
+  })
+  .strict()
+
+export type ProductsSchema = z.infer<typeof productsSchema>

package/src/schemas/blocks/reviews.ts

@@ -0,0 +1,24 @@
+import { z } from 'astro:content'
+import { headingSchema } from 'fulldev-ui/schemas/components/heading'
+import { paragraphSchema } from '../components/paragraph'
+import { ratingSchema } from '../components/rating'
+import { taglineSchema } from '../components/tagline'
+
+export const reviewsSchema = z
+  .object({
+    tagline: taglineSchema.shape.text,
+    heading: headingSchema.shape.text,
+    paragraph: paragraphSchema.shape.text,
+    cards: z
+      .object({
+        rating: ratingSchema.shape.score,
+        heading: headingSchema.shape.text,
+        paragraph: paragraphSchema.shape.text,
+      })
+      .strict()
+      .array()
+      .optional(),
+  })
+  .strict()
+
+export type ReviewsSchema = z.infer<typeof reviewsSchema>

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,22 @@
+import { z } from 'astro:content'
+import { categoriesSchema } from 'fulldev-ui/schemas/blocks/categories'
+import { ctaSchema } from 'fulldev-ui/schemas/blocks/cta'
+import { featuresSchema } from 'fulldev-ui/schemas/blocks/features'
+import { heroSchema } from 'fulldev-ui/schemas/blocks/hero'
+import { productsSchema } from 'fulldev-ui/schemas/blocks/products'
+import { featureSchema } from '../blocks/feature'
+import { reviewsSchema } from '../blocks/reviews'
+import { headerSchema } from './header'
+
+const _block = { _block: z.string() }
+
+export const blockSchema = z.union([
+  heroSchema.extend(_block),
+  ctaSchema.extend(_block),
+  featureSchema.extend(_block),
+  productsSchema.extend(_block),
+  categoriesSchema.extend(_block),
+  headerSchema.extend(_block),
+  featuresSchema.extend(_block),
+  reviewsSchema.extend(_block),
+])

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>