feat: move to emotion

- for now, goal is to move to css modules or another solution, but not just yet

Author: thenick775

README.md

@@ -20,7 +20,7 @@ A React component that provides a customizable Progressive Web App (PWA) prompt
 - 📃 Customize prompt content based on PWA availability and full-screen mode.
 - ⚡️ Efficient: Minimal overhead for non-iOS devices, optimizing each page load.
 - 🌕 Dark mode support: Adapts to iOS 13 and 14 settings.
-- 🎨 Supports custom styling with `styled-components`
+- 🎨 Supports custom styling with `emotion`
 
 ## Usage
 
@@ -33,7 +33,8 @@ npm i react-ios-pwa-prompt-ts
 2. Add peer dependencies if not already included in your application:
 
 ```
-npm i react styled-components
+npm i @emotion/react && \
+npm i @emotion/styled
 ```
 
 3. Import into your project:

eslint.config.mjs

@@ -4,7 +4,6 @@ import importPlugin from 'eslint-plugin-import';
 import jsxA11Y from 'eslint-plugin-jsx-a11y';
 import pluginReactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
-import styledA11y from 'eslint-plugin-styled-components-a11y';
 import testingLibrary from 'eslint-plugin-testing-library';
 import globals from 'globals';
 import tseslint from 'typescript-eslint';
@@ -14,7 +13,6 @@ export default [
   js.configs.recommended,
   importPlugin.flatConfigs.recommended,
   jsxA11Y.flatConfigs.recommended,
-  styledA11y.flatConfigs.recommended,
   testingLibrary.configs['flat/dom'],
   ...tseslint.configs.recommended,
   ...storybook.configs['flat/recommended'],

lib/components/styled.tsx

@@ -1,6 +1,8 @@
+import styled from '@emotion/styled';
 import { FaRegSquarePlus } from 'react-icons/fa6';
 import { IoShareOutline } from 'react-icons/io5';
-import { styled } from 'styled-components';
+
+import type { IconBaseProps } from 'react-icons';
 
 type PromptCopyProps = {
   $bold?: boolean;
@@ -11,6 +13,10 @@ type VisibleElementProps = {
   $transitionDuration?: number;
 };
 
+const IoShareOutlineViewBox = (props: IconBaseProps) => (
+  <IoShareOutline viewBox="55 0 512 512" {...props} />
+);
+
 export const PromptOverlay = styled.div<VisibleElementProps>`
   background-color: rgba(10, 10, 10, 0.5);
   display: ${({ $isVisible }) => ($isVisible ? 'block' : 'none')};
@@ -145,9 +151,7 @@ export const PromptDescription = styled.div`
   }
 `;
 
-export const PromptShareIcon = styled(IoShareOutline).attrs({
-  viewBox: '55 0 512 512',
-})`
+export const PromptShareIcon = styled(IoShareOutlineViewBox)`
   color: rgba(0, 85, 179, 1);
   height: 44px;
   margin-right: 15px;