@stackshift-ui/scripts 1.0.0

package/rebrander.js

@@ -0,0 +1,165 @@
+const fs = require("fs");
+const path = require("path");
+const { packageName, owner, repo, title } = require("./rebrand.config.json");
+const packageJSON = require("../lib/package.json");
+
+const rootDir = process.cwd();
+const oldPkgName = packageJSON.name;
+const [oldOwner, oldRepo] = packageJSON.repository.split(":")[1].split("/");
+
+// Rebrand lib packageJSON
+packageJSON.name = packageName;
+packageJSON.description = "";
+packageJSON.version = "0.0.0";
+packageJSON.repository = `github:${owner}/${repo}`;
+packageJSON.funding.pop();
+packageJSON.bugs = `https://github.com/${owner}/${repo}/issues`;
+packageJSON.homepage = `https://github.com/${owner}/${repo}/#readme`;
+packageJSON.funding.unshift({
+  type: "github",
+  url: `https://github.com/sponsors/${owner}`,
+});
+packageJSON.keywords = packageJSON.keywords.slice(2);
+
+fs.writeFileSync(
+  path.resolve(rootDir, "lib", "package.json"),
+  JSON.stringify(packageJSON, null, 2),
+);
+
+const updatePkgAndRemoveChangelogs = dir => {
+  // update package.json for packages and examples
+  const pkgPath = path.resolve(dir, "package.json");
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+  pkg.version = "0.0.0";
+  if (pkg.dependencies?.[oldPkgName]) {
+    pkg.dependencies[oldPkgName] = "latest";
+    pkg.dependencies[packageJSON.name] = "workspace:*";
+  } else if (pkg.devDependencies?.[oldPkgName]) {
+    pkg.devDependencies[oldPkgName] = "latest";
+    pkg.dependencies[packageJSON.name] = "workspace:*";
+  }
+
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+
+  // Delete old changelogs
+  try {
+    fs.unlinkSync(path.resolve(dir, "CHANGELOG.md"));
+  } catch {
+    /* empty */
+  }
+};
+
+["examples", "packages"].forEach(dir => {
+  fs.readdirSync(path.resolve(rootDir, dir)).forEach(f =>
+    updatePkgAndRemoveChangelogs(path.resolve(rootDir, dir, f)),
+  );
+});
+
+try {
+  fs.unlinkSync(path.resolve(rootDir, "lib", "CHANGELOG.md"));
+} catch {
+  /* empty */
+}
+
+// Update README
+const readme = fs
+  .readFileSync(path.resolve(rootDir, "lib", "README.md"), "utf-8")
+  .replace(new RegExp(oldPkgName, "g"), packageName)
+  .replace(new RegExp(oldOwner, "g"), owner)
+  .replace(new RegExp(oldRepo, "g"), repo)
+  .replace(new RegExp(oldPkgName.replace("-", " "), "ig"), title)
+  .replace(/> This package also.*[^\n]/, "");
+fs.writeFileSync(path.resolve(rootDir, "README.md"), readme);
+fs.writeFileSync(path.resolve(rootDir, "lib", "README.md"), readme);
+
+// Update page title
+const pageFilePath = path.resolve(rootDir, "examples", "nextjs", "src", "app", "page.tsx");
+const pageCode = fs.readFileSync(pageFilePath, "utf-8").replace("React 18 Loaders", title);
+fs.writeFileSync(pageFilePath, pageCode);
+
+// Update TODO.md
+const touchupTodo = content =>
+  content
+    .replace(
+      "[repo settings]",
+      `[repo settings](https://github.com/${owner}/${repo}/settings/pages)`,
+    )
+    .replace(
+      "[repository secret]",
+      `[repository secret]((https://github.com/${owner}/${repo}/settings/secrets/actions))`,
+    )
+    .replace(
+      "[private vulnerability reporting]",
+      `[private vulnerability reporting](https://github.com/${owner}/${repo}/security)`,
+    )
+    .replace("- [ ] Create a new GitHub repository", "- [x] Create a new GitHub repository");
+
+const todoPath = path.resolve(rootDir, "TODO.md");
+fs.writeFileSync(todoPath, touchupTodo(fs.readFileSync(todoPath, "utf-8")));
+
+const tkbPath = path.resolve(rootDir, ".tkb");
+fs.writeFileSync(tkbPath, touchupTodo(fs.readFileSync(tkbPath, "utf-8")));
+fs.renameSync(tkbPath, tkbPath);
+
+// Update Funding
+const fundingPath = path.resolve(rootDir, ".github", "FUNDING.yml");
+fs.writeFileSync(
+  fundingPath,
+  fs
+    .readFileSync(fundingPath, "utf-8")
+    .replace("github: [mayank1513]", `github: [${owner}, mayank1513]`),
+);
+
+// Update workflows
+const workflowsPath = path.resolve(rootDir, ".github", "workflows");
+/** Update publish and manual-publish workflows */
+const updatePublishFlow = name => {
+  const publishWorkflowPath = path.resolve(workflowsPath, name);
+  const publishWorkflow = fs
+    .readFileSync(publishWorkflowPath, "utf-8")
+    .replace("# - name", "- name")
+    .replace("# run", "  run")
+    .replace(oldOwner, owner);
+  fs.writeFileSync(publishWorkflowPath, publishWorkflow);
+};
+
+updatePublishFlow("publish.yml");
+updatePublishFlow("manual-publish.yml");
+
+try {
+  fs.unlinkSync(path.resolve(workflowsPath, "setup.yml"));
+} catch {
+  // empty
+}
+const docsWorkflowPath = path.resolve(workflowsPath, "docs.yml");
+fs.writeFileSync(
+  docsWorkflowPath,
+  fs.readFileSync(docsWorkflowPath, "utf-8").replace(oldOwner, owner),
+);
+
+// Update SECURITY.md
+const secFile = path.resolve(rootDir, "SECURITY.md");
+fs.writeFileSync(
+  secFile,
+  fs.readFileSync(secFile, "utf-8").replace(`${oldOwner}/${oldRepo}`, `${owner}/${repo}`),
+);
+// clean up
+const rootPackageJSON = require("../package.json");
+const { execSync } = require("child_process");
+delete rootPackageJSON.scripts.postinstall;
+try {
+  fs.writeFileSync(path.resolve(rootDir, "package.json"), JSON.stringify(rootPackageJSON, null, 2));
+} catch (e) {
+  console.error(e);
+}
+
+// update typedoc config
+execSync(`sed -i -e 's/name:.*/name: "${title.replace(/\//g, "\\/")}",/' typedoc.config.js`);
+
+// reinstall dependencies --> this will update the pnpm-lock file as well which we need to add to commit
+execSync("pnpm i");
+
+// clean lib/src and craete commit
+execSync(
+  'rm -rf ./lib/src/ && git add . && git commit -m "Rebrand 💖 <a href="https://stackshift-ui.webriq.com" target="_blank">WebriQ</a> [skip ci]" && turbo telemetry disable',
+);

