packages/ui: add checkbox

refactor ElementContainer

apps/web/api/ius/types.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-type MetaObject = {
+export type MetaObject = {
   disabled: boolean;
-  fieldType: string;
+  fieldType: 'CHECKBOX' | 'DECIMAL' | 'INT' | 'STRING';
   label: string;
   required: boolean;
   visible: boolean;

apps/web/app/ius/[slug]/page.tsx

@@ -1,6 +1,7 @@
 import * as apiIUS from '@/api/ius/query';
 import type { Request } from '@/api/ius/types';
-import { Background, Button, Content, Input, Title, Wrapper } from 'ui';
+import { mapFieldTypeElement } from '@/config/elements';
+import { Background, Button, Content, ElementContainer } from 'ui';
 
 type Props = {
   params: { slug: string };
@@ -17,18 +18,21 @@ export default async function Page(props: Props) {
     <Content>
       <Background>
         <div className="grid auto-rows-auto grid-cols-2 gap-2 ">
-          {Object.keys(metaData).map((name) => (
+          {Object.keys(metaData).map((name) => {
-            <Wrapper key={name}>
+            const { fieldType } = metaData[name];
-              <Title htmlFor={name} title={metaData[name].label} />
+            const Element = mapFieldTypeElement[fieldType];
-              <Input
+
-                id={name}
+            return (
-                type="text"
+              <ElementContainer key={name} id={name} title={metaData[name].label}>
-                required={metaData[name].required}
+                <Element
-                defaultValue={data[name]}
+                  id={name}
-                disabled={metaData[name].disabled}
+                  required={metaData[name].required}
-              />
+                  defaultValue={data[name]}
-            </Wrapper>
+                  disabled={metaData[name].disabled}
-          ))}
+                />
+              </ElementContainer>
+            );
+          })}
         </div>
         <div className="grid grid-cols-3 gap-5 pt-3">
           <Button>Сохранить</Button>

apps/web/config/elements.ts

@@ -0,0 +1,13 @@
+import type { MetaObject } from '@/api/ius/types';
+import { Checkbox, Input } from 'ui';
+
+function wrapMap<C, T extends Record<MetaObject['fieldType'], C>>(arg: T) {
+  return arg;
+}
+
+export const mapFieldTypeElement = wrapMap({
+  CHECKBOX: Checkbox,
+  DECIMAL: Input,
+  INT: Input,
+  STRING: Input,
+});

apps/web/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tailwindcss/forms": "^0.5.6",
     "next": "^14.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

apps/web/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

apps/web/tailwind.config.ts

@@ -1,4 +1,5 @@
 import { COLORS } from './constants/colors';
+import tailwindForms from '@tailwindcss/forms';
 import tailwindTints from 'tailwind-tints';
 import type { Config } from 'tailwindcss';
 
@@ -25,6 +26,6 @@ const config: Config = {
     //   },
     // },
   },
-  plugins: [tints],
+  plugins: [tints, tailwindForms],
 };
 export default config;

packages/ui/checkbox.tsx

@@ -0,0 +1,24 @@
+import { cn } from './utils';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import { forwardRef } from 'react';
+
+const variants = cva(
+  'w-4 h-4 focus:ring-transparent rounded-sm hover:border-primary-500 disabled:hover:border-gray-300 border-gray-300 text-sm text-primary outline-none transition-all ease-linear hover:transition-all focus:transition-all disabled:cursor-not-allowed disabled:text-opacity-30'
+);
+
+export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> &
+  VariantProps<typeof variants>;
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, title, ...props }, ref) => (
+    <div className="flex items-center">
+      <input ref={ref} type="checkbox" className={cn(variants({ className }))} {...props} />
+      {title && (
+        <label htmlFor={props.id} className="ml-2 text-sm font-normal text-gray-900">
+          {title}
+        </label>
+      )}
+    </div>
+  )
+);

packages/ui/container.tsx

@@ -0,0 +1,17 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+export type ContainerProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren;
+
+export function ElementContainer({ children, id, title, ...props }: ContainerProps) {
+  return (
+    <div {...props} className="flex flex-col">
+      <label
+        htmlFor={id}
+        className="mb-1 block overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium text-black text-opacity-90"
+      >
+        {title}
+      </label>
+      <div className="flex h-9 items-center">{children}</div>
+    </div>
+  );
+}

packages/ui/element.tsx

@@ -1,33 +0,0 @@
-import { cn } from './utils';
-import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
-import type { PropsWithChildren } from 'react';
-import { forwardRef } from 'react';
-
-const wrapperVariants = cva('flex flex-col');
-
-export type DivProps = React.HTMLAttributes<HTMLDivElement> &
-  VariantProps<typeof wrapperVariants> &
-  PropsWithChildren;
-
-export const Wrapper = forwardRef<HTMLDivElement, DivProps>(
-  ({ children, className, ...props }, ref) => (
-    <div {...props} className={cn(wrapperVariants({ className }))} ref={ref}>
-      {children}
-    </div>
-  )
-);
-
-const titleVariants = cva(
-  'mb-1 block overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium text-black text-opacity-90'
-);
-
-export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
-
-export const Title = forwardRef<HTMLLabelElement, LabelProps>(
-  ({ className, htmlFor, title, ...props }, ref) => (
-    <label {...props} htmlFor={htmlFor} className={cn(titleVariants({ className }))} ref={ref}>
-      {title}
-    </label>
-  )
-);

packages/ui/index.tsx

@@ -1,6 +1,7 @@
 export * from './background';
 export * from './button';
+export * from './checkbox';
+export * from './container';
 export * from './content';
-export * from './element';
 export * from './header';
 export * from './input';

packages/ui/input.tsx

@@ -11,11 +11,5 @@ export type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
   VariantProps<typeof variants>;
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => (
-  <input
+  <input ref={ref} type="text" id={props.id} className={cn(variants({ className }))} {...props} />
-    ref={ref}
-    type={props.type}
-    id={props.id}
-    className={cn(variants({ className }))}
-    {...props}
-  />
 ));

yarn.lock

@@ -710,6 +710,13 @@
   dependencies:
     tslib "^2.4.0"
 
+"@tailwindcss/forms@^0.5.6":
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.6.tgz#29c6c2b032b363e0c5110efed1499867f6d7e868"
+  integrity sha512-Fw+2BJ0tmAwK/w01tEFL5TiaJBX1NLT1/YbWgvm7ws3Qcn11kiXxzNTEQDMs5V3mQemhB56l3u0i9dwdzSQldA==
+  dependencies:
+    mini-svg-data-uri "^1.2.3"
+
 "@tootallnate/quickjs-emscripten@^0.23.0":
   version "0.23.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz#db4ecfd499a9765ab24002c3b696d02e6d32a12c"
@@ -4001,6 +4008,11 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-svg-data-uri@^1.2.3:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
 minimatch@4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-4.2.3.tgz#b4dcece1d674dee104bb0fb833ebb85a78cbbca6"