@ezpg/app-ui 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ezpg/app-ui
 
+## 0.9.0
+
+### Minor Changes
+
+- IntroTemplate(첫 실행 소개 넘김 화면 — 장마다 그림 · 제목, 넘김 점, 다음 · 시작하기 주 버튼, 마지막 장 전까지 작은 Skip)
+
 ## 0.8.0
 
 ### Minor Changes

package/lib/module/templates/index.js

@@ -3,6 +3,7 @@
 export { DetailTemplate, DashboardTemplate, FormTemplate, MenuTemplate } from "./scroll-templates.js";
 export { EditorTemplate } from "./editor-template.js";
 export { ListTemplate } from "./list-template.js";
+export { IntroTemplate } from "./intro-template.js";
 export { ResultTemplate } from "./result-template.js";
 export { SystemTemplate } from "./system-template.js";
 export { ListSection } from "./parts.js";

package/lib/module/templates/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["DetailTemplate","DashboardTemplate","FormTemplate","MenuTemplate","EditorTemplate","ListTemplate","ResultTemplate","SystemTemplate","ListSection","Group"],"sourceRoot":"../../../src","sources":["templates/index.ts"],"mappings":";;AAAA,SACEA,cAAc,EACdC,iBAAiB,EACjBC,YAAY,EACZC,YAAY,QACP,uBAAoB;AAO3B,SAASC,cAAc,QAAQ,sBAAmB;AAMlD,SAASC,YAAY,QAAQ,oBAAiB;AAE9C,SAASC,cAAc,QAAQ,sBAAmB;AAElD,SAASC,cAAc,QAAQ,sBAAmB;AAElD,SAASC,WAAW,QAAQ,YAAS;AACrC,SAASC,KAAK,QAAQ,YAAS","ignoreList":[]}
+{"version":3,"names":["DetailTemplate","DashboardTemplate","FormTemplate","MenuTemplate","EditorTemplate","ListTemplate","IntroTemplate","ResultTemplate","SystemTemplate","ListSection","Group"],"sourceRoot":"../../../src","sources":["templates/index.ts"],"mappings":";;AAAA,SACEA,cAAc,EACdC,iBAAiB,EACjBC,YAAY,EACZC,YAAY,QACP,uBAAoB;AAO3B,SAASC,cAAc,QAAQ,sBAAmB;AAMlD,SAASC,YAAY,QAAQ,oBAAiB;AAE9C,SAASC,aAAa,QAAQ,qBAAkB;AAEhD,SAASC,cAAc,QAAQ,sBAAmB;AAElD,SAASC,cAAc,QAAQ,sBAAmB;AAElD,SAASC,WAAW,QAAQ,YAAS;AACrC,SAASC,KAAK,QAAQ,YAAS","ignoreList":[]}

package/lib/module/templates/intro-template.js

