cli icon indicating copy to clipboard operation
cli copied to clipboard
verified publisher icon Shopify

DNM: Demo -- blocking imports

Open shauns opened this issue 1 year ago • 3 comments

Focus on config.js

Demonstrates using ESLint to block import locations -- e.g. only prompts should use the input UI components; only commands should use prompts.

shauns avatar Aug 07 '24 11:08 shauns

Thanks for your contribution!

Depending on what you are working on, you may want to request a review from a Shopify team:

  • Themes: @shopify/advanced-edits
  • UI extensions: @shopify/ui-extensions-cli
    • Checkout UI extensions: @shopify/checkout-ui-extensions-api-stewardship
  • Hydrogen: @shopify/hydrogen
  • Other: @shopify/app-management

github-actions[bot] avatar Aug 07 '24 11:08 github-actions[bot]

Differences in type declarations

We detected differences in the type declarations generated by Typescript for this branch compared to the baseline ('main' branch). Please, review them to ensure they are backward-compatible. Here are some important things to keep in mind:

  • Some seemingly private modules might be re-exported through public modules.
  • If the branch is behind main you might see odd diffs, rebase main into this branch.

New type declarations

packages/cli-kit/dist/public/node/ui-inputs.d.ts 
/// <reference types="node" resolution-mode="require"/>
import { DangerousConfirmationPromptProps } from '../../private/node/ui/components/DangerousConfirmationPrompt.js';
import { SelectPromptProps } from '../../private/node/ui/components/SelectPrompt.js';
import { TextPromptProps } from '../../private/node/ui/components/TextPrompt.js';
import { AutocompletePromptProps } from '../../private/node/ui/components/AutocompletePrompt.js';
import { PartialBy } from '../common/ts/partial-by.js';
import { RenderOptions } from 'ink';
export interface UIDebugOptions {
    /** If true, don't check if the current terminal is interactive or not */
    skipTTYCheck?: boolean;
}
export declare const defaultUIDebugOptions: UIDebugOptions;
export interface RenderSelectPromptOptions<T> extends Omit<SelectPromptProps<T>, 'onSubmit'> {
    isConfirmationPrompt?: boolean;
    renderOptions?: RenderOptions;
}
/**
 * Renders a select prompt to the console.
 * @example
 * ?  Associate your project with the org Castile Ventures?
 *
 *    ┃  Add
 *    ┃  • new-ext
 *    ┃
 *    ┃  Remove
 *    ┃  • integrated-demand-ext
 *    ┃  • order-discount
 *
 *    Automations
 *    >  fifth
 *       sixth
 *
 *    Merchant Admin
 *       eighth
 *       ninth
 *
 *    Other
 *       first
 *       second
 *       third (limit reached)
 *       fourth
 *       seventh
 *       tenth
 *
 *    Press ↑↓ arrows to select, enter to confirm.
 *
 */
export declare function renderSelectPrompt<T>({ renderOptions, isConfirmationPrompt, ...props }: RenderSelectPromptOptions<T>, uiDebugOptions?: UIDebugOptions): Promise<T>;
export interface RenderConfirmationPromptOptions extends Pick<SelectPromptProps<boolean>, 'message' | 'infoTable' | 'infoMessage' | 'abortSignal'> {
    confirmationMessage?: string;
    cancellationMessage?: string;
    renderOptions?: RenderOptions;
    defaultValue?: boolean;
}
/**
 * Renders a confirmation prompt to the console.
 * @example
 * ?  Delete the following themes from the store?
 *
 *    ┃  Info message title
 *    ┃
 *    ┃  Info message body
 *    ┃
 *    ┃  • first theme (#1)
 *    ┃  • second theme (#2)
 *
 * >  (y) Yes, confirm changes
 *    (n) Cancel
 *
 *    Press ↑↓ arrows to select, enter or a shortcut to
 *    confirm.
 *
 */
