feat: teesting workflows

DEPLOYMENT_WALKTHROUGH.md

@@ -20,13 +20,6 @@ git checkout -b feat/add-new-feature
 
 Now edit your files in `packages/scripts/src/`:
 
-```bash
-# Example: Edit a file
-code packages/scripts/src/index.ts
-# or
-vim packages/scripts/src/index.ts
-```
-
 ### 2. Test Locally
 
 ```bash

GITHUB_SETUP.md

@@ -18,6 +18,7 @@ Complete guide for setting up your GitHub repository with proper protections and
 ```
 
 Update `package.json`:
+
 ```json
 {
   "name": "webflow-university",
@@ -65,40 +66,48 @@ git push -u origin main
 #### ✅ Required Settings
 
 **1. Require a pull request before merging**
+
 - ✅ Check: "Require a pull request before merging"
 - ✅ Check: "Require approvals" → Set to `1` (or more for your team)
 - ✅ Check: "Dismiss stale pull request approvals when new commits are pushed"
 - ✅ Check: "Require review from Code Owners" (if you set up CODEOWNERS)
 
 **2. Require status checks to pass before merging**
+
 - ✅ Check: "Require status checks to pass before merging"
 - ✅ Check: "Require branches to be up to date before merging"
 - ✅ Select these required checks:
   - `lint-and-typecheck` (from CI workflow)
   - `build` (from CI workflow)
 
 **3. Require conversation resolution before merging**
+
 - ✅ Check: "Require conversation resolution before merging"
 
 **4. Do not allow bypassing the above settings**
+
 - ✅ Check: "Do not allow bypassing the above settings"
 - ⚠️ **Important**: Uncheck "Allow specified actors to bypass required pull requests" unless you have a specific need
 
 #### ⚠️ Optional but Recommended
 
 **5. Restrict who can push to matching branches**
+
 - ✅ Check: "Restrict pushes that create matching branches"
 - This prevents anyone from pushing directly to `main` (even admins)
 
 **6. Allow force pushes**
+
 - ❌ **Uncheck**: "Allow force pushes" (default is unchecked, which is good)
 
 **7. Allow deletions**
+
 - ❌ **Uncheck**: "Allow deletions" (default is unchecked, which is good)
 
 ### Summary of Protection Rules
 
 Your `main` branch should have:
+
 - ✅ Require PR before merging
 - ✅ Require 1+ approval
 - ✅ Require CI checks to pass (`lint-and-typecheck`, `build`)
@@ -146,6 +155,7 @@ This ensures PRs automatically get assigned reviewers.
 ### 1. Test Branch Protection
 
 Try to push directly to main (should fail):
+
 ```bash
 git checkout main
 # Make a small change
@@ -195,6 +205,7 @@ git push origin test/branch-protection
 ### Issue: "CI checks not showing up"
 
 **Solution:**
+
 - Make sure GitHub Actions is enabled
 - Push a commit to trigger the workflow
 - Check Actions tab to see if workflows are running
@@ -203,6 +214,7 @@ git push origin test/branch-protection
 ### Issue: "Can't merge PR - status checks pending"
 
 **Solution:**
+
 - Wait for CI to finish (usually 2-5 minutes)
 - Check Actions tab for failed workflows
 - Fix any linting/type errors
@@ -211,13 +223,15 @@ git push origin test/branch-protection
 ### Issue: "Release workflow failing"
 
 **Solution:**
+
 - Check that "Read and write permissions" is enabled in Actions settings
 - Verify GITHUB_TOKEN has proper permissions
 - Check Actions logs for specific errors
 
 ### Issue: "Version PR not being created"
 
 **Solution:**
+
 - Verify changeset file exists in `.changeset/` directory
 - Check that changesets action has proper permissions
 - Review Actions logs for errors
@@ -269,4 +283,3 @@ Before your first real deployment:
 - [ ] CODEOWNERS file created (optional)
 - [ ] Team members added as collaborators
 - [ ] Repository URL in `package.json` updated
-

packages/code-components/README.md

@@ -40,15 +40,15 @@ export default defineConfig([
       // other options...
     },
   },
-])
+]);
 ```
 
 You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
 
 ```js
 // eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
