fix lint errors

src/common/animations/Animation.tsx

@@ -1,13 +1,9 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 const TRANSITION_DURATION = 500;
 
-const Animation = ({
-  name,
-  timeout,
-  children,
-}) => {
+const Animation = ({ name, timeout, children }) => {
   const nodeRef = useRef(null);
   return (
     <CSSTransition

src/common/animations/FadeIn.tsx

@@ -1,11 +1,9 @@
 import './fadeIn.scss';
 
-import React from 'react';
-
 import Animation from './Animation';
 
 const FadeIn = ({ children }) => (
-  <Animation name='fadeIn' timeout={[400, 700, 700]}>
+  <Animation name="fadeIn" timeout={[400, 700, 700]}>
     {children}
   </Animation>
 );

src/common/animations/Slide.tsx

@@ -1,11 +1,9 @@
 import './slide.scss';
 
-import React from 'react';
-
 import Animation from './Animation';
 
 const Slide = ({ children }) => (
-  <Animation name='slide' timeout={[0, 200, 200]}>
+  <Animation name="slide" timeout={[0, 200, 200]}>
     {children}
   </Animation>
 );

src/components/ColorPicker/ColorPicker.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ColorPicker } from './ColorPicker';

src/components/clock/Clock.tsx

@@ -1,6 +1,6 @@
-import './clock.scss';
+import './Clock.scss';
 
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import classNames from 'classnames';
 
 //import Slide from '../../common/animations/Slide';
@@ -62,12 +62,12 @@ const Delimiter = ({ hidden = false, delimiterBlinking }) => {
   return <span className={className}>:</span>;
 };
 
-const AmPm = ({ hours }: {hours: number}) => {
+const AmPm = ({ hours }: { hours: number }) => {
   const ampm = hours < 12 ? 'am' : 'pm';
   return <span className="clock__ampm">{ampm}</span>;
 };
 
-const Clock = ({ className }: {className: string}) => {
+const Clock = ({ className }: { className: string }) => {
   const { state } = useSettingsSlice();
   const { use24format: use24, delimiterBlinking, displaySeconds, animateDigits } = state;
   const [{ minutes, hours, seconds }, setTime] = useState(newTime);

src/components/settings/Settings.tsx

@@ -1,6 +1,6 @@
 import './Settings.scss';
 
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 
 import SettingsGroups from './SettingsGroups/SettingsGroups';

src/components/settings/SettingsGroups/SettingsGroups.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import SettingsGroups from './SettingsGroups';

src/components/settings/SettingsGroups/SettingsGroups.tsx

@@ -1,7 +1,6 @@
 import './SettingsGroups.scss';
 
 import classNames from 'classnames';
-
 import SettingsGroupTile from '../SettingsGroupTile/SettingsGroupTile';
 import type { SettingsGroup } from '../settings-groups';
 

src/components/settings/SettingsPanel/SettingsPanel.tsx

@@ -1,6 +1,7 @@
-import classNames from 'classnames';
 import './SettingsPanel.scss';
 
+import classNames from 'classnames';
+
 import { PropsWithChildren } from 'react';
 
 type Props = PropsWithChildren<{

src/components/settings/SettingsPanelBackground/SettingsPanelBackground.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { colors, gradientAngles, gradients, images, patterns } from '../../../config';
 import lang from '../../../services/lang';
 import { ColorPicker } from '../../ColorPicker/ColorPicker';

src/components/settings/SettingsPanelClock/SettingsPanelClock.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useSettingsSlice } from '../../../store/slices/settingsSlice';
 import { SettingsPanel } from '../SettingsPanel/SettingsPanel';
 import SwitchOption from '../SwitchOption/SwitchOption';

src/components/settings/SettingsPanelDock/SettingsPanelDock.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import lang from '../../../services/lang';
 import { dock } from '../../../config';
 import { DockURL } from '../../../config/dock';

src/components/settings/SettingsPanelText/SettingsPanelText.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from 'react';
+import { ChangeEvent } from 'react';
 import { colors, fonts } from '../../../config';
 import lang from '../../../services/lang';
 import { ColorPicker } from '../../ColorPicker/ColorPicker';

src/components/settings/SettingsSection/SettingsSection.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { SettingsSection } from './SettingsSection';

src/components/settings/SettingsSection/SettingsSection.tsx

@@ -1,5 +1,6 @@
 import './SettingsSection.scss';
-import React, { PropsWithChildren } from 'react';
+
+import { PropsWithChildren } from 'react';
 
 type Props = PropsWithChildren<{
   title: string;

src/components/settings/Slider/Slider.stories.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Slider } from './Slider';

src/components/settings/Slider/Slider.tsx

@@ -1,6 +1,6 @@
 import './Slider.scss';
 
-import React, { InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
 
 export const Slider = ({ min, max, value, ...rest }: InputHTMLAttributes<HTMLInputElement>) => {
   const zeroBasedValue: number = parseFloat(value as string) - parseFloat(min as string);

src/components/settings/Switch/Switch.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Switch from './Switch';

src/components/settings/Switch/Switch.tsx

@@ -1,6 +1,6 @@
 import './Switch.scss';
 
-import React, { InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 const Switch = ({ className, checked, ...rest }: InputHTMLAttributes<HTMLInputElement>) => {

src/components/settings/SwitchOption/SwitchOption.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import SwitchOption from './SwitchOption';

src/components/settings/SwitchOption/SwitchOption.tsx

@@ -1,6 +1,6 @@
 import './SwitchOption.scss';
 
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import Switch from '../Switch/Switch';
 
 type Props = PropsWithChildren<{

src/components/weather/Current.tsx

@@ -1,22 +1,20 @@
 import './current.scss';
 
-import * as React from 'react';
-
 import Icon from './Icon';
 import type { WeatherResponseCurrent, WeatherResponseLocation } from '../../types';
 
 type Props = {
-  data: WeatherResponseCurrent,
-  location: WeatherResponseLocation,
-  temperatureUnits: 'c' | 'f',
+  data: WeatherResponseCurrent;
+  location: WeatherResponseLocation;
+  temperatureUnits: 'c' | 'f';
 };
 
 const CurrentWeather = ({ data, location, temperatureUnits }: Props) => (
-  <div className='weather-current'>
-    <div className='weather-current__city'>{location.city}</div>
-    <Icon className='weather-current__icon' code={data.code} title={data.text} />
-    <div className='weather-current__temperature'>{data.temp}</div>
-    <div className='weather-current__degrees'>°{temperatureUnits.toUpperCase()}</div>
+  <div className="weather-current">
+    <div className="weather-current__city">{location.city}</div>
+    <Icon className="weather-current__icon" code={data.code} title={data.text} />
+    <div className="weather-current__temperature">{data.temp}</div>
+    <div className="weather-current__degrees">°{temperatureUnits.toUpperCase()}</div>
   </div>
 );
 

src/components/weather/Error.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import lang from '../../services/lang';
 import ErrorMessage from '../error/ErrorMessage';
 
@@ -33,7 +31,7 @@ const WeatherError = ({ error }: Props) => {
     }
   }
 
-  return <ErrorMessage className='weather__error'>{message}</ErrorMessage>;
+  return <ErrorMessage className="weather__error">{message}</ErrorMessage>;
 };
 
 export default WeatherError;

src/components/weather/Forecast.tsx

@@ -1,7 +1,5 @@
 import './forecast.scss';
 
-import * as React from 'react';
-
 import type { WeatherResponseForecast } from '../../types';
 import lang from '../../services/lang';
 import Icon from './Icon';
@@ -21,19 +19,19 @@ export const getDay = (date: string) => {
 };
 
 type Props = {
-  data: WeatherResponseForecast,
+  data: WeatherResponseForecast;
 };
 
 const WeatherForecast = (props: Props) => (
-  <div className='weather-forecast'>
-    {props.data.map(day => (
-      <div className='weather-forecast__day' key={day.date}>
-        <div className='weather-forecast__day__name'>{getDay(day.date)}</div>
-        <Icon className='weather-forecast__day__icon' code={day.code} title={day.text} />
-        <div className='weather-forecast__day__temperature'>
-          <span className='weather-forecast__day__temperature--max'>{day.max}&deg;</span>
-          <span className='weather-forecast__day__temperature__separator'>/</span>
-          <span className='weather-forecast__day__temperature--min'>{day.min}&deg;</span>
+  <div className="weather-forecast">
+    {props.data.map((day) => (
+      <div className="weather-forecast__day" key={day.date}>
+        <div className="weather-forecast__day__name">{getDay(day.date)}</div>
+        <Icon className="weather-forecast__day__icon" code={day.code} title={day.text} />
+        <div className="weather-forecast__day__temperature">
+          <span className="weather-forecast__day__temperature--max">{day.max}&deg;</span>
+          <span className="weather-forecast__day__temperature__separator">/</span>
+          <span className="weather-forecast__day__temperature--min">{day.min}&deg;</span>
         </div>
       </div>
     ))}

src/components/weather/Icon.tsx

@@ -1,6 +1,5 @@
 import './icon.scss';
 
-import * as React from 'react';
 import classNames from 'classnames';
 
 type Props = {

src/components/weather/__tests__/Current.test.js

@@ -1,30 +1,24 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 
 import Current from '../Current';
 
-
 describe('Components > weather > Current', () => {
   it('should match snapshot', () => {
     const testData = {
       code: '1',
       date: '18 Jan 2018',
       temp: -273,
-      text: 'test-text'
+      text: 'test-text',
     };
 
     const testLocation = {
-      city: 'TestCity'
+      city: 'TestCity',
     };
 
     const testTemperatureUnits = 'test-temp-unit';
 
-
     const component = renderer.create(
-      <Current
-        data={testData}
-        location={testLocation}
-        temperatureUnits={testTemperatureUnits} />
+      <Current data={testData} location={testLocation} temperatureUnits={testTemperatureUnits} />,
     );
 
     const tree = component.toJSON();

src/components/weather/__tests__/Forecast.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 
 import Forecast, { daysBetween, getDay } from '../Forecast';
@@ -8,7 +7,7 @@ describe('Components > weather > Forecast', () => {
     /* global global */
     const OriginalDate = Date;
     // mock Date
-    global.Date = jest.fn().mockImplementation(a => new OriginalDate(a ? a : today));
+    global.Date = jest.fn().mockImplementation((a) => new OriginalDate(a ? a : today));
     global.Date.now = OriginalDate.now;
     // run function
     fn();