@cedarjs/cli 0.0.4

package/dist/commands/setup/ui/libraries/tailwindcssHandler.js

@@ -0,0 +1,386 @@
+import fs from "node:fs";
+import path from "node:path";
+import { ListrEnquirerPromptAdapter } from "@listr2/prompt-adapter-enquirer";
+import execa from "execa";
+import { Listr } from "listr2";
+import terminalLink from "terminal-link";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+import { errorTelemetry } from "@cedarjs/telemetry";
+import c from "../../../../lib/colors.js";
+import { getPaths, usingVSCode } from "../../../../lib/index.js";
+const tailwindDirectives = [
+  "@tailwind base;",
+  "@tailwind components;",
+  "@tailwind utilities;"
+];
+const tailwindDirectivesExist = (indexCSS) => tailwindDirectives.every(
+  (tailwindDirective) => indexCSS.includes(tailwindDirective)
+);
+const tailwindImportsAndNotes = [
+  "/**",
+  " * START --- SETUP TAILWINDCSS EDIT",
+  " *",
+  " * `yarn rw setup ui tailwindcss` placed these directives here",
+  " * to inject Tailwind's styles into your CSS.",
+  " * For more information, see: https://tailwindcss.com/docs/installation",
+  " */",
+  ...tailwindDirectives,
+  "/**",
+  " * END --- SETUP TAILWINDCSS EDIT",
+  " */\n"
+];
+const recommendedVSCodeExtensions = [
+  "csstools.postcss",
+  "bradlc.vscode-tailwindcss"
+];
+const recommendationTexts = {
+  "csstools.postcss": terminalLink(
+    "PostCSS Language Support",
+    "https://marketplace.visualstudio.com/items?itemName=csstools.postcss"
+  ),
+  "bradlc.vscode-tailwindcss": terminalLink(
+    "Tailwind CSS IntelliSense",
+    "https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss"
+  )
+};
+async function recommendExtensionsToInstall() {
+  if (!usingVSCode()) {
+    return;
+  }
+  let recommendations = [];
+  try {
+    const { stdout } = await execa("code", ["--list-extensions"]);
+    const installedExtensions = stdout.split("\n").map((ext) => ext.trim());
+    recommendations = recommendedVSCodeExtensions.filter(
+      (ext) => !installedExtensions.includes(ext)
+    );
+  } catch {
+    recommendations = recommendedVSCodeExtensions;
+  }
+  if (recommendations.length > 0) {
+    console.log();
+    console.log(
+      c.info(
+        "For the best experience we recommend that you install the following " + (recommendations.length === 1 ? "extension:" : "extensions:")
+      )
+    );
+    recommendations.forEach((extension) => {
+      console.log(c.info("  " + recommendationTexts[extension]));
+    });
+  }
+}
+const handler = async ({ force, install }) => {
+  recordTelemetryAttributes({
+    command: "setup ui tailwindcss",
+    force,
+    install
+  });
+  const rwPaths = getPaths();
+  const projectPackages = ["prettier-plugin-tailwindcss@^0.5.12"];
+  const webWorkspacePackages = [
+    "postcss",
+    "postcss-loader",
+    "tailwindcss@^3.4.17",
+    "autoprefixer"
+  ];
+  const tasks = new Listr(
+    [
+      {
+        title: "Installing project-wide packages...",
+        skip: () => !install,
+        task: () => {
+          return new Listr(
+            [
+              {
+                title: `Install ${projectPackages.join(", ")}`,
+                task: async () => {
+                  const yarnVersion = await execa("yarn", ["--version"]);
+                  const isYarnV1 = yarnVersion.stdout.trim().startsWith("1");
+                  await execa(
+                    "yarn",
+                    [
+                      "add",
+                      "-D",
+                      ...isYarnV1 ? ["-W"] : [],
+                      ...projectPackages
+                    ],
+                    {
+                      cwd: rwPaths.base
+                    }
+                  );
+                }
+              }
+            ],
+            { rendererOptions: { collapseSubtasks: false } }
+          );
+        }
+      },
+      {
+        title: "Installing web side packages...",
+        skip: () => !install,
+        task: () => {
+          return new Listr(
+            [
+              {
+                title: `Install ${webWorkspacePackages.join(", ")}`,
+                task: async () => {
+                  await execa(
+                    "yarn",
+                    ["workspace", "web", "add", "-D", ...webWorkspacePackages],
+                    {
+                      cwd: rwPaths.base
+                    }
+                  );
+                }
+              }
+            ],
+            { rendererOptions: { collapseSubtasks: false } }
+          );
+        }
+      },
+      {
+        title: "Configuring PostCSS...",
+        task: () => {
+          const postCSSConfigPath = rwPaths.web.postcss;
+          if (!force && fs.existsSync(postCSSConfigPath)) {
+            throw new Error(
+              "PostCSS config already exists.\nUse --force to override existing config."
+            );
+          } else {
+            const postCSSConfig = fs.readFileSync(
+              path.join(
+                import.meta.dirname,
+                "../templates/postcss.config.js.template"
+              ),
+              "utf-8"
+            );
+            fs.mkdirSync(path.dirname(postCSSConfigPath), { recursive: true });
+            return fs.writeFileSync(postCSSConfigPath, postCSSConfig);
+          }
+        }
+      },
+      {
+        title: "Initializing Tailwind CSS...",
+        task: async () => {
+          const tailwindConfigPath = path.join(
+            rwPaths.web.config,
+            "tailwind.config.js"
+          );
+          if (fs.existsSync(tailwindConfigPath)) {
+            if (force) {
+              fs.unlinkSync(tailwindConfigPath);
+            } else {
+              throw new Error(
+                "Tailwind CSS config already exists.\nUse --force to override existing config."
+              );
+            }
+          }
+          await execa("yarn", ["tailwindcss", "init", tailwindConfigPath], {
+            cwd: rwPaths.web.base
+          });
+          const tailwindConfig = fs.readFileSync(tailwindConfigPath, "utf-8");
+          const newTailwindConfig = 'const { join } = require("node:path");\n\n' + tailwindConfig.replace(
+            "content: []",
+            "content: [join(__dirname, '../src/**/*.{js,jsx,ts,tsx}')]"
+          );
+          fs.writeFileSync(tailwindConfigPath, newTailwindConfig);
+        }
+      },
+      {
+        title: "Adding directives to index.css...",
+        task: (_ctx, task) => {
+          const INDEX_CSS_PATH = path.join(rwPaths.web.src, "index.css");
+          const indexCSS = fs.readFileSync(INDEX_CSS_PATH, "utf-8");
+          if (tailwindDirectivesExist(indexCSS)) {
+            task.skip("Directives already exist in index.css");
+          } else {
+            const newIndexCSS = tailwindImportsAndNotes.join("\n") + indexCSS;
+            fs.writeFileSync(INDEX_CSS_PATH, newIndexCSS);
+          }
+        }
+      },
+      {
+        title: "Updating 'scaffold.css' to use tailwind classes...",
+        skip: () => {
+          return !fs.existsSync(path.join(rwPaths.web.src, "scaffold.css")) && "No 'scaffold.css' file to update";
+        },
+        task: async (_ctx, task) => {
+          const prompt = task.prompt(ListrEnquirerPromptAdapter);
+          const overrideScaffoldCss = force || await prompt.run({
+            type: "Confirm",
+            message: "Do you want to override your 'scaffold.css' to use tailwind classes?"
+          });
+          if (!overrideScaffoldCss) {
+            return task.skip("Skipping 'scaffold.css' update");
+          }
+          const tailwindScaffoldTemplate = fs.readFileSync(
+            path.join(
+              import.meta.dirname,
+              "..",
+              "..",
+              "..",
+              "generate",
+              "scaffold",
+              "templates",
+              "assets",
+              "scaffold.tailwind.css.template"
+            )
+          );
+          fs.writeFileSync(
+            path.join(rwPaths.web.src, "scaffold.css"),
+            tailwindScaffoldTemplate
+          );
+        }
+      },
+      {
+        title: "Adding recommended VS Code extensions to project settings...",
+        skip: () => !usingVSCode() && "Looks like you're not using VS Code",
+        task: () => {
+          const VS_CODE_EXTENSIONS_PATH = path.join(
+            rwPaths.base,
+            ".vscode/extensions.json"
+          );
+          let originalExtensionsJson = { recommendations: [] };
+          if (fs.existsSync(VS_CODE_EXTENSIONS_PATH)) {
+            const originalExtensionsFile = fs.readFileSync(
+              VS_CODE_EXTENSIONS_PATH,
+              "utf-8"
+            );
+            originalExtensionsJson = JSON.parse(originalExtensionsFile);
+          }
+          const newExtensionsJson = {
+            ...originalExtensionsJson,
+            recommendations: [
+              ...originalExtensionsJson.recommendations,
+              ...recommendedVSCodeExtensions
+            ]
+          };
+          fs.writeFileSync(
+            VS_CODE_EXTENSIONS_PATH,
+            JSON.stringify(newExtensionsJson, null, 2)
+          );
+        }
+      },
+      {
+        title: "Adding tailwind intellisense plugin configuration to VS Code settings...",
+        skip: () => !usingVSCode() && "Looks like you're not using VS Code",
+        task: () => {
+          const VS_CODE_SETTINGS_PATH = path.join(
+            rwPaths.base,
+            ".vscode/settings.json"
+          );
+          const classAttributes = [
+            "class",
+            "className",
+            "activeClassName",
+            "errorClassName"
+          ];
+          let newSettingsJson = {
+            ["tailwindCSS.classAttributes"]: classAttributes
+          };
+          if (fs.existsSync(VS_CODE_SETTINGS_PATH)) {
+            const originalSettingsFile = fs.readFileSync(
+              VS_CODE_SETTINGS_PATH,
+              "utf-8"
+            );
+            const originalSettingsJson = JSON.parse(
+              originalSettingsFile || "{}"
+            );
+            const originalTwClassAttributesJson = originalSettingsJson["tailwindCSS.classAttributes"] || [];
+            const mergedClassAttributes = Array.from(
+              /* @__PURE__ */ new Set([...classAttributes, ...originalTwClassAttributesJson])
+            );
+            newSettingsJson = {
+              ...originalSettingsJson,
+              ["tailwindCSS.classAttributes"]: mergedClassAttributes
+            };
+          }
+          fs.writeFileSync(
+            VS_CODE_SETTINGS_PATH,
+            JSON.stringify(newSettingsJson, null, 2) + "\n"
+          );
+        }
+      },
+      {
+        title: "Adding tailwind config entry in prettier...",
+        task: async (_ctx) => {
+          const prettierConfigPath = path.join(
+            rwPaths.base,
+            "prettier.config.js"
+          );
+          const prettierConfig = fs.readFileSync(prettierConfigPath, "utf-8");
+          const tailwindConfigPath = path.relative(
+            rwPaths.base,
+            path.posix.join(rwPaths.web.config, "tailwind.config.js")
+          ).replaceAll("\\", "/");
+          let newPrettierConfig = prettierConfig;
+          if (newPrettierConfig.includes("tailwindConfig: ")) {
+            if (force) {
+              newPrettierConfig = newPrettierConfig.replace(
+                /tailwindConfig: .*(,)?/,
+                `tailwindConfig: './${tailwindConfigPath}',`
+              );
+            } else {
+              throw new Error(
+                "tailwindConfig setting already exists in prettier configuration.\nUse --force to override existing config."
+              );
+            }
+          } else {
+            newPrettierConfig = newPrettierConfig.replace(
+              /,(\n\s*)(\}\n?)$/,
+              `,
+  tailwindConfig: './${tailwindConfigPath}',$1$2`
+            );
+          }
+          fs.writeFileSync(prettierConfigPath, newPrettierConfig);
+        }
+      },
+      {
+        title: "Adding tailwind prettier plugin...",
+        task: async (_ctx, task) => {
+          const prettierConfigPath = path.join(
+            rwPaths.base,
+            "prettier.config.js"
+          );
+          const prettierConfig = fs.readFileSync(prettierConfigPath, "utf-8");
+          let newPrettierConfig = prettierConfig;
+          if (newPrettierConfig.includes("plugins: [")) {
+            const pluginsMatch = newPrettierConfig.match(
+              /plugins: \[[\sa-z\(\)'\-,]*]/
+            );
+            const matched = pluginsMatch && pluginsMatch[0];
+            if (matched && (matched.includes("'prettier-plugin-tailwindcss'") || matched.includes('"prettier-plugin-tailwindcss"'))) {
+              task.skip(
+                "tailwindcss-plugin-prettier already required in plugins"
+              );
+            } else {
+              newPrettierConfig = newPrettierConfig.replace(
+                /plugins: \[(\n\s+)*/,
+                `plugins: [$'prettier-plugin-tailwindcss',$1`
+              );
+            }
+          } else {
+            newPrettierConfig = newPrettierConfig.replace(
+              /,(\n\s*)(\}\n?)$/,
+              `,
+  plugins: ['prettier-plugin-tailwindcss'],$1$2`
+            );
+          }
+          fs.writeFileSync(prettierConfigPath, newPrettierConfig);
+        }
+      }
+    ],
+    { rendererOptions: { collapseSubtasks: false } }
+  );
+  try {
+    await tasks.run();
+    await recommendExtensionsToInstall();
+  } catch (e) {
+    errorTelemetry(process.argv, e.message);
+    console.error(c.error(e.message));
+    process.exit(e?.exitCode || 1);
+  }
+};
+export {
+  handler
+};

package/dist/commands/setup/ui/templates/chakra.storybook.preview.tsx.template

@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+import { ChakraProvider, extendTheme } from '@chakra-ui/react'
+import type { Preview, StoryFn } from '@storybook/react'
+import theme from 'config/chakra.config'
+
+const extendedTheme = extendTheme(theme)
+
+/** @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#create-a-decorator | Create a decorator} */
+const withChakra = (Story: StoryFn) => (
+  <ChakraProvider theme={extendedTheme}>
+    <Story />
+  </ChakraProvider>
+)
+
+const preview: Preview = {
+  decorators: [withChakra]
+}
+
+export default preview

package/dist/commands/setup/ui/templates/mantine-postcss.config.js.template

@@ -0,0 +1,35 @@
+/**
+ * `postcss-preset-mantine` includes the following PostCSS plugins:
+ * - postcss-nested
+ * - postcss-mixins with Mantine specific mixins
+ * - Custom plugin with em/rem functions
+ * Read more: https://mantine.dev/styles/postcss-preset/
+
+ * `postcss-simple-vars` enables use of SCSS-like variables inside CSS files:
+ * ```postcss
+ * $blue    : #056ef0;
+ * $width-sm: rem(37.5);
+ * $selector: .my-component
+ *
+ * @media (min-width: $width-sm) {
+ *   $selector {
+ *     background: $blue;
+ *   }
+ * }
+ * ```
+ * Read more: https://github.com/postcss/postcss-simple-vars
+*/
+module.exports = {
+  plugins: [
+    require('postcss-preset-mantine'),
+    require('postcss-simple-vars')({
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    }),
+  ],
+}

package/dist/commands/setup/ui/templates/mantine.storybook.preview.tsx.template

@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+import { MantineProvider } from '@mantine/core'
+import type { Preview, StoryFn } from '@storybook/react'
+import theme from 'config/mantine.config'
+
+import '@mantine/core/styles.css'
+
+/** @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#create-a-decorator | Create a decorator} */
+const withMantine = (Story: StoryFn) => (
+  <MantineProvider theme={theme}>
+    <Story />
+  </MantineProvider>
+)
+
+const preview: Preview = {
+  decorators: [withMantine]
+}

package/dist/commands/setup/ui/templates/postcss.config.js.template

@@ -0,0 +1,9 @@
+const path = require('path')
+
+module.exports = {
+  plugins: [
+    require('tailwindcss/nesting'),
+    require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')),
+    require('autoprefixer'),
+  ],
+}

package/dist/commands/setup/ui/ui.js

@@ -0,0 +1,17 @@
+import terminalLink from "terminal-link";
+import * as libraryChakraUi from "./libraries/chakra-ui.js";
+import * as libraryMantine from "./libraries/mantine.js";
+import * as libraryTailwindCss from "./libraries/tailwindcss.js";
+const command = "ui <library>";
+const description = "Set up a UI design or style library";
+const builder = (yargs) => yargs.command(libraryChakraUi).command(libraryMantine).command(libraryTailwindCss).demandCommand().epilogue(
+  `Also see the ${terminalLink(
+    "Redwood CLI Reference",
+    "https://redwoodjs.com/docs/cli-commands#setup-ui"
+  )}`
+);
+export {
+  builder,
+  command,
+  description
+};

package/dist/commands/setup/uploads/dbCodemod.js

@@ -0,0 +1,28 @@
+import j from "jscodeshift";
+function transform(fileInfo) {
+  const root = j(fileInfo.source);
+  const imports = root.find(j.ImportDeclaration);
+  imports.at(-1).insertAfter(
+    j.importDeclaration(
+      [j.importSpecifier(j.identifier("storagePrismaExtension"))],
+      j.literal("./uploads.js")
+    )
+  );
+  root.find(j.VariableDeclaration, { declarations: [{ id: { name: "db" } }] }).forEach((path) => {
+    const dbDeclaration = path.node.declarations[0];
+    if (j.VariableDeclarator.check(dbDeclaration) && j.NewExpression.check(dbDeclaration.init)) {
+      throw new Error("RW_CODEMOD_ERR_OLD_FORMAT");
+    }
+    if (j.VariableDeclarator.check(dbDeclaration) && j.Expression.check(dbDeclaration.init)) {
+      const newInit = j.callExpression(
+        j.memberExpression(dbDeclaration.init, j.identifier("$extends")),
+        [j.identifier("storagePrismaExtension")]
+      );
+      dbDeclaration.init = newInit;
+    }
+  });
+  return root.toSource();
+}
+export {
+  transform as default
+};

package/dist/commands/setup/uploads/templates/signedUrl.ts.template

@@ -0,0 +1,21 @@
+import type { APIGatewayEvent, Context } from 'aws-lambda'
+
+import type { SignatureValidationArgs } from '@cedarjs/storage/UrlSigner'
+
+import { urlSigner, fsStorage } from 'src/lib/uploads'
+
+export const handler = async (event: APIGatewayEvent, _context: Context) => {
+  const fileToReturn = urlSigner.validateSignature(
+    event.queryStringParameters as SignatureValidationArgs
+  )
+
+  const { contents, type } = await fsStorage.read(fileToReturn)
+
+  return {
+    statusCode: 200,
+    headers: {
+      'Content-Type': type,
+    },
+    body: contents,
+  }
+}

package/dist/commands/setup/uploads/templates/srcLibUploads.ts.template

@@ -0,0 +1,25 @@
+import { createUploadsConfig, setupStorage } from '@cedarjs/storage'
+import { FileSystemStorage } from '@cedarjs/storage/FileSystemStorage'
+import { UrlSigner } from '@cedarjs/storage/UrlSigner'
+
+const uploadsConfig = createUploadsConfig({
+  // Configure your fields here
+  // e.g. modelName: { fields: ['fieldWithUpload']}
+})
+
+export const fsStorage = new FileSystemStorage({
+  baseDir: './uploads',
+})
+
+export const urlSigner = new UrlSigner({
+  secret: process.env.UPLOADS_SECRET,
+  endpoint: '/signedUrl',
+})
+
+const { saveFiles, storagePrismaExtension } = setupStorage({
+  uploadsConfig,
+  storageAdapter: fsStorage,
+  urlSigner,
+})
+
+export { saveFiles, storagePrismaExtension }

package/dist/commands/setup/uploads/uploads.js

@@ -0,0 +1,26 @@
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+const command = "uploads";
+const description = "Setup uploads and storage. This will install the required packages and add the required initial configuration to your redwood app.";
+const builder = (yargs) => {
+  yargs.option("force", {
+    alias: "f",
+    default: false,
+    description: "Overwrite existing configuration",
+    type: "boolean"
+  });
+};
+const handler = async (options) => {
+  recordTelemetryAttributes({
+    command: "setup uploads",
+    force: options.force,
+    skipExamples: options.skipExamples
+  });
+  const { handler: handler2 } = await import("./uploadsHandler.js");
+  return handler2(options);
+};
+export {
+  builder,
+  command,
+  description,
+  handler
+};