@ezpg/app-ui 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ezpg/app-ui
 
+## 0.6.0
+
+### Minor Changes
+
+- f0128d4: ProductRow(상품 목록 행: 썸네일 · 이름 · 가격(할인 전 가격) · 상태 배지 · 오른쪽 자리). 썸네일은 목록 행 한 줄 높이(Material 3 목록 앞 이미지 56).
+
 ## 0.5.0
 
 ### Minor Changes

package/lib/module/blocks/index.js

@@ -13,6 +13,7 @@ export * from "./oauth-buttons/index.js";
 export * from "./order-card/index.js";
 export * from "./plan-card/index.js";
 export * from "./product-list-empty/index.js";
+export * from "./product-row/index.js";
 export * from "./review-row/index.js";
 export * from "./selection-bar/index.js";
 export * from "./service-state-banner/index.js";

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

@@ -1 +1 @@
-{"version":3,"names":["formatDeadline","formatManwon"],"sourceRoot":"../../../src","sources":["blocks/index.tsx"],"mappings":";;AAAA,cAAc,+BAAsB;AACpC,cAAc,2BAAkB;AAChC,cAAc,sBAAa;AAC3B,cAAc,gCAAuB;AACrC,cAAc,gCAAuB;AACrC,cAAc,0BAAiB;AAC/B,cAAc,gCAAuB;AACrC,cAAc,wBAAe;AAC7B,cAAc,gCAAuB;AACrC,cAAc,0BAAiB;AAC/B,cAAc,uBAAc;AAC5B,cAAc,sBAAa;AAC3B,cAAc,+BAAsB;AACpC,cAAc,uBAAc;AAC5B,cAAc,0BAAiB;AAC/B,cAAc,iCAAwB;AACtC,cAAc,kCAAyB;AACvC,cAAc,+BAAsB;AACpC,cAAc,sBAAa;AAC3B,cAAc,wBAAe;AAC7B,cAAc,6BAAoB;AAClC,SAASA,cAAc,EAAEC,YAAY,QAAQ,sBAAmB","ignoreList":[]}
+{"version":3,"names":["formatDeadline","formatManwon"],"sourceRoot":"../../../src","sources":["blocks/index.tsx"],"mappings":";;AAAA,cAAc,+BAAsB;AACpC,cAAc,2BAAkB;AAChC,cAAc,sBAAa;AAC3B,cAAc,gCAAuB;AACrC,cAAc,gCAAuB;AACrC,cAAc,0BAAiB;AAC/B,cAAc,gCAAuB;AACrC,cAAc,wBAAe;AAC7B,cAAc,gCAAuB;AACrC,cAAc,0BAAiB;AAC/B,cAAc,uBAAc;AAC5B,cAAc,sBAAa;AAC3B,cAAc,+BAAsB;AACpC,cAAc,wBAAe;AAC7B,cAAc,uBAAc;AAC5B,cAAc,0BAAiB;AAC/B,cAAc,iCAAwB;AACtC,cAAc,kCAAyB;AACvC,cAAc,+BAAsB;AACpC,cAAc,sBAAa;AAC3B,cAAc,wBAAe;AAC7B,cAAc,6BAAoB;AAClC,SAASA,cAAc,EAAEC,YAAY,QAAQ,sBAAmB","ignoreList":[]}

package/lib/module/blocks/product-row/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { ProductRow } from "./product-row.js";
+//# sourceMappingURL=index.js.map

package/lib/module/blocks/product-row/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ProductRow"],"sourceRoot":"../../../../src","sources":["blocks/product-row/index.ts"],"mappings":";;AAAA,SACEA,UAAU,QAGL,kBAAe","ignoreList":[]}

package/lib/module/blocks/product-row/product-row.js

