feat UI updates

apps/web/assets/icons/Upgrade.icon.tsx → apps/web/assets/icons/OutLink.icon.tsx

@@ -1,21 +1,23 @@
 import { IconType } from '@types';
 import { IconSizes } from 'config';
 
-export const UpgradeIcon = ({ size = 'sm', color }: IconType) => {
+export const OutLinkIcon = ({ size = 'sm', color }: IconType) => {
   return (
     <svg
+      xmlns="http://www.w3.org/2000/svg"
       width={IconSizes[size]}
       height={IconSizes[size]}
       color={color}
-      xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
-      className="lucide lucide-trending-up"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     >
-      <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
-      <polyline points="16 7 22 7 22 13" />
+      <path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" />
+      <path d="m21 3-9 9" />
+      <path d="M15 3h6v6" />
     </svg>
   );
 };

apps/web/components/imports/forms/ColumnForm.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { Group, Stack, TextInput as Input } from '@mantine/core';
 import { Controller, useForm } from 'react-hook-form';
 
-import { COLUMN_TYPES } from '@shared/constants';
+import { COLUMN_TYPES } from '@config';
 import { DEFAULT_VALUES, IColumn } from '@impler/shared';
 
 import { Button } from '@ui/button';

apps/web/components/imports/schema/ColumnsTable.tsx

@@ -3,9 +3,9 @@ import { Controller } from 'react-hook-form';
 import { ActionIcon, Checkbox, Flex, Tooltip, TextInput as Input } from '@mantine/core';
 
 import { colors } from '@config';
+import { COLUMN_TYPES } from '@config';
 import { DraggableTable } from '@ui/table';
 import { useSchema } from '@hooks/useSchema';
-import { COLUMN_TYPES } from '@shared/constants';
 import { DEFAULT_VALUES, IColumn } from '@impler/shared';
 
 import { Select } from '@ui/select';

apps/web/config/constants.config.ts

@@ -163,3 +163,45 @@ export const ROUTES = {
 export const REGULAR_EXPRESSIONS = {
   URL: /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/gm,
 };
+
+export const COLUMN_TYPES = [
+  {
+    label: 'String',
+    value: 'String',
+  },
+  {
+    label: 'Number',
+    value: 'Number',
+  },
+  {
+    label: 'Double',
+    value: 'Double',
+  },
+  {
+    label: 'Select',
+    value: 'Select',
+  },
+  {
+    label: 'Date',
+    value: 'Date',
+  },
+  {
+    label: 'Regular Expression',
+    value: 'Regex',
+  },
+  {
+    label: 'Email',
+    value: 'Email',
+  },
+  {
+    label: 'Any',
+    value: 'Any',
+  },
+];
+
+export const TEXTS = {
+  TITLE: 'CSV Excel Import Experience for SaaS',
+  DESCRIPTION:
+    // eslint-disable-next-line max-len
+    "Build the best CSV Excel Import Experience for SaaS in 10 Minutes. Onboard customers' data with a hassle-free data importer in your app.",
+};

apps/web/design-system/nav-item/NavItem.styles.ts

@@ -1,14 +1,14 @@
 import { colors } from '@config';
-import { createStyles, MantineTheme } from '@mantine/core';
+import { createStyles, CSSObject, MantineTheme } from '@mantine/core';
 
-const getRootFilledStyles = (theme: MantineTheme, isActive?: boolean) => ({
+const getRootFilledStyles = (theme: MantineTheme, isActive?: boolean): CSSObject => ({
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'flex-start',
   alignItems: 'center',
   gap: theme.spacing.xs,
   color: isActive ? colors.blue : theme.colorScheme === 'dark' ? colors.TXTGray : colors.TXTLight,
-  paddingInline: theme.spacing.sm,
+  paddingLeft: theme.spacing.sm,
   flexWrap: 'nowrap',
   transition: 'all 0.2s ease',
   cursor: 'pointer',
@@ -17,30 +17,6 @@ const getRootFilledStyles = (theme: MantineTheme, isActive?: boolean) => ({
   '&:hover': {
     color: colors.blue,
   },
-  '&:hover:before': {
-    content: '""',
-    display: 'block',
-    width: '3px',
-    height: '100%',
-    backgroundColor: colors.blue,
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    borderRadius: '0 3px 3px 0',
-  },
-  ...(isActive && {
-    '&:before': {
-      content: '""',
-      display: 'block',
-      width: '3px',
-      height: '100%',
-      backgroundColor: colors.blue,
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      borderRadius: '0 3px 3px 0',
-    },
-  }),
 });
 
 const getLinkStyles = () => ({

apps/web/design-system/nav-item/NavItem.tsx

@@ -1,19 +1,21 @@
-import useStyles from './NavItem.styles';
-import { Flex, Text } from '@mantine/core';
 import Link from 'next/link';
+import { Flex, Text } from '@mantine/core';
+import { HTMLAttributeAnchorTarget } from 'react';
+import useStyles from './NavItem.styles';
 
 interface NavItemProps {
   icon: any;
   title: string;
   active?: boolean;
   href: string;
+  target?: HTMLAttributeAnchorTarget;
 }
 
-export function NavItem({ icon, title, active, href }: NavItemProps) {
+export function NavItem({ target, icon, title, active, href }: NavItemProps) {
   const { classes } = useStyles({ active });
 
   return (
-    <Link href={href} className={classes.link}>
+    <Link href={href} target={target} className={classes.link}>
       <Flex className={classes.root}>
         {icon}
         <Text size="lg">{title}</Text>

apps/web/layouts/AppLayout/AppLayout.tsx

@@ -9,6 +9,8 @@ import useStyles from './AppLayout.styles';
 import { HomeIcon } from '@assets/icons/Home.icon';
 import { LogoutIcon } from '@assets/icons/Logout.icon';
 import { ImportIcon } from '@assets/icons/Import.icon';
+import { OutLinkIcon } from '@assets/icons/OutLink.icon';
+import { SettingsIcon } from '@assets/icons/Settings.icon';
 import { ActivitiesIcon } from '@assets/icons/Activities.icon';
 import LogoBlack from '@assets/images/full-logo-dark.png';
 import LogoWhite from '@assets/images/full-logo-light.png';
@@ -18,7 +20,7 @@ import { NavItem } from '@ui/nav-item';
 import { UserMenu } from '@ui/user-menu';
 import { track } from '@libs/amplitude';
 import { ColorSchemeToggle } from '@ui/toggle-color-scheme';
-import { SettingsIcon } from '@assets/icons/Settings.icon';
+import { TEXTS } from '@config';
 
 const Support = dynamic(() => import('components/common/Support').then((mod) => mod.Support), {
   ssr: false,
@@ -43,15 +45,9 @@ export function AppLayout({ children, pageProps }: PropsWithChildren<{ pageProps
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>{pageProps.title ? `${pageProps.title} | Impler` : 'Impler'}</title>
         <link rel="icon" href={colorScheme === 'dark' ? '/favicon-dark.ico' : '/favicon-light.ico'} />
-        <meta
-          name="description"
-          content="100% open source data import experience with readymade CSV & Excel import widget."
-        />
-        <meta name="og:title" content="Impler | Readymade and scalable data import experience for developers" />
-        <meta
-          name="og:description"
-          content="100% open source data import experience with readymade CSV & Excel import widget"
-        />
+        <meta name="description" content={TEXTS.DESCRIPTION} />
+        <meta name="og:title" content={TEXTS.TITLE} />
+        <meta name="og:description" content={TEXTS.DESCRIPTION} />
       </Head>
       <div className={classes.root}>
         <LoadingOverlay visible={isProjectsLoading || isProfileLoading} />
@@ -97,6 +93,12 @@ export function AppLayout({ children, pageProps }: PropsWithChildren<{ pageProps
               icon={<SettingsIcon size="lg" />}
               title="Settings"
             />
+            <NavItem
+              target="_blank"
+              title="Documentation"
+              href="https://docs.impler.io"
+              icon={<OutLinkIcon size="lg" />}
+            />
           </Stack>
         </aside>
         <main className={classes.main}>

apps/web/layouts/OnboardLayout/OnboardLayout.tsx

@@ -5,6 +5,7 @@ import { PropsWithChildren } from 'react';
 import { Carousel } from '@mantine/carousel';
 import { Grid, Title, Text, Stack } from '@mantine/core';
 
+import { TEXTS } from '@config';
 import useStyles from './OnboardLayout.styles';
 import WidgetSlideImage from '@assets/images/auth-carousel/widget.png';
 import PowerfullSlideImage from '@assets/images/auth-carousel/powerfull.png';
@@ -42,10 +43,13 @@ export function OnboardLayout({ children }: PropsWithChildren) {
   return (
     <>
       <Head>
-        <title>Get started with Impler</title>
-        <meta name="description" content="Manage your import and exports at one place" />
+        <title>Get started | Impler</title>
+        <meta name="description" content={TEXTS.DESCRIPTION} />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
+        <meta name="description" content={TEXTS.DESCRIPTION} />
+        <meta name="og:title" content={TEXTS.TITLE} />
+        <meta name="og:description" content={TEXTS.DESCRIPTION} />
       </Head>
       <main>
         <Grid className={classes.grid} gutter={0}>