feat: add styled components theme provider

Gustavohps10 · Aug 18, 2024 · 517e52b · 517e52b
1 parent 2d2f6d1
commit 517e52b
Show file tree

Hide file tree

Showing 15 changed files with 240 additions and 6 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -2,5 +2,8 @@
     "extends": [
         "@rocketseat/eslint-config/next",
         "next/core-web-vitals"
-    ]
+    ],
+    "rules": {
+        "@typescript-eslint/no-empty-interface": "off"
+    }
 }
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,7 +1,10 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: 'export', // Outputs a Single-Page Application (SPA).
-    distDir: './build', // Changes the build output directory to `./dist`.
+  output: 'export', // Outputs a Single-Page Application (SPA).
+  distDir: './build', // Changes the build output directory to `./dist`.
+  compiler: {
+    styledComponents: true,
+  },
 }
 
-export default nextConfig
+export default nextConfig
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     ]
   },
   "dependencies": {
+    "@sapuris-ui/tokens": "^1.1.0",
     "firebase": "^10.4.0",
     "next": "14.2.5",
     "react": "^18",

diff --git a/src/@types/styled.d.ts b/src/@types/styled.d.ts
@@ -0,0 +1,17 @@
+import 'styled-components'
+import { defaultTheme } from '../styles/themes/default'
+import { colors } from '@sapuris-ui/tokens'
+
+export type Colors = typeof colors & {
+  background500: string
+  background600: string
+  text500: string
+}
+
+type ITheme = typeof defaultTheme & {
+  colors: Colors
+}
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends ITheme {}
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next'
+import { ThemeWrapper } from '@/lib/theme-wrapper'
 
 export const metadata: Metadata = {
   title: 'Portifólio',
@@ -20,7 +21,7 @@ export default function RootLayout({
         <meta name="description" content="Web site created..." />
       </head>
       <body>
-        <div id="root">{children}</div>
+        <ThemeWrapper>{children}</ThemeWrapper>
       </body>
     </html>
   )

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,3 +1,5 @@
+import { Button } from '@/components/button'
+
 export default async function Page() {
   const res = await fetch('https://api.github.com/users/Gustavohps10/repos', {
     next: { revalidate: 3600 },
@@ -6,5 +8,11 @@ export default async function Page() {
 
   console.log(data)
 
-  return <></>
+  return (
+    <>
+      <Button $outline="outlined" $color="danger">
+        Test Theme
+      </Button>
+    </>
+  )
 }
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import React, { ButtonHTMLAttributes } from 'react'
+import * as S from './styled'
+
+export type ButtonProps = S.ButtonContainerProps &
+  ButtonHTMLAttributes<HTMLButtonElement>
+
+export const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.PropsWithChildren<ButtonProps>
+>(({ children, ...props }: ButtonProps, forwardedRef) => (
+  <S.ButtonContainer {...props} ref={forwardedRef}>
+    {children}
+  </S.ButtonContainer>
+))
+Button.displayName = 'Button'
diff --git a/src/components/button/styled.ts b/src/components/button/styled.ts
@@ -0,0 +1,65 @@
+import styled, { DefaultTheme, css } from 'styled-components'
+import { ButtonProps } from '.'
+
+export interface ButtonContainerProps {
+  $color?: 'primary' | 'danger'
+  $outline?: 'filled' | 'outlined'
+}
+
+const BUTTON_COLORS = (
+  theme: DefaultTheme,
+  color: ButtonContainerProps['$color'] = 'primary',
+) =>
+  ({
+    primary: theme.colors.sapuris500,
+    danger: theme.colors.wine500,
+  })[color]
+
+const variantStyles = (
+  theme: DefaultTheme,
+  outline: ButtonContainerProps['$outline'] = 'filled',
+  color: ButtonContainerProps['$color'] = 'primary',
+) =>
+  ({
+    filled: css`
+      color: ${theme.colors.white};
+      background: ${BUTTON_COLORS(theme, color)};
+      border: none;
+
+      &:hover {
+        filter: brightness(85%);
+      }
+    `,
+    outlined: css`
+      color: ${BUTTON_COLORS(theme, color)};
+      background: transparent;
+      border: 1px solid ${BUTTON_COLORS(theme, color)};
+
+      &:hover {
+        color: ${theme.colors.white};
+        background: ${BUTTON_COLORS(theme, color)};
+      }
+    `,
+  })[outline]
+
+export const ButtonContainer = styled.button<ButtonProps>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  border-radius: ${(props) => props.theme.radii.md};
+  transition: all 0.2s ease;
+
+  cursor: pointer;
+  padding: 1.6rem;
+  font-weight: bold;
+
+  &:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+
+  //variants
+  ${({ theme, $outline, $color }) => variantStyles(theme, $outline, $color)}
+`
diff --git a/src/lib/registry.tsx b/src/lib/registry.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement()
+    styledComponentsStyleSheet.instance.clearTag()
+    return <>{styles}</>
+  })
+
+  if (typeof window !== 'undefined') return <>{children}</>
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  )
+}
diff --git a/src/lib/theme-wrapper.tsx b/src/lib/theme-wrapper.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import { theme } from '@/styles/themes/default'
+import StyledComponentsRegistry from './registry'
+import { ThemeProvider } from 'styled-components'
+
+export function ThemeWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <StyledComponentsRegistry>
+      <ThemeProvider theme={theme.light}>{children}</ThemeProvider>
+    </StyledComponentsRegistry>
+  )
+}
diff --git a/src/styles/global.ts b/src/styles/global.ts
@@ -0,0 +1,24 @@
+import { createGlobalStyle } from 'styled-components'
+
+export const GlobalStyle = createGlobalStyle`
+    *{
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    :focus{
+        outline: 0;
+    }
+
+    body {
+        background-color: ${({ theme }) => theme.colors.background600};
+        color:  ${({ theme }) => theme.colors.white};
+        -webkit-font-smoothing: antialiased;
+        font-size: 1.6rem;
+    }
+    
+    body, input, textarea, button{
+        font-weight: 400;
+    }
+`
diff --git a/src/styles/themes/dark.ts b/src/styles/themes/dark.ts
@@ -0,0 +1,9 @@
+import { Colors } from '@/@types/styled'
+import { colors } from '@sapuris-ui/tokens'
+
+export const darkTheme: Colors = {
+  ...colors,
+  background500: '',
+  background600: '',
+  text500: '',
+}
diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts
@@ -0,0 +1,30 @@
+import {
+  fontSizes,
+  fontWeights,
+  fonts,
+  lineHeights,
+  radii,
+  space,
+} from '@sapuris-ui/tokens'
+import { darkTheme } from './dark'
+import { lightTheme } from './light'
+
+export const defaultTheme = {
+  fontSizes,
+  fontWeights,
+  fonts,
+  lineHeights,
+  radii,
+  space,
+} as const
+
+export const theme = {
+  light: {
+    colors: lightTheme,
+    ...defaultTheme,
+  },
+  dark: {
+    colors: darkTheme,
+    ...defaultTheme,
+  },
+}
diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts
@@ -0,0 +1,9 @@
+import { Colors } from '@/@types/styled'
+import { colors } from '@sapuris-ui/tokens'
+
+export const lightTheme: Colors = {
+  ...colors,
+  'background-500': '',
+  'background-600': '',
+  'text-500': '',
+}
diff --git a/yarn.lock b/yarn.lock
@@ -2478,6 +2478,11 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz#427d5549943a9c6fce808e39ea64dbe60d4047f1"
   integrity sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==
 
+"@sapuris-ui/tokens@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@sapuris-ui/tokens/-/tokens-1.1.0.tgz#98e8ecf83911b977055a47f5be22a3e5762b58c7"
+  integrity sha512-uAgswxaU+4Qm1f7pK+SGso/WrWeBHZaHFgQDQSIoAwovXGlOu0GDj9XJcBm7UzYJOuZMf8yCOGclDrNqUgD3rw==
+
 "@sinclair/typebox@^0.24.1":
   version "0.24.51"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.51.tgz#645f33fe4e02defe26f2f5c0410e1c094eac7f5f"