codex-storage
/
codex-marketplace-ui-components
mirror of https://github.com/codex-storage/codex-marketplace-ui-components.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Design changes

This commit is contained in:
Arnaud 2024-11-04 12:34:42 +01:00
parent d06e0f95f2
commit 5cf3f82e06
No known key found for this signature in database
GPG Key ID: 69D6CE281FCAE663
14 changed files with 145 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@ -1,19 +1,19 @@
{
"name": "@codex-storage/marketplace-ui-components",
"version": "0.0.31",
"version": "0.0.32",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@codex-storage/marketplace-ui-components",
"version": "0.0.31",
"version": "0.0.32",
"license": "MIT",
"dependencies": {
"lucide-react": "^0.453.0"
},
"devDependencies": {
"@chromatic-com/storybook": "^2.0.2",
"@codex-storage/sdk-js": "^0.0.14",
"@codex-storage/sdk-js": "^0.0.15",
"@storybook/addon-essentials": "^8.2.9",
"@storybook/addon-interactions": "^8.2.9",
"@storybook/addon-links": "^8.2.9",
@ -619,9 +619,9 @@
}
},
"node_modules/@codex-storage/sdk-js": {
"version": "0.0.14",
"resolved": "https://registry.npmjs.org/@codex-storage/sdk-js/-/sdk-js-0.0.14.tgz",
"integrity": "sha512-zZcbFKQxxL3dlxjm77jKzOobYB8Z/oUozG5VVU4+hrAO2qlnERq9wQO2QgfnNB1LxaZeoN+Rb8kZrKc7Y1Jvmw==",
"version": "0.0.15",
"resolved": "https://registry.npmjs.org/@codex-storage/sdk-js/-/sdk-js-0.0.15.tgz",
"integrity": "sha512-asL59uhHNI2zPLEcygh6HnZEdQJebSjU2JXut6xZxAI87VVkWfN9Y1BxlyxgsF+wJF10DB0tnv3cPEI3wb2huQ==",
"dev": true,
"dependencies": {
"valibot": "^0.32.0"

4
package.json
View File

@ -5,7 +5,7 @@
"type": "git",
"url": "https://github.com/codex-storage/codex-marketplace-ui-components"
},
"version": "0.0.31",
"version": "0.0.32",
"type": "module",
"scripts": {
"prepack": "npm run build",
@ -41,7 +41,7 @@
"postcss-nesting": "^13.0.1"
},
"devDependencies": {
"@codex-storage/sdk-js": "^0.0.14",
"@codex-storage/sdk-js": "^0.0.15",
"@chromatic-com/storybook": "^2.0.2",
"@storybook/addon-essentials": "^8.2.9",
"@storybook/addon-interactions": "^8.2.9",

5
src/components/Button/Button.tsx
View File

@ -37,6 +37,8 @@ type Props = {
* Apply custom classname.
*/
className?: string;
size?: "medium" | "small";
};
export function Button({
@ -45,6 +47,7 @@ export function Button({
Icon,
onMouseEnter,
onMouseLeave,
size = "medium",
fetching = false,
disabled = false,
variant = "primary",
@ -55,7 +58,7 @@ export function Button({
onClick={onClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
className={`button ${className} button--${variant}`}
className={`button ${className} button--${variant} button--${size}`}
{...attributes({
disabled: disabled || fetching,
"aria-disabled": disabled || fetching,

25
src/components/Button/button.css
View File

@ -1,17 +1,29 @@
.button {
border-radius: var(--codex-border-radius);
&.button--medium {
--codex-button-padding: 9px 10px;
}
&.button--small {
--codex-button-padding: 6px 10px;
}
border-radius: 8px;
outline: none;
padding: 0.75rem 1.5rem;
padding: var(--codex-button-padding);
display: flex;
place-items: center;
gap: 0.75rem;
gap: 2px;
font-weight: 500;
position: relative;
border: none;
transition:
box-shadow 0.35s,
opacity 0.35s;
font-family: var(--codex-font-family);
font-family: Inter;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: -0.006em;
border: 1px solid transparent;
place-content: center;
@ -77,9 +89,8 @@
&.button--outline {
color: var(--codex-color-outline, var(--codex-color-contrast));
border-color: var(--codex-border-color);
border-width: 1px;
border-style: solid;
background-color: transparent;
background-color: #2f2f2f;
color: #969696;
}
span {

14
src/components/Card/Card.tsx
View File

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

25
src/components/Card/card.css
View File

@ -1,17 +1,20 @@
.card {
border-radius: var(--codex-border-radius);
border: 1px solid var(--codex-border-color);
font-family: var(--codex-font-family);
background-color: var(--codex-background-secondary);
border: 1px solid #96969633;
border-radius: 16px;
padding: 16px;
header {
border-bottom: 1px solid var(--codex-border-color);
padding: 1rem 1.5rem;
font-size: 1.15rem;
font-weight: bold;
}
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
div {
padding: 1.5rem;
h5 {
font-family: Inter;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: -0.011em;
}
}
}

4
src/components/Input/Input.tsx
View File

@ -38,6 +38,8 @@ type Props = {
inputClassName?: string;
inputContainerClassName?: string;
size?: "big" | "medium";
} & InputHTMLAttributes<HTMLInputElement>;
export const Input = forwardRef<HTMLInputElement, Props>(
@ -49,6 +51,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
style,
Icon,
inputClassName,
size = "big",
inputContainerClassName = "",
disabled = false,
onChange,
@ -74,6 +77,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
["input"],
["input--invalid", invalid || isInvalid],
["input--icon", !!Icon],
["input--" + size],
[inputClassName || ""]
)}
>

23
src/components/Input/input.css
View File

@ -1,4 +1,12 @@
.input {
&.input--big {
--codex-input-height: 64px;
}
&.input--medium {
--codex-input-height: 40px;
}
input {
background-color: var(--codex-input-background);
color: white;
@ -10,8 +18,21 @@
box-sizing: border-box;
font-weight: 500;
font-size: 20px;
height: 64px;
height: var(--codex-input-height);
position: relative;
font-family: Inter;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: -0.006em;
&::placeholder {
font-family: Inter;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: -0.006em;
}
}
&.input--invalid input {

5
src/components/SpaceAllocation/SpaceAllocation.tsx
View File

@ -1,4 +1,3 @@
import { PrettyBytes } from "../utils/bytes";
import "./spaceAllocation.css";
export type SpaceAllocationItem = {
@ -38,13 +37,13 @@ export function SpaceAllocation({ data }: Props) {
))}
</header>
<ul className="nodeSpaceAllocation-legend">
<ul>
{data.map((d) => (
<li key={d.title}>
<span style={{ backgroundColor: d.color }}></span>
<p>
<span>{d.title}</span>
<small> {PrettyBytes(d.size)}</small>
{/* <small> {PrettyBytes(d.size)}</small> */}
</p>
</li>
))}

28
src/components/SpaceAllocation/spaceAllocation.css
View File

@ -1,20 +1,25 @@
.space-allocation {
header {
height: 10px;
height: 26px;
display: flex;
gap: 0.75rem;
margin-bottom: 0.5rem;
gap: 5px;
margin-bottom: 16px;
span {
display: inline-block;
height: 100%;
border-radius: var(--codex-border-radius);
border-radius: 4px;
height: 26px;
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 16px;
}
}
ul {
display: flex;
gap: 0.75rem;
gap: 16px;
flex-wrap: wrap;
padding-left: 0;
@ -22,15 +27,16 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
gap: 4px;
> span {
width: 1rem;
height: 1rem;
border-radius: var(--codex-border-radius);
width: 9px;
height: 9px;
border-radius: 50%;
border: 2px solid #0e121b;
}
p {
/* p {
display: flex;
flex-direction: column;
line-height: 1rem;
@ -40,7 +46,7 @@
small {
color: var(--codex-input-label-color);
}
}
} */
}
}
}

18
src/components/Upload/Upload.tsx
View File

@ -1,12 +1,11 @@
import { FileStack, Upload as UploadIcon } from "lucide-react";
import { ChangeEvent, DragEventHandler, useRef } from "react";
import { attributes } from "../utils/attributes.ts";
import "./upload.css";
import { UploadFile } from "./UploadFile.tsx";
import { useUploadStategy } from "./useUploadStrategy.ts";
import { classnames } from "../utils/classnames.ts";
import { ButtonIcon } from "../ButtonIcon/ButtonIcon.tsx";
import { CodexData } from "@codex-storage/sdk-js";
import { UploadIcon } from "./UploadIcon.tsx";
type Props = {
/**
@ -118,7 +117,7 @@ export function Upload({
return (
<>
<div
className={classnames(["upload"], ["upload-warning", !!warning])}
className={classnames(["upload"], ["upload--warning", !!warning])}
tabIndex={1}
onClick={onInternalClick}
onDragOver={onDragPrevents}
@ -127,16 +126,19 @@ export function Upload({
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
<ButtonIcon Icon={multiple ? FileStack : UploadIcon}></ButtonIcon>
<p>
<div>
<b>
Drop your {multiple ? "file(s)" : "file"} here or{" "}
<span>browse</span>
</b>
</p>
<small> {multiple ? "Up to 10 files" : "Choose one single file"}</small>
<small>
{" "}
{multiple ? "Up to 10 files" : "Choose one single file"}
</small>
</div>
<UploadIcon></UploadIcon>
<input
data-testid="upload"

20
src/components/Upload/UploadIcon.tsx Normal file
View File

@ -0,0 +1,20 @@
type Props = {
width?: number;
fill?: string;
};
export function UploadIcon({ width = 30, fill = "#96969666" }: Props) {
return (
<svg
width={width}
viewBox="0 0 30 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.621 3.5H28.5C28.8978 3.5 29.2794 3.65804 29.5607 3.93934C29.842 4.22064 30 4.60218 30 5V26C30 26.3978 29.842 26.7794 29.5607 27.0607C29.2794 27.342 28.8978 27.5 28.5 27.5H1.5C1.10218 27.5 0.720644 27.342 0.43934 27.0607C0.158035 26.7794 0 26.3978 0 26V2C0 1.60218 0.158035 1.22064 0.43934 0.93934C0.720644 0.658035 1.10218 0.5 1.5 0.5H12.621L15.621 3.5ZM3 3.5V24.5H27V6.5H14.379L11.379 3.5H3ZM16.5 15.5V21.5H13.5V15.5H9L15 9.5L21 15.5H16.5Z"
fill={fill}
/>
</svg>
);
}

30
src/components/Upload/upload.css
View File

@ -6,26 +6,40 @@
);
min-height: 150px;
border-radius: var(--codex-border-radius);
justify-content: center;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
cursor: pointer;
padding: 0.5rem 2rem;
display: flex;
align-items: center;
p {
margin-bottom: 0;
margin-top: 12px;
line-height: 4px;
b {
font-family: Inter;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: -0.011em;
display: block;
span {
color: var(--codex-color-primary);
border-bottom: 1px solid var(--codex-color-primary);
font-family: Inter;
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: -0.011em;
}
}
small {
color: var(--codex-input-label-color);
font-family: Inter;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: -0.006em;
text-align: left;
color: #969696;
}
input + span {

3
src/index.ts
View File

@ -2,7 +2,8 @@ export { Button } from "./components/Button/Button";
export { ButtonIcon } from "./components/ButtonIcon/ButtonIcon";
export { Input } from "./components/Input/Input";
export { InputGroup } from "./components/InputGroup/InputGroup";
export { Upload } from "./components/Upload/Upload";
export * from "./components/Upload/Upload";
export { UploadIcon } from "./components/Upload/UploadIcon";
export { Card } from "./components/Card/Card";
export { Select } from "./components/Select/Select";
export { Toast } from "./components/Toast/Toast";