From ca9ecad734a42400c0aafdb6f2f6240afe0c3531 Mon Sep 17 00:00:00 2001
From: Bryce Osterhaus <bryce.osterhaus@liferay.com>
Date: Wed, 8 Apr 2020 11:09:06 -0700
Subject: [PATCH] fix(clayui.com): fix breaking build

---
 clayui.com/src/components/Editor/index.js     |  4 ++--
 clayui.com/src/components/clay/Alerts.js      |  2 +-
 .../src/components/clay/Autocomplete.js       |  8 ++++----
 clayui.com/src/components/clay/Card.js        |  6 +++---
 clayui.com/src/components/clay/Chart.js       |  2 +-
 clayui.com/src/components/clay/Checkbox.js    | 10 +++++-----
 clayui.com/src/components/clay/ColorPicker.js |  4 ++--
 .../src/components/clay/DataProvider.js       |  7 +++----
 clayui.com/src/components/clay/DatePicker.js  |  8 ++++----
 clayui.com/src/components/clay/DropDown.js    |  4 ++--
 clayui.com/src/components/clay/DualListBox.js |  6 +++---
 clayui.com/src/components/clay/Form.js        |  6 +++---
 clayui.com/src/components/clay/Label.js       |  2 +-
 .../src/components/clay/ManagementToolbar.js  |  2 +-
 clayui.com/src/components/clay/Modal.js       |  2 +-
 clayui.com/src/components/clay/MultiSelect.js | 20 +++++++++----------
 .../src/components/clay/MultiStepNav.js       |  4 ++--
 clayui.com/src/components/clay/Pagination.js  |  2 +-
 .../src/components/clay/PaginationBar.js      |  4 ++--
 clayui.com/src/components/clay/RadioGroup.js  |  2 +-
 clayui.com/src/components/clay/SelectBox.js   |  4 ++--
 clayui.com/src/components/clay/Slider.js      |  2 +-
 clayui.com/src/components/clay/Table.js       |  2 +-
 clayui.com/src/components/clay/Tabs.js        |  6 +++---
 clayui.com/src/components/clay/TimePicker.js  |  2 +-
 clayui.com/src/components/clay/Toggle.js      |  4 ++--
 26 files changed, 62 insertions(+), 63 deletions(-)

