feat/new role and edit role

pkgs/frontend/app/components/ContentContainer.tsx

@@ -0,0 +1,18 @@
+import { Box } from "@chakra-ui/react";
+
+export const ContentContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+    >
+      {children}
+    </Box>
+  );
+};

pkgs/frontend/app/components/InputDescription.tsx

@@ -0,0 +1,22 @@
+import { Box, BoxProps } from "@chakra-ui/react";
+import { CommonTextArea } from "./common/CommonTextarea";
+
+export const InputDescription = ({
+  description,
+  setDescription,
+  ...boxProps
+}: {
+  description: string;
+  setDescription: (description: string) => void;
+} & BoxProps) => {
+  return (
+    <Box minH="100px" w="100%" {...boxProps}>
+      <CommonTextArea
+        minHeight="125px"
+        placeholder="Description"
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+      />
+    </Box>
+  );
+};

pkgs/frontend/app/components/InputImage.tsx

@@ -0,0 +1,71 @@
+import { Box, Input, Text } from "@chakra-ui/react";
+import { CommonIcon } from "./common/CommonIcon";
+import { HiOutlinePlus } from "react-icons/hi2";
+
+const EmptyImage = () => {
+  return (
+    <Box
+      borderRadius="3xl"
+      border="1px solid"
+      borderColor="#1e1e1e"
+      bg="#e9ecef"
+      p={5}
+      w={200}
+      h={200}
+    >
+      <Box
+        display="flex"
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+        w="33%"
+        mx="auto"
+        mt={9}
+        mb={1}
+      >
+        <HiOutlinePlus size="full" />
+      </Box>
+      <Text textAlign="center">画像を選択</Text>
+    </Box>
+  );
+};
+
+export const InputImage = ({
+  imageFile,
+  setImageFile,
+  previousImageUrl,
+}: {
+  imageFile: File | null;
+  setImageFile: (file: File | null) => void;
+  previousImageUrl?: string;
+}) => {
+  const imageUrl = imageFile
+    ? URL.createObjectURL(imageFile)
+    : previousImageUrl
+      ? previousImageUrl
+      : undefined;
+
+  return (
+    <Box as="label" cursor="pointer" m="40px auto 40px">
+      <Input
+        type="file"
+        accept="image/*"
+        display="none"
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          if (file && file.type.startsWith("image/")) {
+            setImageFile(file);
+          } else {
+            alert("画像ファイルを選択してください");
+          }
+        }}
+      />
+      <CommonIcon
+        imageUrl={imageUrl}
+        fallbackIconComponent={<EmptyImage />}
+        size={200}
+        borderRadius="3xl"
+      />
+    </Box>
+  );
+};

pkgs/frontend/app/components/InputLink.tsx

@@ -0,0 +1,20 @@
+import { Box, BoxProps } from "@chakra-ui/react";
+import { CommonInput } from "./common/CommonInput";
+
+interface InputLinkProps extends BoxProps {
+  link: string;
+  setLink: (link: string) => void;
+}
+
+export const InputLink = ({ link, setLink, ...boxProps }: InputLinkProps) => {
+  return (
+    <Box w="100%" {...boxProps}>
+      <CommonInput
+        minHeight="45px"
+        placeholder="Link"
+        value={link}
+        onChange={(e) => setLink(e.target.value)}
+      />
+    </Box>
+  );
+};

pkgs/frontend/app/components/InputName.tsx

@@ -0,0 +1,23 @@
+import { Box, BoxProps } from "@chakra-ui/react";
+import { CommonInput } from "./common/CommonInput";
+
+export const InputName = ({
+  name,
+  setName,
+  ...boxProps
+}: {
+  name: string;
+  setName: (name: string) => void;
+} & BoxProps) => {
+  return (
+    <Box w="100%" {...boxProps}>
+      <CommonInput
+        minHeight="45px"
+        placeholder="Name"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        w="100%"
+      />
+    </Box>
+  );
+};

