Add form embed support

heyform · Apr 30, 2024 · 2913579 · 2913579
1 parent 04b7317
commit 2913579
Show file tree

Hide file tree

Showing 26 changed files with 1,010 additions and 91 deletions.
diff --git a/packages/webapp/src/components/icons/FullpageIcon.tsx b/packages/webapp/src/components/icons/FullpageIcon.tsx
@@ -0,0 +1,15 @@
+import type { FC } from 'react'
+
+export const FullpageIcon: FC<IComponentProps<HTMLOrSVGElement>> = props => (
+  <svg viewBox="0 0 219 200" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <rect x="0.47699" y="12.9384" width="218.238" height="187.062" fill="#BFDBFE" />
+    <path
+      d="M4.47699 0.5H214.715C216.648 0.5 218.215 2.06701 218.215 4V12.4384H0.97699V4C0.97699 2.06701 2.54399 0.5 4.47699 0.5Z"
+      fill="#F4F4F4"
+      stroke="#F2F2F2"
+    />
+    <rect x="6.08881" y="4.20886" width="4.36477" height="4.36477" rx="2.18238" fill="#D8D8D8" />
+    <rect x="15.1302" y="4.20886" width="4.36477" height="4.36477" rx="2.18238" fill="#D8D8D8" />
+    <rect x="24.1714" y="4.20886" width="4.36477" height="4.36477" rx="2.18238" fill="#D8D8D8" />
+  </svg>
+)
diff --git a/packages/webapp/src/components/icons/ModalIcon.tsx b/packages/webapp/src/components/icons/ModalIcon.tsx
@@ -0,0 +1,63 @@
+import type { FC } from 'react'
+
+export const ModalIcon: FC<IComponentProps<HTMLOrSVGElement>> = props => (
+  <svg viewBox="0 0 219 200" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <g clipPath="url(#clip0_3043_99)">
+      <path d="M0.238495 12.9384H218.477V200H0.238495V12.9384Z" fill="white" />
+      <path d="M20.6594 41.933H136.482V50.6625H20.6594V41.933Z" fill="#D9D9D9" />
+      <path d="M20.6594 61.5745H86.1309V65.0039H20.6594V61.5745Z" fill="#D9D9D9" />
+      <path d="M20.6594 68.901H203.98V72.3305H20.6594V68.901Z" fill="#D9D9D9" />
+      <path d="M20.6594 75.9158H203.98V79.3453H20.6594V75.9158Z" fill="#D9D9D9" />
+      <path d="M17.6976 164.614H83.1691V168.044H17.6976V164.614Z" fill="#D9D9D9" />
+      <path d="M17.6976 171.941H201.018V175.37H17.6976V171.941Z" fill="#D9D9D9" />
+      <path d="M0.238495 12.9384H218.477V200H0.238495V12.9384Z" fill="black" fillOpacity={0.1} />
+      <path
+        d="M0.238495 4C0.238495 1.79086 2.02936 0 4.23849 0H214.477C216.686 0 218.477 1.79086 218.477 4V12.9384H0.238495V4Z"
+        fill="#F4F4F4"
+      />
+      <path
+        d="M5.85037 6.39124C5.85037 5.18594 6.82746 4.20886 8.03276 4.20886C9.23805 4.20886 10.2151 5.18594 10.2151 6.39124C10.2151 7.59654 9.23805 8.57363 8.03276 8.57363C6.82746 8.57363 5.85037 7.59654 5.85037 6.39124Z"
+        fill="#D8D8D8"
+      />
+      <path
+        d="M14.8917 6.39124C14.8917 5.18594 15.8688 4.20886 17.0741 4.20886C18.2794 4.20886 19.2564 5.18594 19.2564 6.39124C19.2564 7.59654 18.2794 8.57363 17.0741 8.57363C15.8688 8.57363 14.8917 7.59654 14.8917 6.39124Z"
+        fill="#D8D8D8"
+      />
+      <path
+        d="M23.933 6.39124C23.933 5.18594 24.9101 4.20886 26.1154 4.20886C27.3207 4.20886 28.2977 5.18594 28.2977 6.39124C28.2977 7.59654 27.3207 8.57363 26.1154 8.57363C24.9101 8.57363 23.933 7.59654 23.933 6.39124Z"
+        fill="#D8D8D8"
+      />
+      <g filter="url(#filter0_d_3043_99)">
+        <rect x={27.5183} y={45.3624} width={163.679} height={122.214} rx={8} fill="#BFDBFE" />
+      </g>
+    </g>
+    <defs>
+      <filter
+        id="filter0_d_3043_99"
+        x={-32.4817}
+        y={-14.6376}
+        width={283.679}
+        height={242.214}
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity={0} result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation={30} />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3043_99" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3043_99" result="shape" />
+      </filter>
+      <clipPath id="clip0_3043_99">
+        <rect width={218.24} height={200} fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
diff --git a/packages/webapp/src/components/icons/PopupIcon.tsx b/packages/webapp/src/components/icons/PopupIcon.tsx
@@ -0,0 +1,69 @@
+import type { FC } from 'react'
+
+export const PopupIcon: FC<IComponentProps<HTMLOrSVGElement>> = props => (
+  <svg viewBox="0 0 219 200" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <g clip-path="url(#clip0_3044_2)">
+      <path d="M0 12.9384H218.238V200H0V12.9384Z" fill="white" />
+      <path d="M20.4208 41.933H136.243V50.6625H20.4208V41.933Z" fill="#D9D9D9" />
+      <path d="M20.4208 61.5745H85.8923V65.0039H20.4208V61.5745Z" fill="#D9D9D9" />
+      <path d="M20.4208 68.901H203.741V72.3305H20.4208V68.901Z" fill="#D9D9D9" />
+      <path d="M20.4208 75.9158H203.741V79.3453H20.4208V75.9158Z" fill="#D9D9D9" />
+      <path d="M20.4208 93.3749H85.8924V96.8044H20.4208V93.3749Z" fill="#D9D9D9" />
+      <path d="M20.4208 104.754H203.741V108.184H20.4208V104.754Z" fill="#D9D9D9" />
+      <path
+        d="M0 4C0 1.79086 1.79086 0 4 0H214.238C216.448 0 218.238 1.79086 218.238 4V12.9384H0V4Z"
+        fill="#F4F4F4"
+      />
+      <path
+        d="M5.61181 6.39124C5.61181 5.18594 6.5889 4.20886 7.79419 4.20886C8.99949 4.20886 9.97658 5.18594 9.97658 6.39124C9.97658 7.59654 8.99949 8.57363 7.79419 8.57363C6.5889 8.57363 5.61181 7.59654 5.61181 6.39124Z"
+        fill="#D8D8D8"
+      />
+      <path
+        d="M14.6532 6.39124C14.6532 5.18594 15.6303 4.20886 16.8356 4.20886C18.0409 4.20886 19.0179 5.18594 19.0179 6.39124C19.0179 7.59654 18.0409 8.57363 16.8356 8.57363C15.6303 8.57363 14.6532 7.59654 14.6532 6.39124Z"
+        fill="#D8D8D8"
+      />
+      <path
+        d="M23.6944 6.39124C23.6944 5.18594 24.6715 4.20886 25.8768 4.20886C27.0821 4.20886 28.0592 5.18594 28.0592 6.39124C28.0592 7.59654 27.0821 8.57363 25.8768 8.57363C24.6715 8.57363 23.6944 7.59654 23.6944 6.39124Z"
+        fill="#D8D8D8"
+      />
+      <g filter="url(#filter0_d_3044_2)">
+        <path
+          d="M178.8 172.253C178.8 165.365 184.383 159.782 191.27 159.782C198.158 159.782 203.741 165.365 203.741 172.253C203.741 179.14 198.158 184.723 191.27 184.723C184.383 184.723 178.8 179.14 178.8 172.253Z"
+          fill="#BFDBFE"
+        />
+        <path
+          d="M126.734 53.3624C126.734 48.9441 130.316 45.3624 134.734 45.3624H195.741C200.159 45.3624 203.741 48.9441 203.741 53.3624V141.026C203.741 145.444 200.159 149.026 195.741 149.026H134.734C130.316 149.026 126.734 145.444 126.734 141.026V53.3624Z"
+          fill="#BFDBFE"
+        />
+      </g>
+    </g>
+    <defs>
+      <filter
+        id="filter0_d_3044_2"
+        x="66.7341"
+        y="-14.6376"
+        width="197.007"
+        height="259.361"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation="30" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3044_2" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3044_2" result="shape" />
+      </filter>
+      <clipPath id="clip0_3044_2">
+        <rect width="218.24" height="200" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
diff --git a/packages/webapp/src/components/icons/StandardIcon.tsx b/packages/webapp/src/components/icons/StandardIcon.tsx
@@ -0,0 +1,22 @@
+import type { FC } from 'react'
+
+export const StandardIcon: FC<IComponentProps<HTMLOrSVGElement>> = props => (
+  <svg viewBox="0 0 219 200" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <rect y="12.9384" width="218.238" height="187.062" fill="white" />
+    <rect x="20.4209" y="41.933" width="115.822" height="8.72954" fill="#D9D9D9" />
+    <rect x="20.4209" y="61.5745" width="65.4715" height="3.42946" fill="#D9D9D9" />
+    <rect x="20.4209" y="68.901" width="183.32" height="3.42946" fill="#D9D9D9" />
+    <rect x="20.4209" y="75.9158" width="183.32" height="3.42946" fill="#D9D9D9" />
+    <rect x="20.1091" y="92.4396" width="103.663" height="58.9244" rx="8" fill="#BFDBFE" />
+    <rect x="20.4209" y="166.329" width="65.4715" height="3.42946" fill="#D9D9D9" />
+    <rect x="20.4209" y="173.656" width="183.32" height="3.42946" fill="#D9D9D9" />
+    <path
+      d="M4 0.5H214.238C216.171 0.5 217.738 2.06701 217.738 4V12.4384H0.5V4C0.5 2.06701 2.067 0.5 4 0.5Z"
+      fill="#F4F4F4"
+      stroke="#F2F2F2"
+    />
+    <rect x="5.61185" y="4.20886" width="4.36477" height="4.36477" rx="2.18238" fill="#D8D8D8" />
+    <rect x="14.6532" y="4.20886" width="4.36477" height="4.36477" rx="2.18238" fill="#D8D8D8" />
+    <rect x="23.6945" y="4.20886" width="4.36477" height="4.36477" rx="2.18238" fill="#D8D8D8" />
+  </svg>
+)
diff --git a/packages/webapp/src/components/icons/index.ts b/packages/webapp/src/components/icons/index.ts
@@ -40,3 +40,7 @@ export * from './WebsiteIcon'
 export * from './WelcomeIcon'
 export * from './WorkspaceIcon'
 export * from './YesOrNoIcon'
+export * from './StandardIcon'
+export * from './PopupIcon'
+export * from './ModalIcon'
+export * from './FullpageIcon'
diff --git a/packages/webapp/src/components/layouts/FormLayout.tsx b/packages/webapp/src/components/layouts/FormLayout.tsx
@@ -1,5 +1,6 @@
 import { FC } from 'react'
 
+import { FormEmbedModal } from '@/pages/form/views/FormEmbedModal'
 import { FormNavbar } from '@/pages/form/views/FormNavbar'
 import { FormPreviewModal } from '@/pages/form/views/FormPreviewModal'
 import { FormShareModal } from '@/pages/form/views/FormShareModal'
@@ -16,6 +17,7 @@ export const FormLayout: FC<IComponentProps> = ({ children }) => {
 
       <FormPreviewModal />
       <FormShareModal />
+      <FormEmbedModal />
     </FormGuardLayout>
   )
 }
diff --git a/packages/webapp/src/components/numberRange/style.scss b/packages/webapp/src/components/numberRange/style.scss
@@ -12,7 +12,7 @@
   }
 
   .select-button {
-    @apply pr-7;
+    @apply pr-7 cursor-pointer;
   }
 
   .input {

diff --git a/packages/webapp/src/components/ui/color-picker/index.tsx b/packages/webapp/src/components/ui/color-picker/index.tsx
@@ -73,7 +73,7 @@ const ColorPicker: FC<ColorPickerProps> = ({
       <HexAlphaColorPicker color={value} onChange={handleChange} />
 
       <div className="color-picker-input">
-        <div className="color-picker-value">
+        <div className="color-picker-label">
           <HexColorInput value={value} onChange={handleChange} />
         </div>
         <AlphaInput color={value} onChange={handleAlphaChange} />

diff --git a/packages/webapp/src/components/ui/color-picker/style.scss b/packages/webapp/src/components/ui/color-picker/style.scss
@@ -46,9 +46,6 @@
   @apply relative h-full;
 }
 
-.color-picker-value {
-}
-
 .color-picker-alpha {
   @apply flex w-28 h-full;
 
@@ -76,7 +73,8 @@
 }
 
 .color-picker-presets {
-  @apply grid grid-cols-8;
+	margin-top: 20px !important;
+  @apply grid grid-cols-8 gap-2;
 }
 
 .color-picker-preset {

diff --git a/packages/webapp/src/components/ui/select/style.scss b/packages/webapp/src/components/ui/select/style.scss
@@ -57,7 +57,7 @@
 .select-native,
 .select-button,
 button.select-button {
-  @apply bg-white relative w-full border border-gray-300 rounded-md pl-3 pr-6 py-2 text-left sm:text-sm cursor-default focus:ring-1 focus:ring-blue-600 focus:border-blue-600;
+  @apply bg-white relative w-full border border-gray-300 rounded-md pl-3 pr-6 py-2 text-left sm:text-sm cursor-pointer focus:ring-1 focus:ring-blue-600 focus:border-blue-600;
 }
 
 .select-button,

diff --git a/packages/webapp/src/components/ui/switch/Switch.tsx b/packages/webapp/src/components/ui/switch/Switch.tsx
@@ -6,6 +6,7 @@ import { IComponentProps } from '../typing'
 
 export interface SwitchProps extends Omit<IComponentProps, 'onChange'> {
   loading?: boolean
+  size?: 'small' | 'normal'
   disabled?: boolean
   value?: boolean
   onChange?: (value: boolean) => void
@@ -14,6 +15,7 @@ export interface SwitchProps extends Omit<IComponentProps, 'onChange'> {
 const Switch: FC<SwitchProps> = ({
   className,
   value = false,
+  size = 'normal',
   loading = false,
   disabled,
   onChange,
@@ -27,6 +29,7 @@ const Switch: FC<SwitchProps> = ({
     <button
       className={clsx(
         'switch',
+        `switch-${size}`,
         {
           'switch-checked': value
         },

diff --git a/packages/webapp/src/components/ui/switch/style.scss b/packages/webapp/src/components/ui/switch/style.scss
@@ -1,5 +1,17 @@
 button.switch {
-  @apply relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer bg-slate-200 transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600;
+  @apply relative inline-flex flex-shrink-0 border-2 border-transparent rounded-full cursor-pointer bg-slate-200 transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600;
+
+	&.switch-normal {
+		@apply h-6 w-11;
+	}
+
+	&.switch-small {
+		@apply h-4 w-8;
+
+		.switch-handle {
+			@apply h-3 w-3;
+		}
+	}
 }
 
 .switch-handle {
@@ -24,6 +36,12 @@ button.switch-checked {
   .switch-handle {
     @apply translate-x-5;
   }
+
+	&.switch-small {
+		.switch-handle {
+			@apply translate-x-4;
+		}
+	}
 }
 
 button.switch-button {

diff --git a/packages/webapp/src/consts/formBuilder.ts b/packages/webapp/src/consts/formBuilder.ts
@@ -298,14 +298,48 @@ export const FORM_THEMES = [
 ]
 
 export const COLOR_PICKER_PRESET_COLORS = [
-  '#0252d7',
+  '#ffffff',
+  '#fef2f2',
+  '#fff7ed',
+  '#fefce8',
+  '#f0fdf4',
+  '#ecfeff',
+  '#eff6ff',
+  '#faf5ff',
+
+  '#e4e4e7',
+  '#fecaca',
+  '#fed7aa',
+  '#fef08a',
+  '#bbf7d0',
+  '#a5f3fc',
+  '#bfdbfe',
+  '#e9d5ff',
+
+  '#a1a1aa',
+  '#f87171',
+  '#fb923c',
+  '#facc15',
+  '#4ade80',
+  '#22d3ee',
+  '#60a5fa',
+  '#c084fc',
+
+  '#71717a',
+  '#ef4444',
+  '#f97316',
+  '#eab308',
   '#22c55e',
   '#06b6d4',
-  '#fbbf24',
-  '#d946ef',
+  '#3b82f6',
+  '#a855f7',
+
+  '#52525b',
   '#dc2626',
-  '#6b21a8',
-  '#854d0e',
-  '#94a3b8',
-  '#000000'
+  '#ea580c',
+  '#ca8a04',
+  '#16a34a',
+  '#0891b2',
+  '#2563eb',
+  '#9333ea'
 ]