update styles, floating ui (#14)

* tailwindify
* autohiding ui
* reset some button styles
* better mobile styles
* different hide/show mechanism and top/bottom option
* restore docs for `children` prop
* store `isHidden` in localStorage, too
* bump tailwindcss
* fix lint issues

example/index.tsx

@@ -26,11 +26,11 @@ const App = () => {
         <MSWToolbar
           worker={worker}
           apiUrl="http://www.example.com"
-          isEnabled={true}
+          isEnabled
           actions={
             <HStack spacing={2}>
               <Button onClick={() => alert('Hooray')}>Custom Action</Button>
-              <Button onClick={() => alert('Yadiddit')}>Another</Button>
+              <Button onClick={() => alert('Yadonediddit')}>Another</Button>
             </HStack>
           }
           prefix={APP_NAME}
@@ -46,7 +46,6 @@ const App = () => {
                 }
               })
             }
-            mt={50}
           >
             Make a request
           </Button>

package.json

@@ -53,16 +53,21 @@
     }
   ],
   "devDependencies": {
+    "@babel/preset-typescript": "^7.16.0",
     "@size-limit/preset-small-lib": "^5.0.4",
+    "@svgr/rollup": "^6.1.1",
+    "@tailwindcss/forms": "^0.4.0",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
+    "autoprefixer": "^10.4.0",
     "husky": "^7.0.0",
     "msw": "^0.35.0",
     "postcss": "^8.3.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rollup-plugin-postcss": "^4.0.1",
     "size-limit": "^5.0.4",
+    "tailwindcss": "^3.0.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
     "typescript": "^4.4.3"

src/component/MSWToolbar.tsx

@@ -12,6 +12,8 @@ import { WorkerMode } from '../types';
 import { get, modes, set } from '../helpers';
 import { MSWToolbarProps } from '..';
 
+import MSWLogo from './msw-logo.svg';
+
 /**
  * This is a simple toolbar that allows you to toggle MSW handlers in local development as well as easily invalidate all of the caches.
  *
@@ -27,6 +29,9 @@ export const MSWToolbar = ({
   actions,
   worker,
   prefix = '',
+  className,
+  position = 'top',
+  ...props
 }: MSWToolbarProps) => {
   if ((isEnabled && !worker) || (isEnabled && worker && !worker.start)) {
     console.warn(
@@ -111,41 +116,75 @@ export const MSWToolbar = ({
     set(prefix, 'delay', String(delay));
   }, [delay, prefix]);
 
+  const [isHidden, setIsHidden] = React.useState(
+    () => get(prefix, 'isHidden', 'true') === 'true'
+  );
+
   if (!isEnabled || !worker) return <>{children}</>;
 
-  return isReady ? (
-    <>
-      <>
-        <div className={styles.container}>
-          <div className={styles['left-actions']}>
-            <div className={styles['input-wrapper']}>
-              <label>Mocks:</label>
+  if (!isReady) {
+    return null;
+  }
 
-              <div className={styles.onoffswitch}>
+  return (
+    <>
+      <button
+        className={`${styles.btn} ${styles['show-toolbar-button']}`}
+        onClick={() => {
+          setIsHidden(false);
+          set(prefix, 'isHidden', 'false');
+        }}
+        hidden={!isHidden}
+      >
+        <MSWLogo width={64} />
+      </button>
+
+      <div
+        className={[className, styles['msw-toolbar']].filter(Boolean).join(' ')}
+        data-hidden={isHidden}
+        data-position={position}
+        {...props}
+      >
+        <div>
+          <button
+            className={`${styles.btn} ${styles['close-button']}`}
+            onClick={() => {
+              setIsHidden(true);
+              set(prefix, 'isHidden', 'true');
+            }}
+          >
+            Close
+          </button>
+
+          <div className={styles.controls}>
+            <label
+              className={`${styles.toggle} ${styles['input-wrapper']}`}
+              htmlFor="msw-toolbar-mocks-toggle"
+            >
+              <span className={styles.label}>Mocks:</span>
+
+              <div data-toggle-checkbox-container>
                 <input
+                  id="msw-toolbar-mocks-toggle"
                   type="checkbox"
-                  name="onoffswitch"
-                  className={styles['onoffswitch-checkbox']}
-                  id="myonoffswitch"
                   tabIndex={0}
                   onChange={() => setWorkerEnabled(prev => !prev)}
                   checked={workerEnabled}
                 />
-                <label
-                  className={styles['onoffswitch-label']}
-                  htmlFor="myonoffswitch"
-                ></label>
+                <div data-toggle-track />
+                <div data-toggle-handle />
               </div>
-            </div>
+            </label>
+
             <div className={styles['input-wrapper']}>
-              <label htmlFor="mode">Mode:</label>
+              <label className={styles.label} htmlFor="msw-toolbar-mode">
+                Mode:
+              </label>
+
               <select
-                id="mode"
+                id="msw-toolbar-mode"
                 value={mode}
-                onChange={({ target: { value } }) =>
-                  setMode(value as WorkerMode)
-                }
-                style={{ width: 150, backgroundColor: 'white' }}
+                onChange={event => setMode(event.target.value as WorkerMode)}
               >
                 {modes.map(m => (
                   <option value={m} key={m}>
@@ -154,22 +193,28 @@ export const MSWToolbar = ({
                 ))}
               </select>
             </div>
+
             <div className={styles['input-wrapper']}>
-              <label htmlFor="delay">Delay (ms):</label>
+              <label className={styles.label} htmlFor="msw-toolbar-delay">
+                Delay (ms):
+              </label>
+
               <input
-                id="delay"
+                id="msw-toolbar-delay"
                 type="number"
                 onChange={event => setDelay(event.target.value)}
                 value={delay}
               />
             </div>
           </div>
-
-          <div className={styles.spacer} />
-          {actions ? actions : null}
         </div>
-      </>
+
+        <div className={styles.spacer} />
+
+        {actions ? <div>{actions}</div> : null}
+      </div>
+
       {children}
     </>
-  ) : null;
+  );
 };

src/component/styles.module.css

@@ -1,78 +1,92 @@
-.onoffswitch {
-  position: relative;
-  width: 65px;
-  user-select: none;
-}
-.onoffswitch-checkbox {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-.onoffswitch-label {
-  display: block;
-  overflow: hidden;
-  cursor: pointer;
-  height: 25px;
-  padding: 0;
-  line-height: 25px;
-  border: 2px solid #e3e3e3;
-  border-radius: 25px;
-  background-color: #ffffff;
-  transition: background-color 0.3s ease-in;
-}
-.onoffswitch-label:before {
-  content: '';
-  display: block;
-  width: 25px;
-  margin: 0px;
-  background: #ffffff;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 38px;
-  border: 2px solid #e3e3e3;
-  border-radius: 25px;
-  transition: all 0.3s ease-in 0s;
-}
-.onoffswitch-checkbox:checked + .onoffswitch-label {
-  background-color: #557fdb;
-}
-.onoffswitch-checkbox:checked + .onoffswitch-label,
-.onoffswitch-checkbox:checked + .onoffswitch-label:before {
-  border-color: #557fdb;
-}
-.onoffswitch-checkbox:checked + .onoffswitch-label:before {
-  right: 0px;
-}
-
-.container {
-  display: flex;
-  flex-direction: row;
-  padding: 5px;
-  background-color: #e8efff;
-}
-
-.left-actions {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 600px;
-  align-items: center;
+.btn {
+  @apply cursor-pointer normal-case border-none bg-transparent text-sm font-bold;
 }
 
-.input-wrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+.close-button {
+  @apply px-2 py-1 rounded bg-gray-200 hover:bg-gray-300;
+}
+
+.show-toolbar-button {
+  @apply fixed bottom-0 left-0 m-2 opacity-50 hover:opacity-100 transition;
+}
+
+.msw-toolbar {
+  @apply fixed inset-x-0 z-50 flex p-2 bg-gray-100 overflow-hidden transition;
+}
+
+.msw-toolbar[data-position='top'] {
+  @apply top-0;
+}
+
+.msw-toolbar[data-position='bottom'] {
+  @apply bottom-0;
+}
+
+.msw-toolbar[data-position='top'][data-hidden='true'] {
+  transform: translateY(-100%);
+}
+
+.msw-toolbar[data-position='bottom'][data-hidden='true'] {
+  transform: translateY(100%);
+}
+
+.controls {
+  @apply flex flex-wrap items-center gap-4 mr-4;
+}
+
+.container[data-hidden='true']:not(:hover) {
+  @apply opacity-50;
+}
+
+.toggle {
+  @apply relative select-none;
+}
+
+.toggle [data-toggle-checkbox-container] {
+  @apply relative cursor-pointer m-1;
+}
+
+.toggle input[type='checkbox'] {
+  @apply absolute opacity-0 pointer-events-none sr-only;
+}
+
+.toggle input[type='checkbox']:checked ~ [data-toggle-handle] {
+  @apply bg-blue-500;
+  transform: translateX(100%);
+}
+
+.toggle input[type='checkbox']:hover:not(:checked) ~ [data-toggle-handle] {
+  @apply bg-blue-200;
+}
+
+.toggle input[type='checkbox']:focus-visible ~ [data-toggle-handle] {
+  @apply border-2 border-blue-500;
+}
+
+.toggle [data-toggle-track] {
+  @apply w-10 h-4 bg-gray-400 rounded-full shadow-inner;
 }
 
-.input-wrapper label {
-  font-weight: bold;
-  margin-right: 5px;
+.toggle [data-toggle-handle] {
+  @apply absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition;
 }
 
 .spacer {
-  flex: 1;
-  justify-self: stretch;
-  align-self: stretch;
+  @apply m-auto;
+}
+
+.input-wrapper {
+  @apply flex items-center;
+}
+
+.input-wrapper select {
+  @apply form-input form-select;
+}
+
+.input-wrapper input {
+  @apply form-input;
+}
+
+.label {
+  @apply font-bold mr-1;
 }

src/helpers/settings.ts

@@ -7,6 +7,7 @@ type SettingValueMap = {
   mode: WorkerMode;
   status: WorkerStatus;
   delay: string;
+  isHidden: 'true' | 'false';
 };
 
 type AllowedValueForSetting<Setting> = SettingValueMap[Setting &