fulldev-ui 0.5.0-beta.1 → 0.5.0-beta.11

package/src/components/Sidebar.astro

@@ -1,151 +1,101 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
-import Button from 'fulldev-ui/components/Button.astro'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Logo from 'fulldev-ui/components/experimental/Logo.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Search from 'fulldev-ui/components/Search.astro'
+import Menu from 'fulldev-ui/components/Menu.astro'
 import ThemeSelect from 'fulldev-ui/components/ThemeSelect.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Heading from './Heading.astro'
+import Toc from './Toc.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'aside'> {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  search?: boolean | undefined
-  logo?: string | undefined
-  company?: string | undefined
-  buttons?: any[] | undefined
-  open?: boolean | undefined
+  menu?: ComponentProps<typeof Menu>['groups']
+  heading?: ComponentProps<typeof Heading>['text']
+  render?: ComponentProps<typeof Toc>['render']
+  logo?: ComponentProps<typeof Logo>
+  toc?: ComponentProps<typeof Toc>['heading']
+  company?: ComponentProps<typeof Logo>['company']
+  themeselect?: boolean | undefined
 }
 
 const {
   size = 'sm',
-  open = false,
   logo,
   company,
-  buttons,
-  search,
+  render,
+  themeselect,
+  menu,
+  toc,
+  heading,
+  ...rest
 } = Astro.props
 ---
 
-<input
-  id="sidebar"
-  class="sidebar-checkbox"
-  type="checkbox"
-/>
-
 <Element
   class:list="sidebar"
   as="aside"
   {size}
-  {open}
+  {...rest}
 >
