fix: integrate frontend sdk to have flexible frontend sdk

packages/revert-next/app/dashboard/onboarding/FrontendSDKContent.tsx

@@ -0,0 +1,43 @@
+import { CopyToClipboard } from '@revertdotdev/components';
+import { inter } from '@revertdotdev/fonts';
+import { sdkContent } from '@revertdotdev/lib/constants';
+
+function FrontendSDKContent({ value }: { value: string }) {
+    return (
+        <div>
+            <div className="mb-4">
+                <div className="mb-4 flex justify-between items-center">
+                    <div>
+                        <h1 className={`${inter.className} mb-1 text-lg font-medium`}>Getting Started</h1>
+                        <p className="text-gray-50 text-sm">In your frontend, install the npm package</p>
+                    </div>
+                </div>
+                <CopyToClipboard value={sdkContent[value].command} />
+            </div>
+            <div className="mb-4">
+                <div className="mb-4 flex justify-between items-center">
+                    <div>
+                        <h1 className={`${inter.className} mb-1 text-lg font-medium`}>Usage</h1>
+                        <p className="text-gray-50 text-sm">
+                            1. Adding the {'<'}
+                            <span>RevertConnect</span>
+                            {'>'} component will instantly give your app a way for your users to connect their tools by
+                            opening our Modal on clicking where they will be a able to choose & connect their 3rd party
+                            tool.
+                        </p>
+                    </div>
+                </div>
+                <CopyToClipboard value={sdkContent[value].step1} height={value === 'react' ? '25vh' : '52vh'} />
+            </div>
+            <div className="mb-4">
+                <p className="text-gray-50 text-sm mb-1">
+                    2. If you wish to use your own UI for it you can use the useRevertConnnect hook and call
+                    the open() method when appropriate. For example:
+                </p>
+                <CopyToClipboard value={sdkContent[value].step2} height={value === 'react' ? '43vh' : '53vh'} />
+            </div>
+        </div>
+    );
+}
+
+export default FrontendSDKContent;

packages/revert-next/app/dashboard/onboarding/FrontendSdk.tsx

@@ -3,6 +3,7 @@ import { inter } from '@revertdotdev/fonts';
 import { cn } from '@revertdotdev/utils';
 import { useState } from 'react';
 import Image from 'next/image';
+import FrontendSDKContent from './FrontendSDKContent';
 
 export function FrontendSdk() {
     const [customPreferenceView, setCustomPreferenceView] = useState<boolean>(false);
@@ -43,6 +44,10 @@ export function FrontendSdk() {
                     </div>
                 </button>
             </div>
+            <div>
+                {customPreferenceView && <FrontendSDKContent value={'vue'} />}
+                {!customPreferenceView && <FrontendSDKContent value={'react'} />}
+            </div>
         </div>
     );
 }

packages/revert-next/components/ui/common/CopyToClipboard.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { Icons } from '@revertdotdev/icons';
+import { useClipboard } from 'use-clipboard-copy';
+import React from 'react';
+
+type CopyToClipboardProps = {
+    value: string;
+    height?: string | number; // Optional height prop to control height
+};
+export function CopyToClipboard({ value, height = 'auto' }: CopyToClipboardProps) {
+    const clipboard = useClipboard({
+        copiedTimeout: 600,
+    });
+
+    return (
+        <div className="w-full max-w-[64rem]">
+            <div className="relative">
+                <pre
+                    ref={clipboard.target}
+                    className="col-span-6 bg-gray-50/5 border border-gray-25/5 text-gray-50/80 text-sm rounded-lg p-2.5 overflow-auto"
+                    style={{ height }}
+                >
+                    <code>{value}</code>
+                </pre>
+                <button
+                    className="absolute end-2 top-2 rounded-lg p-2 inline-flex hover:bg-gray-25 items-center justify-center revert-focus-outline"
+                    onClick={() => clipboard.copy(value)}
+                >
+                    {clipboard.copied ? <Icons.success /> : <Icons.copy />}
+                </button>
+            </div>
+        </div>
+    );
+}

