Merge pull request #4539 from novuhq/nv-2885-extract-the-design-syste…

…m-into-a-separate-package

Nv 2885 extract the design system into a separate package

.github/labeler.yml

@@ -12,6 +12,8 @@
   - apps/webhook/**/*
 '@novu/dal':
   - libs/dal/**/*
+'@novu/design-system':
+  - libs/design-system/**/*
 '@novu/shared':
   - libs/shared/**/*
 '@novu/notification-center':

apps/web/.storybook/preview.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDarkMode } from 'storybook-dark-mode';
-import { ThemeProvider } from '../src/design-system/ThemeProvider';
+import { ThemeProvider } from '@novu/design-system';
 import { DocsContainer } from './Doc.container';
 
 export const parameters = {

apps/web/package.json

@@ -28,8 +28,8 @@
     "@babel/plugin-proposal-optional-chaining": "^7.20.7",
     "@babel/plugin-transform-react-display-name": "^7.18.6",
     "@babel/plugin-transform-runtime": "^7.23.2",
-    "@cypress/react": "^7.0.2",
-    "@cypress/webpack-dev-server": "^3.1.2",
+    "@cypress/react": "^7.0.3",
+    "@cypress/webpack-dev-server": "^3.6.1",
     "@editorjs/editorjs": "^2.19.3",
     "@editorjs/paragraph": "^2.8.0",
     "@emotion/babel-plugin": "^11.7.2",
@@ -49,6 +49,7 @@
     "@mantine/notifications": "^5.7.1",
     "@mantine/prism": "^5.7.1",
     "@mantine/spotlight": "^5.7.1",
+    "@novu/design-system": "^0.20.0",
     "@novu/notification-center": "^0.20.0",
     "@novu/shared": "^0.20.0",
     "@segment/analytics-next": "^1.48.0",
@@ -104,7 +105,7 @@
     "react-hook-form": "7.43.9",
     "react-is": "^18.2.0",
     "react-password-strength-bar": "^0.4.1",
-    "react-router-dom": "^6.2.2",
+    "react-router-dom": "6.2.2",
     "react-syntax-highlighter": "^15.4.3",
     "react-table": "^7.8.0",
     "react-use-intercom": "^2.0.0",
@@ -172,9 +173,6 @@
       "eslint"
     ]
   },
