feat: shareable presets (#637)

* feat: shareable presets

* docs(changeset): Add shareable presets

* feat: shareable presets

Author: riccardoperra

.changeset/shaggy-dancers-bow.md

@@ -0,0 +1,5 @@
+---
+'@codeimage/app': minor
+---
+
+Add shareable presets

apps/codeimage/changelog/1-7-0_06-29-2024.mdx

@@ -0,0 +1,12 @@
+import {mdxComponents} from '../src/mdx/components';
+import shareablePresets from './data/1-7-0/shareable_presets.png';
+
+# v1.7.0
+
+<mdxComponents.h3>🎨 Shareable presets</mdxComponents.h3>
+
+This new CodeImage update bring a way to share your presets via link.
+
+Everyone that paste the link into their browser will automatically get your preset into their workspace.
+
+<mdxComponents.image src={shareablePresets} style={{'object-position': 'left'}} />

apps/codeimage/changelog/data/1-7-0/shareable_presets.png

@@ -5,8 +5,9 @@ import {getTerminalState} from '@codeimage/store/editor/terminal';
 import {getPresetsStore} from '@codeimage/store/presets/presets';
 import {PresetData} from '@codeimage/store/presets/types';
 import {getUiStore} from '@codeimage/store/ui';
-import {Box, HStack, Text} from '@codeimage/ui';
+import {Box, HStack, Text, toast} from '@codeimage/ui';
 import {
+  As,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -15,7 +16,6 @@ import {
   DropdownMenuTrigger,
   IconButton,
   Tooltip,
-  As,
 } from '@codeui/kit';
 import {getUmami} from '@core/constants/umami';
 import {formatDistanceToNow} from '@core/helpers/date';
@@ -214,6 +214,16 @@ export const PresetSwitcher: ParentComponent<
                                 >
                                   {t('presets.renamePreset.label')}
                                 </DropdownMenuItem>
+                                <DropdownMenuItem
+                                  onClick={() => {
+                                    presetsStore.actions.copyLink(theme);
+                                    toast.success(t('presets.share.confirm'), {
+                                      position: 'bottom-center',
+                                    });
+                                  }}
+                                >
+                                  {t('presets.share.label')}
+                                </DropdownMenuItem>
                                 <DropdownMenuItem
                                   onClick={() => {
                                     openDialog(ConfirmDialog, {

apps/codeimage/src/components/Presets/PresetSwitcher/PresetSwitcher.tsx

@@ -12,6 +12,10 @@ export const presets = {
         old: 'Vecchio',
         new: 'Nuovo',
       },
+      share: {
+        label: 'Condividi',
+        confirm: 'Link preset copiato',
+      },
       renamePreset: {
         label: 'Rinomina',
         confirmTitle: 'Rinomina preset',
@@ -55,6 +59,10 @@ export const presets = {
         old: 'Old',
         new: 'New',
       },
+      share: {
+        label: 'Share',
+        confirm: 'Preset has been copied to clipboard',
+      },
       renamePreset: {
         label: 'Rename',
         confirmTitle: 'Rename preset',

apps/codeimage/src/i18n/presets.ts

@@ -54,6 +54,10 @@ export const code = style({
 
 export const img = style({
   width: '100%',
+  borderRadius: themeTokens.radii.lg,
+  overflow: 'hidden',
+  objectFit: 'contain',
+  aspectRatio: '16/9',
 });
 
 export const ul = style({

apps/codeimage/src/mdx/components.css.ts

@@ -31,4 +31,7 @@ export const mdxComponents: MDXComponents = {
       ref={el => setTimeout(() => el.play())}
     />
   ),
+  image: (props: JSX.IntrinsicElements['img']) => (
+    <img {...props} class={styles.img} />
+  ),
 };

apps/codeimage/src/mdx/components.tsx

@@ -2,5 +2,6 @@ import {Container} from 'statebuilder';
 import {createRoot} from 'solid-js';
 
 const container = createRoot(() => Container.create());
+
 export const provideAppState: typeof container.get = state =>
   container.get(state);

apps/codeimage/src/state/index.ts

@@ -1,9 +1,9 @@
+import {provideAppState} from '@codeimage/store/index';
 import {withEntityPlugin} from '@codeimage/store/plugins/withEntityPlugin';
 import {withIndexedDbPlugin} from '@codeimage/store/plugins/withIndexedDbPlugin';
 import {toast} from '@codeimage/ui';
-import {untrack} from 'solid-js';
+import {createEffect, on, untrack} from 'solid-js';
 import {withAsyncAction} from 'statebuilder/asyncAction';
-import {provideAppState} from '..';
 import * as api from '../../data-access/preset';
 import {useIdb} from '../../hooks/use-indexed-db';
 import {getAuth0State} from '../auth/auth0';
@@ -50,6 +50,42 @@ const PresetStoreDefinition = experimental__defineResource(fetchInitialState)
   .extend(withIndexedDbPlugin<PresetsArray>(idbKey, []))
   .extend(withPresetBridge(idbKey))
   .extend(withAsyncAction())
+  .extend(store => {
+    const sharePresetKey = 'share_preset';
+    createEffect(
+      on(
+        () => store.state === 'ready',
+        isReady => {
+          if (isReady) {
+            const params = new URLSearchParams(window.location.search);
+            if (params.has(sharePresetKey)) {
+              const sharePreset = params.get(sharePresetKey) as string;
+              try {
+                const preset = JSON.parse(window.atob(sharePreset));
+                store.bridge
+                  .addNewPreset(preset.name, preset.data)
+                  .then(preset => store.set(_ => [preset, ...(_ ?? [])]))
+                  .then(() => {
+                    const url =
+                      window.location.origin + window.location.pathname;
+                    window.history.replaceState(undefined, '', url);
+                  })
+                  .then(() =>
+                    toast.success('Preset imported successfully', {
+                      position: 'bottom-center',
+                    }),
+                  );
+              } catch (e) {
+                toast.error('Invalid preset', {
+                  position: 'bottom-center',
+                });
+              }
+            }
+          }
+        },
+      ),
+    );
+  })
   .extend(store => {
     return {
       sortedPresets() {
@@ -104,6 +140,11 @@ const PresetStoreDefinition = experimental__defineResource(fetchInitialState)
               });
           });
         }),
+        copyLink: store.asyncAction((payload: Preset) => {
+          const data = window.btoa(JSON.stringify(payload));
+          const link = `${window.location.origin}${window.location.pathname}?share_preset=${data}`;
+          return navigator.clipboard.writeText(link);
+        }),
         syncPreset: store.asyncAction((payload: Preset) => {
           return untrack(() => {
             const currentState = store();