From 3c9e0059ca560fd167378a62dd0c95014ce3dda9 Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Thu, 27 Jun 2024 17:46:06 +0200 Subject: [PATCH 01/17] refactor: Add RawTextArea component for styled textareas --- .../atoms/RawTextArea/RawTextArea.tsx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/components/atoms/RawTextArea/RawTextArea.tsx diff --git a/src/components/atoms/RawTextArea/RawTextArea.tsx b/src/components/atoms/RawTextArea/RawTextArea.tsx new file mode 100644 index 00000000..68db9e8b --- /dev/null +++ b/src/components/atoms/RawTextArea/RawTextArea.tsx @@ -0,0 +1,26 @@ +import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent'; +import { TLayer } from '@/types/TLayer'; +import { TStyledPrefixAndPicker } from '@/types/TStyledPrefixAndPicker'; +import { TTheme } from '@/types/TTheme'; +import { TUiColorsNotTransparent } from '@/types/TUiColorsNotTransparent'; + +import { styled } from 'styled-components'; + +type TRawTextArea = { + themeType?: TUiColorsNotTransparent; + layer?: TLayer; +}; + +export type TRawTextAreaWithHTMLAttrs = TRawTextArea & React.TextareaHTMLAttributes; + +type TRawTextAreaWith$ = TStyledPrefixAndPicker; + +const RawTextArea = styled.textarea` + border: none; + box-sizing: border-box; + appearance: none; + background-color: transparent; + color: ${({ theme, $themeType = 'secondary', $layer }) => getBackgroundColor({ theme, $themeType, $layer })}; +`; + +export default RawTextArea; From d5c651394c008576d0ed2b35cc5c97addc984106 Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Thu, 27 Jun 2024 17:46:56 +0200 Subject: [PATCH 02/17] refactor: Rename FancyTextInpUtWithForWardRef to FancyTextInput --- src/components/organisms/FancyTextInput/FancyTextInput.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/organisms/FancyTextInput/FancyTextInput.tsx b/src/components/organisms/FancyTextInput/FancyTextInput.tsx index b69357af..b6a1f79e 100644 --- a/src/components/organisms/FancyTextInput/FancyTextInput.tsx +++ b/src/components/organisms/FancyTextInput/FancyTextInput.tsx @@ -7,7 +7,7 @@ import { TFancyTextInput } from '@/components/organisms/FancyTextInput/TFancyTex // --------------------------------------------------------------------------- // // ----The TextInput Comonent with surrounding icon, label and underline ----- // // --------------------------------------------------------------------------- // -const FancyTextInpUtWithForWardRef = forwardRef((props, ref) => { +const FancyTextInput = forwardRef((props, ref) => { const { id, value, @@ -81,4 +81,4 @@ const FancyTextInpUtWithForWardRef = forwardRef Date: Thu, 27 Jun 2024 17:48:14 +0200 Subject: [PATCH 03/17] refactor: Update input label positioning and font size --- .../atoms/InputLabel/utils/generateLableVariant.ts | 6 +++--- .../molecules/LabeledInput/LabeledInput.style.tsx | 3 ++- src/components/molecules/LabeledInput/TLabledInput.model.ts | 4 +--- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/atoms/InputLabel/utils/generateLableVariant.ts b/src/components/atoms/InputLabel/utils/generateLableVariant.ts index cc01781c..f8b844cf 100644 --- a/src/components/atoms/InputLabel/utils/generateLableVariant.ts +++ b/src/components/atoms/InputLabel/utils/generateLableVariant.ts @@ -36,13 +36,13 @@ export function generateLableVariant(props: TgenerateLableVariant) { case 'center': return css` left: 50%; - top: ${$isActive ? '8px' : '56%'}; + top: ${$isActive ? '8px' : '21px'}; font-size: ${$isActive ? '12px' : '18px'}; transform: translateX(-50%) translateY(-50%); `; case 'right': return css` - top: ${$isActive ? '8px' : '56%'}; + top: ${$isActive ? '8px' : '21px'}; right: 0; font-size: ${$isActive ? '12px' : '18px'}; transform: translateY(-50%); @@ -50,7 +50,7 @@ export function generateLableVariant(props: TgenerateLableVariant) { case 'left': default: return css` - top: ${$isActive ? '8px' : '56%'}; + top: ${$isActive ? '8px' : '21px'}; font-size: ${$isActive ? '12px' : '18px'}; transform: translateY(-50%); `; diff --git a/src/components/molecules/LabeledInput/LabeledInput.style.tsx b/src/components/molecules/LabeledInput/LabeledInput.style.tsx index 382db8ee..d352d2d0 100644 --- a/src/components/molecules/LabeledInput/LabeledInput.style.tsx +++ b/src/components/molecules/LabeledInput/LabeledInput.style.tsx @@ -22,7 +22,8 @@ export const InputWrapper = styled.div` box-sizing: border-box; /* Added to include padding in the width */ input:not([type='range']), - select { + select, + textarea { ${({ $isActive, $isLabelProvided }) => calcInputPadding({ $isActive, $isLabelProvided })} } diff --git a/src/components/molecules/LabeledInput/TLabledInput.model.ts b/src/components/molecules/LabeledInput/TLabledInput.model.ts index eadd3c89..faeb8628 100644 --- a/src/components/molecules/LabeledInput/TLabledInput.model.ts +++ b/src/components/molecules/LabeledInput/TLabledInput.model.ts @@ -1,5 +1,3 @@ -import { ReactElement } from 'react'; - import { TLayer } from '@/types/TLayer'; import { TTextAlignLC } from '@/types/TTextAlignLC'; import { TUiColorsMain } from '@/types/TUiColorsMain'; @@ -9,7 +7,7 @@ export type TLabeledInput = { id?: string; label?: string; hasPlaceholder?: boolean; - inputElement?: ReactElement; + inputElement?: React.ReactNode; systemMessageType?: TUiColorsSystemMessage; hasValue?: boolean; themeType?: Exclude; From 10ca52636746087fdd2279b5c58c45a6297c0582 Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Thu, 27 Jun 2024 17:49:46 +0200 Subject: [PATCH 04/17] refactor: Update input label positioning and font size --- .../molecules/InputWrapper/InputWrapper.style.tsx | 14 +++++++------- .../molecules/InputWrapper/TInputWrapper.model.ts | 1 + 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/molecules/InputWrapper/InputWrapper.style.tsx b/src/components/molecules/InputWrapper/InputWrapper.style.tsx index 7a7ddf68..46189e41 100644 --- a/src/components/molecules/InputWrapper/InputWrapper.style.tsx +++ b/src/components/molecules/InputWrapper/InputWrapper.style.tsx @@ -4,14 +4,14 @@ import { TTheme } from '@/types/TTheme'; import { FancyBox } from '@/components/atoms/FancyBox'; import { disabledStyle } from '@/design/designFunctions/disabledStyle'; -const PositionWithLabel = css<{ theme: TTheme }>` - padding: ${({ theme }) => `${theme.spacing.xxs} ${theme.spacing.sm} ${theme.spacing.xs}`}; - height: ${({ theme }) => theme.globalElementSizes.lg}; +const PositionWithLabel = (theme: TTheme, $isTextArea: boolean) => css` + padding: ${theme.spacing.xxs} ${theme.spacing.sm} ${theme.spacing.xs}; + height: ${!$isTextArea ? theme.globalElementSizes.lg : ''}; `; -const PositionWithoutLabel = css<{ theme: TTheme }>` - padding: ${({ theme }) => `2px ${theme.spacing.sm} ${theme.spacing.xxs}`}; - height: ${({ theme }) => theme.globalElementSizes.sm}; +const PositionWithoutLabel = (theme: TTheme, $isTextArea: boolean) => css` + padding: ${`2px ${theme.spacing.sm} ${theme.spacing.xxs}`}; + height: ${!$isTextArea ? theme.globalElementSizes.sm : ''}; `; type TExtendedFancyBox = { @@ -28,7 +28,7 @@ export const ExtendedFancyBox = styled(FancyBox)` border-radius: 12px; position: relative; align-items: center; - ${({ $hasLabel }) => ($hasLabel ? PositionWithLabel : PositionWithoutLabel)}; + ${({ $hasLabel, theme }) => ($hasLabel ? PositionWithLabel(theme, true) : PositionWithoutLabel(theme, true))}; width: ${({ $autoWidth }) => ($autoWidth ? 'auto' : '100%')}; ${({ $boxShadow, $isActive, theme }) => diff --git a/src/components/molecules/InputWrapper/TInputWrapper.model.ts b/src/components/molecules/InputWrapper/TInputWrapper.model.ts index f3c11423..2c7590ff 100644 --- a/src/components/molecules/InputWrapper/TInputWrapper.model.ts +++ b/src/components/molecules/InputWrapper/TInputWrapper.model.ts @@ -9,6 +9,7 @@ import { TFancyBox } from '@/components/atoms/FancyBox/FancyBox.model'; export type TInputWrapper = { id?: string; isActive?: boolean; + isTextArea?: boolean; label?: string; disabled?: boolean; InputElement?: ReactElement; From 71574d076970ada0310211da6a26222c1b477c26 Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Thu, 27 Jun 2024 17:50:15 +0200 Subject: [PATCH 05/17] feat: Add FancyTextArea component for styled textareas --- .../organisms/FancyTextArea/FancyTextArea.tsx | 85 +++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 src/components/organisms/FancyTextArea/FancyTextArea.tsx diff --git a/src/components/organisms/FancyTextArea/FancyTextArea.tsx b/src/components/organisms/FancyTextArea/FancyTextArea.tsx new file mode 100644 index 00000000..088b8916 --- /dev/null +++ b/src/components/organisms/FancyTextArea/FancyTextArea.tsx @@ -0,0 +1,85 @@ +import RawTextArea, { TRawTextAreaWithHTMLAttrs } from '@/components/atoms/RawTextArea/RawTextArea'; +import { InputWrapper, TInputWrapperUserInputProps } from '@/components/molecules/InputWrapper'; + +import { forwardRef, useId, useState } from 'react'; + +type TFancyTextArea = Omit & TRawTextAreaWithHTMLAttrs; + +const FancyTextArea = forwardRef((props, ref) => { + const { + id, + value, + themeType = 'primary', + layer = 2, + placeholder, + systemMessage, + disabled, + align, + icon, + label, + onFocus, + underline, + onBlur, + outlined, + outlinedBackgroundStrength, + outlinedRemoveBorder, + transparentBackground, + className, + ...inputProps + } = props; + + //the states activity of the input + const [isActive, setIsActive] = useState(false); + + // if no id is provided, generate a random one + const useid = useId(); + const usedId = id ? id : useid; + + return ( + // } + // /> + + { + onFocus && onFocus(e); + setIsActive(true); + }} + onBlur={(e) => { + onBlur && onBlur(e); + setIsActive(false); + }} + placeholder={placeholder} + {...inputProps} + /> + } + /> + ); +}); + +export default FancyTextArea; From 826421c39379f4e131647929651107a8345bb345 Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Thu, 27 Jun 2024 17:50:30 +0200 Subject: [PATCH 06/17] refactor: Update input label positioning and font size --- src/Routes/InputsRoute/InputsRoute.tsx | 267 +++++++++++++------------ 1 file changed, 140 insertions(+), 127 deletions(-) diff --git a/src/Routes/InputsRoute/InputsRoute.tsx b/src/Routes/InputsRoute/InputsRoute.tsx index 789b668e..b301b097 100644 --- a/src/Routes/InputsRoute/InputsRoute.tsx +++ b/src/Routes/InputsRoute/InputsRoute.tsx @@ -12,6 +12,7 @@ import { Card } from '@/components/molecules/Card'; import LabeledInput from '@/components/molecules/LabeledInput/LabeledInput'; import { TextInput } from '@/components/atoms/TextInput'; import FancyRange from '@/components/organisms/FancyRangeSlider/FancyRangeSlider'; +import FancyTextArea from '@/components/organisms/FancyTextArea/FancyTextArea'; const svg = ( @@ -28,6 +29,11 @@ export default function InputsRoute() { const [dropDown2, setDropDown2] = useState('test'); const [password, setPassword] = useState(''); const [newInput, setNewInput] = useState(''); + const [textArea, setTextArea] = useState(''); + + const handleTextArea = (value: ChangeEvent) => { + setTextArea(value.target.value); + }; const newInputHandler = (value: ChangeEvent) => { setNewInput(value.target.value); @@ -71,134 +77,141 @@ export default function InputsRoute() { `; return ( - - - - - } - /> - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + } + /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); } From 09810a994c87fcc10ca8267b9ec94be9e0b726da Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Thu, 27 Jun 2024 21:34:04 +0200 Subject: [PATCH 07/17] feat: Add FancyTextArea model and documentation --- .../FancyTextArea/FancyTextArea.model.ts | 4 + .../organisms/FancyTextArea/FancyTextArea.tsx | 16 +- .../FancyTextArea/docu/FancyTextArea.mdx | 53 ++++++ .../docu/FancyTextArea.stories.tsx | 172 ++++++++++++++++++ 4 files changed, 235 insertions(+), 10 deletions(-) create mode 100644 src/components/organisms/FancyTextArea/FancyTextArea.model.ts create mode 100644 src/components/organisms/FancyTextArea/docu/FancyTextArea.mdx create mode 100644 src/components/organisms/FancyTextArea/docu/FancyTextArea.stories.tsx diff --git a/src/components/organisms/FancyTextArea/FancyTextArea.model.ts b/src/components/organisms/FancyTextArea/FancyTextArea.model.ts new file mode 100644 index 00000000..56a90ccd --- /dev/null +++ b/src/components/organisms/FancyTextArea/FancyTextArea.model.ts @@ -0,0 +1,4 @@ +import { TRawTextAreaWithHTMLAttrs } from '@/components/atoms/RawTextArea/RawTextArea'; +import { TInputWrapperUserInputProps } from '@/components/molecules/InputWrapper'; + +export type TFancyTextArea = Omit & TRawTextAreaWithHTMLAttrs; diff --git a/src/components/organisms/FancyTextArea/FancyTextArea.tsx b/src/components/organisms/FancyTextArea/FancyTextArea.tsx index 088b8916..6813b237 100644 --- a/src/components/organisms/FancyTextArea/FancyTextArea.tsx +++ b/src/components/organisms/FancyTextArea/FancyTextArea.tsx @@ -1,10 +1,11 @@ -import RawTextArea, { TRawTextAreaWithHTMLAttrs } from '@/components/atoms/RawTextArea/RawTextArea'; -import { InputWrapper, TInputWrapperUserInputProps } from '@/components/molecules/InputWrapper'; - import { forwardRef, useId, useState } from 'react'; +import RawTextArea from '@/components/atoms/RawTextArea/RawTextArea'; +import { InputWrapper } from '@/components/molecules/InputWrapper'; +import { TFancyTextArea } from '@/components/organisms/FancyTextArea/FancyTextArea.model'; -type TFancyTextArea = Omit & TRawTextAreaWithHTMLAttrs; - +// --------------------------------------------------------------------------- // +// ---------- A FancyTextArea with a Background underline and Icon ---------- // +// --------------------------------------------------------------------------- // const FancyTextArea = forwardRef((props, ref) => { const { id, @@ -36,11 +37,6 @@ const FancyTextArea = forwardRef((props, re const usedId = id ? id : useid; return ( - // } - // /> - {/* Assumes you have a Storybook file for FancyTextArea */} + + + + + +## Setup Instructions + +To use the `FancyTextArea` component: + +1. **Import the Component:** + + ```jsx + import FancyTextArea from 'fui-fancyui'; + ``` + + (or wherever your component is located) + +2. **(Optional) Import Type Definitions (TypeScript):** + ```typescript + import { TFancyTextArea } from 'fui-fancyui'; + ``` + +## Example Usage + +```jsx +} +/> +``` + + + +## Component Properties + + + +## List of Used Components + +- **RawTextArea:** The foundational text area component. +- **InputWrapper:** Provides structure and styling for the text area, including labels and system messages. diff --git a/src/components/organisms/FancyTextArea/docu/FancyTextArea.stories.tsx b/src/components/organisms/FancyTextArea/docu/FancyTextArea.stories.tsx new file mode 100644 index 00000000..5b7794bb --- /dev/null +++ b/src/components/organisms/FancyTextArea/docu/FancyTextArea.stories.tsx @@ -0,0 +1,172 @@ +// Import necessary dependencies +import { Meta, StoryObj } from '@storybook/react'; + +// Import the component to be tested +import FancyTextArea from '../FancyTextArea'; + +import SVGCheckMark from '../../../icons/SVGCheckMark/SVGCheckMark'; +import templateThemeType from '@/stories/templateSettingsForStorys/templatesForThemeType'; +import { useState } from 'react'; + +// Define metadata for the story +const meta = { + component: FancyTextArea, + title: 'components/organisms/FancyTextArea', + parameters: { + docs: { + description: { + component: + 'The `FancyTextArea` component is an enhanced text area input field with customizable styling, icons, and integrated state management. It builds upon the basic `RawTextArea` component by adding features such as labels, placeholders, system messages (for errors, success, or info), and visual themes.', + }, + }, + }, + // Define arguments for the story + argTypes: { + label: { + description: 'Label for the input', + control: { + type: 'text', + }, + }, + align: { + description: 'Alignment of the label', + control: { + type: 'select', + }, + }, + disabled: { + description: 'Disable the input', + control: { + type: 'boolean', + }, + }, + ...templateThemeType('mainThemeTypes', 'primary', 2), + systemMessage: { + description: 'Error message to be displayed', + control: { + type: 'object', + }, + }, + placeholder: { + description: 'Placeholder for the input', + control: { + type: 'text', + }, + }, + icon: { + description: 'Icon for the input', + control: { + type: 'object', + }, + }, + value: { + description: 'Value of the input', + control: { + type: 'text', + }, + }, + transparentBackground: { + description: 'The input has a transparent background', + control: { + type: 'boolean', + }, + }, + externalStyle: { + description: 'External style for the input', + control: { + type: 'object', + }, + }, + labelVariant: { + description: 'Variant of the label', + control: { + type: 'select', + }, + }, + outlined: { + description: 'Outlined input', + control: { + type: 'boolean', + }, + }, + outlinedBackgroundStrength: { + description: 'Background strength of the outlined input', + control: { + min: 0, + max: 1, + step: 0.1, + type: 'number', + }, + }, + underline: { + description: 'Underline the input', + control: { + type: 'boolean', + }, + }, + }, +} satisfies Meta; + +// Export the metadata +export default meta; +// Define the story object +type Story = StoryObj; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const SateFunction = (args: any) => { + const [value, setValue] = useState(''); + + const handleStateChange = (e: React.ChangeEvent) => { + setValue(e.target.value); + }; + + return ; +}; + +// Define the primary story +export const Primary: Story = { + render: (args) => , + args: { + layer: 2, + themeType: 'primary', + align: 'left', + label: 'Label', + icon: , + }, +}; + +export const WithErrorState: Story = { + render: (args) => , + args: { + layer: 2, + themeType: 'primary', + align: 'left', + label: 'Label', + icon: , + systemMessage: 'error', + }, +}; + +export const WithSuccessState: Story = { + render: (args) => , + args: { + layer: 2, + themeType: 'primary', + align: 'left', + label: 'Label', + icon: , + systemMessage: 'success', + }, +}; + +export const WithInfoState: Story = { + render: (args) => , + args: { + layer: 2, + themeType: 'primary', + align: 'left', + label: 'Label', + icon: , + systemMessage: 'info', + }, +}; From 001231be5b922d36640b00a915c5cff02605fd01 Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Thu, 27 Jun 2024 21:37:25 +0200 Subject: [PATCH 08/17] refactor: Update LabeledInput style and structure --- .../LabeledInput/LabeledInput.style.tsx | 17 ++++++++++++++++- .../molecules/LabeledInput/LabeledInput.tsx | 5 +++-- .../LabeledInput/TLabledInput.model.ts | 1 + 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/components/molecules/LabeledInput/LabeledInput.style.tsx b/src/components/molecules/LabeledInput/LabeledInput.style.tsx index d352d2d0..3a69cdc8 100644 --- a/src/components/molecules/LabeledInput/LabeledInput.style.tsx +++ b/src/components/molecules/LabeledInput/LabeledInput.style.tsx @@ -3,10 +3,24 @@ import { styled } from 'styled-components'; import { calcInputPadding } from '@/components/molecules/LabeledInput/utils/calcInputPadding'; import { getTextColor } from '@/design/designFunctions/colorCalculatorForComponent'; import { TTheme } from '@/types/TTheme'; +import { globalElementsizes } from '@/design/theme/globalSizes'; -export const Wrapper = styled.div` +const handleHeight = ({ $hasLabel = false, $isTextArea = false }) => { + if (!$isTextArea) { + if ($hasLabel) { + return globalElementsizes.md; + } else { + return globalElementsizes.sm; + } + } + return ''; +}; +export const Wrapper = styled.div<{ $hasLabel?: boolean; $isTextArea?: boolean }>` position: relative; width: 100%; + display: flex; + align-items: center; + height: ${({ $hasLabel, $isTextArea }) => handleHeight({ $hasLabel, $isTextArea })}; `; type TInputWrapper = { @@ -18,6 +32,7 @@ export const InputWrapper = styled.div` color: ${({ theme }) => getTextColor({ theme, $themeType: 'secondary', $textLayer: 4 })}; border-radius: 3px; outline: none; + width: 100%; background-color: transparent; box-sizing: border-box; /* Added to include padding in the width */ diff --git a/src/components/molecules/LabeledInput/LabeledInput.tsx b/src/components/molecules/LabeledInput/LabeledInput.tsx index db187d06..b4582568 100644 --- a/src/components/molecules/LabeledInput/LabeledInput.tsx +++ b/src/components/molecules/LabeledInput/LabeledInput.tsx @@ -14,6 +14,7 @@ export default function LabeledInput(props: TLabeledInput) { label, hasValue, hasPlaceholder, + isTextArea, themeType = 'primary', layer = 3, underline, @@ -23,7 +24,7 @@ export default function LabeledInput(props: TLabeledInput) { } = props; return ( - + {/* The Labled thats animated and adjusts the padding with the type of the Input */} {label && ( )} diff --git a/src/components/molecules/LabeledInput/TLabledInput.model.ts b/src/components/molecules/LabeledInput/TLabledInput.model.ts index faeb8628..eba9934b 100644 --- a/src/components/molecules/LabeledInput/TLabledInput.model.ts +++ b/src/components/molecules/LabeledInput/TLabledInput.model.ts @@ -12,6 +12,7 @@ export type TLabeledInput = { hasValue?: boolean; themeType?: Exclude; layer?: TLayer; + isTextArea?: boolean; underline?: boolean; isActive?: boolean; align?: TTextAlignLC; From 694c9e145c6a5a75cfbe08dc2c6ade2fe47aa50d Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Thu, 27 Jun 2024 21:38:08 +0200 Subject: [PATCH 09/17] refactor: Update padding and margin in InputWrapper styles --- .../molecules/InputWrapper/InputWrapper.style.tsx | 4 ++-- .../molecules/InputWrapper/InputWrapper.tsx | 2 ++ .../molecules/InputWrapper/TInputWrapper.model.ts | 12 +++++++++++- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/components/molecules/InputWrapper/InputWrapper.style.tsx b/src/components/molecules/InputWrapper/InputWrapper.style.tsx index 46189e41..b176f007 100644 --- a/src/components/molecules/InputWrapper/InputWrapper.style.tsx +++ b/src/components/molecules/InputWrapper/InputWrapper.style.tsx @@ -5,7 +5,7 @@ import { FancyBox } from '@/components/atoms/FancyBox'; import { disabledStyle } from '@/design/designFunctions/disabledStyle'; const PositionWithLabel = (theme: TTheme, $isTextArea: boolean) => css` - padding: ${theme.spacing.xxs} ${theme.spacing.sm} ${theme.spacing.xs}; + padding: ${theme.spacing.xxs} ${theme.spacing.sm} ${theme.spacing.xxs}; height: ${!$isTextArea ? theme.globalElementSizes.lg : ''}; `; @@ -45,7 +45,7 @@ export const ExtendedFancyBox = styled(FancyBox)` // eslint-disable-next-line react-refresh/only-export-components export const generateIconStyle = (hasLabel: boolean) => css<{ theme: TTheme }>` flex-shrink: 0; - margin-top: ${hasLabel ? '10px' : '3px'}; + margin-top: ${hasLabel ? '10px' : '5px'}; transition: 0.25s; align-self: self-start; `; diff --git a/src/components/molecules/InputWrapper/InputWrapper.tsx b/src/components/molecules/InputWrapper/InputWrapper.tsx index 1ab4ebd5..ee39fa32 100644 --- a/src/components/molecules/InputWrapper/InputWrapper.tsx +++ b/src/components/molecules/InputWrapper/InputWrapper.tsx @@ -13,6 +13,7 @@ export default function InputWrapper(props: TInputWrapper) { id, hasValue, isActive = false, + isTextArea, disabled, InputElement, systemMessage, @@ -66,6 +67,7 @@ export default function InputWrapper(props: TInputWrapper) { ; From 8b963ad0274ae8d209ad97799b933147d6c2e2c7 Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Thu, 27 Jun 2024 21:38:49 +0200 Subject: [PATCH 10/17] refactor: Improve RawTextArea styles and functionality --- src/components/atoms/RawTextArea/RawTextArea.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/atoms/RawTextArea/RawTextArea.tsx b/src/components/atoms/RawTextArea/RawTextArea.tsx index 68db9e8b..82ccd833 100644 --- a/src/components/atoms/RawTextArea/RawTextArea.tsx +++ b/src/components/atoms/RawTextArea/RawTextArea.tsx @@ -19,7 +19,12 @@ const RawTextArea = styled.textarea` border: none; box-sizing: border-box; appearance: none; + outline: none; + width: 100%; + font-family: inherit; + font-size: ${({ theme }) => theme.fontSizes.interactiveMd.fontSize}; background-color: transparent; + resize: vertical; color: ${({ theme, $themeType = 'secondary', $layer }) => getBackgroundColor({ theme, $themeType, $layer })}; `; From 5b4a35471294746296589f45e0d7e52a5ee9ef9b Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Thu, 27 Jun 2024 21:39:19 +0200 Subject: [PATCH 11/17] refactor: Update LabeledInput padding and margin styles --- .../molecules/LabeledInput/utils/calcInputPadding.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/molecules/LabeledInput/utils/calcInputPadding.ts b/src/components/molecules/LabeledInput/utils/calcInputPadding.ts index d033ea53..54afc372 100644 --- a/src/components/molecules/LabeledInput/utils/calcInputPadding.ts +++ b/src/components/molecules/LabeledInput/utils/calcInputPadding.ts @@ -11,21 +11,25 @@ export function calcInputPadding(props: TCalcInputPadding) { if ($isLabelProvided) { if ($isActive) { return css` - padding: 16px 0 4px 0px; //if the input is active and the type is transparent + margin-top: 16px; + padding: 0 0 4px 0px; //if the input is active and the type is transparent `; } else { return css` - padding: 12px 0 8px 0px; //if the input is not active and the type is transparent + margin-top: 12px; + padding: 0 0 8px 0px; //if the input is not active and the type is transparent `; } } else { if ($isActive) { return css` - padding: 2px 0 2px 0px; //if the input is active and the type is transparent + margin-top: 2px; + padding: 0 0 2px 0px; //if the input is active and the type is transparent `; } else { return css` - padding: 2px 0 2px 0px; //if the input is not active and the type is transparent + margin-top: 2px; + padding: 0 0 2px 0px; //if the input is not active and the type is transparent `; } } From 5fa6ff692bf4e0c282f152f0bb47f018f3aaaba2 Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Thu, 27 Jun 2024 21:39:52 +0200 Subject: [PATCH 12/17] refactor: Update FancyTextArea label underline and rows --- src/Routes/InputsRoute/InputsRoute.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Routes/InputsRoute/InputsRoute.tsx b/src/Routes/InputsRoute/InputsRoute.tsx index b301b097..928bb412 100644 --- a/src/Routes/InputsRoute/InputsRoute.tsx +++ b/src/Routes/InputsRoute/InputsRoute.tsx @@ -78,7 +78,7 @@ export default function InputsRoute() { return ( <> - + @@ -138,7 +138,7 @@ export default function InputsRoute() { - + Date: Thu, 27 Jun 2024 21:40:24 +0200 Subject: [PATCH 13/17] refactor: Update background position in DropDownSelect style --- src/components/atoms/DropDownSelect/DropDownSelect.style.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/atoms/DropDownSelect/DropDownSelect.style.tsx b/src/components/atoms/DropDownSelect/DropDownSelect.style.tsx index 81fff2ea..41527b87 100644 --- a/src/components/atoms/DropDownSelect/DropDownSelect.style.tsx +++ b/src/components/atoms/DropDownSelect/DropDownSelect.style.tsx @@ -20,7 +20,7 @@ export const SelectField = styled.select` `} background-repeat: no-repeat; - background-position: right ${({ theme }) => theme.spacing.xxs} bottom 30%; + background-position: right ${({ theme }) => theme.spacing.xxs} bottom 70%; text-align-last: ${({ $align }) => ($align !== 'center' ? 'left' : 'center')}; color: ${({ theme }) => theme.color.secondary[0]}; border: none; From f2ea1322d39a5f605880a0fb158265397fc3589c Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Thu, 27 Jun 2024 21:41:03 +0200 Subject: [PATCH 14/17] refactor: Update DateInput style for height and box-sizing --- src/components/atoms/DateInput/DateInput.style.tsx | 3 ++- src/components/organisms/FancyTextArea/index.ts | 3 +++ 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 src/components/organisms/FancyTextArea/index.ts diff --git a/src/components/atoms/DateInput/DateInput.style.tsx b/src/components/atoms/DateInput/DateInput.style.tsx index 707d3a89..5ebbbc98 100644 --- a/src/components/atoms/DateInput/DateInput.style.tsx +++ b/src/components/atoms/DateInput/DateInput.style.tsx @@ -14,9 +14,10 @@ type IRawInputWrapper = { export const StyledDatePicker = styled(RawInput)` color: ${({ $isActive, $themeType = 'secondary', $layer, theme }) => $isActive ? getBackgroundColor({ theme, $themeType, $layer }) : 'transparent'}; - height: ${({ theme }) => theme.globalElementSizes.md}; + height: 18px; transition: color 0.3s ease-in; font-family: inherit; + box-sizing: content-box; /* This renders a Placerholder in Text when its needed */ ${({ placeholder, $themeType = 'secondary', $layer = 4, value, theme, $align, $isActive }) => { diff --git a/src/components/organisms/FancyTextArea/index.ts b/src/components/organisms/FancyTextArea/index.ts new file mode 100644 index 00000000..32f98d10 --- /dev/null +++ b/src/components/organisms/FancyTextArea/index.ts @@ -0,0 +1,3 @@ +export { default as FancyTextArea } from './FancyTextArea'; + +export type { TFancyTextArea } from './FancyTextArea.model'; From 96deb3b70ee0b7df656f2e1da601cb846a3e6b50 Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Fri, 28 Jun 2024 16:48:54 +0200 Subject: [PATCH 15/17] refactor: Update PasswordInput style and add FancyPasswordInput component --- src/Routes/InputsRoute/InputsRoute.tsx | 1 + .../PasswordInput/PasswordInput.style.tsx | 4 +- .../atoms/RawTextArea/RawTextArea.tsx | 1 + .../LabeledInput/utils/calcInputPadding.ts | 44 +++++++++---------- 4 files changed, 26 insertions(+), 24 deletions(-) diff --git a/src/Routes/InputsRoute/InputsRoute.tsx b/src/Routes/InputsRoute/InputsRoute.tsx index 928bb412..c96233fc 100644 --- a/src/Routes/InputsRoute/InputsRoute.tsx +++ b/src/Routes/InputsRoute/InputsRoute.tsx @@ -100,6 +100,7 @@ export default function InputsRoute() { label="Password" inputElement={} /> + diff --git a/src/components/atoms/PasswordInput/PasswordInput.style.tsx b/src/components/atoms/PasswordInput/PasswordInput.style.tsx index 9a5c1930..e515ef05 100644 --- a/src/components/atoms/PasswordInput/PasswordInput.style.tsx +++ b/src/components/atoms/PasswordInput/PasswordInput.style.tsx @@ -7,9 +7,9 @@ import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForC export const WrapperEye = styled.div<{ theme: TTheme; $themeType?: TUiColorsNotTransparent; $layer?: TLayer }>` position: absolute; - bottom: 0px; + bottom: 50%; + transform: translateY(65%); right: 0; - padding: ${({ theme }) => `${theme.spacing.xs} 0 ${theme.spacing.xxs} ${theme.spacing.xs}`}; box-sizing: border-box; svg { diff --git a/src/components/atoms/RawTextArea/RawTextArea.tsx b/src/components/atoms/RawTextArea/RawTextArea.tsx index 82ccd833..73ecf6ae 100644 --- a/src/components/atoms/RawTextArea/RawTextArea.tsx +++ b/src/components/atoms/RawTextArea/RawTextArea.tsx @@ -22,6 +22,7 @@ const RawTextArea = styled.textarea` outline: none; width: 100%; font-family: inherit; + min-height: ${({ theme }) => theme.globalElementSizes.xs}; font-size: ${({ theme }) => theme.fontSizes.interactiveMd.fontSize}; background-color: transparent; resize: vertical; diff --git a/src/components/molecules/LabeledInput/utils/calcInputPadding.ts b/src/components/molecules/LabeledInput/utils/calcInputPadding.ts index 54afc372..956a8765 100644 --- a/src/components/molecules/LabeledInput/utils/calcInputPadding.ts +++ b/src/components/molecules/LabeledInput/utils/calcInputPadding.ts @@ -6,31 +6,31 @@ type TCalcInputPadding = { }; export function calcInputPadding(props: TCalcInputPadding) { + // eslint-disable-next-line @typescript-eslint/no-unused-vars const { $isActive, $isLabelProvided } = props; if ($isLabelProvided) { - if ($isActive) { - return css` - margin-top: 16px; - padding: 0 0 4px 0px; //if the input is active and the type is transparent - `; - } else { - return css` - margin-top: 12px; - padding: 0 0 8px 0px; //if the input is not active and the type is transparent - `; - } + return css` + margin-top: 16px; + padding: 0 0 8px 0px; //if the input is not active and the type is transparent + `; + // old spacings remove when its not needed anymore + // if ($isActive) { + // return css` + // margin-top: 16px; + // padding: 0 0 4px 0px; //if the input is active and the type is transparent + // `; + // } else { + // return css` + // margin-top: 12px; + // padding: 0 0 8px 0px; //if the input is not active and the type is transparent + // `; + // } } else { - if ($isActive) { - return css` - margin-top: 2px; - padding: 0 0 2px 0px; //if the input is active and the type is transparent - `; - } else { - return css` - margin-top: 2px; - padding: 0 0 2px 0px; //if the input is not active and the type is transparent - `; - } + return css` + // old spacings remove when its not needed anymore + margin-top: 2px; + padding: 0 0 2px 0px; //if the input is not active and the type is transparent + `; } } From ff7fdef7f5ab9ec59afe8ea992165ea6bb8ca7a7 Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Fri, 28 Jun 2024 18:06:51 +0200 Subject: [PATCH 16/17] feat: Add FancyTextArea component --- lib/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/index.ts b/lib/index.ts index 8388e508..127d68d7 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -136,6 +136,7 @@ export * from '@/components/organisms/FancyPasswordInput'; export * from '@/components/organisms/FancyTextInput'; export * from '@/components/organisms/FancyColorInput'; export * from '@/components/organisms/FancyListBox'; +export * from '@/components/organisms/FancyTextArea'; // ---------- Templates ------- // export * from '@/components/templates/FancyInfoCard'; From b0e207898d133415ba389cb868bb73ef30518da2 Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Fri, 28 Jun 2024 18:33:17 +0200 Subject: [PATCH 17/17] refactor: Update FancyTextArea import in documentation --- src/components/organisms/FancyTextArea/docu/FancyTextArea.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/organisms/FancyTextArea/docu/FancyTextArea.mdx b/src/components/organisms/FancyTextArea/docu/FancyTextArea.mdx index 905286da..5092b5e0 100644 --- a/src/components/organisms/FancyTextArea/docu/FancyTextArea.mdx +++ b/src/components/organisms/FancyTextArea/docu/FancyTextArea.mdx @@ -1,8 +1,8 @@ import { Meta, Title, Description, Canvas, Controls } from '@storybook/blocks'; -import * as FancyTextAreaStories from './FancyTextAreaStories.stories'; +import * as FancyTextAreaStories from './FancyTextArea.stories'; - {/* Assumes you have a Storybook file for FancyTextArea */} +