fulldev-ui 0.6.0-beta.7 → 0.6.0-beta.9

package/src/components/_Prose copy.astro

@@ -1,172 +0,0 @@
----
-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

@@ -1,87 +0,0 @@
-<!-- ---
-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/components/docs/DecorativeBox.astro

@@ -1,15 +0,0 @@
-<div
-  {...Astro.props}
-  class:list={'decorative-box'}
->
-</div>
-
-<style>
-  .decorative-box {
-    border: 1px solid;
-    border-radius: 4px;
-    min-width: 100px;
-    height: 100%;
-    min-height: 100px;
-  }
-</style>

package/src/components/docs/PropsTable.astro

@@ -1,49 +0,0 @@
----
-// const { schema } = Astro.props
-
-// import Table from 'fulldev-ui/components/Table.astro'
-// import { zodToJsonSchema } from 'zod-to-json-schema'
-
-// const slug = Astro.params.page?.split('/').pop() || ''
-
-// const allSchemas = import.meta.glob('/src/schemas/**/*.ts', {
-//   eager: true,
-// })
-
-// const schemaName = schema ?? slug
-// const foundSchema = Object.entries(allSchemas).find(([key]) =>
-//   key.toLowerCase().includes(`/${schemaName.toLowerCase()}.ts`)
-// )?.[1] as any
-
-// const jsonSchema = zodToJsonSchema(foundSchema?.default, {
-//   pipeStrategy: 'output',
-// }) as { properties?: Record<string, any> }
-
-// const properties = jsonSchema.properties || {}
-
-// const tableBody = Object.entries(properties).map(([key, value]: any) => {
-//   let type = 'any'
-//   if (value.enum) {
-//     type = value.enum.join(' | ')
-//   } else if (value.type) {
-//     type = value.type
-//   } else if (value.$ref) {
-//     type = `typeof ${key}`
-//   }
-//   const defaultValue = value.default?.toString() ?? '-'
-//   return [key, type, defaultValue]
-// })
----
-
-<!-- <Table
-  size="md"
-  class:list={['props-table']}
-  header={['Prop', 'Type', 'Default']}
-  body={tableBody}
-/>
-
-<style is:global>
-  .props-table {
-    overflow: auto;
-  }
-</style> -->

package/src/components/experimental/Video.astro

@@ -1,32 +0,0 @@
-<!-- ---
-// 
-type Props = any & {
-  src: string
-  thumbnail?: string | undefined
-}
-
-const { src, thumbnail } = Astro.props
-const youtubeId =
-  (src?.includes('youtube.com') || src?.includes('youtu.be')) &&
-  src.split('/').pop()?.split('?').shift()
----
-
-{
-  youtubeId && !thumbnail && (
-    <iframe
-      class:list='image video']}
-      src={`https://www.youtube.com/embed/${youtubeId}?controls=0&showinfo=0&rel=0&modestbranding=1&loop=1`}
-      title="YouTube video player"
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-      allowfullscreen
-    />
-  )
-}
-{
-  youtubeId && thumbnail && (
-    <img
-      src={`https://img.youtube.com/vi/${youtubeId}/0.jpg`}
-      alt=""
-    />
-  )
-} -->

package/src/components/experimental/Window.astro

