fulldev-ui 0.5.0-beta.5 → 0.5.0-beta.7

package/src/content/config.ts

@@ -2,6 +2,7 @@ import { defineCollection } from 'astro:content'
 import imageLoader from 'fulldev-ui/loaders/imageLoader.ts'
 import imageSchema from 'fulldev-ui/schemas/imageSchema.ts'
 import pageSchema from 'fulldev-ui/schemas/pageSchema.ts'
+import presetSchema from 'fulldev-ui/schemas/presetSchema.ts'
 
 export const collections = {
   pages: defineCollection({
@@ -10,7 +11,7 @@ export const collections = {
   }),
   presets: defineCollection({
     type: 'data',
-    schema: pageSchema,
+    schema: presetSchema,
   }),
   images: defineCollection({
     loader: imageLoader,

package/src/content/pages/base/select.mdx

@@ -2,14 +2,6 @@
 presets: [docs]
 
 title: Select
-
-example:
-  label: Select
-  name: select
-  placeholder: Select an option
-  options:
-    - Option 1
-    - Option 2
 ---
 
 # Select

package/src/content/pages/base/textarea.mdx

@@ -2,11 +2,6 @@
 presets: [docs]
 
 title: Textarea
-
-example:
-  name: textarea
-  placeholder: Write a message..
-  label: Textarea
 ---
 
 # Textarea

package/src/content/presets/base.yml

@@ -10,9 +10,8 @@ code:
       posthog.init('phc_mVacbe8Xydu0UZlh4bNw5EGisvzyRcpqXEEuEEp5lOY',{api_host:'https://eu.i.posthog.com', person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well
         })
     </script>
-header: true
 navigation:
-  cart: Winkelwagen
+  header: true
   company: Fulldev UI
   buttons:
     - text: Docs

package/src/content/presets/docs.yml

@@ -1,6 +1,6 @@
 component: DocsLayout
-presets: [base]
 
-sidebar: true
-header: false
-toc: 'On this page'
+navigation:
+  sidebar: true
+  header: false
+  toc: 'On this page'

package/src/env.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="astro/client" />
-/// <reference path="../.astro/types.d.ts" />
+/// <reference path="../.astro/types.d.ts" />

package/src/layouts/DocsLayout.astro

@@ -2,14 +2,13 @@
 import type { ComponentProps } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
-import Prose from 'fulldev-ui/components/experimental/Prose.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
 import { crush } from 'radash'
+import PostLayout from './PostLayout.astro'
 
 type Props = ComponentProps<typeof Layout>
 
-const { render, slug, navigation, ...rest } = Astro.props
-const { Content } = await render()
+const { slug, navigation } = Astro.props
 
 const flatButtons = crush((navigation as any)?.buttons ?? {})
 const slugs = Object.entries(flatButtons)
@@ -21,45 +20,34 @@ const prevSlug = slugs[slugIndex - 1]
 const nextSlug = slugs[slugIndex + 1]
 ---
 
-<Layout
+<PostLayout
   class:list="docs-layout"
-  {render}
-  {slug}
-  {navigation}
-  {...rest}
+  {...Astro.props}
 >
-  <Prose>
-    {Content && <Content />}
-    <Element class:list={['prev-next', { 'next-only': !prevSlug }]}>
-      <Button
-        if={prevSlug}
-        slug={prevSlug}
-        icon="arrow-left"
-        variant="secondary"
-      />
-      <Button
-        if={nextSlug}
-        slug={nextSlug}
-        icon="arrow-right"
-        variant="secondary"
-        reverse={true}
-      />
-    </Element>
-  </Prose>
-</Layout>
+  <Element
+    class:list={['prev-next', { 'next-only': !prevSlug }]}
+    slot="prose"
+  >
+    <Button
+      if={prevSlug}
+      slug={prevSlug}
+      icon="arrow-left"
+      variant="secondary"
+    />
+    <Button
+      if={nextSlug}
+      slug={nextSlug}
+      icon="arrow-right"
+      variant="secondary"
+      reverse={true}
+    />
+  </Element>
+</PostLayout>
 
 <style lang="scss" is:global>
   @layer fulldev {
     .docs-layout {
       .prose {
-        --screen: 768px;
-        padding: var(--space-6) var(--gutter);
-        color: var(--color-12);
-
-        > h1 + p {
-          color: var(--color-11);
-        }
-
         > a,
         > p > a {
           color: var(--brand-11);

package/src/layouts/Layout.astro

@@ -7,9 +7,9 @@ import Footer from 'fulldev-ui/blocks/Footer.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Head from 'fulldev-ui/components/Head.astro'
 import Header from 'fulldev-ui/components/Header.astro'
+import Section from 'fulldev-ui/components/Section.astro'
 import Sections from 'fulldev-ui/components/sections.astro'
 import Sidebar from 'fulldev-ui/components/Sidebar.astro'
-import Toc from 'fulldev-ui/components/Toc.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
 type Props = GlobalProps &
@@ -19,6 +19,7 @@ type Props = GlobalProps &
     header?: ComponentProps<typeof Header>
     footer?: ComponentProps<typeof Footer>
     sections?: ComponentProps<typeof Sections>['sections']
+    section?: ComponentProps<typeof Section> | undefined
     banner?: any
     toc?: any
     sidebar?: any
@@ -47,6 +48,7 @@ const {
   toc,
   sections,
   theme,
+  section,
   banner,
   code,
   themeselect,
@@ -66,34 +68,30 @@ const {
     </slot>
     <slot name="header">
       <Header
-        class:list={{
-          'for-sidebar': sidebar,
-        }}
-        if={navigation || header}
-        {...navigation}
+        {...navigation?.header === true ? navigation : {}}
         {...header}
       />
     </slot>
     <div class="core">
       <slot name="sidebar">
         <Sidebar
-          if={sidebar}
-          {...navigation}
+          {...navigation?.sidebar === true ? navigation : {}}
+          logo={navigation?.sidebar?.header
+            ? undefined
+            : navigation?.sidebar?.logo}
+          company={navigation?.sidebar?.header
+            ? undefined
+            : navigation?.sidebar?.company}
           {...sidebar}
         />
       </slot>
       <main data-pagefind-body>
         <slot>
+          <Section {...section} />
           <Article />
           <Sections {sections} />
         </slot>
       </main>
-      <slot name="toc">
-        <Toc
-          heading={toc}
-          {render}
-        />
-      </slot>
     </div>
     <slot name="footer">
       <Footer {...footer} />
@@ -112,7 +110,6 @@ const {
         }
 
         body {
-          --screen: 100vw;
           display: flex;
           flex-direction: column;
           background-color: var(--base-background);
@@ -144,7 +141,6 @@ const {
               background-color: var(--color-background);
               width: 100%;
               max-width: 100vw;
-              overflow-x: hidden;
             }
           }
         }

package/src/layouts/OverviewLayout.astro

@@ -11,7 +11,7 @@ import { getReferenceChildren } from 'fulldev-ui/utils/getReferenceChildren'
 
 type Props = ComponentProps<typeof Layout>
 
-const { slug, sections, title, description } = Astro.props
+const { slug, sections, title, description, render } = Astro.props
 
 const folderChildren = await getFolderChildren(slug)
 const referenceChildren = await getReferenceChildren(slug)
@@ -33,7 +33,10 @@ const referenceChildren = await getReferenceChildren(slug)
     cards={referenceChildren}
     structure="grid"
   />
-  <Article style={{ '--screen': '768px' }} />
+  <Article
+    {render}
+    toc={false}
+  />
   <Sections {sections} />
   <slot />
 </Layout>

package/src/layouts/PostLayout.astro

@@ -3,22 +3,19 @@ import type { ComponentProps } from 'astro/types'
 import Article from 'fulldev-ui/blocks/Article.astro'
 import Sections from 'fulldev-ui/components/sections.astro'
 import Layout from 'fulldev-ui/layouts/Layout.astro'
-import Excerpt from '../blocks/Excerpt.astro'
 
 type Props = ComponentProps<typeof Layout>
 
-const { sections, title, description, ...rest } = Astro.props
+const { sections, render, toc } = Astro.props
 ---
 
 <Layout {...Astro.props}>
-  <Excerpt
-    heading={title}
-    align="start"
-    text={description}
-    style={{ '--screen': '768px' }}
-    {...rest}
-  />
-  <Article />
+  <Article
+    {render}
+    {toc}
+  >
+    <slot name="prose" />
+  </Article>
   <Sections {sections} />
   <slot />
 </Layout>

package/src/schemas/pageSchema.ts

@@ -4,6 +4,9 @@ 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 sidebar from './components/sidebar'
 import toc from './components/toc'
@@ -12,7 +15,7 @@ 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(),
   })
@@ -24,7 +27,7 @@ const i18n = z
     return merged as typeof rest
   })
 
-const presets = z
+export const presets = z
   .object({
     presets: z.array(pathSchema('presets')).optional(),
   })
@@ -48,29 +51,51 @@ const presets = z
     return mergedData as typeof rest
   })
 
-export default i18n.pipe(presets).pipe(
-  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,
-      sections,
-      footer,
-      header: z.boolean().or(header),
-      sidebar: z.boolean().or(sidebar),
-      navigation,
-      toc,
-    })
-    .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

@@ -0,0 +1,3 @@
+import { page } from './pageSchema'
+
+export default page

package/src/schemas/utils/navigation.ts

@@ -1,4 +1,8 @@
+import { z } from 'astro:content'
 import header from '../components/header'
 import sidebar from '../components/sidebar'
 
-export default sidebar.merge(header)
+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,36 @@
+// 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, '')
+}
+
+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/tsconfig.json

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