fulldev-ui 0.5.0-beta.1 → 0.5.0-beta.11

package/src/layouts/PostLayout.astro

@@ -1,21 +1,21 @@
 ---
 import type { ComponentProps } from 'astro/types'
 import Article from 'fulldev-ui/blocks/Article.astro'
-import Intro from 'fulldev-ui/blocks/Intro.astro'
 import Sections from 'fulldev-ui/components/sections.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
 
 type Props = ComponentProps<typeof Layout>
 
-const { render, sections, ...rest } = Astro.props
+const { sections, render, toc } = Astro.props
 ---
 
 <Layout {...Astro.props}>
-  <Intro
-    align="start"
-    {...rest}
-  />
-  <Article />
+  <Article
+    {render}
+    {toc}
+  >
+    <slot name="prose" />
+  </Article>
   <Sections {sections} />
   <slot />
 </Layout>

package/src/layouts/ProductLayout.astro

@@ -1,7 +1,7 @@
 ---
 import type { ComponentProps } from 'astro/types'
 import Article from 'fulldev-ui/blocks/Article.astro'
-import Product from 'fulldev-ui/blocks/Product.astro'
+import Section from 'fulldev-ui/components/Section.astro'
 import Sections from 'fulldev-ui/components/sections.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
 
@@ -11,7 +11,10 @@ const { render, sections, ...rest } = Astro.props
 ---
 
 <Layout {...Astro.props}>
-  <Product {...rest} />
+  <Section
+    component="Product"
+    {...rest as any}
+  />
   <Article />
   <Sections {sections} />
   <slot />

package/src/schemas/components/footer.ts

@@ -22,3 +22,4 @@ export default z
     ),
   })
   .partial()
+  .passthrough()

package/src/schemas/components/header.ts

@@ -8,3 +8,4 @@ export default z
     buttons,
   })
   .partial()
+  .passthrough()

package/src/schemas/components/menu.ts

@@ -0,0 +1,13 @@
+import { z } from 'astro:content'
+import buttons from './buttons'
+import heading from './heading'
+
+export default z.array(
+  z
+    .object({
+      heading,
+      buttons,
+    })
+    .partial()
+    .passthrough()
+)

package/src/schemas/components/sidebar.ts

@@ -0,0 +1,15 @@
+import { z } from 'astro:content'
+import logo from '../components/logo'
+import menu from '../components/menu'
+import heading from './heading'
+import toc from './toc'
+
+export default z
+  .object({
+    logo,
+    heading,
+    menu,
+    toc,
+  })
+  .partial()
+  .passthrough()

package/src/schemas/components/toc.ts

@@ -0,0 +1,3 @@
+import { z } from 'astro:content'
+
+export default z.string()

package/src/schemas/pageSchema.ts

@@ -1,13 +1,21 @@
 import { getEntries, getEntry, z } from 'astro:content'
 import { assign } from 'radash'
+import fulldevConfig from 'virtual:fulldev-ui/config'
+import footer from './components/footer'
+import header from './components/header'
 import image from './components/image'
+import images from './components/images'
+import price from './components/price'
+import section from './components/section'
 import sections from './components/sections'
-import categories from './utils/categories'
+import sidebar from './components/sidebar'
+import toc from './components/toc'
 import component from './utils/component'
 import navigation from './utils/navigation'
+import parents from './utils/parents'
 import pathSchema from './utils/pathSchema'
 
-const i18n = z
+export const i18n = z
   .object({
     i18n: pathSchema('pages').optional(),
   })
@@ -19,45 +27,75 @@ const i18n = z
     return merged as typeof rest
   })
 
-const presets = z
+export const presets = z
   .object({
     presets: z.array(pathSchema('presets')).optional(),
   })
   .passthrough()
   .transform(async ({ presets, ...rest }) => {
-    if (!presets) return rest
-    const entries = await getEntries(presets)
     let mergedData = {}
-    entries.forEach(
-      (preset: any) => (mergedData = assign(mergedData, preset.data))
-    )
+
+    if (fulldevConfig.basePreset) {
+      const baseEntry = await getEntry('presets', fulldevConfig.basePreset)
+      mergedData = assign(mergedData, baseEntry?.data || {})
+    }
+
+    if (presets) {
+      const entries = await getEntries(presets)
+      entries.forEach(
+        (preset: any) => (mergedData = assign(mergedData, preset.data))
+      )
+    }
+
     mergedData = assign(mergedData, rest)
     return mergedData as typeof rest
   })
 