@@ -0,0 +1,92 @@
+"use strict";
+
+import { View } from 'react-native';
+import { Photo } from "../../components/photo/photo.js";
+import { formatPrice, Price } from "../../components/price/price.js";
+import { StatusBadge } from "../../components/status-badge/status-badge.js";
+import { Text } from "../../components/text/text.js";
+import { PressableBase } from "../../internal/pressable-base.js";
+import { makeStyles } from "../../utils/styles.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const useStyles = makeStyles(t => ({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: t.space[3],
+    minHeight: t.listRow.threeLine,
+    paddingVertical: t.space[2],
+    paddingHorizontal: t.layout.screenX,
+    backgroundColor: t.colors.background
+  },
+  pressed: {
+    backgroundColor: t.colors.muted
+  },
+  thumb: {
+    width: t.listRow.oneLine
+  },
+  empty: {
+    width: t.listRow.oneLine,
+    height: t.listRow.oneLine,
+    borderRadius: t.radius.md,
+    backgroundColor: t.colors.muted
+  },
+  body: {
+    flex: 1,
+    gap: t.space[1]
+  }
+}));
+export function ProductRow({
+  title,
+  price,
+  originalPrice,
+  imageUri,
+  status,
+  trailing,
+  onPress,
+  style
+}) {
+  const s = useStyles();
+  const label = [title, formatPrice(price), status?.label].filter(Boolean).join(', ');
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(View, {
+      style: s.thumb,
+      children: imageUri ? /*#__PURE__*/_jsx(Photo, {
+        source: {
+          uri: imageUri
+        },
+        accessible: false
+      }) : /*#__PURE__*/_jsx(View, {
+        style: s.empty
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: s.body,
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "bodyLg",
+        numberOfLines: 1,
+        children: title
+      }), /*#__PURE__*/_jsx(Price, {
+        value: price,
+        originalValue: originalPrice,
+        variant: "label"
+      }), status ? /*#__PURE__*/_jsx(StatusBadge, {
+        tone: status.tone,
+        children: status.label
+      }) : null]
+    }), trailing]
+  });
+  if (!onPress) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [s.row, style],
+      accessibilityLabel: label,
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(PressableBase, {
+    onPress: onPress,
+    accessibilityLabel: label,
+    pressedStyle: s.pressed,
+    style: [s.row, style],
+    children: content
+  });
+}
+//# sourceMappingURL=product-row.js.map

package/lib/module/blocks/product-row/product-row.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","Photo","formatPrice","Price","StatusBadge","Text","PressableBase","makeStyles","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useStyles","t","row","flexDirection","alignItems","gap","space","minHeight","listRow","threeLine","paddingVertical","paddingHorizontal","layout","screenX","backgroundColor","colors","background","pressed","muted","thumb","width","oneLine","empty","height","borderRadius","radius","md","body","flex","ProductRow","title","price","originalPrice","imageUri","status","trailing","onPress","style","s","label","filter","Boolean","join","content","children","source","uri","accessible","variant","numberOfLines","value","originalValue","tone","accessibilityLabel","pressedStyle"],"sourceRoot":"../../../../src","sources":["blocks/product-row/product-row.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -11,6 +11,7 @@ export * from './oauth-buttons/index.js';
 export * from './order-card/index.js';
 export * from './plan-card/index.js';
 export * from './product-list-empty/index.js';
+export * from './product-row/index.js';
 export * from './review-row/index.js';
 export * from './selection-bar/index.js';
 export * from './service-state-banner/index.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/blocks/index.tsx"],"names":[],"mappings":"AAAA,cAAc,+BAAsB,CAAC;AACrC,cAAc,2BAAkB,CAAC;AACjC,cAAc,sBAAa,CAAC;AAC5B,cAAc,gCAAuB,CAAC;AACtC,cAAc,gCAAuB,CAAC;AACtC,cAAc,0BAAiB,CAAC;AAChC,cAAc,gCAAuB,CAAC;AACtC,cAAc,wBAAe,CAAC;AAC9B,cAAc,gCAAuB,CAAC;AACtC,cAAc,0BAAiB,CAAC;AAChC,cAAc,uBAAc,CAAC;AAC7B,cAAc,sBAAa,CAAC;AAC5B,cAAc,+BAAsB,CAAC;AACrC,cAAc,uBAAc,CAAC;AAC7B,cAAc,0BAAiB,CAAC;AAChC,cAAc,iCAAwB,CAAC;AACvC,cAAc,kCAAyB,CAAC;AACxC,cAAc,+BAAsB,CAAC;AACrC,cAAc,sBAAa,CAAC;AAC5B,cAAc,wBAAe,CAAC;AAC9B,cAAc,6BAAoB,CAAC;AACnC,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,sBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/blocks/index.tsx"],"names":[],"mappings":"AAAA,cAAc,+BAAsB,CAAC;AACrC,cAAc,2BAAkB,CAAC;AACjC,cAAc,sBAAa,CAAC;AAC5B,cAAc,gCAAuB,CAAC;AACtC,cAAc,gCAAuB,CAAC;AACtC,cAAc,0BAAiB,CAAC;AAChC,cAAc,gCAAuB,CAAC;AACtC,cAAc,wBAAe,CAAC;AAC9B,cAAc,gCAAuB,CAAC;AACtC,cAAc,0BAAiB,CAAC;AAChC,cAAc,uBAAc,CAAC;AAC7B,cAAc,sBAAa,CAAC;AAC5B,cAAc,+BAAsB,CAAC;AACrC,cAAc,wBAAe,CAAC;AAC9B,cAAc,uBAAc,CAAC;AAC7B,cAAc,0BAAiB,CAAC;AAChC,cAAc,iCAAwB,CAAC;AACvC,cAAc,kCAAyB,CAAC;AACxC,cAAc,+BAAsB,CAAC;AACrC,cAAc,sBAAa,CAAC;AAC5B,cAAc,wBAAe,CAAC;AAC9B,cAAc,6BAAoB,CAAC;AACnC,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,sBAAmB,CAAC"}

