Skip to content

Commit

Permalink
fix: color search bug (#653)
Browse files Browse the repository at this point in the history
  • Loading branch information
@artmsilva
artmsilva committed Aug 1, 2024
1 parent 8f1f97b commit bdf21f9
Showing 1 changed file with 120 additions and 115 deletions.
235 changes: 120 additions & 115 deletions build.washingtonpost.com/components/Markdown/Examples/TokenColorTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,118 +5,110 @@ import { useTheme } from "next-themes";
import Fuse from "fuse.js";
import { InputSearch } from "@washingtonpost/wpds-ui-kit";

export default function ColorTokenTable() {
const light = convertObjectToArray(Tokens.color.light, "");
const dark = convertObjectToArray(Tokens.color.dark, "");
const themePalette = convertObjectToArray(Tokens.color.theme, "");
const staticColors = convertObjectToArray(Tokens.color.static, "-static");
const [defaultPalette, setDefaultPalette] = useState([
...light,
...staticColors,
...themePalette,
]);
const [results, setResults] = useState([]);
const [currentValue, setCurrentValue] = useState("");
const { theme } = useTheme();
const headers = ["Name", "Preview", "RGBA", "HEX", "Description"];

const fuse = new Fuse([...light, ...staticColors, ...themePalette], {
keys: ["name", "value"],
threshold: 0.2,
});

useEffect(() => {
if (theme === "dark") {
fuse.setCollection([...dark, ...staticColors, ...themePalette]);
setDefaultPalette([...dark, ...staticColors, ...themePalette]);
} else {
fuse.setCollection([...light, ...staticColors, ...themePalette]);
setDefaultPalette([...light, ...staticColors, ...themePalette]);
}
const results = fuse.search(currentValue);
setResults(results);
}, [theme]);
function convertObjectToArray(obj, suffix) {
return Object.entries(obj).map(([key, value]) => ({
name: key + suffix,
...value,
}));
}

function handleChange(e) {
setCurrentValue(e.target.value);
const results = fuse.search(e.target.value);
setCurrentValue(e.target.value);
setResults(results);
}
const light = convertObjectToArray(Tokens.color.light, "");
const dark = convertObjectToArray(Tokens.color.dark, "");
const themePalette = convertObjectToArray(Tokens.color.theme, "");
const staticColors = convertObjectToArray(Tokens.color.static, "-static");

const Container = styled("div", {
overflowX: "auto",
width: "100%",
});
const Container = styled("div", {
overflowX: "auto",
width: "100%",
});

const StyledTable = styled("table", {
borderCollapse: "collapse",
borderSpacing: "0",
width: "100%",
marginBottom: "calc($050 / 2)",
"& th": {
textAlign: "left",
fontWeight: "$light",
borderBottom: "1px solid $subtle",
fontSize: "$100",
color: "$accessible",
paddingInlineStart: 0,
py: "$100",
paddingRight: "$200",
const StyledTable = styled("table", {
borderCollapse: "collapse",
borderSpacing: "0",
width: "100%",
marginBottom: "calc($050 / 2)",
"& th": {
textAlign: "left",
fontWeight: "$light",
borderBottom: "1px solid $subtle",
fontSize: "$100",
color: "$accessible",
paddingInlineStart: 0,
py: "$100",
paddingRight: "$200",
"@sm": {
paddingRight: "0px",
},
"&.hide": {
"@sm": {
paddingRight: "0px",
},
"&.hide": {
"@sm": {
display: "none",
},
display: "none",
},
},
"& tr": {
height: 80,
},
"& tr": {
height: 80,
},
"& td": {
borderBottom: "1px solid $subtle",
fontSize: "$100",
paddingInlineStart: 0,
paddingInlineEnd: "$100",
color: "$accessible",
py: "$100",
paddingRight: "$200",
"@sm": {
paddingRight: "0px",
},
"& td": {
borderBottom: "1px solid $subtle",
fontSize: "$100",
paddingInlineStart: 0,
paddingInlineEnd: "$100",
color: "$accessible",
py: "$100",
paddingRight: "$200",
"&.rgba": {
minWidth: 200,
"@sm": {
paddingRight: "0px",
},
"&.rgba": {
minWidth: 200,
"@sm": {
minWidth: "unset",
},
minWidth: "unset",
},
"&.upper": {
textTransform: "uppercase",
},
"&.hide": {
"@sm": {
display: "none",
},
},
"&.nowrap": {
whiteSpace: "nowrap",
},
"&.upper": {
textTransform: "uppercase",
},
"&.hide": {
"@sm": {
display: "none",
},
},
});
"&.nowrap": {
whiteSpace: "nowrap",
},
},
});

const Swatch = styled("div", {
width: 40,
height: 40,
borderRadius: 4,
border: "1px solid $faint",
});

const Swatch = styled("div", {
width: 40,
height: 40,
borderRadius: 4,
border: "1px solid $faint",
});
const fuse = new Fuse([...light, ...staticColors, ...themePalette], {
keys: ["name", "value"],
threshold: 0.2,
});

function convertObjectToArray(obj, suffix) {
return Object.entries(obj).map(([key, value]) => ({
name: key + suffix,
...value,
}));
export default function TokenColorTable() {
const [defaultPalette, setDefaultPalette] = useState([
...light,
...staticColors,
...themePalette,
]);
const [results, setResults] = useState([]);
const [currentValue, setCurrentValue] = useState("");
const { theme } = useTheme();

function formatToken(item = {}) {
let value = item?.value ?? "";
if (theme === "dark" && item?.valueDark) {
value = item?.valueDark;
}
return value && value.substring(1, value.length - 1);
}

function lookUpValue(item = {}) {
Expand All @@ -134,15 +126,26 @@ export default function ColorTokenTable() {
}
}

function formatToken(item = {}) {
let value = item?.value ?? "";
if (theme === "dark" && item?.valueDark) {
value = item?.valueDark;
useEffect(() => {
if (theme === "dark") {
fuse.setCollection([...dark, ...staticColors, ...themePalette]);
setDefaultPalette([...dark, ...staticColors, ...themePalette]);
} else {
fuse.setCollection([...light, ...staticColors, ...themePalette]);
setDefaultPalette([...light, ...staticColors, ...themePalette]);
}
return value && value.substring(1, value.length - 1);
}
const results = fuse.search(currentValue);
setResults(results);
}, [theme]);

const headers = ["Name", "Preview", "RGBA", "HEX", "Description"];
useEffect(() => {
const results = fuse.search(currentValue);
setResults(results);
}, [currentValue]);

function handleChange(e) {
setCurrentValue(e.target.value);
}

return (
<>
Expand All @@ -154,20 +157,22 @@ export default function ColorTokenTable() {
onChange={handleChange}
value={currentValue}
/>
<InputSearch.Popover>
<InputSearch.List css={{ width: "100%" }}>
{results && (
<InputSearch.Popover>
{results.length > 0 ? (
results.map((result, i) => (
<InputSearch.ListItem
key={`${result.item.name}-${i}`}
value={result.item.name}
/>
))
<InputSearch.List css={{ width: "100%" }}>
{results.map((result, i) => (
<InputSearch.ListItem
key={`${result.item.name}-${i}`}
value={result.item.name}
/>
))}
</InputSearch.List>
) : (
<InputSearch.EmptyState />
)}
</InputSearch.List>
</InputSearch.Popover>
</InputSearch.Popover>
)}
</InputSearch.Root>
<Container>
<StyledTable>
Expand Down

0 comments on commit bdf21f9

Please sign in to comment.