dappbooster 2.0.0 → 3.0.0

package/dist/import/components/steps/OptionalPackages.d.ts

@@ -0,0 +1,15 @@
+import { type FC } from 'react';
+import type { InstallationType, MultiSelectItem } from '../../types/types.js';
+interface Props {
+    installation: InstallationType | undefined;
+    onCompletion: () => void;
+    onSubmit: (selectedItems: Array<MultiSelectItem>) => void;
+}
+/**
+ * Step for selecting optional packages. Skipped if installation type is 'full'.
+ * @param onCompletion
+ * @param onSubmit
+ * @param installation
+ */
+declare const OptionalPackages: FC<Props>;
+export default OptionalPackages;

package/dist/import/components/steps/OptionalPackages.js

@@ -0,0 +1,51 @@
+import { Text } from 'ink';
+import React, { useState, useEffect } from 'react';
+import MultiSelect from '../Multiselect/index.js';
+const customPackages = [
+    {
+        label: 'Component Demos',
+        value: 'demo',
+    },
+    {
+        label: 'Subgraph support',
+        value: 'subgraph',
+    },
+    {
+        label: 'Typedoc documentation support',
+        value: 'typedoc',
+    },
+    {
+        label: 'Vocs documentation support',
+        value: 'vocs',
+    },
+    {
+        label: 'Husky Git hooks support',
+        value: 'husky',
+    },
+];
+/**
+ * Step for selecting optional packages. Skipped if installation type is 'full'.
+ * @param onCompletion
+ * @param onSubmit
+ * @param installation
+ */
+const OptionalPackages = ({ onCompletion, onSubmit, installation }) => {
+    const [isFocused, setIsFocused] = useState(true);
+    const skip = installation === 'full';
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Run this only once
+    useEffect(() => {
+        // full installation, do nothing
+        if (skip) {
+            onCompletion();
+        }
+    }, []);
+    const onHandleSubmit = (selectedItems) => {
+        onSubmit(selectedItems);
+        setIsFocused(false);
+        onCompletion();
+    };
+    return skip ? null : (React.createElement(React.Fragment, null,
+        React.createElement(Text, { color: 'whiteBright' }, "Choose optional packages"),
+        React.createElement(MultiSelect, { defaultSelected: customPackages, focus: isFocused, items: customPackages, onSubmit: onHandleSubmit })));
+};
+export default OptionalPackages;

package/dist/import/components/steps/PostInstall.d.ts

@@ -0,0 +1,16 @@
+import { type FC } from 'react';
+import type { InstallationType, MultiSelectItem } from '../../types/types.js';
+interface Props {
+    installationConfig: {
+        installationType: InstallationType | undefined;
+        selectedFeatures?: Array<MultiSelectItem>;
+    };
+    projectName: string;
+}
+/**
+ * Component to ask for the project name.
+ * @param selectedFeatures
+ * @param projectName
+ */
+declare const PostInstall: FC<Props>;
+export default PostInstall;

package/dist/import/components/steps/PostInstall.js

