@spark-ui/form-field - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log
 
+# [0.5.0](https://github.com/adevinta/spark/compare/@spark-ui/form-field@0.4.1...@spark-ui/form-field@0.5.0) (2023-06-21)
+
+### Features
+
+- **form-field:** add form field component states ([eb15c09](https://github.com/adevinta/spark/commit/eb15c094094fdbc1b4c18233fe705f5f49186496))
+- **form-field:** add validation state support ([1e45c02](https://github.com/adevinta/spark/commit/1e45c0214cfd8d12bc455421a27fb569f76386d3))
+
 ## [0.4.1](https://github.com/adevinta/spark/compare/@spark-ui/form-field@0.4.0...@spark-ui/form-field@0.4.1) (2023-06-21)
@@ -8,0 +15,0 @@

dist/FormField.d.ts

 import { ComponentPropsWithoutRef } from 'react';
 import { FormFieldContextState } from './FormFieldContext';
-export interface FormFieldProps extends ComponentPropsWithoutRef<'div'>, Pick<FormFieldContextState, 'name' | 'isRequired' | 'isInvalid'> {
+export interface FormFieldProps extends ComponentPropsWithoutRef<'div'>, Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {
     /**
@@ -5,0 +5,0 @@ * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

dist/FormFieldContext.d.ts

@@ -19,2 +19,6 @@ export interface FormFieldContextState {
     /**
+     * The validation state of the input.
+     */
+    state?: 'error' | 'success' | 'alert';
+    /**
      * If true, the form field will be invalid.
@@ -21,0 +25,0 @@ */

dist/FormFieldErrorMessage.d.ts

@@ -1,3 +0,3 @@
-import { FormFieldMessageProps } from './FormFieldMessage';
-export type FormFieldErrorMessageProps = FormFieldMessageProps;
-export declare const FormFieldErrorMessage: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+import { FormFieldStateMessageProps } from './FormFieldStateMessage';
+export type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'>;
+export declare const FormFieldErrorMessage: import("react").ForwardRefExoticComponent<FormFieldErrorMessageProps & import("react").RefAttributes<HTMLSpanElement>>;

dist/FormFieldProvider.d.ts

 import { ReactNode } from 'react';
 import { FormFieldContextState } from './FormFieldContext';
-export interface FormFieldProviderProps extends Pick<FormFieldContextState, 'id' | 'name' | 'isInvalid' | 'isRequired'> {
+export interface FormFieldProviderProps extends Pick<FormFieldContextState, 'id' | 'name' | 'state' | 'isRequired'> {
     children: ReactNode;
 }
 export declare const FormFieldProvider: {
-    ({ id, name, isInvalid, isRequired, children, }: FormFieldProviderProps): JSX.Element;
+    ({ id, name, state, isRequired, children, }: FormFieldProviderProps): JSX.Element;
     displayName: string;
 };

dist/index.d.ts

 import { FC } from 'react';
-import { type FormFieldProps } from './FormField';
+import { FormFieldProps } from './FormField';
+import { FormFieldAlertMessage } from './FormFieldAlertMessage';
+import { FormFieldControl } from './FormFieldControl';
 import { FormFieldErrorMessage } from './FormFieldErrorMessage';
@@ -7,7 +9,11 @@ import { FormFieldHelperMessage } from './FormFieldHelperMessage';
 import { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator';
-import { FormFieldState } from './FormFieldState';
+import { FormFieldStateMessage } from './FormFieldStateMessage';
+import { FormFieldSuccessMessage } from './FormFieldSuccessMessage';
 export { type FormFieldProps } from './FormField';
+export { type FormFieldStateMessageProps } from './FormFieldStateMessage';
+export { type FormFieldControl, useFormFieldControl } from './FormFieldControl';
+export { type FormFieldHelperMessageProps } from './FormFieldHelperMessage';
+export { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage';
+export { type FormFieldAlertMessageProps } from './FormFieldAlertMessage';
 export { type FormFieldErrorMessageProps } from './FormFieldErrorMessage';
-export { type FormFieldState, useFormFieldState } from './FormFieldState';
-export { type FormFieldHelperMessageProps } from './FormFieldHelperMessage';
 export { type FormFieldLabelProps } from './FormFieldLabel';
@@ -17,3 +23,6 @@ export { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator';
     Label: typeof FormFieldLabel;
-    State: typeof FormFieldState;
+    Control: typeof FormFieldControl;
+    StateMessage: typeof FormFieldStateMessage;
+    SuccessMessage: typeof FormFieldSuccessMessage;
+    AlertMessage: typeof FormFieldAlertMessage;
     ErrorMessage: typeof FormFieldErrorMessage;
@@ -20,0 +29,0 @@ HelperMessage: typeof FormFieldHelperMessage;

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),N=require("@radix-ui/react-id"),y=require("@spark-ui/slot"),m=require("class-variance-authority"),x=require("@spark-ui/label"),g=e.createContext(null),R=()=>{const a=e.useContext(g);if(!a)throw Error("useFormField must be used within a FormField provider");return a},M=({id:a,name:r,isInvalid:i,isRequired:s,children:l})=>{const d=N.useId(),[o,t]=e.useState([]),n=o.length>0?o.join(" "):void 0,c=e.useCallback(F=>{t(f=>[...f,F])},[]),u=e.useCallback(F=>{t(f=>f.filter(C=>C!==F))},[]),w=e.useMemo(()=>({id:a,labelId:d,name:r,isInvalid:i,isRequired:s,description:n,onMessageIdAdd:c,onMessageIdRemove:u}),[a,d,r,n,i,s,c,u]);return e.createElement(g.Provider,{value:w},l)};M.displayName="FormFieldProvider";const h=e.forwardRef(({className:a,name:r,isInvalid:i=!1,isRequired:s=!1,asChild:l=!1,...d},o)=>{const t=N.useId(),n=l?y.Slot:"div";return e.createElement(M,{id:t,name:r,isRequired:s,isInvalid:i},e.createElement(n,{ref:o,"data-spark-component":"form-field",className:m.cx(a,"flex flex-col gap-sm"),...d}))});h.displayName="FormField";const v=e.forwardRef(({id:a,className:r,...i},s)=>{const{onMessageIdAdd:l,onMessageIdRemove:d}=R(),o=N.useId(),t=a||o;return e.useEffect(()=>(l(t),()=>{d(t)}),[t,l,d]),e.createElement("span",{ref:s,id:t,"data-spark-component":"form-field-message",className:m.cx(r,"text-caption"),...i})});v.displayName="FormField.Message";const b=e.forwardRef(({className:a,...r},i)=>{const{isInvalid:s}=R();return s?e.createElement(v,{ref:i,"data-spark-component":"form-field-error-message","aria-live":"polite",className:m.cx(a,"text-error"),...r}):null});b.displayName="FormField.ErrorMessage";const q=e.forwardRef(({className:a,...r},i)=>e.createElement(v,{ref:i,"data-spark-component":"form-field-helper-message",className:m.cx(a,"text-neutral"),...r}));q.displayName="FormField.HelperMessage";const p=e.forwardRef((a,r)=>e.createElement(x.Label.RequiredIndicator,{ref:r,...a}));p.displayName="FormField.RequiredIndicator";const E=e.forwardRef(({htmlFor:a,className:r,children:i,requiredIndicator:s=e.createElement(p,null),asChild:l,...d},o)=>{const t=R(),{labelId:n,isRequired:c}=t,u=l?void 0:a||t.id;return e.createElement(x.Label,{ref:o,id:n,"data-spark-component":"form-field-label",htmlFor:u,className:m.cx(r,"flex items-center gap-sm"),asChild:l,...d},e.createElement(y.Slottable,null,i),c&&s)});E.displayName="FormField.Label";const S=()=>{const{id:a,name:r,description:i,labelId:s,isRequired:l,isInvalid:d}=e.useContext(g)||{};return{id:a,name:r,description:i,labelId:s,isRequired:l,isInvalid:d}},I=({children:a})=>{const{id:r,name:i,isInvalid:s,labelId:l,isRequired:d,description:o}=S();return e.createElement(e.Fragment,null,a({id:r,labelId:l,name:i,isRequired:d,isInvalid:s,description:o}))};I.displayName="FormField.State",E.displayName="FormField.Label",I.displayName="FormField.State",b.displayName="FormField.ErrorMessage",q.displayName="FormField.HelperMessage",p.displayName="FormField.RequiredIndicator";const k=Object.assign(h,{Label:E,State:I,ErrorMessage:b,HelperMessage:q,RequiredIndicator:p});exports.FormField=k,exports.useFormFieldState=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),M=require("@radix-ui/react-id"),h=require("@spark-ui/slot"),c=require("class-variance-authority"),C=require("@spark-ui/label"),R=e.createContext(null),y=()=>{const a=e.useContext(R);if(!a)throw Error("useFormField must be used within a FormField provider");return a},w=({id:a,name:s,state:r,isRequired:t,children:d})=>{const o=M.useId(),[i,l]=e.useState([]),m=i.length>0?i.join(" "):void 0,u=e.useCallback(F=>{l(g=>[...g,F])},[]),f=e.useCallback(F=>{l(g=>g.filter(L=>L!==F))},[]),A=e.useMemo(()=>({id:a,labelId:o,name:s,state:r,isRequired:t,isInvalid:r==="error",description:m,onMessageIdAdd:u,onMessageIdRemove:f}),[a,o,s,m,r,t,u,f]);return e.createElement(R.Provider,{value:A},d)};w.displayName="FormFieldProvider";const S=e.forwardRef(({className:a,name:s,state:r,isRequired:t=!1,asChild:d=!1,...o},i)=>{const l=M.useId(),m=d?h.Slot:"div";return e.createElement(w,{id:l,name:s,isRequired:t,state:r},e.createElement(m,{ref:i,"data-spark-component":"form-field",className:c.cx(a,"flex flex-col gap-sm"),...o}))});S.displayName="FormField";const E=e.forwardRef(({id:a,className:s,...r},t)=>{const{onMessageIdAdd:d,onMessageIdRemove:o}=y(),i=M.useId(),l=a||i;return e.useEffect(()=>(d(l),()=>{o(l)}),[l,d,o]),e.createElement("span",{ref:t,id:l,"data-spark-component":"form-field-message",className:c.cx(s,"text-caption"),...r})});E.displayName="FormField.Message";const j=c.cva([],{variants:{state:{alert:["text-alert"],error:["text-error"],success:["text-success"]}}}),n=e.forwardRef(({className:a,state:s,...r},t)=>y().state!==s?null:e.createElement(E,{ref:t,"data-spark-component":"form-field-state-message","aria-live":"polite",className:j({className:a,state:s}),...r}));n.displayName="FormField.StateMessage";const I=e.forwardRef((a,s)=>e.createElement(n,{ref:s,"data-spark-component":"form-field-alert-message",state:"alert",...a}));I.displayName="FormField.AlertMessage";const k=()=>{const{id:a,name:s,description:r,state:t,labelId:d,isInvalid:o,isRequired:i}=e.useContext(R)||{};return{id:a,name:s,description:r,state:t,labelId:d,isInvalid:o,isRequired:i}},b=({children:a})=>{const s=k();return e.createElement(e.Fragment,null,a(s))};b.displayName="FormField.Control";const q=e.forwardRef((a,s)=>e.createElement(n,{ref:s,"data-spark-component":"form-field-error-message",state:"error",...a}));q.displayName="FormField.ErrorMessage";const v=e.forwardRef(({className:a,...s},r)=>e.createElement(E,{ref:r,"data-spark-component":"form-field-helper-message",className:c.cx(a,"text-neutral"),...s}));v.displayName="FormField.HelperMessage";const p=e.forwardRef((a,s)=>e.createElement(C.Label.RequiredIndicator,{ref:s,...a}));p.displayName="FormField.RequiredIndicator";const x=e.forwardRef(({htmlFor:a,className:s,children:r,requiredIndicator:t=e.createElement(p,null),asChild:d,...o},i)=>{const l=y(),{labelId:m,isRequired:u}=l,f=d?void 0:a||l.id;return e.createElement(C.Label,{ref:i,id:m,"data-spark-component":"form-field-label",htmlFor:f,className:c.cx(s,"flex items-center gap-sm"),asChild:d,...o},e.createElement(h.Slottable,null,r),u&&t)});x.displayName="FormField.Label";const N=e.forwardRef((a,s)=>e.createElement(n,{ref:s,"data-spark-component":"form-field-success-message",state:"success",...a}));N.displayName="FormField.SuccessMessage",x.displayName="FormField.Label",b.displayName="FormField.Control",n.displayName="FormField.StateMessage",N.displayName="FormField.SuccessMessage",I.displayName="FormField.AlertMessage",q.displayName="FormField.ErrorMessage",v.displayName="FormField.HelperMessage",p.displayName="FormField.RequiredIndicator";const H=Object.assign(S,{Label:x,Control:b,StateMessage:n,SuccessMessage:N,AlertMessage:I,ErrorMessage:q,HelperMessage:v,RequiredIndicator:p});exports.FormField=H,exports.useFormFieldControl=k;

package.json

 {
   "name": "@spark-ui/form-field",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Provide context to your form elements",
@@ -34,3 +34,3 @@ "publishConfig": {
   },
-  "gitHead": "367746eb8895988990bf351a9dd1ac3823b9f3af"
+  "gitHead": "4a08c52ce3a9717cb03603a75e4c3cbb4bcea011"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22272

increased by20.96%

Number of package files

21

increased by23.53%

Lines of code

222

increased by19.35%

No dependency changes