Merge pull request #929 from gadget-inc/tailwind4

use tailwind 4 for auto/shadcn

Author: infiton

.eslintignore

@@ -2,4 +2,5 @@ node_modules
 .eslintrc.js
 jest.config.js
 tmp
-packages/*/dist
+packages/*/dist
+packages/react/auto

packages/react-bigcommerce/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gadgetinc/react-bigcommerce",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "files": [
     "README.md",
     "dist/**/*"
@@ -27,7 +27,7 @@
     "prerelease": "gitpkg publish"
   },
   "dependencies": {
-    "@gadgetinc/react": "^0.23.4"
+    "@gadgetinc/react": "^0.24.0"
   },
   "devDependencies": {
     "@gadgetinc/core": "workspace:*",

packages/react-chatgpt-apps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gadgetinc/react-chatgpt-apps",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "files": [
     "README.md",
     "dist/**/*"
@@ -27,7 +27,7 @@
     "prerelease": "gitpkg publish"
   },
   "dependencies": {
-    "@gadgetinc/react": "^0.23.4"
+    "@gadgetinc/react": "^0.24.0"
   },
   "devDependencies": {
     "@gadgetinc/react": "workspace:*",

packages/react-shopify-app-bridge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gadgetinc/react-shopify-app-bridge",
-  "version": "0.20.3",
+  "version": "0.21.0",
   "files": [
     "README.md",
     "dist/**/*"
@@ -27,7 +27,7 @@
     "prerelease": "gitpkg publish"
   },
   "dependencies": {
-    "@gadgetinc/react": "^0.23.4",
+    "@gadgetinc/react": "^0.24.0",
     "crypto-js": "^4.2.0",
     "tslib": "^2.6.2"
   },

packages/react/.storybook/preview.js

@@ -1,6 +1,6 @@
 /** @type { import('@storybook/react').Preview } */
 import "@shopify/polaris/build/esm/styles.css";
-import "../globals.css"; // adjust path to your Tailwind CSS file
+import "../spec/shadcn-tailwind.css";
 
 const preview = {
   parameters: {

packages/react/cypress/component/auto/form/AutoFormDateTimePicker.cy.tsx

@@ -106,7 +106,7 @@ describeForEachAutoAdapter("AutoFormDateTimePicker", ({ name, adapter: { AutoFor
         if (name === SUITE_NAMES.SHADCN) {
           cy.get("#test-date").contains("YYYY-MM-DD");
           cy.get("#test-date").click();
-          cy.get("button").contains(`${new Date().getFullYear()}`);
+          cy.get(".rdp-caption_label").contains(`${new Date().getFullYear()}`);
         }
       }
     );
@@ -367,8 +367,6 @@ describeForEachAutoAdapter("AutoFormDateTimePicker", ({ name, adapter: { AutoFor
         cy.get(`[aria-label='Thursday March 4 2021']`).should("have.attr", "aria-pressed", "true");
       }
 
-      cy.get("#test-date").click();
-
       if (name === SUITE_NAMES.SHADCN) {
         cy.get(`[aria-label='Thursday, March 4th, 2021']`).click();
         cy.get(`[aria-label='Thursday, March 4th, 2021, selected']`).should("exist");

packages/react/cypress/support/cypress.css

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

packages/react/globals.css

@@ -1,6 +1,6 @@
 {
   "name": "@gadgetinc/react",
-  "version": "0.23.4",
+  "version": "0.24.0",
   "files": [
     "README.md",
     "dist/**/*",
@@ -17,6 +17,17 @@
       "require": "./dist/cjs/index.js",
       "default": "./dist/esm/index.js"
     },
+    "./auto/shadcn.css": {
+      "import": {
+        "types": "./dist/esm/auto/shadcn/index.css.d.ts",
+        "default": "./dist/esm/auto/shadcn/index.css"
+      },
+      "require": {
+        "types": "./dist/cjs/auto/shadcn/index.css.d.cts",
+        "default": "./dist/cjs/auto/shadcn/index.css.cjs"
+      },
+      "default": "./dist/esm/auto/shadcn/index.css"
+    },
     "./auto/polaris": {
       "import": "./dist/esm/auto/polaris/index.js",
       "require": "./dist/cjs/auto/polaris/index.js",
@@ -25,7 +36,8 @@
     "./auto/shadcn": {
       "import": "./dist/esm/auto/shadcn/index.js",
       "require": "./dist/cjs/auto/shadcn/index.js",
-      "default": "./dist/esm/auto/shadcn/index.js"
+      "default": "./dist/esm/auto/shadcn/index.js",
+      "style": "./dist/esm/auto/shadcn/index.css"
     }
   },
   "source": "src/index.ts",
@@ -38,7 +50,7 @@
     "clean": "rimraf dist/ auto/ *.tsbuildinfo **/*.tsbuildinfo cypress/*.tsbuildinfo",
     "build": "pnpm clean && pnpm setup-build && tsc -b tsconfig.cjs.json tsconfig.esm.json && pnpm copy",
     "setup-build": "mkdir -p dist/cjs dist/esm auto/polaris auto/shadcn && echo '{\"type\": \"commonjs\"}' > dist/cjs/package.json && echo '{\"main\": \"../../dist/cjs/auto/polaris/index.js\"}' > auto/polaris/package.json && echo '{\"main\": \"../../dist/cjs/auto/shadcn/index.js\"}' > auto/shadcn/package.json && echo '{\"type\": \"module\"}' > dist/esm/package.json",
-    "copy": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
+    "copy": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs && copyfiles -u 1 src/**/*.css.d.ts dist/esm && copyfiles -u 1 src/**/*.css.cjs dist/cjs && copyfiles -u 1 src/**/*.css.d.cts dist/cjs && cp src/auto/shadcn/index.css auto/shadcn.css && cp src/auto/shadcn/index.css.d.ts auto/shadcn.css.d.ts",
     "watch": "tsc -b tsconfig.esm.json --watch --preserveWatchOutput",
     "gql-gen": "graphql-codegen",
     "prepublishOnly": "pnpm build",
@@ -98,6 +110,7 @@
     "@storybook/react": "^8.6.14",
     "@storybook/react-vite": "^8.6.14",
     "@storybook/test": "^8.6.14",
+    "@tailwindcss/postcss": "^4.1.7",
     "@tanstack/react-table": "^8.20.6",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
@@ -110,7 +123,6 @@
     "@types/react-dom": "^19.1.1",
     "@types/setup-polly-jest": "^0.5.5",
     "@types/tmp": "^0.2.6",
-    "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
@@ -133,9 +145,9 @@
     "setup-polly-jest": "^0.11.0",
     "sonner": "^2.0.1",
     "storybook": "^8.6.14",
-    "tailwind-merge": "^2.6.0",
-    "tailwindcss": "^3.4.17",
-    "tailwindcss-animate": "^1.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.7",
+    "tw-animate-css": "^1.4.0",
     "tmp": "^0.2.3",
     "wonka": "^6.3.2"
   },

packages/react/package.json

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };