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

package/src/layouts/Jobs.astro

@@ -0,0 +1,72 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import { getCollection } from 'astro:content'
+import Footer from 'fulldev-ui/blocks/Footer.astro'
+import Header from 'fulldev-ui/blocks/Header.astro'
+import Intro1 from 'fulldev-ui/blocks/Intro1.astro'
+import Jobs1 from 'fulldev-ui/blocks/Jobs1.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Layout from 'fulldev-ui/components/Layout.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Sidebar from 'fulldev-ui/components/Sidebar.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  slug: CollectionEntry<'pages'>['slug']
+  render: CollectionEntry<'pages'>['render']
+}
+
+const { slug, header, sidebar, render, title, description, footer } =
+  Astro.props
+
+const { Content } = await render()
+
+const children = (
+  await getCollection('pages', ({ data }) =>
+    data.parents?.some((p) => p.slug.includes(slug))
+  )
+)?.map(({ collection, slug }) => ({ collection, slug }))
+---
+
+<Layout
+  class:list="jobs"
+  {...Astro.props}
+>
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Container class:list="jobs-container">
+    <Sidebar {...sidebar} />
+    <Element
+      class:list="jobs-main"
+      as="main"
+    >
+      <Intro1
+        heading={title}
+        paragraph={description}
+      />
+      <Jobs1 pages={children} />
+      <Prose>
+        <Content />
+      </Prose>
+    </Element>
+  </Container>
+</Layout>
+<Footer {...footer} />
+
+<style is:global>
+  @layer fulldev {
+    .jobs {
+      .jobs-container {
+        @apply flex !pr-0;
+      }
+
+      .jobs-main {
+        @apply flex w-full flex-col;
+      }
+    }
+  }
+</style>

package/src/layouts/Page.astro

@@ -0,0 +1,29 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Banner from 'fulldev-ui/blocks/Banner.astro'
+import Footer from 'fulldev-ui/blocks/Footer.astro'
+import Header from 'fulldev-ui/blocks/Header.astro'
+import Block from 'fulldev-ui/components/Block.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Layout from 'fulldev-ui/components/Layout.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+
+interface Props extends ComponentProps<typeof Layout>, PageSchema {}
+
+const { banner, sidebar, header, blocks, footer } = Astro.props
+---
+
+<Layout
+  class:list="page"
+  {...Astro.props}
+>
+  <Banner {...banner} />
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Element as="main">
+    {blocks?.map((block) => <Block {...block} />)}
+  </Element>
+  <Footer {...footer} />
+</Layout>

package/src/layouts/Post.astro

@@ -0,0 +1,52 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Content1 from 'fulldev-ui/blocks/Content1.astro'
+import Footer from 'fulldev-ui/blocks/Footer.astro'
+import Header from 'fulldev-ui/blocks/Header.astro'
+import Block from 'fulldev-ui/components/Block.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Layout from 'fulldev-ui/components/Layout.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page'
+
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: CollectionEntry<'pages'>['render']
+}
+
+const {
+  title,
+  description,
+  list,
+  button,
+  header,
+  sidebar,
+  blocks,
+  footer,
+  render,
+} = Astro.props
+
+const { Content, headings } = await render()
+---
+
+<Layout
+  class:list="post"
+  {...Astro.props}
+>
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Element as="main">
+    <Content1
+      heading={title}
+      paragraph={description}
+      {list}
+      {button}
+      {headings}
+    >
+      <Content />
+    </Content1>
+    {blocks?.map((block) => <Block {...block} />)}
+  </Element>
+  <Footer {...footer} />
+</Layout>

package/src/layouts/{ProductLayout.astro → Product.astro}

@@ -1,22 +1,33 @@
 ---
+import type { ComponentProps } from 'astro/types'
 import { getImage } from 'astro:assets'
 import type { CollectionEntry } from 'astro:content'
 import { getCollection, getEntry } from 'astro:content'
-import Products from 'fulldev-ui/blocks/Products.astro'
+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 Layout from 'fulldev-ui/layouts/Layout.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page'
 
-type Props = CollectionEntry<'products'>
+interface Props extends ComponentProps<typeof Layout>, PageSchema {
+  render: CollectionEntry<'pages'>['render']
+}
 