@@ -0,0 +1,136 @@
+"use strict";
+
+import { useRef, useState } from 'react';
+import { ScrollView, View } from 'react-native';
+import { Button } from "../components/button/button.js";
+import { Text } from "../components/text/text.js";
+import { PressableBase } from "../internal/pressable-base.js";
+import { useTheme } from "../theme/theme-provider.js";
+import { makeStyles } from "../utils/styles.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles(t => ({
+  root: {
+    flex: 1,
+    backgroundColor: t.colors.background
+  },
+  top: {
+    height: t.minTouchSize,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingHorizontal: t.layout.screenX
+  },
+  skip: {
+    minWidth: t.minTouchSize,
+    alignItems: 'flex-end',
+    justifyContent: 'center'
+  },
+  pager: {
+    flex: 1
+  },
+  page: {
+    flex: 1,
+    justifyContent: 'center',
+    gap: t.layout.titleGap,
+    paddingHorizontal: t.layout.screenX
+  },
+  title: {
+    textAlign: 'center'
+  },
+  footer: {
+    gap: t.layout.titleGap,
+    paddingHorizontal: t.layout.screenX,
+    paddingTop: t.layout.footerTop
+  },
+  dots: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: t.space[2]
+  },
+  dot: {
+    width: t.space[2],
+    height: t.space[2],
+    borderRadius: t.radius.full,
+    backgroundColor: t.colors.input
+  },
+  dotOn: {
+    width: t.space[5],
+    backgroundColor: t.colors.primary
+  }
+}));
+export function IntroTemplate({
+  pages,
+  onDone,
+  nextLabel = '다음',
+  doneLabel = '시작하기',
+  skipLabel = 'Skip',
+  bottomInset = 0
+}) {
+  const t = useTheme();
+  const s = useStyles();
+  const pager = useRef(null);
+  const [width, setWidth] = useState(0);
+  const [index, setIndex] = useState(0);
+  const last = index >= pages.length - 1;
+  const art = Math.max(0, width - t.layout.screenX * 2);
+  const next = () => {
+    if (last) {
+      onDone();
+      return;
+    }
+    pager.current?.scrollTo({
+      x: (index + 1) * width,
+      animated: true
+    });
+    setIndex(index + 1);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: s.root,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: s.top,
+      children: last ? null : /*#__PURE__*/_jsx(PressableBase, {
+        onPress: onDone,
+        accessibilityLabel: skipLabel,
+        style: s.skip,
+        children: /*#__PURE__*/_jsx(Text, {
+          variant: "caption",
+          tone: "muted",
+          children: skipLabel
+        })
+      })
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      ref: pager,
+      horizontal: true,
+      pagingEnabled: true,
+      showsHorizontalScrollIndicator: false,
+      onLayout: e => setWidth(e.nativeEvent.layout.width),
+      onMomentumScrollEnd: e => width && setIndex(Math.round(e.nativeEvent.contentOffset.x / width)),
+      style: s.pager,
+      children: pages.map(page => /*#__PURE__*/_jsxs(View, {
+        style: [s.page, {
+          width
+        }],
+        children: [art ? page.art(art) : null, /*#__PURE__*/_jsx(Text, {
+          variant: "screenTitle",
+          accessibilityRole: "header",
+          style: s.title,
+          children: page.title
+        })]
+      }, page.key))
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [s.footer, {
+        paddingBottom: t.layout.footerBottom + bottomInset
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: s.dots,
+        children: pages.map((page, i) => /*#__PURE__*/_jsx(View, {
+          style: [s.dot, i === index && s.dotOn]
+        }, page.key))
+      }), /*#__PURE__*/_jsx(Button, {
+        size: "lg",
+        onPress: next,
+        children: last ? doneLabel : nextLabel
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=intro-template.js.map

package/lib/module/templates/intro-template.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useRef","useState","ScrollView","View","Button","Text","PressableBase","useTheme","makeStyles","jsx","_jsx","jsxs","_jsxs","useStyles","t","root","flex","backgroundColor","colors","background","top","height","minTouchSize","flexDirection","justifyContent","paddingHorizontal","layout","screenX","skip","minWidth","alignItems","pager","page","gap","titleGap","title","textAlign","footer","paddingTop","footerTop","dots","space","dot","width","borderRadius","radius","full","input","dotOn","primary","IntroTemplate","pages","onDone","nextLabel","doneLabel","skipLabel","bottomInset","s","setWidth","index","setIndex","last","length","art","Math","max","next","current","scrollTo","x","animated","style","children","onPress","accessibilityLabel","variant","tone","ref","horizontal","pagingEnabled","showsHorizontalScrollIndicator","onLayout","e","nativeEvent","onMomentumScrollEnd","round","contentOffset","map","accessibilityRole","key","paddingBottom","footerBottom","i","size"],"sourceRoot":"../../../src","sources":["templates/intro-template.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/templates/index.d.ts

@@ -4,6 +4,8 @@ export { EditorTemplate } from './editor-template.js';
 export type { EditorSheet, EditorTemplateProps, EditorTool, } from './editor-template.js';
 export { ListTemplate } from './list-template.js';
 export type { ListTemplateProps, ListTemplateStatus } from './list-template.js';
+export { IntroTemplate } from './intro-template.js';
+export type { IntroPage, IntroTemplateProps } from './intro-template.js';
 export { ResultTemplate } from './result-template.js';
 export type { ResultPreview, ResultTemplateProps } from './result-template.js';
 export { SystemTemplate } from './system-template.js';

package/lib/typescript/src/templates/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,iBAAiB,EACjB,YAAY,EACZ,YAAY,GACb,MAAM,uBAAoB,CAAC;AAC5B,YAAY,EACV,sBAAsB,EACtB,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,uBAAoB,CAAC;AAC5B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAmB,CAAC;AACnD,YAAY,EACV,WAAW,EACX,mBAAmB,EACnB,UAAU,GACX,MAAM,sBAAmB,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAiB,CAAC;AAC/C,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,oBAAiB,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAmB,CAAC;AACnD,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,sBAAmB,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAmB,CAAC;AACnD,YAAY,EAAE,mBAAmB,EAAE,MAAM,sBAAmB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,YAAS,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAS,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,YAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,iBAAiB,EACjB,YAAY,EACZ,YAAY,GACb,MAAM,uBAAoB,CAAC;AAC5B,YAAY,EACV,sBAAsB,EACtB,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,uBAAoB,CAAC;AAC5B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAmB,CAAC;AACnD,YAAY,EACV,WAAW,EACX,mBAAmB,EACnB,UAAU,GACX,MAAM,sBAAmB,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAiB,CAAC;AAC/C,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,oBAAiB,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAkB,CAAC;AACjD,YAAY,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,qBAAkB,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAmB,CAAC;AACnD,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,sBAAmB,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAmB,CAAC;AACnD,YAAY,EAAE,mBAAmB,EAAE,MAAM,sBAAmB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,YAAS,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAS,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,YAAS,CAAC"}

package/lib/typescript/src/templates/intro-template.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+export type IntroPage = {
+    key: string;
+    title: string;
+    art: (width: number) => ReactNode;
+};
+export type IntroTemplateProps = {
+    pages: readonly IntroPage[];
+    onDone: () => void;
+    nextLabel?: string;
+    doneLabel?: string;
+    skipLabel?: string;
+    bottomInset?: number;
+};
+export declare function IntroTemplate({ pages, onDone, nextLabel, doneLabel, skipLabel, bottomInset, }: IntroTemplateProps): import("react").JSX.Element;
+//# sourceMappingURL=intro-template.d.ts.map

package/lib/typescript/src/templates/intro-template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"intro-template.d.ts","sourceRoot":"","sources":["../../../../src/templates/intro-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAc5E,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,SAAS,SAAS,EAAE,CAAC;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA0CF,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,SAAgB,EAChB,SAAkB,EAClB,SAAkB,EAClB,WAAe,GAChB,EAAE,kBAAkB,+BA4EpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ezpg/app-ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "React Native UI components for EZPG partner apps",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/templates/index.ts

@@ -18,6 +18,8 @@ export type {
 } from './editor-template';
 export { ListTemplate } from './list-template';
 export type { ListTemplateProps, ListTemplateStatus } from './list-template';
+export { IntroTemplate } from './intro-template';
+export type { IntroPage, IntroTemplateProps } from './intro-template';
 export { ResultTemplate } from './result-template';
 export type { ResultPreview, ResultTemplateProps } from './result-template';
 export { SystemTemplate } from './system-template';

package/src/templates/intro-template.tsx

@@ -0,0 +1,153 @@
+import { useRef, useState, type ComponentRef, type ReactNode } from 'react';
+import {
+  ScrollView,
+  View,
+  type LayoutChangeEvent,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+} from 'react-native';
+import { Button } from '../components/button/button';
+import { Text } from '../components/text/text';
+import { PressableBase } from '../internal/pressable-base';
+import { useTheme } from '../theme/theme-provider';
+import { makeStyles } from '../utils/styles';
+
+export type IntroPage = {
+  key: string;
+  title: string;
+  art: (width: number) => ReactNode;
+};
+
+export type IntroTemplateProps = {
+  pages: readonly IntroPage[];
+  onDone: () => void;
+  nextLabel?: string;
+  doneLabel?: string;
+  skipLabel?: string;
+  bottomInset?: number;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { flex: 1, backgroundColor: t.colors.background },
+  top: {
+    height: t.minTouchSize,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingHorizontal: t.layout.screenX,
+  },
+  skip: {
+    minWidth: t.minTouchSize,
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+  pager: { flex: 1 },
+  page: {
+    flex: 1,
+    justifyContent: 'center',
+    gap: t.layout.titleGap,
+    paddingHorizontal: t.layout.screenX,
+  },
+  title: { textAlign: 'center' },
+  footer: {
+    gap: t.layout.titleGap,
+    paddingHorizontal: t.layout.screenX,
+    paddingTop: t.layout.footerTop,
+  },
+  dots: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: t.space[2],
+  },
+  dot: {
+    width: t.space[2],
+    height: t.space[2],
+    borderRadius: t.radius.full,
+    backgroundColor: t.colors.input,
+  },
+  dotOn: { width: t.space[5], backgroundColor: t.colors.primary },
+}));
+
+export function IntroTemplate({
+  pages,
+  onDone,
+  nextLabel = '다음',
+  doneLabel = '시작하기',
+  skipLabel = 'Skip',
+  bottomInset = 0,
+}: IntroTemplateProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const pager = useRef<ComponentRef<typeof ScrollView>>(null);
+  const [width, setWidth] = useState(0);
+  const [index, setIndex] = useState(0);
+  const last = index >= pages.length - 1;
+  const art = Math.max(0, width - t.layout.screenX * 2);
+
+  const next = () => {
+    if (last) {
+      onDone();
+      return;
+    }
+    pager.current?.scrollTo({ x: (index + 1) * width, animated: true });
+    setIndex(index + 1);
+  };
+
+  return (
+    <View style={s.root}>
+      <View style={s.top}>
+        {last ? null : (
+          <PressableBase
+            onPress={onDone}
+            accessibilityLabel={skipLabel}
+            style={s.skip}
+          >
+            <Text variant="caption" tone="muted">
+              {skipLabel}
+            </Text>
+          </PressableBase>
+        )}
+      </View>
+      <ScrollView
+        ref={pager}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        onLayout={(e: LayoutChangeEvent) =>
+          setWidth(e.nativeEvent.layout.width)
+        }
+        onMomentumScrollEnd={(e: NativeSyntheticEvent<NativeScrollEvent>) =>
+          width && setIndex(Math.round(e.nativeEvent.contentOffset.x / width))
+        }
+        style={s.pager}
+      >
+        {pages.map((page) => (
+          <View key={page.key} style={[s.page, { width }]}>
+            {art ? page.art(art) : null}
+            <Text
+              variant="screenTitle"
+              accessibilityRole="header"
+              style={s.title}
+            >
+              {page.title}
+            </Text>
+          </View>
+        ))}
+      </ScrollView>
+      <View
+        style={[
+          s.footer,
+          { paddingBottom: t.layout.footerBottom + bottomInset },
+        ]}
+      >
+        <View style={s.dots}>
+          {pages.map((page, i) => (
+            <View key={page.key} style={[s.dot, i === index && s.dotOn]} />
+          ))}
+        </View>
+        <Button size="lg" onPress={next}>
+          {last ? doneLabel : nextLabel}
+        </Button>
+      </View>
+    </View>
+  );
+}