@homefile/components-v2 2.26.5 → 2.26.6

package/dist/assets/locales/en/index.json

@@ -453,6 +453,13 @@
     "viewDetails": "View All"
   },
   "homeItems": {
+    "addDetail": "Add more detail",
+    "addDetailsManually": "You can enter item detail manually",
+    "itemsFound": "We’ve found {{ count }} items with that serial number.",
+    "noneAbove": "None of the above, add more detail",
+    "noItemsFound": "We didn’t find your item, but don’t worry!",
+    "pleaseSelect": "Please select your item from the list below. This also double confirms your selection.",
+    "showing": "Showing {{ count }} of {{ total }}",
     "title": "Viewing Home Item"
   },
   "homeHeader": {

package/dist/components/homeItems/HomeItemList.d.ts

@@ -0,0 +1,2 @@
+import { HomeItemListI } from '../../interfaces';
+export declare const HomeItemList: ({ items, onChange }: HomeItemListI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeItems/HomeItemList.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Container, Stack, Text, useRadioGroup } from '@chakra-ui/react';
+import { RadioCard, BaseCounter } from '..';
+import { ProductRadioCardContent } from './ProductRadioCardContent';
+export const HomeItemList = ({ items, onChange }) => {
+    const hasItems = items.length > 0;
+    const firstItemId = items[0].id;
+    const { getRadioProps } = useRadioGroup({
+        name: 'productItem',
+        defaultValue: firstItemId,
+        onChange,
+    });
+    const itemsWithNone = [
+        ...items,
+        {
+            id: 'none',
+            name: hasItems ? t('homeItems.noneAbove') : t('homeItems.addDetail'),
+        },
+    ];
+    return (_jsxs(Container, { h: "full", children: [_jsxs(Stack, { align: "center", spacing: "base", px: "20", py: "8", children: [_jsx(Text, { fontSize: "24px", lineHeight: "28px", textAlign: "center", children: hasItems
+                            ? t('homeItems.itemsFound', { count: items.length })
+                            : t('homeItems.noItemsFound') }), _jsx(Text, { fontFamily: "secondary", fontSize: "16px", lineHeight: "20px", textAlign: "center", children: hasItems
+                            ? t('homeItems.pleaseSelect')
+                            : t('homeItems.addDetailsManually') })] }), _jsxs(Stack, { bg: "lightViolet.1", p: "base", spacing: "base", h: "full", children: [_jsx(BaseCounter, { text: t('homeItems.showing', {
+                            count: items.length,
+                            total: items.length,
+                        }) }), itemsWithNone.map((item) => {
+                        const radio = getRadioProps({ value: item.id });
+                        return (_jsx(RadioCard, Object.assign({}, radio, { children: _jsx(ProductRadioCardContent, Object.assign({}, item)) }), item.id));
+                    })] })] }));
+};

package/dist/components/homeItems/ProductRadioCardContent.d.ts

@@ -0,0 +1,2 @@
+import { ProductRadioCardContentI } from '../../interfaces';
+export declare const ProductRadioCardContent: ({ id, name, brand, model, }: ProductRadioCardContentI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeItems/ProductRadioCardContent.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, Text } from '@chakra-ui/react';
+import { DetailsColumn } from '..';
+export const ProductRadioCardContent = ({ id, name, brand, model, }) => {
+    const isNone = id === 'none';
+    const details = [
+        brand && { label: 'Brand:', value: brand },
+        model && { label: 'Model#:', value: model },
+    ].filter(Boolean);
+    return (_jsxs(Stack, { spacing: "base", w: "full", children: [_jsx(Text, { fontSize: isNone ? 'md' : 'lg', children: name }), _jsx(DetailsColumn, { color: "gray.2", details: details, fontSize: "md", leftFlexPercent: 20 })] }));
+};

package/dist/components/homeItems/index.d.ts

@@ -1 +1,2 @@
+export * from './HomeItemList';
 export * from './ViewingHomeItemPanel';

package/dist/components/homeItems/index.js

@@ -1 +1,2 @@
+export * from './HomeItemList';
 export * from './ViewingHomeItemPanel';

package/dist/components/receipts/receipt/DetailsColumn.d.ts

@@ -1,2 +1,2 @@
 import { DetailsColumnI } from '../../../interfaces';
-export declare const DetailsColumn: ({ align, details }: DetailsColumnI) => import("react/jsx-runtime").JSX.Element;
+export declare const DetailsColumn: ({ align, color, details, fontSize, leftFlexPercent, }: DetailsColumnI) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/receipts/receipt/DetailsColumn.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, Flex, Text } from '@chakra-ui/react';
-export const DetailsColumn = ({ align = 'left', details }) => {
+export const DetailsColumn = ({ align = 'left', color, details, fontSize = 'xs', leftFlexPercent = 45, }) => {
     const isLeft = align === 'left';
+    if (!details || details.length === 0) {
+        return null;
+    }
     return (_jsx(Stack, { spacing: "0", flex: "auto", children: details.map((item, index) => {
             var _a;
-            const value = (_a = item.value) !== null && _a !== void 0 ? _a : '-';
-            return (_jsxs(Flex, { justify: "space-between", children: [_jsx(Text, { fontSize: "xs", fontFamily: "secondary", lineHeight: "1.4", flex: isLeft ? '45%' : '', children: item.label }), _jsx(Text, { fontSize: "xs", fontFamily: "secondary", fontWeight: "medium", lineHeight: "1.4", flex: isLeft ? '55%' : '', children: value })] }, index + index));
+            const value = (_a = String(item.value)) !== null && _a !== void 0 ? _a : '-';
+            return (_jsxs(Flex, { justify: "space-between", children: [_jsx(Text, { fontSize: fontSize, fontFamily: "secondary", lineHeight: "1.4", flex: isLeft ? `${leftFlexPercent}%` : '', color: color, children: item.label }), _jsx(Text, { fontSize: fontSize, fontFamily: "secondary", fontWeight: "medium", lineHeight: "1.4", flex: isLeft ? `${100 - leftFlexPercent}%` : '', children: value })] }, String(item.value) + index));
         }) }));
 };

package/dist/interfaces/homeItems/HomeItemList.interface.d.ts

@@ -0,0 +1,5 @@
+import { ProductRadioCardContentI } from '..';
+export interface HomeItemListI {
+    items: ProductRadioCardContentI[];
+    onChange?: (id: string) => void;
+}

package/dist/interfaces/homeItems/HomeItemList.interface.js

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

package/dist/interfaces/homeItems/ProductRadioCardContent.interface.d.ts

@@ -0,0 +1,6 @@
+export interface ProductRadioCardContentI {
+    id: string;
+    name?: string;
+    brand?: string;
+    model?: string;
+}

package/dist/interfaces/homeItems/ProductRadioCardContent.interface.js

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

package/dist/interfaces/homeItems/index.d.ts

@@ -1 +1,3 @@
 export * from './ViewingHomeItemPanel.interface';
+export * from './ProductRadioCardContent.interface';
+export * from './HomeItemList.interface';

package/dist/interfaces/homeItems/index.js

@@ -1 +1,3 @@
 export * from './ViewingHomeItemPanel.interface';
+export * from './ProductRadioCardContent.interface';
+export * from './HomeItemList.interface';

package/dist/interfaces/receipts/receipt/DetailsColumn.interface.d.ts

@@ -1,9 +1,11 @@
-interface DetailRowI {
+export interface DetailRowI {
     label?: string;
     value?: string | number | Date;
 }
 export interface DetailsColumnI {
     align?: 'left' | 'right';
-    details: DetailRowI[];
+    color?: string;
+    details?: DetailRowI[];
+    fontSize?: string;
+    leftFlexPercent?: number;
 }
-export {};

package/dist/stories/homeItems/HomeItemList.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { HomeItemListI } from '../../interfaces';
+declare const _default: Meta<HomeItemListI>;
+export default _default;
+export declare const HomeItemListComponent: (args: HomeItemListI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/homeItems/HomeItemList.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import { DrawerContent } from '@chakra-ui/react';
+import { RightPanel, HomeItemList } from '../../components';
+export default {
+    title: 'Components/HomeItems',
+    component: HomeItemList,
+    args: {
+        onChange: action('onChange'),
+        items: [
+            {
+                id: '1',
+                name: 'Item 1',
+                brand: 'Brand A',
+                model: 'Model X',
+            },
+            {
+                id: '2',
+                name: 'Item 2',
+                brand: 'Brand B',
+                model: 'Model Y',
+            },
+        ],
+    },
+    decorators: [
+        (Story) => (_jsx(RightPanel, { isOpen: true, onClose: action('onClose'), children: _jsx(DrawerContent, { bg: "lightBlue.1", p: "base", children: _jsx(Story, {}) }) })),
+    ],
+};
+export const HomeItemListComponent = (args) => (_jsx(HomeItemList, Object.assign({}, args)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.26.5",
+  "version": "2.26.6",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/assets/locales/en/index.json

@@ -453,6 +453,13 @@
     "viewDetails": "View All"
   },
   "homeItems": {
+    "addDetail": "Add more detail",
+    "addDetailsManually": "You can enter item detail manually",
+    "itemsFound": "We’ve found {{ count }} items with that serial number.",
+    "noneAbove": "None of the above, add more detail",
+    "noItemsFound": "We didn’t find your item, but don’t worry!",
+    "pleaseSelect": "Please select your item from the list below. This also double confirms your selection.",
+    "showing": "Showing {{ count }} of {{ total }}",
     "title": "Viewing Home Item"
   },
   "homeHeader": {

package/src/components/homeItems/HomeItemList.tsx

@@ -0,0 +1,61 @@
+import { t } from 'i18next'
+import { Container, Stack, Text, useRadioGroup } from '@chakra-ui/react'
+import { RadioCard, BaseCounter } from '@/components'
+import { ProductRadioCardContent } from './ProductRadioCardContent'
+import { HomeItemListI } from '@/interfaces'
+
+export const HomeItemList = ({ items, onChange }: HomeItemListI) => {
+  const hasItems = items.length > 0
+  const firstItemId = items[0].id
+  const { getRadioProps } = useRadioGroup({
+    name: 'productItem',
+    defaultValue: firstItemId,
+    onChange,
+  })
+
+  const itemsWithNone = [
+    ...items,
+    {
+      id: 'none',
+      name: hasItems ? t('homeItems.noneAbove') : t('homeItems.addDetail'),
+    },
+  ]
+
+  return (
+    <Container h="full">
+      <Stack align="center" spacing="base" px="20" py="8">
+        <Text fontSize="24px" lineHeight="28px" textAlign="center">
+          {hasItems
+            ? t('homeItems.itemsFound', { count: items.length })
+            : t('homeItems.noItemsFound')}
+        </Text>
+        <Text
+          fontFamily="secondary"
+          fontSize="16px"
+          lineHeight="20px"
+          textAlign="center"
+        >
+          {hasItems
+            ? t('homeItems.pleaseSelect')
+            : t('homeItems.addDetailsManually')}
+        </Text>
+      </Stack>
+      <Stack bg="lightViolet.1" p="base" spacing="base" h="full">
+        <BaseCounter
+          text={t('homeItems.showing', {
+            count: items.length,
+            total: items.length,
+          })}
+        />
+        {itemsWithNone.map((item) => {
+          const radio = getRadioProps({ value: item.id })
+          return (
+            <RadioCard key={item.id} {...radio}>
+              <ProductRadioCardContent {...item} />
+            </RadioCard>
+          )
+        })}
+      </Stack>
+    </Container>
+  )
+}

package/src/components/homeItems/ProductRadioCardContent.tsx

@@ -0,0 +1,27 @@
+import { Stack, Text } from '@chakra-ui/react'
+import { ProductRadioCardContentI, DetailRowI } from '@/interfaces'
+import { DetailsColumn } from '@/components'
+
+export const ProductRadioCardContent = ({
+  id,
+  name,
+  brand,
+  model,
+}: ProductRadioCardContentI) => {
+  const isNone = id === 'none'
+  const details = [
+    brand && { label: 'Brand:', value: brand },
+    model && { label: 'Model#:', value: model },
+  ].filter(Boolean) as DetailRowI[]
+  return (
+    <Stack spacing="base" w="full">
+      <Text fontSize={isNone ? 'md' : 'lg'}>{name}</Text>
+      <DetailsColumn
+        color="gray.2"
+        details={details}
+        fontSize="md"
+        leftFlexPercent={20}
+      />
+    </Stack>
+  )
+}

package/src/components/homeItems/index.ts

@@ -1 +1,2 @@
+export * from './HomeItemList'
 export * from './ViewingHomeItemPanel'

package/src/components/receipts/receipt/DetailsColumn.tsx

@@ -1,28 +1,38 @@
 import { Stack, Flex, Text } from '@chakra-ui/react'
 import { DetailsColumnI } from '@/interfaces'
 
-export const DetailsColumn = ({ align = 'left', details }: DetailsColumnI) => {
+export const DetailsColumn = ({
+  align = 'left',
+  color,
+  details,
+  fontSize = 'xs',
+  leftFlexPercent = 45,
+}: DetailsColumnI) => {
   const isLeft = align === 'left'
+  if (!details || details.length === 0) {
+    return null
+  }
   return (
     <Stack spacing="0" flex="auto">
       {details.map((item, index) => {
-        const value = (item.value as string) ?? '-'
+        const value = String(item.value) ?? '-'
         return (
-          <Flex key={index + index} justify="space-between">
+          <Flex key={String(item.value) + index} justify="space-between">
             <Text
-              fontSize="xs"
+              fontSize={fontSize}
               fontFamily="secondary"
               lineHeight="1.4"
-              flex={isLeft ? '45%' : ''}
+              flex={isLeft ? `${leftFlexPercent}%` : ''}
+              color={color}
             >
               {item.label}
             </Text>
             <Text
-              fontSize="xs"
+              fontSize={fontSize}
               fontFamily="secondary"
               fontWeight="medium"
               lineHeight="1.4"
-              flex={isLeft ? '55%' : ''}
+              flex={isLeft ? `${100 - leftFlexPercent}%` : ''}
             >
               {value}
             </Text>

package/src/interfaces/homeItems/HomeItemList.interface.ts

@@ -0,0 +1,6 @@
+import { ProductRadioCardContentI } from '@/interfaces'
+
+export interface HomeItemListI {
+  items: ProductRadioCardContentI[]
+  onChange?: (id: string) => void
+}

package/src/interfaces/homeItems/ProductRadioCardContent.interface.ts

@@ -0,0 +1,6 @@
+export interface ProductRadioCardContentI {
+  id: string
+  name?: string
+  brand?: string
+  model?: string
+}

package/src/interfaces/homeItems/index.ts

@@ -1 +1,3 @@
 export * from './ViewingHomeItemPanel.interface'
+export * from './ProductRadioCardContent.interface'
+export * from './HomeItemList.interface'

package/src/interfaces/receipts/receipt/DetailsColumn.interface.ts

@@ -1,9 +1,12 @@
-interface DetailRowI {
+export interface DetailRowI {
   label?: string
   value?: string | number | Date
 }
 
 export interface DetailsColumnI {
   align?: 'left' | 'right'
-  details: DetailRowI[]
+  color?: string
+  details?: DetailRowI[]
+  fontSize?: string
+  leftFlexPercent?: number
 }

package/src/stories/homeItems/HomeItemList.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { DrawerContent } from '@chakra-ui/react'
+import { RightPanel, HomeItemList } from '@/components'
+import { HomeItemListI } from '@/interfaces'
+
+export default {
+  title: 'Components/HomeItems',
+  component: HomeItemList,
+  args: {
+    onChange: action('onChange'),
+    items: [
+      {
+        id: '1',
+        name: 'Item 1',
+        brand: 'Brand A',
+        model: 'Model X',
+      },
+      {
+        id: '2',
+        name: 'Item 2',
+        brand: 'Brand B',
+        model: 'Model Y',
+      },
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <RightPanel isOpen onClose={action('onClose')}>
+        <DrawerContent bg="lightBlue.1" p="base">
+          <Story />
+        </DrawerContent>
+      </RightPanel>
+    ),
+  ],
+} as Meta<HomeItemListI>
+
+export const HomeItemListComponent = (args: HomeItemListI) => (
+  <HomeItemList {...args} />
+)