From 369547581b87383287483137aca5d003fd4b0da9 Mon Sep 17 00:00:00 2001 From: Jakub Biesiada Date: Sun, 28 Feb 2021 18:29:49 +0100 Subject: [PATCH 1/6] feat: re-add colors --- manifest.json | 4 ++++ src/ui/components/Colors/Colors.tsx | 3 +++ src/ui/components/Tabs/Tabs.module.scss | 17 +++++++++++++++ src/ui/components/Tabs/Tabs.tsx | 29 +++++++++++++++++++++++++ src/ui/ui.tsx | 25 +++++++++++++++++++-- 5 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 src/ui/components/Colors/Colors.tsx create mode 100644 src/ui/components/Tabs/Tabs.module.scss create mode 100644 src/ui/components/Tabs/Tabs.tsx diff --git a/manifest.json b/manifest.json index faf0d6a..a8d61d0 100644 --- a/manifest.json +++ b/manifest.json @@ -19,6 +19,10 @@ { "name": "Configure From Elements", "command": "configure-from-elements" + }, + { + "name": "Exclude Colors", + "command": "exclude-colors" } ] } diff --git a/src/ui/components/Colors/Colors.tsx b/src/ui/components/Colors/Colors.tsx new file mode 100644 index 0000000..8c3d9d9 --- /dev/null +++ b/src/ui/components/Colors/Colors.tsx @@ -0,0 +1,3 @@ +export const Colors = () => { + return <>; +}; diff --git a/src/ui/components/Tabs/Tabs.module.scss b/src/ui/components/Tabs/Tabs.module.scss new file mode 100644 index 0000000..7f24598 --- /dev/null +++ b/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); +} + +.tab { + color: var(--black3); + width: unset; +} + +.tabActive { + color: var(--black8); +} diff --git a/src/ui/components/Tabs/Tabs.tsx b/src/ui/components/Tabs/Tabs.tsx new file mode 100644 index 0000000..95382fc --- /dev/null +++ b/src/ui/components/Tabs/Tabs.tsx @@ -0,0 +1,29 @@ +import React, { 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(({ items, active, onChange }) => { + return ( + + ); +}); diff --git a/src/ui/ui.tsx b/src/ui/ui.tsx index c067d5a..1341345 100644 --- a/src/ui/ui.tsx +++ b/src/ui/ui.tsx @@ -1,7 +1,9 @@ -import { useCallback } from 'react'; +import { useCallback, useState } from 'react'; import { Actions } from './components/Actions/Actions'; import { Elements } from './components/Elements/Elements'; +import { Tabs } from './components/Tabs/Tabs'; +import { Colors } from './components/Colors/Colors'; import { options } from '../shared/constants/options'; import { useOptions } from './hooks/useOptions'; import type { Options } from '../shared/types/Options'; @@ -20,7 +22,20 @@ type ExtendedMessageEvent = MessageEvent<{ readonly pluginMessage: PluginMessage; }>; +export const tabs = [ + { + name: 'Elements', + id: 'elements', + }, + { + name: 'Excluded Colors', + id: 'colors', + }, +]; + export const App = () => { + const [activeTab, setActiveTab] = useState('elements'); // TODO + const { setSelected } = useOptions(); const handleGetSettings = useCallback( @@ -44,8 +59,14 @@ export const App = () => { return (
+ setActiveTab(tab)} + /> +
- + {activeTab === 'colors' ? : }
From 374dc5c4e811a61f7d43fc77e56b434b2dc4ef3b Mon Sep 17 00:00:00 2001 From: Jakub Biesiada Date: Sun, 28 Feb 2021 21:39:29 +0100 Subject: [PATCH 2/6] chore: add clsx --- package.json | 1 + src/ui/components/Tabs/Tabs.tsx | 4 ++-- yarn.lock | 5 +++++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index cc2a303..04ff2f9 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "url": "https://github.com/pluginsky/invert-color.git" }, "dependencies": { + "clsx": "^1.1.1", "react": "^17.0.1", "react-dom": "^17.0.1", "react-figma-ui": "^1.0.1", diff --git a/src/ui/components/Tabs/Tabs.tsx b/src/ui/components/Tabs/Tabs.tsx index 95382fc..2e2caaf 100644 --- a/src/ui/components/Tabs/Tabs.tsx +++ b/src/ui/components/Tabs/Tabs.tsx @@ -1,6 +1,6 @@ import React, { memo } from 'react'; import { SectionTitle } from 'react-figma-ui'; -// import clsx from 'clsx'; +import clsx from 'clsx'; // import type { TabId, Tab } from '../../types/Tab'; @@ -17,7 +17,7 @@ export const Tabs = memo(({ items, active, onChange }) => {