fix(cli): remix detection (#4972)

# What

Some remix templates doesn't package a `vite.config.*` file at their root.
It's the case for the recommended starter "stack" templates: blues-stack, indie-stack and grunge-stack.
As recommended in a TODO comment, it's more suitable to check for a `@remix-run/*` dependency in the package dependencies.

# How

- decouple vite and remix checks
- retrieve the `package.json`
- allow passing a `cwd` to the retrieval method
- remove the "empty config file list" that can be empty for a remix stack
- check that the `package.json` contains a `@remix-run/*` dependency

# Test

Added a fixture by running `npx create-remix@latest --template remix-run/indie-stack` in the [frameworks](/Fluf22/shadcn-ui/tree/fix/cli-remix-detection/packages/cli/test/fixtures/frameworks) folder and named it `remix-indie-stack`, if ever we want another stack as a fixture later

---

Fixes #4967

.changeset/good-toes-greet.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+update remix detection

.gitignore

@@ -33,4 +33,9 @@ yarn-error.log*
 .turbo
 
 .contentlayer
-tsconfig.tsbuildinfo
+tsconfig.tsbuildinfo
+
+# ide
+.idea
+.fleet
+.vscode

packages/shadcn/src/utils/get-package-info.ts

@@ -2,8 +2,13 @@ import path from "path"
 import fs from "fs-extra"
 import { type PackageJson } from "type-fest"
 
-export function getPackageInfo() {
-  const packageJsonPath = path.join("package.json")
+export function getPackageInfo(
+  cwd: string = "",
+  shouldThrow: boolean = true
+): PackageJson | null {
+  const packageJsonPath = path.join(cwd, "package.json")
 
-  return fs.readJSONSync(packageJsonPath) as PackageJson
+  return fs.readJSONSync(packageJsonPath, {
+    throws: shouldThrow,
+  }) as PackageJson
 }

packages/shadcn/src/utils/get-project-info.ts

@@ -6,6 +6,7 @@ import {
   getConfig,
   resolveConfigPaths,
 } from "@/src/utils/get-config"
+import { getPackageInfo } from "@/src/utils/get-package-info"
 import fg from "fast-glob"
 import fs from "fs-extra"
 import { loadConfig } from "tsconfig-paths"
@@ -36,6 +37,7 @@ export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
     tailwindConfigFile,
     tailwindCssFile,
     aliasPrefix,
+    packageJson,
   ] = await Promise.all([
     fg.glob("**/{next,vite,astro}.config.*|gatsby-config.*|composer.json", {
       cwd,
@@ -47,6 +49,7 @@ export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
     getTailwindConfigFile(cwd),
     getTailwindCssFile(cwd),
     getTsConfigAliasPrefix(cwd),
+    getPackageInfo(cwd, false),
   ])
 
   const isUsingAppDir = await fs.pathExists(
@@ -63,10 +66,6 @@ export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
     aliasPrefix,
   }
 
-  if (!configFiles.length) {
-    return type
-  }
-
   // Next.js.
   if (configFiles.find((file) => file.startsWith("next.config."))?.length) {
     type.framework = isUsingAppDir
@@ -94,13 +93,21 @@ export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
     return type
   }
 
-  // Vite and Remix.
-  // They both have a vite.config.* file.
+  // Remix.
+  if (
+    Object.keys(packageJson?.dependencies ?? {}).find((dep) =>
+      dep.startsWith("@remix-run/")
+    )
+  ) {
+    type.framework = FRAMEWORKS["remix"]
+    return type
+  }
+
+  // Vite.
+  // Some Remix templates also have a vite.config.* file.
+  // We'll assume that it got caught by the Remix check above.
   if (configFiles.find((file) => file.startsWith("vite.config."))?.length) {
-    // We'll assume that if the project has an app dir, it's a Remix project.
-    // Otherwise, it's a Vite project.
-    // TODO: Maybe check for `@remix-run/react` in package.json?
-    type.framework = isUsingAppDir ? FRAMEWORKS["remix"] : FRAMEWORKS["vite"]
+    type.framework = FRAMEWORKS["vite"]
     return type
   }
 

packages/shadcn/test/fixtures/frameworks/remix-indie-stack/.dockerignore

@@ -0,0 +1,7 @@
+/node_modules
+*.log
+.DS_Store
+.env
+/.cache
+/public/build
+/build

packages/shadcn/test/fixtures/frameworks/remix-indie-stack/.env.example

@@ -0,0 +1,2 @@
+DATABASE_URL="file:./data.db?connection_limit=1"
+SESSION_SECRET="super-duper-s3cret"

packages/shadcn/test/fixtures/frameworks/remix-indie-stack/.eslintrc.js

@@ -0,0 +1,136 @@
+/**
+ * This is intended to be a basic starting point for linting in the Indie Stack.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+        "prettier",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+      },
+      rules: {
+        "react/jsx-no-leaked-render": [
+          "warn",
+          { validStrategies: ["ternary"] },
+        ],
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/stylistic",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+        "prettier",
+      ],
+      rules: {
+        "import/order": [
+          "error",
+          {
+            alphabetize: { caseInsensitive: true, order: "asc" },
+            groups: ["builtin", "external", "internal", "parent", "sibling"],
+            "newlines-between": "always",
+          },
+        ],
+      },
+    },
+
+    // Markdown
+    {
+      files: ["**/*.md"],
+      plugins: ["markdown"],
+      extends: ["plugin:markdown/recommended-legacy", "prettier"],
+    },
+
+    // Jest/Vitest
+    {
+      files: ["**/*.test.{js,jsx,ts,tsx}"],
+      plugins: ["jest", "jest-dom", "testing-library"],
+      extends: [
+        "plugin:jest/recommended",
+        "plugin:jest-dom/recommended",
+        "plugin:testing-library/react",
+        "prettier",
+      ],
+      env: {
+        "jest/globals": true,
+      },
+      settings: {
+        jest: {
+          // we're using vitest which has a very similar API to jest
+          // (so the linting plugins work nicely), but it means we have to explicitly
+          // set the jest version.
+          version: 28,
+        },
+      },
+    },
+
+    // Cypress
+    {
+      files: ["cypress/**/*.ts"],
+      plugins: ["cypress"],
+      extends: ["plugin:cypress/recommended", "prettier"],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.js", "mocks/**/*.js"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

packages/shadcn/test/fixtures/frameworks/remix-indie-stack/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,41 @@
+name: 🐛 Bug Report
+description: Something is wrong with the Stack.
+body:
+  - type: markdown
+    attributes:
+      value: >-
+        Thank you for helping to improve Remix!
+
+        Our bandwidth on maintaining these stacks is limited. As a team, we're
+        currently focusing our efforts on Remix itself. The good news is you can
+        fork and adjust this stack however you'd like and start using it today
+        as a custom stack. Learn more from
+        [the Remix Stacks docs](https://remix.run/stacks).
+
+        If you'd still like to report a bug, please fill out this form. We can't
+        promise a timely response, but hopefully when we have the bandwidth to
+        work on these stacks again we can take a look. Thanks!
+
+  - type: input
+    attributes:
+      label: Have you experienced this bug with the latest version of the template?
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Steps to Reproduce
+      description: Steps to reproduce the behavior.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: A concise description of what you expected to happen.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Actual Behavior
+      description: A concise description of what you're experiencing.
+    validations:
+      required: true

packages/shadcn/test/fixtures/frameworks/remix-indie-stack/.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,21 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Get Help
+    url: https://github.com/remix-run/remix/discussions/new?category=q-a
+    about:
+      If you can't get something to work the way you expect, open a question in
+      the Remix discussions.
+  - name: Feature Request
+    url: https://github.com/remix-run/remix/discussions/new?category=ideas
+    about:
+      We appreciate you taking the time to improve Remix with your ideas, but we
+      use the Remix Discussions for this instead of the issues tab 🙂.
+  - name: 💬 Remix Discord Channel
+    url: https://rmx.as/discord
+    about: Interact with other people using Remix 💿
+  - name: 💬 New Updates (Twitter)
+    url: https://twitter.com/remix_run
+    about: Stay up to date with Remix news on twitter
+  - name: 🍿 Remix YouTube Channel
+    url: https://rmx.as/youtube
+    about: Are you a tech lead or wanting to learn more about Remix in depth? Checkout the Remix YouTube Channel

packages/shadcn/test/fixtures/frameworks/remix-indie-stack/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,14 @@
+<!--
+
+👋 Hey, thanks for your interest in contributing to Remix!
+
+Our bandwidth on maintaining these stacks is limited. As a team, we're currently
+focusing our efforts on Remix itself. The good news is you can fork and adjust
+this stack however you'd like and start using it today as a custom stack. Learn
+more from [the Remix Stacks docs](https://remix.run/stacks).
+
+You're still welcome to make a PR. We can't promise a timely response, but
+hopefully when we have the bandwidth to work on these stacks again we can take
+a look. Thanks!
+
+-->

packages/shadcn/test/fixtures/frameworks/remix-indie-stack/.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: daily