package/templates/component/.eslintrc.js.hbs

@@ -0,0 +1,8 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: ["@stackshift-ui/eslint-config/react.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

package/templates/component/README.md.hbs

@@ -0,0 +1,24 @@
+# @stackshift-ui/{{kebabCase componentName}}
+
+{{description}}
+
+Please refer to the [documentation](https://stackshift-ui.webriq.com/docs/components/{{kebabCase componentName}}) for more information.
+
+## Installation
+
+```sh
+yarn add @stackshift-ui/{{kebabCase componentName}}
+# or
+npm i @stackshift-ui/{{kebabCase componentName}}
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/stackshift-ui/components/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/stackshift-ui/components/master/LICENSE).

package/templates/component/package.json.hbs

@@ -0,0 +1,59 @@
+{
+  "name": "@stackshift-ui/{{kebabCase componentName}}",
+  "description": "{{ description }}",
+  "version": "0.0.0",
+  "private": false,
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "author": "WebriQ <info@webriq.com>",
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig-build.json",
+    "clean": "rm -rf dist",
+    "dev": "tsup --watch && tsc -p tsconfig-build.json -w",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "test": "vitest run --coverage"
+  },
+  "devDependencies": {
+    "@stackshift-ui/eslint-config": "workspace:*",
+    "@stackshift-ui/typescript-config": "workspace:*",
+    "@testing-library/react": "^16.0.1",
+    "@types/node": "^22.7.0",
+    "@types/react": "^18.3.9",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.1.1",
+    "esbuild-plugin-rdi": "^0.0.0",
+    "esbuild-plugin-react18": "^0.2.5",
+    "esbuild-plugin-react18-css": "^0.0.4",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.2",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "^2.1.1"
+  },
+  "dependencies": {
+    "@stackshift-ui/scripts": "workspace:*",
+    "@stackshift-ui/system": "workspace:*",
+    "classnames": "^2.5.1"
+  },
+  "peerDependencies": {
+    "@types/react": "16.8 - 19",
+    "next": "10 - 14",
+    "react": "16.8 - 19",
+    "react-dom": "16.8 - 19",
+    "@stackshift-ui/system": ">=0.0.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  }
+}

package/templates/component/src/index.ts.hbs

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./{{kebabCase componentName}}";

package/templates/component/src/{{componentName}}.test.tsx.hbs

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { {{capitalize componentName}} } from "./{{kebabCase componentName}}";
+
+describe.concurrent("{{kebabCase componentName}}", () => {
+	afterEach(cleanup);
+
+	test("Dummy test - test if renders without errors", ({ expect }) => {
+		const clx = "my-class";
+		render(<{{capitalize componentName}} className={clx} />);
+		expect(screen.getByTestId("{ kebabCase name }}").classList).toContain(clx);
+	});
+});

package/templates/component/src/{{componentName}}.tsx.hbs

@@ -0,0 +1,27 @@
+import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+import type { ElementType, HTMLProps, ReactNode } from "react";
+
+export interface {{capitalize componentName}}Props extends Omit<HTMLProps<HTMLElement>, "as"> {
+  children?: ReactNode;
+  className?: string;
+  as?: ElementType;
+}
+
+const displayName = "{{capitalize componentName}}";
+
+export const {{capitalize componentName}}: React.FC<{{capitalize componentName}}Props> = ({
+  children,
+  className,
+  as,
+  ...props
+}) => {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component as={as} className={className} {...props} data-testid={displayName}>
+      {children}
+    </Component>
+  );
+};
+
+{{capitalize componentName}}.displayName = displayName;

package/templates/component/tsconfig-build.json.hbs

@@ -0,0 +1,12 @@
+{
+  // using tsc for type declarations as "Note that declaration files generated by any tool other than tsc are not guaranteed to be error-free, so it's a good idea to test the output with tsc" - https://tsup.egoist.dev/#generate-declaration-file
+  "extends": "@stackshift-ui/typescript-config/react-library.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "declarationMap": false
+  },
+  "include": ["src"],
+  "exclude": ["dist", "node_modules", "**/*.test.*", "**/*.spec.*"]
+}

package/templates/component/tsconfig.json.hbs

@@ -0,0 +1,9 @@
+{
+  "extends": "@stackshift-ui/typescript-config/react-library.json",
+  "compilerOptions": {
+    "lib": ["dom", "ES2015"],
+    "types": ["vitest", "node"]
+  },
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/templates/component/tsup.config.ts.hbs

@@ -0,0 +1,24 @@
+import { defineConfig, type Options } from "tsup";
+import react18Plugin from "esbuild-plugin-react18";
+import cssPlugin from "esbuild-plugin-react18-css";
+import { rdiPlugin } from "esbuild-plugin-rdi";
+
+export default defineConfig(
+  (options: Options) =>
+    ({
+      format: ["cjs", "esm"],
+      target: "es2019",
+      entry: ["./src/**"],
+      sourcemap: false,
+      clean: !options.watch,
+      bundle: true,
+      minify: !options.watch,
+      esbuildPlugins: [
+        react18Plugin(),
+        cssPlugin({ generateScopedName: "[folder]__[local]" }),
+        rdiPlugin(),
+      ],
+      external: ["react"],
+      ...options,
+    }) as Options,
+);

package/templates/component/turbo.json.hbs

@@ -0,0 +1,9 @@
+{
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "outputs": ["dist/**"],
+      "dependsOn": ["^build"]
+    }
+  }
+}

package/templates/component/vitest.config.mts.hbs

@@ -0,0 +1,18 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), tsconfigPaths()],
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: [],
+    coverage: {
+      include: ["src/**"],
+      exclude: ["src/**/index.ts", "src/**/declaration.d.ts"],
+      reporter: ["text", "json", "clover", "html"],
+    },
+  },
+});

package/templates/component.hbs

@@ -0,0 +1,25 @@
+import { HTMLProps, ReactNode } from "react";
+import styles from "./{{kebabCase componentName}}.module.scss";
+
+export interface {{capitalize componentName}}Props extends HTMLProps<HTMLDivElement> {
+	children?: ReactNode;
+}
+
+/**
+ * {{ description }}
+ *
+ * @example
+ * ```tsx
+ * <{{capitalize componentName}} />
+ * ```
+ * 
+ * @source - Source code
+ */
+export const {{capitalize componentName}} = ({ children, ...props }: {{capitalize componentName}}Props) => {
+  const className = [props.className, styles["{{kebabCase componentName}}"]].filter(Boolean).join(" ");
+	return (
+		<div {...props} className={className} data-testid="{{kebabCase componentName}}">
+			{children}
+		</div>
+	);
+}

package/templates/component.module.hbs

@@ -0,0 +1,3 @@
+.{{kebabCase componentName}} {
+  /* create your container styles here */
+}

package/templates/component.test.hbs

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { {{capitalize componentName}} } from "./{{kebabCase componentName}}";
+
+describe.concurrent("{{kebabCase componentName}}", () => {
+	afterEach(cleanup);
+
+	test("Dummy test - test if renders without errors", ({ expect }) => {
+		const clx = "my-class";
+		render(<{{capitalize componentName}} className={clx} />);
+		expect(screen.getByTestId("{{kebabCase componentName}}").classList).toContain(clx);
+	});
+});

package/templates/hook.hbs

@@ -0,0 +1,24 @@
+import { useState } from "react";
+
+export interface {{capitalize componentName}}Options {
+  /** this is a dummy option */
+  dummy?: string;
+}
+
+/**
+ * {{ description }}
+ *
+ * @example
+ * ```tsx
+ * const [] = {{ camelCase name }}(options);
+ * ```
+ * 
+ * @source - Source code
+ */
+
+export const {{ camelCase name }} = (options?: {{capitalize componentName}}Options) => {
+  const [value, setValue] = useState(0);
+  return {
+    value, setValue
+  }
+}

package/templates/hook.test.hbs

@@ -0,0 +1,14 @@
+import { cleanup, renderHook, act } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { {{ camelCase name }} } from "./{{kebabCase componentName}}";
+
+describe.concurrent("{{ camelCase name }}", () => {
+	afterEach(cleanup);
+
+	test("Dummy test - test if renders without errors", ({ expect }) => {
+		const { result } = renderHook(() => {{ camelCase name }}());
+    act(() => result.current.setValue(10));
+    expect(result.current.value).toBe(10);
+	});
+});
+

package/update-pm.js

@@ -0,0 +1,18 @@
+const { execSync } = require("child_process");
+const fs = require("fs");
+const path = require("path");
+const packageJSON = require("../package.json");
+
+const PNPM_VERSION = execSync("pnpm -v").toString().trim();
+packageJSON.packageManager = `pnpm@${PNPM_VERSION}`;
+
+fs.writeFileSync(path.resolve(__dirname, "../package.json"), JSON.stringify(packageJSON, null, 2));
+
+// commit to repo
+try {
+  execSync(
+    "git add ./package.json && git commit -m 'chore: automated update of package.json with pnpm version'",
+  );
+} catch {
+  // no changesets to be applied
+}

package/update-security-md.js

@@ -0,0 +1,15 @@
+const { execSync } = require("child_process");
+
+module.exports = (newMajor_minor, oldMajor_minor) => {
+  /** Update SECURITY.md */
+  execSync(
+    `sed -i -e "s/.*| :white_check_mark:.*/| ${newMajor_minor}.x   | :white_check_mark: |/" SECURITY.md`,
+  );
+  execSync(
+    `sed -i -e "s/.*| :warning:.*/| ${oldMajor_minor}.x   | :warning:          |/" SECURITY.md`,
+  );
+  execSync(`sed -i -e "s/.*| :x:.*/| < ${oldMajor_minor}   | :x:                |/" SECURITY.md`);
+  execSync(
+    `git add SECURITY.md && git commit -m 'Update SECURITY.md [skip ci]' && git push origin ${process.env.BRANCH}`,
+  );
+};