Add rome linting tools

.github/workflows/build.yaml

@@ -14,7 +14,7 @@ on:
 
 jobs:
   build:
-    runs-on: [ubuntu-latest]
+    runs-on: ubuntu-latest
     name: Build
     steps:
       - name: Checkout
@@ -31,9 +31,6 @@ jobs:
       - name: Lint
         run: npm run lint
 
-      - name: Lint:editorconfig
-        run: npm run lint:editorconfig
-
       - name: Test
         run: npm run test
 

.github/workflows/release.yaml

@@ -7,7 +7,7 @@ on:
 jobs:
   ensure_version_changed:
     name: Ensure that version was changed
-    runs-on: [ubuntu-latest]
+    runs-on: ubuntu-latest
     outputs:
       version: ${{ steps.check_version.outputs.version }}
     steps:
@@ -40,7 +40,7 @@ jobs:
       should_pack: true
 
   publish:
-    runs-on: [ubuntu-latest]
+    runs-on: ubuntu-latest
     needs: [build, ensure_version_changed]
     if: ${{ needs.ensure_version_changed.outputs.version }}
     name: Publish to npm
@@ -56,7 +56,7 @@ jobs:
         npm publish --access public ukorvl-react-on-screen-${{ needs.ensure_version_changed.outputs.version }}.tgz
 
   tag:
-    runs-on: [ubuntu-latest]
+    runs-on: ubuntu-latest
     needs: [build, ensure_version_changed, publish, release]
     if: ${{ needs.ensure_version_changed.outputs.version }}
     name: Tag

.gitignore

@@ -15,7 +15,8 @@ npm-debug.log*
 
 # editors
 .idea
-.vscode
+.vscode/*
+!.vscode/settings.json
 
 # storybook
 storybook-static

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "rome.rome",
+  "editor.formatOnSave": true
+}

lib/OnScreen.tsx

@@ -12,16 +12,11 @@ import { UseOnScreenParameters, useOnScreen } from './useOnScreen';
 /**
  * OnScreen component own props.
  */
