refactor: move components to bleu/cow-hooks-ui

bleu · Sep 23, 2024 · 4e4b853 · 4e4b853
1 parent d3f11cd
commit 4e4b853
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 99 deletions.
diff --git a/apps/claim-vesting/src/app/ClaimVestingApp.tsx b/apps/claim-vesting/src/app/ClaimVestingApp.tsx
@@ -1,14 +1,13 @@
 import { useTheme } from "./ThemeContext";
 
+import { ClaimableAmountContainer, Row } from "../components";
+
 import {
-  ClaimableAmountContainer,
-  ContentWrapper,
-  LabelContainer,
-  Row,
   Wrapper,
+  ContentWrapper,
+  AddressInput,
   ButtonPrimary,
-  Input,
-} from "../components";
+} from "@bleu/cow-hooks-ui";
 
 export function ClaimVestingApp() {
   const { theme, toggleTheme } = useTheme();
@@ -19,10 +18,7 @@ export function ClaimVestingApp() {
         Switch to {theme === "light" ? "Dark" : "Light"} Theme
       </button>
       <ContentWrapper>
-        <Row>
-          <LabelContainer label="Place vesting contract address" />
-          <Input theme={theme} placeholder="0xabc..." />
-        </Row>
+        <AddressInput theme={theme} label="Place vesting contract address" />
         <Row>
           <ClaimableAmountContainer>
             <span>Total Available to claim</span>

diff --git a/apps/claim-vesting/src/app/layout.tsx b/apps/claim-vesting/src/app/layout.tsx
@@ -7,7 +7,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <head>
         <link rel="manifest" href="/manifest.json" />
       </head>
-      <body className={"flex flex-col font-sans font-normal"}>{children}</body>
+      <body className={"flex flex-col h-full font-sans font-normal"}>
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/apps/claim-vesting/src/components.tsx b/apps/claim-vesting/src/components.tsx
@@ -1,13 +1,5 @@
 import React from "react";
 import type { ReactNode } from "react";
-import clsx from "clsx";
-
-// import ICON_CHECKMARK from "@cowprotocol/assets/cow-swap/checkmark.svg";
-// import ICON_ARROW_DOWN from "@cowprotocol/assets/images/carret-down.svg";
-// import { UI } from "@cowprotocol/ui";
-
-// import SVG from "react-inlinesvg";
-// import styled from "styled-components/macro";
 
 export const ClaimableAmountContainer = ({
   children,
@@ -23,83 +15,8 @@ export const ClaimableAmountContainer = ({
   </div>
 );
 
-export const ContentWrapper = ({
-  children,
-  ...props
-}: {
-  children?: ReactNode;
-}) => (
-  <div
-    className="flex flex-col flex-grow pt-2 items-center justify-center text-center"
-    {...props}
-  >
-    {children}
-  </div>
-);
-
-export const Input = ({ theme, ...props }: { theme: string }) => (
-  <input
-    className={clsx(
-      "w-full mt-0 p-2.5 rounded-xl outline-none text-color-text-paper border-2 border-color-border focus:border-primary",
-      { "bg-color-paper-darker": theme === "dark" },
-      { "bg-color-paper": theme === "light" }
-    )}
-    {...props}
-  />
-);
-
-export const Link = ({ children, ...props }: { children?: ReactNode }) => (
-  <button
-    className="border-none p-0 underline cursor-pointer bg-transparent text-color-white my-2.5"
-    {...props}
-  >
-    {children}
-  </button>
-);
-
 export const Row = ({ children, ...props }: { children?: ReactNode }) => (
   <div className="flex flex-col w-full" {...props}>
     {children}
   </div>
 );
-
-export const Wrapper = ({ children, ...props }: { children?: ReactNode }) => (
-  <div className="flex flex-col flex-wrap w-full flex-grow" {...props}>
-    {children}
-  </div>
-);
-
-export const LabelContainer = ({ label, ...props }: { label: string }) => (
-  <div className="w-fit my-2.5" {...props}>
-    <label className="text-sm">{label}</label>
-  </div>
-);
-
-export const ButtonPrimary = ({
-  children,
-  disabled = false,
-  ...props
-}: {
-  children?: ReactNode;
-  disabled?: boolean;
-}) => (
-  <button
-    className={`
-      bg-color-primary text-color-button-text text-lg font-semibold border-none shadow-none rounded-2xl
-      relative min-h-[58px] transition-colors duration-200 ease-in-out mt-2 flex flex-row flex-wrap items-center justify-center
-       focus:shadow-none focus:transform-none focus:bg-color-primary-lighter
-       hover:shadow-none hover:transform-none hover:bg-color-primary-lighter
-       active:shadow-none active:transform-none active:bg-color-primary-lighter
-      disabled:border-transparent disabled:outline-none disabled:cursor-auto disabled:shadow-none
-      ${
-        disabled
-          ? "disabled:bg-color-bg2 disabled:text-color-white disabled:opacity-70"
-          : "disabled:bg-color-background disabled:text-color-info disabled:opacity-100"
-      }
-    `}
-    disabled={disabled}
-    {...props}
-  >
-    {children}
-  </button>
-);
diff --git a/packages/cow-hooks-ui/src/AddressInput.tsx b/packages/cow-hooks-ui/src/AddressInput.tsx
@@ -0,0 +1,30 @@
+import clsx from "clsx";
+
+const Label = ({ label }: { label: string }) => (
+  <div className="w-fit ml-2 my-2.5">
+    <label className="text-sm">{label}</label>
+  </div>
+);
+
+export const AddressInput = ({
+  theme,
+  label,
+  ...props
+}: {
+  theme: string;
+  label: string;
+}) => (
+  <div className="flex flex-col w-full">
+    <Label label={label} />
+    <input
+      type="text"
+      placeholder="0xabc..."
+      className={clsx(
+        "w-full mt-0 p-2.5 rounded-xl outline-none text-color-text-paper border-2 border-color-border focus:border-primary",
+        { "bg-color-paper-darker": theme === "dark" },
+        { "bg-color-paper": theme === "light" }
+      )}
+      {...props}
+    />
+  </div>
+);
diff --git a/packages/cow-hooks-ui/src/ButtonPrimary.tsx b/packages/cow-hooks-ui/src/ButtonPrimary.tsx
@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+
+export const ButtonPrimary = ({
+  children,
+  disabled = false,
+  ...props
+}: {
+  children?: ReactNode;
+  disabled?: boolean;
+}) => (
+  <button
+    className={`
+      bg-color-primary text-color-button-text text-lg font-semibold border-none shadow-none rounded-2xl
+      relative min-h-[58px] transition-colors duration-200 ease-in-out mt-2 mb-2 flex flex-row flex-wrap items-center justify-center
+       focus:shadow-none focus:transform-none focus:bg-color-primary-lighter
+       hover:shadow-none hover:transform-none hover:bg-color-primary-lighter
+       active:shadow-none active:transform-none active:bg-color-primary-lighter
+      disabled:border-transparent disabled:outline-none disabled:cursor-auto disabled:shadow-none
+      ${
+        disabled
+          ? "disabled:bg-color-bg2 disabled:text-color-white disabled:opacity-70"
+          : "disabled:bg-color-background disabled:text-color-info disabled:opacity-100"
+      }
+    `}
+    disabled={disabled}
+    {...props}
+  >
+    {children}
+  </button>
+);
diff --git a/packages/cow-hooks-ui/src/Joana.tsx b/packages/cow-hooks-ui/src/Joana.tsx
diff --git a/packages/cow-hooks-ui/src/Wrapper.tsx b/packages/cow-hooks-ui/src/Wrapper.tsx
@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+
+export const ContentWrapper = ({
+  children,
+  ...props
+}: {
+  children?: ReactNode;
+}) => (
+  <div
+    className="flex flex-col flex-grow pt-2 items-center justify-center text-center"
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export const Wrapper = ({ children, ...props }: { children?: ReactNode }) => (
+  <div className="flex flex-col flex-wrap w-full flex-grow" {...props}>
+    {children}
+  </div>
+);
diff --git a/packages/cow-hooks-ui/src/index.tsx b/packages/cow-hooks-ui/src/index.tsx
@@ -1,3 +1,7 @@
-import { default as Joana } from "./Joana";
+import { Wrapper, ContentWrapper } from "./Wrapper";
+import { AddressInput } from "./AddressInput";
+import { ButtonPrimary } from "./ButtonPrimary";
 
-export { Joana };
+export { Wrapper, ContentWrapper };
+export { AddressInput };
+export { ButtonPrimary };