lark-docs-variables 1.0.0

package/.vscode/launch.json

@@ -0,0 +1,18 @@
+{
+  "version": "0.2.0",
+  "configurations": [{
+    "type": "node",
+    "request": "launch",
+    "name": "vite:build",
+    "skipFiles": ["<node_internals>/**", "build/**"],
+    "program": "${workspaceFolder}/node_modules/vite/bin/vite.js",
+    "args": ["build"]
+  }, {
+    "type": "node",
+    "request": "launch",
+    "name": "vite:dev",
+    "skipFiles": ["<node_internals>/**", "build/**"],
+    "program": "${workspaceFolder}/node_modules/vite/bin/vite.js",
+    "args": ["dev"]
+  }]
+}

package/.vscode/settings.json

@@ -0,0 +1,42 @@
+{
+  "[jsonc]": {
+    "editor.formatOnSave": false
+  },
+  "[css]": {
+    "editor.formatOnSave": false
+  },
+  "[tailwindcss]": {
+    "editor.formatOnSave": false
+  },
+  "[html]": {
+    "editor.formatOnSave": false
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "explicit"
+  },
+  "typescript.preferences.importModuleSpecifier": "relative",
+  "editor.formatOnSave": true,
+  "editor.rulers": [80],
+  "editor.tabCompletion": "on",
+  "editor.tabSize": 2,
+  "editor.trimAutoWhitespace": true,
+  "eslint.nodePath": "./node_modules",
+  "eslint.run": "onType",
+  "files.exclude": {
+    "**/.DS_Store": true,
+    "**/.git": true,
+    "**/dist": false,
+    "**/node_modules": true,
+    "**/tsconfig.tsbuildinfo": true
+  },
+  "files.insertFinalNewline": true,
+  "files.trimTrailingWhitespace": true,
+  "javascript.preferences.quoteStyle": "single",
+  "json.format.enable": false,
+  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
+  "typescript.format.semicolons": "remove",
+  "typescript.preferences.quoteStyle": "single",
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.updateImportsOnFileMove.enabled": "never"
+}

package/README.md

@@ -0,0 +1 @@
+# Atomic BI Lark Addons

package/app.json

@@ -0,0 +1,19 @@
+{
+  "manifestVersion": 1,
+  "appID": "cli_a72c3455d2b8d02f",
+  "appType": "docs-addon",
+  "blockTypeID": "blk_67a6884873800020d68db80f",
+  "projectName": "addons",
+  "url": "https://atomicbi.sg.larksuite.com/wiki/AGlQwmkbAiadxgkbzYel4Zufgoe",
+  "contributes": {
+    "addPanel": { "initialHeight": 36, "view": "panel.html" },
+    "modal": { "initialHeight": 420, "view": "settings.html" }
+  },
+  "meta": {
+    "appName": { "zh-CN": "Atomic BI", "en-US": "Atomic BI", "ja-JP": "Atomic BI" },
+    "name": { "zh-CN": "Variable", "en-US": "Variable", "ja-JP": "Variable" },
+    "icon": "https://pan16.larksuitecdn.com/static-resource/v1/v3_00ja_a234a524-aef8-49fc-b26d-abd364307fhu",
+    "filledIcon": "https://pan16.larksuitecdn.com/static-resource/v1/v3_00ja_a234a524-aef8-49fc-b26d-abd364307fhu",
+    "outlinedIcon": "https://pan16.larksuitecdn.com/static-resource/v1/v3_00ja_a234a524-aef8-49fc-b26d-abd364307fhu"
+  }
+}

