From f76c416750e04840192ec5812e7b8968ec440eca Mon Sep 17 00:00:00 2001 From: v1rtl Date: Sat, 30 Nov 2024 01:46:55 +0200 Subject: [PATCH] various cleanups and doc fixes --- .size-limit.json | 2 +- components/package.json | 11 +- .../molecules/Dropdown/ActionSheet.tsx | 2 +- components/src/css/sprinkles.css.ts | 1 + components/src/tokens/colorStyle.ts | 93 -------------- components/src/tokens/space.ts | 2 +- components/src/tokens/typography.ts | 2 +- components/src/types/index.ts | 12 -- components/src/types/withTypography.ts | 117 ------------------ docs/playroom.config.cjs | 2 +- docs/src/components/Logos/Logos.tsx | 5 +- docs/src/components/Palette/Palette.tsx | 9 +- docs/src/components/Palette/styles.css.ts | 8 ++ docs/src/components/SearchIcons.css.ts | 10 ++ docs/src/components/SearchIcons.tsx | 25 ++-- docs/src/pages/_app.tsx | 2 +- docs/src/pages/index.mdx | 2 +- docs/src/playroom/FrameComponent.tsx | 2 +- 18 files changed, 53 insertions(+), 254 deletions(-) delete mode 100644 components/src/types/withTypography.ts create mode 100644 docs/src/components/SearchIcons.css.ts diff --git a/.size-limit.json b/.size-limit.json index d0d2e3af..9cf634f0 100644 --- a/.size-limit.json +++ b/.size-limit.json @@ -8,7 +8,7 @@ "limit": "50 kB" }, { - "path": "./components/dist/style.css", + "path": "./components/dist/thorin.css", "limit": "40 kB", "webpack": false } diff --git a/components/package.json b/components/package.json index 2be4e624..f106cc30 100644 --- a/components/package.json +++ b/components/package.json @@ -3,15 +3,18 @@ "version": "1.0.0-beta.9", "description": "A web3 native design system", "type": "module", + "main": "./dist/index.cjs", + "module": "./dist/index.js", + "types": "./dist/types/index.d.ts", "exports": { ".": { "types": "./dist/types/index.d.ts", "import": "./dist/index.js", "require": "./dist/index.cjs" }, - "./style.css": { - "import": "./dist/style.css", - "require": "./dist/style.css" + "./thorin.css": { + "import": "./dist/thorin.css", + "require": "./dist/thorin.css" } }, "sideEffects": [ @@ -33,7 +36,7 @@ "prepack": "pnpm build", "test": "vitest run", "test:coverage": "vitest run --coverage", - "ver": "pnpm npm version" + "ver": "npm version" }, "dependencies": { "@vanilla-extract/sprinkles": "^1.6.3", diff --git a/components/src/components/molecules/Dropdown/ActionSheet.tsx b/components/src/components/molecules/Dropdown/ActionSheet.tsx index bbf0a994..afc75913 100644 --- a/components/src/components/molecules/Dropdown/ActionSheet.tsx +++ b/components/src/components/molecules/Dropdown/ActionSheet.tsx @@ -97,7 +97,7 @@ export const ActionSheet = React.forwardRef( setIsOpen(false) }} > - {icon} + {href ? ( diff --git a/components/src/css/sprinkles.css.ts b/components/src/css/sprinkles.css.ts index 048fb874..bc262351 100644 --- a/components/src/css/sprinkles.css.ts +++ b/components/src/css/sprinkles.css.ts @@ -27,6 +27,7 @@ const colorProperties = defineProperties({ borderLeftColor: colorPropertiesObject, borderRightColor: colorPropertiesObject, opacity: ['0', '1', '0.5', '0.7', '0.9', '0.95', '1', 'inherit', 'initial'], + }, shorthands: { bg: ['backgroundColor'], diff --git a/components/src/tokens/colorStyle.ts b/components/src/tokens/colorStyle.ts index eeeeff49..9ea3c128 100644 --- a/components/src/tokens/colorStyle.ts +++ b/components/src/tokens/colorStyle.ts @@ -1,16 +1,5 @@ import { type Hue, PRIMARY_COLORS, lightColors, darkColors } from './color' -const GRADIENT_COLORS = [ - 'accent', - 'blue', - 'purple', - 'red', - 'green', - 'grey', -] as const - -type GradientColor = (typeof GRADIENT_COLORS)[number] - export type ColorStyleBase = `${Hue}Primary` | `${Hue}Secondary` | 'transparent' | 'disabled' | 'background' type ColorStyleType = 'Text' | 'Background' | 'Border' | 'Hover' @@ -49,88 +38,6 @@ const makeColorStyles = (colors: typeof lightColors): { [key in ColorStyles]: st return Object.fromEntries([...colorStyles, ...additionalColorStyles]) } -const makeColorStyleMap = () => { - const primaryStyles = Object.fromEntries( - PRIMARY_COLORS.map(color => [ - `${color}Primary`, - { - text: `$backgroundPrimary`, - background: `$${color}Primary`, - border: 'transparent', - hover: `$${color}Bright`, - }, - ]), - ) as { - [key in `${Hue}Primary`]: any - } - const secondaryStyles = Object.fromEntries( - PRIMARY_COLORS.map(color => [ - `${color}Secondary`, - { - text: `$${color}Primary`, - background: `$${color}Surface`, - border: 'transparent', - hover: `$${color}Light`, - }, - ]), - ) as { - [key in `${Hue}Secondary`]: any - } - - const gradientValues = Object.fromEntries( - GRADIENT_COLORS.map(color => [ - `${color}Gradient`, - { - text: `$backgroundPrimary`, - background: `$${color}Gradient`, - border: 'transparent', - hover: `$${color}Gradient`, - }, - ]), - ) as { - [key in `${GradientColor}Gradient`]: any - } - - const transparent = { - text: 'initial', - background: 'transparent', - border: 'transparent', - hover: 'greyLight', - } as const - - const disabled = { - text: 'greyPrimary', - background: 'greyLight', - border: 'greyLight', - hover: 'greyLight', - } as const - - const background = { - text: 'textPrimary', - background: 'backgroundPrimary', - border: 'border', - hover: 'backgroundSecondary', - } as const - - return { - ...primaryStyles, - ...secondaryStyles, - ...gradientValues, - transparent, - disabled, - background, - } -} - -const colorStyleMap = makeColorStyleMap() - -type ColorStyle = keyof ReturnType -type ColorStyleProperty = 'text' | 'background' | 'border' | 'hover' -export const getColorStyle = ( - colorStyle: ColorStyle, - property: ColorStyleProperty, -) => colorStyleMap[colorStyle]?.[property] || 'redPrimary' - export const lightColorStyles = makeColorStyles(lightColors) export const darkColorStyles = makeColorStyles(darkColors) diff --git a/components/src/tokens/space.ts b/components/src/tokens/space.ts index 094efa1a..53884b33 100644 --- a/components/src/tokens/space.ts +++ b/components/src/tokens/space.ts @@ -1,4 +1,4 @@ -export const negativeSpace = { +const negativeSpace = { '-0.5': '-0.125rem', '-1.5': '-0.375rem', '-4': '-1rem', diff --git a/components/src/tokens/typography.ts b/components/src/tokens/typography.ts index 73ca7e1f..5bbc08bd 100644 --- a/components/src/tokens/typography.ts +++ b/components/src/tokens/typography.ts @@ -36,7 +36,7 @@ export const letterSpacings = { '0.03': '0.03em', } as const -export type LetterSapcing = keyof typeof letterSpacings +export type LetterSpacing = keyof typeof letterSpacings export const lineHeights = { headingOne: '3rem', diff --git a/components/src/types/index.ts b/components/src/types/index.ts index 244272da..dc5266b1 100644 --- a/components/src/types/index.ts +++ b/components/src/types/index.ts @@ -4,8 +4,6 @@ import type { Hue as TokenHue, Mode as TokenMode, Tokens } from '@/src/tokens' export type AllOrNone = T | { [K in keyof T]?: never } -export type { FontVariant, WithTypography } from './withTypography' - /* * Disallow string from React.ReactNode */ @@ -27,26 +25,16 @@ export type Mode = TokenMode export type DefaultTheme = Tokens -export type Size = 'small' | 'medium' | 'extraSmall' | undefined - export type OptionalTitle = AllOrNone<{ title: string titleId: string }> -export type IconProps = React.SVGProps & OptionalTitle export type Alert = 'error' | 'warning' | 'info' export type WithAlert = { alert?: Alert } -export type Icon = React.FunctionComponent> - -export type WithIcon = { - /** An svg to be used by the component */ - icon?: React.ReactNode -} - export type Neverable = { [P in keyof Omit]?: never } diff --git a/components/src/types/withTypography.ts b/components/src/types/withTypography.ts deleted file mode 100644 index 59dd2653..00000000 --- a/components/src/types/withTypography.ts +++ /dev/null @@ -1,117 +0,0 @@ -import { fontSizes, fontWeights, lineHeights } from '../tokens/typography' - -type Legacy = 'label' | 'labelHeading' - -type FontSizes = keyof typeof fontSizes - -type BoldFontSizes = keyof Omit< - typeof fontSizes, - 'headingOne' | 'headingTwo' | 'headingThree' | 'headingFour' -> - -const fonts = Object.keys(fontSizes) as FontSizes[] - -const fontOverides: { - [key in FontSizes]?: { - weight?: keyof typeof fontWeights - } -} = { - headingOne: { - weight: 'extraBold', - }, - headingTwo: { - weight: 'bold', - }, - headingThree: { - weight: 'bold', - }, - headingFour: { - weight: 'bold', - }, -} - -type FontDetail = { - size: string - lineHeight: string - weight: string -} - -const boldFontSizes = [ - 'extraLarge', - 'large', - 'body', - 'small', - 'extraSmall', -] as BoldFontSizes[] - -const legacy = { - label: { - size: fontSizes.extraSmall, - lineHeight: lineHeights.extraSmall, - weight: fontWeights.normal, - }, - labelHeading: { - size: fontSizes.small, - lineHeight: lineHeights.small, - weight: fontWeights.normal, - }, -} as { [key in Legacy]: FontDetail } - -const makeFonts = () => { - return Object.fromEntries( - fonts.map((font) => { - const fontWeight = fontOverides[font]?.weight || 'normal' - return [ - font, - { - size: fontSizes[font], - lineHeight: lineHeights[font], - weight: fontWeights[fontWeight], - }, - ] - }), - ) as { [key in FontSizes]: FontDetail } -} - -const makeBoldFonts = () => { - return Object.fromEntries( - boldFontSizes.map(font => [ - `${font}Bold`, - { - size: fontSizes[font], - lineHeight: lineHeights[font], - weight: fontWeights.bold, - }, - ]), - ) as { - [key in `${BoldFontSizes}Bold`]: FontDetail - } -} - -const makeFontDetails = () => { - return { - ...legacy, - ...makeFonts(), - ...makeBoldFonts(), - } -} - -const fontDetails = makeFontDetails() - -export type FontVariant = keyof typeof fontDetails - -export const getFontSize = (fontVariant: FontVariant) => { - return fontDetails[fontVariant]?.size -} - -export const getLineHeight = (fontVariant: FontVariant) => { - return fontDetails[fontVariant]?.lineHeight -} - -export const getFontWeight = (fontVariant: FontVariant) => { - return fontDetails[fontVariant]?.weight -} - -export type WithTypography = { - fontVariant?: FontVariant -} diff --git a/docs/playroom.config.cjs b/docs/playroom.config.cjs index 58a411e9..9445e8ce 100644 --- a/docs/playroom.config.cjs +++ b/docs/playroom.config.cjs @@ -27,7 +27,7 @@ const config = { rules: [ { test: (filename) => { - const pass = filename.endsWith('dist/style.css') || filename.endsWith('frameStyle.css') + const pass = filename.endsWith('dist/thorin.css') || filename.endsWith('frameStyle.css') if (pass) { console.log('pass', filename) } diff --git a/docs/src/components/Logos/Logos.tsx b/docs/src/components/Logos/Logos.tsx index 090b2ff2..8294b95a 100644 --- a/docs/src/components/Logos/Logos.tsx +++ b/docs/src/components/Logos/Logos.tsx @@ -12,7 +12,8 @@ const Panel = ({ background = 'background', alt, src }: Item) => { { justifyContent="center" py="10" px="4" - backgroundColor={`$${background}`} + backgroundColor={background} > {alt} ( @@ -43,10 +43,11 @@ const ColorCell = ({ onClick: () => void }) => ( ) diff --git a/docs/src/components/Palette/styles.css.ts b/docs/src/components/Palette/styles.css.ts index f74a18be..9594b808 100644 --- a/docs/src/components/Palette/styles.css.ts +++ b/docs/src/components/Palette/styles.css.ts @@ -14,3 +14,11 @@ export const colorLabel = style({ writingMode: 'vertical-rl', transform: 'rotate(180deg)', }) + +export const colorCell = style({ + 'transform': 'scale(1)', + ':hover': { + transform: 'scale(1.05)', + }, + 'transition': 'transform 0.15s ease-in-out', +}) diff --git a/docs/src/components/SearchIcons.css.ts b/docs/src/components/SearchIcons.css.ts new file mode 100644 index 00000000..eadf5f00 --- /dev/null +++ b/docs/src/components/SearchIcons.css.ts @@ -0,0 +1,10 @@ +import { style } from '@vanilla-extract/css' + +export const iconGrid = style({ + 'gridTemplateColumns': 'repeat(auto-fit, minmax(4.5rem, 1fr))', + '@media': { + 'screen and (min-width: 768px)': { + gridTemplateColumns: 'repeat(auto-fit, minmax(5rem, 1fr))', + }, + }, +}) diff --git a/docs/src/components/SearchIcons.tsx b/docs/src/components/SearchIcons.tsx index b39e5a30..13cbd75a 100644 --- a/docs/src/components/SearchIcons.tsx +++ b/docs/src/components/SearchIcons.tsx @@ -1,7 +1,6 @@ import * as React from 'react' -import type { - BoxProps } from '@ensdomains/thorin' +import type { BoxProps } from '@ensdomains/thorin' import { Card, Input, @@ -10,6 +9,7 @@ import { Box, } from '@ensdomains/thorin' import * as Components from '@ensdomains/thorin' +import { iconGrid } from './SearchIcons.css' const icons = Object.entries(Components as Record) .filter(([k]) => k.includes('SVG')) @@ -28,17 +28,14 @@ const FlexContainer = (props: BoxProps) => ( ) -const IconGrid = (props: BoxProps) => ( +const IconGrid = ({ children }: { children: React.ReactNode }) => ( + className={iconGrid} + > + {children} + ) const IconGridInner = (props: BoxProps) => ( @@ -57,9 +54,8 @@ const IconGridFlex = (props: BoxProps) => ( /> ) -const ComponentContainer = (props: BoxProps) => ( +const ComponentContainer = ({ children }: { children: React.ReactNode }) => ( ( transitionDuration={150} transitionProperty="box-shadow" transitionTimingFunction="inOut" - boxShadow={{ base: '1', hover: '1', active: '0.5' }} - /> + > + {children} + ) const IconNameContainer = (props: BoxProps) => ( diff --git a/docs/src/pages/_app.tsx b/docs/src/pages/_app.tsx index 736873f5..fe4d5d2a 100644 --- a/docs/src/pages/_app.tsx +++ b/docs/src/pages/_app.tsx @@ -4,7 +4,7 @@ import { MDXProvider } from '@mdx-js/react' import type { Mode } from '@ensdomains/thorin' import { ThemeProvider } from '@ensdomains/thorin' -import '@ensdomains/thorin/dist/style.css' +import '@ensdomains/thorin/dist/thorin.css' import { MDX } from '~/components' import { getLayout as getDocsLayout } from '~/layouts/docs' import '~/styles/globalStyles.css' diff --git a/docs/src/pages/index.mdx b/docs/src/pages/index.mdx index fa665e11..d0b85cc3 100644 --- a/docs/src/pages/index.mdx +++ b/docs/src/pages/index.mdx @@ -25,7 +25,7 @@ In this example we are adding the **lightTheme**. ```tsx import React, { useState } from 'react' import { ThemeProvider } from '@ensdomains/thorin' -import 'thorin/dist/style.css' +import 'thorin/dist/thorin.css' const App = () => { return ( diff --git a/docs/src/playroom/FrameComponent.tsx b/docs/src/playroom/FrameComponent.tsx index 3236f08e..83522d5c 100644 --- a/docs/src/playroom/FrameComponent.tsx +++ b/docs/src/playroom/FrameComponent.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { ThemeProvider } from '@ensdomains/thorin' -import '@ensdomains/thorin/dist/style.css' +import '@ensdomains/thorin/dist/thorin.css' import '../styles/frameStyle.css' import { PlayroomStateProvider } from './PlayroomState'