Updates

.husky/post-merge

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 ./node_modules/.bin/repo-tools install-packages

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 ./node_modules/.bin/repo-tools check-remote && ./node_modules/.bin/lint-staged

demo/package.json

@@ -7,19 +7,19 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@gilbarbara/components": "^0.10.1",
-    "@gilbarbara/eslint-config": "^0.7.2",
-    "@gilbarbara/helpers": "^0.9.1",
+    "@gilbarbara/components": "^0.11.2",
+    "@gilbarbara/eslint-config": "^0.7.4",
+    "@gilbarbara/helpers": "^0.9.2",
     "@gilbarbara/prettier-config": "^1.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
     "react-spotify-web-playback": "latest",
-    "react-use": "^17.4.2"
+    "react-use": "^17.5.0"
   },
   "devDependencies": {
-    "@types/node": "20.10.5",
-    "@types/react": "18.2.46",
+    "@types/node": "20.11.11",
+    "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
     "typescript": "5.3.3"
   },

demo/src/App.tsx

@@ -42,6 +42,7 @@ interface State {
   shuffle: boolean;
   styles?: StylesProps;
   token: string;
+  transparent: boolean;
 }
 
 const validateURI = (input: string): boolean => {
@@ -103,22 +104,24 @@ function App() {
       shuffle,
       styles,
       token,
+      transparent,
       URIs,
     },
     setState,
   ] = useSetState<State>({
-      hideAttribution: false,
-      inlineVolume: true,
+    hideAttribution: false,
+    inlineVolume: true,
     isActive: false,
-      isPlaying: false,
-      layout: 'responsive',
+    isPlaying: false,
+    layout: 'responsive',
     player: null,
     repeat: 'off',
     shuffle: false,
-      styles: undefined,
-      token: savedToken || '',
-      URIs: [baseURIs.artist],
-    });
+    styles: undefined,
+    token: savedToken || '',
+    transparent: false,
+    URIs: [baseURIs.artist],
+  });
 
   const handleSubmit = useCallback(
     (event: FormEvent) => {
@@ -181,10 +184,14 @@ function App() {
       }
 
       if (type === TYPE.TRACK) {
-        const trackStyles = await request(
+        const trackStyles = await request<StylesProps>(
           `https://scripts.gilbarbara.dev/api/getImagePlayerStyles?url=${track.image}`,
         );
 
+        if (transparent) {
+          trackStyles.bgColor = 'transparent';
+        }
+
         setState({ styles: trackStyles });
       }
 
@@ -193,7 +200,7 @@ function App() {
         setState({ token: '' });
       }
     },
-    [setState],
+    [setState, transparent],
   );
 
   const getPlayer = useCallback(
@@ -274,6 +281,12 @@ function App() {
               name="inlineVolume"
               onClick={() => setState({ inlineVolume: !inlineVolume })}
             />
+            <Toggle
+              checked={transparent}
+              label="Transparent"
+              name="transparent"
+              onClick={() => setState({ transparent: !transparent })}
+            />
           </Spacer>
         </Box>
       </>
@@ -295,7 +308,7 @@ function App() {
           persistDeviceSelection
           play={isPlaying}
           showSaveIcon
-          styles={styles}
+          styles={transparent ? { ...styles, bgColor: 'transparent' } : styles}
           syncExternalDevice
           token={token}
           uris={URIs}

demo/src/components.tsx

@@ -9,7 +9,16 @@ export function GlobalStyles({ hasToken }: any) {
     <Global
       styles={css`
         body {
-          background-color: #f7f7f7;
+          background: linear-gradient(
+            0deg,
+            oklch(0.65 0.3 29.62 / 0.8),
+            oklch(0.65 0.3 29.62 / 0) 75%
+          ),
+          linear-gradient(60deg, oklch(0.96 0.25 110.23 / 0.8), oklch(0.96 0.25 110.23 / 0) 75%),
+          linear-gradient(120deg, oklch(0.85 0.36 144.24 / 0.8), oklch(0.85 0.36 144.24 / 0) 75%),
+          linear-gradient(180deg, oklch(0.89 0.2 194.59 / 0.8), oklch(0.89 0.2 194.18 / 0) 75%),
+          linear-gradient(240deg, oklch(0.47 0.32 264.05 / 0.8), oklch(0.47 0.32 264.05 / 0) 75%),
+          linear-gradient(300deg, oklch(0.7 0.35 327.92 / 0.8), oklch(0.7 0.35 327.92 / 0) 75%);
           box-sizing: border-box;
           font-family: sans-serif;
           margin: 0;
@@ -93,10 +102,10 @@ export const Player = styled.div<{ layout: Layout }>(({ layout }) => {
 });
 
 export function RepeatButton({
-  repeat,
-  token,
-  ...rest
-}: Omit<ComponentProps<typeof ButtonUnstyled>, 'children'> & {
+                               repeat,
+                               token,
+                               ...rest
+                             }: Omit<ComponentProps<typeof ButtonUnstyled>, 'children'> & {
   repeat: RepeatState;
   token: string;
 }) {
@@ -153,10 +162,10 @@ export function RepeatButton({
 }
 
 export function ShuffleButton({
-  shuffle,
-  token,
-  ...rest
-}: Omit<ComponentProps<typeof ButtonUnstyled>, 'children'> & {
+                                shuffle,
+                                token,
+                                ...rest
+                              }: Omit<ComponentProps<typeof ButtonUnstyled>, 'children'> & {
   shuffle: boolean;
   token: string;
 }) {

demo/src/modules/theme.ts

@@ -1,9 +1,9 @@
 import { mergeTheme } from '@gilbarbara/components';
 
-export const primaryColor = '#1db954';
+export const primaryColor = '#282828';
 
 export const theme = mergeTheme({
   colors: {
     primary: primaryColor,
-  }
+  },
 });

package.json

@@ -44,25 +44,25 @@
     "nano-css": "^5.6.1"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.13.5",
-    "@gilbarbara/eslint-config": "^0.7.2",
+    "@arethetypeswrong/cli": "^0.13.6",
+    "@gilbarbara/eslint-config": "^0.7.4",
     "@gilbarbara/hooks": "^0.6.4",
     "@gilbarbara/prettier-config": "^1.0.0",
     "@gilbarbara/tsconfig": "^0.2.3",
-    "@size-limit/file": "^11.0.1",
-    "@swc/core": "^1.3.101",
-    "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.6",
+    "@size-limit/file": "^11.0.2",
+    "@swc/core": "^1.3.107",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.4.0",
     "@testing-library/react": "^14.1.2",
     "@types/exenv": "^1.2.2",
     "@types/jest": "^29.5.11",
-    "@types/node": "^20.10.5",
+    "@types/node": "^20.11.11",
     "@types/once": "^1.4.4",
-    "@types/react": "^18.2.46",
+    "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "del-cli": "^5.1.0",
     "fix-tsup-cjs": "^1.2.0",
-    "husky": "^8.0.3",
+    "husky": "^9.0.7",
     "is-ci-cli": "^2.2.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -73,8 +73,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "repo-tools": "^0.3.1",
-    "size-limit": "^11.0.1",
-    "ts-jest": "^29.1.1",
+    "size-limit": "^11.0.2",
+    "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3"
@@ -93,7 +93,7 @@
     "validate": "npm run lint && npm run typecheck && npm run test:coverage && npm run build && npm run typevalidation && npm run size",
     "size": "size-limit",
     "prepublishOnly": "npm run validate",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "tsup": {
     "dts": true,