package/components.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-vega",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "fileCase": "pascalCase",
+  "transform": {
+    "enforceNamedImports": true,
+    "enforceDirectExports": true,
+    "enforceFunctionComponent": true,
+    "enforceFormat": true,
+    "enforceEslint": true,
+    "enforcePrettier": true,
+    "enforceLineSeparation": true,
+    "eslint": {
+      "@typescript-eslint/consistent-type-imports": ["error", {
+        "disallowTypeAnnotations": true,
+        "prefer": "no-type-imports"
+      }]
+    }
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/base",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package/eslint.config.js

@@ -0,0 +1,123 @@
+import eslint from '@eslint/js'
+import stylistic from '@stylistic/eslint-plugin'
+import jsxA11y from 'eslint-plugin-jsx-a11y'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['src/**/*.{ts,tsx}', 'vite/**/*.{ts,tsx}'],
+    extends: [
+      eslint.configs.recommended,
+      tseslint.configs.recommendedTypeChecked,
+      tseslint.configs.stylisticTypeChecked,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      parserOptions: {
+        projectService: true,
+        ecmaFeatures: { jsx: true }
+      },
+      globals: globals.browser,
+    },
+    plugins: {
+      '@stylistic': stylistic,
+      'jsx-a11y': jsxA11y,
+      'react': react,
+      'react-hooks': reactHooks
+    },
+    rules: {
+      '@stylistic/space-in-parens': ['error'],
+      '@stylistic/comma-spacing': ['error'],
+      '@stylistic/no-multi-spaces': ['error'],
+      '@stylistic/no-trailing-spaces': ['error'],
+      '@stylistic/no-whitespace-before-property': ['error'],
+      '@stylistic/array-bracket-newline': ['error', 'consistent'],
+      '@stylistic/array-bracket-spacing': ['error'],
+      '@stylistic/arrow-spacing': ['error'],
+      '@stylistic/arrow-parens': ['error', 'always'],
+      '@stylistic/block-spacing': ['error', 'always'],
+      '@stylistic/brace-style': ['error', '1tbs', { 'allowSingleLine': true }],
+      '@stylistic/comma-dangle': ['error', 'never'],
+      '@stylistic/key-spacing': ['error'],
+      '@stylistic/keyword-spacing': ['error'],
+      '@stylistic/member-delimiter-style': ['error', { 'multiline': { 'delimiter': 'none' } }],
+      '@stylistic/no-extra-semi': ['error'],
+      '@stylistic/indent': ['error', 2],
+      '@stylistic/no-multiple-empty-lines': ['error', { 'max': 1, 'maxEOF': 0, 'maxBOF': 0 }],
+      '@stylistic/object-curly-spacing': ['error', 'always'],
+      '@stylistic/quotes': ['error', 'single'],
+      '@stylistic/semi': ['error', 'never'],
+      '@stylistic/space-before-blocks': ['error', 'always'],
+      '@stylistic/space-before-function-paren': ['error', { 'anonymous': 'always', 'named': 'never', 'asyncArrow': 'always' }],
+      '@typescript-eslint/adjacent-overload-signatures': 'error',
+      '@typescript-eslint/array-type': 'off',
+      '@typescript-eslint/await-thenable': 'off',
+      '@typescript-eslint/unbound-method': 'off',
+      '@typescript-eslint/no-unsafe-enum-comparison': 'off',
+      '@typescript-eslint/no-unsafe-function-type': 'off',
+      '@typescript-eslint/ban-types': 'off',
+      '@typescript-eslint/consistent-type-assertions': 'off',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/explicit-member-accessibility': 'off',
+      '@typescript-eslint/no-angle-bracket-type-assertion': 'off',
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/no-empty-interface': 'off',
+      '@typescript-eslint/no-extra-non-null-assertion': 'error',
+      '@typescript-eslint/no-floating-promises': 'off',
+      '@typescript-eslint/no-misused-new': 'error',
+      '@typescript-eslint/no-misused-promises': 'off',
+      '@typescript-eslint/no-namespace': 'off',
+      '@typescript-eslint/no-non-null-asserted-optional-chain': 'error',
+      '@typescript-eslint/no-non-null-assertion': 'off',
+      '@typescript-eslint/no-object-literal-type-assertion': 'off',
+      '@typescript-eslint/no-parameter-properties': 'off',
+      '@typescript-eslint/no-shadow': 'error',
+      '@typescript-eslint/no-triple-slash-reference': 'off',
+      '@typescript-eslint/no-unused-vars': ['error', {
+        'args': 'all',
+        'argsIgnorePattern': '^_',
+        'caughtErrors': 'all',
+        'caughtErrorsIgnorePattern': '^_',
+        'destructuredArrayIgnorePattern': '^_',
+        'varsIgnorePattern': '^_',
+        'ignoreRestSiblings': true
+      }],
+      '@typescript-eslint/no-use-before-define': 'off',
+      '@typescript-eslint/no-var-requires': 'off',
+      '@typescript-eslint/prefer-for-of': 'error',
+      '@typescript-eslint/prefer-interface': 'off',
+      '@typescript-eslint/prefer-nullish-coalescing': 'off',
+      '@typescript-eslint/prefer-optional-chain': 'error',
+      '@typescript-eslint/return-await': 'off',
+      '@typescript-eslint/unified-signatures': 'error',
+      '@typescript-eslint/no-unsafe-return': 'off',
+      '@typescript-eslint/no-redundant-type-constituents': 'off',
+      '@typescript-eslint/no-unsafe-member-access': 'off',
+      '@typescript-eslint/no-unsafe-call': 'off',
+      '@typescript-eslint/no-unsafe-argument': 'off',
+      '@typescript-eslint/no-unsafe-assignment': 'off',
+      '@typescript-eslint/dot-notation': 'off',
+      '@typescript-eslint/prefer-regexp-exec': 'off',
+      '@typescript-eslint/require-await': 'off',
+      '@typescript-eslint/only-throw-error': ['error', {
+        'allow': [
+          { from: 'lib', name: 'Response' },
+          { from: 'package', package: 'react-router', name: 'DataWithResponseInit' }
+        ]
+      }],
+      'jsx-a11y/no-autofocus': ['error', { 'ignoreNonDOM': true }],
+      'jsx-a11y/aria-role': ['error', { 'ignoreNonDOM': true }],
+      '@typescript-eslint/no-base-to-string': 'off',
+      '@typescript-eslint/restrict-template-expressions': 'off',
+      'react-hooks/exhaustive-deps': 'off'
+    }
+  }
+])

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "lark-docs-variables",
+  "version": "1.0.0",
+  "type": "module",
+  "dependencies": {
+    "@base-ui/react": "^1.1.0",
+    "@lark-opdev/block-docs-addon-api": "^0.0.10",
+    "@lark-opdev/cli": "3.3.2",
+    "@tailwindcss/vite": "^4.1.18",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.563.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@stylistic/eslint-plugin": "^2.11.0",
+    "@types/lodash.merge": "^4.6.9",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/utils": "^8.17.0",
+    "@vitejs/plugin-react": "^5.1.1",
+    "axios": "^1.13.2",
+    "block-docs-addon-vite-utils": "^1.0.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "lodash.merge": "^4.6.2",
+    "open": "^11.0.0",
+    "picocolors": "^1.1.1",
+    "query-string": "^9.3.1",
+    "react-refresh": "^0.14.0",
+    "rimraf": "^6.1.2",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  },
+  "resolutions": {
+    "vite": "7.2.4"
+  },
+  "scripts": {
+    "serve": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "upload": "pnpm build && opdev upload ./dist"
+  }
+}

