fulldev-ui 0.6.0-beta.2 → 0.6.0-beta.3

package/src/components/_Header.astro

@@ -0,0 +1,129 @@
+<!-- ---
+import type { ComponentProps,HTMLAttributes } from 'astro/types'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Cart from 'fulldev-ui/components/Cart.astro'
+import Drawer from 'fulldev-ui/components/Drawer.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Links from 'fulldev-ui/components/Links.astro'
+import Logo from 'fulldev-ui/components/Logo.astro'
+import Menu from 'fulldev-ui/components/Menu.astro'
+import Socials from 'fulldev-ui/components/Socials.astro'
+import Themer from 'fulldev-ui/components/Themer.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Search from './Search.astro'
+
+interface Props extends GlobalProps, HTMLAttributes<'header'> {
+  logo?: ComponentProps<typeof Logo>
+  company?: ComponentProps<typeof Logo>['company']
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  links?: ComponentProps<typeof Links>['links']
+  menu?: ComponentProps<typeof Menu>['groups']
+  panel?: boolean | undefined
+  search?: boolean | undefined
+  open?: boolean | undefined
+  cart?: string | undefined
+  socials?: ComponentProps<typeof Socials>['socials']
+  themer?: boolean | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+}
+
+const {
+  size = 'sm',
+  open,
+  logo,
+  company,
+  buttons,
+  links,
+  search,
+  panel,
+  socials,
+  menu,
+  cart,
+  themer,
+  ...rest
+} = Astro.props
+---
+
+<Element
+  class:list="header"
+  as="header"
+  {size}
+  {open}
+  {...rest}
+>
+  <Element class:list="header-container">
+    <Logo
+      {company}
+      {size}
+      {...typeof logo === 'string' ? { src: logo } : logo}
+    />
+    <Links
+      class:list="header-links"
+      {size}
+      {links}
+    />
+    <Socials
+      {size}
+      variant="ghost"
+      {socials}
+    />
+    <Buttons
+      class:list="header-buttons"
+      {size}
+      {buttons}
+    >
+      <Search size="sm" />
+      <Themer
+        if={themer}
+        {size}
+      />
+      <Cart
+        if={cart}
+        variant="secondary"
+        heading={cart}
+        {size}
+      />
+      <Drawer
+        class:list={['header-button']}
+        icon="menu-2"
+        id="menu"
+        variant="secondary"
+        {logo}
+        {company}
+        {buttons}
+        {links}
+        {menu}
+        {size}
+      />
+    </Buttons>
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .header {
+      @apply sticky left-0 top-0 z-20 flex h-14 items-center overflow-hidden border-b bg-background;
+
+      .header-container {
+        @apply container flex w-full items-center justify-between gap-6;
+      }
+
+      &,
+      & ~ * {
+        --header-height: 3.5rem;
+      }
+
+      .header-links {
+        @apply mr-auto max-lg:hidden;
+      }
+
+      .header-socials {
+        @apply ml-auto max-lg:hidden;
+      }
+
+      .menu-button {
+        @apply lg:hidden;
+      }
+    }
+  }
+</style> -->

package/src/components/_Prose copy.astro

