feat: re-add colors

manifest.json

@@ -19,6 +19,10 @@
     {
       "name": "Configure From Elements",
       "command": "configure-from-elements"
+    },
+    {
+      "name": "Exclude Colors",
+      "command": "exclude-colors"
     }
   ]
 }

package.json

@@ -20,6 +20,7 @@
     "url": "https://github.com/pluginsky/invert-color.git"
   },
   "dependencies": {
+    "clsx": "^1.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-figma-ui": "^1.0.1",

src/ui/components/Colors/Colors.module.scss

@@ -0,0 +1,26 @@
+.colorsList {
+  width: 100%;
+  // background-color: #000;
+  padding: 0;
+}
+
+.colorItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  // gap: var(--size-large);
+  gap: var(--size-xxsmall);
+  padding-left: var(--size-xxsmall);
+}
+
+.colorPreview {
+  width: var(--size-xsmall);
+  height: var(--size-xsmall);
+  border-radius: var(--border-radius-small);
+  border: 1px solid var(--grey); // TODO
+  // background: #000;
+}
+
+.colorValue {
+  flex: 1;
+}

src/ui/components/Colors/Colors.tsx

@@ -0,0 +1,44 @@
+import { IconButton, Type } from 'react-figma-ui';
+
+import styles from './Colors.module.scss';
+
+const colors = [
+  // 'FFFFFF', 'FF0000'
+];
+
+export const Colors = () => {
+  return (
+    <>
+      {/* TODO */}
+      {/* <Onboarding iconProps={{ iconName: 'minus' }}>
+        Lorem ipsum dolor
+      </Onboarding> */}
+
+      <ul className={styles.colorsList}>
+        {colors.map((color) => (
+          <li className={styles.colorItem} key={color}>
+            <div className={styles.colorPreview} />
+
+            <div className={styles.colorValue}>
+              <Type>{color}</Type>
+            </div>
+
+            <div>
+              {/* TODO toggle (activate) */}
+
+              <IconButton
+                onClick={() => null}
+                iconProps={{
+                  iconName: 'trash',
+                  // colorName: 'red' // TODO
+                }}
+              />
+            </div>
+          </li>
+        ))}
+      </ul>
+
+      {/* TODO add fallback screen */}
+    </>
+  );
+};

src/ui/components/Tabs/Tabs.module.scss

@@ -0,0 +1,17 @@
+.tabs {
+  display: flex;
+  align-items: center;
+  min-height: var(--size-large);
+  padding: 0 var(--size-xxsmall);
+  border-bottom: 1px solid var(--silver);
+  gap: var(--size-xxsmall); // TODO --size-xxxsmall?
+}
+
+.tab {
+  color: var(--black3);
+  width: unset;
+}
+
+.tabActive {
+  color: var(--black8);
+}

src/ui/components/Tabs/Tabs.tsx

@@ -0,0 +1,29 @@
+import { memo } from 'react';
+import { SectionTitle } from 'react-figma-ui';
+import clsx from 'clsx';
+
+import type { TabId, Tab } from '../../types/Tab';
+
+import styles from './Tabs.module.scss';
+
+type TabsProps = {
+  readonly items: Tab[];
+  readonly active: TabId;
+  onChange: (item: TabId) => void;
+};
+
+export const Tabs = memo<TabsProps>(({ items, active, onChange }) => {
+  return (
+    <nav className={styles.tabs}>
+      {items.map(({ name, id }) => (
+        <SectionTitle
+          className={clsx(styles.tab, id === active && styles.tabActive)}
+          onClick={() => onChange(id)}
+          key={id}
+        >
+          {name}
+        </SectionTitle>
+      ))}
+    </nav>
+  );
+});

src/ui/types/Tab.ts

@@ -0,0 +1,6 @@
+export type TabId = 'elements' | 'colors';
+
+export type Tab = {
+  readonly name: string;
+  readonly id: TabId;
+};

src/ui/ui.tsx

@@ -1,11 +1,14 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 import { Actions } from './components/Actions/Actions';
 import { Elements } from './components/Elements/Elements';
 import { availableOptions } from '../shared/constants/availableOptions';
 import { useOptions } from './hooks/useOptions';
+import { Tabs } from './components/Tabs/Tabs';
+import { Colors } from './components/Colors/Colors';
 import type { Options } from '../shared/types/Options';
 import type { PluginMessage } from '../shared/types/ExtendedMessageEvent';
+import type { Tab, TabId } from './types/Tab';
 
 import styles from './ui.module.scss';
 
@@ -15,7 +18,20 @@ type ExtendedMessageEvent = MessageEvent<{
   readonly pluginMessage: PluginMessage;
 }>;
 
+export const tabs = [
+  {
+    name: 'Elements',
+    id: 'elements',
+  },
+  {
+    name: 'Excluded Colors',
+    id: 'colors',
+  },
+] as Tab[];
+
 export const App = () => {
+  const [activeTab, setActiveTab] = useState<TabId>('elements'); // TODO
+
   const { setSelected } = useOptions();
 
   const handleGetSettings = useCallback<HandleGetSettingsCallback>(
@@ -33,8 +49,15 @@ export const App = () => {
 
   return (
     <main className={styles.pluginWrapper}>
+      <Tabs
+        items={tabs}
+        active={activeTab}
+        onChange={(tab) => setActiveTab(tab)}
+      />
+
       <section className={styles.tabsContent}>
-        <Elements />
+        {/* TODO lazy? */}
+        {activeTab === 'colors' ? <Colors /> : <Elements />}
       </section>
 
       <Actions />