FEATURE: Commandbar for modules

Wrapped as webcomponent to prevent the module styles from interfering. Icons are now provided as prop to the CommandBar to allow using the react-ui-components in the UI and some custom implementation in the modules as the ui component is too heavy.
Sebobo · Feb 15, 2023 · bc5c323 · bc5c323
1 parent c4b1ab0
commit bc5c323
Show file tree

Hide file tree

Showing 33 changed files with 552 additions and 213 deletions.
diff --git a/.yarn/patches/@neos-project-build-essentials-npm-8.2.3-d9fe30a4f4.patch b/.yarn/patches/@neos-project-build-essentials-npm-8.2.3-d9fe30a4f4.patch
diff --git a/.yarn/patches/@neos-project-build-essentials-npm-8.2.6-787ecaf75f.patch b/.yarn/patches/@neos-project-build-essentials-npm-8.2.6-787ecaf75f.patch
@@ -0,0 +1,17 @@
+diff --git a/src/postcss.config.js b/src/postcss.config.js
+index 7d74e8f86c90e5afe0b66c159918e0b6d53fcd96..17b22e59f103325cf7a3804d0c3fbfee7fbc45ff 100644
+--- a/src/postcss.config.js
++++ b/src/postcss.config.js
+@@ -4,9 +4,9 @@ const styleVars = styles.generateCssVarsObject(styles.config);
+ module.exports = {
+     plugins: [
+         require('autoprefixer'),
+-        require('postcss-css-variables')({
+-            variables: Object.assign(styleVars)
+-        }),
++        // require('postcss-css-variables')({
++        //     variables: Object.assign(styleVars)
++        // }),
+         require('postcss-import')(),
+         require('postcss-nested')(),
+         require('postcss-hexrgba')()
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "@neos-commandbar/ui-plugin": "workspace:*"
   },
   "devDependencies": {
-    "@types/react": "^18.0.26",
+    "@types/react": "^16.14.35",
     "@typescript-eslint/eslint-plugin": "^5.47.1",
     "@typescript-eslint/parser": "^5.47.1",
     "eslint": "^8.30.0",
@@ -51,6 +51,6 @@
   ],
   "flat": true,
   "resolutions": {
-    "@neos-project/build-essentials@^8.2.3": "patch:@neos-project/build-essentials@npm%3A7.3.10#./.yarn/patches/@neos-project-build-essentials-npm-8.2.3-d9fe30a4f4.patch"
+    "@neos-project/build-essentials@^8.2.6": "patch:@neos-project/build-essentials@npm%3A8.2.6#./.yarn/patches/@neos-project-build-essentials-npm-8.2.6-787ecaf75f.patch"
   }
 }
diff --git a/packages/commandbar/package.json b/packages/commandbar/package.json
@@ -2,7 +2,7 @@
   "name": "@neos-commandbar/commandbar",
   "version": "1.0.0",
   "dependencies": {
-    "@neos-project/react-ui-components": "^8.2.3",
+    "classnames": "^2.3.2",
     "fuzzy-search": "^3.2.1",
     "react": "^16.14.0"
   },

diff --git a/packages/commandbar/src/CommandBar.tsx b/packages/commandbar/src/CommandBar.tsx
@@ -10,11 +10,12 @@ type CommandBarProps = {
     open: boolean;
     toggleOpen: () => void;
     onDrag?: (state: boolean) => void;
+    IconComponent: React.FC<IconProps>;
 };
 
