feat: expose form field context with id and skin

packages/components/form-field/src/FormField.tsx

@@ -0,0 +1,69 @@
+import React, { useMemo } from "react";
+import styles from "./styles/index.module.scss";
+import classNames from "classnames";
+import { Text } from "@react-ck/text";
+import { FormFieldContext, FormFieldContextProps } from "./context";
+
+export interface FormFieldProps
+  extends Pick<React.HTMLAttributes<HTMLDivElement>, "children" | "className"> {
+  /** Specifies the visual style of the form-field  */
+  skin?: FormFieldContextProps["skin"];
+  /** The main label for the form field */
+  label?: React.ReactNode;
+  /** The description text for the form field */
+  description?: React.ReactNode;
+  /** The validation message text */
+  validationMessage?: React.ReactNode;
+}
+
+/**
+ * FormField is a component that provides a consistent layout and input peripherals.
+ *
+ * **WARNING**: This component is used as an internal utility - if you want to render an element such as an input, use its component directly
+ * @param props - {@link FormFieldProps}
+ * @returns a React element
+ */
+
+export const FormField = ({
+  skin = "default",
+  label,
+  description,
+  validationMessage,
+  children,
+  className,
+  ...otherProps
+}: Readonly<FormFieldProps>): React.ReactElement => {
+  const id = React.useId();
+
+  const context = useMemo<FormFieldContextProps>(
+    () => ({
+      skin,
+      id,
+    }),
+    [id, skin],
+  );
+
+  return (
+    <FormFieldContext.Provider value={context}>
+      <div {...otherProps} className={classNames(styles.root, styles[skin], className)}>
+        {label ? (
+          <Text variation="small" margin="none" as={<label htmlFor={id}>{label}</label>} />
+        ) : null}
+
+        <div className={styles.content}>{children}</div>
+
+        {description ? (
+          <Text variation="small" margin="none">
+            {description}
+          </Text>
+        ) : null}
+
+        {validationMessage ? (
+          <Text className={styles.validation_message} variation="small" margin="none">
+            {validationMessage}
+          </Text>
+        ) : null}
+      </div>
+    </FormFieldContext.Provider>
+  );
+};

packages/components/form-field/src/context.ts

@@ -0,0 +1,13 @@
+import React from "react";
+
+export interface FormFieldContextProps {
+  skin: "default" | "negative" | "average" | "positive" | "ghost";
+  id: string;
+}
+
+export const FormFieldContext = React.createContext<FormFieldContextProps>({
+  id: "",
+  skin: "default",
+});
+
+export const useFormFieldContext = (): FormFieldContextProps => React.useContext(FormFieldContext);

packages/components/form-field/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./FormField";
+
+export { useFormFieldContext } from "./context";

packages/components/form-field/src/styles/_variables.scss

@@ -3,6 +3,10 @@ $form-field-styles: (
     border-color: get-color(neutral-light-2),
     color: get-color(neutral-dark-4),
   ),
+  ghost: (
+    border-color: transparent,
+    color: get-color(neutral-dark-4),
+  ),
   negative: (
     border-color: get-color(status-negative-dark),
     color: get-color(status-negative-dark),