feat(bulma-ui): add HTML element wrapper components

bulma-ui/.storybook/main.ts

@@ -16,6 +16,8 @@ function getAbsolutePath(value: string): any {
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 
+  staticDirs: ['../images'],
+
   addons: [
     getAbsolutePath('@storybook/addon-onboarding'),
     getAbsolutePath('@storybook/addon-docs'),

bulma-ui/src/elements/Code.stories.tsx

@@ -0,0 +1,152 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Code } from './Code';
+import { Paragraph } from './Paragraph';
+
+const meta: Meta<typeof Code> = {
+  title: 'Elements/Code',
+  component: Code,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    textColor: {
+      control: 'select',
+      options: [
+        'primary',
+        'link',
+        'info',
+        'success',
+        'warning',
+        'danger',
+        'light',
+        'dark',
+        'inherit',
+        'current',
+      ],
+      description: 'Text color using Bulma has-text-* classes',
+    },
+    bgColor: {
+      control: 'select',
+      options: [
+        'primary',
+        'link',
+        'info',
+        'success',
+        'warning',
+        'danger',
+        'light',
+        'dark',
+        'inherit',
+        'current',
+      ],
+      description: 'Background color using Bulma has-background-* classes',
+    },
+    m: {
+      control: 'select',
+      options: ['0', '1', '2', '3', '4', '5', '6', 'auto'],
+      description: 'Margin size using Bulma m-* classes',
+    },
+    p: {
+      control: 'select',
+      options: ['0', '1', '2', '3', '4', '5', '6', 'auto'],
+      description: 'Padding size using Bulma p-* classes',
+    },
+    className: {
+      control: 'text',
+      description: 'Custom CSS class',
+    },
+    children: {
+      control: 'text',
+      description: 'Code content inside the element',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Code>;
+
+export const Default: Story = {
+  args: {
+    children: 'console.log("Hello, World!")',
+  },
+};
+
+export const VariableName: Story = {
+  render: () => (
+    <Paragraph>
+      The <Code>userName</Code> variable stores the current user&apos;s name.
+    </Paragraph>
+  ),
+  name: 'Variable Name',
+};
+
+export const FunctionCall: Story = {
+  render: () => (
+    <Paragraph>
+      Use <Code>Array.map()</Code> to transform each element in the array.
+    </Paragraph>
+  ),
+  name: 'Function Call',
+};
+
+export const CommandLine: Story = {
+  render: () => (
+    <Paragraph>
+      Run <Code>npm install</Code> to install the dependencies.
+    </Paragraph>
+  ),
+  name: 'Command Line',
+};
+
+export const WithPrimaryColor: Story = {
+  args: {
+    children: 'import React from "react"',
+    textColor: 'primary',
+  },
+  name: 'Primary Color',
+};
+
+export const WithBackground: Story = {
+  args: {
+    children: 'const x = 42',
+    bgColor: 'light',
+    textColor: 'dark',
+    p: '1',
+  },
+  name: 'With Background',
+};
+
+export const AllColors: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+      <Code textColor="primary">primary code</Code>
+      <Code textColor="link">link code</Code>
+      <Code textColor="info">info code</Code>
+      <Code textColor="success">success code</Code>
+      <Code textColor="warning">warning code</Code>
+      <Code textColor="danger">danger code</Code>
+    </div>
+  ),
+  name: 'All Colors',
+};
+
+export const FilePath: Story = {
+  render: () => (
+    <Paragraph>
+      Edit the configuration file at <Code>src/config/settings.ts</Code> to
+      change the default values.
+    </Paragraph>
+  ),
+  name: 'File Path',
+};
+
+export const KeyboardShortcut: Story = {
+  render: () => (
+    <Paragraph>
+      Press <Code>Ctrl + C</Code> to copy and <Code>Ctrl + V</Code> to paste.
+    </Paragraph>
+  ),
+  name: 'Keyboard Shortcut',
+};

bulma-ui/src/elements/Code.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { classNames, usePrefixedClassNames } from '../helpers/classNames';
+import {
+  useBulmaClasses,
+  BulmaClassesProps,
+  validColors,
+} from '../helpers/useBulmaClasses';
+
+/**
+ * Props for the Code component.
+ *
+ * @property {string} [className] - Additional CSS classes to apply.
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [textColor] - Text color (Bulma color, 'inherit', or 'current').
+ * @property {(typeof validColors)[number] | 'inherit' | 'current'} [bgColor] - Background color (Bulma color, 'inherit', or 'current').
+ * @property {React.ReactNode} [children] - Code content to be rendered inside the element.
+ */
+export interface CodeProps
+  extends
+    React.HTMLAttributes<HTMLElement>,
+    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
+  className?: string;
+  textColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
+  children?: React.ReactNode;
+}
+
+/**
+ * Code component for rendering inline code snippets.
+ *
+ * A Code wraps the HTML `<code>` element with Bulma helper class integration.
+ * Use it for short inline code snippets, variable names, or technical terms.
+ * For multi-line code blocks, use the Pre component.
+ *
+ * @function
+ * @param {CodeProps} props - Props for the Code component.
+ * @returns {JSX.Element} The rendered code element.
+ */
+export const Code: React.FC<CodeProps> = ({
+  className,
+  textColor,
+  bgColor,
+  children,
+  ...props
+}) => {
+  const { bulmaHelperClasses, rest } = useBulmaClasses({
+    color: textColor,
+    backgroundColor: bgColor,
+    ...props,
+  } as BulmaClassesProps & typeof props);
+
+  const bulmaClasses = usePrefixedClassNames();
+  const codeClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+
+  return (
+    <code className={codeClasses || undefined} {...rest}>
+      {children}
+    </code>
+  );
+};

