LukeParke/firecamp
1
0
Fork 0
mirror of https://github.com/LukeHagar/firecamp.git synced 2025-12-06 12:27:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: updated usage of checkbox in all related components

Browse Source
This commit is contained in:
Nishchit14
2023-08-17 18:42:39 +05:30
parent cde5f99032
commit f6ac7575fd
19 changed files with 91 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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}>

19
platform/firecamp-ui/src/components/checkbox/Checkbox.scss
View File

@@ -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;
}

93
platform/firecamp-ui/src/components/checkbox/Checkbox.tsx
View File

@@ -1,102 +1,18 @@
import { FC } from 'react';
import cx from 'classnames';
import { Check } from 'lucide-react';
import { ICheckbox } from './interfaces/Checkbox.interfaces';
import { Checkbox, ICheckbox } from '@firecamp/ui';
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>

27
platform/firecamp-ui/src/components/checkbox/Checkbox2.tsx
View File

@@ -23,15 +23,18 @@ export interface ICheckbox extends CheckboxProps {
showLabel?: boolean;
}
const useStyles = createStyles((theme, { primary }: Partial<ICheckbox>) => ({
const useStyles = createStyles(
(theme, { primary, labelPosition }: Partial<ICheckbox>) => ({
disabled: {
opacity: '50% !important',
'&:checked': {
borderColor: primary
? theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 8 : 6]
? theme.colors[theme.primaryColor][
theme.colorScheme === 'dark' ? 8 : 6
]
: 'initial',
},
borderColor: 'initial',
borderColor: 'initial !important',
},
input: {
borderRadius: '0px',
@@ -59,11 +62,21 @@ const useStyles = createStyles((theme, { primary }: Partial<ICheckbox>) => ({
}),
},
label: {
...(labelPosition === 'left'
? {
paddingRight: '0.5rem',
}
: {
paddingLeft: '0.5rem',
}),
color: `${
theme.colorScheme === 'dark' ? theme.colors.gray[4] : theme.colors.dark[5]
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, {

6
platform/firecamp-ui/src/components/checkbox/CheckboxGroup.tsx
View File

@@ -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"}}
/>
);
})}

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

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

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

@@ -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 Checkbox from '../../checkbox/Checkbox';
import { Button, Checkbox, Input } from '@firecamp/ui';
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>

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

@@ -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);
}}

3
platform/firecamp-ui/src/components/table/primitive/table.sass
View File

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

5
platform/firecamp-ui/src/scss/base.scss
View File

@@ -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;

5
platform/firecamp-ui/src/scss/tailwind.scss
View File

@@ -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;

1
platform/firecamp-ui/src/stories/DesignClasses.stories.mdx
View File

@@ -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 |

4
platform/firecamp-ui/src/ui-kit.ts
View File

@@ -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 Checkbox2 } from './components/checkbox/Checkbox2';
export { default as Checkbox } 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';

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

@@ -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]

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

@@ -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])}

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

@@ -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)}
/>

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

@@ -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);

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

@@ -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])}
/>

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

@@ -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])}