refactor: super icons (#1974)

2022-11-09 09:14:49 -06:00
parent 772fbea381
commit ec7f915642
177 changed files with 360 additions and 518 deletions
--- a/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/BlockPickerMenuItem.tsx
+++ b/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/BlockPickerMenuItem.tsx
@@ -1,3 +1,4 @@
+import Icon from '@/Components/Icon/Icon'
 import { PopoverItemClassNames, PopoverItemSelectedClassNames } from '../ClassNames'
 import { BlockPickerOption } from './BlockPickerOption'

@@ -18,7 +19,9 @@ export function BlockPickerMenuItem({
    <li
      key={option.key}
      tabIndex={-1}
-      className={`${PopoverItemClassNames} ${isSelected ? PopoverItemSelectedClassNames : ''}`}
+      className={`border-bottom gap-3 border-[0.5px] border-border ${PopoverItemClassNames} ${
+        isSelected ? PopoverItemSelectedClassNames : ''
+      }`}
      ref={option.setRefElement}
      role="option"
      aria-selected={isSelected}
@@ -26,8 +29,8 @@ export function BlockPickerMenuItem({
      onMouseEnter={onMouseEnter}
      onClick={onClick}
    >
-      <i className={`icon ${option.iconName} mr-[8px] flex h-5 w-5 bg-contain fill-current text-center`} />
-      <div className="">{option.title}</div>
+      <Icon type={option.iconName} className="mt-1.5 h-5 w-5" />
+      <div className="text-editor">{option.title}</div>
    </li>
  )
 }
--- a/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/BlockPickerOption.tsx
+++ b/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/BlockPickerOption.tsx
@@ -1,21 +1,18 @@
+import { LexicalIconName } from '@/Components/Icon/LexicalIcons'
 import { TypeaheadOption } from '@lexical/react/LexicalTypeaheadMenuPlugin'
+import { IconType } from '@standardnotes/snjs'

 export class BlockPickerOption extends TypeaheadOption {
-  // What shows up in the editor
  title: string
-  // Icon for display
-  iconName?: string
-  // For extra searching.
+  iconName: IconType | LexicalIconName
  keywords: Array<string>
-  // TBD
  keyboardShortcut?: string
-  // What happens when you select this option?
  onSelect: (queryString: string) => void

  constructor(
    title: string,
    options: {
-      iconName?: string
+      iconName: IconType | LexicalIconName
      keywords?: Array<string>
      keyboardShortcut?: string
      onSelect: (queryString: string) => void
--- a/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Alignment.tsx
+++ b/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Alignment.tsx
@@ -1,11 +1,12 @@
 import { BlockPickerOption } from '../BlockPickerOption'
 import { FORMAT_ELEMENT_COMMAND, LexicalEditor, ElementFormatType } from 'lexical'
+import { LexicalIconName } from '@/Components/Icon/LexicalIcons'

 export function GetAlignmentBlocks(editor: LexicalEditor) {
  return ['left', 'center', 'right', 'justify'].map(
    (alignment) =>
      new BlockPickerOption(`Align ${alignment}`, {
-        iconName: `${alignment}-align`,
+        iconName: `align-${alignment}` as LexicalIconName,
        keywords: ['align', 'justify', alignment],
        onSelect: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, alignment as ElementFormatType),
      }),
--- a/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/BulletedList.tsx
+++ b/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/BulletedList.tsx
@@ -4,7 +4,7 @@ import { INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list'

 export function GetBulletedListBlock(editor: LexicalEditor) {
  return new BlockPickerOption('Bulleted List', {
-    iconName: 'bullet',
+    iconName: 'list-ul',
    keywords: ['bulleted list', 'unordered list', 'ul'],
    onSelect: () => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined),
  })
--- a/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Code.tsx
+++ b/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Code.tsx
@@ -5,7 +5,7 @@ import { $createCodeNode } from '@lexical/code'

 export function GetCodeBlock(editor: LexicalEditor) {
  return new BlockPickerOption('Code', {
-    iconName: 'code',
+    iconName: 'lexical-code',
    keywords: ['javascript', 'python', 'js', 'codeblock'],
    onSelect: () =>
      editor.update(() => {
--- a/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Collapsible.tsx
+++ b/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Collapsible.tsx
@@ -4,7 +4,7 @@ import { INSERT_COLLAPSIBLE_COMMAND } from '@standardnotes/blocks-editor/src/Lex

 export function GetCollapsibleBlock(editor: LexicalEditor) {
  return new BlockPickerOption('Collapsible', {
-    iconName: 'caret-right',
+    iconName: 'caret-right-fill',
    keywords: ['collapse', 'collapsible', 'toggle'],
    onSelect: () => editor.dispatchCommand(INSERT_COLLAPSIBLE_COMMAND, undefined),
  })
--- a/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Embeds.tsx
+++ b/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Embeds.tsx
@@ -2,12 +2,13 @@ import { BlockPickerOption } from '../BlockPickerOption'
 import { LexicalEditor } from 'lexical'
 import { INSERT_EMBED_COMMAND } from '@lexical/react/LexicalAutoEmbedPlugin'
 import { EmbedConfigs } from '@standardnotes/blocks-editor/src/Lexical/Plugins/AutoEmbedPlugin'
+import { LexicalIconName } from '@/Components/Icon/LexicalIcons'

 export function GetEmbedsBlocks(editor: LexicalEditor) {
  return EmbedConfigs.map(
    (embedConfig) =>
      new BlockPickerOption(`Embed ${embedConfig.contentName}`, {
-        iconName: embedConfig.iconName,
+        iconName: embedConfig.iconName as LexicalIconName,
        keywords: [...embedConfig.keywords, 'embed'],
        onSelect: () => editor.dispatchCommand(INSERT_EMBED_COMMAND, embedConfig.type),
      }),
--- a/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Headings.tsx
+++ b/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Headings.tsx
@@ -2,12 +2,13 @@ import { BlockPickerOption } from '../BlockPickerOption'
 import { $wrapNodes } from '@lexical/selection'
 import { $getSelection, $isRangeSelection, LexicalEditor } from 'lexical'
 import { $createHeadingNode, HeadingTagType } from '@lexical/rich-text'
+import { LexicalIconName } from '@/Components/Icon/LexicalIcons'

 export function GetHeadingsBlocks(editor: LexicalEditor) {
  return Array.from({ length: 3 }, (_, i) => i + 1).map(
    (n) =>
      new BlockPickerOption(`Heading ${n}`, {
-        iconName: `icon h${n}`,
+        iconName: `h${n}` as LexicalIconName,
        keywords: ['heading', 'header', `h${n}`],
        onSelect: () =>
          editor.update(() => {
--- a/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/NumberedList.tsx
+++ b/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/NumberedList.tsx
@@ -4,7 +4,7 @@ import { INSERT_ORDERED_LIST_COMMAND } from '@lexical/list'

 export function GetNumberedListBlock(editor: LexicalEditor) {
  return new BlockPickerOption('Numbered List', {
-    iconName: 'number',
+    iconName: 'list-ol',
    keywords: ['numbered list', 'ordered list', 'ol'],
    onSelect: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
  })
--- a/packages/web/src/javascripts/Components/BlockEditor/Plugins/ClassNames.ts
+++ b/packages/web/src/javascripts/Components/BlockEditor/Plugins/ClassNames.ts
@@ -6,7 +6,7 @@ export const PopoverClassNames = classNames(
 )

 export const PopoverItemClassNames = classNames(
-  'flex w-full items-center text-base gap-4 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground',
+  'flex w-full items-center text-base overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground',
  'focus:bg-info-backdrop cursor-pointer m-0 focus:bg-contrast focus:text-foreground',
 )

--- a/packages/web/src/javascripts/Components/BlockEditor/Plugins/ItemSelectionPlugin/ItemSelectionItemComponent.tsx
+++ b/packages/web/src/javascripts/Components/BlockEditor/Plugins/ItemSelectionPlugin/ItemSelectionItemComponent.tsx
@@ -16,7 +16,7 @@ export function ItemSelectionItemComponent({ index, isSelected, onClick, onMouse
    <li
      key={option.key}
      tabIndex={-1}
-      className={`${PopoverItemClassNames} ${isSelected ? PopoverItemSelectedClassNames : ''}`}
+      className={`gap-4 ${PopoverItemClassNames} ${isSelected ? PopoverItemSelectedClassNames : ''}`}
      ref={option.setRefElement}
      role="option"
      aria-selected={isSelected}
--- a/packages/web/src/javascripts/Components/Icon/Icon.tsx
+++ b/packages/web/src/javascripts/Components/Icon/Icon.tsx
@@ -2,9 +2,10 @@ import { FunctionComponent } from 'react'
 import { VectorIconNameOrEmoji } from '@standardnotes/snjs'
 import { IconNameToSvgMapping } from './IconNameToSvgMapping'
 import { classNames } from '@/Utils/ConcatenateClassNames'
+import { LexicalIconName, LexicalIconNameToSvgMapping } from './LexicalIcons'

 type Props = {
-  type: VectorIconNameOrEmoji
+  type: VectorIconNameOrEmoji | LexicalIconName
  className?: string
  ariaLabel?: string
  size?: 'small' | 'medium' | 'normal' | 'large' | 'custom'
@@ -42,8 +43,11 @@ const EmojiSize = {
  custom: '',
 }

-const getIconComponent = (type: VectorIconNameOrEmoji) => {
-  return IconNameToSvgMapping[type as keyof typeof IconNameToSvgMapping]
+const getIconComponent = (type: VectorIconNameOrEmoji | LexicalIconName) => {
+  return (
+    IconNameToSvgMapping[type as keyof typeof IconNameToSvgMapping] ||
+    LexicalIconNameToSvgMapping[type as LexicalIconName]
+  )
 }

 export const isIconEmoji = (type: VectorIconNameOrEmoji): boolean => {
--- a/packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx
+++ b/packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx
@@ -50,6 +50,11 @@ export const IconNameToSvgMapping = {
  'user-add': icons.UserAddIcon,
  'user-switch': icons.UserSwitch,
  'fullscreen-exit': icons.FullscreenExitIcon,
+  'format-align-left': icons.FormatAlignLeftIcon,
+  'format-align-center': icons.FormatAlignCenterIcon,
+  'format-align-right': icons.FormatAlignRightIcon,
+  'format-align-justify': icons.FormatAlignJustifyIcon,
+  drag: icons.DragIcon,
  accessibility: icons.AccessibilityIcon,
  add: icons.AddIcon,
  archive: icons.ArchiveIcon,
--- a/packages/web/src/javascripts/Components/Icon/LexicalIcons.tsx
+++ b/packages/web/src/javascripts/Components/Icon/LexicalIcons.tsx
@@ -0,0 +1,27 @@
+import * as icons from '@standardnotes/icons'
+
+export const LexicalIconNameToSvgMapping = {
+  'lexical-code': icons.LexicalCode,
+  'align-center': icons.LexicalTextCenter,
+  'align-justify': icons.LexicalTextJustify,
+  'align-left': icons.LexicalTextLeft,
+  'align-right': icons.LexicalTextRight,
+  'caret-right-fill': icons.LexicalCaretRightFill,
+  'horizontal-rule': icons.LexicalHorizontalRule,
+  'list-ol': icons.LexicalListOL,
+  'list-ul': icons.LexicalListUL,
+  check: icons.LexicalCheck,
+  quote: icons.LexicalQuote,
+  table: icons.LexicalTable,
+  tweet: icons.LexicalTweet,
+  youtube: icons.LexicalYoutube,
+  paragraph: icons.LexicalTextParagraph,
+  h1: icons.TypeH1,
+  h2: icons.TypeH2,
+  h3: icons.TypeH3,
+  h4: icons.TypeH4,
+  h5: icons.TypeH5,
+  h6: icons.TypeH6,
+}
+
+export type LexicalIconName = keyof typeof LexicalIconNameToSvgMapping