styles(chore): add theme package (#4052)

frontend/Dockerfile

@@ -15,32 +15,6 @@ FROM node:current-alpine As base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 
-FROM base AS runner
-WORKDIR /app
-
-ENV NODE_ENV production
-# Uncomment the following line in case you want to disable telemetry during runtime.
-ENV NEXT_TELEMETRY_DISABLED 1
-
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-RUN apk add curl \
-  && apk add ca-certificates \
-  && update-ca-certificates
-
-ARG name
-ARG path
-
-# Install Git and OpenSSH client if $name is equal to template
-RUN if [ "$name" = "template" ]; then \
-    apk add --no-cache git openssh-client; \
-fi
-USER nextjs
-
-EXPOSE 3000
-
-ENV PORT 3000
 # Install dependencies only when needed
 FROM base AS deps
 
@@ -86,17 +60,39 @@ ARG path
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm --offline --filter=$name install && pnpm --filter=$name run build
 
 # Production image, copy all the files and run next
-FROM runner As runner
+FROM node:current-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+RUN apk add curl \
+  && apk add ca-certificates \
+  && update-ca-certificates
 
 ARG name
 ARG path
 
+# Install Git and OpenSSH client if $name is equal to template
+RUN if [ "$name" = "template" ]; then \
+    apk add --no-cache git openssh-client; \
+fi
+USER nextjs
+
 # You only need to copy next.config.js if you are NOT using the default configuration
 # COPY --from=builder /app/desktop/next.config.js ./
 COPY --from=builder /app/$path/public ./$path/public
 COPY --from=builder --chown=nextjs:nodejs /app/$path/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/$path/.next/static ./$path/.next/static
 
+EXPOSE 3000
+
+ENV PORT 3000
+
 ENV launchpath=./${path}/server.js
 
 ENTRYPOINT ["sh","-c","node ${launchpath}"]

frontend/desktop/package.json

@@ -14,18 +14,15 @@
     "@alicloud/dysmsapi20170525": "^2.0.24",
     "@alicloud/openapi-client": "^0.4.6",
     "@alicloud/tea-util": "^1.4.7",
-    "@chakra-ui/react": "^2.8.1",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
     "@kubernetes/client-node": "^0.18.1",
+    "@sealos/ui": "workspace:^",
     "@tanstack/react-query": "^4.35.3",
     "axios": "^1.5.1",
     "clsx": "^1.2.1",
     "cors": "^2.8.5",
     "dayjs": "^1.11.10",
     "eslint": "8.38.0",
     "eslint-config-next": "13.3.0",
-    "framer-motion": "^10.16.4",
     "i18next": "^22.5.1",
     "immer": "^10.0.2",
     "js-cookie": "^3.0.5",

frontend/desktop/src/styles/chakraTheme.ts

@@ -1,5 +1,5 @@
 import { defineStyleConfig, extendTheme } from '@chakra-ui/react';
-
+import { theme as originTheme } from '@sealos/ui';
 const Button = defineStyleConfig({
   baseStyle: {
     borderRadius: '4px'
@@ -42,7 +42,7 @@ const Select = defineStyleConfig({
   }
 });
 
-export const theme = extendTheme({
+export const theme = extendTheme(originTheme, {
   initialColorMode: 'light', // 'dark | 'light'
   components: {
     Button,

frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "kf-web",
+  "name": "sealos",
   "private": true,
   "version": "0.1.0",
   "scripts": {
@@ -12,18 +12,26 @@
     "dev-terminal": "pnpm -r --filter ./providers/terminal  run dev",
     "dev-template": "pnpm -r --filter ./providers/template  run dev",
     "dev-cronjob": "pnpm -r --filter ./providers/cronjob  run dev",
-    "dev-license": "pnpm -r --filter ./providers/license  run dev"
+    "dev-license": "pnpm -r --filter ./providers/license  run dev",
+    "gen:theme-typings": "pnpm chakra-cli tokens packages/ui/src/theme.ts --out node_modules/.pnpm/node_modules/@chakra-ui/styled-system/dist/theming.types.d.ts",
+    "postinstall": "pnpm run gen:theme-typings"
   },
   "workspaces": [
     "./packages/*",
     "./providers/*",
     "./desktop"
   ],
   "devDependencies": {
-    "prettier": "^2.8.8",
-    "react-i18next": "^12.3.1"
+    "@chakra-ui/cli": "^2.4.1",
+    "prettier": "^2.8.8"
   },
   "dependencies": {
+    "@chakra-ui/anatomy": "^2.2.1",
+    "@chakra-ui/next-js": "^2.1.5",
+    "@chakra-ui/react": "^2.8.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "framer-motion": "^10.16.4",
     "typescript": "^5.2.2"
   }
 }

frontend/packages/ui/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

frontend/packages/ui/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@sealos/ui",
+  "version": "1.0.0",
+  "description": "",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "main": "./src/index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "next dev"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

frontend/packages/ui/src/colors.ts

@@ -0,0 +1,84 @@
+export const colors = {
+  primary: {
+    100: '#E6F6F6',
+    200: '#CCEEED',
+    300: '#99DDDB',
+    400: '#66CBCA',
+    500: '#33BABB',
+    600: '#00A9A6',
+    700: '#008F8D',
+    800: '#006B6A',
+    900: '#004846',
+    1000: '#002423'
+  },
+  // 避免和 white 冲突， black也是同理
+  white_: {
+    100: '#FEFEFE',
+    200: '#FDFDFE',
+    300: '#FBFBFC',
+    400: '#F8FAFB',
+    500: '#F6F8F9',
+    600: '#F4F6F8',
+    700: '#C3C5C6',
+    800: '#929495',
+    900: '#626263',
+    1000: '#313132'
+  },
+  grayModern: {
+    100: '#EFF0F1',
+    200: '#DEE0E2',
+    300: '#BDC1C5',
+    400: '#9CA2A8',
+    500: '#7B838B',
+    600: '#5A646E',
+    700: '#485058',
+    800: '#363C42',
+    900: '#24282C',
+    1000: '#121416'
+  },
+  grayIron: {
+    100: '#F3F3F3',
+    200: '#E6E6E7',
+    300: '#CDCDD0',
+    400: '#B4B4B8',
+    500: '#9B9BA1',
+    600: '#828289',
+    700: '#68686E',
+    800: '#4E4E52',
+    900: '#343437',
+    1000: '#1A1A1B'
+  },
+  error: {
+    100: '#FFEBED',
+    200: '#FFD6DB',
+    300: '#FFADB7',
+    400: '#FF8492',
+    500: '#FF5B6E',
+    600: '#FF324A'
+  },
+  warn: {
+    100: '#FFF2EC',
+    400: '#FDB08A',
+    600: '#FB7C3C',
+    700: '#C96330'
+  },
+  rose: {
+    100: '#FDEAF1'
+  },
+  blue: {
+    100: '#EBF7FD',
+    400: '#86CEF5',
+    500: '#5EBDF2',
+    600: '#36ADEF',
+    700: '#2B8ABF'
+  },
+  purple: {
+    300: '#DBBDE9',
+    400: '#C99CDF',
+    600: '#A55AC9',
+    700: '#7167AA'
+  },
+  frostyNightfall: {
+    200: '#EAEBF0'
+  }
+};

frontend/packages/ui/src/components/Button.ts

@@ -0,0 +1,22 @@
+import { defineStyleConfig } from '@chakra-ui/react';
+
+export const Button = defineStyleConfig({
+  baseStyle: {
+    borderRadius: '4px'
+  },
+  variants: {
+    primary: {
+      background: 'grayModern.900',
+      color: 'white'
+    },
+    secondary: {
+      border: '1px solid',
+      borderColor: 'grayModern.200',
+      background: 'white_.400'
+    },
+    warn: {
+      bgColor: 'error.500',
+      color: 'white_.100'
+    }
+  }
+});

frontend/packages/ui/src/components/index.ts

@@ -0,0 +1,5 @@
+import { Button } from './Button';
+export const components = {
+  Button
+};
+export * from './Button';

frontend/packages/ui/src/fontSizes.ts

@@ -0,0 +1,9 @@
+export const fontSizes = {
+  sm: '10px',
+  base: '12px',
+  md: '14px',
+  lg: '16px',
+  xl: '16px',
+  '2xl': '18px',
+  '3xl': '22px'
+};

frontend/packages/ui/src/index.ts

@@ -0,0 +1,4 @@
+export * from './colors';
+export * from './theme';
+export * from './components';
+export * from './fontSizes';

frontend/packages/ui/src/theme.ts

@@ -0,0 +1,9 @@
+import { extendTheme } from '@chakra-ui/react';
+import { colors } from './colors';
+import { components } from './components';
+import { fontSizes } from './fontSizes';
+export const theme = extendTheme({
+  colors,
+  components,
+  fontSizes
+});

frontend/packages/ui/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"],
+  "extends": "../../tsconfig.web.json"
+}