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

platform/ui/src/components/LegacyButtonGroup/LegacyButtonGroup.tsx

@@ -0,0 +1,150 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const baseButtonClass = 'border outline-none';
+const roundedClasses = {
+  vertical: {
+    none: '',
+    small: 'first:rounded-t last:rounded-b',
+    medium: 'first:rounded-t-md last:rounded-b-md',
+    large: 'first:rounded-t-lg last:rounded-b-lg',
+    full: 'first:rounded-t-full last:rounded-b-full',
+  },
+  horizontal: {
+    none: '',
+    small: 'first:rounded-l last:rounded-r',
+    medium: 'first:rounded-l-md last:rounded-r-md',
+    large: 'first:rounded-l-lg last:rounded-r-lg',
+    full: 'first:rounded-l-full last:rounded-r-full',
+  },
+};
+
+const borderClasses = {
+  text: {
+    vertical: 'border-t-0 border-l-0 border-r-0 last:border-b-0',
+    horizontal: 'border-l-0 border-t-0 border-b-0 last:border-r-0',
+  },
+  outlined: {
+    vertical: 'border border-b-0 last:border-b',
+    horizontal: 'border border-r-0 last:border-r',
+  },
+  contained: {
+    vertical: 'border-t-0 border-l-0 border-r-0 last:border-b-0',
+    horizontal: 'border-l-0 border-t-0 border-b-0 last:border-r-0',
+  },
+};
+
+const variantClasses = {
+  text: {
+    default: 'border-primary-light',
+    primary: 'border-primary-main',
+    secondary: 'border-secondary-light',
+    white: 'border-white',
+    black: 'border-primary-main',
+  },
+  outlined: {
+    default: '',
+    primary: '',
+    secondary: 'border border-secondary-light',
+    white: '',
+    black: 'border-primary-main group-hover:bg-primary-main group-hover:border-black',
+  },
+  contained: {
+    default: 'border-white ',
+    primary: 'border-white ',
+    secondary: 'border-white ',
+    white: 'border-black',
+    black: 'border-primary-main',
+  },
+};
+
+const orientationClasses = {
+  vertical: 'flex-col',
+  horizontal: 'flex-row',
+};
+
+const baseDisplayClass = 'inline-flex';
+const fullWidthDisplayClass = 'flex';
+
+// css class that are applied for buttons that not the first or last
+const nonFirstLastClasses = {
+  vertical: 'border-t-0 border-b-0',
+  horizontal: 'border-l-0 last:border-r-0',
+};
+
+const LegacyButtonGroup = ({
+  children,
+  className,
+  disabled = false,
+  fullWidth = false,
+  color = 'default',
+  orientation = 'horizontal',
+  rounded = 'medium',
+  size = 'medium',
+  variant = 'outlined',
+  splitBorder = true,
+  ...other
+}) => {
+  const ref = useRef(null);
+
+  const buttonClasses = classnames(
+    baseButtonClass,
+    borderClasses[variant] && borderClasses[variant][orientation],
+    variantClasses[variant] && variantClasses[variant][color],
+    roundedClasses[orientation] && roundedClasses[orientation][rounded]
+  );
+
+  return (
+    <div
+      role="group"
+      className={classnames(
+        'group',
+        className,
+        orientationClasses[orientation],
+        fullWidth ? fullWidthDisplayClass : baseDisplayClass
+      )}
+      ref={ref}
+      {...other}
+    >
+      {React.Children.map(children, (child, index) => {
+        const isFirst = index === 0;
+        const isLast = index === React.Children.count(children) - 1;
+        const isNotFirstOrLast = !isFirst && !isLast;
+
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+
+        return React.cloneElement(child, {
+          className: classnames(
+            buttonClasses,
+            child.props.className,
+            !splitBorder && isNotFirstOrLast && nonFirstLastClasses[orientation],
+            !splitBorder && isLast && 'last:border-l-0'
+          ),
+          disabled: child.props.disabled || disabled,
+          color: child.props.color || color,
+          fullWidth,
+          rounded: 'none',
+          size: child.props.size || size,
+          variant: child.props.variant || variant,
+        });
+      })}
+    </div>
+  );
+};
+
+LegacyButtonGroup.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'white', 'black']),
+  disabled: PropTypes.bool,
+  fullWidth: PropTypes.bool,
+  orientation: PropTypes.oneOf(['vertical', 'horizontal']),
+  rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'inherit']),
+  variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
+};
+
+export default LegacyButtonGroup;

