fulldev-ui 0.4.27 → 0.4.29

package/.github/CODEOWNERS

@@ -0,0 +1,2 @@
+# Make silveltman code owners for the entire repository
+* @silveltman

package/.github/workflows/release.yml

@@ -36,7 +36,7 @@ jobs:
           node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'
 
-      - name: Bump Version
+      - name: Bump Version and Create PR
         run: |
           VERSION=${GITHUB_REF#refs/tags/v}
           BRANCH_NAME="bump-version-${VERSION}"
@@ -45,34 +45,44 @@ jobs:
           git add package.json
           git commit -m "Bump to version $VERSION"
           git push origin $BRANCH_NAME
+          gh pr create --base main --head $BRANCH_NAME --title "Bump version to ${VERSION}" --body "Automated version bump to ${VERSION}"
+          gh pr merge --auto --merge $BRANCH_NAME
+        env:
+          GH_TOKEN: ${{ secrets.BOT_TOKEN }}
 
-      - name: Create Pull Request
-        id: cpr
-        uses: peter-evans/create-pull-request@v5
-        with:
-          token: ${{ secrets.BOT_TOKEN }}
-          branch: bump-version-${VERSION}
-          base: main
-          title: 'Bump version to $VERSION'
-          body: 'Automated version bump to $VERSION'
-          delete-branch: true
-
-      - name: Enable Pull Request Automerge
-        if: steps.cpr.outputs.pull-request-number
+      - name: Review PR
         run: |
-          gh pr merge --auto --merge "${{ steps.cpr.outputs.pull-request-number }}"
+          gh pr review $BRANCH_NAME --approve --body "Automated approval for version bump"
         env:
-          GH_TOKEN: ${{ secrets.BOT_TOKEN }}
+          GH_TOKEN: ${{ secrets.GHP_TOKEN }}
 
-      - name: Wait for checks
-        if: steps.cpr.outputs.pull-request-number
+      - name: Wait for PR to be merged
         run: |
-          gh pr checks ${{ steps.cpr.outputs.pull-request-number }} --watch
+          PR_URL=$(gh pr view $BRANCH_NAME --json url -q .url)
+          for i in {1..3}; do
+            PR_STATE=$(gh pr view $BRANCH_NAME --json state -q .state)
+            if [ "$PR_STATE" = "MERGED" ]; then
+              echo "PR has been merged"
+              exit 0
+            elif [ "$PR_STATE" = "CLOSED" ]; then
+              echo "PR was closed without merging"
+              exit 1
+            fi
+            echo "Attempt $i: Waiting for PR to be merged..."
+            if [ $i -eq 3 ]; then
+              echo "PR not merged after 3 attempts. Exiting with failure."
+              exit 1
+            fi
+            sleep 60
+          done
         env:
           GH_TOKEN: ${{ secrets.BOT_TOKEN }}
 
       - name: Publish to npm
-        run: npm publish --access public
+        run: |
+          git checkout main
+          git pull origin main
+          npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 

package/CHANGELOG.md

@@ -1,100 +1,4 @@
-### fulldev-ui@0.3.36
+# Changelog
 
-## What's Changed
+## [Click here to the releases](https://github.com/fulldotdev/ui/releases)
 
-Update theming.mdx by @spjpgrd in https://github.com/fulldotdev/ui/pull/41
-
-## New Contributors
-
-@spjpgrd made their first contribution in https://github.com/fulldotdev/ui/pull/41
-
----
-
-### fulldev-ui@0.3.28
-
-- removed some dependencies on scss, more to come
-- fixed color/contrast selector specificity
-- improved auto-spacing for structures and segments
-- added text-align to align prop on top of align-items
-- added missing size prop type to card
-- general minor fixes and improvements
-
----
-
-### fulldev-ui@0.3.7
-
-This release includes minor fixes and improvements
-
-- z-index 1 to all components for img background
-- avatar size improved
-- button now accepts avatar
-- image mask-lg
-- rating accepts label and avatars
-- card only overflow when panel
-- section overflow-hidden when panel
-- child spacing fixes
-
----
-
-### fulldev-ui@0.3.2
-
-- We have refactored the documentation of every single component for better understanding.
-- Component documentation now includes an interactive story-like preview. You can play around with live props and copy the code.
-- Added a search function to the header.
-- Props are now displayed more clearly with better examples using a table.
-
-### Tailwind Plugin & UnoCSS Preset
-
-For more information on this, visit the [frameworks page](https://ui.full.dev/overview/frameworks/).
-
-### Base Components
-
-- [Checkbox component](https://ui.full.dev/base/checkbox/) added
-- [Image component](https://ui.full.dev/base/image/) added
-- [Table component](https://ui.full.dev/base/table/) added
-- [Rating component](https://ui.full.dev/base/rating) added
-- [Select](https://ui.full.dev/base/select) and [Input](https://ui.full.dev/base/input) components have been modified to accept a label.
-
-### Typography Components
-
-- [Text component](https://ui.full.dev/typography/text/) (renamed from Paragraph)
-- [Link Component](https://ui.full.dev/typography/link) now has an underline prop.
-
-### Structure Components
-
-- [Wrap structure](https://ui.full.dev/structure/wrap/) added
-- Group structure removed, you can use Column, Row or Wrap directly
-- Stack has been renamed to Column
-
-### Segment Components
-
-- [Header component](https://ui.full.dev/segment/header/) added
-- [Footer component](https://ui.full.dev/segment/footer/) added
-- Deck segment removed, you can use Grid, Carousel or Masonry directly
-
-Theming
-[Theming](https://ui.full.dev/overview/theming/) has been revamped. Please read the documentation.
-
-Props:
-
-- `density` has been replaced by a boolean prop called `compact`
-- `variant` has different values.
-- `contrast` has been added as a boolean prop. Formerly was included in variant
-- `color` prop added as part of the revamped theming system
-
-## Migrating from v0.2
-
-Please go through the above specified changes and update you project accordingly. From this point on versions will have a lot less breaking changes. If they still do appear, we make sure to provide clear migration instructions.
-
-For any feedback, issues, or missing information, please create an [issue](https://github.com/fulldotdev/ui/issues/new/choose). We'd also love to hear what you think about this release and invite you to have a chat in our [Discord](https://discord.gg/CAqgtsgW).
-
----
-
-## fulldev-ui@0.2.10
-
-In this release we focussed on showing and improving the things that make Fulldev UI unique.
-
-- Updated homepage to include examples and features
-- Updates default and docs color palette to be more like the Astro ecosystem
-- Added segment and structure components
-- Added support for usage with CSS/JS frameworks

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.4.27",
+  "version": "0.4.29",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",

package/src/components/Button.astro

@@ -37,10 +37,8 @@ const {
 >
   <Avatar src={avatar} />
   <Icon name={icon} />
-  <slot>
-    <Fragment set:html={html} />
-    <Fragment set:text={text} />
-  </slot>
+  <Fragment set:html={html} />
+  <Fragment set:text={text} />
 </Root>
 
 <style is:global lang="scss">

package/src/components/Checkbox.astro

@@ -15,6 +15,7 @@ const {
   contrast,
   icon,
   name,
+  id,
   placeholder,
   value,
   disabled,
@@ -32,16 +33,16 @@ const {
   <Root
     as="input"
     type="checkbox"
-    id={name}
-    if={name}
+    id={id ?? name ?? label}
+    if={id ?? name ?? label}
+    name={name ?? label ?? id}
     {disabled}
     {required}
     {checked}
-    {name}
     {...rest}
   />
   <Label
-    for={name}
+    for={id ?? name ?? label}
     html={label}
     {contrast}
   />

package/src/components/Dialog.astro

@@ -34,6 +34,7 @@ const {
 >
   <Card
     as="div"
+    frame="panel"
     {...rest}
   >
     <slot />

package/src/components/Footer.astro

@@ -10,7 +10,7 @@ import Logo from 'fulldev-ui/components/experimental/Logo.astro'
 type Props<As extends HTMLTag = 'footer'> = Polymorphic<{ as: As }> & {
   structure?: 'spread' | 'row' | 'split' | 'column' | 'stack'
   variant?: 'base' | 'ghost' | 'subtle' | 'soft' | 'surface' | 'outline'
-  frame?: 'fill' | 'panel' | 'contain'
+  frame?: 'fill' | 'panel' | 'contain' | 'none'
   align?: 'start' | 'center' | 'end'
   size?: 'sm' | 'md' | 'lg'
   theme?: 'light' | 'dark'
@@ -22,12 +22,10 @@ type Props<As extends HTMLTag = 'footer'> = Polymorphic<{ as: As }> & {
   description?: string
   text?: string
   html?: string
-  columns?: [
-    {
-      heading: string
-      links: ComponentProps<typeof Link<'a'>>[]
-    },
-  ]
+  columns?: {
+    heading: string
+    links: ComponentProps<typeof Link<'a'>>[]
+  }[]
 }
 
 const {

package/src/components/Toc.astro

@@ -1,6 +1,7 @@
 ---
 import Column from 'fulldev-ui/components/Column.astro'
 import Link from 'fulldev-ui/components/Link.astro'
+import Card from './Card.astro'
 import Heading from './Heading.astro'
 
 const { toc, headings } = Astro.props
@@ -26,6 +27,21 @@ const { toc, headings } = Astro.props
             />
           )
         )}
+        <Card
+          size="sm"
+          frame="panel"
+          heading="Join our community Discord"
+          text="Get help, share your work and shape the future of fulldev-ui."
+          buttons={[
+            {
+              icon: 'brand-discord',
+              text: 'Join discord',
+              contrast: true,
+              href: '/discord',
+              size: 'sm',
+            },
+          ]}
+        />
       </>
     )
   }
@@ -50,6 +66,10 @@ const { toc, headings } = Astro.props
       @media (min-width: 1024px) {
         display: flex !important;
       }
+
+      .card .icon {
+        color: var(--base-1);
+      }
     }
   }
 </style>

package/src/components/Toggle.astro

@@ -0,0 +1,46 @@
+---
+import type { Polymorphic } from 'astro/types'
+import { uid } from 'radash'
+import Button from './Button.astro'
+
+type Props<As extends 'label'> = Polymorphic<{ as: As }> & {
+  color?: 'base' | 'brand' | undefined
+  id?: string | undefined
+  name?: string | undefined
+  icon?: string | undefined
+  html?: string | undefined
+  text?: string | undefined
+  toggled: boolean | undefined
+}
+
+const { id = uid(7), toggled, name, ...rest } = Astro.props
+---
+
+<input
+  class="toggle-checkbox"
+  checked={toggled}
+  type="checkbox"
+  id={id}
+  name={name ?? id}
+/>
+
+<Button
+  class:list="toggle"
+  variant="tertiary"
+  as="label"
+  for={id}
+  {...rest}
+/>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .toggle-checkbox {
+      display: none;
+
+      &:checked + .toggle {
+        background-color: var(--color-5);
+        color: var(--base-12);
+      }
+    }
+  }
+</style>

package/src/content/pages/base/checkbox.mdx

@@ -20,7 +20,7 @@ import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
 import Checkbox from 'fulldev-ui/components/Checkbox.astro'
 ---
 
-<Checkbox label="Label" name="checkbox" color="base" />
+<Checkbox label="My Checkbox" color="base" />
 ```
 
 ```astro live
@@ -28,8 +28,8 @@ import Checkbox from 'fulldev-ui/components/Checkbox.astro'
 import Checkbox from 'fulldev-ui/components/Checkbox.astro'
 ---
 
-<Checkbox name="checkbox" label="Base" color="base" />
-<Checkbox name="checkbox" label="Brand" color="brand" />
+<Checkbox label="Base" color="base" />
+<Checkbox label="Brand" color="brand" />
 ```
 
 ```astro live
@@ -37,7 +37,7 @@ import Checkbox from 'fulldev-ui/components/Checkbox.astro'
 import Checkbox from 'fulldev-ui/components/Checkbox.astro'
 ---
 
-<Checkbox name="checkbox" size="sm" />
-<Checkbox name="checkbox" size="md" />
-<Checkbox name="checkbox" size="lg" />
+<Checkbox label="Small" size="sm" />
+<Checkbox label="Medium" size="md" />
+<Checkbox label="Large" size="lg" />
 ```

package/src/content/pages/base/icon.mdx

@@ -7,6 +7,8 @@ title: Icon
 
 # Icon
 
+We use [Tabler Icons](https://tablericons.com/) under the hood, you can use any of those icons by having the `name` prop match one of the icon names.
+
 ```astro live
 ---
 import Icon from 'fulldev-ui/components/Icon.astro'

package/src/content/pages/base/section.mdx

@@ -7,73 +7,31 @@ title: Section
 
 # Section
 
+Please see the [blocks page](/blocks) for more examples, since they are built using sections.
+
 import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
 
 ```astro live
 ---
-import Button from 'fulldev-ui/components/Button.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Row from 'fulldev-ui/components/Row.astro'
 import Section from 'fulldev-ui/components/Section.astro'
-import Text from 'fulldev-ui/components/Text.astro'
 ---
 
-<Section>
-  <Heading> A section with equal columns </Heading>
-  <Text>
-    On mobile it's a single column, of course. All without having to think about
-    responsiveness. It just works. Have a look at the code, it's down below.
-  </Text>
-  <Row>
-    <Button href="/overview/installation">Installation</Button>
-    <Button variant="soft" href="/structure/split"> Component </Button>
-  </Row>
-  <Image src="/images/placeholder-landscape.webp" />
-</Section>
+<Section
+  heading="A section with equal columns"
+  text="On mobile it's a single column, of course. All without having to think about responsiveness. It just works. Have a look at the code, it's down below."
+  buttons={[
+    {
+      variant: 'primary',
+      href: '/overview/installation',
+      text: 'Installation',
+      contrast: true,
+    },
+    { variant: 'secondary', href: '/structure/split', text: 'Component' },
+  ]}
+  image={{ src: '/images/placeholder-landscape.webp' }}
+/>
 ```
 
 ## Props
 
 <PropsTable />
-
-## Examples
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Section from 'fulldev-ui/components/Section.astro'
-import Text from 'fulldev-ui/components/Text.astro'
----
-
-<Section variant="ghost" frame="panel">
-  <Heading> A section with a ghost variant </Heading>
-  <Text> This section has a ghost variant. </Text>
-  <Button> Button </Button>
-</Section>
-
-<Section variant="subtle" frame="panel">
-  <Heading> A section with a subtle variant </Heading>
-  <Text> This section has a subtle variant. </Text>
-  <Button> Button </Button>
-</Section>
-
-<Section variant="outline" frame="panel">
-  <Heading> A section with an outline variant </Heading>
-  <Text> This section has an outline variant. </Text>
-  <Button> Button </Button>
-</Section>
-
-<Section variant="soft" frame="panel">
-  <Heading> A section with a soft variant </Heading>
-  <Text> This section has a soft variant. </Text>
-  <Button> Button </Button>
-</Section>
-
-<Section variant="surface" frame="panel">
-  <Heading> A section with a surface variant </Heading>
-  <Text> This section has a surface variant. </Text>
-  <Button> Button </Button>
-</Section>
-```

package/src/content/pages/base/toggle.mdx

@@ -0,0 +1,32 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Toggle
+---
+
+# Toggle
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Toggle from 'fulldev-ui/components/Toggle.astro'
+---
+
+<Toggle text="Click me" icon="click" />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Toggle from 'fulldev-ui/components/Toggle.astro'
+---
+
+<Toggle icon={'code'} text="Auto save" toggled={true} />
+```

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

@@ -66,6 +66,14 @@ import Footer from 'fulldev-ui/components/Footer.astro'
         { 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/showcase.mdx

@@ -10,7 +10,7 @@ showcase:
     href: 'https://antislipprofiles.com'
   - heading: Fulldev UI
     image: /showcase/fulldev-ui.webp
-    href: 'https://ui.ull.dev'
+    href: 'https://ui.full.dev'
   - heading: The Gym Haren
     image: /showcase/the-gym-haren.webp
     href: 'https://thegymharen.nl'

package/src/pages/[...page].astro

@@ -6,7 +6,7 @@ import { mergeEntries } from '../utils/mergeEntries'
 
 export async function getStaticPaths() {
   const pages = await getCollection('pages')
-  return pages.map((page: any) => ({
+  return pages.map((page) => ({
     params: {
       page: page.slug === 'index' ? undefined : page.slug,
     },
@@ -14,7 +14,6 @@ export async function getStaticPaths() {
   }))
 }
 
-// @ts-ignore
 const { data, slug, ...rest } = Astro.props
 
 const merged = (await mergeEntries({ data, slug })) as any