feat: add onboarding tips

src/ui/components/Elements/Elements.tsx

@@ -1,5 +1,8 @@
 import { useState, useEffect } from 'react';
-import { Input } from 'react-figma-ui';
+import {
+  Input,
+  // Onboarding
+} from 'react-figma-ui';
 
 import { Configurator } from '../Configurator/Configurator';
 import { availableOptions } from '../../../shared/constants/availableOptions';
@@ -37,6 +40,36 @@ export const Elements = () => {
   return (
     // TODO classnames
     <div className={configurators.length > 0 ? undefined : styles.fullLayout}>
+      {/* TODO move inline texts */}
+      {/* <Onboarding iconProps={{ iconName: 'minus' }}>
+        Select Parts, Nodes and Paints to invert. You can use search field to
+        filter options. By clicking on group heading e.g.: Paints you can toggle
+        all visible items for group.
+      </Onboarding> */}
+
+      {/* TODO */}
+      {/* TODO move inline texts */}
+      {/* <Onboarding iconProps={{ iconName: 'close' }}>
+        Select Parts, Nodes and Paints to invert.
+      </Onboarding> */}
+
+      {/* TODO move inline texts */}
+      {/* <Onboarding iconProps={{ iconName: 'close' }}>
+        You can use search field to filter options. By clicking on group heading
+        e.g.: Paints you can toggle all visible items for group.
+      </Onboarding> */}
+
+      {/* TODO move inline texts */}
+      {/* <Onboarding iconProps={{ iconName: 'close' }}>
+        By clicking on group heading e.g.: Paints you can toggle all visible
+        items for group.
+      </Onboarding> */}
+
+      {/* TODO move inline texts */}
+      {/* <Onboarding iconProps={{ iconName: 'close' }}>
+        Cancel, Save, Save & Invert
+      </Onboarding> */}
+
       <div className={styles.toolbar}>
         <Input
           value={searchValue}