chore(clayui.com): refactor react demos and code editor

bryceosterhaus · Apr 22, 2020 · d506f23 · d506f23
1 parent af5f59b
commit d506f23
Show file tree

Hide file tree

Showing 43 changed files with 232 additions and 340 deletions.
diff --git a/clayui.com/src/components/Editor/index.js b/clayui.com/src/components/Editor/index.js
@@ -14,7 +14,13 @@ import theme from '../../utils/react-live-theme';
 
 const spritemap = '/images/icons/icons.svg';
 
-const Editor = ({code, disabled = false, imports, preview = true, scope}) => {
+const Editor = ({
+	code,
+	disabled = false,
+	imports,
+	preview = true,
+	scope = {},
+}) => {
 	try {
 		code = prettier.format(code, {
 			parser: 'babel',
@@ -32,7 +38,7 @@ const Editor = ({code, disabled = false, imports, preview = true, scope}) => {
 			code={code}
 			disabled={disabled}
 			noInline
-			scope={scope}
+			scope={{React, spritemap, useState, ...scope}}
 			theme={theme}
 		>
 			{preview && (

diff --git a/clayui.com/src/components/clay/Alerts.js b/clayui.com/src/components/clay/Alerts.js
@@ -5,12 +5,10 @@
 
 import ClayAlert from '@clayui/alert';
 import ClayButton from '@clayui/button';
-import React, {useState} from 'react';
+import React from 'react';
 
 import Editor from '../Editor';
 
-const spritemap = '/images/icons/icons.svg';
-
 const AlertCode = `const Component = () => {
 	return (
 		<>
@@ -31,7 +29,7 @@ const alertImportsCode = `import React from 'react';
 import ClayAlert from '@clayui/alert';`;
 
 export const Alert = () => {
-	const scope = {ClayAlert, spritemap, useState};
+	const scope = {ClayAlert};
 	const code = AlertCode;
 
 	return <Editor code={code} imports={alertImportsCode} scope={scope} />;
@@ -62,7 +60,7 @@ import ClayAlert from '@clayui/alert';
 import ClayButton from '@clayui/button';`;
 
 export const AlertWithButton = () => {
-	const scope = {ClayAlert, ClayButton, spritemap, useState};
+	const scope = {ClayAlert, ClayButton};
 	const code = AlertWithButtonCode;
 
 	return (
@@ -74,11 +72,11 @@ export const AlertWithButton = () => {
 	);
 };
 
-const alertToastContainerImportsCode = `import React, {useState} from 'react';
+const alertToastContainerImportsCode = `
 import ClayAlert from '@clayui/alert';`;
 
 const AlertToastContainerCode = `const Component = () => {
-	const [toastItems, setToastItems] = useState([]);
+	const [toastItems, setToastItems] = React.useState([]);
 	return (
 		<>
 			<div>
@@ -113,7 +111,7 @@ const AlertToastContainerCode = `const Component = () => {
 render(<Component />);`;
 
 export const AlertToastContainer = () => {
-	const scope = {ClayAlert, spritemap, useState};
+	const scope = {ClayAlert};
 	const code = AlertToastContainerCode;
 
 	return (

diff --git a/clayui.com/src/components/clay/Autocomplete.js b/clayui.com/src/components/clay/Autocomplete.js
@@ -6,18 +6,15 @@
 import ClayAutocomplete from '@clayui/autocomplete';
 import ClayDataProvider, {useResource} from '@clayui/data-provider';
 import ClayDropDown from '@clayui/drop-down';
-import React, {useState} from 'react';
+import React from 'react';
 
 import Editor from '../Editor';
 
-const spritemap = '/images/icons/icons.svg';
-
-const autocompleteWithLoadingImportsCode = `import React, {useState} from 'react';
-import ClayAutocomplete from '@clayui/autocomplete';`;
+const autocompleteWithLoadingImportsCode = `import ClayAutocomplete from '@clayui/autocomplete';`;
 
 const autocompleteWithLoadingStateCode = `const Component = () => {
-	const [loading] = useState(true);
-	const [value, setValue] = useState('');
+	const [loading] = React.useState(true);
+	const [value, setValue] = React.useState('');
 
 	return (
 		<ClayAutocomplete>
@@ -33,7 +30,7 @@ const autocompleteWithLoadingStateCode = `const Component = () => {
 render(<Component />)`;
 
 const AutocompleteWithLoadingState = () => {
-	const scope = {ClayAutocomplete, spritemap, useState};
+	const scope = {ClayAutocomplete};
 
 	return (
 		<Editor
@@ -44,14 +41,14 @@ const AutocompleteWithLoadingState = () => {
 	);
 };
 
-const autocompleteWithDataProviderImportsCode = `import React, {useState} from 'react';
+const autocompleteWithDataProviderImportsCode = `
 import ClayAutocomplete from '@clayui/autocomplete';
 import {useResource} from '@clayui/data-provider';
 import ClayDropDown from '@clayui/drop-down';`;
 
 const autocompleteWithDataProviderCode = `const Component = () => {
-	const [value, setValue] = useState('');
-	const [networkStatus, setNetworkStatus] = useState(4);
+	const [value, setValue] = React.useState('');
+	const [networkStatus, setNetworkStatus] = React.useState(4);
 	const {resource} = useResource({
 		fetchPolicy: 'cache-first',
 		link: 'https://rickandmortyapi.com/api/character/',
@@ -103,9 +100,8 @@ const AutocompleteWithDataProvider = () => {
 		ClayAutocomplete,
 		ClayDataProvider,
 		ClayDropDown,
-		spritemap,
+
 		useResource,
-		useState,
 	};
 
 	return (

diff --git a/clayui.com/src/components/clay/Badge.js b/clayui.com/src/components/clay/Badge.js
@@ -8,10 +8,8 @@ import React from 'react';
 
 import Editor from '../Editor';
 
-const spritemap = '/images/icons/icons.svg';
-
 const badgeImportsCode = `import ClayBadge from '@clayui/badge';
-import React from 'react';`;
+`;
 
 const BadgeCode = `const Component = () => {
 	return (
@@ -29,7 +27,7 @@ const BadgeCode = `const Component = () => {
 render(<Component />);`;
 
 export const Badge = () => {
-	const scope = {ClayBadge, spritemap};
+	const scope = {ClayBadge};
 	const code = BadgeCode;
 
 	return <Editor code={code} imports={badgeImportsCode} scope={scope} />;

diff --git a/clayui.com/src/components/clay/Breadcrumb.js b/clayui.com/src/components/clay/Breadcrumb.js
@@ -8,10 +8,8 @@ import React from 'react';
 
 import Editor from '../Editor';
 
-const spritemap = '/images/icons/icons.svg';
-
 const breadcrumbImportsCode = `import ClayBreadcrumb from '@clayui/breadcrumb';
-import React from 'react';`;
+`;
 
 const BreadcrumbCode = `const Component = () => {
 	return (
@@ -48,7 +46,7 @@ const BreadcrumbCode = `const Component = () => {
 render(<Component />);`;
 
 const Breadcrumbs = () => {
-	const scope = {ClayBreadcrumb, spritemap};
+	const scope = {ClayBreadcrumb};
 	const code = BreadcrumbCode;
 
 	return <Editor code={code} imports={breadcrumbImportsCode} scope={scope} />;

diff --git a/clayui.com/src/components/clay/Button.js b/clayui.com/src/components/clay/Button.js
@@ -8,10 +8,8 @@ import React from 'react';
 
 import Editor from '../Editor';
 
-const spritemap = '/images/icons/icons.svg';
-
 const buttonDisplayTypesImportsCode = `import ClayButton from '@clayui/button';
-import React from 'react';`;
+`;
 
 const ButtonDisplayTypesCode = `const Component = () => {
 	return (
@@ -35,7 +33,7 @@ const ButtonDisplayTypesCode = `const Component = () => {
 render(<Component />);`;
 
 const ButtonDisplayTypes = () => {
-	const scope = {ClayButton, spritemap};
+	const scope = {ClayButton};
 	const code = ButtonDisplayTypesCode;
 
 	return (
@@ -48,7 +46,7 @@ const ButtonDisplayTypes = () => {
 };
 
 const buttonGroupImportsCode = `import ClayButton from '@clayui/button';
-import React from 'react';`;
+`;
 
 const ButtonGroupCode = `const Component = () => {
 	return (
@@ -65,7 +63,7 @@ const ButtonGroupCode = `const Component = () => {
 render(<Component />);`;
 
 const ButtonGroup = () => {
-	const scope = {ClayButton, spritemap};
+	const scope = {ClayButton};
 	const code = ButtonGroupCode;
 
 	return (

diff --git a/clayui.com/src/components/clay/Card.js b/clayui.com/src/components/clay/Card.js
@@ -13,19 +13,17 @@ import ClayCard, {
 import ClayIcon from '@clayui/icon';
 import ClayLabel from '@clayui/label';
 import ClaySticker from '@clayui/sticker';
-import React, {useState} from 'react';
+import React from 'react';
 
 import Editor from '../Editor';
 
-const spritemap = '/images/icons/icons.svg';
-
 const cardCodeImports = `import ClayCard from '@clayui/card';
 import ClayIcon from '@clayui/icon';
 import ClaySticker from '@clayui/sticker';
-import React, {useState} from 'react';`;
+`;
 
 const cardCode = `const Component = () => {
-	const [active, setActive] = useState(false);
+	const [active, setActive] = React.useState(false);
 
 	return (
 		<div className="col-md-4">
@@ -64,16 +62,14 @@ const Card = () => {
 		ClayIcon,
 		ClayLabel,
 		ClaySticker,
-		spritemap,
-		useState,
 	};
 
 	return <Editor code={cardCode} imports={cardCodeImports} scope={scope} />;
 };
 
 const cardBasicImports = `import ClayButton from '@clayui/button';
 import ClayCard from '@clayui/card';
-import React from 'react';`;
+`;
 
 const cardWithBasicCode = `const Component = () => {
 	return (
@@ -95,7 +91,6 @@ const CardBasic = () => {
 	const scope = {
 		ClayButton,
 		ClayCard,
-		spritemap,
 	};
 
 	return (
@@ -108,7 +103,7 @@ const CardBasic = () => {
 };
 
 const cardHorizontalImportsCode = `import ClayCard from '@clayui/card';
-import React from 'react';`;
+`;
 
 const cardHorizontalCode = `const Component = () => {
 	return (
@@ -133,7 +128,6 @@ render(<Component />)`;
 const CardBasicHorizontal = () => {
 	const scope = {
 		ClayCard,
-		spritemap,
 	};
 
 	return (
@@ -146,10 +140,10 @@ const CardBasicHorizontal = () => {
 };
 
 const cardWithInfoImportsCode = `import {ClayCardWithInfo} from '@clayui/card';
-import React, {useState} from 'react';`;
+`;
 
 const cardWithInfoCode = `const Component = () => {
-	const [value, setValue] = useState(false);
+	const [value, setValue] = React.useState(false);
 
 	return (
 		<div className="row">
@@ -199,8 +193,6 @@ render(<Component />)`;
 const CardWithInfo = () => {
 	const scope = {
 		ClayCardWithInfo,
-		spritemap,
-		useState,
 	};
 
 	return (
@@ -214,7 +206,7 @@ const CardWithInfo = () => {
 
 const cardWithNavigationImportsCode = `import {ClayCardWithInfo} from '@clayui/card';
 import ClayIcon from '@clayui/icon';
-import React from 'react';`;
+`;
 
 const cardWithNavigationCode = `const Component = () => {
 	return (
@@ -239,7 +231,6 @@ const CardWithNavigation = () => {
 	const scope = {
 		ClayCardWithNavigation,
 		ClayIcon,
-		spritemap,
 	};
 
 	return (
@@ -252,7 +243,7 @@ const CardWithNavigation = () => {
 };
 
 const cardWithUserImportsCode = `import {ClayCardWithInfo} from '@clayui/card';
-import React from 'react';`;
+`;
 
 const cardWithUserCode = `const Component = () => {
 	return (
@@ -299,7 +290,6 @@ render(<Component />)`;
 const CardWithUser = () => {
 	const scope = {
 		ClayCardWithUser,
-		spritemap,
 	};
 
 	return (
@@ -312,10 +302,10 @@ const CardWithUser = () => {
 };
 
 const cardWithHorizontalImportsCode = `import {ClayCardWithInfo} from '@clayui/card';
-import React, {useState} from 'react';`;
+`;
 
 const cardWithHorizontalCode = `const Component = () => {
-	const [value, setValue] = useState(false);
+	const [value, setValue] = React.useState(false);
 
 	return (
 		<div className="row">
@@ -350,8 +340,6 @@ render(<Component />)`;
 const CardWithHorizontal = () => {
 	const scope = {
 		ClayCardWithHorizontal,
-		spritemap,
-		useState,
 	};
 
 	return (

diff --git a/clayui.com/src/components/clay/Chart.js b/clayui.com/src/components/clay/Chart.js
@@ -14,11 +14,10 @@ const ClayChart =
 		? require('@clayui/charts').default
 		: () => <div />;
 
-const chartImportsCode = `import ClayChart from '@clayui/charts';
-import React from 'react';`;
+const chartImportsCode = `import ClayChart from '@clayui/charts';`;
 
 const chartCode = `const Component = () => {
-	const [active, setActive] = React.useState(false);
+	const [active, setActive] = React.React.useState(false);
 
 	const COLUMNS = [['data1', 100, 20, 30], ['data2', 20, 70, 100]];
 	const COLUMNS_2 = [['data1', 10, 50, 60], ['data2', 70, 30, 10]];
@@ -79,7 +78,7 @@ export const GeoMap = () => {
 };
 
 const predictiveImportsCode = `import ClayChart from '@clayui/charts';
-import React from 'react';`;
+`;
 
 const predictiveCode = `const Component = () => (
 	<ClayChart