bulma-ui/src/elements/Divider.stories.tsx

@@ -0,0 +1,130 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Divider } from './Divider';
+import { Block } from './Block';
+
+const meta: Meta<typeof Divider> = {
+  title: 'Elements/Divider',
+  component: Divider,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    bgColor: {
+      control: 'select',
+      options: [
+        'primary',
+        'link',
+        'info',
+        'success',
+        'warning',
+        'danger',
+        'light',
+        'dark',
+        'inherit',
+        'current',
+      ],
+      description: 'Background color using Bulma has-background-* classes',
+    },
+    m: {
+      control: 'select',
+      options: ['0', '1', '2', '3', '4', '5', '6', 'auto'],
+      description: 'Margin size using Bulma m-* classes',
+    },
+    my: {
+      control: 'select',
+      options: ['0', '1', '2', '3', '4', '5', '6', 'auto'],
+      description: 'Vertical margin using Bulma my-* classes',
+    },
+    className: {
+      control: 'text',
+      description: 'Custom CSS class',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Divider>;
+
+export const Default: Story = {
+  args: {},
+  decorators: [
+    story => (
+      <div style={{ width: '100%' }}>
+        <Block>Content above the divider</Block>
+        {story()}
+        <Block>Content below the divider</Block>
+      </div>
+    ),
+  ],
+};
+
+export const WithVerticalMargin: Story = {
+  args: {
+    my: '6',
+  },
+  decorators: [
+    story => (
+      <div style={{ width: '100%' }}>
+        <Block>Content above the divider</Block>
+        {story()}
+        <Block>Content below the divider</Block>
+      </div>
+    ),
+  ],
+  name: 'With Vertical Margin',
+};
+
+export const PrimaryBackground: Story = {
+  args: {
+    bgColor: 'primary',
+  },
+  decorators: [
+    story => (
+      <div style={{ width: '100%' }}>
+        <Block>Content above</Block>
+        {story()}
+        <Block>Content below</Block>
+      </div>
+    ),
+  ],
+  name: 'Primary Background',
+};
+
+export const AllColors: Story = {
+  render: () => (
+    <div style={{ width: '100%' }}>
+      <Block>Default Divider</Block>
+      <Divider />
+      <Block>Primary Divider</Block>
+      <Divider bgColor="primary" />
+      <Block>Info Divider</Block>
+      <Divider bgColor="info" />
+      <Block>Success Divider</Block>
+      <Divider bgColor="success" />
+      <Block>Warning Divider</Block>
+      <Divider bgColor="warning" />
+      <Block>Danger Divider</Block>
+      <Divider bgColor="danger" />
+      <Block>End</Block>
+    </div>
+  ),
+  name: 'All Colors',
+};
+
+export const SeparatingSections: Story = {
+  render: () => (
+    <div style={{ width: '100%' }}>
+      <h2 className="title is-4">Section One</h2>
+      <p>This is the first section of content.</p>
+      <Divider my="5" />
+      <h2 className="title is-4">Section Two</h2>
+      <p>This is the second section of content.</p>
+      <Divider my="5" />
+      <h2 className="title is-4">Section Three</h2>
+      <p>This is the third section of content.</p>
+    </div>
+  ),
+  name: 'Separating Sections',
+};