+import reactX from 'eslint-plugin-react-x';
+import reactDom from 'eslint-plugin-react-dom';
 
 export default defineConfig([
   globalIgnores(['dist']),
@@ -69,5 +69,5 @@ export default defineConfig([
       // other options...
     },
   },
-])
+]);
 ```

packages/code-components/eslint.config.js

@@ -1,9 +1,9 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import { defineConfig, globalIgnores } from 'eslint/config';
 
 export default defineConfig([
   globalIgnores(['dist']),
@@ -20,4 +20,4 @@ export default defineConfig([
       globals: globals.browser,
     },
   },
-])
+]);

packages/code-components/src/App.tsx

@@ -1,5 +1,5 @@
-import "./App.css";
-import AutoplayTabs from "./components/AutoplayTabs/AutoplayTabs";
+import './App.css';
+import AutoplayTabs from './components/AutoplayTabs/AutoplayTabs';
 // import Calendar from "./components/Calendar/Calendar";
 
 function App() {

packages/code-components/src/components/AutoplayTabs/AutoplayTabs.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect, useRef } from "react";
-import "./AutoplayTabs.css";
+import { useState, useEffect, useRef } from 'react';
+import './AutoplayTabs.css';
 
 interface TabContent {
   id: string;
@@ -34,48 +34,48 @@ interface AutoplayTabsProps {
 const AutoplayTabs = ({
   autoplay = false,
   autoplayDuration = 5000,
-  tabOneLabel = "Tab 1",
-  tabOneTitle = "Tab 1 Title",
-  tabOneDescription = "Tab 1 Description",
+  tabOneLabel = 'Tab 1',
+  tabOneTitle = 'Tab 1 Title',
+  tabOneDescription = 'Tab 1 Description',
   tabOneContent = {
-    src: "https://placehold.co/800x450/blue/white",
-    alt: "Tab 1 Content",
+    src: 'https://placehold.co/800x450/blue/white',
+    alt: 'Tab 1 Content',
   },
-  tabTwoLabel = "Tab 2",
-  tabTwoTitle = "Tab 2 Title",
-  tabTwoDescription = "Tab 2 Description",
+  tabTwoLabel = 'Tab 2',
+  tabTwoTitle = 'Tab 2 Title',
+  tabTwoDescription = 'Tab 2 Description',
   tabTwoContent = {
-    src: "https://placehold.co/800x450/orange/white",
-    alt: "Tab 2 Content",
+    src: 'https://placehold.co/800x450/orange/white',
+    alt: 'Tab 2 Content',
   },
-  tabThreeLabel = "Tab 3",
-  tabThreeTitle = "Tab 3 Title",
-  tabThreeDescription = "Tab 3 Description",
+  tabThreeLabel = 'Tab 3',
+  tabThreeTitle = 'Tab 3 Title',
+  tabThreeDescription = 'Tab 3 Description',
   tabThreeContent = {
-    src: "https://placehold.co/800x450/green/white",
-    alt: "Tab 3 Content",
+    src: 'https://placehold.co/800x450/green/white',
+    alt: 'Tab 3 Content',
   },
 }: AutoplayTabsProps) => {
   const [activeTab, setActiveTab] = useState(0);
   const timeoutRef = useRef<number | null>(null);
 
   const tabs: TabContent[] = [
     {
-      id: "tab1",
+      id: 'tab1',
       label: tabOneLabel,
       title: tabOneTitle,
       description: tabOneDescription,
       content: tabOneContent,
     },
     {
-      id: "tab2",
+      id: 'tab2',
       label: tabTwoLabel,
       title: tabTwoTitle,
       description: tabTwoDescription,
       content: tabTwoContent,
     },
     {
-      id: "tab3",
+      id: 'tab3',
       label: tabThreeLabel,
       title: tabThreeTitle,
       description: tabThreeDescription,
@@ -116,17 +116,8 @@ const AutoplayTabs = ({
         {/* Main Display Pane */}
         <div className="display-pane">
           {tabs.map((tab, index) => (
-            <div
-              key={tab.id}
-              className={`display-content ${
-                activeTab === index ? "active" : ""
-              }`}
-            >
-              <img
-                className="display-image"
-                src={tab.content.src}
-                alt={tab.content.alt}
-              />
+            <div key={tab.id} className={`display-content ${activeTab === index ? 'active' : ''}`}>
+              <img className="display-image" src={tab.content.src} alt={tab.content.alt} />
             </div>
           ))}
         </div>
@@ -136,17 +127,15 @@ const AutoplayTabs = ({
           {tabs.map((tab, index) => (
             <button
               key={tab.id}
-              className={`tab-button ${activeTab === index ? "active" : ""}`}
+              className={`tab-button ${activeTab === index ? 'active' : ''}`}
               onClick={() => handleTabClick(index)}
             >
               <div className="tab-content-wrapper">
                 <span className="tab-label">{tab.label}</span>
                 {/* Progress bar */}
                 <div className="progress-bar-container">
                   <div
-                    className={`progress-bar ${
-                      activeTab === index && autoplay ? "active" : ""
-                    }`}
+                    className={`progress-bar ${activeTab === index && autoplay ? 'active' : ''}`}
                     style={
                       activeTab === index && autoplay
                         ? { animationDuration: `${autoplayDuration}ms` }
@@ -166,11 +155,7 @@ const AutoplayTabs = ({
       <div className="mobile-sections">
         {tabs.map((tab) => (
           <div key={tab.id} className="mobile-section">
-            <img
-              className="mobile-image"
-              src={tab.content.src}
-              alt={tab.content.alt}
-            />
+            <img className="mobile-image" src={tab.content.src} alt={tab.content.alt} />
             <div className="mobile-info">
               <span className="tab-label">{tab.label}</span>
               <h3 className="tab-title">{tab.title}</h3>