[Storybook] Add stories for more components (form components) - Part 1 (

#7781)

packages/eui/.storybook/manager.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { addons } from '@storybook/manager-api';
+
+// filter out stories based on tags that should not
+// be shown in the Storybook sidebar menu
+addons.setConfig({
+  sidebar: {
+    filters: {
+      patterns: (item) => {
+        // Storybook only accepts string literals in the tags
+        // handling this centrally via a map doesn't work :(
+        return !item.tags?.includes('vrt-only');
+      },
+    },
+  },
+});

packages/eui/package.json

@@ -118,6 +118,7 @@
     "@storybook/addon-links": "^8.0.5",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/blocks": "^8.0.5",
+    "@storybook/manager-api": "^8.1.2",
     "@storybook/react": "^8.0.5",
     "@storybook/react-webpack5": "^8.0.5",
     "@storybook/test": "^8.0.5",

packages/eui/src/components/form/checkbox/checkbox.stories.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  disableStorybookControls,
+  enableFunctionToggleControls,
+} from '../../../../.storybook/utils';
+import { EuiCheckbox, EuiCheckboxProps, TYPES } from './checkbox';
+
+const meta: Meta<EuiCheckboxProps> = {
+  title: 'Forms/EuiCheckbox',
+  component: EuiCheckbox,
+  argTypes: {
+    label: { control: 'text' },
+    type: {
+      control: 'radio',
+      options: [undefined, ...TYPES],
+    },
+  },
+  args: {
+    checked: false,
+    compressed: false,
+    disabled: false,
+    indeterminate: false,
+    // set up for easier testing/QA
+    id: '',
+  },
+};
+enableFunctionToggleControls(meta, ['onChange']);
+disableStorybookControls(meta, ['inputRef']);
+
+export default meta;
+type Story = StoryObj<EuiCheckboxProps>;
+
+export const Playground: Story = {
+  args: {
+    id: 'checkbox',
+    label: 'Checkbox label',
+  },
+};

packages/eui/src/components/form/checkbox/checkbox_group.stories.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { enableFunctionToggleControls } from '../../../../.storybook/utils';
+import { EuiCheckboxGroup, EuiCheckboxGroupProps } from './checkbox_group';
+
+const meta: Meta<EuiCheckboxGroupProps> = {
+  title: 'Forms/EuiCheckboxGroup',
+  component: EuiCheckboxGroup,
+  args: {
+    disabled: false,
+    compressed: false,
+  },
+};
+enableFunctionToggleControls(meta, ['onChange']);
+
+export default meta;
+type Story = StoryObj<EuiCheckboxGroupProps>;
+
+export const Playground: Story = {
+  args: {
+    options: [
+      { id: 'checkbox-1', label: 'Checkbox 1' },
+      { id: 'checkbox-2', label: 'Checkbox 2' },
+      { id: 'checkbox-3', label: 'Checkbox 3', disabled: true },
+    ],
+    idToSelectedMap: {
+      'checkbox-2': true,
+    },
+    // set up for easier testing/QA
+    legend: {
+      children: 'Group label',
+      compressed: false,
+      display: 'visible',
+    },
+  },
+};

packages/eui/src/components/form/field_number/field_number.stories.tsx

@@ -35,6 +35,8 @@ const meta: Meta<EuiFieldNumberProps> = {
     controlOnly: false,
     // Added for easier testing
     placeholder: '0',
+    id: '',
+    name: '',
   },
 };
 

packages/eui/src/components/form/field_password/field_password.stories.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  disableStorybookControls,
+  enableFunctionToggleControls,
+} from '../../../../.storybook/utils';
+import { EuiIcon } from '../../icon';
+import { EuiFieldPassword, EuiFieldPasswordProps } from './field_password';
+
+const meta: Meta<EuiFieldPasswordProps> = {
+  title: 'Forms/EuiFieldPassword',
+  component: EuiFieldPassword,
+  argTypes: {
+    append: {
+      control: 'radio',
+      options: [undefined, 'icon', 'text'],
+      mapping: {
+        icon: <EuiIcon type="faceHappy" />,
+        text: 'Appended',
+        undefined: undefined,
+      },
+    },
+    prepend: {
+      control: 'radio',
+      options: [undefined, 'icon', 'text'],
+      mapping: {
+        icon: <EuiIcon type="faceHappy" />,
+        text: 'Prepended',
+        undefined: undefined,
+      },
+    },
+  },
+  args: {
+    type: 'password',
+    fullWidth: false,
+    isLoading: false,
+    compressed: false,
+    // set up for easier testing/QA
+    isInvalid: false,
+    placeholder: '',
+    id: '',
+    name: '',
+  },
+};
+enableFunctionToggleControls(meta, ['onChange']);
+disableStorybookControls(meta, ['inputRef']);
+
+export default meta;
+type Story = StoryObj<EuiFieldPasswordProps>;
+
+export const Playground: Story = {};