-export default i18n.pipe(presets).pipe(
-  z
-    .object({
-      component,
-      categories,
-      theme: z.enum(['light', 'dark']),
-      lang: z.string(),
-      seo: z
-        .object({
-          title: z.string().optional(),
-          description: z.string().optional(),
-        })
-        .optional(),
-      title: z.string(),
-      description: z.string().optional(),
-      image,
-      sections,
-      header: z.any(),
-      footer: z.any(),
-      navigation,
-      toc: z.any(),
-      sidebar: z.any(),
-    })
-    .partial()
-    .passthrough()
-)
+export const basePreset = z
+  .object({})
+  .passthrough()
+  .transform(async (data) => {
+    if (!fulldevConfig.basePreset) return data
+    const baseEntry = await getEntry('presets', fulldevConfig.basePreset)
+    const mergedData = assign(baseEntry?.data ?? {}, data)
+    return mergedData as typeof data
+  })
+
+export const page = z
+  .object({
+    component,
+    parents,
+    theme: z.enum(['light', 'dark']),
+    lang: z.string(),
+    seo: z
+      .object({
+        title: z.string().optional(),
+        description: z.string().optional(),
+      })
+      .optional(),
+    title: z.string(),
+    description: z.string().optional(),
+    image,
+    images,
+    section,
+    sections,
+    footer,
+    header: header,
+    sidebar: sidebar,
+    navigation,
+    toc,
+    price,
+    code: z.any(),
+    sizes: z.any(),
+    banner: z.any(),
+    _schema: z.any(),
+    uitverkocht: z.any(),
+    rating: z.any(),
+    variants: z.any(),
+    heading: z.any(),
+    href: z.any(),
+  })
+  .partial()
+  .strict()
+
+export default i18n.pipe(basePreset).pipe(presets).pipe(page)

package/src/schemas/presetSchema.ts

@@ -1,29 +1,3 @@
-import { z } from 'astro:content'
-import image from './components/image'
-import sections from './components/sections'
-import categories from './utils/categories'
-import component from './utils/component'
+import { page } from './pageSchema'
 
-export default z
-  .object({
-    component,
-    categories,
-    theme: z.enum(['light', 'dark']),
-    lang: z.string(),
-    seo: z
-      .object({
-        title: z.string().optional(),
-        description: z.string().optional(),
-      })
-      .optional(),
-    title: z.string(),
-    description: z.string().optional(),
-    image,
-    sections,
-    header: z.any(),
-    footer: z.any(),
-    navigation: z.any(),
-    toc: z.any(),
-    sidebar: z.any(),
-  })
-  .partial()
+export default page

package/src/schemas/utils/navigation.ts

@@ -1,53 +1,8 @@
-// import { z } from 'astro:content'
-// import button from '../components/button'
-// import buttons from '../components/buttons'
-// import heading from '../components/heading'
-// import logo from '../components/logo'
-
-// export default z.object({
-//   logo,
-//   buttons: z.array(
-//     button.or(
-//       z.object({
-//         heading,
-//         buttons,
-//       })
-//     )
-//   ),
-// })
-
 import { z } from 'astro:content'
-import pathSchema from '../utils/pathSchema'
-
-const button = pathSchema('pages').or(
-  z
-    .object({
-      text: z.string(),
-      href: z.string(),
-      heading: z.never(),
-      buttons: z.never(),
-    })
-    .partial()
-    .passthrough()
-)
-
-const group = z
-  .object({
-    heading: z.string(),
-    buttons: z.array(button),
-    text: z.never(),
-    href: z.never(),
-  })
-  .partial()
-  .passthrough()
+import header from '../components/header'
+import sidebar from '../components/sidebar'
 
