Lucide preact package (#291)

* Add preact package

* Fix types

* update types

* fix types

* remove dependecies

* bump version

* improve test setup for react as well

* Add workflow for preact

* Fix types

* bump version

* Add white space

* remove forward ref

* bump package

* Fix types

* Fix types

* bump version

* Remove proptypings

* Test new version

* Add some extra documentation

packages/lucide-preact/.npmignore

@@ -0,0 +1,9 @@
+stats
+node_modules
+tests
+scripts
+build
+src
+babel.config.js
+jest.config.js
+rollup.config.js

packages/lucide-preact/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2020, Lucide Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

packages/lucide-preact/README.md

@@ -0,0 +1,77 @@
+# Lucide Preact
+
+Implementation of the lucide icon library for preact applications.
+
+> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
+
+## Installation
+
+```sh
+yarn add lucide-preact
+
+# or
+
+npm install lucide-preact
+```
+
+## How to use
+
+It's build with ESmodules so it's completely threeshakable.
+Each icon can be imported as a preact component.
+
+### Example
+
+You can pass additional props to adjust the icon.
+
+``` js
+import { Camera } from 'lucide-preact';
+// Returns PreactComponent
+
+// Usage
+const App = () => {
+  return <Camera color="red" size={48}/>
+};
+
+export default App;
+```
+
+### Props
+
+|  name        |   type   |  default
+| ------------ | -------- | --------
+| `size`       | *Number* | 24
+| `color`      | *String* | currentColor
+| `strokeWidth`| *Number* | 2
+
+### Custom props / svg attributes
+
+You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
+
+``` js
+// Usage
+const App = () => {
+  return <Camera fill="red" stroke-linejoin="bevel"/>
+};
+```
+
+> svg attributes in preact aren't transformed, so if want to change e.g. the `stroke-linejoin` you need to pass it in kebabcase, the way svg spec is written so. See this topic in the [preact documentation](https://preactjs.com/guide/v10/differences-to-react/#svg-inside-jsx).
+
+### One generic icon component
+
+It is possible to create one generic icon component to load icons.
+
+> :warning: Example below importing all EsModules, caution  using this example, not recommended when you using bundlers, your application build size will grow strongly.
+
+#### Icon Component Example
+
+``` js
+import * as icons from 'lucide-preact';
+
+const Icon = ({name, color, size}) => {
+  const LucideIcon = icons[name];
+
+  return <LucideIcon color={color} size={size} />
+};
+
+export default Icon;
+```

packages/lucide-preact/babel.config.js

@@ -0,0 +1,6 @@
+const mainConfig = require('../../babel.config');
+
+module.exports = {
+  presets: ['preact'],
+  env: mainConfig.env,
+};

packages/lucide-preact/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  verbose: true,
+  roots: ['<rootDir>/src/', '<rootDir>/tests/'],
+  moduleFileExtensions: ['js'],
+  transformIgnorePatterns: [`/node_modules`],
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+  },
+};

packages/lucide-preact/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "lucide-preact",
+  "description": "Lucide Preact package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
+  "version": "0.15.10-beta.7",
+  "license": "ISC",
+  "homepage": "https://lucide.dev",
+  "bugs": "https://github.com/lucide-icons/lucide/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lucide-icons/lucide.git",
+    "directory": "packages/lucide-preact"
+  },
+  "author": "Eric Fennis",
+  "amdName": "lucide-preact",
+  "main": "dist/cjs/lucide-preact.js",
+  "main:umd": "dist/umd/lucide-preact.js",
+  "module": "dist/esm/lucide-preact.js",
+  "unpkg": "dist/umd/lucide-preact.min.js",
+  "typings": "dist/lucide-preact.d.ts",
+  "scripts": {
+    "build": "yarn clean && yarn build:icons && yarn build:es && yarn build:types && yarn build:bundles",
+    "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
+    "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-preact/src --templateSrc=../packages/lucide-preact/scripts/exportTemplate --renderUniqueKey",
+    "build:es": "babel src -d dist/esm",
+    "build:types": "yarn --cwd ../../ babel-node packages/lucide-preact/scripts/buildTypes.js",
+    "build:bundles": "yarn --cwd ../../ rollup -c packages/lucide-preact/rollup.config.js",
+    "test": "jest"
+  },
+  "devDependencies": {
+    "@testing-library/preact": "^2.0.1",
+    "babel-preset-preact": "^2.0.0",
+    "jest": "^26.6.3",
+    "preact": "^10.5.13"
+  },
+  "peerDependencies": {
+    "preact": "^10.5.13"
+  }
+}

packages/lucide-preact/rollup.config.js

