feat: allow style overwrite (#181)

* Allow style overwrite

* Add JSDoc comments

* Rename devToolUI style prop to styles

Author: cvolant

src/devTool.tsx

@@ -2,7 +2,7 @@ import { createStore, StateMachineProvider } from 'little-state-machine';
 import * as React from 'react';
 import { Control, FieldValues, useFormContext } from 'react-hook-form';
 import { v4 as generateUUID } from 'uuid';
-import { DevToolUI } from './devToolUI';
+import { DevToolUI, DevtoolUIProps } from './devToolUI';
 import { useExportControlToExtension } from './extension/useExportControlToExtension';
 import type { PLACEMENT } from './position';
 
@@ -21,11 +21,12 @@ if (typeof window !== 'undefined') {
   );
 }
 
-export const DevTool = <T extends FieldValues>(props?: {
-  id?: string;
-  control?: Control<T>;
-  placement?: PLACEMENT;
-}) => {
+export const DevTool = <T extends FieldValues>(
+  props?: {
+    id?: string;
+    control?: Control<T>;
+  } & Pick<DevtoolUIProps, 'placement' | 'styles'>,
+) => {
   const methods = useFormContext();
 
   const uuid = React.useRef('');
@@ -47,6 +48,7 @@ export const DevTool = <T extends FieldValues>(props?: {
       <DevToolUI
         control={props?.control ?? methods.control}
         placement={props?.placement}
+        styles={props?.styles}
       />
     </StateMachineProvider>
   );

src/devToolUI.tsx

@@ -11,14 +11,22 @@ import { useStateMachine } from 'little-state-machine';
 import { setVisible } from './settingAction';
 import { PLACEMENT, getPositionByPlacement } from './position';
 
-interface DevtoolUIProps {
+export interface DevtoolUIProps {
   control: Control<any>;
   placement?: PLACEMENT;
+  /** Custom styles for the "show/hide panel" button and for the panel div */
+  styles?: {
+    /** Custom styles for the "show/hide panel" button */
+    button?: React.HTMLAttributes<HTMLButtonElement>['style'];
+    /** Custom styles for the panel div */
+    panel?: React.HTMLAttributes<HTMLDivElement>['style'];
+  };
 }
 
 export const DevToolUI: React.FC<DevtoolUIProps> = ({
   control,
   placement = 'top-right',
+  styles,
 }) => {
   const { state, actions } = useStateMachine({
     setVisible,
@@ -61,6 +69,7 @@ export const DevToolUI: React.FC<DevtoolUIProps> = ({
             gridTemplateRows: '40px auto',
             fontFamily:
               "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+            ...styles?.panel,
           }}
         >
           <Header setVisible={actions.setVisible} control={control} />
@@ -79,6 +88,7 @@ export const DevToolUI: React.FC<DevtoolUIProps> = ({
             padding: 3,
             margin: 0,
             background: 'none',
+            ...styles?.button,
           }}
         >
           <Logo actions={actions} />