- The 2022 Figma Community Awards are here!
-
-
+
+ {children}
+
+
+ {this.state.errorMessage}
; } diff --git a/src/components/ErrorBoundary/index.ts b/src/components/ErrorBoundary/index.ts new file mode 100644 index 0000000..3406bab --- /dev/null +++ b/src/components/ErrorBoundary/index.ts @@ -0,0 +1 @@ +export { default } from "./ErrorBoundary"; diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index 5168379..60a3601 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -1,5 +1,5 @@ footer { - background-color: #925bff; + background-color: var(--purple); } #back-to-top-button { @@ -8,6 +8,16 @@ footer { margin: 0; border-radius: 50%; z-index: 2; + font-size: 56px; +} + +#back-to-top-button:active { + transform: translate(4px, 4px) !important; + box-shadow: 0 0 0 0 black; +} + +#back-to-top-button svg { + margin-right: unset; } .container { @@ -65,11 +75,7 @@ footer .links { width: 56px; height: 56px; padding: 0; - } - - #back-to-top-button img { - width: 28px; - height: 28px; + font-size: 28px; } footer .links { @@ -133,17 +139,11 @@ footer .links { top: 276px; } - /* #command { - position: absolute; - left: 532px; - top: 150px; - } */ - .illustrations-footer { display: initial; position: absolute; left: -240px; - top: 656px; + top: 632px; height: 584px; overflow: hidden; } diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 3112c44..58b1b0c 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -1,30 +1,51 @@ -import React from "react"; -import { Coffee, Heart } from "phosphor-react"; +import { useRecoilValue } from "recoil"; +import { motion, AnimatePresence, Variants } from "framer-motion"; +import { Coffee, Heart, ArrowULeftUp } from "@phosphor-icons/react"; -import uArrowUpLeft from "../../assets/u-arrow-up-left.svg"; -import markerGreen from "../../assets/marker-green.svg"; -import postIt from "../../assets/footer-mobile.svg"; -import Links from "../Links/Links"; +import Links from "@/components/Links/Links"; + +import { ReactComponent as MarkerGreen } from "@/assets/marker-green.svg"; +import { ReactComponent as PostIt } from "@/assets/footer-mobile.svg"; +import { useMediaQuery } from "@/hooks"; +import { selectionEntryAtom } from "@/state"; import "./Footer.css"; type FooterProps = {}; -const Footer: React.FC
+
+
- 
- 
- 
- 
- 
- 
- 
+ 
- 
+
@@ -73,20 +88,12 @@ const Header: React.FC = () => {
- 
- 
- 
- 
- 
- 
+
+
+ ),
+ };
+ })
+ );
+
+ return [snippets, tabs];
+ }, [entry, weight, size, copied, isDark]);
+
+ useHotkeys("esc", () => setSelectionEntry(null));
+
+ useEffect(() => {
+ if (!entry) return;
+ ReactGA.event({
+ category: "Grid",
+ action: "Details",
+ label: entry.name,
+ });
+ }, [entry]);
+
+ const buttonBarStyle: CSSProperties = {
+ color: isDark ? "white" : buttonColor,
+ backgroundColor: "transparent",
+ };
+
+ const handleCopySnippet = (
+ event: React.MouseEvent
+
+ {isWeightSupported
+ ? snippets[type]
+ : "This weight is not yet supported"}
+
+
+
+
+
+
+
+
+
+
+ {entry.name}
+ + available in v{entry.published_in.toFixed(1)}.0+ + +
+
+
+
+
+ {name}
-
- {type}
-
- );
- })}
-
-
-
- {isWeightSupported
- ? snippets[type]
- : "This weight is not yet supported"}
-
-
-
-
-
-
-
-
-
+ {
index: number;
- spans: number;
isDark: boolean;
entry: IconEntry;
originOffset: MutableRefObject<{ top: number; left: number }>;
@@ -31,18 +30,18 @@ const itemVariants = {
}),
};
-const IconGridItem: React.FC = (props) => {
- const { index, originOffset, entry } = props;
+const IconGridItem = (props: IconGridItemProps) => {
+ const { index, originOffset, entry, style } = props;
const { name, Icon } = entry;
- const [open, setOpen] = useRecoilState(iconPreviewOpenAtom);
- const isOpen = open === name;
+ const [selection, setSelectionEntry] = useRecoilState(selectionEntryAtom);
+ const isOpen = selection?.name === name;
const isNew = entry.tags.includes("*new*");
const isUpdated = entry.tags.includes("*updated*");
const delayRef = useRef(0);
const offset = useRef({ top: 0, left: 0 });
const ref = useRef();
- const handleOpen = () => setOpen(isOpen ? false : name);
+ const handleOpen = () => setSelectionEntry(isOpen ? null : entry);
// The measurement for all elements happens in the layoutEffect cycle
// This ensures that when we calculate distance in the effect cycle
@@ -76,8 +75,8 @@ const IconGridItem: React.FC = (props) => {
ref={ref}
tabIndex={0}
style={{
- order: index,
- backgroundColor: isOpen ? "rgba(163, 159, 171, 0.1)" : undefined,
+ ...style,
+ backgroundColor: isOpen ? "var(--translucent)" : undefined,
}}
custom={delayRef}
transition={transition}
@@ -92,9 +91,6 @@ const IconGridItem: React.FC = (props) => {
{isUpdated && •}
-
- {isOpen &&
);
};
diff --git a/src/components/IconGrid/TagCloud.css b/src/components/IconGrid/TagCloud.css
index 793edd6..57ee857 100644
--- a/src/components/IconGrid/TagCloud.css
+++ b/src/components/IconGrid/TagCloud.css
@@ -2,31 +2,27 @@
display: flex;
flex-wrap: wrap;
justify-content: center;
- padding: 24px;
}
button.tag-button {
margin: 4px;
border-radius: 4px;
- background-color: rgba(194, 186, 196, 0.25);
+ background-color: var(--sheer);
outline: none;
cursor: pointer;
transition: background-color 200ms ease, box-shadow 200ms ease;
+ color: var(--foreground);
}
button.tag-button:hover {
- background-color: rgba(194, 186, 196, 0.7);
+ background-color: var(--soft);
}
-button.tag-button:focus {
- box-shadow: 0 0 0 1px rgba(194, 186, 196, 0.7);
+button.tag-button:focus-visible {
+ box-shadow: 0 0 0 1px var(--soft);
}
.tag-button code {
padding: 4px;
font-size: 12px;
}
-
-.dark {
- color: white;
-}
diff --git a/src/components/IconGrid/TagCloud.tsx b/src/components/IconGrid/TagCloud.tsx
index 85121f8..a551594 100644
--- a/src/components/IconGrid/TagCloud.tsx
+++ b/src/components/IconGrid/TagCloud.tsx
@@ -1,23 +1,24 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
import { useSetRecoilState } from "recoil";
-import { searchQueryAtom } from "../../state/atoms";
+import { useMediaQuery } from "@/hooks";
+import { searchQueryAtom } from "@/state";
import "./TagCloud.css";
interface TagCloudProps {
name: string;
tags: string[];
- isDark: boolean;
}
-const TagCloud: React.FC = ({ name, tags, isDark }) => {
+const TagCloud = ({ name, tags }: TagCloudProps) => {
+ const isMobile = useMediaQuery("(max-width: 719px)");
const setQuery = useSetRecoilState(searchQueryAtom);
const handleTagClick = useCallback(
(tag: string) => {
setQuery(tag);
- document.getElementById("search-input")?.focus();
+ !isMobile && document.getElementById("search-input")?.focus();
},
- [setQuery]
+ [setQuery, isMobile]
);
return (
@@ -28,7 +29,7 @@ const TagCloud: React.FC = ({ name, tags, isDark }) => {
className="tag-button"
onClick={() => void handleTagClick(tag)}
>
- = () => {
+const Links = (_: LinksProps) => {
return (
= () => {
Download all ({iconCount})
+
Figma library
{" / "}
plugin
+
= () => {
Sketch plugin
+
Donate on PayPal
-
+
{" / "}
-
+
Patreon
-
+
- {/*
);
diff --git a/src/components/Links/index.ts b/src/components/Links/index.ts
new file mode 100644
index 0000000..4ca5192
--- /dev/null
+++ b/src/components/Links/index.ts
@@ -0,0 +1 @@
+export { default } from "./Links";
diff --git a/src/components/Notice/Notice.tsx b/src/components/Notice/Notice.tsx
index d54078b..d22cd76 100644
--- a/src/components/Notice/Notice.tsx
+++ b/src/components/Notice/Notice.tsx
@@ -1,26 +1,21 @@
-import React from "react";
+import { ReactNode } from "react";
import { motion } from "framer-motion";
import { useRecoilValue } from "recoil";
+import { HourglassMedium, Question, SmileyXEyes } from "@phosphor-icons/react";
-import { isDarkThemeSelector } from "../../state/selectors";
-import { searchQueryAtom } from "../../state/atoms";
-import { HourglassMedium, Question, SmileyXEyes } from "phosphor-react";
+import { searchQueryAtom } from "@/state";
interface NoticeProps {
message?: string;
type?: "wait" | "help" | "warn" | "none";
+ children?: ReactNode;
}
-const Notice: React.FC = ({
- message,
- type = "warn",
- children,
-}) => {
- const isDark = useRecoilValue(isDarkThemeSelector);
+const Notice = ({ message, type = "warn", children }: NoticeProps) => {
const query = useRecoilValue(searchQueryAtom);
return (
-
-
+
{filteredQueryResults.map((iconEntry, index) => (
+
);
diff --git a/src/components/IconGrid/IconGridItem.tsx b/src/components/IconGrid/IconGridItem.tsx
index 9ef19f3..505f40d 100644
--- a/src/components/IconGrid/IconGridItem.tsx
+++ b/src/components/IconGrid/IconGridItem.tsx
@@ -1,19 +1,18 @@
-import React, {
+import {
useRef,
useLayoutEffect,
useEffect,
MutableRefObject,
+ HTMLAttributes,
} from "react";
import { useRecoilState } from "recoil";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion } from "framer-motion";
-import { iconPreviewOpenAtom } from "../../state/atoms";
-import DetailsPanel from "./DetailsPanel";
-import { IconEntry } from "../../lib";
+import { IconEntry } from "@/lib";
+import { selectionEntryAtom } from "@/state";
-interface IconGridItemProps {
+interface IconGridItemProps extends HTMLAttributes{tag}
+ {tag}
{tag === "*new*" && •}
{tag === "*updated*" && •}
diff --git a/src/components/IconGrid/index.ts b/src/components/IconGrid/index.ts
new file mode 100644
index 0000000..4078c88
--- /dev/null
+++ b/src/components/IconGrid/index.ts
@@ -0,0 +1 @@
+export { default } from "./IconGrid";
diff --git a/src/components/Links/Links.css b/src/components/Links/Links.css
index fd241ef..710549d 100644
--- a/src/components/Links/Links.css
+++ b/src/components/Links/Links.css
@@ -23,6 +23,7 @@
a.nav-link {
text-decoration: none;
position: relative;
+ cursor: pointer;
color: black;
}
diff --git a/src/components/Links/Links.tsx b/src/components/Links/Links.tsx
index 8c8b41e..4d65524 100644
--- a/src/components/Links/Links.tsx
+++ b/src/components/Links/Links.tsx
@@ -1,21 +1,20 @@
-import React from "react";
-import { OutboundLink } from "react-ga";
-import { ArrowElbowDownRight } from "phosphor-react";
+import { ArrowElbowDownRight } from "@phosphor-icons/react";
-import { iconCount } from "../../lib/icons";
+import { iconCount } from "@/lib/icons";
+import OutboundLink from "@/components/OutboundLink";
import "./Links.css";
interface LinksProps {}
-const Links: React.FC
-
+
- */}
-
-
+
,
+ HTMLAnchorElement
+ > {
+ eventLabel: string;
+}
+
+const NEWTAB = "_blank";
+const MIDDLECLICK = 1;
+const DEFAULT_META: UaEventOptions = {
+ category: "Outbound",
+ action: "Click",
+};
+
+const OutboundLink = ({
+ eventLabel,
+ target,
+ href,
+ ...props
+}: OutboundLinkProps) => {
+ const handleClick: MouseEventHandler = useCallback(
+ (event) => {
+ const eventMeta = { ...DEFAULT_META, label: eventLabel };
+ const sameTarget = target !== NEWTAB;
+ const normalClick = !(
+ event.ctrlKey ||
+ event.shiftKey ||
+ event.metaKey ||
+ event.button === MIDDLECLICK
+ );
+
+ if (!!href && sameTarget && normalClick) {
+ event.preventDefault();
+ ReactGA.event(eventMeta);
+ window.location.href = href;
+ } else {
+ ReactGA.event(eventMeta);
+ }
+ },
+ [href, eventLabel]
+ );
+
+ return (
+
+ );
+};
+
+export default OutboundLink;
diff --git a/src/components/OutboundLink/index.ts b/src/components/OutboundLink/index.ts
new file mode 100644
index 0000000..b54bc9a
--- /dev/null
+++ b/src/components/OutboundLink/index.ts
@@ -0,0 +1 @@
+export { default } from "./OutboundLink";
diff --git a/src/components/SearchInput/SearchInput.css b/src/components/SearchInput/SearchInput.css
index 4091e23..9e96243 100644
--- a/src/components/SearchInput/SearchInput.css
+++ b/src/components/SearchInput/SearchInput.css
@@ -6,7 +6,7 @@
padding: 0 24px;
border-radius: 8px;
color: white;
- background-color: rgba(255, 255, 255, 0.05);
+ background-color: var(--scrim);
}
.search-bar:focus-within {
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
index 25ec8d6..414d55f 100644
--- a/src/components/SearchInput/SearchInput.tsx
+++ b/src/components/SearchInput/SearchInput.tsx
@@ -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 { useDebounce } from "react-use";
import { useHotkeys } from "react-hotkeys-hook";
-import { Command, MagnifyingGlass, X, HourglassHigh } from "phosphor-react";
-import ReactGA from "react-ga";
+import { Command, MagnifyingGlass, X, HourglassHigh } from "@phosphor-icons/react";
+import ReactGA from "react-ga4";
-import { searchQueryAtom } from "../../state/atoms";
+import { searchQueryAtom } from "@/state";
import "./SearchInput.css";
const apple = /iPhone|iPod|iPad|Macintosh|MacIntel|MacPPC/i;
@@ -16,7 +22,7 @@ const isMobile = mobile.test(window.navigator.userAgent);
type SearchInputProps = {};
-const SearchInput: React.FC = () => {
+const SearchInput = (_: SearchInputProps) => {
const [value, setValue] = useState("");
const [query, setQuery] = useRecoilState(searchQueryAtom);
const inputRef =
@@ -78,8 +84,8 @@ const SearchInput: React.FC = () => {
value={value}
placeholder="Search"
onChange={({ currentTarget }) => setValue(currentTarget.value)}
- onKeyPress={({ currentTarget, key }) =>
- key === "Enter" && currentTarget.blur()
+ onKeyDown={({ currentTarget, key }) =>
+ (key === "Enter" || key === "Escape") && currentTarget.blur()
}
/>
{!value && !isMobile && {isApple ? }
@@ -94,7 +100,7 @@ const SearchInput: React.FC = () => {
);
};
-const Keys: React.FC<{}> = ({ children }) => (
+const Keys = ({ children }: { children?: ReactNode }) => (
) => {
event.currentTarget.blur();
};
-const SizeInput: React.FC = () => {
+const SizeInput = (_: SizeInputProps) => {
const [size, setSize] = useRecoilState(iconSizeAtom);
const handleSizeChange = useCallback(
diff --git a/src/components/SizeInput/index.ts b/src/components/SizeInput/index.ts
new file mode 100644
index 0000000..eb5f6d1
--- /dev/null
+++ b/src/components/SizeInput/index.ts
@@ -0,0 +1 @@
+export { default } from "./SizeInput";
diff --git a/src/components/StyleInput/StyleInput.css b/src/components/StyleInput/StyleInput.css
index dd94d75..279205e 100644
--- a/src/components/StyleInput/StyleInput.css
+++ b/src/components/StyleInput/StyleInput.css
@@ -1,20 +1,3 @@
-/* .style-select {
- position: relative;
-}
-
-.style-select {
- background-color: gold;
- border-radius: 24px;
- box-shadow: 4px 4px #ccc;
- display: none;
-}
-
-.style-select option {
- background-color: gold;
- border-radius: 24px;
- display: none;
-} */
-
.react-dropdown-select {
width: 176px !important;
height: 48px !important;
@@ -22,7 +5,7 @@
padding: 0 24px !important;
color: white;
border-radius: 8px !important;
- background-color: rgba(255, 255, 255, 0.05);
+ background-color: var(--scrim);
font-size: 16px;
border: none !important;
}
@@ -50,19 +33,6 @@
box-shadow: none !important;
}
-/* .react-dropdown-select-type-single {
- height: 100% !important;
-} */
-
-/* .react-dropdown-select-clear,
-.react-dropdown-select-dropdown-handle {
- color: #fff;
-} */
-
-/* .react-dropdown-select-option {
- border: 1px solid #000;
-} */
-
.react-dropdown-select-item {
color: #333;
height: 40px !important;
@@ -89,25 +59,24 @@
max-height: 300px;
overflow: auto;
z-index: 9;
- /* background: rgb(29, 20, 20) !important; */
box-shadow: none;
}
.react-dropdown-select-item {
color: black;
}
.react-dropdown-select-item:hover {
- background-color: #ffd171 !important;
+ background-color: var(--yellow) !important;
}
.react-dropdown-select-item.react-dropdown-select-item-selected,
.react-dropdown-select-item.react-dropdown-select-item-active {
color: black !important;
- background-color: #ffd171 !important;
+ background-color: var(--yellow) !important;
}
.react-dropdown-select-item:focus {
color: black !important;
- background-color: #ffd171 !important;
+ background-color: var(--yellow) !important;
}
.react-dropdown-select-item.react-dropdown-select-item-disabled {
diff --git a/src/components/StyleInput/StyleInput.tsx b/src/components/StyleInput/StyleInput.tsx
index cd52a5c..c18c285 100644
--- a/src/components/StyleInput/StyleInput.tsx
+++ b/src/components/StyleInput/StyleInput.tsx
@@ -1,10 +1,11 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
import { useRecoilState } from "recoil";
import Select from "react-dropdown-select";
-import { PencilLine } from "phosphor-react";
+import { PencilLine } from "@phosphor-icons/react";
import { IconStyle } from "@phosphor-icons/core";
-import { iconWeightAtom } from "../../state/atoms";
+import { iconWeightAtom } from "@/state";
+
import "./StyleInput.css";
type WeightOption = { key: string; value: IconStyle; icon: JSX.Element };
@@ -44,7 +45,7 @@ const options: WeightOption[] = [
type StyleInputProps = {};
-const StyleInput: React.FC = () => {
+const StyleInput = (_: StyleInputProps) => {
const [style, setStyle] = useRecoilState(iconWeightAtom);
const currentStyle = useMemo(
diff --git a/src/components/StyleInput/index.ts b/src/components/StyleInput/index.ts
new file mode 100644
index 0000000..4f7b186
--- /dev/null
+++ b/src/components/StyleInput/index.ts
@@ -0,0 +1 @@
+export { default } from "./StyleInput";
diff --git a/src/components/Tabs/Tabs.css b/src/components/Tabs/Tabs.css
new file mode 100644
index 0000000..1c9a591
--- /dev/null
+++ b/src/components/Tabs/Tabs.css
@@ -0,0 +1,56 @@
+.tabs {
+ display: flex;
+ flex-direction: column;
+}
+
+.tabs-header {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+button.tab {
+ all: unset;
+ padding: 6px 4px;
+ font-size: 12px;
+ text-align: center;
+ cursor: pointer;
+ flex: 1;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ z-index: 2;
+}
+
+button.tab:focus-visible {
+ outline: 1px solid currentColor;
+}
+
+button.tab:hover:not(.active) {
+ background-color: var(--sheer);
+}
+
+button.tab.active {
+ background-color: var(--background);
+ border-bottom: none;
+}
+
+.tab-content {
+ flex: 1;
+ height: 77px;
+ max-height: 77px;
+ padding: 20px 20px 10px;
+ border-radius: 8px;
+ background-color: var(--background);
+ overflow-y: auto;
+}
+
+@media screen and (max-width: 719px) {
+ .tabs {
+ flex: 1;
+ }
+
+ .tab-content {
+ height: unset;
+ max-height: unset;
+ }
+}
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
new file mode 100644
index 0000000..f524380
--- /dev/null
+++ b/src/components/Tabs/Tabs.tsx
@@ -0,0 +1,59 @@
+import { CSSProperties, ReactNode, useState } from "react";
+
+import "./Tabs.css";
+
+export type Tab = {
+ header: ReactNode;
+ content: ReactNode;
+};
+
+type TabsProps = {
+ tabs: Tab[];
+ initialIndex?: number;
+ onTabChange?: (index: number) => void;
+};
+
+const contentStyles: Record = {
+ activeLeft: { borderTopLeftRadius: 0 },
+ activeRight: { borderTopRightRadius: 0 },
+} as const;
+
+const Tabs = ({ tabs, initialIndex = 0, onTabChange }: TabsProps) => {
+ const [activeIndex, setActiveIndex] = useState(
+ !!tabs[initialIndex] ? initialIndex : 0
+ );
+
+ return (
+ ({});
+
+ useEffect(() => {
+ const diff = simpleDiff(p.current, properties);
+
+ if (diff.length > 0) {
+ diff.forEach(([key, value]) => {
+ document.documentElement.style.setProperty(key, value);
+ });
+
+ p.current = properties;
+ }
+ }, [properties]);
+}
diff --git a/src/hooks/useEvent.ts b/src/hooks/useEvent.ts
new file mode 100644
index 0000000..251214b
--- /dev/null
+++ b/src/hooks/useEvent.ts
@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+
+export type UseEventTarget = HTMLElement | SVGElement | Document | Window;
+
+export type UseEventMap = E extends HTMLElement
+ ? HTMLElementEventMap
+ : E extends SVGElement
+ ? SVGElementEventMap
+ : E extends Document
+ ? DocumentEventMap
+ : WindowEventMap;
+
+export type UseEventType = keyof UseEventMap;
+
+/**
+ * Attach event listeners to arbitrary targets, and perform necessary cleanup
+ * when unmounting. Provides type inference for the listener based on the
+ * provided event name (currently supports {@link Window}, {@link Document},
+ * and subclasses of {@link HTMLElement} and {@link SVGElement}).
+ *
+ * @param type an {@link https://developer.mozilla.org/en-US/docs/Web/Events#event_listing event type}
+ * @param listener a callback to be fired on the event
+ * @param options {@link AddEventListenerOptions}
+ * @param el the target element to attack the listener. Defaults to
+ * {@link Document} when omitted.
+ */
+export default function useEvent<
+ K extends UseEventType,
+ M extends UseEventMap,
+ T extends UseEventTarget = Document
+>(
+ type: K,
+ listener: (this: T, ev: M[K]) => any,
+ options?: boolean | AddEventListenerOptions,
+ el?: T
+) {
+ useEffect(() => {
+ const target = el ?? document;
+ // @ts-ignore
+ target.addEventListener(type, listener, options);
+
+ // @ts-ignore
+ return () => target.removeEventListener(type, listener);
+ }, [el, type]);
+}
diff --git a/src/hooks/useGridSpans.ts b/src/hooks/useGridSpans.ts
deleted file mode 100644
index e65e604..0000000
--- a/src/hooks/useGridSpans.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useWindowSize } from "react-use";
-
-const MOBILE_BREAKPOINT = 536;
-
-const GRID_PADDING = 32; // .grid-container { padding }
-const TOOLBAR_WIDTH = 17; // IS THIS BROWSER-SPECIFIC?
-const MAX_GRID_WIDTH = 1120; // .grid { max-width }
-const ITEM_WIDTH = 168; // .grid-item { width; height; margin }
-const ITEM_WIDTH_MOBILE = 108; // .grid-item { width; height; margin }
-
-export default (): number => {
- const { width } = useWindowSize();
- const itemWidth = width <= MOBILE_BREAKPOINT ? ITEM_WIDTH_MOBILE : ITEM_WIDTH;
-
- return Math.floor(
- Math.min(width - GRID_PADDING - TOOLBAR_WIDTH, MAX_GRID_WIDTH) / itemWidth
- );
-};
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
new file mode 100644
index 0000000..4d49cbb
--- /dev/null
+++ b/src/hooks/useLocalStorage.ts
@@ -0,0 +1,40 @@
+import { useCallback, useState, Dispatch, SetStateAction } from "react";
+import { STORAGE_KEY } from "@/state";
+
+type Initializer = () => S;
+type Setter = (prev: S) => S;
+type Action = S | Setter | Initializer;
+
+function expand(action: Action, prev?: S) {
+ if (typeof action === "function") {
+ return (action as Setter)(prev!);
+ } else {
+ return action;
+ }
+}
+
+export default function useLocalStorage(
+ key: string,
+ fallbackState: S | (() => S)
+): [S, Dispatch>, (partial: Partial) => void] {
+ const [value, setValue] = useState(() => {
+ let val = localStorage.getItem(STORAGE_KEY + key);
+ if (val) return JSON.parse(val) as S;
+ return expand(fallbackState);
+ });
+
+ const set: Dispatch> = useCallback((val) => {
+ setValue((prev) => {
+ const next = expand(val, prev);
+ localStorage.setItem(STORAGE_KEY + key, JSON.stringify(next));
+ return next;
+ });
+ }, []);
+
+ const insert = useCallback(
+ (partial: Partial) => set((value) => ({ ...value, ...partial })),
+ []
+ );
+
+ return [value, set, insert];
+}
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
new file mode 100644
index 0000000..0e8a5c9
--- /dev/null
+++ b/src/hooks/useMediaQuery.ts
@@ -0,0 +1,12 @@
+import { useMemo, useReducer, Reducer } from "react";
+import useEvent from "./useEvent";
+
+const updater: Reducer = (s) => (s + 1) % 1_000_000;
+
+export default function useMediaQuery(query: string) {
+ const mq = useMemo(() => window.matchMedia(query), [query]);
+ const [, update] = useReducer(updater, 0);
+
+ useEvent("resize", update, { passive: true });
+ return mq.matches;
+}
diff --git a/src/hooks/usePersistSettings.ts b/src/hooks/usePersistSettings.ts
index 689c01d..13a6562 100644
--- a/src/hooks/usePersistSettings.ts
+++ b/src/hooks/usePersistSettings.ts
@@ -1,6 +1,11 @@
import { useRecoilValue } from "recoil";
+import {
+ iconWeightAtom,
+ iconSizeAtom,
+ iconColorAtom,
+ STORAGE_KEY,
+} from "@/state";
import useDebounce from "./useDebounce";
-import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "../state/atoms";
export default function usePersistSettings() {
const weight = useRecoilValue(iconWeightAtom);
@@ -10,7 +15,7 @@ export default function usePersistSettings() {
useDebounce(
() => {
const serializedState = JSON.stringify({ weight, size, color });
- window.localStorage.setItem("__phosphor_settings__", serializedState);
+ window.localStorage.setItem(STORAGE_KEY, serializedState);
},
2000,
[weight, size, color]
diff --git a/src/hooks/useSessionStorage.ts b/src/hooks/useSessionStorage.ts
new file mode 100644
index 0000000..9ce2453
--- /dev/null
+++ b/src/hooks/useSessionStorage.ts
@@ -0,0 +1,40 @@
+import { useCallback, useState, Dispatch, SetStateAction } from "react";
+import { STORAGE_KEY } from "@/state";
+
+type Initializer = () => S;
+type Setter = (prev: S) => S;
+type Action = S | Setter | Initializer;
+
+function expand(action: Action, prev?: S) {
+ if (typeof action === "function") {
+ return (action as Setter)(prev!);
+ } else {
+ return action;
+ }
+}
+
+export default function useSessionStorage(
+ key: string,
+ fallbackState: S | (() => S)
+): [S, Dispatch>, (partial: Partial) => void] {
+ const [value, setValue] = useState(() => {
+ let val = sessionStorage.getItem(STORAGE_KEY + key);
+ if (val) return JSON.parse(val) as S;
+ return expand(fallbackState);
+ });
+
+ const set: Dispatch> = useCallback((val) => {
+ setValue((prev) => {
+ const next = expand(val, prev);
+ sessionStorage.setItem(STORAGE_KEY + key, JSON.stringify(next));
+ return next;
+ });
+ }, []);
+
+ const insert = useCallback(
+ (partial: Partial) => set((value) => ({ ...value, ...partial })),
+ []
+ );
+
+ return [value, set, insert];
+}
diff --git a/src/index.tsx b/src/index.tsx
index 9a0e59d..050a569 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,27 +1,23 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
import { RecoilRoot } from "recoil";
-import * as serviceWorker from "./serviceWorker";
-import App from "./components/App/App";
-import ReactGA from "react-ga";
+import App from "./components/App";
+import ReactGA from "react-ga4";
-ReactGA.initialize("UA-179205759-1", { titleCase: false });
-ReactGA.pageview(window.location.pathname);
+const GA_MEASUREMENT_ID = 'G-1C1REQCLFB'
+ReactGA.initialize(GA_MEASUREMENT_ID);
-ReactDOM.render(
-
+const container = document.getElementById("root");
+const root = createRoot(container!);
+
+root.render(
+
- ,
- 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(`
%c sphorphosphor %co%cspho
diff --git a/src/lib/icons.ts b/src/lib/icons.ts
index 92639b3..99afcb1 100644
--- a/src/lib/icons.ts
+++ b/src/lib/icons.ts
@@ -1,12 +1,10 @@
-import * as Icons from "phosphor-react";
+import * as Icons from "@phosphor-icons/react";
import { icons as iconData } from "@phosphor-icons/core";
import { IconEntry } from ".";
export const icons: ReadonlyArray = iconData.map((entry) => ({
- name: entry.name,
- categories: entry.categories,
- tags: entry.tags,
+ ...entry,
Icon: Icons[entry.pascal_name as keyof typeof Icons] as Icons.Icon,
}));
@@ -14,6 +12,4 @@ if (process.env.NODE_ENV === "development") {
console.log(`${icons.length} icons`);
}
-export const iconCount = (icons.length * 6)
- .toString()
- .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+export const iconCount = Intl.NumberFormat("en-US").format(icons.length * 6);
diff --git a/src/lib/index.ts b/src/lib/index.ts
index fece71e..921793a 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,10 +1,7 @@
-import { Icon } from "phosphor-react";
-import { IconCategory } from "@phosphor-icons/core";
+import { Icon } from "@phosphor-icons/react";
+import { IconEntry as CoreEntry } from "@phosphor-icons/core";
-export interface IconEntry {
- name: string;
- categories: IconCategory[];
- tags: string[];
+export interface IconEntry extends CoreEntry {
Icon: Icon;
}
@@ -13,4 +10,5 @@ export enum SnippetType {
VUE = "Vue",
HTML = "HTML/CSS",
FLUTTER = "Flutter",
+ ELM = "Elm",
}
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5..0000000
--- a/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// ({
- key: "searchQueryAtom",
+ key: "searchQuery",
default: "",
});
export const iconWeightAtom = atom({
- key: "iconWeightAtom",
+ key: "iconWeight",
default: IconStyle.REGULAR,
});
export const iconSizeAtom = atom({
- key: "iconSizeAtom",
+ key: "iconSize",
default: 32,
});
export const iconColorAtom = atom({
- key: "iconColorAtom",
+ key: "iconColor",
default: "#000000",
});
export const iconPreviewOpenAtom = atom({
- key: "iconPreviewOpenAtom",
+ key: "iconPreviewOpen",
default: false,
});
+
+export const selectionEntryAtom = atom({
+ key: "selectionEntry",
+ default: null,
+});
diff --git a/src/state/index.ts b/src/state/index.ts
new file mode 100644
index 0000000..f9c6a4c
--- /dev/null
+++ b/src/state/index.ts
@@ -0,0 +1,4 @@
+export * from "./atoms";
+export * from "./selectors";
+
+export const STORAGE_KEY = "__phosphor_settings__";
diff --git a/src/state/selectors.ts b/src/state/selectors.ts
index 157aa2a..d76514a 100644
--- a/src/state/selectors.ts
+++ b/src/state/selectors.ts
@@ -9,8 +9,8 @@ import {
iconSizeAtom,
iconColorAtom,
} from "./atoms";
-import { IconEntry } from "../lib";
-import { icons } from "../lib/icons";
+import { IconEntry } from "@/lib";
+import { icons } from "@/lib/icons";
const fuse = new Fuse(icons, {
keys: [{ name: "name", weight: 4 }, "tags", "categories"],
@@ -20,7 +20,7 @@ const fuse = new Fuse(icons, {
});
export const filteredQueryResultsSelector = selector>({
- key: "filteredQueryResultsSelector",
+ key: "filteredQueryResults",
get: ({ get }) => {
const query = get(searchQueryAtom).trim().toLowerCase();
if (!query) return icons;
@@ -36,7 +36,7 @@ type CategorizedIcons = Partial>;
export const categorizedQueryResultsSelector = selector<
Readonly
>({
- key: "categorizedQueryResultsSelector",
+ key: "categorizedQueryResults",
get: ({ get }) => {
const filteredResults = get(filteredQueryResultsSelector);
return new Promise((resolve) =>
@@ -57,7 +57,7 @@ export const singleCategoryQueryResultsSelector = selectorFamily<
ReadonlyArray,
IconCategory
>({
- key: "singleCategoryQueryResultsSelector",
+ key: "singleCategoryQueryResults",
get:
(category: IconCategory) =>
({ get }) => {
@@ -71,7 +71,7 @@ export const singleCategoryQueryResultsSelector = selectorFamily<
});
export const isDarkThemeSelector = selector({
- key: "isDarkThemeSelector",
+ key: "isDarkTheme",
get: ({ get }) => TinyColor(get(iconColorAtom)).isLight(),
});
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 60b3979..bb28914 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,6 +1,6 @@
import { IconStyle } from "@phosphor-icons/core";
-import { SnippetType } from "../lib";
+import { SnippetType } from "@/lib";
export function getCodeSnippets({
name,
@@ -17,11 +17,13 @@ export function getCodeSnippets({
}): Record {
const isDefaultWeight = weight === "regular";
const isDefaultColor = color === "#000000";
+ const elmName = displayName.replace(/^\w/, (c) => c.toLowerCase());
+ const elmWeight = weight.replace(/^\w/, (c) => c.toUpperCase());
return {
- [SnippetType.HTML]: ``,
+ } ph-${name}">`,
[SnippetType.REACT]: `<${displayName} size={${size}} ${
!isDefaultColor ? `color="${color}" ` : ""
}${isDefaultWeight ? "" : `weight="${weight}" `}/>`,
@@ -38,6 +40,12 @@ export function getCodeSnippets({
},\n size: ${size.toFixed(1)},\n${
!isDefaultColor ? ` color: Color(0xff${color.replace("#", "")}),\n` : ""
})`,
+ [SnippetType.ELM]: `Phosphor.${elmName}${
+ isDefaultWeight ? "" : " " + elmWeight
+ }
+ |> withSize ${size}
+ |> withSizeUnit "px"
+ |> toHtml []`,
};
}
@@ -48,6 +56,6 @@ export function supportsWeight({
type: SnippetType;
weight: IconStyle;
}): boolean {
- if (type !== SnippetType.HTML && type !== SnippetType.FLUTTER) return true;
+ if (type !== SnippetType.FLUTTER) return true;
return weight !== IconStyle.DUOTONE;
}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..d816124
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
{children}
);
diff --git a/src/components/SearchInput/index.ts b/src/components/SearchInput/index.ts
new file mode 100644
index 0000000..1a2fa40
--- /dev/null
+++ b/src/components/SearchInput/index.ts
@@ -0,0 +1 @@
+export { default } from "./SearchInput";
diff --git a/src/components/SettingsActions/SettingsActions.css b/src/components/SettingsActions/SettingsActions.css
index 5a801d3..da317c5 100644
--- a/src/components/SettingsActions/SettingsActions.css
+++ b/src/components/SettingsActions/SettingsActions.css
@@ -1,17 +1,13 @@
button.action-button {
- background-color: rgba(255, 255, 255, 0.05);
+ background-color: var(--scrim);
color: white;
padding: 8px;
border-radius: 8px;
cursor: pointer;
}
-button.action-button:hover {
- background-color: rgba(255, 255, 255, 0.1);
-}
-
button.action-button:active {
- background-color: rgba(255, 255, 255, 0.2);
+ background-color: var(--sheer);
}
@media screen and (max-width: 558px) {
diff --git a/src/components/SettingsActions/SettingsActions.tsx b/src/components/SettingsActions/SettingsActions.tsx
index f7ef981..69c89ef 100644
--- a/src/components/SettingsActions/SettingsActions.tsx
+++ b/src/components/SettingsActions/SettingsActions.tsx
@@ -1,12 +1,17 @@
-import React from "react";
-import { ArrowCounterClockwise, CheckCircle, Link } from "phosphor-react";
import { useRecoilValue, useResetRecoilState } from "recoil";
-import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "../../state/atoms";
-import "./SettingsActions.css";
-import useTransientState from "../../hooks/useTransientState";
-import { resetSettingsSelector } from "../../state/selectors";
+import { ArrowCounterClockwise, CheckCircle, Link } from "@phosphor-icons/react";
-const SettingsActions: React.FC = () => {
+import { useTransientState } from "@/hooks";
+import {
+ iconWeightAtom,
+ iconSizeAtom,
+ iconColorAtom,
+ resetSettingsSelector,
+} from "@/state";
+
+import "./SettingsActions.css";
+
+const SettingsActions = () => {
const weight = useRecoilValue(iconWeightAtom);
const size = useRecoilValue(iconSizeAtom);
const color = useRecoilValue(iconColorAtom);
diff --git a/src/components/SettingsActions/index.ts b/src/components/SettingsActions/index.ts
new file mode 100644
index 0000000..1e0e12e
--- /dev/null
+++ b/src/components/SettingsActions/index.ts
@@ -0,0 +1 @@
+export { default } from "./SettingsActions";
diff --git a/src/components/SizeInput/SizeInput.css b/src/components/SizeInput/SizeInput.css
index 7529d38..d04a2a0 100644
--- a/src/components/SizeInput/SizeInput.css
+++ b/src/components/SizeInput/SizeInput.css
@@ -7,7 +7,7 @@
padding: 0 24px;
color: white;
border-radius: 8px;
- background-color: rgba(255, 255, 255, 0.05);
+ background-color: var(--scrim);
font-family: "Manrope", sans-serif;
font-size: 16px;
}
@@ -68,12 +68,12 @@
outline: none;
width: 24px; /* Set a specific slider handle width */
height: 24px; /* Slider handle height */
- box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);
+ box-shadow: 0 0 0 6px var(--sheer);
}
.size-bar input:focus::-webkit-slider-thumb {
outline: none;
width: 24px; /* Set a specific slider handle width */
height: 24px; /* Slider handle height */
- box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);
+ box-shadow: 0 0 0 6px var(--sheer);
}
diff --git a/src/components/SizeInput/SizeInput.tsx b/src/components/SizeInput/SizeInput.tsx
index d8e37be..7d8aaf9 100644
--- a/src/components/SizeInput/SizeInput.tsx
+++ b/src/components/SizeInput/SizeInput.tsx
@@ -1,7 +1,7 @@
import React, { useCallback } from "react";
import { useRecoilState } from "recoil";
-import { iconSizeAtom } from "../../state/atoms";
+import { iconSizeAtom } from "@/state";
import "./SizeInput.css";
type SizeInputProps = {};
@@ -14,7 +14,7 @@ const handleBlur = (event: React.UIEvent
+
+ );
+};
+
+export default Tabs;
diff --git a/src/components/Tabs/index.ts b/src/components/Tabs/index.ts
new file mode 100644
index 0000000..18ff5c3
--- /dev/null
+++ b/src/components/Tabs/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./Tabs";
+export type { Tab } from "./Tabs";
diff --git a/src/components/Toolbar/Toolbar.css b/src/components/Toolbar/Toolbar.css
index 1078f03..c9f5576 100644
--- a/src/components/Toolbar/Toolbar.css
+++ b/src/components/Toolbar/Toolbar.css
@@ -4,12 +4,12 @@ nav.toolbar {
top: -1px;
padding: 0;
margin: 0;
- background-color: #35313d;
- z-index: 1;
+ background-color: var(--eggplant);
+ z-index: 2;
display: flex;
justify-content: center;
align-items: center;
- box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15);
+ box-shadow: 0 2px 0 0 var(--shadow);
}
.toolbar-contents {
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
index ac3c17f..417b33c 100644
--- a/src/components/Toolbar/Toolbar.tsx
+++ b/src/components/Toolbar/Toolbar.tsx
@@ -1,11 +1,11 @@
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 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 = {};
diff --git a/src/components/Toolbar/index.ts b/src/components/Toolbar/index.ts
new file mode 100644
index 0000000..cec4f38
--- /dev/null
+++ b/src/components/Toolbar/index.ts
@@ -0,0 +1 @@
+export { default } from "./Toolbar";
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
new file mode 100644
index 0000000..eb8c161
--- /dev/null
+++ b/src/hooks/index.ts
@@ -0,0 +1,13 @@
+export { default as useCSSVariables } from "./useCSSVariables";
+export { default as useDebounce } from "./useDebounce";
+export { default as useEvent } from "./useEvent";
+export { default as useIconParameters } from "./useIconParameters";
+export { default as useLocalStorage } from "./useLocalStorage";
+export { default as useMediaQuery } from "./useMediaQuery";
+export { default as usePersistSettings } from "./usePersistSettings";
+export { default as useSessionStorage } from "./useSessionStorage";
+export { default as useThrottle } from "./useThrottle";
+export { default as useThrottled } from "./useThrottled";
+export { default as useTimeoutFn } from "./useTimeoutFn";
+export { default as useTransientState } from "./useTransientState";
+export { default as useUnmount } from "./useUnmount";
diff --git a/src/hooks/useCSSVariables.ts b/src/hooks/useCSSVariables.ts
new file mode 100644
index 0000000..787484f
--- /dev/null
+++ b/src/hooks/useCSSVariables.ts
@@ -0,0 +1,40 @@
+import { useEffect, useRef } from "react";
+
+type CSSCustomPropertyName = `--${string}`;
+
+type CSSCustomProperties = {
+ [property: CSSCustomPropertyName]: string | null;
+};
+
+function simpleDiff(prev: CSSCustomProperties, next: CSSCustomProperties) {
+ const merge = { ...prev, ...next };
+ return Object.entries(merge).reduce<
+ [property: CSSCustomPropertyName, value: string | null][]
+ >((acc, [k, val]) => {
+ let key = k as CSSCustomPropertyName;
+
+ if (
+ !prev[key as CSSCustomPropertyName] ||
+ prev[key as CSSCustomPropertyName] !== val
+ ) {
+ acc.push([key, val]);
+ }
+ return acc;
+ }, []);
+}
+
+export default function useCSSVariables(properties: CSSCustomProperties) {
+ const p = useRef
+ {tabs.map((tab, i) => (
+
+ ))}
+
+
+ {tabs[activeIndex]?.content}
+
+