Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DApp-1706 blocks/textarea #1707

Merged
merged 23 commits into from
Jul 10, 2024
Merged
Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
c5ca5f1
update changes
corlard3y Jul 2, 2024
12b4d98
add props type
corlard3y Jul 2, 2024
58cbcf0
Merge branch 'main' into redoDropdownMenu
corlard3y Jul 2, 2024
c83902d
update version and remove on dash
corlard3y Jul 2, 2024
4085528
Merge branch 'main' of github.com:push-protocol/push-dapp
rohitmalhotra1420 Jul 3, 2024
8cff92b
theme in progress
rohitmalhotra1420 Jul 3, 2024
ea3c4ab
semantics in progress
rohitmalhotra1420 Jul 3, 2024
d092b2a
button semantics in progress
rohitmalhotra1420 Jul 4, 2024
36e2b9c
button and switch semantics added
rohitmalhotra1420 Jul 4, 2024
ab924c1
added more semantics
rohitmalhotra1420 Jul 4, 2024
c76497b
added all the semantics
rohitmalhotra1420 Jul 5, 2024
7b7cde0
added new theme support
rohitmalhotra1420 Jul 7, 2024
6d37d80
added theme type
rohitmalhotra1420 Jul 7, 2024
3b5d6e7
updated
rohitmalhotra1420 Jul 7, 2024
d135ee1
fixed types and file structure
rohitmalhotra1420 Jul 8, 2024
94bdc5a
Merge branch 'main' of github.com:push-protocol/push-dapp into DApp-1…
rohitmalhotra1420 Jul 8, 2024
3a1d2e8
fixed input semantics name
rohitmalhotra1420 Jul 9, 2024
3ba5895
removed curropt dropdown utils file
rohitmalhotra1420 Jul 9, 2024
e3c3dd8
Merge branch 'main' of github.com:push-protocol/push-dapp into DApp-1…
rohitmalhotra1420 Jul 9, 2024
3c6e296
implemented textarea component
rohitmalhotra1420 Jul 9, 2024
1c5b875
Merge branch 'main' of github.com:push-protocol/push-dapp into DApp-1…
rohitmalhotra1420 Jul 9, 2024
985bd11
added new color typesin Box
rohitmalhotra1420 Jul 9, 2024
077455f
fixed texarea description color
rohitmalhotra1420 Jul 10, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/blocks/Blocks.types.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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';

Expand Down
6 changes: 5 additions & 1 deletion src/blocks/Blocks.utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
BorderValue,
RadiusType,
} from './Blocks.types';
import { ThemeColors } from './theme/Theme.types';

/**
* @param propName
Expand Down Expand Up @@ -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;

Expand Down
1 change: 1 addition & 0 deletions src/blocks/box/Box.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
5 changes: 3 additions & 2 deletions src/blocks/box/Box.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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 */
Expand Down
1 change: 1 addition & 0 deletions src/blocks/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
4 changes: 3 additions & 1 deletion src/blocks/text/Text.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 */
Expand Down Expand Up @@ -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}
Expand Down
179 changes: 179 additions & 0 deletions src/blocks/textarea/TextArea.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
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} />}
rohitmalhotra1420 marked this conversation as resolved.
Show resolved Hide resolved
</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' : 'components-inputs-text-disabled'}
rohitmalhotra1420 marked this conversation as resolved.
Show resolved Hide resolved
>
{description}
</Text>
)}
{errorMessage && (
<Text
variant="c-regular"
color="components-inputs-text-danger"
>
{errorMessage}
</Text>
)}
</Container>
);
}
);
1 change: 1 addition & 0 deletions src/blocks/textarea/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './TextArea';
6 changes: 4 additions & 2 deletions src/blocks/theme/Theme.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading