Mlm creating pushing app

packages/uxpin-merge-cli/.gitignore

@@ -14,6 +14,7 @@
 !/test/resources/repos/.gitkeep
 /reports/*
 !/reports/.gitkeep
+/tmp/**
 
 !/test/resources/configs/*.js
 !/test/resources/components/**/*.js

packages/uxpin-merge-cli/bin/uxpin-integrate-package

@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+
+const program = require('commander');
+const cp = require('child_process');
+const path = require('path');
+const fs = require('fs-extra');
+const pMapSeries = require("p-map-series");
+
+program
+    .option('--token <string>', 'Library token')
+    .option('--packages <string>', 'NPM Package name')
+    .option('--components <string>', 'List of imported components and categories')
+    .option('--css-resources <url>', 'Urls or paths to CSS Styles')
+    .option('--npmrc <string>', 'Content of .npmrc')
+    .option('--uxpin-domain <string>', 'Can be used to set a UXPin private cloud domain. Default: `uxpin.com`');
+
+program.parse(process.argv);
+
+const uxpinMergePath = path.resolve(__dirname, './uxpin-merge');
+const appPath = path.resolve(process.cwd(), program.token);
+const commands = [
+    spawn.bind(spawn, [
+        'create-app',
+        `--packages=${program.packages}`,
+        program.npmrc ? `--npmrc=${program.npmrc}` : '',
+        `--app-name=${program.token}`,
+        `--components=${program.components}`
+    ].filter(Boolean)),
+    spawn.bind(spawn, [
+        'push',
+        '--webpack-config=webpack.config.js',
+        `--disable-version-control`,
+        program.uxpinDomain ? `--uxpin-domain=${program.uxpinDomain}` : '',
+        `--token=${program.token}`,
+        program.cssResources ? `--css-resources=${program.cssResources}` : ''
+    ].filter(Boolean), { cwd: appPath })
+];
+
+async function spawn(args, options = {}) {
+    return new Promise((resolve, reject) => {
+        const child = cp.spawn(uxpinMergePath, args, options);
+
+        child.stdout.on('data', (data) => {
+            console.log(String(data));
+        });
+
+        child.stderr.on('data', function (data) {
+            console.log(String(data));
+        });
+
+        child.on('close', function (code) {
+            if (code !== 0) {
+                reject(`Exited with code  ${code}`);
+                return;
+            }
+            resolve();
+        });
+    });
+}
+
+async function executeCommands() {
+    let exitCode = 0;
+    try {
+        await pMapSeries(commands, (command) => command());
+    } catch (e) {
+        console.error(e);
+        exitCode = 1;
+    } finally {
+        if (fs.pathExistsSync(appPath)) {
+            fs.removeSync(appPath);
+        }
+        process.exit(exitCode);
+    }
+}
+
+executeCommands();

packages/uxpin-merge-cli/bin/uxpin-merge

@@ -31,6 +31,15 @@ program
     .option('--component-path <path>', 'path to a component path, relative to the current working directory')
     .action(() => {});
 
+program
+    .command(Command.CREATE_APP)
+    .description('Create app based on package name')
+    .option('--app-name <string>', 'App name')
+    .option('--components <string>', 'list of imports statements')
+    .option('--packages <string>', 'names and versions of npm packages')
+    .option('--npmrc <string>', 'Content of .npmrc')
+    .action(() => {});
+
 
 program
     .command(Command.PUSH)
@@ -42,6 +51,8 @@ program
     .option('--token <token>', 'auth token for the library. Default: `UXPIN_AUTH_TOKEN` env variable')
     .option('--branch <branch>', 'branch to use when uploading. Default: master')
     .option('--tag <tag>', 'tag this push with a specific name or number. The provided name/number is unique and can be used only once.')
+    .option('--css-resources <string>', 'Attach external css styles to pushed js bundle')
+    .option('--disable-version-control', 'Turn off version control')
     .option('--force', 'ignore the last commit saved in uxpin db and push the library without checking history. It could break old prototypes if components were created before 07.2021')
     .action(() => {});
 

packages/uxpin-merge-cli/package.json

