Improve "create" package structure (#146)

* Improve "create" package structure

aaa.sh

@@ -0,0 +1,31 @@
+#!/bin/bash
+
+# Get the absolute path of the root directory
+ROOT_DIR=$(pwd)
+
+# Function to recursively remove .git folders
+remove_git_folders() {
+    local dir="$1"
+
+    # Iterate over all directories in the current directory
+    for subdir in "$dir"/*; do
+        if [ -d "$subdir" ]; then
+            # Skip node_modules directories
+            if [[ $(basename "$subdir") == "node_modules" ]]; then
+                continue
+            fi
+
+            # Remove .git directory if it's not the root level
+            if [[ $(basename "$subdir") == ".git" ]] && [[ "$subdir" != "$ROOT_DIR/.git" ]]; then
+                echo "Removing $subdir"
+                rm -rf "$subdir"
+            fi
+
+            # Recurse into subdirectories
+            remove_git_folders "$subdir"
+        fi
+    done
+}
+
+# Start the recursive removal from the current directory
+remove_git_folders "$ROOT_DIR"

eslint.config.mjs

@@ -19,7 +19,7 @@ export default [
       '**/webpack.config.js',
       '**/postcss.config.js',
       '**/tailwind.config.js',
-      '**/stylelint.config.js'
+      '**/stylelint.config.json'
     ]
   }
 ]

examples/action-chatgpt/action/ActionApp.tsx

@@ -0,0 +1,116 @@
+import {useState, type FormEvent} from 'react'
+import OpenAI from 'openai'
+import chatgptLogo from '../images/chatgpt.png'
+import extensionJsLogo from '../images/extension_128.png'
+
+const openai = new OpenAI({
+  apiKey: process.env.EXTENSION_OPENAI_API_KEY!,
+  dangerouslyAllowBrowser: true
+})
+
+interface Message {
+  content: string
+  role: 'user' | 'assistant'
+}
+
+function ActionApp() {
+  const [messages, setMessages] = useState<Message[]>([
+    {
+      content:
+        'Hello there! This is your ChatGPT extension sample, ' +
+        'built with React, Tailwind.css, and DaisyUI. ' +
+        'For it to work, create a .env file with your EXTENSION_OPENAI_API_KEY. ' +
+        "You can get an API key from OpenAI's website????",
+      role: 'assistant'
+    },
+    {
+      content: 'https://platform.openai.com/api-keys',
+      role: 'assistant'
+    }
+  ])
+
+  const [isTyping, setIsTyping] = useState(false)
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const form = e.target as HTMLFormElement
+    const input = form[0] as HTMLInputElement
+
+    const newMessage: Message = {
+      content: input.value,
+      role: 'user'
+    }
+
+    const newMessages = [...messages, newMessage]
+
+    setMessages(newMessages)
+    setIsTyping(true)
+    form.reset()
+
+    const completion = await openai.chat.completions.create({
+      model: 'gpt-3.5-turbo',
+      messages: newMessages
+    })
+
+    setMessages([...newMessages, completion.choices[0].message as Message])
+    setIsTyping(false)
+  }
+
+  return (
+    <section className="container mx-auto p-5 fixed inset-0">
+      <div className="w-full h-full flex flex-col">
+        <div className="flex-grow overflow-auto">
+          {messages.length &&
+            messages.map((msg, i) => (
+              <div
+                className={`chat ${msg.role === 'assistant' ? 'chat-start' : 'chat-end'}`}
+                key={'chatKey' + i}
+              >
+                <div className="chat-image avatar">
+                  <div className="w-10 rounded-full">
+                    <img
+                      src={
+                        msg.role === 'assistant' ? chatgptLogo : extensionJsLogo
+                      }
+                      alt="avatar"
+                    />
+                  </div>
+                </div>
+                <div className="chat-bubble">{msg.content}</div>
+              </div>
+            ))}
+        </div>
+
+        <form className="form-control items-center" onSubmit={handleSubmit}>
+          <div className="input-group max-w-full w-[800px] relative flex items-center">
+            {isTyping && (
+              <small className="absolute -top-5 left-0.5 animate-pulse">
+                ChatGPT Extension is typing...
+              </small>
+            )}
+
+            <input
+              type="text"
+              placeholder="Ask ChatGPT a question."
+              className="input input-bordered flex-grow mr-2.5"
+              required
+            />
+            <button className="btn btn-square" type="submit">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6"
+                fill="currentColor"
+                viewBox="0 0 16 16"
+              >
+                <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+      </div>
+    </section>
+  )
+}
+
+export default ActionApp

examples/chatgpt/action/index.html → examples/action-chatgpt/action/index.html

@@ -9,5 +9,5 @@
     <noscript>You need to enable JavaScript to run this extension.</noscript>
     <div id="root"></div>
   </body>
-  <script src="./scripts.jsx"></script>
+  <script src="./scripts.tsx"></script>
 </html>

examples/chatgpt/action/scripts.jsx → examples/action-chatgpt/action/scripts.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client'
 import ActionApp from './ActionApp'
 import './styles.css'
 
