Merge branch 'main' into feat/storyBlocksCRUD

reearth · Aug 2, 2023 · c007cee · c007cee
2 parents f0131d7 + ed4e332
commit c007cee
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 81 deletions.
diff --git a/web/src/beta/components/Button/index.stories.tsx b/web/src/beta/components/Button/index.stories.tsx
@@ -10,27 +10,80 @@ export default meta;
 
 type Story = StoryObj<typeof Button>;
 
-export const PrimarySmall: Story = { render: () => <Button buttonType="primary" text="Primary" /> };
-export const PrimaryLarge: Story = {
-  render: () => <Button buttonType="primary" text="Primary" large />,
+export const Default: Story = {
+  render: () => <Button text="Default" />,
 };
+
+export const PrimarySmall: Story = {
+  render: () => <Button buttonType="primary" text="Primary" size="small" />,
+};
+
+export const PrimaryMedium: Story = {
+  render: () => <Button buttonType="primary" text="Primary" size="medium" />,
+};
+
+export const PrimaryDisabled: Story = {
+  render: () => <Button buttonType="primary" text="Primary" disabled />,
+};
+
 export const SecondarySmall: Story = {
-  render: () => <Button buttonType="secondary" text="secondary" />,
+  render: () => <Button buttonType="secondary" text="secondary" size="small" />,
+};
+
+export const SecondaryMedium: Story = {
+  render: () => <Button buttonType="secondary" text="secondary" size="medium" />,
 };
-export const SecondaryLarge: Story = {
-  render: () => <Button buttonType="secondary" text="secondary" large />,
+
+export const SecondaryDisabled: Story = {
+  render: () => <Button buttonType="secondary" text="secondary" disabled />,
 };
-export const DangerSmall: Story = { render: () => <Button buttonType="danger" text="danger" /> };
-export const DangerLarge: Story = {
-  render: () => <Button buttonType="danger" text="danger" large />,
+
+export const DangerSmall: Story = {
+  render: () => <Button buttonType="danger" text="danger" size="small" />,
 };
-export const Disabled: Story = {
-  render: () => <Button buttonType="primary" text="disabled" icon="datasetAdd" disabled />,
+
+export const DangerMedium: Story = {
+  render: () => <Button buttonType="danger" text="danger" size="medium" />,
 };
 
-export const WithIcon: Story = {
-  render: () => <Button buttonType="primary" text="Primary" icon="datasetAdd" />,
+export const DangerDisabled: Story = {
+  render: () => <Button buttonType="danger" text="danger" disabled />,
 };
-export const WithIconRight: Story = {
-  render: () => <Button buttonType="secondary" text="secondary" icon="datasetAdd" iconRight />,
+
+export const DisabledSmall: Story = {
+  render: () => <Button buttonType="primary" text="disabled" size="small" disabled />,
+};
+
+export const DisabledMedium: Story = {
+  render: () => <Button text="disabled" size="medium" disabled />,
+};
+
+export const WithLeftIconSmall: Story = {
+  render: () => (
+    <Button buttonType="primary" text="Primary" icon="book" size="small" iconPosition="left" />
+  ),
+};
+
+export const WithRightIconSmall: Story = {
+  render: () => (
+    <Button buttonType="secondary" text="Primary" icon="book" size="small" iconPosition="right" />
+  ),
+};
+
+export const WithLeftIconMedium: Story = {
+  render: () => (
+    <Button buttonType="primary" text="Primary" icon="book" size="medium" iconPosition="left" />
+  ),
+};
+
+export const WithRightIconMedium: Story = {
+  render: () => (
+    <Button
+      buttonType="secondary"
+      text="Secondary"
+      icon="book"
+      size="medium"
+      iconPosition="right"
+    />
+  ),
 };
diff --git a/web/src/beta/components/Button/index.tsx b/web/src/beta/components/Button/index.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, useMemo } from "react";
 
 import Icon from "@reearth/beta/components/Icon";
 import Text from "@reearth/beta/components/Text";
@@ -10,58 +10,57 @@ export type Type = "primary" | "secondary" | "danger";
 export interface Props {
   className?: string;
   children?: ReactNode;
-  large?: boolean;
-  type?: "reset" | "button" | "submit" | undefined;
+  size?: "medium" | "small";
   buttonType?: Type;
   disabled?: boolean;
   text?: string;
   icon?: string;
-  iconRight?: boolean;
+  iconPosition?: "left" | "right";
   margin?: string;
+
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  onMouseEnter?: () => void;
-  onMouseLeave?: () => void;
 }
 
 const Button: React.FC<Props> = ({
   className,
   children,
-  large,
-  type,
-  buttonType,
+  size = "medium",
+  buttonType = "secondary",
   disabled,
   text,
   icon,
-  iconRight,
+  iconPosition = icon ? "left" : undefined,
   margin,
   onClick,
-  onMouseEnter,
-  onMouseLeave,
 }) => {
-  const hasText = !!text || !!children;
-  const iSize = large ? "16px" : "12px";
+  const hasText = useMemo(() => {
+    return !!text || !!children;
+  }, [children, text]);
+
+  const iSize = useMemo(() => {
+    return size === "medium" ? "16px" : "12px";
+  }, [size]);
 
-  const WrappedIcon = icon ? (
-    <IconWrapper text={hasText} iconRight={iconRight} large={large}>
-      <Icon icon={icon} size={iSize} notransition />
-    </IconWrapper>
-  ) : null;
+  const WrappedIcon = useMemo(() => {
+    return icon ? (
+      <IconWrapper text={hasText} iconPosition={iconPosition} size={size}>
+        <Icon icon={icon} size={iSize} notransition />
+      </IconWrapper>
+    ) : null;
+  }, [hasText, iSize, icon, iconPosition, size]);
 
   return (
     <StyledButton
       className={className}
-      large={large}
-      type={type}
+      size={size}
       buttonType={buttonType}
       text={hasText}
       disabled={disabled}
       margin={margin}
-      onClick={onClick}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}>
-      {!iconRight && WrappedIcon}
-      {large ? (
-        <Text size="h5" weight="bold" customColor>
+      onClick={onClick}>
+      {iconPosition === "left" && WrappedIcon}
+      {size === "medium" ? (
+        <Text size="body" customColor>
           {text}
         </Text>
       ) : (
@@ -70,71 +69,80 @@ const Button: React.FC<Props> = ({
         </Text>
       )}
       {children}
-      {iconRight && WrappedIcon}
+      {iconPosition === "right" && WrappedIcon}
     </StyledButton>
   );
 };
 
 type ButtonProps = {
-  large?: boolean;
+  size?: Props["size"];
   buttonType?: Type;
   text?: boolean;
   disabled?: boolean;
   margin?: string;
 };
 
 const StyledButton = styled.button<ButtonProps>`
-  border-radius: ${({ large }) => (large ? "8px" : "6px")};
+  border-radius: ${({ size }) => (size === "medium" ? "6px" : "4px")};
   border-style: solid;
   border-width: 1px;
   border-color: ${({ buttonType, disabled, theme }) =>
-    buttonType === "danger"
-      ? disabled
-        ? theme.content.weaker
-        : theme.dangerous.main
-      : buttonType === "secondary"
-      ? disabled
-        ? theme.content.weaker
-        : theme.secondary.main
-      : disabled
-      ? theme.content.weaker
-      : theme.primary.main};
+    disabled
+      ? theme.content.weak
+      : buttonType === "danger"
+      ? theme.dangerous.main
+      : buttonType === "primary"
+      ? theme.primary.main
+      : theme.secondary.main};
   background: inherit;
   color: ${({ buttonType, disabled, theme }) =>
-    buttonType === "danger"
-      ? disabled
-        ? theme.content.weaker
-        : theme.dangerous.main
-      : buttonType === "secondary"
-      ? disabled
-        ? theme.content.weaker
-        : theme.content.main
-      : disabled
-      ? theme.content.weaker
-      : theme.primary.main};
-  padding: ${({ large }) =>
-    large
-      ? `${metricsSizes["s"]}px ${metricsSizes["2xl"]}px`
-      : `${metricsSizes["xs"]}px ${metricsSizes["xl"]}px`};
+    disabled
+      ? theme.content.weak
+      : buttonType === "danger"
+      ? theme.dangerous.main
+      : buttonType === "primary"
+      ? theme.primary.main
+      : theme.secondary.main};
+  &:active,
+  &:hover {
+    background: ${({ buttonType, disabled, theme }) =>
+      disabled
+        ? "inherit"
+        : buttonType === "danger"
+        ? theme.dangerous.main
+        : buttonType === "primary"
+        ? theme.primary.main
+        : theme.secondary.main};
+    color: ${({ disabled, theme }) =>
+      disabled ? theme.content.weak : theme.content.withBackground};
+  }
+  padding: ${({ size }) =>
+    size === "medium"
+      ? `${metricsSizes["s"]}px ${metricsSizes["l"]}px`
+      : `${metricsSizes["xs"]}px ${metricsSizes["s"]}px`};
   margin: ${({ margin }) => margin || `${metricsSizes["m"]}px`};
   user-select: none;
   cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
   justify-content: center;
   align-items: center;
   display: flex;
   align-items: center;
+  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
   transition-property: color, background;
   transition-duration: 0.4s;
 `;
 
-const IconWrapper = styled.span<{ text: boolean; iconRight?: boolean; large?: boolean }>`
+const IconWrapper = styled.span<{
+  text: boolean;
+  iconPosition?: Props["iconPosition"];
+  size?: Props["size"];
+}>`
   display: inline-flex;
   align-items: center;
   user-select: none;
-  margin-left: ${({ text, iconRight, large }) =>
-    text && iconRight ? (large ? "12px" : "8px") : "none"};
-  margin-right: ${({ text, iconRight, large }) =>
-    text && !iconRight ? (large ? "12px" : "8px") : "none"};
+  margin-left: ${({ text, iconPosition, size }) =>
+    text && iconPosition === "right" ? (size === "medium" ? "8px" : "8px") : "none"};
+  margin-right: ${({ text, iconPosition, size }) =>
+    text && iconPosition === "left" ? (size === "medium" ? "8px" : "8px") : "none"};
 `;
-
 export default Button;
diff --git a/web/src/beta/components/Modal/index.stories.tsx b/web/src/beta/components/Modal/index.stories.tsx
@@ -85,8 +85,8 @@ const sidebarTab3: SidebarTab = {
   id: "3",
   label: "Tab3",
   content: TabContent3,
-  tabButton1: <Button text="Ok" large />,
-  tabButton2: <Button text="Cancel" large />,
+  tabButton1: <Button text="Ok" />,
+  tabButton2: <Button text="Cancel" />,
 };
 
 export const Small: Story = {

diff --git a/web/src/beta/features/Modals/WorkspaceCreationModal/index.tsx b/web/src/beta/features/Modals/WorkspaceCreationModal/index.tsx
@@ -53,14 +53,16 @@ const WorkspaceCreationModal: React.FC<Props> = ({ open, onClose, onSubmit }) =>
       onClose={handleClose}
       button1={
         <Button
-          large
+          size="medium"
           buttonType="primary"
           text={t("Create")}
           disabled={!formik.values.name}
           onClick={formik.submitForm}
         />
       }
-      button2={<Button large buttonType="secondary" text={t("Cancel")} onClick={handleClose} />}>
+      button2={
+        <Button size="medium" buttonType="secondary" text={t("Cancel")} onClick={handleClose} />
+      }>
       {formik.isSubmitting && <Loading overlay />}
       <NewProjectForm onSubmit={formik.handleSubmit}>
         <FormInputWrapper>