Skip to content

Commit febefa5

Browse files
rinturajrinturaj
committed
feat: Reimplement components with a new structure, migrate to CJS configuration, and establish CI/CD pipelines.
1 parent 3dce0df commit febefa5

22 files changed

Lines changed: 975 additions & 4378 deletions

‎.github/RELEASE.md‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
# GitHub Actions CI/CD Setup
2+
3+
This project uses GitHub Actions for automated testing, building, and publishing to npm.
4+
5+
## Workflows
6+
7+
### 1. CI Workflow (`.github/workflows/ci.yml`)
8+
9+
Runs on every push and pull request to `main` and `develop` branches.
10+
11+
**What it does:**
12+
- Tests on Node.js 18.x and 20.x
13+
- Installs dependencies
14+
- Runs linter
15+
- Builds the library
16+
- Runs tests
17+
- Uploads build artifacts
18+
19+
### 2. Publish Workflow (`.github/workflows/publish.yml`)
20+
21+
Runs when a GitHub release is published or manually triggered.
22+
23+
**What it does:**
24+
- Builds the library
25+
- Runs tests and linter
26+
- Publishes to npm with provenance
27+
- Creates a release summary
28+
29+
## Setup Instructions
30+
31+
### 1. Add NPM Token to GitHub Secrets
32+
33+
1. **Generate npm token:**
34+
```bash
35+
npm login
36+
npm token create
37+
```
38+
39+
2. **Add to GitHub:**
40+
- Go to your repository → Settings → Secrets and variables → Actions
41+
- Click "New repository secret"
42+
- Name: `NPM_TOKEN`
43+
- Value: Your npm token from step 1
44+
45+
### 2. Publishing a New Version
46+
47+
#### Option A: Using GitHub Releases (Recommended)
48+
49+
1. **Update version in package.json:**
50+
```bash
51+
npm version patch # or minor, or major
52+
```
53+
54+
2. **Push changes and tags:**
55+
```bash
56+
git push && git push --tags
57+
```
58+
59+
3. **Create GitHub Release:**
60+
- Go to repository → Releases → Draft a new release
61+
- Choose the tag you just pushed
62+
- Add release notes
63+
- Click "Publish release"
64+
65+
The workflow will automatically publish to npm!
66+
67+
#### Option B: Manual Workflow Dispatch
68+
69+
1. Go to Actions → Publish to NPM → Run workflow
70+
2. Enter the tag (e.g., `v1.0.0`)
71+
3. Click "Run workflow"
72+
73+
### 3. Publishing Checklist
74+
75+
Before publishing:
76+
- [ ] Update version in `package.json`
77+
- [ ] Update `CHANGELOG.md` with changes
78+
- [ ] Run `npm run build` locally to verify
79+
- [ ] Run tests with `npm test`
80+
- [ ] Commit and push all changes
81+
- [ ] Create and push git tag
82+
- [ ] Create GitHub release
83+
84+
## NPM Package Settings
85+
86+
The workflow publishes with:
87+
- **Provenance**: Cryptographic signatures linking the package to the source code
88+
- **Public access**: Package is publicly available
89+
- **Registry**: https://registry.npmjs.org
90+
91+
## Troubleshooting
92+
93+
### Build fails in CI
94+
- Check the Actions tab for error logs
95+
- Ensure all dependencies are in `package.json`
96+
- Verify the build works locally: `npm run build`
97+
98+
### Publish fails
99+
- Verify `NPM_TOKEN` secret is set correctly
100+
- Ensure you're logged in to npm: `npm whoami`
101+
- Check if the version already exists on npm
102+
- Verify package name is available
103+
104+
### Tests fail
105+
- Tests are currently set to `continue-on-error: true`
106+
- They won't block the build, but should be fixed
107+
108+
## Local Testing
109+
110+
Test the build process locally before pushing:
111+
112+
```bash
113+
# Install dependencies
114+
npm ci
115+
116+
# Run linter
117+
npm run lint
118+
119+
# Build
120+
npm run build
121+
122+
# Test (if available)
123+
npm test
124+
125+
# Dry run publish (doesn't actually publish)
126+
npm publish --dry-run
127+
```

