ui: added custom mantine checkbox component

platform/firecamp-ui/.storybook/main.js

@@ -76,4 +76,12 @@ module.exports = {
 
     return config;
   },
+  /**
+   * TODO: remove after storybook migration to v7
+   * @ref: https://github.com/storybookjs/storybook/issues/21642#issuecomment-1474350363
+   */
+
+  typescript: {
+    reactDocgen: false,
+  },
 };

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

@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import Checkbox2, { ICheckbox } from './Checkbox2';
+
+export default {
+  title: 'UI-Kit/Checkbox2',
+  component: Checkbox2,
+};
+
+const Template = ({ checked, ...args }: ICheckbox) => {
+  const [isChecked, updateChecked] = useState(checked);
+  return (
+    <Checkbox2
+      checked={isChecked}
+      {...args}
+      onToggleCheck={(l, v) => {
+        updateChecked(v);
+      }}
+    />
+  );
+};
+export const PossiblePrimaryStates = () => {
+  return (
+    <div className="flex flex-col">
+      <Checkbox2 classNames={{ body: 'p-1' }} label="Unchecked State" />
+      <Checkbox2 classNames={{ body: 'p-1' }} label="Checked State" checked />
+      <Checkbox2
+        classNames={{ body: 'p-1' }}
+        label="Disabled Unchecked State"
+        disabled
+      />
+      <Checkbox2
+        classNames={{ body: 'p-1' }}
+        label="Disabled Checked State"
+        checked
+        disabled
+      />
+    </div>
+  );
+};
+export const PossibleSecondaryStates = () => {
+  return (
+    <div className="flex flex-col">
+      <Checkbox2
+        primary={false}
+        classNames={{ body: 'p-1' }}
+        label="Unchecked State"
+      />
+      <Checkbox2
+        primary={false}
+        classNames={{ body: 'p-1' }}
+        label="Checked State"
+        checked
+      />
+      <Checkbox2
+        primary={false}
+        classNames={{ body: 'p-1' }}
+        label="Disabled Unchecked State"
+        disabled
+      />
+      <Checkbox2
+        primary={false}
+        classNames={{ body: 'p-1' }}
+        label="Disabled Checked State"
+        checked
+        disabled
+      />
+    </div>
+  );
+};
+export const LabelPlacement = () => {
+  return (
+    <div className="flex flex-col">
+      <Checkbox2
+        classNames={{ body: 'p-1' }}
+        labelPosition="right"
+        label="Right Side State (default)"
+      />
+      <Checkbox2
+        classNames={{ body: 'p-1' }}
+        labelPosition="left"
+        label="Left Side State"
+      />
+    </div>
+  );
+};
+export const LabelVisibility = () => {
+  return (
+    <div className="flex flex-col">
+      <Checkbox2 classNames={{ body: 'p-1' }} label="Label Visible" />
+      <Checkbox2
+        classNames={{ body: 'p-1' }}
+        label="Label Hidden"
+        showLabel={false}
+      />
+    </div>
+  );
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  label: 'CheckBox Primary',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'CheckBox Secondary',
+  primary: false,
+};

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

