feat: start of monorepo

packages/website/src/stores/embedState/constants.ts

@@ -0,0 +1,27 @@
+import { EmbedConfigItem } from '.';
+
+export enum EmbedItemType {
+  Radius,
+  Size,
+  SizeWithout0,
+  Color,
+  String,
+  RichText,
+  Boolean,
+  Slider,
+  Enum,
+}
+
+export const radixGrays = [
+  'gray',
+  'mauve',
+  'slate',
+  'sage',
+  'olive',
+  'sand',
+] as const;
+
+export const radixTextWeights = ['light', 'regular', 'medium', 'bold'] as const;
+
+export type EmbedConfigItemType<Type extends EmbedItemType> =
+  EmbedConfigItem & { type: Type };

packages/website/src/stores/embedState/index.ts

@@ -0,0 +1,100 @@
+'use client';
+
+import * as radixColors from '@radix-ui/colors';
+import { create } from 'zustand';
+import { createNextSafeStore } from '../../core/zustand/createNextSafeStore';
+import {
+  EmbedConfigItemType,
+  EmbedItemType,
+  radixGrays,
+  radixTextWeights,
+} from './constants';
+
+export type RadixSize = `${0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`;
+export type RadixSizeWithout0 = Exclude<RadixSize, '0'>;
+export type RadixRadius = `${1 | 2 | 3 | 4}` | 'full';
+export type RadixTextWeight = (typeof radixTextWeights)[number];
+export type RadixColorCompound = {
+  base: RadixColor;
+  variant: RadixColorVariant;
+};
+export type RadixTextColor =
+  | Exclude<RadixColor, RadixColorGrays>
+  | 'gray'
+  | undefined;
+export type RadixColorVariantRaw =
+  `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`;
+export type RadixColorVariant = `${'' | 'a'}${RadixColorVariantRaw}`;
+export type RadixColor = Exclude<
+  keyof typeof radixColors,
+  `${string}${'A' | 'P3' | 'Dark'}`
+>;
+export type RadixColorGrays = (typeof radixGrays)[number];
+
+export type ExtractEmbedConfigTypes<Config extends EmbedConfig> = {
+  [Key in keyof Config]: ({
+    type: Config[Key]['type'];
+  } & EmbedConfigItem)['default'];
+};
+
+export type EmbedConfig = {
+  width: EmbedConfigItemType<EmbedItemType.Slider>;
+  height: EmbedConfigItemType<EmbedItemType.Slider>;
+} & Record<string, EmbedConfigItem>;
+
+export type EmbedConfigItem = (
+  | {
+      type: EmbedItemType.Slider;
+      default: number;
+      min: number;
+      max: number;
+    }
+  | {
+      type: EmbedItemType.Boolean;
+      default: boolean;
+    }
+  | {
+      type: EmbedItemType.String;
+      default: string;
+    }
+  | {
+      type: EmbedItemType.Radius;
+      default: RadixRadius;
+    }
+  | {
+      type: EmbedItemType.Size;
+      default: RadixSize;
+    }
+  | {
+      type: EmbedItemType.SizeWithout0;
+      default: RadixSizeWithout0;
+    }
+  | {
+      type: EmbedItemType.Color;
+      default: string;
+    }
+  | {
+      type: EmbedItemType.RichText;
+      default: {
+        color: string;
+        size: RadixSizeWithout0;
+        weight: RadixTextWeight;
+      };
+    }
+  | {
+      type: EmbedItemType.Enum;
+      default: string;
+      options: {
+        label: string;
+        value: string;
+      }[];
+    }
+) & {
+  pad?: boolean;
+};
+
+export type EmbedState = Record<string, EmbedConfigItem['default']>;
+
+export const { Provider, use, useMutation, useStore } = createNextSafeStore(
+  (init: EmbedState) => create<EmbedState>()(() => init),
+);

packages/website/src/stores/embedState/utilities.ts

@@ -0,0 +1,31 @@
+import { TextProps } from '@radix-ui/themes';
+import { EmbedConfig } from '.';
+import * as EmbedState from './';
+import { EmbedConfigItemType, EmbedItemType } from './constants';
+
+export function useEmbedStateCurry<Config extends EmbedConfig>() {
+  function useState<Key extends keyof Config>(key: Key) {
+    return EmbedState.use((state) => {
+      return (state as EmbedState.ExtractEmbedConfigTypes<Config>)[key];
+    });
+  }
+
+  function useRichText<
+    Key extends {
+      [K in keyof Config]: Config[K] extends { type: EmbedItemType.RichText }
+        ? K
+        : never;
+    }[keyof Config],
+  >(key: Key) {
+    const { color, ...state } = useState(
+      key,
+    ) as EmbedConfigItemType<EmbedItemType.RichText>['default'];
+
+    return {
+      style: { color },
+      ...state,
+    } satisfies TextProps;
+  }
+
+  return { useState, useRichText };
+}