@spicemod/creator 0.0.22 → 0.0.24

package/templates/custom-app/shared/DOT-oxlintrc.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": null,
+  "categories": {},
+  "rules": {
+    "no-await-in-loop": "error",
+    "unicorn/prefer-array-find": "error",
+    "unicorn/prefer-array-flat-map": "error",
+    "unicorn/prefer-set-has": "error"
+  },
+  "settings": {
+    "jsx-a11y": {
+      "polymorphicPropName": null,
+      "components": {},
+      "attributes": {}
+    },
+    "react": {
+      "formComponents": [],
+      "linkComponents": [],
+      "version": null,
+      "componentWrapperFunctions": []
+    },
+    "jsdoc": {
+      "ignorePrivate": false,
+      "ignoreInternal": false,
+      "ignoreReplacesDocs": true,
+      "overrideReplacesDocs": true,
+      "augmentsExtendsReplacesDocs": false,
+      "implementsReplacesDocs": false,
+      "exemptDestructuredRootsFromChecks": false,
+      "tagNamePreference": {}
+    }
+  },
+  "globals": {},
+  "ignorePatterns": ["dist/**"]
+}

package/templates/custom-app/shared/README.template.md

@@ -0,0 +1,53 @@
+# {{project-name}}
+
+Welcome to your new **Spicetify {{template}}** project! This project was
+bootstrapped using [@spicetify/creator]({{github-link}}).
+
+## Getting Started
+
+First, install the dependencies using your package manager:
+
+```bash
+{{package-manager}} install
+```
+
+Then, run the development server:
+
+```bash
+{{package-manager}} run dev
+```
+
+The development server will watch for changes and automatically rebuild your
+project.
+
+## Available Scripts
+
+### `dev`
+
+Runs the project in development mode with hot-reloading.
+
+### `build`
+
+Optimizes and bundles your {{template}} for production. The output will be
+located in the `dist` directory.
+
+### `lint`
+
+Checks your code for errors and formatting issues using {{linter}}.
+
+## Project Structure
+
+```text
+.
+├── src/
+│   └── app.{{entry-ext}}         # Main entry point for your {{template}}
+└── spice.config.{{language}} # Configuration for @spicetify/creator
+```
+
+## Learn More
+
+To learn more about Spicetify and how to customize your Spotify client, check
+out the following resources:
+
+- [Spicetify]({{spicetify-link}})
+- [@spicetify/creator]({{docs-link}})

package/templates/custom-app/shared/app.css

