Feat: chakra ui

2025-01-22 17:02:12 +03:00
11 changed files with 67 additions and 66 deletions
--- a/.woodpecker/pipeline.yml
+++ b/.woodpecker/pipeline.yml
@@ -0,0 +1,19 @@
+steps:
+  - name: build
+    image: docker:latest
+    commands:
+      - docker build -t nwblog:latest .
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    when:
+      - branch: [master, deploy]
+      - event: [push, manual]
+  - name: deploy
+    image: docker:latest
+    commands:
+      - docker run -d -p 127.0.0.1:25010:3000 --restart always --name nwblog nwblog:latest
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    when:
+      - branch: deploy
+      - event: manual
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@@ -18,14 +18,14 @@
    "react-icons": "^5.4.0"
  },
  "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
    "eslint": "^9",
    "eslint-config-next": "15.1.5",
-    "@eslint/eslintrc": "^3"
+    "postcss": "^8",
+    "sass": "^1.83.4",
+    "typescript": "^5"
  }
 }
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,8 +1,6 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
-  plugins: {
-    tailwindcss: {},
-  },
+  plugins: {},
 };

 export default config;
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
--- a/src/app/globals.scss
+++ b/src/app/globals.scss
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,7 @@
-import { Provider } from "@/components/ui/provider";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import "./globals.scss";
+import Providers from "./providers";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -26,7 +26,7 @@ export default function RootLayout({
  return (
    <html lang="ru" suppressHydrationWarning>
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <Provider>{children}</Provider>
+        <Providers>{children}</Providers>
      </body>
    </html>
  );
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,11 +1,18 @@
+"use client";
+
 import { Button } from "@/components/ui/button";
+import { useColorMode, useColorModeValue } from "@/components/ui/color-mode";
 import { VStack } from "@chakra-ui/react";

 export default function Home() {
+  const { toggleColorMode } = useColorMode();
+  const color = useColorModeValue("red", "blue");
  return (
    <VStack>
-      <Button>Test 1</Button>
-      <Button>Test 2</Button>
+      <Button onClick={toggleColorMode}>Test 1</Button>
+      <Button colorPalette={color} variant="solid">
+        {color}
+      </Button>
    </VStack>
  );
 }
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -0,0 +1,5 @@
+import { Provider } from "@/components/ui/provider";
+
+export default function Providers(props: React.PropsWithChildren) {
+  return <Provider>{props.children}</Provider>;
+}
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,40 +1,33 @@
-import type { ButtonProps as ChakraButtonProps } from "@chakra-ui/react"
-import {
-  AbsoluteCenter,
-  Button as ChakraButton,
-  Span,
-  Spinner,
-} from "@chakra-ui/react"
-import * as React from "react"
+import type { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
+import { AbsoluteCenter, Button as ChakraButton, Span, Spinner } from "@chakra-ui/react";
+import * as React from "react";

 interface ButtonLoadingProps {
-  loading?: boolean
-  loadingText?: React.ReactNode
+  loading?: boolean;
+  loadingText?: React.ReactNode;
 }

 export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}

-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  function Button(props, ref) {
-    const { loading, disabled, loadingText, children, ...rest } = props
-    return (
-      <ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
-        {loading && !loadingText ? (
-          <>
-            <AbsoluteCenter display="inline-flex">
-              <Spinner size="inherit" color="inherit" />
-            </AbsoluteCenter>
-            <Span opacity={0}>{children}</Span>
-          </>
-        ) : loading && loadingText ? (
-          <>
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {
+  const { loading, disabled, loadingText, children, ...rest } = props;
+  return (
+    <ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
+      {loading && !loadingText ? (
+        <>
+          <AbsoluteCenter display="inline-flex">
            <Spinner size="inherit" color="inherit" />
-            {loadingText}
-          </>
-        ) : (
-          children
-        )}
-      </ChakraButton>
-    )
-  },
-)
+          </AbsoluteCenter>
+          <Span opacity={0}>{children}</Span>
+        </>
+      ) : loading && loadingText ? (
+        <>
+          <Spinner size="inherit" color="inherit" />
+          {loadingText}
+        </>
+      ) : (
+        children
+      )}
+    </ChakraButton>
+  );
+});
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,18 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-    },
-  },
-  plugins: [],
-} satisfies Config;