From 001a0f5e8f2c5512f535e51f47e962ed5222285e Mon Sep 17 00:00:00 2001 From: Tore Sinding Bekkedal Date: Fri, 23 Feb 2024 16:50:11 +0100 Subject: [PATCH] Move PosterView to stylex --- src/core/components/Card.tsx | 42 ++++++----- src/core/components/IntroView.tsx | 7 +- src/poster/components/PosterView.tsx | 11 ++- src/schedule/components/ScheduleView.tsx | 91 +++++++++++++----------- src/theme.stylex.ts | 36 ++++++++++ 5 files changed, 123 insertions(+), 64 deletions(-) create mode 100644 src/theme.stylex.ts diff --git a/src/core/components/Card.tsx b/src/core/components/Card.tsx index c4f5262..59edaea 100644 --- a/src/core/components/Card.tsx +++ b/src/core/components/Card.tsx @@ -1,19 +1,27 @@ -import { css, Theme } from "@emotion/react" -import styled from "@emotion/styled" +import * as stylex from "@stylexjs/stylex" +import { theme } from "../../theme.stylex.ts" +import { ComponentPropsWithoutRef, forwardRef } from "react" -export const CardStyle = (props: { theme: Theme }) => css` - background: ${props.theme.color.card}; - box-shadow: ${props.theme.shadow.card}; - backdrop-filter: blur(30px); +// Define the basic card style +export const cardStyle = stylex.create({ + baseCard: { + boxShadow: theme.shadowCard, + padding: "24px", + borderRadius: "8px", + background: theme.colorCard, + backdropFilter: "blur(30px)", + }, +}) - @supports not (backdrop-filter: blur(30px)) { - background: ${props.theme.color.cardFallback}; - } -` - -export const Card = styled.div` - padding: 24px; - border-radius: 8px; - - ${CardStyle} -` +/** + * This is here for styled-component backwards compatibility. + */ +export const Card = forwardRef>( + ({ children, ...props }, ref) => { + return ( +
+ {children} +
+ ) + }, +) diff --git a/src/core/components/IntroView.tsx b/src/core/components/IntroView.tsx index 6df3d4d..096d07a 100644 --- a/src/core/components/IntroView.tsx +++ b/src/core/components/IntroView.tsx @@ -1,9 +1,10 @@ import styled from "@emotion/styled" import { css, keyframes } from "@emotion/react" -import { CardStyle } from "./Card" +import { cardStyle } from "./Card" import { Logo } from "./Logo" import { TransitionStatus } from "react-transition-group" import { SequenceEntry } from "../../sequencing/components/ViewSequence" +import stylex from "@stylexjs/stylex" const ENTER_MS = 1200 const EXIT_MS = 700 @@ -54,8 +55,6 @@ const Container = styled.div<{ status: TransitionStatus }>` animation: ${CardFall} ${EXIT_MS}ms ease-in-out forwards; ` }} - - ${CardStyle}; } ` @@ -115,7 +114,7 @@ export function IntroView(props: IntroView) { const { status } = props return ( - + diff --git a/src/poster/components/PosterView.tsx b/src/poster/components/PosterView.tsx index a95a9c3..d7124dc 100644 --- a/src/poster/components/PosterView.tsx +++ b/src/poster/components/PosterView.tsx @@ -4,12 +4,13 @@ import { css, keyframes } from "@emotion/react" import { size, transparentize } from "polished" import { type TransitionStatus } from "react-transition-group" import { useParams } from "../../core/hooks/useParams" -import { CardStyle } from "../../core/components/Card" import { SVGIcon } from "../../core/components/SVGIcon" import { type PosterType } from "../types" import { POSTER_TYPES } from "../constants" import { FADE_TRANSITION_MS } from "../../core/constants" import { AppContext } from "../../core/components/AppContext.tsx" +import stylex from "@stylexjs/stylex" +import { cardStyle } from "../../core/components/Card.tsx" const Container = styled.div` padding: 64px; @@ -65,7 +66,6 @@ const Content = styled.div<{ position: relative; z-index: 2; - ${CardStyle(props)} border-radius: 8px; ` }}; @@ -101,7 +101,12 @@ export function PosterView(props: PosterViewProps) { return ( - + {message} diff --git a/src/schedule/components/ScheduleView.tsx b/src/schedule/components/ScheduleView.tsx index 4fa9685..6967d99 100644 --- a/src/schedule/components/ScheduleView.tsx +++ b/src/schedule/components/ScheduleView.tsx @@ -2,22 +2,24 @@ import { css, keyframes } from "@emotion/react" import styled from "@emotion/styled" import { darken } from "polished" import { TransitionStatus } from "react-transition-group" -import { Card, CardStyle } from "../../core/components/Card" +import { Card, cardStyle } from "../../core/components/Card" import { Clock } from "../../core/components/Clock" import { Logo } from "../../core/components/Logo" import { ScheduleItemSummary } from "./ScheduleItemSummary" import { useSchedule } from "../../core/useSchedule" +import * as stylex from "@stylexjs/stylex" -const SlideTransition = (px: number, reversed: boolean) => keyframes` - ${reversed ? "0%" : "100%"} { - transform: translateX(${px}px); - } +// Define the keyframe animations +const slideIn = stylex.keyframes({ + from: { transform: "translateX(-700px)" }, + to: { transform: "translateY(0)" }, +}) - ${reversed ? "100%" : "0%"} { - transform: translateY(0px); - } -` +const slideOut = stylex.keyframes({ + from: { transform: "translateY(0)" }, + to: { transform: "translateX(-700px)" }, +}) const SlideFadeTransition = (px: number, reversed: boolean) => keyframes` ${reversed ? "0%" : "100%"} { @@ -31,14 +33,6 @@ const SlideFadeTransition = (px: number, reversed: boolean) => keyframes` } ` -const slide = (px: number) => (props: { status: TransitionStatus }) => { - const { status } = props - - return css` - animation-name: ${SlideTransition(px, status !== "exiting")}; - ` -} - const slideFade = (px: number) => (props: { status: TransitionStatus }) => { const { status } = props @@ -68,16 +62,14 @@ const Container = styled.div<{ status: TransitionStatus }>` width: 65%; height: 140%; - right: 0px; - top: 0px; + right: 0; + top: 0; position: absolute; transform: rotate(10deg) translateY(-90px) translateX(70px); animation: ${(props) => ContainerTransition(props.status !== "exiting")} 500ms ease both; - ${CardStyle} - @supports not (backdrop-filter: blur(30px)) { background: ${(props) => darken(0.02, props.theme.color.cardFallback)}; } @@ -121,21 +113,28 @@ const Content = styled.div` flex: 1; ` -const NextCard = styled(Card)` - margin-top: 24px; - margin-bottom: 42px; - - animation: 1000ms ease both; - ${slide(-700)} -` - -const LaterListCard = styled(Card)` - margin-top: 24px; - - animation: 1000ms ease both; - animation-delay: 100ms; - ${slide(-700)} -` +const styles = stylex.create({ + entering: { + animationName: slideIn, + animationDuration: "1000ms", + animationFillMode: "both", + animationTimingFunction: "ease", + }, + exiting: { + animationName: slideOut, + animationDuration: "1000ms", + animationFillMode: "both", + animationTimingFunction: "ease", + }, + nextCardBase: { + marginTop: "24px", + marginBottom: "42px", + }, + laterListCardBase: { + marginTop: "24px", + animationDelay: "100ms", + }, +}) const Aside = styled.div` flex: 1; @@ -195,15 +194,27 @@ export function ScheduleView(props: ScheduleViewProps) { Neste program - + {next ? : null} - + Senere - +
{scheduleItems.slice(0, 3).map((item) => ( ))} - +