Draft: Use Story args instead of render() #709

jirutka · 2024-10-29T22:48:53Z

This is the preferred way in Storybook and it allows us to modify kcContext passed to KcPageStory with Story decorators. This is useful, for example, to add support for globally changing the locale in kcContext via Storybook Toolbar.

https://storybook.js.org/docs/writing-stories/args

I edited the files in bulk using the following two ast-grep rules:

id: replace-render-with-args-1
language: TSX
rule:
  all:
    - pattern:
        context: |-
          export const $_VAR = { $STORY }
        selector: object
    - pattern:
        context: "{ render: () => (<KcPageStory kcContext={ $OBJ } />) }"
        selector: object
fix: |-
  {
      args: {
          kcContext: $OBJ
      }
  }

id: replace-render-with-args-2
language: TSX
rule:
  all:
    - pattern:
        context: |-
          export const $_VAR = { $STORY }
        selector: object
    - pattern:
        context: "{ render: () => <KcPageStory /> }"
        selector: object

fix: "{}"

This is the preferred way in Storybook and it allows us to modify kcContext passed to KcPageStory with Story decorators. This is useful, for example, to add support for globally changing the locale in kcContext via Storybook Toolbar. https://storybook.js.org/docs/writing-stories/args I edited the files in bulk using the following two ast-grep rules: ```yaml id: replace-render-with-args-1 language: TSX rule: all: - pattern: context: |- export const $_VAR = { $STORY } selector: object - pattern: context: "{ render: () => (<KcPageStory kcContext={ $OBJ } />) }" selector: object fix: |- { args: { kcContext: $OBJ } } ``` ```yaml id: replace-render-with-args-2 language: TSX rule: all: - pattern: context: |- export const $_VAR = { $STORY } selector: object - pattern: context: "{ render: () => <KcPageStory /> }" selector: object fix: "{}" ```

jirutka · 2024-10-29T22:59:53Z

This cannot be done (yet) because of the outdated storybook version. :(

garronej · 2024-11-19T02:14:59Z

Hey thank you for attempting this.

I'll need to update the Storybook version, I have to port the theme.

zenatshockbyte · 2025-05-29T07:41:53Z

We're using args by moving the createKcPageStory to a decorator, which allows us to use a 'theme' global to switch between theme variants.

This pr would not allow for this to be done with a decorator, because of how the KcPageStory is created.

Login.stories.tsx

type KCStoryMeta<PageId extends KcContext["pageId"]> = {
  pageId: PageId;
  kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>>;
};

const meta = {
  title: "login/login.ftl",
  args: {
    pageId: "login.ftl",
  },
} satisfies Meta<KCStoryMeta<"login.ftl">>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {};

export const WithInvalidCredential: Story = {
  args: {
    kcContext: {
      login: {
        username: "johndoe",
      },
      messagesPerField: {
        // NOTE: The other functions of messagesPerField are derived from get() and
        // existsError() so they are the only ones that need to mock.
        existsError: (fieldName: string, ...otherFieldNames: string[]) => {
          const fieldNames = [fieldName, ...otherFieldNames];
          return (
            fieldNames.includes("username") || fieldNames.includes("password")
          );
        },
        get: (fieldName: string) => {
          if (fieldName === "username" || fieldName === "password") {
            return "Invalid username or password.";
          }
          return "";
        },
      },
    },
  },

KCPageStory.tsx

export function createKcPageStory<PageId extends KcContext["pageId"]>(params: {
  pageId: PageId;
  theme: ThemeName;
}) {
  const { pageId, theme } = params;

  const kcContextExtension: KcContextExtension = {
    themeName: theme || themeNames[0],
    properties: {
      ...kcEnvDefaults,
      kcFormGroupClass: "form-group",
      kcInputWrapperClass: "form-group",
    },
  };
  const kcContextExtensionPerPage: KcContextExtensionPerPage = {};

  const { getKcContextMock } = createGetKcContextMock({
    kcContextExtension,
    kcContextExtensionPerPage,
    overrides: {
      realm: {
        internationalizationEnabled: false,
      },
    },
    overridesPerPage: {},
  });

  function KcPageStory(props: {
    kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>>;
  }) {
    const { kcContext: overrides } = props;

    const kcContextMock = getKcContextMock({
      pageId,
      overrides,
    });

    return (
      <>
        <KcPage kcContext={kcContextMock} />;
      </>
    );
  }

  return { KcPageStory };
}

preview.tsx

import { createKcPageStory } from "../src/login/KcPageStory";

const preview: Preview = {
  globalTypes: {
    theme: {
      name: "Theme",
      description: "Theme variant",
      defaultValue: themeNames[0],
      toolbar: {
        items: themeNames,
        dynamicTitle: true,
        showName: true,
      },
    },
  },
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  decorators: [
    (_Story, { globals, parameters, args }) => {
      const selectedTheme = globals.theme || "light";
      const { KcPageStory } = createKcPageStory({
        pageId: args.pageId,
        theme: selectedTheme,
      });

      return (
        <>
          <KcPageStory kcContext={args.kcContext} />
        </>
      );
    },
  ],
};

export default preview;

jirutka changed the title ~~Use Story args instead of render()~~ Draft: Use Story args instead of render() Oct 29, 2024

jirutka marked this pull request as draft October 29, 2024 22:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Draft: Use Story args instead of render() #709

Draft: Use Story args instead of render() #709

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Draft: Use Story args instead of render() #709

Are you sure you want to change the base?

Draft: Use Story args instead of render() #709

Uh oh!

Conversation

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!