added styles

destefanis · May 4, 2023 · 49e746b · 49e746b
1 parent 86cdcfd
commit 49e746b
Show file tree

Hide file tree

Showing 10 changed files with 405 additions and 79 deletions.
diff --git a/src/app/assets/chevron.svg b/src/app/assets/chevron.svg
diff --git a/src/app/assets/select-all.svg b/src/app/assets/select-all.svg
diff --git a/src/app/components/App.tsx b/src/app/components/App.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import Navigation from "./Navigation";
 import NodeList from "./NodeList";
 import LibraryPage from "./LibraryPage";
+import StylesPage from "./StylesPage";
 import PreloaderCSS from "./PreloaderCSS";
 import EmptyState from "./EmptyState";
 import Panel from "./Panel";
@@ -38,6 +39,7 @@ const App = ({}) => {
   const [emptyState, setEmptyState] = React.useState(false);
   const [libraries, setLibraries] = useState([]);
   const [localStyles, setLocalStyles] = useState({});
+  const [stylesInUse, setStylesInUse] = useState({});
   const librariesRef = React.useRef([]);
 
   window.addEventListener("keydown", function(e) {
@@ -327,6 +329,8 @@ const App = ({}) => {
         setLibraries(message);
       } else if (type === "local-styles-imported") {
         setLocalStyles(message);
+      } else if (type === "remote-styles-imported") {
+        setStylesInUse(message);
       }
     };
   }, []);
