docs(Examples): reduce number of items in examples, fix HMR issues (#…

…3651)
Semantic-Org · Jun 9, 2019 · 5db5f09 · 5db5f09
1 parent f3abc92
commit 5db5f09
Show file tree

Hide file tree

Showing 8 changed files with 243 additions and 1,005 deletions.
diff --git a/docs/src/components/CodeEditor/CodeEditor.js b/docs/src/components/CodeEditor/CodeEditor.js
@@ -131,7 +131,7 @@ class CodeEditor extends React.Component {
 
   handleChange = _.debounce((value, e) => {
     _.invoke(this.props, 'onChange', value, e)
-  }, 200)
+  }, 300)
 
   setCursorVisibility = (visible) => {
     const cursor = this.editorRef.current.editor.renderer.$cursorLayer.element

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js
@@ -70,6 +70,25 @@ class ComponentExample extends Component {
       derivedState.showHTML = false
     }
 
+    if (process.env.NODE_ENV !== 'production') {
+      const wasCodeChanged = state.originalSourceCode !== state.sourceCode
+      const wasCodeUpdated = props.sourceCode !== state.originalSourceCode
+
+      if (wasCodeUpdated) {
+        if (wasCodeChanged) {
+          /* eslint-disable-next-line no-console */
+          console.warn(
+            `[HMR] the code of example (${
+              props.examplePath
+            }) was not reload because it was modified, please reset your changes.`,
+          )
+        } else {
+          derivedState.originalSourceCode = props.sourceCode
+          derivedState.sourceCode = props.sourceCode
+        }
+      }
+    }
+
     return derivedState
   }
 

diff --git a/docs/src/components/ComponentDoc/ExampleEditor/ExampleEditor.js b/docs/src/components/ComponentDoc/ExampleEditor/ExampleEditor.js
@@ -47,41 +47,40 @@ const ExampleEditor = (props) => {
         renderHtml={showCode && renderHtml}
         resolver={resolver}
         source={sourceCode}
+        unstable_hot
       >
-        <SourceRender.Consumer>
-          {({ element, error, markup }) => (
-            <React.Fragment>
-              <Grid.Column
-                className={`rendered-example ${getKebabExamplePath(examplePath)}`}
-                style={renderedExampleStyle}
-                width={16}
-              >
-                {element}
-              </Grid.Column>
+        {({ element, error, markup }) => (
+          <React.Fragment>
+            <Grid.Column
+              className={`rendered-example ${getKebabExamplePath(examplePath)}`}
+              style={renderedExampleStyle}
+              width={16}
+            >
+              {element}
+            </Grid.Column>
 
-              {showCode && (
-                <Grid.Column width={16} style={editorStyle}>
-                  <ExampleEditorMenu
-                    examplePath={examplePath}
-                    hasError={!!error}
-                    hasCodeChanged={hasCodeChanged}
-                    onCodeFormat={onCodeFormat}
-                    onCodeReset={onCodeReset}
-                    sourceCode={sourceCode}
-                  />
-                  <CodeEditor onChange={onCodeChange} value={sourceCode} />
+            {showCode && (
+              <Grid.Column width={16} style={editorStyle}>
+                <ExampleEditorMenu
+                  examplePath={examplePath}
+                  hasError={!!error}
+                  hasCodeChanged={hasCodeChanged}
+                  onCodeFormat={onCodeFormat}
+                  onCodeReset={onCodeReset}
+                  sourceCode={sourceCode}
+                />
+                <CodeEditor onChange={onCodeChange} value={sourceCode} />
 
-                  {error && (
-                    <Segment color='red' basic secondary inverted style={errorStyle}>
-                      {error.toString()}
-                    </Segment>
-                  )}
-                  <CodeSnippet fitted mode='html' value={markup} />
-                </Grid.Column>
-              )}
-            </React.Fragment>
-          )}
-        </SourceRender.Consumer>
+                {error && (
+                  <Segment color='red' basic secondary inverted style={errorStyle}>
+                    {error.toString()}
+                  </Segment>
+                )}
+                <CodeSnippet fitted mode='html' value={markup} />
+              </Grid.Column>
+            )}
+          </React.Fragment>
+        )}
       </SourceRender>
     )
   }

diff --git a/docs/src/examples/addons/Select/Types/SelectExample.js b/docs/src/examples/addons/Select/Types/SelectExample.js
@@ -1,13 +1,31 @@
-import faker from 'faker'
-import _ from 'lodash'
 import React from 'react'
 import { Select } from 'semantic-ui-react'
 
