feat(react): update examples

starters/react-base/biome.json

@@ -0,0 +1,17 @@
+{
+ "files": {
+ "ignore": ["dist"]
+ },
+ "javascript": {
+ "formatter": {
+ "indentStyle": "space",
+ "semicolons": "asNeeded",
+ "quoteStyle": "single"
+ }
+ },
+ "json": {
+ "formatter": {
+ "indentStyle": "space"
+ }
+ }
+}

starters/react-base/client/base.css

@@ -1,3 +1,11 @@
+/*
+Optional:
+https://tailwindcss.com/docs/preflight
+@tailwind base;
+*/
+@tailwind components;
+@tailwind utilities;
+
 :root {
  --color-base: #f1f1f1;
  --color-highlight: #ff80ff;

starters/react-base/package.json

@@ -11,8 +11,8 @@
  },
  "dependencies": {
  "@fastify/one-line-logger": "^1.2.0",
- "@fastify/react": "^0.3.0",
- "@fastify/vite": "^5.0.6",
+ "@fastify/vite": "^6.0.2",
+ "@fastify/react": "^0.4.0",
  "fastify": "^4.24.3",
  "history": "^5.3.0",
  "minipass": "^7.0.4",
@@ -23,15 +23,11 @@
  "valtio": "^1.12.0"
  },
  "devDependencies": {
- "@babel/eslint-parser": "^7.16.0",
- "@babel/preset-react": "^7.16.0",
  "@vitejs/plugin-react": "^4.2.0",
- "eslint": "^7.32.0",
- "eslint-config-standard": "^16.0.2",
- "eslint-plugin-import": "^2.22.1",
- "eslint-plugin-node": "^11.1.0",
- "eslint-plugin-promise": "^4.3.1",
- "eslint-plugin-react": "^7.29.4",
+ "postcss": "^8.4.31",
+ "postcss-nesting": "^12.0.2",
+ "postcss-preset-env": "^7.7.1",
+ "tailwindcss": "^3.4.1",
  "vite": "^5.0.2"
  }
 }

starters/react-base/postcss.config.cjs

@@ -0,0 +1,13 @@
+module.exports = {
+ plugins: {
+ 'tailwindcss/nesting': 'postcss-nesting',
+ tailwindcss: {},
+ 'postcss-preset-env': { 
+ stage: 1,
+ features: {
+ // Let Tailwind handle it
+ 'nesting-rules': false
+ }
+ },
+ }
+}

starters/react-base/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: [
+ './client/index.html',
+ './client/**/*.{jsx,tsx}',
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}

starters/react-kitchensink/biome.json

@@ -0,0 +1,17 @@
+{
+ "files": {
+ "ignore": ["dist"]
+ },
+ "javascript": {
+ "formatter": {
+ "indentStyle": "space",
+ "semicolons": "asNeeded",
+ "quoteStyle": "single"
+ }
+ },
+ "json": {
+ "formatter": {
+ "indentStyle": "space"
+ }
+ }
+}

starters/react-kitchensink/client/base.css

@@ -1,3 +1,11 @@
+/*
+Optional:
+https://tailwindcss.com/docs/preflight
+@tailwind base;
+*/
+@tailwind components;
+@tailwind utilities;
+
 :root {
  --color-base: #f1f1f1;
  --color-highlight: #ff80ff;

starters/react-kitchensink/client/root.jsx

@@ -1,4 +1,3 @@
-import 'virtual:uno.css'
 import { Suspense } from 'react'
 import { Routes, Route } from 'react-router-dom'
 import { Router, AppRoute } from '/:core.jsx'

starters/react-kitchensink/package.json

@@ -12,8 +12,8 @@
  "dependencies": {
  "@fastify/formbody": "^7.4.0",
  "@fastify/one-line-logger": "^1.2.0",
- "@fastify/react": "^0.3.0",
- "@fastify/vite": "^5.0.6",
+ "@fastify/vite": "^6.0.2",
+ "@fastify/react": "^0.4.0",
  "fastify": "^4.24.3",
  "history": "^5.3.0",
  "minipass": "^7.0.4",
@@ -24,16 +24,11 @@
  "valtio": "^1.12.0"
  },
  "devDependencies": {
- "@babel/eslint-parser": "latest",
- "@babel/preset-react": "latest",
  "@vitejs/plugin-react": "^4.2.0",
- "eslint": "latest",
- "eslint-config-standard": "latest",
- "eslint-plugin-import": "latest",
- "eslint-plugin-node": "latest",
- "eslint-plugin-promise": "latest",
- "eslint-plugin-react": "latest",
- "postcss-preset-env": "latest",
- "unocss": "latest"
+ "postcss": "^8.4.31",
+ "postcss-nesting": "^12.0.2",
+ "postcss-preset-env": "^7.7.1",
+ "tailwindcss": "^3.4.1",
+ "vite": "^5.0.2"
  }
 }

starters/react-kitchensink/postcss.config.cjs

@@ -1,9 +1,13 @@
-const postcssPresetEnv = require('postcss-preset-env')
-
 module.exports = {
- plugins: [
- postcssPresetEnv({
+ plugins: {
+ 'tailwindcss/nesting': 'postcss-nesting',
+ tailwindcss: {},
+ 'postcss-preset-env': { 
  stage: 1,
- }),
- ]
+ features: {
+ // Let Tailwind handle it
+ 'nesting-rules': false
+ }
+ },
+ }
 }

starters/react-kitchensink/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: [
+ './client/index.html',
+ './client/**/*.{jsx,tsx}',
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}

starters/react-kitchensink/vite.config.js

@@ -1,6 +1,5 @@
 import { join, dirname } from 'path'
 import { fileURLToPath } from 'url'
-import unocss from 'unocss/vite'
 
 import viteReact from '@vitejs/plugin-react'
 import fastifyReact from '@fastify/react/plugin'
@@ -12,7 +11,6 @@ export default {
  plugins: [
  viteReact(), 
  fastifyReact(),
- unocss(),
  ],
  ssr: {
  external: [