提交组件库

Author: 王泽龙

.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+/storybook-static
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.storybook/addons.ts

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

.storybook/config.tsx

@@ -0,0 +1,30 @@
+import { configure, addDecorator, addParameters } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info'
+import React from 'react'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+import "../src/styles/index.scss"
+library.add(fas)
+const wrapperStyle: React.CSSProperties = {
+  padding: '20px 40px'
+}
+
+const storyWrapper = (stroyFn: any) => (
+  <div style={wrapperStyle}>
+    <h3>组件演示呀</h3>
+    {stroyFn()}
+  </div>
+)
+addDecorator(storyWrapper)
+addDecorator(withInfo)
+addParameters({info: { inline: true, header: false}})
+const loaderFn = () => {
+  const allExports = [require('../src/welcome.stories.tsx')];
+  const req = require.context('../src/components', true, /\.stories\.tsx$/);
+  req.keys().forEach(fname => allExports.push(req(fname)));
+  return allExports;
+};
+
+
+// automatically import all files ending in *.stories.js
+configure(loaderFn, module);

.storybook/webpack.config.js

@@ -0,0 +1,29 @@
+module.exports = ({ config }) => {
+  config.module.rules.push({
+    test: /\.tsx?$/,
+    use: [
+      {
+        loader: require.resolve("babel-loader"),
+        options: {
+          presets: [require.resolve("babel-preset-react-app")]
+        }
+      }, 
+      {
+        loader: require.resolve("react-docgen-typescript-loader"),
+        options: {
+          shouldExtractLiteralValuesFromEnum: true,
+          propFilter: (prop) => {
+            if (prop.parent) {
+              return !prop.parent.fileName.includes('node_modules')
+            }
+            return true            
+          }
+        }
+      }
+    ]
+  });
+
+  config.resolve.extensions.push(".ts", ".tsx");
+
+  return config;
+};

.travis.yml

@@ -0,0 +1,19 @@
+language: node_js
+node_js:
+  - "stable"
+cache:
+  directories:
+  - node_modules
+env:
+  - CI=true
+script:
+  - npm run build-storybook
+deploy:
+  provider: pages
+  skip_cleanup: true
+  github_token: $github_token
+  local_dir: storybook-static
+  on:
+    branch: master
+  
+  

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    { "language": "typescript", "autoFix": true },
+    { "language": "typescriptreact", "autoFix": true }
+  ]
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Viking Zhang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,51 @@
+## Vikingship component library
+## 使用 React+typescript 从零到一打造一套你自己的组件库
+
+[![Build Status](https://travis-ci.com/vikingmute/vikingship.svg?token=mHoDqxyxXWX5BSpu8L9y&branch=master)](https://travis-ci.com/vikingmute/vikingship)
+
+vikingship 是为慕课网打造的一套教学组件库，使用 React Hooks 和 typescript
+意在让大家从零到一，由浅入深的提高自己的 React 和 typescript 水平，它的官网地址是
+[vikingship.xyz](http://vikingship.xyz)
+
+
+### 安装最后已经发布的组件库来试试
+
+~~~javascript
+npm install vikingship --save
+~~~
+
+### 使用
+
+~~~javascript
+// 加载样式
+import 'vikingship/dist/index.css'
+// 引入组件
+import { Button } from 'vikingship'
+~~~
+
+### 课程亮点
+
+* 🔥typescript with React Hooks
+* 💧渐进式的教学过程，很多章后面都有扩展作业，引导同学们深入学习和掌握知识
+* ⛑️使用 react-testing-library 完成单元测试
+* 📚使用 storybook 本地调试和生成文档页面
+* 📚使用 react-doc-gen 自动生成文档
+* 📦使用第三方库扩充组件-(react-fontawesome, react-transition-group)
+* 🌹样式（Sass）文件从零开始，掌握大型应用的 CSS 组织方法
+* 🎉涉及全部流程，包括最后的 npm publish，husky提交发布前验证，travis CI/CD 集成，发布文档站点等
+
+### 一些本地开发命令
+
+~~~bash
+//启动本地环境
+npm run stroybook
+
+//跑单元测试
+npm test
+
+//build可发布静态文件
+npm run build
+
+//发布到 npm
+npm run publish
+~~~

jest.test.js

@@ -0,0 +1,18 @@
+test('test common matcher', () => {
+  expect( 2 + 2 ).toBe(4)
+  expect(2 + 2).not.toBe(5)
+})
+
+test('test to be true or false', () => {
+  expect(1).toBeTruthy()
+  expect(0).toBeFalsy()
+})
+
+test('test number', () => {
+  expect(4).toBeGreaterThan(3)
+  expect(2).toBeLessThan(3)
+})
+
+test('test object', () => {
+  expect({name: 'viking'}).toEqual({name: 'viking'})
+})