synced/infisical
1
0
Fork 0
mirror of https://github.com/Infisical/infisical.git synced 2025-03-25 14:05:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): added checkbox component

Browse Source
This commit is contained in:
akhilmhdh
2023-01-22 22:09:58 +05:30
parent b92907aca6
commit 7f9bc77253
6 changed files with 126 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/package-lock.json generated
View File

@ -15,6 +15,7 @@
"@headlessui/react": "^1.6.6",
"@radix-ui/react-accordion": "^1.1.0",
"@radix-ui/react-alert-dialog": "^1.0.2",
"@radix-ui/react-checkbox": "^1.0.1",
"@radix-ui/react-dialog": "^1.0.2",
"@radix-ui/react-label": "^2.0.0",
"@radix-ui/react-popover": "^1.0.3",
@ -3660,6 +3661,26 @@
"react-dom": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-checkbox": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.1.tgz",
"integrity": "sha512-TisH0B8hWmYP3ONRduYCyN04rR9yLPIw/Rwyn1RoC1suSoGCa8Wn+YPdSSSarSszeIbcg3p2lBkDp2XXit4sZw==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.0",
"@radix-ui/react-compose-refs": "1.0.0",
"@radix-ui/react-context": "1.0.0",
"@radix-ui/react-presence": "1.0.0",
"@radix-ui/react-primitive": "1.0.1",
"@radix-ui/react-use-controllable-state": "1.0.0",
"@radix-ui/react-use-previous": "1.0.0",
"@radix-ui/react-use-size": "1.0.0"
},
"peerDependencies": {
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@radix-ui/react-collapsible": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.1.tgz",
@ -24635,6 +24656,22 @@
"@radix-ui/react-primitive": "1.0.1"
}
},
"@radix-ui/react-checkbox": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.1.tgz",
"integrity": "sha512-TisH0B8hWmYP3ONRduYCyN04rR9yLPIw/Rwyn1RoC1suSoGCa8Wn+YPdSSSarSszeIbcg3p2lBkDp2XXit4sZw==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.0",
"@radix-ui/react-compose-refs": "1.0.0",
"@radix-ui/react-context": "1.0.0",
"@radix-ui/react-presence": "1.0.0",
"@radix-ui/react-primitive": "1.0.1",
"@radix-ui/react-use-controllable-state": "1.0.0",
"@radix-ui/react-use-previous": "1.0.0",
"@radix-ui/react-use-size": "1.0.0"
}
},
"@radix-ui/react-collapsible": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.1.tgz",

1
frontend/package.json
View File

@ -22,6 +22,7 @@
"@headlessui/react": "^1.6.6",
"@radix-ui/react-accordion": "^1.1.0",
"@radix-ui/react-alert-dialog": "^1.0.2",
"@radix-ui/react-checkbox": "^1.0.1",
"@radix-ui/react-dialog": "^1.0.2",
"@radix-ui/react-label": "^2.0.0",
"@radix-ui/react-popover": "^1.0.3",

34
frontend/src/components/v2/Checkbox/Checkbox.stories.tsx Normal file
View File

@ -0,0 +1,34 @@
import type { Meta, StoryObj } from '@storybook/react';
import { Checkbox } from './Checkbox';
const meta: Meta<typeof Checkbox> = {
title: 'Components/Checkbox',
component: Checkbox,
tags: ['v2'],
argTypes: {}
};
export default meta;
type Story = StoryObj<typeof Checkbox>;
// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
export const Simple: Story = {
args: {
children: 'Accept the condition'
}
};
export const Disabled: Story = {
args: {
children: 'Accept the condition',
isDisabled: true
}
};
export const Required: Story = {
args: {
children: 'Accept the condition',
isRequired: true
}
};

51
frontend/src/components/v2/Checkbox/Checkbox.tsx Normal file
View File

@ -0,0 +1,51 @@
import { ReactNode } from 'react';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import { twMerge } from 'tailwind-merge';
export type CheckboxProps = Omit<
CheckboxPrimitive.CheckboxProps,
'checked' | 'disabled' | 'required'
> & {
children: ReactNode;
id: string;
isDisabled?: boolean;
isChecked?: boolean;
isRequired?: boolean;
};
export const Checkbox = ({
children,
className,
id,
isChecked,
isDisabled,
isRequired,
...props
}: CheckboxProps): JSX.Element => {
return (
<div className="flex items-center text-bunker-300">
<CheckboxPrimitive.Root
className={twMerge(
'flex items-center justify-center w-5 h-5 mr-3 transition-all rounded shadow hover:bg-bunker-200 bg-bunker-300',
isDisabled && 'bg-bunker-400 hover:bg-bunker-400',
className
)}
required={isRequired}
checked={isChecked}
disabled={isDisabled}
{...props}
id={id}
>
<CheckboxPrimitive.Indicator className="text-bunker-800">
<FontAwesomeIcon icon={faCheck} size="sm" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
<label className="text-sm" htmlFor={id}>
{children}
{isRequired && <span className="pl-1 text-red">*</span>}
</label>
</div>
);
};

2
frontend/src/components/v2/Checkbox/index.tsx Normal file
View File

@ -0,0 +1,2 @@
export type { CheckboxProps } from './Checkbox';
export { Checkbox } from './Checkbox';

1
frontend/src/components/v2/index.tsx
View File

@ -1,5 +1,6 @@
export * from './Button';
export * from './Card';
export * from './Checkbox';
export * from './FormControl';
export * from './IconButton';
export * from './Input';