-  <Logo
-    src={logo}
-    company={company}
-  />
-  {search && <Search />}
-  <Element class:list="buttons">
-    {
-      buttons?.map(({ heading, slug, href, text, buttons }) => (
-        <>
-          <Heading
-            level={6}
-            text={heading}
-          />
-          <Button
-            variant="link"
-            {slug}
-            {href}
-            {text}
-          />
-          {buttons?.map((button: any) => (
-            <Button
-              variant="link"
-              {...button}
-            />
-          ))}
-        </>
-      ))
-    }
-    <ThemeSelect />
+  <Element
+    class:list="sidebar-header"
+    as="header"
+  >
+    <Logo
+      {company}
+      {...logo}
+    />
+    <Heading
+      level={4}
+      text={heading}
+    />
+    <slot name="header" />
+  </Element>
+  <Element class:list="sidebar-content">
+    <Menu groups={menu} />
+    <ThemeSelect if={themeselect} />
+    <slot />
   </Element>
 </Element>
 
 <style lang="scss" is:global>
   @layer fulldev {
-    .sidebar-checkbox {
-      display: none;
-    }
-
-    @media (max-width: 1023.999px) {
-      body:has(.sidebar-checkbox:checked) {
-        overflow: hidden;
-      }
-    }
-
     .sidebar {
-      --sidebar-width: 240px;
-
       display: none;
-      position: fixed;
-      top: var(--header-height, 0px);
-      bottom: 0;
-      left: 0;
-      flex-shrink: 0;
-      flex-direction: column;
-      justify-content: flex-start;
-      z-index: 10;
-      border-style: solid;
-      border-color: var(--color-a6);
-      background-color: var(--base-2);
-      padding: var(--space-md-5) var(--gutter);
-      width: 100%;
-      height: calc(100vh - var(--header-height, 0px));
-      overflow-y: auto;
-
-      &:is(.sidebar-checkbox:checked + &) {
-        display: flex;
-      }
 
       @media (min-width: 1024px) {
-        border-right-width: 1px;
-        padding: var(--space-md-6) var(--gutter);
-        width: var(--sidebar-width);
-
-        &.open {
-          display: flex;
-          position: sticky;
-        }
-      }
-
-      .buttons {
         display: flex;
+        position: sticky;
+        top: var(--header-height, 0px);
+        bottom: 0;
+        flex-shrink: 0;
         flex-direction: column;
-        gap: calc(var(--space-4) + var(--space-1));
+        justify-content: flex-start;
+        z-index: 10;
+        border-right: 1px solid var(--color-a6);
+        width: calc(var(--space-7) * 4);
+        height: calc(100vh - var(--header-height, 0px));
 
-        .theme-select {
-          margin-top: var(--space-5);
+        .sidebar-header {
+          display: flex;
+          position: sticky;
+          align-items: center;
+          border-bottom: 1px solid var(--color-a6);
+          padding: 0 var(--gutter);
+          width: 100%;
+          height: 56px;
         }
 
-        .button + .heading {
-          margin-top: var(--space-5);
+        .sidebar-content {
+          display: flex;
+          top: 0;
+          flex: 1;
+          flex-direction: column;
+          padding: var(--space-md-6) var(--gutter);
+          width: 100%;
+          overflow-y: auto;
         }
       }
-
-      .logo {
-        display: none;
-        position: absolute;
-        top: 0;
-        left: var(--gutter);
-        align-items: center;
-        height: 56px;
-      }
-    }
-
-    @media (min-width: 1024px) {
-      .header:not(.open) ~ .core .sidebar .logo {
-        display: flex;
-      }
     }
   }
 </style>

package/src/components/Social.astro

@@ -26,3 +26,10 @@ const platform = () => {
   {variant}
   {href}
 />
+
+<style is:global lang="scss">
+  .social {
+    padding: 0 var(--space-3);
+    height: calc(var(--text-2) + 2 * var(--space-3));
+  }
+</style>

package/src/components/ThemeSelect.astro

@@ -1,6 +1,8 @@
 ---
 import Select from 'fulldev-ui/components/Select.astro'
 // const defaultTheme = fulldevConfig.colors.theme || 'light'
+
+const { ...rest } = Astro.props
 ---
 
 <Select
@@ -9,6 +11,7 @@ import Select from 'fulldev-ui/components/Select.astro'
   options={['light', 'dark']}
   value="light"
   onchange="localStorage.setItem('theme', this.value); window.location.reload();"
+  {...rest}
 />
 
 <script>

package/src/components/Toc.astro

@@ -1,16 +1,17 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } 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 type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends GlobalProps, HTMLAttributes<'aside'> {
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  heading?: ComponentProps<typeof Heading>['text']
   render?: CollectionEntry<'pages'>['render'] | undefined
 }
 
-const { size = 'sm', render } = Astro.props
+const { size = 'sm', heading, render, ...rest } = Astro.props
 
 const headings = render ? (await render())?.headings : []
 const filteredHeadings = headings?.filter(
@@ -18,114 +19,52 @@ const filteredHeadings = headings?.filter(
 )
 ---
 
-<input
-  id="toc"
-  class="toc-checkbox"
-  type="checkbox"
-/>
-
 <Element
+  if={filteredHeadings?.length > 1}
   class:list="toc"
-  as="aside"
   {size}
+  {...rest}
 >
+  <Heading
+    level={6}
+    text={heading}
+  />
   {
-    filteredHeadings?.length > 0 && (
-      <>
-        <Heading
-          text="On this page"
-          level={6}
-        />
-        <nav class="toc-nav">
-          <Button
-            variant="link"
-            href={`#${filteredHeadings[0]?.slug}`}
-            text="Overview"
-            class="toc-link toc-link-h2"
-          />
-          {filteredHeadings.map((heading: any) => (
-            <Button
-              variant="link"
-              href={`#${heading.slug}`}
-              text={heading.text}
-              class={`toc-link toc-link-h${heading.depth}`}
-            />
-          ))}
-        </nav>
-      </>
-    )
+    filteredHeadings?.map((button: any) => (
+      <Button
+        class:list={`depth-${button.depth}`}
+        href={`#${button.slug}`}
+        variant="link"
+        text={button.text}
+      />
+    ))
   }
 </Element>
 
 <style lang="scss" is:global>
   @layer fulldev {
-    .toc-checkbox {
-      display: none;
-    }
-
-    @media (max-width: 1023.999px) {
-      body:has(.toc-checkbox:checked) {
-        overflow: hidden;
-      }
-    }
-
     .toc {
-      --toc-width: 240px;
-
       display: none;
-      position: fixed;
-      top: var(--header-height, 0px);
-      right: 0;
-      flex-shrink: 0;
-      flex-direction: column;
-      justify-content: flex-start;
-      gap: calc(var(--space-4) + var(--space-1));
-      z-index: 10;
-      border-left-width: 1px;
-      border-style: solid;
-      border-color: var(--color-a6);
-      background-color: var(--color-background);
-      padding: var(--space-md-6) var(--gutter);
-      width: 100%;
-      max-height: calc(100vh - var(--header-height, 0px));
-      overflow-y: auto;
-
-      &:is(.toc-checkbox:checked + &) {
-        display: flex;
-      }
 
       @media (min-width: 1024px) {
         display: flex;
         position: sticky;
-        border-left-width: 1px;
-        width: var(--toc-width);
-      }
-
-      .button + .heading {
-        margin-top: var(--space-5);
-      }
-
-      .toc-nav {
-        display: flex;
+        top: calc(var(--header-height, 0px) + var(--space-6));
+        bottom: 0;
+        flex-shrink: 0;
         flex-direction: column;
-      }
-
-      .toc-link {
-        text-align: left;
-      }
-
-      .toc-link-h2 {
-        margin-top: var(--space-3);
-      }
-
-      .toc-link-h3 {
-        margin-top: var(--space-3);
-        margin-left: var(--space-4);
-      }
-
-      .toc-link-h4 {
-        margin-top: var(--space-2);
-        margin-left: var(--space-5);
+        justify-content: flex-start;
+        gap: var(--space-4);
+        z-index: 10;
+        min-width: calc(var(--space-7) * 3);
+
+        .depth-3 {
+          padding-left: var(--space-4);
+        }
+
+        .depth-4 {
+          padding-left: var(--space-5);
+        }
       }
     }
   }

package/src/components/docs/PropsTable.astro

@@ -3,7 +3,7 @@ import Table from 'fulldev-ui/components/Table.astro'
 import { readFileSync } from 'node:fs'
 import { pascal } from 'radash'
 
-const slug = Astro.url.pathname.replace(/\/$/, '').split('/').pop() || ''
+const slug = Astro.params.page || 'index'
 const componentName = pascal(slug)
 
 const allComponents = import.meta.glob('/src/**/*.astro', { eager: true })

package/src/components/experimental/Form.astro

@@ -1,26 +1,52 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Button from '../Button.astro'
+import Input from '../Input.astro'
+import Select from '../Select.astro'
+import Textarea from '../Textarea.astro'
 
 interface Props extends GlobalProps, HTMLAttributes<'form'> {
-  structure?: 'column' | 'row' | 'group' | undefined
+  submit?: ComponentProps<typeof Button>['text']
+  fields?:
+    | (
+        | ComponentProps<typeof Input>
+        | ComponentProps<typeof Select>
+        | (ComponentProps<typeof Textarea> & { type?: 'textarea' | undefined })
+      )[]
+    | undefined
 }
 
-const { structure = 'column', ...rest } = Astro.props
+const { fields, submit, ...rest } = Astro.props
 ---
 
 <Element
-  class:list={`form ${structure}`}
+  class:list="form"
   as="form"
   {...rest}
 >
-  <slot />
+  <slot>
+    {
+      fields?.map((field) => {
+        if ('options' in field) return <Select {...field} />
+        if ('type' in field && field.type === 'textarea')
+          return <Textarea {...field} />
+        return <Input {...(field as any)} />
+      })
+    }
+    <Button
+      type="submit"
+      text={submit}
+    />
+  </slot>
 </Element>
 
 <style is:global lang="scss">
   .form {
     display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
     width: 100%;
     max-width: calc(var(--space-4) * 44);
   }