From 386acf4b039652cd690cb9c88f83b3a21fef9be8 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Thu, 9 Nov 2023 14:43:06 +0300
Subject: [PATCH] apps/ui: add element wrapper

---
 apps/web/app/ius/[slug]/page.tsx | 21 ++++++++++----------
 packages/ui/element.tsx          | 33 ++++++++++++++++++++++++++++++++
 packages/ui/index.tsx            |  5 +++--
 packages/ui/input.tsx            | 22 +++++++--------------
 4 files changed, 54 insertions(+), 27 deletions(-)
 create mode 100644 packages/ui/element.tsx

diff --git a/apps/web/app/ius/[slug]/page.tsx b/apps/web/app/ius/[slug]/page.tsx
index c8ba01c..a5f8460 100644
--- a/apps/web/app/ius/[slug]/page.tsx
+++ b/apps/web/app/ius/[slug]/page.tsx
@@ -1,6 +1,6 @@
 import * as apiIUS from '@/api/ius/query';
 import type { Request } from '@/api/ius/types';
-import { Background, Button, Content, Input } from 'ui';
+import { Background, Button, Content, Input, Title, Wrapper } from 'ui';
 
 type Props = {
   params: { slug: string };
@@ -18,15 +18,16 @@ export default async function Page(props: Props) {
       <Background>
         <div className="grid auto-rows-auto grid-cols-2 gap-2 ">
           {Object.keys(metaData).map((name) => (
-            <Input
-              key={name}
-              id={name}
-              title={metaData[name].label}
-              type="text"
-              required={metaData[name].required}
-              defaultValue={data[name]}
-              disabled={metaData[name].disabled}
-            />
+            <Wrapper key={name}>
+              <Title htmlFor={name} title={metaData[name].label} />
+              <Input
+                id={name}
+                type="text"
+                required={metaData[name].required}
+                defaultValue={data[name]}
+                disabled={metaData[name].disabled}
+              />
+            </Wrapper>
           ))}
         </div>
         <div className="grid grid-cols-3 gap-5 pt-3">
diff --git a/packages/ui/element.tsx b/packages/ui/element.tsx
new file mode 100644
index 0000000..79787bf
--- /dev/null
+++ b/packages/ui/element.tsx
@@ -0,0 +1,33 @@
+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>
+  )
+);
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 3ed7db1..70cb42d 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -1,5 +1,6 @@
 export * from './background';
 export * from './button';
 export * from './content';
-export * from './header'
-export * from './input'
\ No newline at end of file
+export * from './element';
+export * from './header';
+export * from './input';
diff --git a/packages/ui/input.tsx b/packages/ui/input.tsx
index c65b4ca..4999878 100644
--- a/packages/ui/input.tsx
+++ b/packages/ui/input.tsx
@@ -11,19 +11,11 @@ export type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
   VariantProps<typeof variants>;
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => (
-  <div className="flex flex-col">
-    <label
-      htmlFor={props.id}
-      className="mb-1 block overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium text-black text-opacity-90"
-    >
-      {props.title}
-    </label>
-    <input
-      ref={ref}
-      type={props.type}
-      id={props.id}
-      className={cn(variants({ className }))}
-      {...props}
-    />
-  </div>
+  <input
+    ref={ref}
+    type={props.type}
+    id={props.id}
+    className={cn(variants({ className }))}
+    {...props}
+  />
 ));