├── .DS_Store ├── .babelrc ├── .github └── workflows │ └── storybook.yml ├── .gitignore ├── .npmignore ├── .storybook ├── main.js └── preview.js ├── README.md ├── dist └── index.js ├── docs ├── 0.b73eaee9a88f178d62ed.manager.bundle.js ├── 0.efa30af7.iframe.bundle.js ├── 1.f296d183a17268696d73.manager.bundle.js ├── 10.9998ba67d65d81d20896.manager.bundle.js ├── 11.49c687eaa6261f8b7be2.manager.bundle.js ├── 11.49c687eaa6261f8b7be2.manager.bundle.js.LICENSE.txt ├── 12.c9538ed3766c96f289e7.manager.bundle.js ├── 4.cd155041.iframe.bundle.js ├── 4.cd155041.iframe.bundle.js.LICENSE.txt ├── 4.cd155041.iframe.bundle.js.map ├── 5.2f86965d.iframe.bundle.js ├── 5.fa71488e730c5c7f885f.manager.bundle.js ├── 5.fa71488e730c5c7f885f.manager.bundle.js.LICENSE.txt ├── 6.15b6d95b.iframe.bundle.js ├── 6.15b6d95b.iframe.bundle.js.LICENSE.txt ├── 6.15b6d95b.iframe.bundle.js.map ├── 6.8096ae4aadde0743697b.manager.bundle.js ├── 7.52f582bb.iframe.bundle.js ├── 7.b34baecbd082bc7b188d.manager.bundle.js ├── 8.15577edffecf900a8de2.manager.bundle.js ├── 9.d7d85aa0a49a98f17218.manager.bundle.js ├── favicon.ico ├── iframe.html ├── index.html ├── main.29f5a39d.iframe.bundle.js ├── main.600d6c919d9f368542ae.manager.bundle.js ├── runtime~main.909d038f912f063e8837.manager.bundle.js ├── runtime~main.9d9fa0a1.iframe.bundle.js ├── vendors~main.5ec57e1f.iframe.bundle.js ├── vendors~main.5ec57e1f.iframe.bundle.js.LICENSE.txt ├── vendors~main.5ec57e1f.iframe.bundle.js.map ├── vendors~main.d3455eed64b243c89325.manager.bundle.js └── vendors~main.d3455eed64b243c89325.manager.bundle.js.LICENSE.txt ├── index.js ├── package-lock.json ├── package.json ├── rollup.config.js ├── src ├── .DS_Store ├── assets │ ├── .DS_Store │ ├── bootstrap-grid.css │ └── styles.css ├── components │ └── FormGenerator │ │ ├── FormGenerator.js │ │ └── index.js ├── index.js ├── lib │ ├── api.js │ ├── svgs.js │ └── utils.js └── stories │ ├── FormGenerator.stories.js │ └── types.js └── webpack.config.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zayn-m/react-auto-formgenerator/f99f61be75526b89253c6038f6b4cba8166a883b/.DS_Store -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } -------------------------------------------------------------------------------- /.github/workflows/storybook.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | on: 3 | push: 4 | paths: ["stories/**", "src/components/**"] # Trigger the action only when files change in the folders defined here 5 | jobs: 6 | build-and-deploy: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - name: Checkout 🛎️ 10 | uses: actions/checkout@v2.3.1 11 | with: 12 | persist-credentials: false 13 | - name: Install and Build 🔧 14 | run: | # Install npm packages and build the Storybook files 15 | npm install 16 | npm run build-storybook 17 | - name: Deploy 🚀 18 | uses: JamesIves/github-pages-deploy-action@3.6.2 19 | with: 20 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 21 | BRANCH: main # The branch the action should deploy to. 22 | FOLDER: docs # The folder that the build-storybook script generates files. 23 | CLEAN: true # Automatically remove deleted files from the deploy branch 24 | TARGET_FOLDER: docs # The folder that we serve our Storybook files from -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | server -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .github 2 | .storybook 3 | docs 4 | package-lock.json -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "stories": [ 3 | "../src/**/*.stories.mdx", 4 | "../src/**/*.stories.@(js|jsx|ts|tsx)" 5 | ], 6 | "addons": [ 7 | "@storybook/addon-links", 8 | "@storybook/addon-essentials" 9 | ] 10 | } -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | export const parameters = { 2 | actions: { argTypesRegex: "^on[A-Z].*" }, 3 | controls: { 4 | matchers: { 5 | color: /(background|color)$/i, 6 | date: /Date$/, 7 | }, 8 | }, 9 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-Auto-FormGenerator 2 | 3 | A form generator for [React](https://reactjs.org/). If you don't want to write lot of forms then use this component to generate 4 | forms by providing array of fields and it will generate forms from it. 5 | 6 | See [react-auto-formgenerator](https://zayn-m.github.io/react-auto-formgenerator/) for live storybook. 7 | 8 | # Installation and usage 9 | 10 | The easiest way to react-auto-formgenerator is to install it from npm and build it into your app with Webpack. 11 | ``` 12 | npm install react-auto-formgenerator 13 | ``` 14 | 15 | Then use if in your app: 16 | 17 | #### With React Component 18 | 19 | ```js 20 | import { Card, CardBody, CardHeader } from 'reactstrap'; 21 | import { FormGenerator } from 'react-auto-formgenerator'; 22 | 23 | function App() { 24 | 25 | const fields = { 26 | username: { 27 | type: 'text', 28 | label: 'Username', 29 | name: 'username', 30 | col: 6, 31 | className: 'userinput' 32 | }, 33 | email: { 34 | type: 'email', 35 | label: 'Email', 36 | name: 'email', 37 | col: 6 38 | }, 39 | password: { 40 | type: 'password', 41 | label: 'Password', 42 | name: 'password', 43 | col: 6 44 | }, 45 | role: { 46 | type: 'advanceSelect', 47 | label: 'Role', 48 | name: 'role', 49 | options: [ 50 | { 51 | value: 'admin', 52 | label: 'Admin' 53 | }, 54 | { 55 | value: 'customer', 56 | label: 'Customer' 57 | } 58 | ], 59 | col: 6 60 | }, 61 | product: { 62 | type: 'advanceSelect', 63 | label: 'Product', 64 | name: 'product', 65 | target: 'http://localhost:5000/products', 66 | optionValue: 'id', 67 | optionLabel: 'name', 68 | multi: false, 69 | col: 6 70 | }, 71 | file: { 72 | type: 'file', 73 | label: 'Image', 74 | name: 'file', 75 | col: 6 76 | }, 77 | active: { 78 | type: 'switch', 79 | label: 'Active', 80 | name: 'active' 81 | }, 82 | educationSection: { 83 | label: 'Education', 84 | type: 'section', 85 | name: 'educationSection', 86 | show: false, 87 | fields: { 88 | school: { 89 | type: 'text', 90 | label: 'Name of School/College', 91 | name: 'school', 92 | col: 12 93 | } 94 | } 95 | } 96 | } 97 | 98 | return ( 99 |
100 |
101 | 102 | 103 | Add User 104 | 105 | 106 | console.log('form submitted', data)} 113 | /> 114 | 115 | 116 |
117 |
118 | ); 119 | } 120 | ``` 121 | 122 | Schema for sections, these sections act as collapsible elements which render fields. 123 | 124 | ```js 125 | export const sections = { 126 | educationSection: { 127 | label: 'Education', 128 | type: 'section', 129 | name: 'educationSection', 130 | show: false, 131 | fields: { 132 | school: { 133 | type: 'text', 134 | label: 'Name of School/College', 135 | name: 'school', 136 | col: 12 137 | } 138 | ... 139 | } 140 | } 141 | } 142 | ``` 143 | 144 | Schema for dynamic fields, these fields are added inside sections for better UI. 145 | 146 | ```js 147 | export const dynamicFields = { 148 | groupPrices: { 149 | label: 'Group Prices', 150 | type: 'repeater', 151 | name: 'groupPrices', 152 | newBtnLabel: 'Add Group Price', 153 | fields: { 154 | group: { 155 | type: 'advanceSelect', 156 | placeholder: 'Group', 157 | name: 'group', 158 | options: [ 159 | { 160 | value: 'all', 161 | label: 'All groups' 162 | }, 163 | { 164 | value: 'guest', 165 | label: 'Guest' 166 | } 167 | ], 168 | col: 4, 169 | }, 170 | qty: { 171 | type: 'number', 172 | placeholder: 'Qty', 173 | name: 'qty', 174 | col: 4 175 | }, 176 | discount: { 177 | type: 'number', 178 | placeholder: 'Discount', 179 | name: 'discount', 180 | col: 3 181 | } 182 | } 183 | } 184 | } 185 | ``` 186 | 187 | ### Props 188 | 189 | Common props you may want to specify include: 190 | 191 | - `idKey` - id key name which is used in your database, for MongoDB it is generally _id 192 | - `apiUrl` - your base api url 193 | - `fields` - object of fields which will generate form 194 | - `entity` - endpoint entity 195 | - `targetId` - record id for edit case 196 | - `submitCb` - callback function which will trigger after success submit of form 197 | - `showToast` - to display default toast 198 | - `formClassName` - class for form 199 | - `btnClassName` - class for form button 200 | 201 | ### Note 202 | 203 | This component handles server side errors as well, but errors should be in this format: 204 | 205 | ```js 206 | { 207 | "errors": { 208 | "email": "Invalid email", 209 | "username": "This field is required", 210 | "password": "Password should be between 4-20 characters", 211 | ... 212 | } 213 | } 214 | ``` 215 | 216 | If you like React-Auto-Formgenerator, please give it a star! 217 | -------------------------------------------------------------------------------- /docs/0.b73eaee9a88f178d62ed.manager.bundle.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[0],{457:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"WithTooltipPure",(function(){return WithTooltip_WithTooltipPure})),__webpack_require__.d(__webpack_exports__,"WithToolTipState",(function(){return WithTooltip_WithToolTipState})),__webpack_require__.d(__webpack_exports__,"WithTooltip",(function(){return WithTooltip_WithToolTipState}));__webpack_require__(16),__webpack_require__(50),__webpack_require__(23),__webpack_require__(4),__webpack_require__(15),__webpack_require__(9),__webpack_require__(5),__webpack_require__(13),__webpack_require__(7),__webpack_require__(10),__webpack_require__(14),__webpack_require__(17),__webpack_require__(6),__webpack_require__(38);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),esm=__webpack_require__(1),global_window=__webpack_require__(8),window_default=__webpack_require__.n(global_window),react_popper_tooltip=__webpack_require__(939),memoizerific=(__webpack_require__(77),__webpack_require__(26),__webpack_require__(168),__webpack_require__(18),__webpack_require__(28)),memoizerific_default=__webpack_require__.n(memoizerific),utils=__webpack_require__(100);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var _templateObject,_templateObject2,match=memoizerific_default()(1e3)((function(requests,actual,value){var fallback=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0;return actual.split("-")[0]===requests?value:fallback})),Arrow=esm.styled.div({position:"absolute",borderStyle:"solid"},(function(_ref){var placement=_ref.placement,x=0,y=0;switch(!0){case placement.startsWith("left")||placement.startsWith("right"):y=8;break;case placement.startsWith("top")||placement.startsWith("bottom"):x=8}return{transform:"translate3d(".concat(x,"px, ").concat(y,"px, 0px)")}}),(function(_ref2){var theme=_ref2.theme,color=_ref2.color,placement=_ref2.placement;return{bottom:"".concat(match("top",placement,-8,"auto"),"px"),top:"".concat(match("bottom",placement,-8,"auto"),"px"),right:"".concat(match("left",placement,-8,"auto"),"px"),left:"".concat(match("right",placement,-8,"auto"),"px"),borderBottomWidth:"".concat(match("top",placement,"0",8),"px"),borderTopWidth:"".concat(match("bottom",placement,"0",8),"px"),borderRightWidth:"".concat(match("left",placement,"0",8),"px"),borderLeftWidth:"".concat(match("right",placement,"0",8),"px"),borderTopColor:match("top",placement,theme.color[color]||color||"light"===theme.base?Object(utils.c)(theme.background.app):Object(utils.a)(theme.background.app),"transparent"),borderBottomColor:match("bottom",placement,theme.color[color]||color||"light"===theme.base?Object(utils.c)(theme.background.app):Object(utils.a)(theme.background.app),"transparent"),borderLeftColor:match("left",placement,theme.color[color]||color||"light"===theme.base?Object(utils.c)(theme.background.app):Object(utils.a)(theme.background.app),"transparent"),borderRightColor:match("right",placement,theme.color[color]||color||"light"===theme.base?Object(utils.c)(theme.background.app):Object(utils.a)(theme.background.app),"transparent")}})),Wrapper=esm.styled.div((function(_ref3){return{display:_ref3.hidden?"none":"inline-block",zIndex:2147483647}}),(function(_ref4){var theme=_ref4.theme,color=_ref4.color;return _ref4.hasChrome?{background:theme.color[color]||color||"light"===theme.base?Object(utils.c)(theme.background.app):Object(utils.a)(theme.background.app),filter:"\n drop-shadow(0px 5px 5px rgba(0,0,0,0.05))\n drop-shadow(0 1px 3px rgba(0,0,0,0.1))\n ",borderRadius:2*theme.appBorderRadius,fontSize:theme.typography.size.s1}:{}})),Tooltip_Tooltip=function Tooltip(_ref5){var placement=_ref5.placement,hasChrome=_ref5.hasChrome,children=_ref5.children,arrowProps=_ref5.arrowProps,tooltipRef=_ref5.tooltipRef,arrowRef=_ref5.arrowRef,color=_ref5.color,props=_objectWithoutProperties(_ref5,["placement","hasChrome","children","arrowProps","tooltipRef","arrowRef","color"]);return react_default.a.createElement(Wrapper,_extends({hasChrome:hasChrome,placement:placement,ref:tooltipRef},props,{color:color}),hasChrome&&react_default.a.createElement(Arrow,_extends({placement:placement,ref:arrowRef},arrowProps,{color:color})),children)};function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function _taggedTemplateLiteral(strings,raw){return raw||(raw=strings.slice(0)),Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}Tooltip_Tooltip.displayName="Tooltip",Tooltip_Tooltip.defaultProps={color:void 0,arrowRef:void 0,tooltipRef:void 0,hasChrome:!0,placement:"top",arrowProps:{}};var WithTooltip_document=window_default.a.document,TargetContainer=esm.styled.div(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n display: inline-block;\n cursor: ",";\n"])),(function(props){return"hover"===props.mode?"default":"pointer"})),TargetSvgContainer=esm.styled.g(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n cursor: ",";\n"])),(function(props){return"hover"===props.mode?"default":"pointer"})),WithTooltip_WithTooltipPure=function WithTooltipPure(_ref){var svg=_ref.svg,trigger=_ref.trigger,placement=(_ref.closeOnClick,_ref.placement),modifiers=_ref.modifiers,hasChrome=_ref.hasChrome,_tooltip=_ref.tooltip,children=_ref.children,tooltipShown=_ref.tooltipShown,onVisibilityChange=_ref.onVisibilityChange,props=WithTooltip_objectWithoutProperties(_ref,["svg","trigger","closeOnClick","placement","modifiers","hasChrome","tooltip","children","tooltipShown","onVisibilityChange"]),Container=svg?TargetSvgContainer:TargetContainer;return react_default.a.createElement(react_popper_tooltip.a,{placement:placement,trigger:trigger,modifiers:modifiers,tooltipShown:tooltipShown,onVisibilityChange:onVisibilityChange,tooltip:function tooltip(_ref2){var getTooltipProps=_ref2.getTooltipProps,getArrowProps=_ref2.getArrowProps,tooltipRef=_ref2.tooltipRef,arrowRef=_ref2.arrowRef,tooltipPlacement=_ref2.placement;return react_default.a.createElement(Tooltip_Tooltip,WithTooltip_extends({hasChrome:hasChrome,placement:tooltipPlacement,tooltipRef:tooltipRef,arrowRef:arrowRef,arrowProps:getArrowProps()},getTooltipProps()),"function"==typeof _tooltip?_tooltip({onHide:function onHide(){return onVisibilityChange(!1)}}):_tooltip)}},(function(_ref3){var getTriggerProps=_ref3.getTriggerProps,triggerRef=_ref3.triggerRef;return react_default.a.createElement(Container,WithTooltip_extends({ref:triggerRef},getTriggerProps(),props),children)}))};WithTooltip_WithTooltipPure.displayName="WithTooltipPure",WithTooltip_WithTooltipPure.defaultProps={svg:!1,trigger:"hover",closeOnClick:!1,placement:"top",modifiers:[{name:"preventOverflow",options:{padding:8}},{name:"offset",options:{offset:[8,8]}},{name:"arrow",options:{padding:8}}],hasChrome:!0,tooltipShown:!1};var WithTooltip_WithToolTipState=function WithToolTipState(_ref4){var startOpen=_ref4.startOpen,onChange=_ref4.onVisibilityChange,rest=WithTooltip_objectWithoutProperties(_ref4,["startOpen","onVisibilityChange"]),_useState2=_slicedToArray(Object(react.useState)(startOpen||!1),2),tooltipShown=_useState2[0],setTooltipShown=_useState2[1],onVisibilityChange=Object(react.useCallback)((function(visibility){onChange&&!1===onChange(visibility)||setTooltipShown(visibility)}),[onChange]);return Object(react.useEffect)((function(){var hide=function hide(){return onVisibilityChange(!1)};WithTooltip_document.addEventListener("keydown",hide,!1);var iframes=Array.from(WithTooltip_document.getElementsByTagName("iframe")),unbinders=[];return iframes.forEach((function(iframe){var bind=function bind(){try{iframe.contentWindow.document&&(iframe.contentWindow.document.addEventListener("click",hide),unbinders.push((function(){try{iframe.contentWindow.document.removeEventListener("click",hide)}catch(e){}})))}catch(e){}};bind(),iframe.addEventListener("load",bind),unbinders.push((function(){iframe.removeEventListener("load",bind)}))})),function(){WithTooltip_document.removeEventListener("keydown",hide),unbinders.forEach((function(unbind){unbind()}))}})),react_default.a.createElement(WithTooltip_WithTooltipPure,WithTooltip_extends({},rest,{tooltipShown:tooltipShown,onVisibilityChange:onVisibilityChange}))};WithTooltip_WithToolTipState.displayName="WithToolTipState"}}]); -------------------------------------------------------------------------------- /docs/10.9998ba67d65d81d20896.manager.bundle.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[10],{865:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"SyntaxHighlighter",(function(){return syntaxhighlighter_SyntaxHighlighter}));__webpack_require__(87),__webpack_require__(42),__webpack_require__(43),__webpack_require__(15),__webpack_require__(110),__webpack_require__(4),__webpack_require__(9),__webpack_require__(5),__webpack_require__(13),__webpack_require__(6),__webpack_require__(7),__webpack_require__(10),__webpack_require__(16),__webpack_require__(14),__webpack_require__(17),__webpack_require__(41),__webpack_require__(23);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),esm=__webpack_require__(25),dist_esm=__webpack_require__(1),global_window=__webpack_require__(8),window_default=__webpack_require__.n(global_window),memoizerific=__webpack_require__(28),memoizerific_default=__webpack_require__.n(memoizerific),jsx=__webpack_require__(919),bash=__webpack_require__(926),css=__webpack_require__(928),js_extras=__webpack_require__(917),json=__webpack_require__(920),graphql=__webpack_require__(933),markup=__webpack_require__(929),markdown=__webpack_require__(924),yaml=__webpack_require__(922),tsx=__webpack_require__(930),typescript=__webpack_require__(932),prism_light=__webpack_require__(940),ActionBar=__webpack_require__(862),ScrollArea=__webpack_require__(406),dist=__webpack_require__(33),dist_default=__webpack_require__.n(dist),formatter=memoizerific_default()(2)((function(code){return dist_default()(code)}));function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i 5 | * @author Lea Verou 6 | * @namespace 7 | * @public 8 | */ 9 | -------------------------------------------------------------------------------- /docs/4.cd155041.iframe.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"4.cd155041.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""} -------------------------------------------------------------------------------- /docs/5.2f86965d.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{494:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return TooltipNote}));__webpack_require__(136),__webpack_require__(25),__webpack_require__(5);var react__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Note=__webpack_require__(1).styled.div((function(_ref){var theme=_ref.theme;return{padding:"2px 6px",lineHeight:"16px",fontSize:10,fontWeight:theme.typography.weight.bold,color:theme.color.lightest,boxShadow:"0 0 5px 0 rgba(0, 0, 0, 0.3)",borderRadius:4,whiteSpace:"nowrap",pointerEvents:"none",zIndex:-1,background:"rgba(0, 0, 0, 0.4)",margin:6}})),TooltipNote=function TooltipNote(_ref2){var note=_ref2.note,props=_objectWithoutProperties(_ref2,["note"]);return react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(Note,props,note)};TooltipNote.displayName="TooltipNote"},922:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"ColorControl",(function(){return Color_ColorControl}));__webpack_require__(25),__webpack_require__(5),__webpack_require__(10),__webpack_require__(9),__webpack_require__(23),__webpack_require__(18),__webpack_require__(14),__webpack_require__(17),__webpack_require__(29),__webpack_require__(26),__webpack_require__(19),__webpack_require__(134),__webpack_require__(111),__webpack_require__(30),__webpack_require__(28),__webpack_require__(135),__webpack_require__(52),__webpack_require__(133),__webpack_require__(63),__webpack_require__(16),__webpack_require__(49),__webpack_require__(8);var react=__webpack_require__(0),react_default=__webpack_require__.n(react);function index_module_l(){return(index_module_l=Object.assign||function(e){for(var r=1;r=0||(n[t]=e[t]);return n}var index_module_c="undefined"!=typeof window?react.useLayoutEffect:react.useEffect;function index_module_i(e){var r=Object(react.useRef)(e);return Object(react.useEffect)((function(){r.current=e})),Object(react.useCallback)((function(e){return r.current&&r.current(e)}),[])}var index_module_s,index_module_f=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e0:e.buttons>0)&&m.current?C(index_module_d(m.current,e)):_(!1)}),[C]),H=Object(react.useCallback)((function(e){var r,t=e.nativeEvent,o=m.current;index_module_h(t),r=t,g.current&&!index_module_v(r)||(g.current||(g.current=index_module_v(r)),0)||!o||(o.focus(),C(index_module_d(o,t)),_(!0))}),[C]),M=Object(react.useCallback)((function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),x({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))}),[x]),N=Object(react.useCallback)((function(){return _(!1)}),[]),w=Object(react.useCallback)((function(e){var r=e?window.addEventListener:window.removeEventListener;r(g.current?"touchmove":"mousemove",E),r(g.current?"touchend":"mouseup",N)}),[E,N]);return index_module_c((function(){return w(b),function(){b&&w(!1)}}),[b,w]),react_default.a.createElement("div",index_module_l({},f,{className:"react-colorful__interactive",ref:m,onTouchStart:H,onMouseDown:H,onKeyDown:M,tabIndex:0,role:"slider"}))})),index_module_g=function(e){return e.filter(Boolean).join(" ")},index_module_p=function(r){var t=r.color,o=r.left,n=r.top,a=void 0===n?.5:n,l=index_module_g(["react-colorful__pointer",r.className]);return react_default.a.createElement("div",{className:l,style:{top:100*a+"%",left:100*o+"%"}},react_default.a.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},index_module_b=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},index_module_={grad:.9,turn:360,rad:360/(2*Math.PI)},index_module_C=function(e){return"#"===e[0]&&(e=e.substr(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:1}:{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16),a:1}},index_module_x=function(e,r){return void 0===r&&(r="deg"),Number(e)*(index_module_[r]||1)},index_module_E=function(e){var r=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?index_module_M({h:index_module_x(r[1],r[2]),s:Number(r[3]),l:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},index_module_M=function(e){var r=e.s,t=e.l;return{h:e.h,s:(r*=(t<50?t:100-t)/100)>0?2*r/(t+r)*100:0,v:t+r,a:e.a}},index_module_N=function(e){var r=e.s,t=e.v,o=e.a,n=(200-r)*t/100;return{h:index_module_b(e.h),s:index_module_b(n>0&&n<200?r*t/100/(n<=100?n:200-n)*100:0),l:index_module_b(n/2),a:index_module_b(o,2)}},index_module_w=function(e){var r=index_module_N(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},y=function(e){var r=index_module_N(e);return"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")"},q=function(e){var r=e.h,t=e.s,o=e.v,n=e.a;r=r/360*6,t/=100,o/=100;var a=Math.floor(r),l=o*(1-t),u=o*(1-(r-a)*t),c=o*(1-(1-r+a)*t),i=a%6;return{r:index_module_b(255*[o,u,l,l,c,o][i]),g:index_module_b(255*[c,o,o,u,l,l][i]),b:index_module_b(255*[l,l,c,o,o,u][i]),a:index_module_b(n,2)}},I=function(e){var r=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?B({r:Number(r[1])/(r[2]?100/255:1),g:Number(r[3])/(r[4]?100/255:1),b:Number(r[5])/(r[6]?100/255:1),a:void 0===r[7]?1:Number(r[7])/(r[8]?100:1)}):{h:0,s:0,v:0,a:1}},z=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},B=function(e){var r=e.r,t=e.g,o=e.b,n=e.a,a=Math.max(r,t,o),l=a-Math.min(r,t,o),u=l?a===r?(t-o)/l:a===t?2+(o-r)/l:4+(r-t)/l:0;return{h:index_module_b(60*(u<0?u+6:u)),s:index_module_b(a?l/a*100:0),v:index_module_b(a/255*100),a:n}},A=react_default.a.memo((function(r){var t=r.hue,o=r.onChange,n=index_module_g(["react-colorful__hue",r.className]);return react_default.a.createElement("div",{className:n},react_default.a.createElement(index_module_m,{onMove:function(e){o({h:360*e.left})},onKey:function(e){o({h:index_module_f(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuetext":index_module_b(t)},react_default.a.createElement(index_module_p,{className:"react-colorful__hue-pointer",left:t/360,color:index_module_w({h:t,s:100,v:100,a:1})})))})),L=react_default.a.memo((function(r){var t=r.hsva,o=r.onChange,n={backgroundColor:index_module_w({h:t.h,s:100,v:100,a:1})};return react_default.a.createElement("div",{className:"react-colorful__saturation",style:n},react_default.a.createElement(index_module_m,{onMove:function(e){o({s:100*e.left,v:100-100*e.top})},onKey:function(e){o({s:index_module_f(t.s+100*e.left,0,100),v:index_module_f(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+index_module_b(t.s)+"%, Brightness "+index_module_b(t.v)+"%"},react_default.a.createElement(index_module_p,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:index_module_w(t)})))})),D=function(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0},F=function(e,r){return e.replace(/\s/g,"")===r.replace(/\s/g,"")};function S(e,r,l){var u=index_module_i(l),c=Object(react.useState)((function(){return e.toHsva(r)})),s=c[0],f=c[1],v=Object(react.useRef)({color:r,hsva:s});Object(react.useEffect)((function(){if(!e.equal(r,v.current.color)){var t=e.toHsva(r);v.current={hsva:t,color:r},f(t)}}),[r,e]),Object(react.useEffect)((function(){var r;D(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r))}),[s,e,u]);var d=Object(react.useCallback)((function(e){f((function(r){return Object.assign({},r,e)}))}),[]);return[s,d]}var P,_ColorPicker,_fallbackColor,Y=function(){index_module_c((function(){if("undefined"!=typeof document&&!P){(P=document.createElement("style")).innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}';var e=index_module_s||__webpack_require__.nc;e&&P.setAttribute("nonce",e),document.head.appendChild(P)}}),[])},$=function(r){var t=r.className,o=r.colorModel,n=r.color,a=void 0===n?o.defaultColor:n,c=r.onChange,i=index_module_u(r,["className","colorModel","color","onChange"]);Y();var s=S(o,a,c),f=s[0],v=s[1],d=index_module_g(["react-colorful",t]);return react_default.a.createElement("div",index_module_l({},i,{className:d}),react_default.a.createElement(L,{hsva:f,onChange:v}),react_default.a.createElement(A,{hue:f.h,onChange:v,className:"react-colorful__last-control"}))},R={defaultColor:"000",toHsva:function(e){return B(index_module_C(e))},fromHsva:function(e){return t=(r=q(e)).g,o=r.b,"#"+z(r.r)+z(t)+z(o);var r,t,o},equal:function(e,r){return e.toLowerCase()===r.toLowerCase()||D(index_module_C(e),index_module_C(r))}},J=function(r){var t=r.className,o=r.hsva,n=r.onChange,a={backgroundImage:"linear-gradient(90deg, "+y(Object.assign({},o,{a:0}))+", "+y(Object.assign({},o,{a:1}))+")"},l=index_module_g(["react-colorful__alpha",t]);return react_default.a.createElement("div",{className:l},react_default.a.createElement("div",{className:"react-colorful__alpha-gradient",style:a}),react_default.a.createElement(index_module_m,{onMove:function(e){n({a:e.left})},onKey:function(e){n({a:index_module_f(o.a+e.left)})},"aria-label":"Alpha","aria-valuetext":index_module_b(100*o.a)+"%"},react_default.a.createElement(index_module_p,{className:"react-colorful__alpha-pointer",left:o.a,color:y(o)})))},Q=function(r){var t=r.className,o=r.colorModel,n=r.color,a=void 0===n?o.defaultColor:n,c=r.onChange,i=index_module_u(r,["className","colorModel","color","onChange"]);Y();var s=S(o,a,c),f=s[0],v=s[1],d=index_module_g(["react-colorful",t]);return react_default.a.createElement("div",index_module_l({},i,{className:d}),react_default.a.createElement(L,{hsva:f,onChange:v}),react_default.a.createElement(A,{hue:f.h,onChange:v}),react_default.a.createElement(J,{hsva:f,onChange:v,className:"react-colorful__last-control"}))},W={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:index_module_E,fromHsva:y,equal:F},he={defaultColor:"rgba(0, 0, 0, 1)",toHsva:I,fromHsva:function(e){var r=q(e);return"rgba("+r.r+", "+r.g+", "+r.b+", "+r.a+")"},equal:F},color_convert=__webpack_require__(978),color_convert_default=__webpack_require__.n(color_convert),throttle=__webpack_require__(981),throttle_default=__webpack_require__.n(throttle),esm=__webpack_require__(1),TooltipNote=__webpack_require__(494),lazy_WithTooltip=__webpack_require__(171),esm_form=__webpack_require__(53),icon=__webpack_require__(45),helpers=__webpack_require__(44);function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Wrapper=esm.styled.div({position:"relative",maxWidth:250}),PickerTooltip=Object(esm.styled)(lazy_WithTooltip.a)({position:"absolute",zIndex:1,top:4,left:4}),TooltipContent=esm.styled.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Note=Object(esm.styled)(TooltipNote.a)((function(_ref){return{fontFamily:_ref.theme.typography.fonts.base}})),Swatches=esm.styled.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),SwatchColor=esm.styled.div((function(_ref2){var theme=_ref2.theme;return{width:16,height:16,boxShadow:_ref2.active?"".concat(theme.appBorderColor," 0 0 0 1px inset, ").concat(theme.color.mediumdark,"50 0 0 0 4px"):"".concat(theme.appBorderColor," 0 0 0 1px inset"),borderRadius:theme.appBorderRadius}})),Color_Swatch=function Swatch(_ref3){var value=_ref3.value,active=_ref3.active,onClick=_ref3.onClick,style=_ref3.style,props=_objectWithoutProperties(_ref3,["value","active","onClick","style"]),backgroundImage="linear-gradient(".concat(value,", ").concat(value,"), ").concat('url(\'data:image/svg+xml;charset=utf-8,\')',", linear-gradient(#fff, #fff)");return react_default.a.createElement(SwatchColor,_extends({},props,{active:active,onClick:onClick,style:Object.assign({},style,{backgroundImage:backgroundImage})}))};Color_Swatch.displayName="Swatch";var ColorSpace,Input=Object(esm.styled)(esm_form.a.Input)((function(_ref4){return{width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:_ref4.theme.typography.fonts.base}})),ToggleIcon=Object(esm.styled)(icon.a)((function(_ref5){return{position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:_ref5.theme.input.color}}));!function(ColorSpace){ColorSpace.RGB="rgb",ColorSpace.HSL="hsl",ColorSpace.HEX="hex"}(ColorSpace||(ColorSpace={}));var COLOR_SPACES=Object.values(ColorSpace),COLOR_REGEXP=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,RGB_REGEXP=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,HSL_REGEXP=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,HEX_REGEXP=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,SHORTHEX_REGEXP=/^\s*#?([0-9a-f]{3})\s*$/i,ColorPicker=(_defineProperty(_ColorPicker={},ColorSpace.HEX,(function(r){return react_default.a.createElement($,index_module_l({},r,{colorModel:R}))})),_defineProperty(_ColorPicker,ColorSpace.RGB,(function(r){return react_default.a.createElement(Q,index_module_l({},r,{colorModel:he}))})),_defineProperty(_ColorPicker,ColorSpace.HSL,(function(r){return react_default.a.createElement(Q,index_module_l({},r,{colorModel:W}))})),_ColorPicker),fallbackColor=(_defineProperty(_fallbackColor={},ColorSpace.HEX,"transparent"),_defineProperty(_fallbackColor,ColorSpace.RGB,"rgba(0, 0, 0, 0)"),_defineProperty(_fallbackColor,ColorSpace.HSL,"hsla(0, 0%, 0%, 0)"),_fallbackColor),stringToArgs=function stringToArgs(value){var match=null==value?void 0:value.match(COLOR_REGEXP);if(!match)return[0,0,0,1];var _match=_slicedToArray(match,5),x=_match[1],y=_match[2],z=_match[3],_match$=_match[4];return[x,y,z,void 0===_match$?1:_match$].map(Number)},Color_parseValue=function parseValue(value){var _ref12;if(value){var valid=!0;if(RGB_REGEXP.test(value)){var _ref8,_stringToArgs2=_slicedToArray(stringToArgs(value),4),r=_stringToArgs2[0],g=_stringToArgs2[1],b=_stringToArgs2[2],a=_stringToArgs2[3],_ref7=_slicedToArray(color_convert_default.a.rgb.hsl([r,g,b])||[0,0,0],3),h=_ref7[0],s=_ref7[1],l=_ref7[2];return _defineProperty(_ref8={valid:valid,value:value,keyword:color_convert_default.a.rgb.keyword([r,g,b]),colorSpace:ColorSpace.RGB},ColorSpace.RGB,value),_defineProperty(_ref8,ColorSpace.HSL,"hsla(".concat(h,", ").concat(s,"%, ").concat(l,"%, ").concat(a,")")),_defineProperty(_ref8,ColorSpace.HEX,"#".concat(color_convert_default.a.rgb.hex([r,g,b]).toLowerCase())),_ref8}if(HSL_REGEXP.test(value)){var _ref11,_stringToArgs4=_slicedToArray(stringToArgs(value),4),_h=_stringToArgs4[0],_s2=_stringToArgs4[1],_l=_stringToArgs4[2],_a=_stringToArgs4[3],_ref10=_slicedToArray(color_convert_default.a.hsl.rgb([_h,_s2,_l])||[0,0,0],3),_r=_ref10[0],_g=_ref10[1],_b=_ref10[2];return _defineProperty(_ref11={valid:valid,value:value,keyword:color_convert_default.a.hsl.keyword([_h,_s2,_l]),colorSpace:ColorSpace.HSL},ColorSpace.RGB,"rgba(".concat(_r,", ").concat(_g,", ").concat(_b,", ").concat(_a,")")),_defineProperty(_ref11,ColorSpace.HSL,value),_defineProperty(_ref11,ColorSpace.HEX,"#".concat(color_convert_default.a.hsl.hex([_h,_s2,_l]).toLowerCase())),_ref11}var plain=value.replace("#",""),rgb=color_convert_default.a.keyword.rgb(plain)||color_convert_default.a.hex.rgb(plain),hsl=color_convert_default.a.rgb.hsl(rgb),mapped=value;if(/[^#a-f0-9]/i.test(value)?mapped=plain:HEX_REGEXP.test(value)&&(mapped="#".concat(plain)),mapped.startsWith("#"))valid=HEX_REGEXP.test(mapped);else try{color_convert_default.a.keyword.hex(mapped)}catch(e){valid=!1}return _defineProperty(_ref12={valid:valid,value:mapped,keyword:color_convert_default.a.rgb.keyword(rgb),colorSpace:ColorSpace.HEX},ColorSpace.RGB,"rgba(".concat(rgb[0],", ").concat(rgb[1],", ").concat(rgb[2],", 1)")),_defineProperty(_ref12,ColorSpace.HSL,"hsla(".concat(hsl[0],", ").concat(hsl[1],"%, ").concat(hsl[2],"%, 1)")),_defineProperty(_ref12,ColorSpace.HEX,mapped),_ref12}},Color_useColorInput=function useColorInput(initialValue,onChange){var _useState2=_slicedToArray(Object(react.useState)(initialValue||""),2),value=_useState2[0],setValue=_useState2[1],_useState4=_slicedToArray(Object(react.useState)((function(){return Color_parseValue(value)})),2),color=_useState4[0],setColor=_useState4[1],_useState6=_slicedToArray(Object(react.useState)((null==color?void 0:color.colorSpace)||ColorSpace.HEX),2),colorSpace=_useState6[0],setColorSpace=_useState6[1];Object(react.useEffect)((function(){void 0===initialValue&&(setValue(""),setColor(void 0),setColorSpace(ColorSpace.HEX))}),[initialValue]);var realValue=Object(react.useMemo)((function(){return function getRealValue(value,color,colorSpace){if(!value||null==color||!color.valid)return fallbackColor[colorSpace];if(colorSpace!==ColorSpace.HEX)return(null==color?void 0:color[colorSpace])||fallbackColor[colorSpace];if(!color.hex.startsWith("#"))try{return"#".concat(color_convert_default.a.keyword.hex(color.hex))}catch(e){return fallbackColor.hex}var short=color.hex.match(SHORTHEX_REGEXP);if(!short)return HEX_REGEXP.test(color.hex)?color.hex:fallbackColor.hex;var _short$1$split2=_slicedToArray(short[1].split(""),3),r=_short$1$split2[0],g=_short$1$split2[1],b=_short$1$split2[2];return"#".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b)}(value,color,colorSpace).toLowerCase()}),[value,color,colorSpace]),updateValue=Object(react.useCallback)((function(update){var parsed=Color_parseValue(update);setValue((null==parsed?void 0:parsed.value)||update||""),parsed&&(setColor(parsed),setColorSpace(parsed.colorSpace),onChange(parsed.value))}),[onChange]),cycleColorSpace=Object(react.useCallback)((function(){var next=COLOR_SPACES.indexOf(colorSpace)+1;next>=COLOR_SPACES.length&&(next=0),setColorSpace(COLOR_SPACES[next]);var update=(null==color?void 0:color[COLOR_SPACES[next]])||"";setValue(update),onChange(update)}),[color,colorSpace,onChange]);return{value:value,realValue:realValue,updateValue:updateValue,color:color,colorSpace:colorSpace,cycleColorSpace:cycleColorSpace}},id=function id(value){return value.replace(/\s*/,"").toLowerCase()},Color_ColorControl=function ColorControl(_ref13){var name=_ref13.name,initialValue=_ref13.value,onChange=_ref13.onChange,onFocus=_ref13.onFocus,onBlur=_ref13.onBlur,presetColors=_ref13.presetColors,startOpen=_ref13.startOpen,_useColorInput=Color_useColorInput(initialValue,throttle_default()(onChange,200)),value=_useColorInput.value,realValue=_useColorInput.realValue,updateValue=_useColorInput.updateValue,color=_useColorInput.color,colorSpace=_useColorInput.colorSpace,cycleColorSpace=_useColorInput.cycleColorSpace,_usePresets=function usePresets(presetColors,currentColor,colorSpace){var _useState8=_slicedToArray(Object(react.useState)(null!=currentColor&¤tColor.valid?[currentColor]:[]),2),selectedColors=_useState8[0],setSelectedColors=_useState8[1];Object(react.useEffect)((function(){void 0===currentColor&&setSelectedColors([])}),[currentColor]);var presets=Object(react.useMemo)((function(){return(presetColors||[]).map((function(preset){return"string"==typeof preset?Color_parseValue(preset):preset.title?Object.assign({},Color_parseValue(preset.color),{keyword:preset.title}):Color_parseValue(preset.color)})).concat(selectedColors).filter(Boolean).slice(-27)}),[presetColors,selectedColors]),addPreset=Object(react.useCallback)((function(color){null!=color&&color.valid&&(presets.some((function(preset){return id(preset[colorSpace])===id(color[colorSpace])}))||setSelectedColors((function(arr){return arr.concat(color)})))}),[colorSpace,presets]);return{presets:presets,addPreset:addPreset}}(presetColors,color,colorSpace),presets=_usePresets.presets,addPreset=_usePresets.addPreset,Picker=ColorPicker[colorSpace];return react_default.a.createElement(Wrapper,null,react_default.a.createElement(PickerTooltip,{trigger:"click",startOpen:startOpen,closeOnClick:!0,onVisibilityChange:function onVisibilityChange(){return addPreset(color)},tooltip:react_default.a.createElement(TooltipContent,null,react_default.a.createElement(Picker,{color:"transparent"===realValue?"#000000":realValue,onChange:updateValue,onFocus:onFocus,onBlur:onBlur}),presets.length>0&&react_default.a.createElement(Swatches,null,presets.map((function(preset,index){return react_default.a.createElement(lazy_WithTooltip.a,{key:"".concat(preset.value,"-").concat(index),hasChrome:!1,tooltip:react_default.a.createElement(Note,{note:preset.keyword||preset.value})},react_default.a.createElement(Color_Swatch,{value:preset[colorSpace],active:color&&id(preset[colorSpace])===id(color[colorSpace]),onClick:function onClick(){return updateValue(preset.value)}}))}))))},react_default.a.createElement(Color_Swatch,{value:realValue,style:{margin:4}})),react_default.a.createElement(Input,{id:Object(helpers.a)(name),value:value,onChange:function onChange(e){return updateValue(e.target.value)},onFocus:function onFocus(e){return e.target.select()},placeholder:"Choose color..."}),react_default.a.createElement(ToggleIcon,{icon:"markup",onClick:cycleColorSpace}))};Color_ColorControl.displayName="ColorControl";__webpack_exports__.default=Color_ColorControl},939:function(module,exports,__webpack_require__){const cssKeywords=__webpack_require__(979),reverseKeywords={};for(const key of Object.keys(cssKeywords))reverseKeywords[cssKeywords[key]]=key;const convert={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};module.exports=convert;for(const model of Object.keys(convert)){if(!("channels"in convert[model]))throw new Error("missing channels property: "+model);if(!("labels"in convert[model]))throw new Error("missing channel labels property: "+model);if(convert[model].labels.length!==convert[model].channels)throw new Error("channel and label counts mismatch: "+model);const{channels:channels,labels:labels}=convert[model];delete convert[model].channels,delete convert[model].labels,Object.defineProperty(convert[model],"channels",{value:channels}),Object.defineProperty(convert[model],"labels",{value:labels})}convert.rgb.hsl=function(rgb){const r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,min=Math.min(r,g,b),max=Math.max(r,g,b),delta=max-min;let h,s;max===min?h=0:r===max?h=(g-b)/delta:g===max?h=2+(b-r)/delta:b===max&&(h=4+(r-g)/delta),h=Math.min(60*h,360),h<0&&(h+=360);const l=(min+max)/2;return s=max===min?0:l<=.5?delta/(max+min):delta/(2-max-min),[h,100*s,100*l]},convert.rgb.hsv=function(rgb){let rdif,gdif,bdif,h,s;const r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,v=Math.max(r,g,b),diff=v-Math.min(r,g,b),diffc=function(c){return(v-c)/6/diff+.5};return 0===diff?(h=0,s=0):(s=diff/v,rdif=diffc(r),gdif=diffc(g),bdif=diffc(b),r===v?h=bdif-gdif:g===v?h=1/3+rdif-bdif:b===v&&(h=2/3+gdif-rdif),h<0?h+=1:h>1&&(h-=1)),[360*h,100*s,100*v]},convert.rgb.hwb=function(rgb){const r=rgb[0],g=rgb[1];let b=rgb[2];const h=convert.rgb.hsl(rgb)[0],w=1/255*Math.min(r,Math.min(g,b));return b=1-1/255*Math.max(r,Math.max(g,b)),[h,100*w,100*b]},convert.rgb.cmyk=function(rgb){const r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,k=Math.min(1-r,1-g,1-b);return[100*((1-r-k)/(1-k)||0),100*((1-g-k)/(1-k)||0),100*((1-b-k)/(1-k)||0),100*k]},convert.rgb.keyword=function(rgb){const reversed=reverseKeywords[rgb];if(reversed)return reversed;let currentClosestKeyword,currentClosestDistance=1/0;for(const keyword of Object.keys(cssKeywords)){const value=cssKeywords[keyword],distance=(y=value,((x=rgb)[0]-y[0])**2+(x[1]-y[1])**2+(x[2]-y[2])**2);distance.04045?((r+.055)/1.055)**2.4:r/12.92,g=g>.04045?((g+.055)/1.055)**2.4:g/12.92,b=b>.04045?((b+.055)/1.055)**2.4:b/12.92;return[100*(.4124*r+.3576*g+.1805*b),100*(.2126*r+.7152*g+.0722*b),100*(.0193*r+.1192*g+.9505*b)]},convert.rgb.lab=function(rgb){const xyz=convert.rgb.xyz(rgb);let x=xyz[0],y=xyz[1],z=xyz[2];x/=95.047,y/=100,z/=108.883,x=x>.008856?x**(1/3):7.787*x+16/116,y=y>.008856?y**(1/3):7.787*y+16/116,z=z>.008856?z**(1/3):7.787*z+16/116;return[116*y-16,500*(x-y),200*(y-z)]},convert.hsl.rgb=function(hsl){const h=hsl[0]/360,s=hsl[1]/100,l=hsl[2]/100;let t2,t3,val;if(0===s)return val=255*l,[val,val,val];t2=l<.5?l*(1+s):l+s-l*s;const t1=2*l-t2,rgb=[0,0,0];for(let i=0;i<3;i++)t3=h+1/3*-(i-1),t3<0&&t3++,t3>1&&t3--,val=6*t3<1?t1+6*(t2-t1)*t3:2*t3<1?t2:3*t3<2?t1+(t2-t1)*(2/3-t3)*6:t1,rgb[i]=255*val;return rgb},convert.hsl.hsv=function(hsl){const h=hsl[0];let s=hsl[1]/100,l=hsl[2]/100,smin=s;const lmin=Math.max(l,.01);l*=2,s*=l<=1?l:2-l,smin*=lmin<=1?lmin:2-lmin;return[h,100*(0===l?2*smin/(lmin+smin):2*s/(l+s)),100*((l+s)/2)]},convert.hsv.rgb=function(hsv){const h=hsv[0]/60,s=hsv[1]/100;let v=hsv[2]/100;const hi=Math.floor(h)%6,f=h-Math.floor(h),p=255*v*(1-s),q=255*v*(1-s*f),t=255*v*(1-s*(1-f));switch(v*=255,hi){case 0:return[v,t,p];case 1:return[q,v,p];case 2:return[p,v,t];case 3:return[p,q,v];case 4:return[t,p,v];case 5:return[v,p,q]}},convert.hsv.hsl=function(hsv){const h=hsv[0],s=hsv[1]/100,v=hsv[2]/100,vmin=Math.max(v,.01);let sl,l;l=(2-s)*v;const lmin=(2-s)*vmin;return sl=s*vmin,sl/=lmin<=1?lmin:2-lmin,sl=sl||0,l/=2,[h,100*sl,100*l]},convert.hwb.rgb=function(hwb){const h=hwb[0]/360;let wh=hwb[1]/100,bl=hwb[2]/100;const ratio=wh+bl;let f;ratio>1&&(wh/=ratio,bl/=ratio);const i=Math.floor(6*h),v=1-bl;f=6*h-i,0!=(1&i)&&(f=1-f);const n=wh+f*(v-wh);let r,g,b;switch(i){default:case 6:case 0:r=v,g=n,b=wh;break;case 1:r=n,g=v,b=wh;break;case 2:r=wh,g=v,b=n;break;case 3:r=wh,g=n,b=v;break;case 4:r=n,g=wh,b=v;break;case 5:r=v,g=wh,b=n}return[255*r,255*g,255*b]},convert.cmyk.rgb=function(cmyk){const c=cmyk[0]/100,m=cmyk[1]/100,y=cmyk[2]/100,k=cmyk[3]/100;return[255*(1-Math.min(1,c*(1-k)+k)),255*(1-Math.min(1,m*(1-k)+k)),255*(1-Math.min(1,y*(1-k)+k))]},convert.xyz.rgb=function(xyz){const x=xyz[0]/100,y=xyz[1]/100,z=xyz[2]/100;let r,g,b;return r=3.2406*x+-1.5372*y+-.4986*z,g=-.9689*x+1.8758*y+.0415*z,b=.0557*x+-.204*y+1.057*z,r=r>.0031308?1.055*r**(1/2.4)-.055:12.92*r,g=g>.0031308?1.055*g**(1/2.4)-.055:12.92*g,b=b>.0031308?1.055*b**(1/2.4)-.055:12.92*b,r=Math.min(Math.max(0,r),1),g=Math.min(Math.max(0,g),1),b=Math.min(Math.max(0,b),1),[255*r,255*g,255*b]},convert.xyz.lab=function(xyz){let x=xyz[0],y=xyz[1],z=xyz[2];x/=95.047,y/=100,z/=108.883,x=x>.008856?x**(1/3):7.787*x+16/116,y=y>.008856?y**(1/3):7.787*y+16/116,z=z>.008856?z**(1/3):7.787*z+16/116;return[116*y-16,500*(x-y),200*(y-z)]},convert.lab.xyz=function(lab){let x,y,z;y=(lab[0]+16)/116,x=lab[1]/500+y,z=y-lab[2]/200;const y2=y**3,x2=x**3,z2=z**3;return y=y2>.008856?y2:(y-16/116)/7.787,x=x2>.008856?x2:(x-16/116)/7.787,z=z2>.008856?z2:(z-16/116)/7.787,x*=95.047,y*=100,z*=108.883,[x,y,z]},convert.lab.lch=function(lab){const l=lab[0],a=lab[1],b=lab[2];let h;h=360*Math.atan2(b,a)/2/Math.PI,h<0&&(h+=360);return[l,Math.sqrt(a*a+b*b),h]},convert.lch.lab=function(lch){const l=lch[0],c=lch[1],hr=lch[2]/360*2*Math.PI;return[l,c*Math.cos(hr),c*Math.sin(hr)]},convert.rgb.ansi16=function(args,saturation=null){const[r,g,b]=args;let value=null===saturation?convert.rgb.hsv(args)[2]:saturation;if(value=Math.round(value/50),0===value)return 30;let ansi=30+(Math.round(b/255)<<2|Math.round(g/255)<<1|Math.round(r/255));return 2===value&&(ansi+=60),ansi},convert.hsv.ansi16=function(args){return convert.rgb.ansi16(convert.hsv.rgb(args),args[2])},convert.rgb.ansi256=function(args){const r=args[0],g=args[1],b=args[2];if(r===g&&g===b)return r<8?16:r>248?231:Math.round((r-8)/247*24)+232;return 16+36*Math.round(r/255*5)+6*Math.round(g/255*5)+Math.round(b/255*5)},convert.ansi16.rgb=function(args){let color=args%10;if(0===color||7===color)return args>50&&(color+=3.5),color=color/10.5*255,[color,color,color];const mult=.5*(1+~~(args>50));return[(1&color)*mult*255,(color>>1&1)*mult*255,(color>>2&1)*mult*255]},convert.ansi256.rgb=function(args){if(args>=232){const c=10*(args-232)+8;return[c,c,c]}let rem;args-=16;return[Math.floor(args/36)/5*255,Math.floor((rem=args%36)/6)/5*255,rem%6/5*255]},convert.rgb.hex=function(args){const string=(((255&Math.round(args[0]))<<16)+((255&Math.round(args[1]))<<8)+(255&Math.round(args[2]))).toString(16).toUpperCase();return"000000".substring(string.length)+string},convert.hex.rgb=function(args){const match=args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!match)return[0,0,0];let colorString=match[0];3===match[0].length&&(colorString=colorString.split("").map((char=>char+char)).join(""));const integer=parseInt(colorString,16);return[integer>>16&255,integer>>8&255,255&integer]},convert.rgb.hcg=function(rgb){const r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,max=Math.max(Math.max(r,g),b),min=Math.min(Math.min(r,g),b),chroma=max-min;let grayscale,hue;return grayscale=chroma<1?min/(1-chroma):0,hue=chroma<=0?0:max===r?(g-b)/chroma%6:max===g?2+(b-r)/chroma:4+(r-g)/chroma,hue/=6,hue%=1,[360*hue,100*chroma,100*grayscale]},convert.hsl.hcg=function(hsl){const s=hsl[1]/100,l=hsl[2]/100,c=l<.5?2*s*l:2*s*(1-l);let f=0;return c<1&&(f=(l-.5*c)/(1-c)),[hsl[0],100*c,100*f]},convert.hsv.hcg=function(hsv){const s=hsv[1]/100,v=hsv[2]/100,c=s*v;let f=0;return c<1&&(f=(v-c)/(1-c)),[hsv[0],100*c,100*f]},convert.hcg.rgb=function(hcg){const h=hcg[0]/360,c=hcg[1]/100,g=hcg[2]/100;if(0===c)return[255*g,255*g,255*g];const pure=[0,0,0],hi=h%1*6,v=hi%1,w=1-v;let mg=0;switch(Math.floor(hi)){case 0:pure[0]=1,pure[1]=v,pure[2]=0;break;case 1:pure[0]=w,pure[1]=1,pure[2]=0;break;case 2:pure[0]=0,pure[1]=1,pure[2]=v;break;case 3:pure[0]=0,pure[1]=w,pure[2]=1;break;case 4:pure[0]=v,pure[1]=0,pure[2]=1;break;default:pure[0]=1,pure[1]=0,pure[2]=w}return mg=(1-c)*g,[255*(c*pure[0]+mg),255*(c*pure[1]+mg),255*(c*pure[2]+mg)]},convert.hcg.hsv=function(hcg){const c=hcg[1]/100,v=c+hcg[2]/100*(1-c);let f=0;return v>0&&(f=c/v),[hcg[0],100*f,100*v]},convert.hcg.hsl=function(hcg){const c=hcg[1]/100,l=hcg[2]/100*(1-c)+.5*c;let s=0;return l>0&&l<.5?s=c/(2*l):l>=.5&&l<1&&(s=c/(2*(1-l))),[hcg[0],100*s,100*l]},convert.hcg.hwb=function(hcg){const c=hcg[1]/100,v=c+hcg[2]/100*(1-c);return[hcg[0],100*(v-c),100*(1-v)]},convert.hwb.hcg=function(hwb){const w=hwb[1]/100,v=1-hwb[2]/100,c=v-w;let g=0;return c<1&&(g=(v-c)/(1-c)),[hwb[0],100*c,100*g]},convert.apple.rgb=function(apple){return[apple[0]/65535*255,apple[1]/65535*255,apple[2]/65535*255]},convert.rgb.apple=function(rgb){return[rgb[0]/255*65535,rgb[1]/255*65535,rgb[2]/255*65535]},convert.gray.rgb=function(args){return[args[0]/100*255,args[0]/100*255,args[0]/100*255]},convert.gray.hsl=function(args){return[0,0,args[0]]},convert.gray.hsv=convert.gray.hsl,convert.gray.hwb=function(gray){return[0,100,gray[0]]},convert.gray.cmyk=function(gray){return[0,0,0,gray[0]]},convert.gray.lab=function(gray){return[gray[0],0,0]},convert.gray.hex=function(gray){const val=255&Math.round(gray[0]/100*255),string=((val<<16)+(val<<8)+val).toString(16).toUpperCase();return"000000".substring(string.length)+string},convert.rgb.gray=function(rgb){return[(rgb[0]+rgb[1]+rgb[2])/3/255*100]}},978:function(module,exports,__webpack_require__){const conversions=__webpack_require__(939),route=__webpack_require__(980),convert={};Object.keys(conversions).forEach((fromModel=>{convert[fromModel]={},Object.defineProperty(convert[fromModel],"channels",{value:conversions[fromModel].channels}),Object.defineProperty(convert[fromModel],"labels",{value:conversions[fromModel].labels});const routes=route(fromModel);Object.keys(routes).forEach((toModel=>{const fn=routes[toModel];convert[fromModel][toModel]=function wrapRounded(fn){const wrappedFn=function(...args){const arg0=args[0];if(null==arg0)return arg0;arg0.length>1&&(args=arg0);const result=fn(args);if("object"==typeof result)for(let len=result.length,i=0;i1&&(args=arg0),fn(args))};return"conversion"in fn&&(wrappedFn.conversion=fn.conversion),wrappedFn}(fn)}))})),module.exports=convert},979:function(module,exports,__webpack_require__){"use strict";module.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}},980:function(module,exports,__webpack_require__){const conversions=__webpack_require__(939);function deriveBFS(fromModel){const graph=function buildGraph(){const graph={},models=Object.keys(conversions);for(let len=models.length,i=0;i=wait||timeSinceLastCall<0||maxing&&time-lastInvokeTime>=maxWait}function timerExpired(){var time=now();if(shouldInvoke(time))return trailingEdge(time);timerId=setTimeout(timerExpired,function remainingWait(time){var timeWaiting=wait-(time-lastCallTime);return maxing?nativeMin(timeWaiting,maxWait-(time-lastInvokeTime)):timeWaiting}(time))}function trailingEdge(time){return timerId=void 0,trailing&&lastArgs?invokeFunc(time):(lastArgs=lastThis=void 0,result)}function debounced(){var time=now(),isInvoking=shouldInvoke(time);if(lastArgs=arguments,lastThis=this,lastCallTime=time,isInvoking){if(void 0===timerId)return leadingEdge(lastCallTime);if(maxing)return clearTimeout(timerId),timerId=setTimeout(timerExpired,wait),invokeFunc(lastCallTime)}return void 0===timerId&&(timerId=setTimeout(timerExpired,wait)),result}return wait=toNumber(wait)||0,isObject(options)&&(leading=!!options.leading,maxWait=(maxing="maxWait"in options)?nativeMax(toNumber(options.maxWait)||0,wait):maxWait,trailing="trailing"in options?!!options.trailing:trailing),debounced.cancel=function cancel(){void 0!==timerId&&clearTimeout(timerId),lastInvokeTime=0,lastArgs=lastCallTime=lastThis=timerId=void 0},debounced.flush=function flush(){return void 0===timerId?result:trailingEdge(now())},debounced}},983:function(module,exports,__webpack_require__){var root=__webpack_require__(93);module.exports=function(){return root.Date.now()}},984:function(module,exports,__webpack_require__){var baseTrim=__webpack_require__(985),isObject=__webpack_require__(122),isSymbol=__webpack_require__(238),reIsBadHex=/^[-+]0x[0-9a-f]+$/i,reIsBinary=/^0b[01]+$/i,reIsOctal=/^0o[0-7]+$/i,freeParseInt=parseInt;module.exports=function toNumber(value){if("number"==typeof value)return value;if(isSymbol(value))return NaN;if(isObject(value)){var other="function"==typeof value.valueOf?value.valueOf():value;value=isObject(other)?other+"":other}if("string"!=typeof value)return 0===value?value:+value;value=baseTrim(value);var isBinary=reIsBinary.test(value);return isBinary||reIsOctal.test(value)?freeParseInt(value.slice(2),isBinary?2:8):reIsBadHex.test(value)?NaN:+value}},985:function(module,exports,__webpack_require__){var trimmedEndIndex=__webpack_require__(986),reTrimStart=/^\s+/;module.exports=function baseTrim(string){return string?string.slice(0,trimmedEndIndex(string)+1).replace(reTrimStart,""):string}},986:function(module,exports){var reWhitespace=/\s/;module.exports=function trimmedEndIndex(string){for(var index=string.length;index--&&reWhitespace.test(string.charAt(index)););return index}}}]); -------------------------------------------------------------------------------- /docs/5.fa71488e730c5c7f885f.manager.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /** 2 | * Prism: Lightweight, robust, elegant syntax highlighting 3 | * 4 | * @license MIT 5 | * @author Lea Verou 6 | * @namespace 7 | * @public 8 | */ 9 | -------------------------------------------------------------------------------- /docs/6.15b6d95b.iframe.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | * OverlayScrollbars 3 | * https://github.com/KingSora/OverlayScrollbars 4 | * 5 | * Version: 1.13.0 6 | * 7 | * Copyright KingSora | Rene Haas. 8 | * https://github.com/KingSora 9 | * 10 | * Released under the MIT license. 11 | * Date: 02.08.2020 12 | */ 13 | -------------------------------------------------------------------------------- /docs/6.15b6d95b.iframe.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"6.15b6d95b.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""} -------------------------------------------------------------------------------- /docs/6.8096ae4aadde0743697b.manager.bundle.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[6],{884:function(module,exports,__webpack_require__){const cssKeywords=__webpack_require__(936),reverseKeywords={};for(const key of Object.keys(cssKeywords))reverseKeywords[cssKeywords[key]]=key;const convert={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};module.exports=convert;for(const model of Object.keys(convert)){if(!("channels"in convert[model]))throw new Error("missing channels property: "+model);if(!("labels"in convert[model]))throw new Error("missing channel labels property: "+model);if(convert[model].labels.length!==convert[model].channels)throw new Error("channel and label counts mismatch: "+model);const{channels:channels,labels:labels}=convert[model];delete convert[model].channels,delete convert[model].labels,Object.defineProperty(convert[model],"channels",{value:channels}),Object.defineProperty(convert[model],"labels",{value:labels})}convert.rgb.hsl=function(rgb){const r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,min=Math.min(r,g,b),max=Math.max(r,g,b),delta=max-min;let h,s;max===min?h=0:r===max?h=(g-b)/delta:g===max?h=2+(b-r)/delta:b===max&&(h=4+(r-g)/delta),h=Math.min(60*h,360),h<0&&(h+=360);const l=(min+max)/2;return s=max===min?0:l<=.5?delta/(max+min):delta/(2-max-min),[h,100*s,100*l]},convert.rgb.hsv=function(rgb){let rdif,gdif,bdif,h,s;const r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,v=Math.max(r,g,b),diff=v-Math.min(r,g,b),diffc=function(c){return(v-c)/6/diff+.5};return 0===diff?(h=0,s=0):(s=diff/v,rdif=diffc(r),gdif=diffc(g),bdif=diffc(b),r===v?h=bdif-gdif:g===v?h=1/3+rdif-bdif:b===v&&(h=2/3+gdif-rdif),h<0?h+=1:h>1&&(h-=1)),[360*h,100*s,100*v]},convert.rgb.hwb=function(rgb){const r=rgb[0],g=rgb[1];let b=rgb[2];const h=convert.rgb.hsl(rgb)[0],w=1/255*Math.min(r,Math.min(g,b));return b=1-1/255*Math.max(r,Math.max(g,b)),[h,100*w,100*b]},convert.rgb.cmyk=function(rgb){const r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,k=Math.min(1-r,1-g,1-b);return[100*((1-r-k)/(1-k)||0),100*((1-g-k)/(1-k)||0),100*((1-b-k)/(1-k)||0),100*k]},convert.rgb.keyword=function(rgb){const reversed=reverseKeywords[rgb];if(reversed)return reversed;let currentClosestKeyword,currentClosestDistance=1/0;for(const keyword of Object.keys(cssKeywords)){const value=cssKeywords[keyword],distance=(y=value,((x=rgb)[0]-y[0])**2+(x[1]-y[1])**2+(x[2]-y[2])**2);distance.04045?((r+.055)/1.055)**2.4:r/12.92,g=g>.04045?((g+.055)/1.055)**2.4:g/12.92,b=b>.04045?((b+.055)/1.055)**2.4:b/12.92;return[100*(.4124*r+.3576*g+.1805*b),100*(.2126*r+.7152*g+.0722*b),100*(.0193*r+.1192*g+.9505*b)]},convert.rgb.lab=function(rgb){const xyz=convert.rgb.xyz(rgb);let x=xyz[0],y=xyz[1],z=xyz[2];x/=95.047,y/=100,z/=108.883,x=x>.008856?x**(1/3):7.787*x+16/116,y=y>.008856?y**(1/3):7.787*y+16/116,z=z>.008856?z**(1/3):7.787*z+16/116;return[116*y-16,500*(x-y),200*(y-z)]},convert.hsl.rgb=function(hsl){const h=hsl[0]/360,s=hsl[1]/100,l=hsl[2]/100;let t2,t3,val;if(0===s)return val=255*l,[val,val,val];t2=l<.5?l*(1+s):l+s-l*s;const t1=2*l-t2,rgb=[0,0,0];for(let i=0;i<3;i++)t3=h+1/3*-(i-1),t3<0&&t3++,t3>1&&t3--,val=6*t3<1?t1+6*(t2-t1)*t3:2*t3<1?t2:3*t3<2?t1+(t2-t1)*(2/3-t3)*6:t1,rgb[i]=255*val;return rgb},convert.hsl.hsv=function(hsl){const h=hsl[0];let s=hsl[1]/100,l=hsl[2]/100,smin=s;const lmin=Math.max(l,.01);l*=2,s*=l<=1?l:2-l,smin*=lmin<=1?lmin:2-lmin;return[h,100*(0===l?2*smin/(lmin+smin):2*s/(l+s)),100*((l+s)/2)]},convert.hsv.rgb=function(hsv){const h=hsv[0]/60,s=hsv[1]/100;let v=hsv[2]/100;const hi=Math.floor(h)%6,f=h-Math.floor(h),p=255*v*(1-s),q=255*v*(1-s*f),t=255*v*(1-s*(1-f));switch(v*=255,hi){case 0:return[v,t,p];case 1:return[q,v,p];case 2:return[p,v,t];case 3:return[p,q,v];case 4:return[t,p,v];case 5:return[v,p,q]}},convert.hsv.hsl=function(hsv){const h=hsv[0],s=hsv[1]/100,v=hsv[2]/100,vmin=Math.max(v,.01);let sl,l;l=(2-s)*v;const lmin=(2-s)*vmin;return sl=s*vmin,sl/=lmin<=1?lmin:2-lmin,sl=sl||0,l/=2,[h,100*sl,100*l]},convert.hwb.rgb=function(hwb){const h=hwb[0]/360;let wh=hwb[1]/100,bl=hwb[2]/100;const ratio=wh+bl;let f;ratio>1&&(wh/=ratio,bl/=ratio);const i=Math.floor(6*h),v=1-bl;f=6*h-i,0!=(1&i)&&(f=1-f);const n=wh+f*(v-wh);let r,g,b;switch(i){default:case 6:case 0:r=v,g=n,b=wh;break;case 1:r=n,g=v,b=wh;break;case 2:r=wh,g=v,b=n;break;case 3:r=wh,g=n,b=v;break;case 4:r=n,g=wh,b=v;break;case 5:r=v,g=wh,b=n}return[255*r,255*g,255*b]},convert.cmyk.rgb=function(cmyk){const c=cmyk[0]/100,m=cmyk[1]/100,y=cmyk[2]/100,k=cmyk[3]/100;return[255*(1-Math.min(1,c*(1-k)+k)),255*(1-Math.min(1,m*(1-k)+k)),255*(1-Math.min(1,y*(1-k)+k))]},convert.xyz.rgb=function(xyz){const x=xyz[0]/100,y=xyz[1]/100,z=xyz[2]/100;let r,g,b;return r=3.2406*x+-1.5372*y+-.4986*z,g=-.9689*x+1.8758*y+.0415*z,b=.0557*x+-.204*y+1.057*z,r=r>.0031308?1.055*r**(1/2.4)-.055:12.92*r,g=g>.0031308?1.055*g**(1/2.4)-.055:12.92*g,b=b>.0031308?1.055*b**(1/2.4)-.055:12.92*b,r=Math.min(Math.max(0,r),1),g=Math.min(Math.max(0,g),1),b=Math.min(Math.max(0,b),1),[255*r,255*g,255*b]},convert.xyz.lab=function(xyz){let x=xyz[0],y=xyz[1],z=xyz[2];x/=95.047,y/=100,z/=108.883,x=x>.008856?x**(1/3):7.787*x+16/116,y=y>.008856?y**(1/3):7.787*y+16/116,z=z>.008856?z**(1/3):7.787*z+16/116;return[116*y-16,500*(x-y),200*(y-z)]},convert.lab.xyz=function(lab){let x,y,z;y=(lab[0]+16)/116,x=lab[1]/500+y,z=y-lab[2]/200;const y2=y**3,x2=x**3,z2=z**3;return y=y2>.008856?y2:(y-16/116)/7.787,x=x2>.008856?x2:(x-16/116)/7.787,z=z2>.008856?z2:(z-16/116)/7.787,x*=95.047,y*=100,z*=108.883,[x,y,z]},convert.lab.lch=function(lab){const l=lab[0],a=lab[1],b=lab[2];let h;h=360*Math.atan2(b,a)/2/Math.PI,h<0&&(h+=360);return[l,Math.sqrt(a*a+b*b),h]},convert.lch.lab=function(lch){const l=lch[0],c=lch[1],hr=lch[2]/360*2*Math.PI;return[l,c*Math.cos(hr),c*Math.sin(hr)]},convert.rgb.ansi16=function(args,saturation=null){const[r,g,b]=args;let value=null===saturation?convert.rgb.hsv(args)[2]:saturation;if(value=Math.round(value/50),0===value)return 30;let ansi=30+(Math.round(b/255)<<2|Math.round(g/255)<<1|Math.round(r/255));return 2===value&&(ansi+=60),ansi},convert.hsv.ansi16=function(args){return convert.rgb.ansi16(convert.hsv.rgb(args),args[2])},convert.rgb.ansi256=function(args){const r=args[0],g=args[1],b=args[2];if(r===g&&g===b)return r<8?16:r>248?231:Math.round((r-8)/247*24)+232;return 16+36*Math.round(r/255*5)+6*Math.round(g/255*5)+Math.round(b/255*5)},convert.ansi16.rgb=function(args){let color=args%10;if(0===color||7===color)return args>50&&(color+=3.5),color=color/10.5*255,[color,color,color];const mult=.5*(1+~~(args>50));return[(1&color)*mult*255,(color>>1&1)*mult*255,(color>>2&1)*mult*255]},convert.ansi256.rgb=function(args){if(args>=232){const c=10*(args-232)+8;return[c,c,c]}let rem;args-=16;return[Math.floor(args/36)/5*255,Math.floor((rem=args%36)/6)/5*255,rem%6/5*255]},convert.rgb.hex=function(args){const string=(((255&Math.round(args[0]))<<16)+((255&Math.round(args[1]))<<8)+(255&Math.round(args[2]))).toString(16).toUpperCase();return"000000".substring(string.length)+string},convert.hex.rgb=function(args){const match=args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!match)return[0,0,0];let colorString=match[0];3===match[0].length&&(colorString=colorString.split("").map((char=>char+char)).join(""));const integer=parseInt(colorString,16);return[integer>>16&255,integer>>8&255,255&integer]},convert.rgb.hcg=function(rgb){const r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255,max=Math.max(Math.max(r,g),b),min=Math.min(Math.min(r,g),b),chroma=max-min;let grayscale,hue;return grayscale=chroma<1?min/(1-chroma):0,hue=chroma<=0?0:max===r?(g-b)/chroma%6:max===g?2+(b-r)/chroma:4+(r-g)/chroma,hue/=6,hue%=1,[360*hue,100*chroma,100*grayscale]},convert.hsl.hcg=function(hsl){const s=hsl[1]/100,l=hsl[2]/100,c=l<.5?2*s*l:2*s*(1-l);let f=0;return c<1&&(f=(l-.5*c)/(1-c)),[hsl[0],100*c,100*f]},convert.hsv.hcg=function(hsv){const s=hsv[1]/100,v=hsv[2]/100,c=s*v;let f=0;return c<1&&(f=(v-c)/(1-c)),[hsv[0],100*c,100*f]},convert.hcg.rgb=function(hcg){const h=hcg[0]/360,c=hcg[1]/100,g=hcg[2]/100;if(0===c)return[255*g,255*g,255*g];const pure=[0,0,0],hi=h%1*6,v=hi%1,w=1-v;let mg=0;switch(Math.floor(hi)){case 0:pure[0]=1,pure[1]=v,pure[2]=0;break;case 1:pure[0]=w,pure[1]=1,pure[2]=0;break;case 2:pure[0]=0,pure[1]=1,pure[2]=v;break;case 3:pure[0]=0,pure[1]=w,pure[2]=1;break;case 4:pure[0]=v,pure[1]=0,pure[2]=1;break;default:pure[0]=1,pure[1]=0,pure[2]=w}return mg=(1-c)*g,[255*(c*pure[0]+mg),255*(c*pure[1]+mg),255*(c*pure[2]+mg)]},convert.hcg.hsv=function(hcg){const c=hcg[1]/100,v=c+hcg[2]/100*(1-c);let f=0;return v>0&&(f=c/v),[hcg[0],100*f,100*v]},convert.hcg.hsl=function(hcg){const c=hcg[1]/100,l=hcg[2]/100*(1-c)+.5*c;let s=0;return l>0&&l<.5?s=c/(2*l):l>=.5&&l<1&&(s=c/(2*(1-l))),[hcg[0],100*s,100*l]},convert.hcg.hwb=function(hcg){const c=hcg[1]/100,v=c+hcg[2]/100*(1-c);return[hcg[0],100*(v-c),100*(1-v)]},convert.hwb.hcg=function(hwb){const w=hwb[1]/100,v=1-hwb[2]/100,c=v-w;let g=0;return c<1&&(g=(v-c)/(1-c)),[hwb[0],100*c,100*g]},convert.apple.rgb=function(apple){return[apple[0]/65535*255,apple[1]/65535*255,apple[2]/65535*255]},convert.rgb.apple=function(rgb){return[rgb[0]/255*65535,rgb[1]/255*65535,rgb[2]/255*65535]},convert.gray.rgb=function(args){return[args[0]/100*255,args[0]/100*255,args[0]/100*255]},convert.gray.hsl=function(args){return[0,0,args[0]]},convert.gray.hsv=convert.gray.hsl,convert.gray.hwb=function(gray){return[0,100,gray[0]]},convert.gray.cmyk=function(gray){return[0,0,0,gray[0]]},convert.gray.lab=function(gray){return[gray[0],0,0]},convert.gray.hex=function(gray){const val=255&Math.round(gray[0]/100*255),string=((val<<16)+(val<<8)+val).toString(16).toUpperCase();return"000000".substring(string.length)+string},convert.rgb.gray=function(rgb){return[(rgb[0]+rgb[1]+rgb[2])/3/255*100]}},935:function(module,exports,__webpack_require__){const conversions=__webpack_require__(884),route=__webpack_require__(937),convert={};Object.keys(conversions).forEach((fromModel=>{convert[fromModel]={},Object.defineProperty(convert[fromModel],"channels",{value:conversions[fromModel].channels}),Object.defineProperty(convert[fromModel],"labels",{value:conversions[fromModel].labels});const routes=route(fromModel);Object.keys(routes).forEach((toModel=>{const fn=routes[toModel];convert[fromModel][toModel]=function wrapRounded(fn){const wrappedFn=function(...args){const arg0=args[0];if(null==arg0)return arg0;arg0.length>1&&(args=arg0);const result=fn(args);if("object"==typeof result)for(let len=result.length,i=0;i1&&(args=arg0),fn(args))};return"conversion"in fn&&(wrappedFn.conversion=fn.conversion),wrappedFn}(fn)}))})),module.exports=convert},936:function(module,exports,__webpack_require__){"use strict";module.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}},937:function(module,exports,__webpack_require__){const conversions=__webpack_require__(884);function deriveBFS(fromModel){const graph=function buildGraph(){const graph={},models=Object.keys(conversions);for(let len=models.length,i=0;i=0||(n[t]=e[t]);return n}var c="undefined"!=typeof window?react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect:react__WEBPACK_IMPORTED_MODULE_0__.useEffect;function i(e){var r=Object(react__WEBPACK_IMPORTED_MODULE_0__.useRef)(e);return Object(react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((function(){r.current=e})),Object(react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((function(e){return r.current&&r.current(e)}),[])}var s,f=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e0:e.buttons>0)&&h.current?_(d(h.current,e)):b(!1)}),[_]),x=Object(react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((function(e){var r=e.nativeEvent;r.preventDefault(),function(e){return!(m.current&&!v(e)||(m.current||(m.current=v(e)),0))}(r)&&(_(d(h.current,r)),b(!0))}),[_]),H=Object(react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),C({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))}),[C]),N=Object(react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((function(){return b(!1)}),[]),w=Object(react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((function(e){var r=e?window.addEventListener:window.removeEventListener;r(m.current?"touchmove":"mousemove",E),r(m.current?"touchend":"mouseup",N)}),[E,N]);return c((function(){return w(p),function(){p&&w(!1)}}),[p,w]),react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",l({},f,{className:"react-colorful__interactive",ref:h,onTouchStart:x,onMouseDown:x,onKeyDown:H,tabIndex:0,role:"slider"}))})),m=function(e){return e.filter(Boolean).join(" ")},g=function(r){var t=r.color,o=r.left,n=r.top,a=void 0===n?.5:n,l=m(["react-colorful__pointer",r.className]);return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",{className:l,style:{top:100*a+"%",left:100*o+"%"}},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},p=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},b=function(e){return"#"===e[0]&&(e=e.substr(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:1}:{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16),a:1}},_=function(e){var r=/hsla?\((\d+\.?\d*),\s*(\d+\.?\d*)%?,\s*(\d+\.?\d*)%?,?\s*(\d+\.?\d*)?\)/.exec(e);return r?E({h:Number(r[1]),s:Number(r[2]),l:Number(r[3]),a:void 0===r[4]?1:Number(r[4])}):{h:0,s:0,v:0,a:1}},E=function(e){var r=e.s,t=e.l;return{h:e.h,s:(r*=(t<50?t:100-t)/100)>0?2*r/(t+r)*100:0,v:t+r,a:e.a}},x=function(e){var r=e.s,t=e.v,o=e.a,n=(200-r)*t/100;return{h:p(e.h),s:p(n>0&&n<200?r*t/100/(n<=100?n:200-n)*100:0),l:p(n/2),a:p(o,2)}},H=function(e){var r=x(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},N=function(e){var r=x(e);return"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")"},w=function(e){var r=e.h,t=e.s,o=e.v,n=e.a;r=r/360*6,t/=100,o/=100;var a=Math.floor(r),l=o*(1-t),u=o*(1-(r-a)*t),c=o*(1-(1-r+a)*t),i=a%6;return{r:p(255*[o,u,l,l,c,o][i]),g:p(255*[c,o,o,u,l,l][i]),b:p(255*[l,l,c,o,o,u][i]),a:p(n,2)}},q=function(e){var r=/rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d+\.?\d*)?\)/.exec(e);return r?I({r:Number(r[1]),g:Number(r[2]),b:Number(r[3]),a:void 0===r[4]?1:Number(r[4])}):{h:0,s:0,v:0,a:1}},O=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},I=function(e){var r=e.r,t=e.g,o=e.b,n=e.a,a=Math.max(r,t,o),l=a-Math.min(r,t,o),u=l?a===r?(t-o)/l:a===t?2+(o-r)/l:4+(r-t)/l:0;return{h:p(60*(u<0?u+6:u)),s:p(a?l/a*100:0),v:p(a/255*100),a:n}},z=react__WEBPACK_IMPORTED_MODULE_0___default.a.memo((function(r){var t=r.hue,o=r.onChange,n=m(["react-colorful__hue",r.className]);return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",{className:n},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(h,{onMove:function(e){o({h:360*e.left})},onKey:function(e){o({h:f(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuetext":p(t)},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(g,{className:"react-colorful__hue-pointer",left:t/360,color:H({h:t,s:100,v:100,a:1})})))})),B=react__WEBPACK_IMPORTED_MODULE_0___default.a.memo((function(r){var t=r.hsva,o=r.onChange,n={backgroundColor:H({h:t.h,s:100,v:100,a:1})};return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",{className:"react-colorful__saturation",style:n},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(h,{onMove:function(e){o({s:100*e.left,v:100-100*e.top})},onKey:function(e){o({s:f(t.s+100*e.left,0,100),v:f(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+p(t.s)+"%, Brightness "+p(t.v)+"%"},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(g,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:H(t)})))})),K=function(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0},A=function(e,r){return e.replace(/\s/g,"")===r.replace(/\s/g,"")};function D(e,r,l){var u=i(l),c=Object(react__WEBPACK_IMPORTED_MODULE_0__.useState)((function(){return e.toHsva(r)})),s=c[0],f=c[1],v=Object(react__WEBPACK_IMPORTED_MODULE_0__.useRef)({color:r,hsva:s});Object(react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((function(){if(!e.equal(r,v.current.color)){var t=e.toHsva(r);v.current={hsva:t,color:r},f(t)}}),[r,e]),Object(react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((function(){var r;K(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r))}),[s,e,u]);var d=Object(react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((function(e){f((function(r){return Object.assign({},r,e)}))}),[]);return[s,d]}var L,T=function(){c((function(){if("undefined"!=typeof document&&!L){(L=document.createElement("style")).innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}';var e=s||__webpack_require__.nc;e&&L.setAttribute("nonce",e),document.head.appendChild(L)}}),[])},X=function(r){var t=r.className,o=r.colorModel,n=r.color,a=void 0===n?o.defaultColor:n,c=r.onChange,i=u(r,["className","colorModel","color","onChange"]);T();var s=D(o,a,c),f=s[0],v=s[1],d=m(["react-colorful",t]);return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",l({},i,{className:d}),react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(B,{hsva:f,onChange:v}),react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(z,{hue:f.h,onChange:v,className:"react-colorful__last-control"}))},Y={defaultColor:"000",toHsva:function(e){return I(b(e))},fromHsva:function(e){return t=(r=w(e)).g,o=r.b,"#"+O(r.r)+O(t)+O(o);var r,t,o},equal:function(e,r){return e.toLowerCase()===r.toLowerCase()||K(b(e),b(r))}},$=function(r){return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(X,l({},r,{colorModel:Y}))},P=function(r){var t=r.className,o=r.hsva,n=r.onChange,a={backgroundImage:"linear-gradient(90deg, "+N(Object.assign({},o,{a:0}))+", "+N(Object.assign({},o,{a:1}))+")"},l=m(["react-colorful__alpha",t]);return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",{className:l},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",{className:"react-colorful__alpha-gradient",style:a}),react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(h,{onMove:function(e){n({a:e.left})},onKey:function(e){n({a:f(o.a+e.left)})},"aria-label":"Alpha","aria-valuetext":p(100*o.a)+"%"},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(g,{className:"react-colorful__alpha-pointer",left:o.a,color:N(o)})))},R=function(r){var t=r.className,o=r.colorModel,n=r.color,a=void 0===n?o.defaultColor:n,c=r.onChange,i=u(r,["className","colorModel","color","onChange"]);T();var s=D(o,a,c),f=s[0],v=s[1],d=m(["react-colorful",t]);return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",l({},i,{className:d}),react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(B,{hsva:f,onChange:v}),react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(z,{hue:f.h,onChange:v}),react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(P,{hsva:f,onChange:v,className:"react-colorful__last-control"}))},Q={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:_,fromHsva:N,equal:A},U=function(r){return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(R,l({},r,{colorModel:Q}))},fe={defaultColor:"rgba(0, 0, 0, 1)",toHsva:q,fromHsva:function(e){var r=w(e);return"rgba("+r.r+", "+r.g+", "+r.b+", "+r.a+")"},equal:A},ve=function(r){return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(R,l({},r,{colorModel:fe}))}}}]); -------------------------------------------------------------------------------- /docs/7.52f582bb.iframe.bundle.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[7],{919:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"getScrollAreaStyles",(function(){return getScrollAreaStyles}));__webpack_require__(16),__webpack_require__(39);var _templateObject,react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__),_storybook_theming__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(58);var hsResizeObserverDummyAnimation=Object(_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.d)(_templateObject||(_templateObject=function _taggedTemplateLiteral(strings,raw){return raw||(raw=strings.slice(0)),Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}(["0%{z-index:0}to{z-index:-1}"]))),getScrollAreaStyles=function getScrollAreaStyles(theme){return{"html.os-html, html.os-html>.os-host":{display:"block",overflow:"hidden",boxSizing:"border-box",height:"100%!important",width:"100%!important",minWidth:"100%!important",minHeight:"100%!important",margin:"0!important",position:"absolute!important"},"html.os-html>.os-host>.os-padding":{position:"absolute"},"body.os-dragging, body.os-dragging *":{cursor:"default"},".os-host, .os-host-textarea":{position:"relative",overflow:"visible!important",flexDirection:"column",flexWrap:"nowrap",justifyContent:"flex-start",alignContent:"flex-start",alignItems:"flex-start"},".os-host-flexbox":{overflow:"hidden!important",display:"flex"},".os-host-flexbox>.os-size-auto-observer":{height:"inherit!important"},".os-host-flexbox>.os-content-glue":{flexGrow:1,flexShrink:0},".os-host-flexbox>.os-size-auto-observer, .os-host-flexbox>.os-content-glue":{minHeight:0,minWidth:0,flexGrow:0,flexShrink:1,flexBasis:"auto"},"#os-dummy-scrollbar-size":{position:"fixed",opacity:0,visibility:"hidden",overflow:"scroll",height:500,width:500},"#os-dummy-scrollbar-size>div":{width:"200%",height:"200%",margin:10},"#os-dummy-scrollbar-size, .os-viewport":{},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size, .os-viewport-native-scrollbars-invisible.os-viewport":{scrollbarWidth:"none!important"},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner":{display:"none!important",width:"0!important",height:"0!important",visibility:"hidden!important",background:"0 0!important"},".os-content-glue":{boxSizing:"inherit",maxHeight:"100%",maxWidth:"100%",width:"100%",pointerEvents:"none"},".os-padding":{boxSizing:"inherit",direction:"inherit",position:"absolute",overflow:"visible",padding:0,margin:0,left:0,top:0,bottom:0,right:0,width:"auto!important",height:"auto!important",zIndex:1},".os-host-overflow>.os-padding":{overflow:"hidden"},".os-viewport":{direction:"inherit!important",boxSizing:"inherit!important",resize:"none!important",outline:"0!important",position:"absolute",overflow:"hidden",top:0,left:0,bottom:0,right:0,padding:0,margin:0},".os-content-arrange":{position:"absolute",zIndex:-1,minHeight:1,minWidth:1,pointerEvents:"none"},".os-content":{direction:"inherit",boxSizing:"border-box!important",position:"relative",display:"block",height:"100%",width:"100%",visibility:"visible"},".os-content:before, .os-content:after":{content:"''",display:"table",width:0,height:0,lineHeight:0,fontSize:0},".os-content>.os-textarea":{boxSizing:"border-box!important",direction:"inherit!important",background:"0 0!important",outline:"0 transparent!important",overflow:"hidden!important",position:"absolute!important",display:"block!important",top:"0!important",left:"0!important",margin:"0!important",borderRadius:"0!important",float:"none!important",filter:"none!important",border:"0!important",resize:"none!important",transform:"none!important",maxWidth:"none!important",maxHeight:"none!important",boxShadow:"none!important",perspective:"none!important",opacity:"1!important",zIndex:"1!important",clip:"auto!important",verticalAlign:"baseline!important",padding:0},".os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea":{right:"0!important"},".os-content>.os-textarea-cover":{zIndex:-1,pointerEvents:"none"},".os-content>.os-textarea[wrap=off]":{whiteSpace:"pre!important",margin:"0!important"},".os-text-inherit":{fontFamily:"inherit",fontSize:"inherit",fontWeight:"inherit",fontStyle:"inherit",fontVariant:"inherit",textTransform:"inherit",textDecoration:"inherit",textIndent:"inherit",textAlign:"inherit",textShadow:"inherit",textOverflow:"inherit",letterSpacing:"inherit",wordSpacing:"inherit",lineHeight:"inherit",unicodeBidi:"inherit",direction:"inherit",color:"inherit",cursor:"text"},".os-resize-observer, .os-resize-observer-host":{boxSizing:"inherit",display:"block",opacity:0,position:"absolute",top:0,left:0,height:"100%",width:"100%",overflow:"hidden",pointerEvents:"none",zIndex:-1},".os-resize-observer-host":{padding:"inherit",border:"inherit",borderColor:"transparent",borderStyle:"solid",boxSizing:"border-box"},".os-resize-observer-host:after":{content:"''"},".os-resize-observer-host>.os-resize-observer, .os-resize-observer-host:after":{height:"200%",width:"200%",padding:"inherit",border:"inherit",margin:0,display:"block",boxSizing:"content-box"},".os-resize-observer.observed, object.os-resize-observer":{boxSizing:"border-box!important"},".os-size-auto-observer":{boxSizing:"inherit!important",height:"100%",width:"inherit",maxWidth:1,position:"relative",float:"left",maxHeight:1,overflow:"hidden",zIndex:-1,padding:0,margin:0,pointerEvents:"none",flexGrow:"inherit",flexShrink:0,flexBasis:0},".os-size-auto-observer>.os-resize-observer":{width:"1000%",height:"1000%",minHeight:1,minWidth:1},".os-resize-observer-item":{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden",zIndex:-1,opacity:0,direction:"ltr!important",flex:"none!important"},".os-resize-observer-item-final":{position:"absolute",left:0,top:0,transition:"none!important",flex:"none!important"},".os-resize-observer":{animationDuration:".001s",animationName:"".concat(hsResizeObserverDummyAnimation)},".os-host-transition>.os-scrollbar, .os-host-transition>.os-scrollbar-corner":{transition:"opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s"},"html.os-html>.os-host>.os-scrollbar":{position:"absolute",zIndex:999999},".os-scrollbar, .os-scrollbar-corner":{position:"absolute",opacity:1,zIndex:1},".os-scrollbar-corner":{bottom:0,right:0,height:10,width:10,backgroundColor:"transparent"},".os-scrollbar":{pointerEvents:"none",padding:2,boxSizing:"border-box",background:0},".os-scrollbar-track":{pointerEvents:"auto",position:"relative",height:"100%",width:"100%",padding:"0!important",border:"0!important"},".os-scrollbar-handle":{pointerEvents:"auto",position:"absolute",width:"100%",height:"100%"},".os-scrollbar-handle-off, .os-scrollbar-track-off":{pointerEvents:"none"},".os-scrollbar.os-scrollbar-unusable, .os-scrollbar.os-scrollbar-unusable *":{pointerEvents:"none!important"},".os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle":{opacity:"0!important"},".os-scrollbar-horizontal":{bottom:0,left:0,right:10,height:10},".os-scrollbar-vertical":{top:0,right:0,bottom:10,width:10},".os-host-rtl>.os-scrollbar-horizontal":{right:0},".os-host-rtl>.os-scrollbar-vertical":{right:"auto",left:0},".os-host-rtl>.os-scrollbar-corner":{right:"auto",left:0},".os-scrollbar-auto-hidden, .os-padding+.os-scrollbar-corner, .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner, .os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal, .os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner, .os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner, .os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner":{opacity:0,visibility:"hidden",pointerEvents:"none"},".os-scrollbar-corner-resize-both":{cursor:"nwse-resize"},".os-host-rtl>.os-scrollbar-corner-resize-both":{cursor:"nesw-resize"},".os-scrollbar-corner-resize-horizontal":{cursor:"ew-resize"},".os-scrollbar-corner-resize-vertical":{cursor:"ns-resize"},".os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize":{cursor:"default"},".os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical":{top:0,bottom:0},".os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal, .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal":{right:0,left:0},".os-scrollbar:hover, .os-scrollbar-corner.os-scrollbar-corner-resize":{opacity:"1!important",visibility:"visible!important"},".os-scrollbar-corner.os-scrollbar-corner-resize":{backgroundImage:"linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)",backgroundRepeat:"no-repeat",backgroundPosition:"100% 100%",pointerEvents:"auto!important"},".os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize":{transform:"scale(-1,1)"},".os-host-overflow":{overflow:"hidden!important"},".os-theme-dark.os-host-rtl>.os-scrollbar-horizontal":{left:10,right:0},".os-scrollbar.os-scrollbar-unusable":{background:0},".os-scrollbar>.os-scrollbar-track":{background:0},".os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle":{minWidth:30},".os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle":{minHeight:30},".os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{transition:"background-color .3s"},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-scrollbar>.os-scrollbar-track":{borderRadius:10},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{background:theme.color.darker,opacity:.5},".os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle":{opacity:.6},".os-scrollbar-horizontal .os-scrollbar-handle:before, .os-scrollbar-vertical .os-scrollbar-handle:before":{content:"''",position:"absolute",left:0,right:0,top:0,bottom:0,display:"block"},".os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before":{display:"none"},".os-scrollbar-horizontal .os-scrollbar-handle:before":{top:-6,bottom:-2},".os-scrollbar-vertical .os-scrollbar-handle:before":{left:-6,right:-2},".os-host-rtl.os-scrollbar-vertical .os-scrollbar-handle:before":{right:-6,left:-2}}},GlobalScrollAreaStyles=function GlobalScrollAreaStyles(){return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.a,{styles:getScrollAreaStyles})};GlobalScrollAreaStyles.displayName="GlobalScrollAreaStyles",__webpack_exports__.default=GlobalScrollAreaStyles}}]); -------------------------------------------------------------------------------- /docs/7.b34baecbd082bc7b188d.manager.bundle.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[7],{863:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"getScrollAreaStyles",(function(){return getScrollAreaStyles}));__webpack_require__(16),__webpack_require__(50);var _templateObject,react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__),_storybook_theming__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(56);var hsResizeObserverDummyAnimation=Object(_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.d)(_templateObject||(_templateObject=function _taggedTemplateLiteral(strings,raw){return raw||(raw=strings.slice(0)),Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}(["0%{z-index:0}to{z-index:-1}"]))),getScrollAreaStyles=function getScrollAreaStyles(theme){return{"html.os-html, html.os-html>.os-host":{display:"block",overflow:"hidden",boxSizing:"border-box",height:"100%!important",width:"100%!important",minWidth:"100%!important",minHeight:"100%!important",margin:"0!important",position:"absolute!important"},"html.os-html>.os-host>.os-padding":{position:"absolute"},"body.os-dragging, body.os-dragging *":{cursor:"default"},".os-host, .os-host-textarea":{position:"relative",overflow:"visible!important",flexDirection:"column",flexWrap:"nowrap",justifyContent:"flex-start",alignContent:"flex-start",alignItems:"flex-start"},".os-host-flexbox":{overflow:"hidden!important",display:"flex"},".os-host-flexbox>.os-size-auto-observer":{height:"inherit!important"},".os-host-flexbox>.os-content-glue":{flexGrow:1,flexShrink:0},".os-host-flexbox>.os-size-auto-observer, .os-host-flexbox>.os-content-glue":{minHeight:0,minWidth:0,flexGrow:0,flexShrink:1,flexBasis:"auto"},"#os-dummy-scrollbar-size":{position:"fixed",opacity:0,visibility:"hidden",overflow:"scroll",height:500,width:500},"#os-dummy-scrollbar-size>div":{width:"200%",height:"200%",margin:10},"#os-dummy-scrollbar-size, .os-viewport":{},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size, .os-viewport-native-scrollbars-invisible.os-viewport":{scrollbarWidth:"none!important"},".os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner":{display:"none!important",width:"0!important",height:"0!important",visibility:"hidden!important",background:"0 0!important"},".os-content-glue":{boxSizing:"inherit",maxHeight:"100%",maxWidth:"100%",width:"100%",pointerEvents:"none"},".os-padding":{boxSizing:"inherit",direction:"inherit",position:"absolute",overflow:"visible",padding:0,margin:0,left:0,top:0,bottom:0,right:0,width:"auto!important",height:"auto!important",zIndex:1},".os-host-overflow>.os-padding":{overflow:"hidden"},".os-viewport":{direction:"inherit!important",boxSizing:"inherit!important",resize:"none!important",outline:"0!important",position:"absolute",overflow:"hidden",top:0,left:0,bottom:0,right:0,padding:0,margin:0},".os-content-arrange":{position:"absolute",zIndex:-1,minHeight:1,minWidth:1,pointerEvents:"none"},".os-content":{direction:"inherit",boxSizing:"border-box!important",position:"relative",display:"block",height:"100%",width:"100%",visibility:"visible"},".os-content:before, .os-content:after":{content:"''",display:"table",width:0,height:0,lineHeight:0,fontSize:0},".os-content>.os-textarea":{boxSizing:"border-box!important",direction:"inherit!important",background:"0 0!important",outline:"0 transparent!important",overflow:"hidden!important",position:"absolute!important",display:"block!important",top:"0!important",left:"0!important",margin:"0!important",borderRadius:"0!important",float:"none!important",filter:"none!important",border:"0!important",resize:"none!important",transform:"none!important",maxWidth:"none!important",maxHeight:"none!important",boxShadow:"none!important",perspective:"none!important",opacity:"1!important",zIndex:"1!important",clip:"auto!important",verticalAlign:"baseline!important",padding:0},".os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea":{right:"0!important"},".os-content>.os-textarea-cover":{zIndex:-1,pointerEvents:"none"},".os-content>.os-textarea[wrap=off]":{whiteSpace:"pre!important",margin:"0!important"},".os-text-inherit":{fontFamily:"inherit",fontSize:"inherit",fontWeight:"inherit",fontStyle:"inherit",fontVariant:"inherit",textTransform:"inherit",textDecoration:"inherit",textIndent:"inherit",textAlign:"inherit",textShadow:"inherit",textOverflow:"inherit",letterSpacing:"inherit",wordSpacing:"inherit",lineHeight:"inherit",unicodeBidi:"inherit",direction:"inherit",color:"inherit",cursor:"text"},".os-resize-observer, .os-resize-observer-host":{boxSizing:"inherit",display:"block",opacity:0,position:"absolute",top:0,left:0,height:"100%",width:"100%",overflow:"hidden",pointerEvents:"none",zIndex:-1},".os-resize-observer-host":{padding:"inherit",border:"inherit",borderColor:"transparent",borderStyle:"solid",boxSizing:"border-box"},".os-resize-observer-host:after":{content:"''"},".os-resize-observer-host>.os-resize-observer, .os-resize-observer-host:after":{height:"200%",width:"200%",padding:"inherit",border:"inherit",margin:0,display:"block",boxSizing:"content-box"},".os-resize-observer.observed, object.os-resize-observer":{boxSizing:"border-box!important"},".os-size-auto-observer":{boxSizing:"inherit!important",height:"100%",width:"inherit",maxWidth:1,position:"relative",float:"left",maxHeight:1,overflow:"hidden",zIndex:-1,padding:0,margin:0,pointerEvents:"none",flexGrow:"inherit",flexShrink:0,flexBasis:0},".os-size-auto-observer>.os-resize-observer":{width:"1000%",height:"1000%",minHeight:1,minWidth:1},".os-resize-observer-item":{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden",zIndex:-1,opacity:0,direction:"ltr!important",flex:"none!important"},".os-resize-observer-item-final":{position:"absolute",left:0,top:0,transition:"none!important",flex:"none!important"},".os-resize-observer":{animationDuration:".001s",animationName:"".concat(hsResizeObserverDummyAnimation)},".os-host-transition>.os-scrollbar, .os-host-transition>.os-scrollbar-corner":{transition:"opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s"},"html.os-html>.os-host>.os-scrollbar":{position:"absolute",zIndex:999999},".os-scrollbar, .os-scrollbar-corner":{position:"absolute",opacity:1,zIndex:1},".os-scrollbar-corner":{bottom:0,right:0,height:10,width:10,backgroundColor:"transparent"},".os-scrollbar":{pointerEvents:"none",padding:2,boxSizing:"border-box",background:0},".os-scrollbar-track":{pointerEvents:"auto",position:"relative",height:"100%",width:"100%",padding:"0!important",border:"0!important"},".os-scrollbar-handle":{pointerEvents:"auto",position:"absolute",width:"100%",height:"100%"},".os-scrollbar-handle-off, .os-scrollbar-track-off":{pointerEvents:"none"},".os-scrollbar.os-scrollbar-unusable, .os-scrollbar.os-scrollbar-unusable *":{pointerEvents:"none!important"},".os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle":{opacity:"0!important"},".os-scrollbar-horizontal":{bottom:0,left:0,right:10,height:10},".os-scrollbar-vertical":{top:0,right:0,bottom:10,width:10},".os-host-rtl>.os-scrollbar-horizontal":{right:0},".os-host-rtl>.os-scrollbar-vertical":{right:"auto",left:0},".os-host-rtl>.os-scrollbar-corner":{right:"auto",left:0},".os-scrollbar-auto-hidden, .os-padding+.os-scrollbar-corner, .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner, .os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal, .os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner, .os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner, .os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner":{opacity:0,visibility:"hidden",pointerEvents:"none"},".os-scrollbar-corner-resize-both":{cursor:"nwse-resize"},".os-host-rtl>.os-scrollbar-corner-resize-both":{cursor:"nesw-resize"},".os-scrollbar-corner-resize-horizontal":{cursor:"ew-resize"},".os-scrollbar-corner-resize-vertical":{cursor:"ns-resize"},".os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize":{cursor:"default"},".os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical":{top:0,bottom:0},".os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal, .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal":{right:0,left:0},".os-scrollbar:hover, .os-scrollbar-corner.os-scrollbar-corner-resize":{opacity:"1!important",visibility:"visible!important"},".os-scrollbar-corner.os-scrollbar-corner-resize":{backgroundImage:"linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)",backgroundRepeat:"no-repeat",backgroundPosition:"100% 100%",pointerEvents:"auto!important"},".os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize":{transform:"scale(-1,1)"},".os-host-overflow":{overflow:"hidden!important"},".os-theme-dark.os-host-rtl>.os-scrollbar-horizontal":{left:10,right:0},".os-scrollbar.os-scrollbar-unusable":{background:0},".os-scrollbar>.os-scrollbar-track":{background:0},".os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle":{minWidth:30},".os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle":{minHeight:30},".os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{transition:"background-color .3s"},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-scrollbar>.os-scrollbar-track":{borderRadius:10},".os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle":{background:theme.color.darker,opacity:.5},".os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle":{opacity:.6},".os-scrollbar-horizontal .os-scrollbar-handle:before, .os-scrollbar-vertical .os-scrollbar-handle:before":{content:"''",position:"absolute",left:0,right:0,top:0,bottom:0,display:"block"},".os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before":{display:"none"},".os-scrollbar-horizontal .os-scrollbar-handle:before":{top:-6,bottom:-2},".os-scrollbar-vertical .os-scrollbar-handle:before":{left:-6,right:-2},".os-host-rtl.os-scrollbar-vertical .os-scrollbar-handle:before":{right:-6,left:-2}}},GlobalScrollAreaStyles=function GlobalScrollAreaStyles(){return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_storybook_theming__WEBPACK_IMPORTED_MODULE_3__.a,{styles:getScrollAreaStyles})};GlobalScrollAreaStyles.displayName="GlobalScrollAreaStyles",__webpack_exports__.default=GlobalScrollAreaStyles}}]); -------------------------------------------------------------------------------- /docs/8.15577edffecf900a8de2.manager.bundle.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[8],{864:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"OverlayScrollbarsComponent",(function(){return OverlayScrollbarsComponent}));__webpack_require__(456),__webpack_require__(26),__webpack_require__(88),__webpack_require__(79),__webpack_require__(62),__webpack_require__(31),__webpack_require__(77),__webpack_require__(40),__webpack_require__(18),__webpack_require__(23),__webpack_require__(4),__webpack_require__(15);var react__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_12___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_12__),overlayscrollbars__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(887),overlayscrollbars__WEBPACK_IMPORTED_MODULE_13___default=__webpack_require__.n(overlayscrollbars__WEBPACK_IMPORTED_MODULE_13__);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var OverlayScrollbarsComponent=function OverlayScrollbarsComponent(_ref){var _ref$options=_ref.options,options=void 0===_ref$options?{}:_ref$options,extensions=_ref.extensions,className=_ref.className,children=_ref.children,rest=_objectWithoutProperties(_ref,["options","extensions","className","children"]),osTargetRef=react__WEBPACK_IMPORTED_MODULE_12___default.a.useRef(),osInstance=react__WEBPACK_IMPORTED_MODULE_12___default.a.useRef();return react__WEBPACK_IMPORTED_MODULE_12___default.a.useEffect((function(){return osInstance.current=overlayscrollbars__WEBPACK_IMPORTED_MODULE_13___default()(osTargetRef.current,options,extensions),mergeHostClassNames(osInstance.current,className),function(){overlayscrollbars__WEBPACK_IMPORTED_MODULE_13___default.a.valid(osInstance.current)&&(osInstance.current.destroy(),osInstance.current=null)}}),[]),react__WEBPACK_IMPORTED_MODULE_12___default.a.useEffect((function(){overlayscrollbars__WEBPACK_IMPORTED_MODULE_13___default.a.valid(osInstance.current)&&osInstance.current.options(options)}),[options]),react__WEBPACK_IMPORTED_MODULE_12___default.a.useEffect((function(){overlayscrollbars__WEBPACK_IMPORTED_MODULE_13___default.a.valid(osInstance.current)&&mergeHostClassNames(osInstance.current,className)}),[className]),react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div",_extends({className:"os-host"},rest,{ref:osTargetRef}),react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div",{className:"os-resize-observer-host"}),react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div",{className:"os-padding"},react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div",{className:"os-viewport"},react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div",{className:"os-content"},children))),react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div",{className:"os-scrollbar os-scrollbar-horizontal "},react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div",{className:"os-scrollbar-track"},react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div",{className:"os-scrollbar-handle"}))),react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div",{className:"os-scrollbar os-scrollbar-vertical"},react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div",{className:"os-scrollbar-track"},react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div",{className:"os-scrollbar-handle"}))),react__WEBPACK_IMPORTED_MODULE_12___default.a.createElement("div",{className:"os-scrollbar-corner"}))};function mergeHostClassNames(osInstance,className){if(overlayscrollbars__WEBPACK_IMPORTED_MODULE_13___default.a.valid(osInstance)){var host=osInstance.getElements().host,regex=new RegExp("(^os-host([-_].+|)$)|".concat(osInstance.options().className.replace(/\s/g,"$|"),"$"),"g"),osClassNames=host.className.split(" ").filter((function(name){return name.match(regex)})).join(" ");host.className="".concat(osClassNames," ").concat(className||"")}}OverlayScrollbarsComponent.displayName="OverlayScrollbarsComponent",__webpack_exports__.default=OverlayScrollbarsComponent}}]); -------------------------------------------------------------------------------- /docs/9.d7d85aa0a49a98f17218.manager.bundle.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[9],{866:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"ColorControl",(function(){return Color_ColorControl}));__webpack_require__(23),__webpack_require__(4),__webpack_require__(9),__webpack_require__(5),__webpack_require__(13),__webpack_require__(6),__webpack_require__(7),__webpack_require__(10),__webpack_require__(17),__webpack_require__(18),__webpack_require__(15),__webpack_require__(67),__webpack_require__(40),__webpack_require__(26),__webpack_require__(22),__webpack_require__(120),__webpack_require__(79),__webpack_require__(168),__webpack_require__(77),__webpack_require__(16),__webpack_require__(31),__webpack_require__(14);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),index_module=__webpack_require__(938),color_convert=__webpack_require__(935),color_convert_default=__webpack_require__.n(color_convert),throttle=__webpack_require__(408),throttle_default=__webpack_require__.n(throttle),esm=__webpack_require__(1);__webpack_require__(47);function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Note=esm.styled.div((function(_ref){var theme=_ref.theme;return{padding:"2px 6px",lineHeight:"16px",fontSize:10,fontWeight:theme.typography.weight.bold,color:theme.color.lightest,boxShadow:"0 0 5px 0 rgba(0, 0, 0, 0.3)",borderRadius:4,whiteSpace:"nowrap",pointerEvents:"none",zIndex:-1,background:"rgba(0, 0, 0, 0.4)",margin:6}})),TooltipNote_TooltipNote=function TooltipNote(_ref2){var note=_ref2.note,props=_objectWithoutProperties(_ref2,["note"]);return react_default.a.createElement(Note,props,note)};TooltipNote_TooltipNote.displayName="TooltipNote";var _ColorPicker,_fallbackColor,lazy_WithTooltip=__webpack_require__(405),esm_form=__webpack_require__(55),icon=__webpack_require__(60),helpers=__webpack_require__(39);function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Wrapper=esm.styled.div({position:"relative",maxWidth:250}),PickerTooltip=Object(esm.styled)(lazy_WithTooltip.a)({position:"absolute",zIndex:1,top:4,left:4}),TooltipContent=esm.styled.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Color_Note=Object(esm.styled)(TooltipNote_TooltipNote)((function(_ref){return{fontFamily:_ref.theme.typography.fonts.base}})),Swatches=esm.styled.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),SwatchColor=esm.styled.div((function(_ref2){var theme=_ref2.theme;return{width:16,height:16,boxShadow:_ref2.active?"".concat(theme.appBorderColor," 0 0 0 1px inset, ").concat(theme.color.mediumdark,"50 0 0 0 4px"):"".concat(theme.appBorderColor," 0 0 0 1px inset"),borderRadius:theme.appBorderRadius}})),Color_Swatch=function Swatch(_ref3){var value=_ref3.value,active=_ref3.active,onClick=_ref3.onClick,style=_ref3.style,props=Color_objectWithoutProperties(_ref3,["value","active","onClick","style"]),backgroundImage="linear-gradient(".concat(value,", ").concat(value,"), ").concat('url(\'data:image/svg+xml;charset=utf-8,\')',", linear-gradient(#fff, #fff)");return react_default.a.createElement(SwatchColor,_extends({},props,{active:active,onClick:onClick,style:Object.assign({},style,{backgroundImage:backgroundImage})}))};Color_Swatch.displayName="Swatch";var ColorSpace,Input=Object(esm.styled)(esm_form.a.Input)((function(_ref4){return{width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:_ref4.theme.typography.fonts.base}})),ToggleIcon=Object(esm.styled)(icon.a)((function(_ref5){return{position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:_ref5.theme.input.color}}));!function(ColorSpace){ColorSpace.RGB="rgb",ColorSpace.HSL="hsl",ColorSpace.HEX="hex"}(ColorSpace||(ColorSpace={}));var COLOR_SPACES=Object.values(ColorSpace),COLOR_REGEXP=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,RGB_REGEXP=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,HSL_REGEXP=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,HEX_REGEXP=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,SHORTHEX_REGEXP=/^\s*#?([0-9a-f]{3})\s*$/i,ColorPicker=(_defineProperty(_ColorPicker={},ColorSpace.HEX,index_module.a),_defineProperty(_ColorPicker,ColorSpace.RGB,index_module.c),_defineProperty(_ColorPicker,ColorSpace.HSL,index_module.b),_ColorPicker),fallbackColor=(_defineProperty(_fallbackColor={},ColorSpace.HEX,"transparent"),_defineProperty(_fallbackColor,ColorSpace.RGB,"rgba(0, 0, 0, 0)"),_defineProperty(_fallbackColor,ColorSpace.HSL,"hsla(0, 0%, 0%, 0)"),_fallbackColor),stringToArgs=function stringToArgs(value){var match=null==value?void 0:value.match(COLOR_REGEXP);if(!match)return[0,0,0,1];var _match=_slicedToArray(match,5),x=_match[1],y=_match[2],z=_match[3],_match$=_match[4];return[x,y,z,void 0===_match$?1:_match$].map(Number)},Color_parseValue=function parseValue(value){var _ref12;if(value){var valid=!0;if(RGB_REGEXP.test(value)){var _ref8,_stringToArgs2=_slicedToArray(stringToArgs(value),4),r=_stringToArgs2[0],g=_stringToArgs2[1],b=_stringToArgs2[2],a=_stringToArgs2[3],_ref7=_slicedToArray(color_convert_default.a.rgb.hsl([r,g,b])||[0,0,0],3),h=_ref7[0],s=_ref7[1],l=_ref7[2];return _defineProperty(_ref8={valid:valid,value:value,keyword:color_convert_default.a.rgb.keyword([r,g,b]),colorSpace:ColorSpace.RGB},ColorSpace.RGB,value),_defineProperty(_ref8,ColorSpace.HSL,"hsla(".concat(h,", ").concat(s,"%, ").concat(l,"%, ").concat(a,")")),_defineProperty(_ref8,ColorSpace.HEX,"#".concat(color_convert_default.a.rgb.hex([r,g,b]).toLowerCase())),_ref8}if(HSL_REGEXP.test(value)){var _ref11,_stringToArgs4=_slicedToArray(stringToArgs(value),4),_h=_stringToArgs4[0],_s2=_stringToArgs4[1],_l=_stringToArgs4[2],_a=_stringToArgs4[3],_ref10=_slicedToArray(color_convert_default.a.hsl.rgb([_h,_s2,_l])||[0,0,0],3),_r=_ref10[0],_g=_ref10[1],_b=_ref10[2];return _defineProperty(_ref11={valid:valid,value:value,keyword:color_convert_default.a.hsl.keyword([_h,_s2,_l]),colorSpace:ColorSpace.HSL},ColorSpace.RGB,"rgba(".concat(_r,", ").concat(_g,", ").concat(_b,", ").concat(_a,")")),_defineProperty(_ref11,ColorSpace.HSL,value),_defineProperty(_ref11,ColorSpace.HEX,"#".concat(color_convert_default.a.hsl.hex([_h,_s2,_l]).toLowerCase())),_ref11}var plain=value.replace("#",""),rgb=color_convert_default.a.keyword.rgb(plain)||color_convert_default.a.hex.rgb(plain),hsl=color_convert_default.a.rgb.hsl(rgb),mapped=value;if(/[^#a-f0-9]/i.test(value)?mapped=plain:HEX_REGEXP.test(value)&&(mapped="#".concat(plain)),mapped.startsWith("#"))valid=HEX_REGEXP.test(mapped);else try{color_convert_default.a.keyword.hex(mapped)}catch(e){valid=!1}return _defineProperty(_ref12={valid:valid,value:mapped,keyword:color_convert_default.a.rgb.keyword(rgb),colorSpace:ColorSpace.HEX},ColorSpace.RGB,"rgba(".concat(rgb[0],", ").concat(rgb[1],", ").concat(rgb[2],", 1)")),_defineProperty(_ref12,ColorSpace.HSL,"hsla(".concat(hsl[0],", ").concat(hsl[1],"%, ").concat(hsl[2],"%, 1)")),_defineProperty(_ref12,ColorSpace.HEX,mapped),_ref12}},Color_useColorInput=function useColorInput(initialValue,onChange){var _useState2=_slicedToArray(Object(react.useState)(initialValue||""),2),value=_useState2[0],setValue=_useState2[1],_useState4=_slicedToArray(Object(react.useState)((function(){return Color_parseValue(value)})),2),color=_useState4[0],setColor=_useState4[1],_useState6=_slicedToArray(Object(react.useState)((null==color?void 0:color.colorSpace)||ColorSpace.HEX),2),colorSpace=_useState6[0],setColorSpace=_useState6[1];Object(react.useEffect)((function(){void 0===initialValue&&(setValue(""),setColor(void 0),setColorSpace(ColorSpace.HEX))}),[initialValue]);var realValue=Object(react.useMemo)((function(){return function getRealValue(value,color,colorSpace){if(!value||null==color||!color.valid)return fallbackColor[colorSpace];if(colorSpace!==ColorSpace.HEX)return(null==color?void 0:color[colorSpace])||fallbackColor[colorSpace];if(!color.hex.startsWith("#"))try{return"#".concat(color_convert_default.a.keyword.hex(color.hex))}catch(e){return fallbackColor.hex}var short=color.hex.match(SHORTHEX_REGEXP);if(!short)return HEX_REGEXP.test(color.hex)?color.hex:fallbackColor.hex;var _short$1$split2=_slicedToArray(short[1].split(""),3),r=_short$1$split2[0],g=_short$1$split2[1],b=_short$1$split2[2];return"#".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b)}(value,color,colorSpace).toLowerCase()}),[value,color,colorSpace]),updateValue=Object(react.useCallback)((function(update){var parsed=Color_parseValue(update);setValue((null==parsed?void 0:parsed.value)||update||""),parsed&&(setColor(parsed),setColorSpace(parsed.colorSpace),onChange(parsed.value))}),[onChange]),cycleColorSpace=Object(react.useCallback)((function(){var next=COLOR_SPACES.indexOf(colorSpace)+1;next>=COLOR_SPACES.length&&(next=0),setColorSpace(COLOR_SPACES[next]);var update=(null==color?void 0:color[COLOR_SPACES[next]])||"";setValue(update),onChange(update)}),[color,colorSpace,onChange]);return{value:value,realValue:realValue,updateValue:updateValue,color:color,colorSpace:colorSpace,cycleColorSpace:cycleColorSpace}},id=function id(value){return value.replace(/\s*/,"").toLowerCase()},Color_ColorControl=function ColorControl(_ref13){var name=_ref13.name,initialValue=_ref13.value,onChange=_ref13.onChange,onFocus=_ref13.onFocus,onBlur=_ref13.onBlur,presetColors=_ref13.presetColors,startOpen=_ref13.startOpen,_useColorInput=Color_useColorInput(initialValue,throttle_default()(onChange,200)),value=_useColorInput.value,realValue=_useColorInput.realValue,updateValue=_useColorInput.updateValue,color=_useColorInput.color,colorSpace=_useColorInput.colorSpace,cycleColorSpace=_useColorInput.cycleColorSpace,_usePresets=function usePresets(presetColors,currentColor,colorSpace){var _useState8=_slicedToArray(Object(react.useState)(null!=currentColor&¤tColor.valid?[currentColor]:[]),2),selectedColors=_useState8[0],setSelectedColors=_useState8[1];Object(react.useEffect)((function(){void 0===currentColor&&setSelectedColors([])}),[currentColor]);var presets=Object(react.useMemo)((function(){return(presetColors||[]).map((function(preset){return"string"==typeof preset?Color_parseValue(preset):preset.title?Object.assign({},Color_parseValue(preset.color),{keyword:preset.title}):Color_parseValue(preset.color)})).concat(selectedColors).filter(Boolean).slice(-27)}),[presetColors,selectedColors]),addPreset=Object(react.useCallback)((function(color){null!=color&&color.valid&&(presets.some((function(preset){return id(preset[colorSpace])===id(color[colorSpace])}))||setSelectedColors((function(arr){return arr.concat(color)})))}),[colorSpace,presets]);return{presets:presets,addPreset:addPreset}}(presetColors,color,colorSpace),presets=_usePresets.presets,addPreset=_usePresets.addPreset,Picker=ColorPicker[colorSpace];return react_default.a.createElement(Wrapper,null,react_default.a.createElement(PickerTooltip,{trigger:"click",startOpen:startOpen,closeOnClick:!0,onVisibilityChange:function onVisibilityChange(){return addPreset(color)},tooltip:react_default.a.createElement(TooltipContent,null,react_default.a.createElement(Picker,{color:"transparent"===realValue?"#000000":realValue,onChange:updateValue,onFocus:onFocus,onBlur:onBlur}),presets.length>0&&react_default.a.createElement(Swatches,null,presets.map((function(preset,index){return react_default.a.createElement(lazy_WithTooltip.a,{key:"".concat(preset.value,"-").concat(index),hasChrome:!1,tooltip:react_default.a.createElement(Color_Note,{note:preset.keyword||preset.value})},react_default.a.createElement(Color_Swatch,{value:preset[colorSpace],active:color&&id(preset[colorSpace])===id(color[colorSpace]),onClick:function onClick(){return updateValue(preset.value)}}))}))))},react_default.a.createElement(Color_Swatch,{value:realValue,style:{margin:4}})),react_default.a.createElement(Input,{id:Object(helpers.a)(name),value:value,onChange:function onChange(e){return updateValue(e.target.value)},onFocus:function onFocus(e){return e.target.select()},placeholder:"Choose color..."}),react_default.a.createElement(ToggleIcon,{icon:"markup",onClick:cycleColorSpace}))};Color_ColorControl.displayName="ColorControl";__webpack_exports__.default=Color_ColorControl}}]); -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zayn-m/react-auto-formgenerator/f99f61be75526b89253c6038f6b4cba8166a883b/docs/favicon.ico -------------------------------------------------------------------------------- /docs/iframe.html: -------------------------------------------------------------------------------- 1 | Storybook

No Preview

Sorry, but you either have no stories or none are selected somehow.

  • Please check the Storybook config.
  • Try reloading the page.

If the problem persists, check the browser console, or the terminal you've run Storybook from.




--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | Storybook



--------------------------------------------------------------------------------
/docs/runtime~main.909d038f912f063e8837.manager.bundle.js:
--------------------------------------------------------------------------------
1 | !function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i 
11 |  * @license  MIT
12 |  */
13 | 
14 | /*!
15 |  * https://github.com/es-shims/es5-shim
16 |  * @license es5-shim Copyright 2009-2020 by contributors, MIT License
17 |  * see https://github.com/es-shims/es5-shim/blob/master/LICENSE
18 |  */
19 | 
20 | /*!
21 |  * https://github.com/paulmillr/es6-shim
22 |  * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com)
23 |  *   and contributors,  MIT License
24 |  * es6-shim: v0.35.4
25 |  * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE
26 |  * Details and documentation:
27 |  * https://github.com/paulmillr/es6-shim/
28 |  */
29 | 
30 | /*!
31 |  * is-plain-object 
32 |  *
33 |  * Copyright (c) 2014-2017, Jon Schlinkert.
34 |  * Released under the MIT License.
35 |  */
36 | 
37 | /*!
38 |  * isobject 
39 |  *
40 |  * Copyright (c) 2014-2017, Jon Schlinkert.
41 |  * Released under the MIT License.
42 |  */
43 | 
44 | /** @license React v0.20.2
45 |  * scheduler.production.min.js
46 |  *
47 |  * Copyright (c) Facebook, Inc. and its affiliates.
48 |  *
49 |  * This source code is licensed under the MIT license found in the
50 |  * LICENSE file in the root directory of this source tree.
51 |  */
52 | 
53 | /** @license React v16.13.1
54 |  * react-is.production.min.js
55 |  *
56 |  * Copyright (c) Facebook, Inc. and its affiliates.
57 |  *
58 |  * This source code is licensed under the MIT license found in the
59 |  * LICENSE file in the root directory of this source tree.
60 |  */
61 | 
62 | /** @license React v17.0.2
63 |  * react-dom.production.min.js
64 |  *
65 |  * Copyright (c) Facebook, Inc. and its affiliates.
66 |  *
67 |  * This source code is licensed under the MIT license found in the
68 |  * LICENSE file in the root directory of this source tree.
69 |  */
70 | 
71 | /** @license React v17.0.2
72 |  * react-jsx-runtime.production.min.js
73 |  *
74 |  * Copyright (c) Facebook, Inc. and its affiliates.
75 |  *
76 |  * This source code is licensed under the MIT license found in the
77 |  * LICENSE file in the root directory of this source tree.
78 |  */
79 | 
80 | /** @license React v17.0.2
81 |  * react.production.min.js
82 |  *
83 |  * Copyright (c) Facebook, Inc. and its affiliates.
84 |  *
85 |  * This source code is licensed under the MIT license found in the
86 |  * LICENSE file in the root directory of this source tree.
87 |  */
88 | 
89 | //! stable.js 0.1.8, https://github.com/Two-Screen/stable
90 | 
91 | //! © 2018 Angry Bytes and contributors. MIT licensed.
92 | 


--------------------------------------------------------------------------------
/docs/vendors~main.5ec57e1f.iframe.bundle.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"vendors~main.5ec57e1f.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}


--------------------------------------------------------------------------------
/docs/vendors~main.d3455eed64b243c89325.manager.bundle.js.LICENSE.txt:
--------------------------------------------------------------------------------
 1 | /*
 2 | object-assign
 3 | (c) Sindre Sorhus
 4 | @license MIT
 5 | */
 6 | 
 7 | /*!
 8 |   Copyright (c) 2017 Jed Watson.
 9 |   Licensed under the MIT License (MIT), see
10 |   http://jedwatson.github.io/classnames
11 | */
12 | 
13 | /*!
14 |  * Fuse.js v3.6.1 - Lightweight fuzzy-search (http://fusejs.io)
15 |  * 
16 |  * Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me)
17 |  * All Rights Reserved. Apache Software License 2.0
18 |  * 
19 |  * http://www.apache.org/licenses/LICENSE-2.0
20 |  */
21 | 
22 | /*!
23 |  * https://github.com/es-shims/es5-shim
24 |  * @license es5-shim Copyright 2009-2020 by contributors, MIT License
25 |  * see https://github.com/es-shims/es5-shim/blob/master/LICENSE
26 |  */
27 | 
28 | /*!
29 |  * https://github.com/paulmillr/es6-shim
30 |  * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com)
31 |  *   and contributors,  MIT License
32 |  * es6-shim: v0.35.4
33 |  * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE
34 |  * Details and documentation:
35 |  * https://github.com/paulmillr/es6-shim/
36 |  */
37 | 
38 | /*!
39 |  * isobject 
40 |  *
41 |  * Copyright (c) 2014-2017, Jon Schlinkert.
42 |  * Released under the MIT License.
43 |  */
44 | 
45 | /** @license React v0.19.1
46 |  * scheduler.production.min.js
47 |  *
48 |  * Copyright (c) Facebook, Inc. and its affiliates.
49 |  *
50 |  * This source code is licensed under the MIT license found in the
51 |  * LICENSE file in the root directory of this source tree.
52 |  */
53 | 
54 | /** @license React v16.13.1
55 |  * react-is.production.min.js
56 |  *
57 |  * Copyright (c) Facebook, Inc. and its affiliates.
58 |  *
59 |  * This source code is licensed under the MIT license found in the
60 |  * LICENSE file in the root directory of this source tree.
61 |  */
62 | 
63 | /** @license React v16.14.0
64 |  * react-dom.production.min.js
65 |  *
66 |  * Copyright (c) Facebook, Inc. and its affiliates.
67 |  *
68 |  * This source code is licensed under the MIT license found in the
69 |  * LICENSE file in the root directory of this source tree.
70 |  */
71 | 
72 | /** @license React v16.14.0
73 |  * react.production.min.js
74 |  *
75 |  * Copyright (c) Facebook, Inc. and its affiliates.
76 |  *
77 |  * This source code is licensed under the MIT license found in the
78 |  * LICENSE file in the root directory of this source tree.
79 |  */
80 | 
81 | /** @license React v17.0.1
82 |  * react-is.production.min.js
83 |  *
84 |  * Copyright (c) Facebook, Inc. and its affiliates.
85 |  *
86 |  * This source code is licensed under the MIT license found in the
87 |  * LICENSE file in the root directory of this source tree.
88 |  */
89 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require("./dist/index");


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-auto-formgenerator",
 3 |   "version": "1.2.1",
 4 |   "description": "React component to auto generate forms using JSON objects",
 5 |   "main": "dist/index.js",
 6 |   "module": "dist/index.es.js",
 7 |   "dependencies": {
 8 |     "axios": "^0.21.1",
 9 |     "react-select": "^4.3.1",
10 |     "react-switch": "^6.0.0",
11 |     "react-toastify": "^7.0.4"
12 |   },
13 |   "devDependencies": {
14 |     "@babel/core": "^7.15.0",
15 |     "@babel/plugin-transform-arrow-functions": "^7.14.5",
16 |     "@babel/preset-env": "^7.15.0",
17 |     "@babel/preset-react": "^7.14.5",
18 |     "@babel/preset-stage-0": "^7.8.3",
19 |     "@babel/runtime": "^7.14.8",
20 |     "@rollup/plugin-node-resolve": "^13.0.4",
21 |     "@rollup/plugin-replace": "^3.0.0",
22 |     "@storybook/addon-actions": "^6.3.6",
23 |     "@storybook/addon-essentials": "^6.3.6",
24 |     "@storybook/addon-links": "^6.3.6",
25 |     "@storybook/react": "^6.3.6",
26 |     "babel-loader": "^8.2.2",
27 |     "babel-preset-react": "^6.24.1",
28 |     "path": "^0.12.7",
29 |     "prop-types": "^15.7.2",
30 |     "react": "^17.0.2",
31 |     "react-dom": "^17.0.2",
32 |     "rollup": "^2.56.0",
33 |     "rollup-plugin-babel": "^4.4.0",
34 |     "rollup-plugin-commonjs": "^10.1.0",
35 |     "rollup-plugin-node-polyfills": "^0.2.1",
36 |     "rollup-plugin-peer-deps-external": "^2.2.4",
37 |     "rollup-plugin-postcss": "^4.0.0",
38 |     "rollup-plugin-terser": "^7.0.2",
39 |     "webpack": "^4.46.0",
40 |     "webpack-cli": "^3.3.12",
41 |     "webpack-node-externals": "^3.0.0"
42 |   },
43 |   "peerDependencies": {
44 |     "prop-types": "^15.7.2",
45 |     "react": "^17.0.2",
46 |     "react-dom": "^17.0.2"
47 |   },
48 |   "scripts": {
49 |     "storybook": "start-storybook -p 6006",
50 |     "build-storybook": "build-storybook -o docs",
51 |     "build-lib": "rollup -c",
52 |     "build-webpack": "webpack"
53 |   },
54 |   "repository": {
55 |     "type": "git",
56 |     "url": "git+https://github.com/zayn-m/react-auto-formgenerator.git"
57 |   },
58 |   "keywords": [
59 |     "react-formgenerator",
60 |     "react-auto-formgenerator",
61 |     "forms",
62 |     "react",
63 |     "frontend",
64 |     "react-component"
65 |   ],
66 |   "author": "zayn-m",
67 |   "license": "ISC",
68 |   "bugs": {
69 |     "url": "https://github.com/zayn-m/react-auto-formgenerator/issues"
70 |   },
71 |   "homepage": "https://github.com/zayn-m/react-auto-formgenerator#readme"
72 | }
73 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import babel from 'rollup-plugin-babel';
 3 | import external from 'rollup-plugin-peer-deps-external';
 4 | import { terser } from 'rollup-plugin-terser';
 5 | import postcss from 'rollup-plugin-postcss';
 6 | import resolve from '@rollup/plugin-node-resolve';
 7 | import nodePolyfills from 'rollup-plugin-node-polyfills';
 8 | import commonjs from 'rollup-plugin-commonjs';
 9 | import replace from '@rollup/plugin-replace';
10 | 
11 | import React from 'react';
12 | import ReactDOM from 'react-dom';
13 | 
14 | export default [
15 |   {
16 |     input: './src/index.js',
17 |     output: [
18 |       {
19 |         file: 'dist/index.js',
20 |         format: 'cjs',
21 |       },
22 |       {
23 |         file: 'dist/index.es.js',
24 |         format: 'es',
25 |         exports: 'named',
26 |       }
27 |     ],
28 |     plugins: [
29 |       external(),
30 |       postcss({
31 |         plugins: [],
32 |         minimize: true,
33 |       }),
34 |       commonjs({
35 |         include: /node_modules/,
36 |         namedExports: {
37 |           'react': Object.keys(React),
38 |           'react-dom': Object.keys(ReactDOM),
39 |         }
40 |       }),
41 |       babel({
42 |         babelrc: true,
43 |         exclude: 'node_modules/**',
44 |         presets: ['@babel/preset-react'],
45 |         plugins: ['@babel/plugin-transform-arrow-functions']
46 |       }),
47 |       nodePolyfills(),
48 |       resolve({
49 |           browser: true
50 |       }),
51 |       terser()
52 |     ]
53 |   }
54 | ];


--------------------------------------------------------------------------------
/src/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zayn-m/react-auto-formgenerator/f99f61be75526b89253c6038f6b4cba8166a883b/src/.DS_Store


--------------------------------------------------------------------------------
/src/assets/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zayn-m/react-auto-formgenerator/f99f61be75526b89253c6038f6b4cba8166a883b/src/assets/.DS_Store


--------------------------------------------------------------------------------
/src/assets/styles.css:
--------------------------------------------------------------------------------
  1 | 
  2 | body {
  3 |   font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  4 | }
  5 | 
  6 | .r-fg-hidden {
  7 |   opacity: 0;
  8 | }
  9 | 
 10 | /* Input fields */
 11 | .r-fg-formcontrol {
 12 |   display: block;
 13 |   width: 100%;
 14 |   text-indent: 10px;
 15 |   padding: 0.375rem 0rem;
 16 |   font-size: 1rem;
 17 |   font-weight: 400;
 18 |   line-height: 1.5;
 19 |   color: #212529;
 20 |   background-color: #fff;
 21 |   background-clip: padding-box;
 22 |   border: 1px solid #ced4da;
 23 |   -webkit-appearance: none;
 24 |   -moz-appearance: none;
 25 |   appearance: none;
 26 |   border-radius: 0.25rem;
 27 |   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 28 | }
 29 | 
 30 | @media (prefers-reduced-motion: reduce) {
 31 |   .r-fg-formcontrol {
 32 |     transition: none;
 33 |   }
 34 | }
 35 | .r-fg-formcontrol[type=file] {
 36 |   overflow: hidden;
 37 | }
 38 | .r-fg-formcontrol[type=file]:not(:disabled):not([readonly]) {
 39 |   cursor: pointer;
 40 | }
 41 | .r-fg-formcontrol:focus {
 42 |   color: #212529;
 43 |   background-color: #fff;
 44 |   border-color: #86b7fe;
 45 |   outline: 0;
 46 |   box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 47 | }
 48 | .r-fg-formcontrol::-webkit-date-and-time-value {
 49 |   height: 1.5em;
 50 | }
 51 | .r-fg-formcontrol::-moz-placeholder {
 52 |   color: #6c757d;
 53 |   opacity: 1;
 54 | }
 55 | .r-fg-formcontrol::placeholder {
 56 |   color: #6c757d;
 57 |   opacity: 1;
 58 | }
 59 | .r-fg-formcontrol:disabled, .r-fg-formcontrol[readonly] {
 60 |   background-color: #e9ecef;
 61 |   opacity: 1;
 62 | }
 63 | .r-fg-formcontrol::file-selector-button {
 64 |   padding: 0.375rem 0.75rem;
 65 |   margin: -0.375rem -0.75rem;
 66 |   -webkit-margin-end: 0.75rem;
 67 |   margin-inline-end: 0.75rem;
 68 |   color: #212529;
 69 |   background-color: #e9ecef;
 70 |   pointer-events: none;
 71 |   border-color: inherit;
 72 |   border-style: solid;
 73 |   border-width: 0;
 74 |   border-inline-end-width: 1px;
 75 |   border-radius: 0;
 76 |   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 77 | }
 78 | @media (prefers-reduced-motion: reduce) {
 79 |   .r-fg-formcontrol::file-selector-button {
 80 |     transition: none;
 81 |   }
 82 | }
 83 | .r-fg-formcontrol:hover:not(:disabled):not([readonly])::file-selector-button {
 84 |   background-color: #dde0e3;
 85 | }
 86 | .r-fg-formcontrol::-webkit-file-upload-button {
 87 |   padding: 0.375rem 0.75rem;
 88 |   margin: -0.375rem -0.75rem;
 89 |   -webkit-margin-end: 0.75rem;
 90 |   margin-inline-end: 0.75rem;
 91 |   color: #212529;
 92 |   background-color: #e9ecef;
 93 |   pointer-events: none;
 94 |   border-color: inherit;
 95 |   border-style: solid;
 96 |   border-width: 0;
 97 |   border-inline-end-width: 1px;
 98 |   border-radius: 0;
 99 |   -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
100 |   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
101 | }
102 | @media (prefers-reduced-motion: reduce) {
103 |   .r-fg-formcontrol::-webkit-file-upload-button {
104 |     -webkit-transition: none;
105 |     transition: none;
106 |   }
107 | }
108 | .r-fg-formcontrol:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
109 |   background-color: #dde0e3;
110 | }
111 | 
112 | .r-fg-select {
113 | 
114 | }
115 | 
116 | .r-fg-btn {
117 |   margin-top: 20px;
118 |   padding: 10px 20px;
119 |   cursor: pointer;
120 |   background-color: #167348;
121 |   color: white;
122 |   border: 0;
123 |   border-radius: 3px;
124 |   font-weight: 600;
125 | }
126 | 
127 | .r-fg-btn:disabled,
128 | .r-fg-btn[disabled] {
129 |   border: 1px solid #999999;
130 |   background-color: #cccccc;
131 |   color: #666666;
132 |   cursor: not-allowed;
133 | }
134 | 
135 | .r-fg-invalid-feedback {
136 |   color: red;
137 |   margin-bottom: 10px;
138 |   margin-top: 5px;
139 | }
140 | 
141 | .r-fg-file {
142 |   overflow: hidden;
143 | }
144 | 
145 | /* Sections  */
146 | .r-fg-section {
147 |   border: 1px solid #eee;
148 | 
149 |   margin-top: 10px;
150 | }
151 | 
152 | .r-fg-section h4 {
153 |   cursor: pointer;
154 | }
155 | 
156 | .r-fg-section-input {
157 |   display: none;
158 | }
159 | 
160 | .lbl-toggle {
161 |   display: block;
162 |   font-size: 1.1rem;
163 |   padding-bottom: 10px;
164 |   color: #000;
165 |   cursor: pointer;
166 |   background-color: #F7F7F7;
167 |   border-radius: 7px;
168 |   padding: 10px;
169 |   transition: all 0.25s ease-out;
170 | }
171 | 
172 | .lbl-toggle:hover {
173 | 
174 | }
175 | 
176 | .lbl-toggle::after {
177 |   content: " ";
178 |   display: inline-block;
179 |   border-top: 5px solid transparent;
180 |   border-bottom: 5px solid transparent;
181 |   border-left: 5px solid currentColor;
182 |   vertical-align: middle;
183 |   margin-left: 0.7rem;
184 |   transform: translateY(-2px);
185 |   transition: transform 0.2s ease-out;
186 | }
187 | 
188 | .r-fg-section-input:checked + .lbl-toggle::after {
189 |   transform: rotate(90deg) translateX(-3px);
190 | }
191 | .r-fg-section-content {
192 |   max-height: 0px;
193 |   overflow: hidden;
194 |   transition: max-height 0.25s ease-in-out;
195 | }
196 | .r-fg-section-input:checked + .lbl-toggle + .r-fg-section-content {
197 |   max-height: 350px;
198 | }
199 | .r-fg-section-input:checked + .lbl-toggle {
200 |   border-bottom-right-radius: 0;
201 |   border-bottom-left-radius: 0;
202 | }
203 | .r-fg-section-content .content-inner {
204 |   background: rgba(0, 105, 255, 0.2);
205 |   border-bottom: 1px solid rgba(0, 105, 255, 0.45);
206 |   border-bottom-left-radius: 7px;
207 |   border-bottom-right-radius: 7px;
208 |   padding: 0.5rem 1rem;
209 | }
210 | 
211 | .r-fg-section-content {
212 |   transition: max-height 0.2s ease-out;
213 |   padding: 0px 10px;
214 | }
215 | 
216 | .r-fg-remove-group {
217 |   width: 25px;
218 |   height: 25px;
219 |   cursor: pointer;
220 | }
221 | 
222 | .r-fg-new-btn-group {
223 |   padding: 10px 0px;
224 |   display: flex;
225 |   align-items: center;
226 | }
227 | 
228 | .r-fg-new-btn-group span svg {
229 |   margin-right: 5px;
230 | }
231 | 
232 | .r-fg-remove-group svg {
233 |   width: 25px;
234 |   height: 25px;
235 |   cursor: pointer;
236 | }
237 | 
238 | .r-fg-new-btn-group span {
239 |   display: flex;
240 |   align-items: center;
241 |   cursor: pointer;
242 | }
243 | 
244 | .r-fg-new-btn-group span svg {
245 |   width: 25px;
246 |   height: 25px;
247 |   cursor: pointer;
248 | }
249 | 


--------------------------------------------------------------------------------
/src/components/FormGenerator/FormGenerator.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import Select from 'react-select';
  4 | import Switch from "react-switch";
  5 | import AsyncSelect from 'react-select/async';
  6 | import Api from '../../lib/api';
  7 | import { toast } from 'react-toastify';
  8 | import { objectToFormData, getFieldName, convertToArray, getNum, selectStyles } from '../../lib/utils';
  9 | import { addIcon, removeIcon } from '../../lib/svgs';
 10 | 
 11 | import 'react-toastify/dist/ReactToastify.css';
 12 | import '../../assets/bootstrap-grid.css';
 13 | import '../../assets/styles.css';
 14 | 
 15 | export function FormGenerator(props) {
 16 |   const [fields, setFields] = useState({});
 17 |   const [data, setData] = useState({});
 18 |   const [errors, setErrors] = useState({});
 19 |   const [loading, setLoading] = useState(false);
 20 | 
 21 |   useEffect(() => {
 22 |     setPropFieldsToState();
 23 |     if (props.targetId) {
 24 |       remoteRequest();
 25 |     }
 26 |   }, [])
 27 | 
 28 |   const setPropFieldsToState = () => {
 29 |     let propFields = JSON.parse(JSON.stringify(props.fields));
 30 |     let repeaterFields;
 31 |     // changing structure for repeaters
 32 |     Object.keys(propFields).forEach(field => {
 33 |       if (props.fields[field].type && props.fields[field].type === 'repeater') {
 34 |         repeaterFields = propFields[field].fields;
 35 |         Object.keys(repeaterFields).forEach(f => {
 36 |           // creating new fields and deleting old,
 37 |           // doing this because newly dynamic generated fields will have indexes as unique names
 38 |           const propKey = `${f}$0`;
 39 |           repeaterFields[propKey] = {
 40 |             ...repeaterFields[f],
 41 |             name: propKey
 42 |           };
 43 |           delete repeaterFields[f];
 44 |         })
 45 |         repeaterFields['remove$0'] = {
 46 |           type: 'remove',
 47 |           name: 'remove$0', 
 48 |           section: true,
 49 |           col: 1
 50 |         };
 51 |         propFields[field].fields = { ...repeaterFields };
 52 |       }
 53 |     })
 54 |     setFields(propFields);
 55 |   }
 56 | 
 57 |   // Fetch data from api in edit mode
 58 |   const remoteRequest = async () => {
 59 |     const { entity, targetId } = props;
 60 |     try {
 61 |       const res = await new Api(props.apiUrl).request('get', `/${entity}/${targetId}`);
 62 |       // map data from request to fields
 63 |       Object.keys(res.data).forEach((dataField) => {
 64 |         Object.keys(fields).forEach((stateField) => {
 65 |           if (stateField === dataField) {
 66 |             handleInputChange(fields[stateField], res.data[dataField]);
 67 |           }
 68 |         })
 69 |         setData(res.data);
 70 |       })
 71 |     } catch (error) {
 72 |       console.log(error);
 73 |     }
 74 |   }
 75 | 
 76 |   /**
 77 |    * Handle input change events
 78 |    * @param {string} currentField 
 79 |    * @param {string} value
 80 |    * @param {Object} schema
 81 |    */
 82 |   const handleInputChange = (currentField, value, schema) => {
 83 |     // changing values in static fields array
 84 |     if (schema && schema.type === 'repeater') {
 85 |       setFields({
 86 |         ...fields,
 87 |         [schema.name]: {
 88 |           ...schema,
 89 |           fields: {
 90 |             ...schema.fields,
 91 |             [currentField.name]: {
 92 |               ...currentField,
 93 |               handleChange: true,
 94 |               value
 95 |             }
 96 |           }
 97 |         }
 98 |       })
 99 |     } else {
100 |       setFields({
101 |         ...fields,
102 |         [currentField.name]: {
103 |           ...fields[currentField.name],
104 |           handleChange: true,
105 |           value
106 |         }
107 |       });
108 |     }
109 |   }
110 | 
111 |   /**
112 |    * This handles toggle of sections
113 |    * @param {Object} currentField 
114 |    */
115 |   const toggleSection = (currentField) => {
116 |     setFields({
117 |       ...fields,
118 |       [currentField.name]: {
119 |         ...fields[currentField.name],
120 |         show: !currentField.show
121 |       }
122 |     });
123 |   }
124 |   /**
125 |    * This is used to render HTML fields using objects
126 |    * @param {Object} currentField 
127 |    * @param {Object} schema
128 |    * @returns HTML
129 |    */
130 |   const getField = (currentField, schema) => {
131 |     function getInput() {
132 |       switch (currentField.type) {
133 |         case 'text':
134 |         case 'email':
135 |         case 'password':
136 |         case 'number':
137 |           return (
138 |              {
148 |                 handleInputChange(currentField, e.target.value, schema);
149 |               }}
150 |             />
151 |           );
152 | 
153 |         case 'switch':
154 |           return (
155 |              handleInputChange(currentField, event, schema)}
167 |             />
168 |           );
169 | 
170 |         case 'file':
171 |           return (
172 |              handleInputChange(currentField, e.target.files[0], schema)} 
178 |             />
179 |           )
180 | 
181 |         case 'remove':
182 |           return (
183 |              removeGroupFields(currentField.name, schema.name)}>
184 |               {removeIcon()}
185 |             
186 |           )
187 | 
188 |         case 'advanceSelect':
189 |           // load options using API call
190 |           const loadOptions = (inputValue) => {
191 |             let targetUrl = '';
192 | 
193 |             if (inputValue) targetUrl = currentField.target + `?q=${inputValue}`;
194 |             if (currentField.limit) targetUrl = currentField.target + `?limit=${currentField.limit}`;
195 |             else targetUrl = currentField.target;
196 | 
197 |             return new Api(props.apiUrl).request('get', targetUrl).then((res) => {
198 |               if (schema && schema.type === 'repeater') {
199 |                 const optionsToSet = {
200 |                   ...fields,
201 |                   [schema.name]: {
202 |                     ...schema,
203 |                     fields: {
204 |                       ...schema.fields,
205 |                       [currentField.name]: {
206 |                         ...currentField,
207 |                         options: res.data
208 |                       }
209 |                     }
210 |                   }
211 |                 };
212 |                 setFields(optionsToSet);
213 |               } else {
214 |                 const optionsToSet = {
215 |                   ...fields,
216 |                   [currentField.name]: {
217 |                     ...currentField,
218 |                     options: res.data
219 |                   }
220 |                 };
221 |                 setFields(optionsToSet);
222 |               }
223 |               return res.data;
224 |             });
225 |           };
226 | 
227 |           const onSelect = (value) => {
228 |             if (currentField.multi) {
229 |               handleInputChange(currentField, value ? value.map(v => v[currentField.optionValue]) : [], schema);
230 |             } else {
231 |               handleInputChange(currentField, value[currentField.optionValue], schema);
232 |             }
233 |           }
234 | 
235 |           const onFocus = () => {
236 |             if (schema && (schema.type === 'section' || schema.type === 'repeater')) {
237 |               const element = document.getElementsByClassName(schema.name)[0];
238 |               const selectEl = document.getElementsByClassName('r-fg-select__menu')[0] || 180;                
239 |               element.style.height = element.clientHeight + (currentField.options.length * 36) + 'px';
240 |             }
241 |           }
242 | 
243 |           const onBlur = () => {
244 |             if (schema && (schema.type === 'section' || schema.type === 'repeater')) {
245 |               const element = document.getElementsByClassName(schema.name)[0];
246 |               element.style.height = 'auto';
247 |             }
248 |           }
249 | 
250 |           if (currentField.target) {
251 |             return (
252 |                op[currentField.optionValue] === currentField.value)
265 |                   ) : currentField.options ? (
266 |                     currentField.options.filter(op => data[currentField.name]?.includes(op[currentField.optionValue]) ?? null)
267 |                   ) : (
268 |                     currentField.value
269 |                   )
270 |                 }
271 |                 defaultValue={currentField.value}
272 |                 getOptionLabel={(e) =>
273 |                   currentField.optionLabel ? e[currentField.optionLabel] : e.title}
274 |                 getOptionValue={(e) => e[currentField.optionValue]}
275 |                 loadOptions={loadOptions}
276 |                 onChange={(v) => onSelect(v)}
277 |                 onFocus={onFocus}
278 |                 onBlur={onBlur}
279 |               />
280 |             );
281 |           } else {
282 |             function setValue(v, prev) {
283 |               if ((v && Array.isArray(v)) || v === null) {
284 |                 handleInputChange(
285 |                   currentField,
286 |                   prev.removedValue
287 |                     ? prev.removedValue[currentField.optionValue].toString()
288 |                     : v[v.length - 1][currentField.optionValue].toString(),
289 |                   schema
290 |                 );
291 |               } else {
292 |                 handleInputChange(currentField, v.value, schema);
293 |               }
294 |             }
295 | 
296 |             function populateMultiValue(value, options) {
297 |               return options.map((item) => {
298 |                 const res = value.map(function(v) {
299 |                   return v.toString();
300 |                 });
301 |                 if (res.includes(item[currentField.optionValue].toString())) {
302 |                   return item;
303 |                 }
304 |               });
305 |             }
306 |             return (
307 |               
424 |         
431 |         

435 |           {currentField.type === 'repeater' ? renderRepeater(currentField, index) : renderFields(currentField.fields)}
436 |         

437 |       
438 |     )
439 |   }
440 | 
441 |   /**
442 | 	 * Return fields based on object array
443 | 	 * @param {Object} fieldsObject 
444 |    * @param {Object} schema
445 | 	 */
446 |   const renderFields = (fieldsObject, schema) => {
447 |     if (!fieldsObject) return;
448 | 
449 |     let fields = fieldsObject;
450 | 		let colCount = 0;
451 | 		let finalData = [],
452 | 			rowData = [];
453 | 
454 |       // making HTML from field objects and pushing to finalData
455 |       Object.keys(fields).forEach((field, index, fieldsArr) => {
456 |         let currentField = fields[field],
457 |           inputField = '';
458 |         colCount += currentField.col || 12;
459 |         inputField = getField(currentField, schema);
460 |   
461 |         rowData.push(inputField);
462 |   
463 |         if (colCount > 11 || fieldsArr.length === index + 1) {
464 |           if (['section', 'repeater'].includes(currentField.type)) {
465 |             finalData.push(renderSection(currentField, index, schema));
466 |           } else {
467 |             finalData.push(
468 |               

469 |                 {rowData}
470 |               

471 |             );
472 |           }
473 |           colCount = 0;
474 |           rowData = [];
475 |         }
476 |       });
477 |       return finalData;
478 |   }
479 | 
480 |   const resetForm = () => {
481 |     Object.keys(fields).forEach(field =>{
482 |       fields[field] = {
483 |         ...fields[field],
484 |         value: '',
485 |         error: ''
486 |       }
487 |     })
488 |   }
489 | 
490 |   const submit = (e) => {
491 | 		e.preventDefault();
492 | 
493 |     setLoading(true);
494 |     
495 | 		const { targetId, entity } = props;
496 | 		let data = {};
497 | 		const url = targetId ? `/${entity}/${targetId}` : `/${entity}`;
498 | 		let type = targetId ? 'patch' : 'post';
499 | 
500 | 		Object.keys(fields).forEach((field) => {
501 |       if (fields[field].type === 'repeater') {
502 |         // linearize to array
503 |         let arr = convertToArray(fields[field].fields);
504 |         for (let [indx, obj] of arr.entries()) {
505 |           Object.keys(obj).forEach(objKey => {
506 |             arr[indx] = {
507 |               ...arr[indx],
508 |               [objKey.split('$')[0]]: obj[objKey].value
509 |             }
510 |             delete arr[indx][objKey];
511 |           })
512 |         }
513 | 
514 |         data = {
515 |           ...data,
516 |           [field]: arr
517 |         }
518 | 
519 |       } else {
520 |         data = {
521 |           ...data,
522 |           [field]: fields[field].value
523 |         };
524 |       }
525 | 		});
526 |     
527 |     data = objectToFormData(data);
528 | 
529 | 		new Api(props.apiUrl).request(type, url, data)
530 | 			.then((res) => {
531 | 				if (props.showToast) toast.success('Success');
532 |         if (props.submitCb) props.submitCb(res.data);
533 |         resetForm();
534 | 			})
535 | 			.catch((err) => {
536 |         console.log(err);
537 | 				if (err.response?.data?.errors) {
538 | 					Object.keys(fields).forEach(field =>{
539 | 						fields[field] = {
540 | 							...fields[field],
541 | 							error: err.response.data.errors[field]
542 | 						}
543 | 					})
544 |           setErrors(err.response.data.errors);
545 |           setFields(fields);
546 | 					if (props.showToast) toast.error('Please resolve errors');
547 | 				} else {
548 | 					if (props.showToast) toast.error('Something went wrong');
549 | 				}
550 | 			})
551 | 			.finally(() => {
552 |         setLoading(false);
553 | 			});
554 |   }
555 | 
556 |   return (
557 |     

558 |       {renderFields(fields)}
559 |       
560 |     

561 |   )
562 | }
563 | 
564 | FormGenerator.propTypes = {
565 |   idKey: PropTypes.string.isRequired,
566 |   apiUrl: PropTypes.string.isRequired,
567 | 	fields: PropTypes.object.isRequired,
568 | 	entity: PropTypes.string.isRequired,
569 | 	targetId: PropTypes.string,
570 |   submitCb: PropTypes.func,
571 |   showToast: PropTypes.bool.isRequired,
572 |   formClassName: PropTypes.string,
573 |   btnClassName: PropTypes.string
574 | }


--------------------------------------------------------------------------------
/src/components/FormGenerator/index.js:
--------------------------------------------------------------------------------
1 | export * from './FormGenerator';


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export * from './components/FormGenerator';


--------------------------------------------------------------------------------
/src/lib/api.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | import { toast } from 'react-toastify';
 3 | toast.configure();
 4 | 
 5 | class Api {
 6 | 	constructor(apiUrl, tokenKey) {
 7 | 		this.apiUrl = apiUrl;
 8 | 		this.tokenKey = tokenKey;
 9 | 		let service = axios.create({
10 | 			headers: {
11 | 				csrf: 'token'
12 | 			}
13 | 		});
14 | 
15 | 		service.interceptors.response.use(this._handleSuccess, this._handleError);
16 | 		this.service = service;
17 | 	}
18 | 
19 | 	_handleSuccess(response) {
20 | 		return response;
21 | 	}
22 | 
23 | 	_handleError(error) {
24 | 		switch (error.response && error.response.status) {
25 | 			case 401:
26 | 				toast.error('Unauthorized, check console for details');
27 | 				break;
28 | 			case 403:
29 | 				toast.error('Forbidden, check console for details');
30 | 				break;
31 | 			case 404:
32 | 				toast.error('Route not found, check console for details');
33 | 				break;
34 | 			default:
35 | 				// toast.error('Server/Unknown error occurred, check console for details');
36 | 				break;
37 | 		}
38 | 		return Promise.reject(error);
39 | 	};
40 | 
41 | 	_redirectTo(document, path) {
42 | 		document.location = path;
43 | 	};
44 | 
45 | 	/**
46 | 	 * Method to handle api requests.
47 | 	 * @param {string} type 
48 | 	 * @param {string} path
49 | 	 * @param {Object} [payload]
50 | 	 */
51 | 	request(type, path, payload) {
52 | 		type = type.toLowerCase();
53 | 
54 | 		if (path.includes('http') || path.includes('https')) {
55 | 			if (path.startsWith('/')) path = path.substr(path.indexOf('/') + 1);
56 | 		} else {
57 | 			path = this.apiUrl + path;
58 | 		}
59 | 
60 | 		const bearerToken = localStorage.getItem(this.tokenKey);
61 | 
62 | 		if (bearerToken) {
63 | 			this.service.defaults.headers.Authorization = `Bearer ${bearerToken}`;
64 | 		}
65 | 
66 | 		if (type === 'get') {
67 | 			return this.service.get(path).then(function(response) {
68 | 				return response.data;
69 | 			});
70 | 		}
71 | 
72 | 		return this.service
73 | 			.request({
74 | 				method: type,
75 | 				url: path,
76 | 				responseType: 'json',
77 | 				data: payload
78 | 			})
79 | 			.then(function(response) {
80 | 				return response.data;
81 | 			});
82 | 	}
83 | }
84 | 
85 | export default Api;


--------------------------------------------------------------------------------
/src/lib/svgs.js:
--------------------------------------------------------------------------------
 1 | export function removeIcon() {
 2 | 	return (
 3 | 		
 4 | 			
 5 | 			
 6 | 			
 7 | 		
 8 | 	);
 9 | }
10 | 
11 | export function addIcon() {
12 | 	return (
13 | 		
22 | 			
23 | 				
24 | 					
27 | 				
28 | 			
29 | 			
30 | 				
31 | 					
34 | 				
35 | 			
36 | 			
37 | 			
38 | 			
39 | 			
40 | 			
41 | 			
42 | 			
43 | 			
44 | 			
45 | 			
46 | 			
47 | 			
48 | 			
49 | 			
50 | 			
51 | 		
52 | 	);
53 | }
54 | 


--------------------------------------------------------------------------------
/src/lib/utils.js:
--------------------------------------------------------------------------------
 1 | export function objectToFormData(obj, rootName, ignoreList) {
 2 |   var formData = new FormData()
 3 | 
 4 |   function appendFormData(data, root) {
 5 |     if (!ignore(root)) {
 6 |       root = root || ""
 7 |       if (data instanceof File) {
 8 |         formData.append(root, data)
 9 |       } else if (Array.isArray(data)) {
10 |         for (var i = 0; i < data.length; i++) {
11 |           appendFormData(data[i], root + "[" + i + "]")
12 |         }
13 |       } else if (typeof data === "object" && data) {
14 |         for (var key in data) {
15 |           if (data.hasOwnProperty(key)) {
16 |             if (root === "") {
17 |               appendFormData(data[key], key)
18 |             } else {
19 |               appendFormData(data[key], root + "." + key)
20 |             }
21 |           }
22 |         }
23 |       } else {
24 |         if (data !== null && typeof data !== "undefined") {
25 |           formData.append(root, data)
26 |         }
27 |       }
28 |     }
29 |   }
30 | 
31 |   function ignore(root) {
32 |     return (
33 |       Array.isArray(ignoreList) &&
34 |       ignoreList.some(function (x) {
35 |         return x === root
36 |       })
37 |     )
38 |   }
39 | 
40 |   appendFormData(obj, rootName)
41 | 
42 |   return formData
43 | }
44 | 
45 | export function getFieldName(fieldName) {
46 |   const oldNum = fieldName.split("$")[1]
47 |   const num = Number(fieldName.split("$")[1]) + 1
48 |   return fieldName.replace(oldNum, num)
49 | }
50 | 
51 | export function getNum(fldName) {
52 |   return Number(fldName.split('$')[1]);
53 | }
54 | 
55 | export function convertToArray(obj) {
56 |   let fieldsArr = [];
57 |   Object.keys(obj).forEach(field => {
58 |     const num = getNum(field);
59 |     fieldsArr[num] = {
60 |       ...fieldsArr[num],
61 |       [field]: {
62 |         ...obj[field]
63 |       }
64 |     }
65 |   });
66 |   return fieldsArr;
67 | }
68 | 
69 | export const selectStyles = {
70 |   menu: (provided, state) => ({
71 |     ...provided,
72 |     
73 |   }),
74 | }


--------------------------------------------------------------------------------
/src/stories/FormGenerator.stories.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { storiesOf } from '@storybook/react';
 3 | import { FormGenerator } from '../components/FormGenerator';
 4 | import { userFields, candidateFields, productFields } from './types';
 5 | 
 6 | const stories = storiesOf('Forms', module);
 7 | stories.add('User', () => {
 8 |   return (
 9 |     

10 |       

11 |         

12 |           

13 |             Add User
14 |           

15 |           

16 |           

17 |              console.log('form submitted', data)}
24 |             />
25 |           

26 |         

27 |       

28 |     

29 |   );
30 | });
31 | 
32 | stories.add('Candidate', () => {
33 |   return (
34 |     

35 |       

36 |         

37 |           

38 |             Add Candidate
39 |           

40 |           

41 |           

42 |              console.log('form submitted', data)}
49 |             />
50 |           

51 |         

52 |       

53 |     

54 |   );
55 | });
56 | 
57 | stories.add('Product', () => {
58 |   return (
59 |     

60 |       

61 |         

62 |           

63 |             Add Product
64 |           

65 |           

66 |           

67 |              console.log('form submitted', data)}
74 |             />
75 |           

76 |         

77 |       

78 |     

79 |   );
80 | });
81 | 
82 | 


--------------------------------------------------------------------------------
/src/stories/types.js:
--------------------------------------------------------------------------------
  1 | export const userFields = {
  2 |   username: {
  3 |     type: 'text',
  4 |     label: 'Username',
  5 |     name: 'username',
  6 |     col: 6,
  7 |     className: 'userinput'
  8 |   },
  9 |   email: {
 10 |     type: 'email',
 11 |     label: 'Email',
 12 |     name: 'email',
 13 |     col: 6
 14 |   },
 15 |   password: {
 16 |     type: 'password',
 17 |     label: 'Password',
 18 |     name: 'password',
 19 |     col: 6
 20 |   },
 21 |   role: {
 22 |     type: 'advanceSelect',
 23 |     label: 'Role',
 24 |     name: 'role',
 25 |     options: [
 26 |       {
 27 |         value: 'admin',
 28 |         label: 'Admin'
 29 |       },
 30 |       {
 31 |         value: 'customer',
 32 |         label: 'Customer'
 33 |       }
 34 |     ],
 35 |     col: 6
 36 |   },
 37 |   album: {
 38 |     type: 'advanceSelect',
 39 |     label: 'Album',
 40 |     name: 'album',
 41 |     target: 'https://react-auto-formgenerator.herokuapp.com/products',
 42 |     optionValue: 'id',
 43 |     optionLabel: 'name',
 44 |     multi: false,
 45 |     col: 6
 46 |   },
 47 |   file: {
 48 |     type: 'file',
 49 |     label: 'Image',
 50 |     name: 'file',
 51 |     col: 6
 52 |   },
 53 |   active: {
 54 |     type: 'switch',
 55 |     label: 'Active',
 56 |     name: 'active'
 57 |   }
 58 | }
 59 | 
 60 | export const candidateFields = {
 61 |   fname: {
 62 |     type: 'text',
 63 |     label: 'Firstname',
 64 |     name: 'fname',
 65 |     col: 6,
 66 |   },
 67 |   lname: {
 68 |     type: 'text',
 69 |     label: 'Lastname',
 70 |     name: 'lname',
 71 |     col: 6
 72 |   },
 73 |   email: {
 74 |     type: 'email',
 75 |     label: 'Email',
 76 |     name: 'email',
 77 |     col: 12
 78 |   },
 79 |   phone: {
 80 |     type: 'text',
 81 |     label: 'Phone',
 82 |     name: 'phone',
 83 |     col: 12
 84 |   },
 85 |   addressSection: {
 86 |     label: 'Residence',
 87 |     type: 'section',
 88 |     name: 'addressSection',
 89 |     show: false,
 90 |     fields: {
 91 |       address: {
 92 |         type: 'text',
 93 |         label: 'Address',
 94 |         name: 'address',
 95 |         col: 12,
 96 |       },
 97 |       address2: {
 98 |         type: 'text',
 99 |         label: 'Address 2',
100 |         name: 'address2',
101 |         col: 12
102 |       },
103 |       zipcode: {
104 |         type: 'number',
105 |         label: 'Postal Code',
106 |         name: 'zipcode',
107 |         col: 4
108 |       }
109 |     }
110 |   },
111 |   educationSection: {
112 |     label: 'Education',
113 |     type: 'section',
114 |     name: 'educationSection',
115 |     show: false,
116 |     fields: {
117 |       school: {
118 |         type: 'text',
119 |         label: 'Name of School/College',
120 |         name: 'school',
121 |         col: 12
122 |       }
123 |     }
124 |   }
125 | }
126 | 
127 | export const productFields = {
128 |   name: {
129 |     type: 'text',
130 |     label: 'Name',
131 |     name: 'name',
132 |     col: 6
133 |   },
134 |   sku: {
135 |     type: 'text',
136 |     label: 'SKU',
137 |     name: 'sku',
138 |     col: 6
139 |   },
140 |   name: {
141 |     type: 'text',
142 |     label: 'Name',
143 |     name: 'name',
144 |     col: 6
145 |   },
146 |   color: {
147 |     type: 'advanceSelect',
148 |     label: 'Color',
149 |     name: 'color',
150 |     col: 6,
151 |     options: [
152 |       {
153 |         value: 'red',
154 |         label: 'Red'
155 |       },
156 |       {
157 |         value: 'yellow',
158 |         label: 'Yello'
159 |       },
160 |       {
161 |         value: 'green',
162 |         label: 'Green'
163 |       }
164 |     ]
165 |   },
166 |   size: {
167 |     type: 'advanceSelect',
168 |     label: 'Size',
169 |     name: 'size',
170 |     col: 6,
171 |     options: [
172 |       {
173 |         value: 'S',
174 |         label: 'S'
175 |       },
176 |       {
177 |         value: 'M',
178 |         label: 'M'
179 |       },
180 |       {
181 |         value: 'L',
182 |         label: 'L'
183 |       }
184 |     ]
185 |   },
186 |   productNumber: {
187 |     type: 'text',
188 |     label: 'Product Number',
189 |     name: 'productNumber',
190 |     col: 6
191 |   },
192 |   metaDescriptionSection: {
193 |     label: 'Meta Description',
194 |     type: 'section',
195 |     name: 'metaDescriptionSection',
196 |     fields: {
197 |       title: {
198 |         type: 'text',
199 |         label: 'Meta Title',
200 |         name: 'title',
201 |         col: 12
202 |       },
203 |       keywords: {
204 |         type: 'text',
205 |         label: 'Meta Keywords',
206 |         name: 'keywords',
207 |         col: 12
208 |       },
209 |       description: {
210 |         type: 'text',
211 |         label: 'Meta Description',
212 |         name: 'description',
213 |         col: 12
214 |       }
215 |     }
216 |   },
217 |   priceSection: {
218 |     label: 'Price',
219 |     type: 'section',
220 |     name: 'priceSection',
221 |     fields: {
222 |       price: {
223 |         type: 'number',
224 |         label: 'Price ($)',
225 |         name: 'price',
226 |         col: 4
227 |       },
228 |       cost: {
229 |         type: 'number',
230 |         label: 'Cost ($)',
231 |         name: 'cost',
232 |         col: 4
233 |       },
234 |       specialPrice: {
235 |         type: 'number',
236 |         label: 'Special Price ($)',
237 |         name: 'specialPrice',
238 |         col: 4
239 |       }
240 |     },
241 |   },
242 |   groupPrices: {
243 |     label: 'Group Prices',
244 |     type: 'repeater',
245 |     name: 'groupPrices',
246 |     newBtnLabel: 'Add Group Price',
247 |     fields: {
248 |       group: {
249 |         type: 'advanceSelect',
250 |         placeholder: 'Group',
251 |         name: 'group',
252 |         options: [
253 |           {
254 |             value: 'all',
255 |             label: 'All groups'
256 |           },
257 |           {
258 |             value: 'guest',
259 |             label: 'Guest'
260 |           }
261 |         ],
262 |         col: 4,
263 |       },
264 |       qty: {
265 |         type: 'number',
266 |         placeholder: 'Qty',
267 |         name: 'qty',
268 |         col: 4
269 |       },
270 |       discount: {
271 |         type: 'number',
272 |         placeholder: 'Discount',
273 |         name: 'discount',
274 |         col: 3
275 |       }
276 |     }
277 |   }
278 | }


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path'); // <-get absolute location for saving
 2 | const pkg = require('./package.json');
 3 | const nodeExternals = require('webpack-node-externals');
 4 | module.exports = {
 5 |   entry: "./src/index.js", // <- starting point for bundle 
 6 |   output: {
 7 |     path: path.resolve(__dirname, 'dist'), //<-where to save ur bundle 
 8 |     filename: "index.js", //<-filename for bundled file
 9 |     library: pkg.name,
10 |     libraryTarget: "commonjs2" //<- to which version are we compiling js 
11 |   },
12 |   module: {
13 |     rules: [
14 |       {
15 |         test: /\.(js|jsx)$/,
16 |         exclude: /node_modules/,
17 |         use: {
18 |           loader: "babel-loader"
19 |         }
20 |  },
21 |       {
22 |         test: /\.css$/i,
23 |         use: ["style-loader", "css-loader"]
24 |  }
25 |  ]
26 |   },
27 |   target: 'node',
28 |   externals: [nodeExternals()]
29 |   // if we need to bundle anything extra with our code, if nothing entered means nothing else to compile, else we can mention, if, in case we want to bundle a particular third party code with our codebase
30 |   // if we need to bundle anything extra with our code (3rd party package),we can add it as an argument to this method.
31 |   // else, if nothing is passed as argument means no additional dependency to compile.
32 | };


--------------------------------------------------------------------------------