-const countryOptions = _.map(faker.definitions.address.country, country => ({
-  key: country,
-  text: country,
-  value: country,
-}))
+const countryOptions = [
+  { key: 'af', value: 'af', text: 'Afghanistan' },
+  { key: 'ax', value: 'ax', text: 'Aland Islands' },
+  { key: 'al', value: 'al', text: 'Albania' },
+  { key: 'dz', value: 'dz', text: 'Algeria' },
+  { key: 'as', value: 'as', text: 'American Samoa' },
+  { key: 'ad', value: 'ad', text: 'Andorra' },
+  { key: 'ao', value: 'ao', text: 'Angola' },
+  { key: 'ai', value: 'ai', text: 'Anguilla' },
+  { key: 'ag', value: 'ag', text: 'Antigua' },
+  { key: 'ar', value: 'ar', text: 'Argentina' },
+  { key: 'am', value: 'am', text: 'Armenia' },
+  { key: 'aw', value: 'aw', text: 'Aruba' },
+  { key: 'au', value: 'au', text: 'Australia' },
+  { key: 'at', value: 'at', text: 'Austria' },
+  { key: 'az', value: 'az', text: 'Azerbaijan' },
+  { key: 'bs', value: 'bs', text: 'Bahamas' },
+  { key: 'bh', value: 'bh', text: 'Bahrain' },
+  { key: 'bd', value: 'bd', text: 'Bangladesh' },
+  { key: 'bb', value: 'bb', text: 'Barbados' },
+  { key: 'by', value: 'by', text: 'Belarus' },
+  { key: 'be', value: 'be', text: 'Belgium' },
+  { key: 'bz', value: 'bz', text: 'Belize' },
+  { key: 'bj', value: 'bj', text: 'Benin' },
+]
 
 const SelectExample = () => (
   <Select placeholder='Select your country' options={countryOptions} />

diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExampleClearableMultiple.js b/docs/src/examples/modules/Dropdown/Types/DropdownExampleClearableMultiple.js
@@ -1,13 +1,31 @@
-import faker from 'faker'
-import _ from 'lodash'
 import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
-const countryOptions = _.map(faker.definitions.address.country, country => ({
-  key: country,
-  text: country,
-  value: country,
-}))
+const countryOptions = [
+  { key: 'af', value: 'af', text: 'Afghanistan' },
+  { key: 'ax', value: 'ax', text: 'Aland Islands' },
+  { key: 'al', value: 'al', text: 'Albania' },
+  { key: 'dz', value: 'dz', text: 'Algeria' },
+  { key: 'as', value: 'as', text: 'American Samoa' },
+  { key: 'ad', value: 'ad', text: 'Andorra' },
+  { key: 'ao', value: 'ao', text: 'Angola' },
+  { key: 'ai', value: 'ai', text: 'Anguilla' },
+  { key: 'ag', value: 'ag', text: 'Antigua' },
+  { key: 'ar', value: 'ar', text: 'Argentina' },
+  { key: 'am', value: 'am', text: 'Armenia' },
+  { key: 'aw', value: 'aw', text: 'Aruba' },
+  { key: 'au', value: 'au', text: 'Australia' },
+  { key: 'at', value: 'at', text: 'Austria' },
+  { key: 'az', value: 'az', text: 'Azerbaijan' },
+  { key: 'bs', value: 'bs', text: 'Bahamas' },
+  { key: 'bh', value: 'bh', text: 'Bahrain' },
+  { key: 'bd', value: 'bd', text: 'Bangladesh' },
+  { key: 'bb', value: 'bb', text: 'Barbados' },
+  { key: 'by', value: 'by', text: 'Belarus' },
+  { key: 'be', value: 'be', text: 'Belgium' },
+  { key: 'bz', value: 'bz', text: 'Belize' },
+  { key: 'bj', value: 'bj', text: 'Benin' },
+]
 
 const DropdownExampleClearableMultiple = () => (
   <Dropdown

diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExampleSearchSelection.js b/docs/src/examples/modules/Dropdown/Types/DropdownExampleSearchSelection.js
@@ -25,22 +25,6 @@ const countryOptions = [
   { key: 'be', value: 'be', flag: 'be', text: 'Belgium' },
   { key: 'bz', value: 'bz', flag: 'bz', text: 'Belize' },
   { key: 'bj', value: 'bj', flag: 'bj', text: 'Benin' },
-  { key: 'bm', value: 'bm', flag: 'bm', text: 'Bermuda' },
-  { key: 'bt', value: 'bt', flag: 'bt', text: 'Bhutan' },
-  { key: 'bo', value: 'bo', flag: 'bo', text: 'Bolivia' },
-  { key: 'ba', value: 'ba', flag: 'ba', text: 'Bosnia' },
-  { key: 'bw', value: 'bw', flag: 'bw', text: 'Botswana' },
-  { key: 'bv', value: 'bv', flag: 'bv', text: 'Bouvet Island' },
-  { key: 'br', value: 'br', flag: 'br', text: 'Brazil' },
-  { key: 'vg', value: 'vg', flag: 'vg', text: 'British Virgin Islands' },
-  { key: 'bn', value: 'bn', flag: 'bn', text: 'Brunei' },
-  { key: 'bg', value: 'bg', flag: 'bg', text: 'Bulgaria' },
-  { key: 'bf', value: 'bf', flag: 'bf', text: 'Burkina Faso' },
-  { key: 'bi', value: 'bi', flag: 'bi', text: 'Burundi' },
-  { key: 'tc', value: 'tc', flag: 'tc', text: 'Caicos Islands' },
-  { key: 'kh', value: 'kh', flag: 'kh', text: 'Cambodia' },
-  { key: 'cm', value: 'cm', flag: 'cm', text: 'Cameroon' },
-  { key: 'ca', value: 'ca', flag: 'ca', text: 'Canada' },
 ]
 
 const DropdownExampleSearchSelection = () => (

diff --git a/package.json b/package.json
@@ -157,7 +157,7 @@
     "react-hot-loader": "^4.8.0",
     "react-router": "^5.0.0",
     "react-router-dom": "^5.0.0",
-    "react-source-render": "2.0.0-beta.6",
+    "react-source-render": "^3.0.0-5",
     "react-static": "^5.9.7",
     "react-static-routes": "^1.0.0",
     "react-test-renderer": "^16.8.4",