package/src/components/Box.tsx

@@ -0,0 +1,10 @@
+import { type ComponentProps, type FunctionComponent } from 'react'
+import { type BoxProps, box } from '../util/box'
+
+export const Box: FunctionComponent<BoxProps & ComponentProps<'div'>> = ({ flex, gap, m, p, children, ...props }) => {
+  return (
+    <div style={box({ flex, gap, m, p })} {...props}>
+      {children}
+    </div>
+  )
+}

package/src/components/Icon.module.css

@@ -0,0 +1,3 @@
+.icon {
+  display: block;
+}

package/src/components/Icon.tsx

@@ -0,0 +1,26 @@
+import { type FunctionComponent } from 'react'
+import styles from './Icon.module.css'
+
+export interface IconProps {
+  size?: number
+}
+
+export const CaretUpIcon: FunctionComponent<IconProps> = ({ size = 16 }) => {
+  return (
+    <svg className={styles['icon']} width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fillRule="evenodd" clipRule="evenodd" d="M7.00003 15.5C6.59557 15.5 6.23093 15.2564 6.07615 14.8827C5.92137 14.509 6.00692 14.0789 6.29292 13.7929L11.2929 8.79289C11.6834 8.40237 12.3166 8.40237 12.7071 8.79289L17.7071 13.7929C17.9931 14.0789 18.0787 14.509 17.9239 14.8827C17.7691 15.2564 17.4045 15.5 17 15.5H7.00003Z" fill="currentColor" />
+    </svg>
+  )
+}
+
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+</svg>
+
+export const CaretDownIcon: FunctionComponent<IconProps> = ({ size = 16 }) => {
+  return (
+    <svg className={styles['icon']} width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fillRule="evenodd" clipRule="evenodd" d="M7.00003 8.5C6.59557 8.5 6.23093 8.74364 6.07615 9.11732C5.92137 9.49099 6.00692 9.92111 6.29292 10.2071L11.2929 15.2071C11.6834 15.5976 12.3166 15.5976 12.7071 15.2071L17.7071 10.2071C17.9931 9.92111 18.0787 9.49099 17.9239 9.11732C17.7691 8.74364 17.4045 8.5 17 8.5H7.00003Z" fill="currentColor" />
+    </svg>
+  )
+}

package/src/components/ValueToggle.module.css

@@ -0,0 +1,4 @@
+.toggle {
+  font-size: 13px;
+  font-family: "SourceCodeProMac";
+}