@@ -0,0 +1,172 @@
+---
+import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import {
+  default as Lead,
+  default as Paragraph,
+} from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Toc from 'fulldev-ui/components/Toc.astro'
+import { crush } from 'radash'
+import type Sidebar from './Sidebar.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: HTMLTag | undefined
+  render?: any
+  sidebar?: ComponentProps<typeof Sidebar> | undefined
+  slug?: CollectionEntry<'pages'>['slug'] | undefined
+  toc?: boolean | ComponentProps<typeof Toc>['heading'] | undefined
+  tagline?: ComponentProps<typeof Tagline>['text'] | undefined
+  heading?: ComponentProps<typeof Heading>['text'] | undefined
+  image?: ComponentProps<typeof Image> | undefined
+  lead?: ComponentProps<typeof Lead>['text'] | undefined
+}
+
+const {
+  toc = false,
+  slug,
+  sidebar,
+  render,
+  tagline,
+  heading,
+  lead,
+  image,
+  ...rest
+} = Astro.props
+
+const Content = render && (await render())?.Content
+
+const flatMenu = crush(sidebar?.menu ?? {})
+const slugs = Object.entries(flatMenu)
+  .map(([key, value]) => (key.endsWith('.slug') ? value : null))
+  .filter(Boolean)
+const slugIndex = slugs.findIndex((val) => val === slug)
+
+const prevSlug = slugs[slugIndex - 1]
+const nextSlug = slugs[slugIndex + 1]
+---
+
+<Element
+  class:list="prose"
+  {...rest}
+>
+  <Element class:list="prose-container">
+    <Element class:list="prose-content">
+      <Tagline text={tagline} />
+      <Heading
+        as="h1"
+        level={2}
+        text={heading}
+      />
+      <Paragraph text={lead} />
+      <Image {...image} />
+      {Content && <Content />}
+      <slot />
+      <Element class:list="prose-footer">
+        <Button
+          class:list="prose-prev"
+          icon={prevSlug && 'arrow-left'}
+          slug={prevSlug}
+          variant="secondary"
+        />
+        <Button
+          class:list="prose-next"
+          icon={nextSlug && 'arrow-right'}
+          slug={nextSlug}
+          variant="secondary"
+          reverse
+        />
+      </Element>
+    </Element>
+    <Toc
+      if={toc}
+      heading={typeof toc === 'string' ? toc : undefined}
+      {render}
+    />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .prose {
+      @apply relative items-start py-28 first:pt-14;
+
+      .prose-container {
+        @apply container flex h-full w-full flex-grow items-start justify-evenly gap-14 gap-x-gutter;
+      }
+
+      .prose-content {
+        @apply w-full max-w-screen-md;
+
+        > * {
+          @apply mt-6 first:mt-0;
+        }
+
+        p {
+          @apply mt-4 first:mt-0;
+        }
+
+        code:not(.astro-code code) {
+          @apply rounded bg-muted px-1.5 py-0.5 font-mono text-sm font-medium;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          @apply mt-8 scroll-m-20 font-semibold first:mt-0;
+
+          code {
+            font-size: inherit !important;
+          }
+        }
+
+        > h1 {
+          @apply text-4xl font-extrabold;
+        }
+
+        > h2 {
+          @apply text-2xl;
+        }
+
+        > h3 {
+          @apply text-xl;
+        }
+
+        > h4 {
+          @apply text-lg;
+        }
+
+        > h5 {
+          @apply text-base;
+        }
+
+        > h6 {
+          @apply text-sm;
+        }
+
+        > aside {
+          @apply mt-6 rounded-md border border-destructive p-4 text-destructive first:mt-0;
+        }
+      }
+
+      .prose-footer {
+        @apply mt-14 flex items-center;
+
+        .prose-next {
+          @apply ml-auto;
+        }
+      }
+
+      .toc {
+        @apply order-last;
+      }
+    }
+  }
+</style>

package/src/components/_Sidebar copy.astro

