@weareconceptstudio/form 0.0.2 → 0.0.4

package/dist/select/index.js

@@ -1,25 +1,62 @@
-import * as React from 'react';
-import ReactSelect from 'react-select';
+import React, { useState } from 'react';
+import ReactSelect, { components } from 'react-select';
+import classNames from 'classnames';
+import { bottom_arrow, empty } from './icons';
+import { useInput } from '../form/hooks/useInput';
 import useFormInstance from '../form/hooks/useFormInstance';
-const Select = React.forwardRef((props, forwardRef) => {
-    const { name, multiple = false, allowClear = false, allowSearch = true, disabled = false, loading = false, options = [], } = props;
+import { useTranslation } from '@weareconceptstudio/core';
+const Select = (props) => {
+    const { name, placeholder, value, onChange, multiple = false, allowClear = false, allowSearch = true, disabled = false, loading = false, options = [], className, select_arrow = false, select_empty = false } = props;
+    const { translate } = useTranslation();
     const formInstance = useFormInstance();
-    const [val, setVal] = React.useState(formInstance.getValues()[name] || (multiple ? [] : ''));
-    const handleChange = React.useCallback((newVal) => {
-        let vals;
-        if (multiple) {
-            vals = newVal.map(item => item.value);
-        }
-        else {
-            vals = newVal.value;
-        }
-        formInstance.setValue(name, vals);
-        setVal(vals);
-    }, [name, multiple]);
-    return (React.createElement("div", null,
-        React.createElement("input", { type: 'hidden', ...forwardRef }),
-        React.createElement(ReactSelect, { options: options, onChange: handleChange, value: options.filter((opt) => multiple ? val.includes(opt.value) : opt.value === val), isMulti: multiple, isClearable: allowClear, isSearchable: allowSearch, isDisabled: disabled, isLoading: loading })));
-});
+    let selectProps = {};
+    if (formInstance == null) {
+        const [val, setVal] = useState(value);
+        selectProps = {
+            onChange: (e) => {
+                onChange && onChange(e.value);
+                setVal(e.value);
+            },
+            value: val,
+        };
+    }
+    else {
+        const { field } = useInput({
+            type: 'select',
+            multiple,
+            name,
+            onChange,
+        });
+        selectProps = field;
+    }
+    //! ClassName
+    const classString = classNames('react-select-container', {
+        [className]: className,
+    });
+    //! Custom Placeholder
+    const Placeholder = (props) => {
+        return React.createElement(components.Placeholder, { ...props }, translate(placeholder));
+    };
+    //! Custom DropdownIndicator
+    const DropdownIndicator = (props) => {
+        return React.createElement(components.DropdownIndicator, { ...props }, select_arrow || bottom_arrow);
+    };
+    //! Custom Components
+    const customComponents = {
+        Placeholder,
+        DropdownIndicator,
+    };
+    //! Custom No Options Message
+    const customNoOptionsMessage = () => {
+        return (React.createElement("div", { className: 'no-options-block' },
+            select_empty || empty,
+            React.createElement("p", { className: `no-options` }, 'No Data')));
+    };
+    return (React.createElement(ReactSelect
+    // unstyled
+    // menuIsOpen={true}
+    , { ...selectProps, options: options, isMulti: multiple, isLoading: loading, isDisabled: disabled, className: classString, isClearable: allowClear, isSearchable: allowSearch, components: customComponents, classNamePrefix: 'react-select', noOptionsMessage: customNoOptionsMessage, value: options.filter((opt) => (multiple ? selectProps.value.includes(opt.value) : opt.value === selectProps.value)) }));
+};
 if (process.env.NODE_ENV !== 'production') {
     Select.displayName = 'Select';
 }

package/dist/styles/formStyle.d.ts

@@ -0,0 +1,2 @@
+export default FormStyle;
+declare const FormStyle: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/dist/styles/formStyle.js

