fulldev-ui 0.5.0-beta.4 → 0.5.0-beta.6

package/src/schemas/utils/navigation.ts

@@ -1,54 +1,4 @@
-// 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'
+import header from '../components/header'
+import sidebar from '../components/sidebar'
 
-// export default z.object({
-//   logo,
-//   buttons: z.array(
-//     button.or(
-//       z.object({
-//         heading,
-//         buttons,
-//       })
-//     )
-//   ),
-// })
-
-import { z } from 'astro:content'
-import logo from '../components/logo'
-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()
-
-export default z
-  .object({
-    logo,
-    search: z.boolean(),
-    sidebar: z.boolean(),
-    toc: z.boolean(),
-    buttons: z.array(button.or(group)),
-  })
-  .partial()
-  .passthrough()
+export default sidebar.merge(header)

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"
-  ]
 }

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/overview/content-layer.mdx

@@ -1,128 +0,0 @@
----
-presets: [docs]
-title: Content Layer
----
-
-import Link from 'fulldev-ui/components/Link.astro'
-
-# Content Layer
-
-We utilize <Link href="https://docs.astro.build/docs/guides/content-collections/">Astro's Content Layer</Link> to create entire websites using just content files and our components.
-
-## Starter Template
-
-This is the recommended way to get started with our content layer integration. We've created a <Link href="https://github.com/fulldotdev/starter/tree/main">starter template</Link> with examples of everything you need to get started.
-
-## Manual Setup
-
-To get started with the manual setup, you need to install the <Link href="/overview/installation/">integration</Link> and add `injectRoutes: true` to your `astro.config.ts` file, see <Link href="#folder-structure">file structure</Link> below for more information on how this generates a site using content files.
-
-```ts
-import { defineConfig } from 'astro/config'
-import fulldev from 'fulldev-ui/integration'
-
-// https://astro.build/config
-export default defineConfig({
-  integrations: [
-    fulldev({
-      // other options
-      injectRoutes: true,
-    }),
-  ],
-})
-```
-
-## Folder Structure
-
-```
-.
-├── src/
-│   ├── blocks/
-│   │   └── ...
-│   ├── components/
-│   │   └── ...
-│   ├── layouts/
-│   │   └── ...
-│   ├── assets/
-│   │   └── ...
-│   ├── content/
-│   │   ├── pages/
-│   │   │   └── ...
-│   │   ├── records/
-│   │   │   └── ...
-│   │   │       └── ...
-│   │   ├── presets/
-│   │   │   ├── base.yml
-│   │   │   └── ...
-│   │   └── ...
-│   ├── css/
-│   │   ├── custom.css
-│   │   └── ...
-├── public/
-│   └── ...
-└──
-```
-
-- **/src/**: The main source directory containing all the core files of the project.
-  - **/blocks/**: Contains reusable block components that can be composed to build pages (Custom or overwrites existing fulldev-ui blocks)
-  - **/components/**: Houses individual UI components used throughout the project (Custom or overwrites existing fulldev-ui components)
-  - **/layouts/**: Contains layout components used to structure pages (Custom or overwrites existing fulldev-ui layouts)
-  - **/assets/**: Contains assets like images, fonts, etc.
-  - **/content/**: Stores content-related files:
-    - **pages/**: Contains markdown or MDX files for individual pages.
-    - **records/**: Contains markdown or MDX files for content collections. Nested in directories by collection name.
-    - **/presets/**: Includes configuration files for various settings like the sidebar.
-  - **/css/**: Contains global CSS files and styles.
-
-### File Structure
-
-Each file has a few frontmatter objects that are important to know about. Seo has priority over title and description, however title and description is used in multiple places like a card.
-
-```md
----
-seo:
-  title: Page Title
-  description: This is my page description
-  image: /image.jpg # Open Graph Image
-
-title: Page Title
-description: This is my page description
----
-```
-
-For all objects avaliable in the Content Layer, see the <Link href="/schemas/page/">schemas</Link>.
-
-### Image Alt collection
-
-To create yml records for images, you can simply add `generateImageEntries: true` to the integration setup. This will generate a yml file in the **src/assets/** directory with the image alt text pre set to the unslugged filename which can be customized. If turned on the Image component will automatically use these records for the alt text of local images.
-
-```ts
-import { defineConfig } from 'astro/config'
-import fulldev from 'fulldev-ui/integration'
-
-// https://astro.build/config
-export default defineConfig({
-  integrations: [
-    fulldev({
-      // other options
-      generateImageEntries: true,
-    }),
-  ],
-})
-```
-
-## i18n
-
-Getting started with i18n is easy, you can easily add additional languages by creating a new folder in the **content/pages** directory and adding your content files in the new language.
-
-```
-.
-├── src/
-│   ├── content/
-│   │   ├── pages/
-│   │   │   ├── index.md
-│   │   │   ├── nl/
-│   │   │   │   └── index.md
-│   │   │   └── de/
-│   │   │   │   └── index.md
-```

package/src/content/pages/overview/customization.mdx

@@ -1,83 +0,0 @@
----
-presets: [docs]
-title: Customization
----
-
-import Link from 'fulldev-ui/components/Link.astro'
-
-# Customization
-
-## Colors
-
-The color theme is inspired by and compatible with <Link href="https://www.radix-ui.com/colors">Radix Colors.</Link>
-
-### Automatic setup
-
-With the fulldev-ui integration you can easily set a theme and generate a radix color palette. See the <Link href="/overview/installation/">installation page</Link> to get started with the integration.
-
-### Manual setup
-
-You can define a `base` and a `brand` theme, both with 12 steps and 1 contrast step for text on step 9. For a detailed explanation see <Link href="https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale">this page</Link>.
-
-```css
-:root,
-.theme-light {
-  --base-1: ;
-  --base-2: ;
-  --base-3: ;
-  --base-4: ;
-  --base-5: ;
-  --base-6: ;
-  --base-7: ;
-  --base-8: ;
-  --base-9: ;
-  --base-10: ;
-  --base-11: ;
-  --base-12: ;
-  --base-contrast: ;
-
-  --brand-1: ;
-  --brand-2: ;
-  --brand-3: ;
-  --brand-4: ;
-  --brand-5: ;
-  --brand-6: ;
-  --brand-7: ;
-  --brand-8: ;
-  --brand-9: ;
-  --brand-10: ;
-  --brand-11: ;
-  --brand-12: ;
-  --brand-contrast: ;
-}
-```
-
-### Dark theme
-
-Dark mode is set via a simple `.theme-dark` class.
-
-If you want to use a dark theme by default, remove the `:root` selector from the light theme and add it to the dark theme.
-
-Components in Fulldev UI that support theme switching have the `theme` prop available, which adds either the `theme-dark` or `theme-light` class
-
-```css
-.theme-dark {
-  /* Same variables here as above */
-}
-```
-
-## Radius
-
-The `--border-radius` variable is a multiplier applied to all radius values. The default value is `1`.
-
-```css
-:root {
-  --border-radius: 1;
-}
-```
-
-## Other
-
-Since Fulldev UI uses just regular CSS with low specificity, you can customize anything else using custom CSS.
-
-We plan to add more customization via variables later.