andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(build): move to react 18 + vite

Browse Source
This commit is contained in:
rektdeckard
2023-02-02 22:15:00 -07:00
parent ced8732edb
commit 1b8d6c48fc
46 changed files with 198 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -10,6 +10,7 @@
# production # production
/build /build
/dist
# misc # misc
.DS_Store .DS_Store

93
bin/fetch.js
View File

@@ -1,93 +0,0 @@
#!/usr/bin/env node
"use strict";
const fs = require("fs/promises");
const path = require("path");
const axios = require("axios");
const chalk = require("chalk");
const { Command } = require("commander");
const { version } = require("../package.json");
const ICON_API_URL = "https://api.phosphoricons.com";
async function main() {
const program = new Command();
program
.version(version)
.option(
"-r --release <version>",
"Fetch icons from Phosphor API and compile to internal data structure"
)
.option("-p --published", "Published status of icons")
.option("-P, --no-published", "Published status of icons")
.option("-q --query <text>", "Fulltext search term")
.option("-n --name <name>", "Exact icon namee match");
program.parse(process.argv);
const params = new URLSearchParams(Object.entries(program.opts())).toString();
try {
const res = await axios.get(`${ICON_API_URL}?${params}`);
if (res.data) {
let fileString = `\
import * as Icons from "phosphor-react";
import { IconEntry, IconCategory } from ".";
export const icons: ReadonlyArray<IconEntry> = [
`;
res.data.icons.forEach((icon) => {
let categories = "[";
icon.searchCategories?.forEach((c) => {
categories += `IconCategory.${c.toUpperCase()},`;
});
categories += "]";
fileString += `\
{
name: "${icon.name}",
categories: ${categories},
tags: ${JSON.stringify(["*new*", ...icon.tags])},
Icon: Icons.${icon.name
.split("-")
.map((substr) => substr.replace(/^\w/, (c) => c.toUpperCase()))
.join("")},
},
`;
console.log(`${chalk.inverse.green(" DONE ")} ${icon.name}`);
});
fileString += `
];
if (process.env.NODE_ENV === "development") {
console.log(\`\${icons.length} icons\`);
}
export const iconCount = (icons.length * 6)
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
`;
try {
await fs.writeFile(
path.join(__dirname, "../src/lib/new.ts"),
fileString
);
console.log(
`${chalk.green(" DONE ")} ${res.data.icons.length} icons ingested`
);
} catch (e) {
console.error(`${chalk.inverse.red(" FAIL ")} Could not write file`);
}
} else {
console.error(`${chalk.inverse.red(" FAIL ")} No data`);
}
} catch (e) {
console.error(e);
process.exit(-1);
}
}
main();

11
public/index.html → index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Phosphor Icons</title> <title>Phosphor Icons</title>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#35313D" /> <meta name="theme-color" content="#35313D" />
<meta <meta
@@ -66,20 +66,20 @@
<meta name="twitter:site" content="@_phosphoricons" /> <meta name="twitter:site" content="@_phosphoricons" />
<meta name="twitter:creator" content="@friedtm" /> <meta name="twitter:creator" content="@friedtm" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon-192.png" /> <link rel="apple-touch-icon" href="/favicon-192.png" />
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
sizes="32x32" sizes="32x32"
href="%PUBLIC_URL%/favicon-32x32.png" href="/favicon-32x32.png"
/> />
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
sizes="16x16" sizes="16x16"
href="%PUBLIC_URL%/favicon-16x16.png" href="/favicon-16x16.png"
/> />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<link <link
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap"
rel="stylesheet" rel="stylesheet"
@@ -112,5 +112,6 @@
</div> </div>
</noscript> </noscript>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body> </body>
</html> </html>

50
package.json
View File

