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

package/src/schemas/components/rating.ts

@@ -1,15 +1,10 @@
 import { z } from 'astro:content'
-import avatar from './avatar'
-import avatars from './avatars'
-import text from './text'
 
-export default z.number().or(
-  z
-    .object({
-      value: z.number(),
-      avatar,
-      avatars,
-      text,
-    })
-    .partial()
-)
+export const ratingSchema = z
+  .object({
+    score: z.number().optional(),
+    size: z.enum(['sm', 'md', 'lg']).default('md').optional(),
+  })
+  .strict()
+
+export type RatingSchema = z.infer<typeof ratingSchema>

package/src/schemas/components/sidebar.ts

@@ -1,15 +1,18 @@
 import { z } from 'astro:content'
-import logo from '../components/logo'
-import menu from '../components/menu'
-import heading from './heading'
-import toc from './toc'
+import { logoSchema } from '../components/logo'
+import { headingSchema } from './heading'
+import { linkSchema } from './link'
+import { menuSchema } from './menu'
 
-export default z
+export const sidebarSchema = z
   .object({
-    logo,
-    heading,
-    menu,
-    toc,
+    company: z.string().optional(),
+    logo: logoSchema.optional(),
+    heading: headingSchema.shape.text,
+    themer: z.boolean().optional(),
+    menus: menuSchema.array().optional(),
+    links: linkSchema.array().optional(),
   })
-  .partial()
-  .passthrough()
+  .strict()
+
+export type SidebarSchema = z.infer<typeof sidebarSchema>

package/src/schemas/components/social.ts

@@ -1,3 +1,18 @@
 import { z } from 'astro:content'
+import { iconSchema } from './icon'
 
-export default z.string()
+export const socialSchema = z
+  .object({
+    icon: iconSchema.optional(),
+    text: z.string().optional(),
+    href: z.string().optional(),
+    target: z.literal('_blank').default('_blank').optional(),
+    size: z.enum(['sm', 'md', 'lg']).default('sm').optional(),
+    variant: z
+      .enum(['primary', 'secondary', 'outline', 'ghost'])
+      .default('secondary')
+      .optional(),
+  })
+  .strict()
+
+export type ButtonSchema = z.infer<typeof socialSchema>

package/src/schemas/components/tagline.ts

@@ -1,3 +1,9 @@
 import { z } from 'astro:content'
 
-export default z.string()
+export const taglineSchema = z
+  .object({
+    text: z.string().optional(),
+  })
+  .strict()
+
+export type TaglineSchema = z.infer<typeof taglineSchema>

package/src/schemas/imageSchema.ts

@@ -1,12 +1,41 @@
 import { z } from 'astro:content'
 