‎.github/workflows/ci.yml‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
name: CI
2+
3+
on:
4+
push:
5+
branches: [main, develop]
6+
pull_request:
7+
branches: [main, develop]
8+
9+
jobs:
10+
build:
11+
runs-on: ubuntu-latest
12+
13+
strategy:
14+
matrix:
15+
node-version: [18.x, 20.x]
16+
17+
steps:
18+
- name: Checkout code
19+
uses: actions/checkout@v4
20+
21+
- name: Setup Node.js ${{ matrix.node-version }}
22+
uses: actions/setup-node@v4
23+
with:
24+
node-version: ${{ matrix.node-version }}
25+
cache: 'npm'
26+
27+
- name: Install dependencies
28+
run: npm ci
29+
30+
- name: Run linter
31+
run: npm run lint
32+
continue-on-error: true
33+
34+
- name: Build library
35+
run: npm run build
36+
37+
- name: Run tests
38+
run: npm test
39+
continue-on-error: true
40+
41+
- name: Upload build artifacts
42+
uses: actions/upload-artifact@v4
43+
with:
44+
name: dist-${{ matrix.node-version }}
45+
path: dist/

‎.github/workflows/publish.yml‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
name: Publish to NPM
2+
3+
on:
4+
release:
5+
types: [published]
6+
workflow_dispatch:
7+
inputs:
8+
tag:
9+
description: 'Tag to publish (e.g., v1.0.0)'
10+
required: true
11+
type: string
12+
13+
jobs:
14+
publish:
15+
runs-on: ubuntu-latest
16+
permissions:
17+
contents: read
18+
id-token: write # Required for provenance
19+
20+
steps:
21+
- name: Checkout code
22+
uses: actions/checkout@v4
23+
24+
- name: Setup Node.js
25+
uses: actions/setup-node@v4
26+
with:
27+
node-version: '20.x'
28+
registry-url: 'https://registry.npmjs.org'
29+
cache: 'npm'
30+
31+
- name: Install dependencies
32+
run: npm ci
33+
34+
- name: Run linter
35+
run: npm run lint
36+
37+
- name: Build library
38+
run: npm run build
39+
40+
- name: Run tests
41+
run: npm test
42+
continue-on-error: true
43+
44+
- name: Verify package contents
45+
run: |
46+
echo "Verifying dist/ directory exists..."
47+
ls -la dist/
48+
echo "Checking package.json..."
49+
cat package.json | jq '.name, .version'
50+
51+
- name: Publish to NPM
52+
run: npm publish --provenance --access public
53+
env:
54+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
55+
56+
- name: Create GitHub Release Summary
57+
run: |
58+
echo "### 🚀 Published to NPM" >> $GITHUB_STEP_SUMMARY
59+
echo "" >> $GITHUB_STEP_SUMMARY
60+
echo "**Package**: \`tailwind-material-3\`" >> $GITHUB_STEP_SUMMARY
61+
echo "**Version**: \`$(node -p "require('./package.json').version")\`" >> $GITHUB_STEP_SUMMARY
62+
echo "" >> $GITHUB_STEP_SUMMARY
63+
echo "View on NPM: https://www.npmjs.com/package/tailwind-material-3" >> $GITHUB_STEP_SUMMARY

‎CHANGELOG.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [Unreleased]
9+
10+
### Added
11+
- Initial release of tailwind-material-3
12+
- Button component with 5 variants (Filled, Outlined, Text, Elevated, Tonal)
13+
- Icon buttons and FABs (Floating Action Buttons)
14+
- Card component with 3 variants (Elevated, Filled, Outlined)
15+
- Text Field component with 2 variants (Filled, Outlined)
16+
- Complete Material Design 3 design token system
17+
- TypeScript support with full type definitions
18+
- ESM and CommonJS builds
19+
- Interactive HTML demos
20+
- Angular integration example
21+
22+
### Features
23+
- **Design Tokens**: Complete Material 3 design system (colors, typography, elevation, shape, motion)
24+
- **Dark Mode**: Full dark mode support with CSS custom properties
25+
- **Accessibility**: ARIA attributes and keyboard navigation
26+
- **Type Safety**: Comprehensive TypeScript definitions
27+
- **Tree-shakeable**: ESM build with proper module structure
28+
- **Framework Agnostic**: Works with any JavaScript framework or vanilla HTML
29+
30+
## [3.0.0] - TBD
31+
32+
Initial public release.
33+
34+
---
35+
36+
## Version Guidelines
37+
38+
- **Major** (X.0.0): Breaking changes
39+
- **Minor** (0.X.0): New features, backwards compatible
40+
- **Patch** (0.0.X): Bug fixes, backwards compatible
41+
42+
## Publishing Process
43+
44+
1. Update version in `package.json`
45+
2. Update this CHANGELOG with changes
46+
3. Commit: `git commit -am "Release v3.0.0"`
47+
4. Tag: `git tag v3.0.0`
48+
5. Push: `git push && git push --tags`
49+
6. Create GitHub Release (triggers automatic npm publish)

0 commit comments

Comments
 (0)