package/src/components/ValueToggle.tsx

@@ -0,0 +1,25 @@
+import { LucideProps } from 'lucide-react'
+import { ForwardRefExoticComponent, FunctionComponent, RefAttributes } from 'react'
+import { Toggle } from './base/Toggle'
+import styles from './ValueToggle.module.css'
+
+export interface ValueToggleProps {
+  value: boolean
+  onChange: (value: boolean) => void
+  label?: string | ((value: boolean) => string)
+  icon: ForwardRefExoticComponent<Omit<LucideProps, 'ref'> & RefAttributes<SVGSVGElement>>
+}
+
+export const ValueToggle: FunctionComponent<ValueToggleProps> = ({ value, onChange, label, icon: Icon }) => {
+  const color = value ? 'var(--foreground)' : 'var(--muted-foreground)'
+  return (
+    <Toggle className={styles['toggle']} size='sm' variant='default' pressed={value ?? false} onPressedChange={onChange}>
+      <Icon size={16} color={value ? 'var(--foreground)' : 'var(--muted-foreground)'} />
+      {label && (
+        <span style={{ fontWeight: 400, color }}>
+          {(typeof label === 'string') ? label : label(value)}
+        </span>
+      )}
+    </Toggle>
+  )
+}

package/src/components/base/Button.tsx

@@ -0,0 +1,46 @@
+import { cn } from '@/lib/utils'
+import { Button as ButtonPrimitive } from '@base-ui/react/button'
+import { VariantProps, cva } from 'class-variance-authority'
+import { FunctionComponent } from 'react'
+
+const buttonVariants = cva(
+  'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*=\'size-\'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+        outline:
+          'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost:
+          'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        destructive:
+          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+        link: 'text-primary underline-offset-4 hover:underline'
+      },
+      size: {
+        'default':
+          'h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        'xs': 'h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=\'size-\'])]:size-3',
+        'sm': 'h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',
+        'lg': 'h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
+        'icon': 'size-9',
+        'icon-xs':
+          'size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*=\'size-\'])]:size-3',
+        'icon-sm': 'size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md',
+        'icon-lg': 'size-10'
+      }
+    },
+    defaultVariants: { variant: 'default', size: 'default' }
+  }
+)
+
+export const Button: FunctionComponent<ButtonPrimitive.Props & VariantProps<typeof buttonVariants>> = ({
+  className,
+  variant = 'default',
+  size = 'default',
+  ...props
+}) => {
+  return <ButtonPrimitive data-slot='button' className={cn(buttonVariants({ variant, size, className }))} {...props} />
+}

package/src/components/base/Card.tsx

@@ -0,0 +1,74 @@
+import { cn } from '@/lib/utils'
+import { ComponentProps, FunctionComponent } from 'react'
+
+export const Card: FunctionComponent<ComponentProps<'div'> & { size?: 'default' | 'sm' }> = ({
+  className,
+  size = 'default',
+  ...props
+}) => {
+  return (
+    <div
+      data-slot='card'
+      data-size={size}
+      className={cn(
+        'ring-foreground/10 bg-card text-card-foreground gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export const CardHeader: FunctionComponent<ComponentProps<'div'>> = ({ className, ...props }) => {
+  return (
+    <div
+      data-slot='card-header'
+      className={cn(
+        'gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export const CardTitle: FunctionComponent<ComponentProps<'div'>> = ({ className, ...props }) => {
+  return (
+    <div
+      data-slot='card-title'
+      className={cn('text-base leading-normal font-medium group-data-[size=sm]/card:text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export const CardDescription: FunctionComponent<ComponentProps<'div'>> = ({ className, ...props }) => {
+  return <div data-slot='card-description' className={cn('text-muted-foreground text-sm', className)} {...props} />
+}
+
+export const CardAction: FunctionComponent<ComponentProps<'div'>> = ({ className, ...props }) => {
+  return (
+    <div
+      data-slot='card-action'
+      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+      {...props}
+    />
+  )
+}
+
+export const CardContent: FunctionComponent<ComponentProps<'div'>> = ({ className, ...props }) => {
+  return <div data-slot='card-content' className={cn('px-6 group-data-[size=sm]/card:px-4', className)} {...props} />
+}
+
+export const CardFooter: FunctionComponent<ComponentProps<'div'>> = ({ className, ...props }) => {
+  return (
+    <div
+      data-slot='card-footer'
+      className={cn(
+        'rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4 flex items-center',
+        className
+      )}
+      {...props}
+    />
+  )
+}