-export default z
+export const imageSchema = z
   .object({
     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()
+
+export type ImageSchema = z.infer<typeof imageSchema>
+
+export const imageLoader = async () => {
+  const files = import.meta.glob('/src/images/**/*.{webp,png,jpg,jpeg,svg}', {
+    eager: true,
+  })
+  const entries = import.meta.glob('/src/images/**/*.{yml,yaml,json}', {
+    eager: true,
+  })
+
+  const allImages = Object.entries(files).map(([src, file]) => {
+    const id = src.split('/images/').pop()
+    const matchPath = Object.keys(entries).find(
+      (entry) => entry.split('.').shift() === src
+    ) as any
+    const matchFile = entries[matchPath]
+    const matchData = matchFile ? (matchFile as any).default : {}
+    const fileData = file ? (file as any).default : {}
+    return {
+      id,
+      ...fileData,
+      src,
+      ...matchData,
+    }
+  })
+
+  return allImages as any
+}

package/src/schemas/page.ts

@@ -0,0 +1,39 @@
+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(),
+    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/stores/cart.svelte.ts

@@ -0,0 +1,79 @@
+import { derived, writable } from 'svelte/store'
+
+export type CartItem = {
+  uid: string
+  quantity: number
+  slug: string
+  title: string
+  price?: number | undefined
+  image?: string | undefined
+  variants?:
+    | {
+        [k: string]: string | undefined
+      }
+    | undefined
+}
+
+export type Cart = CartItem[]
+
+const isServer = import.meta.env.SSR
+const storageJson = !isServer && localStorage.getItem('cart')
+const storageData = storageJson ? JSON.parse(storageJson) : []
+
+export const cart = writable<Cart>(storageData)
+
+cart.subscribe((newCart) => {
+  if (isServer) return
+  const json = JSON.stringify(newCart)
+  localStorage.setItem('cart', json)
+})
+
+export const getUid = (
+  slug: CartItem['slug'],
+  variants?: CartItem['variants']
+) => (variants ? `${slug}-${Object.values(variants)?.join('-')}` : slug)
+
+export const getItemIndex = (currentCart: Cart, uid: CartItem['uid']) => {
+  const index = currentCart.findIndex((i) => i.uid === uid)
+  if (index === -1) throw new Error(`Item with uid ${uid} not found`)
+  return index
+}
+
+export const addItem = (item: CartItem) =>
+  cart.update((currentCart) => [...currentCart, item])
+
+export const removeItem = (uid: CartItem['uid']) =>
+  cart.update((currentCart) => {
+    const index = getItemIndex(currentCart, uid)
+    currentCart.splice(index, 1)
+    return [...currentCart]
+  })
+
+export const updateQuantity = (
+  uid: CartItem['uid'],
+  quantity: CartItem['quantity']
+) =>
+  cart.update((currentCart) => {
+    const index = getItemIndex(currentCart, uid)
+    if (currentCart[index]) currentCart[index].quantity = quantity
+    return [...currentCart]
+  })
+
+export const openCart = () => {
+  const cartDialog = document.querySelector('dialog#cart')
+  if (cartDialog instanceof HTMLDialogElement) cartDialog.showModal()
+}
+
+export const closeCart = () => {
+  const cartDialog = document.querySelector('dialog#cart')
+  if (cartDialog instanceof HTMLDialogElement) cartDialog.close()
+}
+
+export const totalPrice = derived(cart, ($cart) => {
+  console.log('DERIVED', $cart)
+  return $cart.length
+  // return $cart.reduce(
+  //   (acc, item) => acc + (item.price || 0) * (item.quantity || 0),
+  //   0
+  // )
+})

package/src/stores/cart.ts

@@ -1,23 +1,76 @@
 import { persistentAtom } from '@nanostores/persistent'
 import { computed } from 'nanostores'
 
-// type Item = CollectionEntry<'products'>['data'] & {
-//   quantity: number
-// }
+type Item = {
+  slug: string
+  title: string
+  price: number
+  image: string
+  quantity: number
+  variants: string[]
+}
 
-type Item = any
+type Cart = Item[] | []
 
-export const $cart = persistentAtom<Item[] | []>('cart', [], {
+export const $cart = persistentAtom<Cart>('cart', [], {
   encode: JSON.stringify,
   decode: JSON.parse,
 })
 
-// export const cartIsOpen = atom(false)
+// for svelte files
+export const cart = $cart
+
+export const getCart = () => $cart.get()
+
+export const setCart = (cart: Cart) => $cart.set(cart)
+
+export const removeItem = (slug: string) => {
+  const currentCart = getCart()
+  const newCart = [...currentCart]
+  const index = currentCart.findIndex((item) => item.slug === slug)
+  newCart.splice(index, 1)
+  $cart.set(newCart)
+}
+
+export const addItem = (item: Item) => {
+  const currentCart = getCart()
+  const newCart = [...currentCart]
+  const index = currentCart.findIndex(
+    (i) => i.slug === item.slug && i.variants.join() === item.variants.join()
+  )
+  if (index === -1) newCart.push(item)
+  else {
+    let newItem = { ...newCart[index] } as Item
+    newItem.quantity += item.quantity
+    newCart[index] = newItem
+  }
+  setCart(newCart)
+}
+
+export const updateQuantity = (slug: string, quantity: number) => {
+  const currentCart = getCart()
+  const newCart = [...currentCart]
+  const index = currentCart.findIndex((item) => item.slug === slug)
+  let newItem = { ...newCart[index] } as Item
+  newItem.quantity = quantity
+  newCart[index] = newItem
+  setCart(newCart)
+}
 
 export const $totalPrice = computed($cart, ($cart) =>
   $cart.reduce((a, b) => +a + b.price * b.quantity, 0)
 )
 
+export const openCart = () => {
+  const cartDialog = document.querySelector('dialog#cart')
+  if (cartDialog instanceof HTMLDialogElement) cartDialog.showModal()
+}
+
+export const closeCart = () => {
+  const cartDialog = document.querySelector('dialog#cart')
+  if (cartDialog instanceof HTMLDialogElement) cartDialog.close()
+}
+
 // export const totalQuantity = computed(cart, ($cart) =>
 //   $cart.reduce((a, b) => +a + b.quantity, 0)
 // )

package/src/types/global-props.ts

@@ -5,12 +5,3 @@ export type GlobalProps = {
   size?: 'sm' | 'md' | 'lg' | string | number | null | undefined
   contrast?: boolean | undefined
 }
-
-// declare global {
-//   type GlobalProps = {
-//     theme?: 'light' | 'dark' | undefined
-//     color?: 'base' | 'brand' | undefined
-//     size?: 'sm' | 'md' | 'lg' | undefined
-//     contrast?: boolean | undefined
-//   }
-// }

package/src/types/{virtual-modules.d.ts → virtual.d.ts}

@@ -1,4 +1,4 @@
-declare module 'virtual:*' {
+declare module 'virtual:fulldev-ui/config' {
   import type { Config } from 'fulldev-ui/integration'
   const content: Config
   export default content

package/src/utils/cart.ts

@@ -1,13 +1,4 @@
-// import Stripe from 'stripe'
-
-// const stripe = new Stripe(import.meta.env.STRIPE_SECRET_KEY)
-
-const slugify = (input: string): string => {
-  return input
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')
-}
+import { slugify } from './slugify'
 
 export const generateProductId = (
   slug: string,

package/src/utils/formatEntries.ts

@@ -0,0 +1,8 @@
+import type { CollectionEntry } from 'astro:content'
+import { formatEntry } from './formatEntry'
+
+export const formatEntries = (
+  entries: CollectionEntry<
+    'categories' | 'docs' | 'pages' | 'posts' | 'products'
+  >[]
+) => entries.map(formatEntry)

package/src/utils/formatEntry.ts

@@ -0,0 +1,29 @@
+import type { CollectionEntry, ContentCollectionKey } from 'astro:content'
+
+const routes: {
+  [key in ContentCollectionKey]: string
+} = {
+  categories: 'categorieen',
+  docs: 'docs',
+  pages: '',
+  posts: 'blog',
+  products: 'producten',
+}
+
+export const formatEntry = ({
+  data,
+  slug,
+  ...rest
+}: CollectionEntry<ContentCollectionKey>) => {
+  let href
+  if (slug !== 'index') href = `/${routes[rest.collection]}/${slug}/`
+
+  href?.replace('//', '/')
+
+  return {
+    href,
+    slug,
+    ...rest,
+    ...data,
+  }
+}

package/src/utils/getDeepReferenceChildren.ts

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

package/src/utils/getHref.ts

@@ -0,0 +1,6 @@
+import type { CollectionEntry } from 'astro:content'
+
+export function getHref(slug: CollectionEntry<'pages'>['slug']) {
+  if (slug === 'index') return '/'
+  else return `/${slug}/`
+}

package/src/utils/getReferenceChildren.ts

@@ -6,7 +6,7 @@ export const getReferenceChildren = async (
 ) =>
   (
     await getCollection('pages', (page) =>
-      page.data?.parents?.some((p: any) => p.slug === slug)
+      page.data?.categories?.some((p: any) => p.slug === slug)
     )
   )?.map(({ slug, data }) => ({
     ...data,

package/src/utils/setTheme.ts

@@ -0,0 +1,18 @@
+export default function setTheme(newValue?: string) {
+  newValue && localStorage.setItem('theme', newValue)
+  const value = localStorage.getItem('theme')
+
+  const isDark =
+    value === 'dark' ||
+    (value === 'system' &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+  document.documentElement.classList.toggle('dark', isDark)
+
+  document.querySelectorAll('.themer').forEach((themer) => {
+    themer.classList.toggle('dark', isDark)
+    themer?.querySelectorAll('option').forEach((option) => {
+      option.selected = option.value === value
+    })
+  })
+}

package/src/utils/slugify.ts

@@ -0,0 +1,6 @@
+export const slugify = (input: string): string => {
+  return input
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}

package/svelte.config.js

@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@astrojs/svelte';
+
+export default {
+	preprocess: vitePreprocess(),
+}

package/tailwind.config.ts

@@ -0,0 +1,71 @@
+import tailwindcssScrollbar from 'tailwind-scrollbar'
+import type { Config } from 'tailwindcss'
+import tailwindcssAnimate from 'tailwindcss-animate'
+
+export default {
+  darkMode: ['class'],
+  content: ['src/**/*.{ts,tsx,astro,css,mdx}'],
+  theme: {
+    container: {
+      center: true,
+      padding: 'clamp(16px, 4vw, 32px)',
+      screens: ['1536px'],
+    },
+    extend: {
+      spacing: {
+        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))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+          hover: 'hsl(var(--primary) / 85%)',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+          hover: 'hsl(var(--secondary) / 75%)',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+          hover: 'hsl(var(--muted) / 75%)',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+          hover: 'hsl(var(--accent) / 75%)',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+          hover: 'hsl(var(--card) / 75%)',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      borderColor: {
+        DEFAULT: 'hsl(var(--border))',
+      },
+    },
+  },
+  plugins: [tailwindcssAnimate, tailwindcssScrollbar({ nocompatible: true })],
+} satisfies Config

package/tsconfig.json

@@ -4,9 +4,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "fulldev-ui/*": [
-        "src/*"
-      ]
+      "fulldev-ui/*": ["src/*"],
     }
   },
 }

package/src/blocks/Article.astro

@@ -1,40 +0,0 @@
----
-import Prose from 'fulldev-ui/components/experimental/Prose.astro'
-import Section from 'fulldev-ui/components/Section.astro'
-import Toc from 'fulldev-ui/components/Toc.astro'
-
-const { toc = 'Op deze pagina', render } = Astro.props
-const { Content } = (render && (await render())) || {}
----
-
-<Section class:list="article">
-  <Prose>
-    {Content && <Content />}
-    <slot />
-  </Prose>
-  <Toc
-    {render}
-    heading={toc}
-  />
-</Section>
-
-<style is:global lang="scss">
-  .article {
-    display: flex;
-    position: relative;
-    flex-grow: 1;
-    flex-direction: row;
-    align-items: start;
-    height: 100%;
-
-    &:first-child {
-      padding-top: var(--space-6);
-    }
-
-    .prose {
-      margin-right: auto;
-      margin-left: auto;
-      max-width: 768px;
-    }
-  }
-</style>

package/src/blocks/Categories.astro

@@ -1,12 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="categories"
-  structure="grid"
-  position="inset"
-  {...rest}
-/>

package/src/blocks/Colleagues.astro

@@ -1,13 +0,0 @@
----
-import Section from 'fulldev-ui/components/Section.astro'
-
-const { ...rest } = Astro.props
----
-
-<Section
-  class:list="colleagues"
-  structure="grid"
-  align="center"
-  position="inset"
-  {...rest}
-/>