@@ -0,0 +1,163 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+.onboarding-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  transition: opacity 0.3s ease;
+  font-family: "Poppins", sans-serif;
+}
+
+.onboarding-overlay.fade-out {
+  opacity: 0;
+}
+
+.onboarding-card {
+  background: rgba(24, 24, 24, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+  padding: 40px;
+  width: 400px;
+  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
+  transform: translateY(0);
+  transition: transform 0.3s ease;
+  backdrop-filter: blur(16px);
+}
+
+.onboarding-overlay.fade-out .onboarding-card {
+  transform: translateY(20px);
+}
+
+.status-badge {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #1db954;
+  font-size: 18px;
+  font-weight: 800;
+  margin-bottom: 30px;
+}
+
+.close-icon-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: transparent;
+  border: none;
+  color: #666;
+  cursor: pointer;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+  z-index: 10;
+}
+
+.close-icon-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+.config-grid {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  gap: 15px;
+  margin-bottom: 30px;
+}
+
+.label {
+  color: #777;
+  font-size: 14px;
+}
+.value {
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.footer-tip {
+  font-size: 12px;
+  color: #555;
+  border-top: 1px solid #282828;
+  padding-top: 20px;
+}
+
+code {
+  color: #1db954;
+  background: rgba(29, 185, 84, 0.1);
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.onboarding-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.get-started-btn,
+.dismiss-btn,
+.discord-btn {
+  width: 100%;
+  padding: 14px;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 15px;
+  font-weight: 600;
+  text-align: center;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(4px);
+  border: 1px solid transparent;
+}
+
+.get-started-btn {
+  background: rgba(16, 185, 129, 0.8);
+  color: #ffffff;
+  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
+}
+
+.get-started-btn:hover {
+  background: rgba(16, 185, 129, 1);
+  transform: scale(1.02);
+  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
+}
+
+.discord-btn {
+  background: rgba(88, 101, 242, 0.8);
+  color: #ffffff;
+  box-shadow: 0 4px 15px rgba(88, 101, 242, 0.2);
+}
+
+.discord-btn:hover {
+  background: rgba(88, 101, 242, 1);
+  transform: scale(1.02);
+  box-shadow: 0 4px 20px rgba(88, 101, 242, 0.4);
+}
+
+.dismiss-btn {
+  background: rgba(55, 65, 81, 0.8);
+  color: #d1d5db;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.dismiss-btn:hover {
+  background: rgba(75, 85, 99, 0.9);
+  color: #ffffff;
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.get-started-btn:active,
+.discord-btn:active,
+.dismiss-btn:active {
+  transform: scale(0.98);
+}

package/templates/custom-app/shared/biome.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.3.13/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": true,
+    "includes": ["**", "!node_modules", "!dist"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noUnknownAtRules": "off"
+      }
+    },
+    "domains": {
+      "react": "recommended"
+    }
+  },
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

package/templates/custom-app/shared/css/app.module.scss

@@ -0,0 +1,58 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  gap: 40px;
+  background-color: #0f172a;
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+}
+
+.title {
+  font-size: 48px;
+  font-weight: 800;
+  color: #f8fafc;
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+
+.button {
+  padding: 16px 32px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #ffffff;
+  background-color: #6366f1;
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background-color: #4f46e5;
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
+  }
+
+  &:active {
+    background-color: #4338ca;
+    transform: translateY(0);
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.counter {
+  font-size: 80px;
+  font-weight: 900;
+  color: #818cf8;
+  background: #1e293b;
+  padding: 24px 48px;
+  border-radius: 24px;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
+  min-width: 150px;
+  text-align: center;
+}

package/templates/custom-app/shared/icon-active.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10" />
+  <path d="M18 13a6 6 0 0 1-6 5 6 6 0 0 1-6-5h12Z" />
+  <line x1="9" x2="9.01" y1="9" y2="9" />
+  <line x1="15" x2="15.01" y1="9" y2="9" />
+</svg>

package/templates/custom-app/shared/icon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10" />
+  <path d="M8 14s1.5 2 4 2 4-2 4-2" />
+  <line x1="9" x2="9.01" y1="9" y2="9" />
+  <line x1="15" x2="15.01" y1="9" y2="9" />
+</svg>

package/templates/custom-app/shared/jsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["@spicetify/creator/client"],
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Paths
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/templates/custom-app/shared/spice.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from "@spicetify/creator";
+
+// Learn more: {{config-reference-link}}
+export default defineConfig({
+  name: "{{project-name}}",
+  framework: "{{framework}}",
+  linter: "{{linter}}",
+  template: "{{template}}",
+  packageManager: "{{package-manager}}",
+});

package/templates/custom-app/shared/spice.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "@spicetify/creator";
+
+// Learn more: {{config-reference-link}}
+export default defineConfig({
+  name: "{{project-name}}",
+  framework: "{{framework}}",
+  linter: "{{linter}}",
+  template: "{{template}}",
+  packageManager: "{{package-manager}}",
+});

package/templates/custom-app/shared/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["@spicetify/creator/client"],
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Paths
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/templates/custom-app/ts/react/eslint.config.ts

@@ -0,0 +1,29 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import react from "eslint-plugin-react";
+import css from "@eslint/css";
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  {
+    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    plugins: { js, react },
+    extends: ["js/recommended"],
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: globals.browser,
+    },
+  },
+  tseslint.configs.recommended,
+  {
+    files: ["**/*.css"],
+    plugins: { css },
+    language: "css/css",
+    extends: ["css/recommended"],
+  },
+]);

