Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding UI components #2

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Prev Previous commit
Next Next commit
feat(web): add Checkbox component
mehrad77 committed Dec 3, 2024
commit e1b197642d1f6592623232a1a8ba922218e9a6d4
52 changes: 51 additions & 1 deletion apps/web/src/components/Checkbox/Checkbox.css
Original file line number Diff line number Diff line change
@@ -1 +1,51 @@
/* Base Styles */
.checkbox {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}

.checkbox--disabled {
cursor: not-allowed;
opacity: 0.6;
}

.checkbox__input {
display: none;
}

.checkbox__custom {
width: 20px;
height: 20px;
border: 2px solid #1976d2;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition:
background-color 0.2s,
border-color 0.2s;
}

.checkbox__input:checked + .checkbox__custom {
background-color: #1976d2;
border-color: #1976d2;
}

.checkbox__custom::after {
content: "";
width: 12px;
height: 12px;
background-color: #fff;
border-radius: 2px;
display: none;
}

.checkbox__input:checked + .checkbox__custom::after {
display: block;
}

.checkbox__label {
font-size: 16px;
color: #333;
}
18 changes: 0 additions & 18 deletions apps/web/src/components/Checkbox/Checkbox.stories.ts

This file was deleted.

42 changes: 42 additions & 0 deletions apps/web/src/components/Checkbox/Checkbox.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React, { useState } from "react";
import { Meta, StoryFn } from "@storybook/react";
import { Checkbox, CheckboxProps } from "./Checkbox";

const meta: Meta<typeof Checkbox> = {
title: "Components/Checkbox",
component: Checkbox,
argTypes: {
label: { control: "text" },
checked: { control: "boolean" },
disabled: { control: "boolean" },
},
};

export default meta;

const Template: StoryFn<CheckboxProps> = (args) => {
const [checked, setChecked] = useState(args.checked);

return <Checkbox {...args} checked={checked} onChange={setChecked} />;
};

export const Default = Template.bind({});
Default.args = {
label: "Mercedes Benz",
checked: false,
disabled: false,
};

export const Checked = Template.bind({});
Checked.args = {
label: "Mercedes Benz",
checked: true,
disabled: false,
};

export const Disabled = Template.bind({});
Disabled.args = {
label: "Mercedes Benz",
checked: false,
disabled: true,
};
33 changes: 29 additions & 4 deletions apps/web/src/components/Checkbox/Checkbox.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,36 @@
import React from "react";
import "./Checkbox.css";

export interface CheckboxProps extends React.HTMLAttributes<HTMLDivElement> {}
export interface CheckboxProps {
/** Label for the checkbox */
label: string;
/** Whether the checkbox is checked */
checked: boolean;
/** Disabled state */
disabled?: boolean;
/** Callback when the checkbox is toggled */
onChange: (checked: boolean) => void;
}

const Checkbox = ({ ...props }: CheckboxProps) => {
const classNames = [];
return <div className={classNames.join(" ")} {...props}></div>;
const Checkbox: React.FC<CheckboxProps> = ({
label,
checked,
disabled = false,
onChange,
}) => {
return (
<label className={`checkbox ${disabled ? "checkbox--disabled" : ""}`}>
<input
type="checkbox"
className="checkbox__input"
checked={checked}
onChange={(e) => onChange(e.target.checked)}
disabled={disabled}
/>
<span className="checkbox__custom" />
<span className="checkbox__label">{label}</span>
</label>
);
};

export { Checkbox };