fix(clayui.com): fix breaking build

clayui.com/src/components/Editor/index.js

@@ -7,7 +7,7 @@ import ClayAlert from '@clayui/alert';
 import {ClayButtonWithIcon} from '@clayui/button';
 import parserBabylon from 'prettier/parser-babylon';
 import prettier from 'prettier/standalone';
-import React, {useState} from 'react';
+import React, {useContext, useState} from 'react';
 import {LiveEditor, LiveError, LivePreview, LiveProvider} from 'react-live';
 
 import theme from '../../utils/react-live-theme';
@@ -38,7 +38,7 @@ const Editor = ({
 			code={code}
 			disabled={disabled}
 			noInline
-			scope={{React, spritemap, useState, ...scope}}
+			scope={{spritemap, useContext, useState, ...scope}}
 			theme={theme}
 		>
 			{preview && (

clayui.com/src/components/clay/Alerts.js

@@ -76,7 +76,7 @@ const alertToastContainerImportsCode = `
 import ClayAlert from '@clayui/alert';`;
 
 const AlertToastContainerCode = `const Component = () => {
-	const [toastItems, setToastItems] = React.useState([]);
+	const [toastItems, setToastItems] = useState([]);
 	return (
 		<>
 			<div>

clayui.com/src/components/clay/Autocomplete.js

@@ -13,8 +13,8 @@ import Editor from '../Editor';
 const autocompleteWithLoadingImportsCode = `import ClayAutocomplete from '@clayui/autocomplete';`;
 
 const autocompleteWithLoadingStateCode = `const Component = () => {
-	const [loading] = React.useState(true);
-	const [value, setValue] = React.useState('');
+	const [loading] = useState(true);
+	const [value, setValue] = useState('');
 
 	return (
 		<ClayAutocomplete>
@@ -47,8 +47,8 @@ import {useResource} from '@clayui/data-provider';
 import ClayDropDown from '@clayui/drop-down';`;
 
 const autocompleteWithDataProviderCode = `const Component = () => {
-	const [value, setValue] = React.useState('');
-	const [networkStatus, setNetworkStatus] = React.useState(4);
+	const [value, setValue] = useState('');
+	const [networkStatus, setNetworkStatus] = useState(4);
 	const {resource} = useResource({
 		fetchPolicy: 'cache-first',
 		link: 'https://rickandmortyapi.com/api/character/',

clayui.com/src/components/clay/Card.js

@@ -23,7 +23,7 @@ import ClaySticker from '@clayui/sticker';
 `;
 
 const cardCode = `const Component = () => {
-	const [active, setActive] = React.useState(false);
+	const [active, setActive] = useState(false);
 
 	return (
 		<div className="col-md-4">
@@ -143,7 +143,7 @@ const cardWithInfoImportsCode = `import {ClayCardWithInfo} from '@clayui/card';
 `;
 
 const cardWithInfoCode = `const Component = () => {
-	const [value, setValue] = React.useState(false);
+	const [value, setValue] = useState(false);
 
 	return (
 		<div className="row">
@@ -305,7 +305,7 @@ const cardWithHorizontalImportsCode = `import {ClayCardWithInfo} from '@clayui/c
 `;
 
 const cardWithHorizontalCode = `const Component = () => {
-	const [value, setValue] = React.useState(false);
+	const [value, setValue] = useState(false);
 
 	return (
 		<div className="row">

clayui.com/src/components/clay/Chart.js

@@ -17,7 +17,7 @@ const ClayChart =
 const chartImportsCode = `import ClayChart from '@clayui/charts';`;
 
 const chartCode = `const Component = () => {
-	const [active, setActive] = React.React.useState(false);
+	const [active, setActive] = useState(false);
 
 	const COLUMNS = [['data1', 100, 20, 30], ['data2', 20, 70, 100]];
 	const COLUMNS_2 = [['data1', 10, 50, 60], ['data2', 70, 30, 10]];

clayui.com/src/components/clay/Checkbox.js

@@ -35,7 +35,7 @@ const checkboxContainerPropsImportsCode = `import {ClayCheckbox} from '@clayui/f
 export const CheckboxContainerProps = () => {
 	const scope = {ClayCheckbox};
 	const code = `const Component = () => {
-	const [value, setValue] = React.useState(false);
+	const [value, setValue] = useState(false);
 
 	const data = {
 		id: 'test'
@@ -68,7 +68,7 @@ const checkboxIndeterminateImportsCode = `import {ClayCheckbox} from '@clayui/fo
 export const CheckboxIndeterminate = () => {
 	const scope = {ClayCheckbox};
 	const code = `const Component = () => {
-	const [value, setValue] = React.useState(false);
+	const [value, setValue] = useState(false);
 
 	return (
 		<ClayCheckbox
@@ -97,7 +97,7 @@ const checkboxesInlineImportsCode = `import {ClayCheckbox} from '@clayui/form';
 export const CheckboxesInline = () => {
 	const scope = {ClayCheckbox};
 	const code = `const Component = () => {
-	const [value, setValue] = React.useState(false);
+	const [value, setValue] = useState(false);
 
 	return (
 		<>
@@ -143,7 +143,7 @@ const checkboxLabelImportsCode = `import {ClayCheckbox} from '@clayui/form';
 export const CheckboxLabel = () => {
 	const scope = {ClayCheckbox};
 	const code = `const Component = () => {
-	const [value, setValue] = React.useState(false);
+	const [value, setValue] = useState(false);
 
 	return (
 		<ClayCheckbox
@@ -168,7 +168,7 @@ const checkboxWithCallbackImportsCode = `import {ClayCheckbox} from '@clayui/for
 export const CheckboxWithCallback = () => {
 	const scope = {ClayCheckbox};
 	const code = `const Component = () => {
-	const [value, setValue] = React.useState(false);
+	const [value, setValue] = useState(false);
 
 	return (
 		<ClayCheckbox

clayui.com/src/components/clay/ColorPicker.js

@@ -12,8 +12,8 @@ const colorPickerImportsCode = `import ClayColorPicker from '@clayui/color-picke
 `;
 
 const colorPickerCode = `const Component = () => {
-	const [customColors, setCustoms] = React.useState(['008000', '00FFFF', '0000FF']);
-	const [color, setColor] = React.useState(customColors[0]);
+	const [customColors, setCustoms] = useState(['008000', '00FFFF', '0000FF']);
+	const [color, setColor] = useState(customColors[0]);
 
 	return (
 		<ClayColorPicker

clayui.com/src/components/clay/DataProvider.js

@@ -61,8 +61,7 @@ const DataProviderWithNetworkStatus = () => {
 	);
 };
 
-const dataProviderWithCacheRootLevelImportsCode = `import ClayDataProvider from '@clayui/data-provider';
-import React, {useContext} from 'react';`;
+const dataProviderWithCacheRootLevelImportsCode = `import ClayDataProvider from '@clayui/data-provider';`;
 
 const dataProviderWithCacheRootLevelCode = `const Component = () => {
 	const storageContext = useContext(Store);
@@ -156,7 +155,7 @@ const useResourceWithNetworkStatusImportsCode = `import {useResource} from '@cla
 `;
 
 const useResourceWithNetworkStatusCode = `const Component = () => {
-	const [state, setState] = React.useState(() => ({
+	const [state, setState] = useState(() => ({
 		error: false,
 		loading: false,
 		networkStatus: 4,
@@ -192,7 +191,7 @@ const useResourceWithVariablesChangeImportsCode = `import {useResource} from '@c
 `;
 
 const useResourceWithVariablesChangeCode = `const Component = () => {
-	const [value, setValue] = React.useState('Rick');
+	const [value, setValue] = useState('Rick');
 	const {resource} = useResource({
 		link: 'https://rickandmortyapi.com/api/character/',
 		fetchDelay: 300,

clayui.com/src/components/clay/DatePicker.js

@@ -14,7 +14,7 @@ const datePickerWithStateImportsCode = `import ClayDatePicker from '@clayui/date
 const DatePickerWithState = () => {
 	const scope = {ClayDatePicker};
 	const code = `const Component = () => {
-	const [value, setValue] = React.useState(null);
+	const [value, setValue] = useState(null);
 
 	return (
 		<ClayDatePicker
@@ -47,7 +47,7 @@ const datePickerLocaleImportsCode = `import ClayDatePicker from '@clayui/date-pi
 const DatePickerLocale = () => {
 	const scope = {ClayDatePicker};
 	const code = `const Component = () => {
-	const [value, setValue] = React.useState(null);
+	const [value, setValue] = useState(null);
 
 	return (
 		<ClayDatePicker
@@ -98,7 +98,7 @@ const datePickerCustomFooterImportsCode = `import ClayDatePicker from '@clayui/d
 const DatePickerCustomFooter = () => {
 	const scope = {ClayDatePicker};
 	const code = `const Component = () => {
-	const [value, setValue] = React.useState(null);
+	const [value, setValue] = useState(null);
 
 	return (
 		<ClayDatePicker
@@ -133,7 +133,7 @@ const DatePickerWithTimeCode = `import ClayDatePicker from '@clayui/date-picker'
 const DatePickerWithTime = () => {
 	const scope = {ClayDatePicker};
 	const code = `const Component = () => {
-	const [value, setValue] = React.useState(null);
+	const [value, setValue] = useState(null);
 
 	return (
 		<ClayDatePicker

clayui.com/src/components/clay/DropDown.js

@@ -13,7 +13,7 @@ const dropDownImportsCode = `import ClayDropDown from '@clayui/drop-down';
 `;
 
 const dropDownCode = `const Component = () => {
-	const [active, setActive] = React.useState(false);
+	const [active, setActive] = useState(false);
 
 	return (
 		<ClayDropDown
@@ -61,7 +61,7 @@ import {ClayDropDownWithItems} from '@clayui/drop-down';
 const dropDownWithItemsCode = `
 
 const Component = () => {
-	const [value, setValue] = React.useState();
+	const [value, setValue] = useState();
     const items = [
       {
         label: 'clickable',

clayui.com/src/components/clay/DualListBox.js

@@ -48,9 +48,9 @@ const dualListBoxCode = `const Component = () => {
         ],
     ];
 
-	const [items, setItems] = React.useState(moveBoxesOptions);
-	const [leftSelected, setLeftSelected] = React.useState([]);
-	const [rightSelected, setRightSelected] = React.useState([]);
+	const [items, setItems] = useState(moveBoxesOptions);
+	const [leftSelected, setLeftSelected] = useState([]);
+	const [rightSelected, setRightSelected] = useState([]);
 
 	return (
 		<ClayDualListBox

clayui.com/src/components/clay/Form.js

@@ -12,7 +12,7 @@ const formCodeImport = `import ClayForm, {ClayInput} from '@clayui/form';
 `;
 
 const formCode = `const Component = () => {
-	const [active, setActive] = React.useState(false);
+	const [active, setActive] = useState(false);
 
 	return (
         <ClayForm>
@@ -40,7 +40,7 @@ const Form = () => {
 };
 
 const formValidationCode = `const Component = () => {
-	const [active, setActive] = React.useState(false);
+	const [active, setActive] = useState(false);
 
 	return (
         <ClayForm>
@@ -105,7 +105,7 @@ const FormValidation = () => {
 };
 
 const formTextCode = `const Component = () => {
-	const [active, setActive] = React.useState(false);
+	const [active, setActive] = useState(false);
 
 	return (
         <ClayForm>

clayui.com/src/components/clay/Label.js

@@ -12,7 +12,7 @@ const labelImportsCode = `import ClayLabel from '@clayui/label';
 `;
 
 const LabelCode = `const Component = () => {
-	const [visible, setVisible] = React.useState(true);
+	const [visible, setVisible] = useState(true);
 
 	return visible ? (
 		<ClayLabel

clayui.com/src/components/clay/ManagementToolbar.js

@@ -187,7 +187,7 @@ const ManagementToolbarCode = `const Component = () => {
 		},
 	];
 
-	const [searchMobile, setSearchMobile] = React.useState(false);
+	const [searchMobile, setSearchMobile] = useState(false);
 
 	const viewTypeActive = viewTypes.find(type => type.active);
 

clayui.com/src/components/clay/Modal.js

@@ -15,7 +15,7 @@ import ClayModal, {useModal} from '@clayui/modal';
 `;
 
 const modalCode = `const Component = () => {
-	const [visible, setVisible] = React.useState(false);
+	const [visible, setVisible] = useState(false);
 	const {observer, onClose} = useModal({
 		onClose: () => setVisible(false),
 	});

clayui.com/src/components/clay/MultiSelect.js

@@ -17,8 +17,8 @@ const multiSelectImportsCode = `import ClayMultiSelect from '@clayui/multi-selec
 `;
 
 const multiSelectCode = `const Component = () => {
-	const [value, setValue] = React.useState('');
-	const [items, setItems] = React.useState([
+	const [value, setValue] = useState('');
+	const [items, setItems] = useState([
 		{
 			label: 'one',
 			value: '1',
@@ -57,8 +57,8 @@ const multiSelectWithAutocompleteImportsCode = `import ClayMultiSelect from '@cl
 `;
 
 const multiSelectWithAutocompleteCode = `const Component = (props) => {
-	const [value, setValue] = React.useState('');
-	const [items, setItems] = React.useState([
+	const [value, setValue] = useState('');
+	const [items, setItems] = useState([
 		{
 			label: 'one',
 			value: '1',
@@ -120,8 +120,8 @@ import ClayMultiSelect from '@clayui/multi-select';
 `;
 
 const multiSelectWithSelectButtonCode = `const Component = () => {
-	const [value, setValue] = React.useState('');
-	const [items, setItems] = React.useState([
+	const [value, setValue] = useState('');
+	const [items, setItems] = useState([
 		{
 			label: 'one',
 			value: '1',
@@ -194,8 +194,8 @@ const MultiSelectInputWithSelectButton = () => {
 };
 
 const multiSelectWithValidationCode = `const Component = () => {
-	const [value, setValue] = React.useState('');
-	const [items, setItems] = React.useState([
+	const [value, setValue] = useState('');
+	const [items, setItems] = useState([
 		{
 			label: 'one',
 			value: '1',
@@ -314,8 +314,8 @@ const multiSelectWithCustomAutocompleteCode = `const MenuCustom = ({
 );
 
 const Component = () => {
-	const [value, setValue] = React.useState('');
-	const [items, setItems] = React.useState([
+	const [value, setValue] = useState('');
+	const [items, setItems] = useState([
 		{
 			email: 'one@example.com',
 			label: 'One',

clayui.com/src/components/clay/MultiStepNav.js

@@ -14,7 +14,7 @@ const multiStepNavImportsCode = `import ClayMultiStepNav from '@clayui/multi-ste
 `;
 
 const multiStepNavCode = `const Component = () => {
-	const [value, setValue] = React.useState(1);
+	const [value, setValue] = useState(1);
 
 	const steps = [
 		{
@@ -98,7 +98,7 @@ const multiStepNavWithBasicItemsImportsCode = `import {ClayMultiStepNavWithBasic
 `;
 
 const multiStepNavWithBasicItemsCode = `const Component = (props) => {
-	const [active, setActive] = React.useState(0);
+	const [active, setActive] = useState(0);
 
 	const steps = [
 		{

clayui.com/src/components/clay/Pagination.js

@@ -33,7 +33,7 @@ const paginationWithBasicItemsImportsCode = `import {ClayPaginationWithBasicItem
 `;
 
 const PaginationWithBasicItemsCode = `const Component = () => {
-	const [active, setActive] = React.useState(8);
+	const [active, setActive] = useState(8);
 
 	return (
 		<ClayPaginationWithBasicItems

clayui.com/src/components/clay/PaginationBar.js

@@ -71,8 +71,8 @@ const paginationWithBasicItemsImportsCode = `import {ClayPaginationBarWithBasicI
 `;
 
 const PaginationBarWithBasicItemsCode = `const Component = () => {
-	const [activePage, setActivePage] = React.useState(1);
-	const [delta, setDelta] = React.useState(5);
+	const [activePage, setActivePage] = useState(1);
+	const [delta, setDelta] = useState(5);
 
 	const deltas = [
 		{

clayui.com/src/components/clay/RadioGroup.js

@@ -12,7 +12,7 @@ const radioGroupImportsCode = `import {ClayRadio, ClayRadioGroup} from '@clayui/
 `;
 
 const radioGroupCode = `const Component = () => {
-	const [value, setValue] = React.useState('one');
+	const [value, setValue] = useState('one');
 
 	return (
 		<ClayRadioGroup