Fix UI components

package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/codex-storage/codex-marketplace-ui-components"
   },
-  "version": "0.0.41",
+  "version": "0.0.42",
   "type": "module",
   "scripts": {
     "prepack": "npm run build",

src/assets/icons/close.svg

@@ -7,6 +7,6 @@
 >
   <path
     d="M10.0001 8.93955L13.7126 5.22705L14.7731 6.28755L11.0606 10.0001L14.7731 13.7126L13.7126 14.7731L10.0001 11.0606L6.28755 14.7731L5.22705 13.7126L8.93955 10.0001L5.22705 6.28755L6.28755 5.22705L10.0001 8.93955Z"
-    fill="white"
+    fill="currentColor"
   />
 </svg>

src/assets/icons/error-circle.svg

@@ -0,0 +1,9 @@
+<svg
+  data-testid="icon-error"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8 15.5C3.85775 15.5 0.5 12.1423 0.5 8C0.5 3.85775 3.85775 0.5 8 0.5C12.1423 0.5 15.5 3.85775 15.5 8C15.5 12.1423 12.1423 15.5 8 15.5ZM8 6.9395L5.879 4.81775L4.81775 5.879L6.9395 8L4.81775 10.121L5.879 11.1823L8 9.0605L10.121 11.1823L11.1823 10.121L9.0605 8L11.1823 5.879L10.121 4.81775L8 6.9395Z"
+    fill="#FB3748" />
+</svg>

src/assets/icons/success-circle.svg

@@ -0,0 +1,10 @@
+<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10 17.5C5.85775 17.5 2.5 14.1423 2.5 10C2.5 5.85775 5.85775 2.5 10 2.5C14.1423 2.5 17.5 5.85775 17.5 10C17.5 14.1423 14.1423 17.5 10 17.5ZM9.25225 13L14.5548 7.69675L13.4943 6.63625L9.25225 10.879L7.1305 8.75725L6.07 9.81775L9.25225 13Z"
+    fill="#1DAF61" />
+</svg>

src/components/Card/Card.tsx

@@ -1,9 +0,0 @@
-import "./card.css";
-
-type Props = {
-  className?: string;
-};
-
-export function Card({ className = "" }: Props) {
-  return <div className={`card ${className}`}>{}</div>;
-}

src/components/Card/card.css

@@ -1,20 +0,0 @@
-.card {
-  border: 1px solid #96969633;
-  border-radius: 16px;
-  padding: 16px;
-
-  header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-
-    h5 {
-      font-family: Inter;
-      font-size: 16px;
-      font-weight: 500;
-      line-height: 24px;
-      letter-spacing: -0.011em;
-    }
-  }
-}

src/components/Input/Input.tsx

@@ -57,6 +57,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
       onChange,
       mode,
       isInvalid = false,
+      value,
       ...rest
     },
     ref
@@ -101,6 +102,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
               "aria-invalid": invalid || isInvalid,
             })}
             {...rest}
+            {...(value ? { value } : {})}
           />
         </div>
 

src/components/InputGroup/InputGroup.tsx

