diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..7dd5e9d --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-react"] +} diff --git a/.gitignore b/.gitignore index 131f5f2..a3d3036 100644 --- a/.gitignore +++ b/.gitignore @@ -8,7 +8,6 @@ /package-lock.json # production -/dist /docs-dist # misc diff --git a/.prettierrc b/.prettierrc index 94beb14..84d393d 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,11 +1,14 @@ { "singleQuote": true, "trailingComma": "all", - "printWidth": 80, + "printWidth": 100, + "proseWrap": "never", "overrides": [ { "files": ".prettierrc", - "options": { "parser": "json" } + "options": { + "parser": "json" + } } ] } diff --git a/dist/bici-design.js b/dist/bici-design.js new file mode 100644 index 0000000..94a2fc6 --- /dev/null +++ b/dist/bici-design.js @@ -0,0 +1,337 @@ +!(function(e, t) { + 'object' == typeof exports && 'object' == typeof module + ? (module.exports = t(require('react'), require('prop-types'))) + : 'function' == typeof define && define.amd + ? define(['react', 'prop-types'], t) + : 'object' == typeof exports + ? (exports.BiciDesign = t(require('react'), require('prop-types'))) + : (e.BiciDesign = t(e.react, e['prop-types'])); +})(window, function(e, t) { + return (function(e) { + var t = {}; + function n(r) { + if (t[r]) return t[r].exports; + var o = (t[r] = { i: r, l: !1, exports: {} }); + return e[r].call(o.exports, o, o.exports, n), (o.l = !0), o.exports; + } + return ( + (n.m = e), + (n.c = t), + (n.d = function(e, t, r) { + n.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r }); + }), + (n.r = function(e) { + 'undefined' != typeof Symbol && + Symbol.toStringTag && + Object.defineProperty(e, Symbol.toStringTag, { value: 'Module' }), + Object.defineProperty(e, '__esModule', { value: !0 }); + }), + (n.t = function(e, t) { + if ((1 & t && (e = n(e)), 8 & t)) return e; + if (4 & t && 'object' == typeof e && e && e.__esModule) return e; + var r = Object.create(null); + if ( + (n.r(r), + Object.defineProperty(r, 'default', { enumerable: !0, value: e }), + 2 & t && 'string' != typeof e) + ) + for (var o in e) + n.d( + r, + o, + function(t) { + return e[t]; + }.bind(null, o), + ); + return r; + }), + (n.n = function(e) { + var t = + e && e.__esModule + ? function() { + return e.default; + } + : function() { + return e; + }; + return n.d(t, 'a', t), t; + }), + (n.o = function(e, t) { + return Object.prototype.hasOwnProperty.call(e, t); + }), + (n.p = ''), + n((n.s = 9)) + ); + })([ + function(e, t, n) { + 'use strict'; + e.exports = function(e) { + var t = []; + return ( + (t.toString = function() { + return this.map(function(t) { + var n = (function(e, t) { + var n = e[1] || '', + r = e[3]; + if (!r) return n; + if (t && 'function' == typeof btoa) { + var o = + ((a = r), + (c = btoa(unescape(encodeURIComponent(JSON.stringify(a))))), + (u = 'sourceMappingURL=data:application/json;charset=utf-8;base64,'.concat( + c, + )), + '/*# '.concat(u, ' */')), + i = r.sources.map(function(e) { + return '/*# sourceURL='.concat(r.sourceRoot || '').concat(e, ' */'); + }); + return [n] + .concat(i) + .concat([o]) + .join('\n'); + } + var a, c, u; + return [n].join('\n'); + })(t, e); + return t[2] ? '@media '.concat(t[2], ' {').concat(n, '}') : n; + }).join(''); + }), + (t.i = function(e, n, r) { + 'string' == typeof e && (e = [[null, e, '']]); + var o = {}; + if (r) + for (var i = 0; i < this.length; i++) { + var a = this[i][0]; + null != a && (o[a] = !0); + } + for (var c = 0; c < e.length; c++) { + var u = [].concat(e[c]); + (r && o[u[0]]) || + (n && (u[2] ? (u[2] = ''.concat(n, ' and ').concat(u[2])) : (u[2] = n)), t.push(u)); + } + }), + t + ); + }; + }, + function(t, n) { + t.exports = e; + }, + function(e, t, n) { + 'use strict'; + var r, + o = function() { + return ( + void 0 === r && (r = Boolean(window && document && document.all && !window.atob)), r + ); + }, + i = (function() { + var e = {}; + return function(t) { + if (void 0 === e[t]) { + var n = document.querySelector(t); + if (window.HTMLIFrameElement && n instanceof window.HTMLIFrameElement) + try { + n = n.contentDocument.head; + } catch (e) { + n = null; + } + e[t] = n; + } + return e[t]; + }; + })(), + a = []; + function c(e) { + for (var t = -1, n = 0; n < a.length; n++) + if (a[n].identifier === e) { + t = n; + break; + } + return t; + } + function u(e, t) { + for (var n = {}, r = [], o = 0; o < e.length; o++) { + var i = e[o], + u = t.base ? i[0] + t.base : i[0], + s = n[u] || 0, + f = ''.concat(u, ' ').concat(s); + n[u] = s + 1; + var l = c(f), + p = { css: i[1], media: i[2], sourceMap: i[3] }; + -1 !== l + ? (a[l].references++, a[l].updater(p)) + : a.push({ identifier: f, updater: m(p, t), references: 1 }), + r.push(f); + } + return r; + } + function s(e) { + var t = document.createElement('style'), + r = e.attributes || {}; + if (void 0 === r.nonce) { + var o = n.nc; + o && (r.nonce = o); + } + if ( + (Object.keys(r).forEach(function(e) { + t.setAttribute(e, r[e]); + }), + 'function' == typeof e.insert) + ) + e.insert(t); + else { + var a = i(e.insert || 'head'); + if (!a) + throw new Error( + "Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.", + ); + a.appendChild(t); + } + return t; + } + var f, + l = + ((f = []), + function(e, t) { + return (f[e] = t), f.filter(Boolean).join('\n'); + }); + function p(e, t, n, r) { + var o = n ? '' : r.media ? '@media '.concat(r.media, ' {').concat(r.css, '}') : r.css; + if (e.styleSheet) e.styleSheet.cssText = l(t, o); + else { + var i = document.createTextNode(o), + a = e.childNodes; + a[t] && e.removeChild(a[t]), a.length ? e.insertBefore(i, a[t]) : e.appendChild(i); + } + } + function d(e, t, n) { + var r = n.css, + o = n.media, + i = n.sourceMap; + if ( + (o ? e.setAttribute('media', o) : e.removeAttribute('media'), + i && + btoa && + (r += '\n/*# sourceMappingURL=data:application/json;base64,'.concat( + btoa(unescape(encodeURIComponent(JSON.stringify(i)))), + ' */', + )), + e.styleSheet) + ) + e.styleSheet.cssText = r; + else { + for (; e.firstChild; ) e.removeChild(e.firstChild); + e.appendChild(document.createTextNode(r)); + } + } + var v = null, + h = 0; + function m(e, t) { + var n, r, o; + if (t.singleton) { + var i = h++; + (n = v || (v = s(t))), (r = p.bind(null, n, i, !1)), (o = p.bind(null, n, i, !0)); + } else + (n = s(t)), + (r = d.bind(null, n, t)), + (o = function() { + !(function(e) { + if (null === e.parentNode) return !1; + e.parentNode.removeChild(e); + })(n); + }); + return ( + r(e), + function(t) { + if (t) { + if (t.css === e.css && t.media === e.media && t.sourceMap === e.sourceMap) return; + r((e = t)); + } else o(); + } + ); + } + e.exports = function(e, t) { + (t = t || {}).singleton || 'boolean' == typeof t.singleton || (t.singleton = o()); + var n = u((e = e || []), t); + return function(e) { + if (((e = e || []), '[object Array]' === Object.prototype.toString.call(e))) { + for (var r = 0; r < n.length; r++) { + var o = c(n[r]); + a[o].references--; + } + for (var i = u(e, t), s = 0; s < n.length; s++) { + var f = c(n[s]); + 0 === a[f].references && (a[f].updater(), a.splice(f, 1)); + } + n = i; + } + }; + }; + }, + function(e, t, n) { + 'use strict'; + var r = n(0), + o = n.n(r)()(!1); + o.push([ + e.i, + '.ellipse {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n', + '', + ]), + (t.a = o); + }, + function(e, t, n) { + var r = n(2), + o = n(5); + 'string' == typeof (o = o.__esModule ? o.default : o) && (o = [[e.i, o, '']]); + var i = { insert: 'head', singleton: !1 }; + r(o, i); + e.exports = o.locals || {}; + }, + function(e, t, n) { + 'use strict'; + n.r(t); + var r = n(0), + o = n.n(r), + i = n(3), + a = o()(!1); + a.i(i.a), a.push([e.i, '\n', '']), (t.default = a); + }, + function(e, n) { + e.exports = t; + }, + function(e, t, n) { + var r = n(2), + o = n(8); + 'string' == typeof (o = o.__esModule ? o.default : o) && (o = [[e.i, o, '']]); + var i = { insert: 'head', singleton: !1 }; + r(o, i); + e.exports = o.locals || {}; + }, + function(e, t, n) { + 'use strict'; + n.r(t); + var r = n(0), + o = n.n(r)()(!1); + o.push([e.i, '._3VS0ivCd6lBTB6vRAQv1jn {\n font-size: 14px;\n}\n', '']), + (o.locals = { icon: '_3VS0ivCd6lBTB6vRAQv1jn' }), + (t.default = o); + }, + function(e, t, n) { + 'use strict'; + n.r(t), + n.d(t, 'BiciEmpty', function() { + return a; + }); + n(4); + var r = n(1), + o = n.n(r); + n(6), n(7); + function i(e) { + return o.a.createElement(o.a.Fragment, null); + } + (i.defaultProps = {}), (i.propTypes = {}); + var a = i; + }, + ]); +}); diff --git a/package.json b/package.json index 49162f0..5debe7c 100644 --- a/package.json +++ b/package.json @@ -1,21 +1,24 @@ { - "private": true, + "private": false, "name": "bici-design", "version": "1.0.0", "scripts": { "start": "dumi dev", "docs:build": "dumi build", "docs:deploy": "gh-pages -d docs-dist", - "build": "father-build", + "build": "webpack", "deploy": "npm run docs:build && npm run docs:deploy", - "release": "npm run build && npm publish", - "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"", - "test": "umi-test", - "test:coverage": "umi-test --coverage" + "publish": "npm run build && npm publish", + "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"" }, - "main": "dist/index.js", - "module": "dist/index.esm.js", - "typings": "dist/index.d.ts", + "main": "dist/bici-design.js", + "module": "dist/bici-design.esm.js", + "browserslist": [ + "last 2 versions", + "Firefox ESR", + "> 1%", + "ie >= 11" + ], "gitHooks": { "pre-commit": "lint-staged" }, @@ -27,17 +30,31 @@ "prettier --parser=typescript --write" ] }, - "dependencies": { - "react": "^16.12.0" - }, + "dependencies": {}, "devDependencies": { + "@babel/core": "^7.11.5", + "@babel/preset-react": "^7.10.4", "@umijs/preset-react": "1.x", "@umijs/test": "^3.0.5", + "babel-loader": "^8.1.0", + "css-loader": "^4.2.2", + "dayjs": "^1.8.34", "dumi": "^1.0.8", "father-build": "^1.17.2", "gh-pages": "^3.0.0", "lint-staged": "^10.0.7", + "lodash": "^4.17.20", "prettier": "^1.19.1", + "style-loader": "^1.2.1", + "webpack": "^4.44.1", + "webpack-cli": "^3.3.12", "yorkie": "^2.0.0" + }, + "peerDependencies": { + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + }, + "publishConfig": { + "registry": "https://registry.npmjs.org/" } } diff --git a/src/Foo/index.md b/src/Foo/index.md deleted file mode 100644 index bf3353c..0000000 --- a/src/Foo/index.md +++ /dev/null @@ -1,12 +0,0 @@ -## Foo - -Demo: - -```tsx -import React from 'react'; -import { Foo } from 'bici-design'; - -export default () => ; -``` - -More skills for writing demo: https://d.umijs.org/guide/demo-principle diff --git a/src/Foo/index.tsx b/src/Foo/index.tsx deleted file mode 100644 index 80e9894..0000000 --- a/src/Foo/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import React from 'react'; - -export default ({ title }: { title: string }) =>

