Improve formatting (#1814)

* Ignore linting for examples in docs

* Formatting JSX single attribute per line

* Separte `format` and `lint:format` in package.json

* Bump prettier version

* Run format

packages/lucide-react-native/__mocks__/react-native-svg/index.ts

@@ -3,14 +3,14 @@ import React from 'react';
 import type { LucideProps } from '../../src/createReactComponent';
 export type { SvgProps } from 'react-native-svg';
 
-const createComponent = function(name: string) {
+const createComponent = function (name: string) {
   const component = (props: LucideProps) => {
     return React.createElement(name, props, props.children);
-  }
+  };
 
   component.displayName = name;
 
-  return component
+  return component;
 };
 
 // Mock all react-native-svg exports

packages/lucide-react-native/lucide-react-native.d.ts

@@ -1,13 +1,16 @@
 /// <reference types="react" />
 
-declare module 'lucide-react-native'
+declare module 'lucide-react-native';
 
 // Create interface extending SVGProps
 export interface LucideProps extends Partial<React.SVGProps<SVGSVGElement>> {
-    size?: string | number
+  size?: string | number;
 }
 
-export declare const createLucideIcon: (iconName: string, iconNode: any[]) => (props: LucideProps) => JSX.Element;
+export declare const createLucideIcon: (
+  iconName: string,
+  iconNode: any[],
+) => (props: LucideProps) => JSX.Element;
 
 export type Icon = React.FC<LucideProps>;
 

packages/lucide-react-native/rollup.config.mjs

@@ -1,5 +1,5 @@
 import plugins from '@lucide/rollup-plugins';
-import dts from "rollup-plugin-dts";
+import dts from 'rollup-plugin-dts';
 import pkg from './package.json' assert { type: 'json' };
 
 const packageName = 'LucideReact';
@@ -23,7 +23,7 @@ const bundles = [
 
 const configs = bundles
   .map(({ inputs, outputDir, format, minify, preserveModules }) =>
-    inputs.map(input => ({
+    inputs.map((input) => ({
       input,
       plugins: plugins(pkg, minify),
       external: ['react', 'react-native-svg'],
@@ -49,13 +49,16 @@ const configs = bundles
   )
   .flat();
 
-  export default [
-    {
-      input: inputs[0],
-      output: [{
-        file: `dist/${outputFileName}.d.ts`, format: "es"
-      }],
-      plugins: [dts()],
-    },
-    ...configs
-  ];
+export default [
+  {
+    input: inputs[0],
+    output: [
+      {
+        file: `dist/${outputFileName}.d.ts`,
+        format: 'es',
+      },
+    ],
+    plugins: [dts()],
+  },
+  ...configs,
+];

packages/lucide-react-native/src/createLucideIcon.ts

@@ -1,21 +1,38 @@
-import { forwardRef, createElement, ReactSVG, FunctionComponent, ForwardRefExoticComponent } from 'react';
+import {
+  forwardRef,
+  createElement,
+  ReactSVG,
+  FunctionComponent,
+  ForwardRefExoticComponent,
+} from 'react';
 import * as NativeSvg from 'react-native-svg';
 import defaultAttributes, { childDefaultAttributes } from './defaultAttributes';
 import type { SvgProps } from 'react-native-svg';
 
-export type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][]
+export type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][];
 
 export interface LucideProps extends SvgProps {
-  size?: string | number
-  absoluteStrokeWidth?: boolean
-  'data-testid'?: string
+  size?: string | number;
+  absoluteStrokeWidth?: boolean;
+  'data-testid'?: string;
 }
 
 export type LucideIcon = ForwardRefExoticComponent<LucideProps>;
 
 const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
   const Component = forwardRef(
-    ({ color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, children, 'data-testid': dataTestId, ...rest }: LucideProps, ref) => {
+    (
+      {
+        color = 'currentColor',
+        size = 24,
+        strokeWidth = 2,
+        absoluteStrokeWidth,
+        children,
+        'data-testid': dataTestId,
+        ...rest
+      }: LucideProps,
+      ref,
+    ) => {
       const customAttrs = {
         stroke: color,
         strokeWidth: absoluteStrokeWidth ? (Number(strokeWidth) * 24) / Number(size) : strokeWidth,
@@ -42,12 +59,10 @@ const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
               { ...childDefaultAttributes, ...customAttrs, ...attrs } as LucideProps,
             );
           }),
-          ...(
-            (Array.isArray(children) ? children : [children]) || []
-          ),
+          ...((Array.isArray(children) ? children : [children]) || []),
         ],
       );
-    }
+    },
   );
 
   Component.displayName = `${iconName}`;

packages/lucide-react-native/tests/lucide-react-native.spec.tsx

@@ -1,16 +1,16 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { cleanup, render } from '@testing-library/react'
-import { Edit2, Grid, Pen } from '../src/lucide-react-native'
+import { cleanup, render } from '@testing-library/react';
+import { Edit2, Grid, Pen } from '../src/lucide-react-native';
 
-vi.mock('react-native-svg')
+vi.mock('react-native-svg');
 
-type Attributes = Record<string, { value: unknown}>
+type Attributes = Record<string, { value: unknown }>;
 
 describe('Using lucide icon components', () => {
   it('should render an component', () => {
-    const { container } = render(<Grid /> );
+    const { container } = render(<Grid />);
 
-    expect( container.innerHTML ).toMatchSnapshot();
+    expect(container.innerHTML).toMatchSnapshot();
   });
 
   it('should adjust the size, stroke color and stroke width', () => {
@@ -30,7 +30,7 @@ describe('Using lucide icon components', () => {
     expect((attributes as unknown as Attributes).height.value).toBe('48');
     expect((attributes as unknown as Attributes)['stroke-width'].value).toBe('4');
 
-    expect( container.innerHTML ).toMatchSnapshot();
+    expect(container.innerHTML).toMatchSnapshot();
   });
 
   it('should render the alias icon', () => {
@@ -44,9 +44,9 @@ describe('Using lucide icon components', () => {
       />,
     );
 
-    const PenIconRenderedHTML = container.innerHTML
+    const PenIconRenderedHTML = container.innerHTML;
 
-    cleanup()
+    cleanup();
 
     const { container: Edit2Container } = render(
       <Edit2
@@ -57,10 +57,9 @@ describe('Using lucide icon components', () => {
       />,
     );
 
-    expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML)
+    expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML);
   });
 
-
   it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => {
     const testId = 'grid-icon';
     const { container, getByTestId } = render(
@@ -72,50 +71,52 @@ describe('Using lucide icon components', () => {
       />,
     );
 
-    const { attributes } = getByTestId(testId) as unknown as{ attributes: Record<string, { value: string }>};
+    const { attributes } = getByTestId(testId) as unknown as {
+      attributes: Record<string, { value: string }>;
+    };
     expect(attributes.stroke.value).toBe('red');
     expect(attributes.width.value).toBe('48');
     expect(attributes.height.value).toBe('48');
     expect(attributes['stroke-width'].value).toBe('1');
 
-    expect( container.innerHTML ).toMatchSnapshot();
+    expect(container.innerHTML).toMatchSnapshot();
   });
 
   it('should work with a single child component', () => {
-    const testId = "single-child";
-    const childId = "child";
+    const testId = 'single-child';
+    const childId = 'child';
 
     const { container, getByTestId } = render(
       <Grid data-testid={testId}>
-        <Grid data-testid={childId}/>
-      </Grid>
+        <Grid data-testid={childId} />
+      </Grid>,
     );
-    const { children} = getByTestId(testId) as unknown as{ children: HTMLCollection};
-    const lastChild = children[children.length -1];
+    const { children } = getByTestId(testId) as unknown as { children: HTMLCollection };
+    const lastChild = children[children.length - 1];
 
     expect(lastChild).toEqual(getByTestId(childId));
     expect(container.innerHTML).toMatchSnapshot();
-  })
+  });
 
   it('should work with several children components', () => {
-    const testId = "multiple-children";
-    const childId1 = "child1";
-    const childId2 = "child2";
+    const testId = 'multiple-children';
+    const childId1 = 'child1';
+    const childId2 = 'child2';
 
     const { container, getByTestId } = render(
       <Grid data-testid={testId}>
-        <Grid data-testid={childId1}/>
-        <Grid data-testid={childId2}/>
-      </Grid>
+        <Grid data-testid={childId1} />
+        <Grid data-testid={childId2} />
+      </Grid>,
     );
-    const {children} = getByTestId(testId) as unknown as{ children: HTMLCollection};
+    const { children } = getByTestId(testId) as unknown as { children: HTMLCollection };
     const child1 = children[children.length - 2];
     const child2 = children[children.length - 1];
 
     expect(child1).toEqual(getByTestId(childId1));
     expect(child2).toEqual(getByTestId(childId2));
     expect(container.innerHTML).toMatchSnapshot();
-  })
+  });
 
   it('should duplicate properties to children components', () => {
     const testId = 'multiple-children';
@@ -125,7 +126,12 @@ describe('Using lucide icon components', () => {
     const strokeWidth = 10;
 
     const { container, getByTestId } = render(
-      <Grid data-testid={testId} fill={fill} color={color} strokeWidth={strokeWidth} />
+      <Grid
+        data-testid={testId}
+        fill={fill}
+        color={color}
+        strokeWidth={strokeWidth}
+      />,
     );
     const { children = [] } = getByTestId(testId) as unknown as { children: HTMLCollection };
     for (let i = 0; i < children.length; i++) {
@@ -136,5 +142,5 @@ describe('Using lucide icon components', () => {
     }
 
     expect(container.innerHTML).toMatchSnapshot();
-  })
-})
+  });
+});

packages/lucide-react-native/tests/setupVitest.js

@@ -2,9 +2,9 @@ import '@testing-library/jest-dom';
 import { expect, afterEach } from 'vitest';
 import { cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
-import htmlSerializer from 'jest-serializer-html'
+import htmlSerializer from 'jest-serializer-html';
 
-expect.addSnapshotSerializer(htmlSerializer)
+expect.addSnapshotSerializer(htmlSerializer);
 
 afterEach(() => {
   cleanup();

packages/lucide-react-native/tsconfig.json

@@ -2,10 +2,7 @@
   "compilerOptions": {
     "target": "esnext",
     "module": "ESNext",
-    "lib": [
-      "es2019",
-      "DOM"
-    ],
+    "lib": ["es2019", "DOM"],
     "allowJs": true,
     "jsx": "react-jsx",
     "noEmit": true,
@@ -16,9 +13,7 @@
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "esModuleInterop": true,
-    "skipLibCheck": false
+    "skipLibCheck": false,
   },
-  "exclude": [
-    "node_modules",
-  ]
+  "exclude": ["node_modules"],
 }