@@ -21,46 +21,40 @@
"repository": "github:phosphor-icons/phosphor-home", "repository": "github:phosphor-icons/phosphor-home",
"private": true, "private": true,
"scripts": { "scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'", "dev": "vite",
"start": "react-scripts start", "build": "tsc && vite build",
"build": "react-scripts build", "preview": "vite preview",
"test": "react-scripts test",
"eject": "react-scripts eject",
"fetch": "node ./bin/fetch.js",
"format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,vue}\"" "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,vue}\""
}, },
"dependencies": { "dependencies": {
"@phosphor-icons/core": "^1.4.5", "@phosphor-icons/core": "^1.4.7",
"file-saver": "^2.0.2", "file-saver": "^2.0.2",
"framer-motion": "^3.10.0", "framer-motion": "^9.0.1",
"fuse.js": "^6.4.1", "fuse.js": "^6.4.1",
"phosphor-react": "^1.4.0", "phosphor-react": "^1.4.1",
"react": "^17.0.1", "prop-types": "^15.8.1",
"react-dom": "^17.0.1", "react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dropdown-select": "^4.4.2", "react-dropdown-select": "^4.4.2",
"react-ga": "^3.1.2", "react-ga": "^3.1.2",
"react-hotkeys-hook": "^3.2.1", "react-hotkeys-hook": "^3.2.1",
"react-scripts": "3.4.1", "react-use": "^17.4.0",
"react-use": "^15.3.2", "recoil": "^0.7.6",
"recoil": "^0.5.2", "svg2png-converter": "^1.0.2",
"svg2png-converter": "^1.0.0", "tinycolor": "^0.0.1",
"tinycolor2": "^1.4.2" "tinycolor2": "^1.4.2"
}, },
"devDependencies": { "devDependencies": {
"@testing-library/jest-dom": "^4.2.4", "@types/file-saver": "^2.0.5",
"@testing-library/react": "^9.3.2", "@types/node": "^18.11.18",
"@testing-library/user-event": "^7.1.2", "@types/react": "^18.0.27",
"@types/file-saver": "^2.0.1", "@types/react-dom": "^18.0.10",
"@types/jest": "^24.0.0",
"@types/node": "^12.0.0",
"@types/react": "^16.9.46",
"@types/react-dom": "^16.9.8",
"@types/react-virtualized": "^9.21.10", "@types/react-virtualized": "^9.21.10",
"@types/tinycolor2": "^1.4.2", "@types/tinycolor2": "^1.4.3",
"axios": "^0.24.0", "@vitejs/plugin-react": "^3.1.0",
"chalk": "^4", "typescript": "^4.9.5",
"commander": "^8.3.0", "vite": "^4.1.1",
"typescript": "^3.9.6" "vite-plugin-svgr": "^2.4.0"
}, },
"eslintConfig": { "eslintConfig": {
"extends": "react-app" "extends": "react-app"

9
src/components/App/App.test.tsx
View File

@@ -1,9 +0,0 @@
import React from "react";
import { render } from "@testing-library/react";
import App from "./App";
test("renders learn react link", () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

1
src/components/App/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./App";

1
src/components/Banner/Banner.tsx
View File

@@ -1,4 +1,3 @@
import React from "react";
import { Medal } from "phosphor-react"; import { Medal } from "phosphor-react";
import ReactGA from "react-ga"; import ReactGA from "react-ga";

1
src/components/Banner/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./Banner";

11
src/components/ColorInput/ColorInput.tsx
View File

@@ -1,14 +1,15 @@
import React, { useCallback } from "react"; import { useCallback } from "react";
import { useRecoilState, useRecoilValue } from "recoil"; import { useRecoilState, useRecoilValue } from "recoil";
import { iconColorAtom } from "../../state/atoms"; import { iconColorAtom } from "@/state/atoms";
import { isDarkThemeSelector } from "../../state/selectors"; import { isDarkThemeSelector } from "@/state/selectors";
import useThrottled from "../../hooks/useThrottled"; import useThrottled from "@/hooks/useThrottled";
import "./ColorInput.css"; import "./ColorInput.css";
type ColorInputProps = {}; type ColorInputProps = {};
const ColorInput: React.FC<ColorInputProps> = () => { const ColorInput = (_: ColorInputProps) => {
const [color, setColor] = useRecoilState(iconColorAtom); const [color, setColor] = useRecoilState(iconColorAtom);
const isDark = useRecoilValue(isDarkThemeSelector); const isDark = useRecoilValue(isDarkThemeSelector);

1
src/components/ColorInput/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./ColorInput";

9
src/components/ErrorBoundary/ErrorBoundary.tsx
View File

@@ -1,14 +1,15 @@
import React, { ErrorInfo } from "react"; import { Component, ErrorInfo, ReactNode } from "react";
interface ErrorBoundaryProps { interface ErrorBoundaryProps {
fallback?: JSX.Element | React.ReactNode; fallback?: JSX.Element | ReactNode;
children?: JSX.Element | ReactNode;
} }
interface ErrorBoundaryState { interface ErrorBoundaryState {
errorMessage?: string; errorMessage?: string;
} }
export default class ErrorBoundary extends React.Component< export default class ErrorBoundary extends Component<
ErrorBoundaryProps, ErrorBoundaryProps,
ErrorBoundaryState ErrorBoundaryState
> { > {
@@ -26,7 +27,7 @@ export default class ErrorBoundary extends React.Component<
console.info(info); console.info(info);
} }
render(): JSX.Element | React.ReactNode { render(): JSX.Element | ReactNode {
if (this.state.errorMessage) { if (this.state.errorMessage) {
return this.props.fallback ?? <p>{this.state.errorMessage}</p>; return this.props.fallback ?? <p>{this.state.errorMessage}</p>;
} }

1
src/components/ErrorBoundary/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./ErrorBoundary";

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

@@ -1,15 +1,15 @@
import React from "react";
import { Coffee, Heart } from "phosphor-react"; import { Coffee, Heart } from "phosphor-react";
import uArrowUpLeft from "../../assets/u-arrow-up-left.svg"; import Links from "@/components/Links/Links";
import markerGreen from "../../assets/marker-green.svg";
import postIt from "../../assets/footer-mobile.svg"; import { ReactComponent as UArrowUpLeft } from "@/assets/u-arrow-up-left.svg";
import Links from "../Links/Links"; import { ReactComponent as MarkerGreen } from "@/assets/marker-green.svg";
import { ReactComponent as PostIt } from "@/assets/footer-mobile.svg";
import "./Footer.css"; import "./Footer.css";
type FooterProps = {}; type FooterProps = {};
const Footer: React.FC<FooterProps> = () => { const Footer = (_: FooterProps) => {
return ( return (
<footer> <footer>
<div className="container"> <div className="container">
@@ -23,7 +23,7 @@ const Footer: React.FC<FooterProps> = () => {
?.scrollIntoView({ behavior: "smooth", block: "start" }); ?.scrollIntoView({ behavior: "smooth", block: "start" });
}} }}
> >
<img src={uArrowUpLeft} alt="" /> <UArrowUpLeft />
</button> </button>
<div className="outro"> <div className="outro">
<Links /> <Links />
@@ -108,11 +108,11 @@ const Footer: React.FC<FooterProps> = () => {
</a>{" "} </a>{" "}
by Mikhail Sharanda. by Mikhail Sharanda.
</p> </p>
<img id="marker-green" src={markerGreen} alt="" /> <MarkerGreen id="marker-green" />
</div> </div>
</div> </div>
<div className="illustrations-footer"> <div className="illustrations-footer">
<img id="post-it" src={postIt} width="878" height="667" alt="" /> <PostIt id="post-it" width="878" height="667" />
</div> </div>
</div> </div>
</footer> </footer>

1
src/components/Footer/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./Footer";

78
src/components/Header/Header.tsx
View File

@@ -1,22 +1,22 @@
import React from "react";
import { ArrowCircleUpRight, ArrowCircleDown } from "phosphor-react"; import { ArrowCircleUpRight, ArrowCircleDown } from "phosphor-react";
import markerPurple from "../../assets/marker-purple.svg"; import { ReactComponent as MarkerPurple } from "@/assets/marker-purple.svg";
import paperclips from "../../assets/paperclips-header-mobile.svg"; import { ReactComponent as PaperClips } from "@/assets/paperclips-header-mobile.svg";
import paperclipsThree from "../../assets/paperclips-header.svg"; import { ReactComponent as PaperClipsThree } from "@/assets/paperclips-header.svg";
import tablet from "../../assets/tablet.svg"; import { ReactComponent as Tablet } from "@/assets/tablet.svg";
import tabletSpec from "../../assets/tablet-spec.svg"; import { ReactComponent as TabletSpec } from "@/assets/tablet-spec.svg";
import billiardBall from "../../assets/billiard-ball.svg"; import { ReactComponent as BilliardBall } from "@/assets/billiard-ball.svg";
import billiardBallSpec from "../../assets/billiard-ball-spec.svg"; import { ReactComponent as BilliardBallSpec } from "@/assets/billiard-ball-spec.svg";
import warning from "../../assets/warning.svg"; import { ReactComponent as Warning } from "@/assets/warning.svg";
import warningSpec from "../../assets/warning-spec.svg"; import { ReactComponent as WarningSpec } from "@/assets/warning-spec.svg";
import cuttingMat from "../../assets/cutting-mat.svg"; import { ReactComponent as CuttingMat } from "@/assets/cutting-mat.svg";
import cuttingMatSpec from "../../assets/cutting-mat-spec.svg"; import { ReactComponent as CuttingMatSpec } from "@/assets/cutting-mat-spec.svg";
import receipt from "../../assets/receipt.svg"; import { ReactComponent as Receipt } from "@/assets/receipt.svg";
import receiptSpec from "../../assets/receipt-spec.svg"; import { ReactComponent as ReceiptSpec } from "@/assets/receipt-spec.svg";
import calculator from "../../assets/calculator.svg"; import { ReactComponent as Calculator } from "@/assets/calculator.svg";
import calculatorSpec from "../../assets/calculator-spec.svg"; import { ReactComponent as CalculatorSpec } from "@/assets/calculator-spec.svg";
import Links from "../Links/Links";
import Links from "@/components/Links";
import "./Header.css"; import "./Header.css";
type HeaderProps = {}; type HeaderProps = {};
@@ -33,25 +33,21 @@ const handleScrollToIcons = () =>
.getElementById("toolbar") .getElementById("toolbar")
?.scrollIntoView({ behavior: "smooth", block: "start" }); ?.scrollIntoView({ behavior: "smooth", block: "start" });
const Header: React.FC<HeaderProps> = () => { const Header = (_: HeaderProps) => {
return ( return (
<header> <header>
<div className="header-contents"> <div className="header-contents">
<div className="illustrations-top"> <div className="illustrations-top">
<img src={markerPurple} id="marker-purple" alt="" /> <MarkerPurple id="marker-purple" />
<img src={paperclips} id="paperclips" alt="" /> <PaperClips id="paperclips" />
<img src={paperclipsThree} id="paperclips-three" alt="" /> <PaperClipsThree id="paperclips-three" />
<img className="tablet" src={tabletSpec} alt="" /> <TabletSpec className="tablet" />
<img className="tablet inspectable xray" src={tablet} alt="" /> <Tablet className="tablet inspectable xray" />
<img className="billiard-ball" src={billiardBallSpec} alt="" /> <BilliardBallSpec className="billiard-ball" />
<img <BilliardBall className="billiard-ball inspectable xray" />
className="billiard-ball inspectable xray"
src={billiardBall}
alt=""
/>
<img className="warning" src={warningSpec} alt="" /> <WarningSpec className="warning" />
<img className="warning inspectable xray" src={warning} alt="" /> <Warning className="warning inspectable xray" />
</div> </div>
<div className="intro"> <div className="intro">
<h2> <h2>
@@ -73,20 +69,12 @@ const Header: React.FC<HeaderProps> = () => {
<Links /> <Links />
</div> </div>
<div className="illustrations-bottom"> <div className="illustrations-bottom">
<img className="cutting-mat" src={cuttingMatSpec} alt="" /> <CuttingMatSpec className="cutting-mat" />
<img <CuttingMat className="cutting-mat inspectable xray" />
className="cutting-mat inspectable xray" <ReceiptSpec className="receipt" />
src={cuttingMat} <Receipt className="receipt inspectable xray" />
alt="" <CalculatorSpec className="calculator" />
/> <Calculator className="calculator inspectable xray" />
<img className="receipt" src={receiptSpec} alt="" />
<img className="receipt inspectable xray" src={receipt} alt="" />
<img className="calculator" src={calculatorSpec} alt="" />
<img
className="calculator inspectable xray"
src={calculator}
alt=""
/>
</div> </div>
</div> </div>
</header> </header>

1
src/components/Header/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./Header";

17
src/components/IconGrid/DetailsPanel.tsx
View File

@@ -1,4 +1,4 @@
import React, { useRef, useEffect } from "react"; import React, { useRef, useEffect, CSSProperties } from "react";
import { useRecoilValue, useSetRecoilState } from "recoil"; import { useRecoilValue, useSetRecoilState } from "recoil";
import { useHotkeys } from "react-hotkeys-hook"; import { useHotkeys } from "react-hotkeys-hook";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
@@ -12,11 +12,12 @@ import {
iconSizeAtom, iconSizeAtom,
iconColorAtom, iconColorAtom,
iconPreviewOpenAtom, iconPreviewOpenAtom,
} from "../../state/atoms"; } from "@/state/atoms";
import useTransientState from "../../hooks/useTransientState"; import useTransientState from "@/hooks/useTransientState";
import { IconEntry, SnippetType } from "@/lib";
import { getCodeSnippets, supportsWeight } from "@/utils";
import TagCloud from "./TagCloud"; import TagCloud from "./TagCloud";
import { IconEntry, SnippetType } from "../../lib";
import { getCodeSnippets, supportsWeight } from "../../utils";
const panelVariants = { const panelVariants = {
open: { open: {
@@ -58,7 +59,7 @@ const renderedSnippets = [
SnippetType.FLUTTER, SnippetType.FLUTTER,
]; ];
const DetailsPanel: React.FC<InfoPanelProps> = (props) => { const DetailsPanel = (props: InfoPanelProps) => {
const { index, spans, isDark, entry } = props; const { index, spans, isDark, entry } = props;
const { name, Icon, categories, tags } = entry; const { name, Icon, categories, tags } = entry;
const weight = useRecoilValue(iconWeightAtom); const weight = useRecoilValue(iconWeightAtom);
@@ -78,10 +79,10 @@ const DetailsPanel: React.FC<InfoPanelProps> = (props) => {
[name] [name]
); );
const buttonBarStyle: React.CSSProperties = { const buttonBarStyle: CSSProperties = {
color: isDark ? "white" : buttonColor, color: isDark ? "white" : buttonColor,
}; };
const snippetButtonStyle: React.CSSProperties = const snippetButtonStyle: CSSProperties =
weight === "duotone" weight === "duotone"
? { color: disabledColor, userSelect: "none" } ? { color: disabledColor, userSelect: "none" }
: { color: buttonColor }; : { color: buttonColor };

13
src/components/IconGrid/IconGrid.tsx
View File

@@ -1,17 +1,18 @@
import React, { useRef, useEffect } from "react"; import { useRef, useEffect } from "react";
import { useRecoilValue } from "recoil"; import { useRecoilValue } from "recoil";
import { motion, useAnimation } from "framer-motion"; import { motion, useAnimation } from "framer-motion";
import { IconContext } from "phosphor-react"; import { IconContext } from "phosphor-react";
import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "../../state/atoms"; import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "@/state/atoms";
import { import {
filteredQueryResultsSelector, filteredQueryResultsSelector,
isDarkThemeSelector, isDarkThemeSelector,
} from "../../state/selectors"; } from "@/state/selectors";
import useGridSpans from "../../hooks/useGridSpans"; import useGridSpans from "@/hooks/useGridSpans";
import Notice from "@/components/Notice";
import IconGridItem from "./IconGridItem"; import IconGridItem from "./IconGridItem";
import TagCloud from "./TagCloud"; import TagCloud from "./TagCloud";
import Notice from "../Notice/Notice";
import "./IconGrid.css"; import "./IconGrid.css";
const defaultSearchTags = [ const defaultSearchTags = [
@@ -26,7 +27,7 @@ const defaultSearchTags = [
type IconGridProps = {}; type IconGridProps = {};
const IconGrid: React.FC<IconGridProps> = () => { const IconGrid = (_: IconGridProps) => {
const weight = useRecoilValue(iconWeightAtom); const weight = useRecoilValue(iconWeightAtom);
const size = useRecoilValue(iconSizeAtom); const size = useRecoilValue(iconSizeAtom);
const color = useRecoilValue(iconColorAtom); const color = useRecoilValue(iconColorAtom);

14
src/components/IconGrid/IconGridItem.tsx
View File

@@ -1,15 +1,11 @@
import React, { import { useRef, useLayoutEffect, useEffect, MutableRefObject } from "react";
useRef,
useLayoutEffect,
useEffect,
MutableRefObject,
} from "react";
import { useRecoilState } from "recoil"; import { useRecoilState } from "recoil";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { iconPreviewOpenAtom } from "../../state/atoms"; import { IconEntry } from "@/lib";
import { iconPreviewOpenAtom } from "@/state/atoms";
import DetailsPanel from "./DetailsPanel"; import DetailsPanel from "./DetailsPanel";
import { IconEntry } from "../../lib";
interface IconGridItemProps { interface IconGridItemProps {
index: number; index: number;
@@ -31,7 +27,7 @@ const itemVariants = {
}), }),
}; };
const IconGridItem: React.FC<IconGridItemProps> = (props) => { const IconGridItem = (props: IconGridItemProps) => {
const { index, originOffset, entry } = props; const { index, originOffset, entry } = props;
const { name, Icon } = entry; const { name, Icon } = entry;
const [open, setOpen] = useRecoilState(iconPreviewOpenAtom); const [open, setOpen] = useRecoilState(iconPreviewOpenAtom);

6
src/components/IconGrid/TagCloud.tsx
View File

@@ -1,7 +1,7 @@
import React, { useCallback } from "react"; import { useCallback } from "react";
import { useSetRecoilState } from "recoil"; import { useSetRecoilState } from "recoil";
import { searchQueryAtom } from "../../state/atoms"; import { searchQueryAtom } from "@/state/atoms";
import "./TagCloud.css"; import "./TagCloud.css";
interface TagCloudProps { interface TagCloudProps {
@@ -10,7 +10,7 @@ interface TagCloudProps {
isDark: boolean; isDark: boolean;
} }
const TagCloud: React.FC<TagCloudProps> = ({ name, tags, isDark }) => { const TagCloud = ({ name, tags, isDark }: TagCloudProps) => {
const setQuery = useSetRecoilState(searchQueryAtom); const setQuery = useSetRecoilState(searchQueryAtom);
const handleTagClick = useCallback( const handleTagClick = useCallback(
(tag: string) => { (tag: string) => {

1
src/components/IconGrid/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./IconGrid";

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

@@ -1,14 +1,13 @@
import React from "react";
import { OutboundLink } from "react-ga"; import { OutboundLink } from "react-ga";
import { ArrowElbowDownRight } from "phosphor-react"; import { ArrowElbowDownRight } from "phosphor-react";
import { iconCount } from "../../lib/icons"; import { iconCount } from "@/lib/icons";
import "./Links.css"; import "./Links.css";
interface LinksProps {} interface LinksProps {}
const Links: React.FC<LinksProps> = () => { const Links = (_: LinksProps) => {
return ( return (
<div className="links"> <div className="links">
<div> <div>

1
src/components/Links/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./Links";

15
src/components/Notice/Notice.tsx
View File

@@ -1,21 +1,18 @@
import React from "react"; import { ReactNode } from "react";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { useRecoilValue } from "recoil"; import { useRecoilValue } from "recoil";
import { isDarkThemeSelector } from "../../state/selectors";
import { searchQueryAtom } from "../../state/atoms";
import { HourglassMedium, Question, SmileyXEyes } from "phosphor-react"; import { HourglassMedium, Question, SmileyXEyes } from "phosphor-react";
import { isDarkThemeSelector } from "@/state/selectors";
import { searchQueryAtom } from "@/state/atoms";
interface NoticeProps { interface NoticeProps {
message?: string; message?: string;
type?: "wait" | "help" | "warn" | "none"; type?: "wait" | "help" | "warn" | "none";
children?: ReactNode;
} }
const Notice: React.FC<NoticeProps> = ({ const Notice = ({ message, type = "warn", children }: NoticeProps) => {
message,
type = "warn",
children,
}) => {
const isDark = useRecoilValue(isDarkThemeSelector); const isDark = useRecoilValue(isDarkThemeSelector);
const query = useRecoilValue(searchQueryAtom); const query = useRecoilValue(searchQueryAtom);

1
src/components/Notice/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./Notice";

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

@@ -1,11 +1,17 @@
import React, { useState, useEffect, useRef, MutableRefObject } from "react"; import {
useState,
useEffect,
useRef,
MutableRefObject,
ReactNode,
} from "react";
import { useRecoilState } from "recoil"; import { useRecoilState } from "recoil";
import { useDebounce } from "react-use"; import { useDebounce } from "react-use";
import { useHotkeys } from "react-hotkeys-hook"; import { useHotkeys } from "react-hotkeys-hook";
import { Command, MagnifyingGlass, X, HourglassHigh } from "phosphor-react"; import { Command, MagnifyingGlass, X, HourglassHigh } from "phosphor-react";
import ReactGA from "react-ga"; import ReactGA from "react-ga";
import { searchQueryAtom } from "../../state/atoms"; import { searchQueryAtom } from "@/state/atoms";
import "./SearchInput.css"; import "./SearchInput.css";
const apple = /iPhone|iPod|iPad|Macintosh|MacIntel|MacPPC/i; const apple = /iPhone|iPod|iPad|Macintosh|MacIntel|MacPPC/i;
@@ -16,7 +22,7 @@ const isMobile = mobile.test(window.navigator.userAgent);
type SearchInputProps = {}; type SearchInputProps = {};
const SearchInput: React.FC<SearchInputProps> = () => { const SearchInput = (_: SearchInputProps) => {
const [value, setValue] = useState<string>(""); const [value, setValue] = useState<string>("");
const [query, setQuery] = useRecoilState(searchQueryAtom); const [query, setQuery] = useRecoilState(searchQueryAtom);
const inputRef = const inputRef =
@@ -94,7 +100,7 @@ const SearchInput: React.FC<SearchInputProps> = () => {
); );
}; };
const Keys: React.FC<{}> = ({ children }) => ( const Keys = ({ children }: { children?: ReactNode }) => (
<div className="keys">{children}</div> <div className="keys">{children}</div>
); );

1
src/components/SearchInput/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./SearchInput";

15
src/components/SettingsActions/SettingsActions.tsx
View File

@@ -1,12 +1,13 @@
import React from "react";
import { ArrowCounterClockwise, CheckCircle, Link } from "phosphor-react";
import { useRecoilValue, useResetRecoilState } from "recoil"; import { useRecoilValue, useResetRecoilState } from "recoil";
import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "../../state/atoms"; import { ArrowCounterClockwise, CheckCircle, Link } from "phosphor-react";
import "./SettingsActions.css";
import useTransientState from "../../hooks/useTransientState";
import { resetSettingsSelector } from "../../state/selectors";
const SettingsActions: React.FC = () => { import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "@/state/atoms";
import useTransientState from "@/hooks/useTransientState";
import { resetSettingsSelector } from "@/state/selectors";
import "./SettingsActions.css";
const SettingsActions = () => {
const weight = useRecoilValue(iconWeightAtom); const weight = useRecoilValue(iconWeightAtom);
const size = useRecoilValue(iconSizeAtom); const size = useRecoilValue(iconSizeAtom);
const color = useRecoilValue(iconColorAtom); const color = useRecoilValue(iconColorAtom);

1
src/components/SettingsActions/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./SettingsActions";

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

@@ -1,7 +1,7 @@
import React, { useCallback } from "react"; import React, { useCallback } from "react";
import { useRecoilState } from "recoil"; import { useRecoilState } from "recoil";
import { iconSizeAtom } from "../../state/atoms"; import { iconSizeAtom } from "@/state/atoms";
import "./SizeInput.css"; import "./SizeInput.css";
type SizeInputProps = {}; type SizeInputProps = {};
@@ -14,7 +14,7 @@ const handleBlur = (event: React.UIEvent<HTMLInputElement>) => {
event.currentTarget.blur(); event.currentTarget.blur();
}; };
const SizeInput: React.FC<SizeInputProps> = () => { const SizeInput = (_: SizeInputProps) => {
const [size, setSize] = useRecoilState(iconSizeAtom); const [size, setSize] = useRecoilState(iconSizeAtom);
const handleSizeChange = useCallback( const handleSizeChange = useCallback(

1
src/components/SizeInput/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./SizeInput";

7
src/components/StyleInput/StyleInput.tsx
View File

@@ -1,10 +1,11 @@
import React, { useMemo } from "react"; import { useMemo } from "react";
import { useRecoilState } from "recoil"; import { useRecoilState } from "recoil";
import Select from "react-dropdown-select"; import Select from "react-dropdown-select";
import { PencilLine } from "phosphor-react"; import { PencilLine } from "phosphor-react";
import { IconStyle } from "@phosphor-icons/core"; import { IconStyle } from "@phosphor-icons/core";
import { iconWeightAtom } from "../../state/atoms"; import { iconWeightAtom } from "@/state/atoms";
import "./StyleInput.css"; import "./StyleInput.css";
type WeightOption = { key: string; value: IconStyle; icon: JSX.Element }; type WeightOption = { key: string; value: IconStyle; icon: JSX.Element };
@@ -44,7 +45,7 @@ const options: WeightOption[] = [
type StyleInputProps = {}; type StyleInputProps = {};
const StyleInput: React.FC<StyleInputProps> = () => { const StyleInput = (_: StyleInputProps) => {
const [style, setStyle] = useRecoilState(iconWeightAtom); const [style, setStyle] = useRecoilState(iconWeightAtom);
const currentStyle = useMemo( const currentStyle = useMemo(

1
src/components/StyleInput/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./StyleInput";

10
src/components/Toolbar/Toolbar.tsx
View File

@@ -1,11 +1,11 @@
import React from "react"; import React from "react";
import StyleInput from "@/components/StyleInput";
import SearchInput from "@/components/SearchInput";
import SizeInput from "@/components/SizeInput";
import ColorInput from "@/components/ColorInput";
import SettingsActions from "@/components/SettingsActions";
import "./Toolbar.css"; import "./Toolbar.css";
import StyleInput from "../StyleInput/StyleInput";
import SearchInput from "../SearchInput/SearchInput";
import SizeInput from "../SizeInput/SizeInput";
import ColorInput from "../ColorInput/ColorInput";
import SettingsActions from "../SettingsActions/SettingsActions";
type ToolbarProps = {}; type ToolbarProps = {};

1
src/components/Toolbar/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./Toolbar";

22
src/index.tsx
View File

@@ -1,27 +1,23 @@
import React from "react"; import { StrictMode } from "react";
import ReactDOM from "react-dom"; import { createRoot } from "react-dom/client";
import { RecoilRoot } from "recoil"; import { RecoilRoot } from "recoil";
import * as serviceWorker from "./serviceWorker"; import App from "./components/App";
import App from "./components/App/App";
import ReactGA from "react-ga"; import ReactGA from "react-ga";
ReactGA.initialize("UA-179205759-1", { titleCase: false }); ReactGA.initialize("UA-179205759-1", { titleCase: false });
ReactGA.pageview(window.location.pathname); ReactGA.pageview(window.location.pathname);
ReactDOM.render( const container = document.getElementById("root");
<React.StrictMode> const root = createRoot(container!);
root.render(
<StrictMode>
<RecoilRoot> <RecoilRoot>
<App /> <App />
</RecoilRoot> </RecoilRoot>
</React.StrictMode>, </StrictMode>
document.getElementById("root")
); );
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
console.log(` console.log(`
%c sphorphosphor %co%cspho %c sphorphosphor %co%cspho

4
src/lib/icons.ts
View File

@@ -4,9 +4,7 @@ import { icons as iconData } from "@phosphor-icons/core";
import { IconEntry } from "."; import { IconEntry } from ".";
export const icons: ReadonlyArray<IconEntry> = iconData.map((entry) => ({ export const icons: ReadonlyArray<IconEntry> = iconData.map((entry) => ({
name: entry.name, ...entry,
categories: entry.categories,
tags: entry.tags,
Icon: Icons[entry.pascal_name as keyof typeof Icons] as Icons.Icon, Icon: Icons[entry.pascal_name as keyof typeof Icons] as Icons.Icon,
})); }));

7
src/lib/index.ts
View File

@@ -1,10 +1,7 @@
import { Icon } from "phosphor-react"; import { Icon } from "phosphor-react";
import { IconCategory } from "@phosphor-icons/core"; import { IconEntry as CoreEntry } from "@phosphor-icons/core";
export interface IconEntry { export interface IconEntry extends CoreEntry {
name: string;
categories: IconCategory[];
tags: string[];
Icon: Icon; Icon: Icon;
} }

1
src/react-app-env.d.ts vendored
View File

@@ -1 +0,0 @@
/// <reference types="react-scripts" />

146
src/serviceWorker.ts
View File

@@ -1,146 +0,0 @@
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === "localhost" ||
// [::1] is the IPv6 localhost address.
window.location.hostname === "[::1]" ||
// 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
type Config = {
onSuccess?: (registration: ServiceWorkerRegistration) => void;
onUpdate?: (registration: ServiceWorkerRegistration) => void;
};
export function register(config?: Config) {
if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener("load", () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
"This web app is being served cache-first by a service " +
"worker. To learn more, visit https://bit.ly/CRA-PWA"
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl: string, config?: Config) {
navigator.serviceWorker
.register(swUrl)
.then((registration) => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === "installed") {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
"New content is available and will be used when all " +
"tabs for this page are closed. See https://bit.ly/CRA-PWA."
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log("Content is cached for offline use.");
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch((error) => {
console.error("Error during service worker registration:", error);
});
}
function checkValidServiceWorker(swUrl: string, config?: Config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, {
headers: { "Service-Worker": "script" },
})
.then((response) => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get("content-type");
if (
response.status === 404 ||
(contentType != null && contentType.indexOf("javascript") === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then((registration) => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
"No internet connection found. App is running in offline mode."
);
});
}
export function unregister() {
if ("serviceWorker" in navigator) {
navigator.serviceWorker.ready
.then((registration) => {
registration.unregister();
})
.catch((error) => {
console.error(error.message);
});
}
}

5
src/setupTests.ts
View File

@@ -1,5 +0,0 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import "@testing-library/jest-dom/extend-expect";

4
src/state/selectors.ts
View File

@@ -9,8 +9,8 @@ import {
iconSizeAtom, iconSizeAtom,
iconColorAtom, iconColorAtom,
} from "./atoms"; } from "./atoms";
import { IconEntry } from "../lib"; import { IconEntry } from "@/lib";
import { icons } from "../lib/icons"; import { icons } from "@/lib/icons";
const fuse = new Fuse(icons, { const fuse = new Fuse(icons, {
keys: [{ name: "name", weight: 4 }, "tags", "categories"], keys: [{ name: "name", weight: 4 }, "tags", "categories"],

2
src/utils/index.ts
View File

@@ -1,6 +1,6 @@
import { IconStyle } from "@phosphor-icons/core"; import { IconStyle } from "@phosphor-icons/core";
import { SnippetType } from "../lib"; import { SnippetType } from "@/lib";
export function getCodeSnippets({ export function getCodeSnippets({
name, name,

1
src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite-plugin-svgr/client" />

26
tsconfig.json
View File

@@ -1,23 +1,22 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "baseUrl": "./",
"lib": [ "paths": {
"es6", "@/*": ["./src/*"]
"dom", },
"dom.iterable", "lib": ["DOM", "DOM.Iterable", "ESNext"],
"esnext" "target": "ESNext",
],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true, "esModuleInterop": true,
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
"strict": true, "strict": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"module": "esnext", "module": "ESNext",
"moduleResolution": "node", "moduleResolution": "node",
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"jsx": "react", "jsx": "react-jsx",
"sourceMap": true, "sourceMap": true,
"declaration": true, "declaration": true,
"noUnusedLocals": true, "noUnusedLocals": true,
@@ -26,11 +25,6 @@
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"noEmit": true "noEmit": true
}, },
"include": [ "include": ["src"],
"src" "exclude": ["node_modules", "build"]
],
"exclude": [
"node_modules",
"build"
]
} }

15
vite.config.ts Normal file
View File

@@ -0,0 +1,15 @@
import path from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from 'vite-plugin-svgr'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), svgr()],
resolve: {
alias: {
"~": path.resolve(__dirname, "./public"),
"@": path.resolve(__dirname, "./src"),
},
},
});