feat: recover embed code

packages/website/src/components/Embeds/Boolean.tsx

@@ -0,0 +1,19 @@
+import { Switch } from '@radix-ui/themes';
+import type { EmbedPreviewControllerProps } from '../../pages/tools/embed/[embed]/_index';
+import { EmbedState } from '../../stores/embedState';
+
+export function Boolean({ configKey }: EmbedPreviewControllerProps) {
+  const mutateEmbedState = EmbedState.useMutation();
+
+  return (
+    <Switch
+      variant="soft"
+      checked={EmbedState.use((state) => state[configKey] as boolean)}
+      onCheckedChange={() => {
+        mutateEmbedState((draft) => {
+          draft[configKey] = !draft[configKey];
+        });
+      }}
+    />
+  );
+}

packages/website/src/components/Embeds/Color.tsx

@@ -0,0 +1,19 @@
+import type { EmbedPreviewControllerProps } from '../../pages/tools/embed/[embed]/_index';
+import { EmbedState } from '../../stores/embedState';
+import { ColorControllerRaw } from './ColorControllerRaw';
+
+export function Color({ configKey }: EmbedPreviewControllerProps) {
+  const mutateEmbedState = EmbedState.useMutation();
+  const color = EmbedState.use((state) => state[configKey] as string);
+
+  return (
+    <ColorControllerRaw
+      value={color}
+      onValueChange={(value) => {
+        mutateEmbedState((draft) => {
+          draft[configKey] = value;
+        });
+      }}
+    />
+  );
+}

packages/website/src/components/Embeds/ColorControllerRaw.tsx

