Skip to content

Commit 0224504

Browse files
malessanimalessani
committed
feat: remove twin-macro and styled components
1 parent 0d7e771 commit 0224504

32 files changed

Lines changed: 585 additions & 868 deletions

File tree

‎components/composite/Checkout/index.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,7 @@ import { Accordion, AccordionItem } from "components/ui/Accordion"
2929
import { Footer } from "components/ui/Footer"
3030
import { Logo } from "components/ui/Logo"
3131
import { useRouter } from "next/router"
32-
import { useContext } from "react"
33-
import styled from "styled-components"
34-
import tw from "twin.macro"
32+
import { type FC, useContext } from "react"
3533

3634
interface Props {
3735
logoUrl: NullableType<string>
@@ -260,10 +258,15 @@ const Checkout: React.FC<Props> = ({
260258
)
261259
}
262260

263-
const Sidebar = styled.div`
264-
${tw`flex flex-col min-h-full p-5 md:px-8 lg:px-12 lg:pt-10 xl:px-24 xl:pt-12 bg-gray-50`}
265-
`
266-
const SummaryWrapper = styled.div`
267-
${tw`flex-1`}
268-
`
261+
const Sidebar: FC<React.HTMLAttributes<HTMLDivElement>> = (props) => (
262+
<div
263+
{...props}
264+
className="flex flex-col min-h-full p-5 md:px-8 lg:px-12 lg:pt-10 xl:px-24 xl:pt-12 bg-gray-50"
265+
/>
266+
)
267+
268+
const SummaryWrapper: FC<React.HTMLAttributes<HTMLDivElement>> = (props) => (
269+
<div {...props} className="flex-1" />
270+
)
271+
269272
export default Checkout

‎components/composite/CheckoutSkeleton/index.tsx‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { LayoutDefault } from "components/layouts/LayoutDefault"
2-
import styled from "styled-components"
3-
import tw from "twin.macro"
2+
import type { FC } from "react"
43

5-
export const CheckoutSkeleton: React.FC = () => {
4+
export const CheckoutSkeleton: FC = () => {
65
return (
76
<LayoutDefault
87
aside={
@@ -93,17 +92,29 @@ export const CheckoutSkeleton: React.FC = () => {
9392
)
9493
}
9594

96-
const Sidebar = styled.div`
97-
${tw`flex flex-col min-h-full p-5 md:px-8 lg:px-12 lg:pt-10 xl:px-24 xl:pt-12`}
98-
`
99-
const SummaryWrapper = styled.div`
100-
${tw`flex-1`}
101-
`
102-
const SkeletonBox = styled.div`
103-
${tw`bg-gray-200 rounded-xl`}
104-
`
105-
const SkeletonCircle = styled(SkeletonBox)`
106-
${tw`rounded-full`}
107-
`
95+
const Sidebar: FC<React.HTMLAttributes<HTMLDivElement>> = (props) => (
96+
<div
97+
{...props}
98+
className="flex flex-col min-h-full p-5 md:px-8 lg:px-12 lg:pt-10 xl:px-24 xl:pt-12"
99+
/>
100+
)
101+
102+
const SummaryWrapper: FC<React.HTMLAttributes<HTMLDivElement>> = (props) => (
103+
<div {...props} className="flex-1" />
104+
)
105+
106+
const SkeletonBox: FC<React.HTMLAttributes<HTMLDivElement>> = (props) => (
107+
<div
108+
{...props}
109+
className={`bg-gray-200 rounded-xl ${props.className || ""}`}
110+
/>
111+
)
112+
113+
const SkeletonCircle: FC<React.HTMLAttributes<HTMLDivElement>> = (props) => (
114+
<div
115+
{...props}
116+
className={`bg-gray-200 rounded-full ${props.className || ""}`}
117+
/>
118+
)
108119

109120
export default CheckoutSkeleton

‎components/composite/ErrorContainer/styled.tsx‎

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,41 @@
11
import { Logo } from "components/ui/Footer/cl"
2-
import styled from "styled-components"
3-
import tw from "twin.macro"
2+
import type { FC } from "react"
43

5-
export const Main = styled.div`
6-
${tw`flex flex-col flex-1 justify-center items-center text-center`}
7-
`
8-
export const Wrapper = styled.div`
9-
${tw`flex flex-wrap justify-end items-stretch flex-col h-screen p-5 md:p-10 lg:px-20 lg:pb-10`}
10-
`
11-
export const Text = styled.p`
12-
${tw`p-4 text-sm font-normal text-gray-500`}
13-
`
4+
export const Main: FC<React.HTMLAttributes<HTMLDivElement>> = (props) => (
5+
<div
6+
{...props}
7+
className="flex flex-col flex-1 justify-center items-center text-center"
8+
/>
9+
)
1410

15-
export const StyledError = styled.div`
16-
${tw`flex flex-col items-center md:(flex-row)`}
17-
`
18-
export const ErrorCode = styled.p`
19-
${tw`p-4 text-xl font-bold border-gray-300 text-gray-800 border-b md:(border-r border-b-0)`}
20-
`
21-
export const LogoWrapper = styled.div`
22-
${tw`md:max-w-xs`}
23-
`
24-
export const FullLogo = styled(Logo)`
25-
${tw`text-black`}
26-
`
11+
export const Wrapper: FC<React.HTMLAttributes<HTMLDivElement>> = (props) => (
12+
<div
13+
{...props}
14+
className="flex flex-wrap justify-end items-stretch flex-col h-screen p-5 md:p-10 lg:px-20 lg:pb-10"
15+
/>
16+
)
17+
18+
export const Text: FC<React.HTMLAttributes<HTMLParagraphElement>> = (props) => (
19+
<p {...props} className="p-4 text-sm font-normal text-gray-500" />
20+
)
21+
22+
export const StyledError: FC<React.HTMLAttributes<HTMLDivElement>> = (
23+
props,
24+
) => <div {...props} className="flex flex-col items-center md:flex-row" />
25+
26+
export const ErrorCode: FC<React.HTMLAttributes<HTMLParagraphElement>> = (
27+
props,
28+
) => (
29+
<p
30+
{...props}
31+
className="p-4 text-xl font-bold border-gray-300 text-gray-800 border-b md:border-r md:border-b-0"
32+
/>
33+
)
34+
35+
export const LogoWrapper: FC<React.HTMLAttributes<HTMLDivElement>> = (
36+
props,
37+
) => <div {...props} className="md:max-w-xs" />
38+
39+
export const FullLogo: FC<React.ComponentProps<typeof Logo>> = (props) => (
40+
<Logo {...props} className={`text-black ${props.className || ""}`} />
41+
)

‎components/composite/MainHeader/index.tsx‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import TotalAmount from "@commercelayer/react-components/orders/TotalAmount"
2+
import type { FC } from "react"
23
import { useTranslation } from "react-i18next"
3-
import styled from "styled-components"
4-
import tw from "twin.macro"
54

65
interface Props {
76
orderNumber: string
87
}
98

10-
export const MainHeader: React.FC<Props> = ({ orderNumber }) => {
9+
export const MainHeader: FC<Props> = ({ orderNumber }) => {
1110
const { t } = useTranslation()
1211

1312
return (
@@ -23,18 +22,28 @@ export const MainHeader: React.FC<Props> = ({ orderNumber }) => {
2322
)
2423
}
2524

26-
const Wrapper = styled.div`
27-
${tw`flex flex-row border-t mb-5 px-5 pt-5 -mx-5 md:px-0 md:-mx-0 md:mb-0 md:border-t-0 md:border-b md:pt-0 justify-between md:items-center pb-2`}
28-
`
29-
const Title = styled.h1`
30-
${tw`text-black font-semibold text-xl md:text-3xl`}
31-
`
32-
const Order = styled.p`
33-
${tw`font-semibold text-sm md:text-base text-gray-400`}
34-
`
35-
const Total = styled.div`
36-
${tw`font-bold text-xl md:hidden`}
37-
`
38-
const Recap = styled.div`
39-
${tw`flex flex-col flex-1 justify-between md:items-center md:flex-row`}
40-
`
25+
const Wrapper: FC<React.HTMLAttributes<HTMLDivElement>> = (props) => (
26+
<div
27+
{...props}
28+
className="flex flex-row border-t mb-5 px-5 pt-5 -mx-5 md:px-0 md:-mx-0 md:mb-0 md:border-t-0 md:border-b md:pt-0 justify-between md:items-center pb-2"
29+
/>
30+
)
31+
32+
const Title: FC<React.HTMLAttributes<HTMLHeadingElement>> = (props) => (
33+
<h1 {...props} className="text-black font-semibold text-xl md:text-3xl" />
34+
)
35+
36+
const Order: FC<React.HTMLAttributes<HTMLParagraphElement>> = (props) => (
37+
<p {...props} className="font-semibold text-sm md:text-base text-gray-400" />
38+
)
39+
40+
const Total: FC<React.HTMLAttributes<HTMLDivElement>> = (props) => (
41+
<div {...props} className="font-bold text-xl md:hidden" />
42+
)
43+
44+
const Recap: FC<React.HTMLAttributes<HTMLDivElement>> = (props) => (
45+
<div
46+
{...props}
47+
className="flex flex-col flex-1 justify-between md:items-center md:flex-row"
48+
/>
49+
)

‎components/composite/OrderSummary/CouponOrGiftCard/styled.tsx‎

Lines changed: 55 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,58 @@ import GiftCardOrCouponSubmit from "@commercelayer/react-components/gift_cards/G
55
import { ButtonCss } from "components/ui/Button"
66
import { ErrorCss } from "components/ui/form/Error"
77
import { InputCss } from "components/ui/form/Input"
8-
import styled from "styled-components"
9-
import tw from "twin.macro"
10-
11-
export const CouponFormWrapper = styled.div`
12-
${tw`pb-8 mb-8 border-b`}
13-
`
14-
export const CouponFieldWrapper = styled.div`
15-
${tw`flex mt-1`}
16-
`
17-
export const CouponRecap = styled.div`
18-
${tw`flex flex-row justify-between pb-5 mb-6 border-b`}
19-
`
20-
export const CouponName = styled.p`
21-
${tw`font-bold`}
22-
`
23-
export const StyledGiftCardOrCouponRemoveButton = styled(
24-
GiftCardOrCouponRemoveButton,
25-
)`
26-
${tw`ml-2 text-sm font-bold text-primary border-b leading-none border-black border-opacity-10 transition ease-in duration-200 hover:border-opacity-50 hover:text-primary-dark focus:outline-none`}
27-
`
28-
29-
export const StyledGiftCardOrCouponInput = styled(GiftCardOrCouponInput)`
30-
${InputCss}
31-
${tw`rounded-none rounded-l-md z-10`}
32-
&.hasError {
33-
${tw`placeholder-red-400 border-red-400 border-2 focus:ring-offset-0 focus:ring-red-400 focus:ring-opacity-50`}
34-
}
35-
`
36-
export const StyledGiftCardOrCouponSubmit = styled(GiftCardOrCouponSubmit)`
37-
${ButtonCss}
38-
${tw`w-auto -ml-px relative space-x-2 px-8 py-3 border-transparent rounded-none rounded-r-md`}
39-
`
40-
41-
export const StyledErrors = styled(Errors)`
42-
${ErrorCss}
43-
${tw`pl-0`}
44-
`
8+
import type { FC } from "react"
9+
10+
export const CouponFormWrapper: FC<React.HTMLAttributes<HTMLDivElement>> = (
11+
props,
12+
) => <div {...props} className="pb-8 mb-8 border-b" />
13+
14+
export const CouponFieldWrapper: FC<React.HTMLAttributes<HTMLDivElement>> = (
15+
props,
16+
) => <div {...props} className="flex mt-1" />
17+
18+
export const CouponRecap: FC<React.HTMLAttributes<HTMLDivElement>> = (
19+
props,
20+
) => (
21+
<div
22+
{...props}
23+
className="flex flex-row justify-between pb-5 mb-6 border-b"
24+
/>
25+
)
26+
27+
export const CouponName: FC<React.HTMLAttributes<HTMLParagraphElement>> = (
28+
props,
29+
) => <p {...props} className="font-bold" />
30+
31+
export const StyledGiftCardOrCouponRemoveButton: FC<
32+
React.ComponentProps<typeof GiftCardOrCouponRemoveButton>
33+
> = (props) => (
34+
<GiftCardOrCouponRemoveButton
35+
{...props}
36+
className={`ml-2 text-sm font-bold text-primary border-b leading-none border-black border-opacity-10 transition ease-in duration-200 hover:border-opacity-50 hover:text-primary-dark focus:outline-none ${props.className || ""}`}
37+
/>
38+
)
39+
40+
export const StyledGiftCardOrCouponInput: FC<
41+
React.ComponentProps<typeof GiftCardOrCouponInput>
42+
> = (props) => (
43+
<GiftCardOrCouponInput
44+
{...props}
45+
className={`${InputCss} rounded-none rounded-l-md z-10 [&.hasError]:placeholder-red-400 [&.hasError]:border-red-400 [&.hasError]:border-2 [&.hasError]:focus:ring-offset-0 [&.hasError]:focus:ring-red-400 [&.hasError]:focus:ring-opacity-50 ${props.className || ""}`}
46+
/>
47+
)
48+
49+
export const StyledGiftCardOrCouponSubmit: FC<
50+
React.ComponentProps<typeof GiftCardOrCouponSubmit>
51+
> = (props) => (
52+
<GiftCardOrCouponSubmit
53+
{...props}
54+
className={`${ButtonCss} w-auto -ml-px relative space-x-2 px-8 py-3 border-transparent rounded-none rounded-r-md ${props.className || ""}`}
55+
/>
56+
)
57+
58+
export const StyledErrors: FC<React.ComponentProps<typeof Errors>> = (
59+
props,
60+
) => (
61+
<Errors {...props} className={`${ErrorCss} pl-0 ${props.className || ""}`} />
62+
)

0 commit comments

Comments
 (0)
⚡