create-lesa-app 0.0.1

package/src/flow.test.mjs

@@ -0,0 +1,98 @@
+import assert from 'node:assert/strict';
+
+import { derive } from './derive.ts';
+import { advance, editingField, initialFlow, setField, stepOrder, toInput } from './flow.ts';
+
+/** 타이핑 시뮬레이션: 문자열을 넣고 Enter. */
+function type(state, text) {
+  return advance(setField(state, text));
+}
+
+// 1) 영문 이름 → slug 질문을 건너뛰고 홈 화면 이름을 묻는다
+{
+  let s = type(initialFlow, 'lesaapp');
+  assert.equal(s.step, 'display', 'ASCII name should skip the slug step');
+  assert.equal(s.slug, 'lesaapp');
+  assert.deepEqual(stepOrder(s), ['name', 'display', 'team', 'ready']);
+  s = advance(s); // 홈 화면 이름 생략
+  assert.equal(s.step, 'team');
+  s = type(s, 'ABCDE12345');
+  assert.equal(s.step, 'ready');
+  // 생략하면 비워둔다 — 템플릿이 `name` 으로 폴백한다
+  assert.deepEqual(toInput(s), { appleTeamId: 'ABCDE12345', displayName: '', slug: 'lesaapp' });
+}
+
+// 2) 영문 이름 + 홈 화면 이름을 다듬는 경우 (lesa-app → "lesa-app")
+{
+  let s = type(initialFlow, 'lesa-app');
+  assert.equal(s.step, 'display');
+  s = type(s, 'lesa-app');
+  assert.equal(s.step, 'team');
+  s = advance(s);
+  assert.deepEqual(toInput(s), { appleTeamId: '', displayName: 'lesa-app', slug: 'lesa-app' });
+}
+
+// 3) 한글 이름 → slug 을 반드시 묻고, 이름이 곧 홈 화면 이름이다
+{
+  let s = type(initialFlow, '레사앱');
+  assert.equal(s.step, 'slug', 'non-ASCII name must ask for a slug');
+  assert.equal(editingField(s.step), 'slug');
+  assert.deepEqual(stepOrder(s), ['name', 'slug', 'team', 'ready']);
+  s = type(s, 'lesaapp');
+  assert.equal(s.step, 'team', 'non-ASCII path must not ask for a display name');
+  s = advance(s);
+  assert.deepEqual(toInput(s), { appleTeamId: '', displayName: '레사앱', slug: 'lesaapp' });
+}
+
+// 4) 이름 비어 있거나 공백만이면 전진하지 않는다
+{
+  for (const bad of ['', '   ']) {
+    const s = advance(setField(initialFlow, bad));
+    assert.equal(s.step, 'name');
+    assert.ok(s.error);
+  }
+}
+
+// 5) 잘못된 slug 은 slug 스텝에 머문다
+{
+  const base = type(initialFlow, '레사앱');
+  for (const bad of ['LesaApp', '1lesaapp', 'lesa_app', '-lesa', 'lesa app', '']) {
+    const r = type(base, bad);
+    assert.equal(r.step, 'slug', `"${bad}" should be rejected`);
+    assert.ok(r.error, `"${bad}" should set an error`);
+  }
+  assert.equal(type(base, 'lesa-app').step, 'team');
+}
+
+// 6) 이름을 ASCII → 비ASCII 로 고치면 slug 을 다시 묻는다
+{
+  const s = type(initialFlow, 'lesaapp'); // display
+  assert.equal(s.slug, 'lesaapp');
+  assert.equal(advance({ ...s, name: '레사앱', step: 'name' }).step, 'slug');
+}
+
+// 7) 앞뒤 공백은 잘린다
+{
+  const s = type(initialFlow, '  lesaapp  ');
+  assert.equal(s.name, 'lesaapp');
+  assert.equal(s.slug, 'lesaapp');
+  const d = type(s, '  Lesa App  ');
+  assert.equal(d.display, 'Lesa App');
+}
+
+console.log('flow: 7/7 groups pass');
+
+// 8) 하이픈 slug — Android package 는 하이픈을 못 쓴다
+{
+  const f = derive({ displayName: '', slug: 'lesa-app' });
+  assert.equal(f.slug, 'lesa-app');
+  assert.equal(f.scheme.development, 'lesa-app-dev', 'scheme allows hyphens');
+  for (const value of [...Object.values(f.bundleId), ...Object.values(f.package)]) {
+    assert.match(value, /^[a-z][a-z0-9_]*(\.[a-z][a-z0-9_]*)+$/, `invalid identifier: ${value}`);
+  }
+  assert.equal(f.package.development, 'com.lesaapp.development');
+  assert.equal(f.bundleId.production, 'com.lesaapp');
+  assert.deepEqual(f.package, f.bundleId, 'package must equal bundleId');
+}
+
+console.log('derive: hyphen slug produces a valid Android package');

