From fd070408e31902009fcec1ee2394f497276f8320 Mon Sep 17 00:00:00 2001 From: Pavlos Vinieratos Date: Mon, 20 Feb 2023 18:45:18 +0100 Subject: [PATCH] feat: remove remaining Theme-related types (#8235) many types gone --- codemods/remove-spacer.ts | 6 +-- package.json | 1 - src/app/Components/Cards/CardTag.tsx | 3 +- src/app/Components/DottedLine.tsx | 3 +- src/app/Components/Icons/ChevronIcon.tsx | 3 +- src/app/Components/Icons/Crosshair.tsx | 3 +- src/app/Components/Icons/GridViewIcon.tsx | 3 +- src/app/Components/Icons/ListViewIcon.tsx | 3 +- src/app/Components/Modals/LoadingModal.tsx | 4 +- src/app/Components/ReadMore.tsx | 2 +- src/app/Components/Spinner.tsx | 3 +- src/app/Components/Toast/types.ts | 3 +- .../Artwork/Components/ArtworkLotTimer.tsx | 14 +++---- .../Conversations/ConversationCTA.tests.tsx | 3 +- .../Components/Conversations/OrderUpdate.tsx | 2 +- .../Conversations/ReviewOfferButton.tsx | 2 +- .../Scenes/Search/CuratedCollectionItem.tsx | 5 +-- .../SellWithArtsy/Components/Header.tsx | 2 +- src/palette/Theme.tsx | 39 ++----------------- src/palette/atoms/BackButton/BackButton.tsx | 3 +- src/palette/elements/Input/Input.tsx | 3 +- .../elements/LineGraph/LineGraphChart.tsx | 3 +- src/palette/elements/Pill/Pill.tsx | 2 +- .../elements/ProgressBar/ProgressBar.tsx | 3 +- src/palette/elements/Spinner/Spinner.tsx | 3 +- .../Touchable/TouchableHighlightColor.tsx | 4 +- src/palette/helpers/color.tests.tsx | 18 --------- src/palette/helpers/space.tests.tsx | 30 -------------- yarn.lock | 2 +- 29 files changed, 40 insertions(+), 135 deletions(-) delete mode 100644 src/palette/helpers/color.tests.tsx delete mode 100644 src/palette/helpers/space.tests.tsx diff --git a/codemods/remove-spacer.ts b/codemods/remove-spacer.ts index e544a6db5f5..0443f66e999 100644 --- a/codemods/remove-spacer.ts +++ b/codemods/remove-spacer.ts @@ -3,13 +3,11 @@ // jscodeshift --parser=tsx -t codemods/remove-spacer.ts src/**/* // // Afterwards: -// yarn lint:all -// yarn prettier-project -// +// yarn lint:all; yarn prettier-project import { Transform } from "jscodeshift" -const toRemove = "Text" +const toRemove = "Color" const transform: Transform = (file, { jscodeshift: j }, options) => { const source = j(file.source) diff --git a/package.json b/package.json index 34d53d2b1ec..9f02b30ad19 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,6 @@ "dependencies": { "@artsy/cohesion": "4.100.0", "@artsy/palette-mobile": "10.0.4", - "@artsy/palette-tokens": "4.0.1", "@artsy/to-title-case": "1.1.0", "@expo/react-native-action-sheet": "3.8.0", "@gorhom/bottom-sheet": "4.4.5", diff --git a/src/app/Components/Cards/CardTag.tsx b/src/app/Components/Cards/CardTag.tsx index af6a8e82599..dda384a7b85 100644 --- a/src/app/Components/Cards/CardTag.tsx +++ b/src/app/Components/Cards/CardTag.tsx @@ -1,5 +1,4 @@ -import { useColor, Text } from "@artsy/palette-mobile" -import { Color } from "palette" +import { useColor, Text, Color } from "@artsy/palette-mobile" import { View, StyleProp, ViewStyle } from "react-native" import { PositionProps } from "styled-system" diff --git a/src/app/Components/DottedLine.tsx b/src/app/Components/DottedLine.tsx index d52176538cb..f0580f7c6f1 100644 --- a/src/app/Components/DottedLine.tsx +++ b/src/app/Components/DottedLine.tsx @@ -1,5 +1,4 @@ -import { useTheme } from "@artsy/palette-mobile" -import { Color } from "palette" +import { useTheme, Color } from "@artsy/palette-mobile" import { requireNativeComponent } from "react-native" interface Props { diff --git a/src/app/Components/Icons/ChevronIcon.tsx b/src/app/Components/Icons/ChevronIcon.tsx index fb4fbcbdc66..54c04c5b801 100644 --- a/src/app/Components/Icons/ChevronIcon.tsx +++ b/src/app/Components/Icons/ChevronIcon.tsx @@ -1,5 +1,4 @@ -import { useColor } from "@artsy/palette-mobile" -import { Color } from "palette" +import { useColor, Color } from "@artsy/palette-mobile" import Svg, { G, Path } from "react-native-svg" interface ChevronIconProps extends React.Props { diff --git a/src/app/Components/Icons/Crosshair.tsx b/src/app/Components/Icons/Crosshair.tsx index 26f1d848973..1f83311abcf 100644 --- a/src/app/Components/Icons/Crosshair.tsx +++ b/src/app/Components/Icons/Crosshair.tsx @@ -1,5 +1,4 @@ -import { useColor } from "@artsy/palette-mobile" -import { Color } from "palette" +import { useColor, Color } from "@artsy/palette-mobile" import Svg, { Circle, G, Path } from "react-native-svg" const Crosshair: React.FC<{ color?: Color }> = (props) => { diff --git a/src/app/Components/Icons/GridViewIcon.tsx b/src/app/Components/Icons/GridViewIcon.tsx index 42eaab46718..c4d2d7559cb 100644 --- a/src/app/Components/Icons/GridViewIcon.tsx +++ b/src/app/Components/Icons/GridViewIcon.tsx @@ -1,5 +1,4 @@ -import { useColor } from "@artsy/palette-mobile" -import { Color } from "palette" +import { useColor, Color } from "@artsy/palette-mobile" import Svg, { Path } from "react-native-svg" interface GridViewIconProps extends React.ComponentProps { diff --git a/src/app/Components/Icons/ListViewIcon.tsx b/src/app/Components/Icons/ListViewIcon.tsx index 768e6a12154..e23aace7417 100644 --- a/src/app/Components/Icons/ListViewIcon.tsx +++ b/src/app/Components/Icons/ListViewIcon.tsx @@ -1,5 +1,4 @@ -import { useColor } from "@artsy/palette-mobile" -import { Color } from "palette" +import { useColor, Color } from "@artsy/palette-mobile" import Svg, { Rect } from "react-native-svg" interface ListViewIconProps extends React.ComponentProps { diff --git a/src/app/Components/Modals/LoadingModal.tsx b/src/app/Components/Modals/LoadingModal.tsx index 881ed8fc145..85123e9cda9 100644 --- a/src/app/Components/Modals/LoadingModal.tsx +++ b/src/app/Components/Modals/LoadingModal.tsx @@ -1,5 +1,5 @@ -import { Flex } from "@artsy/palette-mobile" -import { Color, Spinner } from "palette" +import { Flex, Color } from "@artsy/palette-mobile" +import { Spinner } from "palette" import { Modal, ModalProps } from "react-native" interface LoadingModalProps { diff --git a/src/app/Components/ReadMore.tsx b/src/app/Components/ReadMore.tsx index 31ea17873e7..d7cad8b378f 100644 --- a/src/app/Components/ReadMore.tsx +++ b/src/app/Components/ReadMore.tsx @@ -5,13 +5,13 @@ import { LinkText, Text as PaletteText, TextProps as PaletteTextProps, + Color, } from "@artsy/palette-mobile" import { navigate } from "app/system/navigation/navigate" import { plainTextFromTree } from "app/utils/plainTextFromTree" import { defaultRules, renderMarkdown } from "app/utils/renderMarkdown" import { sendEmailWithMailTo } from "app/utils/sendEmail" import { Schema } from "app/utils/track" -import { Color } from "palette" import React, { useState } from "react" import { Text } from "react-native" import { useTracking } from "react-tracking" diff --git a/src/app/Components/Spinner.tsx b/src/app/Components/Spinner.tsx index d9b0dbc90db..0b259f1bb2e 100644 --- a/src/app/Components/Spinner.tsx +++ b/src/app/Components/Spinner.tsx @@ -1,4 +1,5 @@ -import { Color, Spinner as PaletteSpinner } from "palette" +import { Color } from "@artsy/palette-mobile" +import { Spinner as PaletteSpinner } from "palette" import { StyleSheet, View, ViewProps } from "react-native" interface Props extends ViewProps { diff --git a/src/app/Components/Toast/types.ts b/src/app/Components/Toast/types.ts index 164b72eb204..deef748e90a 100644 --- a/src/app/Components/Toast/types.ts +++ b/src/app/Components/Toast/types.ts @@ -1,6 +1,5 @@ -import { IconProps } from "@artsy/palette-mobile" +import { IconProps, Color } from "@artsy/palette-mobile" import { ActionSheetProps } from "@expo/react-native-action-sheet" -import { Color } from "palette" export type ToastDuration = "long" | "short" diff --git a/src/app/Scenes/Artwork/Components/ArtworkLotTimer.tsx b/src/app/Scenes/Artwork/Components/ArtworkLotTimer.tsx index 75323a4c8d2..600d9dafa35 100644 --- a/src/app/Scenes/Artwork/Components/ArtworkLotTimer.tsx +++ b/src/app/Scenes/Artwork/Components/ArtworkLotTimer.tsx @@ -1,4 +1,4 @@ -import { Spacer, TimerIcon, Flex, Text } from "@artsy/palette-mobile" +import { Spacer, TimerIcon, Flex, Text, Color } from "@artsy/palette-mobile" import { ArtworkLotTimer_artwork$data } from "__generated__/ArtworkLotTimer_artwork.graphql" import { ArtworkAuctionProgressBar } from "app/Components/Bidding/Components/ArtworkAuctionProgressBar" import { @@ -17,7 +17,6 @@ import { useArtworkBidding } from "app/utils/Websockets/auctions/useArtworkBiddi import { getTimerInfo } from "app/utils/saleTime" import { Time } from "app/utils/useTimer" import moment from "moment" -import { Color } from "palette/Theme" import { useEffect } from "react" import { createFragmentContainer, graphql } from "react-relay" import { TrackingProp } from "react-tracking" @@ -48,9 +47,6 @@ const AuctionoWebsocketWrapper: React.FC = (props) export const ArtworkLotTimerWrapper: React.FC = (props) => { const { artwork, refetchArtwork } = props - if (!(artwork.isInAuction && artwork.saleArtwork && artwork.sale)) { - return null - } const { isPreview, @@ -59,9 +55,9 @@ export const ArtworkLotTimerWrapper: React.FC = (p liveStartAt: liveStartsAt, startAt: startsAt, endAt: saleEndAt, - } = props.artwork.sale || {} + } = props.artwork.sale ?? {} - const { endAt: lotEndAt, extendedBiddingEndAt, lotID } = artwork.saleArtwork + const { endAt: lotEndAt, extendedBiddingEndAt, lotID } = artwork.saleArtwork ?? {} const initialBiddingEndAt = extendedBiddingEndAt ?? lotEndAt ?? saleEndAt @@ -72,6 +68,10 @@ export const ArtworkLotTimerWrapper: React.FC = (p onDataReceived: refetchArtwork, }) + if (!(artwork.isInAuction && artwork.saleArtwork && artwork.sale)) { + return null + } + return ( = ({ const item = useFragment(CuratedCollectionItemFragment, collection) const imageURLs = extractNodes(item.artworksConnection, (artwork) => artwork.image?.url) const availableArtworkImageURLs = compact(imageURLs) - const textVariant: TextVariantV3 = isPad() ? "xs" : "sm-display" + const textVariant: TextProps["variant"] = isPad() ? "xs" : "sm-display" const onPress = () => { tracking.trackEvent(trackingEvent.tappedCollectionGroup(item.internalID, item.slug, position)) diff --git a/src/app/Scenes/SellWithArtsy/Components/Header.tsx b/src/app/Scenes/SellWithArtsy/Components/Header.tsx index bfd6b92a5f4..927c6604863 100644 --- a/src/app/Scenes/SellWithArtsy/Components/Header.tsx +++ b/src/app/Scenes/SellWithArtsy/Components/Header.tsx @@ -7,8 +7,8 @@ import { } from "@artsy/cohesion" import { Spacer, Flex, Text } from "@artsy/palette-mobile" import { useFeatureFlag } from "app/store/GlobalStore" -import { Image, ImageBackground } from "react-native" import { Button } from "palette" +import { Image, ImageBackground } from "react-native" import { useTracking } from "react-tracking" import { useScreenDimensions } from "shared/hooks" diff --git a/src/palette/Theme.tsx b/src/palette/Theme.tsx index 0e8c9c9e458..cfbd8533bf1 100644 --- a/src/palette/Theme.tsx +++ b/src/palette/Theme.tsx @@ -1,6 +1,4 @@ import { THEME_V3 } from "@artsy/palette-tokens" -/// TODO: remove tokens too from package.json -import { Color as ColorV3BeforeDevPurple } from "@artsy/palette-tokens/dist/themes/v3" import { TextTreatment as TextTreatmentWithUnits, TextVariant as TextVariantV3, @@ -8,26 +6,6 @@ import { import _ from "lodash" import { ThemeProvider } from "styled-components/native" -/** - * All of the config for the Artsy theming system, based on the - * design system from our design team: - * https://www.notion.so/artsy/Master-Library-810612339f474d0997fe359af4285c56 - */ - -export type Color = - | ColorV3BeforeDevPurple - | "devpurple" - | "yellow150" - | "yellow100" - | "yellow10" - | "orange10" - | "orange100" // yellows and orange are temporary, until we add them to palette-tokens - | "copper100" // this needs to go once we extract palette-mobile - // v5 stuff - | "appBackground" - | "appForeground" -export type { TextVariantV3 } - const { breakpoints: _eigenDoesntCareAboutBreakpoints, mediaQueries: _eigenDoesntCareAboutMediaQueries, @@ -79,7 +57,7 @@ const fixColorV3 = ( return colors as any } -export interface TextTreatment { +interface TextTreatment { fontSize: number lineHeight: number letterSpacing?: number @@ -164,8 +142,8 @@ const THEMES = { }, } -export type ThemeV3Type = typeof THEMES.v3 -export type ThemeType = ThemeV3Type +type ThemeV3Type = typeof THEMES.v3 +type ThemeType = ThemeV3Type const figureOutTheme = (theme: keyof typeof THEMES | ThemeType): ThemeType => { if (!_.isString(theme)) { @@ -188,14 +166,3 @@ export const Theme: React.FC<{ const actualTheme = figureOutTheme(theme) return {children} } - -type ColorAnyString = string & {} -type Colors = Color | ColorAnyString - -export type ColorsTheme = { colors: Record } - -/** - * Only use this if it's are absolutely neccessary, and only in tests. - */ - -export const _test_THEMES = THEMES diff --git a/src/palette/atoms/BackButton/BackButton.tsx b/src/palette/atoms/BackButton/BackButton.tsx index be3b043302e..f2bea719fd4 100644 --- a/src/palette/atoms/BackButton/BackButton.tsx +++ b/src/palette/atoms/BackButton/BackButton.tsx @@ -1,5 +1,4 @@ -import { ChevronIcon, CloseIcon, Flex } from "@artsy/palette-mobile" -import { Color } from "palette" +import { ChevronIcon, CloseIcon, Flex, Color } from "@artsy/palette-mobile" import { TouchableOpacity, TouchableOpacityProps } from "react-native" interface BackButtonProps { diff --git a/src/palette/elements/Input/Input.tsx b/src/palette/elements/Input/Input.tsx index 599cc4f1a84..74dc5672a77 100644 --- a/src/palette/elements/Input/Input.tsx +++ b/src/palette/elements/Input/Input.tsx @@ -5,10 +5,11 @@ import { Flex, useTheme, Text, + Color, } from "@artsy/palette-mobile" import { themeGet } from "@styled-system/theme-get" import _ from "lodash" -import { Color, Spinner } from "palette" +import { Spinner } from "palette" import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react" import { LayoutAnimation, diff --git a/src/palette/elements/LineGraph/LineGraphChart.tsx b/src/palette/elements/LineGraph/LineGraphChart.tsx index 2771a261a71..f114790c7c4 100644 --- a/src/palette/elements/LineGraph/LineGraphChart.tsx +++ b/src/palette/elements/LineGraph/LineGraphChart.tsx @@ -1,6 +1,5 @@ -import { StarCircleIcon, Flex, useColor, Text } from "@artsy/palette-mobile" +import { StarCircleIcon, Flex, useColor, Text, Color } from "@artsy/palette-mobile" import { compact, noop } from "lodash" -import { Color } from "palette/Theme" import { useCallback, useEffect, useRef, useState } from "react" import { Dimensions } from "react-native" import { Defs, G, LinearGradient, Stop } from "react-native-svg" diff --git a/src/palette/elements/Pill/Pill.tsx b/src/palette/elements/Pill/Pill.tsx index 3276f1415c2..7dc7efa603c 100644 --- a/src/palette/elements/Pill/Pill.tsx +++ b/src/palette/elements/Pill/Pill.tsx @@ -6,9 +6,9 @@ import { useColor, Text, useTextStyleForPalette, + Color, } from "@artsy/palette-mobile" import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView" -import { Color } from "palette/Theme" import { useState } from "react" import { GestureResponderEvent, Pressable, PressableProps } from "react-native" import { config } from "react-spring" diff --git a/src/palette/elements/ProgressBar/ProgressBar.tsx b/src/palette/elements/ProgressBar/ProgressBar.tsx index fc76563a003..3358a58433a 100644 --- a/src/palette/elements/ProgressBar/ProgressBar.tsx +++ b/src/palette/elements/ProgressBar/ProgressBar.tsx @@ -1,5 +1,4 @@ -import { Flex, useColor } from "@artsy/palette-mobile" -import { Color } from "palette/Theme" +import { Flex, useColor, Color } from "@artsy/palette-mobile" import { useEffect, useState } from "react" import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated" diff --git a/src/palette/elements/Spinner/Spinner.tsx b/src/palette/elements/Spinner/Spinner.tsx index c261c981674..dfb74777188 100644 --- a/src/palette/elements/Spinner/Spinner.tsx +++ b/src/palette/elements/Spinner/Spinner.tsx @@ -1,5 +1,4 @@ -import { useColor } from "@artsy/palette-mobile" -import { Color } from "palette/Theme" +import { Color, useColor } from "@artsy/palette-mobile" import React, { useEffect, useMemo } from "react" import { Animated, Easing, ViewProps } from "react-native" import styled from "styled-components/native" diff --git a/src/palette/elements/Touchable/TouchableHighlightColor.tsx b/src/palette/elements/Touchable/TouchableHighlightColor.tsx index afd186318f2..7e68f53f405 100644 --- a/src/palette/elements/Touchable/TouchableHighlightColor.tsx +++ b/src/palette/elements/Touchable/TouchableHighlightColor.tsx @@ -1,5 +1,5 @@ -import { Color } from "palette/Theme" -import React, { useState } from "react" +import { Color } from "@artsy/palette-mobile" +import { useState } from "react" import { Touchable, TouchableProps } from "./Touchable" interface TouchableHighlightState { diff --git a/src/palette/helpers/color.tests.tsx b/src/palette/helpers/color.tests.tsx deleted file mode 100644 index 3121f5cc0b8..00000000000 --- a/src/palette/helpers/color.tests.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Color, useTheme } from "@artsy/palette-mobile" -import { renderWithWrappersLEGACY } from "app/utils/tests/renderWithWrappers" -import { _test_THEMES } from "palette/Theme" -import { View } from "react-native" - -describe("color", () => { - const ColorView = ({ name }: { name: Color }) => { - const { color } = useTheme() - return - } - - it("returns the correct color with a Theme provider", () => { - const TestComponent = () => - - const tree = renderWithWrappersLEGACY().root - expect(tree.findByType(View).props.style.backgroundColor).toBe(_test_THEMES.v3.colors.black10) - }) -}) diff --git a/src/palette/helpers/space.tests.tsx b/src/palette/helpers/space.tests.tsx deleted file mode 100644 index eddf9494ddb..00000000000 --- a/src/palette/helpers/space.tests.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { SpacingUnit, useSpace } from "@artsy/palette-mobile" -import { renderWithWrappersLEGACY } from "app/utils/tests/renderWithWrappers" -import { View } from "react-native" - -describe("space", () => { - const SpaceView = ({ name }: { name: SpacingUnit }) => { - const space = useSpace() - return - } - - it("returns the correct space with a Theme provider", () => { - const TestComponent = () => - - const tree = renderWithWrappersLEGACY().root - expect(tree.findByType(View).props.style.marginLeft).toBe(10) - }) - - it("returns the correct space with a Theme provider in v3", () => { - const TestComponent = () => ( - <> - - - - ) - const tree = renderWithWrappersLEGACY().root - const margins = tree.findAllByType(View).map((view) => view.props.style.marginLeft) - expect(margins[0]).toBe(5) // for now we keep v2 accessible, even in v3 - expect(margins[1]).toBe(20) - }) -}) diff --git a/yarn.lock b/yarn.lock index 5f8f612d41b..43e0562c379 100644 --- a/yarn.lock +++ b/yarn.lock @@ -242,7 +242,7 @@ react-nanny "^2.15.0" styled-system "^5.1.5" -"@artsy/palette-tokens@4.0.1", "@artsy/palette-tokens@^4.0.1": +"@artsy/palette-tokens@^4.0.1": version "4.0.1" resolved "https://registry.yarnpkg.com/@artsy/palette-tokens/-/palette-tokens-4.0.1.tgz#ef171c0449f3c0a1c0765253a06beec160b0eed1" integrity sha512-JQ4t6eCAL3LpYnwyIMJCKc3UiVWY17IvKadNXRXfplo+GFZUqZs61nFGlchNWZvtNESpHkGKOksA5dZq3G1wiw==