@tailorkit/react 0.1.0-beta.3 → 0.1.0-beta.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/LICENSE.md +74 -0
  2. package/README.md +3 -0
  3. package/dist/components/context.d.ts +7 -10
  4. package/dist/components/index.d.ts +1 -2
  5. package/dist/components/render-slot.d.ts +9 -0
  6. package/dist/hooks/use-apps.d.ts +6 -13
  7. package/dist/hooks/use-query-result.d.ts +9 -0
  8. package/dist/hooks/use-view-context.d.ts +6 -0
  9. package/dist/hooks/use-views.d.ts +7 -0
  10. package/dist/index.d.ts +7 -3
  11. package/dist/index.js +362 -839
  12. package/dist/primitives.d.ts +11 -21
  13. package/dist/remote-view.d.ts +12 -6
  14. package/dist/tailorkit.d.ts +45 -0
  15. package/package.json +42 -24
  16. package/LICENSE +0 -674
  17. package/dist/components/context.d.ts.map +0 -1
  18. package/dist/components/index.d.ts.map +0 -1
  19. package/dist/components/render.d.ts +0 -20
  20. package/dist/components/render.d.ts.map +0 -1
  21. package/dist/components/root.d.ts +0 -11
  22. package/dist/components/root.d.ts.map +0 -1
  23. package/dist/hooks/use-apps.d.ts.map +0 -1
  24. package/dist/hooks/use-current-screen.d.ts +0 -24
  25. package/dist/hooks/use-current-screen.d.ts.map +0 -1
  26. package/dist/index.d.ts.map +0 -1
  27. package/dist/node-store.d.ts +0 -17
  28. package/dist/node-store.d.ts.map +0 -1
  29. package/dist/primitives.d.ts.map +0 -1
  30. package/dist/remote-context.d.ts +0 -9
  31. package/dist/remote-context.d.ts.map +0 -1
  32. package/dist/remote-view.d.ts.map +0 -1
  33. package/dist/tailor-kit.d.ts +0 -117
  34. package/dist/tailor-kit.d.ts.map +0 -1
  35. package/src/__tests__/node-store.test.ts +0 -206
  36. package/src/__tests__/primitives.test.tsx +0 -85
  37. package/src/__tests__/tailor-kit.test.tsx +0 -424
  38. package/src/__tests__/tailor-kit.types.tsx +0 -151
  39. package/src/components/context.ts +0 -21
  40. package/src/components/index.ts +0 -1
  41. package/src/components/render.tsx +0 -116
  42. package/src/components/root.tsx +0 -37
  43. package/src/hooks/use-apps.ts +0 -47
  44. package/src/hooks/use-current-screen.ts +0 -81
  45. package/src/index.ts +0 -8
  46. package/src/node-store.ts +0 -131
  47. package/src/primitives.tsx +0 -261
  48. package/src/remote-context.ts +0 -11
  49. package/src/remote-view.tsx +0 -232
  50. package/src/tailor-kit.tsx +0 -501