@@ -0,0 +1,79 @@
+import figures from 'figures';
+import { Box, Text } from 'ink';
+import Link from 'ink-link';
+import React from 'react';
+import { featureSelected } from '../../utils/utils.js';
+import Divider from '../Divider.js';
+const SubgraphWarningMessage = () => (React.createElement(Box, { flexDirection: 'column', rowGap: 1 },
+    React.createElement(Box, { alignItems: 'center', borderColor: 'yellow', borderStyle: 'bold', flexDirection: 'column', justifyContent: 'center', padding: 1 },
+        React.createElement(Text, { color: 'yellow' },
+            figures.warning,
+            figures.warning,
+            " ",
+            React.createElement(Text, { bold: true }, "WARNING:"),
+            " You ",
+            React.createElement(Text, { bold: true }, "MUST"),
+            " finish the subgraph's configuration manually ",
+            figures.warning,
+            figures.warning)),
+    React.createElement(Text, { bold: true }, "Follow these steps:"),
+    React.createElement(Box, { flexDirection: 'column' },
+        React.createElement(Text, null,
+            "1- Provide your own API key for ",
+            React.createElement(Text, { bold: true }, "PUBLIC_SUBGRAPHS_API_KEY"),
+            " in",
+            ' ',
+            React.createElement(Text, { bold: true }, ".env.local"),
+            " You can get one at",
+            ' ',
+            React.createElement(Link, { url: "https://thegraph.com/studio/apikeys" }, "https://thegraph.com/studio/apikeys")),
+        React.createElement(Text, null,
+            "2- After the API key is correctly configured, run ",
+            React.createElement(Text, { bold: true }, "pnpm subgraph-codegen"),
+            " in your console from the project's folder")),
+    React.createElement(Text, null,
+        "More configuration info in",
+        ' ',
+        React.createElement(Link, { url: 'https://docs.dappbooster.dev/introduction/getting-started' }, "the docs"),
+        "."),
+    React.createElement(Text, { color: 'yellow', bold: true },
+        figures.info,
+        " Only after you have followed the previous steps you may proceed.")));
+const PostInstallMessage = ({ projectName }) => (React.createElement(Box, { flexDirection: 'column', rowGap: 1, paddingBottom: 2 },
+    React.createElement(Text, { bold: true }, "To start development on your project:"),
+    React.createElement(Box, { flexDirection: 'column' },
+        React.createElement(Text, null,
+            "1- Move into the project's folder with ",
+            React.createElement(Text, { bold: true },
+                "cd ",
+                projectName)),
+        React.createElement(Text, null,
+            "2- Start the development server with ",
+            React.createElement(Text, { bold: true }, "pnpm dev"))),
+    React.createElement(Text, { bold: true }, "More info:"),
+    React.createElement(Box, { flexDirection: 'column' },
+        React.createElement(Text, null,
+            "- Check out ",
+            React.createElement(Text, { bold: true }, ".env.local"),
+            " for more configurations."),
+        React.createElement(Text, null,
+            "- Read the docs at",
+            ' ',
+            React.createElement(Link, { url: "https://docs.dappbooster.dev" }, "https://docs.dappbooster.dev"),
+            " to know more about ",
+            React.createElement(Text, { bold: true }, "dAppBooster")))));
+/**
+ * Component to ask for the project name.
+ * @param selectedFeatures
+ * @param projectName
+ */
+const PostInstall = ({ installationConfig, projectName }) => {
+    const { selectedFeatures, installationType } = installationConfig;
+    const subgraphSupport = featureSelected('subgraph', selectedFeatures);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Divider, { title: 'Post-install instructions' }),
+        React.createElement(Box, { flexDirection: 'column', rowGap: 2 },
+            (subgraphSupport || installationType === 'full') && React.createElement(SubgraphWarningMessage, null),
+            React.createElement(PostInstallMessage, { projectName: projectName }))));
+};
+export default PostInstall;

package/dist/import/components/steps/ProjectName.d.ts

@@ -0,0 +1,14 @@
+import { type FC } from 'react';
+interface Props {
+    onCompletion: () => void;
+    onSubmit: (value: string) => void;
+    projectName: string;
+}
+/**
+ * Component to ask for the project name.
+ * @param projectName
+ * @param onSubmit
+ * @param onCompletion
+ */
+declare const ProjectName: FC<Props>;
+export default ProjectName;

package/dist/import/components/steps/ProjectName.js

@@ -0,0 +1,25 @@
+import React, { useMemo, useCallback } from 'react';
+import { isValidName } from '../../utils/utils.js';
+import Ask from '../Ask.js';
+/**
+ * Component to ask for the project name.
+ * @param projectName
+ * @param onSubmit
+ * @param onCompletion
+ */
+const ProjectName = ({ projectName, onSubmit, onCompletion }) => {
+    const validateName = useCallback((name) => {
+        if (name.length > 0 && !isValidName(name))
+            return 'Not a valid name!';
+        return '';
+    }, []);
+    const errorMessage = useMemo(() => validateName(projectName), [projectName, validateName]);
+    const handleSubmit = useCallback((name) => {
+        onSubmit(name);
+        if (isValidName(name)) {
+            onCompletion();
+        }
+    }, [onSubmit, onCompletion]);
+    return (React.createElement(Ask, { answer: projectName, errorMessage: errorMessage, onSubmit: handleSubmit, question: 'Project name', tip: 'Letters (a–z, A–Z), numbers (0–9), and underscores (_) are allowed.' }));
+};
+export default ProjectName;

package/dist/import/constants/config.d.ts

@@ -0,0 +1,4 @@
+export declare const repoUrl = "https://github.com/BootNodeDev/dAppBooster.git";
+export declare const featurePackages: {
+    [key: string]: string[];
+};

package/dist/import/constants/config.js

@@ -0,0 +1,18 @@
+export const repoUrl = 'https://github.com/BootNodeDev/dAppBooster.git';
+export const featurePackages = {
+    subgraph: [
+        '@bootnodedev/db-subgraph',
+        'graphql graphql-request',
+        '@graphql-codegen/cli',
+        '@graphql-typed-document-node/core',
+    ],
+    typedoc: [
+        'typedoc',
+        'typedoc-github-theme',
+        'typedoc-plugin-inline-sources',
+        'typedoc-plugin-missing-exports',
+        'typedoc-plugin-rename-defaults',
+    ],
+    vocs: ['vocs'],
+    husky: ['husky', 'lint-staged', '@commitlint/cli', '@commitlint/config-conventional'],
+};

