framer · Sakib25800 · Sep 29, 2024 · Sep 29, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/plugins/magic-alt/.eslintrc.cjs b/plugins/magic-alt/.eslintrc.cjs
@@ -0,0 +1,11 @@
+module.exports = {
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
+    ignorePatterns: ["dist", ".eslintrc.cjs"],
+    parser: "@typescript-eslint/parser",
+    plugins: ["react-refresh"],
+    rules: {
+        "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    },
+}
diff --git a/plugins/magic-alt/.gitignore b/plugins/magic-alt/.gitignore
@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn
+
+# misc
+.DS_Store
+*.pem
+
+# files
+my-plugin
+dev-plugin
+dist
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
diff --git a/plugins/magic-alt/README.md b/plugins/magic-alt/README.md
@@ -0,0 +1,21 @@
+# Framer Plugin Template
+
+This is a template for using the Framer Plugin API in a TypeScript project.
+
+## Quickstart
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+To see the results, open Framer and ensure the "Plugin Beta" preference is enabled. Then open the plugins menu from the toolbar, and select "Open Development Plugin"
+
+Learn more: https://developers.framer.wiki/
diff --git a/plugins/magic-alt/framer.json b/plugins/magic-alt/framer.json
@@ -0,0 +1,6 @@
+{
+    "id": "a414e2",
+    "name": "Magic Alt",
+    "modes": ["canvas", "editImage"],
+    "icon": "/icon.svg"
+}
diff --git a/plugins/magic-alt/index.html b/plugins/magic-alt/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Magic Alt</title>
+    </head>
+    <body>
+      <div id="root"></div>
+      <script type="module" src="/src/main.tsx"></script>
+    </body>
+  </html>
+
diff --git a/plugins/magic-alt/package.json b/plugins/magic-alt/package.json
@@ -0,0 +1,39 @@
+{
+    "name": "magic-alt",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build --base=${PREFIX_BASE_PATH:+/$npm_package_name}/",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "@headlessui/react": "^2.1.8",
+        "@xenova/transformers": "^2.17.2",
+        "classnames": "^2.5.1",
+        "framer-motion": "^11.5.4",
+        "framer-plugin": "^0.3.1",
+        "react": "^18",
+        "react-dom": "^18",
+        "react-intersection-observer": "^9.13.1",
+        "vite-plugin-mkcert": "^1"
+    },
+    "devDependencies": {
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "@typescript-eslint/eslint-plugin": "^7",
+        "@typescript-eslint/parser": "^7",
+        "@vitejs/plugin-react-swc": "^3",
+        "autoprefixer": "^10.4.19",
+        "eslint": "^8",
+        "eslint-plugin-react-hooks": "^4",
+        "eslint-plugin-react-refresh": "^0",
+        "postcss": "^8.4.38",
+        "tailwindcss": "^3.4.3",
+        "typescript": "^5.3.3",
+        "vite": "^5",
+        "vite-plugin-framer": "^0"
+    }
+}
diff --git a/plugins/magic-alt/postcss.config.js b/plugins/magic-alt/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}
diff --git a/plugins/magic-alt/public/icon.svg b/plugins/magic-alt/public/icon.svg