onecart-ui
Version:
OneCart UI: Cross-platform design tokens + React & React Native components
365 lines (363 loc) • 19.4 kB
JavaScript
import React, { useState } from "react";
import * as Icons from "./index";
import * as tokens from "@onecart-ui/tokens/styles";
// Color options for icon color selector
const colorOptions = {
"Current Color": "currentColor",
// Semantic Icon Colors (from design system)
"Icon - Green": String(tokens.raw.ICON_GREEN),
"Icon - Light": String(tokens.raw.ICON_LIGHT),
"Icon - Lighter": String(tokens.raw.ICON_LIGHTER),
"Icon - Neutral": String(tokens.raw.ICON_NEUTRAL),
"Icon - Blue": String(tokens.raw.ICON_BLUE),
"Icon - Yellow": String(tokens.raw.ICON_YELLOW),
"Icon - Red": String(tokens.raw.ICON_RED),
// Additional semantic colors
"Text - Header": String(tokens.raw.TEXT_HEADER),
"Text - Body": String(tokens.raw.TEXT_BODY),
"Text - Tertiary": String(tokens.raw.TEXT_TERTIARY),
"Text - Error": String(tokens.raw.TEXT_ERROR),
// Semantic Action Colors
"Action - Primary": String(tokens.raw.ACTION_PRIMARY_DEFAULT),
"Action - Secondary": String(tokens.raw.ACTION_SECONDARY_DEFAULT),
"Action - Destructive": String(tokens.raw.ACTION_DESTRUCTIVE_DEFAULT),
// Global Colors
"Green 100": String(tokens.raw.GREEN_100),
"Green 80": String(tokens.raw.GREEN_80),
"Green 60": String(tokens.raw.GREEN_60),
"Neutral 100": String(tokens.raw.NEUTRAL_100),
"Neutral 80": String(tokens.raw.NEUTRAL_80),
"Neutral 60": String(tokens.raw.NEUTRAL_60),
"Neutral 40": String(tokens.raw.NEUTRAL_40),
"Blue 100": String(tokens.raw.BLUE_100),
"Blue 60": String(tokens.raw.BLUE_60),
"Red 100": String(tokens.raw.RED_100),
"Red 70": String(tokens.raw.RED_70),
"Yellow 100": String(tokens.raw.YELLOW_100),
"Yellow 70": String(tokens.raw.YELLOW_70),
White: String(tokens.raw.WHITE_10),
};
const meta = {
title: "@onecart/ui/icons",
tags: ["autodocs"],
parameters: {
layout: "padded",
},
argTypes: {
color: {
control: { type: "select" },
options: Object.keys(colorOptions),
mapping: colorOptions,
description: "Icon color - select from semantic or global color tokens",
},
size: {
control: { type: "select" },
options: ["xs", "sm", "md", "lg", "xl"],
description: "Icon size",
},
},
};
export default meta;
const iconNames = Object.keys(Icons).filter((key) => key !== "default" && key !== "IconProps");
export const AllIcons = {
render: () => {
const [searchTerm, setSearchTerm] = useState("");
const [selectedIcon, setSelectedIcon] = useState("");
const [size, setSize] = useState("md");
const [color, setColor] = useState("Icon - Green");
const actualColor = colorOptions[color] || color;
const SelectedIconComponent = selectedIcon
? Icons[selectedIcon]
: null;
return (React.createElement("div", null,
React.createElement("div", { style: {
position: "sticky",
top: 0,
backgroundColor: "white",
padding: "16px",
borderBottom: "1px solid #e0e0e0",
zIndex: 10,
} },
React.createElement("div", { style: {
display: "flex",
gap: "16px",
flexWrap: "wrap",
alignItems: "center",
marginBottom: selectedIcon ? "16px" : "0",
} },
React.createElement("div", { style: { flex: "1 1 300px" } },
React.createElement("input", { type: "text", placeholder: "Search icons...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), style: {
width: "100%",
padding: "8px 12px",
fontSize: "14px",
border: "1px solid #e0e0e0",
borderRadius: "4px",
} })),
React.createElement("div", null,
React.createElement("label", { style: { marginRight: "8px", fontSize: "14px" } }, "Size:"),
React.createElement("select", { value: size, onChange: (e) => setSize(e.target.value), style: {
padding: "8px 12px",
fontSize: "14px",
border: "1px solid #e0e0e0",
borderRadius: "4px",
} },
React.createElement("option", { value: "xs" }, "XS (16px)"),
React.createElement("option", { value: "sm" }, "SM (20px)"),
React.createElement("option", { value: "md" }, "MD (24px)"),
React.createElement("option", { value: "lg" }, "LG (32px)"),
React.createElement("option", { value: "xl" }, "XL (40px)"))),
React.createElement("div", null,
React.createElement("label", { style: { marginRight: "8px", fontSize: "14px" } }, "Color:"),
React.createElement("select", { value: color, onChange: (e) => setColor(e.target.value), style: {
padding: "8px 12px",
fontSize: "14px",
border: "1px solid #e0e0e0",
borderRadius: "4px",
cursor: "pointer",
} }, Object.keys(colorOptions).map((colorName) => (React.createElement("option", { key: colorName, value: colorName }, colorName))))),
React.createElement("div", { style: { fontSize: "14px", color: "#666" } },
iconNames.filter((name) => name.toLowerCase().includes(searchTerm.toLowerCase())).length,
" ",
"icons")),
selectedIcon && (React.createElement("div", { style: {
display: "flex",
gap: "16px",
alignItems: "center",
padding: "16px",
backgroundColor: "#f9f9f9",
borderRadius: "8px",
} },
React.createElement("div", { style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "64px",
height: "64px",
backgroundColor: "white",
borderRadius: "8px",
border: "1px solid #e0e0e0",
} },
React.createElement(SelectedIconComponent, { size: size, color: actualColor })),
React.createElement("div", { style: { flex: 1 } },
React.createElement("div", { style: {
fontSize: "16px",
fontWeight: "500",
marginBottom: "8px",
} }, selectedIcon),
React.createElement("div", { style: {
fontSize: "12px",
fontFamily: "monospace",
backgroundColor: "white",
padding: "8px",
borderRadius: "4px",
border: "1px solid #e0e0e0",
} }, `<${selectedIcon} size="${size}" color="${actualColor}" />`),
React.createElement("div", { style: { fontSize: "11px", color: "#666", marginTop: "4px" } },
"Using: ",
color)),
React.createElement("button", { onClick: () => setSelectedIcon(""), style: {
padding: "8px 16px",
fontSize: "14px",
border: "1px solid #e0e0e0",
borderRadius: "4px",
backgroundColor: "white",
cursor: "pointer",
} }, "Clear")))),
React.createElement("div", { style: {
display: "grid",
gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
gap: "16px",
padding: "16px",
} }, iconNames
.filter((name) => name.toLowerCase().includes(searchTerm.toLowerCase()))
.map((iconName) => {
const IconComponent = Icons[iconName];
const isSelected = selectedIcon === iconName;
return (React.createElement("div", { key: iconName, style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
padding: "16px",
border: isSelected
? "2px solid #2196F3"
: "1px solid #e0e0e0",
borderRadius: "8px",
cursor: "pointer",
transition: "all 0.2s",
backgroundColor: isSelected ? "#f0f7ff" : "transparent",
}, onMouseEnter: (e) => {
if (!isSelected) {
e.currentTarget.style.borderColor = "#2196F3";
e.currentTarget.style.backgroundColor = "#f5f5f5";
}
}, onMouseLeave: (e) => {
if (!isSelected) {
e.currentTarget.style.borderColor = "#e0e0e0";
e.currentTarget.style.backgroundColor = "transparent";
}
}, onClick: () => setSelectedIcon(iconName) },
React.createElement(IconComponent, { size: size, color: actualColor }),
React.createElement("span", { style: {
marginTop: "8px",
fontSize: "12px",
textAlign: "center",
wordBreak: "break-word",
} }, iconName)));
})),
React.createElement("div", { style: {
padding: "16px",
fontSize: "12px",
color: "#666",
borderTop: "1px solid #e0e0e0",
marginTop: "16px",
} }, "\uD83D\uDCA1 Click any icon to see its code and copy")));
},
};
export const Sizes = {
render: () => {
const { Home, Search, Star, ShoppingCart } = Icons;
return (React.createElement("div", { style: { padding: "24px" } },
React.createElement("h3", null, "Icon Sizes"),
React.createElement("div", { style: {
display: "flex",
gap: "32px",
alignItems: "flex-end",
marginTop: "24px",
} },
React.createElement("div", { style: { textAlign: "center" } },
React.createElement(Home, { size: "xs" }),
React.createElement("p", { style: { marginTop: "8px", fontSize: "12px" } }, "XS (16px)")),
React.createElement("div", { style: { textAlign: "center" } },
React.createElement(Search, { size: "sm" }),
React.createElement("p", { style: { marginTop: "8px", fontSize: "12px" } }, "SM (20px)")),
React.createElement("div", { style: { textAlign: "center" } },
React.createElement(Star, { size: "md" }),
React.createElement("p", { style: { marginTop: "8px", fontSize: "12px" } }, "MD (24px)")),
React.createElement("div", { style: { textAlign: "center" } },
React.createElement(ShoppingCart, { size: "lg" }),
React.createElement("p", { style: { marginTop: "8px", fontSize: "12px" } }, "LG (32px)")),
React.createElement("div", { style: { textAlign: "center" } },
React.createElement(Home, { size: "xl" }),
React.createElement("p", { style: { marginTop: "8px", fontSize: "12px" } }, "XL (40px)")),
React.createElement("div", { style: { textAlign: "center" } },
React.createElement(Search, { size: 64 }),
React.createElement("p", { style: { marginTop: "8px", fontSize: "12px" } }, "Custom (64px)")))));
},
};
export const Colors = {
render: () => {
const { Home, Search, Star, ShoppingCart, FavoriteBorder, Notifications } = Icons;
return (React.createElement("div", { style: { padding: "24px" } },
React.createElement("h3", null, "Icon Colors"),
React.createElement("div", { style: {
display: "flex",
gap: "32px",
alignItems: "center",
marginTop: "24px",
flexWrap: "wrap",
} },
React.createElement("div", { style: { textAlign: "center" } },
React.createElement(Home, { size: "lg", color: "#000000" }),
React.createElement("p", { style: { marginTop: "8px", fontSize: "12px" } }, "Black")),
React.createElement("div", { style: { textAlign: "center" } },
React.createElement(Search, { size: "lg", color: "#2196F3" }),
React.createElement("p", { style: { marginTop: "8px", fontSize: "12px" } }, "Blue")),
React.createElement("div", { style: { textAlign: "center" } },
React.createElement(Star, { size: "lg", color: "#FFC107" }),
React.createElement("p", { style: { marginTop: "8px", fontSize: "12px" } }, "Yellow")),
React.createElement("div", { style: { textAlign: "center" } },
React.createElement(ShoppingCart, { size: "lg", color: "#4CAF50" }),
React.createElement("p", { style: { marginTop: "8px", fontSize: "12px" } }, "Green")),
React.createElement("div", { style: { textAlign: "center" } },
React.createElement(Notifications, { size: "lg", color: "#F44336" }),
React.createElement("p", { style: { marginTop: "8px", fontSize: "12px" } }, "Red")),
React.createElement("div", { style: { textAlign: "center" } },
React.createElement(FavoriteBorder, { size: "lg", color: "#9C27B0" }),
React.createElement("p", { style: { marginTop: "8px", fontSize: "12px" } }, "Purple")))));
},
};
export const Usage = {
render: () => {
const { Home, Search, ShoppingCart, Menu } = Icons;
return (React.createElement("div", { style: { padding: "24px", maxWidth: "800px" } },
React.createElement("h3", null, "Usage Examples"),
React.createElement("div", { style: { marginTop: "24px" } },
React.createElement("h4", null, "Basic Usage"),
React.createElement("pre", { style: {
backgroundColor: "#f5f5f5",
padding: "16px",
borderRadius: "4px",
overflow: "auto",
} }, `import { Home, Search, ShoppingCart } from 'onecart-ui/icons';
function App() {
return (
<div>
<Home />
<Search size="lg" />
<ShoppingCart color="#2196F3" />
</div>
);
}`)),
React.createElement("div", { style: { marginTop: "24px" } },
React.createElement("h4", null, "With Buttons"),
React.createElement("div", { style: { display: "flex", gap: "16px", marginTop: "16px" } },
React.createElement("button", { style: {
display: "flex",
alignItems: "center",
gap: "8px",
padding: "8px 16px",
border: "1px solid #2196F3",
borderRadius: "4px",
backgroundColor: "#2196F3",
color: "white",
cursor: "pointer",
} },
React.createElement(Home, { size: "sm", color: "white" }),
"Home"),
React.createElement("button", { style: {
display: "flex",
alignItems: "center",
gap: "8px",
padding: "8px 16px",
border: "1px solid #4CAF50",
borderRadius: "4px",
backgroundColor: "#4CAF50",
color: "white",
cursor: "pointer",
} },
React.createElement(ShoppingCart, { size: "sm", color: "white" }),
"Cart"),
React.createElement("button", { style: {
display: "flex",
alignItems: "center",
gap: "8px",
padding: "8px 16px",
border: "1px solid #e0e0e0",
borderRadius: "4px",
backgroundColor: "white",
cursor: "pointer",
} },
React.createElement(Search, { size: "sm" }),
"Search"))),
React.createElement("div", { style: { marginTop: "24px" } },
React.createElement("h4", null, "With Text"),
React.createElement("div", { style: { marginTop: "16px" } },
React.createElement("p", { style: {
display: "flex",
alignItems: "center",
gap: "8px",
fontSize: "16px",
} },
React.createElement(Home, { size: "md", color: "#666" }),
"Welcome to your dashboard"),
React.createElement("p", { style: {
display: "flex",
alignItems: "center",
gap: "8px",
fontSize: "16px",
marginTop: "12px",
} },
React.createElement(Menu, { size: "md", color: "#666" }),
"Navigate through menu items")))));
},
};