pkgs/frontend/app/components/RoleAttributesList.tsx

@@ -0,0 +1,44 @@
+import { FC } from "react";
+import { Box, Text } from "@chakra-ui/react";
+import { HatsDetailsAttributes } from "types/hats";
+import { EditRoleAttributeDialog } from "~/components/roleAttributeDialog/EditRoleAttributeDialog";
+
+export const RoleAttributesList: FC<{
+  items: HatsDetailsAttributes;
+  setItems: (value: HatsDetailsAttributes) => void;
+}> = ({ items, setItems }) => {
+  return (
+    <Box w="100%" mt={2}>
+      {items.map((_, index) => (
+        <Box
+          key={index}
+          minHeight="45px"
+          mt={2}
+          width="100%"
+          border="1px solid"
+          borderColor="gray.800"
+          borderRadius="xl"
+          backgroundColor="white"
+          py="auto"
+          display="flex"
+          alignItems="stretch"
+          justifyContent="space-between"
+          gap={4}
+          fontWeight="normal"
+        >
+          <Text ml={4} display="flex" alignItems="center">
+            {items[index]?.label}
+          </Text>
+          <Box ml="auto" display="flex" alignItems="center">
+            <EditRoleAttributeDialog
+              type="responsibility"
+              attributes={items}
+              setAttributes={setItems}
+              attributeIndex={index}
+            />
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+};

pkgs/frontend/app/components/common/CommonInput.tsx

@@ -2,9 +2,9 @@ import { Input, InputProps } from "@chakra-ui/react";
 import { FC } from "react";
 
 interface CommonInputProps extends Omit<InputProps, "value"> {
-  minHeight?: string;
+  minHeight?: InputProps["minHeight"];
   value: string | number;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const CommonInput: FC<CommonInputProps> = ({
@@ -16,6 +16,7 @@ export const CommonInput: FC<CommonInputProps> = ({
 }: CommonInputProps) => {
   return (
     <Input
+      minHeight={minHeight}
       placeholder={placeholder}
       width="100%"
       borderColor="gray.800"

pkgs/frontend/app/components/common/CommonTextarea.tsx

@@ -1,7 +1,7 @@
 import { Textarea, TextareaProps } from "@chakra-ui/react";
 
 interface CommonTextAreaProps extends Omit<TextareaProps, "value"> {
-  minHeight?: string;
+  minHeight?: TextareaProps["minHeight"];
   value: string;
   onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
 }

pkgs/frontend/app/components/roleAttributeDialog/AddRoleAttributeDialog.tsx

@@ -0,0 +1,47 @@
+import { Button } from "@chakra-ui/react";
+import { DialogTrigger } from "../ui/dialog";
+import { BaseRoleAttributeDialog } from "./BaseRoleAttributeDialog";
+import { HatsDetailsAttributes } from "types/hats";
+
+const PlusButton = () => {
+  return (
+    <DialogTrigger asChild>
+      <Button
+        aria-label="add"
+        width="full"
+        bg="blue.500"
+        mt={4}
+        color="gray.50"
+      >
+        +
+      </Button>
+    </DialogTrigger>
+  );
+};
+
+interface AddRoleAttributeDialogProps {
+  type: "responsibility" | "authority";
+  attributes: HatsDetailsAttributes;
+  setAttributes: (attributes: HatsDetailsAttributes) => void;
+}
+
+export const AddRoleAttributeDialog = ({
+  type,
+  attributes,
+  setAttributes,
+}: AddRoleAttributeDialogProps) => {
+  const onClick = (name: string, description: string, link: string) => {
+    setAttributes([...attributes, { label: name, description, link }]);
+  };
+
+  return (
+    <>
+      <BaseRoleAttributeDialog
+        type={type}
+        mode="add"
+        TriggerButton={<PlusButton />}
+        onClick={onClick}
+      />
+    </>
+  );
+};