package/lib/typescript/src/blocks/product-row/index.d.ts

@@ -0,0 +1,2 @@
+export { ProductRow, type ProductRowProps, type ProductRowStatus, } from './product-row.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/blocks/product-row/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/product-row/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,gBAAgB,GACtB,MAAM,kBAAe,CAAC"}

package/lib/typescript/src/blocks/product-row/product-row.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type StatusBadgeTone } from '../../components/status-badge/status-badge.js';
+export type ProductRowStatus = {
+    label: string;
+    tone?: StatusBadgeTone;
+};
+export type ProductRowProps = {
+    title: string;
+    price: number;
+    originalPrice?: number;
+    imageUri?: string | null;
+    status?: ProductRowStatus;
+    trailing?: ReactNode;
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+};
+export declare function ProductRow({ title, price, originalPrice, imageUri, status, trailing, onPress, style, }: ProductRowProps): import("react").JSX.Element;
+//# sourceMappingURL=product-row.d.ts.map

package/lib/typescript/src/blocks/product-row/product-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-row.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/product-row/product-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,+CAA4C,CAAC;AAKpD,MAAM,MAAM,gBAAgB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,eAAe,CAAA;CAAE,CAAC;AAEzE,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAuBF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,aAAa,EACb,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,KAAK,GACN,EAAE,eAAe,+BA2CjB"}

package/package.json

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

package/src/blocks/index.tsx

@@ -11,6 +11,7 @@ export * from './oauth-buttons';
 export * from './order-card';
 export * from './plan-card';
 export * from './product-list-empty';
+export * from './product-row';
 export * from './review-row';
 export * from './selection-bar';
 export * from './service-state-banner';

package/src/blocks/product-row/index.ts

@@ -0,0 +1,5 @@
+export {
+  ProductRow,
+  type ProductRowProps,
+  type ProductRowStatus,
+} from './product-row';

package/src/blocks/product-row/product-row.tsx

@@ -0,0 +1,99 @@
+import type { ReactNode } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Photo } from '../../components/photo/photo';
+import { formatPrice, Price } from '../../components/price/price';
+import {
+  StatusBadge,
+  type StatusBadgeTone,
+} from '../../components/status-badge/status-badge';
+import { Text } from '../../components/text/text';
+import { PressableBase } from '../../internal/pressable-base';
+import { makeStyles } from '../../utils/styles';
+
+export type ProductRowStatus = { label: string; tone?: StatusBadgeTone };
+
+export type ProductRowProps = {
+  title: string;
+  price: number;
+  originalPrice?: number;
+  imageUri?: string | null;
+  status?: ProductRowStatus;
+  trailing?: ReactNode;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: t.space[3],
+    minHeight: t.listRow.threeLine,
+    paddingVertical: t.space[2],
+    paddingHorizontal: t.layout.screenX,
+    backgroundColor: t.colors.background,
+  },
+  pressed: { backgroundColor: t.colors.muted },
+  thumb: { width: t.listRow.oneLine },
+  empty: {
+    width: t.listRow.oneLine,
+    height: t.listRow.oneLine,
+    borderRadius: t.radius.md,
+    backgroundColor: t.colors.muted,
+  },
+  body: { flex: 1, gap: t.space[1] },
+}));
+
+export function ProductRow({
+  title,
+  price,
+  originalPrice,
+  imageUri,
+  status,
+  trailing,
+  onPress,
+  style,
+}: ProductRowProps) {
+  const s = useStyles();
+  const label = [title, formatPrice(price), status?.label]
+    .filter(Boolean)
+    .join(', ');
+  const content = (
+    <>
+      <View style={s.thumb}>
+        {imageUri ? (
+          <Photo source={{ uri: imageUri }} accessible={false} />
+        ) : (
+          <View style={s.empty} />
+        )}
+      </View>
+      <View style={s.body}>
+        <Text variant="bodyLg" numberOfLines={1}>
+          {title}
+        </Text>
+        <Price value={price} originalValue={originalPrice} variant="label" />
+        {status ? (
+          <StatusBadge tone={status.tone}>{status.label}</StatusBadge>
+        ) : null}
+      </View>
+      {trailing}
+    </>
+  );
+  if (!onPress) {
+    return (
+      <View style={[s.row, style]} accessibilityLabel={label}>
+        {content}
+      </View>
+    );
+  }
+  return (
+    <PressableBase
+      onPress={onPress}
+      accessibilityLabel={label}
+      pressedStyle={s.pressed}
+      style={[s.row, style]}
+    >
+      {content}
+    </PressableBase>
+  );
+}