Feature/122 (#305)

apps/docs/.eslintrc.json

@@ -23,6 +23,7 @@
         "TableSection": true,
         "Switcher": true,
         "IconSpecTable": true,
+        "Overview": true,
         "PreviewComponent": true,
         "MigrateGuide": true,
         "PackageInstallation": true,

apps/docs/app/components/[...slug]/page.tsx

@@ -63,7 +63,7 @@ export default async function ComponentPage({ params }: PageProps) {
         <div className="hd-section">
             <SubHeader links={sectionLinks} />
             <div className="hd-container">
-                <Aside title="On this page" links={sectionLinks} />
+                {type !== "overview" && <Aside title="On this page" links={sectionLinks} />}
                 <main>
                     <Heading title={title} tag={status} description={description} links={componentLinks} />
                     <div className="hd-content">

apps/docs/app/tokens.css

@@ -74,13 +74,15 @@
     --hd-color-primary-text-hover: var(--hd-primary-700);
     --hd-color-primary-text-strong: var(--hd-primary-900);
     --hd-color-primary-surface: var(--hd-primary-300);
+    --hd-color-primary-surface-weak: var(--hd-primary-100);
     --hd-color-primary-surface-hover: var(--hd-primary-500);
     --hd-color-primary-border: var(--hd-primary-600);
     --hd-color-neutral-icon: var(--hd-neutral-900);
     --hd-color-neutral-icon-hover: var(--hd-primary-900);
     --hd-color-neutral-icon-weak: var(--hd-neutral-700);
     --hd-color-neutral-icon-weak-hover: var(--hd-neutral-900);
     --hd-color-neutral-border: var(--hd-neutral-75);
+    --hd-color-neutral-border-hover: var(--hd-neutral-300);
     --hd-color-neutral-border-weak: var(--hd-neutral-20);
     --hd-color-accent-text: var(--hd-accent-700);
     --hd-color-accent-border: var(--hd-accent-700);
@@ -108,6 +110,7 @@
     --hd-color-primary-text-hover: var(--hd-white);
     --hd-color-primary-text-strong: var(--hd-primary-900);
     --hd-color-primary-surface: var(--hd-primary-300);
+    --hd-color-primary-surface-weak: var(--hd-primary-900);
     --hd-color-primary-surface-hover: var(--hd-primary-500);
     --hd-color-primary-border: var(--hd-primary-600);
     --hd-color-primary-border-weak: var(--hd-primary-700);
@@ -116,6 +119,7 @@
     --hd-color-neutral-icon-weak: var(--hd-neutral-300);
     --hd-color-neutral-icon-weak-hover: var(--hd-neutral-0);
     --hd-color-neutral-border: var(--hd-neutral-700);
+    --hd-color-neutral-border-hover: var(--hd-neutral-400);
     --hd-color-accent-text: var(--hd-accent-300);
     --hd-color-accent-border: var(--hd-accent-700);
     --hd-color-accent-surface: var(--hd-accent-900);

apps/docs/app/ui/components/overview/Overview.tsx

@@ -0,0 +1,36 @@
+import { allComponents } from "@/.contentlayer/generated";
+import Link from "next/link";
+import Image from "next/image";
+import Title from "@/components/title/Title";
+
+import "./overview.css";
+
+const Overview = () => {
+    // Get unique categories
+    const categories = Array.from(new Set(allComponents.map(component => component.category)));
+
+    return (
+        <div className="hd-component-overview-wrapper">
+            {categories.map(category => (
+                <div className="hd-component-overview-category" key={category}>
+                    <Title as="h3" level={2} className="hd-component-overview-category__title">{category}</Title>
+                    <div className="hd-component-overview">
+                        {allComponents.filter(component => component.category && component.category === category).map(component => (
+                            <Link key={component._id} className="hd-component-overview__item" href={`/${component._raw.flattenedPath}`}>
+                                <div className="hd-component-overview__item-thumb">
+                                    <Image src={`https://place-hold.it/260x140?text=${component.title}&fontsize=20`} alt="thumb" width="260" height="140" className="hd-component-overview__item-img" />
+                                </div>
+                                <div className="hd-component-overview-item__caption">
+                                    <h3>{component.title}</h3>
+                                    <p className="hd-component-overview__item-teaser">{component.description}</p>
+                                </div>
+                            </Link>
+                        ))}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default Overview;

apps/docs/app/ui/components/overview/overview.css

@@ -0,0 +1,64 @@
+.hd-component-overview {
+    display: grid;
+    gap: var(--hd-space-2);
+    grid-template-columns: repeat(auto-fill, minmax(18.125rem, 1fr));
+}
+
+.hd-component-overview__item {
+    border: 0.0625rem solid var(--hd-color-neutral-border);
+    border-radius: var(--hd-space-1);
+    height: 20rem;
+    position: relative;
+}
+
+.hd-component-overview__item-teaser {
+    font-size: 1rem;
+    line-height: 1.125;
+    margin-top: var(--hd-space-1);
+}
+
+.hd-component-overview__item-thumb {
+    align-items: center;
+    border-radius: var(--hd-space-1);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: var(--hd-space-2);
+    width: 100%;
+}
+
+.hd-component-overview__item-img {
+    max-width: 19.5rem;
+}
+
+.hd-component-overview-category {
+    margin-bottom: var(--hd-space-4);
+}
+
+.hd-component-overview-category__title {
+    text-transform: capitalize;
+    margin-bottom: var(--hd-space-2);
+}
+
+.hd-component-overview-item__caption {
+    padding: var(--hd-space-2);
+}
+
+.hd-component-overview__item:hover,
+.hd-component-overview__item:focus-visible  {
+    background-color: var(--hd-color-neutral-surface-weak);
+    border-color: var(--hd-color-neutral-border-hover);
+}
+
+.hd-component-item__overlay-effect {
+    background-color: rgb(0 0 0 / 6.4%);
+    border-radius: var(--hd-space-1);
+    height: calc(100% + var(--hd-space-2));
+    left: calc(-1 * var(--hd-space-1));
+    opacity: 0;
+    position: absolute;
+    transition: opacity 0.3s ease;
+    top: calc(-1 * var(--hd-space-1));
+    width: calc(100% + var(--hd-space-2));
+    z-index: -1;
+}

apps/docs/components/mdx/components.tsx

@@ -14,6 +14,7 @@ import IconSpecTable from "@/app/ui/tokens/table/IconSpecTable.tsx";
 import Tabs from "@/components/tabs/Tabs.tsx";
 import TableSection from "@/app/ui/tokens/tableSection/TableSection.tsx";
 import Switcher from "@/app/ui/icons/switcher/Switcher.tsx";
+import Overview from "@/app/ui/components/overview/Overview.tsx";
 import Title from "@/components/title/Title.tsx";
 import MotionPreview from "@/components/motionPreview/MotionPreview.tsx";
 import Footnote from "@/components/footnote/Footnote.tsx";
@@ -46,6 +47,7 @@ export const components = {
     TypographyVariantTable: TypographyVariantTable,
     IconTable: IconTable,
     IconSpecTable: IconSpecTable,
+    Overview: Overview,
     Tabs: Tabs,
     TableSection: TableSection,
     Switcher: Switcher,

apps/docs/components/title/title.css

@@ -1,42 +1,42 @@
-.hd-title {
+:where(.hd-title) {
     --hd-title-font-family: var(--hd-default-font-family);
 
     font-family: var(--hd-title-font-family);
     line-height: 1;
     margin-block: 0;
 }
 
-.hd-title--level1 {
+:where(.hd-title--level1) {
     font-size: 2.5em;
     margin-block-end: 1rem;
 }
 
-.hd-title--level2 {
+:where(.hd-title--level2) {
     font-size: 1.5em;
     margin-block: 3rem 1rem;
 }
 
-.hd-title--level3 {
+:where(.hd-title--level3) {
     font-size: 1.25em;
     margin-block: 2rem 0.825rem;
 }
 
-.hd-title--level4 {
+:where(.hd-title--level4) {
     font-size: 1.125em;
     margin-block: 1.5rem 0.75rem;
 }
 
-.hd-title--level5 {
+:where(.hd-title--level5) {
     font-size: 1rem;
     margin-block: 1rem 0.625rem;
 }
 
-.hd-title-link {
+:where(.hd-title-link ){
     position: relative;
     display: inline;
 }
 
-.hd-title-link::after {
+:where(.hd-title-link::after ){
     content: "#";
     position: absolute;
     left: calc(100% + 1ch);
@@ -47,7 +47,7 @@
     transition: opacity 0.1s ease-in;
 }
 
-.hd-title-link:hover::after,
-.hd-title-link:focus::after {
+:where(.hd-title-link:hover::after),
+:where(.hd-title-link:focus::after) {
     opacity: 1;
 }

apps/docs/content/components/actions/button.mdx → apps/docs/content/components/buttons/button.mdx

@@ -1,6 +1,7 @@
 ---
 title: Button
 description: Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
+category: "buttons"
 links:
     source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/buttons/src/Button.tsx
 ---

apps/docs/content/components/getting-started/overview.mdx

@@ -0,0 +1,7 @@
+---
+title: Overview
+description: TBD
+order: 2
+---
+
+<Overview />

apps/docs/contentlayer.config.js

@@ -180,6 +180,9 @@ export const Components = defineDocumentType(() => ({
         status: {
             type: "string"
         },
+        category: {
+            type: "string"
+        },
         order: {
             type: "number"
         },

apps/docs/datas/components/BadgeContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/ButtonContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/ButtonGroupContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/CheckboxContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/CheckboxFieldContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/CheckboxGroupContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/CheckboxListContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/ChipContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/ClearButtonContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/ClearSlots.json

@@ -0,0 +1 @@
+[{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/ClearSlots.tsx","description":"Writing slots in a component can be a bit tricky. This component is a utility that allows you to clear the slots of a component.\n\nFor instance: In a dialog, slots could apply specific styles to a Divider divider between the heading and the content.\nIf someone wanted to make a two column layout in their content and use a Divider, they'd need to do some work to get rid of the class name the dialog applies.\n\nThere are a few reasons why you might want to clear slots:\n- You're trying to make a component that is a container for other components, and you don't want anything set above to affect your content.\n- You're trying to specify a different slot provider inside","displayName":"ClearProviders","methods":[],"props":{"values":{"defaultValue":null,"description":"The list of providers to clear.","name":"values","parent":{"fileName":"wl-hopper/packages/components/src/utils/src/ClearSlots.tsx","name":"ClearProvidersProps"},"declarations":[{"fileName":"wl-hopper/packages/components/src/utils/src/ClearSlots.tsx","name":"ClearProvidersProps"}],"required":true,"type":{"name":"Context<ContextValue<unknown, T>>[]"}}},"groups":{"default":{"values":{"defaultValue":null,"description":"The list of providers to clear.","name":"values","parent":{"fileName":"wl-hopper/packages/components/src/utils/src/ClearSlots.tsx","name":"ClearProvidersProps"},"declarations":[{"fileName":"wl-hopper/packages/components/src/utils/src/ClearSlots.tsx","name":"ClearProvidersProps"}],"required":true,"type":{"name":"Context<ContextValue<unknown, T>>[]"}}},"events":{},"accessibility":{},"layout":{}}},{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/ClearSlots.tsx","description":"Most of the time, you won't need to use this component. It's mostly useful for when you're trying to make a component that is a container for other components, and you don't want anything set above to affect your content.","displayName":"ClearContainerSlots","methods":[],"props":{},"groups":{"default":{},"events":{},"accessibility":{},"layout":{}}}]

apps/docs/datas/components/ContentContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/EmbeddedButtonContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/ErrorMessageContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/FooterContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/HeadingContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/HelperMessageContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/IconListContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/InputGroupContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/LabelContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/LinkContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/OverlineTextContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/PasswordFieldContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/PopoverContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/RadioContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/RadioFieldContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/RadioGroupContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/RadioListContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/SearchFieldContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/SlotProvider.json

@@ -0,0 +1 @@
+[{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/SlotProvider.ts","description":"In complex components, you may need to provide many contexts. The SlotProvider component is a utility that makes it\neasier to provide multiple React contexts without manually nesting them.\n This can be achieved by passing pairs of contexts and values as an array to the values prop.\n\n[View Documentation](TODO)","displayName":"SlotProvider","methods":[],"props":{"values":{"defaultValue":null,"description":"","name":"values","parent":{"fileName":"wl-hopper/node_modules/.pnpm/react-aria-components@1.2.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-aria-components/dist/types.d.ts","name":"ProviderProps"},"declarations":[{"fileName":"wl-hopper/node_modules/.pnpm/react-aria-components@1.2.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-aria-components/dist/types.d.ts","name":"ProviderProps"}],"required":true,"type":{"name":"ProviderValues<A, B, C, D, E, F, G, H, I, J, K>"}}},"groups":{"default":{"values":{"defaultValue":null,"description":"","name":"values","parent":{"fileName":"wl-hopper/node_modules/.pnpm/react-aria-components@1.2.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-aria-components/dist/types.d.ts","name":"ProviderProps"},"declarations":[{"fileName":"wl-hopper/node_modules/.pnpm/react-aria-components@1.2.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-aria-components/dist/types.d.ts","name":"ProviderProps"}],"required":true,"type":{"name":"ProviderValues<A, B, C, D, E, F, G, H, I, J, K>"}}},"events":{},"accessibility":{},"layout":{}}}]

apps/docs/datas/components/SpinnerContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/SwitchContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/SwitchFieldContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/TagContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/TagGroupContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/TagListContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/TextContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/TextFieldContext.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/assertion.json

@@ -0,0 +1 @@
+[{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/assertion.ts","description":"","displayName":"isNull","methods":[],"props":{},"groups":{"default":{},"events":{},"accessibility":{},"layout":{}}},{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/assertion.ts","description":"","displayName":"isUndefined","methods":[],"props":{},"groups":{"default":{},"events":{},"accessibility":{},"layout":{}}},{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/assertion.ts","description":"","displayName":"isDefined","methods":[],"props":{},"groups":{"default":{},"events":{},"accessibility":{},"layout":{}}},{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/assertion.ts","description":"","displayName":"isNil","methods":[],"props":{},"groups":{"default":{},"events":{},"accessibility":{},"layout":{}}},{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/assertion.ts","description":"","displayName":"isNilOrEmpty","methods":[],"props":{},"groups":{"default":{},"events":{},"accessibility":{},"layout":{}}},{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/assertion.ts","description":"","displayName":"isString","methods":[],"props":{},"groups":{"default":{},"events":{},"accessibility":{},"layout":{}}},{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/assertion.ts","description":"","displayName":"isNumber","methods":[],"props":{},"groups":{"default":{},"events":{},"accessibility":{},"layout":{}}},{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/assertion.ts","description":"","displayName":"isArray","methods":[],"props":{},"groups":{"default":{},"events":{},"accessibility":{},"layout":{}}},{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/assertion.ts","description":"","displayName":"isEmptyArray","methods":[],"props":{},"groups":{"default":{},"events":{},"accessibility":{},"layout":{}}},{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/assertion.ts","description":"","displayName":"isFunction","methods":[],"props":{},"groups":{"default":{},"events":{},"accessibility":{},"layout":{}}},{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/assertion.ts","description":"","displayName":"isObject","methods":[],"props":{},"groups":{"default":{},"events":{},"accessibility":{},"layout":{}}},{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/assertion.ts","description":"","displayName":"isPlainObject","methods":[],"props":{},"groups":{"default":{},"events":{},"accessibility":{},"layout":{}}},{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/assertion.ts","description":"","displayName":"isPromise","methods":[],"props":{},"groups":{"default":{},"events":{},"accessibility":{},"layout":{}}}]

apps/docs/datas/components/composeClassnameRenderProps.json

@@ -0,0 +1 @@
+[{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/composeClassnameRenderProps.ts","description":"Composes classnames for render props in React components using cslx.\nAllows combining a base classname, render prop function, and additional classes.","displayName":"composeClassnameRenderProps","methods":[],"props":{},"groups":{"default":{},"events":{},"accessibility":{},"layout":{}}}]

apps/docs/datas/components/cssModule.json

@@ -0,0 +1 @@
+[{"tags":{"param":"cssModules - The CSS modules object to use for classname lookups.","example":"const result = cssModule(styles, 'hop-button', 'lg', 'primary');\n// result = \"hop-button--lg hop-button--primary\""},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/utils/src/cssModule.ts","description":"Generates CSS module classnames for a given component with modifiers.\nUtilizes the provided CSS modules object and component name to create classnames.","displayName":"cssModule","methods":[],"props":{},"groups":{"default":{},"events":{},"accessibility":{},"layout":{}}}]

apps/docs/datas/components/sizeAdapter.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/types.json

@@ -0,0 +1 @@
+[]

apps/docs/datas/components/useLocalizedString.json

@@ -0,0 +1 @@
+[{"tags":{},"filePath":"/Users/francis.thibault/Repos/wl-hopper/packages/components/src/i18n/src/useLocalizedString.tsx","description":"This hook is used to get the localized string formatter.\nIt uses the resources from the component package.","displayName":"useLocalizedString","methods":[],"props":{},"groups":{"default":{},"events":{},"accessibility":{},"layout":{}}}]