diff --git a/.npmrc b/.npmrc index c9bc970bb..76e8f7fe1 100644 --- a/.npmrc +++ b/.npmrc @@ -3,4 +3,6 @@ save-exact = true auto-install-peers = true link-workspace-packages = false strict-peer-dependencies = false -prefer-workspace-packages = false \ No newline at end of file +prefer-workspace-packages = false +node-linker = hoisted +shamefully-hoist = true \ No newline at end of file diff --git a/RELEASES.md b/RELEASES.md new file mode 100644 index 000000000..88910c52c --- /dev/null +++ b/RELEASES.md @@ -0,0 +1,278 @@ +# Material Tailwind Release Process + +This document outlines the complete release process for Material Tailwind packages including versioning, building, GitHub releases, and NPM publishing. + +## Package Structure + +- `@material-tailwind/react` - React components package +- `@material-tailwind/html` - HTML/CSS components package + +## Release Types + +### Beta Releases +- Used for testing new features and breaking changes +- Version format: `X.Y.Z-beta.N` (e.g., `3.0.0-beta.1`) +- Published to NPM with `@beta` tag +- Can be installed with `npm install @material-tailwind/react@beta` + +### Final Releases +- Stable releases for production use +- Version format: `X.Y.Z` (e.g., `3.0.0`) +- Published to NPM with `@latest` tag (default) +- Can be installed with `npm install @material-tailwind/react` + +## Pre-Release Checklist + +### 1. Code Preparation +- [ ] Ensure all features are complete and tested +- [ ] Update component documentation +- [ ] Run full test suite: `pnpm test` +- [ ] Run linting: `pnpm lint` +- [ ] Build all packages: `pnpm build` +- [ ] Update CHANGELOG.md with new features/fixes + +### 2. Version Management +- [ ] Decide on version number following [Semantic Versioning](https://semver.org/) + - MAJOR: Breaking changes + - MINOR: New features (backward compatible) + - PATCH: Bug fixes (backward compatible) + +### 3. Documentation Updates +- [ ] Update installation guides if needed +- [ ] Update component examples +- [ ] Update migration guides for breaking changes +- [ ] Verify all CodePreview examples work + +## Release Process + +### Step 1: Update Package Versions + +#### For React Package +```bash +cd packages/react +npm version [patch|minor|major|prerelease] --preid=beta +``` + +#### For HTML Package +```bash +cd packages/html +npm version [patch|minor|major|prerelease] --preid=beta +``` + +### Step 2: Build Packages + +#### Build React Package +```bash +cd packages/react +pnpm build +``` + +#### Build HTML Package +```bash +cd packages/html +pnpm build +``` + +### Step 3: Create Git Tag and Commit + +```bash +# Commit version changes +git add . +git commit -m "chore: release v{VERSION}" + +# Create and push tag +git tag v{VERSION} +git push origin main +git push origin v{VERSION} +``` + +### Step 4: Create GitHub Release + +1. Go to [GitHub Releases](https://github.com/creativetimofficial/material-tailwind/releases) +2. Click "Draft a new release" +3. Choose the created tag `v{VERSION}` +4. Set release title: `Material Tailwind v{VERSION}` +5. Generate release notes or write custom notes including: + - New features + - Bug fixes + - Breaking changes (if any) + - Migration guide links +6. Mark as "pre-release" if it's a beta version +7. Publish release + +### Step 5: Publish to NPM + +#### Beta Release +```bash +# React package +cd packages/react +npm publish --tag beta + +# HTML package +cd packages/html +npm publish --tag beta +``` + +#### Final Release +```bash +# React package +cd packages/react +npm publish + +# HTML package +cd packages/html +npm publish +``` + +## NPM Package Management + +### Publishing Beta Versions +```bash +# Publish beta version +npm publish --tag beta + +# Users install with: +npm install @material-tailwind/react@beta +``` + +### Publishing Final Versions +```bash +# Publish final version (latest tag) +npm publish + +# Users install with: +npm install @material-tailwind/react +``` + +### Promoting Beta to Latest +```bash +# If beta testing is successful, promote to latest +npm dist-tag add @material-tailwind/react@{VERSION} latest +``` + +## Post-Release Tasks + +### 1. Update Documentation +- [ ] Update documentation site with new version +- [ ] Deploy documentation changes +- [ ] Update README.md files if needed + +### 2. Community Communication +- [ ] Announce release on GitHub Discussions +- [ ] Update Discord/community channels +- [ ] Consider blog post for major releases + +### 3. Monitor Release +- [ ] Watch for issue reports +- [ ] Monitor NPM download statistics +- [ ] Check for any critical bugs + +## Emergency Hotfix Process + +For critical bugs in production releases: + +1. Create hotfix branch from main: `git checkout -b hotfix/v{VERSION}` +2. Apply minimal fix +3. Update version (patch increment) +4. Follow normal release process +5. Merge hotfix back to main + +## Version Management Examples + +### Beta Release Example +```bash +# Starting from version 2.5.0, create first beta for 3.0.0 +npm version 3.0.0-beta.1 + +# Subsequent beta releases +npm version prerelease --preid=beta # Creates 3.0.0-beta.2 +``` + +### Final Release Example +```bash +# Promote beta to final +npm version 3.0.0 +``` + +## Build Verification + +Before publishing, ensure all builds are successful: + +```bash +# From project root +pnpm build + +# Verify dist folders exist and contain built files +ls packages/react/dist/ +ls packages/html/dist/ + +# Verify package.json files have correct versions +cat packages/react/package.json | grep version +cat packages/html/package.json | grep version +``` + +## Rollback Process + +If a release needs to be rolled back: + +### NPM Rollback +```bash +# Deprecate problematic version +npm deprecate @material-tailwind/react@{VERSION} "This version has critical issues, please upgrade" + +# Or unpublish within 24 hours +npm unpublish @material-tailwind/react@{VERSION} +``` + +### GitHub Release Rollback +1. Mark release as draft +2. Delete problematic tag +3. Create new release with fixed version + +## Security Considerations + +- [ ] Never commit NPM auth tokens +- [ ] Use NPM 2FA for publishing +- [ ] Verify package contents before publishing +- [ ] Review dependencies for vulnerabilities + +## Automation Notes + +Consider setting up GitHub Actions for: +- Automated testing on release tags +- Automated NPM publishing on tag creation +- Automated documentation deployment +- Release note generation + +## Support Matrix + +Maintain clear documentation of: +- Node.js version support +- React version compatibility +- Tailwind CSS version compatibility +- Browser support + +--- + +## Quick Reference Commands + +```bash +# Check current versions +pnpm version + +# Build all packages +pnpm build + +# Publish beta +npm publish --tag beta + +# Publish final +npm publish + +# Check published versions +npm view @material-tailwind/react versions --json +``` + +--- + +**Note**: Always test releases in a staging environment before publishing to production. Keep this file updated as the release process evolves. \ No newline at end of file diff --git a/apps/site/.eslintrc.json b/apps/site/.eslintrc.json new file mode 100644 index 000000000..63dff6859 --- /dev/null +++ b/apps/site/.eslintrc.json @@ -0,0 +1,10 @@ +{ + "extends": ["next/core-web-vitals"], + "rules": { + "react/display-name": "off", + "@next/next/no-img-element": "off", + "react-hooks/exhaustive-deps": "off", + "react/jsx-key": "off", + "react/no-unescaped-entities": "off" + } +} \ No newline at end of file diff --git a/apps/site/package.json b/apps/site/package.json index 8ef33c2f4..4b801b0c5 100644 --- a/apps/site/package.json +++ b/apps/site/package.json @@ -3,7 +3,7 @@ "version": "2.0.0", "description": "Material Tailwind is an easy-to-use components library for Tailwind CSS inspired by Material Design.", "scripts": { - "dev": "next dev --port 3001", + "dev": "next dev --port 3000", "build": "next build", "start": "next start", "lint": "next lint" @@ -57,16 +57,16 @@ "zod": "3.22.4" }, "devDependencies": { + "@tailwindcss/postcss": "4.1.11", "@types/node": "20.11.24", "@types/react": "18.2.61", "@types/react-dom": "18.2.19", - "autoprefixer": "10.4.13", "eslint-config-custom": "workspace:*", "next-sitemap": "3.1.44", "postcss": "8.4.8", "prettier": "3.1.1", "prompts": "2.4.2", - "tailwindcss": "3.4.13", + "tailwindcss": "4.1.11", "tailwindcss-animate": "1.0.7", "tsconfig": "workspace:*", "typescript": "5.2.2" diff --git a/apps/site/postcss.config.js b/apps/site/postcss.config.js index 33ad091d2..52b9b4baf 100644 --- a/apps/site/postcss.config.js +++ b/apps/site/postcss.config.js @@ -1,6 +1,5 @@ module.exports = { plugins: { - tailwindcss: {}, - autoprefixer: {}, + '@tailwindcss/postcss': {}, }, } diff --git a/apps/site/src/app/docs/[...slug]/page.tsx b/apps/site/src/app/docs/[...slug]/page.tsx index 7b701f797..3297e9965 100644 --- a/apps/site/src/app/docs/[...slug]/page.tsx +++ b/apps/site/src/app/docs/[...slug]/page.tsx @@ -167,7 +167,7 @@ const highlight = { name: "highlight", MultilineAnnotation: ({ children }) => { return ( - + {children} ); diff --git a/apps/site/src/app/docs/content/html/accordion.mdx b/apps/site/src/app/docs/content/html/accordion.mdx index 176fb7fe2..7e2f1073f 100644 --- a/apps/site/src/app/docs/content/html/accordion.mdx +++ b/apps/site/src/app/docs/content/html/accordion.mdx @@ -208,21 +208,21 @@ export function ControlledAccordion() {
-
+
-
+
diff --git a/apps/site/src/app/docs/content/html/button.mdx b/apps/site/src/app/docs/content/html/button.mdx index f8a08f9c1..d9781a3de 100644 --- a/apps/site/src/app/docs/content/html/button.mdx +++ b/apps/site/src/app/docs/content/html/button.mdx @@ -59,7 +59,7 @@ See our button examples below. They come in different styles like ghost, outline @@ -251,7 +251,7 @@ Use this example to create buttons with icons, you can use any type of icons ins @@ -429,7 +429,7 @@ You can use the `a` tag instead of the button tag to create a button that works Gradient @@ -532,7 +532,7 @@ Use this example to create buttons with a loading state. You can use the `animat
- - -
@@ -334,7 +334,7 @@ Use this card example for building login pages where users need to enter their c
@@ -563,14 +563,14 @@ This card example is ideal for highlighting recent or featured posts on a blog.
- - - - - - - @@ -873,7 +873,7 @@ Use this example if you want to display client testimonials or customer feedback }> ```html -
+
}> ```html -
+
-
+
Gradient @@ -255,7 +255,7 @@ The icons, in this example, add a visual element that can improve user understan Solid
-
+
- +
- -
@@ -362,7 +362,7 @@ Use this example if you want to clearly indicate to users that the input field i > @@ -384,7 +384,7 @@ Check out this example to learn how you can implement custom styles for your inp
diff --git a/apps/site/src/app/docs/content/html/navbar.mdx b/apps/site/src/app/docs/content/html/navbar.mdx index 743efcf18..48d57e037 100644 --- a/apps/site/src/app/docs/content/html/navbar.mdx +++ b/apps/site/src/app/docs/content/html/navbar.mdx @@ -22,7 +22,7 @@ Use this simple navbar example with navigational links and buttons that get the }> ```html -