From 7bc021001a68ba13cf9ec7455f3b586226108ce5 Mon Sep 17 00:00:00 2001 From: storywithoutend Date: Thu, 12 Oct 2023 11:40:27 +0800 Subject: [PATCH] fix docs lint errors --- .../atoms/Typography/Typography.tsx | 2 +- components/src/css/rainbow-spinkles.css.ts | 3 + .../components/CodePreview/CodePreview.tsx | 70 +++++++------------ docs/src/layouts/docs.tsx | 41 ++++++----- docs/src/pages/components/[...slug].tsx | 2 +- 5 files changed, 51 insertions(+), 67 deletions(-) diff --git a/components/src/components/atoms/Typography/Typography.tsx b/components/src/components/atoms/Typography/Typography.tsx index 9645d678..cf9a742c 100644 --- a/components/src/components/atoms/Typography/Typography.tsx +++ b/components/src/components/atoms/Typography/Typography.tsx @@ -67,7 +67,7 @@ type Props = { weight?: FontWeight fontVariant?: FontVariant -} & Omit & +} & Omit & WithColor & Omit & { fontVariant?: FontVariant } diff --git a/components/src/css/rainbow-spinkles.css.ts b/components/src/css/rainbow-spinkles.css.ts index a8ef2bec..142b780a 100644 --- a/components/src/css/rainbow-spinkles.css.ts +++ b/components/src/css/rainbow-spinkles.css.ts @@ -35,12 +35,15 @@ const responsiveProperties = defineProperties({ borderRightColor: modeVars.color, borderTopColor: modeVars.color, borderStyle: true, + borderTopLeftRadius: commonVars.radii, + borderTopRightRadius: commonVars.radii, borderBottomLeftRadius: commonVars.radii, borderBottomRightRadius: commonVars.radii, flexBasis: commonVars.space, fontFamily: commonVars.fonts, fontSize: commonVars.fontSizes, fontStyle: true, + fontFeatureSettings: true, fontWeight: commonVars.fontWeights, lineHeight: commonVars.lineHeights, textAlign: true, diff --git a/docs/src/components/CodePreview/CodePreview.tsx b/docs/src/components/CodePreview/CodePreview.tsx index 21a81167..3a54519e 100644 --- a/docs/src/components/CodePreview/CodePreview.tsx +++ b/docs/src/components/CodePreview/CodePreview.tsx @@ -41,47 +41,29 @@ const Container = (props: BoxProps) => ( backgroundColor="$background" borderColor="$greySurface" borderRadius="$2xLarge" - borderWidth="$0.5" + borderWidth="$2x" overflow="hidden" - font="$mono" + fontFamily="$mono" /> ) -const Container2 = styled.div( - ({ theme }) => css` - background-color: ${theme.colors.background}; - border-color: ${theme.colors.greySurface}; - border-radius: ${theme.radii['2xLarge']}; - border-width: ${theme.space['0.5']}; - overflow: hidden; - font-family: ${theme.fonts.mono}; - `, -) -const ContainerInner = ({ - $expand, - ...props -}: BoxProps & { $expand: boolean }) => ( +const ContainerInner = React.forwardRef< + HTMLElement, + BoxProps & { $expand: boolean } +>(({ $expand, ...props }, ref) => ( -) - -const ContainerInner2 = styled.div<{ $expand?: boolean; ref: any }>( - ({ theme, $expand }) => css` - background-color: ${theme.colors.background}; - ${$expand && `border-bottom-radius: ${theme.radii['2xLarge']}`}; - border-top-left-radius: ${theme.radii['2xLarge']}; - border-top-right-radius: ${theme.radii['2xLarge']}; - overflow: scroll; - padding: ${theme.space['6']}; - `, -) +)) +ContainerInner.displayName = 'ComponentInner' const LiveEditorContainer = (props: BoxProps) => ( ( padding="0.875rem 2.75rem 0.875rem 0.875rem" /> ) -const LiveEditorContainer2 = styled.div( - ({ theme }) => css` - background-color: ${theme.colors.backgroundSecondary}; - position: relative; - padding: 0.875rem 2.75rem 0.875rem 0.875rem; - - .token { - font-family: 'iAWriter Mono', Menlo, Monaco, Consolas, 'Liberation Mono', - 'Courier New', monospace, sans-serif !important; - font-size: 1.0625rem; - font-feature-settings: 'ss01', 'ss03'; - } - `, -) +// const LiveEditorContainer2 = styled.div( +// ({ theme }) => css` +// background-color: ${theme.colors.backgroundSecondary}; +// position: relative; +// padding: 0.875rem 2.75rem 0.875rem 0.875rem; + +// .token { +// font-family: 'iAWriter Mono', Menlo, Monaco, Consolas, 'Liberation Mono', +// 'Courier New', monospace, sans-serif !important; +// font-size: 1.0625rem; +// font-feature-settings: 'ss01', 'ss03'; +// } +// `, +// ) const ButtonContainer = styled.div( ({ theme }) => css` diff --git a/docs/src/layouts/docs.tsx b/docs/src/layouts/docs.tsx index e95140e2..e0257204 100644 --- a/docs/src/layouts/docs.tsx +++ b/docs/src/layouts/docs.tsx @@ -3,7 +3,7 @@ import { GetLayout, NextLayout } from 'next' import Head from 'next/head' import styled, { css } from 'styled-components' -import { mq, Box } from '@ensdomains/thorin' +import { mq } from '@ensdomains/thorin' import { Header, @@ -14,10 +14,9 @@ import { } from '~/components' import { getLayout as getBaseLayout } from './site' -import { BoxProps } from '@ensdomains/thorin/dist/types/components/atoms/Box' import { Typography } from '@ensdomains/thorin' -const Container = (props: BoxProps) => ( +const Container = (props: React.ComponentProps) => ( ( /> ) -const Container2 = styled.div( - ({ theme }) => css` - display: block; - justify-content: center; - margin: 0 auto; - max-width: ${theme.space['320']}; - min-height: ${theme.space['viewHeight']}; - padding: 0 ${theme.space['6']}; - ${mq.lg.min(css` - display: flex; - justify-content: flex-end; - `)} - ${mq.xl.min(css` - display: flex; - justify-content: center; - `)}; - `, -) +// const Container2 = styled.div( +// ({ theme }) => css` +// display: block; +// justify-content: center; +// margin: 0 auto; +// max-width: ${theme.space['320']}; +// min-height: ${theme.space['viewHeight']}; +// padding: 0 ${theme.space['6']}; +// ${mq.lg.min(css` +// display: flex; +// justify-content: flex-end; +// `)} +// ${mq.xl.min(css` +// display: flex; +// justify-content: center; +// `)}; +// `, +// ) const Aside = styled.aside( ({ theme }) => css` diff --git a/docs/src/pages/components/[...slug].tsx b/docs/src/pages/components/[...slug].tsx index 6b520768..45942a5b 100644 --- a/docs/src/pages/components/[...slug].tsx +++ b/docs/src/pages/components/[...slug].tsx @@ -109,7 +109,7 @@ const Page: NextPageWithLayout = ({ {!docsLink.includes('generated') && (
- + Edit on GitHub