DApp-1706 blocks/textarea (#1707)

* update changes * add props type * update version and remove on dash * theme in progress * semantics in progress * button semantics in progress * button and switch semantics added * added more semantics * added all the semantics * added new theme support * added theme type * updated comment * fixed types and file structure * fixed input semantics name * removed curropt dropdown utils file * implemented textarea component * added new color typesin Box * fixed texarea description color --------- Co-authored-by: corlard3y <[email protected]>
push-protocol · Jul 16, 2024 · 78dbb0f · 78dbb0f
1 parent 0c92a23
commit 78dbb0f
Show file tree

Hide file tree

Showing 9 changed files with 206 additions and 7 deletions.
diff --git a/src/blocks/Blocks.types.ts b/src/blocks/Blocks.types.ts
@@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { BoxResponsiveCSSProperties, BoxResponsiveCSSPropertiesData, BoxResponsivePropValues } from './box';
 import { blocksColorsLegacy } from './Blocks.colors';
+import { ThemeColors } from './theme/Theme.types';
 import {
   SkeletonResponsiveCSSProperties,
   SkeletonResponsiveCSSPropertiesData,
@@ -57,7 +58,8 @@ export type BlocksColors = keyof BlocksColorData;
 
 export type ThemeMode = 'light' | 'dark';
 
-export type ThemeModeColors = Record<ThemeMode, BlocksColors>;
+// TODO: Remove BlocksColors
+export type ThemeModeColors = Record<ThemeMode, BlocksColors | ThemeColors>;
 
 export type BorderValue = `${number}px ${string} ${BlocksColors}` | 'none';
 

diff --git a/src/blocks/Blocks.utils.ts b/src/blocks/Blocks.utils.ts
@@ -14,6 +14,7 @@ import {
   BorderValue,
   RadiusType,
 } from './Blocks.types';
+import { ThemeColors } from './theme/Theme.types';
 
 /**
  * @param propName
@@ -135,10 +136,13 @@ export const getResponsiveCSS = (data: ResponsiveCSSPropertyData[]) => {
 };
 
 /**
+ * @deprecated
  * @param color
  * @returns color as a css variable: var(--primary)
+ *
+ * // TODO: Remove this function. We don't need it.
  */
-export const getBlocksColor = (mode: ThemeMode, color?: BlocksColors | ThemeModeColors) => {
+export const getBlocksColor = (mode: ThemeMode, color?: BlocksColors | ThemeModeColors | ThemeColors) => {
   // If color is not given return undefined, to avoid any breakages
   if (!color) return color;
 

diff --git a/src/blocks/box/Box.tsx b/src/blocks/box/Box.tsx
@@ -32,6 +32,7 @@ const StyledBox = styled.div.withConfig({
 `;
 const Box = forwardRef<HTMLElement, BoxProps>(({ as = 'div', ...props }, ref) => {
   const { mode } = useBlocksTheme();
+  // TODO: We need to remove color dependency from BlocksColors | ThemeModeColors to fix this error
   return (
     <StyledBox
       as={as}

diff --git a/src/blocks/box/Box.types.ts b/src/blocks/box/Box.types.ts
@@ -11,6 +11,7 @@ import {
   ValueOf,
 } from '../Blocks.types';
 import { FlattenSimpleInterpolation } from 'styled-components';
+import { ThemeColors } from 'blocks/theme/Theme.types';
 
 export type BoxResponsiveProps = {
   /* Sets align-items css property */
@@ -49,9 +50,9 @@ export type BoxNonResponsiveProps = {
   /* Sets border-radius css property */
   borderRadius?: RadiusType;
   /* Sets background-color css property */
-  backgroundColor?: BlocksColors | ThemeModeColors;
+  backgroundColor?: BlocksColors | ThemeModeColors | ThemeColors;
   /* Sets color css property */
-  color?: BlocksColors | ThemeModeColors;
+  color?: BlocksColors | ThemeModeColors | ThemeColors;
   /* Sets cursor css property */
   cursor?: CSSProperties['cursor'];
   /* Sets position css property */

diff --git a/src/blocks/index.ts b/src/blocks/index.ts
@@ -10,6 +10,7 @@ export { Skeleton, type SkeletonProps } from './skeleton';
 export { Tabs, type TabsProps, type TabItem } from './tabs';
 export { Text, type TextProps } from './text';
 export { Tooltip, type TooltipProps } from './tooltip';
+export { TextArea, type TextAreaProps } from './textarea';
 export { TextInput } from './textInput';
 
 export * from './Blocks.colors';

diff --git a/src/blocks/text/Text.tsx b/src/blocks/text/Text.tsx
@@ -4,6 +4,7 @@ import styled, { FlattenSimpleInterpolation } from 'styled-components';
 import { useBlocksTheme } from '../Blocks.hooks';
 import { TransformedHTMLAttributes, BlocksColors, ModeProp, ThemeModeColors } from '../Blocks.types';
 import { getBlocksColor } from '../Blocks.utils';
+import { ThemeColors } from '../theme/Theme.types';
 import { TextAlign, TextHTMLTags, TextResponsiveProps, TextTransform, TextVariants } from './Text.types';
 import { getVariantStyles } from './Text.utils';
 import { getTextResponsiveCSS } from './Text.utils';
@@ -14,7 +15,7 @@ export type TextProps = {
   /* Children pass to the Text component */
   children?: ReactNode;
   /* Sets the css property for text color */
-  color?: BlocksColors | ThemeModeColors;
+  color?: BlocksColors | ThemeModeColors | ThemeColors;
   /* Extra css prop from styled components to apply custom css not supported by Text component */
   css?: FlattenSimpleInterpolation;
   /* For truncating the contents with ... when there's container overflow */
@@ -88,6 +89,7 @@ const StyledText = styled.p.withConfig({
 const Text = forwardRef<HTMLElement, TextProps>(({ as = 'p', ...props }, ref) => {
   const { mode } = useBlocksTheme();
   return (
+    // TODO: We need to remove color dependency from BlocksColors | ThemeModeColors to fix this error
     <StyledText
       as={as}
       mode={mode}

diff --git a/src/blocks/textarea/TextArea.tsx b/src/blocks/textarea/TextArea.tsx
@@ -0,0 +1,185 @@
+import { Asterisk } from 'blocks/icons';
+import { Text } from 'blocks/text/Text';
+import React, { forwardRef } from 'react';
+import styled, { FlattenSimpleInterpolation, css } from 'styled-components';
+
+export type TextAreaProps = {
+  css?: FlattenSimpleInterpolation;
+  description?: string;
+  disabled?: boolean;
+  error?: boolean;
+  errorMessage?: string;
+  label?: string;
+  numberOfLines?: number;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  placeholder?: string;
+  required?: boolean;
+  resizable?: boolean;
+  success?: boolean;
+  totalCount?: number;
+  value: string;
+};
+
+const Container = styled.div<{ css?: FlattenSimpleInterpolation }>`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 0;
+  gap: var(--spacing-xxs, 8px);
+
+  /* Custom CSS applied via styled component css prop */
+  ${(props) => props.css || ''};
+`;
+
+const StyledTextArea = styled.textarea<{
+  error?: boolean;
+  success?: boolean;
+  resizable?: boolean;
+}>`
+  ${({ theme, resizable, success, error }) => {
+    const colors = theme?.blocksTheme?.colors;
+    const defaultState = error ? 'danger' : success ? 'success' : 'default';
+    const focusState = error ? 'danger' : success ? 'success' : 'focus';
+    return css`
+      align-self: stretch;
+      align-items: flex-start;
+      border-radius: var(--radius-xs, 12px);
+      border: 1.5px solid
+        var(--components-inputs-stroke-${defaultState}, ${colors[`components-inputs-stroke-${defaultState}`]});
+      background: var(
+        --components-inputs-background-${defaultState},
+        ${colors[`components-inputs-background-${defaultState}`]}
+      );
+
+      color: var(--components-inputs-text-default, ${colors['components-inputs-text-default']});
+
+      display: flex;
+
+      font-family: var(--font-family);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+
+      gap: var(--spacing-none, 0px);
+
+      line-height: 20px;
+
+      padding: var(--spacing-xs, 12px);
+      ::placeholder {
+        color: var(--components-inputs-text-placeholder, ${colors['components-inputs-text-placeholder']});
+      }
+
+      resize: ${resizable ? 'vertical' : 'none'};
+
+      &:hover {
+        outline: none;
+      }
+
+      &:focus {
+        border: 1.5px solid
+          var(--components-inputs-stroke-${focusState}, ${colors[`components-inputs-stroke-${focusState}`]});
+        outline: none;
+      }
+
+      &:disabled {
+        border: 1.5px solid var(--components-inputs-stroke-default, ${colors['components-inputs-stroke-default']});
+        background: var(--components-inputs-background-disabled, ${colors['components-inputs-background-disabled']});
+        cursor: not-allowed;
+        color: var(--components-inputs-text-disabled, ${colors['components-inputs-text-disabled']});
+      }
+    `;
+  }}
+`;
+
+const LabelContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;
+
+const LabelTextContainer = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-xxxs, 4px);
+`;
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (
+    {
+      css,
+      description,
+      disabled,
+      error,
+      errorMessage,
+      label,
+      numberOfLines = 4,
+      onChange,
+      placeholder,
+      required,
+      resizable,
+      success,
+      totalCount,
+      value,
+    },
+    ref
+  ) => {
+    return (
+      <Container css={css}>
+        {label && (
+          <LabelContainer>
+            <Text
+              variant="h6-semibold"
+              color="components-inputs-text-default"
+            >
+              <LabelTextContainer>
+                {label}
+                {required && <Asterisk size={4.6} />}
+              </LabelTextContainer>
+            </Text>
+            {totalCount && (
+              <Text
+                variant="c-regular"
+                color="components-inputs-text-secondary"
+              >{`${value?.length || 0} / ${totalCount}`}</Text>
+            )}
+          </LabelContainer>
+        )}
+        <StyledTextArea
+          disabled={disabled}
+          error={error}
+          onChange={onChange}
+          placeholder={placeholder}
+          ref={ref}
+          required={required}
+          resizable={resizable}
+          rows={numberOfLines}
+          success={success}
+          value={value}
+        />
+        {description && (
+          <Text
+            variant="c-regular"
+            color={
+              success || error
+                ? 'components-inputs-text-default'
+                : disabled
+                ? 'components-inputs-text-disabled'
+                : 'components-inputs-text-placeholder'
+            }
+          >
+            {description}
+          </Text>
+        )}
+        {errorMessage && (
+          <Text
+            variant="c-regular"
+            color="components-inputs-text-danger"
+          >
+            {errorMessage}
+          </Text>
+        )}
+      </Container>
+    );
+  }
+);
diff --git a/src/blocks/textarea/index.ts b/src/blocks/textarea/index.ts
@@ -0,0 +1 @@
+export * from './TextArea';
diff --git a/src/blocks/theme/Theme.types.ts b/src/blocks/theme/Theme.types.ts
@@ -11,12 +11,14 @@ type ColorSemantics = typeof colorSemantics;
 
 type StringKeys<T> = Extract<keyof T, string>;
 
-type ThemeColors = {
+type ThemeColorsConfig = {
   [K1 in StringKeys<ColorSemantics> as `${K1}-${StringKeys<ColorSemantics[K1]>}`]: string;
 };
 
+export type ThemeColors = keyof ThemeColorsConfig;
+
 export type Theme = {
-  colors: ThemeColors;
+  colors: ThemeColorsConfig;
   blur: typeof blurVariables;
   borderRadius: typeof borderRadiusVariables;
   borderSize: typeof borderSizeVariables;