Merge branch 'develop' into dependabot/github_actions/actions/checkout-4

.eslintrc.json

@@ -43,7 +43,18 @@
         "html": true
       }
     ],
-
+    // Reactの明示的なimportを禁止する
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "react",
+            "importNames": ["default"]
+          }
+        ]
+      }
+    ],
     // 型の名前をパスカルケースにする
     "@typescript-eslint/naming-convention": [
       "error",

.github/workflows/auto_merge.yml

@@ -1,6 +1,8 @@
 name: Dependabot auto-merge
-on: pull_request
-
+on:
+  pull_request_target:
+    types:
+      - opened
 permissions:
   contents: write
   pull-requests: write
@@ -15,9 +17,16 @@ jobs:
         uses: dependabot/fetch-metadata@v1
         with:
           github-token: '${{ secrets.GITHUB_TOKEN }}'
-      - name: Enable auto-merge for Dependabot PRs
+
+      - name: approve
         if: contains(steps.metadata.outputs.dependency-names, 'my-dependency') && steps.metadata.outputs.update-type == 'version-update:semver-patch'
+
+        run: gh pr review --approve "$PR_URL"
+
+      - name: Enable auto-merge for Dependabot PRs
         run: gh pr merge --auto --merge "$PR_URL"
+
         env:
           PR_URL: ${{github.event.pull_request.html_url}}
+          GH_TOKEN: ${{ github.token }}
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.github/workflows/chromatic_deploy.yml

@@ -1,11 +1,13 @@
 name: 'Chromatic'
 
-on: push
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
 
 jobs:
   chromatic-deployment:
     runs-on: ubuntu-latest
-    if: !contains(github.event.head_commit.message , 'dependabot')
+    if: github.event.pull_request.user.login != 'dependabot[bot]'
     steps:
       - uses: actions/checkout@v4
       - name: Install dependencies

package.json

@@ -51,6 +51,7 @@
     "@commitlint/config-conventional": "^17.7.0",
     "@markuplint/jsx-parser": "^3.11.0",
     "@markuplint/react-spec": "^3.12.0",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-slot": "^1.0.2",
     "@stoplight/prism-cli": "^5.4.0",
     "@storybook/addon-essentials": "^7.5.1",

src/components/ui/Avatar/index.stories.tsx

@@ -0,0 +1,32 @@
+import { Avatar, AvatarFallback, AvatarImage } from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Avatar> = {
+  component: Avatar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const Fallback: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  )
+}

src/components/ui/Avatar/index.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+
+import '@testing-library/jest-dom';
+
+import { Avatar, AvatarFallback, AvatarImage } from '.';
+
+describe('test ui/Avatar', () => {
+  it('renders Avatar correctly', () => {
+    const { container } = render(<Avatar />);
+    expect(container.firstChild).toHaveClass(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full'
+    );
+  });
+
+  it('renders Avatar with AvatarImage, AvatarFallback correctly', () => {
+    const fallbackText = 'FB';
+    const imageUrl = 'https://github.com/shadcn.png'
+    render(
+      <Avatar>
+        <AvatarImage src={imageUrl} />
+        <AvatarFallback>{fallbackText}</AvatarFallback>
+      </Avatar>
+    );
+
+    const fallback = screen.getByText(fallbackText);
+    expect(fallback).toBeInTheDocument();
+    expect(fallback).toHaveClass(
+      'flex h-full w-full items-center justify-center rounded-full bg-muted'
+    );
+
+    expect(fallback.parentElement).toHaveClass(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full'
+    );
+  });
+});

src/components/ui/Avatar/index.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { forwardRef }  from 'react';
+
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '@/libs/utils';
+
+const Avatar = forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

src/components/ui/Tag/index.tsx

@@ -1,5 +1,4 @@
 import type { FC, HTMLAttributes, ReactNode } from 'react';
-import React from 'react';
 
 import { cva, type VariantProps } from 'class-variance-authority';
 import Link from 'next/link';