Merge pull request #81 from 1Byte-Software/develop

Update version 1.13.0

Author: kenn3thx

.gitignore

@@ -1,2 +1,4 @@
 node_modules
 dist
+*.zip
+*.tgz

CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.13.0]
+
+### Added
+
+-   Support `requiredResolver` for `Form`, `Form.Item` and `Form.ItemControl` components.
+-   Support `rdNotificationInstance` with `App` context component.
+
 ## [1.12.4]
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
     "name": "1byte-react-design",
-    "version": "1.12.4",
+    "version": "1.13.0",
     "description": "A simple React UI library",
     "main": "dist/index.js",
     "module": "dist/index.js",

src/molecules/Form/Form.tsx

@@ -6,9 +6,20 @@ import { FormList } from './FormList';
 import { FormProvider } from './FormProvider';
 import { FormStyles } from './styles';
 import { RdFormComponent, RdFormCompoundedComponent, RdFormProps } from './types';
+import { rdFormContext } from './context';
 
 export const FormInternal: RdFormComponent = (props: RdFormProps) => {
-    return <FormStyles {...props} />;
+    const { requiredResolver, ...formProps } = props;
+
+    return (
+        <rdFormContext.Provider
+            value={{
+                requiredResolver,
+            }}
+        >
+            <FormStyles {...formProps} />
+        </rdFormContext.Provider>
+    );
 };
 
 export const Form = FormInternal as RdFormCompoundedComponent;

src/molecules/Form/FormItem.tsx

@@ -1,11 +1,19 @@
+import { useContext } from 'react';
+import { rdFormContext } from './context';
 import { FormItemStyles } from './styles';
 import { RdFormItemProps } from './types';
 
 export const FormItem = ({ errorMessage, ...antdProps }: RdFormItemProps) => {
+    const ctx = useContext(rdFormContext);
+
+    const required =
+        antdProps.required ??
+        (ctx?.requiredResolver ? ctx.requiredResolver(antdProps.name) : undefined);
+
     if (errorMessage) {
         antdProps.validateStatus = 'error';
         antdProps.help = errorMessage;
     }
 
-    return <FormItemStyles {...antdProps} />;
+    return <FormItemStyles {...antdProps} required={required} />;
 };

src/molecules/Form/FormItemControl.tsx

@@ -117,6 +117,8 @@ export const FormItemControl = <
         return (
             <Form.Item
                 {...props}
+                name={name as string | undefined} // Required for Antd internal state management and validation
+                initialValue={field.value} // Initial value for Antd (useful on first render)
                 validateStatus={fieldState.invalid ? 'error' : undefined}
                 help={fieldState.error?.message}
             >

src/molecules/Form/context/index.ts

@@ -0,0 +1,5 @@
+// context.ts
+import { createContext } from 'react';
+import { RdFormContextValue } from './types';
+
+export const rdFormContext = createContext<RdFormContextValue | null>(null);

src/molecules/Form/context/types.ts

@@ -0,0 +1,3 @@
+export interface RdFormContextValue {
+    requiredResolver?: (name: string) => boolean;
+}

src/molecules/Form/types.ts

@@ -31,7 +31,39 @@ export type FormComponentToken = ComponentToken & {};
 //#endregion
 
 //#region Define extended types
-type FormPropsExtend = {};
+type FormPropsExtend = {
+    /**
+     * Determines whether a `Form.Item` should be marked as required.
+     *
+     * This function receives the field name (the `name` prop of `Form.Item`)
+     * and should return `true` if the field is required, or `false` otherwise.
+     *
+     * This allows consumers to define custom rules for determining required
+     * status globally at the Form level instead of configuring each Form.Item.
+     *
+     * @example
+     * ```tsx
+     * <Form
+     *   requiredResolver={(name) => ["username", "password"].includes(name)}
+     * >
+     *   <Form.Item name="username" label="Username">
+     *     <Input />
+     *   </Form.Item>
+     *
+     *   <Form.Item name="email" label="Email">
+     *     <Input />
+     *   </Form.Item>
+     * </Form>
+     * ```
+     *
+     * In the example above, only "username" and "password" will be treated
+     * as required fields automatically.
+     *
+     * @param name - The name of the field being evaluated.
+     * @returns `true` if the field should be required, otherwise `false`.
+     */
+    requiredResolver?: (name: string) => boolean;
+};
 
 type FormItemPropsExtend = {
     /**

src/molecules/Notification/Notification.tsx

@@ -3,16 +3,23 @@ import { RdNotificationGlobalConfig, RdNotificationProps, RdNotificationStaticFn
 
 let notification: RdNotificationProps = {} as RdNotificationProps;
 
-const rdNotificationStaticFunc: RdNotificationStaticFn = (rdNotificationArgsProps, type) => {
+/**
+ * This is Internal Function. Do not use in your production.
+ */
+export const __rdNotificationStaticFunc: RdNotificationStaticFn = (
+    rdNotificationArgsProps,
+    notificationInstance
+) => {
     let message = rdNotificationArgsProps.message;
+
     if (notification.globalConfigExtend.defaultMessage) {
         typeof notification.globalConfigExtend.defaultMessage === 'string' &&
             (message = notification.globalConfigExtend.defaultMessage);
 
         if (typeof notification.globalConfigExtend.defaultMessage === 'object') {
             const { success, info, warning, error } =
                 notification.globalConfigExtend.defaultMessage;
-            switch (type) {
+            switch (rdNotificationArgsProps.type) {
                 case 'success':
                     message = success || message;
                     break;
@@ -35,9 +42,11 @@ const rdNotificationStaticFunc: RdNotificationStaticFn = (rdNotificationArgsProp
         ...rdNotificationArgsProps,
     };
 
-    antdNotification.open({
+    const currentNotification = notificationInstance ?? antdNotification;
+
+    currentNotification.open({
         ...notificationArgsProps,
-        type,
+        type: rdNotificationArgsProps.type,
     });
 };
 
@@ -54,19 +63,31 @@ notification.destroy = config => {
     antdNotification.destroy(config);
 };
 notification.open = config => {
-    rdNotificationStaticFunc(config);
+    __rdNotificationStaticFunc(config);
 };
 notification.error = config => {
-    rdNotificationStaticFunc(config, 'error');
+    __rdNotificationStaticFunc({
+        ...config,
+        type: 'error',
+    });
 };
 notification.info = config => {
-    rdNotificationStaticFunc(config, 'info');
+    __rdNotificationStaticFunc({
+        ...config,
+        type: 'info',
+    });
 };
 notification.success = config => {
-    rdNotificationStaticFunc(config, 'success');
+    __rdNotificationStaticFunc({
+        ...config,
+        type: 'success',
+    });
 };
 notification.warning = config => {
-    rdNotificationStaticFunc(config, 'warning');
+    __rdNotificationStaticFunc({
+        ...config,
+        type: 'warning',
+    });
 };
 notification.useNotification = antdNotification.useNotification;
 notification._InternalPanelDoNotUseOrYouWillBeFired =