@weareconceptstudio/form 0.1.2 → 0.1.4

package/dist/FormProvider.d.ts

@@ -0,0 +1,7 @@
+export function useFormContext(): any;
+export function FormProvider({ fontFamily, children, selectIcon }: {
+    fontFamily?: string;
+    children: any;
+    selectIcon: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/FormProvider.js

@@ -0,0 +1,25 @@
+import React, { useEffect, createContext, useContext } from 'react';
+import { useTranslation } from '@weareconceptstudio/core';
+import { ThemeProvider } from 'styled-components';
+//* Translations
+import translations from './translations';
+//* Styles
+import FormTheme from './styles/theme';
+import FormVariables from './styles/variables';
+import FormStyle from './styles/formStyle';
+const FormContext = createContext(null);
+export const useFormContext = () => {
+    const context = useContext(FormContext);
+    return context;
+};
+export const FormProvider = ({ fontFamily = 'core_Font', children, selectIcon }) => {
+    const { addTranslation } = useTranslation();
+    useEffect(() => {
+        addTranslation(translations, 'prepend');
+    }, []);
+    return (React.createElement(FormContext.Provider, { value: { selectIcon } },
+        React.createElement(ThemeProvider, { theme: FormTheme },
+            React.createElement(FormVariables, { fontFamily: fontFamily }),
+            React.createElement(FormStyle, null),
+            children)));
+};

package/dist/form/Item/index.js

@@ -5,7 +5,7 @@ import { useTranslation } from '@weareconceptstudio/core';
 import ErrorMessage from '../../error-message';
 import { useInput } from '../hooks/useInput';
 import { useRules } from '../hooks/rules';
-const FormItem = ({ label, name, children, className, errorKey, required = true, requiredMessage, rules = [], }) => {
+const FormItem = ({ label, name, children, className, errorKey, required = true, requiredMessage, rules = [] }) => {
     const { translate } = useTranslation();
     const { formState } = useInput({
         name,
@@ -19,12 +19,12 @@ const FormItem = ({ label, name, children, className, errorKey, required = true,
         disabled: isValidElement(children) && children.props.disabled,
     });
     return (React.createElement("div", { className: classString },
-        React.createElement("div", { className: "form-item-row" },
-            label ? (React.createElement("div", { className: "form-item-label" },
+        React.createElement("div", { className: 'form-item-row' },
+            label ? (React.createElement("div", { className: 'form-item-label' },
                 React.createElement("label", { htmlFor: name, "data-required": required },
                     translate(label),
-                    required ? React.createElement("span", { className: "required-symbol" }, "*") : null))) : null,
-            React.createElement("div", { className: "form-item-control" }, isValidElement(children) && cloneElement(children, { name })),
-            React.createElement(ErrorMessage, { name: name, as: React.createElement("div", { className: "error-message" }) }))));
+                    required ? React.createElement("span", { className: 'required-symbol' }, "*") : null))) : null,
+            React.createElement("div", { className: 'form-item-control' }, isValidElement(children) && cloneElement(children, { name })),
+            React.createElement(ErrorMessage, { name: name, as: React.createElement("div", { className: 'error-message' }) }))));
 };
 export default FormItem;

package/dist/form/hooks/rules.js

@@ -1,9 +1,12 @@
 import React, { useMemo } from 'react';
 import { useTranslation } from '@weareconceptstudio/core';
 export const validationPatterns = ({ type, pattern, message, translate }) => {
+    console.log({ type });
     switch (type) {
         case 'email':
             return { value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/g, message: message || translate('validateMessages.email') };
+        case 'new-password':
+            return { value: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}/, message: message || translate('validateMessages.password') };
         case 'number':
             return { value: /[0-9]/g, message };
         default:

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export * from './FormConfig';
+export * from './FormProvider';
 export { default as Form } from './form';
 export { default as FormBuilder } from './form/Builder';
 export { default as ErrorMessage } from './error-message';

package/dist/index.js

@@ -1,5 +1,5 @@
 'use client';
-export * from './FormConfig';
+export * from './FormProvider';
 export { default as Form } from './form';
 export { default as FormBuilder } from './form/Builder';
 export { default as ErrorMessage } from './error-message';

package/dist/select/index.js

@@ -5,8 +5,10 @@ import { bottom_arrow, empty } from './icons';
 import { useInput } from '../form/hooks/useInput';
 import useFormInstance from '../form/hooks/useFormInstance';
 import { useTranslation } from '@weareconceptstudio/core';
+import { useFormContext } from '../FormProvider';
 const Select = (props) => {
     const { name, placeholder, value, onChange, multiple = false, allowClear = false, allowSearch = true, disabled = false, loading = false, options: list = [], className, select_arrow = false, select_empty = false, optionKey, optionValue, optGroup } = props;
+    const { selectIcon } = useFormContext();
     const { translate } = useTranslation();
     const formInstance = useFormInstance();
     let selectProps = {};
@@ -39,7 +41,7 @@ const Select = (props) => {
     };
     //! Custom DropdownIndicator
     const DropdownIndicator = (props) => {
-        return React.createElement(components.DropdownIndicator, { ...props }, select_arrow || bottom_arrow);
+        return React.createElement(components.DropdownIndicator, { ...props }, selectIcon || select_arrow || bottom_arrow);
     };
     //! Custom Components
     const customComponents = {

package/dist/translations/en.d.ts

@@ -5,6 +5,7 @@ declare const _default: {
         default: string;
         required: string;
         email: string;
+        password: string;
         enum: string;
         whitespace: string;
         date: {

package/dist/translations/en.js

@@ -5,6 +5,7 @@ export default {
         default: 'Validation error on field {errorKey}',
         required: 'Please enter your {errorKey}',
         email: 'Please enter a valid email address',
+        password: 'Password must contain lowercase, uppercase, number and has been min 8 characters.',
         enum: '{errorKey} must be one of [{enum}]',
         whitespace: '{errorKey} cannot be empty',
         date: {

package/dist/translations/hy.d.ts

@@ -5,6 +5,7 @@ declare const _default: {
         default: string;
         required: string;
         email: string;
+        password: string;
         enum: string;
         whitespace: string;
         date: {

package/dist/translations/hy.js

@@ -5,6 +5,7 @@ export default {
         default: 'Դաշտի {errorKey}-ի համար վավերացման սխալ',
         required: 'Խնդրում ենք մուտքագրել ձեր {errorKey}-ը',
         email: 'Խնդրում ենք մուտքագրել վավեր էլ. հասցե:',
+        password: 'Գաղտնաբառը պետք է պարունակի փոքրատառեր, մեծատառեր, թիվ և լինի նվազագույնը 8 նիշ:',
         enum: '{errorKey}-ը պետք է լինի [{enum}] արժեքներից մեկը',
         whitespace: '{errorKey}-ը չի կարող դատարկ լինել',
         date: {

package/dist/translations/index.d.ts

@@ -6,6 +6,7 @@ declare const _default: {
             default: string;
             required: string;
             email: string;
+            password: string;
             enum: string;
             whitespace: string;
             date: {
@@ -43,6 +44,7 @@ declare const _default: {
             default: string;
             required: string;
             email: string;
+            password: string;
             enum: string;
             whitespace: string;
             date: {
@@ -80,6 +82,7 @@ declare const _default: {
             default: string;
             required: string;
             email: string;
+            password: string;
             enum: string;
             whitespace: string;
             date: {

package/dist/translations/ru.d.ts

@@ -5,6 +5,7 @@ declare const _default: {
         default: string;
         required: string;
         email: string;
+        password: string;
         enum: string;
         whitespace: string;
         date: {

package/dist/translations/ru.js

@@ -5,6 +5,7 @@ export default {
         default: 'Ошибка валидации для поля {errorKey}',
         required: 'Пожалуйста, введите ваш {errorKey}',
         email: 'Пожалуйста, введите действительный адрес электронной почты.',
+        password: 'Пароль должен содержать строчные и заглавные буквы, цифру и быть не менее 8 символов.',
         enum: '{errorKey} должен быть одним из [{enum}]',
         whitespace: '{errorKey} не может быть пустым',
         date: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@weareconceptstudio/form",
-	"version": "0.1.2",
+	"version": "0.1.4",
 	"description": "Concept Studio Form",
 	"author": "Concept Studio",
 	"license": "ISC",

package/dist/FormConfig.d.ts

@@ -1,5 +0,0 @@
-export function FormConfig({ fontFamily, children }: {
-    fontFamily?: string;
-    children: any;
-}): React.JSX.Element;
-import React from 'react';

package/dist/FormConfig.js

@@ -1,19 +0,0 @@
-import React, { useEffect } from 'react';
-import { useTranslation } from '@weareconceptstudio/core';
-import { ThemeProvider } from 'styled-components';
-//* Translations
-import translations from './translations';
-//* Styles
-import theme from './styles/theme';
-import FormVariables from './styles/variables';
-import FormStyle from './styles/formStyle';
-export const FormConfig = ({ fontFamily = 'core_Font', children }) => {
-    const { addTranslation } = useTranslation();
-    useEffect(() => {
-        addTranslation(translations, 'prepend');
-    }, []);
-    return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(FormVariables, { fontFamily: fontFamily }),
-        React.createElement(FormStyle, null),
-        children));
-};