From dbede5eddb453e22dcdd8b39ae23dbb87b71a15f Mon Sep 17 00:00:00 2001 From: Soheil Hasankhani Date: Tue, 16 Jan 2024 15:01:03 +0330 Subject: [PATCH 1/2] feat: rtl support Added rtl property to inbox theme --- packages/client-api/package.json | 2 +- packages/client-graphql/package.json | 2 +- packages/components/package.json | 12 ++++++------ packages/react-brand-designer/package.json | 4 ++-- packages/react-elements/package.json | 2 +- packages/react-hooks/package.json | 4 ++-- packages/react-inbox-next/package.json | 2 +- packages/react-inbox/package.json | 10 +++++----- packages/react-preferences/package.json | 4 ++-- packages/react-provider/package.json | 4 ++-- packages/react-provider/src/types.ts | 1 + packages/react-toast/package.json | 4 ++-- packages/storybook/package.json | 14 +++++++------- packages/types/package.json | 2 +- 14 files changed, 34 insertions(+), 33 deletions(-) diff --git a/packages/client-api/package.json b/packages/client-api/package.json index b88d558c..4d25ddd8 100644 --- a/packages/client-api/package.json +++ b/packages/client-api/package.json @@ -1,6 +1,6 @@ { "name": "@trycourier/client-api", - "version": "4.8.0", + "version": "4.8.1", "description": "", "main": "dist/index.js", "private": true, diff --git a/packages/client-graphql/package.json b/packages/client-graphql/package.json index 9564eb68..aec376fa 100644 --- a/packages/client-graphql/package.json +++ b/packages/client-graphql/package.json @@ -1,6 +1,6 @@ { "name": "@trycourier/client-graphql", - "version": "4.8.0", + "version": "4.8.1", "description": "", "main": "dist/index.js", "types": "typings/index.d.ts", diff --git a/packages/components/package.json b/packages/components/package.json index a89f0a55..4baa6ce5 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@trycourier/components", - "version": "4.8.0", + "version": "4.8.1", "private": true, "description": "Beautiful, easy React toast notifications", "author": "Courier ", @@ -18,11 +18,11 @@ "license": "MIT", "dependencies": { "@trycourier/courier": "^1.3.0", - "@trycourier/react-brand-designer": "^4.8.0", - "@trycourier/react-inbox": "^4.8.0", - "@trycourier/react-preferences": "^4.8.0", - "@trycourier/react-provider": "^4.8.0", - "@trycourier/react-toast": "^4.8.0", + "@trycourier/react-brand-designer": "^4.8.1", + "@trycourier/react-inbox": "^4.8.1", + "@trycourier/react-preferences": "^4.8.1", + "@trycourier/react-provider": "^4.8.1", + "@trycourier/react-toast": "^4.8.1", "babel-loader": "^8.0.6", "babel-preset-preact": "^2.0.0", "camel-case": "^4.1.2", diff --git a/packages/react-brand-designer/package.json b/packages/react-brand-designer/package.json index 999172b9..77e13dbe 100644 --- a/packages/react-brand-designer/package.json +++ b/packages/react-brand-designer/package.json @@ -1,6 +1,6 @@ { "name": "@trycourier/react-brand-designer", - "version": "4.8.0", + "version": "4.8.1", "description": "Embeddable brand designer for multi-channel notifications", "homepage": "https://github.com/trycourier/courier-react/tree/main/packages/react-elements#readme", "license": "ISC", @@ -29,7 +29,7 @@ "url": "https://github.com/trycourier/courier-react/issues" }, "dependencies": { - "@trycourier/react-elements": "^4.8.0", + "@trycourier/react-elements": "^4.8.1", "rimraf": "^3.0.2" }, "devDependencies": { diff --git a/packages/react-elements/package.json b/packages/react-elements/package.json index bf4f0eea..2ec8d0f8 100644 --- a/packages/react-elements/package.json +++ b/packages/react-elements/package.json @@ -1,6 +1,6 @@ { "name": "@trycourier/react-elements", - "version": "4.8.0", + "version": "4.8.1", "description": "Shareable components for each Courier package", "author": "Drew Youngwerth ", "homepage": "https://github.com/trycourier/courier-react/tree/main/packages/react-elements#readme", diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json index 54b981b3..28519890 100644 --- a/packages/react-hooks/package.json +++ b/packages/react-hooks/package.json @@ -1,6 +1,6 @@ { "name": "@trycourier/react-hooks", - "version": "4.8.0", + "version": "4.8.1", "description": "", "main": "dist/index.js", "types": "typings/index.d.ts", @@ -20,7 +20,7 @@ "concat-md": "^0.3.5" }, "dependencies": { - "@trycourier/client-graphql": "^4.8.0", + "@trycourier/client-graphql": "^4.8.1", "deep-extend": "^0.6.0", "rimraf": "^3.0.2" }, diff --git a/packages/react-inbox-next/package.json b/packages/react-inbox-next/package.json index a07a2e80..8a0beb94 100644 --- a/packages/react-inbox-next/package.json +++ b/packages/react-inbox-next/package.json @@ -1,6 +1,6 @@ { "name": "@trycourier/react-inbox-next", - "version": "4.8.0", + "version": "4.8.1", "description": "", "private": true, "main": "dist/index.js", diff --git a/packages/react-inbox/package.json b/packages/react-inbox/package.json index 1f20c2e0..d8d99223 100644 --- a/packages/react-inbox/package.json +++ b/packages/react-inbox/package.json @@ -1,6 +1,6 @@ { "name": "@trycourier/react-inbox", - "version": "4.8.0", + "version": "4.8.1", "description": "", "main": "dist/index.js", "types": "typings/index.d.ts", @@ -20,10 +20,10 @@ "dependencies": { "@fontsource/poppins": "^4.5.9", "@tippyjs/react": "^4.2.3", - "@trycourier/client-graphql": "^4.8.0", - "@trycourier/react-elements": "^4.8.0", - "@trycourier/react-hooks": "^4.8.0", - "@trycourier/react-preferences": "^4.8.0", + "@trycourier/client-graphql": "^4.8.1", + "@trycourier/react-elements": "^4.8.1", + "@trycourier/react-hooks": "^4.8.1", + "@trycourier/react-preferences": "^4.8.1", "classnames": "^2.2.6", "date-fns": "^2.19.0", "deep-extend": "^0.6.0", diff --git a/packages/react-preferences/package.json b/packages/react-preferences/package.json index e3712951..f9eda9b8 100644 --- a/packages/react-preferences/package.json +++ b/packages/react-preferences/package.json @@ -1,6 +1,6 @@ { "name": "@trycourier/react-preferences", - "version": "4.8.0", + "version": "4.8.1", "main": "dist/index.js", "types": "typings/index.d.ts", "scripts": { @@ -23,7 +23,7 @@ ], "license": "ISC", "dependencies": { - "@trycourier/react-hooks": "^4.8.0", + "@trycourier/react-hooks": "^4.8.1", "react-toggle": "^4.1.2", "styled-components": "^5.3.6" } diff --git a/packages/react-provider/package.json b/packages/react-provider/package.json index 2db98bcb..bb9057a3 100644 --- a/packages/react-provider/package.json +++ b/packages/react-provider/package.json @@ -1,6 +1,6 @@ { "name": "@trycourier/react-provider", - "version": "4.8.0", + "version": "4.8.1", "description": "", "main": "dist/index.js", "types": "typings/index.d.ts", @@ -16,7 +16,7 @@ }, "license": "ISC", "dependencies": { - "@trycourier/client-graphql": "^4.8.0", + "@trycourier/client-graphql": "^4.8.1", "buffer": "^6.0.3", "jwt-decode": "^3.1.2", "react-use": "^17.2.1", diff --git a/packages/react-provider/src/types.ts b/packages/react-provider/src/types.ts index e412c08c..79e2b664 100644 --- a/packages/react-provider/src/types.ts +++ b/packages/react-provider/src/types.ts @@ -37,6 +37,7 @@ export interface Brand { borderRadius?: string; disableMessageIcon?: boolean; placement?: "top" | "bottom" | "left" | "right"; + renderActionsAsButtons?: boolean; emptyState?: { textColor?: string; text?: string; diff --git a/packages/react-toast/package.json b/packages/react-toast/package.json index 16e0aa61..bcd772b5 100644 --- a/packages/react-toast/package.json +++ b/packages/react-toast/package.json @@ -1,6 +1,6 @@ { "name": "@trycourier/react-toast", - "version": "4.8.0", + "version": "4.8.1", "description": "Beautiful, easy React toast notifications", "main": "dist/index.js", "types": "typings/index.d.ts", @@ -24,7 +24,7 @@ "concat-md": "^0.3.5" }, "dependencies": { - "@trycourier/react-hooks": "^4.8.0", + "@trycourier/react-hooks": "^4.8.1", "deep-extend": "^0.6.0", "markdown-to-jsx": "7.1.7", "react-toastify": "^9.1.3", diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 6fbc7691..69b50146 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -1,6 +1,6 @@ { "name": "@trycourier/storybook", - "version": "4.8.0", + "version": "4.8.1", "private": true, "description": "Beautiful, easy React toast notifications", "author": "Courier ", @@ -23,12 +23,12 @@ "@storybook/addon-links": "^6.5.9", "@storybook/addon-viewport": "^6.5.9", "@storybook/react": "^6.5.9", - "@trycourier/components": "^4.8.0", - "@trycourier/react-brand-designer": "^4.8.0", - "@trycourier/react-inbox": "^4.8.0", - "@trycourier/react-preferences": "^4.8.0", - "@trycourier/react-provider": "^4.8.0", - "@trycourier/react-toast": "^4.8.0", + "@trycourier/components": "^4.8.1", + "@trycourier/react-brand-designer": "^4.8.1", + "@trycourier/react-inbox": "^4.8.1", + "@trycourier/react-preferences": "^4.8.1", + "@trycourier/react-provider": "^4.8.1", + "@trycourier/react-toast": "^4.8.1", "react-frame-component": "^5.2.3", "react-markdown": "^8.0.1", "rehype-raw": "^6.1.1", diff --git a/packages/types/package.json b/packages/types/package.json index d31efe39..412530dc 100644 --- a/packages/types/package.json +++ b/packages/types/package.json @@ -1,7 +1,7 @@ { "name": "@trycourier/types", "private": true, - "version": "4.8.0", + "version": "4.8.1", "main": "index.d.ts", "types": "index.d.ts", "scripts": {} From 20b70b7ca597f1b2b555e96f921315666b9c0385 Mon Sep 17 00:00:00 2001 From: Soheil Hasankhani Date: Tue, 16 Jan 2024 15:27:32 +0330 Subject: [PATCH 2/2] feat: added missing files some files where missed from previouse commit --- .../src/components/Inbox/index.tsx | 6 ++-- .../src/components/Messages2.0/Header.tsx | 6 ++-- .../src/components/Messages2.0/Message.tsx | 15 +++++---- .../components/Messages2.0/actions/index.tsx | 15 +++++---- .../components/Messages2.0/actions/styles.ts | 3 +- .../src/components/Messages2.0/index.tsx | 15 ++++++--- .../src/components/Messages2.0/styled.tsx | 32 ++++++++++++------- packages/react-inbox/src/types.ts | 1 + 8 files changed, 58 insertions(+), 35 deletions(-) diff --git a/packages/react-inbox/src/components/Inbox/index.tsx b/packages/react-inbox/src/components/Inbox/index.tsx index ca2c72cc..24d0a545 100644 --- a/packages/react-inbox/src/components/Inbox/index.tsx +++ b/packages/react-inbox/src/components/Inbox/index.tsx @@ -41,13 +41,15 @@ const UnreadIndicator = styled.div<{ showUnreadMessageCount?: boolean }>( borderRadius: 17, padding: "0 4px", height: 16, - left: 12, + left: theme.rtl ? undefined : 12, + right: theme.rtl ? 12 : undefined, textAlign: "center", minWidth: 8, } : { top: -2, - right: 0, + right: theme.rtl ? undefined : 0, + left: theme.rtl ? 0 : undefined, borderRadius: "100%", padding: 5, }, diff --git a/packages/react-inbox/src/components/Messages2.0/Header.tsx b/packages/react-inbox/src/components/Messages2.0/Header.tsx index cc35091f..48d1a0d0 100644 --- a/packages/react-inbox/src/components/Messages2.0/Header.tsx +++ b/packages/react-inbox/src/components/Messages2.0/Header.tsx @@ -95,7 +95,8 @@ const DropdownOptionButton = styled.button<{ svg: { marginTop: "1px", - marginLeft: "3px", + marginLeft: theme.rtl ? undefined : "3px", + marginRight: theme.rtl ? "3px" : undefined, ...(showDropdown ? { transform: "rotate(180deg)", @@ -155,7 +156,8 @@ const HeadingDropdownOptions = styled.div(({ theme }) => { { position: "absolute", top: "42px", - left: 0, + left: theme.rtl ? undefined : 0, + right: theme.rtl ? 0 : undefined, background: "white", width: "100%", zIndex: 2, diff --git a/packages/react-inbox/src/components/Messages2.0/Message.tsx b/packages/react-inbox/src/components/Messages2.0/Message.tsx index 92ded5f4..8cab2ed5 100644 --- a/packages/react-inbox/src/components/Messages2.0/Message.tsx +++ b/packages/react-inbox/src/components/Messages2.0/Message.tsx @@ -34,7 +34,8 @@ const UnreadIndicator = styled.div<{ read?: IInboxMessagePreview["read"] }>( width: 2, background: primaryColor, position: "absolute", - left: "1px", + left: theme.rtl ? undefined : "1px", + right: theme.rtl ? "1px" : undefined, top: "1px", bottom: "1px", }, @@ -86,9 +87,9 @@ const MessageContainer = styled.div(({ theme }) => { }); const Contents = styled.div<{ hasIcon: boolean }>(({ theme, hasIcon }) => ({ - marginRight: "auto", - textAlign: "left", - marginLeft: hasIcon ? 12 : 0, + marginRight: theme.rtl ? (hasIcon ? 12 : 0) : "auto", + marginLeft: theme.rtl ? "auto" : hasIcon ? 12 : 0, + textAlign: theme.rtl ? "right" : "left", ...theme.message?.contents, })); @@ -101,12 +102,14 @@ const Pinned = styled.div<{ color?: string }>(({ theme, color }) => alignItems: "center", color: color ?? "rgb(115, 129, 155)", svg: { - paddingRight: "3px", + paddingRight: theme.rtl ? undefined : "3px", + paddingLeft: theme.rtl ? "3px" : undefined, }, img: { width: "18px", - paddingRight: "3px", + paddingRight: theme.rtl ? undefined : "3px", + paddingLeft: theme.rtl ? "3px" : undefined, }, }, theme?.message?.pinned diff --git a/packages/react-inbox/src/components/Messages2.0/actions/index.tsx b/packages/react-inbox/src/components/Messages2.0/actions/index.tsx index 26b76b6a..ad8f5c9d 100644 --- a/packages/react-inbox/src/components/Messages2.0/actions/index.tsx +++ b/packages/react-inbox/src/components/Messages2.0/actions/index.tsx @@ -61,24 +61,26 @@ const MobileActions = styled.div(({ theme }) => ); // eslint-disable-next-line @typescript-eslint/no-unused-vars -const Styled = styled.div((_props) => { +const Styled = styled.div(({ theme }) => { return { display: "flex", height: 24, alignItems: "center", position: "absolute", - right: 12, + right: theme.rtl ? undefined : 12, + left: theme.rtl ? 12 : undefined, ".close": { - marginRight: -6, - marginLeft: 6, + marginRight: theme.rtl ? 6 : -6, + marginLeft: theme.rtl ? -6 : 6, marginTop: -3, }, "> div": { opacity: 0, top: 4, - right: 0, + right: theme.rtl ? undefined : 0, + left: theme.rtl ? 0 : undefined, position: "absolute", visibility: "hidden", transition: "opacity 200ms ease-in-out", @@ -86,7 +88,7 @@ const Styled = styled.div((_props) => { "&:not(.hidden)": { opacity: 1, visibility: "visible", - textAlign: "right", + textAlign: theme.rtl ? "left" : "right", }, }, @@ -224,7 +226,6 @@ const MessageActions: React.FunctionComponent<{ tabIndex={0} title={created} aria-label={`created ${readableTimeAgo}`} - style={{ textAlign: "right" }} > {archived ? `Archived: ${formattedTime}` : formattedTime} diff --git a/packages/react-inbox/src/components/Messages2.0/actions/styles.ts b/packages/react-inbox/src/components/Messages2.0/actions/styles.ts index e8c7621e..42dfe6a6 100644 --- a/packages/react-inbox/src/components/Messages2.0/actions/styles.ts +++ b/packages/react-inbox/src/components/Messages2.0/actions/styles.ts @@ -11,7 +11,8 @@ export const getStyles = (theme: InboxTheme) => { background: "transparent", borderRadius: "6px", padding: 0, - marginLeft: "6px", + marginLeft: theme.rtl ? undefined : "6px", + marginRight: theme.rtl ? "6px" : undefined, height: "24px", width: "24px", transition: "background 200ms ease-in-out", diff --git a/packages/react-inbox/src/components/Messages2.0/index.tsx b/packages/react-inbox/src/components/Messages2.0/index.tsx index 3b23bf11..de7b5f95 100644 --- a/packages/react-inbox/src/components/Messages2.0/index.tsx +++ b/packages/react-inbox/src/components/Messages2.0/index.tsx @@ -30,7 +30,8 @@ const ResponsiveContainer = styled.div<{ isMobile?: boolean }>( }, position: "fixed", top: 0, - left: 0, + left: theme.rtl ? undefined : 0, + right: theme.rtl ? 0 : undefined, width: "100vw", height: "100vh", } @@ -52,7 +53,8 @@ const DismissInbox = styled.button(({ theme }) => borderRadius: "50%", position: "absolute", top: 6, - right: 8, + right: theme.rtl ? undefined : 8, + left: theme.rtl ? 8 : undefined, cursor: "pointer", width: 42, height: 42, @@ -110,9 +112,11 @@ export const Footer = styled.div(({ theme }) => letterSpacing: "0.1rem", height: 36, justifyContent: "center", - paddingRight: 18, + paddingRight: theme.rtl ? undefined : 18, + paddingLeft: theme.rtl ? 18 : undefined, svg: { - marginLeft: -3, + marginLeft: theme.rtl ? undefined : -3, + marginRight: theme.rtl ? -3 : undefined, marginTop: -4, }, @@ -156,7 +160,8 @@ const ScrollTop = styled.button<{ text: string }>(({ theme, text }) => { marginTop: "-10px", content: `'${text}'`, position: "absolute", - left: "50%", + left: theme.rtl ? undefined : "50%", + right: theme.rtl ? "50%" : undefined, transform: "translateX(-50%)", padding: "2px 8px", display: "inline-block", diff --git a/packages/react-inbox/src/components/Messages2.0/styled.tsx b/packages/react-inbox/src/components/Messages2.0/styled.tsx index a3ba921f..b0405d4c 100644 --- a/packages/react-inbox/src/components/Messages2.0/styled.tsx +++ b/packages/react-inbox/src/components/Messages2.0/styled.tsx @@ -33,9 +33,9 @@ export const Container = styled.div(({ theme }) => ); export const Contents = styled.div(({ theme }) => ({ - marginRight: "auto", - marginLeft: 15, - textAlign: "left", + marginRight: theme.rtl ? 15 : "auto", + marginLeft: theme.rtl ? "auto" : 15, + textAlign: theme.rtl ? "right" : "left", ...theme.message?.contents, })); @@ -46,7 +46,7 @@ export const Title = styled.div<{ read?: string }>(({ theme, read }) => fontStyle: "normal", fontWeight: "600", lineHeight: "16px", - textAlign: "left", + textAlign: theme.rtl ? "right" : "left", display: "-webkit-box", overflow: "hidden", textOverflow: "ellipsis", @@ -67,7 +67,7 @@ export const TextElement = styled.div(({ theme }) => maxWidth: 250, fontWeight: "400", lineHeight: "16px", - textAlign: "left", + textAlign: theme.rtl ? "right" : "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "pre-line", @@ -101,7 +101,8 @@ export const ActionElement = styled.button<{ padding: "0 16px", cursor: "pointer", border: `1px solid ${primary ? "transparent" : "rgba(28, 39, 58, 1)"}`, - marginRight: "12px", + marginRight: theme.rtl ? undefined : "12px", + marginLeft: theme.rtl ? "12px" : undefined, marginTop: "6px", transition: "all 100ms ease-in", "&:hover": { @@ -127,6 +128,7 @@ export const TimeAgo = styled.div(({ theme }) => maxWidth: "90px", textOverflow: "ellipsis", overflow: "hidden", + textAlign: theme.rtl ? "left" : "right", }, theme.message?.timeAgo ) @@ -166,7 +168,8 @@ export const UnreadIndicator = styled.div(({ theme }) => backgroundColor: theme?.brand?.colors?.primary ?? "#9121c2", borderRadius: "50%", position: "absolute", - left: "13px", + left: theme.rtl ? undefined : "13px", + right: theme.rtl ? "13px" : undefined, }, theme?.message?.unreadIndicator ) @@ -204,7 +207,8 @@ export const ResponsiveContainer = styled.div<{ isMobile?: boolean }>( ? { position: "fixed", top: 0, - left: 0, + left: theme.rtl ? undefined : 0, + right: theme.rtl ? 0 : undefined, width: "100vw", height: "100vh", } @@ -272,10 +276,12 @@ export const Footer = styled.div(({ theme }) => fontWeight: "700", height: 45, justifyContent: "center", - paddingRight: 18, + paddingRight: theme.rtl ? undefined : 18, + paddingLeft: theme.rtl ? 18 : undefined, svg: { marginTop: 2, - marginLeft: -1, + marginLeft: theme.rtl ? undefined : -1, + marginRight: theme.rtl ? -1 : undefined, }, a: { @@ -293,9 +299,11 @@ export const Line = styled.div(({ theme }) => ({ flex: 1, opacity: "0.18", ":first-child": { - marginRight: "15px", + marginRight: theme.rtl ? undefined : "15px", + marginLeft: theme.rtl ? "15px" : undefined, }, ":last-child": { - marginLeft: "15px", + marginRight: theme.rtl ? "15px" : undefined, + marginLeft: theme.rtl ? undefined : "15px", }, })); diff --git a/packages/react-inbox/src/types.ts b/packages/react-inbox/src/types.ts index 320968e3..6b19c006 100644 --- a/packages/react-inbox/src/types.ts +++ b/packages/react-inbox/src/types.ts @@ -17,6 +17,7 @@ export interface InboxTheme { footer?: CSSObject; header?: CSSObject; menu?: CSSObject; + rtl?: boolean; tooltip?: CSSObject; icon?: CSSObject & { open?: string;