@@ -0,0 +1,38 @@
+import { Slider } from '@radix-ui/themes';
+
+interface ColorControllerRawProps {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+export function ColorControllerRaw({
+  value,
+  onValueChange,
+}: ColorControllerRawProps) {
+  const tintString = value.slice(0, 7);
+  const alphaString = value.slice(7, 9);
+  const alpha = alphaString.length === 0 ? 255 : parseInt(alphaString, 16);
+
+  return (
+    <>
+      <input
+        type="color"
+        value={value.slice(0, 7)}
+        onChange={(event) => {
+          let alpha = value.slice(7, 9);
+          if (alpha.length === 0) alpha = 'ff';
+          onValueChange(`${event.target.value}${alpha}`);
+        }}
+      />
+      <Slider
+        variant="soft"
+        min={0}
+        max={255}
+        value={[alpha]}
+        onValueChange={([value]) => {
+          onValueChange(`${tintString}${value.toString(16)}`);
+        }}
+      />
+    </>
+  );
+}

packages/website/src/components/Embeds/Enum.tsx

@@ -0,0 +1,36 @@
+import { Select } from '@radix-ui/themes';
+import type { EmbedPreviewControllerProps } from '../../pages/tools/embed/[embed]/_index';
+import { EmbedState } from '../../stores/embedState';
+import type {
+  EmbedConfigItemType,
+  EmbedItemType,
+} from '../../stores/embedState/constants';
+
+export function Enum({
+  configKey,
+  config,
+}: EmbedPreviewControllerProps & {
+  config: EmbedConfigItemType<EmbedItemType.Enum>;
+}) {
+  const mutateEmbedState = EmbedState.useMutation();
+
+  return (
+    <Select.Root
+      value={EmbedState.use((state) => state[configKey] as string)}
+      onValueChange={(value) => {
+        mutateEmbedState((draft) => {
+          draft[configKey] = value;
+        });
+      }}
+    >
+      <Select.Trigger />
+      <Select.Content>
+        {config.options.map((option) => (
+          <Select.Item key={option.value} value={option.value}>
+            {option.label}
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+}

packages/website/src/components/Embeds/Import.tsx

@@ -0,0 +1,80 @@
+import {
+  AlertDialog,
+  Button,
+  Flex,
+  Heading,
+  Text,
+  TextField,
+  Tooltip,
+} from '@radix-ui/themes';
+import { useRef, useState } from 'react';
+import { EmbedState } from '../../stores/embedState';
+
+export function Import() {
+  const importInput = useRef<HTMLInputElement>(null);
+  const [showInvalidURLPrompt, setShowInvalidURLPrompt] = useState(false);
+  const [showConfirmation, setConfirmation] = useState(false);
+  const mutateEmbedState = EmbedState.useMutation();
+
+  return (
+    <>
+      <Heading>Import</Heading>
+      <Text size="2" color="gray" mb="2">
+        Paste your current URL if you have one already to import your settings
+      </Text>
+
+      <AlertDialog.Root
+        open={showInvalidURLPrompt}
+        onOpenChange={setShowInvalidURLPrompt}
+      >
+        <AlertDialog.Content>
+          <AlertDialog.Title>Invalid URL</AlertDialog.Title>
+          <AlertDialog.Description>
+            Try pasting the URL that BlitzKit previously generated, you silly
+            goose!
+          </AlertDialog.Description>
+
+          <Flex gap="3" mt="4" justify="end">
+            <AlertDialog.Cancel>
+              <Button>Okay, my bad</Button>
+            </AlertDialog.Cancel>
+          </Flex>
+        </AlertDialog.Content>
+      </AlertDialog.Root>
+
+      <Flex gap="2" mb="6">
+        <TextField.Root
+          ref={importInput}
+          placeholder="Paste URL..."
+          style={{ flex: 1 }}
+        />
+        <Tooltip content="Applied!" open={showConfirmation}>
+          <Button
+            onClick={() => {
+              if (!importInput.current) return;
+
+              try {
+                const url = new URL(importInput.current.value);
+                const state = url.searchParams.get('state');
+                if (state === null) throw undefined;
+                const json = JSON.parse(state);
+
+                mutateEmbedState((draft) => {
+                  Object.assign(draft, json);
+                });
+
+                importInput.current.value = '';
+                setConfirmation(true);
+                setTimeout(() => setConfirmation(false), 2000);
+              } catch {
+                setShowInvalidURLPrompt(true);
+              }
+            }}
+          >
+            Apply
+          </Button>
+        </Tooltip>
+      </Flex>
+    </>
+  );
+}

packages/website/src/components/Embeds/PreviewWrapper/index.css.ts

@@ -0,0 +1,26 @@
+import { keyframes, style } from '@vanilla-extract/css';
+
+const fadeOutBorder = keyframes({
+  from: {
+    outline: '1rem solid #ff0000ff',
+  },
+  to: {
+    outline: '1rem solid #ff000000',
+  },
+});
+
+export const wrapper = style({
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  overflow: 'hidden',
+});
+
+export const animated = style({
+  animation: `${fadeOutBorder} 0.5s linear`,
+
+  ':hover': {
+    outline: '1rem solid #ff000080',
+  },
+});

packages/website/src/components/Embeds/PreviewWrapper/index.tsx

@@ -0,0 +1,36 @@
+import { Box } from '@radix-ui/themes';
+import { useEffect, useRef } from 'react';
+import { previews } from '../../../constants/embeds';
+import { useEmbedStateCurry } from '../../../stores/embedState/utilities';
+import * as styles from './index.css';
+
+interface PreviewWrapperProps {
+  name: keyof typeof previews;
+}
+
+export function PreviewWrapper({ name }: PreviewWrapperProps) {
+  const { useState } = useEmbedStateCurry();
+  const width = useState('width');
+  const height = useState('height');
+  const Preview = previews[name];
+  const wrapper = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!wrapper.current) return;
+
+    wrapper.current.classList.remove(styles.animated);
+    void wrapper.current.offsetWidth;
+    wrapper.current.classList.add(styles.animated);
+  }, [width, height]);
+
+  return (
+    <Box
+      ref={wrapper}
+      className={styles.wrapper}
+      width={`${width}px`}
+      height={`${height}px`}
+    >
+      <Preview />
+    </Box>
+  );
+}

packages/website/src/components/Embeds/Radius.tsx

@@ -0,0 +1,26 @@
+import { Slider } from '@radix-ui/themes';
+import type { EmbedPreviewControllerProps } from '../../pages/tools/embed/[embed]/_index';
+import { EmbedState, type RadixRadius } from '../../stores/embedState';
+
+export function Radius({ configKey }: EmbedPreviewControllerProps) {
+  const mutateEmbedState = EmbedState.useMutation();
+
+  return (
+    <Slider
+      variant="soft"
+      min={0}
+      max={5}
+      value={[
+        EmbedState.use((state) => {
+          const radius = state[configKey] as RadixRadius;
+          return radius === 'full' ? 5 : parseInt(radius);
+        }),
+      ]}
+      onValueChange={([value]) => {
+        mutateEmbedState((draft) => {
+          draft[configKey] = value === 5 ? 'full' : `${value}`;
+        });
+      }}
+    />
+  );
+}

packages/website/src/components/Embeds/RichText.tsx

@@ -0,0 +1,32 @@
+import type { EmbedPreviewControllerProps } from '../../pages/tools/embed/[embed]/_index';
+import { EmbedState } from '../../stores/embedState';
+import type {
+  EmbedConfigItemType,
+  EmbedItemType,
+} from '../../stores/embedState/constants';
+import { ColorControllerRaw } from './ColorControllerRaw';
+
+export function RichText({ configKey }: EmbedPreviewControllerProps) {
+  const mutateEmbedState = EmbedState.useMutation();
+  const state = EmbedState.use(
+    (state) =>
+      state[
+        configKey
+      ] as EmbedConfigItemType<EmbedItemType.RichText>['default'],
+  );
+
+  return (
+    <ColorControllerRaw
+      value={state.color}
+      onValueChange={(value) => {
+        mutateEmbedState((draft) => {
+          (
+            draft[
+              configKey
+            ] as EmbedConfigItemType<EmbedItemType.RichText>['default']
+          ).color = value;
+        });
+      }}
+    />
+  );
+}

packages/website/src/components/Embeds/Size.tsx

@@ -0,0 +1,23 @@
+import { Slider } from '@radix-ui/themes';
+import type { EmbedPreviewControllerProps } from '../../pages/tools/embed/[embed]/_index';
+import { EmbedState, type RadixSize } from '../../stores/embedState';
+
+export function Size({ configKey }: EmbedPreviewControllerProps) {
+  const mutateEmbedState = EmbedState.useMutation();
+
+  return (
+    <Slider
+      variant="soft"
+      min={0}
+      max={9}
+      value={[
+        EmbedState.use((state) => parseInt(state[configKey] as RadixSize)),
+      ]}
+      onValueChange={([value]) => {
+        mutateEmbedState((draft) => {
+          draft[configKey] = `${value}`;
+        });
+      }}
+    />
+  );
+}

packages/website/src/components/Embeds/SizeWithout0.tsx

@@ -0,0 +1,25 @@
+import { Slider } from '@radix-ui/themes';
+import type { EmbedPreviewControllerProps } from '../../pages/tools/embed/[embed]/_index';
+import { EmbedState, type RadixSizeWithout0 } from '../../stores/embedState';
+
+export function SizeWithout0({ configKey }: EmbedPreviewControllerProps) {
+  const mutateEmbedState = EmbedState.useMutation();
+
+  return (
+    <Slider
+      variant="soft"
+      min={1}
+      max={9}
+      value={[
+        EmbedState.use((state) =>
+          parseInt(state[configKey] as RadixSizeWithout0),
+        ),
+      ]}
+      onValueChange={([value]) => {
+        mutateEmbedState((draft) => {
+          draft[configKey] = `${value}`;
+        });
+      }}
+    />
+  );
+}

packages/website/src/components/Embeds/Slider.tsx

@@ -0,0 +1,32 @@
+import { Slider as RadixSlider } from '@radix-ui/themes';
+import type { EmbedPreviewControllerProps } from '../../pages/tools/embed/[embed]/_index';
+import { EmbedState, type RadixSize } from '../../stores/embedState';
+import type {
+  EmbedConfigItemType,
+  EmbedItemType,
+} from '../../stores/embedState/constants';
+
+export function Slider({
+  configKey,
+  config,
+}: EmbedPreviewControllerProps & {
+  config: EmbedConfigItemType<EmbedItemType.Slider>;
+}) {
+  const mutateEmbedState = EmbedState.useMutation();
+
+  return (
+    <RadixSlider
+      variant="soft"
+      min={config.min}
+      max={config.max}
+      value={[
+        EmbedState.use((state) => parseInt(state[configKey] as RadixSize)),
+      ]}
+      onValueChange={([value]) => {
+        mutateEmbedState((draft) => {
+          draft[configKey] = value;
+        });
+      }}
+    />
+  );
+}

packages/website/src/components/Embeds/TextController.tsx

@@ -0,0 +1,19 @@
+import { TextField } from '@radix-ui/themes';
+import type { EmbedPreviewControllerProps } from '../../pages/tools/embed/[embed]/_index';
+import { EmbedState } from '../../stores/embedState';
+
+export function TextController({ configKey }: EmbedPreviewControllerProps) {
+  const mutateEmbedState = EmbedState.useMutation();
+
+  return (
+    <TextField.Root
+      placeholder="Empty"
+      value={EmbedState.use((state) => state[configKey] as string)}
+      onChange={(event) => {
+        mutateEmbedState((draft) => {
+          draft[configKey] = event.target.value;
+        });
+      }}
+    />
+  );
+}