package/templates/custom-app/ts/react/src/app.tsx

@@ -0,0 +1,22 @@
+import styles from "@/css/app.module.scss";
+import { useState } from "react";
+
+const App: React.FC = () => {
+  const [count, setCount] = useState(0);
+
+  const onButtonClick = () => {
+    setCount((prevCount) => prevCount + 1);
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>{"My Custom App!"}</div>
+      <button className={styles.button} onClick={onButtonClick}>
+        {"Count up"}
+      </button>
+      <div className={styles.counter}>{count}</div>
+    </div>
+  );
+};
+
+export default App;

package/templates/custom-app/ts/react/src/components/Onboarding.tsx

@@ -0,0 +1,92 @@
+import { useState } from "react";
+
+interface OnboardingProps {
+  config: {
+    projectName: string;
+    framework: string;
+    language: string;
+    packageManager: string;
+    linter: string;
+  };
+}
+
+const Onboarding: React.FC<OnboardingProps> = ({ config }) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const [isFading, setIsFading] = useState(false);
+
+  const handleDismiss = () => {
+    setIsFading(true);
+    setTimeout(() => setIsVisible(false), 250);
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <div className={`onboarding-overlay ${isFading ? "fade-out" : ""}`} onClick={handleDismiss}>
+      <div className="onboarding-card" onClick={(e) => e.stopPropagation()}>
+        <button className="close-icon-btn" onClick={handleDismiss} aria-label="Close">
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+            <path
+              d="M1 1L11 11M1 11L11 1"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+
+        <div className="status-badge">🚀 {config.projectName} Ready</div>
+
+        <div className="config-grid">
+          <span className="label">Framework</span>
+          <span className="value">{config.framework}</span>
+
+          <span className="label">Language</span>
+          <span className="value">{config.language}</span>
+
+          <span className="label">Manager</span>
+          <span className="value">{config.packageManager}</span>
+
+          <span className="label">Linter</span>
+          <span className="value">{config.linter}</span>
+        </div>
+
+        <div className="footer-tip">
+          Next Step: Edit <code>src/app.tsx</code>
+        </div>
+
+        <div className="onboarding-actions">
+          <button className="get-started-btn" onClick={() => openLink("{{get-started-link}}")}>
+            Get Started
+          </button>
+          <button
+            className="get-started-btn"
+            onClick={() => {
+              Spicetify.Platform.History.push("{{project-url}}");
+              handleDismiss();
+            }}
+          >
+            Go to Custom App
+          </button>
+          <button className="discord-btn" onClick={() => openLink("{{discord-link}}")}>
+            Join Discord
+          </button>
+          <button className="dismiss-btn" onClick={handleDismiss}>
+            Dismiss
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Onboarding;
+
+function openLink(url: string, newTab = true) {
+  if (!url) return;
+  if (newTab) {
+    window.open(url, "_blank", "noopener,noreferrer");
+  } else {
+    window.location.href = url;
+  }
+}

package/templates/custom-app/ts/react/src/extension/index.tsx

@@ -0,0 +1,27 @@
+import "@/extension/app.css";
+import { createRoot } from "react-dom/client";
+// you can use aliases too ! (just add them to tsconfig.json)
+import Onboarding from "@/components/Onboarding";
+
+const config = {
+  projectName: "{{project-name}}",
+  framework: "{{framework}}",
+  language: "{{language}}",
+  packageManager: "{{package-manager}}",
+  linter: "{{linter}}",
+};
+
+function main() {
+  // Create a container for the React application
+  // We append this to document.body to ensure it sits above the Spotify UI
+  const container = document.createElement("div");
+  container.id = "spicetify-onboarding-root";
+  document.body.appendChild(container);
+
+  const root = createRoot(container);
+
+  // Render the Onboarding UI
+  root.render(<Onboarding config={config} />);
+}
+
+main();

package/templates/customAppEntry.js

@@ -0,0 +1,6 @@
+import React from "react";
+import App from "virtual:app";
+
+export default function render() {
+  return <App />;
+}