Merge branch 'feat/DS-126-doc-component-examples' of https://github.c…

…om/workleap/wl-hopper into feat/DS-126-doc-component-examples

apps/docs/app/rehype.css

@@ -80,6 +80,7 @@ code[data-theme*=' '] span {
     content: counter(line);
     display: inline-block;
     margin-right: var(--hd-space-2);
+    min-width: var(--hd-space-2);
     text-align: right;
     color: var(--hd-codeblock-line-line-number-color);
 }

apps/docs/app/ui/components/componentExample/ComponentExample.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useState, memo, useCallback, useMemo, type ReactNode } from "react";
+import { memo, type ReactNode } from "react";
 import clsx from "clsx";
 
 import { CodeIcon } from "@/components/icon";
 import { ToggleButton } from "@/components/toggleButton/ToggleButton.tsx";
+import { useToggle } from "@/hooks/useToggle.ts";
 
 import ComponentPreviewWrapper from "./ComponentPreviewWrapper.tsx";
 
@@ -41,13 +42,11 @@ const ComponentExample = memo(({
     isOpen = false,
     ...props
 }: ComponentExampleProps) => {
-    const [showCode, setShowCode] = useState(isOpen);
+    const [showCode, toggleShowCode] = useToggle(isOpen);
 
-    const showBothComponent = useMemo(() => type === "both", [type]);
-    const showPreviewComponent = useMemo(() => type === "preview" || showBothComponent, [type, showBothComponent]);
-    const showCodeComponent = useMemo(() => (showBothComponent && showCode) || type === "code", [showBothComponent, showCode, type]);
-
-    const toggleShowCode = useCallback(() => setShowCode(prevShowCode => !prevShowCode), []);
+    const showBothComponent = type === "both";
+    const showPreviewComponent = type === "preview" || showBothComponent;
+    const showCodeComponent = (showBothComponent && showCode) || type === "code";
 
     if (!src) {
         return null;

apps/docs/app/ui/components/componentExample/componentPreviewWrapper.css

@@ -1,4 +1,5 @@
 .hd-component-preview-wrapper {
+    color: var(--hd-color-neutral-text);
     position: relative;
 }
 
@@ -9,7 +10,7 @@
 [data-schema="light"] {
     .hd-component-preview-wrapper__card {
         --background: var(--hd-white);
-        --background-dot: var(--hd-neutral-50);
+        --dot-background: var(--hd-neutral-50);
     }
 
     .hd-component-preview-wrapper__action {
@@ -28,7 +29,7 @@
 [data-schema="dark"] {
     .hd-component-preview-wrapper__card {
         --background: var(--hd-neutral-900);
-        --background-dot: var(--hd-neutral-800);
+        --dot-background: var(--hd-neutral-800);
     }
 
     .hd-component-preview-wrapper__action {

apps/docs/app/ui/components/propTable/PropTable.tsx

@@ -48,12 +48,11 @@ const formatGroup = (groups: Groups[]) => {
 };
 
 export default async function PropTable({ component }: PropTableProps) {
-    const { description, groups } = await getComponentProps(component);
+    const { groups } = await getComponentProps(component);
     const formatedGroups = formatGroup(groups);
 
     return (
         <>
-            <p>{description}</p>
             {formatedGroups.map(group => {
                 const [key] = Object.keys(group);
 

apps/docs/components/card/card.css

@@ -1,6 +1,6 @@
 .hd-card {
     --background: var(--hd-white);
-    --background-dot: var(--hd-neutral-50);
+    --dot-background: var(--hd-neutral-50);
     --color: var(--hd-color-neutral-text);
 
     display: flex;
@@ -11,7 +11,7 @@
     padding: var(--hd-space-4);
     background: linear-gradient(90deg, var(--background) 0.625rem, transparent 1%) 50%,
     linear-gradient(var(--background) 0.625rem, transparent 1%) 50%,
-    var(--background-dot);
+    var(--dot-background);
     background-size: 0.75rem 0.75rem;
     color: var(--color);
 }
@@ -38,6 +38,6 @@
 
 [data-theme="dark"] .hd-card {
     --background: var(--hd-neutral-900);
-    --background-dot: var(--hd-neutral-800);
+    --dot-background: var(--hd-neutral-800);
 }
 

apps/docs/components/toggleButton/ToggleButton.tsx

@@ -18,7 +18,6 @@ function ToggleButton(props: ToggleButtonProps, ref: ForwardedRef<HTMLButtonElem
     const { children, className, ...other } = props;
 
     return (
-
         <RACToggleButton
             {...other}
             className={clsx("hd-toggleButton", className)}

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

@@ -50,7 +50,7 @@ A button can be expanded to full width to fill its parent container.
 <Example src="buttons/docs/button/layout" />
 
 ### Icon Only
-A button can contain only an icons.
+A button can contain only an icon.
 
 <Example src="buttons/docs/button/icon" />
 
@@ -77,7 +77,7 @@ A button can be rendered as a react router link when using the href property, an
 
 ### Advanced Customization
 
-All Hopper Components export a corresponding context that can be used to send props to them from a parent element.
+All Hopper Components exports a corresponding context that can be used to send props to them from a parent element.
 You can send any prop or ref via context that you could pass to the corresponding component.
 The local props and ref on the component are merged with the ones passed via context, with the local props taking precedence
 

apps/docs/hooks/useToggle.ts

@@ -0,0 +1,15 @@
+import { useCallback, useState } from "react";
+
+import type { Dispatch, SetStateAction } from "react";
+
+export function useToggle(
+    defaultValue?: boolean
+): [boolean, () => void, Dispatch<SetStateAction<boolean>>] {
+    const [value, setValue] = useState(!!defaultValue);
+
+    const toggle = useCallback(() => {
+        setValue(x => !x);
+    }, []);
+
+    return [value, toggle, setValue];
+}

packages/components/src/buttons/docs/migration-notes.md

@@ -1,6 +1,6 @@
 
 The "counter" component is no longer allowed as a specialized slot
-onClick renamed to onPress. -> We might need to offer a deprecated onClick prop for a while?
+onClick renamed to onPress.
 
 ButtonAsLink is now integrated into the Button component.
 as(Button, ReactRouterLink) is now integrated into the Button component.

packages/components/src/buttons/src/Button.tsx

@@ -272,8 +272,8 @@ function Button(props: ButtonProps, ref: ForwardedRef<HTMLElement>) {
 
 /**
  * Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
- *
  * [View Documentation](TODO)
+ *
  */
 const _Button = slot("button", forwardRef(Button));