@@ -0,0 +1,87 @@
+<!-- ---
+import type { HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import Links from 'fulldev-ui/components/Links.astro'
+import Logo from 'fulldev-ui/components/Logo.astro'
+import Themer from 'fulldev-ui/components/Themer.astro'
+import type { SidebarSchema } from 'fulldev-ui/schemas/components/sidebar'
+import Heading from './Heading.astro'
+
+interface Props extends HTMLAttributes<'aside'>, SidebarSchema {}
+
+const { company, logo, menus, heading, themer, ...rest } = Astro.props
+---
+
+<Element
+  class:list="sidebar"
+  as="aside"
+  {...rest}
+>
+  <Element
+    class:list="sidebar-header"
+    as="header"
+  >
+    <Logo
+      {company}
+      {...logo}
+      size="sm"
+    />
+    <Heading
+      as="h5"
+      size="md"
+      text={heading}
+    />
+  </Element>
+  <Element class:list="sidebar-content">
+    <Element
+      class:list="sidebar-nav"
+      as="nav"
+    >
+      {
+        menus?.map(({ heading, links }) => (
+          <Element class:list="sidebar-menu">
+            <Heading
+              text={heading}
+              size="sm"
+              as="h6"
+            />
+            <Links
+              direction="column"
+              size="sm"
+              {links}
+            />
+          </Element>
+        ))
+      }
+    </Element>
+    <Themer if={themer} />
+    <slot />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .sidebar {
+      @apply sticky bottom-0 z-10 hidden h-full flex-col items-start justify-start border-r bg-background lg:flex;
+
+      --height: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
+      top: var(--height);
+      width: var(--sidebar-width);
+      max-height: calc(100vh - var(--height));
+
+      &,
+      & ~ * {
+        --sidebar-width: 13rem;
+      }
+
+      .sidebar-header {
+        @apply sticky flex h-14 w-full items-center px-gutter py-6;
+      }
+
+      .sidebar-content {
+        @apply flex w-full flex-1 flex-col items-start gap-7 overflow-y-auto px-gutter pb-14 pt-6 first:pt-14;
+        @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
+      }
+    }
+  }
+</style> -->

package/src/content/categories/category.md

@@ -0,0 +1,7 @@
+---
+title: Category
+description: Lorem ipsum dolor sit
+---
+
+
+  

package/src/content/config.ts

@@ -1,12 +1,11 @@
 import { defineCollection } from 'astro:content'
