docs(CodeEditor): add configuration example from OCP

Author: logonoff

packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md

@@ -9,6 +9,10 @@ Note: Code editor lives in its own package at [@patternfly/react-code-editor](ht
 
 import { Fragment, useState } from 'react';
 import { CodeEditor, CodeEditorControl, Language } from '@patternfly/react-code-editor';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HashtagIcon from '@patternfly/react-icons/dist/esm/icons/hashtag-icon';
+import MapIcon from '@patternfly/react-icons/dist/esm/icons/map-icon';
+import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 ## Examples
@@ -50,3 +54,9 @@ These examples below are the shortcuts that we recommend describing in the popov
 ```ts file="CodeEditorCustomControl.tsx"
 
 ```
+
+### With configuration modal
+
+```ts file="CodeEditorConfigurationModal.tsx"
+
+```

packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorConfigurationModal.tsx

@@ -0,0 +1,157 @@
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import MapIcon from '@patternfly/react-icons/dist/esm/icons/map-icon';
+import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon';
+import HashtagIcon from '@patternfly/react-icons/dist/esm/icons/hashtag-icon';
+import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
+import {
+  Content,
+  Flex,
+  FlexItem,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  Split,
+  SplitItem,
+  Switch,
+  SwitchProps
+} from '@patternfly/react-core';
+import { useState } from 'react';
+
+interface ConfigModalItemProps {
+  Icon?: React.ComponentType;
+  description: string;
+  isChecked?: SwitchProps['isChecked'];
+  onChange?: SwitchProps['onChange'];
+  title: string;
+  labels?: {
+    enabled: string;
+    disabled: string;
+  };
+}
+
+const ConfigModalItem: React.FunctionComponent<ConfigModalItemProps> = ({
+  Icon = CogIcon,
+  description,
+  isChecked = false,
+  labels = { enabled: 'Enabled', disabled: 'Disabled' },
+  onChange,
+  title
+}) => (
+  <Split hasGutter>
+    <SplitItem isFilled>
+      <Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsMd' }}>
+        <FlexItem>
+          <Icon />
+        </FlexItem>
+        <FlexItem>
+          <strong className="pf-v6-u-font-weight-bold">{title}</strong>
+          <Content component="p">{description}</Content>
+        </FlexItem>
+      </Flex>
+    </SplitItem>
+    <SplitItem>
+      <Switch
+        aria-label={title}
+        id={title}
+        isChecked={isChecked}
+        isReversed
+        label={isChecked ? labels.enabled : labels.disabled}
+        onChange={onChange}
+      />
+    </SplitItem>
+  </Split>
+);
+
+interface ConfigModalControlProps {
+  controls: ConfigModalItemProps[];
+  modalTitle?: string;
+  ouiaId?: string;
+}
+
+const ConfigModalControl: React.FunctionComponent<ConfigModalControlProps> = ({
+  controls,
+  modalTitle = 'Editor settings',
+  ouiaId = 'CodeEditorConfigurationModal'
+}) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <>
+      <Modal
+        aria-describedby={`${ouiaId}-body`}
+        aria-labelledby={`${ouiaId}-title`}
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(!isModalOpen)}
+        ouiaId={ouiaId}
+        variant="small"
+      >
+        <ModalHeader title={modalTitle} labelId={`${ouiaId}-title`} />
+        <ModalBody id={`${ouiaId}-body`}>
+          <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
+            {controls.map((control) => (
+              <ConfigModalItem key={control.title} {...control} />
+            ))}
+          </Flex>
+        </ModalBody>
+      </Modal>
+      <CodeEditorControl
+        aria-label={modalTitle}
+        icon={<CogIcon />}
+        onClick={() => setIsModalOpen(true)}
+        tooltipProps={{ content: modalTitle }}
+      />
+    </>
+  );
+};
+
+export const CodeEditorConfigurationModal: React.FunctionComponent = () => {
+  const [code, setCode] = useState('Some example content');
+
+  const [isMinimapVisible, setIsMinimapVisible] = useState(true);
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
+  const [isLineNumbersVisible, setIsLineNumbersVisible] = useState(true);
+
+  const onChange = (code: string) => {
+    setCode(code);
+  };
+
+  const customControl = (
+    <ConfigModalControl
+      controls={[
+        {
+          title: 'Minimap',
+          description: 'Show a preview of the full code on the side of the editor',
+          isChecked: isMinimapVisible,
+          onChange: (_e, checked) => setIsMinimapVisible(checked),
+          Icon: MapIcon
+        },
+        {
+          title: 'Dark theme',
+          description: 'Switch the editor to a dark color theme',
+          isChecked: isDarkTheme,
+          onChange: (_e, checked) => setIsDarkTheme(checked),
+          Icon: MoonIcon
+        },
+        {
+          title: 'Line numbers',
+          description: 'Show line numbers to the left of each line of code',
+          isChecked: isLineNumbersVisible,
+          onChange: (_e, checked) => setIsLineNumbersVisible(checked),
+          Icon: HashtagIcon
+        }
+      ]}
+    />
+  );
+
+  return (
+    <CodeEditor
+      code={code}
+      customControls={customControl}
+      height="400px"
+      isDarkTheme={isDarkTheme}
+      isLineNumbersVisible={isLineNumbersVisible}
+      isMinimapVisible={isMinimapVisible}
+      onChange={onChange}
+    />
+  );
+};