npm.devtool.tech
๐Ÿ‘ You can access @alifd/next package with using alifdNext variable in browser devtools!
A configurable component library for web built on React.

code/package/bundle size

0B
publish
0B
install
0B
bundle minified
0B
bundle gzipped

English | ็ฎ€ไฝ“ไธญๆ–‡

Fusion

An enterprise-class UI solution for backend system, aimed at settling the problems like cooperation between designers and front-developers, consistency of product experience and development efficiency.


You can customize your own DesignSystem via Collaboration Platform.๐Ÿ’– Designers will receive design materials by Fusion Cool - an easy to use plugin on sketch. Developers will get code fragment on IceWorks. At the same time, the consistency between code and visual manuscript is guaranteed. ๐Ÿ˜

howtouse

๐Ÿค” Why use

@alifd/next usually used with Fusion Design to improving designer-developer collaboration and development efficiency. Designer can customize the UI of components and release an npm theme package. Developer can use this theme package directly, and don't need to care about the UI refactoring. It saves the workload of reductive degree review repeatedly with designers, and greatly improves the development efficiency.

๐Ÿ’ป Browser Compatibility

ChromeFirefoxEdgeIESafariOperaUC
โœ”โœ”โœ”9+ โœ”โœ”โœ”โœ”

๐Ÿš€ Quick Start

๐Ÿ›  Install

1.Use NPM ( Recommend )

npm install @alifd/next --save

2.Import in Browser

Use the script and link tags in the browser to directly import the file and use the global variable Next. We provide files such as next.js/next.min.js and next.css/next.min.css in the @alifd/next/dist directory in the npm package, or via unpkg Download it.

<link rel="stylesheet" href="https://unpkg.com/@alifd/next/dist/next.css" />

<script src="https://unpkg.com/@alifd/next/dist/next.js"></script>

// The above ways import latest @alifd/next, we recommend you specify version.
<script src="https://unpkg.com/@alifd/next@1.8.6/dist/next.min.js"></script>

// Or import as your own static resource
<script src="../build/public/@alifd/next.js"></script>

โ˜”๏ธ Dependencies

  • @alifd/next is based on react@16 development and is currently not compatible with versions below react@16. react/react-dom is used as peerDependencies, which requires the user to manually install or import it.
  • @alifd/next use moment library to implement date-time related component. moment is also used as peerDependencies, which requires the user to manually install or import it.

๐ŸŽฏ Import

Import All

import '@alifd/next/dist/next.css';
// import '@alifd/next/index.scss';

import { Button, Input } from '@alifd/next';

Import module with plugin

1. Import module manually

import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';

2. Use with babel-plugin-import ( Recommend )

// webpack babel loader option or .babelrc
{
    // ...
    plugins: [
        [
            'import',
            {
                libraryName: '@alifd/next',
                style: true,
            },
        ],
    ];
}

It will transform code as below

import { Button } from '@alifd/next';

To

import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';

๐Ÿ”— Advanced

๐ŸŒˆ Contributing

๐Ÿ“ฃ Join Group

Use Dingtalk App scan the Qrcode to join in Dingtalk Group :

Join the chat at dingtalk
๐Ÿ”ŽExplore Package๐Ÿ”ŽCDN Script

Score

Popularity44/100
Quality96/100
Maintenance99/100

DevDependencies

@alifd/adaptor-generate^0.2.3@alifd/adaptor-helper^0.1.3@alifd/api-extractor^3.7.1@alifd/babel-preset-next^2.0.0@alifd/doc-parser^1.0.0@alifd/dts-generator^1.0.3@alifd/eslint-config-next^2.0.0@alifd/sass-mapper^0.1.0@alifd/sass-tracker^0.1.0@alifd/stylelint-config-next^1.0.0@babel/core^7.12.3@babel/plugin-proposal-class-properties^7.12.1@babel/plugin-syntax-jsx^7.12.1@commitlint/cli^7.0.0@no-repeat/sassdoc-parser^0.0.11@octokit/rest^18.0.9@types/react^16.8.13autoprefixer^7.1.4axe-core~3.2.0babel-core^6.26.0babel-eslint^8.2.3babel-loader^7.0.0babel-plugin-add-module-exports^0.2.1babel-plugin-espower^2.3.2babel-plugin-generator-prettier^1.2.0babel-plugin-istanbul^4.1.5babel-plugin-transform-decorators-legacy^1.3.4babel-plugin-transform-object-assign^6.22.0babel-plugin-transform-proto-to-assign^6.26.0babel-plugin-transform-react-es6-displayname^1.0.0-beta1.4babel-plugin-transform-runtime^6.23.0babel-polyfill^6.26.0babel-preset-env^1.6.0babel-preset-react^6.24.1babel-preset-stage-0^6.24.1case-sensitive-paths-webpack-plugin^2.1.1chalk^2.3.2cheerio^1.0.0-rc.2chokidar^2.0.4chrome-launcher^0.10.2co^4.6.0console-polyfill^0.3.0conventional-changelog^2.0.1conventional-changelog-alifd^1.0.0css-loader^0.28.7css-split-webpack-plugin^0.2.5ejs^2.5.9enzyme^3.3.0enzyme-adapter-react-16~1.10.0es5-shim^4.5.9es6-promise-polyfill^1.2.0eslint^4.19.1eslint-config-prettier^4.0.0eslint-plugin-html^5.0.0eslint-plugin-import^2.12.0eslint-plugin-jsx-a11y^6.2.1eslint-plugin-markdown^1.0.0-beta.6eslint-plugin-react7.11.1expect.js^0.3.1extract-text-webpack-plugin^3.0.0fast-sass-loader^1.2.5fs-extra^5.0.0glob^7.1.2highlight.js>=10.4.1html5shiv^3.7.3husky^0.14.3inquirer^6.1.0jsonp^0.2.1karma^3.0.0karma-chrome-launcher^2.2.0karma-coverage^1.1.1karma-mocha^1.3.0karma-sourcemap-loader^0.3.7karma-spec-reporter^0.0.26karma-webdriver-launcher^1.0.5karma-webpack^3.0.5less^3.12.2lint-staged^7.2.2loader-utils^1.1.0lodash^4.17.5markdown-it^8.4.2markdown-it-anchor^6.0.0markdown-it-prism^2.1.3md5^2.2.1minimist^1.2.0mocha^3.5.3moment^2.20.1node-sass^4.13.1node-sass-package-importer^5.2.0nunjucks^3.2.0postcss^7.0.32postcss-calc^7.0.3postcss-custom-properties^9.1.1postcss-import^12.0.1postcss-loader^2.0.6power-assert^1.5.0prettier1.16.4promise-polyfill^8.1.0puppeteer^5.5.0react^16.0.0react-axe^3.0.2react-copy-to-clipboard^5.0.1react-cropper^1.0.0react-dev-utils^4.2.1react-dnd^7.0.0react-dnd-html5-backend^7.0.0react-dom^16.0.0react-live^2.2.3react-redux^5.0.7react-router^4.3.1react-router-dom^5.2.0redux^4.0.0remark^9.0.0sassaby-next^3.0.0simulate-event^1.4.0sinon^5.0.10solarlunar^2.0.7style-loader^0.18.2stylelint^13.0.0stylelint-config-recommended^3.0.0stylelint-csstree-validator^1.8.0stylelint-scss^3.1.1tslint^5.18.0typescript^3.5.3urllib^2.36.1webpack^3.0.0webpack-dev-server^2.xwhatwg-fetch^2.0.3