Merge pull request #268 from josemarluedke/feat/docs-site

Revamp docs site
josemarluedke · Feb 16, 2024 · 88ccad5 · 88ccad5
2 parents 99021be + 47da0b4
commit 88ccad5
Show file tree

Hide file tree

Showing 61 changed files with 5,030 additions and 5,453 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -47,7 +47,7 @@ module.exports = {
         'site/tests/dummy/config/**/*.js',
         'site/**/tailwind.config.js',
         'site/.docfy-config.js',
-        'site/lib/docfy-theme/*.js',
+        'site/lib/*.js',
         'test-app/ember-cli-build.js',
         'test-app/testem.js',
         'test-app/config/**/*.js',

diff --git a/packages/buttons/src/components/button-group.md b/packages/buttons/src/components/button-group.md
@@ -105,3 +105,4 @@ import { ButtonGroup } from '@frontile/buttons';
 
 ## API
 
+<Signature @package="buttons" @component="ButtonGroup" />
diff --git a/packages/buttons/src/components/button.md b/packages/buttons/src/components/button.md
@@ -140,4 +140,4 @@ argument `@class` will override and merge TailwindCSS class names.
 
 ## API
 
-<ArgsTable @of="Button" />
+<Signature @package="buttons" @component="Button" />
diff --git a/packages/buttons/src/components/chip.md b/packages/buttons/src/components/chip.md
@@ -153,3 +153,4 @@ argument `@class` will override and merge TailwindCSS class names.
 
 ## API
 
+<Signature @package="buttons" @component="Chip" />
diff --git a/packages/buttons/src/components/close-button.md b/packages/buttons/src/components/close-button.md
@@ -26,4 +26,4 @@ import { CloseButton} from '@frontile/buttons';
 
 ## API
 
-<ArgsTable @of="CloseButton" />
+<Signature @package="buttons" @component="CloseButton" />
diff --git a/packages/buttons/src/components/toggle-button.md b/packages/buttons/src/components/toggle-button.md
@@ -120,3 +120,4 @@ import { ToggleButton } from '@frontile/buttons';
 
 ## API
 
+<Signature @package="buttons" @component="ToggleButton" />
diff --git a/packages/changeset-form/docs/changeset-form-usage.md b/packages/changeset-form/docs/changeset-form-usage.md
@@ -113,7 +113,7 @@ export default class Demo extends Component {
 
 ### Args
 
-<ArgsTable @of="ChangesetForm" class="mb-8" />
+<Signature @package="changeset-form" @component="ChangesetForm" class="mb-8" />
 
 ### Blocks
 

diff --git a/packages/collections/src/components/dropdown.md b/packages/collections/src/components/dropdown.md
@@ -63,3 +63,4 @@ export default class Example extends Component {
 
 ## API
 
+<Signature @package="collections" @component="Dropdown" />
diff --git a/packages/forms/src/components/form-checkbox-group.md b/packages/forms/src/components/form-checkbox-group.md
@@ -2,4 +2,4 @@
 
 ## API
 
-<ArgsTable @of="FormCheckboxGroup" />
+<Signature @package="forms" @component="FormCheckboxGroup" />
diff --git a/packages/forms/src/components/form-checkbox.md b/packages/forms/src/components/form-checkbox.md
@@ -2,4 +2,4 @@
 
 ## API
 
-<ArgsTable @of="FormCheckbox" />
+<Signature @package="forms" @component="FormCheckbox" />
diff --git a/packages/forms/src/components/form-input.md b/packages/forms/src/components/form-input.md
@@ -2,4 +2,4 @@
 
 ## API
 
-<ArgsTable @of="FormInput" />
+<Signature @package="forms" @component="FormInput" />
diff --git a/packages/forms/src/components/form-radio-group.md b/packages/forms/src/components/form-radio-group.md
@@ -2,4 +2,4 @@
 
 ## API
 
-<ArgsTable @of="FormRadioGroup" />
+<Signature @package="forms" @component="FormRadioGroup" />
diff --git a/packages/forms/src/components/form-radio.md b/packages/forms/src/components/form-radio.md
@@ -2,4 +2,4 @@
 
 ## API
 
-<ArgsTable @of="FormRadio" />
+<Signature @package="forms" @component="FormRadio" />
diff --git a/packages/forms/src/components/form-select.md b/packages/forms/src/components/form-select.md
@@ -8,4 +8,4 @@ In the example below, we have a label, hint, error validation, search and `allow
 
 ## API
 
-<ArgsTable @of="FormSelect" />
+<Signature @package="forms" @component="FormSelect" />
diff --git a/packages/forms/src/components/form-textarea.md b/packages/forms/src/components/form-textarea.md
@@ -2,4 +2,4 @@
 
 ## API
 
-<ArgsTable @of="FormTextarea" />
+<Signature @package="forms" @component="FormTextarea" />
diff --git a/packages/notifications/src/components/notifications-container.md b/packages/notifications/src/components/notifications-container.md
@@ -6,4 +6,4 @@ category: components
 
 ## API
 
-<ArgsTable @of="NotificationsContainer" />
+<Signature @package="notifications" @component="NotificationsContainer" />
diff --git a/packages/overlays/src/components/drawer.md b/packages/overlays/src/components/drawer.md
@@ -6,4 +6,4 @@ url: drawer
 
 ## API
 
-<ArgsTable @of="Drawer" />
+<Signature @package="overlays" @component="Drawer" />
diff --git a/packages/overlays/src/components/modal.md b/packages/overlays/src/components/modal.md
@@ -6,4 +6,4 @@ url: modal
 
 ## API
 
-<ArgsTable @of="Modal" />
+<Signature @package="overlays" @component="Modal" />
diff --git a/packages/overlays/src/components/overlay.md b/packages/overlays/src/components/overlay.md
@@ -21,4 +21,4 @@ It contains all the core features necessary for a great experience.
 
 ## API
 
-<ArgsTable @of="Overlay" />
+<Signature @package="overlays" @component="Overlays" />
diff --git a/packages/overlays/src/components/popover.gts b/packages/overlays/src/components/popover.gts
@@ -59,7 +59,10 @@ interface PopoverSignature {
         toggle: () => void;
         open: () => void;
         close: () => void;
-        trigger: ModifierLike<{ Element: HTMLElement }>;
+        trigger: ModifierLike<{
+          Element: HTMLElement;
+          Args: { Positional: [eventType?: 'click' | 'hover'] };
+        }>;
         Content: WithBoundArgs<
           typeof Content,
           'loop' | 'isOpen' | 'id' | 'toggle' | 'blockScroll' | 'backdrop'
@@ -93,19 +96,30 @@ class Popover extends Component<PopoverSignature> {
     }
   };
 
-  trigger = modifier((el: HTMLElement) => {
-    this.triggerEl = el as HTMLLIElement;
-
-    el.addEventListener('click', this.toggle);
-    el.setAttribute('aria-haspopup', 'true');
-    el.setAttribute('aria-controls', this.menuId);
-    el.setAttribute('aria-expanded', this.isOpen.toString());
-
-    return () => {
-      el.removeEventListener('click', this.toggle);
-      this.triggerEl = undefined;
-    };
-  });
+  trigger = modifier(
+    (el: HTMLElement, [eventType]: [eventType?: 'click' | 'hover']) => {
+      this.triggerEl = el as HTMLLIElement;
+      if (eventType === 'hover') {
+        el.addEventListener('mouseenter', this.toggle);
+        el.addEventListener('mouseleave', this.toggle);
+      } else {
+        el.addEventListener('click', this.toggle);
+      }
+      el.setAttribute('aria-haspopup', 'true');
+      el.setAttribute('aria-controls', this.menuId);
+      el.setAttribute('aria-expanded', this.isOpen.toString());
+
+      return () => {
+        if (eventType === 'hover') {
+          el.removeEventListener('mouseenter', this.toggle);
+          el.removeEventListener('mouseleave', this.toggle);
+        } else {
+          el.removeEventListener('click', this.toggle);
+        }
+        this.triggerEl = undefined;
+      };
+    }
+  );
 
   updateAriaExtanded = modifier((_: HTMLElement) => {
     if (this.triggerEl) {
@@ -207,6 +221,9 @@ interface ContentSignature {
   Blocks: { default: [] };
 }
 
+/**
+ * Component yielded from Popover
+ */
 class Content extends Component<ContentSignature> {
   get loop() {
     assert(

diff --git a/packages/overlays/src/components/popover.md b/packages/overlays/src/components/popover.md
@@ -282,3 +282,6 @@ import { Button } from '@frontile/buttons';
 
 ## API
 
+<Signature @package="overlays" @component="Popover" />
+
+<Signature @package="overlays" @module="popover" @component="Content" />
diff --git a/packages/status/src/components/progress-bar.md b/packages/status/src/components/progress-bar.md
@@ -172,3 +172,5 @@ Using the class attribute will just append the class names passed in, while the
 argument `@class` will override and merge TailwindCSS class names.
 
 ## API
+
+<Signature @package="status" @component="ProgressBar" />
diff --git a/packages/utilities/src/components/collapsible.md b/packages/utilities/src/components/collapsible.md
@@ -4,4 +4,4 @@ This component provides unstyled collapsible ability.
 
 ## API
 
-<ArgsTable @of="Collapsible" />
+<Signature @package="utilities" @component="Collapsible" />
diff --git a/packages/utilities/src/components/divider.md b/packages/utilities/src/components/divider.md
@@ -30,3 +30,4 @@ import { Divider } from '@frontile/utilities';
 
 ## API
 
+<Signature @package="utilities" @component="Divider" />