Checkbox component

package.json

@@ -24,6 +24,7 @@
     "@front_web_mrmilu/services": "~2.1.0",
     "@front_web_mrmilu/utils": "~2.1.0",
     "@hookform/resolvers": "~3.2.0",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@react-spring/web": "~9.7.3",
     "@sentry/react": "~7.61.1",
     "@sentry/tracing": "~7.61.1",

src/ui/components/base_layout/base_layout.tsx

@@ -22,6 +22,9 @@ export const BaseLayout = () => {
           <li>
             <Link to="/users">users</Link>
           </li>
+          <li>
+            <Link to="/components-showcase">components</Link>
+          </li>
           <li>
             <Link to="/create-post">create post</Link>
           </li>

src/ui/components/fields/checkbox_field/checkbox_field.styled.ts

@@ -0,0 +1,47 @@
+import { colors } from "@/src/ui/styles/colors";
+import * as Radix from "@radix-ui/react-checkbox";
+import styled from "styled-components";
+
+const Wrapper = styled.div``;
+
+const CheckboxWrapper = styled.label`
+  display: flex;
+  align-items: center;
+`;
+
+const Root = styled(Radix.Root)`
+  background-color: white;
+  width: 25px;
+  height: 25px;
+  border-radius: 4px;
+  padding: 0;
+  display: grid;
+  place-content: center;
+  box-shadow: 0 2px 10px ${colors.gray50};
+  margin-right: 10px;
+  :hover {
+    background-color: ${colors.gray10};
+  }
+  :focus {
+    box-shadow: 0 0 0 2px ${colors.gray90};
+  }
+`;
+
+const Indicator = styled(Radix.Indicator)`
+  height: 25px;
+  width: 25px;
+  display: grid;
+  place-items: center;
+`;
+
+const Error = styled.p`
+  color: ${colors.gray60};
+`;
+
+export default {
+  Wrapper,
+  Root,
+  Indicator,
+  CheckboxWrapper,
+  Error
+};

src/ui/components/fields/checkbox_field/checkbox_field.tsx

@@ -0,0 +1,41 @@
+import { ReactComponent as CheckIcon } from "@/src/ui/assets/icons/check.svg";
+import { useController } from "react-hook-form";
+import Styled from './checkbox_field.styled'
+
+interface Props {
+  id: string;
+  name: string;
+  label: string;
+  value: boolean;
+  onChange: (value: boolean) => void;
+  error?: string;
+}
+
+export function CheckboxField({ id, name, value, label, onChange, error }: Props) {
+  return (
+    <Styled.Wrapper>
+      <Styled.CheckboxWrapper>
+        <Styled.Root checked={value} onCheckedChange={onChange} defaultChecked id={id} name={name}>
+          <Styled.Indicator>
+            <CheckIcon />
+          </Styled.Indicator>
+        </Styled.Root>
+        <label htmlFor={id}>{label}</label>
+      </Styled.CheckboxWrapper>
+      {error && (
+        <Styled.Error>
+          {error}
+        </Styled.Error>
+      )}
+    </Styled.Wrapper>
+  );
+}
+
+interface ControlledProps extends Omit<Props, "value" | "id" | "onChange"> {
+  id?: string;
+}
+
+export const ControlledCheckboxField = ({ id, name, ...props }: ControlledProps) => {
+  const controller = useController({ name });
+  return <CheckboxField id={id ?? name} {...props} {...controller.field} error={controller.fieldState.error?.message} />;
+};

src/ui/components/input/input.styled.ts → src/ui/components/fields/input/input.styled.ts

@@ -2,8 +2,8 @@ import styled, { css } from "styled-components";
 import { typography } from "@/src/ui/styles/typography";
 import { spacing } from "@/src/ui/styles/spacing";
 import { px2rem } from "@/src/ui/styles/utils";
-import { colors } from "../../styles/colors";
 import { includeMedia } from "@/src/ui/styles/breakpoints";
+import { colors } from "@/src/ui/styles/colors";
 
 const Wrapper = styled.div`
   display: flex;

src/ui/components/input/input.tsx → src/ui/components/fields/input/input.tsx

@@ -1,4 +1,4 @@
-import Styled from "@/src/ui/components/input/input.styled";
+import Styled from "./input.styled";
 import type { ChangeEventHandler, FocusEventHandler, HTMLInputTypeAttribute, KeyboardEventHandler } from "react";
 import { forwardRef } from "react";
 import { useController } from "react-hook-form";

src/ui/features/components_showcase/views/components_showcase_page.styled.ts

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+const Form = styled.form``;
+
+export default {
+  Form
+};

src/ui/features/components_showcase/views/components_showcase_page.tsx

@@ -0,0 +1,32 @@
+import { Button } from "@/src/ui/components/button/button";
+import { ControlledCheckboxField } from "@/src/ui/components/fields/checkbox_field/checkbox_field";
+import BasePageStyled from "@/src/ui/features/misc/components/base_page.styled";
+import { FormProvider, useForm } from "react-hook-form";
+import Styled from "./components_showcase_page.styled";
+interface FormValues {
+  checkboxValue: boolean;
+}
+const defaultValues: FormValues = {
+  checkboxValue: false
+};
+
+export default function ComponentsShowcasePage() {
+  const form = useForm({
+    defaultValues,
+    reValidateMode: "onChange"
+  });
+  return (
+    <BasePageStyled.Wrapper data-cy="users-page">
+      <h2>Components showcase</h2>
+      <p>These components are frequent in many apps. This page shows how to implement them and which libraries to use for each of them.</p>
+      <FormProvider {...form}>
+        <Styled.Form onSubmit={form.handleSubmit(() => alert("Submitted"))}>
+          <ControlledCheckboxField name="checkboxValue" label="Checkbox field" />
+          <Button type="submit" disabled={form.formState.isSubmitting}>
+            Submit
+          </Button>
+        </Styled.Form>
+      </FormProvider>
+    </BasePageStyled.Wrapper>
+  );
+}

src/ui/features/home/views/home_page/home_page.tsx

@@ -1,4 +1,4 @@
-import { ControlledInput } from "@/src/ui/components/input/input";
+import { ControlledInput } from "@/src/ui/components/fields/input/input";
 import { Button } from "@/src/ui/components/button/button";
 import { useEffect, useMemo } from "react";
 import Styled from "@/src/ui/features/home/views/home_page/home_page.styled";

src/ui/router/routes.tsx

@@ -8,6 +8,7 @@ import { RouteMiddleware } from "@/src/ui/router/route_middleware";
 import { useAuthMiddleware } from "@/src/ui/router/middlewares/auth_middleware.hook";
 import { useUsersListProvider } from "@/src/ui/features/users/views/users_list_page/providers/users_list.provider";
 import { usePostsProvider } from "@/src/ui/features/posts/views/posts_list_page/providers/posts.provider";
+import ComponentsShowcasePage from "../features/components_showcase/views/components_showcase_page";
 
 const HomePage = lazy(() => import("@/src/ui/features/home/views/home_page/home_page"));
 const UsersListPage = lazy(() => import("@/src/ui/features/users/views/users_list_page/users_list_page"));
@@ -42,6 +43,14 @@ export const routes: Array<RouteObject> = [
           </AppErrorBoundary>
         )
       },
+      {
+        path: "/components-showcase",
+        element: (
+          <AppErrorBoundary key="users">
+            <ComponentsShowcasePage />
+          </AppErrorBoundary>
+        )
+      },
       {
         path: "/posts",
         element: (