antd-solid 0.0.2

package/.eslintrc.cjs

@@ -0,0 +1,36 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  parser: '@typescript-eslint/parser',
+  plugins: ['solid'],
+  extends: ['standard-with-typescript', 'plugin:solid/typescript', 'prettier'],
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json'],
+  },
+  rules: {
+    "no-shadow": "error",
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
+    ],
+    '@typescript-eslint/comma-dangle': ['error', 'only-multiline'],
+    '@typescript-eslint/strict-boolean-expressions': 'off',
+    indent: 'off',
+    '@typescript-eslint/indent': ['error', 2],
+    quotes: 'off',
+    '@typescript-eslint/quotes': 'error',
+    'no-template-curly-in-string': 'off',
+    '@typescript-eslint/no-floating-promises': 'off',
+    '@typescript-eslint/consistent-type-assertions': 'off',
+    '@typescript-eslint/no-unnecessary-type-assertion': 'off',
+    '@typescript-eslint/restrict-template-expressions': 'off',
+    '@typescript-eslint/ban-types': 'off',
+  },
+}

package/.prettierrc

@@ -0,0 +1,11 @@
+{
+    "printWidth": 100,
+    "tabWidth": 2,
+    "useTabs": false,
+    "singleQuote": true,
+    "semi": false,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "arrowParens": "avoid",
+    "parser": "typescript"
+}

package/.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "editor.formatOnSave": false,
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "eslint.format.enable": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

package/README.md

@@ -0,0 +1,11 @@
+<p align="center">
+  <a href="https://mapojs.com/antd-solid">
+    <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png">
+  </a>
+</p>
+
+<h1 align="center">Antd-solid</h1>
+
+<div align="center">
+
+Ant Design 的 solid 版本

package/docs/.vitepress/components/Code.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="ant-[border:1px_solid_rgba(5,5,5,0.06)] ant-rounded-6px">
+    <div class="ant-px-24px ant-py-36px">
+      <div ref="demoContainer"></div>
+    </div>
+    <!-- <div class="ant-[border-top:1px_solid_rgba(5,5,5,0.06)] ant-relative ant-px-24px ant-pt-18px ant-pb-12px">
+      <div class="ant-font-bold ant-absolute -ant-translate-y-1/2 ant-left-16px ant-top-0 ant-bg-white ant-px-8px">{{
+        title }}</div>
+      <div>{{ description }}</div>
+    </div> -->
+    <div
+      class="ant-[border-top:1px_dashed_rgba(5,5,5,0.06)] ant-flex ant-justify-center ant-items-center ant-py-12px ant-gap-16px ant-h-40px">
+      <span class="i-ant-design:copy ant-cursor-pointer" @click="() => onCopy(code)" />
+      <img v-show="!expand" class="ant-w-16px ant-cursor-pointer"
+        src="https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg" alt="expand" @click="expand = !expand" />
+      <img v-show="expand" class="ant-w-16px ant-cursor-pointer"
+        src="https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg" alt="unexpand"
+        @click="expand = !expand" />
+    </div>
+    <div v-show="expand" class="ant-[border-top:1px_dashed_rgba(5,5,5,0.06)]">
+      <pre class='language-typescript !ant-m-0 !ant-bg-white !ant-p-16px !ant-flex'>
+        <code class="!ant-text-[var(--dark-color)] !ant-p-0" v-html="codeHtml"></code>
+      </pre>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type Component } from 'solid-js'
+import { render, createComponent } from 'solid-js/web'
+import { onMounted, ref } from 'vue'
+import Prism from 'prismjs'
+import 'prismjs/themes/prism.css'
+import 'prismjs/components/prism-typescript'
+
+interface Props {
+  component: Component
+  code: string
+  // title?: string
+  // description?: string
+}
+const props = defineProps<Props>()
+
+let demoContainer = ref<HTMLDivElement>()
+
+let expand = ref(false)
+
+let codeHtml = ref('')
+
+onMounted(() => {
+  render(() => createComponent(props.component, {}), demoContainer.value!)
+
+  codeHtml.value = Prism.highlight(props.code, Prism.languages.typescript, 'typescript')
+})
+
+function onCopy(text: string) {
+  navigator.clipboard.writeText(text)
+}
+</script>

package/docs/.vitepress/config.ts

