feat: menus (#102)

- ButtonMenu
- InputMenu
- Button/AnchorButton leadingIcon/trailingIcon props
- useRandomId hook
- utils for DOM walking

package.json

@@ -3,7 +3,7 @@
 		"react-icons": "4.3.1"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "16.0.0",
+		"@commitlint/cli": "16.0.1",
 		"@commitlint/config-conventional": "16.0.0",
 		"@playwright/test": "1.17.1",
 		"@fontsource/roboto": "4.5.1",
@@ -40,7 +40,7 @@
 		"react-router-dom": "6.2.1",
 		"semantic-release": "18.0.1",
 		"typescript": "4.5.4",
-		"vite": "2.7.7",
+		"vite": "2.7.9",
 		"vite-plugin-pwa": "0.11.12",
 		"workbox-window": "6.4.2"
 	},
@@ -88,6 +88,14 @@
 		"react": ">=17",
 		"react-dom": ">=17"
 	},
+	"peerDependenciesMeta": {
+		"@types/react": {
+			"optional": true
+		},
+		"@types/react-dom": {
+			"optional": true
+		}
+	},
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/ninja/ninjakit.git"

src/docs/app.tsx

@@ -144,6 +144,14 @@ function App() {
 									<MdLink />
 									TextInput
 								</AnchorButton>
+								<AnchorButton href="#button-menu">
+									<MdLink />
+									ButtonMenu
+								</AnchorButton>
+								<AnchorButton href="#input-menu">
+									<MdLink />
+									InputMenu
+								</AnchorButton>
 								<AnchorButton href="#radioset">
 									<MdLink />
 									RadioSet

src/docs/pages/examples/anchor-button.tsx

@@ -9,8 +9,8 @@ export const AnchorButtonExamples: FunctionComponent = () => (
 				Elevated
 			</AnchorButton>
 			<AnchorButton href="#">Filled</AnchorButton>
-			<AnchorButton href="#">
-				<MdThumbUp /> With Icon
+			<AnchorButton href="#" leadingIcon={<MdThumbUp />}>
+				With Icon
 			</AnchorButton>
 			<AnchorButton href="#" target="_blank">
 				With External Target

src/docs/pages/examples/button-menu.tsx

@@ -0,0 +1,42 @@
+import { ButtonMenu, Card } from "ninjakit";
+import { FunctionComponent } from "react";
+import { MdMenu } from "react-icons/md";
+
+import { useMenuItems } from "./menu-items";
+
+export const ButtonMenuExamples: FunctionComponent = () => {
+	const menuItems = useMenuItems();
+
+	return (
+		<Card appearance="elevated" id="button-menu" title="ButtonMenu">
+			<section>
+				<ButtonMenu
+					label="Filled"
+					onChange={({ currentTarget: { value } }) =>
+						console.info("ButtonMenu", { value })
+					}
+				>
+					{menuItems}
+				</ButtonMenu>
+				<ButtonMenu
+					appearance="text"
+					label="Text"
+					onChange={({ currentTarget: { value } }) =>
+						console.info("ButtonMenu", { value })
+					}
+				>
+					{menuItems}
+				</ButtonMenu>
+				<ButtonMenu
+					appearance="text"
+					leadingIcon={<MdMenu />}
+					onChange={({ currentTarget: { value } }) =>
+						console.info("ButtonMenu", { value })
+					}
+				>
+					{menuItems}
+				</ButtonMenu>
+			</section>
+		</Card>
+	);
+};

src/docs/pages/examples/button.tsx

@@ -7,19 +7,18 @@ export const ButtonExamples: FunctionComponent = () => (
 		<section>
 			<Button appearance="elevated">Elevated</Button>
 			<Button>Filled</Button>
-			<Button>
-				<MdThumbUp /> With Icon
-			</Button>
+			<Button leadingIcon={<MdThumbUp />}>With Icon</Button>
 			<Button appearance="outlined">Outlined</Button>
 			<Button appearance="text">Text</Button>
+			<Button appearance="text" leadingIcon={<MdThumbUp />} />
 		</section>
 		<section>
 			<Button appearance="elevated" disabled>
 				Elevated
 			</Button>
 			<Button disabled>Filled</Button>
-			<Button disabled>
-				<MdThumbUp /> With Icon
+			<Button disabled leadingIcon={<MdThumbUp />}>
+				With Icon
 			</Button>
 			<Button appearance="outlined" disabled>
 				Outlined

src/docs/pages/examples/index.tsx

@@ -2,6 +2,8 @@ import { FunctionComponent } from "react";
 
 import { AnchorButtonExamples } from "./anchor-button";
 import { ButtonExamples } from "./button";
+import { ButtonMenuExamples } from "./button-menu";
+import { InputMenuExamples } from "./input-menu";
 import { RadiosetExamples } from "./radioset";
 import { TextInputExamples } from "./text-input";
 
@@ -10,6 +12,8 @@ export const Examples: FunctionComponent = () => (
 		<ButtonExamples />
 		<AnchorButtonExamples />
 		<TextInputExamples />
+		<ButtonMenuExamples />
+		<InputMenuExamples />
 		<RadiosetExamples />
 	</>
 );

src/docs/pages/examples/input-menu.tsx

@@ -0,0 +1,32 @@
+import { Card, InputMenu } from "ninjakit";
+import { FunctionComponent } from "react";
+
+import { useMenuItems } from "./menu-items";
+
+export const InputMenuExamples: FunctionComponent = () => {
+	const menuItems = useMenuItems();
+
+	return (
+		<Card appearance="elevated" id="menu" title="InputMenu">
+			<section>
+				<InputMenu
+					label="Filled"
+					onChange={({ currentTarget: { value } }) =>
+						console.info("InputMenu", { value })
+					}
+				>
+					{menuItems}
+				</InputMenu>
+				<InputMenu
+					appearance="outlined"
+					label="Outlined"
+					onChange={({ currentTarget: { value } }) =>
+						console.info("InputMenu", { value })
+					}
+				>
+					{menuItems}
+				</InputMenu>
+			</section>
+		</Card>
+	);
+};

src/docs/pages/examples/menu-items.tsx

@@ -0,0 +1,30 @@
+import { MenuItem, useRandomId } from "ninjakit";
+
+export const useMenuItems = () => {
+	const randomId = useRandomId();
+
+	return [
+		{ label: "Item One", value: "item-one" },
+		{ label: "Item Two", value: "item-two" },
+		{ disabled: true, label: "Item Three", value: "item-three" },
+		{ separator: true },
+		{ label: "Item Four", value: "item-four" },
+		{ label: "Item Five", value: "item-five" },
+		{ label: "Item Six", value: "item-six" },
+		{ label: "Item Seven", value: "item-seven" },
+		{ label: "Item Eight", value: "item-eight" },
+		{ label: "Item Nine", value: "item-nine" },
+		{ label: "Item Ten", value: "item-ten" },
+	].map(({ disabled, label, separator, value }) => {
+		return (
+			<MenuItem
+				disabled={disabled}
+				key={`${randomId}-${value}`}
+				separator={separator}
+				value={value}
+			>
+				{label}
+			</MenuItem>
+		);
+	});
+};

src/lib/components/button/anchor.tsx

@@ -1,26 +1,40 @@
-import { AnchorHTMLAttributes, forwardRef } from "react";
+import { forwardRef } from "react";
 import { CgExternal } from "react-icons/cg";
 
 import { ButtonProps, useClassName } from ".";
 
 export const AnchorButton = forwardRef<
 	HTMLAnchorElement,
-	AnchorHTMLAttributes<HTMLAnchorElement> & ButtonProps
+	JSX.IntrinsicElements["a"] & ButtonProps
 >(function (
-	{ appearance = "text", children, className: override, target, ...props },
+	{
+		appearance = "text",
+		children,
+		className: override,
+		label,
+		leadingIcon,
+		target,
+		trailingIcon = target === "_blank" && <CgExternal />,
+		...props
+	},
 	ref
 ) {
 	const className = useClassName({
 		appearance,
 		children,
+		label,
+		leadingIcon,
 		override,
 		target,
+		trailingIcon,
 	});
 
 	return (
 		<a className={className} ref={ref} target={target} {...props}>
+			{leadingIcon}
+			{label}
 			{children}
-			{target === "_blank" && <CgExternal />}
+			{trailingIcon}
 		</a>
 	);
 });

src/lib/components/button/button.module.css

@@ -1,7 +1,7 @@
 .button {
+	align-items: center;
 	composes: nk from global;
 	cursor: pointer;
-	align-items: center;
 	display: flex;
 	gap: 0.6rem;
 	justify-content: center;
@@ -11,6 +11,13 @@
 	-webkit-tap-highlight-color: transparent;
 }
 
+.button,
+.button::after,
+.button::before {
+	border-radius: 2rem;
+	height: 4rem;
+}
+
 .button::before {
 	content: "";
 	inset: 0;
@@ -24,13 +31,6 @@
 	margin: 0 0.2rem;
 }
 
-.button,
-.button::after,
-.button::before {
-	border-radius: 2rem;
-	height: 4rem;
-}
-
 .elevated::before {
 	background-color: var(--md-color-primary);
 }
@@ -55,19 +55,18 @@
 }
 
 .button.children {
-	padding-left: 2.4rem;
-	padding-right: 2.4rem;
+	padding: 0 2.4rem;
 }
 
-.button.icon:not(.children) {
-	width: 4rem;
+.button.leadingIcon:not(.button.trailingIcon) {
+	padding: 0 1.6rem;
 }
 
-.button.icon {
+.button.leadingIcon {
 	padding-left: 1.6rem;
 }
 
-.button.external {
+.button.trailingIcon {
 	padding-right: 1.6rem;
 }