Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat optimizations #848

Merged
merged 4 commits into from
Oct 14, 2024
+86 −14
Merged

feat optimizations #848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1b5aa51
feat: Added spacing to docker compose file
chavda-bhavik Oct 14, 2024
a14154d
feat: Added heights to integrationsnippets
chavda-bhavik Oct 14, 2024
a3ebea7
feat: Button styling
chavda-bhavik Oct 14, 2024
71dacbe
feat: Made React default option
chavda-bhavik Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions apps/web/components/Integration/ContentBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
<div style={{ position: 'relative', marginTop: 10 }}>
<Suspense fallback={<LoadingOverlay visible />}>
<Prism
language={language}
copyLabel="Copy code"
copiedLabel="Copied!"
withLineNumbers
styles={{
code: {
backgroundColor: `${colors.black} !important`,
border: `1px solid ${colors.DisabledDark} !important`,
maxHeight: '50vh',
height,
overflow: 'auto',
},
}}
Expand Down
59 changes: 54 additions & 5 deletions apps/web/components/Integration/IntegrationData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,30 @@ interface IContentProps {
embedScriptUrl: string;
}

const HEIGHTS = {
WITH_TEXT: '47vh',
WITHOUT_TEXT: '50vh',
};

export const integrationData: Record<IntegrationEnum, Record<string, (data: IContentProps) => ReactNode>> = {
[IntegrationEnum.JAVASCRIPT]: {
'1) Add Script': ({ embedScriptUrl }) => (
<>
<ModifiedText>Add embed script before closing body tag</ModifiedText>
<CodeBlock
code={`<script type='text/javascript' src='${embedScriptUrl}' async></script>`}
language="javascript"
height={HEIGHTS.WITH_TEXT}
code={`<script type='text/javascript' src='${embedScriptUrl}' async></script>`}
/>
</>
),
'2) Add Import Button': () => (
<>
<CodeBlock code={`<button disabled id="impler-btn">Import</button>`} language="markup" />
<CodeBlock
language="markup"
height={HEIGHTS.WITHOUT_TEXT}
code={`<button disabled id="impler-btn">Import</button>`}
/>
</>
),
'3) Initialize Widget': () => (
Expand All @@ -36,6 +46,7 @@ export const integrationData: Record<IntegrationEnum, Record<string, (data: ICon
Before the widget gets shown you have to call <Code>init</Code> method, which initialize the importer.
</ModifiedText>
<CodeBlock
height={HEIGHTS.WITH_TEXT}
code={`
<script type="text/javascript">
let uuid = generateUuid();
Expand Down Expand Up @@ -68,6 +79,7 @@ export const integrationData: Record<IntegrationEnum, Record<string, (data: ICon
<>
<ModifiedText size="sm">After initialization, use the following code to show the widget:</ModifiedText>
<CodeBlock
height={HEIGHTS.WITH_TEXT}
code={`
ImplerBtn.addEventListener("click", (e) => {
window.impler.show({
Expand All @@ -86,6 +98,7 @@ ImplerBtn.addEventListener("click", (e) => {
<>
<ModifiedText size="sm">You can listen for events from the Impler widget:</ModifiedText>
<CodeBlock
height={HEIGHTS.WITH_TEXT}
code={`
window.impler.on('message', (eventData) => {
switch (eventData.type) {
Expand Down Expand Up @@ -118,6 +131,7 @@ ImplerBtn.addEventListener("click", (e) => {
),
'Data Seeding in File': ({ projectId, templateId, accessToken }) => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
window.impler.show({
uuid,
Expand All @@ -135,6 +149,7 @@ window.impler.show({
),
'Customize Importer Texts': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
window.impler.show({
...
Expand All @@ -149,6 +164,7 @@ window.impler.show({
),
'Advanced Validations': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
window.impler.show({
...
Expand Down Expand Up @@ -182,6 +198,7 @@ window.impler.show({
),
'Providing Runtime Schema': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
window.impler.show({
...
Expand Down Expand Up @@ -210,6 +227,7 @@ window.impler.show({
),
'Passing Extra Values': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
window.impler.show({
...
Expand All @@ -223,6 +241,7 @@ window.impler.show({
),
'Changing Import Title': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
window.impler.show({
...
Expand All @@ -233,13 +252,15 @@ window.impler.show({
),
'Programatically Closing Importer': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
window.impler.close();
`}
/>
),
'Changing the Color theme': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
window.impler.show({
...
Expand All @@ -250,6 +271,7 @@ window.impler.show({
),
'Passing Auth Header Value': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
window.impler.show({
authHeaderValue: async () => {
Expand All @@ -262,6 +284,7 @@ window.impler.show({
'Complete Code Example': ({ accessToken, embedScriptUrl, projectId, templateId }) => (
<>
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
<!DOCTYPE html>
<html lang="en">
Expand Down Expand Up @@ -340,6 +363,7 @@ window.impler.show({
<>
<ModifiedText>Add embed script before closing body tag</ModifiedText>
<CodeBlock
height={HEIGHTS.WITH_TEXT}
code={`
// ReactJS
<script type='text/javascript' src='${embedScriptUrl}' async></script>
Expand All @@ -356,13 +380,14 @@ import Script from 'next/script';
/>
</>
),
'2) Install Package': () => <CodeBlock code="npm i @impler/react" language="bash" />,
'2) Install Package': () => <CodeBlock height={HEIGHTS.WITHOUT_TEXT} code="npm i @impler/react" language="bash" />,
'3) Add Import Button': ({ accessToken, projectId, templateId }) => (
<>
<ModifiedText>
Use <Code>useImpler</Code> hook provided by <Code>@impler/react</Code> to show an Importer in application
</ModifiedText>
<CodeBlock
height={HEIGHTS.WITH_TEXT}
code={`
import { useImpler } from "@impler/react";

Expand All @@ -380,6 +405,7 @@ const { showWidget, isImplerInitiated } = useImpler({
'Customize Texts': ({ accessToken, projectId, templateId }) => (
<>
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
import { useImpler } from "@impler/react";

Expand All @@ -402,6 +428,7 @@ const { showWidget, isImplerInitiated } = useImpler({
'Listening for Events': ({ accessToken, projectId, templateId }) => (
<>
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
const { showWidget, isImplerInitiated } = useImpler({
projectId: "${projectId}",
Expand Down Expand Up @@ -430,6 +457,7 @@ const { showWidget, isImplerInitiated } = useImpler({
'Providing Runtime Schema': () => (
<>
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
showWidget({
schema: [
Expand Down Expand Up @@ -459,6 +487,7 @@ showWidget({
'Data Seeding in Sample File': () => (
<>
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
showWidget({
data: [
Expand All @@ -476,6 +505,7 @@ showWidget({
'Advanced Validations': () => (
<>
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
showWidget({
schema: [
Expand Down Expand Up @@ -509,6 +539,7 @@ showWidget({
),
'Using Typescript': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
import { useImpler, ColumnTypes, ValidationTypes } from "@impler/react";

Expand Down Expand Up @@ -538,6 +569,7 @@ showWidget({
'Closing Import Widget': ({ accessToken, projectId, templateId }) => (
<>
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
const { showWidget, closeWidget, isImplerInitiated } = useImpler({
projectId: "${projectId}",
Expand All @@ -555,6 +587,7 @@ const { showWidget, closeWidget, isImplerInitiated } = useImpler({
'Changing Import Title': ({ accessToken, projectId, templateId }) => (
<>
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
const { showWidget, isImplerInitiated } = useImpler({
projectId: "${projectId}",
Expand All @@ -570,6 +603,7 @@ const { showWidget, isImplerInitiated } = useImpler({
'Changing Theme Color': ({ accessToken, projectId, templateId }) => (
<>
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
const { showWidget, isImplerInitiated } = useImpler({
projectId: "${templateId}",
Expand All @@ -584,6 +618,7 @@ const { showWidget, isImplerInitiated } = useImpler({
'Providing Authentication Header': ({ accessToken, projectId, templateId }) => (
<>
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
const { showWidget, isImplerInitiated } = useImpler({
projectId: "${templateId}",
Expand All @@ -603,20 +638,22 @@ const { showWidget, isImplerInitiated } = useImpler({
<>
<ModifiedText>Add embed script before closing body tag</ModifiedText>
<CodeBlock
code={`<script type="text/javascript" src="${embedScriptUrl}" async></script>`}
language="javascript"
height={HEIGHTS.WITH_TEXT}
code={`<script type="text/javascript" src="${embedScriptUrl}" async></script>`}
/>
</>
),

'2) Install Package': () => (
<>
<CodeBlock code="npm i @impler/angular" language="bash" />
<CodeBlock height={HEIGHTS.WITHOUT_TEXT} code="npm i @impler/angular" language="bash" />
</>
),
'3) Use Impler Service': ({ accessToken, projectId, templateId }) => (
<>
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
import { RouterOutlet } from "@angular/router";
import { isPlatformBrowser } from "@angular/common";
Expand Down Expand Up @@ -658,6 +695,7 @@ public show(): void {

'Customize Texts': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
public show(): void {
this.implerService.showWidget({
Expand All @@ -675,6 +713,7 @@ public show(): void {

'Applying App Color Scheme': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
public show(): void {
this.implerService.showWidget({
Expand All @@ -688,6 +727,7 @@ public show(): void {

'Data Seeding in Sample File': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
public show(): void {
this.implerService.showWidget({
Expand All @@ -704,6 +744,7 @@ public show(): void {

'Providing Runtime Schema': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
public show(): void {
this.implerService.showWidget({
Expand Down Expand Up @@ -734,6 +775,7 @@ public show(): void {

'Advanced Validations': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
public show(): void {
this.implerService.showWidget({
Expand Down Expand Up @@ -768,6 +810,7 @@ public show(): void {
),
'Using Typescript': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
import { useImpler, ColumnTypes, ValidationTypes } from "@impler/angular";

Expand Down Expand Up @@ -796,6 +839,7 @@ public show(): void {

'Passing Extra Parameters': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
public show(): void {
this.implerService.showWidget({
Expand All @@ -812,6 +856,7 @@ public show(): void {

'Programmatically Closing Import Widget': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
public close(): void {
this.implerService.closeWidget();
Expand All @@ -822,6 +867,7 @@ public close(): void {

'Changing Import Title': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
public show(): void {
this.implerService.showWidget({
Expand All @@ -834,6 +880,7 @@ public show(): void {

'Changing Theme Color': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
public show(): void {
this.implerService.showWidget({
Expand All @@ -846,6 +893,7 @@ public show(): void {

'Providing Authentication Header Value': () => (
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
public show(): void {
this.implerService.showWidget({
Expand All @@ -861,6 +909,7 @@ public show(): void {
'Usage Example': () => (
<>
<CodeBlock
height={HEIGHTS.WITHOUT_TEXT}
code={`
import { EventCalls, EventTypesEnum, ImplerService } from "@impler/angular";

Expand Down
Loading
Loading