-const { render } = Astro.props
-const { title, price, images, description, soldout, categories, variants } =
-  Astro.props.data
+const {
+  render,
+  title,
+  price,
+  images,
+  description,
+  soldout,
+  categories,
+  variants,
+} = Astro.props
 
 const slug = Astro.url.pathname.replace(/^\/|\/$/g, '') || 'index'
 const imageId = images?.[0]?.id
@@ -35,7 +46,10 @@ const relatedProducts = await getCollection('products', (product) =>
 const baseLayout = await getEntry('layouts', 'base')
 ---
 
-<Layout {...Astro.props}>
+<Layout
+  class:list="product"
+  {...Astro.props}
+>
   <Element
     class:list="product"
     as="section"
@@ -49,15 +63,15 @@ const baseLayout = await getEntry('layouts', 'base')
         <Element class:list="product-content">
           <Heading
             as="h1"
-            level={2}
+            size="3xl"
             text={title}
           />
           <Paragraph text={description} />
         </Element>
-        <CartForm
+        <!-- <CartForm
           product={Astro.props}
           client:load
-        />
+        /> -->
         <List
           size="sm"
           items={baseLayout.data.banner?.split('|')}
@@ -65,7 +79,7 @@ const baseLayout = await getEntry('layouts', 'base')
       </Element>
     </Element>
   </Element>
-  <Products
+  <Products1
     heading="Gerelateerde producten"
     products={[...relatedProducts].sort(() => Math.random() - 0.5).slice(0, 6)}
   />

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

@@ -1,17 +1,49 @@
 ---
-import { getCollection } from 'astro:content'
-import PageLayout from 'fulldev-ui/layouts/PageLayout.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 collection = await getCollection('pages')
   return collection.map((entry) => ({
     params: {
-      page: getHref(entry.collection, entry.slug),
+      page: getHref(entry.slug),
     },
     props: entry,
   }))
 }
+
+const layoutName = Astro.props.data._layout ?? 'Page'
+const layoutComponentName = pascal(layoutName)
+
+const layoutsComponents = {
+  ...import.meta.glob('/src/layouts/**/*.astro'),
+  ...import.meta.glob('../layouts/**/*.astro'),
+}
+
+const layoutComponentPath = Object.keys(layoutsComponents).find(
+  (path) => path.split('/').pop()?.split('.')[0] === layoutComponentName
+)
+
+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
 ---
 
-<PageLayout {...Astro.props} />
+{
+  LayoutComponent && (
+    <LayoutComponent
+      {...data}
+      {...rest}
+    />
+  )
+}

package/src/pages/test.astro

@@ -1,5 +1,35 @@
 ---
-import Layout from 'fulldev-ui/layouts/Layout.astro'
+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()
 ---
 
-<Layout />
+<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,61 @@
+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,
+      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 type BlockSchema = z.infer<typeof blockSchema>

package/src/schemas/components/button.ts

@@ -1,24 +1,19 @@
 import { z } from 'astro:content'
-import pathSchema from '../utils/pathSchema'
-import globalSchema from './global'
+import { iconSchema } from './icon'
 
 export const buttonSchema = z
-  .union([pathSchema('pages'), z.object({}).passthrough()])
-  .pipe(
-    globalSchema
-      .extend({
-        slug: z
-          .string()
-          .refine(async (data) => await pathSchema('pages').parseAsync(data)),
-        text: z.string(),
-        href: z.string(),
-        icon: z.string(),
-      })
-      .partial()
-      .passthrough()
-      .merge(globalSchema)
-  )
+  .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>
-
-export default 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,18 +1,19 @@
 import { z } from 'astro:content'
-import channels from './channels'
-import logo from './logo'
-import menu from './menu'
-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,
-    menu,
+    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()
-  .optional()
+  .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,20 +1,23 @@
 import { z } from 'astro:content'
-import buttons from './buttons'
-import links from './links'
-import logo from './logo'
-import menu from './menu'
-import subheader from './subheader'
-import themer from './themer'
+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({
-    themer,
-    subheader,
-    logo,
-    buttons,
-    links,
-    menu,
+    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()
-  .optional()
+  .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>