export declare function renderConfirmationPrompt({ message, infoTable, confirmationMessage, cancellationMessage, renderOptions, defaultValue, abortSignal, infoMessage, }: RenderConfirmationPromptOptions): Promise<boolean>;
export interface RenderAutocompleteOptions<T> extends PartialBy<Omit<AutocompletePromptProps<T>, 'onSubmit'>, 'search'> {
    renderOptions?: RenderOptions;
}
/**
 * Renders an autocomplete prompt to the console.
 * @example
 * ?  Select a template:   Type to search...
 *
 *    ┃  Info message title
 *    ┃
 *    ┃  Info message body
 *
 * >  first
 *    second
 *    third
 *    fourth
 *    fifth
 *    sixth
 *    seventh
 *    eighth
 *    ninth
 *    tenth
 *    eleventh
 *    twelfth
 *    thirteenth
 *    fourteenth
 *    fifteenth
 *    sixteenth
 *    seventeenth
 *    eighteenth
 *    nineteenth (disabled)
 *    twentieth
 *    twenty-first
 *    twenty-second
 *    twenty-third
 *    twenty-fourth
 *    twenty-fifth
 *
 *    Press ↑↓ arrows to select, enter to confirm.
 *
 */
export declare function renderAutocompletePrompt<T>({ renderOptions, ...props }: RenderAutocompleteOptions<T>, uiDebugOptions?: UIDebugOptions): Promise<T>;
export interface RenderTextPromptOptions extends Omit<TextPromptProps, 'onSubmit'> {
    renderOptions?: RenderOptions;
}
/**
 * Renders a text prompt to the console.
 * @example
 * ?  App project name (can be changed later):
 * >  expansive commerce app
 *    ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
 *
 */
export declare function renderTextPrompt({ renderOptions, ...props }: RenderTextPromptOptions, uiDebugOptions?: UIDebugOptions): Promise<string>;
export interface RenderDangerousConfirmationPromptOptions extends Omit<DangerousConfirmationPromptProps, 'onSubmit'> {
    renderOptions?: RenderOptions;
}
/**
 * Renders a dangerous confirmation prompt to the console, forcing the user to
 * type a confirmation string to proceed.
 * @example
 * ?  Release a new version of nightly-app-2023-06-19?
 *
 *    ┃  Includes:
 *    ┃  + web-px (new)
 *    ┃  + sub-ui-ext
 *    ┃  + theme-app-ext
 *    ┃  + paymentify (from Partner Dashboard)
 *    ┃
 *    ┃  Removes:
 *    ┃  - prod-discount-fun
 *    ┃
 *    ┃  This can permanently delete app user data.
 *
 *    Type nightly-app-2023-06-19 to confirm, or press Escape
 *    to cancel.
 * >  █
 *    ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
 *
 */
export declare function renderDangerousConfirmationPrompt({ renderOptions, ...props }: RenderDangerousConfirmationPromptOptions, uiDebugOptions?: UIDebugOptions): Promise<boolean>;
/** Waits for any key to be pressed except Ctrl+C which will terminate the process. */
export declare const keypress: (stdin?: NodeJS.ReadStream & {
    fd: 0;
}, uiDebugOptions?: UIDebugOptions) => Promise<unknown>;
interface IsTTYOptions {
    stdin?: NodeJS.ReadStream;
    uiDebugOptions?: UIDebugOptions;
}
export declare function isTTY({ stdin, uiDebugOptions }?: IsTTYOptions): boolean;
export {};
packages/cli-kit/dist/public/common/ts/partial-by.d.ts 
/**
 * Make some properties of an object optional.
 *
 * ```ts
 * type Props = { a: number, b: string, c: boolean }
 * type PartialProps = PartialBy<Props, 'a' | 'b'>
 *
 * const props: PartialProps = { c: true } // 'a' and 'b' are optional, 'c' isn't
 * ```
 */
export type PartialBy<T, TKey extends keyof T> = Omit<T, TKey> & Partial<Pick<T, TKey>>;

Existing type declarations

packages/cli-kit/dist/public/node/ui.d.ts 
@@ -1,4 +1,3 @@
-/// <reference types="node" resolution-mode="require"/>
 import { FatalError as Fatal } from './error.js';
 import { Logger, LogLevel } from './output.js';
 import { ConcurrentOutputProps } from '../../private/node/ui/components/ConcurrentOutput.js';
@@ -8,19 +7,11 @@ import { CustomSection } from '../../private/node/ui/components/Alert.js';
 import ScalarDict from '../../private/node/ui/components/Table/ScalarDict.js';
 import { TableColumn, TableProps } from '../../private/node/ui/components/Table/Table.js';
 import { Token, InlineToken, LinkToken, ListToken, TokenItem } from '../../private/node/ui/components/TokenizedText.js';