-export default z
-  .object({
-    logo: z.string(),
-    search: z.boolean(),
-    sidebar: z.boolean(),
-    toc: z.boolean(),
-    buttons: z.array(button.or(group)),
-  })
-  .partial()
-  .passthrough()
+export default sidebar.merge(header).extend({
+  header: z.boolean().optional(),
+  sidebar: z.boolean().optional(),
+})

package/src/stores/cart.ts

@@ -0,0 +1,23 @@
+import { persistentAtom } from '@nanostores/persistent'
+import { computed } from 'nanostores'
+
+// type Item = CollectionEntry<'products'>['data'] & {
+//   quantity: number
+// }
+
+type Item = any
+
+export const $cart = persistentAtom<Item[] | []>('cart', [], {
+  encode: JSON.stringify,
+  decode: JSON.parse,
+})
+
+// export const cartIsOpen = atom(false)
+
+export const $totalPrice = computed($cart, ($cart) =>
+  $cart.reduce((a, b) => +a + b.price * b.quantity, 0)
+)
+
+// export const totalQuantity = computed(cart, ($cart) =>
+//   $cart.reduce((a, b) => +a + b.quantity, 0)
+// )

package/src/utils/cart.ts

@@ -0,0 +1,32 @@
+const slugify = (input: string): string => {
+  return input
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+export const generateProductId = (
+  slug: string,
+  variants?: string[] | undefined
+): string => {
+  const slugified = slugify(slug)
+
+  if (variants && variants.length > 0)
+    return `${slugified}--${variants.map((variant) => slugify(variant)).join('--')}`
+
+  return slugified
+}
+
+export const generateProductName = (
+  title: string,
+  variants?: string[] | undefined
+): string => {
+  if (variants && variants.length > 0)
+    return `${title} / ${variants.join(' / ')}`
+
+  return title
+}
+
+export const formatPrice = (price: number): string => {
+  return `€${price?.toFixed(2).replace('.', ',')}`
+}

package/src/utils/{getChildPages.ts → getFolderChildren.ts}

@@ -1,7 +1,9 @@
 import { getCollection, type CollectionEntry } from 'astro:content'
 
 // Records that are in a folder with the current page's slug
-export const getChildPages = async (slug: CollectionEntry<'pages'>['slug']) =>
+export const getFolderChildren = async (
+  slug: CollectionEntry<'pages'>['slug']
+) =>
   (
     await getCollection(
       'pages',

package/src/utils/{getCategoryPages.ts → getReferenceChildren.ts}

@@ -1,11 +1,14 @@
 import { getCollection, type CollectionEntry } from 'astro:content'
 
 // Pages that reference the current page
-export const getCategoryPages = async (
+export const getReferenceChildren = async (
   slug: CollectionEntry<'pages'>['slug']
 ) =>
   (
     await getCollection('pages', (page) =>
-      page.data?.categories?.some((p: any) => p.slug === slug)
+      page.data?.parents?.some((p: any) => p.slug === slug)
     )
-  )?.map((page) => page.data)
+  )?.map(({ slug, data }) => ({
+    ...data,
+    href: `/${slug}/`,
+  }))

package/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "extends": "astro/tsconfigs/strictest",
+  "include": ["src", "astro.config.ts"],
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
@@ -8,7 +9,4 @@
       ]
     }
   },
-  "exclude": [
-    "dist"
-  ]
 }

package/src/components/experimental/GalleryVertical.astro

