feat : added features to combobox , select , radio, tag , switch and slider (#33)

* updated antd select to radix select

* changed switch from antd to radix

* changed switch in formBuilder

* added story for switch and fixed props for select in FormBuilder

* Changed antd radio to radix

* chore: changed storybook for Radio

* fix: updated yarn lock to fix rollup plugin version issue

* feat: replaced antd slider with radix slider

* feat: removed antd from image

* feat: removed antd tag and created a new tag component

* feat: added a simple preview option to Image

* feat: created a new component combobox

combobox provides multi select and search features

BREAKING CHANGE: select doesn't provide multi select or search feature. if we need them, we need to
use combobox.

combobox for multiselect and search feature #31

* style: minor styling changes

* feat: added radio button feature to radio and changed combobox to hide content properly

radio button feature supports to insert custom components into radio group and combobox will now
hides the content using ellipsis when the screen is minimized.

* feat: added tooltip for slider and changed tag to hide the content using ellipsis when required

* fix: fixed select so that it will be rendered correctly even if no initial value is given

* chore: added styles to radio and switch

* feat: added enable tag feature for combobox in form and fixed placeholder content hiding

Co-authored-by: Koteswarudu Akula <koteswaruduakula@koteswarudu-a.optilink>

Author: akula-koteswarudu

packages/apsara-ui/src/Combobox/Combobox.stories.tsx

@@ -9,7 +9,7 @@ export default {
 };
 
 const options = [
-    { value: "2", label: "Lamborghini Diablo" },
+    { value: "2", label: "pilotdata-integration:bq_smoke_test_json_insert_all_dataset - Bigquery Dataset" },
     { value: "3", label: "Ford Raptor" },
     { value: "4", label: "Ferrari Testarossa" },
     { value: "5", label: "Porsche 911 Carrera" },

packages/apsara-ui/src/Combobox/Combobox.styles.tsx

@@ -22,6 +22,11 @@ export const DropdownStyle = css`
         position: absolute;
     }
 
+    .rc-select-item-option-content {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
     .rc-select-item {
         padding: 5px;
         padding-left: 10px;
@@ -133,10 +138,25 @@ export const DropdownStyle = css`
             transform: scaleY(0);
         }
     }