packages/eui/src/components/form/field_search/field_search.stories.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  disableStorybookControls,
+  enableFunctionToggleControls,
+} from '../../../../.storybook/utils';
+import { EuiIcon } from '../../icon';
+import { EuiFieldSearch, EuiFieldSearchProps } from './field_search';
+
+const meta: Meta<EuiFieldSearchProps> = {
+  title: 'Forms/EuiFieldSearch',
+  component: EuiFieldSearch,
+  argTypes: {
+    append: {
+      control: 'radio',
+      options: [undefined, 'icon', 'text'],
+      mapping: {
+        icon: <EuiIcon type="faceHappy" />,
+        text: 'Appended',
+        undefined: undefined,
+      },
+    },
+    prepend: {
+      control: 'radio',
+      options: [undefined, 'icon', 'text'],
+      mapping: {
+        icon: <EuiIcon type="faceHappy" />,
+        text: 'Prepended',
+        undefined: undefined,
+      },
+    },
+  },
+  args: {
+    isLoading: false,
+    incremental: false,
+    compressed: false,
+    isClearable: true,
+    // set up for easier testing/QA
+    fullWidth: false,
+    isInvalid: false,
+    id: '',
+    name: '',
+    placeholder: '',
+  },
+};
+// adding onChange for visibility
+enableFunctionToggleControls(meta, ['onSearch', 'onChange']);
+disableStorybookControls(meta, ['inputRef']);
+
+export default meta;
+type Story = StoryObj<EuiFieldSearchProps>;
+
+export const Playground: Story = {
+  args: {},
+};

packages/eui/src/components/form/field_text/field_text.stories.tsx

@@ -22,6 +22,7 @@ const meta: Meta<EuiFieldTextProps> = {
     icon: { control: 'text' },
     prepend: { control: 'text' },
     append: { control: 'text' },
+    value: { control: 'text' },
   },
   args: {
     // Component defaults
@@ -34,6 +35,8 @@ const meta: Meta<EuiFieldTextProps> = {
     controlOnly: false,
     // Added for easier testing
     placeholder: 'EuiFieldText',
+    id: '',
+    name: '',
   },
 };
 

packages/eui/src/components/form/radio/radio.stories.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { enableFunctionToggleControls } from '../../../../.storybook/utils';
+import { EuiRadio, EuiRadioProps } from './radio';
+
+const meta: Meta<EuiRadioProps> = {
+  title: 'Forms/EuiRadio',
+  component: EuiRadio,
+  argTypes: {
+    label: { control: 'text' },
+  },
+  args: {
+    checked: false,
+    compressed: false,
+    disabled: false,
+    // set up for easier testing/QA
+    id: '',
+    name: '',
+  },
+};
+enableFunctionToggleControls(meta, ['onChange']);
+
+export default meta;
+type Story = StoryObj<EuiRadioProps>;
+
+export const Playground: Story = {
+  args: {
+    id: 'radio',
+    label: 'Radio label',
+    value: 'radio-1',
+  },
+};

packages/eui/src/components/form/radio/radio_group.stories.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { enableFunctionToggleControls } from '../../../../.storybook/utils';
+import { EuiRadioGroup, EuiRadioGroupProps } from './radio_group';
+
+const meta: Meta<EuiRadioGroupProps> = {
+  title: 'Forms/EuiRadioGroup',
+  component: EuiRadioGroup,
+  args: {
+    compressed: false,
+    disabled: false,
+  },
+};
+enableFunctionToggleControls(meta, ['onChange']);
+
+export default meta;
+type Story = StoryObj<EuiRadioGroupProps>;
+
+export const Playground: Story = {
+  args: {
+    options: [
+      { id: 'radio-1', label: 'Radio 1', value: 'radio-1' },
+      { id: 'radio-2', label: 'Radio 2', value: 'radio-2' },
+      { id: 'radio-3', label: 'Radio 3', value: 'radio-3', disabled: true },
+    ],
+    idSelected: 'radio-2',
+    name: 'radio-group',
+    // set up for easier testing/QA
+    legend: {
+      children: 'Group label',
+      compressed: false,
+      display: 'visible',
+    },
+  },
+};