-type OnScreenOwnProps<
-  T extends HTMLElement,
-  AS extends ElementType = ElementType,
-> = {
+type OnScreenOwnProps<T extends HTMLElement, AS extends ElementType = ElementType> = {
   /**
    * Render function.
    */
-  children: (
-    props: { ref: RefObject<T> } & ReturnType<typeof useOnScreen>,
-  ) => ReactElement;
+  children: (props: { ref: RefObject<T> } & ReturnType<typeof useOnScreen>) => ReactElement;
   /**
    * Element to render.
    */
@@ -34,8 +29,7 @@ type OnScreenOwnProps<
 export type OnScreenProps<
   T extends HTMLElement,
   AS extends ElementType = ElementType,
-> = OnScreenOwnProps<T, AS> &
-  Omit<ComponentProps<AS>, keyof OnScreenOwnProps<T, AS>>;
+> = OnScreenOwnProps<T, AS> & Omit<ComponentProps<AS>, keyof OnScreenOwnProps<T, AS>>;
 
 /**
  * Wrapper component to detect react element visibility.
@@ -52,10 +46,7 @@ export type OnScreenProps<
  * @param {OnScreenProps} onScreenComponentProps Props.
  * @returns Children elements with on-screen wrapper.
  */
-export const OnScreen = <
-  T extends HTMLElement,
-  AS extends ElementType = ElementType,
->({
+export const OnScreen = <T extends HTMLElement, AS extends ElementType = ElementType>({
   children,
   margin,
   threshold,

lib/__tests__/OnScreen.test.tsx

@@ -7,13 +7,10 @@ import {
   createRenderTest,
 } from './testUtils';
 
-const renderComponent: ComponentRenderer = settings => (
+const renderComponent: ComponentRenderer = (settings) => (
   <OnScreen<HTMLDivElement> {...settings}>
     {({ ref, isOnScreen }) => (
-      <div
-        ref={ref}
-        data-testid={`target${isOnScreen ? '-isOnScreen' : ''}`}
-      />
+      <div ref={ref} data-testid={`target${isOnScreen ? '-isOnScreen' : ''}`} />
     )}
   </OnScreen>
 );
@@ -23,8 +20,5 @@ describe('OnScreen', () => {
 
   it('isOnScreen value changes', createIsOnScreenValueTest(renderComponent));
 
-  it(
-    'Once prop is working as expected',
-    createOnceParameterTest(renderComponent),
-  );
+  it('Once prop is working as expected', createOnceParameterTest(renderComponent));
 });

lib/__tests__/testUtils.ts

@@ -7,9 +7,7 @@ import { UseOnScreenParameters } from '../useOnScreen';
 /**
  * Renders component.
  */
-export type ComponentRenderer = (
-  settings?: Pick<UseOnScreenParameters, 'once'>,
-) => ReactElement;
+export type ComponentRenderer = (settings?: Pick<UseOnScreenParameters, 'once'>) => ReactElement;
 
 const targetTestId = 'target';
 const targetIsOnScreenTestId = 'target-isOnScreen';
@@ -32,40 +30,36 @@ export const createRenderTest = (renderComponent: ComponentRenderer) => () => {
  * @param renderComponent Renders component.
  * @returns Test function.
  */
-export const createIsOnScreenValueTest =
-  (renderComponent: ComponentRenderer) => () => {
-    const { getByTestId, queryByTestId } = render(renderComponent());
+export const createIsOnScreenValueTest = (renderComponent: ComponentRenderer) => () => {
+  const { getByTestId, queryByTestId } = render(renderComponent());
 
-    expect(getByTestId(targetTestId)).toBeInTheDocument();
-    expect(queryByTestId(targetIsOnScreenTestId)).toBeNull();
+  expect(getByTestId(targetTestId)).toBeInTheDocument();
+  expect(queryByTestId(targetIsOnScreenTestId)).toBeNull();
 
-    act(() => {
-      io.enterNode(getByTestId(targetTestId));
-    });
+  act(() => {
+    io.enterNode(getByTestId(targetTestId));
+  });
 
-    expect(queryByTestId(targetIsOnScreenTestId)).toBeInTheDocument();
-  };
+  expect(queryByTestId(targetIsOnScreenTestId)).toBeInTheDocument();
+};
 
 /**
  * Creates test to ensure once parameter is working.
  * @param renderComponent Renders component.
  * @returns Test function.
  */
-export const createOnceParameterTest =
-  (renderComponent: ComponentRenderer) => () => {
-    const { queryByTestId, getByTestId } = render(
-      renderComponent({ once: true }),
-    );
+export const createOnceParameterTest = (renderComponent: ComponentRenderer) => () => {
+  const { queryByTestId, getByTestId } = render(renderComponent({ once: true }));
 
-    act(() => {
-      io.enterNode(getByTestId(targetTestId));
-    });
+  act(() => {
+    io.enterNode(getByTestId(targetTestId));
+  });
 
-    expect(queryByTestId(targetIsOnScreenTestId)).toBeInTheDocument();
+  expect(queryByTestId(targetIsOnScreenTestId)).toBeInTheDocument();
 
-    act(() => {
-      io.leaveNode(getByTestId(targetIsOnScreenTestId));
-    });
+  act(() => {
+    io.leaveNode(getByTestId(targetIsOnScreenTestId));
+  });
 
-    expect(getByTestId(targetIsOnScreenTestId)).toBeInTheDocument();
-  };
+  expect(getByTestId(targetIsOnScreenTestId)).toBeInTheDocument();
+};

lib/__tests__/useOnScreen.test.tsx

@@ -11,25 +11,15 @@ const ComponentTemplate = (props: Pick<UseOnScreenParameters, 'once'>) => {
   const ref = useRef(null);
   const { isOnScreen } = useOnScreen({ ref, ...props });
 
-  return (
-    <div
-      ref={ref}
-      data-testid={`target${isOnScreen ? '-isOnScreen' : ''}`}
-    />
-  );
+  return <div ref={ref} data-testid={`target${isOnScreen ? '-isOnScreen' : ''}`} />;
 };
 
-const renderComponent: ComponentRenderer = settings => (
-  <ComponentTemplate {...settings} />
-);
+const renderComponent: ComponentRenderer = (settings) => <ComponentTemplate {...settings} />;
 
 describe('useOnScreen', () => {
   it('useOnScreen component renders', createRenderTest(renderComponent));
 
   it('isOnScreen value changes', createIsOnScreenValueTest(renderComponent));
 
-  it(
-    'Once prop is working as expected',
-    createOnceParameterTest(renderComponent),
-  );
+  it('Once prop is working as expected', createOnceParameterTest(renderComponent));
 });

lib/__tests__/withOnScreen.test.tsx

@@ -8,19 +8,13 @@ import {
   createRenderTest,
 } from './testUtils';
 
-const ComponentTemplate = forwardRef<
-  HTMLDivElement,
-  ReturnType<typeof useOnScreen>
->(function ComponentTemplate({ isOnScreen }, ref) {
-  return (
-    <div
-      ref={ref}
-      data-testid={`target${isOnScreen ? '-isOnScreen' : ''}`}
-    />
-  );
-});
+const ComponentTemplate = forwardRef<HTMLDivElement, ReturnType<typeof useOnScreen>>(
+  function ComponentTemplate({ isOnScreen }, ref) {
+    return <div ref={ref} data-testid={`target${isOnScreen ? '-isOnScreen' : ''}`} />;
+  },
+);
 
-const renderComponent: ComponentRenderer = settings => {
+const renderComponent: ComponentRenderer = (settings) => {
   const WithOnScreen = withOnScreen(ComponentTemplate, settings);
   return <WithOnScreen />;
 };
@@ -30,8 +24,5 @@ describe('withOnScreen', () => {
 
   it('isOnScreen value changes', createIsOnScreenValueTest(renderComponent));
 
-  it(
-    'Once prop is working as expected',
-    createOnceParameterTest(renderComponent),
-  );
+  it('Once prop is working as expected', createOnceParameterTest(renderComponent));
 });

lib/internal/assignRefs.ts

@@ -5,9 +5,9 @@ import { MutableRefObject, Ref } from 'react';
  * @param refs Refs to assign.
  * @returns Assigned ref.
  */
-export const assignRefs = <T extends unknown>(...refs: Ref<T | null>[]) => {
+export const assignRefs = <T>(...refs: Ref<T | null>[]) => {
   return (node: T | null) => {
-    refs.forEach(r => {
+    refs.forEach((r) => {
       if (typeof r === 'function') {
         r(node);
       } else if (r) {

lib/withOnScreen.tsx

@@ -6,9 +6,9 @@ import { assignRefs } from './internal';
 /**
  * WithOnScreen wrapped component with injected props.
  */
-export type WithOnScreenWrappedComponent<
-  Props extends Record<string, unknown>,
-> = ComponentType<Props & ReturnType<typeof useOnScreen>>;
+export type WithOnScreenWrappedComponent<Props extends Record<string, unknown>,> = ComponentType<
+  Props & ReturnType<typeof useOnScreen>
+>;
 
 /**
  * High order component that takes a component and injects onScreen props into it.
@@ -28,24 +28,15 @@ export type WithOnScreenWrappedComponent<
  * @param settings Wrapper settings.
  * @returns Wrapped component with onScreen props.
  */
-export const withOnScreen = <
-  P extends Record<string, unknown>,
-  T extends HTMLElement,
->(
+export const withOnScreen = <P extends Record<string, unknown>, T extends HTMLElement>(
   WrappedComponent: WithOnScreenWrappedComponent<P>,
   settings?: Omit<UseOnScreenParameters<T>, 'ref'>,
 ) => {
   const WithOnScreen = (props: P, forwardedRef: ForwardedRef<T>) => {
     const ref = useRef<T>(null);
     const useOnScreenData = useOnScreen({ ref, ...settings });
 
-    return (
-      <WrappedComponent
-        ref={assignRefs(ref, forwardedRef)}
-        {...useOnScreenData}
-        {...props}
-      />
-    );
+    return <WrappedComponent ref={assignRefs(ref, forwardedRef)} {...useOnScreenData} {...props} />;
   };
 
   hoistNonReactStatics(WithOnScreen, WrappedComponent);