Skip to content

Commit

Permalink
feat: add docs of lab icon (#1956)
Browse files Browse the repository at this point in the history
* feat: make lab icon same api as default icon
* fix: treeUtil export
  • Loading branch information
pointhalo authored Dec 1, 2023
1 parent 008afd1 commit 395ecb1
Show file tree
Hide file tree
Showing 113 changed files with 3,283 additions and 181 deletions.
4 changes: 2 additions & 2 deletions content/basic/icon/index-en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -104,10 +104,10 @@ import React from 'react';
import { Icon } from '@douyinfe/semi-ui';

() => {
function CustomIcon(){
function CustomIcon() {
return <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11" fill="#FBCD2C"/>
<mask id="mask0" maskType="alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="22" height="22">
<mask id="mask0" masktype="alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="22" height="22">
<circle cx="12" cy="12" r="11" fill="#A2845E"/>
</mask>
<g mask="url(#mask0)">
Expand Down
8 changes: 7 additions & 1 deletion content/basic/icon/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@ brief: 语义化的矢量图形。
---

## 图标列表

默认的图标集 `@douyinfe/semi-icons` 包含面性、线性两套图标,默认不带颜色,可通过 css color属性更改颜色。

`@douyinfe/semi-icons-lab` 为彩色图标集,需单独安装,不可改色, lab 图标集于 v2.48 后提供

```icon
```

Expand All @@ -17,6 +22,7 @@ brief: 语义化的矢量图形。

```jsx import
import Icon, { IconHome } from '@douyinfe/semi-icons';
import { IconAvatar, IconCard } from '@douyinfe/semi-icons-lab';
```

### 基础使用
Expand Down Expand Up @@ -103,7 +109,7 @@ import React from 'react';
import { Icon } from '@douyinfe/semi-ui';

() => {
function CustomIcon(){
function CustomIcon() {
return <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11" fill="#FBCD2C"/>
<mask id="mask0" maskType="alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="22" height="22">
Expand Down
212 changes: 74 additions & 138 deletions content/navigation/navigation/index.md

Large diffs are not rendered by default.

24 changes: 11 additions & 13 deletions gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,7 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
const srcScssModuleUse = [];
const srcScssUse = [];
const srcCssUse = [];
const semiDvScssUse = [];

const semiDvJsxRule = [];

// for semi
semiOptions.scssUse = [
Expand Down Expand Up @@ -87,7 +85,7 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
srcScssUse.push(cssLoader({ importLoaders: 2 }), loaders.postcss(), sassLoader());
srcCssUse.push(cssLoader({ importLoaders: 1 }), loaders.postcss());
if (!isSSR) {
[semiOptions.scssUse, semiOptions.cssUse, srcScssModuleUse, srcScssUse, srcCssUse, semiDvScssUse].forEach(
[semiOptions.scssUse, semiOptions.cssUse, srcScssModuleUse, srcScssUse, srcCssUse].forEach(
arr => {
arr.unshift(miniCssExtract());
}
Expand All @@ -103,6 +101,7 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
'@douyinfe/semi-ui': resolve('packages/semi-ui'),
'@douyinfe/semi-foundation': resolve('packages/semi-foundation'),
'@douyinfe/semi-icons': resolve('packages/semi-icons/src/'),
'@douyinfe/semi-icons-lab': resolve('packages/semi-icons-lab/src/'),
'@douyinfe/semi-theme-default': resolve('packages/semi-theme-default'),
'@douyinfe/semi-illustrations': resolve('packages/semi-illustrations/src/'),
'@douyinfe/semi-animation-react': resolve('packages/semi-animation-react/'),
Expand All @@ -117,7 +116,6 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
},
module: {
rules: [
...semiDvJsxRule,
{
include: [path.resolve(__dirname, 'src')],
oneOf: [
Expand Down Expand Up @@ -173,7 +171,7 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
'process.env.SEMI_SITE_BANNER': JSON.stringify(process.env.SEMI_SITE_BANNER),
"process.env.SEMI_SITE_UNIVERS_WEBVIEW": JSON.stringify(process.env.SEMI_SITE_UNIVERS_WEBVIEW),
'process.env.D2C_URL': JSON.stringify(process.env.D2C_URL),
"ASSET_PREFIX":JSON.stringify((process.env['CDN_OUTER_CN'] || process.env['CDN_INNER_CN']) ? `https://${(process.env['CDN_OUTER_CN'] || process.env['CDN_INNER_CN'])}/${process.env['CDN_PATH_PREFIX']}`: ""),
"ASSET_PREFIX": JSON.stringify((process.env['CDN_OUTER_CN'] || process.env['CDN_INNER_CN']) ? `https://${(process.env['CDN_OUTER_CN'] || process.env['CDN_INNER_CN'])}/${process.env['CDN_PATH_PREFIX']}`: ""),
})],
});
};
Expand Down Expand Up @@ -306,12 +304,12 @@ exports.onPostBuild = async () => {
for (let file of htmlAndJSFiles) {
const stats = fs.statSync(file);
if (stats.isFile()) {
if (file.includes("public/editor")){
if (file.includes("public/editor")) {
continue;
}
let content = fs.readFileSync(file, 'utf8');
let result = content.replace(/([a-zA-Z0-9\-]+)\.json/g, (_, p1)=>{
if (replacedNameSet.has(p1) && !/^\d+$/.test(p1)){
if (replacedNameSet.has(p1) && !/^\d+$/.test(p1)) {
const newFileName = `${p1}.${hash}.json`;
console.log(`Add hash to json in ${file} from ${p1}.json to ${newFileName} ..`);
return newFileName;
Expand All @@ -330,19 +328,19 @@ exports.onPostBuild = async () => {
//only match nav json (only number)
const jsonFiles = glob.sync(`${publicPath}/**/*.{js,html,json}`);
for (let file of jsonFiles) {
if (file.includes("public/editor")){
if (file.includes("public/editor")) {
continue;
}
const stats = fs.statSync(file);
if (stats.isFile()) {
console.log("Notice: Add Hash to JSON File "+ file);
if (file.includes("public/editor")){
if (file.includes("public/editor")) {
continue;
}
let result = fs.readFileSync(file, 'utf8');

for (let name of replacedNameSet){
if (/^\d+$/.test(name)){
for (let name of replacedNameSet) {
if (/^\d+$/.test(name)) {
result = result.replaceAll(name, `${name}${numHash}`);
}

Expand All @@ -362,7 +360,7 @@ exports.onPostBuild = async () => {
const fileNameWithoutExt = filename.split('.')[0];
const originHash = fileNameWithoutExt.split('-').at(-1);

if (originHash && originHash!==fileNameWithoutExt){
if (originHash && originHash!==fileNameWithoutExt) {
let fileNameWithoutExtWithHash = fileNameWithoutExt.replace(originHash, `${originHash}${numHash}`);
replaceNames[originHash] = `${originHash}${numHash}`;
fs.renameSync(file, path.join(path.dirname(file), `${fileNameWithoutExtWithHash}.js`));
Expand Down Expand Up @@ -396,7 +394,7 @@ exports.onPostBuild = async () => {
const originHash = fileNameWithoutExt.split('.').at(-1);


if (originHash && originHash!==fileNameWithoutExt){
if (originHash && originHash!==fileNameWithoutExt) {
let fileNameWithoutExtWithHash = fileNameWithoutExt.replace(originHash, `${originHash}${numHash}`);
replaceNames[originHash] = `${originHash}${numHash}`;
fs.renameSync(file, path.join(path.dirname(file), `${fileNameWithoutExtWithHash}.css`));
Expand Down
2 changes: 1 addition & 1 deletion lerna.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"useWorkspaces": true,
"npmClient": "yarn",
"version": "2.48.0-beta.0"
"version": "2.48.1-alpha.1"
}
3 changes: 2 additions & 1 deletion packages/semi-foundation/tree/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ import {
calcDropActualPosition
} from './treeUtil';

export { KeyMapProps } from './treeUtil';
import type { KeyMapProps } from './treeUtil';
export type { KeyMapProps };

export interface BasicTreeNodeProps {
[x: string]: any;
Expand Down
31 changes: 27 additions & 4 deletions packages/semi-icons-lab/README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,32 @@
# semi-icons-lab

Beautiful, colorful icons(experimental). JSX code generated by Semi icon.

```bash
##  📣 Introduce

Beautiful, colorful icons(experimental) design by Semi Team

![](https://lf9-static.semi.design/obj/semi-tos/images/0b8d0ca0-57be-11ee-8e53-13ab794309ff.png)


##  🚀 Getting Start

### install deps

```shell
npm install @douyinfe/semi-icons-lab
```

![](https://lf9-static.semi.design/obj/semi-tos/images/0b8d0ca0-57be-11ee-8e53-13ab794309ff.png)
### as a react component

```tsx
import { IconAnchor } from '@douyinfe/semi-icons-lab';

ReactDOM.render(<IconAnchor />, root);
```



## How to contribute icon to this package
- Add the svg file under the path ```src/svgs/```, naming references to other files.
- Run command ```lerna run build:icon --scope @douyinfe/semi-icons```, the corresponding tsx file will be generated under the path ```src/icons```.
- Add the category and name of the new icon to the ```src/svgs/meta.json``` file.
- Finally, run command ```yarn docsite``` and go to the icon page to confirm whether the icon is successfully added.
23 changes: 23 additions & 0 deletions packages/semi-icons-lab/getBabelConfig.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
module.exports = ({ isESM }) => {
return {
presets: [
'@babel/preset-react',
[
'@babel/preset-env',
{
modules: isESM ? false : 'commonjs',
targets: {
browsers: [
"> 0.5%",
"last 2 versions",
"Firefox ESR",
"not dead",
"not IE 11"
]
}
},
],
],
plugins: []
};
};
68 changes: 68 additions & 0 deletions packages/semi-icons-lab/gulpfile.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
const path = require('path');
const { Buffer } = require('buffer');
const through2 = require('through2');
const gulp = require('gulp');
const merge2 = require('merge2');
const gulpBabel = require('gulp-babel');
const gulpTS = require('gulp-typescript');
const sass = require('gulp-sass')(require('sass'));
const replace = require('gulp-replace');
const del = require('del');
const tsConfig = require('./tsconfig.json');
const getBabelConfig = require('./getBabelConfig');

gulp.task('cleanLib', function cleanLib() {
return del(['lib/**/*']);
});

function compileTSX(isESM) {
const targetDir = isESM ? 'lib/es' : 'lib/cjs';
const tsStream = gulp.src(['src/**/*.tsx', 'src/**/*.ts'])
.pipe(gulpTS({
...tsConfig.compilerOptions,
rootDir: path.join(__dirname, '..')
}));
const jsStream = tsStream.js
.pipe(gulpBabel(getBabelConfig({ isESM })))
.pipe(replace(/(require\(['"])([^'"]+)(\.scss)(['"]\))/g, '$1$2.css$4'))
.pipe(replace(/(import\s+)['"]([^'"]+)(\.scss)['"]/, '$1\'$2.css\''))
.pipe(gulp.dest(targetDir));
const dtsStream = tsStream.dts
.pipe(replace(/(require\(['"])([^'"]+)(\.scss)(['"]\))/g, '$1$2.css$4'))
.pipe(replace(/(import\s+)['"]([^'"]+)(\.scss)['"]/, '$1\'$2.css\''))
.pipe(gulp.dest(targetDir));
return merge2([jsStream, dtsStream]);
}

gulp.task('compileTSXForESM', function compileTSXForESM() {
return compileTSX(true);
});

gulp.task('compileTSXForCJS', function compileTSXForCJS() {
return compileTSX(false);
});

gulp.task('compileScss', function compileScss() {
return gulp.src(['src/**/*.scss'])
.pipe(through2.obj(
function (chunk, enc, cb) {
const rootPath = path.join(__dirname, '../../');
const scssVarStr = `@import "${rootPath}/packages/semi-theme-default/scss/index.scss";\n`;
const scssBuffer = Buffer.from(scssVarStr);
const buffers = [scssBuffer];
chunk.contents = Buffer.concat([...buffers, chunk.contents]);
cb(null, chunk);
}
))
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('lib/cjs'))
.pipe(gulp.dest('lib/es'));
});

gulp.task('moveScss', function moveScss() {
return gulp.src(['src/**/*.scss'])
.pipe(gulp.dest('lib/cjs'))
.pipe(gulp.dest('lib/es'));
});

gulp.task('compileLib', gulp.series(['cleanLib', 'compileScss', 'moveScss', gulp.parallel('compileTSXForESM', 'compileTSXForCJS')]));
42 changes: 36 additions & 6 deletions packages/semi-icons-lab/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@douyinfe/semi-icons-lab",
"version": "2.48.0-beta.0",
"version": "2.48.1-alpha.1",
"description": "semi icons lab",
"keywords": [
"semi",
Expand All @@ -11,14 +11,44 @@
"bugs": {
"url": "https://github.com/DouyinFE/semi-design/issues"
},
"main": "src/react/index.js",
"module": "src/react/index.js",
"typings": "src/react/index.d.ts",
"scripts": {
"clean": "rimraf dist lib",
"build:icon": "node scripts/build-icon ",
"build:lib": "node ./scripts/compileLib.js",
"build:js": "npm run build:lib && node scripts/compileDist.js",
"prepublishOnly": "npm run clean && npm run build:js"
},
"main": "lib/cjs/index.js",
"module": "lib/es/index.js",
"typings": "lib/es/index.d.ts",
"license": "MIT",
"files": [
"src/react",
"src/svgs"
"lib",
"src",
"dist"
],
"sideEffects": [
"*.scss",
"*.css"
],
"devDependencies": {
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"css-loader": "4.3.0",
"del": "^6.0.0",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-replace": "^1.1.3",
"gulp-sass": "^5.0.0",
"gulp-typescript": "^6.0.0-alpha.1",
"merge2": "^1.4.1",
"mini-css-extract-plugin": "^2.7.5",
"rimraf": "^3.0.2",
"terser-webpack-plugin": "^4.2.3",
"through2": "^4.0.2",
"ts-loader": "^5.4.5"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
Expand Down
Loading

0 comments on commit 395ecb1

Please sign in to comment.