@shopify/cli-kit 0.0.0-nightly-20230110194301

package/dist/private/node/analytics.d.ts

@@ -0,0 +1,27 @@
+import BaseCommand from '../../public/node/base-command.js';
+import { CommandContent } from '../../public/node/hooks/prerun.js';
+import { Interfaces } from '@oclif/core';
+interface StartOptions {
+    commandContent: CommandContent;
+    args: string[];
+    currentTime?: number;
+    commandClass?: Interfaces.Command.Class | typeof BaseCommand;
+}
+export declare function startAnalytics({ commandContent, args, currentTime, commandClass, }: StartOptions): Promise<void>;
+interface EnvironmentData {
+    uname: string;
+    env_ci: boolean;
+    env_ci_platform?: string;
+    env_plugin_installed_any_custom: boolean;
+    env_plugin_installed_shopify: string;
+    env_shell: string;
+    env_web_ide: string | undefined;
+    env_device_id: string;
+    env_cloud: string;
+    env_package_manager: string;
+}
+export declare function getEnvironmentData(config: Interfaces.Config): Promise<EnvironmentData>;
+export declare function getSensitiveEnvironmentData(config: Interfaces.Config): Promise<{
+    env_plugin_installed_all: string;
+}>;
+export {};

package/dist/private/node/analytics.js

@@ -0,0 +1,57 @@
+import { getPackageManager, packageManagerUsedForCreating } from '../../public/node/node-package-manager.js';
+import * as metadata from '../../metadata.js';
+import { macAddress } from '../../environment/local.js';
+import { platformAndArch } from '../../public/node/os.js';
+import { hashString } from '../../string.js';
+import * as environment from '../../environment.js';
+export async function startAnalytics({ commandContent, args, currentTime = new Date().getTime(), commandClass, }) {
+    let startCommand = commandContent.command;
+    if (commandClass && Object.prototype.hasOwnProperty.call(commandClass, 'analyticsNameOverride')) {
+        startCommand = commandClass.analyticsNameOverride() ?? commandContent.command;
+    }
+    await metadata.addSensitive(() => ({
+        commandStartOptions: {
+            startTime: currentTime,
+            startCommand,
+            startArgs: args,
+        },
+    }));
+    await metadata.addPublic(() => ({
+        cmd_all_launcher: packageManagerUsedForCreating(),
+        cmd_all_alias_used: commandContent.alias,
+        cmd_all_topic: commandContent.topic,
+        cmd_all_plugin: commandClass?.plugin?.name,
+    }));
+}
+export async function getEnvironmentData(config) {
+    const ciPlatform = environment.local.ciPlatform();
+    const pluginNames = getPluginNames(config);
+    const shopifyPlugins = pluginNames.filter((plugin) => plugin.startsWith('@shopify/'));
+    const { platform, arch } = platformAndArch();
+    return {
+        uname: `${platform} ${arch}`,
+        env_ci: ciPlatform.isCI,
+        env_ci_platform: ciPlatform.name,
+        env_plugin_installed_any_custom: pluginNames.length !== shopifyPlugins.length,
+        env_plugin_installed_shopify: JSON.stringify(shopifyPlugins),
+        env_shell: config.shell,
+        env_web_ide: environment.local.cloudEnvironment().editor
+            ? environment.local.cloudEnvironment().platform
+            : undefined,
+        env_device_id: hashString(await macAddress()),
+        env_cloud: environment.local.cloudEnvironment().platform,
+        env_package_manager: await getPackageManager(process.cwd()),
+    };
+}
+export async function getSensitiveEnvironmentData(config) {
+    return {
+        env_plugin_installed_all: JSON.stringify(getPluginNames(config)),
+    };
+}
+function getPluginNames(config) {
+    return config.plugins
+        .map((plugin) => plugin.name)
+        .sort()
+        .filter((plugin) => !plugin.startsWith('@oclif/'));
+}
+//# sourceMappingURL=analytics.js.map

