♻️

miyasan31 · Sep 19, 2022 · e681a1b · e681a1b · vercel · Sep 19, 2022
1 parent 229db07
commit e681a1b
Show file tree

Hide file tree

Showing 13 changed files with 110 additions and 116 deletions.
diff --git a/src/components/page/Root/Root.tsx b/src/components/page/Root/Root.tsx
@@ -22,6 +22,8 @@ import { RadioGroup } from "~/components/shared/RadioGroup";
 import { Switch } from "~/components/shared/Switch";
 import { Text } from "~/components/shared/Text";
 
+const iconPath = "https://avatars.githubusercontent.com/u/71614432?v=4";
+
 export const Root: FC = () => {
   const onClick = () => {
     console.info("click!!");
@@ -63,29 +65,31 @@ export const Root: FC = () => {
         <Button color="primary" isOutline onClick={onClick}>
           PrimaryOutline
         </Button>
-        <Button color="primary" isGhost under onClick={onClick}>
+        <Button color="primary" isGhost onClick={onClick}>
           PrimaryGhost
         </Button>
       </Flex>
+
       <Flex gap={1}>
         <Button color="red" onClick={onClick}>
           Red
         </Button>
         <Button color="red" isOutline onClick={onClick}>
           RedOutline
         </Button>
-        <Button color="red" isGhost under onClick={onClick}>
+        <Button color="red" isGhost onClick={onClick}>
           RedGhost
         </Button>
       </Flex>
+
       <Flex gap={1}>
         <Button color="slate" onClick={onClick}>
           Slate
         </Button>
         <Button color="slate" isOutline onClick={onClick}>
           SlateOutline
         </Button>
-        <Button color="slate" isGhost under onClick={onClick}>
+        <Button color="slate" isGhost onClick={onClick}>
           SlateGhost
         </Button>
         <NextLink href="/" btn>
@@ -109,31 +113,29 @@ export const Root: FC = () => {
         </Button>
       </Flex>
 
+      <Text>ラジオボタン</Text>
+      <Flex gap={1}>
+        <RadioGroup
+          options={RADIO_OPTIONS}
+          defaultValue={RADIO_OPTIONS[0].value}
+          ariaLabel="radioGroup"
+          onClick={onClick}
+        />
+      </Flex>
+
+      <Text>スイッチ</Text>
       <Flex gap={1}>
-        <Flex gap={1}>
-          <Text>ラジオボタン</Text>
-          <RadioGroup
-            options={RADIO_OPTIONS}
-            defaultValue={RADIO_OPTIONS[0].value}
-            ariaLabel="radioGroup"
-            onClick={onClick}
-          />
-        </Flex>
-
-        <Flex gap={1}>
-          <Text>スイッチ</Text>
-          <Switch labalLeft="off" labalRight="on" onClick={onClick} />
-        </Flex>
+        <Switch labelLeft="OFF" labelRight="ON" onClick={onClick} />
       </Flex>
 
       <Text>ユーザーカード</Text>
       <HoverUserCard
         userId="miyasan_0301"
-        userName="みやさん | 学生"
-        profile="みやさんです。hogehogehogehogehogehogehogehogehogehogehogehogehogehoge"
+        userName="みやさん"
+        profile="みやさんです。"
         following={40}
         followers={120}
-        iconPath="https://pbs.twimg.com/profile_images/1410567316421578759/3rtKrTAL_400x400.jpg"
+        iconPath={iconPath}
       />
 
       <Text>ダイアログ</Text>
@@ -147,21 +149,21 @@ export const Root: FC = () => {
       />
 
       <Text>フォントサイズ</Text>
-      <Text size="xs">xs - TextTextText</Text>
-      <Text size="sm">sm - TextTextText</Text>
-      <Text size="base">base - TextTextText</Text>
-      <Text size="lg">lg - TextTextText</Text>
-      <Text size="xl">xl - TextTextText</Text>
-      <Text size="x2l">x2l - TextTextText</Text>
-      <Text size="x3l">x3l - TextTextText</Text>
-      <Text size="x4l">x4l - TextTextText</Text>
+      <Text size="xs">xs - テキスト</Text>
+      <Text size="sm">sm - テキスト</Text>
+      <Text size="base">base - テキスト</Text>
+      <Text size="lg">lg - テキスト</Text>
+      <Text size="xl">xl - テキスト</Text>
+      <Text size="x2l">x2l - テキスト</Text>
+      <Text size="x3l">x3l - テキスト</Text>
+      <Text size="x4l">x4l - テキスト</Text>
 
       <Text>デコレーション</Text>
-      <Text bold>太字太字太字</Text>
-      <Text faded>薄字薄字薄字</Text>
-      <Text under>下線下線下線</Text>
-      <Text color="blue">青字青字青字</Text>
-      <Text color="red">赤字赤字赤字</Text>
+      <Text bold>太字</Text>
+      <Text faded>薄字</Text>
+      <Text under>下線</Text>
+      <Text color="blue">青文字</Text>
+      <Text color="red">赤文字</Text>
     </>
   );
 };

diff --git a/src/components/provider/WithTheme/ThemeChanger.tsx b/src/components/provider/WithTheme/ThemeChanger.tsx
@@ -29,12 +29,6 @@ export const ThemeChanger = () => {
   if (!isMounted) return null;
 
   return (
-    <Switch
-      labalLeft="is light"
-      labalRight="is dark"
-      defaultChecked={currentTheme !== "light"}
-      isDark
-      onClick={onClick}
-    />
+    <Switch labelLeft="light" labelRight="dark" defaultChecked={currentTheme !== "light"} isDark onClick={onClick} />
   );
 };
diff --git a/src/components/shared/Button.tsx b/src/components/shared/Button.tsx
@@ -103,17 +103,17 @@ type Props = {
   onClick: MouseEventHandler<HTMLButtonElement>;
 };
 
-export const Button: FC<Props> = (props) => {
+export const Button: FC<Props> = ({ children, color, size = "base", isGhost, isOutline, under, onClick }) => {
   return (
     <StitchesButton
-      color={props.color}
-      size={props.size}
-      isGhost={props.isGhost && props.color}
-      isOutline={props.isOutline && props.color}
-      under={props.under}
-      onClick={props.onClick}
+      color={color}
+      size={size}
+      isGhost={isGhost && color}
+      isOutline={isOutline && color}
+      under={under}
+      onClick={onClick}
     >
-      {props.children}
+      {children}
     </StitchesButton>
   );
 };
diff --git a/src/components/shared/Dialog.tsx b/src/components/shared/Dialog.tsx
@@ -44,38 +44,38 @@ type Props = {
   confirmationButtonLabel: string;
 };
 
-export const Dialog: FC<Props> = (props) => {
+export const Dialog: FC<Props> = ({ title, subtitle, icon, closeButtonLabel, confirmationButtonLabel }) => {
   return (
     <AlertDialogPrimitive.Root>
       <StyledOverlay />
 
       <AlertDialogPrimitive.Trigger asChild>
-        <IconButton color="slate">{props.icon}</IconButton>
+        <IconButton color="slate">{icon}</IconButton>
       </AlertDialogPrimitive.Trigger>
 
       <AlertDialogContent>
         <Flex direction="col" gap={0.75}>
           <AlertDialogPrimitive.Title asChild>
             <Text bold size="xl">
-              {props.title}
+              {title}
             </Text>
           </AlertDialogPrimitive.Title>
 
           <AlertDialogPrimitive.Description asChild>
             <Text faded size="sm">
-              {props.subtitle}
+              {subtitle}
             </Text>
           </AlertDialogPrimitive.Description>
 
           <Flex direction="col" gap={0.75}>
             <AlertDialogPrimitive.Action asChild>
               <StitchesButton color="red" size="lg">
-                {props.confirmationButtonLabel}
+                {confirmationButtonLabel}
               </StitchesButton>
             </AlertDialogPrimitive.Action>
             <AlertDialogPrimitive.Cancel asChild>
               <StitchesButton color="slate" size="lg" isOutline="slate">
-                {props.closeButtonLabel}
+                {closeButtonLabel}
               </StitchesButton>
             </AlertDialogPrimitive.Cancel>
           </Flex>

diff --git a/src/components/shared/Flex.tsx b/src/components/shared/Flex.tsx
@@ -49,11 +49,11 @@ type Props = {
   children: ReactNode;
 };
 
-export const Flex: FC<Props> = (props) => {
-  const gap: string = props.gap + "rem";
+export const Flex: FC<Props> = ({ direction, justify, items, gap = 0, children }) => {
+  const gapProps = gap + "rem";
   return (
-    <StitchesFlex direction={props.direction} justify={props.justify} items={props.items} css={{ gap }}>
-      {props.children}
+    <StitchesFlex direction={direction} justify={justify} items={items} css={{ gap: gapProps }}>
+      {children}
     </StitchesFlex>
   );
 };
diff --git a/src/components/shared/HoverUserCard.tsx b/src/components/shared/HoverUserCard.tsx
@@ -51,7 +51,7 @@ type Props = {
   iconPath: string;
 };
 
-export const HoverUserCard: FC<Props> = (props) => {
+export const HoverUserCard: FC<Props> = ({ userId, userName, profile, following, followers, iconPath }) => {
   const onClick = () => {
     console.info("click!!");
   };
@@ -60,7 +60,7 @@ export const HoverUserCard: FC<Props> = (props) => {
     <HoverCardPrimitive.Root>
       <HoverCardPrimitive.Trigger asChild>
         <ImageTrigger href="#" rel="noreferrer noopener">
-          <CircleImg src={props.iconPath} />
+          <CircleImg src={iconPath} />
         </ImageTrigger>
       </HoverCardPrimitive.Trigger>
 
@@ -69,36 +69,36 @@ export const HoverUserCard: FC<Props> = (props) => {
 
         <Flex direction="col">
           <Flex justify="between">
-            <CircleImg size="lg" src={props.iconPath} />
+            <CircleImg size="lg" src={iconPath} />
             <Button color="primary" onClick={onClick}>
-              Following
+              フォロー
             </Button>
           </Flex>
 
           <Flex direction="col" gap={1}>
             <Text pt={0.5}>
-              <Text bold>{props.userName}</Text>
+              <Text bold>{userName}</Text>
               <NextLink href="/">
                 <Text faded>
                   {"@"}
-                  {props.userId}
+                  {userId}
                 </Text>
               </NextLink>
             </Text>
 
-            <Text>{props.profile}</Text>
+            <Text>{profile}</Text>
 
             <Flex gap={1}>
               <NextLink href="/">
                 <Flex>
-                  <Text bold>{props.following}</Text>
+                  <Text bold>{following}</Text>
                   <Text faded>&nbsp;Following</Text>
                 </Flex>
               </NextLink>
 
               <NextLink href="/">
                 <Flex>
-                  <Text bold>{props.followers}</Text>
+                  <Text bold>{followers}</Text>
                   <Text faded>&nbsp;Followers</Text>
                 </Flex>
               </NextLink>

diff --git a/src/components/shared/Icon.tsx b/src/components/shared/Icon.tsx
@@ -4,9 +4,9 @@ type Props = {
   size: 15 | 30 | 45;
 };
 
-export const AllowLeftIcon: FC<Props> = (props) => {
+export const AllowLeftIcon: FC<Props> = ({ size }) => {
   return (
-    <svg width={props.size} height={props.size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width={size} height={size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z"
         fill="currentColor"
@@ -17,9 +17,9 @@ export const AllowLeftIcon: FC<Props> = (props) => {
   );
 };
 
-export const AllowRightIcon: FC<Props> = (props) => {
+export const AllowRightIcon: FC<Props> = ({ size }) => {
   return (
-    <svg width={props.size} height={props.size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width={size} height={size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
         fill="currentColor"
@@ -30,9 +30,9 @@ export const AllowRightIcon: FC<Props> = (props) => {
   );
 };
 
-export const CloseIcon: FC<Props> = (props) => {
+export const CloseIcon: FC<Props> = ({ size }) => {
   return (
-    <svg width={props.size} height={props.size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width={size} height={size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z"
         fill="currentColor"
@@ -43,9 +43,9 @@ export const CloseIcon: FC<Props> = (props) => {
   );
 };
 
-export const DotsIcon: FC<Props> = (props) => {
+export const DotsIcon: FC<Props> = ({ size }) => {
   return (
-    <svg width={props.size} height={props.size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width={size} height={size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M3.625 7.5C3.625 8.12132 3.12132 8.625 2.5 8.625C1.87868 8.625 1.375 8.12132 1.375 7.5C1.375 6.87868 1.87868 6.375 2.5 6.375C3.12132 6.375 3.625 6.87868 3.625 7.5ZM8.625 7.5C8.625 8.12132 8.12132 8.625 7.5 8.625C6.87868 8.625 6.375 8.12132 6.375 7.5C6.375 6.87868 6.87868 6.375 7.5 6.375C8.12132 6.375 8.625 6.87868 8.625 7.5ZM12.5 8.625C13.1213 8.625 13.625 8.12132 13.625 7.5C13.625 6.87868 13.1213 6.375 12.5 6.375C11.8787 6.375 11.375 6.87868 11.375 7.5C11.375 8.12132 11.8787 8.625 12.5 8.625Z"
         fill="currentColor"
@@ -56,9 +56,9 @@ export const DotsIcon: FC<Props> = (props) => {
   );
 };
 
-export const ReplyIcon: FC<Props> = (props) => {
+export const ReplyIcon: FC<Props> = ({ size }) => {
   return (
-    <svg width={props.size} height={props.size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width={size} height={size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M12.5 3L2.49999 3.00002C1.67157 3.00002 0.999999 3.67159 0.999999 4.50002V9.50002C0.999999 10.3284 1.67157 11 2.5 11H7.50002C7.63263 11 7.75981 11.0527 7.85358 11.1465L9.99999 13.2929V11.5C9.99999 11.2239 10.2239 11 10.5 11H12.5C13.3284 11 14 10.3284 14 9.50002V4.5C14 3.67157 13.3284 3 12.5 3ZM2.49999 2.00002L12.5 2C13.8807 2 15 3.11928 15 4.5V9.50002C15 10.8807 13.8807 12 12.5 12H11V14.5C11 14.7022 10.8782 14.8845 10.6913 14.9619C10.5045 15.0393 10.2894 14.9965 10.1464 14.8535L7.29292 12H2.5C1.11929 12 0 10.8807 0 9.50002V4.50002C0 3.11931 1.11928 2.00002 2.49999 2.00002Z"
         fill="currentColor"
@@ -69,9 +69,9 @@ export const ReplyIcon: FC<Props> = (props) => {
   );
 };
 
-export const RetweetIcon: FC<Props> = (props) => {
+export const RetweetIcon: FC<Props> = ({ size }) => {
   return (
-    <svg width={props.size} height={props.size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width={size} height={size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M3.35355 1.85355C3.54882 1.65829 3.54882 1.34171 3.35355 1.14645C3.15829 0.951184 2.84171 0.951184 2.64645 1.14645L0.646447 3.14645C0.451184 3.34171 0.451184 3.65829 0.646447 3.85355L2.64645 5.85355C2.84171 6.04882 3.15829 6.04882 3.35355 5.85355C3.54882 5.65829 3.54882 5.34171 3.35355 5.14645L2.20711 4H9.5C11.433 4 13 5.567 13 7.5C13 7.77614 13.2239 8 13.5 8C13.7761 8 14 7.77614 14 7.5C14 5.01472 11.9853 3 9.5 3H2.20711L3.35355 1.85355ZM2 7.5C2 7.22386 1.77614 7 1.5 7C1.22386 7 1 7.22386 1 7.5C1 9.98528 3.01472 12 5.5 12H12.7929L11.6464 13.1464C11.4512 13.3417 11.4512 13.6583 11.6464 13.8536C11.8417 14.0488 12.1583 14.0488 12.3536 13.8536L14.3536 11.8536C14.5488 11.6583 14.5488 11.3417 14.3536 11.1464L12.3536 9.14645C12.1583 8.95118 11.8417 8.95118 11.6464 9.14645C11.4512 9.34171 11.4512 9.65829 11.6464 9.85355L12.7929 11H5.5C3.567 11 2 9.433 2 7.5Z"
         fill="currentColor"
@@ -82,9 +82,9 @@ export const RetweetIcon: FC<Props> = (props) => {
   );
 };
 
-export const FavoriteIcon: FC<Props> = (props) => {
+export const FavoriteIcon: FC<Props> = ({ size }) => {
   return (
-    <svg width={props.size} height={props.size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width={size} height={size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M6.97942 1.25171L6.9585 1.30199L5.58662 4.60039C5.54342 4.70426 5.44573 4.77523 5.3336 4.78422L1.7727 5.0697L1.71841 5.07405L1.38687 5.10063L1.08608 5.12475C0.820085 5.14607 0.712228 5.47802 0.914889 5.65162L1.14406 5.84793L1.39666 6.06431L1.43802 6.09974L4.15105 8.42374C4.23648 8.49692 4.2738 8.61176 4.24769 8.72118L3.41882 12.196L3.40618 12.249L3.32901 12.5725L3.25899 12.866C3.19708 13.1256 3.47945 13.3308 3.70718 13.1917L3.9647 13.0344L4.24854 12.861L4.29502 12.8326L7.34365 10.9705C7.43965 10.9119 7.5604 10.9119 7.6564 10.9705L10.705 12.8326L10.7515 12.861L11.0354 13.0344L11.2929 13.1917C11.5206 13.3308 11.803 13.1256 11.7411 12.866L11.671 12.5725L11.5939 12.249L11.5812 12.196L10.7524 8.72118C10.7263 8.61176 10.7636 8.49692 10.849 8.42374L13.562 6.09974L13.6034 6.06431L13.856 5.84793L14.0852 5.65162C14.2878 5.47802 14.18 5.14607 13.914 5.12475L13.6132 5.10063L13.2816 5.07405L13.2274 5.0697L9.66645 4.78422C9.55432 4.77523 9.45663 4.70426 9.41343 4.60039L8.04155 1.30199L8.02064 1.25171L7.89291 0.944609L7.77702 0.665992C7.67454 0.419604 7.32551 0.419604 7.22303 0.665992L7.10715 0.944609L6.97942 1.25171ZM7.50003 2.60397L6.50994 4.98442C6.32273 5.43453 5.89944 5.74207 5.41351 5.78103L2.84361 5.98705L4.8016 7.66428C5.17183 7.98142 5.33351 8.47903 5.2204 8.95321L4.62221 11.461L6.8224 10.1171C7.23842 9.86302 7.76164 9.86302 8.17766 10.1171L10.3778 11.461L9.77965 8.95321C9.66654 8.47903 9.82822 7.98142 10.1984 7.66428L12.1564 5.98705L9.58654 5.78103C9.10061 5.74207 8.67732 5.43453 8.49011 4.98442L7.50003 2.60397Z"
         fill="currentColor"
@@ -95,9 +95,9 @@ export const FavoriteIcon: FC<Props> = (props) => {
   );
 };
 
-export const ShareIcon: FC<Props> = (props) => {
+export const ShareIcon: FC<Props> = ({ size }) => {
   return (
-    <svg width={props.size} height={props.size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width={size} height={size} viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M3.5 5.00006C3.22386 5.00006 3 5.22392 3 5.50006L3 11.5001C3 11.7762 3.22386 12.0001 3.5 12.0001L11.5 12.0001C11.7761 12.0001 12 11.7762 12 11.5001L12 5.50006C12 5.22392 11.7761 5.00006 11.5 5.00006L10.25 5.00006C9.97386 5.00006 9.75 4.7762 9.75 4.50006C9.75 4.22392 9.97386 4.00006 10.25 4.00006L11.5 4.00006C12.3284 4.00006 13 4.67163 13 5.50006L13 11.5001C13 12.3285 12.3284 13.0001 11.5 13.0001L3.5 13.0001C2.67157 13.0001 2 12.3285 2 11.5001L2 5.50006C2 4.67163 2.67157 4.00006 3.5 4.00006L4.75 4.00006C5.02614 4.00006 5.25 4.22392 5.25 4.50006C5.25 4.7762 5.02614 5.00006 4.75 5.00006L3.5 5.00006ZM7 1.6364L5.5682 3.0682C5.39246 3.24393 5.10754 3.24393 4.9318 3.0682C4.75607 2.89246 4.75607 2.60754 4.9318 2.4318L7.1818 0.181802C7.26619 0.09741 7.38065 0.049999 7.5 0.049999C7.61935 0.049999 7.73381 0.09741 7.8182 0.181802L10.0682 2.4318C10.2439 2.60754 10.2439 2.89246 10.0682 3.0682C9.89246 3.24393 9.60754 3.24393 9.4318 3.0682L8 1.6364L8 8.5C8 8.77614 7.77614 9 7.5 9C7.22386 9 7 8.77614 7 8.5L7 1.6364Z"
         fill="currentColor"