apps/ui: add element wrapper

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
+            <Wrapper key={name}>
-              key={name}
+              <Title htmlFor={name} title={metaData[name].label} />
-              id={name}
+              <Input
-              title={metaData[name].label}
+                id={name}
-              type="text"
+                type="text"
-              required={metaData[name].required}
+                required={metaData[name].required}
-              defaultValue={data[name]}
+                defaultValue={data[name]}
-              disabled={metaData[name].disabled}
+                disabled={metaData[name].disabled}
-            />
+              />
+            </Wrapper>
           ))}
         </div>
         <div className="grid grid-cols-3 gap-5 pt-3">

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>
+  )
+);

packages/ui/index.tsx

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

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">
+  <input
-    <label
+    ref={ref}
-      htmlFor={props.id}
+    type={props.type}
-      className="mb-1 block overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium text-black text-opacity-90"
+    id={props.id}
-    >
+    className={cn(variants({ className }))}
-      {props.title}
+    {...props}
-    </label>
+  />
-    <input
-      ref={ref}
-      type={props.type}
-      id={props.id}
-      className={cn(variants({ className }))}
-      {...props}
-    />
-  </div>
 ));