-  "resolutions": {
-    "react-error-overlay": "6.0.11"
-  },
   "eslintConfig": {
     "overrides": [
       {

apps/web/src/App.tsx

@@ -58,8 +58,7 @@ import { UpdateTenantPage } from './pages/tenants/UpdateTenantPage';
 import { ApiKeysCard } from './pages/settings/tabs';
 import { EmailSettings } from './pages/settings/tabs/EmailSettings';
 import { ProductLead } from './components/utils/ProductLead';
-import { SSO, UserAccess } from './design-system/icons';
-import { Cloud } from './design-system/icons/general/Cloud';
+import { SSO, UserAccess, Cloud } from '@novu/design-system';
 import { BrandingForm, LayoutsListPage } from './pages/brand/tabs';
 
 library.add(far, fas);

apps/web/src/components/conditions/Conditions.tsx

@@ -5,10 +5,26 @@ import { Control, Controller, useFieldArray, useForm, useWatch } from 'react-hoo
 
 import { FILTER_TO_LABEL, FilterPartTypeEnum } from '@novu/shared';
 
-import { Button, colors, Dropdown, Input, Select, Sidebar, Text, Title, Tooltip } from '../../design-system';
-import { ConditionPlus, DotsHorizontal, Duplicate, Trash, Condition, ErrorIcon } from '../../design-system/icons';
-import { When } from '../utils/When';
+import {
+  Button,
+  colors,
+  Dropdown,
+  Input,
+  Select,
+  Sidebar,
+  Text,
+  Title,
+  Tooltip,
+  ConditionPlus,
+  DotsHorizontal,
+  Duplicate,
+  Trash,
+  Condition,
+  ErrorIcon,
+  When,
+} from '@novu/design-system';
 import { ConditionsContextEnum, ConditionsContextFields, IConditions } from './types';
+import { HEADER_HEIGHT } from '../layout/constants';
 
 interface IConditionsForm {
   conditions: IConditions[];
@@ -78,6 +94,7 @@ export function Conditions({
 
   return (
     <Sidebar
+      headerHeight={HEADER_HEIGHT}
       isOpened={isOpened}
       onClose={onClose}
       isExpanded

apps/web/src/components/execution-detail/ExecutionDetail.tsx

@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { ExecutionDetailShowRaw } from './ExecutionDetailShowRaw';
 import { getColorByStatus, getLogoByType, getLogoByStatus } from './helpers';
 
-import { colors, Text } from '../../design-system';
+import { colors, Text } from '@novu/design-system';
 import { When } from '../utils/When';
 
 const ExecutionDetailStatusWrapper = styled(Container)`

apps/web/src/components/execution-detail/ExecutionDetailShowRaw.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
 import { Container, Group, useMantineColorScheme } from '@mantine/core';
 import { Prism } from '@mantine/prism';
-import { Button, colors, Text } from '../../design-system';
-import { Close } from '../../design-system/icons/actions/Close';
+import { Button, colors, Text, Close } from '@novu/design-system';
 import { When } from '../utils/When';
 import { ExecutionDetailsConditions } from './ExecutionDetailsConditions';
 

apps/web/src/components/execution-detail/ExecutionDetailTrigger.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { Text } from '../../design-system';
+import { Text } from '@novu/design-system';
 import { getCurlTriggerSnippet } from '../../pages/templates/components/TriggerSnippetTabs';
 
 const TriggerTitle = styled(Text)`

apps/web/src/components/execution-detail/ExecutionDetailsAccordion.tsx

@@ -2,7 +2,7 @@ import { Accordion, createStyles } from '@mantine/core';
 
 import { ExecutionDetailsStepContent } from './ExecutionDetailsStepContent';
 import { ExecutionDetailsStepHeader } from './ExecutionDetailsStepHeader';
-import { colors } from '../../design-system';
+import { colors } from '@novu/design-system';
 
 const useStyles = createStyles((theme) => ({
   control: {

apps/web/src/components/execution-detail/ExecutionDetailsConditionItem.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { Group, Stack } from '@mantine/core';
 import { ICondition } from '@novu/shared';
-import { colors, Text, Tooltip } from '../../design-system';
-import { CheckCircle, ErrorIcon } from '../../design-system/icons';
+import { colors, Text, Tooltip, CheckCircle, ErrorIcon } from '@novu/design-system';
 
 export function ExecutionDetailsConditionItem({ condition }: { condition: ICondition }) {
   const isPassed = condition.passed;

apps/web/src/components/execution-detail/ExecutionDetailsFooter.tsx

@@ -2,7 +2,7 @@ import { Group } from '@mantine/core';
 import styled from '@emotion/styled';
 
 import { GotAQuestionButton } from '../utils/GotAQuestionButton';
-import { Container } from '../../design-system';
+import { Container } from '@novu/design-system';
 
 const ActionsWrapper = styled(Container)`
   margin: 0;

apps/web/src/components/execution-detail/ExecutionDetailsModal.tsx

@@ -6,7 +6,7 @@ import { JobStatusEnum } from '@novu/shared';
 import { ExecutionDetailsAccordion } from './ExecutionDetailsAccordion';
 import { ExecutionDetailsFooter } from './ExecutionDetailsFooter';
 import { getNotification } from '../../api/activity';
-import { colors, shadows, Text, Title } from '../../design-system';
+import { colors, shadows, Text, Title } from '@novu/design-system';
 import { When } from '../utils/When';
 import { useNotificationStatus } from '../../pages/activities/hooks/useNotificationStatus';
 

apps/web/src/components/execution-detail/ExecutionDetailsStepContent.tsx

@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { ExecutionDetail } from './ExecutionDetail';
 import { ExecutionDetailRawSnippet } from './ExecutionDetailShowRaw';
 import { ExecutionDetailTrigger } from './ExecutionDetailTrigger';
-import { colors, Text } from '../../design-system';
+import { colors, Text } from '@novu/design-system';
 import { When } from '../utils/When';
 
 const ExecutionDetailsStepContentWrapper = styled.div`

apps/web/src/components/execution-detail/ExecutionDetailsStepHeader.tsx

@@ -5,8 +5,7 @@ import { StepTypeEnum, DelayTypeEnum, JobStatusEnum } from '@novu/shared';
 
 import { ExecutionDetailsWebhookFeedback } from './ExecutionDetailsWebhookFeedback';
 import { getLogoByType } from './helpers';
-import { colors, Text } from '../../design-system';
-import { CheckCircle, ErrorIcon } from '../../design-system/icons';
+import { colors, Text, CheckCircle, ErrorIcon } from '@novu/design-system';
 
 const StepName = styled(Text)`
   color: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.white : colors.B40)};

apps/web/src/components/execution-detail/ExecutionDetailsWebhookFeedback.tsx

@@ -2,7 +2,7 @@ import { Group } from '@mantine/core';
 import styled from '@emotion/styled';
 import { format, parseISO } from 'date-fns';
 
-import { colors, Container, Text, Tooltip } from '../../design-system';
+import { colors, Container, Text, Tooltip } from '@novu/design-system';
 import { mappedWebhookStatuses } from './helpers';
 
 const WebhookFeedbackWrapper = styled(Container)`

apps/web/src/components/execution-detail/helpers.ts

@@ -1,7 +1,7 @@
 import { ExecutionDetailsStatusEnum, StepTypeEnum } from '@novu/shared';
 import { MantineTheme } from '@mantine/core';
-import { colors } from '../../design-system';
 import {
+  colors,
   Chat,
   Check,
   CheckCircle,
@@ -17,8 +17,8 @@ import {
   Sent,
   Sms,
   Timer,
-} from '../../design-system/icons';
-import { WarningIcon } from '../../design-system/icons/general/WarningIcon';
+  WarningIcon,
+} from '@novu/design-system';
 
 export const getColorByStatus = (theme: MantineTheme, status: ExecutionDetailsStatusEnum): string => {
   if (status === ExecutionDetailsStatusEnum.FAILED) {

apps/web/src/components/layout/AppLayout.tsx

@@ -3,7 +3,7 @@ import * as Sentry from '@sentry/react';
 import { Outlet } from 'react-router-dom';
 import styled from '@emotion/styled';
 
-import { ThemeProvider } from '../../design-system/ThemeProvider';
+import { ThemeProvider } from '@novu/design-system';
 import { HeaderNav } from './components/HeaderNav';
 import { SideNav } from './components/SideNav';
 import { IntercomProvider } from 'react-use-intercom';

apps/web/src/components/layout/components/AuthContainer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { colors, Text, Title, Container } from '../../../design-system';
+import { colors, Text, Title, Container } from '@novu/design-system';
 import PageMeta from './PageMeta';
 
 export default function AuthContainer({

apps/web/src/components/layout/components/AuthLayout.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createStyles, Box } from '@mantine/core';
-import { ThemeProvider } from '../../../design-system/ThemeProvider';
+import { ThemeProvider } from '@novu/design-system';
 import { CONTEXT_PATH } from '../../../config';
 
 export default function AuthLayout({ children }: { children?: React.ReactNode }) {

apps/web/src/components/layout/components/Card.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Container, Space, Sx } from '@mantine/core';
-import { Title } from '../../../design-system';
+import { Title } from '@novu/design-system';
 
 const Card = ({
   title,

apps/web/src/components/layout/components/ChangesCountBadge.tsx

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 
 import { getChangesCount } from '../../../api/changes';
 import { QueryKeys } from '../../../api/query.keys';
-import { NotificationBadge } from '../../../design-system';
+import { NotificationBadge } from '@novu/design-system';
 
 export const ChangesCountBadge = () => {
   const { data: changesCount = 0 } = useQuery<number>([QueryKeys.changesCount], getChangesCount);

apps/web/src/components/layout/components/HeaderNav.tsx

@@ -7,8 +7,20 @@ import { useIntercom } from 'react-use-intercom';
 import LogRocket from 'logrocket';
 import { CONTEXT_PATH, INTERCOM_APP_ID, IS_DOCKER_HOSTED, LOGROCKET_ID, REACT_APP_VERSION } from '../../../config';
 import { ROUTES } from '../../../constants/routes.enum';
-import { colors, Dropdown, shadows, Text, Tooltip } from '../../../design-system';
-import { Ellipse, Mail, Moon, Question, Sun, Trash, Logout } from '../../../design-system/icons';
+import {
+  colors,
+  Dropdown,
+  shadows,
+  Text,
+  Tooltip,
+  Ellipse,
+  Mail,
+  Moon,
+  Question,
+  Sun,
+  Logout,
+} from '@novu/design-system';
+
 import { useLocalThemePreference } from '../../../hooks';
 import { discordInviteUrl } from '../../../pages/quick-start/consts';
 import { useAuthContext } from '../../providers/AuthProvider';

apps/web/src/components/layout/components/OrganizationSelect.tsx

@@ -4,7 +4,7 @@ import * as capitalize from 'lodash.capitalize';
 import styled from '@emotion/styled';
 import { IOrganizationEntity } from '@novu/shared';
 
-import { Select } from '../../../design-system';
+import { Select } from '@novu/design-system';
 import { addOrganization, switchOrganization } from '../../../api/organization';
 import { useAuthContext } from '../../providers/AuthProvider';
 import { useSpotlightContext } from '../../providers/SpotlightProvider';

apps/web/src/components/layout/components/PageContainer.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import React, { CSSProperties } from 'react';
-import { Container } from '../../../design-system';
+import { Container } from '@novu/design-system';
 import PageMeta from './PageMeta';
 
 function PageContainer({

apps/web/src/components/layout/components/PageHeader.tsx

@@ -1,5 +1,5 @@
 import { Group } from '@mantine/core';
-import { Title, Container } from '../../../design-system';
+import { Title, Container } from '@novu/design-system';
 
 function PageHeader({ actions, title }: { actions?: JSX.Element; title: string }) {
   return (

apps/web/src/components/layout/components/PolishingBanner.tsx

@@ -1,6 +1,6 @@
 import { useMantineTheme } from '@mantine/core';
 import { useSegment } from '../../providers/SegmentProvider';
-import { Close } from '../../../design-system/icons/actions/Close';
+import { Close } from '@novu/design-system';
 import styled from '@emotion/styled';
 import { useLocalStorage } from '@mantine/hooks';
 

apps/web/src/components/layout/components/SideNav.tsx

@@ -12,7 +12,7 @@ import { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
 import { ROUTES } from '../../../constants/routes.enum';
-import { colors, NavMenu, SegmentedControl, shadows } from '../../../design-system';
+import { colors, NavMenu, SegmentedControl, shadows } from '@novu/design-system';
 import {
   Activity,
   Bolt,
@@ -24,7 +24,7 @@ import {
   Repeat,
   Settings,
   Team,
-} from '../../../design-system/icons';
+} from '@novu/design-system';
 import { useEnvController, useIsMultiTenancyEnabled } from '../../../hooks';
 import { currentOnboardingStep } from '../../../pages/quick-start/components/route/store';
 import { useSpotlightContext } from '../../providers/SpotlightProvider';

apps/web/src/components/quick-start/common/Workflow.styles.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { colors } from '../../../design-system';
+import { colors } from '@novu/design-system';
 
 export const WorkflowWrapper = styled.div<{ height: string }>`
   height: ${({ height }) => height};

apps/web/src/components/quick-start/digest-demo-flow/DigestNode.tsx

@@ -3,10 +3,9 @@ import { createStyles, NumberInput, Loader } from '@mantine/core';
 import styled from '@emotion/styled';
 
 import { NodeStepWithPopover } from './NodeStepWithPopover';
-import { CountdownTimer, DigestAction } from '../../../design-system/icons';
+import { CountdownTimer, DigestAction, colors } from '@novu/design-system';
 import { useDigestDemoFlowContext } from './DigestDemoFlowProvider';
 import { Indicator } from './Indicator';
-import { colors } from '../../../design-system';
 import { useEffect, useState } from 'react';
 import { useInterval } from '@mantine/hooks';
 import { useDataRef } from '../../../hooks';

apps/web/src/components/quick-start/digest-demo-flow/EmailNode.tsx

@@ -1,7 +1,7 @@
 import { Handle, Position } from 'react-flow-renderer';
 
 import { NodeStepWithPopover } from './NodeStepWithPopover';
-import { EmailFilled } from '../../../design-system/icons';
+import { EmailFilled } from '@novu/design-system';
 import { useDigestDemoFlowContext } from './DigestDemoFlowProvider';
 import { Indicator } from './Indicator';
 import { useAuthContext } from '../../providers/AuthProvider';

apps/web/src/components/quick-start/digest-demo-flow/Indicator.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import styled from '@emotion/styled';
 
-import { colors } from '../../../design-system';
+import { colors } from '@novu/design-system';
 
 const IndicatorHolder = styled.span<{ isShown }>`
   display: flex;

apps/web/src/components/quick-start/digest-demo-flow/NodeStepWithPopover.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 
 import { useLocation, useParams } from 'react-router-dom';
 
-import { Popover } from '../../../design-system';
+import { Popover } from '@novu/design-system';
 import {
   guidePreview,
   guidePlayground,

apps/web/src/components/quick-start/digest-demo-flow/TriggerNode.tsx

@@ -1,7 +1,6 @@
 import { Handle, Position } from 'react-flow-renderer';
 
-import { Button } from '../../../design-system';
-import { BoltOutlinedGradient } from '../../../design-system/icons';
+import { Button, BoltOutlinedGradient } from '@novu/design-system';
 import { useDigestDemoFlowContext } from './DigestDemoFlowProvider';
 import { NodeStepWithPopover } from './NodeStepWithPopover';
 

apps/web/src/components/quick-start/in-app-onboarding/InAppNode.tsx

@@ -1,5 +1,5 @@
 import { Handle, Position } from 'react-flow-renderer';
-import { InAppFilled } from '../../../design-system/icons';
+import { InAppFilled } from '@novu/design-system';
 import { NodeStep } from '../../workflow';
 
 export function InAppNode({ data }: { data: { label: string; email?: string } }) {

apps/web/src/components/quick-start/in-app-onboarding/InAppSandbox.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { Group, Overlay } from '@mantine/core';
-import { colors, shadows, Text } from '../../../design-system';
+import { colors, shadows, Text } from '@novu/design-system';
 import InAppSandboxWorkflow from './InAppSandboxWorkflow';
 import { YourAppHeaderSection } from './YourAppHeaderSection';