@@ -9,6 +9,7 @@
   },
   "main": "src/index.js",
   "bin": {
+    "uxpin-integrate-package": "bin/uxpin-integrate-package",
     "uxpin-merge": "bin/uxpin-merge"
   },
   "typings": "src/types.d.ts",

packages/uxpin-merge-cli/src/program/args/ProgramArgs.ts

@@ -17,7 +17,10 @@ export interface ConfigEnabledProgramArgs {
   uxpinDomain?: string;
 }
 
+export type WatchProgramArgs = ExperimentProgramArgs;
+
 export type ProgramArgs =
+  | CreateAppProgramArgs
   | DumpProgramArgs
   | ExperimentProgramArgs
   | InitProgramArgs
@@ -66,6 +69,8 @@ export interface PushProgramArgs {
   // https://github.com/UXPin/uxpin-merge-tools/issues/206
   branch?: string;
   tag?: string;
+  disableVersionControl?: boolean;
+  cssResources?: string;
 }
 
 export interface DeleteVersionArgs {
@@ -85,6 +90,14 @@ export interface GeneratePresetsProgramArgs {
   config?: string;
 }
 
+export interface CreateAppProgramArgs {
+  command: Command.CREATE_APP;
+  components?: string;
+  packages: string;
+  appName: string;
+  npmrc?: string;
+}
+
 export interface ServerProgramArgs {
   command: Command.SERVER;
   cwd: string;

packages/uxpin-merge-cli/src/program/args/getProgramArgs.ts

@@ -13,6 +13,12 @@ const defaultArgs: { [key in Command]: ProgramArgs } = {
     config: DEFAULT_CONFIG_PATH,
     cwd: process.cwd(),
   },
+  [Command.CREATE_APP]: {
+    appName: 'react-app',
+    command: Command.CREATE_APP,
+    npmrc: '',
+    packages: '',
+  },
   [Command.DUMP]: {
     command: Command.DUMP,
     config: DEFAULT_CONFIG_PATH,
@@ -63,10 +69,16 @@ const defaultArgs: { [key in Command]: ProgramArgs } = {
 export function getProgramArgs(program: RawProgramArgs): ProgramArgs {
   const command: Command = getCommand(program);
   const cliArgs: ProgramArgs = getCLIArgs(program, command);
-  const configArgs: ConfigEnabledProgramArgs = pickConfigArgs(
-    getConfigPath({ ...defaultArgs[command], ...cliArgs }),
-    command
-  );
+
+  if (command === Command.CREATE_APP) {
+    return {
+      ...defaultArgs[command],
+      ...cliArgs,
+    } as ProgramArgs;
+  }
+
+  const { cwd = '', config = undefined } = { ...defaultArgs[command], ...cliArgs };
+  const configArgs: ConfigEnabledProgramArgs = pickConfigArgs(getConfigPath({ cwd, config }), command);
   return {
     ...defaultArgs[command],
     ...configArgs,

packages/uxpin-merge-cli/src/program/args/providers/paths/__tests__/getConfigPath.test.ts

@@ -11,7 +11,7 @@ describe('getConfigPath', () => {
       };
 
       // then
-      expect(getConfigPath(args as ProgramArgs)).toEqual('/project/root/directory/file.js');
+      expect(getConfigPath({ cwd: args.cwd, config: args.config })).toEqual('/project/root/directory/file.js');
     });
   });
 
@@ -23,6 +23,6 @@ describe('getConfigPath', () => {
     };
 
     // then
-    expect(getConfigPath(args as ProgramArgs)).toEqual('/absolute/directory/file.js');
+    expect(getConfigPath({ cwd: args.cwd, config: args.config })).toEqual('/absolute/directory/file.js');
   });
 });

packages/uxpin-merge-cli/src/program/args/providers/paths/getConfigPath.ts

@@ -1,6 +1,8 @@
 import { resolve } from 'path';
-import { ProgramArgs } from '../../ProgramArgs';
 