platform/ui/src/components/LegacyButtonGroup/__stories__/legacyButtonGroup.stories.mdx

@@ -0,0 +1,102 @@
+import { LegacyButtonGroup, LegacyButton } from '../../../components';
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+import {
+  createComponentTemplate,
+  createStoryMetaSettings,
+} from '../../../storybook/functions/create-component-story';
+
+export const argTypes = {
+  component: LegacyButtonGroup,
+  title: 'Components/LegacyButtonGroup',
+};
+
+<Meta
+  title="Components/LegacyButtonGroup"
+  component={LegacyButtonGroup}
+/>
+
+export const LegacybuttonGroupTemplate = args => (
+  <LegacyButtonGroup {...args}>
+    <LegacyButton>One</LegacyButton>
+    <LegacyButton>Two</LegacyButton>
+    <LegacyButton>Three</LegacyButton>
+  </LegacyButtonGroup>
+);
+
+<Heading
+  title="LegacyButtonGroup"
+  componentRelativePath="LegacyButtonGroup/LegacyButtonGroup.tsx"
+/>
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+- [Contribute](#contribute)
+
+## Overview
+
+LegacyButtonGroup is a container for a group of buttons.
+
+<Canvas>
+  <Story name="Overview">{LegacybuttonGroupTemplate.bind({})}</Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={LegacyButtonGroup} />
+
+## Usage
+
+### Variants
+
+There are three different variants of LegacyButtonGroup:
+
+<Canvas>
+  <Story name="Variants">
+    <div className="flex flex-col space-y-2">
+      <LegacyButtonGroup variant="text">
+        <LegacyButton>Text</LegacyButton>
+        <LegacyButton>Text</LegacyButton>
+        <LegacyButton>Text</LegacyButton>
+      </LegacyButtonGroup>
+      <LegacyButtonGroup variant="outlined">
+        <LegacyButton>Outlined</LegacyButton>
+        <LegacyButton>Outlined</LegacyButton>
+        <LegacyButton>Outlined</LegacyButton>
+      </LegacyButtonGroup>
+      <LegacyButtonGroup variant="contained">
+        <LegacyButton>Contained</LegacyButton>
+        <LegacyButton>Contained</LegacyButton>
+        <LegacyButton>Contained</LegacyButton>
+      </LegacyButtonGroup>
+    </div>
+  </Story>
+</Canvas>
+
+### Orientation
+
+You can change the orientation of the buttons in the group by setting the `orientation` prop.
+
+<Canvas>
+  <Story name="Orientation Horizontal">
+    <LegacyButtonGroup orientation="horizontal">
+      <LegacyButton>Horizontal-1</LegacyButton>
+      <LegacyButton>Horizontal-2</LegacyButton>
+    </LegacyButtonGroup>
+  </Story>
+</Canvas>
+
+Or vertical
+
+<Canvas>
+  <Story name="Orientation Vertical">
+    <LegacyButtonGroup orientation="vertical">
+      <LegacyButton>Vertical-1</LegacyButton>
+      <LegacyButton>Vertical-2</LegacyButton>
+    </LegacyButtonGroup>
+  </Story>
+</Canvas>
+
+## Contribute
+
+<Footer componentRelativePath="LEgacyButtonGroup/__stories__/legacyButtonGroup.stories.mdx" />

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

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