From 1b5aa514bedffffd5cdd249a641685434b51a8ce Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Mon, 14 Oct 2024 16:25:09 +0530 Subject: [PATCH 1/4] feat: Added spacing to docker compose file --- docker/docker-compose.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml index 20a14fd52..dbdef25a9 100644 --- a/docker/docker-compose.yml +++ b/docker/docker-compose.yml @@ -119,6 +119,7 @@ services: - 4200:4200 networks: - impler + rabbitmq: image: rabbitmq:3-alpine container_name: 'rabbitmq' From a14154d1ef67bad5e6078e13e641bd0b6cebfd7a Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Mon, 14 Oct 2024 16:25:51 +0530 Subject: [PATCH 2/4] feat: Added heights to integrationsnippets --- .../components/Integration/ContentBlock.tsx | 6 +- .../Integration/IntegrationData.tsx | 59 +++++++++++++++++-- .../Integration/IntegrationModal.tsx | 11 +++- 3 files changed, 66 insertions(+), 10 deletions(-) diff --git a/apps/web/components/Integration/ContentBlock.tsx b/apps/web/components/Integration/ContentBlock.tsx index 6f1cfeea3..640f4a62b 100644 --- a/apps/web/components/Integration/ContentBlock.tsx +++ b/apps/web/components/Integration/ContentBlock.tsx @@ -5,23 +5,25 @@ import { colors, IntegrationLanguage } from '@config'; type CodeBlockProps = { code: string; + height?: string; language?: IntegrationLanguage; }; const Prism = dynamic(() => import('@mantine/prism').then((mod) => mod.Prism)); -export const CodeBlock = ({ code, language = 'javascript' }: CodeBlockProps) => ( +export const CodeBlock = ({ height, code, language = 'javascript' }: CodeBlockProps) => (
}> ReactNode>> = { [IntegrationEnum.JAVASCRIPT]: { '1) Add Script': ({ embedScriptUrl }) => ( <> Add embed script before closing body tag `} language="javascript" + height={HEIGHTS.WITH_TEXT} + code={``} /> ), '2) Add Import Button': () => ( <> - Import`} language="markup" /> + Import`} + /> ), '3) Initialize Widget': () => ( @@ -36,6 +46,7 @@ export const integrationData: Recordinit method, which initialize the importer. let uuid = generateUuid(); @@ -68,6 +79,7 @@ export const integrationData: Record After initialization, use the following code to show the widget: { window.impler.show({ @@ -86,6 +98,7 @@ ImplerBtn.addEventListener("click", (e) => { <> You can listen for events from the Impler widget: { switch (eventData.type) { @@ -118,6 +131,7 @@ ImplerBtn.addEventListener("click", (e) => { ), 'Data Seeding in File': ({ projectId, templateId, accessToken }) => ( ( ( ( ( ( ( ( ( { @@ -262,6 +284,7 @@ window.impler.show({ 'Complete Code Example': ({ accessToken, embedScriptUrl, projectId, templateId }) => ( <> @@ -340,6 +363,7 @@ window.impler.show({ <> Add embed script before closing body tag @@ -356,13 +380,14 @@ import Script from 'next/script'; /> ), - '2) Install Package': () => , + '2) Install Package': () => , '3) Add Import Button': ({ accessToken, projectId, templateId }) => ( <> Use useImpler hook provided by @impler/react to show an Importer in application ( <> ( <> ( <> ( <> ( <> ( ( <> ( <> ( <> ( <> Add embed script before closing body tag `} language="javascript" + height={HEIGHTS.WITH_TEXT} + code={``} /> ), '2) Install Package': () => ( <> - + ), '3) Use Impler Service': ({ accessToken, projectId, templateId }) => ( <> ( ( ( ( ( ( ( ( ( ( ( ( <> Integrate - + Date: Mon, 14 Oct 2024 16:58:37 +0530 Subject: [PATCH 3/4] feat: Button styling --- apps/web/components/imports/forms/CreateImportForm.tsx | 3 ++- apps/web/config/theme.config.ts | 1 + apps/web/design-system/button/Button.styles.ts | 9 +++++++++ apps/web/design-system/button/Button.tsx | 2 +- 4 files changed, 13 insertions(+), 2 deletions(-) diff --git a/apps/web/components/imports/forms/CreateImportForm.tsx b/apps/web/components/imports/forms/CreateImportForm.tsx index 1642485b6..f9bb53cd9 100644 --- a/apps/web/components/imports/forms/CreateImportForm.tsx +++ b/apps/web/components/imports/forms/CreateImportForm.tsx @@ -1,8 +1,8 @@ import { Controller, useForm } from 'react-hook-form'; import { useFocusTrap } from '@mantine/hooks'; import { Stack, TextInput as Input, FocusTrap, Text, Group, useMantineTheme } from '@mantine/core'; -import { Button } from '@ui/button'; +import { Button } from '@ui/button'; import { INTEGRATE_IMPORT } from '@config'; import { IntegrationEnum } from '@impler/shared'; @@ -47,6 +47,7 @@ export function CreateImportForm({ onSubmit }: CreateImportFormProps) { key={key} radius="xl" leftIcon={} + color={field.value === key ? 'blue' : 'grey'} variant={field.value === key ? 'filled' : 'outline'} onClick={() => field.onChange(key)} > diff --git a/apps/web/config/theme.config.ts b/apps/web/config/theme.config.ts index d503d9153..1b4078edc 100644 --- a/apps/web/config/theme.config.ts +++ b/apps/web/config/theme.config.ts @@ -12,6 +12,7 @@ export const colors = { yellow: '#F7B801', grey: '#B9BEBD', darkGrey: '#454545', + lightGrey: '#333333', BGPrimaryDark: '#111111', BGPrimaryLight: '#F3F3F3', diff --git a/apps/web/design-system/button/Button.styles.ts b/apps/web/design-system/button/Button.styles.ts index 6ec466c52..61e6e8a44 100644 --- a/apps/web/design-system/button/Button.styles.ts +++ b/apps/web/design-system/button/Button.styles.ts @@ -9,6 +9,7 @@ const colorsCodes: Record = { green: colors.green, invariant: colors.black, yellow: colors.yellow, + grey: colors.StrokeLight, }; const getRootFilledStyles = (theme: MantineTheme, color: ButtonColors = 'blue', fullWidth?: boolean) => ({ @@ -101,6 +102,14 @@ const getRootOutlineStyles = ( color: colors.white, border: `1px solid ${colors.yellow}`, }), + ...(color === 'grey' && { + backgroundColor: colors.lightGrey, + color: colors.white, + border: `1px solid ${colors.lightGrey}`, + '> svg': { + color: theme.colorScheme === 'dark' ? colors.black : colors.white, + }, + }), color: theme.colorScheme === 'dark' && color === 'invariant' ? colors.black : colors.white, }, }); diff --git a/apps/web/design-system/button/Button.tsx b/apps/web/design-system/button/Button.tsx index 3fe4a8f21..e3e3585ac 100644 --- a/apps/web/design-system/button/Button.tsx +++ b/apps/web/design-system/button/Button.tsx @@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react'; import useStyles from './Button.styles'; import { Button as MantineButton, MantineSize, ButtonProps as MantineButtonProps } from '@mantine/core'; -export type ButtonColors = 'blue' | 'invariant' | 'red' | 'green' | 'yellow'; +export type ButtonColors = 'blue' | 'invariant' | 'red' | 'green' | 'yellow' | 'grey'; export type ButtonVariants = 'filled' | 'outline'; interface ButtonProps extends MantineButtonProps { From 71dacbe83ccaaf25c9434f00c819c6323e224f36 Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Mon, 14 Oct 2024 17:02:30 +0530 Subject: [PATCH 4/4] feat: Made React default option --- apps/web/components/imports/forms/CreateImportForm.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/web/components/imports/forms/CreateImportForm.tsx b/apps/web/components/imports/forms/CreateImportForm.tsx index f9bb53cd9..29a7a2199 100644 --- a/apps/web/components/imports/forms/CreateImportForm.tsx +++ b/apps/web/components/imports/forms/CreateImportForm.tsx @@ -18,7 +18,11 @@ export function CreateImportForm({ onSubmit }: CreateImportFormProps) { handleSubmit, control, formState: { errors }, - } = useForm({}); + } = useForm({ + defaultValues: { + integration: IntegrationEnum.REACT, + }, + }); return ( @@ -47,9 +51,9 @@ export function CreateImportForm({ onSubmit }: CreateImportFormProps) { key={key} radius="xl" leftIcon={} + onClick={() => field.onChange(key)} color={field.value === key ? 'blue' : 'grey'} variant={field.value === key ? 'filled' : 'outline'} - onClick={() => field.onChange(key)} > {name}