-export function getConfigPath({ cwd, config }: ProgramArgs): string {
+export function getConfigPath({ cwd, config }: { cwd: string | undefined; config: string | undefined }): string {
+  if (!cwd) {
+    return '';
+  }
   return resolve(cwd, config || '');
 }

packages/uxpin-merge-cli/src/program/args/providers/paths/getProjectPaths.ts

@@ -1,11 +1,12 @@
 import { ProjectPaths } from '../../../../steps/discovery/paths/ProjectPaths';
-import { ProgramArgs } from '../../ProgramArgs';
+import { CreateAppProgramArgs, ProgramArgs } from '../../ProgramArgs';
 import { getConfigPath } from './getConfigPath';
 import { getProjectRoot } from './getProjectRoot';
 
-export function getProjectPaths(programArgs: ProgramArgs): ProjectPaths {
+export function getProjectPaths(programArgs: Exclude<ProgramArgs, CreateAppProgramArgs>): ProjectPaths {
+  const { cwd, config } = programArgs;
   return {
-    configPath: getConfigPath(programArgs),
+    configPath: getConfigPath({ cwd, config }),
     projectRoot: getProjectRoot(programArgs),
   };
 }

packages/uxpin-merge-cli/src/program/args/providers/paths/getProjectRoot.ts

@@ -1,7 +1,7 @@
 import { isAbsolute, resolve } from 'path';
-import { ProgramArgs } from '../../ProgramArgs';
+import { CreateAppProgramArgs, ProgramArgs } from '../../ProgramArgs';
 
-export function getProjectRoot({ cwd }: Pick<ProgramArgs, 'cwd'>): string {
+export function getProjectRoot({ cwd }: Pick<Exclude<ProgramArgs, CreateAppProgramArgs>, 'cwd'>): string {
   if (isAbsolute(cwd)) {
     return cwd;
   }

packages/uxpin-merge-cli/src/program/args/providers/paths/getTempDirPath.ts

@@ -1,8 +1,8 @@
 import { join } from 'path';
 import { TEMP_DIR_PATH } from '../../../../steps/building/config/getConfig';
-import { ProgramArgs } from '../../ProgramArgs';
+import { CreateAppProgramArgs, ProgramArgs } from '../../ProgramArgs';
 import { getProjectRoot } from './getProjectRoot';
 
-export function getTempDirPath(args: Pick<ProgramArgs, 'cwd'>): string {
+export function getTempDirPath(args: Pick<Exclude<ProgramArgs, CreateAppProgramArgs>, 'cwd'>): string {
   return join(getProjectRoot(args), TEMP_DIR_PATH);
 }

packages/uxpin-merge-cli/src/program/command/Command.ts

@@ -2,6 +2,7 @@ export enum Command {
   DUMP = 'dump',
   EXPERIMENT = 'experiment',
   INIT = 'init',
+  CREATE_APP = 'create-app',
   GENERATE_PRESETS = 'generate-presets',
   PUSH = 'push',
   DELETE_VERSION = 'delete-version',

packages/uxpin-merge-cli/src/program/command/create_app/createApp.ts

@@ -0,0 +1,23 @@
+import { CreateAppProgramArgs } from '../../args/ProgramArgs';
+import { Step } from '../Step';
+import { createAppDirectory } from './steps/createAppDirectory';
+import { createComponentsFiles } from './steps/createComponentsFiles';
+import { createNpmrcFile } from './steps/createNpmrcFile';
+import { createPackageJsonFile } from './steps/createPackageJsonFile';
+import { createUXPinConfigFile } from './steps/createUXPinConfigFile';
+import { createWebpackConfigFile } from './steps/createWebpackConfigFile';
+import { installPackages } from './steps/installPackages';
+import { installPeerDependencies } from './steps/installPeerDependencies';
+
+export function createApp(args: CreateAppProgramArgs): Step[] {
+  return [
+    createAppDirectory(args),
+    createPackageJsonFile(args),
+    createNpmrcFile(args),
+    installPackages(args),
+    installPeerDependencies(args),
+    createComponentsFiles(args),
+    createWebpackConfigFile(args),
+    createUXPinConfigFile(args),
+  ];
+}

packages/uxpin-merge-cli/src/program/command/create_app/steps/createAppDirectory.ts

@@ -0,0 +1,29 @@
+import { mkdir, pathExists } from 'fs-extra';
+import { resolve } from 'path';
+import { printLine, printWarning } from '../../../../utils/console/printLine';
+import { PrintColor } from '../../../../utils/console/PrintOptions';
+import { CreateAppProgramArgs } from '../../../args/ProgramArgs';
+import { Step } from '../../Step';
+
+export let APP_DIRECTORY = '';
+
+export function createAppDirectory(args: CreateAppProgramArgs): Step {
+  return { exec: thunkCreateAppDirectory(args), shouldRun: true };
+}
+
+export function thunkCreateAppDirectory(args: CreateAppProgramArgs): () => Promise<void> {
+  return async () => {
+    if (!args.appName) {
+      throw new Error('🛑 Invalid app name');
+    }
+
+    const appDirectory = resolve(process.cwd(), args.appName);
+    APP_DIRECTORY = appDirectory;
+    if (!(await pathExists(appDirectory))) {
+      await mkdir(appDirectory);
+      printLine(`✅ App directory "${appDirectory}" created`, { color: PrintColor.GREEN });
+    } else {
+      printWarning(`👉 App directory "${appDirectory}" exists`);
+    }
+  };
+}

packages/uxpin-merge-cli/src/program/command/create_app/steps/createComponentsFiles.ts

@@ -0,0 +1,66 @@
+import { mkdir, pathExists } from 'fs-extra';
+import pMapSeries = require('p-map-series');
+import { resolve } from 'path';
+import { printLine } from '../../../../utils/console/printLine';
+import { PrintColor } from '../../../../utils/console/PrintOptions';
+import { writeToFile } from '../../../../utils/fs/writeToFile';
+import { CreateAppProgramArgs } from '../../../args/ProgramArgs';
+import { Step } from '../../Step';
+import { APP_DIRECTORY } from './createAppDirectory';
+
+export function createComponentsFiles(args: CreateAppProgramArgs): Step {
+  return { exec: thunkCreateComponentsFiles(args), shouldRun: true };
+}
+
+const SUFFIX = 'El';
+
+export const components: Array<{ name: string; include: string[] }> = [];
+
+function getComponentContent(name: string, packageName: string): string {
+  const normalizedName: string = name.replace(/\./g, '');
+  return [
+    `import React from 'react';`,
+    `import PropTypes from 'prop-types'`,
+    `const packageData = require('${packageName}') || {};`,
+    `let ${normalizedName}${SUFFIX} = null;`,
+    `try {`,
+    `${normalizedName}${SUFFIX} = packageData.${name} ? packageData.${name} : packageData.default;`,
+    '} catch (e) {}',
+    `const ${normalizedName} = (props) => {`,
+    `const key = (Math.random() + 1).toString(36).substring(3);`,
+    `if (!${normalizedName}${SUFFIX}) return <div class="el-broken" style={{ width: 150, height: 75 }}></div>;`,
+    `return <${normalizedName}${SUFFIX} key={key} {...props} />`,
+    `};`,
+    `export default ${normalizedName};`,
+  ].join('\n');
+}
+
+export function thunkCreateComponentsFiles(args: CreateAppProgramArgs): () => Promise<void> {
+  return async () => {
+    let componentsList: Array<{ categoryName: string; components: Array<{ name: string; packageName: string }> }> = [];
+
+    try {
+      componentsList = JSON.parse(args.components || '');
+    } catch (e) {
+      console.log(e);
+      // do nothing
+    }
+
+    const componentsPath: string = resolve(APP_DIRECTORY, 'components');
+    if (!(await pathExists(componentsPath))) {
+      mkdir(componentsPath);
+    }
+
+    await pMapSeries(componentsList, async (componentData) => {
+      components.push({ name: componentData.categoryName, include: [] });
+      await pMapSeries(componentData.components, async ({ name, packageName }) => {
+        const normalizedName: string = name.replace(/\./g, '');
+        const componentFile = `${componentsPath}/${normalizedName}.jsx`;
+
+        await writeToFile(componentFile, getComponentContent(name, packageName));
+        components[components.length - 1].include.push(`components/${normalizedName}.jsx`);
+        printLine(`✅ File ${componentFile} created`, { color: PrintColor.GREEN });
+      });
+    });
+  };
+}