package/src/flow.ts

@@ -0,0 +1,131 @@
+/**
+ * 프롬프트 스텝 머신 — 순수 함수. UI(ink) 밖에 두어 TTY 없이 테스트한다.
+ *
+ * 언어를 고르게 하지 않는다. 이름을 받고 ASCII 인지 검사한다:
+ *   ASCII      → 그 값이 곧 slug. displayName 은 비운다(템플릿이 name 을 그대로 쓴다)
+ *   비 ASCII   → displayName 으로 쓰고 slug 을 따로 묻는다
+ */
+
+import { validateSlug } from './derive.ts';
+
+import type { AppInput } from './derive.ts';
+
+export type StepId = 'name' | 'slug' | 'display' | 'team' | 'ready';
+
+export type FlowState = {
+  step: StepId;
+  /** 사용자가 처음 입력한 이름. ASCII 면 slug 과 같다. */
+  name: string;
+  slug: string;
+  /** 홈 화면 이름. 비우면 템플릿이 `name` 을 그대로 쓴다. */
+  display: string;
+  appleTeamId: string;
+  error: string | null;
+};
+
+export const initialFlow: FlowState = {
+  appleTeamId: '',
+  display: '',
+  error: null,
+  name: '',
+  slug: '',
+  step: 'name',
+};
+
+/** slug 으로 바로 쓸 수 있는 이름인지 — 통과하면 slug 질문을 건너뛴다. */
+export function isUsableAsSlug(name: string): boolean {
+  return validateSlug(name) === null;
+}
+
+/** 텍스트를 담는 필드만 — `error` 가 섞이면 호출부에서 string 으로 못 쓴다. */
+export type TextField = 'name' | 'slug' | 'display' | 'appleTeamId';
+
+/** 지금 스텝이 편집 중인 필드. null 이면 입력 스텝이 아니다. */
+export function editingField(step: StepId): TextField | null {
+  if (step === 'name') return 'name';
+  if (step === 'slug') return 'slug';
+  if (step === 'display') return 'display';
+  if (step === 'team') return 'appleTeamId';
+  return null;
+}
+
+export function setField(state: FlowState, value: string): FlowState {
+  const field = editingField(state.step);
+  if (!field) return state;
+  return { ...state, [field]: value, error: null };
+}
+
+/** Enter. 검증 실패면 error 를 채운 같은 스텝을 돌려준다. */
+export function advance(state: FlowState): FlowState {
+  if (state.step === 'name') {
+    const name = state.name.trim();
+    if (!name) return { ...state, error: 'Enter an app name.' };
+    // ASCII 면 그게 slug 다. 대신 홈 화면 이름을 다듬을 기회를 준다
+    // (비우면 `name` 이 그대로 홈 화면에 뜬다 — 하이픈이 그대로 보인다).
+    if (isUsableAsSlug(name)) {
+      return { ...state, error: null, name, slug: name, step: 'display' };
+    }
+    // 비ASCII 는 이 값이 홈 화면 이름이고, slug 을 따로 받는다.
+    return { ...state, error: null, name, step: 'slug' };
+  }
+
+  if (state.step === 'slug') {
+    const problem = validateSlug(state.slug.trim());
+    if (problem) return { ...state, error: problem };
+    return { ...state, error: null, slug: state.slug.trim(), step: 'team' };
+  }
+
+  if (state.step === 'display') {
+    return { ...state, display: state.display.trim(), error: null, step: 'team' };
+  }
+
+  if (state.step === 'team') {
+    return { ...state, appleTeamId: state.appleTeamId.trim(), error: null, step: 'ready' };
+  }
+
+  return state;
+}
+
+/**
+ * 'ready' 에서 결과로 변환.
+ * 비ASCII 이름은 그 자체가 홈 화면 이름이다. ASCII 면 따로 받은 값을 쓰고, 안 받았으면
+ * 비워둔다(템플릿이 `name` 으로 폴백한다 — `app.config.ts` 의 `CFBundleDisplayName`).
+ */
+export function toInput(state: FlowState): AppInput {
+  return {
+    appleTeamId: state.appleTeamId,
+    displayName: isUsableAsSlug(state.name) ? state.display : state.name,
+    slug: state.slug,
+  };
+}
+
+export const STEP_LABELS: Record<StepId, string> = {
+  display: 'DISPLAY',
+  name: 'NAME',
+  ready: 'READY',
+  slug: 'SLUG',
+  team: 'TEAM',
+};
+
+/** 진행 표시용 4칸. 2번 칸은 경로에 따라 SLUG 또는 LABEL 이다. */
+export function stepOrder(state: FlowState): StepId[] {
+  const second: StepId = state.step === 'slug' || !isUsableAsSlug(state.name) ? 'slug' : 'display';
+  return ['name', second, 'team', 'ready'];
+}
+
+/** 이미 답한 스텝들 — 레일에 남겨 무엇을 입력했는지 보이게 한다. */
+export function answered(state: FlowState): { label: string; value: string }[] {
+  const order = stepOrder(state);
+  const current = order.indexOf(state.step);
+  const shown: { label: string; value: string }[] = [];
+
+  for (const id of order.slice(0, current === -1 ? order.length : current)) {
+    if (id === 'name') shown.push({ label: 'App name', value: state.name });
+    if (id === 'slug') shown.push({ label: 'Slug', value: state.slug });
+    if (id === 'display')
+      shown.push({ label: 'Display name', value: state.display || `${state.name}  (kept)` });
+    if (id === 'team')
+      shown.push({ label: 'Apple Team ID', value: state.appleTeamId || 'skipped' });
+  }
+  return shown;
+}