@@ -0,0 +1,585 @@
+import { createGlobalStyle, css } from 'styled-components';
+const FormStyle = createGlobalStyle `${css `
+	:root {
+		--form_labelDistance: var(--sp1-5x);
+		--form_inputPadTBL: var(--sp2-5x);
+		--form_inputPadR: var(--sp8x);
+		--form_errorSize: var(--sp2x);
+		--form_passwordIconSize: var(--sp4x);
+
+		//! Select fix height size
+		--form_emptyPadTB: var(--sp5x);
+		--form_emptyIconSize: var(--sp7x);
+		--form_noDataDistance: var(--sp2x);
+
+		//! Radio Icon Sizes
+		--form_radioIconSize: var(--sp3x);
+		--form_radioTextDistance: var(--sp1-5x);
+		--form_checkSize: var(--sp2x);
+	}
+
+	/* //! Default styles */
+	textarea {
+		resize: none;
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+
+	input::-webkit-outer-spin-button,
+	input::-webkit-inner-spin-button,
+	input[type='search']::-webkit-search-decoration,
+	input[type='search']::-webkit-search-cancel-button,
+	input[type='search']::-webkit-search-results-button,
+	input[type='search']::-webkit-search-results-decoration {
+		-webkit-appearance: none;
+	}
+
+	input[type='number'] {
+		-moz-appearance: textfield;
+	}
+
+	input:focus::placeholder {
+		color: transparent;
+	}
+
+	//! Change the transparent to any color
+	textarea:-webkit-autofill,
+	textarea:-webkit-autofill:hover,
+	textarea:-webkit-autofill:focus,
+	textarea:-webkit-autofill:active,
+	input:-webkit-autofill,
+	input:-webkit-autofill:hover,
+	input:-webkit-autofill:focus,
+	input:-webkit-autofill:active,
+	input:-internal-autofill-selected {
+		box-shadow: inset 1000px 1000px var(--form_inputBgColor);
+		-webkit-text-fill-color: var(--form_inputColor);
+		transition: background-color 5000s ease-in-out 0s;
+	}
+
+	select:-webkit-autofill,
+	select:-webkit-autofill:hover,
+	select:-webkit-autofill:focus,
+	select:-webkit-autofill:active {
+		box-shadow: inset 1000px 1000px var(--form_selectBgColor);
+		-webkit-text-fill-color: var(--form_selectColor);
+		transition: background-color 5000s ease-in-out 0s;
+	}
+	/* //! ============= END ============= */
+
+	label {
+		display: block;
+		font-size: var(--form_p3);
+		font-family: var(--form_Font);
+		font-weight: 700;
+		color: var(--form_labelColor);
+		line-height: var(--form_lineHeight);
+		margin-bottom: var(--form_labelDistance);
+	}
+
+	input:not(input[type='radio']),
+	textarea {
+		width: 100%;
+		background-color: var(--form_inputBgColor);
+		color: var(--form_inputColor);
+		font-size: var(--form_p3) !important;
+		line-height: var(--form_lineHeight);
+		font-family: var(--form_Font);
+		font-weight: 400;
+		border-radius: var(--sp1x);
+		border: 2px solid var(--form_inputBorderColor);
+		padding: var(--form_inputPadTBL) var(--form_inputPadR) var(--form_inputPadTBL) var(--form_inputPadTBL) !important;
+
+		&::placeholder {
+			color: var(--form_inputPlaceholderColor);
+			line-height: var(--form_lineHeight);
+			font-size: var(--form_p3) !important;
+			font-family: var(--form_Font);
+			font-weight: 400;
+		}
+
+		&:focus {
+			border: 2px solid var(--form_inputFocusColor);
+
+			&::placeholder {
+				color: var(--form_inputPlaceholderFocusColor);
+			}
+		}
+	}
+
+	.affix-wrapper {
+		position: relative;
+		width: 100%;
+
+		span {
+			svg {
+				position: absolute;
+				top: 50%;
+				right: 0px;
+				width: var(--form_passwordIconSize);
+				height: var(--form_passwordIconSize);
+				transform: translate(-50%, -50%);
+				fill: var(--form_inputColor);
+				cursor: pointer;
+			}
+		}
+	}
+
+	//! Select Styles
+	.react-select-container {
+		.react-select__control {
+			border-radius: var(--sp1x);
+			border: 2px solid var(--form_selectBorderColor);
+			background-color: var(--form_selectBgColor);
+			min-height: unset;
+			transition: border var(--form_trTime) ease-out;
+
+			.react-select__value-container {
+				padding: var(--form_inputPadTBL);
+
+				.react-select__placeholder,
+				.react-select__single-value {
+					margin-left: 0;
+					margin-right: 0;
+
+					line-height: var(--form_lineHeight);
+					font-size: var(--form_p3) !important;
+					font-family: var(--form_Font);
+					font-weight: 400;
+
+					transition: color var(--form_trTime) ease-out;
+				}
+
+				.react-select__placeholder {
+					color: var(--form_selectPlaceholderColor);
+				}
+
+				.react-select__single-value {
+					color: var(--form_selectColor);
+				}
+
+				.react-select__input-container {
+					margin: 0;
+					padding-top: 0;
+					padding-bottom: 0;
+
+					color: var(--form_selectColor);
+					line-height: var(--form_lineHeight);
+					font-size: var(--form_p3) !important;
+					font-family: var(--form_Font);
+					font-weight: 400;
+					transition: color var(--form_trTime) ease-out;
+
+					.react-select__input {
+						width: fit-content !important;
+						padding: 0 !important;
+						font-size: inherit !important;
+						border-radius: inherit !important;
+					}
+				}
+
+				&.react-select__value-container--has-value {
+					~ .react-select__indicators {
+						.react-select__indicator {
+							color: var(--form_selectColor);
+						}
+					}
+				}
+			}
+
+			.react-select__indicators {
+				.react-select__indicator-separator {
+					width: 0;
+					background-color: unset;
+					margin-bottom: 0;
+					margin-top: 0;
+				}
+
+				.react-select__indicator {
+					padding: 0 var(--form_inputPadTBL);
+					color: var(--form_selectPlaceholderColor);
+					transition: color var(--form_trTime) ease-out;
+				}
+
+				.react-select__dropdown-indicator {
+					svg {
+						width: var(--form_p2);
+						height: var(--form_p2);
+						transition: transform var(--form_trTime) ease-out !important;
+					}
+				}
+			}
+
+			/* //! Hover */
+			@media (hover: hover) {
+				&:hover {
+					border-color: var(--form_selectBorderHoverColor);
+				}
+			}
+
+			/* //! Dropdown Open */
+			&.react-select__control--menu-is-open {
+				.react-select__dropdown-indicator {
+					svg {
+						transform: rotateX(180deg);
+					}
+				}
+			}
+
+			/* //! Focused */
+			&.react-select__control--is-focused {
+				box-shadow: unset;
+				border: 2px solid var(--form_selectBorderFocusColor);
+
+				.react-select__placeholder {
+					color: var(--form_selectPlaceholderFocusColor);
+				}
+
+				.react-select__indicator {
+					color: var(--form_selectPlaceholderFocusColor);
+				}
+			}
+
+			/* //! Disabled */
+			&.react-select__control--is-disabled {
+				background-color: var(--form_selectDisabledBgColor);
+				border: 2px solid var(--form_selectBorderDisabledColor);
+
+				.react-select__indicators {
+					display: none;
+				}
+			}
+		}
+
+		/* //! Select Menu */
+		.react-select__menu {
+			position: absolute;
+			top: 100%;
+			width: 100%;
+			z-index: 1;
+			background-color: var(--form_selectBgColor);
+			border-radius: var(--sp1x);
+			overflow: hidden;
+			box-shadow: 0px 4px 20px var(--form_boxShadowColor);
+			margin-bottom: var(--sp0-5x);
+			margin-top: var(--sp0-5x);
+
+			.react-select__menu-list {
+				padding: 0;
+
+				.react-select__option {
+					color: var(--form_selectOptionColor);
+					line-height: var(--form_lineHeight);
+					font-size: var(--form_p2);
+					font-family: var(--form_Font);
+					font-weight: 500;
+					padding: var(--form_inputPadTBL) var(--form_inputPadR) var(--form_inputPadTBL) var(--form_inputPadTBL);
+					background-color: var(--form_selectOptionBgColor);
+
+					&.react-select__option--is-focused {
+						background-color: var(--form_selectOptionFocusBgColor);
+					}
+
+					&.react-select__option--is-selected {
+						color: var(--form_selectOptionActiveColor);
+					}
+				}
+			}
+		}
+
+		/* //! No Options */
+		.react-select__menu-notice {
+			color: var(--form_emptyTextColor);
+			padding: var(--form_emptyPadTB) 0;
+
+			.no-options-block {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+
+				svg {
+					width: var(--form_emptyIconSize);
+					height: var(--form_emptyIconSize);
+				}
+
+				.no-options {
+					line-height: var(--form_lineHeight);
+					font-size: var(--form_p3) !important;
+					font-family: var(--form_Font);
+					font-weight: 500;
+					margin-top: var(--form_noDataDistance);
+				}
+			}
+		}
+	}
+
+	/* //! Radio Styles */
+	.icon-circle-wrapper {
+		position: relative;
+		width: var(--form_radioIconSize);
+		height: var(--form_radioIconSize);
+		border-radius: 50%;
+		border: 2px solid var(--form_radioBorderColor);
+
+		&.distance {
+			margin-right: var(--form_radioTextDistance);
+		}
+
+		i {
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			font-size: var(--form_checkSize);
+			line-height: 1;
+			color: var(--form_radioBgColor);
+			opacity: 0;
+		}
+
+		&.checked {
+			background-color: var(--form_radioActiveBgColor);
+			border: 2px solid var(--form_radioBorderActiveColor);
+
+			i {
+				opacity: 1;
+			}
+		}
+	}
+
+	/* //! Error styles */
+	.form-item {
+		&.has-error {
+			input:not(input[type='radio']),
+			textarea {
+				background-color: var(--form_inputErrorBgColor);
+				border: 2px solid var(--form_inputBorderErrorColor);
+				color: var(--form_inputErrorColor);
+
+				&::placeholder {
+					color: var(--form_inputPlaceholderErrorColor);
+				}
+			}
+
+			.react-select__control {
+				background-color: var(--form_selectErrorBgColor);
+				border: 2px solid var(--form_selectBorderErrorColor);
+
+				.react-select__placeholder,
+				.react-select__indicator {
+					color: var(--form_selectPlaceholderErrorColor);
+				}
+			}
+		}
+	}
+
+	.error-message {
+		font-size: var(--form_errorSize);
+		line-height: var(--form_lineHeight);
+		font-family: var(--form_Font);
+		font-weight: 400;
+		color: var(--form_errorMessageColor);
+	}
+
+	/* //! Disabled Styles */
+	.form-item {
+		&.disabled {
+			label {
+				color: var(--form_labelDisabledColor);
+			}
+
+			input:not(input[type='radio']) {
+				background-color: var(--form_inputDisabledBgColor);
+				color: var(--form_inputDisabledColor);
+				border: 2px solid var(--form_inputBorderDisabledColor);
+			}
+		}
+	}
+
+	/* //! Select Field Autofill Styles */
+	.react-select-container {
+		input:-webkit-autofill,
+		input:-internal-autofill-selected {
+			border: none !important;
+		}
+	}
+
+	/* //! Global Error Styles */
+	.global-error-wrap {
+		border: 2.5px solid var(--form_errorMessageBorderColor);
+		background-color: var(--form_errorMessageBgColor);
+		border-radius: var(--sp1-5x);
+		padding: var(--form_globalErrorPad);
+		margin-top: var(--form_globalErrorWrapMarTB);
+		margin-bottom: var(--form_globalErrorWrapMarTB);
+
+		.backend-error {
+			font-family: var(--form_Font);
+			font-weight: 700;
+			font-size: var(--form_p3);
+			line-height: var(--form_lineHeight);
+			color: var(--form_errorMessageColor);
+		}
+
+		.frontend-error {
+			font-family: var(--form_Font);
+			font-weight: 400;
+			font-size: var(--form_p3);
+			line-height: var(--form_lineHeight);
+			margin-top: var(--form_errorItemMTop);
+			color: var(--form_errorMessageColor);
+		}
+	}
+
+	/* //! 2559 - 1920 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeL}) {
+		:root {
+			--form_labelDistance: var(--sp1x);
+			--form_inputPadTBL: var(--sp2x);
+			--form_inputPadR: var(--sp6x);
+			--form_errorSize: var(--sp2x);
+			--form_passwordIconSize: var(--sp3x);
+
+			//! Select fix height size
+			--form_emptyPadTB: var(--sp5x);
+			--form_emptyIconSize: var(--sp6x);
+			--form_noDataDistance: var(--sp1x);
+
+			//! Radio Icon Sizes
+			--form_radioIconSize: var(--sp3x);
+			--form_radioTextDistance: var(--sp1-5x);
+			--form_checkSize: var(--sp1-5x);
+		}
+	}
+
+	/* //! 1919 - 1510 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeM}) {
+		:root {
+			--form_labelDistance: var(--sp1x);
+			--form_inputPadTBL: var(--sp1-5x);
+			--form_inputPadR: var(--sp5x);
+			--form_errorSize: var(--sp2x);
+			--form_passwordIconSize: var(--sp3x);
+
+			//! Select fix height size
+			--form_emptyPadTB: var(--sp6x);
+			--form_emptyIconSize: var(--sp6x);
+			--form_noDataDistance: var(--sp1x);
+
+			//! Radio Icon Sizes
+			--form_radioIconSize: var(--sp3x);
+			--form_radioTextDistance: var(--sp1x);
+			--form_checkSize: var(--sp1-5x);
+		}
+	}
+
+	/* //! 1509 - 1440 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeS}) {
+		:root {
+			--form_labelDistance: var(--sp0-5x);
+			--form_inputPadTBL: var(--sp1-5x);
+			--form_inputPadR: var(--sp5x);
+			--form_errorSize: var(--sp2x);
+			--form_passwordIconSize: var(--sp3x);
+
+			//! Select fix height size
+			--form_emptyPadTB: var(--sp5x);
+			--form_emptyIconSize: var(--sp6x);
+			--form_noDataDistance: var(--sp1x);
+
+			//! Radio Icon Sizes
+			--form_radioIconSize: var(--sp3x);
+			--form_radioTextDistance: var(--sp1x);
+			--form_checkSize: var(--sp1-5x);
+		}
+	}
+
+	/* //! 1439 - 1280 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeXS}) {
+		:root {
+			--form_labelDistance: var(--sp0-5x);
+			--form_inputPadTBL: var(--sp1-5x);
+			--form_inputPadR: var(--sp5x);
+			--form_errorSize: var(--sp1-5x);
+			--form_passwordIconSize: var(--sp2-5x);
+
+			//! Select fix height size
+			--form_emptyPadTB: var(--sp4x);
+			--form_emptyIconSize: var(--sp6x);
+			--form_noDataDistance: var(--sp1x);
+
+			//! Radio Icon Sizes
+			--form_radioIconSize: var(--sp2-5x);
+			--form_radioTextDistance: var(--sp1x);
+			--form_checkSize: var(--sp1x);
+		}
+	}
+
+	/* //! 1279 - 1024 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_TabletSize}) {
+		:root {
+			--form_labelDistance: var(--sp0-5x);
+			--form_inputPadTBL: var(--sp1x);
+			--form_inputPadR: var(--sp4x);
+			--form_errorSize: var(--sp1-5x);
+			--form_passwordIconSize: var(--sp2-5x);
+
+			//! Select fix height size
+			--form_emptyPadTB: var(--sp4x);
+			--form_emptyIconSize: var(--sp5x);
+			--form_noDataDistance: var(--sp1x);
+
+			//! Radio Icon Sizes
+			--form_radioIconSize: var(--sp2-5x);
+			--form_radioTextDistance: var(--sp1x);
+			--form_checkSize: var(--sp1x);
+		}
+	}
+
+	/* //! 1023 - 768 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_TabletSizeMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_TabletSizeS}) {
+		:root {
+			--form_labelDistance: var(--sp0-5x);
+			--form_inputPadTBL: var(--sp1x);
+			--form_inputPadR: var(--sp4x);
+			--form_errorSize: var(--sp1-5x);
+			--form_passwordIconSize: var(--sp2-5x);
+
+			//! Select fix height size
+			--form_emptyPadTB: var(--sp4x);
+			--form_emptyIconSize: var(--sp5x);
+			--form_noDataDistance: var(--sp1x);
+
+			//! Radio Icon Sizes
+			--form_radioIconSize: var(--sp2-5x);
+			--form_radioTextDistance: var(--sp1x);
+			--form_checkSize: var(--sp1x);
+		}
+	}
+
+	/* //! 767 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_TabletSizeSMin}) {
+		:root {
+			--form_labelDistance: var(--sp0-5x);
+			--form_inputPadTBL: var(--sp1x);
+			--form_inputPadR: var(--sp4x);
+			--form_errorSize: var(--sp1-5x);
+			--form_passwordIconSize: var(--sp2-5x);
+
+			//! Select fix height size
+			--form_emptyPadTB: var(--sp4x);
+			--form_emptyIconSize: var(--sp5x);
+			--form_noDataDistance: var(--sp1x);
+
+			//! Radio Icon Sizes
+			--form_radioIconSize: var(--sp2-5x);
+			--form_radioTextDistance: var(--sp1x);
+			--form_checkSize: var(--sp1x);
+		}
+	}
+`}`;
+export default FormStyle;

package/dist/styles/theme.d.ts

@@ -0,0 +1,2 @@
+declare function _default(props: any): any;
+export default _default;