Initial setup

Author: aarongustafson

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Contributing to COMPONENT-NAME
+# Contributing to table-sortable
 
 Thank you for your interest in contributing! This document provides guidelines for contributing to this project.
 

README.md

@@ -1,220 +1,122 @@
-# Web Component Starter Template
+# table-sortable Web Component
 
-A comprehensive, production-ready starter template for creating Web Components. This template is based on the architecture and best practices from my web components work.
+[![npm version](https://img.shields.io/npm/v/@aarongustafson/table-sortable.svg)](https://www.npmjs.com/package/@aarongustafson/table-sortable) [![Build Status](https://img.shields.io/github/actions/workflow/status/aarongustafson/table-sortable/ci.yml?branch=main)](https://github.com/aarongustafson/table-sortable/actions)
 
-## ✨ Features
+A web component to enable users to sort the data in a table based on table cell values.
 
-- **Modern Tooling**: Vitest, ESLint, Prettier, Happy DOM
-- **Best Practices**: Shadow DOM, Custom Elements v1, proper encapsulation
-- **Multiple Import Options**: Auto-define, manual definition, or both
-- **Testing**: Comprehensive test setup with coverage reporting
-- **CI/CD**: GitHub Actions workflows included
-- **Developer Experience**: Demo page, interactive setup, extensive documentation
-- **Publishing Ready**: npm package configuration and automated publishing workflow
+## Demo
 
-## 🚀 Quick Start
+[Live Demo](https://aarongustafson.github.io/table-sortable/demo/) ([Source](./demo/index.html))
 
-### Use This Template
-
-1. Click "Use this template" on GitHub, or:
-
-```bash
-git clone https://github.com/aarongustafson/web-component-starter.git my-component
-cd my-component
-```
-
-2. Run the interactive setup:
+## Installation
 
 ```bash
-npm install
-npm run setup
+npm install @aarongustafson/table-sortable
 ```
 
-The setup wizard will:
-- Ask for your component name (e.g., `my-awesome-component`)
-- Ask for a description
-- Rename all files automatically
-- Replace all placeholders in code and configuration
-- **Generate your component's README from template**
-- **Clean up template setup files** (SETUP.md, README.tpl, scripts/)
-- Install dependencies
-- Initialize git repository
+## Usage
 
-### Manual Setup
+### Option 1: Auto-define the custom element (easiest)
 
-If you prefer manual setup, see [SETUP.md](SETUP.md) for detailed instructions.
+Import the package to automatically define the `<table-sortable>` custom element:
 
-## 📁 What's Included
-
-```
-web-component-starter/
-├── COMPONENT-NAME.js          # Component implementation
-├── index.js                   # Main entry (class + auto-define)
-├── define.js                  # Auto-define only
-├── custom-elements.json       # Custom Elements Manifest
-├── package.json               # Package config with scripts
-├── LICENSE                    # MIT License
-├── README.md                  # This file (replaced after setup)
-├── README.tpl                 # Template for your component's README
-├── .gitignore                 # Git ignore
-├── .npmignore                 # npm ignore
-├── .prettierrc                # Prettier config
-├── .editorconfig              # Editor config
-├── eslint.config.js           # ESLint config
-├── vitest.config.js           # Vitest config
-├── .github/
-│   ├── workflows/
-│   │   ├── ci.yml            # Continuous integration
-│   │   └── publish.yml       # Auto-publish to npm
-│   └── ISSUE_TEMPLATE/       # Bug & feature templates
-├── scripts/
-│   └── setup.js              # Interactive setup wizard (removed after setup)
-├── test/
-│   ├── setup.js              # Test configuration
-│   └── COMPONENT-NAME.test.js # Test suite
-├── demo/
-│   └── index.html            # Live demo page
-├── SETUP.md                  # Manual setup guide (removed after setup)
-└── CONTRIBUTING.md           # Contribution guidelines
+```javascript
+import '@aarongustafson/table-sortable';
 ```
 
-## 🛠️ Development
-
-### Available Scripts
+Or use the define-only script in HTML:
 
-```bash
-npm run setup          # Interactive setup wizard
-npm test               # Run tests in watch mode
-npm run test:run       # Run tests once
-npm run test:ui        # Open Vitest UI
-npm run test:coverage  # Generate coverage report
-npm run lint           # Lint with ESLint + Prettier
-npm run format         # Auto-fix linting issues
+```html
+<script src="./node_modules/@aarongustafson/table-sortable/define.js" type="module"></script>
 ```
 
-### Component Architecture
-
-This template provides three flexible import options:
+### Option 2: Import the class and define manually
 
-**Option 1: Auto-define (easiest)**
-```javascript
-import '@yourscope/component-name';
-// Element is automatically registered
-```
+Import the class and define the custom element with your preferred tag name:
 
-**Option 2: Manual registration**
 ```javascript
-import { ComponentNameElement } from '@yourscope/component-name/component-name.js';
-customElements.define('my-custom-name', ComponentNameElement);
-```
+import { TableSortableElement } from '@aarongustafson/table-sortable/table-sortable.js';
 
-**Option 3: Both**
-```javascript
-import { ComponentNameElement } from '@yourscope/component-name';
-// Element is registered AND class is available for extension
+customElements.define('my-custom-name', TableSortableElement);
 ```
 
-## 🧪 Testing
+### Basic Example
 
-Includes:
-- **Vitest**: Fast, modern test runner
-- **Happy DOM**: Lightweight browser environment
-- **Testing Library**: DOM testing utilities
-- **Coverage**: V8 coverage reporting
-- **UI**: Interactive test debugging
-
-Example:
-```javascript
-import { describe, it, expect } from 'vitest';
-
-describe('MyComponent', () => {
-  it('should render', () => {
-    const el = document.createElement('my-component');
-    expect(el).toBeInstanceOf(HTMLElement);
-  });
-});
+```html
+<table-sortable>
+  <!-- Your content here -->
+</table-sortable>
 ```
 
-## 📦 Publishing
+## Attributes
 
-### Setup Automated Publishing with OIDC (Recommended)
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `example-attribute` | `string` | `""` | Description of the attribute |
 
-This template is configured to publish to npm using OpenID Connect (OIDC), which is more secure than using long-lived NPM tokens.
+## Events
 
-**Initial Setup:**
+The component fires custom events that you can listen to:
 
-1. Publish your package to npm manually the first time:
-   ```bash
-   npm run test:run  # Ensure tests pass
-   npm run lint      # Ensure code is clean
-   npm publish       # First publish must be manual
-   ```
+| Event | Description | Detail |
+|-------|-------------|--------|
+| `table-sortable:event` | Fired when something happens | `{ data }` |
 
-2. Configure OIDC on npm:
-   - Visit your package's access page: `https://www.npmjs.com/package/@yourscope/your-component-name/access`
-   - Under "Publishing Access", click "Configure OIDC"
-   - Add GitHub Actions as a trusted publisher with these settings:
-     - **Provider**: GitHub
-     - **Organization/Username**: Your GitHub username or organization
-     - **Repository**: Your repository name
-     - **Workflow**: `.github/workflows/publish.yml`
-     - **Environment**: Leave blank (unless you use GitHub environments)
+### Example Event Handling
 
-3. Create a GitHub release to trigger automated publishing:
-   - Use `npm version` to update version and create a tag: `npm version patch` (or `minor`/`major`)
-   - Push with tags: `git push --follow-tags`
-   - Or create a release through GitHub's UI
+```javascript
+const element = document.querySelector('table-sortable');
 
-The GitHub Actions workflow (`.github/workflows/publish.yml`) will automatically publish to npm when you create a new version tag.
+element.addEventListener('table-sortable:event', (event) => {
+  console.log('Event fired:', event.detail);
+});
+```
 
-### Manual Publishing
+## CSS Custom Properties
 
-If you prefer to publish manually without automation:
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--example-color` | `#000` | Example color property |
 
-```bash
-npm run test:run  # Ensure tests pass
-npm run lint      # Ensure code is clean
-npm publish       # Publish to npm
+### Example Styling
+
+```css
+table-sortable {
+  --example-color: #ff0000;
+}
 ```
 
-## 🌐 Browser Support
+## Browser Support
 
-Works in all modern browsers supporting:
+This component uses modern web standards:
 - Custom Elements v1
 - Shadow DOM v1
 - ES Modules
 
-For legacy browsers, use polyfills.
-
-## 📚 Documentation
-
-- [SETUP.md](SETUP.md) - Detailed setup instructions (removed after setup)
-- [CONTRIBUTING.md](CONTRIBUTING.md) - Contribution guidelines
-- [LICENSE](LICENSE) - MIT License
-
-## 🎯 Use Cases
+For older browsers, you may need polyfills.
 
-Perfect for:
-- Reusable UI components
-- Design system elements
-- Form controls and widgets
-- Interactive content blocks
-- Accessibility-enhanced components
+## Development
 
-## 🙏 Credits
+```bash
+# Install dependencies
+npm install
 
-Based on best practices from:
-- [form-obfuscator](https://github.com/aarongustafson/form-obfuscator) by Aaron Gustafson
-- [Open Web Components](https://open-wc.org/)
+# Run tests
+npm test
 
-## 📄 License
+# Run tests with coverage
+npm run test:coverage
 
-MIT - See [LICENSE](LICENSE)
+# Lint code
+npm run lint
 
-## 🤝 Contributing
+# Format code
+npm run format
 
-Contributions welcome! See [CONTRIBUTING.md](CONTRIBUTING.md)
+# View demo
+open demo/index.html
+```
 
----
+## License
 
-**Ready to build your web component?** Run `npm run setup` to get started! 🚀
+MIT © [Aaron Gustafson](https://www.aaron-gustafson.com/)