@@ -0,0 +1,109 @@
+import { FC } from 'react';
+import {
+  Checkbox as MantineCheckbox,
+  CheckboxProps,
+  createStyles,
+} from '@mantine/core';
+
+export interface ICheckbox extends CheckboxProps {
+  /**
+   * enabled by default & update color as primary color
+   */
+  primary?: boolean;
+  /**
+   * updated function for onChange handler
+   * @param l : label value
+   * @param v : status of checked
+   * @returns
+   */
+  onToggleCheck?: (l: any, v: boolean) => void;
+  /**
+   * enabled by default, used for updating visibility of label
+   */
+  showLabel?: boolean;
+}
+
+const useStyles = createStyles((theme, { primary }: Partial<ICheckbox>) => ({
+  disabled: {
+    opacity: '50% !important',
+    '&:checked': {
+      borderColor: primary
+        ? theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 8 : 6]
+        : 'initial',
+    },
+    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`,
+        }
+      : {
+          color: `${
+            theme.colorScheme === 'dark'
+              ? theme.colors.gray[4]
+              : theme.colors.dark[5]
+          } !important`,
+        }),
+  },
+  label: {
+    color: `${
+      theme.colorScheme === 'dark' ? theme.colors.gray[4] : theme.colors.dark[5]
+    }  !important`,
+  },
+}));
+
+const Checkbox: FC<ICheckbox> = ({
+  color,
+  label,
+  classNames = {},
+  primary = true,
+  checked = false,
+  disabled = false,
+  onToggleCheck = (l, v) => {},
+  showLabel = true,
+  ...props
+}) => {
+  const { classes, cx, theme } = useStyles({ primary: primary });
+  const customColor = primary
+    ? 'primaryColor'
+    : theme.colorScheme === 'dark'
+    ? 'gray'
+    : 'dark';
+
+  return (
+    <MantineCheckbox
+      color={customColor}
+      size={'xs'}
+      radius={'xs'}
+      label={showLabel ? label : ''}
+      disabled={disabled}
+      checked={checked}
+      classNames={{
+        ...classNames,
+        input: cx(classes.input, classNames.input, {
+          [classes.disabled]: disabled,
+        }),
+        icon: cx(classes.icon, classNames.icon, {
+          [classes.disabled]: disabled && checked,
+        }),
+        label: cx(classes.label, classNames.label),
+      }}
+      onChange={(e) => onToggleCheck(label, e.target.checked)}
+      {...props}
+    />
+  );
+};
+export default Checkbox;

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

@@ -251,8 +251,8 @@ hr {
   color: var(--input-placeholder) !important;
   opacity: 1;
 }
-input:focus,
+input:not([type="checkbox"]):focus,
-input:focus-visible textarea:focus,
+input:not([type="checkbox"]):focus-visible textarea:focus,
 textarea:focus-visible {
   box-shadow: none !important;
   border: 1px solid var(--focus-border) !important;

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

@@ -352,9 +352,6 @@
 .left-1 {
     left: 0.25rem;
 }
-.left-2 {
-    left: 0.5rem;
-}
 .right-0 {
     right: 0px;
 }
@@ -564,9 +561,6 @@
 .ml-2 {
     margin-left: 0.5rem;
 }
-.ml-3 {
-    margin-left: 0.75rem;
-}
 .ml-4 {
     margin-left: 1rem;
 }
@@ -893,9 +887,6 @@
 .max-w-md {
     max-width: 28rem;
 }
-.max-w-screen-md {
-    max-width: 768px;
-}
 .max-w-sm {
     max-width: 24rem;
 }
@@ -983,9 +974,6 @@
 .flex-row {
     flex-direction: row;
 }
-.flex-row-reverse {
-    flex-direction: row-reverse;
-}
 .flex-col {
     flex-direction: column;
 }
@@ -1136,18 +1124,9 @@
 .\!border-app-border {
     border-color: var(--app-border) !important;
 }
-.\!border-danger {
-    border-color: var(--error) !important;
-}
 .\!border-input-border {
     border-color: var(--input-border) !important;
 }
-.\!border-primaryColor {
-    border-color: var(--app-primary) !important;
-}
-.\!border-secondaryColor {
-    border-color: var(--app-secondary) !important;
-}
 .\!border-statusBar-border {
     border-color: var(--statusBar-border) !important;
 }
@@ -1283,9 +1262,6 @@
 .bg-app-foreground-inactive {
     background-color: var(--app-foreground-inactive);
 }
-.bg-danger {
-    background-color: var(--error);
-}
 .bg-error {
     background-color: var(--error);
 }
@@ -1319,9 +1295,6 @@
 .bg-primaryColor {
     background-color: var(--app-primary);
 }
-.bg-secondaryColor {
-    background-color: var(--app-secondary);
-}
 .bg-statusBar-background {
     background-color: var(--statusBar-background);
 }
@@ -1525,15 +1498,9 @@
 .\!pb-6 {
     padding-bottom: 1.5rem !important;
 }
-.\!pl-2 {
-    padding-left: 0.5rem !important;
-}
 .\!pl-3 {
     padding-left: 0.75rem !important;
 }
-.\!pl-9 {
-    padding-left: 2.25rem !important;
-}
 .\!pr-3 {
     padding-right: 0.75rem !important;
 }
@@ -1722,9 +1689,6 @@
 .leading-3 {
     line-height: .75rem;
 }
-.leading-4 {
-    line-height: 1rem;
-}
 .leading-5 {
     line-height: 1.25rem;
 }
@@ -1767,9 +1731,6 @@
 .text-app-foreground-inactive {
     color: var(--app-foreground-inactive);
 }
-.text-danger {
-    color: var(--error);
-}
 .text-error {
     color: var(--error);
 }
@@ -1865,11 +1826,6 @@
 .opacity-80 {
     opacity: 0.8;
 }
-.\!shadow-popover-shadow {
-    --tw-shadow: var(--popover-shadow) !important;
-    --tw-shadow-colored: var(--popover-shadow) !important;
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
-}
 .shadow {
     --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
     --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -1890,10 +1846,6 @@
     --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.\!shadow-popover-shadow {
-    --tw-shadow-color: var(--popover-shadow) !important;
-    --tw-shadow: var(--tw-shadow-colored) !important;
-}
 .shadow-modal-shadow {
     --tw-shadow-color: var(--modal-shadow);
     --tw-shadow: var(--tw-shadow-colored);
@@ -2152,10 +2104,6 @@
 .hover\:text-primaryColor:hover {
     color: var(--app-primary);
 }
-.hover\:text-primaryColor-text:hover {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-}
 .hover\:text-secondaryColor-text:hover {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -2182,21 +2130,11 @@
 .focus-visible\:\!border-none:focus-visible {
     border-style: none !important;
 }
-.focus-visible\:\!bg-focus1:focus-visible {
-    background-color: var(--focus-level-1) !important;
-}
 .focus-visible\:\!shadow-none:focus-visible {
     --tw-shadow: 0 0 #0000 !important;
     --tw-shadow-colored: 0 0 #0000 !important;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
 }
-.focus-visible\:\!shadow-popover-shadow:focus-visible {
-    --tw-shadow: var(--popover-shadow) !important;
-    --tw-shadow-colored: var(--popover-shadow) !important;
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
-    --tw-shadow-color: var(--popover-shadow) !important;
-    --tw-shadow: var(--tw-shadow-colored) !important;
-}
 .group:hover .group-hover\:h-auto {
     height: auto;
 }
@@ -2286,8 +2224,8 @@ hr {
   color: var(--input-placeholder) !important;
   opacity: 1;
 }
-input:focus,
+input:not([type="checkbox"]):focus,
-input:focus-visible textarea:focus,
+input:not([type="checkbox"]):focus-visible textarea:focus,
 textarea:focus-visible {
   box-shadow: none !important;
   border: 1px solid var(--focus-border) !important;

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

@@ -2,6 +2,7 @@ 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 Checkbox2 } from './components/checkbox/Checkbox2';
 export { default as CheckboxGroup } from './components/checkbox/CheckboxGroup';
 
 export { default as Dropdown } from './components/dropdown/Dropdown';