@blocklet/list 0.8.6

package/lib/contexts/store.js

@@ -0,0 +1,333 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchConsumer = void 0;
+exports.SearchProvider = SearchProvider;
+exports.useSearchContext = useSearchContext;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _qs = _interopRequireDefault(require("qs"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _ahooks = require("ahooks");
+
+var _orderBy = _interopRequireDefault(require("lodash-es/orderBy"));
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _urlJoin = _interopRequireDefault(require("url-join"));
+
+var _pageState = _interopRequireDefault(require("../hooks/page-state"));
+
+var _utils = require("../tools/utils");
+
+var _locale = _interopRequireDefault(require("../assets/locale"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const axiosInstance = _axios.default.create();
+
+const Search = /*#__PURE__*/(0, _react.createContext)({});
+const {
+  Provider,
+  Consumer
+} = Search;
+exports.SearchConsumer = Consumer;
+
+function SearchProvider(_ref) {
+  let {
+    children,
+    baseUrl,
+    type,
+    endpoint,
+    locale,
+    blockletRender
+  } = _ref;
+  const location = (0, _reactRouterDom.useLocation)();
+  const history = (0, _reactRouterDom.useHistory)();
+  const pathParams = (0, _reactRouterDom.useParams)();
+  const isPageMode = type === 'page';
+
+  if (isPageMode && !baseUrl) {
+    throw new Error('baseUrl is required when type is page');
+  }
+
+  const {
+    data: allBlocklets,
+    error: fetchBlockletsError,
+    loading: fetchBlockletsLoading
+  } = (0, _ahooks.useRequest)(async () => {
+    const {
+      data: list
+    } = await axiosInstance.get((0, _urlJoin.default)(endpoint, '/api/blocklets.json'));
+    return list;
+  }, {
+    initialData: []
+  });
+  const {
+    data: allCategories,
+    error: fetchCategoriesError,
+    loading: fetchCategoriesLoading,
+    run: fetchCategories
+  } = (0, _ahooks.useRequest)(async () => {
+    const {
+      data: list
+    } = await axiosInstance.get("".concat((0, _urlJoin.default)(endpoint, '/api/blocklets/categories')));
+    return list;
+  }, {
+    initialData: [],
+    manual: true
+  });
+  const [memoryParams, setMemoryParams] = (0, _react.useState)({
+    sortBy: 'popularity',
+    sortDirection: 'desc'
+  });
+  const queryParams = (0, _react.useMemo)(() => {
+    return isPageMode ? _qs.default.parse(location.search, {
+      ignoreQueryPrefix: true
+    }) : memoryParams;
+  }, [memoryParams, location.search]);
+  let sortParams; // 当作页面使用时 sort 数据比较特殊, 默认取 localStorge 中的值，如果 url query 中有sort值则优先使用
+
+  if (isPageMode) {
+    const localSortParams = (0, _pageState.default)({
+      sort: 'popularity',
+      direction: 'desc'
+    }, baseUrl);
+    const urlSortParams = {
+      sort: queryParams.sortBy,
+      direction: queryParams.sortDirection
+    };
+    sortParams = urlSortParams.sortBy && urlSortParams.sortDirection ? urlSortParams : localSortParams;
+  } else {
+    sortParams = (0, _react.useMemo)(() => {
+      return {
+        sort: memoryParams.sortBy,
+        direction: memoryParams.sortDirection
+      };
+    }, [memoryParams]);
+  }
+
+  const isSearchPage = location.pathname === '/search';
+  const selectedCategory = (0, _react.useMemo)(() => {
+    let result = null;
+
+    if (isPageMode) {
+      result = !isSearchPage ? pathParams.category : queryParams.category;
+    } else {
+      result = queryParams.category;
+    }
+
+    return result;
+  }, [isPageMode, pathParams, queryParams]);
+  const hasDeveloperFilter = !!queryParams.developer;
+  const categoryState = !hasDeveloperFilter ? {
+    data: allCategories
+  } : (0, _utils.getCategories)(allBlocklets, queryParams.developer);
+  const blockletList = (0, _react.useMemo)(() => {
+    var _queryParams$search;
+
+    const sortByName = x => {
+      var _x$title, _x$name;
+
+      return (x === null || x === void 0 ? void 0 : (_x$title = x.title) === null || _x$title === void 0 ? void 0 : _x$title.toLocaleLowerCase()) || (x === null || x === void 0 ? void 0 : (_x$name = x.name) === null || _x$name === void 0 ? void 0 : _x$name.toLocaleLowerCase());
+    }; // 按名称排序
+
+
+    const sortByPopularity = x => x.stats.downloads; // 按下载量排序
+
+
+    const sortByPublish = x => x.lastPublishedAt; // 按发布时间
+
+
+    const sortMap = {
+      nameAsc: sortByName,
+      nameDesc: sortByName,
+      popularity: sortByPopularity,
+      publishAt: sortByPublish
+    };
+    let result = allBlocklets || []; // 按照付费/免费筛选
+
+    result = (0, _utils.filterBlockletByPrice)(result, queryParams.price); // 按照分类筛选
+
+    result = result.filter(item => {
+      var _item$category;
+
+      return selectedCategory ? (item === null || item === void 0 ? void 0 : (_item$category = item.category) === null || _item$category === void 0 ? void 0 : _item$category.name) === selectedCategory : true;
+    }); // 按照作者筛选
+
+    result = result.filter(item => queryParams !== null && queryParams !== void 0 && queryParams.developer ? item.owner.did === queryParams.developer : true);
+    const lowerSearch = (queryParams === null || queryParams === void 0 ? void 0 : (_queryParams$search = queryParams.search) === null || _queryParams$search === void 0 ? void 0 : _queryParams$search.toLocaleLowerCase()) || ''; // 按照搜索筛选
+
+    result = result.filter(item => {
+      var _ref2, _item$description, _item$version;
+
+      return ((_ref2 = (item === null || item === void 0 ? void 0 : item.title) || (item === null || item === void 0 ? void 0 : item.name)) === null || _ref2 === void 0 ? void 0 : _ref2.toLocaleLowerCase().includes(lowerSearch)) || ((_item$description = item.description) === null || _item$description === void 0 ? void 0 : _item$description.toLocaleLowerCase().includes(lowerSearch)) || (item === null || item === void 0 ? void 0 : (_item$version = item.version) === null || _item$version === void 0 ? void 0 : _item$version.toLocaleLowerCase().includes(lowerSearch));
+    }); // 排序
+
+    return (0, _orderBy.default)(result, [sortMap[sortParams.sort]], [sortParams.direction]);
+  }, [allBlocklets, queryParams, sortParams]);
+  const categoryList = (0, _react.useMemo)(() => {
+    const list = categoryState.data || []; // 分类按照名称排序
+
+    return (0, _orderBy.default)(list, [i => i.name], ['asc']);
+  }, [categoryState.data]);
+
+  const translate = (key, data) => {
+    if (!_locale.default[locale] || !_locale.default[locale][key]) {
+      console.warn("Warning: no ".concat(key, " translation of ").concat(locale));
+      return key;
+    }
+
+    return (0, _utils.replace)(_locale.default[locale][key], data);
+  };
+
+  const searchStore = {
+    errors: {
+      fetchBlockletsError,
+      fetchCategoriesError
+    },
+    loadings: {
+      fetchBlockletsLoading,
+      fetchCategoriesLoading
+    },
+    endpoint,
+    sortParams,
+    history,
+    blockletList,
+    t: translate,
+    queryParams,
+    selectedCategory,
+    isSearchPage,
+    categoryList,
+    isPageMode,
+    baseUrl,
+    blockletRender,
+    locale,
+    handleSort: value => {
+      const changData = _objectSpread(_objectSpread({}, queryParams), {}, {
+        sortBy: value,
+        sortDirection: value === 'nameAsc' ? 'asc' : 'desc'
+      });
+
+      if (isPageMode) {
+        sortParams.sort = changData.sortBy;
+        sortParams.direction = changData.sortDirection;
+        history.push("".concat(baseUrl, "search?").concat(_qs.default.stringify(changData)));
+      } else {
+        setMemoryParams(changData);
+      }
+    },
+    handleSearchKeyword: value => {
+      const changData = _objectSpread(_objectSpread({}, queryParams), {}, {
+        search: value || undefined
+      });
+
+      if (isPageMode) {
+        history.push("".concat(baseUrl, "search?").concat(_qs.default.stringify(changData)));
+      } else {
+        setMemoryParams(changData);
+      }
+    },
+    handlePriceFilter: value => {
+      const changData = _objectSpread(_objectSpread({}, queryParams), {}, {
+        price: value === queryParams.price ? undefined : value
+      });
+
+      if (isPageMode) {
+        history.push("".concat(baseUrl, "search?").concat(_qs.default.stringify(changData)));
+      } else {
+        setMemoryParams(changData);
+      }
+    },
+    getCategoryLocale: name => {
+      if (!name) return null;
+      let result = null;
+      const find = categoryState.data.find(item => item.name === name);
+
+      if (find) {
+        result = find.locales[locale];
+      }
+
+      return result;
+    },
+    handleCategorySelect: value => {
+      if (value === 'all') {
+        const changData = _objectSpread(_objectSpread({}, queryParams), {}, {
+          category: undefined
+        });
+
+        if (isPageMode) {
+          history.push(!isSearchPage ? baseUrl : "".concat(baseUrl, "search?").concat(_qs.default.stringify(changData)));
+        } else {
+          setMemoryParams(changData);
+        }
+      } else {
+        const changData = _objectSpread(_objectSpread({}, queryParams), {}, {
+          category: value
+        });
+
+        if (isPageMode) {
+          history.push(!isSearchPage ? "".concat(baseUrl, "category/").concat(value) : "".concat(baseUrl, "search?").concat(_qs.default.stringify(changData)));
+        } else {
+          setMemoryParams(changData);
+        }
+      }
+    },
+
+    get developerName() {
+      var _allBlocklets$find, _allBlocklets$find$ow;
+
+      return ((_allBlocklets$find = allBlocklets.find(i => i.owner.did === queryParams.developer)) === null || _allBlocklets$find === void 0 ? void 0 : (_allBlocklets$find$ow = _allBlocklets$find.owner) === null || _allBlocklets$find$ow === void 0 ? void 0 : _allBlocklets$find$ow.name) || '';
+    }
+
+  };
+  (0, _react.useEffect)(() => {
+    if (!hasDeveloperFilter) {
+      fetchCategories();
+    }
+  }, [!hasDeveloperFilter]);
+  return /*#__PURE__*/_react.default.createElement(Provider, {
+    value: searchStore
+  }, children);
+}
+
+SearchProvider.propTypes = {
+  children: _propTypes.default.any.isRequired,
+  baseUrl: _propTypes.default.string,
+  endpoint: _propTypes.default.string.isRequired,
+  // 组件的类型： page 单独作为页面使用 持久化数据将存储在 url 和 localstorage，select 作为选择器组件使用 数据在存储在内存中
+  type: _propTypes.default.oneOf(['select', 'page']).isRequired,
+  locale: _propTypes.default.oneOf(['zh', 'en']),
+  blockletRender: _propTypes.default.func.isRequired
+};
+SearchProvider.defaultProps = {
+  baseUrl: null,
+  locale: 'zh'
+};
+
+function useSearchContext() {
+  const searchStore = (0, _react.useContext)(Search);
+
+  if (!searchStore) {
+    return {};
+  }
+
+  return searchStore;
+}

package/lib/hooks/page-state.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = usePageState;
+
+var _ahooks = require("ahooks");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const PAGE_STATE_KEY = 'page-state';
+
+function usePageState() {
+  let defaultValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let persistence = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : window.location.pathname;
+  const [pageState, setPageState] = (0, _ahooks.useLocalStorageState)(PAGE_STATE_KEY, {});
+  const state = (0, _ahooks.useReactive)(pageState);
+
+  if (!(path in pageState) && persistence) {
+    state[path] = defaultValue;
+    syncState();
+  }
+
+  function syncState() {
+    setPageState(state);
+  }
+
+  return new Proxy({}, {
+    get: (target, prop) => {
+      try {
+        return state[path][prop];
+      } catch (_unused) {
+        return undefined;
+      }
+    },
+    set: (target, prop, value) => {
+      try {
+        const data = _objectSpread(_objectSpread({}, state[path] || {}), {}, {
+          [prop]: value
+        });
+
+        state[path] = data;
+        syncState();
+        return true;
+      } catch (_unused2) {
+        return false;
+      }
+    },
+    deleteProperty: (target, prop) => {
+      try {
+        const data = _objectSpread({}, state[path] || {});
+
+        delete data[prop];
+        delete state[path][prop];
+        syncState();
+        return true;
+      } catch (_unused3) {
+        return false;
+      }
+    },
+    ownKeys: () => Object.keys(state[path] || {})
+  });
+}

package/lib/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockletList;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _base = _interopRequireDefault(require("./base"));
+
+var _store = require("./contexts/store");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function BlockletList(props) {
+  return /*#__PURE__*/_react.default.createElement(_store.SearchProvider, props, /*#__PURE__*/_react.default.createElement(_base.default, null));
+}
+
+BlockletList.propTypes = {
+  baseUrl: _propTypes.default.string,
+  endpoint: _propTypes.default.string.isRequired,
+  // 组件的类型： page 单独作为页面使用 持久化数据将存储在 url 和 localstorage，select 作为选择器组件使用 数据在存储在内存中
+  type: _propTypes.default.oneOf(['select', 'page']).isRequired,
+  locale: _propTypes.default.oneOf(['zh', 'en']),
+  blockletRender: _propTypes.default.func.isRequired
+};
+BlockletList.defaultProps = {
+  baseUrl: null,
+  locale: 'zh'
+};

package/lib/tools/utils.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.replace = exports.getStoreDetail = exports.getSortOptions = exports.getPrices = exports.getCategories = exports.formatLogoPath = exports.formatError = exports.filterBlockletByPrice = void 0;
+
+var _urlJoin = _interopRequireDefault(require("url-join"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const isFreeBlocklet = meta => {
+  if (!meta.payment) {
+    return true;
+  }
+
+  const priceList = (meta.payment.price || []).map(x => x.value || 0);
+  return priceList.every(x => x === 0);
+};
+
+const getSortOptions = t => {
+  return [{
+    name: t('sort.popularity'),
+    value: 'popularity'
+  }, {
+    name: t('sort.lastPublished'),
+    value: 'publishAt'
+  }, {
+    name: t('sort.nameAscend'),
+    value: 'nameAsc'
+  }, {
+    name: t('sort.nameDescend'),
+    value: 'nameDesc'
+  }];
+};
+
+exports.getSortOptions = getSortOptions;
+
+const getPrices = t => {
+  return [{
+    name: t('blocklet.free'),
+    value: 'free'
+  }, {
+    name: t('blocklet.payment'),
+    value: 'payment'
+  }];
+};
+/**
+ * 从开发者所属 blocklets 中的得到 Categories
+ * @param {*} list
+ * @param {*} developerDid
+ * @returns
+ */
+
+
+exports.getPrices = getPrices;
+
+const getCategories = (list, developerDid) => {
+  const filterList = list.filter(item => developerDid ? item.owner.did === developerDid : true);
+  const Categories = filterList.map(item => item.category);
+  const res = new Map();
+  const result = Categories.filter(i => !!i).filter(a => !res.has(a._id) && res.set(a._id, 1));
+  return {
+    data: result
+  };
+};
+/**
+ * 根据 是否付费 过滤 blocklet list
+ * @param {*} list
+ * @param {*} price
+ * @returns
+ */
+
+
+exports.getCategories = getCategories;
+
+const filterBlockletByPrice = function filterBlockletByPrice() {
+  let list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let price = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let result = list;
+  if (!price) return result;
+
+  if (price === 'free') {
+    result = list.filter(blocklet => isFreeBlocklet(blocklet));
+  } else {
+    result = list.filter(blocklet => !isFreeBlocklet(blocklet));
+  }
+
+  return result;
+};
+
+exports.filterBlockletByPrice = filterBlockletByPrice;
+
+const formatError = error => {
+  if (Array.isArray(error.errors)) {
+    return error.errors.map(x => x.message).join('\n');
+  }
+
+  return error.message;
+};
+
+exports.formatError = formatError;
+
+const getStoreDetail = (storeUrl, blocklet) => {
+  return (0, _urlJoin.default)(storeUrl, "/blocklets/".concat(blocklet.did));
+};
+
+exports.getStoreDetail = getStoreDetail;
+
+const formatLogoPath = function formatLogoPath(did, asset) {
+  let target = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'assets';
+
+  if (asset.startsWith(target)) {
+    return asset;
+  }
+
+  return "".concat(target, "/").concat(did, "/").concat(asset);
+};
+
+exports.formatLogoPath = formatLogoPath;
+
+const replace = (template, data) => // eslint-disable-next-line no-prototype-builtins
+template.replace(/{(\w*)}/g, (m, key) => data.hasOwnProperty(key) ? data[key] : '');
+
+exports.replace = replace;

package/package.json

@@ -0,0 +1,66 @@
+{
+    "name": "@blocklet/list",
+    "version": "0.8.6",
+    "description": "Common ux components of blocklet",
+    "publishConfig": {
+        "access": "public"
+    },
+    "author": "machao <machao@arcblock.io>",
+    "homepage": "https://github.com/blocklet/blocklet-store#readme",
+    "license": "ISC",
+    "main": "lib/index.js",
+    "files": [
+        "lib",
+        "src",
+        "LICENSE",
+        "package.json",
+        "README.md"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git@github.com:blocklet/blocklet-store.git"
+    },
+    "scripts": {
+        "lint": "eslint src",
+        "build": "rm -rf lib && babel src --out-dir lib --copy-files",
+        "watch": "babel src --out-dir lib -w --copy-files",
+        "precommit": "CI=1 yarn test",
+        "prepush": "CI=1 yarn test",
+        "prepublish": "npm run build"
+    },
+    "bugs": {
+        "url": "https://github.com/blocklet/blocklet-store/issues"
+    },
+    "peerDependencies": {
+        "react": ">=16.12.0"
+    },
+    "dependencies": {
+        "@arcblock/ux": "^2.1.1",
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/icons-material": "^5.6.2",
+        "@mui/material": "^5.7.0",
+        "@mui/styles": "^5.7.0",
+        "ahooks": "^2.10.12",
+        "axios": "^0.27.2",
+        "flat": "^5.0.2",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "mdi-material-ui": "^7.3.0",
+        "prop-types": "^15.7.2",
+        "qs": "^6.10.2",
+        "react-router-dom": "^5.3.0",
+        "styled-components": "5.3.5",
+        "url-join": "^4.0.1"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.8.4",
+        "@babel/core": "^7.8.4",
+        "@babel/preset-env": "^7.8.4",
+        "@babel/preset-react": "^7.8.3",
+        "@emotion/babel-plugin": "^11.9.2",
+        "babel-plugin-inline-react-svg": "^2.0.1",
+        "babel-plugin-styled-components": "^1.10.7"
+    },
+    "gitHead": "ef1d41695525f138255fe7f096c861395328a7f7"
+}

package/src/assets/locale.js

@@ -0,0 +1,72 @@
+const flat = require('flat');
+
+const en = {
+  common: {
+    searchStore: 'Search the store',
+    price: 'Price',
+    category: 'Category',
+  },
+  sort: {
+    sort: 'Sort',
+    nameDescend: 'Name Descending',
+    nameAscend: 'Name Ascending',
+    popularity: 'Most Popular',
+    lastPublished: 'Latest Published',
+  },
+  category: {
+    all: 'All',
+    placeholder: 'Category name',
+    helperText: 'Please select a category',
+  },
+  blocklet: {
+    noResults: 'No Blocklets',
+    payment: 'Paid Blocklets',
+    free: 'Fee Blocklets',
+    emptyTip: 'Tips:',
+    filterTip: 'Appropriately reduce the filter conditions',
+    keywordTip: 'Try other keywords',
+    owner: 'Blocklets from {name}',
+    noBlockletPart1: 'No Blocklets associated with"',
+    noBlockletPart2: '"were found',
+    noCategoryResults1: 'No "',
+    noCategoryResults2: '" Blocklets',
+  },
+};
+
+const zh = {
+  common: {
+    searchStore: '搜索商店内应用',
+    price: '价格',
+    category: '类别',
+  },
+  sort: {
+    sort: '排序',
+    nameDescend: '名称降序',
+    nameAscend: '名称升序',
+    popularity: '最热门',
+    lastPublished: '最新发布',
+  },
+  category: {
+    all: '全部',
+    placeholder: '分类名称',
+    helperText: '请选择分类',
+  },
+  blocklet: {
+    noResults: '暂无应用',
+    free: '免费应用',
+    payment: '付费应用',
+    emptyTip: '建议:',
+    filterTip: '适当减少筛选条件',
+    keywordTip: '尝试其他关键字',
+    owner: '来自 {name} 的 Blocklets',
+    noBlockletPart1: '没有找到与"',
+    noBlockletPart2: '"相关的 Blocklets',
+    noCategoryResults1: '无 "',
+    noCategoryResults2: '" 类别的 Blocklets',
+  },
+};
+
+export default {
+  en: flat(en),
+  zh: flat(zh),
+};