-import imageLoader from 'fulldev-ui/loaders/imageLoader.ts'
-import { categorySchema } from 'fulldev-ui/schemas/categorySchema'
-import { docSchema } from 'fulldev-ui/schemas/docSchema'
-import imageSchema from 'fulldev-ui/schemas/imageSchema.ts'
-import { layoutSchema } from 'fulldev-ui/schemas/layoutSchema'
-import { pageSchema } from 'fulldev-ui/schemas/pageSchema'
-import { postSchema } from 'fulldev-ui/schemas/postSchema'
-import { productSchema } from 'fulldev-ui/schemas/productSchema'
+import { categorySchema } from 'fulldev-ui/schemas/categorySchema.ts'
+import { docSchema } from 'fulldev-ui/schemas/docSchema.ts'
+import { imageLoader, imageSchema } from 'fulldev-ui/schemas/imageSchema.ts'
+import { layoutSchema } from 'fulldev-ui/schemas/layoutSchema.ts'
+import { pageSchema } from 'fulldev-ui/schemas/pageSchema.ts'
+import { postSchema } from 'fulldev-ui/schemas/postSchema.ts'
+import { productSchema } from 'fulldev-ui/schemas/productSchema.ts'
 
 export const collections = {
   pages: defineCollection({

package/src/content/docs/components/text.mdx

@@ -0,0 +1,47 @@
+---
+title: Text
+---
+
+# Text
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Text from 'fulldev-ui/components/Text.astro'
+---
+
+<Text>The quick brown fox jumps over the lazy dog</Text>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `size`
+
+```astro live
+---
+import Text from 'fulldev-ui/components/Text.astro'
+---
+
+<Text size="sm"
+  >The quick brown fox jumps over the lazy dog because he is quick
+</Text>
+<Text> The quick brown fox jumps over the lazy dog because he is quick </Text>
+<Text size="lg">
+  The quick brown fox jumps over the lazy dog because he is quick
+</Text>
+```
+
+### `text`
+
+```astro live
+---
+
+---
+
+<Text text="The quick brown fox jumps over the lazy dog" />
+```

package/src/content/docs/components.mdx

@@ -1,11 +1,8 @@
 ---
 title: Components
+description: Features shared across components.
 ---
 
-# Components
-
-Features shared across components.
-
 ## Slots versus props
 
 You can use either slots or props. Props are recommended as they are type safe and work better in combination with content collections.

package/src/content/docs/index.mdx

@@ -1,11 +1,8 @@
 ---
 title: Introduction
+description: Everything you need to rapidly build content-driven websites. Components, blocks, layouts and complete page generation.
 ---
 
-# Introduction
-
-Everything you need to rapidly build content-driven websites. Components, blocks, layouts and complete page generation.
-
 ## Why we built it
 
 After repeatedly encountering the same challenges in [our company's](https://full.dev) client projects, we decided to build this library. After successfully using it in production websites, we decided to open-source it to help others facing similar problems.

package/src/content/layouts/base.yml

@@ -1,21 +1,23 @@
-theme: system
-
-seo:
+head:
+  title: Fulldev UI - Astro component and block library, open-source
   image: /images/og-image.png
-
-code:
-  head: |
+  theme: system
+  code: |
     <script is:inline>
       !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
       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:
-  themer: true
+banner:
+  text: 'Introducing v0.6: layouts & pagebuilding 🎉'
+
+navigation:
   header: true
-  company: Fulldev UI
-  logo: favicon.svg
+  themer: true
+  search: true
+  logo:
+    text: Fulldev UI
   links:
     - text: Docs
       href: /docs/
@@ -25,77 +27,36 @@ header:
       href: /docs/blocks/banner/
     - text: Showcase
       href: /showcase/
-
   socials:
     - https://github.com/fulldotdev/ui
     - https://discord.gg/vXZqMbadm8
+  menus:
+    - heading: Get Started
+      links:
+        - text: Introduction
+          href: /docs/
+        - text: Installation
+          href: /docs/installation/
+        - text: Customization
+          href: /docs/customization/
+        - text: Frameworks
+          href: /docs/frameworks/
+        - text: Components
+          href: /docs/components/
+        - text: Collections
+          href: /docs/collections/
 
-  # menu:
-  #   - heading: Get Started
-  #     links:
-  #       - docs
-  #       - docs/installation
-  #       - docs/customization
-  #       - docs/frameworks
-  #       - docs/components
-  #       - docs/collections
-  #   - heading: Collections
-  #     links:
-  #       - docs/collections/pages
-  #       - docs/collections/presets
-  #       - docs/collections/images
-  #   - heading: Components
-  #     links:
-  #       - docs/components/avatar
-  #       - docs/components/badge
-  #       - docs/components/badges
-  #       - docs/components/button
-  #       - docs/components/buttons
-  #       # - docs/components/card
-  #       # - docs/components/cards
-  #       # - docs/components/cart
-  #       # - docs/components/cart-form
-  #       # - docs/components/cart-list
-  #       # - docs/components/cart-summary
-  #       - docs/components/channel
-  #       - docs/components/channels
-  #       - docs/components/checkbox
-  #       - docs/components/code
-  #       # - docs/components/dialog
-  #       # - docs/components/drawer
-  #       # - docs/components/element
-  #       # - docs/components/footer
-  #       # - docs/components/form
-  #       # - docs/components/head
-  #       # - docs/components/header
-  #       - docs/components/heading
-  #       - docs/components/icon
-  #       - docs/components/image
-  #       - docs/components/input
-  #       - docs/components/label
-  #       - docs/components/lead
-  #       - docs/components/link
-  #       - docs/components/links
-  #       - docs/components/list
-  #       # - docs/components/locale-switcher
-  #       - docs/components/logo
-  #       - docs/components/menu
-  #       - docs/components/paragraph
-  #       # - docs/components/price
-  #       - docs/components/prose
-  #       - docs/components/rating
-  #       # - docs/components/search
-  #       # - docs/components/section
-  #       # - docs/components/sections
-  #       - docs/components/select
-  #       # - docs/components/sidebar
-  #       - docs/components/social
-  #       - docs/components/socials
-  #       - docs/components/switch
-  #       # - docs/components/table
-  #       - docs/components/tagline
-  #       # - docs/components/text
-  #       - docs/components/textarea
-  #       - docs/components/themer
-  #       # - docs/components/toc
-  #       # - docs/components/writeup
+footer:
+  logo:
+    text: Fulldev UI
+  menus:
+    - heading: Docs
+      links:
+        - text: Docs
+          href: /docs/
+        - text: Components
+          href: /docs/components/badge/
+        - text: Blocks
+          href: /docs/blocks/banner/
+        - text: Showcase
+          href: /showcase/