@@ -1,20 +0,0 @@
1
- import type { ComponentPropsWithoutRef, ElementType, HTMLAttributes, ReactElement, ReactNode, Ref } from "react";
2
- type ElementProps<TTagName extends ElementType> = ComponentPropsWithoutRef<TTagName> & {
3
- ref?: Ref<unknown>;
4
- };
5
- export interface RenderProps {
6
- render?: ReactElement<Record<string, unknown>>;
7
- }
8
- export type ComponentProps<TTagName extends ElementType> = ElementProps<TTagName> & RenderProps;
9
- export declare function useRender<TTagName extends ElementType>({ defaultTagName, props, render, }: {
10
- defaultTagName: TTagName;
11
- props: ElementProps<TTagName>;
12
- render?: ReactElement<Record<string, unknown>>;
13
- }): ReactNode;
14
- export declare function mergeProps<TProps extends Record<string, unknown>>(...propSets: (TProps | Record<string, unknown> | undefined)[]): TProps;
15
- export declare function composeRefs<T>(...refs: (Ref<T> | undefined)[]): Ref<T>;
16
- export type HtmlProps<TElement extends HTMLElement> = HTMLAttributes<TElement> & {
17
- ref?: Ref<TElement>;
18
- };
19
- export {};
20
- //# sourceMappingURL=render.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/components/render.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,wBAAwB,EAExB,WAAW,EACX,cAAc,EACd,YAAY,EACZ,SAAS,EACT,GAAG,EACJ,MAAM,OAAO,CAAC;AAEf,KAAK,YAAY,CAAC,QAAQ,SAAS,WAAW,IAAI,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IACrF,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CAChD;AAED,MAAM,MAAM,cAAc,CAAC,QAAQ,SAAS,WAAW,IAAI,YAAY,CAAC,QAAQ,CAAC,GAAG,WAAW,CAAC;AAEhG,wBAAgB,SAAS,CAAC,QAAQ,SAAS,WAAW,EAAE,EACtD,cAAc,EACd,KAAK,EACL,MAAM,GACP,EAAE;IACD,cAAc,EAAE,QAAQ,CAAC;IACzB,KAAK,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CAChD,GAAG,SAAS,CAYZ;AAED,wBAAgB,UAAU,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/D,GAAG,QAAQ,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC,EAAE,GAC5D,MAAM,CAiDR;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAUtE;AAMD,MAAM,MAAM,SAAS,CAAC,QAAQ,SAAS,WAAW,IAAI,cAAc,CAAC,QAAQ,CAAC,GAAG;IAC/E,GAAG,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;CACrB,CAAC"}
@@ -1,11 +0,0 @@
1
- import type { ReactNode } from "react";
2
- import type { TailorKitApp } from "../tailor-kit";
3
- import type { ComponentProps } from "./render";
4
- import type { RootTailor } from "./context";
5
- export interface RootProps extends ComponentProps<"div"> {
6
- apps?: TailorKitApp[];
7
- children?: ReactNode;
8
- tailor: RootTailor;
9
- }
10
- export declare function Root({ apps: appsProp, children, render, tailor, ...props }: RootProps): ReactNode;
11
- //# sourceMappingURL=root.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/components/root.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C,OAAO,KAAK,EAAE,UAAU,EAA0B,MAAM,WAAW,CAAC;AAIpE,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,KAAK,CAAC;IACtD,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,GAAG,SAAS,CAoBjG"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-apps.d.ts","sourceRoot":"","sources":["../../src/hooks/use-apps.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAyB,cAAc,EAAE,MAAM,eAAe,CAAC;AAEzF,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,YAAY,EAAE,GAAG,SAAS,CAAC;IACjC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;CAChD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,aAAa,CAgBxE"}
@@ -1,24 +0,0 @@
1
- import type { StandardJSONSchemaV1 } from "@standard-schema/spec";
2
- import type { ScreenDefinition } from "@tailorkit/core/schema";
3
- import type { TailorKitStore } from "../tailor-kit";
4
- export type ScreenName<TScreens extends Record<string, ScreenDefinition>> = keyof TScreens & string;
5
- export type ScreenContext<TScreen> = TScreen extends ScreenDefinition<infer TContext> ? TContext extends StandardJSONSchemaV1 ? StandardJSONSchemaV1.InferOutput<TContext> : Record<string, never> : never;
6
- interface ReadyScreenOptions<TScreens extends Record<string, ScreenDefinition>, TScreen extends ScreenName<TScreens>> {
7
- context: ScreenContext<TScreens[TScreen]>;
8
- screen: TScreen;
9
- status?: "ready";
10
- }
11
- interface LoadingScreenOptions<TScreen extends string> {
12
- context?: never;
13
- screen: TScreen;
14
- status: "loading";
15
- }
16
- interface ErrorScreenOptions<TScreen extends string> {
17
- context?: never;
18
- screen: TScreen;
19
- status: "error";
20
- }
21
- export type CurrentScreenOptions<TScreens extends Record<string, ScreenDefinition>, TScreen extends ScreenName<TScreens> = ScreenName<TScreens>> = TScreen extends ScreenName<TScreens> ? ReadyScreenOptions<TScreens, TScreen> | LoadingScreenOptions<TScreen> | ErrorScreenOptions<TScreen> : never;
22
- export declare function createUseCurrentScreen<TScreens extends Record<string, ScreenDefinition>>(store: TailorKitStore): <TScreen extends ScreenName<TScreens>>(options: CurrentScreenOptions<TScreens, TScreen>) => void;
23
- export {};
24
- //# sourceMappingURL=use-current-screen.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-current-screen.d.ts","sourceRoot":"","sources":["../../src/hooks/use-current-screen.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGpD,MAAM,MAAM,UAAU,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,IAAI,MAAM,QAAQ,GAAG,MAAM,CAAC;AAEpG,MAAM,MAAM,aAAa,CAAC,OAAO,IAC/B,OAAO,SAAS,gBAAgB,CAAC,MAAM,QAAQ,CAAC,GAC5C,QAAQ,SAAS,oBAAoB,GACnC,oBAAoB,CAAC,WAAW,CAAC,QAAQ,CAAC,GAC1C,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACvB,KAAK,CAAC;AAEZ,UAAU,kBAAkB,CAC1B,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,EACjD,OAAO,SAAS,UAAU,CAAC,QAAQ,CAAC;IAEpC,OAAO,EAAE,aAAa,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1C,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,oBAAoB,CAAC,OAAO,SAAS,MAAM;IACnD,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,SAAS,CAAC;CACnB;AAED,UAAU,kBAAkB,CAAC,OAAO,SAAS,MAAM;IACjD,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,MAAM,oBAAoB,CAC9B,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,EACjD,OAAO,SAAS,UAAU,CAAC,QAAQ,CAAC,GAAG,UAAU,CAAC,QAAQ,CAAC,IAE3D,OAAO,SAAS,UAAU,CAAC,QAAQ,CAAC,GAE5B,kBAAkB,CAAC,QAAQ,EAAE,OAAO,CAAC,GACrC,oBAAoB,CAAC,OAAO,CAAC,GAC7B,kBAAkB,CAAC,OAAO,CAAC,GAC/B,KAAK,CAAC;AAEZ,wBAAgB,sBAAsB,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,EACtF,KAAK,EAAE,cAAc,IAEY,OAAO,SAAS,UAAU,CAAC,QAAQ,CAAC,WAC1D,oBAAoB,CAAC,QAAQ,EAAE,OAAO,CAAC,KAC/C,IAAI,CA4BR"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AACjE,YAAY,EACV,YAAY,EACZ,oBAAoB,EACpB,YAAY,EACZ,iBAAiB,GAClB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}
@@ -1,17 +0,0 @@
1
- import type { RemoteNode } from "@tailorkit/sandbox/protocol";
2
- type Listener = () => void;
3
- export declare class NodeStore {
4
- private nodes;
5
- private signatures;
6
- private nodeListeners;
7
- private rootListeners;
8
- private rootId;
9
- clear(): void;
10
- setSnapshot(tree: RemoteNode): void;
11
- getRootId(): string | null;
12
- getNode(id: string): RemoteNode | null;
13
- subscribe(id: string, listener: Listener): () => void;
14
- subscribeRoot(listener: Listener): () => void;
15
- }
16
- export {};
17
- //# sourceMappingURL=node-store.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"node-store.d.ts","sourceRoot":"","sources":["../src/node-store.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAE9D,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC;AA6B3B,qBAAa,SAAS;IACpB,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,UAAU,CAA6B;IAC/C,OAAO,CAAC,aAAa,CAAoC;IACzD,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,MAAM,CAAuB;IAErC,KAAK,IAAI,IAAI,CAsBZ;IAED,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAuClC;IAED,SAAS,IAAI,MAAM,GAAG,IAAI,CAEzB;IAED,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CAErC;IAED,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,MAAM,IAAI,CAapD;IAED,aAAa,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,IAAI,CAG5C;CACF"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAK7D,KAAK,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE9C,UAAU,0BAA0B;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,cAAc,CAAC;CACvB;AAED,eAAO,MAAM,qBAAqB,4DAAyD,CAAC;AA4K5F,eAAO,MAAM,aAAa,aAAc,MAAM,SAAS,cAAc,KAAG,MAYvE,CAAC;AAuCF,eAAO,MAAM,UAAU;aACrB,GAAG,qBAAqB;QAAE,KAAK,EAAE,cAAc,CAAC;QAAC,KAAK,EAAE;YAAE,OAAO,CAAC,EAAE,SAAS,CAAA;SAAE,CAAA;KAAE;aAKjF,IAAI,qBAAqB;QAAE,KAAK,EAAE,cAAc,CAAC;QAAC,KAAK,EAAE;YAAE,OAAO,CAAC,EAAE,SAAS,CAAA;SAAE,CAAA;KAAE;aAKlF,IAAI,qBAAqB;QAAE,KAAK,EAAE,cAAc,CAAC;QAAC,KAAK,EAAE;YAAE,OAAO,CAAC,EAAE,SAAS,CAAA;SAAE,CAAA;KAAE;aAKlF,MAAM,qBAAqB;QAAE,KAAK,EAAE,cAAc,CAAC;QAAC,KAAK,EAAE;YAAE,OAAO,CAAC,EAAE,SAAS,CAAA;SAAE,CAAA;KAAE;CAK5E,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,aAAa,CAAC"}
@@ -1,9 +0,0 @@
1
- import type { HostToWorkerPayload } from "@tailorkit/sandbox/protocol";
2
- import type { NodeStore } from "./node-store";
3
- export interface RemoteViewContext {
4
- components: Record<string, unknown>;
5
- dispatch: (payload: HostToWorkerPayload) => void;
6
- store: NodeStore;
7
- }
8
- export declare const RemoteUIContext: import("react").Context<RemoteViewContext | null>;
9
- //# sourceMappingURL=remote-context.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"remote-context.d.ts","sourceRoot":"","sources":["../src/remote-context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,QAAQ,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACjD,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,mDAAgD,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"remote-view.d.ts","sourceRoot":"","sources":["../src/remote-view.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqCvC,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,iBAAiB,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;CAC3B;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,UAAU,EACV,YAAY,EACZ,KAAK,EACL,UAAU,GACX,EAAE,mBAAmB,GAAG,SAAS,CA8EjC;AAqDD,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,UAAU,mDAAwC,eAAe,KAAG,SAAS,CAgCxF,CAAC"}
@@ -1,117 +0,0 @@
1
- import type { ReactNode } from "react";
2
- import type { TailorKitSchemaSpecType } from "@tailorkit/core/spec";
3
- import type { TailorKitTheme, CallbackMap, ComponentDefinition, ComponentProps, ComponentSlots, Schema, ScreenDefinition, TailorKitSchema } from "@tailorkit/core/schema";
4
- import type { primitives } from "./primitives";
5
- import { Root } from "./components";
6
- import type { UseAppsResult } from "./hooks/use-apps";
7
- import type { CurrentScreenOptions, ScreenName } from "./hooks/use-current-screen";
8
- type ReactComponentSlots<TComponent> = {
9
- [TSlot in keyof ComponentSlots<TComponent>]: ReactNode;
10
- };
11
- type AnyComponentDefinition = ComponentDefinition<Schema | undefined, CallbackMap, readonly string[] | undefined>;
12
- type ComponentRenderer<TComponent extends AnyComponentDefinition> = (args: {
13
- props: ComponentProps<TComponent>;
14
- slots: ReactComponentSlots<TComponent>;
15
- }) => ReactNode;
16
- type ComponentRenderers<TComponents extends Record<string, AnyComponentDefinition>> = {
17
- [TName in keyof TComponents]?: ComponentRenderer<TComponents[TName]>;
18
- };
19
- type CompleteComponentRenderers<TComponents extends Record<string, AnyComponentDefinition>> = {
20
- [TName in keyof TComponents]-?: ComponentRenderer<TComponents[TName]>;
21
- };
22
- export interface TailorKitApp {
23
- clientPath?: string;
24
- description?: string;
25
- id: string;
26
- projectId?: string;
27
- currentDeployment?: {
28
- id: string;
29
- } | null;
30
- name?: string;
31
- }
32
- export interface TailorKitAppsSnapshot {
33
- apps: TailorKitApp[];
34
- error: Error | null;
35
- status: "error" | "idle" | "loading" | "ready";
36
- }
37
- interface TailorKitMetaSnapshot {
38
- assetsBaseUrl: string | null;
39
- error: Error | null;
40
- schema: TailorKitSchemaSpecType | null;
41
- status: "error" | "idle" | "loading" | "ready";
42
- }
43
- export interface CurrentScreenEntry {
44
- context: unknown;
45
- id: symbol;
46
- order: number;
47
- screen: string;
48
- status: "error" | "loading" | "ready";
49
- }
50
- interface AppViewBaseProps {
51
- app: TailorKitApp;
52
- createIframe?: () => HTMLIFrameElement;
53
- fallback?: ReactNode;
54
- runtimeUrl?: string | URL;
55
- }
56
- type AppViewScreenProps<TScreens extends Record<string, ScreenDefinition>, TScreen extends ScreenName<TScreens> = ScreenName<TScreens>> = [ScreenName<TScreens>] extends [never] ? {
57
- context?: never;
58
- screen?: never;
59
- status?: never;
60
- } : {
61
- context?: never;
62
- screen?: never;
63
- status?: never;
64
- } | CurrentScreenOptions<TScreens, TScreen>;
65
- export type AppViewProps<TScreens extends Record<string, ScreenDefinition>, TScreen extends ScreenName<TScreens> = ScreenName<TScreens>> = AppViewBaseProps & AppViewScreenProps<TScreens, TScreen>;
66
- export interface TailorKitInstance<TScreens extends Record<string, ScreenDefinition> = Record<string, never>> {
67
- AppView: (props: AppViewProps<TScreens>) => ReactNode;
68
- Root: (props: Omit<Parameters<typeof Root>[0], "tailor">) => ReactNode;
69
- getApp: (id: string) => TailorKitApp | undefined;
70
- getApps: () => TailorKitApp[];
71
- useApps: () => UseAppsResult;
72
- useCurrentScreen: <TScreen extends ScreenName<TScreens>>(options: CurrentScreenOptions<TScreens, TScreen>) => void;
73
- }
74
- type PrimitiveRenderers = typeof primitives;
75
- type CustomComponentRenderers<TComponents extends Record<string, AnyComponentDefinition>> = {
76
- [TName in Exclude<keyof TComponents, keyof PrimitiveRenderers>]?: ComponentRenderer<TComponents[TName]>;
77
- };
78
- export declare function components<TComponents extends Record<string, AnyComponentDefinition>>(_schema: TailorKitSchema<TComponents, Record<string, ScreenDefinition>>, customComponents: CustomComponentRenderers<TComponents>): ComponentRenderers<TComponents>;
79
- interface TailorKitServerShape {
80
- $internal: {
81
- schema: {
82
- components: Record<string, unknown>;
83
- screens: Record<string, unknown>;
84
- };
85
- };
86
- }
87
- type ServerComponentMap<TTailor extends TailorKitServerShape> = TTailor["$internal"]["schema"]["components"];
88
- type ServerComponents<TTailor extends TailorKitServerShape> = {
89
- [TName in keyof ServerComponentMap<TTailor>]: ServerComponentMap<TTailor>[TName] extends AnyComponentDefinition ? ServerComponentMap<TTailor>[TName] : never;
90
- };
91
- type ServerScreenMap<TTailor extends TailorKitServerShape> = TTailor["$internal"]["schema"]["screens"];
92
- type ServerScreens<TTailor extends TailorKitServerShape> = {
93
- [TName in keyof ServerScreenMap<TTailor>]: ServerScreenMap<TTailor>[TName] extends ScreenDefinition ? ServerScreenMap<TTailor>[TName] : never;
94
- };
95
- export declare function createTailorKitClient<TTailor extends TailorKitServerShape>(options: {
96
- baseUrl: string | URL;
97
- components?: CompleteComponentRenderers<ServerComponents<TTailor>>;
98
- theme?: TailorKitTheme;
99
- }): TailorKitInstance<ServerScreens<TTailor>>;
100
- export type TailorKitStore = ReturnType<typeof createTailorKitStore>;
101
- declare function createTailorKitStore(baseUrlInput: string | URL): {
102
- baseUrl: URL;
103
- fetchApps: (options?: {
104
- force?: boolean;
105
- }) => Promise<void>;
106
- fetchMeta: () => Promise<void>;
107
- getApp: (id: string) => TailorKitApp | undefined;
108
- getApps: () => TailorKitApp[];
109
- getAppsSnapshot: () => TailorKitAppsSnapshot;
110
- getCurrentScreen: () => CurrentScreenEntry | null;
111
- getMetaSnapshot: () => TailorKitMetaSnapshot;
112
- registerScreen: (entry: Omit<CurrentScreenEntry, "order">) => void;
113
- subscribe: (listener: () => void) => (() => void);
114
- unregisterScreen: (id: symbol) => void;
115
- };
116
- export type { CurrentScreenOptions } from "./hooks/use-current-screen";
117
- //# sourceMappingURL=tailor-kit.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"tailor-kit.d.ts","sourceRoot":"","sources":["../src/tailor-kit.tsx"],"names":[],"mappings":"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"}
@@ -1,206 +0,0 @@
1
- import { describe, expect, it, vi } from "vitest";
2
- import { NodeStore } from "../node-store";
3
- import type { RemoteNode } from "@tailorkit/sandbox/protocol";
4
-
5
- const textNode = (id: string, text: string): RemoteNode => ({ id, kind: "text", text });
6
-
7
- const elemNode = (
8
- id: string,
9
- type: string,
10
- props: Record<string, unknown> = {},
11
- children: RemoteNode[] = [],
12
- ): RemoteNode => ({ children, id, kind: "element", props, type });
13
-
14
- const elementWithCallback = (event: string): RemoteNode => ({
15
- callbacks: [{ callback: "onSelect", inputCount: 1, event }],
16
- children: [],
17
- id: "n",
18
- kind: "element",
19
- props: {},
20
- type: "tailorkit-button",
21
- });
22
-
23
- describe("NodeStore", () => {
24
- describe("setSnapshot", () => {
25
- it("stores all nodes from the tree", () => {
26
- const store = new NodeStore();
27
- const tree = elemNode("root", "div", {}, [textNode("t1", "hello")]);
28
- store.setSnapshot(tree);
29
-
30
- expect(store.getNode("root")).toMatchObject({ id: "root", type: "div" });
31
- expect(store.getNode("t1")).toMatchObject({ id: "t1", text: "hello" });
32
- });
33
-
34
- it("flattens nested children", () => {
35
- const store = new NodeStore();
36
- const tree = elemNode("root", "div", {}, [
37
- elemNode("child", "span", {}, [textNode("text", "hi")]),
38
- ]);
39
- store.setSnapshot(tree);
40
-
41
- expect(store.getNode("text")).toMatchObject({ text: "hi" });
42
- });
43
-
44
- it("tracks the root id", () => {
45
- const store = new NodeStore();
46
- store.setSnapshot(textNode("root", "hi"));
47
- expect(store.getRootId()).toBe("root");
48
- });
49
-
50
- it("removes stale nodes when they leave the tree", () => {
51
- const store = new NodeStore();
52
- store.setSnapshot(elemNode("root", "div", {}, [textNode("old", "gone")]));
53
- store.setSnapshot(elemNode("root", "div", {}, []));
54
-
55
- expect(store.getNode("old")).toBeNull();
56
- });
57
- });
58
-
59
- describe("subscribe", () => {
60
- it("notifies listener when a node changes", () => {
61
- const store = new NodeStore();
62
- store.setSnapshot(textNode("n1", "initial"));
63
-
64
- const listener = vi.fn();
65
- store.subscribe("n1", listener);
66
-
67
- store.setSnapshot(textNode("n1", "updated"));
68
- expect(listener).toHaveBeenCalledTimes(1);
69
- });
70
-
71
- it("does not notify when node content is unchanged", () => {
72
- const store = new NodeStore();
73
- store.setSnapshot(textNode("n1", "same"));
74
-
75
- const listener = vi.fn();
76
- store.subscribe("n1", listener);
77
-
78
- store.setSnapshot(textNode("n1", "same"));
79
- expect(listener).not.toHaveBeenCalled();
80
- });
81
-
82
- it("only notifies the subscriber for its specific node", () => {
83
- const store = new NodeStore();
84
- store.setSnapshot(elemNode("root", "div", {}, [textNode("n1", "a"), textNode("n2", "b")]));
85
-
86
- const n1Listener = vi.fn();
87
- const n2Listener = vi.fn();
88
- store.subscribe("n1", n1Listener);
89
- store.subscribe("n2", n2Listener);
90
-
91
- store.setSnapshot(
92
- elemNode("root", "div", {}, [textNode("n1", "changed"), textNode("n2", "b")]),
93
- );
94
-
95
- expect(n1Listener).toHaveBeenCalledTimes(1);
96
- expect(n2Listener).not.toHaveBeenCalled();
97
- });
98
-
99
- it("does not notify parent when only a child's props change", () => {
100
- const store = new NodeStore();
101
- store.setSnapshot(elemNode("root", "div", {}, [textNode("child", "initial")]));
102
-
103
- const rootListener = vi.fn();
104
- store.subscribe("root", rootListener);
105
-
106
- store.setSnapshot(elemNode("root", "div", {}, [textNode("child", "updated")]));
107
-
108
- expect(rootListener).not.toHaveBeenCalled();
109
- });
110
-
111
- it("notifies parent when children list changes", () => {
112
- const store = new NodeStore();
113
- store.setSnapshot(elemNode("root", "div", {}, [textNode("n1", "a")]));
114
-
115
- const rootListener = vi.fn();
116
- store.subscribe("root", rootListener);
117
-
118
- store.setSnapshot(elemNode("root", "div", {}, [textNode("n1", "a"), textNode("n2", "b")]));
119
-
120
- expect(rootListener).toHaveBeenCalledTimes(1);
121
- });
122
-
123
- it("unsubscribes cleanly", () => {
124
- const store = new NodeStore();
125
- store.setSnapshot(textNode("n1", "a"));
126
-
127
- const listener = vi.fn();
128
- const unsub = store.subscribe("n1", listener);
129
- unsub();
130
-
131
- store.setSnapshot(textNode("n1", "b"));
132
- expect(listener).not.toHaveBeenCalled();
133
- });
134
- });
135
-
136
- describe("subscribeRoot", () => {
137
- it("notifies when root id changes", () => {
138
- const store = new NodeStore();
139
- store.setSnapshot(textNode("root1", "a"));
140
-
141
- const listener = vi.fn();
142
- store.subscribeRoot(listener);
143
-
144
- store.setSnapshot(textNode("root2", "b"));
145
- expect(listener).toHaveBeenCalledTimes(1);
146
- });
147
-
148
- it("does not notify when root id stays the same", () => {
149
- const store = new NodeStore();
150
- store.setSnapshot(textNode("root", "a"));
151
-
152
- const listener = vi.fn();
153
- store.subscribeRoot(listener);
154
-
155
- store.setSnapshot(textNode("root", "b"));
156
- expect(listener).not.toHaveBeenCalled();
157
- });
158
-
159
- it("unsubscribes cleanly", () => {
160
- const store = new NodeStore();
161
- store.setSnapshot(textNode("root1", "a"));
162
-
163
- const listener = vi.fn();
164
- const unsub = store.subscribeRoot(listener);
165
- unsub();
166
-
167
- store.setSnapshot(textNode("root2", "b"));
168
- expect(listener).not.toHaveBeenCalled();
169
- });
170
- });
171
-
172
- describe("element node change detection", () => {
173
- it("detects prop changes", () => {
174
- const store = new NodeStore();
175
- store.setSnapshot(elemNode("n", "div", { color: "red" }));
176
-
177
- const listener = vi.fn();
178
- store.subscribe("n", listener);
179
-
180
- store.setSnapshot(elemNode("n", "div", { color: "blue" }));
181
- expect(listener).toHaveBeenCalledTimes(1);
182
- });
183
-
184
- it("detects type changes", () => {
185
- const store = new NodeStore();
186
- store.setSnapshot(elemNode("n", "div"));
187
-
188
- const listener = vi.fn();
189
- store.subscribe("n", listener);
190
-
191
- store.setSnapshot(elemNode("n", "span"));
192
- expect(listener).toHaveBeenCalledTimes(1);
193
- });
194
-
195
- it("detects callback binding changes", () => {
196
- const store = new NodeStore();
197
-
198
- store.setSnapshot(elementWithCallback("tailorkitcallbackonselect"));
199
- const listener = vi.fn();
200
- store.subscribe("n", listener);
201
-
202
- store.setSnapshot(elementWithCallback("tailorkitcallbackonchange"));
203
- expect(listener).toHaveBeenCalledTimes(1);
204
- });
205
- });
206
- });
@@ -1,85 +0,0 @@
1
- import { render, screen } from "@testing-library/react";
2
- import { createElement } from "react";
3
- import { describe, expect, it } from "vitest";
4
- import { buildThemeCss, PrimitiveThemeContext, primitives } from "../primitives";
5
-
6
- const theme = {
7
- breakpoints: {
8
- base: null,
9
- lg: "1024px",
10
- sm: "640px",
11
- },
12
- tokens: {
13
- background: {
14
- surface: "var(--background)",
15
- },
16
- borderColor: {
17
- default: "var(--border)",
18
- },
19
- textColor: {
20
- foreground: "var(--foreground)",
21
- muted: "var(--muted-foreground)",
22
- },
23
- radius: {
24
- md: "8px",
25
- },
26
- space: {
27
- lg: "16px",
28
- md: "8px",
29
- },
30
- },
31
- };
32
-
33
- describe("react primitives", () => {
34
- it("builds screen-scoped theme variables", () => {
35
- const css = buildThemeCss("screen-1", theme);
36
- expect(css).toContain('[data-tailorkit-screen="screen-1"]');
37
- expect(css).toContain("--tailorkit-border-solid: solid;");
38
- expect(css).toContain("--tailorkit-space-md: 8px;");
39
- expect(css).toContain("--tailorkit-background-surface: var(--background);");
40
- expect(css).toContain("--tailorkit-textColor-muted: var(--muted-foreground);");
41
- });
42
-
43
- it("renders a scoped primitive style with responsive rules", () => {
44
- render(
45
- <PrimitiveThemeContext.Provider value={{ screenId: "screen-1", theme }}>
46
- {primitives.Flex({
47
- props: {
48
- direction: { base: "column", lg: "row" },
49
- border: "solid",
50
- gap: "md",
51
- padding: { base: "md", lg: "lg" },
52
- textColor: { base: "muted", lg: "foreground" },
53
- },
54
- slots: { default: createElement("span", null, "Content") },
55
- })}
56
- </PrimitiveThemeContext.Provider>,
57
- );
58
-
59
- const content = screen.getByText("Content");
60
- const node = content.parentElement;
61
- const style = node?.querySelector("style");
62
- expect(node?.tagName).toBe("DIV");
63
- expect(style?.textContent).toContain("display: flex;");
64
- expect(style?.textContent).toContain("border-style: var(--tailorkit-border-solid);");
65
- expect(style?.textContent).toContain("border-width: 1px;");
66
- expect(style?.textContent).toContain("padding: var(--tailorkit-space-md);");
67
- expect(style?.textContent).toContain("color: var(--tailorkit-textColor-muted);");
68
- expect(style?.textContent).toContain("@media (min-width: 1024px)");
69
- expect(style?.textContent).toContain("color: var(--tailorkit-textColor-foreground);");
70
- expect(style?.textContent).toContain("flex-direction: row;");
71
- });
72
-
73
- it("renders inline as a span", () => {
74
- render(
75
- <PrimitiveThemeContext.Provider value={{ screenId: "screen-2", theme }}>
76
- {primitives.Inline({
77
- props: { padding: "md" },
78
- slots: { default: "Label" },
79
- })}
80
- </PrimitiveThemeContext.Provider>,
81
- );
82
-
83
- expect(screen.getByText("Label").tagName).toBe("SPAN");
84
- });
85
- });