feat(segmentation mode): Add create, and export SEG with Brushes (#3632)

platform/ui/src/components/PanelSection/PanelSection.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { Icon } from '@ohif/ui';
+import PropTypes from 'prop-types';
+
+const PanelSection = ({ title, children, actionIcons = [] }) => {
+  const [areChildrenVisible, setChildrenVisible] = useState(true);
+
+  const handleHeaderClick = () => {
+    setChildrenVisible(!areChildrenVisible);
+  };
+
+  return (
+    <>
+      <div
+        className="bg-secondary-dark mt-[2px] flex h-7 cursor-pointer select-none items-center justify-between rounded-[4px] pl-2.5 text-[13px]"
+        onClick={handleHeaderClick}
+      >
+        <div className="text-aqua-pale">{title}</div>
+        <div className="flex items-center space-x-1">
+          {actionIcons.map((icon, index) => (
+            <Icon
+              key={index}
+              name={icon.name}
+              onClick={e => {
+                e.stopPropagation();
+                if (!areChildrenVisible) {
+                  setChildrenVisible(true);
+                }
+                icon.onClick();
+              }}
+            />
+          ))}
+          <div className="grid h-[28px] w-[28px] place-items-center">
+            <Icon name={areChildrenVisible ? 'chevron-down-new' : 'chevron-left-new'} />
+          </div>
+        </div>
+      </div>
+      {areChildrenVisible && (
+        <>
+          <div className="h-[2px] bg-black"></div>
+          <div className="bg-primary-dark rounded-b-[4px]">{children}</div>
+        </>
+      )}
+    </>
+  );
+};
+
+PanelSection.defaultProps = {};
+
+PanelSection.propTypes = {
+  title: PropTypes.string,
+  children: PropTypes.node,
+  actionIcons: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      onClick: PropTypes.func,
+    })
+  ),
+};
+
+export default PanelSection;

platform/ui/src/components/PanelSection/__stories__/PanelSection.stories.mdx

@@ -0,0 +1,71 @@
+import { PanelSection, SidePanel } from '../../../components';
+
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
+
+export const argTypes = {
+  component: PanelSection,
+  title: 'Components/PanelSection',
+};
+
+<Meta
+  title="Components/PanelSection"
+  component={PanelSection}
+/>
+
+export const PanelSectionTemplate = args => (
+  <div className="w-96">
+    <SidePanel
+      side="left"
+      defaultComponentOpen="Example"
+      tabs={[
+        {
+          id: 'tab1',
+          name: 'tab1',
+          label: 'Tab 1',
+          iconName: 'group-layers',
+          iconLabel: 'group-layers',
+          content: () => (
+            <PanelSection {...args}>
+              <div className="text-white">{'this is children'}</div>
+            </PanelSection>
+          ),
+        },
+      ]}
+    />
+  </div>
+);
+
+<Heading
+  title="PanelSection"
+  componentRelativePath="PanelSection/PanelSection.tsx"
+/>
+
+- [Overview](#overview)
+- [Props](#props)
+- [Contribute](#contribute)
+
+## Overview
+
+PanelSection is a component that renders the PanelSections.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      title: 'Segmentation Tools',
+    }}
+  >
+    {PanelSectionTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={PanelSection} />
+
+## Usage
+
+## Contribute
+
+<Footer componentRelativePath="PanelSection/__stories__/PanelSection.stories.mdx" />

platform/ui/src/components/PanelSection/index.js

@@ -0,0 +1,2 @@
+import PanelSection from './PanelSection';
+export default PanelSection;