@@ -1,161 +0,0 @@
----
-import Icon from 'fulldev-ui/components/Icon.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-
-const { images, direction } = Astro.props
----
-
-<script>
-  const carousel = document.querySelector('.gallery .large-carousel')
-  const icon = document.querySelector('.gallery .icon')
-  const smallImages = document.querySelectorAll('.gallery .small-image')
-
-  carousel &&
-    icon?.addEventListener('click', () => {
-      const carouselWidth = (carousel as HTMLElement).offsetWidth
-      const currentScroll = carousel.scrollLeft
-      const maxScroll = carousel.scrollWidth - carouselWidth
-
-      let scrollAmount = currentScroll + carouselWidth
-      if (scrollAmount > maxScroll) {
-        scrollAmount = 0 // Reset to beginning if we're at the end
-      }
-
-      carousel.scrollTo({
-        left: scrollAmount,
-        behavior: 'smooth',
-      })
-    })
-
-  carousel &&
-    smallImages.forEach((image, i) => {
-      image.addEventListener('click', () => {
-        const imageWidth = (carousel as HTMLElement).offsetWidth
-        carousel.scrollTo({
-          left: i * imageWidth,
-          behavior: 'smooth',
-        })
-      })
-    })
-</script>
-
-<div
-  class:list={[
-    'full',
-    'gallery',
-    {
-      [`direction-${direction}`]: direction,
-    },
-  ]}
->
-  <div class="large-container">
-    <div class="large-carousel">
-      {
-        images?.map((image: any) => (
-          <Image
-            class="large-image"
-            src={image}
-          />
-        ))
-      }
-    </div>
-    {
-      images?.length > 1 && (
-        <Icon
-          class="icon"
-          name="swipe-left"
-        />
-      )
-    }
-  </div>
-  <div class="small-carousel">
-    {
-      images?.length > 1 &&
-        images.map((image: any) => (
-          <Image
-            class="small-image"
-            src={image}
-          />
-        ))
-    }
-  </div>
-</div>
-
-<style is:global lang="scss">
-  .gallery {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    gap: var(--space-1);
-
-    .large-container {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      &:hover .icon {
-        opacity: 1;
-      }
-
-      .icon {
-        position: absolute;
-        right: var(--space-3);
-        opacity: 0.5;
-        animation: swipe-icon 1.6s ease-in-out infinite;
-        transition: opacity 0.2s ease-in-out;
-        font-size: calc(var(--text-2) * 1.7);
-      }
-
-      @keyframes swipe-icon {
-        0%,
-        100% {
-          right: var(--space-3);
-        }
-        50% {
-          right: calc(var(--space-3) * 2);
-        }
-      }
-    }
-
-    .small-carousel,
-    .large-carousel {
-      --column-width: 100%;
-      display: flex;
-      position: relative;
-      flex-direction: row;
-      align-items: flex-start;
-      gap: var(--space-4);
-
-      box-sizing: border-box;
-      padding-bottom: var(--space-4);
-      width: 100%;
-      overflow-x: auto;
-      scroll-behavior: smooth;
-      scroll-snap-type: x mandatory;
-
-      > .root {
-        flex-grow: 0;
-        flex-shrink: 0;
-        width: var(--column-width);
-        scroll-snap-align: center;
-      }
-
-      &.position-inset {
-        margin-right: calc(var(--inner-x) * -1);
-        margin-left: calc(var(--inner-x) * -1);
-        padding-right: var(--inner-x);
-        padding-left: var(--inner-x);
-        width: calc(100% + var(--inner-x) * 2);
-      }
-    }
-
-    .small-carousel {
-      --column-width: var(--space-7);
-    }
-
-    .small-image:hover {
-      opacity: 0.8;
-      cursor: pointer;
-    }
-  }
-</style>

package/src/content/pages/layouts/layout.mdx

@@ -1,21 +0,0 @@
----
-presets: [docs, blocks]
-
-title: Layout
----
-
-```astro live
----
-import Hero from 'fulldev-ui/blocks/Hero.astro'
-import Layout from 'fulldev-ui/layouts/Layout.astro'
----
-
-<Layout>
-  <Hero
-    heading="Layout"
-    text="The Layout component is used to wrap the content of a page."
-    align="center"
-    frame="viewport"
-  />
-</Layout>
-```

package/src/content/pages/layouts/pagelayout.mdx

@@ -1,21 +0,0 @@
----
-presets: [docs, blocks]
-
-title: PageLayout
----
-
-```astro live
----
-import Hero from 'fulldev-ui/blocks/Hero.astro'
-import PageLayout from 'fulldev-ui/layouts/PageLayout.astro'
----
-
-<PageLayout>
-  <Hero
-    heading="PageLayout"
-    text="The PageLayout component is used to wrap the content of a page."
-    align="center"
-    frame="viewport"
-  />
-</PageLayout>
-```