ui: updated usage of checkbox in all related components

platform/firecamp-platform/src/components/status-bar/items/FcAgentSelector.tsx

@@ -123,7 +123,7 @@ const AgentItem: FC<IAgentItem> = ({
       className={cx(className, 'text-base text-app-foreground flex items-start')}
     >
       <div className="pt-half" onClick={onSelect}>
-        <Checkbox isChecked={isSelected} id={name} disabled={disabled} />
+        <Checkbox checked={isSelected} id={name} disabled={disabled} classNames={{root: 'mr-2'}}/>
       </div>
       <div className="font-semibold ml-2">
         <label className="cursor-pointer" htmlFor={name}>

platform/firecamp-ui/src/components/checkbox/Checkbox.scss

@@ -8,23 +8,4 @@
     align-items: center;
     padding-bottom: 12px !important;
 }
-.fc-custom-checkbox input:checked ~ svg {
-    display: block !important;
-}
-  
-.fc-custom-checkbox>.primary input:checked ~ svg {
-    color: var(--app-primary) !important;
-}
-.fc-custom-checkbox>.secondary input:checked ~ svg {
-    color: var(--app-secondary) !important;
-}
-.fc-custom-checkbox>.primary input:checked ~ span {
-    border-color: var(--app-primary) !important;
-}
-.fc-custom-checkbox>.secondary input:checked ~ span {
-    border-color: var(--app-primary) !important;
-}
-.fc-form.with-padding label.fc-custom-checkbox>span {
-    min-width: 72px;
-  }
   

platform/firecamp-ui/src/components/checkbox/Checkbox.tsx

@@ -1,102 +1,18 @@
 import { FC } from 'react';
-import cx from 'classnames';
+import { Checkbox, ICheckbox } from '@firecamp/ui';
-import { Check } from 'lucide-react';
-import { ICheckbox } from './interfaces/Checkbox.interfaces';
 import './Checkbox.scss';
 
-const Checkbox: FC<ICheckbox> = ({
-  id = '',
-  onToggleCheck = (l, v) => {},
-  isChecked = false,
-  label = '',
-  tabIndex = 0,
-  labelPlacing = 'right',
-  className = '',
-  disabled = false,
-  note = '',
-  color = 'primary',
-  showLabel = true,
-}) => {
-  return (
-    <div className={cx(className, 'flex')} tabIndex={tabIndex}>
-      <label
-        className={cx('fc-custom-checkbox !flex items-center mb-0 ', {
-          'w-4': !showLabel,
-        })}
-        onClick={(e) => {
-          if (e) {
-            e.preventDefault();
-          }
-          if (!disabled) {
-            onToggleCheck(label, !isChecked);
-          }
-        }}
-        tabIndex={-1}
-      >
-        {showLabel && labelPlacing === 'left' ? (
-          <span className="text-sm mr-2"> {label}</span>
-        ) : (
-          ''
-        )}
-
-        <div
-          className={cx(
-            'flex justify-center items-center cursor-pointer relative',
-            color,
-            {'opacity-50 cursor-default': disabled}
-          )}
-          tabIndex={-1}
-        >
-          <input
-            type="checkbox"
-            role="checkbox"
-            className="hidden"
-            checked={isChecked}
-            readOnly={true}
-            id={id}
-          />
-          <span className={cx("border w-4 h-4",{'border-primaryColor': isChecked},{'border-app-foreground': !isChecked})}></span>
-          {isChecked ? (
-            <Check
-              size={12}
-              className="text-primaryColor absolute"
-              data-testid="check-icon"
-            />
-          ) : (
-            ''
-          )}
-        </div>
-        {showLabel && labelPlacing === 'right' ? (
-          <span className="text-sm ml-2 cursor-pointer"> {label}</span>
-        ) : (
-          ''
-        )}
-      </label>
-      {!!note ? (
-        <div className="fc-input-note">
-          <span className="icv2-info-icon" />
-          {note}
-        </div>
-      ) : (
-        ''
-      )}
-    </div>
-  );
-};
-export default Checkbox;
-
 /**
  * Checkbox in table formate (grid)
  */
 const CheckboxInGrid: FC<ICheckbox> = ({
   id = '',
   onToggleCheck = (l, v) => {},
-  isChecked = false,
+  checked = false,
   label = '',
   tabIndex = 0, //-1
   className = '',
   disabled = false,
-  note = '',
   color = 'primary',
 }) => {
   return (
@@ -108,11 +24,10 @@ const CheckboxInGrid: FC<ICheckbox> = ({
         key={`checkbox-in-grid-${id}`}
         id={id}
         onToggleCheck={onToggleCheck}
-        isChecked={isChecked}
+        checked={checked}
         tabIndex={tabIndex}
-        className={className}
+        classNames={{root: className}}
         disabled={disabled}
-        note={note}
         color={color}
       />
     </div>

platform/firecamp-ui/src/components/checkbox/Checkbox2.tsx

@@ -23,47 +23,60 @@ export interface ICheckbox extends CheckboxProps {
   showLabel?: boolean;
 }
 
-const useStyles = createStyles((theme, { primary }: Partial<ICheckbox>) => ({
+const useStyles = createStyles(
-  disabled: {
+  (theme, { primary, labelPosition }: Partial<ICheckbox>) => ({
-    opacity: '50% !important',
+    disabled: {
-    '&:checked': {
+      opacity: '50% !important',
-      borderColor: primary
+      '&:checked': {
-        ? theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 8 : 6]
+        borderColor: primary
-        : 'initial',
+          ? theme.colors[theme.primaryColor][
-    },
-    borderColor: 'initial',
-  },
-  input: {
-    borderRadius: '0px',
-    borderColor:
-      theme.colorScheme === 'dark'
-        ? theme.colors.gray[4]
-        : theme.colors.dark[5],
-    backgroundColor: 'transparent !important',
-  },
-  icon: {
-    ...(primary
-      ? {
-          color: `${
-            theme.colors[theme.primaryColor][
               theme.colorScheme === 'dark' ? 8 : 6
             ]
-          } !important`,
+          : 'initial',
-        }
+      },
-      : {
+      borderColor: 'initial !important',
-          color: `${
+    },
-            theme.colorScheme === 'dark'
+    input: {
-              ? theme.colors.gray[4]
+      borderRadius: '0px',
-              : theme.colors.dark[5]
+      borderColor:
-          } !important`,
+        theme.colorScheme === 'dark'
-        }),
+          ? theme.colors.gray[4]
-  },
+          : theme.colors.dark[5],
-  label: {
+      backgroundColor: 'transparent !important',
-    color: `${
+    },
-      theme.colorScheme === 'dark' ? theme.colors.gray[4] : theme.colors.dark[5]
+    icon: {
-    }  !important`,
+      ...(primary
-  },
+        ? {
-}));
+            color: `${
+              theme.colors[theme.primaryColor][
+                theme.colorScheme === 'dark' ? 8 : 6
+              ]
+            } !important`,
+          }
+        : {
+            color: `${
+              theme.colorScheme === 'dark'
+                ? theme.colors.gray[4]
+                : theme.colors.dark[5]
+            } !important`,
+          }),
+    },
+    label: {
+      ...(labelPosition === 'left'
+        ? {
+            paddingRight: '0.5rem',
+          }
+        : {
+            paddingLeft: '0.5rem',
+          }),
+      color: `${
+        theme.colorScheme === 'dark'
+          ? theme.colors.gray[4]
+          : theme.colors.dark[5]
+      }  !important`,
+    },
+  })
+);
 
 const Checkbox: FC<ICheckbox> = ({
   color,
@@ -74,9 +87,10 @@ const Checkbox: FC<ICheckbox> = ({
   disabled = false,
   onToggleCheck = (l, v) => {},
   showLabel = true,
+  labelPosition,
   ...props
 }) => {
-  const { classes, cx, theme } = useStyles({ primary: primary });
+  const { classes, cx, theme } = useStyles({ primary, labelPosition });
   const customColor = primary
     ? 'primaryColor'
     : theme.colorScheme === 'dark'
@@ -91,6 +105,7 @@ const Checkbox: FC<ICheckbox> = ({
       label={showLabel ? label : ''}
       disabled={disabled}
       checked={checked}
+      labelPosition={labelPosition}
       classNames={{
         ...classNames,
         input: cx(classes.input, classNames.input, {

platform/firecamp-ui/src/components/checkbox/CheckboxGroup.tsx

@@ -1,4 +1,4 @@
-import Checkbox from './Checkbox';
+import {Checkbox} from '@firecamp/ui';
 
 const CheckboxGroup = ({
   onToggleCheck = (v: {[k: string]: any}) => {},
@@ -15,14 +15,14 @@ const CheckboxGroup = ({
             return (
               <Checkbox
                 key={index}
-                isChecked={checkbox.isChecked || false}
+                checked={checkbox.isChecked || false}
                 label={checkbox.label || ''}
                 showLabel={checkbox.showLabel || false}
                 disabled={checkbox.disabled || false}
                 onToggleCheck={() =>
                   onToggleCheck({ [checkbox.id]: !checkbox.isChecked })
                 }
-                className="mr-2"
+                classNames={{root:"mr-2"}}
               />
             );
           })}

platform/firecamp-ui/src/components/form/Form.stories.tsx

@@ -103,16 +103,16 @@ export function FormWithCheckBox() {
         label={'Namespace'}
         {...getInputProps('namespace')}
       />
-      <Checkbox
+      <div>
-        isChecked={checkBoxItem.isChecked || false}
+        <label>{checkBoxItem.label || ''}</label>
-        label={checkBoxItem.label || ''}
+        <Checkbox
-        showLabel={checkBoxItem.showLabel || false}
+          checked={checkBoxItem.isChecked || false}
-        disabled={checkBoxItem.disabled || false}
+          disabled={checkBoxItem.disabled || false}
-        onToggleCheck={_handleCheckBoxAction}
+          onToggleCheck={_handleCheckBoxAction}
-        className="mr-2 mb-2"
+          classNames={{ root: 'mr-2 mb-2' }}
-        labelPlacing="left"
+          labelPosition="left"
-      />
+        />
-
+      </div>
       <div className="form-control">
         <Button
           type="submit"

platform/firecamp-ui/src/components/table/basic-table/BasicTable.tsx

@@ -3,8 +3,7 @@ import cx from 'classnames';
 import { GripVertical, Plus, Trash2 } from 'lucide-react';
 import { _array } from '@firecamp/utils';
 import { EEditorLanguage } from '@firecamp/types';
-import { Input, Button } from '@firecamp/ui';
+import { Button, Checkbox, Input } from '@firecamp/ui';
-import Checkbox from '../../checkbox/Checkbox';
 import SingleLineEditor from '../../editors/monaco-v2/SingleLineEditor';
 import Table from '../primitive/Table';
 import {
@@ -70,10 +69,11 @@ const BasicTable = ({
             )}
 
             <Checkbox
-              isChecked={!cellValue}
+              checked={!cellValue}
               onToggleCheck={(label, val: boolean) => {
                 onChange(column.key, !val);
               }}
+              classNames={{ root: 'pr-2' }}
               disabled={options.disabledColumns.includes(column.key)}
             />
           </div>

platform/firecamp-ui/src/components/table/multipart-table/MultipartTable.tsx

@@ -4,9 +4,8 @@ import { File, GripVertical, Plus, Trash2 } from 'lucide-react';
 import { _array } from '@firecamp/utils';
 import { VscTextSize } from '@react-icons/all-files/vsc/VscTextSize';
 import { EEditorLanguage } from '@firecamp/types';
-import { Input, Button } from '@firecamp/ui';
+import { Button, Checkbox, Input } from '@firecamp/ui';
 
-import Checkbox from '../../checkbox/Checkbox';
 import SingleLineEditor from '../../editors/monaco-v2/SingleLineEditor';
 import Table from '../primitive/Table';
 import {
@@ -68,7 +67,7 @@ const MultipartTable = ({
             </span>
 
             <Checkbox
-              isChecked={!cellValue}
+              checked={!cellValue}
               onToggleCheck={(label, val: boolean) => {
                 onChange(column.key, !val);
               }}

platform/firecamp-ui/src/components/table/primitive/table.sass

@@ -4,9 +4,6 @@
   width: calc(100% - 24px)
   margin: 12px
 
-.primary-table td:first-child svg
-  width: 100%
-
 .primary-table th
   position: relative
 

platform/firecamp-ui/src/scss/base.scss

@@ -222,9 +222,6 @@ body {
 .theme-dark .drag-icon {
   filter: invert(1);
 }
-.icon {
-  font-family: 'icomoon' !important;
-}
 
 a,
 a:hover {
@@ -427,7 +424,7 @@ tr:focus-visible {
   white-space: nowrap !important;
 }
 
-.fc-form input,
+.fc-form input:not([type="checkbox"]),
 .fc-form select {
   border-radius: 0px !important;
   resize: none;

platform/firecamp-ui/src/scss/tailwind.scss

@@ -2191,9 +2191,6 @@ body {
 .theme-dark .drag-icon {
   filter: invert(1);
 }
-.icon {
-  font-family: 'icomoon' !important;
-}
 
 a,
 a:hover {
@@ -2402,7 +2399,7 @@ tr:focus-visible {
   white-space: nowrap !important;
 }
 
-.fc-form input,
+.fc-form input:not([type="checkbox"]),
 .fc-form select {
   border-radius: 0px !important;
   resize: none;

platform/firecamp-ui/src/stories/DesignClasses.stories.mdx

@@ -11,7 +11,6 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
 | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
 | .theme-light.primary-green,.theme-dark.primary-green                                                          | to update the app primary color                                                          |
 | .theme-dark .drag-icon                                                                                        | to invert the icon color in dark theme                                                   |
-| .icon                                                                                                         | to add font family `icomoon`                                                             |
 | a,a:hover                                                                                                     | to inherit the text color                                                                |
 | button:disabled,button[disabled]                                                                              | to update opacity for all disabled button using pseudo class selector                    |
 | hr                                                                                                            | to update the app border color in horizontal line                                        |

platform/firecamp-ui/src/ui-kit.ts

@@ -1,8 +1,8 @@
 export { default as Button } from './components/buttons/Button';
 export { default as CopyButton } from './components/buttons/CopyButton';
 
-export { default as Checkbox } from './components/checkbox/Checkbox';
+export { default as Checkbox } from './components/checkbox/Checkbox2';
-export { default as Checkbox2 } from './components/checkbox/Checkbox2';
+export type { ICheckbox } from './components/checkbox/Checkbox2';
 export { default as CheckboxGroup } from './components/checkbox/CheckboxGroup';
 
 export { default as Dropdown } from './components/dropdown/Dropdown';

playgrounds/firecamp-rest/src/components/request/tabs/ConfigTab.tsx

@@ -73,13 +73,13 @@ const ConfigTab = () => {
           </div>
           <CheckboxInGrid
             className="fc-input-wrapper"
-            isChecked={config[RejectUnauthorized]}
+            checked={config[RejectUnauthorized]}
             label="Reject Unauthorized"
             onToggleCheck={() => _onToggleCheckBox(RejectUnauthorized)}
           />
           <CheckboxInGrid
             className="fc-input-wrapper"
-            isChecked={
+            checked={
               config[FollowLocation] === undefined
                 ? true
                 : config[FollowLocation]

playgrounds/firecamp-socket-io/src/components/connection-panel/connection/ConfigTab.tsx

@@ -157,7 +157,7 @@ const ConfigTab = ({ id = '' }) => {
         return (
           <CheckboxInGrid
             key={`${name}-${index}`}
-            isChecked={connection[name] || false}
+            checked={connection[name] || false}
             label={label}
             className="fc-input-wrapper"
             onToggleCheck={(_) => _onChange(name, !connection[name])}

playgrounds/firecamp-socket-io/src/components/connection-panel/connection/PlaygroundTab.tsx

@@ -74,7 +74,7 @@ const EmitterPlayground = () => {
           </TabHeader.Left>
           <TabHeader.Right>
             <Checkbox
-              isChecked={plgEmitter.__meta.ack}
+              checked={plgEmitter.__meta.ack}
               label="Ack"
               onToggleCheck={(label, val) => changePlgEmitterAck(val)}
             />

playgrounds/firecamp-socket-io/src/components/connection-panel/connection/playground/EmitterBody.tsx

@@ -148,16 +148,16 @@ const EmitterBody = ({
       //   );
       case EArgumentBodyType.Boolean:
         return (
-          <div className="flex p-2">
+          <div className="flex p-2 gap-2">
             <Checkbox
-              isChecked={argument.body === true}
+              checked={argument.body === true}
               label="True"
               onToggleCheck={(_) => {
                 changeArgValue(true);
               }}
             />
             <Checkbox
-              isChecked={argument.body === false}
+              checked={argument.body === false}
               label="False"
               onToggleCheck={(_) => {
                 changeArgValue(false);

playgrounds/firecamp-websocket/src/components/common/config/Config.tsx

@@ -212,7 +212,7 @@ const Config = ({ config = {} }) => {
           <CheckboxInGrid
             key={`${name}-${index}`}
             label={label}
-            isChecked={config[name] || false}
+            checked={config[name] || false}
             className="fc-input-wrapper"
             onToggleCheck={() => _onChange(name, !config[name])}
           />

playgrounds/firecamp-websocket/src/components/connection-panel/connection/ConfigTab.tsx

@@ -95,7 +95,7 @@ const Config = ({ config = {}, onUpdate }) => {
         return (
           <CheckboxInGrid
             key={`${name}-${index}`}
-            isChecked={config[name] || false}
+            checked={config[name] || false}
             label={label}
             className="fc-input-wrapper"
             onToggleCheck={() => _onChange(name, !config[name])}