Feat: [hop 102] ListBox, ListboxItem, Section, Divider, Header (#286)

.storybook/stories.css

@@ -1,41 +1,41 @@
 /* Helper class for storybook stories to test styling overrides */
 
 .bg-red {
-    background: red;
+    background: red !important;
 }
 
 .border-red {
-    border: 0.0625rem solid red;
+    border: 0.0625rem solid red !important;
 }
 
 .red {
-    color: red;
+    color: red !important;
 }
 
 .fill-red {
-    fill: red;
+    fill: red !important;
 }
 
 .stroke-red {
-    stroke: red;
+    stroke: red !important;
 }
 
 .bg-blue {
-    background: blue;
+    background: blue !important;
 }
 
 .border-blue {
-    border: 0.0625rem solid blue;
+    border: 0.0625rem solid blue !important;
 }
 
 .fill-blue {
-    fill: blue;
+    fill: blue !important;
 }
 
 .zoom-in {
-    zoom: 120%;
+    zoom: 120% !important;
 }
 
 .zoom-out {
-    zoom: 90%;
+    zoom: 90% !important;
 }

packages/components/.eslintrc.json

@@ -16,7 +16,7 @@
                     "patterns": [
                         {
                             "group": ["../**/src/*"],
-                            "message": "Please import from the nearest index.ts file instead. ../../Text/src/Text.tsx -> ../../Text/index.ts"
+                            "message": "Please import from the nearest index.ts file instead. ../../typography/Text/src/Text.tsx -> ../../typography/Text/index.ts"
                         },
                         {
                             "group": ["../../index.ts", "../index.ts", "../../../index.ts", "./index.ts"],

packages/components/src/badge/src/Badge.tsx → packages/components/src/Badge/src/Badge.tsx

@@ -4,7 +4,7 @@ import { type CSSProperties, forwardRef, type ForwardedRef } from "react";
 import { useContextProps } from "react-aria-components";
 
 import { OverlineText } from "../../typography/OverlineText/index.ts";
-import { cssModule, type BaseComponentProps } from "../../utils/index.ts";
+import { ClearContainerSlots, cssModule, type BaseComponentProps } from "../../utils/index.ts";
 
 import { BadgeContext } from "./BadgeContext.ts";
 
@@ -55,17 +55,20 @@ function Badge(props: BadgeProps, ref: ForwardedRef<HTMLSpanElement>) {
     };
 
     return (
-        <OverlineText
-            {...otherProps}
-            ref={ref}
-            className={classNames}
-            style={mergedStyles}
-            slot={slot ?? undefined}
-            data-disabled={isDisabled || undefined}
-            aria-disabled={isDisabled || undefined}
-        >
-            {children}
-        </OverlineText>
+
+        <ClearContainerSlots>
+            <OverlineText
+                {...otherProps}
+                ref={ref}
+                className={classNames}
+                style={mergedStyles}
+                slot={slot ?? undefined}
+                data-disabled={isDisabled || undefined}
+                aria-disabled={isDisabled || undefined}
+            >
+                {children}
+            </OverlineText>
+        </ClearContainerSlots>
     );
 }
 

packages/components/src/Divider/docs/Divider.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Inline, Stack } from "../../layout/index.ts";
+import { Text } from "../../typography/Text/index.ts";
+import { Divider } from "../src/Divider.tsx";
+
+/**
+ * The Divider component serves as a clear visual boundary, effectively separating and distinguishing different sections of content or groups within the layout. 
+ * It aids in enhancing the user's comprehension of the interface's organization and flow.
+ *
+ * [View repository](https://github.com/gsoft-inc/wl-hopper/tree/main/packages/components/src/Divider/src)
+ * -
+ * [View package](https://www.npmjs.com/package/@hopper-ui/components)
+ * -
+ * View storybook TODO
+ */
+const meta = {
+    title: "Docs/Divider",
+    tags: ["autodocs"],
+    parameters: {
+        // Disables Chromatic's snapshotting on documentation stories
+        chromatic: { disableSnapshot: true }
+    },
+    component: Divider
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The default Divider
+ */
+export const Default = {
+} satisfies Story;
+
+/**
+ * A Divider can have two orientations: horizontal or vertical.
+ */
+export const Orientation = {
+    render: args => {
+        return (
+            <Stack>
+                <Stack>
+                    <Text>Content above</Text>
+                    <Divider {...args} orientation="horizontal" />
+                    <Text>Content below</Text>
+                </Stack>
+                <Inline alignY="stretch">
+                    <Text>Content left</Text>
+                    <Divider {...args} orientation="vertical" />
+                    <Text>Content right</Text>
+                </Inline>
+            </Stack>
+        );
+    }
+} satisfies Story;

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

@@ -0,0 +1 @@
+- Children is not supported.

packages/components/src/Divider/src/Divider.module.css

@@ -0,0 +1,41 @@
+.hop-Divider {
+    --hop-Divider-border-color: var(--hop-neutral-border-weak);
+    --hop-Divider-border-size: 0.0625rem;
+
+    /* Horizontal */
+    --hop-Divider-horizontal-border-block-end: var(--hop-Divider-border-size) solid var(--hop-Divider-border-color);
+    --hop-Divider-horizontal-border-inline-start: none;
+    --hop-Divider-horizontal-inline-size: auto;
+    --hop-Divider-horizontal-block-size: 0;
+
+    /* Vertical */
+    --hop-Divider-vertical-border-inline-start: var(--hop-Divider-border-size) solid var(--hop-Divider-border-color);
+    --hop-Divider-vertical-border-block-end: none;
+    --hop-Divider-vertical-inline-size: 0;
+    --hop-Divider-vertical-block-size: auto;
+
+    /* Internal Variables */
+    --border-block-end: var(--hop-Divider-horizontal-border-block-end);
+    --border-inline-start: var(--hop-Divider-horizontal-border-inline-start);
+    --inline-size: var(--hop-Divider-horizontal-inline-size);
+    --block-size: var(--hop-Divider-horizontal-block-size);
+
+    display: block;
+    flex: 0 0 auto;
+
+    box-sizing: border-box;
+    inline-size: var(--inline-size);
+    block-size: var(--block-size);
+    margin: 0;
+
+    border: none;
+    border-block-end: var(--border-block-end);
+    border-inline-start: var(--border-inline-start);
+}
+
+.hop-Divider--vertical {
+    --border-block-end: var(--hop-Divider-vertical-border-block-end);
+    --border-inline-start: var(--hop-Divider-vertical-border-inline-start);
+    --inline-size: var(--hop-Divider-vertical-inline-size);
+    --block-size: var(--hop-Divider-vertical-block-size);
+}

packages/components/src/Divider/src/Divider.tsx

@@ -0,0 +1,61 @@
+import { useStyledSystem, type StyledComponentProps } from "@hopper-ui/styled-system";
+import clsx from "clsx";
+import { type CSSProperties, forwardRef, type ForwardedRef } from "react";
+import { Separator as RACSeparator, useContextProps, type SeparatorProps as RACSeparatorProps } from "react-aria-components";
+
+import { cssModule } from "../../utils/index.ts";
+
+import { DividerContext } from "./DividerContext.ts";
+
+import styles from "./Divider.module.css";
+
+export const GlobalDividerCssSelector = "hop-Divider";
+
+export interface DividerProps extends StyledComponentProps<RACSeparatorProps> {}
+
+function Divider(props: DividerProps, ref: ForwardedRef<HTMLElement>) {
+    [props, ref] = useContextProps(props, ref, DividerContext);
+    const { stylingProps, ...ownProps } = useStyledSystem(props);
+    const {
+        className,
+        style,
+        orientation,
+        ...otherProps
+    } = ownProps;
+
+    const classNames = clsx(
+        GlobalDividerCssSelector,
+        cssModule(
+            styles,
+            "hop-Divider",
+            orientation
+        ),
+        stylingProps.className,
+        className
+    );
+
+    const mergedStyles: CSSProperties = {
+        ...stylingProps.style,
+        ...style
+    };
+
+    return (
+        <RACSeparator
+            {...otherProps}
+            ref={ref}
+            className={classNames}
+            style={mergedStyles}
+            orientation={orientation}
+        />
+    );
+}
+
+/**
+ * The Divider separates the distinguishes sections of content or groups.
+ *
+ * [View Documentation](TODO)
+ */
+const _Divider = forwardRef<HTMLElement, DividerProps>(Divider);
+_Divider.displayName = "Divider";
+
+export { _Divider as Divider };

packages/components/src/Divider/src/DividerContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+import type { ContextValue } from "react-aria-components";
+
+import type { DividerProps } from "./Divider.tsx";
+
+export const DividerContext = createContext<ContextValue<DividerProps, HTMLElement>>({});
+
+DividerContext.displayName = "DividerContext";

packages/components/src/Divider/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./Divider.tsx";
+export * from "./DividerContext.ts";

packages/components/src/Divider/tests/chromatic/Divider.stories.tsx

@@ -0,0 +1,82 @@
+import { Div } from "@hopper-ui/styled-system";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Inline, Stack } from "../../../layout/index.ts";
+import { Text } from "../../../typography/Text/index.ts";
+import { Divider } from "../../src/Divider.tsx";
+
+const meta = {
+    title: "Components/Divider",
+    component: Divider
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal = {
+    render: args => {
+        return (
+            <Stack>
+                <h1>Default</h1>
+                <Divider {...args} />
+                <h1>Multiple</h1>
+                <Text>Apollo 8 - 1968</Text>
+                <Divider {...args} />
+                <Text>Apollo 11 - 1969</Text>
+                <Divider {...args} />
+                <Text>Luna 16 - 1970</Text>
+                <Divider {...args} />
+                <Text>Salyut 1 - 1971</Text>
+                <h1>Zoom</h1>
+                <Div className="zoom-in">
+                    <Divider {...args} />
+                </Div>
+                <Div className="zoom-out">
+                    <Divider {...args} />
+                </Div>
+                <h1>Styling</h1>
+                <Divider {...args} width="core_320" />
+                <Divider {...args} className="border-red" />
+                <Divider {...args} style={{ borderColor: "red" }} />
+            </Stack>
+        );
+    }
+} satisfies Story;
+
+export const Vertical = {
+    render: args => {
+        return (
+            <Stack>
+                <h1>Default</h1>
+                <Inline alignY="stretch" height="core_160">
+                    <Divider {...args} />
+                </Inline>
+                <h1>Multiple</h1>
+                <Inline alignY="stretch">
+                    <Text>Apollo 8 - 1968</Text>
+                    <Divider {...args} />
+                    <Text>Apollo 11 - 1969</Text>
+                    <Divider {...args} />
+                    <Text>Luna 16 - 1970</Text>
+                    <Divider {...args} />
+                    <Text>Salyut 1 - 1971</Text>
+                </Inline>
+                <h1>Zoom</h1>
+                <Inline alignY="stretch" height="core_160">
+                    <Divider {...args} className="zoom-in" />
+                    <Divider {...args} className="zoom-out" />
+                </Inline>
+                <h1>Styling</h1>
+                <Inline alignY="stretch">
+                    <Divider {...args} height="core_1280" />
+                    <Divider {...args} height="core_160" />
+                    <Divider {...args} height="core_240" style={{ borderColor: "red" }} />
+                </Inline>
+            </Stack>
+        );
+    },
+    args: {
+        orientation: "vertical"
+    }
+} satisfies Story;

packages/components/src/Divider/tests/jest/Divider.ssr.test.tsx

@@ -0,0 +1,17 @@
+/**
+ * @jest-environment node
+ */
+import { renderToString } from "react-dom/server";
+
+import { Divider } from "../../src/Divider.tsx";
+
+describe("Divider", () => {
+    it("should render on the server", () => {
+        const renderOnServer = () =>
+            renderToString(
+                <Divider />
+            );
+
+        expect(renderOnServer).not.toThrow();
+    });
+});