diff --git a/clayui.com/src/components/Editor/index.js b/clayui.com/src/components/Editor/index.js
index 5f5f143e45..709a1eda30 100644
--- a/clayui.com/src/components/Editor/index.js
+++ b/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 && (
diff --git a/clayui.com/src/components/clay/Alerts.js b/clayui.com/src/components/clay/Alerts.js
index 75f13df7b9..525bde753c 100644
--- a/clayui.com/src/components/clay/Alerts.js
+++ b/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>
diff --git a/clayui.com/src/components/clay/Autocomplete.js b/clayui.com/src/components/clay/Autocomplete.js
index c61b4e0f82..9b394a3438 100644
--- a/clayui.com/src/components/clay/Autocomplete.js
+++ b/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/',
diff --git a/clayui.com/src/components/clay/Card.js b/clayui.com/src/components/clay/Card.js
index c48afc3e38..557c33907b 100644
--- a/clayui.com/src/components/clay/Card.js
+++ b/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">
diff --git a/clayui.com/src/components/clay/Chart.js b/clayui.com/src/components/clay/Chart.js
index eb08dcecec..ca6dc8f0d6 100644
--- a/clayui.com/src/components/clay/Chart.js
+++ b/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]];
diff --git a/clayui.com/src/components/clay/Checkbox.js b/clayui.com/src/components/clay/Checkbox.js
index 7e35c28d10..79e03234d6 100644
--- a/clayui.com/src/components/clay/Checkbox.js
+++ b/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
diff --git a/clayui.com/src/components/clay/ColorPicker.js b/clayui.com/src/components/clay/ColorPicker.js
index ff498f5d9e..871145bb16 100644
--- a/clayui.com/src/components/clay/ColorPicker.js
+++ b/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
diff --git a/clayui.com/src/components/clay/DataProvider.js b/clayui.com/src/components/clay/DataProvider.js
index a9892eab88..ba7ee4db9c 100644
--- a/clayui.com/src/components/clay/DataProvider.js
+++ b/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,
diff --git a/clayui.com/src/components/clay/DatePicker.js b/clayui.com/src/components/clay/DatePicker.js
index f756fcee0a..467c73536b 100644
--- a/clayui.com/src/components/clay/DatePicker.js
+++ b/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
diff --git a/clayui.com/src/components/clay/DropDown.js b/clayui.com/src/components/clay/DropDown.js
index fbe5c899b4..6a9387a801 100644
--- a/clayui.com/src/components/clay/DropDown.js
+++ b/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',
diff --git a/clayui.com/src/components/clay/DualListBox.js b/clayui.com/src/components/clay/DualListBox.js
index d8f0bdd727..3ed3bc7950 100644
--- a/clayui.com/src/components/clay/DualListBox.js
+++ b/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
diff --git a/clayui.com/src/components/clay/Form.js b/clayui.com/src/components/clay/Form.js
index 573ff56104..ab581d88d5 100644
--- a/clayui.com/src/components/clay/Form.js
+++ b/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>
diff --git a/clayui.com/src/components/clay/Label.js b/clayui.com/src/components/clay/Label.js
index b1faa3b887..196f163778 100644
--- a/clayui.com/src/components/clay/Label.js
+++ b/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
diff --git a/clayui.com/src/components/clay/ManagementToolbar.js b/clayui.com/src/components/clay/ManagementToolbar.js
index 1975eb3f5d..d6e8f4c07d 100644
--- a/clayui.com/src/components/clay/ManagementToolbar.js
+++ b/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);
 
diff --git a/clayui.com/src/components/clay/Modal.js b/clayui.com/src/components/clay/Modal.js
index ae7f8896a9..d342c115c9 100644
--- a/clayui.com/src/components/clay/Modal.js
+++ b/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),
 	});
