Allow refs to be handled by form-related Components, with the excepti…

…on of <Label>.

src/components/Button/Button.spec.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Button } from './Button';
+
+describe('Button', () => {
+  it('access to DOM through ref prop', () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<Button ref={ref}>Test</Button>);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('BUTTON');
+  });
+});

src/components/Checkbox/Checkbox.spec.tsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Checkbox } from './Checkbox';
+
+describe('Checkbox', () => {
+  it('access to DOM through ref prop', () => {
+    const ref = createRef<HTMLInputElement>();
+    render(
+      <Checkbox name="test" value="test" ref={ref}>
+        Test
+      </Checkbox>,
+    );
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('INPUT');
+    expect(ref.current?.type).toBe('checkbox');
+  });
+});

src/stories/Checkbox.stories.tsx → src/components/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { useState, useCallback } from 'react';
-import { Checkbox, CheckboxGroup, Stack } from '../';
+import { Checkbox, CheckboxGroup, Stack } from '../../index';
 import type { ChangeEventHandler } from 'react';
 
 export default {

src/components/Checkbox/Checkbox.tsx

@@ -2,8 +2,9 @@
 
 import { CheckAIcon } from '@ubie/ubie-icons';
 import clsx from 'clsx';
-import { FC, InputHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
 import styles from './Checkbox.module.css';
+import type { InputHTMLAttributes } from 'react';
 
 type Props = {
   /**
@@ -29,14 +30,16 @@ type Props = {
   onChange?: InputHTMLAttributes<HTMLInputElement>['onChange'];
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'children' | 'onChange'>;
 
-export const Checkbox: FC<Props> = ({ size = 'medium', children, ...otherProps }) => {
+export const Checkbox = forwardRef<HTMLInputElement, Props>(({ size = 'medium', children, ...otherProps }, ref) => {
   return (
     <label className={clsx(styles.container, styles[size])}>
-      <input type="checkbox" className={styles.checkbox} {...otherProps} />
+      <input ref={ref} type="checkbox" className={styles.checkbox} {...otherProps} />
       <span className={styles.checkIconContainer}>
         <CheckAIcon className={styles.checkIcon} />
       </span>
       {children}
     </label>
   );
-};
+});
+
+Checkbox.displayName = 'Checkbox';

src/components/CheckboxGroup/CheckboxGroup.spec.tsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { CheckboxGroup } from './CheckboxGroup';
+
+describe('CheckboxGroup', () => {
+  it('access to DOM through ref prop', () => {
+    const ref = createRef<HTMLFieldSetElement>();
+    render(
+      <CheckboxGroup label="test" ref={ref}>
+        <p>Test</p>
+        <p>Test</p>
+      </CheckboxGroup>,
+    );
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('FIELDSET');
+  });
+});

src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -1,46 +1,34 @@
 'use client';
 
+import { forwardRef } from 'react';
 import styles from './CheckboxGroup.module.css';
 import { RequiredLabel } from '../../sharedComponents/RequiredLabel/RequiredLabel';
-import { CustomDataAttributeProps } from '../../types/attributes'; // 追加したインポート
+import { CustomDataAttributeProps } from '../../types/attributes';
 import { Checkbox } from '../Checkbox/Checkbox';
 import { Flex } from '../Flex/Flex';
-import type { FC, ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
 export type Props = {
   children: ReactElement<typeof Checkbox>[];
-  /**
-   * チェックボックスグループの見出し（legend要素）
-   */
   label: string;
-  /**
-   * 必須マークを表示するか
-   * 注意: trueとしてもinput要素のrequired属性は付与されません
-   */
   showRequiredLabel?: boolean;
-  /**
-   * チェックボックスの配置方向
-   * @default column
-   */
   direction?: 'column' | 'row';
 } & CustomDataAttributeProps;
 
-export const CheckboxGroup: FC<Props> = ({
-  children,
-  label,
-  showRequiredLabel,
-  direction = 'column',
-  ...otherProps
-}) => {
-  return (
-    <fieldset className={styles.wrapper} {...otherProps}>
-      <legend className={styles.legend}>
-        {label}
-        {showRequiredLabel && <RequiredLabel />}
-      </legend>
-      <Flex spacing="md" direction={direction}>
-        {children}
-      </Flex>
-    </fieldset>
-  );
-};
+export const CheckboxGroup = forwardRef<HTMLFieldSetElement, Props>(
+  ({ children, label, showRequiredLabel, direction = 'column', ...otherProps }, ref) => {
+    return (
+      <fieldset className={styles.wrapper} ref={ref} {...otherProps}>
+        <legend className={styles.legend}>
+          {label}
+          {showRequiredLabel && <RequiredLabel />}
+        </legend>
+        <Flex spacing="md" direction={direction}>
+          {children}
+        </Flex>
+      </fieldset>
+    );
+  },
+);
+
+CheckboxGroup.displayName = 'CheckboxGroup';

src/components/ErrorMessage/ErrorMessage.spec.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { ErrorMessage } from './ErrorMessage';
+
+describe('ErrorMessage', () => {
+  it('access to DOM through ref prop', () => {
+    const ref = createRef<HTMLParagraphElement>();
+    render(<ErrorMessage ref={ref}>Test</ErrorMessage>);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('P');
+  });
+});

src/components/ErrorMessage/ErrorMessage.tsx

@@ -1,15 +1,18 @@
 'use client';
 
+import { forwardRef } from 'react';
 import styles from './ErrorMessage.module.css';
-import { CustomDataAttributeProps } from '../../types/attributes'; // 追加したインポート
-import type { FC, ReactNode } from 'react';
+import { CustomDataAttributeProps } from '../../types/attributes';
+import type { ReactNode } from 'react';
 
 type Props = {
   children: ReactNode;
 } & CustomDataAttributeProps;
 
-export const ErrorMessage: FC<Props> = ({ children, ...otherProps }) => (
-  <p aria-live="polite" className={styles.error} {...otherProps}>
+export const ErrorMessage = forwardRef<HTMLParagraphElement, Props>(({ children, ...otherProps }, ref) => (
+  <p aria-live="polite" className={styles.error} ref={ref} {...otherProps}>
     {children}
   </p>
-);
+));
+
+ErrorMessage.displayName = 'ErrorMessage';

src/components/Input/Input.spec.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Input } from './Input';
+
+describe('Input', () => {
+  it('access to DOM through ref prop', () => {
+    const ref = createRef<HTMLInputElement>();
+
+    render(<Input name="test" value="test" ref={ref} />);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('INPUT');
+    expect(ref.current?.type).toBe('text');
+  });
+});

src/components/Input/Input.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { clsx } from 'clsx';
-import { FC, forwardRef, InputHTMLAttributes } from 'react';
+import { forwardRef, InputHTMLAttributes } from 'react';
 import styles from './Input.module.css';
 import { CustomDataAttributeProps } from '../../types/attributes'; // 追加したインポート
 
@@ -18,7 +18,7 @@ type Props = {
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'invalid' | 'value'> &
   CustomDataAttributeProps;
 
-export const Input: FC<Props> = forwardRef<HTMLInputElement, Props>(({ isInvalid, ...props }, ref) => {
+export const Input = forwardRef<HTMLInputElement, Props>(({ isInvalid, ...props }, ref) => {
   const className = clsx({ [styles.isInvalid]: isInvalid && !props.disabled }, styles.input, props.className);
 
   return <input {...props} className={className} ref={ref} aria-invalid={isInvalid} />;

src/components/RadioButton/RadioButton.spec.tsx

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { RadioButton } from './RadioButton';
+
+describe('RadioButton', () => {
+  it('access to DOM through ref prop', () => {
+    const ref = createRef<HTMLInputElement>();
+    render(
+      <RadioButton
+        name="test"
+        value="test"
+        ref={ref}
+        onChange={() => {
+          /**/
+        }}
+        checked={false}
+      >
+        Test
+      </RadioButton>,
+    );
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('INPUT');
+    expect(ref.current?.type).toBe('radio');
+  });
+});

src/components/RadioButton/RadioButton.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
-import { FC, InputHTMLAttributes } from 'react';
+import { forwardRef, type InputHTMLAttributes } from 'react';
 import styles from './RadioButton.module.css';
 import { CustomDataAttributeProps } from '../../types/attributes';
 
@@ -29,30 +29,27 @@ type Props = {
 } & RadioProps &
   CustomDataAttributeProps;
 
-export const RadioButton: FC<Props> = ({
-  size = 'medium',
-  checked,
-  onChange,
-  value,
-  name,
-  children,
-  ...otherProps
-}) => {
-  return (
-    <div className={clsx(styles[size])}>
-      <label className={styles.label}>
-        <input
-          type="radio"
-          checked={checked}
-          name={name}
-          value={value}
-          className={styles.radio}
-          onChange={onChange}
-          {...otherProps}
-        />
-        <span className={styles.icon} />
-        <span className={styles.text}>{children}</span>
-      </label>
-    </div>
-  );
-};
+export const RadioButton = forwardRef<HTMLInputElement, Props>(
+  ({ size = 'medium', checked, onChange, value, name, children, ...otherProps }, ref) => {
+    return (
+      <div className={clsx(styles[size])}>
+        <label className={styles.label}>
+          <input
+            type="radio"
+            checked={checked}
+            name={name}
+            value={value}
+            className={styles.radio}
+            onChange={onChange}
+            ref={ref}
+            {...otherProps}
+          />
+          <span className={styles.icon} />
+          <span className={styles.text}>{children}</span>
+        </label>
+      </div>
+    );
+  },
+);
+
+RadioButton.displayName = 'RadioButton';

src/components/RadioGroup/RadioGroup.spec.tsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { RadioGroup } from './RadioGroup';
+
+describe('RadioGroup', () => {
+  it('access to DOM through ref prop', () => {
+    const ref = createRef<HTMLFieldSetElement>();
+    render(
+      <RadioGroup label="test" ref={ref}>
+        <p>Test</p>
+        <p>Test</p>
+      </RadioGroup>,
+    );
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('FIELDSET');
+  });
+});