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

package/src/schemas/components/link.ts

@@ -0,0 +1,16 @@
+import { z } from 'astro:content'
+import pathSchema from '../utils/pathSchema'
+
+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()
+)

package/src/schemas/components/links.ts

@@ -0,0 +1,4 @@
+import { z } from 'astro:content'
+import link from './link'
+
+export default z.array(link)

package/src/schemas/components/menu.ts

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

package/src/schemas/components/sidebar.ts

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

package/src/schemas/components/subheader.ts

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

package/src/schemas/components/themer.ts

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

package/src/schemas/pageSchema.ts

@@ -1,6 +1,5 @@
 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'
@@ -9,10 +8,11 @@ import price from './components/price'
 import section from './components/section'
 import sections from './components/sections'
 import sidebar from './components/sidebar'
+import subheader from './components/subheader'
 import toc from './components/toc'
+import categories from './utils/categories'
 import component from './utils/component'
 import navigation from './utils/navigation'
-import parents from './utils/parents'
 import pathSchema from './utils/pathSchema'
 
 export const i18n = z
@@ -35,10 +35,8 @@ export const presets = z
   .transform(async ({ presets, ...rest }) => {
     let mergedData = {}
 
-    if (fulldevConfig.basePreset) {
-      const baseEntry = await getEntry('presets', fulldevConfig.basePreset)
-      mergedData = assign(mergedData, baseEntry?.data || {})
-    }
+    const baseEntry = await getEntry('presets', 'base')
+    mergedData = assign(mergedData, baseEntry?.data || {})
 
     if (presets) {
       const entries = await getEntries(presets)
@@ -51,21 +49,12 @@ export const presets = z
     return mergedData as typeof rest
   })
 
-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']),
+    categories,
+    order: z.number().optional(),
+    theme: z.enum(['light', 'dark', 'system']),
     lang: z.string(),
     seo: z
       .object({
@@ -75,13 +64,15 @@ export const page = z
       .optional(),
     title: z.string(),
     description: z.string().optional(),
+    paragraph: z.string().optional(),
     image,
     images,
     section,
     sections,
     footer,
-    header: header,
-    sidebar: sidebar,
+    header,
+    sidebar,
+    subheader,
     navigation,
     toc,
     price,
@@ -94,8 +85,10 @@ export const page = z
     variants: z.any(),
     heading: z.any(),
     href: z.any(),
+    next: z.any(),
+    prev: z.any(),
   })
   .partial()
   .strict()
 
-export default i18n.pipe(basePreset).pipe(presets).pipe(page)
+export default i18n.pipe(presets).pipe(page)

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/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/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/tailwind.config.ts

@@ -0,0 +1,67 @@
+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))',
+      },
+      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/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/components/Footer.astro