diff --git a/clayui.com/src/components/clay/MultiSelect.js b/clayui.com/src/components/clay/MultiSelect.js
index a99726b519..f153020515 100644
--- a/clayui.com/src/components/clay/MultiSelect.js
+++ b/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',
diff --git a/clayui.com/src/components/clay/MultiStepNav.js b/clayui.com/src/components/clay/MultiStepNav.js
index ca392205d3..46def6a839 100644
--- a/clayui.com/src/components/clay/MultiStepNav.js
+++ b/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 = [
 		{
diff --git a/clayui.com/src/components/clay/Pagination.js b/clayui.com/src/components/clay/Pagination.js
index 271bc44069..04776db49f 100644
--- a/clayui.com/src/components/clay/Pagination.js
+++ b/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
diff --git a/clayui.com/src/components/clay/PaginationBar.js b/clayui.com/src/components/clay/PaginationBar.js
index 1bc18029e1..9bbdc4098e 100644
--- a/clayui.com/src/components/clay/PaginationBar.js
+++ b/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 = [
 		{
diff --git a/clayui.com/src/components/clay/RadioGroup.js b/clayui.com/src/components/clay/RadioGroup.js
index 2512941474..e739b12eba 100644
--- a/clayui.com/src/components/clay/RadioGroup.js
+++ b/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
diff --git a/clayui.com/src/components/clay/SelectBox.js b/clayui.com/src/components/clay/SelectBox.js
index 3e3287368a..e210bf0400 100644
--- a/clayui.com/src/components/clay/SelectBox.js
+++ b/clayui.com/src/components/clay/SelectBox.js
@@ -28,8 +28,8 @@ const selectBoxCode = `const Component = () => {
 		},
 	];
 
-	const [items, setItems] = React.useState(selectBoxItems);
-	const [value, setValue] = React.useState([]);
+	const [items, setItems] = useState(selectBoxItems);
+	const [value, setValue] = useState([]);
 
 	return (
 		<ClaySelectBox
diff --git a/clayui.com/src/components/clay/Slider.js b/clayui.com/src/components/clay/Slider.js
index e78909d6ae..90ba0c5c6b 100644
--- a/clayui.com/src/components/clay/Slider.js
+++ b/clayui.com/src/components/clay/Slider.js
@@ -12,7 +12,7 @@ const sliderImportsCode = `import ClaySlider from '@clayui/slider';
 `;
 
 const SliderCode = `const Component = () => {
-	const [value, setValue] = React.useState(10);
+	const [value, setValue] = useState(10);
 
 	return (
 		<div className="form-group">
diff --git a/clayui.com/src/components/clay/Table.js b/clayui.com/src/components/clay/Table.js
index 165a347b97..d216bfdc53 100644
--- a/clayui.com/src/components/clay/Table.js
+++ b/clayui.com/src/components/clay/Table.js
@@ -12,7 +12,7 @@ const tableImportsCode = `import ClayTable from '@clayui/table';
 `;
 
 const tableCode = `const Component = () => {
-	const [value, setValue] = React.useState('one');
+	const [value, setValue] = useState('one');
 
 	return (
 		<ClayTable>
diff --git a/clayui.com/src/components/clay/Tabs.js b/clayui.com/src/components/clay/Tabs.js
index 35f4bc9e29..937633fd97 100644
--- a/clayui.com/src/components/clay/Tabs.js
+++ b/clayui.com/src/components/clay/Tabs.js
@@ -14,7 +14,7 @@ const tabsImportsCode = `import ClayTabs from '@clayui/tabs';
 `;
 
 const tabsCode = `const Component = () => {
-    const [activeTabKeyValue, setActiveTabKeyValue] = React.useState(0);
+    const [activeTabKeyValue, setActiveTabKeyValue] = useState(0);
 
     return (
         <>
@@ -81,7 +81,7 @@ const tabsDropdownCode = `const Component = () => {
         trigger,
         ...others
     }) => {
-        const [active, setActive] = React.React.useState(false);
+        const [active, setActive] = useState(false);
     
         return (
             <ClayDropDown
@@ -97,7 +97,7 @@ const tabsDropdownCode = `const Component = () => {
         );
     };
 
-    const [activeTabKeyValue, setActiveTabKeyValue] = React.React.useState(0);
+    const [activeTabKeyValue, setActiveTabKeyValue] = useState(0);
 
     const dropdownTabsItems = [
         {
diff --git a/clayui.com/src/components/clay/TimePicker.js b/clayui.com/src/components/clay/TimePicker.js
index 5cc8daea4a..52117988d8 100644
--- a/clayui.com/src/components/clay/TimePicker.js
+++ b/clayui.com/src/components/clay/TimePicker.js
@@ -12,7 +12,7 @@ const timePickerImportsCode = `import ClayTimePicker from '@clayui/time-picker';
 `;
 
 const timePickerCode = `const Component = () => {
-	const [state, setState] = React.useState({
+	const [state, setState] = useState({
 		hours: '--',
 		minutes: '--',
 	});
diff --git a/clayui.com/src/components/clay/Toggle.js b/clayui.com/src/components/clay/Toggle.js
index 9041544111..5a6f027d40 100644
--- a/clayui.com/src/components/clay/Toggle.js
+++ b/clayui.com/src/components/clay/Toggle.js
@@ -9,7 +9,7 @@ import React from 'react';
 import Editor from '../Editor';
 
 const ToggleWithRadioGroup = `const Component = () => {
-	const [value, setValue] = React.useState('foo');
+	const [value, setValue] = useState('foo');
 
 	return (
 		<ClayRadioGroup
@@ -39,7 +39,7 @@ export const RadioToggle = () => {
 };
 
 const ToggleCode = `const Component = () => {
-	const [toggled, setToggle] = React.useState(false);
+	const [toggled, setToggle] = useState(false);
 
 	return (
 		<div style={{display: 'flex', justifyContent: 'space-around'}}>