From c5ca5f161de345cd4756897fe1f87597b7a8c4e2 Mon Sep 17 00:00:00 2001 From: corlard3y Date: Tue, 2 Jul 2024 09:50:59 +0100 Subject: [PATCH 1/6] update changes --- package.json | 1 + src/blocks/dropdown/Dropdown.tsx | 57 ++++++++ src/blocks/dropdown/Dropdown.types.ts | 24 ++++ src/blocks/dropdown/Dropdown.utils.tsx | 35 +++++ src/blocks/dropdown/index.ts | 3 + src/blocks/index.ts | 2 + src/blocks/menu/Menu.constants.ts | 10 ++ src/blocks/menu/Menu.tsx | 50 +++++++ src/blocks/menu/Menu.types.ts | 37 ++++++ src/blocks/menu/MenuItem.tsx | 68 ++++++++++ src/blocks/menu/index.ts | 4 + .../components/FeaturedChannelsListItem.tsx | 43 +++++- yarn.lock | 124 ++++++++++++++++++ 13 files changed, 457 insertions(+), 1 deletion(-) create mode 100644 src/blocks/dropdown/Dropdown.tsx create mode 100644 src/blocks/dropdown/Dropdown.types.ts create mode 100644 src/blocks/dropdown/Dropdown.utils.tsx create mode 100644 src/blocks/dropdown/index.ts create mode 100644 src/blocks/menu/Menu.constants.ts create mode 100644 src/blocks/menu/Menu.tsx create mode 100644 src/blocks/menu/Menu.types.ts create mode 100644 src/blocks/menu/MenuItem.tsx create mode 100644 src/blocks/menu/index.ts diff --git a/package.json b/package.json index 918fc6257f..0da062e186 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@pushprotocol/restapi": "1.7.20", "@pushprotocol/socket": "0.5.3", "@pushprotocol/uiweb": "1.4.1", + "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-tooltip": "^1.1.1", "@reach/tabs": "^0.18.0", "@reduxjs/toolkit": "^1.7.1", diff --git a/src/blocks/dropdown/Dropdown.tsx b/src/blocks/dropdown/Dropdown.tsx new file mode 100644 index 0000000000..ff478598ce --- /dev/null +++ b/src/blocks/dropdown/Dropdown.tsx @@ -0,0 +1,57 @@ +import { FC, forwardRef, useState } from 'react'; +import styled from 'styled-components'; +import * as RadixDropdown from '@radix-ui/react-dropdown-menu'; + +import { DropdownProps } from './Dropdown.types'; +import { getDropdownPositionalCSS } from './Dropdown.utils'; + +const RadixDropdownContent = styled(RadixDropdown.Content)` + /* Extra CSS props */ + ${(props) => props.css || ''} +`; + +const Dropdown: FC = forwardRef( + ({ overlay, trigger = 'click', children, dropdownPosition = 'bottom', ...props }, ref) => { + const [isOpen, setIsOpen] = useState(false); + + const showDropdown = () => setIsOpen(true); + const hideDropdown = () => setIsOpen(false); + const toggleDropdown = () => setIsOpen(!isOpen); + + const { ...cssProps } = getDropdownPositionalCSS(dropdownPosition); + + return ( + + trigger == 'hover' && showDropdown()} + onMouseLeave={() => trigger == 'hover' && hideDropdown()} + onClick={() => trigger == 'click' && toggleDropdown} + > + {children && typeof children === 'function' ? children({ isOpen }) : children} + + + trigger == 'hover' && showDropdown()} + onMouseLeave={() => trigger == 'hover' && hideDropdown()} + onPointerDownOutside={() => hideDropdown()} + {...cssProps} + {...props} + > + {overlay} + + + + ); + } +); + +Dropdown.displayName = 'Dropdown'; + +export { Dropdown }; diff --git a/src/blocks/dropdown/Dropdown.types.ts b/src/blocks/dropdown/Dropdown.types.ts new file mode 100644 index 0000000000..390e9c3949 --- /dev/null +++ b/src/blocks/dropdown/Dropdown.types.ts @@ -0,0 +1,24 @@ +import { ReactElement, ReactNode } from 'react'; +import { FlattenSimpleInterpolation } from 'styled-components'; +import { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu'; + +export type DropdownPosition = 'bottom' | 'left' | 'top' | 'right'; + +export type DropdownTrigger = 'hover' | 'click'; + +export type DropdownComponentProps = { + // This will be content upon clicking on which the dropdown overlay will open + children?: ((props: { isOpen: boolean }) => ReactElement) | ReactNode | any; + // children?: ((props: { isOpen: boolean }) => ReactElement) | ReactElement | ReactNode | any; + // children?: ReactNode; + // position of menu + dropdownPosition?: DropdownPosition; + // on which action to open the dropdown + trigger?: DropdownTrigger; + // This is used for custom css instead of style prop, check Box/Text component + css?: FlattenSimpleInterpolation; + // This will be the contents of the dropdown overlay + overlay?: ReactNode; +}; + +export type DropdownProps = DropdownComponentProps & DropdownMenuContentProps; diff --git a/src/blocks/dropdown/Dropdown.utils.tsx b/src/blocks/dropdown/Dropdown.utils.tsx new file mode 100644 index 0000000000..e726e923f2 --- /dev/null +++ b/src/blocks/dropdown/Dropdown.utils.tsx @@ -0,0 +1,35 @@ +import { DropdownPosition } from './Dropdown.types'; +import { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu'; + +export const getDropdownPositionalCSS = (dropdownPosition: DropdownPosition) => { + let style: { + align: DropdownMenuContentProps['align']; + side: DropdownMenuContentProps['side']; + } = { + align: 'center', + side: 'bottom', + }; + + switch (dropdownPosition) { + case 'top': + style = { + align: 'center', + side: 'top', + }; + break; + case 'left': + style = { + align: 'center', + side: 'left', + }; + break; + case 'right': + style = { + align: 'center', + side: 'right', + }; + break; + } + + return style; +}; diff --git a/src/blocks/dropdown/index.ts b/src/blocks/dropdown/index.ts new file mode 100644 index 0000000000..5eb60d0962 --- /dev/null +++ b/src/blocks/dropdown/index.ts @@ -0,0 +1,3 @@ +export * from './Dropdown'; +export * from './Dropdown.types'; +export * from './Dropdown.utils'; diff --git a/src/blocks/index.ts b/src/blocks/index.ts index 4867ab5b8d..0c4ffec8cc 100644 --- a/src/blocks/index.ts +++ b/src/blocks/index.ts @@ -1,7 +1,9 @@ export { Box, type BoxProps } from './box'; export { Button, type ButtonProps } from './button'; +export { Dropdown, type DropdownProps } from './dropdown'; export { HoverableSVG, type HoverableSVGProps } from './hoverableSVG'; export { Link, type LinkProps } from './link'; +export { Menu, type MenuProps, MenuItem, type MenuItemComponentProps } from './menu'; export { Separator, type SeparatorProps } from './separator'; export { Skeleton, type SkeletonProps } from './skeleton'; export { Tabs, type TabsProps, type TabItem } from './tabs'; diff --git a/src/blocks/menu/Menu.constants.ts b/src/blocks/menu/Menu.constants.ts new file mode 100644 index 0000000000..cc560bcb31 --- /dev/null +++ b/src/blocks/menu/Menu.constants.ts @@ -0,0 +1,10 @@ +import { MenuProps } from './Menu.types'; + +export const menuCSSPropsKeys: (keyof MenuProps)[] = [ + 'height', + 'maxHeight', + 'minHeight', + 'maxWidth', + 'minWidth', + 'width', +]; diff --git a/src/blocks/menu/Menu.tsx b/src/blocks/menu/Menu.tsx new file mode 100644 index 0000000000..1dc9bb50d7 --- /dev/null +++ b/src/blocks/menu/Menu.tsx @@ -0,0 +1,50 @@ +import { FC } from 'react'; +import styled from 'styled-components'; + +import type { MenuProps } from './Menu.types'; +import { getBlocksColor } from 'blocks/Blocks.utils'; +import { ModeProp } from 'blocks/Blocks.types'; +import { useBlocksTheme } from 'blocks/Blocks.hooks'; +import { menuCSSPropsKeys } from './Menu.constants'; + +const StyledMenu = styled.div.withConfig({ + shouldForwardProp: (prop, defaultValidatorFn) => + !menuCSSPropsKeys.includes(prop as keyof MenuProps) && defaultValidatorFn(prop), +})` + display: flex; + flex-direction: column; + background-color: ${({ mode }) => getBlocksColor(mode, { light: 'white', dark: 'gray-900' })}; + border: 1px solid ${({ mode }) => getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })}; + border-radius: var(--r3); + padding: var(--s2); + margin: var(--s0); + gap: var(--s3); + + /* Menu non-responsive styles */ + width: ${(props) => props.width}; + min-width: ${(props) => props.minWidth || '145px'}; + max-width: ${(props) => props.maxWidth}; + height: ${(props) => props.height}; + min-height: ${(props) => props.minHeight}; + max-height: ${(props) => props.maxHeight}; + + /* Extra CSS props */ + ${(props) => props.css || ''} +`; + +const Menu: FC = ({ children, ...props }) => { + const { mode } = useBlocksTheme(); + + return ( + + {children} + + ); +}; + +Menu.displayName = 'Menu'; + +export { Menu }; diff --git a/src/blocks/menu/Menu.types.ts b/src/blocks/menu/Menu.types.ts new file mode 100644 index 0000000000..162a506321 --- /dev/null +++ b/src/blocks/menu/Menu.types.ts @@ -0,0 +1,37 @@ +import { ReactNode } from 'react'; +import { FlattenSimpleInterpolation } from 'styled-components'; + +export type MenuNonResponsiveProps = { + /* Sets height css property */ + height?: string; + /* Sets max-height css property */ + maxHeight?: string; + /* Sets min-height css property */ + minHeight?: string; + /* Sets max-width css property */ + maxWidth?: string; + /* Sets min-width css property */ + minWidth?: string; + /* Sets width css property */ + width?: string; +}; + +export type MenuComponentProps = { + /* Additional prop from styled components to apply custom css to Menu */ + css?: FlattenSimpleInterpolation; + /* Child react nodes rendered by Menu */ + children: ReactNode; +}; + +export type MenuItemComponentProps = { + /* icon element */ + icon?: ReactNode; + /* function attached to the menu item */ + onClick?: () => void; + /* menu item text */ + label?: string; + /* Additional prop from styled components to apply custom css to Menu */ + css?: FlattenSimpleInterpolation; +}; + +export type MenuProps = MenuNonResponsiveProps & MenuComponentProps; diff --git a/src/blocks/menu/MenuItem.tsx b/src/blocks/menu/MenuItem.tsx new file mode 100644 index 0000000000..9d753841c5 --- /dev/null +++ b/src/blocks/menu/MenuItem.tsx @@ -0,0 +1,68 @@ +import { FC } from 'react'; +import styled from 'styled-components'; + +import { MenuItemComponentProps } from './Menu.types'; +import { ModeProp } from 'blocks/Blocks.types'; +import { getBlocksColor } from '../Blocks.utils'; +import { useBlocksTheme } from 'blocks/Blocks.hooks'; +import { Text } from 'blocks/text'; +import { Box } from 'blocks/box'; + +const StyledMenuItem = styled.div.withConfig({ + shouldForwardProp: (prop, defaultValidatorFn) => !['mode'].includes(prop) && defaultValidatorFn(prop), +})` + // Menu default styles + padding: var(--s1); + display: flex; + flex-direction: row; + flex: 1; + align-items: center; + gap: var(--s1); + border-radius: var(--r2); + &:hover { + background-color: ${({ mode }) => getBlocksColor(mode, { light: 'gray-100', dark: 'gray-1000' })}; + } + .menu-icon { + svg { + width: 100%; + height: 100%; + } + } + cursor: pointer; + font-size: 15px; + /* Extra CSS props */ + ${(props) => props.css || ''} +`; + +const MenuItem: FC = ({ icon, label, onClick, ...props }) => { + const { mode } = useBlocksTheme(); + + return ( + + {icon && ( + + {icon && {icon}} + + )} + + + {label} + + + ); +}; + +MenuItem.displayName = 'MenuItem'; + +export { MenuItem }; diff --git a/src/blocks/menu/index.ts b/src/blocks/menu/index.ts new file mode 100644 index 0000000000..6cb277673b --- /dev/null +++ b/src/blocks/menu/index.ts @@ -0,0 +1,4 @@ +export * from './Menu'; +export * from './MenuItem'; +export * from './Menu.types'; +export * from './Menu.constants'; diff --git a/src/modules/dashboard/components/FeaturedChannelsListItem.tsx b/src/modules/dashboard/components/FeaturedChannelsListItem.tsx index 0e337d9c4a..63c6d57a3e 100644 --- a/src/modules/dashboard/components/FeaturedChannelsListItem.tsx +++ b/src/modules/dashboard/components/FeaturedChannelsListItem.tsx @@ -13,7 +13,8 @@ import { useAccount } from 'hooks'; import { formatSubscriberCount } from '../Dashboard.utils'; // Components -import { Box, Button, CaretDown, NotificationMobile, Skeleton, Text } from 'blocks'; +import { Box, Button, CaretDown, CaretUp, Dropdown, Menu, MenuItem, NotificationMobile, Skeleton, Text } from 'blocks'; +import { AiFillExclamationCircle } from 'react-icons/ai'; import { SubscribeChannelDropdown } from 'common/components/SubscribeChannelDropdown'; import { UnsubscribeChannelDropdown } from 'common/components/UnsubscribeChannelDropdown'; import TickDecoratedCircleFilled from 'blocks/icons/components/TickDecoratedCircleFilled'; @@ -82,6 +83,46 @@ const FeaturedChannelsListItem: FC = (props) => { /> + + } + onClick={() => { + alert('wewe'); + }} + label="Archive" + /> + } + onClick={() => {}} + label="New Archive" + /> + } + onClick={() => {}} + label="New Test" + /> + } + onClick={() => {}} + label="Delete" + /> + + } + trigger="hover" + // dropdownPosition="top" + > + {({ isOpen }: { isOpen: boolean }) => ( + + )} + + {!isSubscribed && ( Date: Tue, 2 Jul 2024 10:33:33 +0100 Subject: [PATCH 2/6] add props type --- src/blocks/dropdown/Dropdown.tsx | 2 +- src/blocks/dropdown/Dropdown.types.ts | 2 -- .../dashboard/components/FeaturedChannelsListItem.tsx | 8 ++++++-- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/blocks/dropdown/Dropdown.tsx b/src/blocks/dropdown/Dropdown.tsx index ff478598ce..d5ae5927b3 100644 --- a/src/blocks/dropdown/Dropdown.tsx +++ b/src/blocks/dropdown/Dropdown.tsx @@ -37,7 +37,7 @@ const Dropdown: FC = forwardRef trigger == 'hover' && showDropdown()} onMouseLeave={() => trigger == 'hover' && hideDropdown()} onPointerDownOutside={() => hideDropdown()} diff --git a/src/blocks/dropdown/Dropdown.types.ts b/src/blocks/dropdown/Dropdown.types.ts index 390e9c3949..db6be6bb2f 100644 --- a/src/blocks/dropdown/Dropdown.types.ts +++ b/src/blocks/dropdown/Dropdown.types.ts @@ -9,8 +9,6 @@ export type DropdownTrigger = 'hover' | 'click'; export type DropdownComponentProps = { // This will be content upon clicking on which the dropdown overlay will open children?: ((props: { isOpen: boolean }) => ReactElement) | ReactNode | any; - // children?: ((props: { isOpen: boolean }) => ReactElement) | ReactElement | ReactNode | any; - // children?: ReactNode; // position of menu dropdownPosition?: DropdownPosition; // on which action to open the dropdown diff --git a/src/modules/dashboard/components/FeaturedChannelsListItem.tsx b/src/modules/dashboard/components/FeaturedChannelsListItem.tsx index 63c6d57a3e..cf5405241d 100644 --- a/src/modules/dashboard/components/FeaturedChannelsListItem.tsx +++ b/src/modules/dashboard/components/FeaturedChannelsListItem.tsx @@ -33,6 +33,10 @@ type FeaturedChannelsListItemProps = { width: string; }; +type isOpenProps = { + isOpen: boolean; +}; + const FeaturedChannelsListItem: FC = (props) => { const { channelAddress, width } = props; @@ -110,10 +114,10 @@ const FeaturedChannelsListItem: FC = (props) => { /> } - trigger="hover" + // trigger="hover" // dropdownPosition="top" > - {({ isOpen }: { isOpen: boolean }) => ( + {({ isOpen }: isOpenProps) => ( - )} - - {!isSubscribed && ( Date: Thu, 11 Jul 2024 13:38:40 +0530 Subject: [PATCH 4/6] added support for new css variables --- src/blocks/Blocks.constants.ts | 7 ++++++ src/blocks/Blocks.types.ts | 27 ++++++++++++++++++------ src/blocks/Blocks.utils.ts | 18 ++++++++++------ src/blocks/box/Box.types.ts | 12 +++++------ src/blocks/hoverableSVG/HoverableSVG.tsx | 20 ++++++++++-------- src/blocks/separator/Separator.types.ts | 4 ++-- src/blocks/skeleton/Skeleton.types.ts | 12 ++++++++--- src/blocks/theme/Theme.types.ts | 6 ++++++ 8 files changed, 74 insertions(+), 32 deletions(-) create mode 100644 src/blocks/Blocks.constants.ts diff --git a/src/blocks/Blocks.constants.ts b/src/blocks/Blocks.constants.ts new file mode 100644 index 0000000000..283264f2ce --- /dev/null +++ b/src/blocks/Blocks.constants.ts @@ -0,0 +1,7 @@ +export const newRadiusRegex = /\bradius-[a-z]+\b/g; + +export const oldRadiusRegex = /\br[0-9]+\b/g; + +export const newSpacingRegex = /\bspacing-[a-z]+\b/g; + +export const oldSpacingRegex = /\bs[0-9]+\b/g; diff --git a/src/blocks/Blocks.types.ts b/src/blocks/Blocks.types.ts index 07145040d5..bae45495ad 100644 --- a/src/blocks/Blocks.types.ts +++ b/src/blocks/Blocks.types.ts @@ -1,7 +1,7 @@ import { HTMLAttributes } from 'react'; import { BoxResponsiveCSSProperties, BoxResponsiveCSSPropertiesData, BoxResponsivePropValues } from './box'; import { blocksColorsLegacy } from './Blocks.colors'; -import { ThemeColors } from './theme/Theme.types'; +import { ThemeBorderRadius, ThemeBorderSize, ThemeColors, ThemeSpacing } from './theme/Theme.types'; import { SkeletonResponsiveCSSProperties, SkeletonResponsiveCSSPropertiesData, @@ -21,9 +21,23 @@ export type Breakpoint = 'initial' | 'ms' | 'mm' | 'ml' | 'tb' | 'lp' | 'll' | ' export type ResponsiveProp = T | { [key in Breakpoint]?: T }; -export type RadiusType = `r${number}` | `r${number} r${number}` | `r${number} r${number} r${number} r${number}`; - -export type SpaceType = `s${number}` | `s${number} s${number}` | `s${number} s${number} s${number} s${number}`; +// Remove old RadiusType types +export type BlocksRadiusType = + | `r${number}` + | `r${number} r${number}` + | `r${number} r${number} r${number} r${number}` + | ThemeBorderRadius + | `${ThemeBorderRadius} ${ThemeBorderRadius}` + | `${ThemeBorderRadius} ${ThemeBorderRadius} ${ThemeBorderRadius} ${ThemeBorderRadius}`; + +// Remove old SpaceType types +export type BlocksSpaceType = + | `s${number}` + | `s${number} s${number}` + | `s${number} s${number} s${number} s${number}` + | ThemeSpacing + | `${ThemeSpacing} ${ThemeSpacing}` + | `${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing}`; export type PixelValue = `${number}px`; @@ -58,10 +72,11 @@ export type BlocksColors = keyof BlocksColorData; export type ThemeMode = 'light' | 'dark'; -// TODO: Remove BlocksColors +// TODO: Remove ThemeModeColors export type ThemeModeColors = Record; -export type BorderValue = `${number}px ${string} ${BlocksColors}` | 'none'; +// TODO: Remove the blocks colors border size +export type BorderValue = `${number}px ${string} ${BlocksColors}` | `${number}px ${string} ${ThemeBorderSize}` | 'none'; export type ThemeModeBorder = Record; diff --git a/src/blocks/Blocks.utils.ts b/src/blocks/Blocks.utils.ts index 5797d0cfbe..b8a346160d 100644 --- a/src/blocks/Blocks.utils.ts +++ b/src/blocks/Blocks.utils.ts @@ -12,9 +12,10 @@ import { ThemeMode, ThemeModeBorder, BorderValue, - RadiusType, + BlocksRadiusType, } from './Blocks.types'; import { ThemeColors } from './theme/Theme.types'; +import { newRadiusRegex, newSpacingRegex, oldRadiusRegex, oldSpacingRegex } from './Blocks.constants'; /** * @param propName @@ -24,7 +25,10 @@ import { ThemeColors } from './theme/Theme.types'; const getCSSValue = (propName: CSSPropName, value: CSSPropValueType | undefined) => { if (propName === 'padding' || propName === 'margin') { if (typeof value === 'string') { - return value.replace(/\b(\w+)\b/g, 'var(--$1)'); + return value.replace( + newSpacingRegex.test(value) ? newSpacingRegex : oldSpacingRegex, + (match) => `var(--${match})` + ); } } else if (propName === 'gap' || propName === 'border-radius') { return `var(--${value})`; @@ -176,12 +180,14 @@ export const getBlocksBorder = (mode: ThemeMode, border?: BorderValue | ThemeMod * @param radius * @returns */ -export const getBlocksBorderRadius = (radius?: RadiusType) => { +export const getBlocksBorderRadius = (radius?: BlocksRadiusType) => { // If border-radius is not given return undefined, to avoid any breakages if (!radius) return radius; - return radius.replace(/\b(\w+)\b/g, 'var(--$1)'); + const result = radius.replace( + newRadiusRegex.test(radius) ? newRadiusRegex : oldRadiusRegex, + (match) => `var(--${match})` + ); - // If passed a design system border-radius then use radius as a variable - return `var(--${radius})`; + return result; }; diff --git a/src/blocks/box/Box.types.ts b/src/blocks/box/Box.types.ts index 722bf7ae3e..e2df79cb31 100644 --- a/src/blocks/box/Box.types.ts +++ b/src/blocks/box/Box.types.ts @@ -3,9 +3,9 @@ import { CSSProperties, ReactNode } from 'react'; import { BlocksColors, BorderValue, - RadiusType, + BlocksRadiusType, ResponsiveProp, - SpaceType, + BlocksSpaceType, ThemeModeBorder, ThemeModeColors, ValueOf, @@ -21,7 +21,7 @@ export type BoxResponsiveProps = { /* Sets flex-direction css property */ flexDirection?: ResponsiveProp; /* Sets gap between the elements */ - gap?: ResponsiveProp; + gap?: ResponsiveProp; /* Sets display css property */ display?: ResponsiveProp; /* Sets height css property */ @@ -29,7 +29,7 @@ export type BoxResponsiveProps = { /* Sets justify-content css property */ justifyContent?: ResponsiveProp; /* Sets margin css property */ - margin?: ResponsiveProp; + margin?: ResponsiveProp; /* Sets max-height css property */ maxHeight?: ResponsiveProp; /* Sets min-height css property */ @@ -39,7 +39,7 @@ export type BoxResponsiveProps = { /* Sets min-width css property */ minWidth?: ResponsiveProp; /* Sets padding css property */ - padding?: ResponsiveProp; + padding?: ResponsiveProp; /* Sets width css property */ width?: ResponsiveProp; }; @@ -48,7 +48,7 @@ export type BoxNonResponsiveProps = { /* Sets border css property */ border?: BorderValue | ThemeModeBorder; /* Sets border-radius css property */ - borderRadius?: RadiusType; + borderRadius?: BlocksRadiusType; /* Sets background-color css property */ backgroundColor?: BlocksColors | ThemeModeColors | ThemeColors; /* Sets color css property */ diff --git a/src/blocks/hoverableSVG/HoverableSVG.tsx b/src/blocks/hoverableSVG/HoverableSVG.tsx index 97018530d3..6f1e5f74bc 100644 --- a/src/blocks/hoverableSVG/HoverableSVG.tsx +++ b/src/blocks/hoverableSVG/HoverableSVG.tsx @@ -4,31 +4,33 @@ import { useBlocksTheme } from '../Blocks.hooks'; import { BlocksColors, ThemeModeColors, - SpaceType, + BlocksSpaceType, ModeProp, TransformedHTMLAttributes, - RadiusType, + BlocksRadiusType, } from '../Blocks.types'; import { getBlocksColor, getBlocksBorderRadius } from '../Blocks.utils'; +import { ThemeColors } from '../theme/Theme.types'; + export type HoverableSVGProps = { /* Icon component */ icon: React.ReactNode; /* Sets the initial color for SVG */ - defaultColor?: BlocksColors | ThemeModeColors; + defaultColor?: BlocksColors | ThemeModeColors | ThemeColors; /* Sets button as disabled */ disabled?: boolean; /* Sets the hover color for SVG */ - hoverColor?: BlocksColors | ThemeModeColors; + hoverColor?: BlocksColors | ThemeModeColors | ThemeColors; /* Sets the initial background color for SVG */ - defaultBackground?: BlocksColors | ThemeModeColors; + defaultBackground?: BlocksColors | ThemeModeColors | ThemeColors; /* Sets the initial background color for SVG */ - hoverBackground?: BlocksColors | ThemeModeColors; + hoverBackground?: BlocksColors | ThemeModeColors | ThemeColors; /* Sets the padding for SVG button container */ - padding?: SpaceType; + padding?: BlocksSpaceType; /* Sets the margin for SVG button container */ - margin?: SpaceType; + margin?: BlocksSpaceType; /* Sets the margin for SVG button container */ - borderRadius?: RadiusType; + borderRadius?: BlocksRadiusType; } & TransformedHTMLAttributes; const StyledButton = styled.button.withConfig({ diff --git a/src/blocks/separator/Separator.types.ts b/src/blocks/separator/Separator.types.ts index f8ad501ade..bdb498c743 100644 --- a/src/blocks/separator/Separator.types.ts +++ b/src/blocks/separator/Separator.types.ts @@ -1,11 +1,11 @@ -import { TransformedHTMLAttributes, ResponsiveProp, SpaceType, ValueOf } from '../Blocks.types'; +import { TransformedHTMLAttributes, ResponsiveProp, BlocksSpaceType, ValueOf } from '../Blocks.types'; import { FlattenSimpleInterpolation } from 'styled-components'; export type SeparatorResponsiveProps = { /* Sets height css property */ height?: ResponsiveProp; /* Sets margin css property */ - margin?: ResponsiveProp; + margin?: ResponsiveProp; /* Sets width css property */ width?: ResponsiveProp; }; diff --git a/src/blocks/skeleton/Skeleton.types.ts b/src/blocks/skeleton/Skeleton.types.ts index 3f0f88489d..a8aa57b5ca 100644 --- a/src/blocks/skeleton/Skeleton.types.ts +++ b/src/blocks/skeleton/Skeleton.types.ts @@ -1,17 +1,23 @@ import { ReactNode } from 'react'; -import type { TransformedHTMLAttributes, RadiusType, ResponsiveProp, SpaceType, ValueOf } from '../Blocks.types'; +import type { + TransformedHTMLAttributes, + BlocksRadiusType, + ResponsiveProp, + BlocksSpaceType, + ValueOf, +} from '../Blocks.types'; import type { FlattenSimpleInterpolation } from 'styled-components'; export type SkeletonResponsiveProps = { /* Sets height css property */ height?: ResponsiveProp; /* Sets margin css property */ - margin?: ResponsiveProp; + margin?: ResponsiveProp; /* Sets width css property */ width?: ResponsiveProp; /* Sets border radius css property */ - borderRadius?: ResponsiveProp; + borderRadius?: ResponsiveProp; }; export type SkeletonProps = SkeletonResponsiveProps & diff --git a/src/blocks/theme/Theme.types.ts b/src/blocks/theme/Theme.types.ts index 561efd63cb..ef1fc512c8 100644 --- a/src/blocks/theme/Theme.types.ts +++ b/src/blocks/theme/Theme.types.ts @@ -25,3 +25,9 @@ export type Theme = { opacity: typeof opacityVariables; spacing: typeof spacingVariables; }; + +export type ThemeBorderRadius = keyof Theme['borderRadius']; + +export type ThemeBorderSize = keyof Theme['borderSize']; + +export type ThemeSpacing = keyof Theme['spacing']; From 1c3c1dcc40f729c4e7c3b5fe1e4bb99326f11a52 Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Thu, 11 Jul 2024 13:41:12 +0530 Subject: [PATCH 5/6] deleted curropted file --- src/blocks/dropdown/Dropdown.utils.tsx | 35 -------------------------- 1 file changed, 35 deletions(-) delete mode 100644 src/blocks/dropdown/Dropdown.utils.tsx diff --git a/src/blocks/dropdown/Dropdown.utils.tsx b/src/blocks/dropdown/Dropdown.utils.tsx deleted file mode 100644 index e726e923f2..0000000000 --- a/src/blocks/dropdown/Dropdown.utils.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { DropdownPosition } from './Dropdown.types'; -import { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu'; - -export const getDropdownPositionalCSS = (dropdownPosition: DropdownPosition) => { - let style: { - align: DropdownMenuContentProps['align']; - side: DropdownMenuContentProps['side']; - } = { - align: 'center', - side: 'bottom', - }; - - switch (dropdownPosition) { - case 'top': - style = { - align: 'center', - side: 'top', - }; - break; - case 'left': - style = { - align: 'center', - side: 'left', - }; - break; - case 'right': - style = { - align: 'center', - side: 'right', - }; - break; - } - - return style; -}; From 4bd4cdd1a6b59db2372ac82bac9e6006f62f0769 Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Thu, 11 Jul 2024 15:22:10 +0530 Subject: [PATCH 6/6] added gap type --- src/blocks/Blocks.types.ts | 2 ++ src/blocks/box/Box.types.ts | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/blocks/Blocks.types.ts b/src/blocks/Blocks.types.ts index bae45495ad..e18b5a2177 100644 --- a/src/blocks/Blocks.types.ts +++ b/src/blocks/Blocks.types.ts @@ -39,6 +39,8 @@ export type BlocksSpaceType = | `${ThemeSpacing} ${ThemeSpacing}` | `${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing}`; +export type BlocksGapType = ThemeSpacing | `${ThemeSpacing} ${ThemeSpacing}`; + export type PixelValue = `${number}px`; export type ValueOf = T[keyof T]; diff --git a/src/blocks/box/Box.types.ts b/src/blocks/box/Box.types.ts index e2df79cb31..11f6288ffb 100644 --- a/src/blocks/box/Box.types.ts +++ b/src/blocks/box/Box.types.ts @@ -9,6 +9,7 @@ import { ThemeModeBorder, ThemeModeColors, ValueOf, + BlocksGapType, } from '../Blocks.types'; import { FlattenSimpleInterpolation } from 'styled-components'; import { ThemeColors } from 'blocks/theme/Theme.types'; @@ -21,7 +22,7 @@ export type BoxResponsiveProps = { /* Sets flex-direction css property */ flexDirection?: ResponsiveProp; /* Sets gap between the elements */ - gap?: ResponsiveProp; + gap?: ResponsiveProp; /* Sets display css property */ display?: ResponsiveProp; /* Sets height css property */