@@ -1,193 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
-import Channels from 'fulldev-ui/components/Channels.astro'
-import Element from 'fulldev-ui/components/Element.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Social from 'fulldev-ui/components/Social.astro'
-import Socials from 'fulldev-ui/components/Socials.astro'
-import Text from 'fulldev-ui/components/Text.astro'
-import Logo from 'fulldev-ui/components/experimental/Logo.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-
-interface Props extends GlobalProps, HTMLAttributes<'footer'> {
-  screen?: number | undefined
-  logo?: ComponentProps<typeof Logo>['src']
-  company?: ComponentProps<typeof Logo>['company']
-  text?: ComponentProps<typeof Text>['text']
-  hours?: any
-  socials?: ComponentProps<typeof Social>['href'][] | undefined
-  buttons?: ComponentProps<typeof Button>[] | undefined
-  panel?: boolean | undefined
-  channels?: ComponentProps<typeof Channels>['channels'] | undefined
-  columns?: {
-    heading: ComponentProps<typeof Heading>['text']
-    buttons: ComponentProps<typeof Button>[] | undefined
-  }[]
-}
-
-const {
-  size = 'sm',
-  screen = 1280,
-  hours,
-  panel,
-  logo,
-  company,
-  socials,
-  buttons,
-  columns,
-  text,
-  title,
-  channels,
-  ...rest
-} = Astro.props
----
-
-<Element
-  class:list="footer"
-  style={{ '--screen': `${screen}px` }}
-  structure="stack"
-  {panel}
-  {size}
-  {...rest}
->
-  <Element class:list="column">
-    <Logo
-      {company}
-      {...typeof logo === 'string' ? { src: logo } : logo}
-    />
-    <Text
-      color="base"
-      {text}
-    />
-    <Socials {socials} />
-  </Element>
-  <Channels {channels} />
-  <Element class:list="hours column">
-    <Heading
-      text={hours?.heading}
-      level={5}
-    />
-    <Element>
-      {
-        Object.entries(hours?.days ?? {})?.map(([key, value]: any) => (
-          <Element class:list="spread">
-            <Text text={key} />
-            <Text text={value} />
-          </Element>
-        ))
-      }
-    </Element>
-  </Element>
-
-  <Element class:list="buttons column">
-    {
-      columns?.map(({ heading, buttons }: any) => (
-        <Element class:list="column">
-          <Heading
-            level={5}
-            text={heading}
-          />
-          {buttons?.map((button: any) => (
-            <Button
-              variant="link"
-              {...button}
-            />
-          ))}
-        </Element>
-      ))
-    }
-  </Element>
-</Element>
-
-<style is:global lang="scss">
-  @layer fulldev {
-    .footer {
-      display: grid;
-      position: relative;
-      grid-template-columns: 1fr;
-      align-items: flex-start;
-      gap: var(--space-6);
-      margin-top: auto;
-      margin-top: auto;
-      border-top-width: 1px;
-      border-color: var(--base-a6);
-      background-color: var(--base-2);
-      padding: var(--space-7) var(--gutter);
-      width: 100%;
-
-      @media (min-width: 1024px) {
-        grid-auto-columns: 1fr;
-        grid-auto-flow: column;
-      }
-
-      .spread {
-        display: flex;
-        justify-content: space-between;
-      }
-
-      .column {
-        display: flex;
-        flex-direction: column;
-      }
-
-      > .column {
-        gap: var(--space-4);
-      }
-
-      .socials {
-        display: flex;
-      }
-
-      .column {
-        h5 + * {
-          margin-top: var(--space-4);
-        }
-
-        .button.variant-link + .button.variant-link {
-          margin-top: var(--space-4);
-        }
-      }
-
-      &.panel {
-        margin: var(--spacer) var(--gutter);
-        border-width: 1px;
-        border-radius: var(--radius-2);
-        overflow: hidden;
-      }
-
-      .channels {
-        gap: var(--space-3);
-      }
-
-      .buttons {
-        display: grid;
-        position: relative;
-        grid-template-columns: 1fr;
-        align-items: flex-start;
-        gap: var(--space-3);
-        gap: var(--space-6);
-        width: 100%;
-
-        @media (min-width: 1024px) {
-          grid-auto-columns: 1fr;
-          grid-auto-flow: column;
-        }
-      }
-
-      .text {
-        max-width: calc(5 * var(--space-7));
-      }
-
-      .hours {
-        .column {
-          gap: 0;
-
-          .text {
-            font-size: var(--text-2);
-          }
-        }
-      }
-    }
-  }
-</style>

package/src/components/ThemeSelect.astro

@@ -1,41 +0,0 @@
----
-import Select from 'fulldev-ui/components/Select.astro'
-// const defaultTheme = fulldevConfig.colors.theme || 'light'
-
-const { ...rest } = Astro.props
----
-
-<Select
-  class:list="theme-select"
-  name="theme-select"
-  options={['light', 'dark']}
-  value="light"
-  onchange="localStorage.setItem('theme', this.value); window.location.reload();"
-  {...rest}
-/>
-
-<script>
-  const setOption = (document: Document) => {
-    const selects = document.querySelectorAll('.theme-select')
-    const theme = localStorage.getItem('theme') || ''
-    selects?.forEach((select) => {
-      const options = select?.querySelectorAll('option')
-      options?.forEach((option) => {
-        if (option.value === theme) option.selected = true
-        else option.selected = false
-      })
-    })
-  }
-
-  setOption(document)
-
-  document.addEventListener('astro:before-swap', (event) => {
-    setOption(event.newDocument)
-  })
-</script>
-
-<style is:global lang="scss">
-  .theme-select {
-    width: calc(1.4 * var(--space-7));
-  }
-</style>

package/src/components/experimental/Form.astro

@@ -1,53 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Button from '../Button.astro'
-import Input from '../Input.astro'
-import Select from '../Select.astro'
-import Textarea from '../Textarea.astro'
-
-interface Props extends GlobalProps, HTMLAttributes<'form'> {
-  submit?: ComponentProps<typeof Button>['text']
-  fields?:
-    | (
-        | ComponentProps<typeof Input>
-        | ComponentProps<typeof Select>
-        | (ComponentProps<typeof Textarea> & { type?: 'textarea' | undefined })
-      )[]
-    | undefined
-}
-
-const { fields, submit, ...rest } = Astro.props
----
-
-<Element
-  class:list="form"
-  as="form"
-  {...rest}
->
-  <slot>
-    {
-      fields?.map((field) => {
-        if ('options' in field) return <Select {...field} />
-        if ('type' in field && field.type === 'textarea')
-          return <Textarea {...field} />
-        return <Input {...(field as any)} />
-      })
-    }
-    <Button
-      type="submit"
-      text={submit}
-    />
-  </slot>
-</Element>
-
-<style is:global lang="scss">
-  .form {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-    width: 100%;
-    max-width: calc(var(--space-4) * 44);
-  }
-</style>