package/dist/import/types/types.d.ts

@@ -0,0 +1,10 @@
+export type SelectItem = {
+    label: string;
+    value: string;
+};
+export type MultiSelectItem = SelectItem;
+export type InstallationType = 'full' | 'custom';
+export type InstallationSelectItem = {
+    label: string;
+    value: InstallationType;
+};

package/dist/import/types/types.js

@@ -0,0 +1 @@
+export {};

package/dist/import/utils/utils.d.ts

@@ -0,0 +1,32 @@
+import type { MultiSelectItem } from '../types/types.js';
+export declare function getProjectFolder(projectName: string): string;
+/**
+ * Utility functions for import process
+ * @param name
+ */
+export declare function isValidName(name: string): boolean;
+/**
+ * Checks if the answer is confirmed
+ * @param answer
+ * @param errorMessage
+ */
+export declare function isAnswerConfirmed(answer?: string, errorMessage?: string): boolean;
+/**
+ * Checks if the step can be shown
+ * @param currentStep
+ * @param stepToShow
+ */
+export declare function canShowStep(currentStep: number, stepToShow: number): boolean;
+/**
+ * Returns true a feature is selected in the features list
+ * @param feature
+ * @param featuresList
+ */
+export declare function featureSelected(feature: string, featuresList: Array<MultiSelectItem> | undefined): boolean;
+/**
+ * Returns the packages to remove checking first if the feature is selected or not.
+ * Selected features are kept, unselected features are removed.
+ * @param feature
+ * @param featuresList
+ */
+export declare function getPackages(feature: string, featuresList: Array<MultiSelectItem> | undefined): string[];

package/dist/import/utils/utils.js

@@ -0,0 +1,47 @@
+import { join } from 'node:path';
+import process from 'node:process';
+import { featurePackages } from '../constants/config.js';
+export function getProjectFolder(projectName) {
+    return join(process.cwd(), projectName);
+}
+/**
+ * Utility functions for import process
+ * @param name
+ */
+export function isValidName(name) {
+    return /^[a-zA-Z0-9_]+$/.test(name);
+}
+/**
+ * Checks if the answer is confirmed
+ * @param answer
+ * @param errorMessage
+ */
+export function isAnswerConfirmed(answer, errorMessage) {
+    return (answer !== '' && answer !== undefined && (errorMessage === '' || errorMessage === undefined));
+}
+/**
+ * Checks if the step can be shown
+ * @param currentStep
+ * @param stepToShow
+ */
+export function canShowStep(currentStep, stepToShow) {
+    return currentStep > stepToShow - 1;
+}
+/**
+ * Returns true a feature is selected in the features list
+ * @param feature
+ * @param featuresList
+ */
+export function featureSelected(feature, featuresList) {
+    return !!featuresList?.find((item) => item.value === feature);
+}
+/**
+ * Returns the packages to remove checking first if the feature is selected or not.
+ * Selected features are kept, unselected features are removed.
+ * @param feature
+ * @param featuresList
+ */
+export function getPackages(feature, featuresList) {
+    const packages = featurePackages[feature];
+    return featureSelected(feature, featuresList) ? [] : packages?.length ? packages : [];
+}

package/package.json

@@ -1,28 +1,39 @@
 {
   "name": "dappbooster",
-  "author": "bootnodedev",
-  "version": "2.0.0",
-  "description": "Script to easily start your project with dAppBooster",
-  "main": "index.js",
+  "version": "3.0.0",
   "license": "MIT",
+  "bin": "dist/cli.js",
+  "type": "module",
   "engines": {
-    "node": ">=20.0.0"
-  },
-  "bin": {
-    "dappbooster": "index.js"
+    "node": ">=20"
   },
-  "type": "module",
+  "files": [
+    "dist"
+  ],
   "dependencies": {
-    "chalk": "^5.3.0"
+    "figures": "^6.1.0",
+    "ink": "^5.2.1",
+    "ink-big-text": "^2.0.0",
+    "ink-divider": "^4.1.1",
+    "ink-gradient": "^3.0.0",
+    "ink-link": "^4.1.0",
+    "ink-select-input": "^6.2.0",
+    "ink-spawn": "^0.1.4",
+    "ink-text-input": "^6.0.0",
+    "react": "^18.3.1"
   },
-  "keywords": [
-    "dappbooster",
-    "bootnode",
-    "cloner",
-    "installer",
-    "dapp"
-  ],
   "devDependencies": {
-    "prettier": "^3.5.3"
+    "@biomejs/biome": "^1.9.4",
+    "@sindresorhus/tsconfig": "^7.0.0",
+    "@types/node": "^22.15.21",
+    "@types/react": "^18.3.22",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.8.3"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "lint": "pnpm biome check",
+    "lint:fix": "pnpm biome check --write"
   }
-}
+}