@@ -0,0 +1,49 @@
+import { defineConfig } from 'vitepress'
+import UnocssPlugin from '@unocss/vite'
+import solidPlugin from 'vite-plugin-solid'
+import path from 'path'
+
+export default defineConfig({
+  title: "Antd-solid",
+  description: "UI 库",
+  cleanUrls: true,
+  head: [['link', { rel: 'shortcut icon', href: 'https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png' }]],
+  themeConfig: {
+    logo: 'https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png',
+    nav: [
+      { text: '首页', link: '/' },
+      { text: '组件', link: '/components/button' }
+    ],
+    sidebar: [
+      {
+        text: '通用组件',
+        items: [
+          { text: 'Button 按钮', link: '/components/button' },
+        ]
+      },
+      {
+        text: '数据展示',
+        items: [
+          { text: 'Table 表格', link: '/components/table' },
+        ]
+      },
+    ],
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/Reinhard2019/antd-solid' }
+    ],
+    footer: {
+      copyright: 'Released under the MIT License. Copyright © 2023-present 丁磊',
+    },
+  },
+  vite: {
+    resolve: {
+      alias: {
+        'antd-solid': path.resolve(__dirname, '../../src'),
+      },
+    },
+    plugins: [
+      UnocssPlugin(),
+      solidPlugin(),
+    ],
+  }
+})

package/docs/.vitepress/theme/index.css

@@ -0,0 +1,15 @@
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: linear-gradient(
+    120deg,
+    #1184ff 30%,
+    #f64a5b
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -90deg,
+    #f64a5b 10%,
+    #1184ff 60%
+  );
+  --vp-home-hero-image-filter: blur(40px);
+}

package/docs/.vitepress/theme/index.ts

@@ -0,0 +1,13 @@
+import 'uno.css'
+import DefaultTheme from 'vitepress/theme'
+import 'antd-solid/index.css'
+import './index.css'
+import Code from '../components/Code.vue'
+
+export default {
+  ...DefaultTheme,
+  enhanceApp(ctx) {
+    DefaultTheme.enhanceApp(ctx)
+    ctx.app.component('Code', Code)
+  },
+}

package/docs/components/Button.tsx

@@ -0,0 +1,20 @@
+import { type Component } from 'solid-js'
+import { Button } from 'antd-solid'
+
+const Index: Component = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: '8px',
+      }}
+    >
+      <Button type="primary">Primary Button</Button>
+      <Button>Default Button</Button>
+      <Button type="text">Text Button</Button>
+      <Button type="link">Link Button</Button>
+    </div>
+  )
+}
+
+export default Index

package/docs/components/Table.tsx

@@ -0,0 +1,34 @@
+import { type Component } from 'solid-js'
+import { type Column, Table } from 'antd-solid'
+
+interface Row {
+  name: string
+}
+
+const Index: Component = () => {
+  const columns: Array<Column<Row>> = [
+    {
+      title: '动画',
+      render(row) {
+        return <div>{row.name}</div>
+      },
+    },
+    {
+      title: '属性',
+      render(row) {
+        return <div>{row.name}</div>
+      },
+    },
+  ]
+  const dataSource = [
+    {
+      name: '1',
+    },
+    {
+      name: '2',
+    },
+  ]
+  return <Table columns={columns} dataSource={dataSource} />
+}
+
+export default Index

package/docs/components/button.md

@@ -0,0 +1,23 @@
+---
+outline: deep
+---
+
+# Button 按钮 {#title}
+
+按钮用来触发一些操作。
+
+## 代码演示
+
+
+### 按钮类型
+
+按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
+
+<!-- The following frontmatter options are only applicable when using the default theme. -->
+
+<script lang="ts" setup>
+import component from './Button.tsx'
+import code from './Button.tsx?raw'
+</script>
+
+<Code :component="component" :code="code" />

package/docs/components/table.md

@@ -0,0 +1,23 @@
+---
+outline: deep
+---
+
+# Table 表格 {#title}
+
+展示行列数据。
+
+## 代码演示
+
+
+### 基本用法
+
+简单的表格
+
+<!-- The following frontmatter options are only applicable when using the default theme. -->
+
+<script lang="ts" setup>
+import component from './Table.tsx'
+import code from './Table.tsx?raw'
+</script>
+
+<Code :component="component" :code="code" />

package/docs/index.md