package/dist/private/node/analytics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics.js","sourceRoot":"","sources":["../../../src/private/node/analytics.ts"],"names":[],"mappings":"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","sourcesContent":["import {getPackageManager, packageManagerUsedForCreating} from '../../public/node/node-package-manager.js'\nimport BaseCommand from '../../public/node/base-command.js'\nimport {CommandContent} from '../../public/node/hooks/prerun.js'\nimport * as metadata from '../../metadata.js'\nimport {macAddress} from '../../environment/local.js'\nimport {platformAndArch} from '../../public/node/os.js'\nimport {hashString} from '../../string.js'\nimport * as environment from '../../environment.js'\nimport {Interfaces} from '@oclif/core'\n\ninterface StartOptions {\n  commandContent: CommandContent\n  args: string[]\n  currentTime?: number\n  commandClass?: Interfaces.Command.Class | typeof BaseCommand\n}\n\nexport async function startAnalytics({\n  commandContent,\n  args,\n  currentTime = new Date().getTime(),\n  commandClass,\n}: StartOptions): Promise<void> {\n  let startCommand: string = commandContent.command\n  if (commandClass && Object.prototype.hasOwnProperty.call(commandClass, 'analyticsNameOverride')) {\n    startCommand = (commandClass as typeof BaseCommand).analyticsNameOverride() ?? commandContent.command\n  }\n\n  await metadata.addSensitive(() => ({\n    commandStartOptions: {\n      startTime: currentTime,\n      startCommand,\n      startArgs: args,\n    },\n  }))\n\n  await metadata.addPublic(() => ({\n    cmd_all_launcher: packageManagerUsedForCreating(),\n    cmd_all_alias_used: commandContent.alias,\n    cmd_all_topic: commandContent.topic,\n    cmd_all_plugin: commandClass?.plugin?.name,\n  }))\n}\n\ninterface EnvironmentData {\n  uname: string\n  env_ci: boolean\n  env_ci_platform?: string\n  env_plugin_installed_any_custom: boolean\n  env_plugin_installed_shopify: string\n  env_shell: string\n  env_web_ide: string | undefined\n  env_device_id: string\n  env_cloud: string\n  env_package_manager: string\n}\n\nexport async function getEnvironmentData(config: Interfaces.Config): Promise<EnvironmentData> {\n  const ciPlatform = environment.local.ciPlatform()\n\n  const pluginNames = getPluginNames(config)\n  const shopifyPlugins = pluginNames.filter((plugin) => plugin.startsWith('@shopify/'))\n\n  const {platform, arch} = platformAndArch()\n\n  return {\n    uname: `${platform} ${arch}`,\n    env_ci: ciPlatform.isCI,\n    env_ci_platform: ciPlatform.name,\n    env_plugin_installed_any_custom: pluginNames.length !== shopifyPlugins.length,\n    env_plugin_installed_shopify: JSON.stringify(shopifyPlugins),\n    env_shell: config.shell,\n    env_web_ide: environment.local.cloudEnvironment().editor\n      ? environment.local.cloudEnvironment().platform\n      : undefined,\n    env_device_id: hashString(await macAddress()),\n    env_cloud: environment.local.cloudEnvironment().platform,\n    env_package_manager: await getPackageManager(process.cwd()),\n  }\n}\n\nexport async function getSensitiveEnvironmentData(config: Interfaces.Config) {\n  return {\n    env_plugin_installed_all: JSON.stringify(getPluginNames(config)),\n  }\n}\n\nfunction getPluginNames(config: Interfaces.Config) {\n  return config.plugins\n    .map((plugin) => plugin.name)\n    .sort()\n    .filter((plugin) => !plugin.startsWith('@oclif/'))\n}\n"]}

package/dist/private/node/ui/alert.d.ts

@@ -0,0 +1,2 @@
+import { AlertProps } from './components/Alert.js';
+export declare function alert({ type, headline, body, nextSteps, reference, link, orderedNextSteps }: AlertProps): void;

package/dist/private/node/ui/alert.js

@@ -0,0 +1,18 @@
+import { Alert } from './components/Alert.js';
+import { renderOnce } from '../ui.js';
+import { consoleLog, consoleWarn } from '../../../output.js';
+import React from 'react';
+const typeToLogLevel = {
+    info: 'info',
+    warning: 'warn',
+    success: 'info',
+};
+const typeToLogger = {
+    info: consoleLog,
+    warning: consoleWarn,
+    success: consoleLog,
+};
+export function alert({ type, headline, body, nextSteps, reference, link, orderedNextSteps = false }) {
+    renderOnce(React.createElement(Alert, { type: type, headline: headline, body: body, nextSteps: nextSteps, reference: reference, link: link, orderedNextSteps: orderedNextSteps }), typeToLogLevel[type], typeToLogger[type]);
+}
+//# sourceMappingURL=alert.js.map

package/dist/private/node/ui/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../../src/private/node/ui/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAa,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAA;AACnC,OAAO,EAAC,UAAU,EAAE,WAAW,EAAmB,MAAM,oBAAoB,CAAA;AAC5E,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,cAAc,GAA4C;IAC9D,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,MAAM;CAChB,CAAA;AAED,MAAM,YAAY,GAA0C;IAC1D,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,UAAU;CACpB,CAAA;AAED,MAAM,UAAU,KAAK,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,gBAAgB,GAAG,KAAK,EAAa;IAC5G,UAAU,CACR,oBAAC,KAAK,IACJ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,gBAAgB,GAClC,EACF,cAAc,CAAC,IAAI,CAAC,EACpB,YAAY,CAAC,IAAI,CAAC,CACnB,CAAA;AACH,CAAC","sourcesContent":["import {Alert, AlertProps} from './components/Alert.js'\nimport {renderOnce} from '../ui.js'\nimport {consoleLog, consoleWarn, Logger, LogLevel} from '../../../output.js'\nimport React from 'react'\n\nconst typeToLogLevel: {[key in AlertProps['type']]: LogLevel} = {\n  info: 'info',\n  warning: 'warn',\n  success: 'info',\n}\n\nconst typeToLogger: {[key in AlertProps['type']]: Logger} = {\n  info: consoleLog,\n  warning: consoleWarn,\n  success: consoleLog,\n}\n\nexport function alert({type, headline, body, nextSteps, reference, link, orderedNextSteps = false}: AlertProps) {\n  renderOnce(\n    <Alert\n      type={type}\n      headline={headline}\n      body={body}\n      nextSteps={nextSteps}\n      reference={reference}\n      link={link}\n      orderedNextSteps={orderedNextSteps}\n    />,\n    typeToLogLevel[type],\n    typeToLogger[type],\n  )\n}\n"]}

package/dist/private/node/ui/components/Alert.d.ts

@@ -0,0 +1,17 @@
+import { BannerType } from './Banner.js';
+import { TokenItem } from './TokenizedText.js';
+import React from 'react';
+export interface AlertProps {
+    type: Exclude<BannerType, 'error' | 'external_error'>;
+    headline: TokenItem;
+    body?: TokenItem;
+    nextSteps?: TokenItem[];
+    reference?: TokenItem[];
+    link?: {
+        label: string;
+        url: string;
+    };
+    orderedNextSteps?: boolean;
+}
+declare const Alert: React.FC<AlertProps>;
+export { Alert };

package/dist/private/node/ui/components/Alert.js

