studio/docs
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🏷️(frontend) adjust typing to fit styled-component

Browse Source 
Recent upgrade of styled-components caused
type issues in Box and Text components.
We adjust the typing to fit the new version.
This commit is contained in:
Anthony LC
2026-01-23 16:52:36 +01:00
parent 6b7fc915dd
commit 4588c71e8a
2 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/frontend/apps/impress/src/components/Box.tsx
View File

@@ -1,6 +1,5 @@
import { ComponentPropsWithRef, HTMLElementType } from 'react'; import { ComponentPropsWithRef, ElementType } from 'react';
import styled from 'styled-components'; import styled, { CSSProperties, RuleSet } from 'styled-components';
import { CSSProperties, RuleSet } from 'styled-components/dist/types';
import { import {
MarginPadding, MarginPadding,
@@ -13,7 +12,7 @@ import {
import { hideEffect, showEffect } from './Effect'; import { hideEffect, showEffect } from './Effect';
export interface BoxProps { export interface BoxProps {
as?: HTMLElementType; as?: ElementType;
$align?: CSSProperties['alignItems']; $align?: CSSProperties['alignItems'];
$background?: CSSProperties['background']; $background?: CSSProperties['background'];
$border?: CSSProperties['border']; $border?: CSSProperties['border'];
@@ -70,7 +69,7 @@ export const Box = styled('div')<BoxProps>`
${({ $cursor }) => $cursor && `cursor: ${$cursor};`} ${({ $cursor }) => $cursor && `cursor: ${$cursor};`}
${({ $direction }) => `flex-direction: ${$direction || 'column'};`} ${({ $direction }) => `flex-direction: ${$direction || 'column'};`}
${({ $display, as }) => ${({ $display, as }) =>
`display: ${$display || (as?.match('span|input') ? 'inline-flex' : 'flex')};`} `display: ${$display || (typeof as === 'string' && as.match('span|input') ? 'inline-flex' : 'flex')};`}
${({ $flex }) => $flex && `flex: ${$flex};`} ${({ $flex }) => $flex && `flex: ${$flex};`}
${({ $gap }) => $gap && `gap: ${spacingValue($gap)};`} ${({ $gap }) => $gap && `gap: ${spacingValue($gap)};`}
${({ $height }) => $height && `height: ${$height};`} ${({ $height }) => $height && `height: ${$height};`}

6
src/frontend/apps/impress/src/components/Text.tsx
View File

@@ -1,4 +1,4 @@
import { CSSProperties, ComponentPropsWithRef, forwardRef } from 'react'; import React, { CSSProperties, ComponentPropsWithRef, forwardRef } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { tokens } from '@/cunningham'; import { tokens } from '@/cunningham';
@@ -34,7 +34,9 @@ export const TextStyled = styled(Box)<TextProps>`
const Text = forwardRef<HTMLElement, ComponentPropsWithRef<typeof TextStyled>>( const Text = forwardRef<HTMLElement, ComponentPropsWithRef<typeof TextStyled>>(
(props, ref) => { (props, ref) => {
return <TextStyled ref={ref} as="span" {...props} />; return (
<TextStyled ref={ref as React.Ref<HTMLDivElement>} as="span" {...props} />
);
}, },
); );