GitHub Workflows - Future Foundry

This repository contains shared GitHub workflows for the Future Foundry organization, including automated code formatting with Prettier and Tailwind CSS class sorting.

Workflows

1. Prettier Check (prettier-check.yml)

Automatically runs on:

• Pull requests to main or dev branches
• Pushes to main or dev branches

Purpose: Ensures all code is properly formatted before merging.

What it does:

• Checks if all files match Prettier formatting rules
• Fails the CI if formatting issues are detected
• Provides instructions on how to fix formatting issues

2. Auto Format (prettier-format.yml)

Can be triggered:

• By commenting /format on a pull request
• Manually via workflow dispatch

Purpose: Automatically formats code and commits the changes.

What it does:

• Runs Prettier on all files
• Commits formatting changes automatically
• Comments on the PR to confirm formatting is complete

Usage:

1. On any PR, comment /format to trigger auto-formatting
2. The bot will format your code and push a new commit
3. Wait a few moments for the workflow to complete

Setup Instructions

For Organization-Wide Use

To use these workflows across your organization:

1. Enable organization workflows in your GitHub organization settings
2. Repositories will automatically inherit these workflows

For Individual Repositories

If you want to use these workflows in a specific repository:

1. Copy the .github directory to your repository root

2. Install dependencies:

   npm install

3. Add these scripts to your package.json:

   {
     "scripts": {
       "prettier:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,scss,md,html,yml,yaml}\"",
       "prettier:fix": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md,html,yml,yaml}\""
     }
   }

Configuration

Prettier Settings (.prettierrc.json)

Current configuration:

• Semi-colons: Yes
• Quotes: Single quotes
• Print Width: 100 characters
• Tab Width: 2 spaces
• Trailing Commas: ES5 compatible
• Plugins: Tailwind CSS class sorting

Prettier Ignore (.prettierignore)

Files and directories that are excluded from formatting:

• node_modules/
• Build outputs (dist/, build/, .next/, etc.)
• Lock files
• Generated files
• Public assets

Local Development

Check Formatting

npm run prettier:check

Fix Formatting

npm run prettier:fix

VS Code Integration

For the best experience, install the Prettier VS Code extension and add to your .vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Tailwind CSS Plugin

The prettier-plugin-tailwindcss plugin automatically sorts Tailwind CSS classes in the recommended order. This ensures consistency across the codebase.

Example:

Before:

<div className="text-center p-4 bg-blue-500 text-white font-bold">

After:

<div className="bg-blue-500 p-4 font-bold text-center text-white">

Troubleshooting

Workflow fails with "command not found"

Make sure your repository has a package.json with the required dependencies:

{
  "devDependencies": {
    "prettier": "^3.1.0",
    "prettier-plugin-tailwindcss": "^0.5.7"
  }
}

Auto-format workflow doesn't trigger

1. Ensure the PR is open (not draft)
2. Comment exactly /format (case-sensitive)
3. Check that the workflow has proper permissions in repository settings

Files are not being formatted

Check your .prettierignore file to ensure the files aren't being excluded.

Contributing

To modify these workflows:

1. Create a new branch
2. Make your changes
3. Test in a repository that uses these workflows
4. Submit a PR with a clear description of changes

License

Internal use only - Future Foundry organization.