@@ -362,6 +366,8 @@ const App = ({}) => {
               onUpdateLibraries={handleUpdateLibraries}
               localStyles={localStyles}
             />
+          ) : activePage === "styles" ? (
+            <StylesPage stylesInUse={stylesInUse} />
           ) : (
             <BulkErrorList
               libraries={libraries}

diff --git a/src/app/components/LibraryPage.tsx b/src/app/components/LibraryPage.tsx
@@ -74,7 +74,7 @@ const LibraryPage = ({ libraries = [], onUpdateLibraries, localStyles }) => {
       </div>
 
       <ul className="library-list">
-        <AnimatePresence>
+        <AnimatePresence mode="popLayout">
           {libraries.map((library, index) => (
             <motion.li
               className="library-list-item"

diff --git a/src/app/components/Navigation.tsx b/src/app/components/Navigation.tsx
@@ -18,6 +18,10 @@ function Navigation(props) {
     props.onPageSelection("library");
   };
 
+  const stylesClick = () => {
+    props.onPageSelection("styles");
+  };
+
   const handleLintRulesChange = boolean => {
     props.updateLintRules(boolean);
   };
@@ -55,6 +59,13 @@ function Navigation(props) {
           >
             Library
           </motion.div>
+          <motion.div
+            className={`nav-item ${activePage === "styles" ? "active" : ""}`}
+            onClick={stylesClick}
+            whileTap={{ scale: 0.98, opacity: 0.8 }}
+          >
+            Styles
+          </motion.div>
 
           <div className="nav-icon-wrapper">
             <motion.button

diff --git a/src/app/components/StyleListItem.tsx b/src/app/components/StyleListItem.tsx
@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import StyleContent from "./StyleContent";
+
+function ListItem({ style, index }) {
+  // Use state to keep track of whether the list item is open or collapsed
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Function to toggle the isOpen state on click
+  const handleToggle = () => {
+    setIsOpen(prevIsOpen => !prevIsOpen);
+  };
+
+  function truncateStyle(string) {
+    return string.length > 28 ? string.substring(0, 28) + "..." : string;
+  }
+
+  function handleSelectAll(nodeArray) {
+    parent.postMessage(
+      {
+        pluginMessage: {
+          type: "select-multiple-layers",
+          nodeArray: nodeArray
+        }
+      },
+      "*"
+    );
+  }
+
+  // Helper function to convert the first letter to uppercase and the rest to lowercase
+  function capitalizeFirstLetter(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+  }
+
+  // Conditionally apply the "open" class based on the isOpen state
+  const listItemClass = isOpen
+    ? "overview-list-item list-item--open"
+    : "overview-list-item";
+
+  return (
+    <li className={listItemClass} key={index}>
+      <div className="overview-content" onClick={handleToggle}>
+        <StyleContent
+          style={style}
+          type={style.type.toLowerCase()}
+          error={style}
+        />
+        <img
+          className="overview-icon overview-content-select"
+          src={require("../assets/select-all.svg")}
+        />
+        <img
+          className="overview-icon overview-content-arrow"
+          src={require("../assets/chevron.svg")}
+        />
+        {/* <span className="overview-style-name">{truncateStyle(style.name)}</span> */}
+      </div>
+      <ul className="consumer-sublist">
+        {Object.entries(style.groupedConsumers).map(([nodeType, nodeIds]) => (
+          <li
+            className="consumer-sublist-item"
+            key={`${style.name}-${nodeType}`}
+            onClick={() => handleSelectAll(nodeIds)} // Pass the array of node IDs
+          >
+            <img
+              className="sublist-item-icon"
+              src={require(`../assets/${nodeType.toLowerCase()}.svg`)}
+            />
+            <span>
+              <span className="sublist-item-count">{nodeIds.length}</span>{" "}
+              {capitalizeFirstLetter(nodeType)} Layers
+            </span>
+          </li>
+        ))}
+      </ul>
+    </li>
+  );
+}
+
+export default ListItem;
diff --git a/src/app/components/StylesPage.tsx b/src/app/components/StylesPage.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import StyleListItem from "./StyleListItem";
+
+const StylesPage = ({ stylesInUse }) => {
+  const hasStylesInUse = stylesInUse && stylesInUse.length > 0;
+
+  return (
+    <div className="styles-overview-wrapper">
+      <div>
+        <h4>Styles</h4>
+        <p>Overview of how styles are used in your page.</p>
+      </div>
+      {stylesInUse && (
+        <div>
+          <h4>Fills</h4>
+          <ul className="style-overview-list">
+            {stylesInUse.fills.map((style, index) => (
+              <StyleListItem style={style} index={index} />
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StylesPage;
diff --git a/src/app/styles/library.css b/src/app/styles/library.css
@@ -89,3 +89,94 @@
 .library-remove:hover {
   background-color: #f9f9f9;
 }
+
+/* Styles Page */
+.styles-overview-wrapper {
+  height: calc(100% - 41px);
+  padding: 0 16px 12px 16px;
+  overflow-y: scroll;
+}
+
+.style-overview-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.overview-list-item {
+  display: flex;
+  flex-flow: column;
+  padding: 0 0 16px;
+  border-bottom: #dcddde;
+  flex-grow: 1;
+  cursor: pointer;
+}
+
+.overview-list-item:hover .overview-icon {
+  display: block;
+}
+
+.consumer-sublist {
+  display: none;
+}
+
+.overview-content {
+  display: flex;
+  flex-flow: row;
+}
+
+.overview-content .style-list-item {
+  flex-grow: 1;
+}
+
+.overview-content .style-preview {
+  margin-right: 8px;
+}
+
+.list-item--open .overview-icon {
+  display: block;
+}
+
+.list-item--open .consumer-sublist {
+  display: block;
+}
+
+.overview-icon {
+  display: none;
+  margin-left: auto;
+  align-self: flex-end;
+  height: 16px;
+}
+
+.overview-content-select {
+  padding-right: 12px;
+}
+
+.list-item--open .overview-content-arrow {
+  transform: rotate(90deg);
+}
+
+.consumer-sublist {
+  margin: 8px 0 0;
+  background: #f9f9f9;
+  border-radius: 16px;
+  padding: 16px 16px 8px;
+  list-style: none;
+}
+
+.consumer-sublist-item {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  line-height: 16px;
+  margin-bottom: 8px;
+}
+
+.sublist-item-icon {
+  margin-right: 8px;
+}
+
+.sublist-item-count {
+  display: inline-block;
+  padding-right: 1px;
+}