@@ -72,6 +72,10 @@ type Props = {
   inputRef?: LegacyRef<HTMLInputElement>;
 
   extra?: ReactNode;
+
+  isInvalid?: boolean;
+
+  defaultValue?: string;
 };
 
 export function InputGroup({
@@ -96,9 +100,11 @@ export function InputGroup({
   min,
   max,
   extra,
+  isInvalid,
+  defaultValue,
 }: Props) {
   return (
-    <div className={`inputGroup input-group ${className}`}>
+    <div className={`input-group ${className}`}>
       <div>
         <div>
           <div>
@@ -118,6 +124,8 @@ export function InputGroup({
               onMouseLeave={onMouseLeave}
               onFocus={onFocus}
               onBlur={onBlur}
+              isInvalid={isInvalid}
+              defaultValue={defaultValue}
             />
           </div>
 
@@ -127,12 +135,11 @@ export function InputGroup({
                 label=""
                 id=""
                 onChange={onGroupChange}
-                className="inputGroup-select"
                 value={groupValue}
                 options={group}
               />
             ) : (
-              <div className="inputGroup-unit">{group}</div>
+              <div>{group}</div>
             )}
           </div>
         </div>

src/components/InputGroup/inputGroup.css

@@ -1,4 +1,6 @@
 .input-group {
+  box-sizing: border-box;
+
   > div {
     flex-grow: 1;
 
@@ -14,12 +16,6 @@
           border-bottom-right-radius: 0;
           border-right: none;
         }
-
-        select {
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-          min-width: 110px;
-        }
       }
 
       > div:nth-child(2) {
@@ -28,8 +24,17 @@
         border: 1px solid var(--codex-border-color);
         border-top-right-radius: var(--codex-border-radius);
         border-bottom-right-radius: var(--codex-border-radius);
-        background-color: var(--codex-border-color);
-        padding: calc(0.5rem + 0.5px);
+        height: 64px;
+        box-sizing: border-box;
+
+        select {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+          min-width: 110px;
+          border-color: transparent;
+          background-color: transparent;
+          box-shadow: none;
+        }
       }
     }
   }

src/components/Toast/Toast.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useRef, useState } from "react";
 import { attributes } from "../utils/attributes";
 import "./toast.css";
-import { CircleCheck, CircleX, Info, X } from "lucide-react";
-import { ButtonIcon } from "../ButtonIcon/ButtonIcon";
+import SuccessCircleIcon from "../../assets/icons/success-circle.svg?react";
+import ErrorCircleIcon from "../../assets/icons/error-circle.svg?react";
+import CloseIcon from "../../assets/icons/close.svg?react";
 
 type Props = {
   message: string;
@@ -23,7 +24,7 @@ type Props = {
 
   className?: string;
 
-  variant: "success" | "error" | "default";
+  variant: "success" | "error";
 };
 
 export function Toast({
@@ -57,9 +58,8 @@ export function Toast({
   };
 
   const icons = {
-    success: CircleCheck,
-    error: CircleX,
-    default: Info,
+    success: SuccessCircleIcon,
+    error: ErrorCircleIcon,
   };
   const Icon = icons[variant];
 
@@ -68,19 +68,14 @@ export function Toast({
       className={`toast ${className} toast--${variant}`}
       {...attributes({ "aria-hidden": time == 0 || msg === "" })}
     >
-      <Icon size="1.25rem" />
+      <Icon width={24} />
 
-      <span>
+      <div>
         <b>{variant} ! </b>
         <span>{msg}</span>
-      </span>
+      </div>
 
-      <ButtonIcon
-        onClick={onClose}
-        variant="small"
-        className="toast-close"
-        Icon={() => <X size="1.25rem" />}
-      ></ButtonIcon>
+      <CloseIcon width={24} onClick={onClose} />
     </div>
   );
 }

src/components/Toast/toast.css

@@ -1,38 +1,41 @@
 .toast {
   position: fixed;
-  bottom: 1rem;
-  right: 1rem;
   background: var(--codex-toast-background, var(--codex-background-light));
   min-width: 150px;
-  transform: translateX(0px);
-  transition: transform 0.35s;
+  transition: top 0.35s;
+  top: 50px;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 8px;
   border: 1px solid var(--codex-toast-border-color, var(--codex-border-color));
-  border-radius: var(--codex-border-radius);
-  padding: 0.75rem;
-  padding-left: 1.5rem;
-  color: var(--codex-toast-color, --codex-color);
+  border-radius: 6px;
+  padding: 16px;
+  color: white;
   word-break: break-word;
   border: 1px solid rgb(var(--codex-toast-color));
-  background: rgba(var(--codex-toast-color), 1);
+  background: var(--codex-toast-color);
   z-index: 20;
+  backdrop-filter: blur(32px);
+  left: 0;
+  right: 0;
+  max-width: 450px;
+  margin: auto;
 
   &[aria-hidden] {
-    transform: translateX(1000px);
+    top: -1000px;
   }
 
   &.toast--success {
-    --codex-toast-color: var(--codex-color-success);
+    --codex-toast-color: #6fcb9433;
+    border-bottom: 2px solid #6fcb94;
+
+    svg {
+      color: #6fcb94;
+    }
   }
 
   &.toast--error {
-    --codex-toast-color: var(--codex-color-error);
-  }
-
-  &.toast--default {
-    --codex-toast-color: var(--codex-color-grey);
+    --codex-toast-color: rgba(var(--codex-color-error));
   }
 
   .button {
@@ -41,10 +44,29 @@
 
   b {
     text-transform: capitalize;
+    display: block;
+    font-family: Inter;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+  }
+
+  div {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  span {
+    font-family: Inter;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+    text-align: left;
+    color: #ffffffcc;
   }
 
   svg {
-    fill: rgba(var(--codex-toast-color), 0.2);
-    stroke: white;
+    cursor: pointer;
   }
 }

src/index.ts

@@ -3,7 +3,6 @@ export { ButtonIcon } from "./components/ButtonIcon/ButtonIcon";
 export { Input } from "./components/Input/Input";
 export { InputGroup } from "./components/InputGroup/InputGroup";
 export * from "./components/Upload/Upload";
-export { Card } from "./components/Card/Card";
 export { Select } from "./components/Select/Select";
 export { Toast } from "./components/Toast/Toast";
 export { SpaceAllocation, type SpaceAllocationItem } from "./components/SpaceAllocation/SpaceAllocation";

stories/Card.stories.ts

@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Card } from "../src/components/Card/Card";
-import React from "react";
-
-const meta = {
-  title: "Components/Card",
-  component: Card,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {},
-} satisfies Meta<typeof Card>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    title: "Hello",
-    children: React.createElement("div", {}, "Hello World !"),
-  },
-};
-
-export const CustomStyle: Story = {
-  args: {
-    title: "Hello",
-    children: React.createElement("div", {}, "Hello World !"),
-  },
-};

stories/Toast.stories.tsx

@@ -50,22 +50,3 @@ const ErrorTemplate = () => {
 };
 
 export const Error = ErrorTemplate.bind({});
-
-const DefaultTemplate = () => {
-  const [time, setTime] = useState(0);
-
-  const onClick = () => setTime(Date.now());
-
-  return (
-    <div style={{ padding: "2rem" }}>
-      <button onClick={onClick}>Make Toast</button>
-      <Toast
-        variant="default"
-        message="Toast displayed with default"
-        time={time}
-      />
-    </div>
-  );
-};
-
-export const Default = DefaultTemplate.bind({});