+
+    .rc-select-disabled .rc-select-selector {
+        background-color: rgb(245, 245, 245);
+        &:hover {
+            border-color: ${({ theme }) => theme?.combobox?.border};
+            cursor: not-allowed;
+        }
+    }
+
+    .rc-select-disabled .rc-select-selection-search-input {
+        &:hover {
+            cursor: not-allowed;
+        }
+    }
 `;
 
 export const StyledMultiSelect = styled(Select)<{ showInputIcon?: boolean }>`
     .rc-select-selection-search-input {
+        box-sizing: border-box;
         width: auto;
         border: none;
         font-size: 100%;
@@ -166,7 +186,7 @@ export const StyledMultiSelect = styled(Select)<{ showInputIcon?: boolean }>`
         background: transparent;
         border: 1px solid ${({ theme }) => theme?.combobox?.border};
         padding-right: 45px;
-        overflow-x: hidden;
+        overflow: hidden;
 
         &:hover {
             border-color: ${({ theme }) => theme?.combobox?.focus};
@@ -175,12 +195,17 @@ export const StyledMultiSelect = styled(Select)<{ showInputIcon?: boolean }>`
     }
 
     .rc-select-selection-placeholder {
+        box-sizing: border-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
         position: absolute;
         top: 0;
         left: 0px;
+        padding-top: 3.5px;
         padding-left: 10px;
-        display: flex;
-        align-items: center;
+        padding-right: 40px;
         width: 100%;
         height: 100%;
         color: ${({ theme }) => theme?.combobox?.placeholder};
@@ -199,13 +224,26 @@ export const StyledMultiSelect = styled(Select)<{ showInputIcon?: boolean }>`
         text-overflow: ellipsis;
     }
 
+    .rc-select-selection-overflow-item {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .rc-select-selection-overflow-item-suffix {
+        overflow: visible;
+    }
+
     .rc-select-selection-search-mirror {
         display: none;
     }
 
     .rc-select-selection-item {
         box-sizing: border-box;
         margin-left: 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
 
         ${({ mode, theme }) =>
             mode == "multiple" || mode == "tags"
@@ -227,6 +265,12 @@ export const StyledMultiSelect = styled(Select)<{ showInputIcon?: boolean }>`
                   `}
     }
 
+    .rc-select-selection-item-content {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
     .rc-select-selection-item-remove-icon {
         margin-left: 3px;
         font-size: 17px;

packages/apsara-ui/src/Combobox/Combobox.tsx

@@ -21,9 +21,6 @@ const Combobox = ({
     onSearch,
     onSelect,
     onDeselect,
-    defaultValue,
-    optionFilterProp,
-    filterOption,
     allowClear = true,
     showSearch = true,
     showArrow = true,
@@ -67,6 +64,7 @@ const Combobox = ({
 
     return (
         <StyledMultiSelect
+            notFoundContent={notFoundContent}
             {...props}
             showInputIcon={showInputIcon || !allowClear}
             showSearch={showSearch}
@@ -83,7 +81,6 @@ const Combobox = ({
             onSelect={onValueSelect}
             onDeselect={onValueDeselect}
             options={options}
-            notFoundContent={notFoundContent}
             animation="slide"
         >
             {props.children}

packages/apsara-ui/src/FormBuilder/FormBuilderField.tsx

@@ -1,7 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
-import React, { useMemo } from "react";
-import * as R from "ramda";
+import React from "react";
 import { InputNumber, DatePicker } from "antd";
 import Moment from "moment";
 import Input from "../Input";
@@ -11,9 +10,9 @@ import Checkbox from "../Checkbox";
 import Switch from "../Switch";
 import Combobox from "../Combobox";
 import { getStringValue } from "./helper";
+import Tag from "../Tag";
 
 const { RangePicker } = DatePicker;
-const { Option } = Select;
 export type Widget =
     | "range"
     | "radio"
@@ -50,7 +49,7 @@ const FormBuilderField = ({
     widgetType,
     component = null,
     rows,
-    enableTag,
+    enableTag, // eslint-disable-line
     ...props
 }: FormBuilderFieldProps) => {
     if (widget === "range") return <InputNumber {...props} />;
@@ -66,7 +65,24 @@ const FormBuilderField = ({
         return <Select {...props} />;
     }
     if (widget === "combobox") {
-        return <Combobox {...props} />;
+        return (
+            <React.Fragment>
+                <Combobox {...props} />
+                {enableTag &&
+                    props.value &&
+                    (props.value instanceof Array ? (
+                        props.value.map((singleVal) => (
+                            <Tag type="round" color="rgb(232, 239, 253)" key={singleVal} style={{ marginTop: "4px" }}>
+                                {singleVal}
+                            </Tag>
+                        ))
+                    ) : (
+                        <Tag type="round" color="rgb(232, 239, 253)" style={{ marginTop: "8px" }}>
+                            {props.value}
+                        </Tag>
+                    ))}
+            </React.Fragment>
+        );
     }
     if (widget === "textarea") {
         return <Input.TextArea size="large" rows={rows} {...props} />;

packages/apsara-ui/src/Radio/Radio.styles.tsx

@@ -8,9 +8,11 @@ export const StyledRadioItem = styled(RadioGroupPrimitive.Item)`
     height: 17px;
     border-radius: 100%;
     border: 1px solid ${({ theme }) => theme?.radio?.border};
+    transition: border-color 0.5s;
     &:hover {
         background-color: ${({ theme }) => theme?.radio?.hover};
         border-color: ${({ theme }) => theme?.radio?.focus};
+        border-color: ${({ theme }) => theme?.radio?.focus};
     }
 
     &[data-disabled] {
@@ -61,3 +63,29 @@ export const Flex = styled("div")`
     margin: 8px ${({ dir }) => (dir === "rtl" ? "0px" : "8px")};
     align-items: center;
 `;
+
+export const StyledRadioButton = styled("button")`
+    box-sizing: border-box;
+    background-color: transparent;
+    border: 1px solid #cacaca;
+    color: black;
+    transition: color 0.5s;
+    margin: 5px;
+    padding-right: 15px;
+    padding-left: 15px;
+    padding-bottom: 5px;
+    padding-top: 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &[data-state="checked"] {
+        border-color: #4291ee;
+        color: #4291ee;
+    }
+    &:focus {
+        border-color: #4291ee;
+        color: #4291ee;
+    }
+`;

packages/apsara-ui/src/Radio/Radio.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { RadioGroup, StyledRadioItem, StyledIndicator, Label, Flex } from "./Radio.styles";
+import { RadioGroup, StyledRadioItem, StyledIndicator, Label, Flex, StyledRadioButton } from "./Radio.styles";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 
 type RadioItem = {
     label?: string;
@@ -8,6 +9,14 @@ type RadioItem = {
     required?: boolean;
 };
 
+type RadioButtonType = {
+    label?: string;
+    value: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+};
+
 type styleProps = {
     className?: string;
     style?: React.CSSProperties;
@@ -16,7 +25,7 @@ type styleProps = {
 export type RadioProps = {
     defaultValue?: string;
     value?: string;
-    items: RadioItem[];
+    items?: RadioItem[];
     onChange?: (value: string) => void;
     name?: string;
     required?: boolean;
@@ -25,6 +34,7 @@ export type RadioProps = {
     className?: string;
     style?: React.CSSProperties;
     itemStyle?: styleProps;
+    children?: React.ReactNode;
 };
 
 const Radio = ({ defaultValue, value, items, onChange, required, orientation, dir, ...props }: RadioProps) => {
@@ -40,24 +50,42 @@ const Radio = ({ defaultValue, value, items, onChange, required, orientation, di
             style={props.style}
             aria-label="View density"
         >
-            {items.map((item, i) => (
-                <Flex dir={dir} key={i}>
-                    <StyledRadioItem
-                        value={item.value}
-                        disabled={item.disabled}
-                        required={item.required}
-                        {...props.itemStyle}
-                        id={i.toString()}
-                    >
-                        <StyledIndicator />
-                    </StyledRadioItem>
-                    <Label dir={dir} htmlFor={i.toString()}>
-                        {item.label}
-                    </Label>
-                </Flex>
-            ))}
+            {items &&
+                items.map((item, i) => (
+                    <Flex dir={dir} key={item.value}>
+                        <StyledRadioItem
+                            value={item.value}
+                            disabled={item.disabled}
+                            required={item.required}
+                            {...props.itemStyle}
+                            id={i.toString()}
+                        >
+                            <StyledIndicator />
+                        </StyledRadioItem>
+                        <Label dir={dir} htmlFor={i.toString()}>
+                            {item.label}
+                        </Label>
+                    </Flex>
+                ))}
+            {!items && props.children}
         </RadioGroup>
     );
 };
 
+const RadioButton = ({ label, value, children, ...props }: RadioButtonType) => {
+    return (
+        <RadioGroupPrimitive.Item value={value} asChild={true}>
+            <StyledRadioButton {...props}>
+                {children}
+                {label}
+            </StyledRadioButton>
+        </RadioGroupPrimitive.Item>
+    );
+};
+
+Radio.Root = RadioGroup;
+Radio.Item = StyledRadioItem;
+Radio.Indicator = StyledIndicator;
+Radio.Button = RadioButton;
+
 export default Radio;

packages/apsara-ui/src/Select/Select.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
 import {
     SelectRoot,
@@ -50,7 +50,7 @@ export type SelectProps = {
 };
 
 const Select = ({
-    defaultValue,
+    defaultValue = "",
     value,
     name,
     onChange,
@@ -61,12 +61,28 @@ const Select = ({
     ...props
 }: SelectProps) => {
     const lastInd = groups.length - 1;
+    const [showDefaultItem, setShowDefaultItem] = useState(true);
+
+    useEffect(() => {
+        const val = value ? value : defaultValue;
+        let bool = true;
+        groups.forEach((group) => {
+            group.items.forEach((item) => {
+                bool = item.value != val ? (bool ? true : false) : false;
+            });
+        });
+        setShowDefaultItem(bool);
+    }, []);
+
     return (
         <SelectRoot
             defaultValue={defaultValue}
             value={value}
             name={name}
-            onValueChange={onChange}
+            onValueChange={(value) => {
+                if (value != "") setShowDefaultItem(false);
+                onChange && onChange(value);
+            }}
             defaultOpen={defaultOpen}
             open={open}
             onOpenChange={onOpenChange}
@@ -82,6 +98,14 @@ const Select = ({
                     <ChevronUpIcon />
                 </SelectScrollUpButton>
                 <SelectViewport>
+                    {showDefaultItem && (
+                        <SelectItem value={value || defaultValue}>
+                            <SelectItemText>{value || defaultValue}</SelectItemText>
+                            <SelectItemIndicator>
+                                <CheckIcon />
+                            </SelectItemIndicator>
+                        </SelectItem>
+                    )}
                     {groups.map((group: Group, i) => (
                         <div key={i}>
                             <SelectGroup>