@@ -0,0 +1,48 @@
+import plugins from '../../rollup.plugins';
+import pkg from './package.json';
+
+const packageName = 'LucidePreact';
+const outputFileName = 'lucide-preact';
+const rootDir = 'packages/lucide-preact'; // It runs from the root
+const outputDir = `${rootDir}/dist`;
+const inputs = [`${rootDir}/src/lucide-preact.js`];
+const bundles = [
+  {
+    format: 'umd',
+    inputs,
+    outputDir,
+    minify: true,
+  },
+  {
+    format: 'umd',
+    inputs,
+    outputDir,
+  },
+  {
+    format: 'cjs',
+    inputs,
+    outputDir,
+  },
+];
+
+const configs = bundles
+  .map(({ inputs, outputDir, format, minify }) =>
+    inputs.map(input => ({
+      input,
+      plugins: plugins(pkg, minify),
+      external: ['preact', 'prop-types', 'lucide'],
+      output: {
+        name: packageName,
+        file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+        format,
+        sourcemap: true,
+        globals: {
+          preact: 'preact',
+          'prop-types': 'PropTypes',
+        },
+      },
+    })),
+  )
+  .flat();
+
+export default configs;

packages/lucide-preact/scripts/buildTypes.js

@@ -0,0 +1,43 @@
+import path from 'path';
+import {
+  writeFile,
+  readSvgDirectory,
+  resetFile,
+  toPascalCase,
+  appendFile,
+} from '../../../scripts/helpers';
+
+const srcDirectory = path.join(__dirname, '../dist');
+
+// Declare type definitions
+const typeDefinitions = `\
+/// <reference types="preact" />
+import { JSX, RefObject } from 'preact'
+
+interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
+  key?: string | number;
+  ref?: string | ((component: any) => any) | RefObject<any>;
+  color?: string
+  size?: string | number
+}
+
+// Generated icons
+`;
+
+const ICONS_DIR = path.resolve(__dirname, '../../../icons');
+const TYPES_FILE = 'lucide-preact.d.ts';
+
+resetFile(TYPES_FILE, srcDirectory);
+writeFile(typeDefinitions, TYPES_FILE, srcDirectory);
+
+const svgFiles = readSvgDirectory(ICONS_DIR);
+
+svgFiles.forEach(svgFile => {
+  const iconName = path.basename(svgFile, '.svg');
+  const componentName = toPascalCase(iconName);
+
+  const exportTypeString = `export declare const ${componentName}: (props: LucideProps) => JSX.Element;\n`;
+  appendFile(exportTypeString, TYPES_FILE, srcDirectory);
+});
+
+console.log(`Generated ${TYPES_FILE} file with`, svgFiles.length, 'icons');

packages/lucide-preact/scripts/exportTemplate.js

@@ -0,0 +1,7 @@
+export default ({ componentName, children }) => `
+import createPreactComponent from '../createPreactComponent';
+
+const ${componentName} = createPreactComponent('${componentName}', ${JSON.stringify(children)});
+
+export default ${componentName};
+`;

packages/lucide-preact/src/createPreactComponent.js

@@ -0,0 +1,22 @@
+import { h } from 'preact';
+import defaultAttributes from './defaultAttributes';
+
+export default (iconName, iconNode) => {
+  const Component = ({ color = 'currentColor', size = 24, strokeWidth = 2, ...rest }) =>
+    h(
+      'svg',
+      {
+        ...defaultAttributes,
+        width: size,
+        height: size,
+        stroke: color,
+        'stroke-width': strokeWidth,
+        ...rest,
+      },
+      iconNode.map(([tag, attrs]) => h(tag, attrs)),
+    );
+
+  Component.displayName = `${iconName}`;
+
+  return Component;
+};

packages/lucide-preact/src/defaultAttributes.js

@@ -0,0 +1,11 @@
+export default {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 24,
+  height: 24,
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  'stroke-width': 2,
+  'stroke-linecap': 'round',
+  'stroke-linejoin': 'round',
+};

packages/lucide-preact/src/icons/.gitkeep

@@ -0,0 +1 @@
+Folder for generated icons

packages/lucide-preact/src/lucide-preact.js

@@ -0,0 +1 @@
+export * from './icons';

packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
+
+exports[`Using lucide icon components should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;

packages/lucide-preact/tests/lucide-preact.spec.js

@@ -0,0 +1,30 @@
+import { h } from 'preact'
+import { render } from '@testing-library/preact'
+import { Grid } from '../src/icons'
+
+describe('Using lucide icon components', () => {
+  it('should render an component', () => {
+    const { container } = render( <Grid/> );
+
+    expect( container.innerHTML ).toMatchSnapshot();
+  });
+
+  it('should adjust the size, stroke color and stroke width', () => {
+    const testId = 'grid-icon';
+    const { container, getByTestId } = render(
+      <Grid
+        data-testid={testId}
+        size={48}
+        stroke="red"
+        strokeWidth={4}
+      />,
+    );
+
+    const { attributes } = getByTestId(testId);
+    expect(attributes.stroke.value).toBe('red');
+    expect(attributes.width.value).toBe('48');
+    expect(attributes.height.value).toBe('48');
+    expect(attributes['stroke-width'].value).toBe('4');
+    expect( container.innerHTML ).toMatchSnapshot();
+  });
+})