logos-storage/logos-storage-marketplace-ui-components
1
0
Fork 0
mirror of https://github.com/logos-storage/logos-storage-marketplace-ui-components.git synced 2026-05-03 08:23:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update icons

Browse Source
This commit is contained in:
Arnaud 2024-11-22 09:14:25 +01:00
parent e0699c4cfe
commit bc4014396f
No known key found for this signature in database
GPG Key ID: 69D6CE281FCAE663
10 changed files with 72 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.storybook/main.ts
View File

@ -6,8 +6,6 @@ const config: StorybookConfig = {
"../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
],
addons: [
"@storybook/addon-onboarding",
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
],

103
package-lock.json generated
View File

@ -1,22 +1,17 @@
{
"name": "@codex-storage/marketplace-ui-components",
"version": "0.0.45",
"version": "0.0.46",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@codex-storage/marketplace-ui-components",
"version": "0.0.45",
"version": "0.0.46",
"license": "MIT",
"dependencies": {
"lucide-react": "^0.453.0"
},
"devDependencies": {
"@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",
"@storybook/addon-onboarding": "^8.2.9",
"@storybook/blocks": "^8.2.9",
"@storybook/react": "^8.2.9",
"@storybook/react-vite": "^8.2.9",
@ -29,6 +24,7 @@
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
"glob": "^9.3.5",
"postcss-nesting": "^13.0.1",
"prettier": "^3.3.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
@ -43,7 +39,6 @@
},
"peerDependencies": {
"@codex-storage/sdk-js": ">=0.0.14",
"postcss-nesting": "^13.0.1",
"react": "^18.3.1",
"react-dom": "^18.3.1"
}
@ -496,6 +491,7 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-3.0.0.tgz",
"integrity": "sha512-ZoK24Yku6VJU1gS79a5PFmC8yn3wIapiKmPgun0hZgEI5AOqgH2kiPRsPz1qkGv4HL+wuDLH83yQyk6inMYrJQ==",
"dev": true,
"funding": [
{
"type": "github",
@ -506,7 +502,6 @@
"url": "https://opencollective.com/csstools"
}
],
"peer": true,
"engines": {
"node": ">=18"
},
@ -518,6 +513,7 @@
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-5.0.0.tgz",
"integrity": "sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==",
"dev": true,
"funding": [
{
"type": "github",
@ -528,7 +524,6 @@
"url": "https://opencollective.com/csstools"
}
],
"peer": true,
"engines": {
"node": ">=18"
},
@ -1993,30 +1988,6 @@
"storybook": "^8.4.4"
}
},
"node_modules/@storybook/addon-links": {
"version": "8.4.4",
"resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.4.4.tgz",
"integrity": "sha512-hqTv06fPq9k5GUZD8JR49ANw5sBg8EYAsuCNoSd9OwVSBO/3y53HrMA0NCILUK8hnupPvtBuKXXoHmHes9R+1g==",
"dev": true,
"dependencies": {
"@storybook/csf": "^0.1.11",
"@storybook/global": "^5.0.0",
"ts-dedent": "^2.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
"storybook": "^8.4.4"
},
"peerDependenciesMeta": {
"react": {
"optional": true
}
}
},
"node_modules/@storybook/addon-measure": {
"version": "8.4.4",
"resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.4.4.tgz",
@ -2034,22 +2005,6 @@
"storybook": "^8.4.4"
}
},
"node_modules/@storybook/addon-onboarding": {
"version": "8.4.4",
"resolved": "https://registry.npmjs.org/@storybook/addon-onboarding/-/addon-onboarding-8.4.4.tgz",
"integrity": "sha512-LCCQez5xzFQ6wunXnpNjgiuqh8SYPd2AgrRPDKo5Yf1QyXnT4xSFjZr/4QFyzPsOBnpsq8MlNPS4l063Y+Qkgg==",
"dev": true,
"dependencies": {
"react-confetti": "^6.1.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"storybook": "^8.4.4"
}
},
"node_modules/@storybook/addon-outline": {
"version": "8.4.4",
"resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.4.4.tgz",
@ -3743,7 +3698,7 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
"peer": true,
"dev": true,
"bin": {
"cssesc": "bin/cssesc"
},
@ -4928,7 +4883,8 @@
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"dev": true
},
"node_modules/js-yaml": {
"version": "4.1.0",
@ -5080,6 +5036,7 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"dev": true,
"dependencies": {
"js-tokens": "^3.0.0 || ^4.0.0"
},
@ -5111,14 +5068,6 @@
"yallist": "^3.0.2"
}
},
"node_modules/lucide-react": {
"version": "0.453.0",
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.453.0.tgz",
"integrity": "sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==",
"peerDependencies": {
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
}
},
"node_modules/lz-string": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@ -5262,6 +5211,7 @@
"version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
"dev": true,
"funding": [
{
"type": "github",
@ -5510,7 +5460,8 @@
"node_modules/picocolors": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
"dev": true
},
"node_modules/picomatch": {
"version": "4.0.2",
@ -5560,6 +5511,7 @@
"version": "8.4.49",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
"integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
"dev": true,
"funding": [
{
"type": "opencollective",
@ -5588,6 +5540,7 @@
"version": "13.0.1",
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-13.0.1.tgz",
"integrity": "sha512-VbqqHkOBOt4Uu3G8Dm8n6lU5+9cJFxiuty9+4rcoyRPO9zZS1JIs6td49VIoix3qYqELHlJIn46Oih9SAKo+yQ==",
"dev": true,
"funding": [
{
"type": "github",
@ -5598,7 +5551,6 @@
"url": "https://opencollective.com/csstools"
}
],
"peer": true,
"dependencies": {
"@csstools/selector-resolve-nested": "^3.0.0",
"@csstools/selector-specificity": "^5.0.0",
@ -5615,7 +5567,7 @@
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz",
"integrity": "sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==",
"peer": true,
"dev": true,
"dependencies": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
@ -5716,6 +5668,7 @@
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
"dev": true,
"dependencies": {
"loose-envify": "^1.1.0"
},
@ -5723,21 +5676,6 @@
"node": ">=0.10.0"
}
},
"node_modules/react-confetti": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.1.0.tgz",
"integrity": "sha512-7Ypx4vz0+g8ECVxr88W9zhcQpbeujJAVqL14ZnXJ3I23mOI9/oBVTQ3dkJhUmB0D6XOtCZEM6N0Gm9PMngkORw==",
"dev": true,
"dependencies": {
"tween-functions": "^1.2.0"
},
"engines": {
"node": ">=10.18"
},
"peerDependencies": {
"react": "^16.3.0 || ^17.0.1 || ^18.0.0"
}
},
"node_modules/react-docgen": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-7.1.0.tgz",
@ -6087,6 +6025,7 @@
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@ -6306,12 +6245,6 @@
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"dev": true
},
"node_modules/tween-functions": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
"integrity": "sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==",
"dev": true
},
"node_modules/type-check": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@ -6430,7 +6363,7 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
"peer": true
"dev": true
},
"node_modules/uuid": {
"version": "9.0.1",

12
package.json
View File

@ -5,7 +5,7 @@
"type": "git",
"url": "https://github.com/codex-storage/codex-marketplace-ui-components"
},
"version": "0.0.45",
"version": "0.0.46",
"type": "module",
"scripts": {
"prepack": "npm run build",
@ -31,23 +31,19 @@
"UI",
"React"
],
"dependencies": {
"lucide-react": "^0.453.0"
},
"dependencies": {},
"peerDependencies": {
"@codex-storage/sdk-js": ">=0.0.14",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"postcss-nesting": "^13.0.1"
"react-dom": "^18.3.1"
},
"devDependencies": {
"postcss-nesting": "^13.0.1",
"vite-plugin-svgr": "^4.3.0",
"@svgr/plugin-svgo": "^8.1.0",
"@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",
"@storybook/addon-onboarding": "^8.2.9",
"@storybook/blocks": "^8.2.9",
"@storybook/react": "^8.2.9",
"@storybook/react-vite": "^8.2.9",

12
src/assets/icons/info-circle.svg Normal file
View File

@ -0,0 +1,12 @@
<svg
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 17.5C5.85775 17.5 2.5 14.1422 2.5 10C2.5 5.85775 5.85775 2.5 10 2.5C14.1422 2.5 17.5 5.85775 17.5 10C17.5 14.1422 14.1422 17.5 10 17.5ZM9.25 9.25V13.75H10.75V9.25H9.25ZM9.25 6.25V7.75H10.75V6.25H9.25Z"
fill="currentColor"
fill-opacity="0.5"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 373 B

13
src/assets/icons/info.svg Normal file
View File

@ -0,0 +1,13 @@
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="fillColor"
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.25 9.25V13.75H10.75V9.25H9.25ZM9.25 6.25V7.75H10.75V6.25H9.25Z"
fill="fillColor"
fill-opacity="0.5"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 389 B

12
src/assets/icons/stop.svg Normal file
View File

@ -0,0 +1,12 @@
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 21C7.0293 21 3 16.9707 3 12C3 7.0293 7.0293 3 12 3C16.9707 3 21 7.0293 21 12C21 16.9707 16.9707 21 12 21ZM12 19.2C13.9096 19.2 15.7409 18.4414 17.0912 17.0912C18.4414 15.7409 19.2 13.9096 19.2 12C19.2 10.0904 18.4414 8.25909 17.0912 6.90883C15.7409 5.55857 13.9096 4.8 12 4.8C10.0904 4.8 8.25909 5.55857 6.90883 6.90883C5.55857 8.25909 4.8 10.0904 4.8 12C4.8 13.9096 5.55857 15.7409 6.90883 17.0912C8.25909 18.4414 10.0904 19.2 12 19.2ZM9.3 9.3H14.7V14.7H9.3V9.3Z"
fill="fillColor"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 624 B

3
src/components/Alert/Alert.tsx
View File

@ -1,5 +1,6 @@
import "./alert.css";
import { ReactNode } from "react";
import InfoCircleIcon from "../../assets/icons/info-circle.svg?react";
type Props = {
variant: "success" | "warning" | "toast";
@ -36,6 +37,8 @@ export function Alert({
<b>{title}</b>
<div>{children}</div>
</div>
<InfoCircleIcon></InfoCircleIcon>
</div>
);
}

7
src/components/Alert/alert.css
View File

@ -5,7 +5,6 @@
border-radius: var(--codex-border-radius);
padding: 0.75rem 1.5rem;
font-family: var(--codex-font-family);
color: var(--codex-color);
word-break: break-word;
display: flex;
gap: 1rem;
@ -26,9 +25,15 @@
span {
display: flex;
color: rgb(var(--codex-alert-color));
fill: rgb(var(--codex-alert-color));
}
}
svg {
color: rgba(var(--codex-alert-color));
min-width: 20px;
}
&.alert--success {
--codex-alert-color: var(--codex-color-success);
}

6
src/components/Upload/UploadFile.tsx
View File

@ -2,7 +2,6 @@ import { useRef, useReducer, Reducer, useEffect, useCallback } from "react";
import { attributes } from "../utils/attributes";
import { PrettyBytes } from "../utils/bytes";
import { UploadStatus } from "./types";
import { CircleStop } from "lucide-react";
import { Spinner } from "../Spinner/Spinner";
import { CodexData } from "@codex-storage/sdk-js";
import { ButtonIcon } from "../ButtonIcon/ButtonIcon";
@ -11,6 +10,7 @@ import { WebFileIcon } from "../WebFileIcon/WebFileIcon";
import SuccessCircleIcon from "../../assets/icons/success-circle.svg?react";
import WarningCircleIcon from "../../assets/icons/warning-circle.svg?react";
import CloseIcon from "../../assets/icons/close.svg?react";
import StopIcon from "../../assets/icons/stop.svg?react";
type UploadFileProps = {
file: File;
@ -355,8 +355,8 @@ function UploadActionIcon({ status }: UploadStatusIconProps) {
switch (status) {
case "error":
case "done":
return <CloseIcon width={17.5} />;
return <CloseIcon width={20} height={20} />;
case "progress":
return <CircleStop size={"1.25rem"} />;
return <StopIcon />;
}
}

2
stories/Alert.stories.tsx
View File

@ -1,6 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Alert } from "../src/components/Alert/Alert";
import { InfoIcon } from "lucide-react";
import InfoIcon from "../src/assets/icons/info.svg?react";
const meta = {
title: "Overlays/Alert",