├── .npmignore ├── examples ├── customize-cra │ ├── .env │ ├── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── favicon.png │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── index.html │ │ ├── github.svg │ │ └── logo.svg │ ├── src │ │ ├── previews │ │ │ ├── FormPreview │ │ │ │ ├── style.less │ │ │ │ └── index.js │ │ │ ├── PreviewWrapper │ │ │ │ ├── style.less │ │ │ │ └── index.js │ │ │ ├── CarouselPreview │ │ │ │ ├── style.less │ │ │ │ └── index.js │ │ │ ├── TypographyPreview │ │ │ │ ├── style.less │ │ │ │ └── index.js │ │ │ ├── CalendarPreview │ │ │ │ ├── style.less │ │ │ │ └── index.js │ │ │ ├── TimePickerPreview │ │ │ │ └── index.js │ │ │ ├── SpinPreview │ │ │ │ └── index.js │ │ │ ├── CheckboxPreview │ │ │ │ └── index.js │ │ │ ├── SwitchPreview │ │ │ │ └── index.js │ │ │ ├── SliderPreview │ │ │ │ └── index.js │ │ │ ├── TooltipPreview │ │ │ │ └── index.js │ │ │ ├── RatePreview │ │ │ │ └── index.js │ │ │ ├── PopconfirmPreview │ │ │ │ └── index.js │ │ │ ├── DatePickerPreview │ │ │ │ └── index.js │ │ │ ├── PopoverPreview │ │ │ │ └── index.js │ │ │ ├── RadioPreview │ │ │ │ └── index.js │ │ │ ├── InputPreview │ │ │ │ └── index.js │ │ │ ├── CascaderPreview │ │ │ │ └── index.js │ │ │ ├── ProgressPreview │ │ │ │ └── index.js │ │ │ ├── MessagePreview │ │ │ │ └── index.js │ │ │ ├── PaginationPreview │ │ │ │ └── index.js │ │ │ ├── NotificationPreview │ │ │ │ └── index.js │ │ │ ├── DropdownPreview │ │ │ │ └── index.js │ │ │ ├── TabsPreview │ │ │ │ └── index.js │ │ │ ├── AvatarPreview │ │ │ │ └── index.js │ │ │ ├── TagPreview │ │ │ │ └── index.js │ │ │ ├── CollapsePreview │ │ │ │ └── index.js │ │ │ ├── SelectPreview │ │ │ │ └── index.js │ │ │ ├── TimelinePreview │ │ │ │ └── index.js │ │ │ ├── ListPreview │ │ │ │ └── index.js │ │ │ ├── TransferPreview │ │ │ │ └── index.js │ │ │ ├── AlertPreview │ │ │ │ └── index.js │ │ │ ├── CardPreview │ │ │ │ └── index.js │ │ │ ├── StepPreview │ │ │ │ └── index.js │ │ │ ├── TreePreview │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── ButtonPreview │ │ │ │ └── index.js │ │ │ ├── TreeSelectPreview │ │ │ │ └── index.js │ │ │ ├── BadgePreview │ │ │ │ └── index.js │ │ │ ├── ColorPreview │ │ │ │ ├── style.less │ │ │ │ └── index.js │ │ │ ├── ModalPreview │ │ │ │ └── index.js │ │ │ ├── MenuPreview │ │ │ │ └── index.js │ │ │ └── TablePreview │ │ │ │ └── index.js │ │ ├── component │ │ │ ├── ColorPicker │ │ │ │ ├── style.less │ │ │ │ └── index.js │ │ │ ├── Loading │ │ │ │ └── index.js │ │ │ └── ThemeCard │ │ │ │ └── style.less │ │ ├── setupTests.js │ │ ├── theme.json │ │ ├── App.test.js │ │ ├── index.css │ │ ├── styles │ │ │ ├── vars.less │ │ │ ├── components │ │ │ │ └── dashboard.less │ │ │ └── main.less │ │ ├── index.js │ │ ├── Responsive.js │ │ ├── App.css │ │ ├── Navbar │ │ │ ├── index.js │ │ │ └── index.less │ │ ├── logo.svg │ │ ├── ColorPicker.js │ │ ├── Menus.js │ │ ├── serviceWorker.js │ │ ├── light.json │ │ └── App.js │ ├── .eslintrc │ ├── .gitignore │ ├── package.json │ ├── config-overrides.js │ ├── color.js │ └── README.md └── create-react-app │ ├── src │ ├── index.css │ ├── styles │ │ ├── components │ │ │ └── dashboard.less │ │ ├── vars.less │ │ └── main.less │ ├── index.js │ ├── App.test.js │ ├── App.css │ ├── logo.svg │ ├── ColorPicker.js │ └── registerServiceWorker.js │ ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html │ ├── .gitignore │ ├── config-overrides.js │ ├── package.json │ └── color.js ├── .eslintrc.js ├── .gitignore ├── .vscode └── launch.json ├── .github └── ISSUE_TEMPLATE │ └── bug_report.md ├── package.json ├── CHANGELOG.md ├── postscc-less-parser.js └── README.md /.npmignore: -------------------------------------------------------------------------------- 1 | examples/ 2 | node_modules/ 3 | package-lock.json 4 | *.tgz -------------------------------------------------------------------------------- /examples/customize-cra/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | PUBLIC_URL=/antd-theme-generator 3 | EXTEND_ESLINT=true -------------------------------------------------------------------------------- /examples/create-react-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /examples/customize-cra/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/FormPreview/style.less: -------------------------------------------------------------------------------- 1 | .example-form { 2 | .text { 3 | text-align: center; 4 | } 5 | } -------------------------------------------------------------------------------- /examples/customize-cra/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mzohaibqc/antd-theme-generator/HEAD/examples/customize-cra/public/favicon.ico -------------------------------------------------------------------------------- /examples/customize-cra/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mzohaibqc/antd-theme-generator/HEAD/examples/customize-cra/public/favicon.png -------------------------------------------------------------------------------- /examples/customize-cra/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mzohaibqc/antd-theme-generator/HEAD/examples/customize-cra/public/logo192.png -------------------------------------------------------------------------------- /examples/customize-cra/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mzohaibqc/antd-theme-generator/HEAD/examples/customize-cra/public/logo512.png -------------------------------------------------------------------------------- /examples/customize-cra/src/component/ColorPicker/style.less: -------------------------------------------------------------------------------- 1 | .color-popover { 2 | .ant-popover-inner-content { 3 | padding: 0; 4 | } 5 | } -------------------------------------------------------------------------------- /examples/create-react-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mzohaibqc/antd-theme-generator/HEAD/examples/create-react-app/public/favicon.ico -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/PreviewWrapper/style.less: -------------------------------------------------------------------------------- 1 | .component-preview { 2 | .title { 3 | margin-bottom: 10px; 4 | } 5 | margin-bottom: 20px; 6 | } -------------------------------------------------------------------------------- /examples/customize-cra/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "react-app", 3 | "rules": { 4 | "jsx-a11y/anchor-is-valid": 0, 5 | "jsx-a11y/anchor-has-content": 0 6 | } 7 | } -------------------------------------------------------------------------------- /examples/create-react-app/src/styles/components/dashboard.less: -------------------------------------------------------------------------------- 1 | @import "../vars"; 2 | .dashboard { 3 | color: @heading-color; 4 | } 5 | 6 | .secondary { 7 | color: @secondary-color; 8 | } 9 | 10 | .component-container { 11 | padding: 10px; 12 | margin-bottom: 20px; 13 | } -------------------------------------------------------------------------------- /examples/create-react-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import { unregister } from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | unregister(); -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/CarouselPreview/style.less: -------------------------------------------------------------------------------- 1 | .ant-carousel .slick-slide { 2 | text-align: center; 3 | height: 160px; 4 | line-height: 160px; 5 | // background: #364d79; 6 | overflow: hidden; 7 | } 8 | 9 | // .ant-carousel .slick-slide h3 { 10 | // color: #fff; 11 | // } -------------------------------------------------------------------------------- /examples/customize-cra/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /examples/customize-cra/src/theme.json: -------------------------------------------------------------------------------- 1 | {"@primary-color":"@blue-6","@select-item-selected-option-color":"@primary-color","@processing-color":"@primary-color","@select-item-selected-bg":"@background-color-base","@secondary-color":"@primary-color","@skeleton-color":"@primary-color","@btn-primary-bg":"@primary-color"} -------------------------------------------------------------------------------- /examples/create-react-app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/customize-cra/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | commonjs: true, 4 | es6: true, 5 | node: true 6 | }, 7 | extends: [ 8 | 'standard' 9 | ], 10 | globals: { 11 | Atomics: 'readonly', 12 | SharedArrayBuffer: 'readonly' 13 | }, 14 | parserOptions: { 15 | ecmaVersion: 11 16 | }, 17 | rules: { 18 | semi: [2, 'always'], 19 | 'no-useless-escape': 0 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | yarn.lock 23 | 24 | *.tgz -------------------------------------------------------------------------------- /examples/create-react-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /examples/create-react-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/PreviewWrapper/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'antd'; 3 | import './style.less'; 4 | 5 | const PreviewWrapper = ({ id, title, children }) => ( 6 |
7 | 8 | {children} 9 | 10 |
11 | ); 12 | 13 | export default PreviewWrapper; 14 | -------------------------------------------------------------------------------- /examples/customize-cra/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /examples/customize-cra/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "node", 9 | "request": "launch", 10 | "name": "Launch Program", 11 | "skipFiles": [ 12 | "/**" 13 | ], 14 | "program": "${workspaceFolder}\\index.js" 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/TypographyPreview/style.less: -------------------------------------------------------------------------------- 1 | @import '~antd/lib/style/themes/default.less'; 2 | 3 | .texts { 4 | .text-row { 5 | padding-right: 40px; 6 | display: flex; 7 | justify-content: space-between; 8 | 9 | .size-base { 10 | font-family: @font-family; 11 | font-size: @font-size-base; 12 | } 13 | .size-sm { 14 | font-size: @font-size-sm; 15 | } 16 | code { 17 | font-family: @code-family; 18 | font-size: @font-size-base; 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /examples/create-react-app/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Title (Must be in English) 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | Describe your bug in English language 12 | 13 | **Show your code** 14 | Show your `config-overrides.js` file and styles folder structure 15 | 16 | **Screenshots** 17 | If applicable, add screenshots to help explain your problem. 18 | 19 | 20 | **Version** 21 | Which version is installed in your application? Try using the latest version, that may help 22 | -------------------------------------------------------------------------------- /examples/customize-cra/src/styles/vars.less: -------------------------------------------------------------------------------- 1 | // This file will contain all varibales, our custom varibales and 2 | //those from Ant Design which we want to override. 3 | @import "~antd/lib/style/themes/default.less"; 4 | @primary-color: @blue-6; 5 | @select-item-selected-option-color: @primary-color; 6 | @processing-color: @primary-color; 7 | @select-item-selected-bg: @background-color-base; 8 | @secondary-color: @primary-color; 9 | @skeleton-color: @primary-color; 10 | @btn-primary-bg: @primary-color; 11 | 12 | :root { 13 | --PC: @primary-color; 14 | } -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/CalendarPreview/style.less: -------------------------------------------------------------------------------- 1 | .components { 2 | &.calendar { 3 | .events { 4 | list-style: none; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | .events .ant-badge-status { 9 | overflow: hidden; 10 | white-space: nowrap; 11 | width: 100%; 12 | text-overflow: ellipsis; 13 | font-size: 12px; 14 | } 15 | .notes-month { 16 | text-align: center; 17 | font-size: 28px; 18 | } 19 | .notes-month section { 20 | font-size: 28px; 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /examples/create-react-app/src/styles/vars.less: -------------------------------------------------------------------------------- 1 | // This file will contain all varibales, our custom varibales and 2 | //those from Ant Design which we want to override. 3 | @import "~antd/lib/style/themes/default.less"; 4 | @secondry-color: #dddddd; 5 | @primary-color: #00375B; 6 | @text-color: #000000; 7 | @text-color-secondary: #eb2f96; 8 | // @heading-color: #ccccdd; 9 | @secondary-color: fade(@primary-color, 20%); 10 | @layout-header-background: #9e8989; 11 | @btn-primary-bg: #397dcc; 12 | @bg-color: #dddddd; 13 | @border-color-base: #ff0000; 14 | @white: #eeeeee; 15 | -------------------------------------------------------------------------------- /examples/customize-cra/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /examples/customize-cra/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /examples/create-react-app/config-overrides.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { injectBabelPlugin } = require('react-app-rewired'); 3 | const rewireLess = require('react-app-rewire-less'); 4 | const { getLessVars } = require('../../index'); 5 | /* 6 | # Config 7 | */ 8 | module.exports = function override(config, env) { 9 | config = injectBabelPlugin( 10 | ['import', { libraryName: 'antd', style: true }], 11 | config 12 | ); 13 | config = rewireLess.withLoaderOptions({ 14 | modifyVars: getLessVars(path.join(__dirname, './src/styles/vars.less')), 15 | javascriptEnabled: true 16 | })(config, env); 17 | return config; 18 | }; 19 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/TimePickerPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TimePicker } from 'antd'; 3 | import moment from 'moment'; 4 | import PreviewWrapper from '../PreviewWrapper'; 5 | // import './style.less'; 6 | 7 | const TimePickerPreview = ({ size, disabled }) => ( 8 | 9 |
10 |
11 | 12 |
13 |
14 | 15 | ); 16 | 17 | export default TimePickerPreview; 18 | -------------------------------------------------------------------------------- /examples/customize-cra/src/Responsive.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Responsive from 'react-responsive'; 3 | 4 | const XXL = props => ; 5 | const XL = props => ; 6 | const Desktop = props => ; 7 | const Tablet = props => ; 8 | const Mobile = props => ; 9 | const Default = props => ; 10 | 11 | export { 12 | XXL, 13 | XL, 14 | Desktop, 15 | Tablet, 16 | Mobile, 17 | Default 18 | }; 19 | -------------------------------------------------------------------------------- /examples/customize-cra/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/SpinPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Spin, Alert } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | // import './style.less'; 5 | 6 | const SpinPreview = ({ size, disabled }) => ( 7 | 8 |
9 |
10 | 11 | 16 | 17 |
18 |
19 | 20 | ); 21 | 22 | export default SpinPreview; 23 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/CarouselPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Carousel } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | import './style.less'; 5 | 6 | const CarouselPreview = () => ( 7 | 8 |
9 |
10 | 11 |
12 |

1

13 |
14 |
15 |

2

16 |
17 |
18 |

3

19 |
20 |
21 |

4

22 |
23 | 24 |
25 |
26 | 27 | ); 28 | 29 | export default CarouselPreview; 30 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/CheckboxPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Checkbox } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | // import './style.less'; 5 | 6 | const CheckboxPreview = ({ size, disabled }) => ( 7 | 8 |
9 |
10 | 11 | Apple 12 | Pear 13 | Orange 14 | Banana 15 | 16 |
17 |
18 | 19 | ); 20 | 21 | export default CheckboxPreview; 22 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/SwitchPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Switch } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | // import './style.less'; 5 | 6 | const SwitchPreview = ({ size, disabled }) => ( 7 | 8 |
9 |
10 | 11 | 12 | 13 |
14 |
15 | 16 | ); 17 | 18 | export default SwitchPreview; 19 | -------------------------------------------------------------------------------- /examples/create-react-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-react-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "antd": "^3.12.1", 7 | "antd-theme-generator": "^1.2.3", 8 | "glob": "^7.1.3", 9 | "react": "^16.3.2", 10 | "react-app-rewire-less": "^2.1.1", 11 | "react-app-rewired": "^1.5.2", 12 | "react-color": "^2.14.1", 13 | "react-dom": "^16.3.2", 14 | "react-scripts": "1.1.4" 15 | }, 16 | "scripts": { 17 | "start": "npm run color && react-app-rewired start", 18 | "build": "react-app-rewired build", 19 | "color": "node color.js", 20 | "test": "react-scripts test --env=jsdom", 21 | "eject": "react-scripts eject" 22 | }, 23 | "devDependencies": { 24 | "babel-plugin-import": "^1.7.0", 25 | "less-plugin-npm-import": "^2.1.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/customize-cra/src/component/Loading/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { LoadingOutlined } from '@ant-design/icons'; 3 | import { Modal } from 'antd'; 4 | 5 | const Loading = ({ pastDelay, timedOut, error }) => { 6 | if (pastDelay) { 7 | return ( 8 | 16 | 17 |

Loading...

18 | 19 | ); 20 | } else if (timedOut) { 21 | return
Taking a long time...
; 22 | } else if (error) { 23 | return
Error!
; 24 | } 25 | return null; 26 | }; 27 | 28 | export default Loading; 29 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/SliderPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Slider } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | // import './style.less'; 5 | 6 | const marks = { 7 | 0: '0°C', 8 | 26: '26°C', 9 | 37: '37°C', 10 | 100: { 11 | style: { 12 | color: '#f50' 13 | }, 14 | label: 100°C 15 | } 16 | }; 17 | 18 | const SliderPreview = ({ size, disabled }) => ( 19 | 20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 |
28 | 29 | ); 30 | 31 | export default SliderPreview; 32 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/TooltipPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Tooltip, Button } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | // import './style.less'; 5 | 6 | const TooltipPreview = () => ( 7 | 8 |
9 |
10 |
11 | 12 | 13 | 14 |
15 |
16 | 17 | 18 | 19 |
20 |
21 |
22 | 23 | ); 24 | 25 | export default TooltipPreview; 26 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/RatePreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Rate } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | // import './style.less'; 5 | 6 | const RatePreview = ({ size, disabled }) => ( 7 | 8 |
9 |
10 | 11 |
12 |
13 | 14 | good 15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 | ); 23 | 24 | export default RatePreview; 25 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/PopconfirmPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Popconfirm, message } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | // import './style.less'; 5 | 6 | function confirm() { 7 | message.success('Click on Yes'); 8 | } 9 | 10 | function cancel() { 11 | message.error('Click on No'); 12 | } 13 | 14 | 15 | const PopconfirmPreview = () => ( 16 | 17 |
18 |
19 | 26 | Delete 27 | 28 |
29 |
30 | 31 | ); 32 | 33 | export default PopconfirmPreview; 34 | -------------------------------------------------------------------------------- /examples/customize-cra/src/component/ThemeCard/style.less: -------------------------------------------------------------------------------- 1 | .theme-card { 2 | width: 320px; 3 | height: 100%; 4 | position: relative; 5 | 6 | .toggle { 7 | padding: 2px 4px; 8 | position: absolute; 9 | top: -14px; 10 | left: 20px; 11 | z-index: 1000; 12 | background: white; 13 | border: 1px solid #e8e8e8; 14 | 15 | .btn-toggle { 16 | width: 20px; 17 | } 18 | } 19 | 20 | .ant-card { 21 | display: flex; 22 | flex-direction: column; 23 | height: 100%; 24 | // overflow: hidden; 25 | 26 | &.hide { 27 | display: none; 28 | } 29 | 30 | // .ant-card-head { 31 | // cursor: cell; 32 | // } 33 | 34 | [class*="-card-body"] { 35 | flex: 1; 36 | overflow: auto; 37 | 38 | .search-fileds { 39 | padding: 18px 8px; 40 | } 41 | } 42 | 43 | .theme-card-title { 44 | display: flex; 45 | justify-content: space-between; 46 | align-items: center; 47 | } 48 | } 49 | } -------------------------------------------------------------------------------- /examples/customize-cra/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "customize-cra-sample", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "antd": "^4.7.0", 7 | "antd-theme-generator": "^1.2.10", 8 | "babel-plugin-import": "^1.13.0", 9 | "customize-cra": "^0.9.1", 10 | "less": "^3.11.1", 11 | "less-loader": "^5.0.0", 12 | "postcss": "^8.3.6", 13 | "react": "^16.13.1", 14 | "react-app-rewired": "^2.1.5", 15 | "react-color": "^2.18.1", 16 | "react-dom": "^16.13.1", 17 | "react-responsive": "^8.0.3", 18 | "react-scripts": "^3.4.3" 19 | }, 20 | "scripts": { 21 | "start": "node color.js && react-app-rewired start", 22 | "build": "react-app-rewired build", 23 | "test": "react-app-rewired test", 24 | "eject": "react-app-rewired eject", 25 | "color": "node color.js " 26 | }, 27 | "eslintConfig": { 28 | "extends": "react-app" 29 | }, 30 | "browserslist": [ 31 | ">0.2%", 32 | "not dead", 33 | "not ie <= 11", 34 | "not op_mini all" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /examples/create-react-app/color.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { generateTheme, getLessVars } = require('antd-theme-generator'); 3 | 4 | const options = { 5 | stylesDir: path.join(__dirname, './src/styles'), 6 | antDir: path.join(__dirname, './node_modules/antd'), 7 | varFile: path.join(__dirname, './src/styles/vars.less'), 8 | mainLessFile: path.join(__dirname, './src/styles/main.less'), 9 | themeVariables: [ 10 | '@primary-color', 11 | '@secondary-color', 12 | '@text-color', 13 | '@text-color-secondary', 14 | '@heading-color', 15 | '@layout-body-background', 16 | '@btn-primary-bg', 17 | '@layout-header-background', 18 | '@border-color-base', 19 | '@white' 20 | ], 21 | indexFileName: 'index.html', 22 | outputFilePath: path.join(__dirname, './public/color.less'), 23 | customColorRegexArray: [/^fade\(.*\)$/] 24 | } 25 | 26 | generateTheme(options).then(less => { 27 | console.log('Theme generated successfully'); 28 | }) 29 | .catch(error => { 30 | console.log('Error', error); 31 | }); -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/DatePickerPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { DatePicker } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | // import './style.less'; 5 | 6 | const { MonthPicker, RangePicker, WeekPicker } = DatePicker; 7 | 8 | const DatePickerPreview = ({ size, disabled }) => ( 9 | 10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 |
23 |
24 | 25 | ); 26 | 27 | export default DatePickerPreview; 28 | -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/PopoverPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Popover, Button } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | // import './style.less'; 5 | 6 | const text = Title; 7 | const content = ( 8 |
9 |

