diff --git a/.storybook/main.ts b/.storybook/main.ts
index 4f1c18d..c553573 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -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",
],
diff --git a/package-lock.json b/package-lock.json
index 477d884..321c11c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index dcb0842..bc89c4a 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/assets/icons/info-circle.svg b/src/assets/icons/info-circle.svg
new file mode 100644
index 0000000..94b582a
--- /dev/null
+++ b/src/assets/icons/info-circle.svg
@@ -0,0 +1,12 @@
+
diff --git a/src/assets/icons/info.svg b/src/assets/icons/info.svg
new file mode 100644
index 0000000..a7e5d9c
--- /dev/null
+++ b/src/assets/icons/info.svg
@@ -0,0 +1,13 @@
+
diff --git a/src/assets/icons/stop.svg b/src/assets/icons/stop.svg
new file mode 100644
index 0000000..fc8e009
--- /dev/null
+++ b/src/assets/icons/stop.svg
@@ -0,0 +1,12 @@
+
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index caebbf8..1567276 100644
--- a/src/components/Alert/Alert.tsx
+++ b/src/components/Alert/Alert.tsx
@@ -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({
{title}
{children}
+
+
);
}
diff --git a/src/components/Alert/alert.css b/src/components/Alert/alert.css
index 2aa0a03..4058fab 100644
--- a/src/components/Alert/alert.css
+++ b/src/components/Alert/alert.css
@@ -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);
}
diff --git a/src/components/Upload/UploadFile.tsx b/src/components/Upload/UploadFile.tsx
index d316f72..aba4169 100644
--- a/src/components/Upload/UploadFile.tsx
+++ b/src/components/Upload/UploadFile.tsx
@@ -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 ;
+ return ;
case "progress":
- return ;
+ return ;
}
}
diff --git a/stories/Alert.stories.tsx b/stories/Alert.stories.tsx
index 0b59614..9bdcebf 100644
--- a/stories/Alert.stories.tsx
+++ b/stories/Alert.stories.tsx
@@ -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",