-import { DangerousConfirmationPromptProps } from '../../private/node/ui/components/DangerousConfirmationPrompt.js';
-import { SelectPromptProps } from '../../private/node/ui/components/SelectPrompt.js';
 import { Task } from '../../private/node/ui/components/Tasks.js';
-import { TextPromptProps } from '../../private/node/ui/components/TextPrompt.js';
-import { AutocompletePromptProps } from '../../private/node/ui/components/AutocompletePrompt.js';
 import { InfoTableSection } from '../../private/node/ui/components/Prompts/InfoTable.js';
 import { InfoMessageProps } from '../../private/node/ui/components/Prompts/InfoMessage.js';
+import { PartialBy } from '../common/ts/partial-by.js';
 import { Key as InkKey, RenderOptions } from 'ink';
-type PartialBy<T, TKey extends keyof T> = Omit<T, TKey> & Partial<Pick<T, TKey>>;
-interface UIDebugOptions {
-    /** If true, don't check if the current terminal is interactive or not */
-    skipTTYCheck?: boolean;
-}
 export interface RenderConcurrentOptions extends PartialBy<ConcurrentOutputProps, 'abortSignal'> {
     renderOptions?: RenderOptions;
 }
@@ -205,110 +196,6 @@ interface RenderFatalErrorOptions {
  *
  */
 export declare function renderFatalError(error: Fatal, { renderOptions }?: RenderFatalErrorOptions): string | undefined;
-export interface RenderSelectPromptOptions<T> extends Omit<SelectPromptProps<T>, 'onSubmit'> {
-    isConfirmationPrompt?: boolean;
-    renderOptions?: RenderOptions;
-}
-/**
- * Renders a select prompt to the console.
- * @example
- * ?  Associate your project with the org Castile Ventures?
- *
- *    ┃  Add
- *    ┃  • new-ext
- *    ┃
- *    ┃  Remove
- *    ┃  • integrated-demand-ext
- *    ┃  • order-discount
- *
- *    Automations
- *    >  fifth
- *       sixth
- *
- *    Merchant Admin
- *       eighth
- *       ninth
- *
- *    Other
- *       first
- *       second
- *       third (limit reached)
- *       fourth
- *       seventh
- *       tenth
- *
- *    Press ↑↓ arrows to select, enter to confirm.
- *
- */
-export declare function renderSelectPrompt<T>({ renderOptions, isConfirmationPrompt, ...props }: RenderSelectPromptOptions<T>, uiDebugOptions?: UIDebugOptions): Promise<T>;
-export interface RenderConfirmationPromptOptions extends Pick<SelectPromptProps<boolean>, 'message' | 'infoTable' | 'infoMessage' | 'abortSignal'> {
-    confirmationMessage?: string;
-    cancellationMessage?: string;
-    renderOptions?: RenderOptions;
-    defaultValue?: boolean;
-}
-/**
- * Renders a confirmation prompt to the console.
- * @example
- * ?  Delete the following themes from the store?
- *
- *    ┃  Info message title
- *    ┃
- *    ┃  Info message body
- *    ┃
- *    ┃  • first theme (#1)
- *    ┃  • second theme (#2)
- *
- * >  (y) Yes, confirm changes
- *    (n) Cancel
- *
- *    Press ↑↓ arrows to select, enter or a shortcut to
- *    confirm.
- *
- */
-export declare function renderConfirmationPrompt({ message, infoTable, confirmationMessage, cancellationMessage, renderOptions, defaultValue, abortSignal, infoMessage, }: RenderConfirmationPromptOptions): Promise<boolean>;
-export interface RenderAutocompleteOptions<T> extends PartialBy<Omit<AutocompletePromptProps<T>, 'onSubmit'>, 'search'> {
-    renderOptions?: RenderOptions;
-}
-/**
- * Renders an autocomplete prompt to the console.
- * @example
- * ?  Select a template:   Type to search...
- *
- *    ┃  Info message title
- *    ┃
- *    ┃  Info message body
- *
- * >  first
- *    second
- *    third
- *    fourth
- *    fifth
- *    sixth
- *    seventh
- *    eighth
- *    ninth
- *    tenth
- *    eleventh
- *    twelfth
- *    thirteenth
- *    fourteenth
- *    fifteenth
- *    sixteenth
- *    seventeenth
- *    eighteenth
- *    nineteenth (disabled)
- *    twentieth
- *    twenty-first
- *    twenty-second
- *    twenty-third
- *    twenty-fourth
- *    twenty-fifth
- *
- *    Press ↑↓ arrows to select, enter to confirm.
- *
- */
-export declare function renderAutocompletePrompt<T>({ renderOptions, ...props }: RenderAutocompleteOptions<T>, uiDebugOptions?: UIDebugOptions): Promise<T>;
 interface RenderTableOptions<T extends ScalarDict> extends TableProps<T> {
     renderOptions?: RenderOptions;
 }
@@ -332,45 +219,6 @@ interface RenderTasksOptions {
  * Installing dependencies ...
  */
 export declare function renderTasks<TContext>(tasks: Task<TContext>[], { renderOptions }?: RenderTasksOptions): Promise<TContext>;
-export interface RenderTextPromptOptions extends Omit<TextPromptProps, 'onSubmit'> {
-    renderOptions?: RenderOptions;
-}
-/**
- * Renders a text prompt to the console.
- * @example
- * ?  App project name (can be changed later):
- * >  expansive commerce app
- *    ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
- *
- */
-export declare function renderTextPrompt({ renderOptions, ...props }: RenderTextPromptOptions, uiDebugOptions?: UIDebugOptions): Promise<string>;
-export interface RenderDangerousConfirmationPromptOptions extends Omit<DangerousConfirmationPromptProps, 'onSubmit'> {
-    renderOptions?: RenderOptions;
-}
-/**
- * Renders a dangerous confirmation prompt to the console, forcing the user to
- * type a confirmation string to proceed.
- * @example
- * ?  Release a new version of nightly-app-2023-06-19?
- *
- *    ┃  Includes:
- *    ┃  + web-px (new)
- *    ┃  + sub-ui-ext
- *    ┃  + theme-app-ext
- *    ┃  + paymentify (from Partner Dashboard)
- *    ┃
- *    ┃  Removes:
- *    ┃  - prod-discount-fun
- *    ┃
- *    ┃  This can permanently delete app user data.
- *
- *    Type nightly-app-2023-06-19 to confirm, or press Escape
- *    to cancel.
- * >  █
- *    ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
- *
- */
-export declare function renderDangerousConfirmationPrompt({ renderOptions, ...props }: RenderDangerousConfirmationPromptOptions, uiDebugOptions?: UIDebugOptions): Promise<boolean>;
 interface RenderTextOptions {
     text: string;
     logLevel?: LogLevel;
@@ -383,15 +231,6 @@ interface RenderTextOptions {
  *
  */
 export declare function renderText({ text, logLevel, logger }: RenderTextOptions): string;
-/** Waits for any key to be pressed except Ctrl+C which will terminate the process. */
-export declare const keypress: (stdin?: NodeJS.ReadStream & {
-    fd: 0;
-}, uiDebugOptions?: UIDebugOptions) => Promise<unknown>;
-interface IsTTYOptions {
-    stdin?: NodeJS.ReadStream;
-    uiDebugOptions?: UIDebugOptions;
-}
-export declare function isTTY({ stdin, uiDebugOptions }?: IsTTYOptions): boolean;
 export type Key = InkKey;
 export type InfoMessage = InfoMessageProps['message'];
 export { Token, Task, TokenItem, InlineToken, LinkToken, TableColumn, InfoTableSection, ListToken, render, handleCtrlC };
\ No newline at end of file

github-actions[bot] avatar Aug 07 '24 11:08 github-actions[bot]

Coverage report

St.:grey_question:
 Category Percentage Covered / Total
🟡 Statements
72.63% (+0.12% 🔼)
 7914/10897
🟡 Branches
69.41% (+0.07% 🔼)
 3886/5599
🟡 Functions
71.33% (+0.03% 🔼)
 2077/2912
🟡 Lines
72.96% (+0.13% 🔼)
 7479/10251
Show new covered files 🐣
St.:grey_question:
 File Statements Branches Functions Lines
🔴
... / ui-inputs.tsx
 30.16% 29.63% 28.57% 29.03%

Test suite run success

1805 tests passing in 823 suites.

Report generated by 🧪jest coverage report action from a3ee15765d8516411e1d68edb3664f88dd7d4920

github-actions[bot] avatar Aug 07 '24 11:08 github-actions[bot]

This PR seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action. → If there's no activity within a week, then a bot will automatically close this. Thanks for helping to improve Shopify's dev tooling and experience.

github-actions[bot] avatar Sep 07 '24 03:09 github-actions[bot]