{title}

; diff --git a/src/assets/css/index.css b/src/assets/css/index.css new file mode 100644 index 0000000..9d2d7e6 --- /dev/null +++ b/src/assets/css/index.css @@ -0,0 +1 @@ +@import './property.css'; diff --git a/src/assets/css/property.css b/src/assets/css/property.css new file mode 100644 index 0000000..851a54a --- /dev/null +++ b/src/assets/css/property.css @@ -0,0 +1,5 @@ +.ellipse { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/src/components/BiciEmpty/BiciEmpty.module.css b/src/components/BiciEmpty/BiciEmpty.module.css new file mode 100644 index 0000000..c1f2ee7 --- /dev/null +++ b/src/components/BiciEmpty/BiciEmpty.module.css @@ -0,0 +1,3 @@ +.icon { + font-size: 14px; +} diff --git a/src/components/BiciEmpty/index.js b/src/components/BiciEmpty/index.js new file mode 100644 index 0000000..9321874 --- /dev/null +++ b/src/components/BiciEmpty/index.js @@ -0,0 +1,17 @@ +/** + * @File: Empty state placeholder, + * when there is no data provided, display for friendly tips. + */ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './BiciEmpty.module.css'; + +export function BiciEmpty(props) { + return <>; +} + +BiciEmpty.defaultProps = {}; + +BiciEmpty.propTypes = {}; + +export default BiciEmpty; diff --git a/src/components/BiciWebSocket/index.js b/src/components/BiciWebSocket/index.js new file mode 100644 index 0000000..8e02594 --- /dev/null +++ b/src/components/BiciWebSocket/index.js @@ -0,0 +1,3 @@ +/** + * @File: BiciWebSocket + */ diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..bd7925f --- /dev/null +++ b/src/index.js @@ -0,0 +1,5 @@ +import '@/assets/css'; + +import BiciEmpty from '@/components/BiciEmpty'; + +export { BiciEmpty }; diff --git a/src/index.ts b/src/index.ts deleted file mode 100644 index df2f3fd..0000000 --- a/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Foo } from './Foo'; diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..837b354 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,44 @@ +/** + * @Copyright: © 2014-2022 BICI All Rights Reserved, + * webpack config for Bici FED web component library. + */ +'use strict'; + +const path = require('path'); + +function resolve(pathname) { + return path.resolve(__dirname, pathname); +} + +module.exports = { + mode: 'production', + entry: resolve('src/index.js'), + output: { + path: resolve('dist'), + filename: 'bici-design.js', + library: 'BiciDesign', + libraryTarget: 'umd', + }, + resolve: { + alias: { + '@': resolve('src'), + }, + extensions: ['.js', '.json', '.css'], + }, + module: { + rules: [ + { + test: /\.css$/, + include: resolve('src/assets/css'), + use: ['style-loader', 'css-loader'], + }, + { + test: /\.css$/, + include: resolve('src/components'), + use: ['style-loader', { loader: 'css-loader', options: { modules: true } }], + }, + { test: /\.js$/, exclude: resolve('node_modules'), loader: 'babel-loader' }, + ], + }, + externals: ['react', 'react-dom', 'prop-types', 'lodash', 'dayjs'], +};