-const root = ReactDOM.createRoot(document.getElementById('root'))
+const root = ReactDOM.createRoot(document.getElementById('root')!)
 
 root.render(
   <React.StrictMode>

examples/action-chatgpt/extension-env.d.ts

@@ -0,0 +1,9 @@
+// Required Extension.js types for TypeScript projects.
+// This file is auto-generated and should not be excluded.
+// If you need extra types, consider creating a new *.d.ts and
+// referencing it in the "include" array of your tsconfig.json file.
+// See https://www.typescriptlang.org/tsconfig#include for info.
+/// <reference types="../../programs/develop/dist/types/index.d.ts" />
+
+// Polyfill types for browser.* APIs.
+/// <reference types="../../programs/develop/dist/types/polyfill.d.ts" />

examples/action-chatgpt/manifest.json

@@ -0,0 +1,20 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "Action ChatGPT Template",
+  "description": "An Extension.js example.",
+  "icons": {
+    "16": "images/extension_16.png",
+    "48": "images/extension_48.png",
+    "128": "images/extension_128.png"
+  },
+  "action": {
+    "default_icon": {
+      "16": "images/extension_16.png",
+      "48": "images/extension_48.png",
+      "128": "images/extension_128.png"
+    },
+    "default_title": "ChatGPT",
+    "default_popup": "action/index.html"
+  }
+}

examples/chatgpt/package.json → examples/action-chatgpt/package.json

@@ -1,28 +1,14 @@
 {
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/cezaraugusto/extension.git",
-    "directory": "programs/create/templates/chatgpt"
-  },
-  "name": "chatgpt",
+  "private": true,
+  "name": "action-chatgpt",
   "description": "An Extension.js example.",
   "version": "0.0.1",
   "author": {
     "name": "Cezar Augusto",
     "email": "[email protected]",
     "url": "https://cezaraugusto.com"
   },
-  "files": [
-    "template",
-    "template.json"
-  ],
-  "keywords": [
-    "extension",
-    "browser-extension",
-    "web-extension",
-    "template"
-  ],
+  "license": "MIT",
   "dependencies": {
     "daisyui": "^4.12.10",
     "openai": "^4.54.0",
@@ -32,6 +18,7 @@
   },
   "devDependencies": {
     "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.5"
+    "@types/react-dom": "^18.0.5",
+    "typescript": "5.3.3"
   }
 }

programs/create/templates/preact-typescript/template/tailwind.config.js → examples/action-chatgpt/tailwind.config.js

@@ -4,5 +4,5 @@ module.exports = {
   theme: {
     extend: {}
   },
-  plugins: []
+  plugins: [require('daisyui')]
 }

programs/create/templates/react-typescript/template/tsconfig.json → examples/action-chatgpt/tsconfig.json

@@ -4,14 +4,17 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "isolatedModules": false,
+    "isolatedModules": true,
     "jsx": "react-jsx",
     "lib": ["dom", "dom.iterable", "esnext"],
     "moduleResolution": "node",
     "module": "esnext",
     "resolveJsonModule": true,
     "strict": true,
-    "target": "esnext"
+    "target": "esnext",
+    "verbatimModuleSyntax": true,
+    "useDefineForClassFields": true,
+    "skipLibCheck": true
   },
   "include": ["./"],
   "exclude": ["node_modules", "dist"]

examples/action/action/index.html

@@ -21,15 +21,15 @@
       <h1>
         <img
           class="action"
-          src="../images/extension.png"
+          src="../images/extension_128.png"
           alt="The Extension logo"
           width="72px"
         />
         <br />
         Welcome to your Action Extension
       </h1>
       <p>
-        Learn more about creating browser extensions at
+        Learn more about creating cross-browser extensions at
         <a href="https://extension.js.org" target="_blank"
           >https://extension.js.org</a
         >.

examples/action/action/styles.css

@@ -3,18 +3,14 @@ body {
   justify-content: center;
   align-items: center;
   width: 300px;
+  padding: 2em;
 }
 
 h1 {
   font-size: 2.7em;
 }
 
 .action {
-  border-radius: 24px;
-  border: 4px solid;
-  background: white;
-  border-color: #ccc;
-  border-radius: 24px;
   filter: grayscale(1);
   transition:
     filter 2s,

examples/action/manifest.json

@@ -1,16 +1,20 @@
 {
   "manifest_version": 3,
   "version": "0.0.1",
-  "name": "action",
+  "name": "Action Template",
   "description": "An Extension.js example.",
-  "author": "Cezar Augusto",
+  "icons": {
+    "16": "images/extension_16.png",
+    "48": "images/extension_48.png",
+    "128": "images/extension_128.png"
+  },
   "action": {
     "default_popup": "action/index.html",
     "default_title": "Action",
     "default_icon": {
-      "16": "test_16.png",
-      "48": "test_48.png",
-      "128": "public/icon.png"
+      "16": "images/extension_16.png",
+      "48": "images/extension_48.png",
+      "128": "images/extension_128.png"
     }
   }
 }

examples/action/package.json

@@ -1,11 +1,5 @@
 {
   "private": true,
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/extension-js/extension.git",
-    "directory": "examples/action"
-  },
   "name": "action",
   "description": "An Extension.js example.",
   "version": "0.0.1",
@@ -14,10 +8,5 @@
     "email": "[email protected]",
     "url": "https://cezaraugusto.com"
   },
-  "keywords": [
-    "extension",
-    "browser-extension",
-    "web-extension",
-    "template"
-  ]
+  "license": "MIT"
 }