Figma plugin! (#227)

* initialize figma plugin * Add icons to view * Make the plugin work * Fix search hook * Finialize figma plugin * Finish up icons * remove unused code * Add cover and icon
2021-02-26 16:35:18 +01:00
parent c4f50417d5
commit 87ab0bfb62
21 changed files with 4655 additions and 11 deletions
--- a/packages/lucide-figma/src/ui.tsx
+++ b/packages/lucide-figma/src/ui.tsx
@@ -0,0 +1,82 @@
+import { Global, jsx } from '@emotion/core'
+import { version } from '../package.json'
+import React, { useMemo } from 'react'
+import ReactDOM from 'react-dom'
+import IconButton from './components/icon-button'
+import SearchInput from './components/search-input'
+import theme from './theme'
+import './ui.css'
+import tags from '../../../tags.json'
+import * as iconComponents from 'lucide-react'
+import { toPascalCase } from './helpers/naming';
+import useSearch from '../../../site/src/lib/useSearch';
+
+declare var ICONS: [];
+
+function App() {
+  const [query, setQuery] = React.useState('')
+  const icons = ICONS.map(name => {
+    const componentName = toPascalCase(name);
+    return {
+      name,
+      tags: tags[name] || [],
+      component: iconComponents[componentName] || null
+    }
+  }).filter(({component}) => !!component)
+
+  const searchResults = useMemo(() => useSearch(icons, query), [icons, query])
+
+  return (
+    <div>
+      <Global
+        styles={{ body: { margin: 0, fontFamily: 'Inter, sans-serif' } }}
+      />
+      <SearchInput
+        value={query}
+        iconCount={icons.length}
+        onChange={event => setQuery(event.target.value)}
+        css={{
+          position: 'sticky',
+          top: 0,
+          borderBottom: '1px solid #e5e5e5',
+          backfaceVisibility: 'hidden'
+        }}
+      />
+      <div css={{ padding: theme.space[2] }}>
+        <div
+          css={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(6, 1fr)',
+            gridGap: theme.space[1],
+          }}
+        >
+          {searchResults.map(({name, component: Icon} :any) => (
+            <IconButton
+              name={name}
+              key={name}
+              component={Icon}
+            />
+          ))}
+        </div>
+        <div
+          css={{
+            marginTop: theme.space[2],
+            padding: theme.space[2],
+            fontSize: theme.fontSizes[0],
+            color: 'rgba(0, 0, 0, 0.5)',
+          }}
+        >
+          <a
+            href="https://lucide.dev"
+            target="_blank"
+            css={{ color: 'inherit' }}
+          >
+            Lucide v{version}
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))