feat(i18n): complete i18n component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bigbear-ui",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Neumorphic component library for React;基于React制作的拟物风格组件库",
   "keywords": [
     "component",

plop-template/componentStories.hbs

@@ -1,7 +1,7 @@
 import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
 import  {{name}}  from './{{lowerCase name}}';
 
-<Meta title='DISPLAY |{{name}} ' component={{{name}}}/>
+<Meta title='DISPLAY |{{name}} ' component={ {{name}}}/>
 
 <br/>
 
@@ -21,4 +21,4 @@ import  {{name}}  from './{{lowerCase name}}';
 
 ## 属性详情
 
-<Props of={{{name}}}/>
+<Props of={ {{name}} }/>

src/components/I18n/_style.scss

@@ -0,0 +1 @@
+_

src/components/I18n/i18n.example.tsx

@@ -0,0 +1,49 @@
+import React, { useContext } from "react";
+import I18n, { Context } from "./i18n";
+import Button from "../Button";
+import Badge from "../Badge";
+
+const zh = {
+	language: "语言",
+	apple: "苹果"
+};
+const en = {
+	language: "english language",
+	apple: "english apple"
+};
+const combinedLibrary = {
+	zh,
+	en
+};
+export default function I18nExampleApp() {
+	return (
+		<I18n defaultLang={"zh"} library={combinedLibrary}>
+			<Child></Child>
+		</I18n>
+	);
+}
+function Child() {
+	let { state, toggle } = useContext(Context);
+	return (
+		<div>
+			<Badge count={state.language}></Badge>
+			<Badge count={state.apple}></Badge>
+			<div>
+				<Button
+					onClick={() => {
+						toggle("zh");
+					}}
+				>
+					切换中文
+				</Button>
+			</div>
+			<Button
+				onClick={() => {
+					toggle("en");
+				}}
+			>
+				切换英文
+			</Button>
+		</div>
+	);
+}

src/components/I18n/i18n.stories.mdx

@@ -0,0 +1,85 @@
+import { Meta, Story, Props ,Preview } from '@storybook/addon-docs/blocks';
+import  I18n  from './i18n';
+import  I18nExampleApp from './i18n.example'
+
+<Meta title='REACTION |I18n 国际化' component={I18n} />
+
+<br/>
+
+# I18n 国际化
+<br/>
+
+## 基本使用
+
+传入默认语言和library即可。
+把组件放在根节点上。
+需要使用国际化地方直接useContext即可。
+类组件使用Context.Consumer拿到Context上的state。
+
+默认名需要等于combinedLibrary的key名。
+进行切换时，传入的也是combinedLibrary的键名。
+
+
+
+
+
+```jsx
+const zh = {
+	language: "语言",
+	apple: "苹果"
+};
+const en = {
+	language: "english language",
+	apple: "english apple"
+};
+const combinedLibrary = {
+	zh,
+	en
+};
+export default function I18nExampleApp() {
+	return (
+		<I18n defaultLang={"zh"} library={combinedLibrary}>
+			<Child></Child>
+		</I18n>
+	);
+}
+function Child() {
+	let { state, toggle } = useContext(Context);
+	return (
+		<div>
+			<Badge count={state.language}></Badge>
+			<Badge count={state.apple}></Badge>
+			<div>
+				<Button
+					onClick={() => {
+						toggle("zh");
+					}}
+				>
+					切换中文
+				</Button>
+			</div>
+			<Button
+				onClick={() => {
+					toggle("en");
+				}}
+			>
+				切换英文
+			</Button>
+		</div>
+	);
+}
+```
+
+
+<Preview>
+    <Story name='default'>
+        <I18nExampleApp ></I18nExampleApp>
+    </Story>
+</Preview>
+
+
+
+
+## 属性详情
+
+<Props of={I18n}/>

src/components/I18n/i18n.tsx

@@ -0,0 +1,38 @@
+import React, { PropsWithChildren, useState, useMemo } from "react";
+
+export interface I18nDataSource {
+	[key: string]: string;
+}
+
+export interface I18nCombinedSource {
+	[key: string]: I18nDataSource;
+}
+
+export interface contextType {
+	state: I18nDataSource;
+	toggle: (str: string) => void;
+}
+
+export let Context = React.createContext<contextType>({ state: {}, toggle: () => {} });
+
+export interface I18nProps {
+	/** 默认语言*/
+	defaultLang: keyof I18nDataSource;
+	/** 语言库 */
+	library: I18nCombinedSource;
+}
+
+function I18n(props: PropsWithChildren<I18nProps>) {
+	const { defaultLang, library, children } = props;
+	const [state, setState] = useState<I18nDataSource>(library[defaultLang] || {});
+	let toggle = useMemo(() => {
+		return function(str: keyof I18nDataSource) {
+			if (library[str]) {
+				setState(library[str]);
+			}
+		};
+	}, [library]);
+	return <Context.Provider value={{ state, toggle }}>{children}</Context.Provider>;
+}
+
+export default I18n;

src/components/I18n/index.tsx

@@ -0,0 +1,3 @@
+import I18n from "./i18n";
+
+export default I18n;