@gtkx/storybook 0.0.1 → 2.0.0-beta.11

package/src/controls.tsx

@@ -7,6 +7,9 @@ import type { Args, ArgTypes } from "./types.js";
 
 type ControlsProps = { argTypes: ArgTypes; args: Args; onChange: (update: Args) => void };
 
+const NO_SELECTION_ID = "no-selection";
+const NO_SELECTION_LABEL = "Choose option...";
+
 type ControlProps = {
     argument: string;
     title: string;
@@ -79,10 +82,7 @@ const NumberControl = ({
                 />
             )}
             onNotifyValue={(next) => {
-                if (
-                    typeof next === "number" && Number.isFinite(next) &&
-                    next >= min && next <= max && !Object.is(next, value)
-                ) {
+                if (!Object.is(next, value)) {
                     onChange({ [argument]: next });
                 }
             }}
@@ -100,11 +100,11 @@ const SelectControl = (props: Omit<ControlProps, "type">): ReactNode => {
     const values: unknown[] = options;
     const selected = values.findIndex((option) => Object.is(option, value));
     const labels = isObject(settings.labels) ? settings.labels : {};
-    const items = values.map((option, index) => {
+    const items = [{ id: NO_SELECTION_ID, value: NO_SELECTION_LABEL }, ...values.map((option, index) => {
         const label = labels[String(option)];
 
         return { id: String(index), value: typeof label === "string" ? label : String(option) };
-    });
+    })];
 
     return (
         <ComboRow
@@ -112,13 +112,19 @@ const SelectControl = (props: Omit<ControlProps, "type">): ReactNode => {
             title={markupEscapeText(title, -1)}
             sensitive={!isDisabled}
             items={items}
-            selectedId={selected === -1 ? null : String(selected)}
+            selectedId={selected === -1 ? NO_SELECTION_ID : String(selected)}
             onSelectionChanged={(id) => {
-                const index = Number(id);
+                if (id === NO_SELECTION_ID) {
+                    onChange({ [argument]: undefined });
+
+                    return;
+                }
 
-                if (Number.isSafeInteger(index) && index >= 0 && index < values.length) {
-                    onChange({ [argument]: values[index] });
+                if (id === null) {
+                    return;
                 }
+
+                onChange({ [argument]: values[Number(id)] });
             }}
         />
     );
@@ -136,7 +142,7 @@ const Control = (props: ControlProps): ReactNode => {
                     sensitive={!isDisabled}
                     active={value === true}
                     onNotifyActive={(active) => {
-                        if (typeof active === "boolean" && !Object.is(active, value)) {
+                        if (!Object.is(active, value)) {
                             onChange({ [argument]: active });
                         }
                     }}
@@ -151,7 +157,7 @@ const Control = (props: ControlProps): ReactNode => {
                     sensitive={!isDisabled}
                     text={typeof value === "string" ? value : ""}
                     onNotifyText={(text) => {
-                        if (typeof text === "string" && !Object.is(text, value)) {
+                        if (!Object.is(text, value)) {
                             onChange({ [argument]: text });
                         }
                     }}
@@ -177,9 +183,9 @@ const Controls = ({ argTypes, args, onChange }: ControlsProps): ReactNode => (
     <AdwPreferencesGroup title="Controls">
         {Object.entries(argTypes).map(([argument, annotation]) => {
             const control: unknown = annotation?.control;
-            const table: unknown = annotation?.table;
+            const table = isObject(annotation?.table) ? annotation.table : {};
 
-            if (control === undefined || control === false || (isObject(table) && table.disable === true)) {
+            if (control === undefined || control === false || table.disable === true) {
                 return null;
             }
 
@@ -195,7 +201,7 @@ const Controls = ({ argTypes, args, onChange }: ControlsProps): ReactNode => (
                     type={typeof type === "string" ? type : "unknown"}
                     settings={settings}
                     options={annotation?.options}
-                    isDisabled={settings.disable === true}
+                    isDisabled={settings.disable === true || table.readonly === true}
                     onChange={onChange}
                 />
             );

package/src/types.ts

@@ -1,9 +1,11 @@
 import type * as Gtk from "@gtkx/gi/gtk";
 import type { ComponentType, ReactNode } from "react";
 import type {
+    ArgsFromMeta,
     ComponentAnnotations,
     GlobalTypes,
     Renderer,
+    StoryAnnotations as StorybookAnnotations,
     ArgTypes as StorybookArgTypes,
     StoryContext as StorybookContext,
 } from "storybook/internal/types";
@@ -87,31 +89,11 @@ type ComponentOrProps<T> = T extends ComponentType<infer Props extends object>
 /** Presents combined inferred args as a single object type. */
 type Simplify<T> = { [Key in keyof T]: T[Key] };
 
-/** Combines the argument requirements of every member of a union. */
-type UnionToIntersection<T> = (
-    T extends unknown ? (value: T) => void : never
-) extends (value: infer Intersection) => void ? Intersection : never;
-
-/** Retains explicitly named args while removing broad index signatures. */
-type DeclaredArgs<T> = {
-    [Key in keyof T as string extends Key
-        ? never
-        : number extends Key ? never : symbol extends Key ? never : Key]: T[Key];
-};
-
-/** Extracts the args accepted by a custom render function. */
-type RenderArgs<T> = T extends (args: infer Props extends object, context: never) => ReactNode ? Props : object;
-
-/** Combines the args required by a metadata object's decorators. */
-type DecoratorArgs<T> = T extends readonly (infer Item)[]
-    ? UnionToIntersection<Item extends Decorator<infer Props extends object> ? Props : object>
-    : object;
-
 /** Infers story args from component props, render functions, decorators, or declared defaults. */
-type ArgsFrom<T> = T extends { component?: infer Component; render?: infer Render; decorators?: infer Decorators }
+type ArgsFrom<T> = T extends { component?: infer Component; render?: unknown; decorators?: unknown }
     ? Simplify<
         (NonNullable<Component> extends ComponentType<infer Props extends object> ? Props : object) &
-        DeclaredArgs<RenderArgs<NonNullable<Render>> & DecoratorArgs<NonNullable<Decorators>>>
+        ArgsFromMeta<NativeRenderer, T>
     >
     : T extends { args: infer Defaults extends object } ? Defaults : Args;
 
@@ -135,9 +117,10 @@ type RequiredStoryArgs<T, TArgs extends object> =
 
 /** CSF3 story object inferred from metadata, a React component, or an explicit args type. */
 type StoryObj<T = Args> = T extends { component?: unknown; render?: unknown; decorators?: unknown; args?: unknown }
-    ? StoryAnnotations<ArgsFrom<T>> & (Record<never, never> extends RequiredStoryArgs<T, ArgsFrom<T>>
-        ? { args?: RequiredStoryArgs<T, ArgsFrom<T>> }
-        : { args: RequiredStoryArgs<T, ArgsFrom<T>> })
+    ? StoryAnnotations<ArgsFrom<T>> & Pick<
+        StorybookAnnotations<NativeRenderer<ArgsFrom<T>>, ArgsFrom<T>, RequiredStoryArgs<T, ArgsFrom<T>>>,
+        "args"
+    >
     : StoryAnnotations<ComponentOrProps<T>>;
 
 /** Project annotations shared by all composed stories. */