@@ -1,122 +0,0 @@
-<!-- ---
-import Button from 'fulldev-ui/components/Button.astro'
-
-const { componentProps } = Astro.props
-
-const randomId = Math.random().toString(36).substring(2, 15)
-const id = componentProps.title?.toLowerCase().replace(/ /g, '-') ?? randomId
-
-const isComponent =
-  Astro.url.pathname.includes('components/') ||
-  Astro.url.pathname.includes('frameworks') ||
-  Astro.url.pathname.includes('base/') ||
-  Astro.url.pathname.includes('typography/') ||
-  Astro.url.pathname.includes('segment/')
----
-
-{
-  isComponent ? (
-    <div class="component window">
-      <div class="example-container">
-        <slot name="example" />
-      </div>
-      <div class="code-container">
-        <slot name="code" />
-      </div>
-    </div>
-  ) : (
-    <div class="window block">
-      <div class="button-header">
-        <Button
-          for={id}
-          variant="secondary"
-        >
-          Preview / Code
-        </Button>
-      </div>
-      <input
-        type="checkbox"
-        id={id}
-        name={id}
-        class="window-toggle"
-      />
-      <div class="example-container">
-        <slot name="example" />
-      </div>
-      <div class="code-container">
-        <slot name="code" />
-      </div>
-    </div>
-  )
-}
-
-<style is:global>
-  @layer fulldev {
-    .window {
-      .code-container {
-        @apply w-full;
-      }
-
-      &.component {
-        border: 1px solid var(--base-6);
-        border-radius: var(--radius-2);
-        overflow: hidden;
-
-        .example-container {
-          display: flex;
-          flex-direction: column;
-          align-items: start;
-          gap: var(--space-4);
-          padding: var(--space-5);
-        }
-
-        .code-container {
-          border: none;
-          border-top: 1px solid var(--base-6);
-          border-radius: 0px;
-
-          .astro-code {
-            border: none !important;
-            border-radius: 0px !important;
-          }
-        }
-      }
-
-      &.block {
-        gap: var(--space-2);
-        padding-top: var(--space-7);
-        padding-bottom: var(--space-7);
-
-        .button-header {
-          padding: 0 var(--gutter);
-        }
-
-        .code-container {
-          display: none;
-          padding: 0 var(--gutter);
-          max-width: calc(100% - (2 * var(--gutter)));
-        }
-
-        .window-toggle {
-          display: none;
-          visibility: hidden;
-          opacity: 0;
-        }
-
-        .window-toggle:checked {
-          & ~ .example-container {
-            display: none;
-          }
-          & ~ .code-container {
-            display: block;
-          }
-        }
-
-        .example-container {
-          border-top: 1px solid var(--base-6);
-          width: 100%;
-        }
-      }
-    }
-  }
-</style> -->

package/src/content/pages/blocks/_footer.mdx

@@ -1,75 +0,0 @@
----
-title: Footer
----
-
-```astro live
----
-import Footer from 'fulldev-ui/components/Footer.astro'
----
-
-<Footer
-  heading="Fulldev UI"
-  text="Rapidly build content-driven websites."
-  columns={[
-    {
-      heading: 'Pages',
-      links: [
-        { href: '/overview/introduction', text: 'Docs' },
-        { href: '/typography/heading', text: 'Components' },
-        { href: '/blocks', text: 'Blocks' },
-      ],
-    },
-  ]}
-/>
-```
-
-```astro live
----
-import Footer from 'fulldev-ui/components/Footer.astro'
----
-
-<Footer
-  heading="Fulldev UI"
-  text="Rapidly build content-driven websites."
-  panel
-  columns={[
-    {
-      heading: 'Pages',
-      links: [
-        { href: '/overview/introduction', text: 'Docs' },
-        { href: '/typography/heading', text: 'Components' },
-        { href: '/blocks', text: 'Blocks' },
-      ],
-    },
-  ]}
-/>
-```
-
-```astro live
----
-import Footer from 'fulldev-ui/components/Footer.astro'
----
-
-<Footer
-  heading="Fulldev UI"
-  text="Rapidly build content-driven websites."
-  columns={[
-    {
-      heading: 'Pages',
-      links: [
-        { href: '/overview/introduction', text: 'Docs' },
-        { href: '/typography/heading', text: 'Components' },
-        { href: '/blocks', text: 'Blocks' },
-      ],
-    },
-    {
-      heading: 'Pages',
-      links: [
-        { href: '/overview/introduction', text: 'Docs' },
-        { href: '/typography/heading', text: 'Components' },
-        { href: '/blocks', text: 'Blocks' },
-      ],
-    },
-  ]}
-/>
-```