Content

10 |

Content

11 |
12 | ); 13 | 14 | const PopoverPreview = () => ( 15 | 16 |
17 |
18 |
19 | 20 | 21 | 22 |
23 |
24 | 25 | 26 | 27 |
28 |
29 |
30 | 31 | ); 32 | 33 | export default PopoverPreview; 34 | -------------------------------------------------------------------------------- /examples/create-react-app/src/styles/main.less: -------------------------------------------------------------------------------- 1 | @import "vars"; 2 | @import "./components/dashboard.less"; 3 | .logo { 4 | width: 120px; 5 | height: 31px; 6 | color: @heading-color; 7 | float: right; 8 | } 9 | 10 | .secondary-color { 11 | color: @secondary-color; 12 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC) 13 | ~'100%/100%' no-repeat; 14 | background-image: url('https://i.picsum.photos/id/51/200/300.jpg'); 15 | } 16 | -------------------------------------------------------------------------------- /examples/customize-cra/config-overrides.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const fs = require("fs"); 3 | const { override, fixBabelImports, addLessLoader } = require('customize-cra'); 4 | // const AntDesignThemePlugin = require("antd-theme-webpack-plugin"); 5 | 6 | const options = { 7 | stylesDir: path.join(__dirname, "./src/styles"), 8 | antDir: path.join(__dirname, "./node_modules/antd"), 9 | varFile: path.join(__dirname, "./src/styles/vars.less"), 10 | mainLessFile: path.join(__dirname, "./src/styles/main.less"), 11 | themeVariables: [ 12 | "@primary-color", 13 | "@secondary-color", 14 | "@text-color", 15 | "@text-color-secondary", 16 | "@heading-color", 17 | "@layout-body-background", 18 | "@btn-primary-bg", 19 | "@layout-header-background", 20 | "@border-color-base", 21 | ], 22 | generateOnce: true, // generate color.less on each compilation 23 | }; 24 | 25 | 26 | module.exports = override( 27 | fixBabelImports('import', { 28 | libraryName: 'antd', 29 | libraryDirectory: 'es', 30 | style: true, 31 | }), 32 | addLessLoader({ 33 | javascriptEnabled: true, 34 | }), 35 | ); -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/RadioPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Radio } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | // import './style.less'; 5 | 6 | const RadioPreview = ({ size, disabled }) => ( 7 | 8 |
9 |
10 | 11 | Apple 12 | Pear 13 | Banana 14 | Strawberry 15 | 16 |
17 |
18 | 19 | Hangzhou 20 | Shanghai 21 | Beijing 22 | Chengdu 23 | 24 |
25 |
26 | 27 | ); 28 | 29 | export default RadioPreview; 30 | -------------------------------------------------------------------------------- /examples/customize-cra/src/styles/components/dashboard.less: -------------------------------------------------------------------------------- 1 | @import "../vars"; 2 | .dashboard { 3 | color: @text-color; 4 | } 5 | 6 | .secondary { 7 | color: @secondary-color; 8 | } 9 | 10 | .component-container { 11 | padding: 10px; 12 | margin-bottom: 20px; 13 | } 14 | 15 | .theme-selector { 16 | width: 150px; 17 | } 18 | 19 | 20 | .preview { 21 | max-width: 1600px; 22 | 23 | .abnormal-hint { 24 | margin-bottom: 20px; 25 | } 26 | } 27 | 28 | .options { 29 | margin-top: 10px; 30 | margin-bottom: 20px; 31 | } 32 | 33 | .components { 34 | &.input { 35 | width: 500px; 36 | } 37 | &.tree { 38 | .component-row { 39 | display: flex; 40 | justify-content: space-between; 41 | } 42 | } 43 | .component-row { 44 | margin-bottom: 12px; 45 | 46 | &.calendar { 47 | width: 300px; 48 | } 49 | 50 | .component-col { 51 | display: inline-block; 52 | margin-right: 14px; 53 | 54 | .badge-square { 55 | width: 42px; 56 | height: 42px; 57 | border-radius: 4px; 58 | display: inline-block; 59 | vertical-align: middle; 60 | } 61 | } 62 | } 63 | } 64 | 65 | .ant-back-top { 66 | right: 370px !important; 67 | } -------------------------------------------------------------------------------- /examples/customize-cra/src/previews/InputPreview/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Input, InputNumber } from 'antd'; 3 | import PreviewWrapper from '../PreviewWrapper'; 4 | // import './style.less'; 5 | 6 | const { Search, TextArea } = Input; 7 | 8 | const InputPreview = ({ size, disabled }) => ( 9 | 10 |
11 |
12 | 13 |
14 |
15 | 20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 |
28 |