fulldev-ui 0.6.0-beta.7 → 0.6.0-beta.9

package/src/layouts/Block.astro

@@ -0,0 +1,81 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Footer from 'fulldev-ui/blocks/Footer.astro'
+import Header from 'fulldev-ui/blocks/Header.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Menus from 'fulldev-ui/components/Menus.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Layout from 'fulldev-ui/structures/Layout.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Sidebar from 'fulldev-ui/structures/Sidebar.astro'
+
+type Props = ComponentProps<typeof Layout> &
+  PageSchema & {
+    render: CollectionEntry<'pages'>['render']
+  }
+
+const { header, sidebar, render, title, description, footer } = Astro.props
+
+const { Content } = await render()
+---
+
+<Layout
+  class:list="block"
+  {...Astro.props}
+>
+  <Header
+    {...sidebar}
+    {...header}
+  />
+  <Container
+    class:list="block-main"
+    as="main"
+  >
+    <Sidebar>
+      <Menus
+        size="sm"
+        menus={sidebar?.menus}
+      />
+    </Sidebar>
+    <Container class:list="block-container">
+      <Prose class:list="block-prose">
+        <Heading
+          size="4xl"
+          as="h1"
+          text={title}
+        />
+        <Paragraph
+          muted
+          text={description}
+        />
+        <Content />
+      </Prose>
+    </Container>
+  </Container>
+  <Footer {...footer} />
+</Layout>
+
+<style is:global>
+  @layer fulldev {
+    .block {
+      .block-main {
+        @apply flex w-full items-start justify-between !px-0;
+      }
+
+      .block-container {
+        max-width: calc(100% - var(--sidebar-width)) !important;
+      }
+
+      .sidebar {
+        @apply hidden lg:flex;
+      }
+
+      .block-prose {
+        @apply mx-auto max-w-none py-8;
+      }
+    }
+  }
+</style>

package/src/layouts/Category.astro

