Merge pull request #48 from Kyutech-C3/feat/Date-label-ui-#16

Feat/date label UI #16

package.json

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.4.3",
+    "date-fns": "^2.30.0",
     "lucide-react": "^0.288.0",
     "next": "13.5.6",
     "react": "18.2.0",
@@ -63,6 +64,7 @@
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@tsconfig/strictest": "^2.0.1",
+    "@types/date-fns": "^2.6.0",
     "@types/jest": "^29.5.4",
     "@types/node": "20.8.10",
     "@types/react": "18.2.30",

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

@@ -0,0 +1,35 @@
+import { DateLabel } from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof DateLabel> = {
+  component: DateLabel,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DateLabel>;
+
+export const Default: Story = {
+  args: {
+    date: '2023-01-01T00:00:00',
+  },
+};
+
+export const FullDate: Story = {
+  args: {
+    date: '2023-01-01T00:00:00',
+    format: 'yyyy/MM/dd',
+  },
+};
+
+export const Date: Story = {
+  args: {
+    date: '2023-01-01T00:00:00',
+    format: 'MM/dd',
+  },
+};

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

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react';
+
+import '@testing-library/jest-dom';
+import { DateLabel } from '.';
+
+describe('ui/DateLabelのテスト', () => {
+  const testDate = '2023-01-01T00:00:00';
+  const isoString = new Date(testDate).toISOString();
+  it('renders the component with default date format', () => {
+    const screen = render(<DateLabel date={testDate} />);
+    const timeElement = screen.getByText(/2023\/01\/01 00:00:00/);
+    expect(timeElement).toBeInTheDocument();
+    expect(timeElement).toHaveAttribute('dateTime', isoString);
+  });
+
+  it('renders the component with custom date format', () => {
+    const customFormat = 'yyyy-MM-dd';
+    const screen = render(<DateLabel date={testDate} format={customFormat} />);
+    const timeElement = screen.getByText(/2023-01-01/);
+    expect(timeElement).toBeInTheDocument();
+    expect(timeElement).toHaveAttribute('dateTime', isoString);
+  });
+
+  it('applies custom class names', () => {
+    const customClassName = 'custom-class';
+    const screen = render(
+      <DateLabel date={testDate} className={customClassName} />
+    );
+    const timeElement = screen.getByText(/2023\/01\/01 00:00:00/);
+    expect(timeElement).toHaveClass(customClassName);
+  });
+
+  it('renders the correct dateTime attribute', () => {
+    const screen = render(<DateLabel date={testDate} />);
+    const timeElement = screen.getByText(/2023\/01\/01 00:00:00/);
+    expect(timeElement).toHaveAttribute('dateTime', isoString);
+  });
+});

src/components/ui/DateLabel/index.tsx

@@ -0,0 +1,18 @@
+import { dateFormat } from '@/libs/dateFormat';
+import { cn } from '@/libs/utils';
+
+type Props = {
+  date: string;
+  format?: string;
+  className?: string;
+};
+
+export const DateLabel: React.FC<Props> = ({
+  date,
+  format = 'yyyy/MM/dd HH:mm:ss',
+  className,
+}) => (
+  <time className={cn(className)} dateTime={new Date(date).toISOString()}>
+    {dateFormat(date, format)}
+  </time>
+);

src/libs/dateFormat/index.test.ts

@@ -0,0 +1,35 @@
+import { dateFormat } from '.';
+
+describe('dateFormat function', () => {
+  it('formats the date correctly according to the given format', () => {
+    const date = '2023-01-01T00:00:00.000Z';
+    const formatString = 'yyyy-MM-dd';
+    const result = dateFormat(date, formatString);
+    expect(result).toBe('2023-01-01');
+  });
+
+  it('throws an error with invalid date object', () => {
+    const invalidDate = 'not a real date';
+    const formatString = 'yyyy-MM-dd';
+    expect(() => dateFormat(invalidDate, formatString)).toThrowError();
+  });
+
+  it('throws an error with invalid date format', () => {
+    const date = '2023-01-01T00:00:00.000Z';
+    const invalidFormatString = '';
+    expect(() => dateFormat(date, invalidFormatString)).toThrowError();
+  });
+
+  it('handles incorrect format strings', () => {
+    const date = '2023-01-01T00:00:00.000Z';
+    const formatString = 'not a format';
+    expect(() => dateFormat(date, formatString)).toThrowError();
+  });
+
+  it('formats the date correctly in a specific locale', () => {
+    const date = '2023-01-01T00:00:00.000Z';
+    const formatString = 'PPP';
+    const result = dateFormat(date, formatString);
+    expect(result).toBe('January 1st, 2023');
+  });
+});

src/libs/dateFormat/index.ts

@@ -0,0 +1,4 @@
+import { format } from 'date-fns';
+
+export const dateFormat = (dateString: string, _format: string): string =>
+  format(new Date(dateString), _format);