<commit_before>import React, { useState } from 'react';
import PropTypes from 'prop-types';

import { useArgs } from '@storybook/client-api';

// eslint-disable-next-line react/prop-types
const ArgUpdater = ({ args, updateArgs, resetArgs }) => {
  const [argsInput, updateArgsInput] = useState(JSON.stringify(args));

  return (
    <div>
      <h3>Hooks args:</h3>
      <pre>{JSON.stringify(args)}</pre>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          updateArgs(JSON.parse(argsInput));
        }}
      >
        <textarea value={argsInput} onChange={(e) => updateArgsInput(e.target.value)} />
        <br />
        <button type="submit">Change</button>
        <button type="button" onClick={() => resetArgs()}>
          Reset all
        </button>
      </form>
    </div>
  );
};

export default {
  title: 'Core/Args',
  decorators: [
    (story) => {
      const [args, updateArgs, resetArgs] = useArgs();

      return (
        <>
          {story()}
          <ArgUpdater args={args} updateArgs={updateArgs} resetArgs={resetArgs} />
        </>
      );
    },
  ],
};

export const PassedToStory = (inputArgs) => {
  return (
    <div>
      <h3>Input args:</h3>
      <pre>{JSON.stringify(inputArgs)}</pre>
    </div>
  );
};

PassedToStory.argTypes = { name: { defaultValue: 'initial', control: 'text' } };

PassedToStory.propTypes = {
  args: PropTypes.shape({}).isRequired,
};<commit_msg>Add stories to reproduce #11586<commit_after>import React, { useState } from 'react';
import PropTypes from 'prop-types';

import { useArgs } from '@storybook/client-api';

// eslint-disable-next-line react/prop-types
const ArgUpdater = ({ args, updateArgs, resetArgs }) => {
  const [argsInput, updateArgsInput] = useState(JSON.stringify(args));

  return (
    <div>
      <h3>Hooks args:</h3>
      <pre>{JSON.stringify(args)}</pre>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          updateArgs(JSON.parse(argsInput));
        }}
      >
        <textarea value={argsInput} onChange={(e) => updateArgsInput(e.target.value)} />
        <br />
        <button type="submit">Change</button>
        <button type="button" onClick={() => resetArgs()}>
          Reset all
        </button>
      </form>
    </div>
  );
};

export default {
  title: 'Core/Args',
  decorators: [
    (story) => {
      const [args, updateArgs, resetArgs] = useArgs();

      return (
        <>
          {story()}
          <ArgUpdater args={args} updateArgs={updateArgs} resetArgs={resetArgs} />
        </>
      );
    },
  ],
};

const Template = (args) => {
  return (
    <div>
      <h3>Input args:</h3>
      <pre>{JSON.stringify(args)}</pre>
    </div>
  );
};

export const PassedToStory = Template.bind({});

PassedToStory.argTypes = { name: { defaultValue: 'initial', control: 'text' } };

export const OtherValues = Template.bind({});

OtherValues.argTypes = { name: { control: 'text' } };

export const DifferentSet = Template.bind({});
DifferentSet.args = {
  foo: 'bar',
  bar: 2,
};
{'fraction_non_alphanumeric': 0.17695338148391332, 'fraction_numerical': 0.004596191726854892, 'mean_word_length': 2.6403823178016728, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 61, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4889231', 'n_tokens_mistral': 989, 'n_tokens_neox': 989, 'n_words': 191}