From f60aa5b8d38625014d9827068d76af677c357231 Mon Sep 17 00:00:00 2001 From: Biswajeet Das Date: Fri, 4 Oct 2024 15:42:18 +0530 Subject: [PATCH] feat(js): Com 229 update the in app preview component in the web app to (#6600) Co-authored-by: Sokratis Vidros --- apps/web/package.json | 1 + .../preview/in-app/v2/InboxPreviewContent.tsx | 34 ++++++++++++++--- packages/js/internal/package.json | 5 +++ packages/js/package.json | 13 ++++++- .../src/ui/components/elements/Markdown.tsx | 38 +------------------ packages/js/src/ui/internal/index.ts | 1 + packages/js/src/ui/internal/parseMarkdown.tsx | 36 ++++++++++++++++++ packages/js/tsup.config.ts | 1 + playground/nextjs/src/pages/index.tsx | 6 ++- pnpm-lock.yaml | 29 +++++++------- 10 files changed, 106 insertions(+), 58 deletions(-) create mode 100644 packages/js/internal/package.json create mode 100644 packages/js/src/ui/internal/index.ts create mode 100644 packages/js/src/ui/internal/parseMarkdown.tsx diff --git a/apps/web/package.json b/apps/web/package.json index 5543aede43f..d9ef0a3e66d 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -61,6 +61,7 @@ "@mantine/spotlight": "^5.7.1", "@monaco-editor/react": "^4.6.0", "@novu/design-system": "workspace:*", + "@novu/js": "workspace:*", "@novu/notification-center": "workspace:*", "@novu/novui": "workspace:*", "@novu/shared": "workspace:*", diff --git a/apps/web/src/components/workflow/preview/in-app/v2/InboxPreviewContent.tsx b/apps/web/src/components/workflow/preview/in-app/v2/InboxPreviewContent.tsx index 5e7be6f7a85..87084311a6e 100644 --- a/apps/web/src/components/workflow/preview/in-app/v2/InboxPreviewContent.tsx +++ b/apps/web/src/components/workflow/preview/in-app/v2/InboxPreviewContent.tsx @@ -2,6 +2,7 @@ import { Text, Title } from '@novu/novui'; import { css, cva } from '@novu/novui/css'; import { IconArrowDropDown, IconMoreHoriz, IconSettings } from '@novu/novui/icons'; import { Center, Flex, HStack, Stack } from '@novu/novui/jsx'; +import { parseMarkdownIntoTokens } from '@novu/js/internal'; import { ParsedPreviewStateType } from '../../../../../pages/templates/hooks/usePreviewInAppTemplate'; import { SkeletonStyled } from '../Content.styles'; import { InboxAvatar } from './InboxAvatar'; @@ -22,6 +23,31 @@ export const INBOX_TOKENS = { 'Inbox/margin/message/txt/buttons': '1rem', } as const; +const renderText = (text?: string) => { + if (!text) { + return null; + } + + const tokens = parseMarkdownIntoTokens(text); + + return tokens.map((token, index) => { + if (token.type === 'bold') { + return ( + + ); + } + + return token.content; + }); +}; + export function InboxPreviewContent({ isPreviewLoading, parsedPreviewState, @@ -158,17 +184,13 @@ export function InboxPreviewContent({ - - {parsedPreviewState.subject} - + {renderText(parsedPreviewState.subject)} 5 min - - {parsedPreviewState.content} - + {renderText(parsedPreviewState.content)} {/* Actions Section */} diff --git a/packages/js/internal/package.json b/packages/js/internal/package.json new file mode 100644 index 00000000000..5f199a72b2f --- /dev/null +++ b/packages/js/internal/package.json @@ -0,0 +1,5 @@ +{ + "main": "../dist/cjs/internal/index.cjs", + "module": "../dist/esm/internal/index.mjs", + "types": "../dist/cjs/internal/index.d.ts" +} diff --git a/packages/js/package.json b/packages/js/package.json index a28bd70741c..ef495a9ca5e 100644 --- a/packages/js/package.json +++ b/packages/js/package.json @@ -38,6 +38,16 @@ "types": "./dist/cjs/themes/index.js", "default": "./dist/cjs/themes/index.d.ts" } + }, + "./internal": { + "import": { + "types": "./dist/esm/internal/index.d.mts", + "default": "./dist/esm/internal/index.mjs" + }, + "require": { + "types": "./dist/cjs/internal/index.js", + "default": "./dist/cjs/internal/index.d.ts" + } } }, "files": [ @@ -47,7 +57,8 @@ "dist/novu.min.js", "dist/novu.min.js.gz", "ui/**/*", - "themes/**/*" + "themes/**/*", + "internal/**/*" ], "sideEffects": false, "private": false, diff --git a/packages/js/src/ui/components/elements/Markdown.tsx b/packages/js/src/ui/components/elements/Markdown.tsx index 237ebd7115e..59fb136e78b 100644 --- a/packages/js/src/ui/components/elements/Markdown.tsx +++ b/packages/js/src/ui/components/elements/Markdown.tsx @@ -1,44 +1,8 @@ import { createMemo, For, JSX } from 'solid-js'; import { useStyle } from '../../helpers'; +import { parseMarkdownIntoTokens } from '../../internal'; import { AppearanceKey } from '../../types'; -interface Token { - type: 'bold' | 'text'; - content: string; -} - -const parseMarkdownIntoTokens = (text: string): Token[] => { - const tokens: Token[] = []; - let buffer = ''; - let inBold = false; - - for (let i = 0; i < text.length; i += 1) { - // Check if it's an escaped character - if (text[i] === '\\' && text[i + 1] === '*') { - buffer += '*'; - i += 1; - } - // Check for bold marker ** - else if (text[i] === '*' && text[i + 1] === '*') { - if (buffer) { - tokens.push({ type: inBold ? 'bold' : 'text', content: buffer }); - buffer = ''; - } - inBold = !inBold; - i += 1; - } else { - buffer += text[i]; - } - } - - // Push any remaining buffered text as a token - if (buffer) { - tokens.push({ type: inBold ? 'bold' : 'text', content: buffer }); - } - - return tokens; -}; - const Bold = (props: { children?: JSX.Element; appearanceKey?: AppearanceKey }) => { const style = useStyle(); diff --git a/packages/js/src/ui/internal/index.ts b/packages/js/src/ui/internal/index.ts new file mode 100644 index 00000000000..76947b3dda3 --- /dev/null +++ b/packages/js/src/ui/internal/index.ts @@ -0,0 +1 @@ +export * from './parseMarkdown'; diff --git a/packages/js/src/ui/internal/parseMarkdown.tsx b/packages/js/src/ui/internal/parseMarkdown.tsx new file mode 100644 index 00000000000..a5056d19796 --- /dev/null +++ b/packages/js/src/ui/internal/parseMarkdown.tsx @@ -0,0 +1,36 @@ +export interface Token { + type: 'bold' | 'text'; + content: string; +} + +export const parseMarkdownIntoTokens = (text: string): Token[] => { + const tokens: Token[] = []; + let buffer = ''; + let inBold = false; + + for (let i = 0; i < text.length; i += 1) { + // Check if it's an escaped character + if (text[i] === '\\' && text[i + 1] === '*') { + buffer += '*'; + i += 1; + } + // Check for bold marker ** + else if (text[i] === '*' && text[i + 1] === '*') { + if (buffer) { + tokens.push({ type: inBold ? 'bold' : 'text', content: buffer }); + buffer = ''; + } + inBold = !inBold; + i += 1; + } else { + buffer += text[i]; + } + } + + // Push any remaining buffered text as a token + if (buffer) { + tokens.push({ type: inBold ? 'bold' : 'text', content: buffer }); + } + + return tokens; +}; diff --git a/packages/js/tsup.config.ts b/packages/js/tsup.config.ts index 31a189edca2..fb8fb5b7274 100644 --- a/packages/js/tsup.config.ts +++ b/packages/js/tsup.config.ts @@ -48,6 +48,7 @@ const baseModuleConfig: Options = { index: './src/index.ts', 'ui/index': './src/ui/index.ts', 'themes/index': './src/ui/themes/index.ts', + 'internal/index': './src/ui/internal/index.ts', }, }; diff --git a/playground/nextjs/src/pages/index.tsx b/playground/nextjs/src/pages/index.tsx index 65c2e92f77f..bd366d430f8 100644 --- a/playground/nextjs/src/pages/index.tsx +++ b/playground/nextjs/src/pages/index.tsx @@ -1,6 +1,7 @@ +import { Inbox } from '@novu/react'; +import { dark } from '@novu/react/themes'; import Title from '@/components/Title'; import { novuConfig } from '@/utils/config'; -import { Inbox } from '@novu/react'; export default function Home() { return ( @@ -14,6 +15,9 @@ export default function Home() { '6697c185607852e9104daf33': 'My workflow in other language', // key is workflow id }, }} + appearance={{ + baseTheme: dark, + }} /> ); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e124b9fb374..fe21848e7cf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -969,6 +969,9 @@ importers: '@novu/design-system': specifier: workspace:* version: link:../../libs/design-system + '@novu/js': + specifier: workspace:* + version: link:../../packages/js '@novu/notification-center': specifier: workspace:* version: link:../../packages/notification-center @@ -34012,8 +34015,8 @@ snapshots: dependencies: '@aws-crypto/sha256-browser': 3.0.0 '@aws-crypto/sha256-js': 3.0.0 - '@aws-sdk/client-sso-oidc': 3.575.0(@aws-sdk/client-sts@3.575.0) - '@aws-sdk/client-sts': 3.575.0 + '@aws-sdk/client-sso-oidc': 3.575.0 + '@aws-sdk/client-sts': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0) '@aws-sdk/core': 3.575.0 '@aws-sdk/credential-provider-node': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)(@aws-sdk/client-sts@3.575.0) '@aws-sdk/middleware-host-header': 3.575.0 @@ -34214,8 +34217,8 @@ snapshots: '@aws-crypto/sha1-browser': 3.0.0 '@aws-crypto/sha256-browser': 3.0.0 '@aws-crypto/sha256-js': 3.0.0 - '@aws-sdk/client-sso-oidc': 3.575.0(@aws-sdk/client-sts@3.575.0) - '@aws-sdk/client-sts': 3.575.0 + '@aws-sdk/client-sso-oidc': 3.575.0 + '@aws-sdk/client-sts': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0) '@aws-sdk/core': 3.575.0 '@aws-sdk/credential-provider-node': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)(@aws-sdk/client-sts@3.575.0) '@aws-sdk/middleware-bucket-endpoint': 3.575.0 @@ -34441,11 +34444,11 @@ snapshots: - aws-crt optional: true - '@aws-sdk/client-sso-oidc@3.575.0(@aws-sdk/client-sts@3.575.0)': + '@aws-sdk/client-sso-oidc@3.575.0': dependencies: '@aws-crypto/sha256-browser': 3.0.0 '@aws-crypto/sha256-js': 3.0.0 - '@aws-sdk/client-sts': 3.575.0 + '@aws-sdk/client-sts': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0) '@aws-sdk/core': 3.575.0 '@aws-sdk/credential-provider-node': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)(@aws-sdk/client-sts@3.575.0) '@aws-sdk/middleware-host-header': 3.575.0 @@ -34484,7 +34487,6 @@ snapshots: '@smithy/util-utf8': 3.0.0 tslib: 2.7.0 transitivePeerDependencies: - - '@aws-sdk/client-sts' - aws-crt '@aws-sdk/client-sso-oidc@3.637.0(@aws-sdk/client-sts@3.637.0)': @@ -34869,11 +34871,11 @@ snapshots: - aws-crt optional: true - '@aws-sdk/client-sts@3.575.0': + '@aws-sdk/client-sts@3.575.0(@aws-sdk/client-sso-oidc@3.575.0)': dependencies: '@aws-crypto/sha256-browser': 3.0.0 '@aws-crypto/sha256-js': 3.0.0 - '@aws-sdk/client-sso-oidc': 3.575.0(@aws-sdk/client-sts@3.575.0) + '@aws-sdk/client-sso-oidc': 3.575.0 '@aws-sdk/core': 3.575.0 '@aws-sdk/credential-provider-node': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)(@aws-sdk/client-sts@3.575.0) '@aws-sdk/middleware-host-header': 3.575.0 @@ -34912,6 +34914,7 @@ snapshots: '@smithy/util-utf8': 3.0.0 tslib: 2.7.0 transitivePeerDependencies: + - '@aws-sdk/client-sso-oidc' - aws-crt '@aws-sdk/client-sts@3.637.0': @@ -35141,7 +35144,7 @@ snapshots: '@aws-sdk/credential-provider-ini@3.575.0(@aws-sdk/client-sso-oidc@3.575.0)(@aws-sdk/client-sts@3.575.0)': dependencies: - '@aws-sdk/client-sts': 3.575.0 + '@aws-sdk/client-sts': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0) '@aws-sdk/credential-provider-env': 3.575.0 '@aws-sdk/credential-provider-process': 3.575.0 '@aws-sdk/credential-provider-sso': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0) @@ -35452,7 +35455,7 @@ snapshots: '@aws-sdk/credential-provider-web-identity@3.575.0(@aws-sdk/client-sts@3.575.0)': dependencies: - '@aws-sdk/client-sts': 3.575.0 + '@aws-sdk/client-sts': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0) '@aws-sdk/types': 3.575.0 '@smithy/property-provider': 3.1.3 '@smithy/types': 3.3.0 @@ -35973,7 +35976,7 @@ snapshots: '@aws-sdk/token-providers@3.575.0(@aws-sdk/client-sso-oidc@3.575.0)': dependencies: - '@aws-sdk/client-sso-oidc': 3.575.0(@aws-sdk/client-sts@3.575.0) + '@aws-sdk/client-sso-oidc': 3.575.0 '@aws-sdk/types': 3.575.0 '@smithy/property-provider': 3.1.3 '@smithy/shared-ini-file-loader': 3.1.4 @@ -35982,7 +35985,7 @@ snapshots: '@aws-sdk/token-providers@3.614.0(@aws-sdk/client-sso-oidc@3.575.0)': dependencies: - '@aws-sdk/client-sso-oidc': 3.575.0(@aws-sdk/client-sts@3.575.0) + '@aws-sdk/client-sso-oidc': 3.575.0 '@aws-sdk/types': 3.609.0 '@smithy/property-provider': 3.1.3 '@smithy/shared-ini-file-loader': 3.1.4