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

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' },
-      ],
-    },
-  ]}
-/>
-```

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

@@ -1,183 +0,0 @@
----
-title: Header
----
-
-```astro live
----
-import Header from 'fulldev-ui/components/Header.astro'
----
-
-<Header
-  heading="Fulldev UI"
-  links={[
-    {
-      text: 'Docs',
-      href: '/overview/introduction/',
-    },
-    {
-      text: 'Github',
-      href: 'https://github.com/fulldotdev/ui',
-    },
-  ]}
-  buttons={[
-    {
-      title: 'X / Twitter',
-      icon: 'brand-x',
-      href: 'https://x.com/silveltm',
-      target: '_blank',
-      contrast: true,
-    },
-  ]}
-  position="relative"
-  drawer={[
-    {
-      links: [
-        { text: 'Docs', href: '/overview/introduction' },
-        { text: 'Components', href: '/typography/heading' },
-        { text: 'Blocks', href: '/blocks' },
-      ],
-    },
-    {
-      heading: 'Overview',
-      links: [
-        { text: 'Installation', href: '/overview/installation' },
-        { text: 'Integration', href: '/overview/integration' },
-        { text: 'Theming', href: '/overview/theming' },
-        { text: 'Frameworks', href: '/overview/frameworks' },
-      ],
-    },
-    { heading: 'Structure', folder: 'structure' },
-    { heading: 'Typography', folder: 'typography' },
-    { heading: 'Base', folder: 'base' },
-  ]}
-/>
-```
-
-```astro live
----
-import Header from 'fulldev-ui/components/Header.astro'
----
-
-<Header
-  heading="Fulldev UI"
-  links={[
-    {
-      text: 'Docs',
-      href: '/overview/introduction/',
-    },
-    {
-      text: 'Github',
-      href: 'https://github.com/fulldotdev/ui',
-    },
-  ]}
-  buttons={[
-    {
-      text: 'Docs',
-      href: '/overview/introduction/',
-    },
-    {
-      title: 'X / Twitter',
-      icon: 'brand-x',
-      href: 'https://x.com/silveltm',
-      target: '_blank',
-    },
-  ]}
-  position="relative"
-/>
-```
-
-```astro live
----
-import Header from 'fulldev-ui/components/Header.astro'
----
-
-<Header
-  heading="Fulldev UI"
-  links={[
-    {
-      text: 'Docs',
-      href: '/overview/introduction/',
-    },
-    {
-      text: 'Github',
-      href: 'https://github.com/fulldotdev/ui',
-    },
-  ]}
-  buttons={[
-    {
-      text: 'Docs',
-      href: '/overview/introduction/',
-      contrast: true,
-    },
-    {
-      title: 'X / Twitter',
-      icon: 'brand-x',
-      href: 'https://x.com/silveltm',
-      target: '_blank',
-      contrast: true,
-    },
-  ]}
-  panel
-  position="relative"
-/>
-```
-
-```astro live
----
-import Header from 'fulldev-ui/components/Header.astro'
----
-
-<Header
-  heading="Fulldev UI"
-  links={[
-    {
-      text: 'Docs',
-      href: '/overview/introduction/',
-    },
-    {
-      text: 'Github',
-      href: 'https://github.com/fulldotdev/ui',
-    },
-  ]}
-  buttons={[
-    {
-      title: 'X / Twitter',
-      icon: 'brand-x',
-      href: 'https://x.com/silveltm',
-      target: '_blank',
-      contrast: true,
-    },
-  ]}
-  position="relative"
-/>
-```
-
-```astro live
----
-import Header from 'fulldev-ui/components/Header.astro'
----
-
-<Header
-  heading="Fulldev UI"
-  links={[
-    {
-      text: 'Docs',
-      href: '/overview/introduction/',
-    },
-    {
-      text: 'Github',
-      href: 'https://github.com/fulldotdev/ui',
-    },
-  ]}
-  buttons={[
-    {
-      title: 'X / Twitter',
-      icon: 'brand-x',
-      href: 'https://x.com/silveltm',
-      target: '_blank',
-      contrast: true,
-    },
-  ]}
-  position="relative"
-/>
-```

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

@@ -1,122 +0,0 @@
----
-title: Prices
----
-
-```astro live
----
-import Prices from 'fulldev-ui/blocks/Prices.astro'
----
-
-<Prices
-  heading="Choose the plan that suits you"
-  text="Our plans are designed to meet the requirements of both beginners and advanced users."
-  cards={[
-    {
-      heading: 'Free',
-      text: 'A free plan to help you get started',
-      price: 10,
-      list: ['1 GB of space', 'Support at $0', '1 email', '1 domain'],
-      buttons: [{ text: 'Get started', variant: 'secondary' }],
-    },
-    {
-      label: 'Best value',
-      color: 'brand',
-      heading: 'Premium',
-      text: 'Suitable for small to medium businesses with a larger team',
-      price: 25,
-      list: ['10 GB of space', 'Support at $29', '10 email', '10 domain'],
-      buttons: [{ text: 'Get started' }],
-    },
-    {
-      heading: 'Enterprise',
-      text: 'Our best plan for large companies with larger teams',
-      price: 100,
-      list: ['100 GB of space', 'Support at $99', '100 email', '100 domain'],
-      buttons: [{ text: 'Get started', variant: 'secondary' }],
-    },
-  ]}
-/>
-```
-
-```astro live
----
-import Prices from 'fulldev-ui/blocks/Prices.astro'
----
-
-<Prices
-  rating={{
-    value: 5,
-    label: '100+ happy customers',
-    avatars: [
-      'avatar-1.jpeg',
-      'avatar-2.jpeg',
-      'avatar-3.jpeg',
-      'avatar-4.jpeg',
-    ],
-  }}
-  heading="Flexible Pricing Options"
-  text="Choose between monthly or annual billing. Switch anytime."
-  cards={[
-    {
-      heading: 'Basic',
-      text: 'Essential features for small teams',
-      price: 15,
-      list: ['5 projects', '10 GB storage', 'Basic reporting'],
-      button: { text: 'Get started', variant: 'primary', contrast: true },
-    },
-    {
-      heading: 'Pro',
-      text: 'Advanced features for growing businesses',
-      price: 49,
-      list: [
-        'Unlimited projects',
-        '100 GB storage',
-        'Advanced reporting',
-        'Team collaboration',
-      ],
-      button: { text: 'Get started', variant: 'primary', contrast: true },
-    },
-  ]}
-/>
-```
-
-```astro live
----
-import Prices from 'fulldev-ui/blocks/Prices.astro'
----
-
-<Prices
-  heading="Flexible Pricing Options"
-  text="Choose between monthly or annual billing. Switch anytime."
-  cards={[
-    {
-      heading: 'Basic',
-      text: 'Essential features for small teams',
-      price: 15,
-      list: ['5 projects', '10 GB storage', 'Basic reporting'],
-      button: { text: 'Get started', variant: 'primary', contrast: true },
-    },
-    {
-      heading: 'Pro',
-      text: 'Advanced features for growing businesses',
-      price: 49,
-      list: [
-        'Unlimited projects',
-        '100 GB storage',
-        'Advanced reporting',
-        'Team collaboration',
-      ],
-      button: { text: 'Get started', variant: 'primary', contrast: true },
-    },
-  ]}
-  table={{
-    header: ['Features', 'Basic', 'Pro'],
-    body: [
-      ['Amount of storage', '10 GB', '100 GB'],
-      ['Amount of projects', '5', 'Unlimited'],
-      ['Advanced reporting', 'No', 'Yes'],
-      ['Team collaboration', 'No', 'Yes'],
-    ],
-  }}
-/>
-```