docs: refactoring examples

packages/api/.storybook/preview.jsx

@@ -39,6 +39,7 @@ const preview = {
 		},
 
 		controls: {
+			disableSaveFromUI: true,
 			// show description and default values in the individual stories (basic, etc.)
 			expanded: true,
 			matchers: {

packages/api/src/helpers/constants.ts

@@ -0,0 +1,5 @@
+export const commonControlsSetup = {
+	parameters: {
+		controls: { exclude: ["spacing"], sort: "requiredFirst" },
+	},
+};

packages/api/src/stories/Bubble.stories.tsx

@@ -2,25 +2,28 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import "@versini/ui-bubble/dist/style.css";
 import { Bubble } from "../../../ui-bubble/src/components";
+import { commonControlsSetup } from "../helpers/constants";
 
 type Story = StoryObj<typeof Bubble>;
 
 const meta: Meta<typeof Bubble> = {
 	parameters: {
 		layout: "centered",
-		docs: {
-			controls: { exclude: ["spacing"] },
-		},
+		docs: { ...commonControlsSetup.parameters },
 	},
 	title: "Components/Bubble",
 
 	component: Bubble,
-	args: {},
+	args: {
+		copyToClipboardFocusMode: "system",
+		copyToClipboardMode: "system",
+	},
 };
 
 export default meta;
 
 export const Basic: Story = {
+	...commonControlsSetup,
 	render: (args) => (
 		<div className="h-96 min-h-10 bg-slate-900 p-11 w-96">
 			<Bubble kind="right" spacing={{ b: 4 }} {...args}>
@@ -36,6 +39,7 @@ export const Basic: Story = {
 
 const string = "DOM element with string";
 export const Copy: Story = {
+	...commonControlsSetup,
 	render: (args) => (
 		<div className=" bg-slate-900 h-full min-h-10 p-11">
 			<Bubble kind="right" spacing={{ b: 4 }} copyToClipboard {...args}>
@@ -69,6 +73,7 @@ export const Copy: Story = {
 };
 
 export const LongText: Story = {
+	...commonControlsSetup,
 	render: (args) => (
 		<div className="h-full min-h-10 bg-slate-900 p-11">
 			<Bubble kind="right" spacing={{ b: 4 }} {...args}>
@@ -136,6 +141,7 @@ export const LongText: Story = {
 };
 
 export const WithFooter: Story = {
+	...commonControlsSetup,
 	render: (args) => (
 		<div className="h-96 min-h-10 bg-slate-900 p-11">
 			<Bubble

packages/api/src/stories/Button.stories.tsx

@@ -3,25 +3,37 @@ import { fn } from "@storybook/test";
 
 import "@versini/ui-button/dist/style.css";
 import { Button } from "../../../ui-button/src/components";
+import { commonControlsSetup } from "../helpers/constants";
 
 type Story = StoryObj<typeof Button>;
 
 const meta: Meta<typeof Button> = {
 	parameters: {
 		layout: "centered",
-		docs: {
-			controls: { exclude: ["spacing"] },
-		},
+		docs: { ...commonControlsSetup.parameters },
 	},
 	title: "Components/Button",
 
 	component: Button,
-	args: { onClick: fn() },
+	args: {
+		onClick: fn(),
+		disabled: false,
+		noTruncate: false,
+		variant: "primary",
+		focusMode: "system",
+		mode: "system",
+		size: "medium",
+		noBorder: false,
+		raw: false,
+		fullWidth: false,
+		noInternalClick: false,
+	},
 };
 
 export default meta;
 
 export const Basic: Story = {
+	...commonControlsSetup,
 	render: (args) => (
 		<div className="flex flex-wrap gap-2">
 			<Button {...args}>Button lorem ipsum</Button>
@@ -32,6 +44,7 @@ export const Basic: Story = {
 };
 
 export const Truncate: Story = {
+	...commonControlsSetup,
 	args: { className: "w-44 sm:w-52" },
 	render: (args) => {
 		return (
@@ -41,12 +54,12 @@ export const Truncate: Story = {
 					<Button {...args}>Button lorem ipsum dolor</Button>
 					<Button {...args}>Button lorem ipsum dolor sit amet</Button>
 				</div>
-				<div className="pt-4">
+				<div className="pt-4 text-copy-dark">
 					<p>
 						For text to truncate, you need to limit the width of the buttons.
 					</p>
 					<p>This can be done by using Tailwind width classes, for example</p>
-					<code>className={args.className}</code>
+					<code className="prose-dark">className={args.className}</code>
 				</div>
 			</>
 		);

packages/api/src/stories/ButtonIcon.stories.tsx

@@ -10,24 +10,36 @@ import {
 	IconPrevious,
 	IconSettings,
 } from "@versini/ui-icons";
+import { commonControlsSetup } from "../helpers/constants";
 
 type Story = StoryObj<typeof ButtonIcon>;
 
 const meta: Meta<typeof ButtonIcon> = {
 	parameters: {
 		layout: "centered",
-		docs: {
-			controls: { exclude: ["spacing"] },
-		},
+		docs: { ...commonControlsSetup.parameters },
 	},
 	title: "Components/ButtonIcon",
 
 	component: ButtonIcon,
-	args: { onClick: fn() },
+	args: {
+		onClick: fn(),
+		align: "center",
+		disabled: false,
+		focusMode: "system",
+		mode: "system",
+		size: "medium",
+		noBorder: false,
+		raw: false,
+		fullWidth: false,
+		noInternalClick: false,
+		noBackground: false,
+	},
 };
 
 export default meta;
 export const Basic: Story = {
+	...commonControlsSetup,
 	render: (args) => (
 		<div className="flex flex-wrap gap-2">
 			<ButtonIcon {...args}>
@@ -47,6 +59,7 @@ export const Basic: Story = {
 };
 
 export const WithLabel: Story = {
+	...commonControlsSetup,
 	render: (args) => (
 		<>
 			<div className="flex flex-wrap gap-2">

packages/api/src/stories/ButtonLink.stories.tsx

@@ -3,25 +3,42 @@ import { fn } from "@storybook/test";
 
 import "@versini/ui-button/dist/style.css";
 import { ButtonLink } from "../../../ui-button/src/components";
+import { commonControlsSetup } from "../helpers/constants";
 
 type Story = StoryObj<typeof ButtonLink>;
 
 const meta: Meta<typeof ButtonLink> = {
 	parameters: {
 		layout: "centered",
-		docs: {
-			controls: { exclude: ["spacing"] },
-		},
+		docs: { ...commonControlsSetup.parameters },
 	},
 	title: "Components/ButtonLink",
 
 	component: ButtonLink,
-	args: { onClick: fn() },
+	args: {
+		onClick: fn(),
+		disabled: false,
+		noTruncate: false,
+		variant: "primary",
+		focusMode: "system",
+		mode: "system",
+		size: "small",
+		noBorder: false,
+		raw: false,
+		fullWidth: false,
+		noInternalClick: false,
+		noNewWindowIcon: false,
+		target: "_self",
+	},
 };
 
 export default meta;
 
 export const Basic: Story = {
+	...commonControlsSetup,
+	args: {
+		href: "https://www.example.com",
+	},
 	render: (args) => (
 		<div className="flex flex-wrap gap-2">
 			<ButtonLink {...args}>Anchor as a button</ButtonLink>
@@ -35,7 +52,8 @@ export const Basic: Story = {
 };
 
 export const NewWindow: Story = {
-	args: { target: "_blank" },
+	...commonControlsSetup,
+	args: { target: "_blank", href: "https://www.example.com" },
 	render: (args) => (
 		<div className="flex flex-wrap gap-2">
 			<ButtonLink {...args}>Anchor as a button</ButtonLink>
@@ -49,7 +67,8 @@ export const NewWindow: Story = {
 };
 
 export const Truncate: Story = {
-	args: { className: "w-44 sm:w-52" },
+	...commonControlsSetup,
+	args: { className: "w-44 sm:w-52", href: "https://www.example.com" },
 	render: (args) => (
 		<>
 			<div className="flex flex-wrap gap-2">
@@ -60,10 +79,10 @@ export const Truncate: Story = {
 					Anchor as a button lorem ipsum dolor sit amet
 				</ButtonLink>
 			</div>
-			<div className="pt-4">
+			<div className="pt-4 text-copy-dark">
 				<p>For text to truncate, you need to limit the width of the buttons.</p>
 				<p>This can be done by using Tailwind width classes, for example</p>
-				<code>className={args.className}</code>
+				<code className="prose-dark">className={args.className}</code>
 			</div>
 		</>
 	),

packages/api/src/stories/Card.stories.tsx

@@ -1,24 +1,28 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Card } from "@versini/ui-card/src/components";
+import { commonControlsSetup } from "../helpers/constants";
 
 type Story = StoryObj<typeof Card>;
 
 const meta: Meta<typeof Card> = {
 	parameters: {
 		layout: "centered",
-		docs: {
-			controls: { exclude: ["spacing"] },
-		},
+		docs: { ...commonControlsSetup.parameters },
 	},
 	title: "Components/Card",
 
 	component: Card,
-	args: {},
+	args: {
+		compact: false,
+		mode: "system",
+		noBorder: false,
+	},
 };
 
 export default meta;
 
 export const Basic: Story = {
+	...commonControlsSetup,
 	args: {
 		header: "Dune",
 		footer: "Frank Herbert",
@@ -45,6 +49,7 @@ export const Basic: Story = {
 };
 
 export const Custom: Story = {
+	...commonControlsSetup,
 	args: {
 		header: <h2 className="text-red-500">Dune</h2>,
 		footer: <h4 className="text-xs text-slate-400">Frank Herbert</h4>,

packages/ui-bubble/src/components/Bubble/BubbleTypes.d.ts

@@ -2,7 +2,7 @@ import type { SpacingProps } from "@versini/ui-private/dist/utilities";
 
 export type BubbleProps = {
 	/**
-	 * The children to render.
+	 * The text to render in the bubble.
 	 */
 	children: React.ReactNode;
 	/**
@@ -11,6 +11,9 @@ export type BubbleProps = {
 	className?: string;
 	/**
 	 * Whether or not to show a "copy/paste" icon next to the Bubble.
+	 * - If a function is passed, it will be called with the text to copy.
+	 * - If a string is passed, that string will be copied.
+	 * - If a boolean is passed, the children will be copied.
 	 */
 	copyToClipboard?: boolean | string | ((text: any) => void);
 	/**

packages/ui-button/src/components/Button/ButtonTypes.d.ts

@@ -42,7 +42,7 @@ export type CommonButtonProps = {
 
 export type ButtonProps = {
 	/**
-	 * The children to render.
+	 * The text to render in the button.
 	 */
 	children: React.ReactNode;
 	/**
@@ -76,12 +76,23 @@ export type ButtonLinkProps = {
 	 * @default false
 	 */
 	noNewWindowIcon?: boolean;
+	/**
+	 * A string that is the result of parsing the href HTML attribute
+	 * relative to the document, containing a valid URL of a linked resource.
+	 */
+	href?: string;
+	/**
+	 * A string that reflects the target HTML attribute, indicating where
+	 * to display the linked resource.
+	 * @default _self
+	 */
+	target?: "_blank" | "_self" | "_parent" | "_top";
 } & ButtonProps &
 	React.AnchorHTMLAttributes<HTMLAnchorElement>;
 
 export type ButtonIconProps = {
 	/**
-	 * The children to render.
+	 * The icon to render in the button.
 	 */
 	children: React.ReactNode;
 	/**
@@ -90,7 +101,7 @@ export type ButtonIconProps = {
 	 */
 	align?: "left" | "right" | "center";
 	/**
-	 * The label to show next to the icon.
+	 * The label to use as aria-label.
 	 */
 	label?: string;
 	/**