-const CommandBar: React.FC<CommandBarProps> = ({ commands, open, toggleOpen, onDrag }) => {
+const CommandBar: React.FC<CommandBarProps> = ({ commands, open, toggleOpen, onDrag, IconComponent }) => {
     return (
-        <CommandBarStateProvider commands={commands}>
+        <CommandBarStateProvider commands={commands} IconComponent={IconComponent}>
             <CommandBarDialog onDrag={onDrag} open={open} toggleOpen={toggleOpen} />
         </CommandBarStateProvider>
     );

diff --git a/packages/commandbar/src/Variables.module.css b/packages/commandbar/src/Variables.module.css
@@ -19,9 +19,11 @@
     --dialog-blur: 5px;
 
     /* Neos UI colors */
-    --grayLight: #3f3f3f;
+    --grayLight: #999;
     --grayLighter: #eee;
     --grayMedium: #323232;
+    --grayDark: #3f3f3f;
+    --gray: #555;
     --textSubtleLight: #adadad;
     --textOnGray: #fff;
     --textOnWhite: #252525;

diff --git a/packages/commandbar/src/components/CommandBarDialog/CommandBarDialog.module.css b/packages/commandbar/src/components/CommandBarDialog/CommandBarDialog.module.css
@@ -31,6 +31,23 @@
     font-size: 90%;
 }
 
+.commandBar ::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+}
+
+.commandBar ::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+.commandBar ::-webkit-scrollbar-thumb {
+    background-color: var(--grayLight);
+}
+
+.commandBar ::-webkit-scrollbar-corner {
+    background-color: var(--grayDark);
+}
+
 .resultsWrap {
     display: grid;
     grid-template-rows: 0fr;

diff --git a/packages/commandbar/src/components/CommandBarFooter/CommandBarFooter.module.css b/packages/commandbar/src/components/CommandBarFooter/CommandBarFooter.module.css
@@ -12,11 +12,13 @@
 .breadcrumb {
     display: flex;
     gap: 1rem;
+    --icon-size: 0.875em;
 }
 
 .activity {
     display: flex;
     gap: 1rem;
+    --icon-size: 0.875em;
 }
 
 .madeWithLove {

diff --git a/packages/commandbar/src/components/CommandBarFooter/CommandBarFooter.tsx b/packages/commandbar/src/components/CommandBarFooter/CommandBarFooter.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 
-import Icon from '../Icon/Icon';
 import { useCommandBarState } from '../../state';
 
 import * as styles from './CommandBarFooter.module.css';
+import IconWrapper from '../IconWrapper/IconWrapper';
 
 const CommandBarFooter: React.FC = () => {
     const {
         state: { activeCommandId, activeCommandMessage, commands, result, selectedCommandGroup, expanded },
+        Icon,
     } = useCommandBarState();
 
     if (!expanded) return null;
@@ -18,7 +19,14 @@ const CommandBarFooter: React.FC = () => {
         <footer className={styles.commandBarFooter}>
             {activeCommandId ? (
                 <span className={styles.activity}>
-                    <Icon icon="circle-notch" spin={true} />
+                    <IconWrapper>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path
+                                fill="currentColor"
+                                d="M288 39.056v16.659c0 10.804 7.281 20.159 17.686 23.066C383.204 100.434 440 171.518 440 256c0 101.689-82.295 184-184 184-101.689 0-184-82.295-184-184 0-84.47 56.786-155.564 134.312-177.219C216.719 75.874 224 66.517 224 55.712V39.064c0-15.709-14.834-27.153-30.046-23.234C86.603 43.482 7.394 141.206 8.003 257.332c.72 137.052 111.477 246.956 248.531 246.667C393.255 503.711 504 392.788 504 256c0-115.633-79.14-212.779-186.211-240.236C302.678 11.889 288 23.456 288 39.056z"
+                            />
+                        </svg>
+                    </IconWrapper>
                     <em>
                         {runningCommand.name} ‒ {activeCommandMessage}
                     </em>
@@ -29,7 +37,14 @@ const CommandBarFooter: React.FC = () => {
                     <small>{commands[selectedCommandGroup].name}</small>
                 </span>
             ) : (
-                <Icon icon="neos" />
+                <IconWrapper>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                        <path
+                            fill="currentColor"
+                            d="M415.44 512h-95.11L212.12 357.46v91.1L125.69 512H28V29.82L68.47 0h108.05l123.74 176.13V63.45L386.69 0h97.69v461.5zM38.77 35.27V496l72-52.88V194l215.5 307.64h84.79l52.35-38.17h-78.27L69 13zm82.54 466.61 80-58.78v-101l-79.76-114.4v220.94L49 501.89h72.34zM80.63 10.77l310.6 442.57h82.37V10.77h-79.75v317.56L170.91 10.77zM311 191.65l72 102.81V15.93l-72 53v122.72z"
+                        />
+                    </svg>
+                </IconWrapper>
             )}
             <a
                 href="https://helzle.it"

diff --git a/packages/commandbar/src/components/CommandBarHeader/CommandBarHeader.module.css b/packages/commandbar/src/components/CommandBarHeader/CommandBarHeader.module.css
@@ -16,6 +16,7 @@
     color: white;
     cursor: pointer;
     transition: background-color 0.1s ease-in-out;
+    display: flex;
 }
 
 .backButton:hover {

diff --git a/packages/commandbar/src/components/CommandBarHeader/CommandBarHeader.tsx b/packages/commandbar/src/components/CommandBarHeader/CommandBarHeader.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
 import { useCommandBarState } from '../../state';
-import Icon from '../Icon/Icon';
 import SearchBox from '../SearchBox/SearchBox';
 
 import * as styles from './CommandBarHeader.module.css';
 import { STATUS } from '../../state/commandBarMachine';
+import IconWrapper from '../IconWrapper/IconWrapper';
 
 const CommandBarHeader: React.FC = () => {
     const {
@@ -22,7 +22,14 @@ const CommandBarHeader: React.FC = () => {
                     className={styles.backButton}
                     title="Back"
                 >
-                    <Icon icon="arrow-left" />
+                    <IconWrapper>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                            <path
+                                fill="currentColor"
+                                d="m257.5 445.1-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"
+                            />
+                        </svg>
+                    </IconWrapper>
                 </button>
             )}
             <SearchBox />

diff --git a/packages/commandbar/src/components/CommandList/CommandList.tsx b/packages/commandbar/src/components/CommandList/CommandList.tsx
@@ -17,6 +17,7 @@ const CommandList: React.FC<CommandListingProps> = ({
 }) => {
     const {
         state: { commands, highlightedItem, availableCommandIds, activeCommandId, status, searchWord },
+        Icon,
     } = useCommandBarState();
     const { executeCommand } = useCommandInput();
     const selectedElementRef = React.useRef(null);
@@ -33,6 +34,7 @@ const CommandList: React.FC<CommandListingProps> = ({
                     {availableCommandIds.map((commandId, index) => (
                         <CommandListItem
                             key={commandId}
+                            Icon={Icon}
                             highlightRef={highlightedItem === index ? selectedElementRef : null}
                             command={commands[commandId]}
                             onItemSelect={executeCommand}

diff --git a/packages/commandbar/src/components/CommandListItem/CommandListItem.module.css b/packages/commandbar/src/components/CommandListItem/CommandListItem.module.css
@@ -8,6 +8,7 @@
     transition: background-color 0.1s ease-in-out, opacity 0.1s ease-in-out;
     background-color: transparent;
     user-select: none;
+    --icon-size: 0.875em;
 }
 
 .commandListItem:hover {
@@ -35,3 +36,7 @@
     white-space:pre-wrap;
     font-size: 0.9em;
 }
+
+.type {
+    max-width: 30%;
+}
diff --git a/packages/commandbar/src/components/CommandListItem/CommandListItem.tsx b/packages/commandbar/src/components/CommandListItem/CommandListItem.tsx
@@ -1,7 +1,6 @@
 import React, { LegacyRef } from 'react';
 
 import * as styles from './CommandListItem.module.css';
-import Icon from '../Icon/Icon';
 
 type CommandListItemProps = {
     command: ProcessedCommandItem;
@@ -10,6 +9,7 @@ type CommandListItemProps = {
     highlightRef?: React.Ref<HTMLLIElement>;
     runningCommandId?: CommandId;
     disabled?: boolean;
+    Icon: React.FC<IconProps>;
 };
 
 function getCommandType({ subCommandIds, category, canHandleQueries, action }: ProcessedCommandItem): string {
@@ -33,7 +33,7 @@ function getCommandType({ subCommandIds, category, canHandleQueries, action }: P
 }
 
 const CommandListItem: React.FC<CommandListItemProps> = React.forwardRef(
-    ({ command, onItemSelect, highlighted, disabled }, highlightRef: LegacyRef<HTMLLIElement>) => {
+    ({ command, onItemSelect, highlighted, disabled, Icon }, highlightRef: LegacyRef<HTMLLIElement>) => {
         const { id, name, description, icon } = command;
 
         const commandType = getCommandType(command);
@@ -57,7 +57,7 @@ const CommandListItem: React.FC<CommandListItemProps> = React.forwardRef(
                         </span>
                     )}
                 </span>
-                <small>{commandType}</small>
+                <small className={styles.type}>{commandType}</small>
             </li>
         );
     }

diff --git a/packages/commandbar/src/components/CommandResultsView/CommandResultsView.module.css b/packages/commandbar/src/components/CommandResultsView/CommandResultsView.module.css
@@ -2,3 +2,38 @@
     max-width: 100%;
     overflow: auto;
 }
+
+.results {
+    min-height: 0;
+    transition: opacity 0.3s ease-in;
+    overflow-y: auto;
+    max-height: 60vh;
+    height: 100%;
+}
+
+.results h6 {
+    color: var(--color-light-text);
+    margin: 0.5rem;
+    font-size: 0.9em;
+    font-weight: normal;
+    user-select: none;
+}
+
+.results ul {
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+    margin: 0;
+}
+
+.noResults {
+    padding: 0.5rem;
+}
+
+.disabled {
+    opacity: 0.5 !important;
+    pointer-events: none;
+    user-select: none;
+}
diff --git a/packages/commandbar/src/components/CommandResultsView/CommandResultsView.tsx b/packages/commandbar/src/components/CommandResultsView/CommandResultsView.tsx
@@ -8,6 +8,7 @@ import * as styles from './CommandResultsView.module.css';
 const CommandResultsView: React.FC = () => {
     const {
         state: { result, highlightedOption, activeCommandId },
+        Icon,
     } = useCommandBarState();
     const { executeCommand } = useCommandInput();
     const selectedElementRef = React.useRef(null);
@@ -25,16 +26,17 @@ const CommandResultsView: React.FC = () => {
             {message && <h6>{message}</h6>}
             {view ? <div>{view}</div> : ''}
             {options && (
-                <nav className={[styles.results, !!result && styles.disabled].join(' ')}>
+                <nav className={[styles.results].join(' ')}>
                     <ul>
                         {Object.keys(options).map((commandId, index) => (
                             <CommandListItem
                                 key={commandId}
-                                ref={highlightedOption === index ? selectedElementRef : null}
+                                highlightRef={highlightedOption === index ? selectedElementRef : null}
                                 command={options[commandId]}
                                 onItemSelect={executeCommand}
                                 highlighted={highlightedOption === index}
                                 runningCommandId={activeCommandId}
+                                Icon={Icon}
                             />
                         ))}
                     </ul>

diff --git a/packages/commandbar/src/components/Icon/Icon.module.css b/packages/commandbar/src/components/Icon/Icon.module.css
diff --git a/packages/commandbar/src/components/Icon/Icon.tsx b/packages/commandbar/src/components/Icon/Icon.tsx
diff --git a/packages/commandbar/src/components/IconWrapper/IconWrapper.module.css b/packages/commandbar/src/components/IconWrapper/IconWrapper.module.css
@@ -0,0 +1,12 @@
+.iconWrap {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    display: inline-block;
+    text-align: center;
+}
+
+.iconWrap svg {
+    max-width: 100%;
+    max-height: 100%;
+    display: inline-block;
+}