@homefile/components-v2 2.36.1 → 2.36.2

package/dist/components/animations/CloudsAnimation.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
-export declare const moveLeftToRightAirplane: import("@emotion/react").Keyframes;
-export declare const moveRightToLeft: import("@emotion/react").Keyframes;
-export declare const moveRightToLeftWithFade: import("@emotion/react").Keyframes;
-export declare const moveRightToLeftWithFade2: import("@emotion/react").Keyframes;
-export declare const moveRightToLeftWithFade3: import("@emotion/react").Keyframes;
+export declare const moveLeftToRightAirplane: import("@emotion/serialize").Keyframes;
+export declare const moveRightToLeft: import("@emotion/serialize").Keyframes;
+export declare const moveRightToLeftWithFade: import("@emotion/serialize").Keyframes;
+export declare const moveRightToLeftWithFade2: import("@emotion/serialize").Keyframes;
+export declare const moveRightToLeftWithFade3: import("@emotion/serialize").Keyframes;
 export declare const CloudsAnimation: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.36.1",
+  "version": "2.36.2",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",
@@ -48,8 +48,8 @@
     "build": "yarn clean && yarn convert && yarn copy",
     "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
     "clean": "rimraf dist/",
-    "convert": "tsc --project tsconfig.json && tscpaths -p tsconfig.json -s ./src -o ./dist",
-    "copy": "copyfiles -u 1 src/assets/**/* src/assets/**/**/* src/styles/* src/components/**/**/**/**/* dist/",
+    "convert": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json",
+    "copy": "copyfiles -u 1 \"src/assets/**/*\" \"src/styles/*\" \"src/**/*.css\" \"src/**/*.json\" dist/",
     "prepare": "husky",
     "test-storybook": "test-storybook"
   },
@@ -85,7 +85,6 @@
     "storybook": "^8.5.2",
     "storybook-react-i18next": "^3.2.1",
     "tsconfig-replace-paths": "^0.0.14",
-    "tscpaths": "^0.0.9",
     "typescript": "^5.7.3",
     "vite": "^6.0.9"
   },
@@ -116,6 +115,7 @@
     "react-quill-new": "^3.3.3",
     "react-spinners": "^0.15.0",
     "recharts": "^2.15.0",
+    "tsc-alias": "^1.8.16",
     "valtio": "^2.1.3",
     "yup": "^1.6.1"
   }