package/src/index.tsx

@@ -0,0 +1,212 @@
+/**
+ * create-lesa-app 진입점.
+ *
+ *   create-lesa-app <dir> [--template <path>]
+ *
+ * 템플릿 경로는 `--template` → `LESA_TEMPLATE_DIR` → 형제 폴더 순으로 찾는다
+ * (레포가 private 이라 tarball 이 아니라 로컬 복사다 — `docs/cli.md`).
+ */
+
+import { Box, render, Text, useApp, useStdout } from 'ink';
+import { existsSync, readFileSync } from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import { fileURLToPath } from 'node:url';
+import React, { useEffect, useState } from 'react';
+
+import { createApp, CREATE_STEPS } from './create.ts';
+import { Intro } from './intro.tsx';
+import { Frame, Prompt, railColors as colors, Section, Steps } from './ui.tsx';
+
+import type { CreateProgress, CreateResult } from './create.ts';
+import type { PromptResult } from './ui.tsx';
+
+const USAGE = `create-lesa-app — create a project from the lesa Expo template
+
+  create-lesa-app <dir> [options]
+
+Options
+  --template <path>   template directory (else $LESA_TEMPLATE_DIR, else a
+                      sibling "lesa-expo-template" folder)
+  -h, --help          show this
+  -v, --version       print the version
+
+It asks for an app name, a slug when the name is not lowercase ASCII, and an
+optional Apple Team ID, then copies the template's git-tracked files, fills in
+env-candidates.ts and makes the first commit.`;
+
+class ArgError extends Error {}
+
+function parseArgs(argv: string[]) {
+  const rest = argv.slice(2);
+  let templateDir = process.env.LESA_TEMPLATE_DIR ?? '';
+  const positional: string[] = [];
+
+  for (let index = 0; index < rest.length; index++) {
+    const arg = rest[index];
+    if (arg === '--help' || arg === '-h') return { help: true };
+    if (arg === '--version' || arg === '-v') return { version: true };
+    if (arg === '--template') {
+      templateDir = rest[++index] ?? '';
+      if (!templateDir) throw new ArgError('--template needs a path');
+      continue;
+    }
+    // 알 수 없는 플래그를 위치 인자로 삼으면 오타가 디렉터리 이름이 된다.
+    if (arg.startsWith('-')) throw new ArgError(`unknown option: ${arg}`);
+    positional.push(arg);
+  }
+
+  if (positional.length > 1) throw new ArgError(`unexpected argument: ${positional[1]}`);
+  return { targetDir: positional[0] ?? '', templateDir };
+}
+
+const packageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+
+/** 템플릿 폴더로 보이는지 — 형제 폴더를 기본값으로 쓸지 판단한다. */
+function looksLikeTemplate(dir: string): boolean {
+  return existsSync(path.join(dir, 'env-candidates.ts')) && existsSync(path.join(dir, 'app.config.ts'));
+}
+
+/**
+ * `--template` → `$LESA_TEMPLATE_DIR` → 형제 `lesa-expo-template` → 빈 문자열(= GitHub).
+ * 빈 문자열은 실패가 아니다 — `create.ts` 가 tarball 을 받는다.
+ */
+function resolveTemplateDir(explicit: string): string {
+  if (explicit) return path.resolve(explicit);
+  const sibling = path.resolve(packageRoot, '../lesa-expo-template');
+  return looksLikeTemplate(sibling) ? sibling : '';
+}
+
+type Stage =
+  | { kind: 'input' }
+  | { kind: 'working'; progress: CreateProgress; skipped: number[] }
+  | { kind: 'done'; result: CreateResult };
+
+/** 워드마크(20줄) + 가장 긴 화면이 들어갈 높이. 모자라면 애니메이션을 멈춘다. */
+const ANIMATE_MIN_ROWS = 46;
+
+function App({ targetDir, templateDir }: { targetDir: string; templateDir: string }) {
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+  const [stage, setStage] = useState<Stage>({ kind: 'input' });
+  const [error, setError] = useState<string | null>(null);
+
+  const settled = error !== null || stage.kind === 'done';
+
+  // 끝나면 스스로 빠져나온다 — 인트로 타이머와 raw mode 가 이벤트 루프를 붙잡고 있어서
+  // exit() 를 부르지 않으면 프로세스가 안 죽는다.
+  useEffect(() => {
+    if (settled) exit();
+  }, [exit, settled]);
+
+  const onDone = (input: PromptResult) => {
+    setStage({ kind: 'working', progress: { index: 0 }, skipped: [] });
+    void createApp({
+      ...input,
+      onStep: progress =>
+        setStage(previous => ({
+          kind: 'working',
+          progress,
+          // 건너뛴 단계는 누적한다 — 다음 단계로 넘어가도 표시가 남아야 한다.
+          skipped:
+            previous.kind === 'working' && progress.skipped
+              ? [...new Set([...previous.skipped, progress.index])]
+              : previous.kind === 'working'
+                ? previous.skipped
+                : [],
+        })),
+      targetDir,
+      templateDir,
+    })
+      .then(result => setStage({ kind: 'done', result }))
+      .catch((cause: unknown) => {
+        setError(cause instanceof Error ? cause.message : String(cause));
+        process.exitCode = 1;
+      });
+  };
+
+  return (
+    <Box flexDirection="column">
+      {/* 출력이 터미널 높이를 넘으면 ink 가 제자리 갱신을 못 해 매 프레임이 쌓인다.
+          완료·실패 화면은 가장 길므로 그때도 멈춘다. */}
+      <Intro loop={!settled && (stdout?.rows ?? 0) >= ANIMATE_MIN_ROWS} />
+      {error ? (
+        <Frame footer="Failed — nothing was left behind">
+          <Section color={colors.error} marker="■" title="Failed to create the project">
+            <Text color={colors.softText}>{`  ${error}`}</Text>
+          </Section>
+        </Frame>
+      ) : stage.kind === 'working' ? (
+        <Frame footer={`Creating ${path.basename(targetDir)}…`}>
+          <Steps
+            current={stage.progress.index}
+            labels={CREATE_STEPS}
+            note={stage.progress.note}
+            progress={
+              stage.progress.total
+                ? { done: stage.progress.done ?? 0, total: stage.progress.total }
+                : undefined
+            }
+            skipped={new Set(stage.skipped)}
+          />
+        </Frame>
+      ) : stage.kind === 'done' ? (
+        <Frame footer="Done">
+          <Section
+            color={colors.done}
+            marker="◆"
+            title={`Created ${path.basename(stage.result.targetDir)}`}
+          />
+          <Steps
+            current={CREATE_STEPS.length}
+            details={{
+              0:
+                stage.result.receipt.source === 'github'
+                  ? 'from GitHub'
+                  : `${stage.result.receipt.fileCount} files`,
+              1: 'identity substituted',
+              3: '1 commit',
+            }}
+            labels={CREATE_STEPS}
+            skipped={new Set(stage.result.receipt.wroteEnvFile ? [] : [2])}
+          />
+          <Section color={colors.done} marker="◇" title="Next steps">
+            {stage.result.nextSteps.map(step => (
+              <Text color={colors.softText} key={step}>{`  ${step}`}</Text>
+            ))}
+          </Section>
+        </Frame>
+      ) : (
+        <Prompt onDone={onDone} />
+      )}
+    </Box>
+  );
+}
+
+let args: ReturnType<typeof parseArgs>;
+try {
+  args = parseArgs(process.argv);
+} catch (error) {
+  console.error(`${error instanceof Error ? error.message : String(error)}\n\n${USAGE}`);
+  process.exit(1);
+}
+
+if (args.help) {
+  console.log(USAGE);
+  process.exit(0);
+}
+if (args.version) {
+  const pkg = JSON.parse(readFileSync(path.join(packageRoot, 'package.json'), 'utf8')) as {
+    version: string;
+  };
+  console.log(pkg.version);
+  process.exit(0);
+}
+if (!args.targetDir) {
+  console.error(USAGE);
+  process.exit(1);
+}
+
+const templateDir = resolveTemplateDir(args.templateDir);
+
+render(<App targetDir={path.resolve(args.targetDir)} templateDir={templateDir} />);