packages/revert-next/components/ui/common/index.ts

@@ -32,3 +32,4 @@ export {
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from './Popover';
 export { FancyInputBox } from './FancyInputBox';
 export { FancyHeader } from './FancyHeader';
+export { CopyToClipboard } from './CopyToClipboard';

packages/revert-next/components/ui/index.ts

@@ -36,6 +36,7 @@ export {
     PopoverAnchor,
     FancyHeader,
     FancyInputBox,
+    CopyToClipboard,
 } from '@revertdotdev/components/common';
 export {
     OnboardingNavLink,

packages/revert-next/components/ui/onboarding/Steps.tsx

@@ -11,7 +11,6 @@ const links = [
         step: 1,
     },
     { name: 'Integrate Frontend SDK', step: 2 },
-    { name: 'Integrate Backend SDK', step: 3 },
 ];
 
 export function Steps({ currentStep, setStep }: { currentStep: number; setStep: Dispatch<SetStateAction<number>> }) {

packages/revert-next/lib/constants.ts

@@ -56,3 +56,101 @@ export const appsInfo: Record<string, { name: string; logo: JSX.Element }> = {
         logo: Socials.bitbucket(),
     },
 };
+
+interface ContentDetails {
+    command: string;
+    step1: string;
+    step2: string;
+}
+
+export const sdkContent: { [key: string]: ContentDetails } = {
+    react: {
+        command: `npm install @revertdotdev/revert-react`,
+        step1: `function App() { 
+    return ( 
+        <Wrapper> 
+            <RevertConnect 
+                config={{ 
+                    revertToken: 'REVERT_PUBLIC_TOKEN', 
+                    tenantId: 'CUSTOMER_TENANT_ID',
+                }} 
+            /> 
+        </Wrapper> 
+    );`,
+        step2: `const { loading, error, open } = useRevertConnect({ config: props.config });
+    return (
+        <button
+            disabled={loading || Boolean(error)}
+            id="revert-connect-button"
+            onClick={() => open()}
+            style={{
+                padding: 10,
+                outline: 'none',
+                background: 'rgb(39, 45, 192)',
+                border: '1px solid rgb(39, 45, 192)',
+                borderRadius: 5,
+                cursor: 'pointer',
+                color: '#fff',
+                ...props.style,
+            }}
+        >
+            {props.children || 'Connect'}
+        </button>
+    );
+    `,
+    },
+    vue: {
+        command: `npm install @revertdotdev/revert-vue`,
+        step1: `<script>
+        import { RevertConnectVue } from '@revertdotdev/revert-vue'
+
+        export default {
+          name: 'App',
+          components: {
+            RevertConnectVue,
+          },
+          data() {
+            return {
+              config: {
+                revertToken: 'REVERT_PUBLIC_TOKEN',
+                tenantId: 'CUSTOMER_TENANT_ID',
+              },
+            };
+          },
+        };
+</script>
+
+<template>
+  <div class="container">
+    <RevertConnect :config="config" />
+  </div>
+</template>
+`,
+        step2: `<script>
+    export default {
+      setup() {
+        const { loading, open, error } = useRevertConnect({ config: configObject });
+        return {
+          loading,
+          error,
+          open,
+        };
+      }
+    };
+</script>
+
+<template>
+  <div class="container">
+    <button :disabled="loading || Boolean(error)"
+    @click="open()"
+    id="revert-connect-button"
+    :style="{ padding: '10px', outline: 'none', background: 'rgb(39, 45, 192)',
+              border: '1px solid rgb(39, 45, 192)', borderRadius: '5px',
+              cursor: 'pointer', color: '#fff' }">
+      Connect your tool
+    </button>
+  </div>
+</template>
+        `,
+    },
+};