feat(console): i18n support for zh (#2056)

* ui: i18n & font

* update: use baseui LocaleProvider

* update: add language selector

* update: use useTranslation temporarily in packages

* update: visitor selector ui

* fix: lint error

console/packages/starwhale-core/src/form/WidgetFormModal.tsx

@@ -9,6 +9,7 @@ import { StoreType, useEditorContext } from '../context/EditorContextProvider'
 import { useDatastoreTablesByPrefix } from '../datastore/hooks/useDatastoreTables'
 import WidgetFormModel from './WidgetFormModel'
 import WidgetModel from '../widget/WidgetModel'
+import useTranslation from '@/hooks/useTranslation'
 
 const PAGE_TABLE_SIZE = 100
 
@@ -27,6 +28,7 @@ export default function WidgetFormModal({
     handleFormSubmit: (args: any) => void
     id?: string
 }) {
+    const [t] = useTranslation()
     // @FIXME use event bus handle global state
     const { dynamicVars } = useEditorContext()
     const { prefix } = dynamicVars
@@ -84,7 +86,7 @@ export default function WidgetFormModal({
                 },
             }}
         >
-            <ModalHeader>Add Chart</ModalHeader>
+            <ModalHeader>{t('panel.chart.add')}</ModalHeader>
             <ModalBody style={{ display: 'flex', gap: '30px', flex: 1, overflow: 'auto' }}>
                 <div
                     style={{
@@ -100,7 +102,7 @@ export default function WidgetFormModal({
                         position: 'relative',
                     }}
                 >
-                    {!type && 'Select a metric to visalize in this chart'}
+                    {!type && t('panel.add.placeholder')}
                     {type && (
                         <div
                             style={{

console/packages/starwhale-core/src/form/schemas/fields.ts

@@ -1,6 +1,7 @@
 import { RJSFSchema } from '@rjsf/utils'
 import { ColumnSchemaDesc } from '@starwhale/core/datastore'
 import { WidgetFactory } from '@starwhale/core/widget'
+import i18n from '@/i18n'
 
 export const UI_DATA_KEY = 'ui:data'
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -15,7 +16,7 @@ export const chartTypeField = (): RJSFSchema | undefined => {
     return {
         chartType: {
             type: 'string',
-            title: 'Chart Type',
+            title: i18n.t('panel.chart.type'),
             oneOf:
                 WidgetFactory.getPanels().map((v) => ({
                     const: v.type,
@@ -33,7 +34,7 @@ export const tableNameField = (tables: any, schema?: RJSFSchema): RJSFSchema | u
         return {
             tableName: {
                 type: 'array',
-                title: 'Table Name',
+                title: i18n.t('panel.chart.table.name'),
                 uniqueItems: true,
                 items: {
                     type: 'string',
@@ -49,7 +50,7 @@ export const tableNameField = (tables: any, schema?: RJSFSchema): RJSFSchema | u
     return {
         tableName: {
             type: 'string',
-            title: 'Table Name',
+            title: i18n.t('panel.chart.table.name'),
             oneOf:
                 tables.map((v: any) => ({
                     const: v.name,
@@ -61,7 +62,7 @@ export const tableNameField = (tables: any, schema?: RJSFSchema): RJSFSchema | u
 
 export const chartTitleField = (): RJSFSchema | undefined => ({
     chartTitle: {
-        title: 'Chart Title',
+        title: i18n.t('panel.chart.title'),
         type: 'string',
     },
 })

console/packages/starwhale-core/src/widget/WidgetRenderTree.tsx

@@ -13,6 +13,7 @@ import WidgetFormModal from '../form/WidgetFormModal'
 import WidgetPreviewModal from '../form/WidgetPreviewModal'
 import useRestoreState from './hooks/useRestoreState'
 import shallow from 'zustand/shallow'
+import useTranslation from '@/hooks/useTranslation'
 
 export const WrapedWidgetNode = withWidgetDynamicProps(function WidgetNode(props: WidgetProps) {
     const { childWidgets, path = [] } = props
@@ -51,7 +52,13 @@ export function WidgetRenderTree({ initialState, onStateChange }: any) {
     const [isPanelModalOpen, setIsPanelModalOpen] = React.useState(false)
     const [viewWidget, setViewWidget] = useState<PanelPreviewEvent>()
     const [isPanelPreviewModalOpen, setIsPanelPreviewModalOpen] = React.useState(false)
-    const form = useRef(new WidgetFormModel().initPanelSchema())
+    const form = useRef(new WidgetFormModel())
+
+    // @FIXME useTranslation
+    const [t] = useTranslation()
+    useEffect(() => {
+        form.current.initPanelSchema()
+    }, [t])
 
     const { toSave } = useRestoreState(store, initialState, dynamicVars)
 

console/packages/starwhale-ui/src/DynamicSelector/Selector.tsx

@@ -13,6 +13,7 @@ import {
 } from './StyledComponent'
 import Tree from '../Tree/Tree'
 import { KEY_STRINGS } from 'baseui/menu'
+import useTranslation from '@/hooks/useTranslation'
 
 // @ts-ignore
 const containsNode = (parent, child) => {
@@ -37,10 +38,11 @@ export function DynamicSelector<T = any>({
     onChange,
     startEnhancer,
     endEnhancer = defaultEndEnhancer(),
-    placeholder = 'Select Item',
     options = [],
     ...rest
 }: DynamicSelectorPropsT<T>) {
+    const [t] = useTranslation()
+    const placeholder = rest.placeholder ?? t('selector.placeholder')
     const ref = useRef<HTMLDivElement>(null)
     const [isEditing, setIsEditing] = useState(false)
     const [values, setValues] = useState<SelectorItemValueT[]>(rest.value ?? [])

console/packages/starwhale-ui/src/IconFont/fonts/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3410006 */
-  src: url('iconfont.woff2?t=1680087448712') format('woff2'),
-       url('iconfont.woff?t=1680087448712') format('woff'),
-       url('iconfont.ttf?t=1680087448712') format('truetype');
+  src: url('iconfont.woff2?t=1680769284437') format('woff2'),
+       url('iconfont.woff?t=1680769284437') format('woff'),
+       url('iconfont.ttf?t=1680769284437') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-global:before {
+  content: "\e65f";
+}
+
 .icon-library:before {
   content: "\e65e";
 }

console/packages/starwhale-ui/src/IconFont/fonts/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "34901738",
+      "name": "global",
+      "font_class": "global",
+      "unicode": "e65f",
+      "unicode_decimal": 58975
+    },
     {
       "icon_id": "34824376",
       "name": "library",

console/packages/starwhale-ui/src/IconFont/index.tsx

@@ -91,6 +91,7 @@ export type IconTypesT =
     | 'invalidFile'
     | 'group'
     | 'library'
+    | 'global'
 
 interface IIconFontProps {
     style?: React.CSSProperties

console/packages/starwhale-ui/src/Modal/confirm.tsx

@@ -4,6 +4,7 @@ import { Button, IButtonProps } from '../Button'
 import IconFont from '../IconFont'
 import { expandMargin, expandPadding } from '../utils'
 import { LabelMedium } from 'baseui/typography'
+import useTranslation from '@/hooks/useTranslation'
 
 export interface IConfirmCtxProviderProps {
     children?: React.ReactNode
@@ -25,6 +26,7 @@ const ConfirmCtx = React.createContext<IConfirmCtxProps>({
 })
 
 const ConfirmCtxProvider = ({ children }: IConfirmCtxProviderProps) => {
+    const [t] = useTranslation()
     const [showModal, setShowModal] = useState(false)
     const [showProps, setShowProps] = useState<IShowProps>({})
     const resolver: React.MutableRefObject<(ok: boolean) => void> = useRef(() => {})
@@ -107,7 +109,7 @@ const ConfirmCtxProvider = ({ children }: IConfirmCtxProviderProps) => {
                                 setShowModal(false)
                             }}
                         >
-                            No
+                            {t('remove.no')}
                         </Button>
                         <Button
                             size='default'
@@ -117,7 +119,7 @@ const ConfirmCtxProvider = ({ children }: IConfirmCtxProviderProps) => {
                                 setShowModal(false)
                             }}
                         >
-                            Yes
+                            {t('remove.yes')}
                         </Button>
                     </div>
                 </ModalFooter>

console/packages/starwhale-ui/src/Search/Search.tsx

@@ -7,6 +7,7 @@ import FilterRenderer from './FilterRenderer'
 import { ValueT } from './types'
 import IconFont from '../IconFont'
 import { LabelSmall } from 'baseui/typography'
+import useTranslation from '@/hooks/useTranslation'
 
 export const useStyles = createUseStyles({
     searchBar: {
@@ -69,6 +70,7 @@ export interface ISearchProps {
 
 export default function Search({ value = [], onChange, ...props }: ISearchProps) {
     const styles = useStyles()
+    const [t] = useTranslation()
     const ref = useRef<HTMLDivElement>(null)
     const [isEditing, setIsEditing] = useState(false)
     const [items, setItems] = useState<ValueT[]>(value)
@@ -174,7 +176,7 @@ export default function Search({ value = [], onChange, ...props }: ISearchProps)
             <div className={styles.placeholder}>
                 {!isEditing && items.length === 0 && (
                     <LabelSmall $style={{ color: 'rgba(2,16,43,0.40)', position: 'absolute' }}>
-                        Search and Filter
+                        {t('table.search.placeholder')}
                     </LabelSmall>
                 )}
             </div>

console/packages/starwhale-ui/src/Select/Select.tsx

@@ -2,6 +2,7 @@ import { Select as BaseSelect, SelectProps, SIZE } from 'baseui/select'
 import React from 'react'
 import IconFont from '../IconFont'
 import { mergeOverrides } from '../utils'
+import useTranslation from '@/hooks/useTranslation'
 
 export { SIZE } from 'baseui/select'
 
@@ -11,6 +12,7 @@ export interface ISelectProps extends SelectProps {
 }
 
 export function Select({ size = 'compact', ...props }: ISelectProps) {
+    const [t] = useTranslation()
     const overrides = mergeOverrides(
         {
             ControlContainer: {
@@ -47,6 +49,9 @@ export function Select({ size = 'compact', ...props }: ISelectProps) {
         props.overrides
     )
 
+    // eslint-disable-next-line no-param-reassign
+    props.placeholder ??= t('selector.placeholder')
+
     // eslint-disable-next-line  react/jsx-props-no-spreading
     return <BaseSelect size={size} {...props} overrides={overrides} />
 }

console/packages/starwhale-ui/src/Transfer/Transfer.tsx

@@ -8,6 +8,7 @@ import Input from '../Input'
 import TransferList from './TransferList'
 import useUnSortedSelection from '../utils/useUnsortedSelection'
 import { BusyPlaceholder } from '../BusyLoaderWrapper'
+import useTranslation from '@/hooks/useTranslation'
 
 const useStyles = createUseStyles({
     transfer: {
@@ -110,6 +111,7 @@ export default function Transfer({
     value = defaultValue,
     onChange = () => {},
 }: TransferPropsT) {
+    const [t] = useTranslation()
     const styles = useStyles()
     const [css, theme] = useStyletron()
     const [query, setQuery] = React.useState('')
@@ -202,7 +204,11 @@ export default function Transfer({
                 </div>
             )}
             <div className='list'>
-                <TransferList columns={$leftFilteredColumns} operators={leftOperators} title='Invisible Columns' />
+                <TransferList
+                    columns={$leftFilteredColumns}
+                    operators={leftOperators}
+                    title={t('table.column.invisible')}
+                />
                 <div className='transfer-list-toolbar'>
                     <Button
                         disabled={leftOperators?.selectedIds?.length === 0}
@@ -232,7 +238,7 @@ export default function Transfer({
                     </Button>
                 </div>
                 <TransferList
-                    title='Visible Columns'
+                    title={t('table.column.visible')}
                     emptyMessage={() => <BusyPlaceholder type='empty' style={{ minHeight: '0' }} />}
                     columns={$rightFilteredColumns}
                     isDragable={isDragable}

console/packages/starwhale-ui/src/base/data-table/cells/cell-placement.tsx

@@ -64,7 +64,7 @@ function CellPlacement({ columnIndex, rowIndex, data, style }: any) {
                 rowIndex === data.rowHighlightIndex ? 'table-row--hovering' : undefined,
 
                 css({
-                    ...theme.borders.border200,
+                    // ...theme.borders.border200,
                     borderTop: 'none',
                     borderBottom: 'none',
                     borderRight: 'none',

console/packages/starwhale-ui/src/base/data-table/column-boolean.tsx

@@ -8,7 +8,7 @@ import { CategoricalFilter } from './column-categorical'
 import Column from './column'
 import { COLUMNS } from './constants'
 import { ColumnT, FilterTypes, SharedColumnOptionsT } from './types'
-import { LocaleContext } from './locales'
+import { LocaleContext } from 'baseui/locale'
 
 type OptionsT = SharedColumnOptionsT<boolean>
 

console/packages/starwhale-ui/src/base/data-table/column-categorical-tags.tsx

@@ -13,12 +13,13 @@ import { LabelSmall } from 'baseui/typography'
 import Column from './column'
 import { COLUMNS } from './constants'
 import type { ColumnT, SharedColumnOptionsT } from './types'
-import { LocaleContext } from './locales'
+import { LocaleContext } from 'baseui/locale'
 import FilterShell from './filter-shell'
 import { matchesQuery, splitByQuery } from './text-search'
 import { Tag, KIND as TAG_KIND, VARIANT as TAG_VARIANT } from 'baseui/tag'
 import { Popover, PLACEMENT } from 'baseui/popover'
 import IconFont from '../../IconFont'
+import { DataTableLocaleT } from './locale'
 
 type OptionsT = SharedColumnOptionsT<string>
 
@@ -261,7 +262,8 @@ type CategoricalEditPopoverProps = {
 
 export function CategoricalEditPopover(props: CategoricalEditPopoverProps) {
     const [css, theme] = useStyletron()
-    const locale = React.useContext(LocaleContext)
+    //@ts-ignore
+    const locale: { datatable: DataTableLocaleT } = React.useContext(LocaleContext)
     const inputRef = React.useRef(null)
     React.useEffect(() => {
         if (inputRef.current) {

console/packages/starwhale-ui/src/base/data-table/column-categorical.tsx

@@ -13,7 +13,7 @@ import { LabelSmall } from 'baseui/typography'
 import Column from './column'
 import { COLUMNS } from './constants'
 import type { ColumnT, SharedColumnOptionsT } from './types'
-import { LocaleContext } from './locales'
+import { LocaleContext } from 'baseui/locale'
 import FilterShell from './filter-shell'
 import { matchesQuery, splitByQuery, HighlightCellText } from './text-search'
 

console/packages/starwhale-ui/src/base/data-table/column-datetime.tsx

@@ -35,7 +35,7 @@ import Column from './column'
 import { COLUMNS, DATETIME_OPERATIONS } from './constants'
 import FilterShell from './filter-shell'
 import type { ColumnT, SharedColumnOptionsT } from './types'
-import { LocaleContext } from './locales'
+import { LocaleContext } from 'baseui/locale'
 
 type OptionsT = {
     formatString?: string

console/packages/starwhale-ui/src/base/data-table/column-numerical.tsx

@@ -11,7 +11,7 @@ import Column from './column'
 import { COLUMNS, NUMERICAL_FORMATS, MAX_BIN_COUNT, HISTOGRAM_SIZE } from './constants'
 import FilterShell, { type ExcludeKind } from './filter-shell'
 import { ColumnT, FilterTypes, SharedColumnOptionsT } from './types'
-import { LocaleContext } from './locales'
+import { LocaleContext } from 'baseui/locale'
 // @ts-ignore
 import { bin, max as maxFunc, extent, scaleLinear, median, bisector } from 'd3'
 import { Slider } from 'baseui/slider'