@weareconceptstudio/form 0.0.0 → 0.0.2

package/dist/checkbox/index.d.ts

@@ -1,3 +1,3 @@
 export default Checkbox;
 declare const Checkbox: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from 'react';
+import * as React from "react";

package/dist/checkbox/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-const Checkbox = React.forwardRef(({ type = 'checkbox', children }, forwardRef) => {
+const Checkbox = React.forwardRef(({ type = 'checkbox', children, ...restProps }, forwardRef) => {
     return (React.createElement("label", null,
-        React.createElement("input", { type: type, ...forwardRef }),
+        React.createElement("input", { type: type, ...forwardRef, ...restProps }),
         children !== undefined && React.createElement("span", null, children)));
 });
 if (process.env.NODE_ENV !== 'production') {

package/dist/color-picker/index.d.ts

@@ -1,3 +1,3 @@
 export default ColorPicker;
 declare const ColorPicker: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from 'react';
+import * as React from "react";

package/dist/date-picker/index.d.ts

@@ -1,3 +1,3 @@
 export default DatePicker;
 declare const DatePicker: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from 'react';
+import * as React from "react";

package/dist/form/BaseForm.d.ts

@@ -1,5 +1,5 @@
 export default BaseForm;
-declare function BaseForm({ initialValues: defaultValues, values, children, onSubmit, layout, mode, reValidateMode, errors, resetOptions, criteriaMode, shouldFocusError, delayError, shouldUseNativeValidation, shouldUnregister, globalPrefixCls, theme, }: {
+declare function BaseForm({ initialValues: defaultValues, values, children, onSubmit, layout, mode, reValidateMode, errors, resetOptions, criteriaMode, shouldFocusError, delayError, shouldUseNativeValidation, shouldUnregister, }: {
     initialValues: any;
     values: any;
     children: any;
@@ -14,7 +14,5 @@ declare function BaseForm({ initialValues: defaultValues, values, children, onSu
     delayError: any;
     shouldUseNativeValidation: any;
     shouldUnregister: any;
-    globalPrefixCls: any;
-    theme: any;
 }): React.JSX.Element;
-import * as React from 'react';
+import * as React from "react";

package/dist/form/BaseForm.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { FormProvider, useForm } from "react-hook-form";
 import styled from 'styled-components';
-import ConfigProvider from '../config-provider';
 // initialValues: object || async () => fetch('/api-endpoint')
 // values: object
 // children: React elements
@@ -47,7 +46,7 @@ const StyledForm = styled.form `
          margin-bottom: 24px;    
     }
 `;
-const BaseForm = ({ initialValues: defaultValues, values, children, onSubmit, layout = 'vertical', mode = 'onChange', reValidateMode, errors, resetOptions, criteriaMode, shouldFocusError, delayError, shouldUseNativeValidation, shouldUnregister, globalPrefixCls, theme, }) => {
+const BaseForm = ({ initialValues: defaultValues, values, children, onSubmit, layout = 'vertical', mode = 'onChange', reValidateMode, errors, resetOptions, criteriaMode, shouldFocusError, delayError, shouldUseNativeValidation, shouldUnregister, }) => {
     const methods = useForm({
         defaultValues,
         values,
@@ -61,8 +60,7 @@ const BaseForm = ({ initialValues: defaultValues, values, children, onSubmit, la
         shouldUseNativeValidation,
         shouldUnregister,
     });
-    return (React.createElement(ConfigProvider, { globalPrefixCls: globalPrefixCls, theme: theme },
-        React.createElement(FormProvider, { ...methods },
-            React.createElement(StyledForm, { onSubmit: methods.handleSubmit(onSubmit), className: layout }, children))));
+    return (React.createElement(FormProvider, { ...methods },
+        React.createElement(StyledForm, { onSubmit: methods.handleSubmit(onSubmit), className: layout }, children)));
 };
 export default BaseForm;

package/dist/form/Item/index.d.ts

@@ -6,6 +6,6 @@ declare function FormItem({ label, name, children, rules }: {
     rules?: {};
 }): React.JSX.Element;
 declare namespace FormItem {
-    let displayName: string;
+    const displayName: string;
 }
-import React from 'react';
+import React from "react";

package/dist/form/Item/index.js

@@ -4,7 +4,7 @@ import { useFormContext } from "react-hook-form";
 //* Components
 import ErrorMessage from '../../error-message';
 const FormItem = ({ label, name, children, rules = {} }) => {
-    const { register, getValues, setValue } = useFormContext();
+    const { register, getValues } = useFormContext();
     const innerRef = register(name, rules);
     return (React.createElement("div", { className: "form-item" },
         React.createElement("div", { className: "form-item-row" },
@@ -12,8 +12,6 @@ const FormItem = ({ label, name, children, rules = {} }) => {
                 React.createElement("label", { htmlFor: name }, label)),
             React.createElement("div", { className: 'form-item-control' }, React.cloneElement(children, {
                 ref: innerRef,
-                getValues,
-                setValue,
                 name,
                 value: getValues()[name]
             })),

package/dist/form/index.d.ts

@@ -1,5 +1,5 @@
 export default Form;
-declare const Form: ({ initialValues: defaultValues, values, children, onSubmit, layout, mode, reValidateMode, errors, resetOptions, criteriaMode, shouldFocusError, delayError, shouldUseNativeValidation, shouldUnregister, globalPrefixCls, theme, }: {
+declare const Form: ({ initialValues: defaultValues, values, children, onSubmit, layout, mode, reValidateMode, errors, resetOptions, criteriaMode, shouldFocusError, delayError, shouldUseNativeValidation, shouldUnregister, }: {
     initialValues: any;
     values: any;
     children: any;
@@ -14,6 +14,4 @@ declare const Form: ({ initialValues: defaultValues, values, children, onSubmit,
     delayError: any;
     shouldUseNativeValidation: any;
     shouldUnregister: any;
-    globalPrefixCls: any;
-    theme: any;
 }) => import("react").JSX.Element;

package/dist/input/BaseInput/index.d.ts

@@ -1,4 +1,4 @@
 export const InputContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export default BaseInput;
-import * as React from 'react';
+import * as React from "react";
 declare const BaseInput: React.ForwardRefExoticComponent<React.RefAttributes<any>>;

package/dist/input/Input.d.ts

@@ -1,3 +1,3 @@
 export default Input;
 declare const Input: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from 'react';
+import * as React from "react";

package/dist/input/Input.js

@@ -11,8 +11,8 @@ const StyledInput = styled.input `
     outline: none;
 `;
 const Input = React.forwardRef((props, forwardRef) => {
-    const { autoComplete, onChange, onFocus, onBlur, onPressEnter, onKeyDown, onKeyUp, disabled, className, type = 'text', value, } = props;
+    const { autoComplete, onChange, onFocus, onBlur, onPressEnter, onKeyDown, onKeyUp, disabled, className, type = 'text', placeholder, value, } = props;
     return (React.createElement(BaseInput, { ...props, value: value, disabled: disabled },
-        React.createElement(StyledInput, { type: type, autoComplete: autoComplete, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onPressEnter: onPressEnter, onKeyDown: onKeyDown, onKeyUp: onKeyUp, disabled: disabled, className: className, ...forwardRef })));
+        React.createElement(StyledInput, { type: type, autoComplete: autoComplete, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onPressEnter: onPressEnter, onKeyDown: onKeyDown, onKeyUp: onKeyUp, disabled: disabled, className: className, placeholder: placeholder, ...forwardRef })));
 });
 export default Input;

package/dist/input/Number/index.d.ts

@@ -1,3 +1,3 @@
 export default Number;
 declare const Number: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from 'react';
+import * as React from "react";

package/dist/input/Password/icons.js

@@ -1,6 +1,6 @@
 import React from "react";
-export const eyeIcon = React.createElement("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": "eye-invisible", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" },
-    React.createElement("path", { d: "M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z" }),
-    React.createElement("path", { d: "M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z" }));
-export const openEye = React.createElement("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": "eye", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" },
-    React.createElement("path", { d: "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" }));
+export const eyeIcon = React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32" },
+    React.createElement("path", { d: "M15.817 26.533c-8.133 0-14.267-8.8-14.533-9.2s-0.267-1.067 0-1.6c0.267-0.4 6.667-9.067 14.667-9.067 8.133 0 14.267 8.667 14.533 9.067s0.267 1.067 0 1.6c-0.267 0.4-6.667 9.2-14.667 9.2zM4.083 16.533c1.6 2 6.4 7.333 11.733 7.333 5.467 0 10.267-5.333 11.867-7.333-1.6-2-6.4-7.2-11.733-7.2-5.467 0-10.267 5.2-11.867 7.2z" }),
+    React.createElement("path", { d: "M15.952 22.266c-3.2 0-5.733-2.533-5.733-5.733s2.533-5.733 5.733-5.733c3.2 0 5.733 2.533 5.733 5.733s-2.533 5.733-5.733 5.733zM15.952 13.466c-1.733 0-3.067 1.333-3.067 3.067s1.333 3.067 3.067 3.067c1.733 0 3.067-1.333 3.067-3.067s-1.333-3.067-3.067-3.067z" }));
+export const openEye = React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32" },
+    React.createElement("path", { d: "M29.983 8.366c-0.533-0.4-1.333-0.4-1.867 0.133 0 0.133-5.867 7.067-12.4 7.067s-12.267-7.067-12.267-7.067c-0.4-0.533-1.333-0.667-1.867-0.267-0.533 0.667-0.667 1.467-0.267 2 0.133 0.133 1.733 2.267 4.4 4.267l-2.933 3.067c-0.533 0.533-0.533 1.333 0 1.867 0.267 0.267 0.533 0.4 0.933 0.4s0.667-0.133 0.933-0.4l3.2-3.333c1.867 1.067 4 2 6.4 2.267l-0.4 4.133c-0.133 0.667 0.4 1.333 1.2 1.467h0.133c0.667 0 1.2-0.533 1.333-1.2l0.4-4.533c2.533-0.267 4.8-1.2 6.8-2.4l2.933 3.067c0.267 0.267 0.667 0.4 0.933 0.4s0.667-0.133 0.933-0.4c0.533-0.533 0.533-1.333 0-1.867l-2.667-2.8c2.533-2 4.133-4 4.267-4.133 0.533-0.4 0.4-1.2-0.133-1.733z" }));

package/dist/input/Password/index.d.ts

@@ -1,3 +1,3 @@
 export default Password;
 declare const Password: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from 'react';
+import * as React from "react";

package/dist/input/Password/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { omit } from '@weareconceptstudio/utils';
+import { omit } from '@weareconceptstudio/core';
 import { eyeIcon, openEye } from './icons';
 import Input from '../Input';
 const defaultIconRender = (visible) => visible ? openEye : eyeIcon;

package/dist/input/TextArea/index.d.ts

@@ -1,3 +1,3 @@
 export default TextArea;
 declare const TextArea: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from 'react';
+import * as React from "react";

package/dist/input/index.d.ts

@@ -1,2 +1,2 @@
 export default Input;
-import Input from './Input';
+import Input from "./Input";

package/dist/radio/BaseRadio.d.ts

@@ -1,3 +1,3 @@
 export default Radio;
 declare const Radio: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from 'react';
+import * as React from "react";

package/dist/radio/BaseRadio.js

@@ -5,13 +5,12 @@ const Radio = React.forwardRef(({ children, ...restProps }, forwardRef) => {
     const groupContext = React.useContext(RadioGroupContext);
     const radioProps = {
         ref: forwardRef,
+        ...restProps
     };
     if (groupContext) {
         radioProps.ref = groupContext.forwardRef;
     }
-    return (React.createElement("label", null,
-        React.createElement(Checkbox, { type: 'radio', ...radioProps }),
-        children !== undefined ? React.createElement("span", null, children) : null));
+    return (React.createElement(Checkbox, { type: 'radio', ...radioProps }, children));
 });
 if (process.env.NODE_ENV !== 'production') {
     Radio.displayName = 'Radio';

package/dist/radio/Group.d.ts

@@ -1,3 +1,3 @@
 export default RadioGroup;
 declare const RadioGroup: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from 'react';
+import * as React from "react";

package/dist/radio/context.d.ts

@@ -2,5 +2,5 @@ export const RadioGroupContextProvider: React.Provider<any>;
 export default RadioGroupContext;
 export const RadioOptionTypeContext: React.Context<any>;
 export const RadioOptionTypeContextProvider: React.Provider<any>;
-import * as React from 'react';
+import * as React from "react";
 declare const RadioGroupContext: React.Context<any>;

package/dist/select/index.d.ts

@@ -1,3 +1,3 @@
 export default Select;
 declare const Select: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from 'react';
+import * as React from "react";

package/dist/select/index.js

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import ReactSelect from 'react-select';
+import useFormInstance from '../form/hooks/useFormInstance';
 const Select = React.forwardRef((props, forwardRef) => {
-    const { name, getValues, setValue, multiple = false, allowClear = false, allowSearch = true, disabled = false, loading = false, options = [], } = props;
-    const [val, setVal] = React.useState(getValues()[name] || (multiple ? [] : ''));
+    const { name, multiple = false, allowClear = false, allowSearch = true, disabled = false, loading = false, options = [], } = props;
+    const formInstance = useFormInstance();
+    const [val, setVal] = React.useState(formInstance.getValues()[name] || (multiple ? [] : ''));
     const handleChange = React.useCallback((newVal) => {
         let vals;
         if (multiple) {
@@ -11,7 +13,7 @@ const Select = React.forwardRef((props, forwardRef) => {
         else {
             vals = newVal.value;
         }
-        setValue(name, vals);
+        formInstance.setValue(name, vals);
         setVal(vals);
     }, [name, multiple]);
     return (React.createElement("div", null,

package/dist/upload/index.d.ts

@@ -1,3 +1,3 @@
 export default Upload;
 declare const Upload: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from 'react';
+import * as React from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@weareconceptstudio/form",
-    "version": "0.0.0",
+    "version": "0.0.2",
     "description": "Concept Studio Form",
     "author": "Concept Studio",
     "license": "ISC",
@@ -19,7 +19,7 @@
         "watch": "tsc -m es6 --watch"
     },
     "dependencies": {
-        "@weareconceptstudio/utils": "*",
+        "@weareconceptstudio/core": "*",
         "classnames": "2.5.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",

package/dist/config-provider/cssVariables.d.ts

@@ -1,2 +0,0 @@
-export declare function getStyle(globalPrefixCls: string, theme: any): string;
-export declare function registerTheme(globalPrefixCls: any, theme: any): void;

package/dist/config-provider/cssVariables.js

@@ -1,25 +0,0 @@
-import { warning, canUseDom, updateCSS } from '@weareconceptstudio/utils';
-export function getStyle(globalPrefixCls = 'cs-form', theme) {
-    const variables = {};
-    const fillColor = (colorVal, type) => {
-        variables[`${type}-color`] = colorVal;
-    };
-    if (theme.primaryColor) {
-        fillColor(theme.primaryColor, 'primary');
-    }
-    const cssList = Object.keys(variables).map((key) => `--${globalPrefixCls}-${key}: ${variables[key]};`);
-    return `
-        :root {
-            ${cssList.join('\n')}
-        }
-    `.trim();
-}
-export function registerTheme(globalPrefixCls, theme) {
-    const style = getStyle(globalPrefixCls, theme);
-    if (canUseDom()) {
-        updateCSS(style, 'dynamic-theme');
-    }
-    else {
-        warning(false, 'SSR do not support dynamic theme with css variables.');
-    }
-}

package/dist/config-provider/index.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-export declare const ConfigContext: React.Context<{}>;
-interface ConfigProviderProps {
-    globalPrefixCls?: string;
-    theme?: object;
-    children: React.ReactNode;
-}
-declare const ConfigProvider: {
-    (props: ConfigProviderProps): React.JSX.Element;
-    displayName: string;
-};
-export default ConfigProvider;

package/dist/config-provider/index.js

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { registerTheme } from './cssVariables';
-export const ConfigContext = React.createContext({});
-const ProviderChildren = (props) => {
-    const { globalPrefixCls = 'cs-form', theme, children } = props;
-    if (theme) {
-        registerTheme(globalPrefixCls, theme);
-    }
-    return (React.createElement(ConfigContext.Provider, { value: {
-            globalPrefixCls,
-            theme
-        } }, children));
-};
-const ConfigProvider = (props) => {
-    return React.createElement(ProviderChildren, { ...props });
-};
-if (process.env.NODE_ENV !== 'production') {
-    ConfigProvider.displayName = 'ConfigProvider';
-}
-export default ConfigProvider;