package/src/intro.tsx

@@ -0,0 +1,45 @@
+/**
+ * ASCII 워드마크 — `assets/lesa-appkit.asciimtn` 를 `scripts/bake-intro.mjs` 로 접은 것.
+ * 글리프는 10프레임 모두 같고 색만 흐른다. 무한 루프로 돈다 — 프레임 state 를 이 컴포넌트가
+ * 들고 있어서 형제인 프롬프트는 리렌더되지 않는다(입력 커서가 영향받지 않는다).
+ */
+
+import { Box, Text } from 'ink';
+import fs from 'node:fs';
+import React, { useEffect, useState } from 'react';
+
+type Run = [text: string, color: string | null];
+type Frame = { ms: number; rows: Run[][] };
+
+const { frames } = JSON.parse(
+  fs.readFileSync(new URL('./assets/intro.json', import.meta.url), 'utf8'),
+) as { frames: Frame[] };
+
+export function Intro({ loop = true }: { loop?: boolean }) {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    const last = frames.length - 1;
+    // loop 이 꺼지면 정착 프레임으로 붙이고 타이머를 놓는다(호출부가 높이를 보고 끈다).
+    if (!loop) {
+      setIndex(last);
+      return;
+    }
+    const timer = setTimeout(() => setIndex(index >= last ? 0 : index + 1), frames[index].ms);
+    return () => clearTimeout(timer);
+  }, [index, loop]);
+
+  return (
+    <Box flexDirection="column" paddingLeft={2}>
+      {frames[index].rows.map((runs, y) => (
+        <Text key={y}>
+          {runs.map(([text, color], run) => (
+            <Text color={color ?? undefined} key={run}>
+              {text}
+            </Text>
+          ))}
+        </Text>
+      ))}
+    </Box>
+  );
+}