@@ -1,14 +1,14 @@
----
+<!-- ---
 import type { ComponentProps } from 'astro/types'
 import type { CollectionEntry } from 'astro:content'
 import { getCollection } from 'astro:content'
 import Products1 from 'fulldev-ui/blocks/Products1.astro'
 import Carousel from 'fulldev-ui/components/Carousel.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 Select from 'fulldev-ui/components/Select.astro'
 import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+import Layout from 'fulldev-ui/structures/Layout.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
 import { getHref } from 'fulldev-ui/utils/getHref.ts'
 
 interface Props extends ComponentProps<typeof Layout>, PageSchema {
@@ -77,10 +77,10 @@ const sorts = [
   class:list="category"
   {...Astro.props}
 >
-  <!-- <Intro1
+  <Intro1
     heading={title}
     text={description}
-  /> -->
+  />
   <Carousel>
     {
       categories.map((category) => (
@@ -133,4 +133,4 @@ const sorts = [
       @apply text-sm text-muted-foreground;
     }
   }
-</style>
+</style> -->

package/src/layouts/Doc.astro

@@ -3,23 +3,34 @@ import type { ComponentProps } from 'astro/types'
 import type { CollectionEntry } from 'astro:content'
 import Footer from 'fulldev-ui/blocks/Footer.astro'
 import Header from 'fulldev-ui/blocks/Header.astro'
-import Container from 'fulldev-ui/components/Container.astro'
-import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
-import Layout from 'fulldev-ui/components/Layout.astro'
+import Menu from 'fulldev-ui/components/Menu.astro'
+import Menus from 'fulldev-ui/components/Menus.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Prose from 'fulldev-ui/components/Prose.astro'
-import Sidebar from 'fulldev-ui/components/Sidebar.astro'
-import Toc from 'fulldev-ui/components/Toc.astro'
 import type { PageSchema } from 'fulldev-ui/schemas/page.ts'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Layout from 'fulldev-ui/structures/Layout.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Sidebar from 'fulldev-ui/structures/Sidebar.astro'
 
-interface Props extends ComponentProps<typeof Layout>, PageSchema {
-  render: CollectionEntry<'pages'>['render']
-}
+type Props = ComponentProps<typeof Layout> &
+  PageSchema & {
+    render: CollectionEntry<'pages'>['render']
+  }
 
 const { header, sidebar, render, title, description, footer } = Astro.props
 
-const { Content } = await render()
+const { Content, headings } = await render()
+
+const filteredHeadings = headings?.filter(
+  (heading: any) => heading.depth >= 2 && heading.depth <= 4
+)
+
+const links = filteredHeadings?.map((button: any) => ({
+  text: button.text,
+  href: `#${button.slug}`,
+  class: `depth-${button.depth}`,
+}))
 ---
 
 <Layout
@@ -30,27 +41,34 @@ const { Content } = await render()
     {...sidebar}
     {...header}
   />
-  <Container class:list="doc-container">
-    <Sidebar {...sidebar} />
-    <Element
-      class:list="doc-main"
-      as="main"
-    >
+  <Container as="main">
+    <Sidebar>
+      <Menus
+        size="sm"
+        menus={sidebar?.menus}
+      />
+    </Sidebar>
+    <Container>
       <Prose>
         <Heading
-          as="h1"
           size="4xl"
+          as="h1"
           text={title}
         />
         <Paragraph
           muted
-          size="lg"
           text={description}
         />
         <Content />
       </Prose>
-      <Toc {render} />
-    </Element>
+    </Container>
+    <Sidebar class:list="doc-toc">
+      <Menu
+        size="sm"
+        heading={title}
+        {links}
+      />
+    </Sidebar>
   </Container>
   <Footer {...footer} />
 </Layout>
@@ -58,12 +76,20 @@ const { Content } = await render()
 <style is:global>
   @layer fulldev {
     .doc {
-      .doc-container {
-        @apply flex gap-x-gutter;
+      main {
+        @apply flex w-full items-start justify-between !px-0;
+      }
+
+      .sidebar {
+        @apply hidden lg:flex;
+      }
+
+      .doc-toc {
+        @apply hidden xl:flex;
       }
 
-      .doc-main {
-        @apply flex grow justify-evenly gap-x-gutter;
+      .prose {
+        @apply mx-auto py-8;
       }
     }
   }

package/src/layouts/Job.astro

@@ -6,13 +6,14 @@ import Content3 from 'fulldev-ui/blocks/Content3.astro'
 import Footer from 'fulldev-ui/blocks/Footer.astro'
 import Header from 'fulldev-ui/blocks/Header.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'
+import Layout from 'fulldev-ui/structures/Layout.astro'
 import { getHref } from 'fulldev-ui/utils/getHref.ts'
 
-interface Props extends ComponentProps<typeof Layout>, PageSchema {
-  render: CollectionEntry<'pages'>['render']
-}
+type Props = ComponentProps<typeof Layout> &
+  PageSchema & {
+    render: CollectionEntry<'pages'>['render']
+  }
 
 const {
   title,
@@ -24,7 +25,6 @@ const {
   sidebar,
   render,
   parents,
-  blocks,
   footer,
 } = Astro.props
 

package/src/layouts/Jobs.astro

@@ -1,33 +1,33 @@
 ---
 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'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Layout from 'fulldev-ui/structures/Layout.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
 
-interface Props extends ComponentProps<typeof Layout>, PageSchema {
-  slug: CollectionEntry<'pages'>['slug']
-  render: CollectionEntry<'pages'>['render']
-}
+type Props = 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 }))
+// const children = (
+//   await getCollection('pages', ({ data }) =>
+//     data.parents?.some((p) => p.slug.includes(slug))
+//   )
+// )?.map(({ collection, slug }) => ({ collection, slug }))
 ---
 
 <Layout
@@ -48,7 +48,7 @@ const children = (
         heading={title}
         paragraph={description}
       />
-      <Jobs1 pages={children} />
+      <!-- <Jobs1 pages={children} /> -->
       <Prose>
         <Content />
       </Prose>

package/src/layouts/Page.astro

@@ -5,12 +5,12 @@ 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'
+import Layout from 'fulldev-ui/structures/Layout.astro'
 
-interface Props extends ComponentProps<typeof Layout>, PageSchema {}
+type Props = ComponentProps<typeof Layout> & PageSchema
 
-const { banner, sidebar, header, blocks, footer } = Astro.props
+const { banner, sidebar, header, sections, footer } = Astro.props
 ---
 
 <Layout
@@ -23,7 +23,7 @@ const { banner, sidebar, header, blocks, footer } = Astro.props
     {...header}
   />
   <Element as="main">
-    {blocks?.map((block) => <Block {...block} />)}
+    {sections?.map((section) => <Block {...section} />)}
   </Element>
   <Footer {...footer} />
 </Layout>

package/src/layouts/Post.astro

@@ -6,12 +6,13 @@ 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'
+import Layout from 'fulldev-ui/structures/Layout.astro'
 
-interface Props extends ComponentProps<typeof Layout>, PageSchema {
-  render: CollectionEntry<'pages'>['render']
-}
+type Props = ComponentProps<typeof Layout> &
+  PageSchema & {
+    render: CollectionEntry<'pages'>['render']
+  }
 
 const {
   title,
@@ -20,7 +21,7 @@ const {
   button,
   header,
   sidebar,
-  blocks,
+  sections,
   footer,
   render,
 } = Astro.props
@@ -46,7 +47,7 @@ const { Content, headings } = await render()
     >
       <Content />
     </Content1>
-    {blocks?.map((block) => <Block {...block} />)}
+    {sections?.map((section) => <Block {...section} />)}
   </Element>
   <Footer {...footer} />
 </Layout>

package/src/layouts/Product.astro

@@ -1,4 +1,5 @@
 ---
+// @ts-nocheck
 import type { ComponentProps } from 'astro/types'
 import { getImage } from 'astro:assets'
 import type { CollectionEntry } from 'astro:content'
@@ -8,11 +9,11 @@ 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 type { PageSchema } from 'fulldev-ui/schemas/page'
+import Layout from 'fulldev-ui/structures/Layout.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
 
 interface Props extends ComponentProps<typeof Layout>, PageSchema {
   render: CollectionEntry<'pages'>['render']

package/src/schemas/badge.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'astro/types'
+import { z } from 'astro:content'
+import type Badge from 'fulldev-ui/components/Badge.astro'
+
+export const badgeSchema = z
+  .object({
+    icon: z.string().optional(),
+    text: z.string().optional(),
+    href: z.string().optional(),
+    target: z.literal('_blank').optional(),
+    size: z.enum(['sm', 'md', 'lg']).optional(),
+    variant: z.enum(['primary', 'secondary', 'outline']).optional(),
+  })
+  .strict() satisfies z.ZodType<ComponentProps<typeof Badge>>

package/src/schemas/block.ts

@@ -0,0 +1,58 @@
+import { z } from 'astro:content'
+import { badgeSchema } from 'fulldev-ui/schemas/badge.ts'
+import { buttonSchema } from 'fulldev-ui/schemas/button.ts'
+import { channelSchema } from 'fulldev-ui/schemas/channel.ts'
+import { imageSchema } from 'fulldev-ui/schemas/image.ts'
+import { linkSchema } from 'fulldev-ui/schemas/link.ts'
+import { logoSchema } from 'fulldev-ui/schemas/logo.ts'
+import { menuSchema } from 'fulldev-ui/schemas/menu.ts'
+import { pathSchema } from 'fulldev-ui/schemas/path.ts'
+
+export const blockSchema = z
+  .object({
+    _block: z.string().optional(),
+    dark: z.boolean().optional(),
+    themer: z.boolean().optional(),
+    search: z.boolean().optional(),
+    cart: z.boolean().optional(),
+    text: z.string().optional(),
+    content: z.string().optional(),
+    tagline: z.string().optional(),
+    heading: z.string().optional(),
+    paragraph: z.string().optional(),
+    list: z.string().array().optional(),
+    socials: z.string().array().optional(),
+    logo: logoSchema.optional(),
+    link: linkSchema.optional(),
+    links: linkSchema.array().optional(),
+    menus: menuSchema.array().optional(),
+    badge: badgeSchema.optional(),
+    badges: badgeSchema.array().optional(),
+    button: buttonSchema.optional(),
+    buttons: buttonSchema.array().optional(),
+    image: imageSchema.optional(),
+    images: imageSchema.array().optional(),
+    channels: channelSchema.array().optional(),
+    pages: pathSchema('pages').array().optional(),
+    products: pathSchema('pages').array().optional(),
+    cards: z
+      .object({
+        icon: z.string().optional(),
+        rating: z.number().optional(),
+        tagline: z.string().optional(),
+        heading: z.string().optional(),
+        paragraph: z.string().optional(),
+        list: z.string().array().optional(),
+        badge: badgeSchema.optional(),
+        badges: badgeSchema.array().optional(),
+        button: buttonSchema.optional(),
+        buttons: buttonSchema.array().optional(),
+        image: imageSchema.optional(),
+      })
+      .strict()
+      .array()
+      .optional(),
+  })
+  .strict()
+
+export type BlockSchema = z.infer<typeof blockSchema>

package/src/schemas/{components/button.ts → button.ts}

@@ -1,18 +1,14 @@
 import { z } from 'astro:content'
-import { iconSchema } from './icon'
 
 export const buttonSchema = z
   .object({
-    icon: iconSchema.shape.name,
+    icon: z.string().optional(),
     text: z.string().optional(),
     href: z.string().optional(),
     target: z.literal('_blank').optional(),
-    size: z.enum(['sm', 'md', 'lg']).default('md').optional(),
+    size: z.enum(['sm', 'md', 'lg']).optional(),
     reverse: z.boolean().optional(),
-    variant: z
-      .enum(['primary', 'secondary', 'outline', 'ghost'])
-      .default('primary')
-      .optional(),
+    variant: z.enum(['primary', 'secondary', 'outline', 'ghost']).optional(),
   })
   .strict()
 

package/src/schemas/channel.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'astro/types'
+import { z } from 'astro:content'
+import Channel from 'fulldev-ui/components/Channel.astro'
+
+export const channelSchema = z
+  .object({
+    icon: z.string().optional(),
+    heading: z.string().optional(),
+    text: z.string().optional(),
+    href: z.string().optional(),
+    size: z.enum(['sm', 'md', 'lg']).optional(),
+    variant: z.enum(['secondary', 'outline']).optional(),
+  })
+  .strict() satisfies z.ZodType<ComponentProps<typeof Channel>>

package/src/schemas/checkbox.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'astro/types'
+import { z } from 'astro:content'
+import type Checkbox from 'fulldev-ui/components/Checkbox.astro'
+
+export const checkboxSchema = z
+  .object({
+    name: z.string().optional(),
+    label: z.string().optional(),
+    id: z.string().optional(),
+    value: z.string().optional(),
+    size: z.enum(['sm', 'md', 'lg']).optional(),
+  })
+  .strict() satisfies z.ZodType<ComponentProps<typeof Checkbox>>

package/src/schemas/footer.ts

@@ -0,0 +1,17 @@
+import { z } from 'astro:content'
+import { channelSchema } from 'fulldev-ui/schemas/channel.ts'
+import { logoSchema } from 'fulldev-ui/schemas/logo.ts'
+import { menuSchema } from 'fulldev-ui/schemas/menu.ts'
+
+export const footerSchema = z
+  .object({
+    logo: logoSchema.optional(),
+    heading: z.string().optional(),
+    paragraph: z.string().optional(),
+    socials: z.string().url().array().optional(),
+    channels: channelSchema.array().optional(),
+    menus: menuSchema.array().optional(),
+  })
+  .strict()
+
+export type FooterSchema = z.infer<typeof footerSchema>

package/src/schemas/{components/head.ts → head.ts}

@@ -1,17 +1,17 @@
+import type { ComponentProps } from 'astro/types'
 import { z } from 'astro:content'
-import { imageSchema } from 'fulldev-ui/schemas/components/image.ts'
+import type Head from 'fulldev-ui/components/Head.astro'
+import { imageSchema } from 'fulldev-ui/schemas/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(),
+    theme: z.enum(['light', 'dark', 'system']).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>
+  .strict() satisfies z.ZodType<ComponentProps<typeof Head>>

package/src/schemas/header.ts

@@ -0,0 +1,21 @@
+import { z } from 'astro:content'
+import { buttonSchema } from 'fulldev-ui/schemas/button.ts'
+import { linkSchema } from 'fulldev-ui/schemas/link.ts'
+import { logoSchema } from 'fulldev-ui/schemas/logo.ts'
+import { menuSchema } from 'fulldev-ui/schemas/menu.ts'
+
+export const headerSchema = z
+  .object({
+    logo: logoSchema.optional(),
+    heading: z.string().optional(),
+    links: linkSchema.array().optional(),
+    socials: z.string().array().optional(),
+    buttons: buttonSchema.array().optional(),
+    menus: menuSchema.array().optional(),
+    themer: z.boolean().optional(),
+    cart: z.boolean().optional(),
+    search: z.boolean().optional(),
+  })
+  .strict()
+
+export type HeaderSchema = z.infer<typeof headerSchema>

package/src/schemas/{components/image.ts → image.ts}

@@ -1,4 +1,6 @@
+import type { ComponentProps } from 'astro/types'
 import { z } from 'astro:content'
+import type Image from 'fulldev-ui/components/Image.astro'
 
 // const imagePath = z.preprocess((data: unknown) => {
 //   if (typeof data === 'string') {
@@ -25,16 +27,27 @@ import { z } from 'astro:content'
 //   )
 //   .optional()
 
+// export const imageSchema = z
+//   .object({
+//     src: z.string().optional(),
+//     alt: z.string().optional(),
+//     width: z.number().optional(),
+//     height: z.number().optional(),
+//   })
+//   .strict() satisfies z.ZodType<ComponentProps<typeof Image>>
+
+const image = z
+  .object({
+    src: z.string().optional(),
+    alt: z.string().optional(),
+    width: z.number().optional(),
+    height: z.number().optional(),
+  })
+  .strict() satisfies z.ZodType<ComponentProps<typeof Image>>
+
 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()
+    image
   )
-  .optional()
+  .optional() as z.ZodType<ComponentProps<typeof Image>>

package/src/schemas/input.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'astro/types'
+import { z } from 'astro:content'
+import Input from 'fulldev-ui/components/Input.astro'
+
+export const inputSchema = z
+  .object({
+    icon: z.string().optional(),
+    label: z.string().optional(),
+    placeholder: z.string().optional(),
+    value: z.string().optional(),
+    size: z.enum(['sm', 'md', 'lg']).optional(),
+  })
+  .strict() satisfies z.ZodType<ComponentProps<typeof Input>>

package/src/schemas/link.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'astro/types'
+import { z } from 'astro:content'
+import Link from 'fulldev-ui/components/Link.astro'
+
+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']).optional(),
+    variant: z.enum(['primary', 'underline', 'muted']).optional(),
+  })
+  .strict() satisfies z.ZodType<ComponentProps<typeof Link>>