package/src/stories/tiles/MinimizedTiles.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react/*'
+import { Meta } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import { MinimizedTiles } from '@/components'
 import { menuMock, minimizedTilesMock } from '@/mocks'

package/dist/components/forms/dynamicForm/fields/uiFields/TileBody.tsx

@@ -1,37 +0,0 @@
-import { Box, Stack } from '@chakra-ui/react'
-import { TileBodyI } from '@/interfaces'
-import {
-  PartnerFooter,
-  TileBodyFields,
-  TileFooterFields,
-  TileHeaderFields,
-} from '@/components'
-
-export const TileBody = ({
-  callback,
-  fields,
-  websiteUrl = '',
-  menuItems,
-  ...props
-}: TileBodyI) => {
-  return (
-    <Box
-      display="flex"
-      flexGrow={1}
-      flexDir="column"
-      bg="neutral.white"
-      boxShadow="lg"
-    >
-      <Stack spacing="0" flex="1" justify="space-between">
-        <Box>
-          <TileHeaderFields fields={fields} menuItems={menuItems} />
-        </Box>
-        <TileBodyFields fields={fields} />
-        <Stack spacing="0" bg="lightBlue.1">
-          <TileFooterFields callback={callback} fields={fields} />
-          <PartnerFooter {...props} websiteUrl={websiteUrl} />
-        </Stack>
-      </Stack>
-    </Box>
-  )
-}

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyAction.tsx

@@ -1,11 +0,0 @@
-import { Flex } from '@chakra-ui/react'
-import { SingleFields } from '@/components'
-import { TileBodyI } from '@/interfaces'
-
-export const TileBodyAction = ({ callback, fields }: TileBodyI) => {
-  return (
-    <Flex p="base" align="center" gap="base">
-      <SingleFields fields={fields} callback={callback} />
-    </Flex>
-  )
-}

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyDescription.tsx

@@ -1,16 +0,0 @@
-import { Box, Text } from '@chakra-ui/react'
-
-export const TileBodyDescription = ({description}: {description: string}) => {
-    return (
-        <Box px="base" py="4" pb="0" bg="lightBlue.1">
-            <Text
-                fontSize="sm"
-                fontWeight="light"
-                lineHeight="18px"
-                textAlign="center"
-            >
-                {description}
-            </Text>
-        </Box>
-    )
-}

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyHeader.tsx

@@ -1,11 +0,0 @@
-import { Box, Text } from '@chakra-ui/react'
-
-export const TileBodyHeader = ({ value = '' }) => {
-  return (
-    <Box p="base">
-      <Text fontWeight="semibold" textAlign="center">
-        {value}
-      </Text>
-    </Box>
-  )
-}

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyLogo.tsx

@@ -1,17 +0,0 @@
-import { PartnerHeader } from '@/components'
-import { TileBodyLogoI } from '@/interfaces'
-
-export const TileBodyLogo = ({
-  menuItems,
-  name = '',
-  value,
-}: TileBodyLogoI) => {
-  return (
-    <PartnerHeader
-      borderColor="lightBlue.6"
-      logo={value}
-      partnerName={name}
-      menuItems={menuItems}
-    />
-  )
-}

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyPartnerImage.tsx

@@ -1,11 +0,0 @@
-import { Box, Flex, Stack, Text } from '@chakra-ui/react'
-import { PartnerImage } from '@/components'
-import { PartnerImageI } from '@/interfaces'
-
-export const TileBodyPartnerImage = ({ imageUrl, partnerName }: PartnerImageI) => {
-    return (
-        <Box h="240px">
-            <PartnerImage imageUrl={imageUrl} partnerName={partnerName} />
-        </Box>
-    )
-}

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodySectionGrid.tsx

@@ -1,11 +0,0 @@
-import { Center, SimpleGrid } from '@chakra-ui/react'
-import { SingleFields } from '@/components'
-import { TileBodyI } from '@/interfaces'
-
-export const TileBodySectionGrid = ({ fields }: TileBodyI) => {
-  return (
-    <SimpleGrid columns={3} spacing="base" p="base">
-      <SingleFields fields={fields} />
-    </SimpleGrid>
-  )
-}

package/dist/components/forms/dynamicForm/fields/uiFields/TileCta.tsx

@@ -1,18 +0,0 @@
-import { Button } from '@chakra-ui/react'
-import { TileCtaI } from '@/interfaces'
-
-export const TileCta = ({ callback, ...props }: TileCtaI) => {
-  const { type, value } = props
-  return (
-    <Button
-      onClick={() => callback?.({ ...props })}
-      variant={type === 'primary-cta' ? 'primary' : 'secondary'}
-      textTransform="capitalize"
-      fontWeight={type === 'primary-cta' ? 'semibold' : 'regular'}
-      px="none"
-      bg={type === 'primary-cta' ? '' : 'neutral.white'}
-    >
-      {value}
-    </Button>
-  )
-}

package/dist/components/forms/dynamicForm/fields/uiFields/VerticalIcon.tsx

@@ -1,39 +0,0 @@
-import { Box, Center, Image, Text } from '@chakra-ui/react'
-import { VerticalIconI } from '@/interfaces'
-
-export const VerticalIcon = ({ icon, value }: VerticalIconI) => {
-  return (
-    <Box
-      bg="neutral.white"
-      borderRadius="md"
-      border="1px solid"
-      borderColor="lightBlue.6"
-      display="flex"
-      flexDirection="column"
-      alignItems="center"
-      justifyContent="center"
-      minH="110px"
-    >
-      <Box
-        h="46px"
-        w="46px"
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
-      >
-        <Image src={icon} alt={value} w="34px" h="34px" objectFit="contain" />
-      </Box>
-      <Center pb="2">
-        <Text
-          fontWeight="semibold"
-          textAlign="center"
-          fontSize="13px"
-          lineHeight="14px"
-          w="85%"
-        >
-          {value}
-        </Text>
-      </Center>
-    </Box>
-  )
-}

package/dist/components/forms/dynamicForm/fields/uiFields/index.ts

@@ -1,9 +0,0 @@
-export * from './TileBody'
-export * from './TileBodyAction'
-export * from './TileBodyHeader'
-export * from './TileBodyLogo'
-export * from './TileBodySectionGrid'
-export * from './TileCta'
-export * from './TileBodyDescription'
-export * from './TileBodyPartnerImage'
-export * from './VerticalIcon'

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyAppliances.tsx

@@ -1,79 +0,0 @@
-import { Text, Flex, Stack, IconButton, Box } from '@chakra-ui/react'
-import {
-  ReadOnlyHomeItemRating,
-  Edit,
-  ReadOnlyHomeItemImages,
-  ReadOnlyHomeItemText,
-} from '@/components'
-import { ReadOnlyAppliancesI } from '@/interfaces'
-import { colors } from '@/theme/colors'
-
-export const ReadOnlyAppliances = ({
-  description,
-  id,
-  name,
-  children,
-  onEdit,
-  value,
-}: ReadOnlyAppliancesI) => {
-  const rating = children?.find(({ type }) => type === 'rating')
-  const images = children?.find(({ type }) => type === 'images')
-  return (
-    <Stack spacing="base" p="base" bg="neutral.white" mt="2px">
-      {name ||
-        (onEdit && (
-          <Flex justify="space-between">
-            <Text fontSize="xs" textTransform="uppercase">
-              {name}
-            </Text>
-            {onEdit && (
-              <IconButton
-                aria-label="Edit appliance"
-                variant="ghost"
-                w="fit-content"
-                icon={<Edit size={18} stroke={colors.blue[3]} />}
-                onClick={() => onEdit(id)}
-              />
-            )}
-          </Flex>
-        ))}
-      <Flex gap="base">
-        <ReadOnlyHomeItemImages {...images} />
-        <Stack spacing="4" flex="1">
-          <ReadOnlyHomeItemRating {...rating} />
-          <Stack spacing="base">
-            <Text fontSize="22px" fontWeight="semibold">
-              {value}
-            </Text>
-            <Box>
-              {children?.map(({ id, name, value, type }) => {
-                const baseProps = {
-                  key: `${id}-${name}-${value}-${type}`,
-                  id,
-                  value,
-                  type,
-                  name,
-                }
-                switch (type) {
-                  case 'text':
-                    return <ReadOnlyHomeItemText {...baseProps} />
-                  default:
-                    return null
-                }
-              })}
-            </Box>
-            <Box
-              flex="1"
-              borderBottom="1px dashed"
-              borderColor="lightBlue.6"
-              h="1px"
-            />
-            <Text fontFamily="secondary" fontSize="sm">
-              {description}
-            </Text>
-          </Stack>
-        </Stack>
-      </Flex>
-    </Stack>
-  )
-}

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyCollapsible.tsx

@@ -1,35 +0,0 @@
-import { Stack } from '@chakra-ui/react'
-import { Collapsible, ReadOnlyTextArea } from '@/components'
-import { ReportI } from '@/interfaces'
-
-export const ReadOnlyCollapsible = ({
-  children,
-}: Pick<ReportI, 'children'>) => {
-  return (
-    <Stack bg="lightBlue.2" spacing="2px">
-      {children?.map(({ id, name = '', value, type }) => {
-        const baseProps = {
-          id,
-          value,
-          type,
-          name,
-        }
-        switch (type) {
-          case 'text':
-          case 'textarea':
-            return (
-              <Collapsible
-                title={name}
-                showShadow={false}
-                key={`${id}-${name}-${value}-${type}`}
-              >
-                <ReadOnlyTextArea {...baseProps} />
-              </Collapsible>
-            )
-          default:
-            return null
-        }
-      })}
-    </Stack>
-  )
-}

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyGuidelines.tsx

@@ -1,33 +0,0 @@
-import { Text, Stack, Grid } from '@chakra-ui/react'
-import { HiddenField } from '@/components'
-import { ReadOnlyGuidelinesI } from '@/interfaces'
-import { fieldIcons } from '@/helpers'
-
-export const ReadOnlyGuidelines = ({
-  name,
-  children,
-  onClick,
-}: ReadOnlyGuidelinesI) => {
-  return (
-    <Stack spacing="base" flex="1" width="100%">
-      <Text fontSize="xs" textTransform="uppercase">
-        {name}
-      </Text>
-      <Grid templateColumns="repeat(auto-fit, minmax(0, 75px))" gap="base">
-        {children?.map((child) => {
-          const { id, icon, value } = child
-          const btnIcon = icon ? fieldIcons[icon] : ''
-          return (
-            <HiddenField
-              key={id}
-              id={id}
-              icon={btnIcon}
-              name={value as string}
-              onClick={() => onClick?.(id)}
-            />
-          )
-        })}
-      </Grid>
-    </Stack>
-  )
-}

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemImages.tsx

@@ -1,29 +0,0 @@
-import { ReportI } from '@/interfaces'
-import { Box, Image, SimpleGrid, Stack } from '@chakra-ui/react'
-import { useState } from 'react'
-
-export const ReadOnlyHomeItemImages = (props: Partial<ReportI>) => {
-  const images = props.value as string[]
-  const [mainImage, setMainImage] = useState(images?.[0])
-
-  if (!images) return null
-
-  return (
-    <Stack spacing="base">
-      <Image src={mainImage} alt="home item" boxSize="174px" />
-      <SimpleGrid columns={4} spacing="base">
-        {images?.map((image) => (
-          <Box
-            key={image}
-            as="button"
-            backgroundImage={image}
-            backgroundSize="cover"
-            backgroundPosition="center"
-            boxSize="34px"
-            onClick={() => setMainImage(image)}
-          />
-        ))}
-      </SimpleGrid>
-    </Stack>
-  )
-}

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemRating.tsx

@@ -1,22 +0,0 @@
-import { t } from 'i18next'
-import { Box, Flex, Text } from '@chakra-ui/react'
-import { Star } from '@/components'
-import { ReportI } from '@/interfaces'
-import { colors } from '@/theme/colors'
-
-export const ReadOnlyHomeItemRating = ({ id, value }: Partial<ReportI>) => {
-  if (!value) return null
-  const count = Number(value) - 1
-  return (
-    <Box>
-      <Text fontSize="10px">{t('dynamicForm.myRating')}</Text>
-      <Flex gap="1">
-        {Array.from({ length: 5 }).map((_, index) => {
-          const starColor: string =
-            count >= index ? colors.yellow['1'] : colors.gray['1']
-          return <Star size={13} key={`${id}-${index}`} stroke={starColor} />
-        })}
-      </Flex>
-    </Box>
-  )
-}

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemText.tsx

@@ -1,22 +0,0 @@
-import { Box, Flex, Text } from '@chakra-ui/react'
-import { ReportI } from '@/interfaces'
-
-export const ReadOnlyHomeItemText = ({ name, value }: Partial<ReportI>) => {
-  if (!name) return null
-  return (
-    <Flex gap="base">
-      <Box w="30%">
-        <CustomText>{`${name}:`}</CustomText>
-      </Box>
-      <CustomText>{String(value)}</CustomText>
-    </Flex>
-  )
-}
-
-const CustomText = ({ children = '' }) => {
-  return (
-    <Text fontSize="sm" fontFamily="secondary">
-      {children}
-    </Text>
-  )
-}

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyItemRelated.tsx

@@ -1,40 +0,0 @@
-import { Text, Stack, Grid, Box } from '@chakra-ui/react'
-import { HiddenField } from '@/components'
-import { ReadOnlyGuidelinesI } from '@/interfaces'
-import { fieldIcons } from '@/helpers'
-
-export const ReadOnlyItemRelated = ({
-  name,
-  children,
-  onClick,
-}: ReadOnlyGuidelinesI) => {
-  return (
-    <Box
-      borderLeft="1px solid"
-      borderColor="lightBlue.6"
-      pl="4"
-      marginInlineStart="auto"
-    >
-      <Stack spacing="base">
-        <Text fontSize="xs" textTransform="uppercase">
-          {name}
-        </Text>
-        <Grid templateColumns="repeat(2, minmax(80px, 1fr))" gap="base">
-          {children?.map((child) => {
-            const { id, icon, value } = child
-            const btnIcon = icon ? fieldIcons[icon] : ''
-            return (
-              <HiddenField
-                key={id}
-                id={id}
-                icon={btnIcon}
-                name={value as string}
-                onClick={() => onClick?.(id)}
-              />
-            )
-          })}
-        </Grid>
-      </Stack>
-    </Box>
-  )
-}

package/dist/components/forms/readOnly/fields/homeItem/index.ts

@@ -1,7 +0,0 @@
-export * from './ReadOnlyAppliances'
-export * from './ReadOnlyCollapsible'
-export * from './ReadOnlyGuidelines'
-export * from './ReadOnlyHomeItemImages'
-export * from './ReadOnlyHomeItemRating'
-export * from './ReadOnlyHomeItemText'
-export * from './ReadOnlyItemRelated'

package/dist/components/partner/charts/barCharts/activeCustomerChart/ActiveCustomerChart.tsx

@@ -1,48 +0,0 @@
-import { Stack } from '@chakra-ui/react'
-import { BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts'
-import {
-  ActiveCustomerChartHeader,
-  contentStyle,
-  cursorStyle,
-  itemStyle,
-  labelStyle,
-  xAxisStyle,
-  yAxisStyle,
-} from '@/components'
-import { colors } from '@/theme/colors'
-import { ActiveCustomerChartI } from '@/interfaces'
-
-export const ActiveCustomerChart = ({ data }: ActiveCustomerChartI) => {
-  const tickFormatter = (value: number) => {
-    if (value === 0) return '0'
-    return `${value / 1000}k`
-  }
-  return (
-    <Stack spacing="8" bg="lightGreen.1" p="base">
-      <ActiveCustomerChartHeader />
-      <BarChart
-        width={440}
-        height={140}
-        data={data}
-        barGap={0}
-        barCategoryGap={4}
-        margin={{
-          left: -28,
-          bottom: -6,
-        }}
-      >
-        <YAxis tickCount={3} tickFormatter={tickFormatter} style={yAxisStyle} />
-        <XAxis dataKey="month" tickMargin={6} style={xAxisStyle} />
-        <Tooltip
-          contentStyle={contentStyle}
-          cursor={cursorStyle}
-          labelStyle={labelStyle}
-          itemStyle={itemStyle}
-        />
-        <CartesianGrid vertical={false} />
-        <Bar dataKey="signedUp" fill={colors.lightBlue[8]} />
-        <Bar dataKey="invited" fill={colors.violet[5]} />
-      </BarChart>
-    </Stack>
-  )
-}

package/dist/components/partner/charts/barCharts/activeCustomerChart/ActiveCustomerChartHeader.tsx

@@ -1,24 +0,0 @@
-import { t } from 'i18next'
-import { Flex, Text } from '@chakra-ui/react'
-import { colors } from '@/theme/colors'
-import { ChartLegend } from '@/components'
-
-export const ActiveCustomerChartHeader = () => {
-  return (
-    <Flex align="center" justify="space-between">
-      <Text variant="chartTitle">
-        {t('partner.charts.activeCustomers.title')}
-      </Text>
-      <Flex gap="base">
-        <ChartLegend
-          color={colors.violet[5]}
-          label={t('partner.charts.activeCustomers.legends.invited')}
-        />
-        <ChartLegend
-          color={colors.lightBlue[8]}
-          label={t('partner.charts.activeCustomers.legends.signedup')}
-        />
-      </Flex>
-    </Flex>
-  )
-}

package/dist/components/partner/charts/barCharts/activeCustomerChart/ChartLegend.tsx

@@ -1,13 +0,0 @@
-import { ChartLegendI } from '@/interfaces'
-import { Flex, Box, Text } from '@chakra-ui/react'
-
-export const ChartLegend = ({ color, label, ...props }: ChartLegendI) => {
-  return (
-    <Flex align="center" gap="1">
-      <Box w="12px" h="12px" bg={color} />
-      <Text fontSize="xs" fontFamily="secondary" {...props}>
-        {label}
-      </Text>
-    </Flex>
-  )
-}

package/dist/components/partner/charts/barCharts/activeCustomerChart/index.ts

@@ -1,5 +0,0 @@
-export * from './ActiveCustomerChart'
-export * from './ActiveCustomerChartHeader'
-export * from './ChartLegend'
-
-export * from './styles'

package/dist/components/partner/charts/barCharts/activeCustomerChart/styles.ts

@@ -1,40 +0,0 @@
-import { colors } from '@/theme/colors'
-import { SVGProps } from 'react'
-
-export const contentStyle: React.CSSProperties = {
-  backgroundColor: '#525074',
-  boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.1)',
-  borderRadius: '8px',
-  border: 'none',
-  fontFamily: 'Poppins',
-  fontSize: '12px',
-  fontWeight: 'bold',
-  padding: '8px',
-  minWidth: '120px',
-}
-
-export const yAxisStyle: React.CSSProperties = {
-  fontFamily: 'Poppins',
-  fontWeight: 'semibold',
-  fontSize: '10px',
-  stroke: 'none',
-}
-
-export const xAxisStyle: React.CSSProperties = {
-  ...yAxisStyle,
-  fontSize: '7px',
-  stroke: 'transparent',
-}
-
-export const cursorStyle: SVGProps<SVGElement> = {
-  fill: colors.lightGreen[2],
-}
-
-export const labelStyle: React.CSSProperties = {
-  color: colors.neutral.white,
-}
-
-export const itemStyle: React.CSSProperties = {
-  color: colors.lightBlue[8],
-  textTransform: 'capitalize',
-}