feat: default copy component (#220)

* feat: default copy component

* refactor: ref imports

gbajs3/src/components/controls/virtual-controls.tsx

@@ -27,15 +27,15 @@ import {
 import { useAddCallbacks } from '../../hooks/emulator/use-add-callbacks.tsx';
 import { useQuickReload } from '../../hooks/emulator/use-quick-reload.tsx';
 import { UploadSaveToServerModal } from '../modals/upload-save-to-server.tsx';
+import { Copy } from '../shared/styled.tsx';
 
 import type { AreVirtualControlsEnabledProps } from '../modals/controls/virtual-controls-form.tsx';
 
-const VirtualButtonTextLarge = styled.p`
+const VirtualButtonTextLarge = styled(Copy)`
   text-align: center;
   vertical-align: middle;
   line-height: 54px;
   color: ${({ theme }) => theme.pureWhite};
-  margin: 0;
   font-size: 1.5em;
 `;
 

gbajs3/src/components/modals/file-system/file-system-options-form.tsx

@@ -10,6 +10,7 @@ import { MinusSquare, PlusSquare } from '../../shared/action-box-icons.tsx';
 import { ButtonBase } from '../../shared/custom-button-base.tsx';
 import { ManagedCheckbox } from '../../shared/managed-checkbox.tsx';
 import { ManagedSwitch } from '../../shared/managed-switch.tsx';
+import { Copy } from '../../shared/styled.tsx';
 
 import type { CoreCallbackOptions } from '../../../hooks/emulator/use-add-callbacks.tsx';
 
@@ -36,8 +37,7 @@ const StyledForm = styled.form`
   }
 `;
 
-const OptionsFormTitle = styled.p`
-  margin: 0;
+const OptionsFormTitle = styled(Copy)`
   ${fileSystemFontStyle}
 `;
 

gbajs3/src/components/modals/upload-public-external-roms.tsx

@@ -21,6 +21,7 @@ import {
   LoadingIndicator,
   PacmanIndicator
 } from '../shared/loading-indicator.tsx';
+import { Copy } from '../shared/styled.tsx';
 
 import type { PublicRomUploadStatus } from '../../hooks/use-show-load-public-roms.tsx';
 
@@ -33,10 +34,6 @@ const LinkBreakWord = styled.a`
   word-break: break-all;
 `;
 
-const Copy = styled.p`
-  margin: 0;
-`;
-
 const URLDisplay = ({ url }: { url: URL }) => {
   return (
     <Accordion>

gbajs3/src/components/shared/custom-button-base.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import { forwardRef, type ReactNode } from 'react';
 import { styled } from 'styled-components';
 
 type ButtonBaseProps = {
@@ -16,12 +16,10 @@ const StyledButton = styled.button`
   padding: inherit;
 `;
 
-export const ButtonBase = React.forwardRef<HTMLButtonElement, ButtonBaseProps>(
-  ({ children, ...rest }, ref) => {
-    return (
-      <StyledButton ref={ref} {...rest}>
-        {children}
-      </StyledButton>
-    );
-  }
+export const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(
+  ({ children, ...rest }, ref) => (
+    <StyledButton ref={ref} {...rest}>
+      {children}
+    </StyledButton>
+  )
 );

gbajs3/src/components/shared/error-with-icon.tsx

@@ -1,5 +1,7 @@
 import { styled } from 'styled-components';
 
+import { Copy } from './styled.tsx';
+
 type ErrorWithIconProps = {
   text: string;
   icon: JSX.Element;
@@ -12,8 +14,7 @@ const ErrorWrapper = styled.div`
   gap: 5px;
 `;
 
-const ErrorText = styled.p`
-  margin: 0;
+const ErrorText = styled(Copy)`
   color: ${({ theme }) => theme.errorRed};
 `;
 

gbajs3/src/components/shared/loading-indicator.tsx

@@ -21,7 +21,7 @@ const LoadingContainer = styled.div`
   margin-bottom: 15px;
 `;
 
-const Copy = styled.p`
+const BreakWord = styled.p`
   word-wrap: break-word;
   max-width: 100%;
 `;
@@ -47,11 +47,11 @@ export const LoadingIndicator = ({
 }: LoadingIndicatorProps) => {
   return isLoading ? (
     <LoadingContainer>
-      <Copy>
+      <BreakWord>
         {loadingCopy}
         <br />
         {currentName}
-      </Copy>
+      </BreakWord>
       {indicator}
     </LoadingContainer>
   ) : (

gbajs3/src/components/shared/managed-checkbox.tsx

@@ -1,5 +1,5 @@
 import { Checkbox, FormControlLabel, type CheckboxProps } from '@mui/material';
-import React from 'react';
+import { forwardRef } from 'react';
 
 type ManagedCheckBoxProps = {
   label: string;
@@ -9,7 +9,7 @@ type ManagedCheckBoxProps = {
 // Shared managed checkbox component with label
 // Params: takes in label, button props,
 // and a watcher indicating the current value
-export const ManagedCheckbox = React.forwardRef<
+export const ManagedCheckbox = forwardRef<
   HTMLButtonElement,
   ManagedCheckBoxProps
 >(({ id, label, watcher, ...rest }, ref) => (

gbajs3/src/components/shared/managed-switch.tsx

@@ -1,5 +1,5 @@
 import { Switch, FormControlLabel, type SwitchProps } from '@mui/material';
-import React from 'react';
+import { forwardRef } from 'react';
 
 type ManagedSwitchProps = {
   label: string;
@@ -9,15 +9,14 @@ type ManagedSwitchProps = {
 // Shared managed switch component with label
 // Params: takes in label, switch props,
 //         and a watcher indicating the current value
-export const ManagedSwitch = React.forwardRef<
-  HTMLButtonElement,
-  ManagedSwitchProps
->(({ id, label, watcher, ...rest }, ref) => (
-  <FormControlLabel
-    data-testid="managed-switch:label"
-    id={id}
-    control={<Switch ref={ref} checked={!!watcher} {...rest} />}
-    label={label}
-    style={{ margin: 0 }}
-  />
-));
+export const ManagedSwitch = forwardRef<HTMLButtonElement, ManagedSwitchProps>(
+  ({ id, label, watcher, ...rest }, ref) => (
+    <FormControlLabel
+      data-testid="managed-switch:label"
+      id={id}
+      control={<Switch ref={ref} checked={!!watcher} {...rest} />}
+      label={label}
+      style={{ margin: 0 }}
+    />
+  )
+);

gbajs3/src/components/shared/styled.tsx

@@ -1,11 +1,14 @@
 import { BiPlus } from 'react-icons/bi';
 import { styled } from 'styled-components';
 
-export const CenteredText = styled.p`
-  text-align: center;
+export const Copy = styled.p`
   margin: 0;
 `;
 
+export const CenteredText = styled(Copy)`
+  text-align: center;
+`;
+
 export const Header = styled.h3`
   margin: 0;
 `;