@@ -0,0 +1,28 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "Antd-solid"
+  text: "UI 库"
+  tagline: Ant Design 的 solid 版本
+  image:
+    src: https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png
+    alt: Antd-solid
+  actions:
+    - theme: brand
+      text: 开始使用
+      link: /components/button
+    # - theme: alt
+    #   text: API Examples
+    #   link: /api-examples
+
+features:
+  - title: 支持 solid
+    details: Ant Design 的 solid 版本
+  - title: 定制主题，随心所欲
+    details: 使用 css 变量，让你定制主题更简单
+  - title: 组件丰富，选用自如
+    details: 大量实用组件满足你的需求，灵活定制与拓展
+---
+

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "antd-solid",
+  "version": "0.0.2",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "devDependencies": {
+    "@iconify-json/ant-design": "^1.1.5",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@solidjs/testing-library": "^0.7.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/lodash-es": "^4.17.7",
+    "@types/react": "^18.0.26",
+    "@types/react-color": "^3.0.6",
+    "@types/react-dom": "^18.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@unocss/cli": "^0.51.8",
+    "@unocss/preset-icons": "^0.51.6",
+    "@unocss/preset-mini": "^0.51.6",
+    "@unocss/transformer-variant-group": "^0.51.6",
+    "@unocss/vite": "^0.51.6",
+    "babel-preset-solid": "^1.7.3",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-standard-with-typescript": "^34.0.1",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-n": "^15.7.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-solid": "^0.12.1",
+    "jsdom": "^21.1.1",
+    "rollup": "^3.21.0",
+    "rollup-plugin-import-css": "^3.2.1",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "typescript": "^5.1.6",
+    "vite-plugin-solid": "^2.7.0",
+    "vitepress": "1.0.0-rc.4",
+    "vitest": "^0.30.1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "antd": "^5.3.0",
+    "classnames": "^2.3.2",
+    "lodash-es": "^4.17.21",
+    "prismjs": "^1.29.0",
+    "react": "^18.2.0",
+    "react-color": "^2.19.3",
+    "react-dom": "^18.2.0",
+    "solid-js": "^1.7.8"
+  },
+  "scripts": {
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "build": "npx rollup -c && npm run build:unocss",
+    "build:unocss": "npx unocss './src/**' -o es/unocss.css -m",
+    "test": "vitest"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,25 @@
+import ts from "rollup-plugin-typescript2"
+import css from "rollup-plugin-import-css"
+import commonjs from "@rollup/plugin-commonjs"
+import { babel } from "@rollup/plugin-babel"
+
+export default {
+  input: "src/index.ts",
+  output: {
+    file: "es/index.js",
+  },
+  plugins: [
+    ts({
+      tsconfig: "./tsconfig.json",
+      // include: "src/**/*.ts+(|x)",
+      exclude: ["**/*.test.[ts|tsx]"],
+    }),
+    babel({
+      extensions: [".js", ".ts", ".jsx", ".tsx"],
+      presets: ["babel-preset-solid"],
+    }),
+    commonjs(),
+    css(),
+  ],
+  external: ["uno.css"],
+}

package/src/Button.css

@@ -0,0 +1,14 @@
+@keyframes button-border {
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    inset: -4px;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

package/src/Button.tsx

@@ -0,0 +1,86 @@
+import {
+  type Component,
+  mergeProps,
+  type ParentProps,
+  type JSX,
+  Show,
+  createSignal,
+  createMemo,
+} from 'solid-js'
+import cs from 'classnames'
+import './Button.css'
+
+interface ButtonProps extends ParentProps, JSX.CustomAttributes<HTMLButtonElement> {
+  type?: 'default' | 'primary' | 'text' | 'link'
+  onClick?: ((e: MouseEvent) => void) | ((e: MouseEvent) => Promise<unknown>)
+  /**
+   * 默认: middle
+   * plain: 没有多余的 padding 和高度等
+   */
+  size?: 'large' | 'middle' | 'small' | 'plain'
+  class?: string
+  style?: JSX.CSSProperties
+  loading?: boolean
+}
+
+const sizeClassMap = {
+  large: 'ant-px-15px ant-py-6px ant-h-40px ant-rounded-8px',
+  middle: 'ant-px-15px ant-py-4px ant-h-32px ant-rounded-6px',
+  small: 'ant-px-7px ant-h-24px ant-rounded-4px',
+  plain: 'ant-p-0',
+} as const
+
+const typeClassMap = {
+  default:
+    'ant-[border:1px_solid_rgb(217,217,217)] ant-bg-white ant-text-[var(--dark-color)] hover:ant-[border-color:var(--light-primary-color)] hover:ant-text-[var(--light-primary-color)]',
+  primary:
+    'ant-border-none ant-bg-[var(--primary-color)] hover:ant-bg-[var(--light-primary-color)] ant-text-white',
+  text: 'ant-border-none ant-bg-transparent ant-text-[var(--dark-color)] hover:ant-bg-[rgba(0,0,0,0.06)] active:ant-bg-[rgba(0,0,0,.15)]',
+  link: 'ant-border-none ant-bg-transparent ant-text-[var(--primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-text-[var(--dark-primary-color)]',
+} as const
+
+const Button: Component<ButtonProps> = props => {
+  const mergedProps = mergeProps({ type: 'default', size: 'middle' } as ButtonProps, props)
+  const [innerLoading, setLoading] = createSignal(false)
+  const loading = createMemo(() => props.loading ?? innerLoading())
+
+  return (
+    <button
+      ref={mergedProps.ref}
+      class={cs(
+        'ant-relative ant-cursor-pointer',
+        mergedProps.class,
+        sizeClassMap[mergedProps.size!],
+        typeClassMap[mergedProps.type!],
+        loading() && 'ant-opacity-65',
+      )}
+      style={mergedProps.style}
+      onClick={e => {
+        const res = mergedProps.onClick?.(e)
+        if (res instanceof Promise) {
+          setLoading(true)
+          res.finally(() => setLoading(false))
+        }
+
+        if (mergedProps.type === 'default' || mergedProps.type === 'primary') {
+          const div = document.createElement('div')
+          div.className =
+            'ant-absolute ant-inset-0 ant-rounded-inherit ant-[border:1px_solid_var(--light-primary-color)] ant-[animation:button-border_linear_1s]'
+          const onAnimationEnd = () => {
+            div.remove()
+            div.removeEventListener('animationend', onAnimationEnd)
+          }
+          div.addEventListener('animationend', onAnimationEnd)
+          e.currentTarget.insertBefore(div, e.currentTarget.childNodes[0])
+        }
+      }}
+    >
+      <Show when={loading()}>
+        <span class="i-ant-design:loading ant-[vertical-align:-0.125em] keyframes-spin ant-[animation:spin_1s_linear_infinite] ant-mr-8px" />
+      </Show>
+      <span>{mergedProps.children}</span>
+    </button>
+  )
+}
+
+export default Button

package/src/ColorPicker.tsx

@@ -0,0 +1,66 @@
+import { type Component, createSignal, mergeProps, untrack } from 'solid-js'
+import { type ColorResult, SketchPicker, type Color, type RGBColor, type HSLColor } from 'react-color'
+import { reactToSolidComponent } from './utils/component'
+import Button from './Button'
+import Popover from './Popover'
+import { get, isNil } from 'lodash-es'
+
+const _SketchPicker = reactToSolidComponent(SketchPicker)
+
+export interface ColorPickerProps {
+  /**
+   * 默认: rgba
+   */
+  type?: 'rgba' | 'hsla'
+  defaultColor?: string
+  onChange?: (colorString: string, color: ColorResult) => void
+}
+
+function isRGBColor(color: Color): color is RGBColor {
+  return ['r', 'g', 'b'].every(k => !isNil(get(color, k)))
+}
+
+function isHSLColor(color: Color): color is HSLColor {
+  return ['r', 'g', 'b'].every(k => !isNil(get(color, k)))
+}
+
+function colorStringify(color: Color | undefined) {
+  if (!color) return
+
+  if (isRGBColor(color)) return `rgba(${color.r},${color.g},${color.b},${color.a ?? 1})`
+
+  if (isHSLColor(color)) return `hsla(${color.h},${color.s},${color.l},${color.a ?? 1})`
+
+  return color
+}
+
+const ColorPicker: Component<ColorPickerProps> = _props => {
+  const props = mergeProps({ type: 'rgba' } as ColorPickerProps, _props)
+  const [color, setColor] = createSignal(props.defaultColor ?? 'black')
+
+  return (
+    <Popover
+      content={
+        <_SketchPicker
+          color={color()}
+          onChange={colorResult =>
+          { untrack(() => {
+            const colorString = colorStringify(
+              props.type === 'rgba' ? colorResult.rgb : colorResult.hsl,
+            )!
+            setColor(colorString)
+
+            props.onChange?.(colorString, colorResult)
+          }); }
+          }
+        />
+      }
+      trigger="click"
+      placement="bottomLeft"
+    >
+      <Button style={{ background: color() }} />
+    </Popover>
+  )
+}
+
+export default ColorPicker

package/src/DatePicker.tsx

@@ -0,0 +1,12 @@
+import { DatePicker as DatePickerAntd } from 'antd'
+import { reactToSolidComponent, replaceClassName } from './utils/component'
+
+const RangePicker = replaceClassName(reactToSolidComponent(DatePickerAntd.RangePicker))
+
+const _DatePicker = replaceClassName(reactToSolidComponent(DatePickerAntd))
+const DatePicker = _DatePicker as typeof _DatePicker & {
+  RangePicker: typeof RangePicker
+}
+DatePicker.RangePicker = RangePicker
+
+export default DatePicker