@@ -0,0 +1,21 @@
+import { Banner } from './Banner.js';
+import { Link } from './Link.js';
+import { List } from './List.js';
+import { TokenizedText } from './TokenizedText.js';
+import { Box } from 'ink';
+import React from 'react';
+const Alert = ({ type, headline, body, nextSteps, reference, link, orderedNextSteps = false }) => {
+    return (React.createElement(Banner, { type: type, marginY: 1 },
+        React.createElement(Box, null,
+            React.createElement(TokenizedText, { item: headline })),
+        body && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(TokenizedText, { item: body }))),
+        nextSteps && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(List, { title: "Next steps", items: nextSteps, ordered: orderedNextSteps }))),
+        reference && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(List, { title: "Reference", items: reference }))),
+        link && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Link, { url: link.url, label: link.label })))));
+};
+export { Alert };
+//# sourceMappingURL=Alert.js.map

package/dist/private/node/ui/components/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAa,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,EAAY,aAAa,EAAC,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,MAAM,KAAK,GAAyB,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,gBAAgB,GAAG,KAAK,EAAC,EAAE,EAAE;IACnH,OAAO,CACL,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;QAC5B,oBAAC,GAAG;YACF,oBAAC,aAAa,IAAC,IAAI,EAAE,QAAQ,GAAI,CAC7B;QAEL,IAAI,IAAI,CACP,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC;YACf,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,GAAI,CACzB,CACP;QAEA,SAAS,IAAI,CACZ,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC;YACf,oBAAC,IAAI,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,gBAAgB,GAAI,CACpE,CACP;QAEA,SAAS,IAAI,CACZ,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC;YACf,oBAAC,IAAI,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,SAAS,GAAI,CACxC,CACP;QAEA,IAAI,IAAI,CACP,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC;YACf,oBAAC,IAAI,IAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CACtC,CACP,CACM,CACV,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAC,KAAK,EAAC,CAAA","sourcesContent":["import {Banner, BannerType} from './Banner.js'\nimport {Link} from './Link.js'\nimport {List} from './List.js'\nimport {TokenItem, TokenizedText} from './TokenizedText.js'\nimport {Box} from 'ink'\nimport React from 'react'\n\nexport interface AlertProps {\n  type: Exclude<BannerType, 'error' | 'external_error'>\n  headline: TokenItem\n  body?: TokenItem\n  nextSteps?: TokenItem[]\n  reference?: TokenItem[]\n  link?: {\n    label: string\n    url: string\n  }\n  orderedNextSteps?: boolean\n}\n\nconst Alert: React.FC<AlertProps> = ({type, headline, body, nextSteps, reference, link, orderedNextSteps = false}) => {\n  return (\n    <Banner type={type} marginY={1}>\n      <Box>\n        <TokenizedText item={headline} />\n      </Box>\n\n      {body && (\n        <Box marginTop={1}>\n          <TokenizedText item={body} />\n        </Box>\n      )}\n\n      {nextSteps && (\n        <Box marginTop={1}>\n          <List title=\"Next steps\" items={nextSteps} ordered={orderedNextSteps} />\n        </Box>\n      )}\n\n      {reference && (\n        <Box marginTop={1}>\n          <List title=\"Reference\" items={reference} />\n        </Box>\n      )}\n\n      {link && (\n        <Box marginTop={1}>\n          <Link url={link.url} label={link.label} />\n        </Box>\n      )}\n    </Banner>\n  )\n}\n\nexport {Alert}\n"]}

package/dist/private/node/ui/components/Alert.test.d.ts

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

package/dist/private/node/ui/components/Alert.test.js

@@ -0,0 +1,95 @@
+import { Alert } from './Alert.js';
+import { unstyled } from '../../../../output.js';
+import { describe, expect, test } from 'vitest';
+import React from 'react';
+import { render } from 'ink-testing-library';
+describe('Alert', async () => {
+    test('renders correctly with all the options', async () => {
+        const options = {
+            headline: [{ userInput: 'my-app' }, 'initialized and ready to build.'],
+            body: ['You can find the build files in the ', { filePath: 'dist' }, 'folder.'],
+            nextSteps: [
+                [
+                    'Run',
+                    {
+                        command: 'cd santorini-goods',
+                    },
+                ],
+                [
+                    'To preview your project, run',
+                    {
+                        command: 'npm app dev',
+                    },
+                ],
+                [
+                    'To add extensions, run',
+                    {
+                        command: 'npm generate extension',
+                    },
+                ],
+            ],
+            reference: [
+                [
+                    'Run',
+                    {
+                        command: 'npm shopify help',
+                    },
+                ],
+                [
+                    // testing link wrapping behavior
+                    "Press 'return' to open the really amazing and clean",
+                    {
+                        link: {
+                            label: 'dev docs',
+                            url: 'https://shopify.dev',
+                        },
+                    },
+                ],
+            ],
+            link: {
+                label: 'Link',
+                url: 'https://shopify.com',
+            },
+        };
+        const { lastFrame } = render(React.createElement(Alert, { type: "info", ...options }));
+        expect(unstyled(lastFrame())).toMatchInlineSnapshot(`
+      "
+      ╭─ info ───────────────────────────────────────────────────────────────────────╮
+      │                                                                              │
+      │  my-app initialized and ready to build.                                      │
+      │                                                                              │
+      │  You can find the build files in the  \\"dist\\" folder.                         │
+      │                                                                              │
+      │  Next steps                                                                  │
+      │    • Run \`cd santorini-goods\`                                                │
+      │    • To preview your project, run \`npm app dev\`                              │
+      │    • To add extensions, run \`npm generate extension\`                         │
+      │                                                                              │
+      │  Reference                                                                   │
+      │    • Run \`npm shopify help\`                                                  │
+      │    • Press 'return' to open the really amazing and clean dev docs (          │
+      │      https://shopify.dev )                                                   │
+      │                                                                              │
+      │  Link ( https://shopify.com )                                                │
+      │                                                                              │
+      ╰──────────────────────────────────────────────────────────────────────────────╯
+      "
+    `);
+    });
+    test('renders correctly with only required options', async () => {
+        const options = {
+            headline: 'Title',
+        };
+        const { lastFrame } = render(React.createElement(Alert, { type: "info", ...options }));
+        expect(unstyled(lastFrame())).toMatchInlineSnapshot(`
+      "
+      ╭─ info ───────────────────────────────────────────────────────────────────────╮
+      │                                                                              │
+      │  Title                                                                       │
+      │                                                                              │
+      ╰──────────────────────────────────────────────────────────────────────────────╯
+      "
+    `);
+    });
+});
+//# sourceMappingURL=Alert.test.js.map

package/dist/private/node/ui/components/Alert.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Alert.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAA;AAChC,OAAO,EAAC,QAAQ,EAAC,MAAM,uBAAuB,CAAA;AAC9C,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAE1C,QAAQ,CAAC,OAAO,EAAE,KAAK,IAAI,EAAE;IAC3B,IAAI,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACxD,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAC,EAAE,iCAAiC,CAAC;YACpE,IAAI,EAAE,CAAC,sCAAsC,EAAE,EAAC,QAAQ,EAAE,MAAM,EAAC,EAAE,SAAS,CAAC;YAC7E,SAAS,EAAE;gBACT;oBACE,KAAK;oBACL;wBACE,OAAO,EAAE,oBAAoB;qBAC9B;iBACF;gBACD;oBACE,8BAA8B;oBAC9B;wBACE,OAAO,EAAE,aAAa;qBACvB;iBACF;gBACD;oBACE,wBAAwB;oBACxB;wBACE,OAAO,EAAE,wBAAwB;qBAClC;iBACF;aACF;YACD,SAAS,EAAE;gBACT;oBACE,KAAK;oBACL;wBACE,OAAO,EAAE,kBAAkB;qBAC5B;iBACF;gBACD;oBACE,iCAAiC;oBACjC,qDAAqD;oBACrD;wBACE,IAAI,EAAE;4BACJ,KAAK,EAAE,UAAU;4BACjB,GAAG,EAAE,qBAAqB;yBAC3B;qBACF;iBACF;aACF;YACD,IAAI,EAAE;gBACJ,KAAK,EAAE,MAAM;gBACb,GAAG,EAAE,qBAAqB;aAC3B;SACF,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,KAAK,IAAC,IAAI,EAAC,MAAM,KAAK,OAAO,GAAI,CAAC,CAAA;QAE9D,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;KAsBpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,OAAO;SAClB,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,KAAK,IAAC,IAAI,EAAC,MAAM,KAAK,OAAO,GAAI,CAAC,CAAA;QAE9D,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;KAQpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {Alert} from './Alert.js'\nimport {unstyled} from '../../../../output.js'\nimport {describe, expect, test} from 'vitest'\nimport React from 'react'\nimport {render} from 'ink-testing-library'\n\ndescribe('Alert', async () => {\n  test('renders correctly with all the options', async () => {\n    const options = {\n      headline: [{userInput: 'my-app'}, 'initialized and ready to build.'],\n      body: ['You can find the build files in the ', {filePath: 'dist'}, 'folder.'],\n      nextSteps: [\n        [\n          'Run',\n          {\n            command: 'cd santorini-goods',\n          },\n        ],\n        [\n          'To preview your project, run',\n          {\n            command: 'npm app dev',\n          },\n        ],\n        [\n          'To add extensions, run',\n          {\n            command: 'npm generate extension',\n          },\n        ],\n      ],\n      reference: [\n        [\n          'Run',\n          {\n            command: 'npm shopify help',\n          },\n        ],\n        [\n          // testing link wrapping behavior\n          \"Press 'return' to open the really amazing and clean\",\n          {\n            link: {\n              label: 'dev docs',\n              url: 'https://shopify.dev',\n            },\n          },\n        ],\n      ],\n      link: {\n        label: 'Link',\n        url: 'https://shopify.com',\n      },\n    }\n\n    const {lastFrame} = render(<Alert type=\"info\" {...options} />)\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"\n      ╭─ info ───────────────────────────────────────────────────────────────────────╮\n      │                                                                              │\n      │  my-app initialized and ready to build.                                      │\n      │                                                                              │\n      │  You can find the build files in the  \\\\\"dist\\\\\" folder.                         │\n      │                                                                              │\n      │  Next steps                                                                  │\n      │    • Run \\`cd santorini-goods\\`                                                │\n      │    • To preview your project, run \\`npm app dev\\`                              │\n      │    • To add extensions, run \\`npm generate extension\\`                         │\n      │                                                                              │\n      │  Reference                                                                   │\n      │    • Run \\`npm shopify help\\`                                                  │\n      │    • Press 'return' to open the really amazing and clean dev docs (          │\n      │      https://shopify.dev )                                                   │\n      │                                                                              │\n      │  Link ( https://shopify.com )                                                │\n      │                                                                              │\n      ╰──────────────────────────────────────────────────────────────────────────────╯\n      \"\n    `)\n  })\n\n  test('renders correctly with only required options', async () => {\n    const options = {\n      headline: 'Title',\n    }\n\n    const {lastFrame} = render(<Alert type=\"info\" {...options} />)\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"\n      ╭─ info ───────────────────────────────────────────────────────────────────────╮\n      │                                                                              │\n      │  Title                                                                       │\n      │                                                                              │\n      ╰──────────────────────────────────────────────────────────────────────────────╯\n      \"\n    `)\n  })\n})\n"]}

package/dist/private/node/ui/components/Banner.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type BannerType = 'success' | 'error' | 'warning' | 'info' | 'external_error';
+interface Props {
+    type: BannerType;
+    marginY?: number;
+}
+declare const Banner: React.FC<Props>;
+export { Banner };

package/dist/private/node/ui/components/Banner.js

@@ -0,0 +1,41 @@
+import useLayout from '../hooks/use-layout.js';
+import { Box, Text } from 'ink';
+import React from 'react';
+function typeToColor(type) {
+    return {
+        success: 'green',
+        error: 'red',
+        warning: 'yellow',
+        info: 'dim',
+        external_error: 'red',
+    }[type];
+}
+const BoxWithBorder = ({ type, marginY, children }) => {
+    const { twoThirds } = useLayout();
+    return (React.createElement(Box, { width: twoThirds, paddingY: 1, paddingX: 2, marginY: marginY, borderStyle: "round", flexDirection: "column", borderColor: typeToColor(type) },
+        React.createElement(Box, { marginTop: -2, marginBottom: 1, marginLeft: -1 },
+            React.createElement(Text, null, ` ${type.replace(/_/g, ' ')} `)),
+        children));
+};
+const BoxWithTopBottomLines = ({ type, marginY, children }) => {
+    const { twoThirds } = useLayout();
+    return (React.createElement(Box, { marginY: marginY, flexDirection: "column" },
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, null,
+                React.createElement(Text, { color: typeToColor(type) }, '─'.repeat(2)),
+                React.createElement(Text, null, ` ${type.replace(/_/g, ' ')} `),
+                React.createElement(Text, { color: typeToColor(type) }, '─'.repeat(twoThirds - 2 - type.length - 2)))),
+        children,
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: typeToColor(type) }, '─'.repeat(twoThirds)))));
+};
+const Banner = ({ children, ...props }) => {
+    if (props.type === 'external_error') {
+        return React.createElement(BoxWithTopBottomLines, props, children);
+    }
+    else {
+        return React.createElement(BoxWithBorder, props, children);
+    }
+};
+export { Banner };
+//# sourceMappingURL=Banner.js.map

package/dist/private/node/ui/components/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,wBAAwB,CAAA;AAC9C,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,SAAS,WAAW,CAAC,IAAmB;IACtC,OAAO;QACL,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,QAAQ;QACjB,IAAI,EAAE,KAAK;QACX,cAAc,EAAE,KAAK;KACtB,CAAC,IAAI,CAAC,CAAA;AACT,CAAC;AAED,MAAM,aAAa,GAAoB,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAC,EAAE,EAAE;IACnE,MAAM,EAAC,SAAS,EAAC,GAAG,SAAS,EAAE,CAAA;IAE/B,OAAO,CACL,oBAAC,GAAG,IACF,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,OAAO,EAChB,WAAW,EAAC,OAAO,EACnB,aAAa,EAAC,QAAQ,EACtB,WAAW,EAAE,WAAW,CAAC,IAAI,CAAC;QAE9B,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;YACjD,oBAAC,IAAI,QAAE,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAQ,CACzC;QACL,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,qBAAqB,GAAoB,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAC,EAAE,EAAE;IAC3E,MAAM,EAAC,SAAS,EAAC,GAAG,SAAS,EAAE,CAAA;IAE/B,OAAO,CACL,oBAAC,GAAG,IAAC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAC,QAAQ;QAC3C,oBAAC,GAAG,IAAC,YAAY,EAAE,CAAC;YAClB,oBAAC,IAAI;gBACH,oBAAC,IAAI,IAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,IAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAQ;gBACtD,oBAAC,IAAI,QAAE,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAQ;gBAE7C,oBAAC,IAAI,IAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,IAAG,GAAG,CAAC,MAAM,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAQ,CAC/E,CACH;QAEL,QAAQ;QAET,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC;YACf,oBAAC,IAAI,IAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,IAAG,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,CAAQ,CAC1D,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAoB,CAAC,EAAC,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,EAAE;IACvD,IAAI,KAAK,CAAC,IAAI,KAAK,gBAAgB,EAAE;QACnC,OAAO,KAAK,CAAC,aAAa,CAAC,qBAAqB,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAA;KACnE;SAAM;QACL,OAAO,KAAK,CAAC,aAAa,CAAC,aAAa,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAA;KAC3D;AACH,CAAC,CAAA;AAED,OAAO,EAAC,MAAM,EAAC,CAAA","sourcesContent":["import useLayout from '../hooks/use-layout.js'\nimport {Box, Text} from 'ink'\nimport React from 'react'\n\nexport type BannerType = 'success' | 'error' | 'warning' | 'info' | 'external_error'\n\ninterface Props {\n  type: BannerType\n  marginY?: number\n}\n\nfunction typeToColor(type: Props['type']) {\n  return {\n    success: 'green',\n    error: 'red',\n    warning: 'yellow',\n    info: 'dim',\n    external_error: 'red',\n  }[type]\n}\n\nconst BoxWithBorder: React.FC<Props> = ({type, marginY, children}) => {\n  const {twoThirds} = useLayout()\n\n  return (\n    <Box\n      width={twoThirds}\n      paddingY={1}\n      paddingX={2}\n      marginY={marginY}\n      borderStyle=\"round\"\n      flexDirection=\"column\"\n      borderColor={typeToColor(type)}\n    >\n      <Box marginTop={-2} marginBottom={1} marginLeft={-1}>\n        <Text>{` ${type.replace(/_/g, ' ')} `}</Text>\n      </Box>\n      {children}\n    </Box>\n  )\n}\n\nconst BoxWithTopBottomLines: React.FC<Props> = ({type, marginY, children}) => {\n  const {twoThirds} = useLayout()\n\n  return (\n    <Box marginY={marginY} flexDirection=\"column\">\n      <Box marginBottom={1}>\n        <Text>\n          <Text color={typeToColor(type)}>{'─'.repeat(2)}</Text>\n          <Text>{` ${type.replace(/_/g, ' ')} `}</Text>\n          {/* 2 initial dashes + 2 spaces surrounding the type */}\n          <Text color={typeToColor(type)}>{'─'.repeat(twoThirds - 2 - type.length - 2)}</Text>\n        </Text>\n      </Box>\n\n      {children}\n\n      <Box marginTop={1}>\n        <Text color={typeToColor(type)}>{'─'.repeat(twoThirds)}</Text>\n      </Box>\n    </Box>\n  )\n}\n\nconst Banner: React.FC<Props> = ({children, ...props}) => {\n  if (props.type === 'external_error') {\n    return React.createElement(BoxWithTopBottomLines, props, children)\n  } else {\n    return React.createElement(BoxWithBorder, props, children)\n  }\n}\n\nexport {Banner}\n"]}

package/dist/private/node/ui/components/Banner.test.d.ts

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

package/dist/private/node/ui/components/Banner.test.js

@@ -0,0 +1,52 @@
+import { Banner } from './Banner.js';
+import { describe, expect, test } from 'vitest';
+import React from 'react';
+import { render } from 'ink-testing-library';
+describe('Banner', async () => {
+    test('renders with a border for success', async () => {
+        const { lastFrame } = render(React.createElement(Banner, { type: "success" }));
+        expect(lastFrame()).toMatchInlineSnapshot(`
+      "╭─ success ────────────────────────────────────────────────────────────────────╮
+      │                                                                              │
+      │                                                                              │
+      ╰──────────────────────────────────────────────────────────────────────────────╯"
+    `);
+    });
+    test('renders with a border for info', async () => {
+        const { lastFrame } = render(React.createElement(Banner, { type: "info" }));
+        expect(lastFrame()).toMatchInlineSnapshot(`
+      "╭─ info ───────────────────────────────────────────────────────────────────────╮
+      │                                                                              │
+      │                                                                              │
+      ╰──────────────────────────────────────────────────────────────────────────────╯"
+    `);
+    });
+    test('renders with a border for warning', async () => {
+        const { lastFrame } = render(React.createElement(Banner, { type: "warning" }));
+        expect(lastFrame()).toMatchInlineSnapshot(`
+      "╭─ warning ────────────────────────────────────────────────────────────────────╮
+      │                                                                              │
+      │                                                                              │
+      ╰──────────────────────────────────────────────────────────────────────────────╯"
+    `);
+    });
+    test('renders with a border for error', async () => {
+        const { lastFrame } = render(React.createElement(Banner, { type: "error" }));
+        expect(lastFrame()).toMatchInlineSnapshot(`
+      "╭─ error ──────────────────────────────────────────────────────────────────────╮
+      │                                                                              │
+      │                                                                              │
+      ╰──────────────────────────────────────────────────────────────────────────────╯"
+    `);
+    });
+    test('renders with a top and bottom lines only for external errors', async () => {
+        const { lastFrame } = render(React.createElement(Banner, { type: "external_error" }));
+        expect(lastFrame()).toMatchInlineSnapshot(`
+      "── external error ──────────────────────────────────────────────────────────────
+
+
+      ────────────────────────────────────────────────────────────────────────────────"
+    `);
+    });
+});
+//# sourceMappingURL=Banner.test.js.map

package/dist/private/node/ui/components/Banner.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Banner.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAA;AAClC,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAE1C,QAAQ,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE;IAC5B,IAAI,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,MAAM,IAAC,IAAI,EAAC,SAAS,GAAG,CAAC,CAAA;QAErD,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC;;;;;KAKzC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,GAAG,CAAC,CAAA;QAClD,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC;;;;;KAKzC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,MAAM,IAAC,IAAI,EAAC,SAAS,GAAG,CAAC,CAAA;QACrD,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC;;;;;KAKzC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,MAAM,IAAC,IAAI,EAAC,OAAO,GAAG,CAAC,CAAA;QACnD,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC;;;;;KAKzC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,8DAA8D,EAAE,KAAK,IAAI,EAAE;QAC9E,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,MAAM,IAAC,IAAI,EAAC,gBAAgB,GAAG,CAAC,CAAA;QAE5D,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC;;;;;KAKzC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {Banner} from './Banner.js'\nimport {describe, expect, test} from 'vitest'\nimport React from 'react'\nimport {render} from 'ink-testing-library'\n\ndescribe('Banner', async () => {\n  test('renders with a border for success', async () => {\n    const {lastFrame} = render(<Banner type=\"success\" />)\n\n    expect(lastFrame()).toMatchInlineSnapshot(`\n      \"\u001b[32m╭─\u001b[39m success \u001b[32m────────────────────────────────────────────────────────────────────╮\u001b[39m\n      \u001b[32m│\u001b[39m                                                                              \u001b[32m│\u001b[39m\n      \u001b[32m│\u001b[39m                                                                              \u001b[32m│\u001b[39m\n      \u001b[32m╰──────────────────────────────────────────────────────────────────────────────╯\u001b[39m\"\n    `)\n  })\n\n  test('renders with a border for info', async () => {\n    const {lastFrame} = render(<Banner type=\"info\" />)\n    expect(lastFrame()).toMatchInlineSnapshot(`\n      \"\u001b[2m╭─\u001b[22m info \u001b[2m───────────────────────────────────────────────────────────────────────╮\u001b[22m\n      \u001b[2m│\u001b[22m                                                                              \u001b[2m│\u001b[22m\n      \u001b[2m│\u001b[22m                                                                              \u001b[2m│\u001b[22m\n      \u001b[2m╰──────────────────────────────────────────────────────────────────────────────╯\u001b[22m\"\n    `)\n  })\n\n  test('renders with a border for warning', async () => {\n    const {lastFrame} = render(<Banner type=\"warning\" />)\n    expect(lastFrame()).toMatchInlineSnapshot(`\n      \"\u001b[33m╭─\u001b[39m warning \u001b[33m────────────────────────────────────────────────────────────────────╮\u001b[39m\n      \u001b[33m│\u001b[39m                                                                              \u001b[33m│\u001b[39m\n      \u001b[33m│\u001b[39m                                                                              \u001b[33m│\u001b[39m\n      \u001b[33m╰──────────────────────────────────────────────────────────────────────────────╯\u001b[39m\"\n    `)\n  })\n\n  test('renders with a border for error', async () => {\n    const {lastFrame} = render(<Banner type=\"error\" />)\n    expect(lastFrame()).toMatchInlineSnapshot(`\n      \"\u001b[31m╭─\u001b[39m error \u001b[31m──────────────────────────────────────────────────────────────────────╮\u001b[39m\n      \u001b[31m│\u001b[39m                                                                              \u001b[31m│\u001b[39m\n      \u001b[31m│\u001b[39m                                                                              \u001b[31m│\u001b[39m\n      \u001b[31m╰──────────────────────────────────────────────────────────────────────────────╯\u001b[39m\"\n    `)\n  })\n\n  test('renders with a top and bottom lines only for external errors', async () => {\n    const {lastFrame} = render(<Banner type=\"external_error\" />)\n\n    expect(lastFrame()).toMatchInlineSnapshot(`\n      \"\u001b[31m──\u001b[39m external error \u001b[31m──────────────────────────────────────────────────────────────\u001b[39m\n\n\n      \u001b[31m────────────────────────────────────────────────────────────────────────────────\u001b[39m\"\n    `)\n  })\n})\n"]}

package/dist/private/node/ui/components/Command.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    command: string;
+}
+/**
+ * `Command` displays a command as non-dimmed text.
+ */
+declare const Command: React.FC<Props>;
+export { Command };

package/dist/private/node/ui/components/Command.js

@@ -0,0 +1,13 @@
+import { Text } from 'ink';
+import React from 'react';
+/**
+ * `Command` displays a command as non-dimmed text.
+ */
+const Command = ({ command }) => {
+    return React.createElement(Text, null,
+        "`",
+        command,
+        "`");
+};
+export { Command };
+//# sourceMappingURL=Command.js.map

package/dist/private/node/ui/components/Command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Command.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB;;GAEG;AACH,MAAM,OAAO,GAAoB,CAAC,EAAC,OAAO,EAAC,EAAe,EAAE;IAC1D,OAAO,oBAAC,IAAI;;QAAG,OAAO;YAAS,CAAA;AACjC,CAAC,CAAA;AAED,OAAO,EAAC,OAAO,EAAC,CAAA","sourcesContent":["import {Text} from 'ink'\nimport React from 'react'\n\ninterface Props {\n  command: string\n}\n\n/**\n * `Command` displays a command as non-dimmed text.\n */\nconst Command: React.FC<Props> = ({command}): JSX.Element => {\n  return <Text>`{command}`</Text>\n}\n\nexport {Command}\n"]}

package/dist/private/node/ui/components/Command.test.d.ts

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

package/dist/private/node/ui/components/Command.test.js

@@ -0,0 +1,11 @@
+import { Command } from './Command.js';
+import { describe, expect, test } from 'vitest';
+import React from 'react';
+import { render } from 'ink-testing-library';
+describe('Command', async () => {
+    test('renders correctly', async () => {
+        const { lastFrame } = render(React.createElement(Command, { command: "npm install" }));
+        expect(lastFrame()).toMatchInlineSnapshot('"`npm install`"');
+    });
+});
+//# sourceMappingURL=Command.test.js.map

package/dist/private/node/ui/components/Command.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Command.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAA;AACpC,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAE1C,QAAQ,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IAC7B,IAAI,CAAC,mBAAmB,EAAE,KAAK,IAAI,EAAE;QACnC,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,OAAO,IAAC,OAAO,EAAC,aAAa,GAAG,CAAC,CAAA;QAE7D,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,CAAA;IAC9D,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {Command} from './Command.js'\nimport {describe, expect, test} from 'vitest'\nimport React from 'react'\nimport {render} from 'ink-testing-library'\n\ndescribe('Command', async () => {\n  test('renders correctly', async () => {\n    const {lastFrame} = render(<Command command=\"npm install\" />)\n\n    expect(lastFrame()).toMatchInlineSnapshot('\"`npm install`\"')\n  })\n})\n"]}

package/dist/private/node/ui/components/ConcurrentOutput.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="node" />
+import { OutputProcess } from '../../../../output.js';
+import { AbortController } from '../../../../public/node/abort.js';
+import { FunctionComponent } from 'react';
+import { Writable } from 'stream';
+export declare type WritableStream = (process: OutputProcess, index: number) => Writable;
+interface Props {
+    processes: OutputProcess[];
+    abortController: AbortController;
+    showTimestamps?: boolean;
+}
+/**
+ * Renders output from concurrent processes to the terminal.
+ * Output will be divided in a three column layout
+ * with the left column containing the timestamp,
+ * the right column containing the output,
+ * and the middle column containing the process prefix.
+ * Every process will be rendered with a different color, up to 4 colors.
+ *
+ * For example running `shopify app dev`:
+ *
+ * ```shell
+ * 2022-10-10 13:11:03 | backend    | npm
+ * 2022-10-10 13:11:03 | backend    |  WARN ignoring workspace config at ...
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | backend    | > shopify-app-template-node@0.1.0 dev
+ * 2022-10-10 13:11:03 | backend    | > cross-env NODE_ENV=development nodemon backend/index.js --watch ./backend
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | frontend   |
+ * 2022-10-10 13:11:03 | frontend   | > starter-react-frontend-app@0.1.0 dev
+ * 2022-10-10 13:11:03 | frontend   | > cross-env NODE_ENV=development node vite-server.js
+ * 2022-10-10 13:11:03 | frontend   |
+ * 2022-10-10 13:11:03 | frontend   |
+ * 2022-10-10 13:11:03 | backend    | [nodemon] 2.0.19
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | backend    | [nodemon] to restart at any time, enter `rs`
+ * 2022-10-10 13:11:03 | backend    | [nodemon] watching path(s): backend/
+ * 2022-10-10 13:11:03 | backend    | [nodemon] watching extensions: js,mjs,json
+ * 2022-10-10 13:11:03 | backend    | [nodemon] starting `node backend/index.js`
+ * 2022-10-10 13:11:03 | backend    |
+ *
+ * ```
+ */
+declare const ConcurrentOutput: FunctionComponent<Props>;
+export default ConcurrentOutput;

package/dist/private/node/ui/components/ConcurrentOutput.js

@@ -0,0 +1,86 @@
+import useAsyncAndUnmount from '../hooks/use-async-and-unmount.js';
+import React, { useState } from 'react';
+import { Box, Static, Text } from 'ink';
+import stripAnsi from 'strip-ansi';
+import { Writable } from 'stream';
+/**
+ * Renders output from concurrent processes to the terminal.
+ * Output will be divided in a three column layout
+ * with the left column containing the timestamp,
+ * the right column containing the output,
+ * and the middle column containing the process prefix.
+ * Every process will be rendered with a different color, up to 4 colors.
+ *
+ * For example running `shopify app dev`:
+ *
+ * ```shell
+ * 2022-10-10 13:11:03 | backend    | npm
+ * 2022-10-10 13:11:03 | backend    |  WARN ignoring workspace config at ...
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | backend    | > shopify-app-template-node@0.1.0 dev
+ * 2022-10-10 13:11:03 | backend    | > cross-env NODE_ENV=development nodemon backend/index.js --watch ./backend
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | frontend   |
+ * 2022-10-10 13:11:03 | frontend   | > starter-react-frontend-app@0.1.0 dev
+ * 2022-10-10 13:11:03 | frontend   | > cross-env NODE_ENV=development node vite-server.js
+ * 2022-10-10 13:11:03 | frontend   |
+ * 2022-10-10 13:11:03 | frontend   |
+ * 2022-10-10 13:11:03 | backend    | [nodemon] 2.0.19
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | backend    | [nodemon] to restart at any time, enter `rs`
+ * 2022-10-10 13:11:03 | backend    | [nodemon] watching path(s): backend/
+ * 2022-10-10 13:11:03 | backend    | [nodemon] watching extensions: js,mjs,json
+ * 2022-10-10 13:11:03 | backend    | [nodemon] starting `node backend/index.js`
+ * 2022-10-10 13:11:03 | backend    |
+ *
+ * ```
+ */
+const ConcurrentOutput = ({ processes, abortController, showTimestamps = true }) => {
+    const [processOutput, setProcessOutput] = useState([]);
+    const concurrentColors = ['yellow', 'cyan', 'magenta', 'green', 'blue'];
+    const prefixColumnSize = Math.max(...processes.map((process) => process.prefix.length));
+    function lineColor(index) {
+        const colorIndex = index < concurrentColors.length ? index : index % concurrentColors.length;
+        return concurrentColors[colorIndex];
+    }
+    const writableStream = (process, index) => {
+        return new Writable({
+            write(chunk, _encoding, next) {
+                const lines = stripAnsi(chunk.toString('ascii').replace(/(\n)$/, '')).split(/\n/);
+                setProcessOutput((previousProcessOutput) => [
+                    ...previousProcessOutput,
+                    {
+                        color: lineColor(index),
+                        prefix: process.prefix,
+                        lines,
+                    },
+                ]);
+                next();
+            },
+        });
+    };
+    const runProcesses = () => {
+        return Promise.all(processes.map(async (process, index) => {
+            const stdout = writableStream(process, index);
+            const stderr = writableStream(process, index);
+            await process.action(stdout, stderr, abortController.signal);
+        }));
+    };
+    useAsyncAndUnmount(runProcesses, { onRejected: () => abortController.abort() });
+    return (React.createElement(Static, { items: processOutput }, (chunk, index) => {
+        return (React.createElement(Box, { flexDirection: "column", key: index }, chunk.lines.map((line, index) => (React.createElement(Box, { key: index, flexDirection: "row" },
+            showTimestamps && (React.createElement(Box, null,
+                React.createElement(Box, { marginRight: 1 },
+                    React.createElement(Text, { color: chunk.color }, new Date().toISOString().replace(/T/, ' ').replace(/\..+/, ''))),
+                React.createElement(Text, { bold: true, color: chunk.color }, "|"))),
+            React.createElement(Box, { width: prefixColumnSize, marginX: 1 },
+                React.createElement(Text, { color: chunk.color }, chunk.prefix)),
+            React.createElement(Text, { bold: true, color: chunk.color }, "|"),
+            React.createElement(Box, { flexGrow: 1, paddingLeft: 1 },
+                React.createElement(Text, { color: chunk.color }, line)))))));
+    }));
+};
+export default ConcurrentOutput;
+//# sourceMappingURL=ConcurrentOutput.js.map