refactor(app): move react components to react codebase [EE-3179] (#6971)

app/react/components/form-components/FormSection/FormSection.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta, Story } from '@storybook/react';
+
+import { FormSection } from './FormSection';
+
+export default {
+  component: FormSection,
+  title: 'Components/Form/FormSection',
+} as Meta;
+
+interface Args {
+  title: string;
+  content: string;
+}
+
+function Template({ title, content }: Args) {
+  return <FormSection title={title}>{content}</FormSection>;
+}
+
+const exampleContent = `Content
+  
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas turpis magna,
+   vel pretium dui rhoncus nec. Maecenas felis purus, consectetur non porta sit amet,
+    auctor sed sapien. Aliquam eu nunc felis. Pellentesque pulvinar velit id quam pellentesque,
+     nec imperdiet dui finibus. In blandit augue nibh, nec tincidunt nisi porttitor quis.
+      Nullam nec nibh maximus, consequat quam sed, dapibus purus. Donec facilisis commodo mi, in commodo augue molestie sed.
+  `;
+
+export const Example: Story<Args> = Template.bind({});
+Example.args = {
+  title: 'title',
+  content: exampleContent,
+};
+
+export function FoldableSection({
+  title = 'title',
+  content = exampleContent,
+}: Args) {
+  return (
+    <FormSection title={title} isFoldable>
+      {content}
+    </FormSection>
+  );
+}

app/react/components/form-components/FormSection/FormSection.tsx

@@ -0,0 +1,40 @@
+import { PropsWithChildren, useState } from 'react';
+
+import { FormSectionTitle } from '../FormSectionTitle';
+
+interface Props {
+  title: string;
+  isFoldable?: boolean;
+}
+
+export function FormSection({
+  title,
+  children,
+  isFoldable = false,
+}: PropsWithChildren<Props>) {
+  const [isExpanded, setIsExpanded] = useState(!isFoldable);
+
+  return (
+    <>
+      <FormSectionTitle htmlFor={isFoldable ? `foldingButton${title}` : ''}>
+        {isFoldable && (
+          <button
+            id={`foldingButton${title}`}
+            type="button"
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="border-0 mx-2 bg-transparent inline-flex justify-center items-center w-2"
+          >
+            <i
+              className={`fa fa-caret-${isExpanded ? 'down' : 'right'}`}
+              aria-hidden="true"
+            />
+          </button>
+        )}
+
+        {title}
+      </FormSectionTitle>
+
+      {isExpanded && children}
+    </>
+  );
+}

app/react/components/form-components/FormSection/index.ts

@@ -0,0 +1 @@
+export { FormSection } from './FormSection';