package/readme.md

@@ -0,0 +1,39 @@
+# dAppBooster installer
+
+An easy way to install and customize [dAppBooster](https://dappbooster.dev/)
+
+## Usage
+
+```shell
+$ pnpm dlx dappbooster
+```
+
+<img src="./demo.svg" width="600">
+
+dAppBooster documentation: https://docs.dappbooster.dev/
+
+## Development
+
+Clone the repo
+
+```shell
+git clone git@github.com:BootNodeDev/dAppBoosterInstallScript.git
+```
+
+Move into the folder you just created and install the dependencies
+
+```shell
+cd dAppBoosterInstallScript
+
+pnpm i
+```
+
+You can run the script by doing
+
+```shell
+$ node cli.js
+```
+
+## Releasing new versions to NPM
+
+New releases are automatically uploaded to NPM using GitHub actions.

package/.nvmrc

@@ -1 +0,0 @@
-20

package/.prettierrc

@@ -1,7 +0,0 @@
-{
-  "bracketSpacing": true,
-  "printWidth": 100,
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "all"
-}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Fernando Greco
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,36 +0,0 @@
-# dAppBooster starter
-
-A script to clone dAppBooster and cleanup the history to freshly start your new project.
-
-Clones the latest tag from https://github.com/BootNodeDev/dAppBooster (so you might not see the last changes in `main`).
-
-## Usage
-
-```shell
-$ pnpm dlx dappbooster <projectName>
-```
-
-## Development
-
-Move into the script's folder and then
-
-```shell
-# Clone the repo
-git clone git@github.com:BootNodeDev/dAppBooster-starter.git
-
-# Install dependencies
-pnpm i
-
-# Move into the script's folder
-cd dAppBooster-starter
-```
-
-The common loop for testing the script looks something like
-
-```shell
-# Test the script, creates a folder called test
-$ node index.js test
-
-# Remove the test directory (ignored in .gitignore)
-$ rm -rf test
-```

package/import/config.js

@@ -1,17 +0,0 @@
-export const repoUrl = 'https://github.com/BootNodeDev/dAppBooster.git'
-export const homeFolder = '/src/components/pageComponents/home'
-
-export const defaultExecOptions = {
-  stdio: 'pipe',
-  shell: true,
-}
-
-export const fileExecOptions = {
-  recursive: true,
-  force: true,
-}
-
-export const installPackageExecOptions = {
-  stdio: 'inherit',
-  shell: true,
-}

package/import/git.js

@@ -1,56 +0,0 @@
-import { execSync } from 'node:child_process'
-import { rmSync } from 'node:fs'
-import os from 'node:os'
-import { join } from 'node:path'
-import chalk from 'chalk'
-import { defaultExecOptions, fileExecOptions, repoUrl } from './config.js'
-
-/**
- * @description Get the latest tag from the repository
- * @returns {string} The latest tag
- */
-function getLatestTag() {
-  const commandSilencer = os.platform() === 'win32' ? '> nul 2>&1' : '> /dev/null 2>&1'
-
-  execSync(`git fetch --tags ${commandSilencer}`, defaultExecOptions)
-
-  const tags = execSync('git tag -l --sort=-v:refname').toString().trim().split('\n')
-
-  return tags[0]
-}
-
-/**
- * @description Clone the repository
- */
-export function cloneRepo(projectName) {
-  const projectDir = join(process.cwd(), projectName)
-
-  try {
-    console.log(`Cloning dAppBooster in ${chalk.bold(`${projectName}`)}`)
-    execSync(`git clone --depth 1 --no-checkout "${repoUrl}" "${projectDir}"`, defaultExecOptions)
-
-    process.chdir(projectDir)
-
-    const latestTag = getLatestTag(defaultExecOptions)
-
-    if (latestTag) {
-      console.log(`Checking out latest tag`)
-      execSync(`git checkout "${latestTag}"`, defaultExecOptions)
-    } else {
-      console.log(`No tags found, checking out ${chalk.bold('main')} branch...`)
-      execSync('git checkout main', defaultExecOptions)
-    }
-
-    // Remove .git, and initialize the repo
-    rmSync(join(projectDir, '.git'), fileExecOptions)
-    execSync('git init', defaultExecOptions)
-
-    console.log(`Repository cloned in ${chalk.bold(projectDir)}`)
-    console.log(`Version: ${latestTag ? chalk.bold(latestTag) : chalk.bold('main')}`)
-  } catch (error) {
-    console.error(`${chalk.bold.red('An error occurred:')}`, error.message)
-    process.exit(1)
-  }
-
-  console.log('\n---\n')
-}