feat(app): various updates for v2.0.0

2023-03-08 01:05:49 -07:00
parent d379cea5bc
commit 85af26fd1c
17 changed files with 98 additions and 71 deletions
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@

 Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.

- 1047 icons and counting
+- 1,248 icons and counting
 - 6 weights: **Thin**, **Light**, **Regular**, **Bold**, **Fill**, and **Duotone**
 - Designed at 16 x 16px to read well small and scale up big
 - Raw stroke information retained to fine-tune the style
@@ -13,9 +13,9 @@ More ways to use at [phosphoricons.com](https://phosphoricons.com).

 ## For developers

-Phosphor is available as a [one-liner](https://github.com/phosphor-icons/phosphor-icons) script, [React package](https://github.com/phosphor-icons/phosphor-react), and [Vue package](https://github.com/phosphor-icons/phosphor-vue), all of which can be sourced from NPM or from a CDN.
+Phosphor is available for [web](https://github.com/phosphor-icons/web), [React](https://github.com/phosphor-icons/react), [Vue](https://github.com/phosphor-icons/vue), [Flutter](https://github.com/phosphor-icons/flutter), [Elm](https://github.com/phosphor-icons/phosphor-elm), and other frameworks and platforms.

-### HTML/CSS
+### Vanilla Web

 - **Simple to use** – We use a similar approach as many other icon sets out there, providing icons as a webfont that uses Unicode's Private Use Area character codes to map normally non-rendering characters to icons. But you don't need to know that. All you need to do is add the script to the document `<head>`, and drop in icons with an `<i/>` tag and the appropriate class:

@@ -23,26 +23,26 @@ Phosphor is available as a [one-liner](https://github.com/phosphor-icons/phospho
 <!DOCTYPE html>
 <html>
  <head>
-    <script src="https://unpkg.com/phosphor-icons"></script>
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
  </head>
  <body>
    <i class="ph-smiley"></i>
-    <i class="ph-heart-fill" style="color: hotpink"></i>
-    <i class="ph-cube-thin"></i>
+    <i class="ph-fill ph-heart" style="color: hotpink"></i>
+    <i class="ph-thin ph-cube"></i>
  </body>
 </html>
 ```

-Check out the full documentation on the [phosphor-icons](https://github.com/phosphor-icons/phosphor-icons) repo page.
+Check out the full documentation on the [@phosphor-icons/web](https://github.com/phosphor-icons/web) repo page.

 ### React

- **Powerful** – Phosphor's intuitive but powerful API can style the `color`, `size`, and `weight` of an icon with a few keystrokes, provide default styles to all icons via the Context API, or directly manipulate the SVG at runtime through render props to do some amazing things! Check out the full documentation on the [phosphor-react](https://github.com/phosphor-icons/phosphor-react) repo page.
+- **Powerful** – Phosphor's intuitive but powerful API can style the `color`, `size`, and `weight` of an icon with a few keystrokes, provide default styles to all icons via the Context API, or directly manipulate the SVG at runtime through render props to do some amazing things! Check out the full documentation on the [@phosphor-icons/react](https://github.com/phosphor-icons/react) repo page.

 ```jsx
 import React from "react";
 import ReactDOM from "react-dom";
-import { Smiley, Heart, Horse } from "phosphor-react";
+import { Smiley, Heart, Horse } from "@phosphor-icons/react";

 const App = () => {
  return (
@@ -62,7 +62,7 @@ ReactDOM.render(<App />, document.getElementById("root"));

 ### Vue

- **Parity** – As with React, you can manipulate the `color`, `size`, and `weight` of an icon with a few keystrokes, or provide default styles to all icons via the `provide/inject` API. It is fully tree-shakable and ready to use right away. Check out the full documentation on the [phosphor-vue](https://github.com/phosphor-icons/phosphor-vue) repo page.
+- **Parity** – As with React, you can manipulate the `color`, `size`, and `weight` of an icon with a few keystrokes, or provide default styles to all icons via the `provide/inject` API. It is fully tree-shakable and ready to use right away. Check out the full documentation on the [@phosphor-icons/vue](https://github.com/phosphor-icons/vue) repo page.

 ```html
 <template>
@@ -90,13 +90,15 @@ ReactDOM.render(<App />, document.getElementById("root"));

 ## Our Related Projects

- [phosphor-react](https://github.com/phosphor-icons/phosphor-react) ▲ Phosphor icon component library for React
- [phosphor-vue](https://github.com/phosphor-icons/phosphor-vue) ▲ Phosphor icon component library for Vue
- [phosphor-icons](https://github.com/phosphor-icons/phosphor-icons) ▲ Phosphor icons for Vanilla JS
- [phosphor-flutter](https://github.com/phosphor-icons/phosphor-flutter) ▲ Phosphor IconData library for Flutter
- [phosphor-webcomponents](https://github.com/phosphor-icons/phosphor-webcomponents) ▲ Phosphor icons as Web Components
- [phosphor-figma](https://github.com/phosphor-icons/phosphor-figma) ▲ Phosphor icons Figma plugin
- [phosphor-sketch](https://github.com/phosphor-icons/phosphor-sketch) ▲ Phosphor icons Sketch plugin
+- [@phosphor-icons/core](https://github.com/phosphor-icons/core) ▲ Phosphor icon assets and catalog
+- [@phosphor-icons/react](https://github.com/phosphor-icons/react) ▲ Phosphor icon component library for React
+- [@phosphor-icons/web](https://github.com/phosphor-icons/web) ▲ Phosphor icons for Vanilla JS
+- [@phosphor-icons/vue](https://github.com/phosphor-icons/vue) ▲ Phosphor icon component library for Vue
+- [@phosphor-icons/elm](https://github.com/phosphor-icons/phosphor-elm) ▲ Phosphor icons for Elm
+- [@phosphor-icons/flutter](https://github.com/phosphor-icons/flutter) ▲ Phosphor IconData library for Flutter
+- [@phosphor-icons/webcomponents](https://github.com/phosphor-icons/webcomponents) ▲ Phosphor icons as Web Components
+- [@phosphor-icons/figma](https://github.com/phosphor-icons/figma) ▲ Phosphor icons Figma plugin
+- [@phosphor-icons/sketch](https://github.com/phosphor-icons/sketch) ▲ Phosphor icons Sketch plugin

 ## Community Projects

--- a/package.json
+++ b/package.json
@@ -27,11 +27,11 @@
    "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,vue}\""
  },
  "dependencies": {
-    "@phosphor-icons/core": "^1.4.7",
+    "@phosphor-icons/core": "^2.0.2",
+    "@phosphor-icons/react": "^2.0.4",
    "file-saver": "^2.0.2",
    "framer-motion": "^9.0.1",
    "fuse.js": "^6.4.1",
-    "phosphor-react": "^1.4.1",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
--- a/src/components/Banner/Banner.css
+++ b/src/components/Banner/Banner.css
@@ -4,14 +4,9 @@
  left: 0;
  right: 0;
  border-radius: 0;
-  /* top: 8px;
-  left: 8px;
-  right: 8px;
-  max-width: 1120px; */
  display: flex;
  padding: 12px;
  color: white;
-  text-align: center;
  margin: auto;
  background-color: var(--eggplant);
  z-index: 1;
@@ -31,10 +26,11 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  gap: 8px;
+  gap: 20px;
  flex: 1;
  max-width: 1120px;
  margin: auto;
+  font-family: "IBM Plex Mono";
 }

 .banner-button {
@@ -50,3 +46,10 @@
 .banner-button:active {
  opacity: 0.7;
 }
+
+.message {
+  display: grid;
+  grid-template-columns: 32px 1fr;
+  align-items: center;
+  gap: 20px;
+}
--- a/src/components/Banner/Banner.tsx
+++ b/src/components/Banner/Banner.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, Dispatch, SetStateAction } from "react";
 import { motion, AnimatePresence, Variants } from "framer-motion";
-import { XCircle } from "phosphor-react";
+import { XCircle } from "@phosphor-icons/react";
 import ReactGA from "react-ga4";

 import { useLocalStorage } from "@/hooks";
@@ -69,7 +69,7 @@ const Banner = ({ id, children, onClose }: BannerProps) => {
                e.key === "Enter" && handleClose();
              }}
            >
-              <XCircle color="currentColor" size={28} weight="fill" />
+              <XCircle color="currentColor" size={28} weight="regular" />
            </button>
          </div>
        </motion.aside>
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,6 +1,6 @@
 import { useRecoilValue } from "recoil";
 import { motion, AnimatePresence, Variants } from "framer-motion";
-import { Coffee, Heart, ArrowULeftUp } from "phosphor-react";
+import { Coffee, Heart, ArrowULeftUp } from "@phosphor-icons/react";

 import Links from "@/components/Links/Links";

--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,4 +1,8 @@
-import { ArrowCircleUpRight, ArrowCircleDown, Megaphone } from "phosphor-react";
+import {
+  ArrowCircleUpRight,
+  ArrowCircleDown,
+  Broadcast,
+} from "@phosphor-icons/react";

 import Banner from "@/components/Banner";

@@ -38,22 +42,19 @@ const handleScrollToIcons = () =>
 const Header = (_: HeaderProps) => {
  return (
    <header>
-      <Banner
-        id={Math.random().toString()}
-        children={
-          <>
-            <Megaphone mirrored color="var(--orange)" size={28} weight="fill" />
+      <Banner id="2.0">
+        <div className="message">
+          <Broadcast size={32} weight="fill" />
          <small>
-              Phosphor has some big updates, and some APIs have changed for
-              users of the Vanilla JS library. Please check our{" "}
+            Phosphor 2.0 is out, with some big updates and some small API
+            changes. Check our{" "}
            <a href="https://github.com/phosphor-icons/homepage#readme">
              documentation
            </a>{" "}
-              to see what's new...
+            to see what's new!
          </small>
-          </>
-        }
-      />
+        </div>
+      </Banner>
      <div className="header-contents">
        <div className="illustrations-top">
          <MarkerPurple id="marker-purple" />
--- a/src/components/IconGrid/DetailFooter.tsx
+++ b/src/components/IconGrid/DetailFooter.tsx
@@ -4,7 +4,12 @@ import { useHotkeys } from "react-hotkeys-hook";
 import { motion, AnimatePresence, Variants } from "framer-motion";
 import { Svg2Png } from "svg2png-converter";
 import { saveAs } from "file-saver";
-import { Copy, CheckCircle, DownloadSimple, XCircle } from "phosphor-react";
+import {
+  Copy,
+  CheckCircle,
+  DownloadSimple,
+  XCircle,
+} from "@phosphor-icons/react";
 import ReactGA from "react-ga4";

 import Tabs, { Tab } from "@/components/Tabs";
@@ -241,30 +246,33 @@ const DetailFooter = () => {
            </figure>
            <div className="detail-actions">
              <button
+                className="action-button"
                tabIndex={0}
                style={buttonBarStyle}
                onClick={handleDownloadPNG}
              >
-                <DownloadSimple size={24} color="currentColor" weight="fill" />{" "}
+                <DownloadSimple size={20} color="currentColor" weight="fill" />{" "}
                PNG
              </button>
              <button
+                className="action-button"
                tabIndex={0}
                style={buttonBarStyle}
                onClick={handleDownloadSVG}
              >
-                <DownloadSimple size={24} color="currentColor" weight="fill" />{" "}
+                <DownloadSimple size={20} color="currentColor" weight="fill" />{" "}
                SVG
              </button>
              <button
+                className="action-button"
                tabIndex={0}
                style={buttonBarStyle}
                onClick={handleCopySVG}
              >
                {copied === "SVG" ? (
-                  <CheckCircle size={24} color={successColor} weight="fill" />
+                  <CheckCircle size={20} color={successColor} weight="fill" />
                ) : (
-                  <Copy size={24} color="currentColor" weight="fill" />
+                  <Copy size={20} color="currentColor" weight="fill" />
                )}
                {copied === "SVG" ? "Copied!" : " SVG"}
              </button>
--- a/src/components/IconGrid/IconGrid.css
+++ b/src/components/IconGrid/IconGrid.css
@@ -78,7 +78,7 @@

 .snippet pre {
  display: flex;
-  align-items: center;
+  align-items: flex-start;
  text-overflow: ellipsis;
  -moz-user-select: all;
  -webkit-user-select: all;
@@ -142,7 +142,7 @@

 .close-button {
  color: inherit;
-  background: var(--background);
+  background: transparent;
  height: unset !important;
  padding: 0 !important;
  margin: 0 !important;
@@ -154,6 +154,18 @@
  cursor: pointer;
 }

+.close-button::before {
+  content: "";
+  background: var(--background);
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  top: 5px;
+  left: 5px;
+  border-radius: 50%;
+  z-index: -1;
+}
+
 .close-button:active {
  opacity: 0.7;
 }
@@ -238,6 +250,10 @@ figcaption > p {
    bottom: -4px;
    display: flex;
    flex-direction: column;
-    height: 60vh;
+    height: 440px;
  }
 }
+
+.action-button svg {
+  margin-right: 6px;
+}
--- a/src/components/IconGrid/IconGrid.tsx
+++ b/src/components/IconGrid/IconGrid.tsx
@@ -1,7 +1,7 @@
 import { useRef, useEffect } from "react";
 import { useRecoilValue } from "recoil";
 import { motion, useAnimation } from "framer-motion";
-import { IconContext } from "phosphor-react";
+import { IconContext } from "@phosphor-icons/react";

 import {
  iconWeightAtom,
--- a/src/components/Links/Links.tsx
+++ b/src/components/Links/Links.tsx
@@ -1,4 +1,4 @@
-import { ArrowElbowDownRight } from "phosphor-react";
+import { ArrowElbowDownRight } from "@phosphor-icons/react";

 import { iconCount } from "@/lib/icons";
 import OutboundLink from "@/components/OutboundLink";
--- a/src/components/Notice/Notice.tsx
+++ b/src/components/Notice/Notice.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { motion } from "framer-motion";
 import { useRecoilValue } from "recoil";
-import { HourglassMedium, Question, SmileyXEyes } from "phosphor-react";
+import { HourglassMedium, Question, SmileyXEyes } from "@phosphor-icons/react";

 import { searchQueryAtom } from "@/state";

--- a/src/components/SearchInput/SearchInput.tsx
+++ b/src/components/SearchInput/SearchInput.tsx
@@ -8,7 +8,7 @@ import {
 import { useRecoilState } from "recoil";
 import { useDebounce } from "react-use";
 import { useHotkeys } from "react-hotkeys-hook";
-import { Command, MagnifyingGlass, X, HourglassHigh } from "phosphor-react";
+import { Command, MagnifyingGlass, X, HourglassHigh } from "@phosphor-icons/react";
 import ReactGA from "react-ga4";

 import { searchQueryAtom } from "@/state";
--- a/src/components/SettingsActions/SettingsActions.tsx
+++ b/src/components/SettingsActions/SettingsActions.tsx
@@ -1,5 +1,5 @@
 import { useRecoilValue, useResetRecoilState } from "recoil";
-import { ArrowCounterClockwise, CheckCircle, Link } from "phosphor-react";
+import { ArrowCounterClockwise, CheckCircle, Link } from "@phosphor-icons/react";

 import { useTransientState } from "@/hooks";
 import {
--- a/src/components/StyleInput/StyleInput.tsx
+++ b/src/components/StyleInput/StyleInput.tsx
@@ -1,7 +1,7 @@
 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";
--- a/src/components/Tabs/Tabs.css
+++ b/src/components/Tabs/Tabs.css
@@ -6,18 +6,19 @@
 .tabs-header {
  display: flex;
  align-items: center;
-  gap: 8px;
+  gap: 4px;
 }

 button.tab {
  all: unset;
-  padding: 4px;
+  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 {
@@ -35,11 +36,9 @@ button.tab.active {

 .tab-content {
  flex: 1;
-  height: 80px;
-  max-height: 80px;
-  padding: 16px;
-  display: grid;
-  place-items: center;
+  height: 77px;
+  max-height: 77px;
+  padding: 20px 20px 10px;
  border-radius: 8px;
  background-color: var(--background);
  overflow-y: auto;
--- a/src/lib/icons.ts
+++ b/src/lib/icons.ts
@@ -1,4 +1,4 @@
-import * as Icons from "phosphor-react";
+import * as Icons from "@phosphor-icons/react";
 import { icons as iconData } from "@phosphor-icons/core";

 import { IconEntry } from ".";
@@ -12,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);
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,4 +1,4 @@
-import { Icon } from "phosphor-react";
+import { Icon } from "@phosphor-icons/react";
 import { IconEntry as CoreEntry } from "@phosphor-icons/core";

 export interface IconEntry extends CoreEntry {