docs(mixed): improve perf & bundle size, fix issue with /layouts

docs/public/style.css

@@ -43,20 +43,20 @@ pre {
   margin: 0;
 }
 
-code:not(.hljs) {
+code:not([class*="language-"]) {
   font-size: 87.5%;
   background-color: rgba(0, 0, 0, 0.04);
   border-radius: 3px;
   white-space: pre;
   display: inline-block;
 }
 
-code:not(.hljs)::before {
+code:not([class*="language-"])::before {
   letter-spacing: -0.2em;
   content: '\00a0';
 }
 
-code:not(.hljs)::after {
+code:not([class*="language-"])::after {
   letter-spacing: -0.2em;
   content: '\00a0';
 }

docs/src/App.js

@@ -17,7 +17,7 @@ const App = ({ componentMenu, versions }) => (
            * We can't place <Sidebar /> inside of <Routes /> because it will be remounted on page
            * switch. We also don't want to show <Sidebar /> for layouts pages and maximized pages.
            */}
-          <Route path='/layouts/*' component={null} />
+          <Route exact path='/layouts/:name' component={null} />
           <Route path='/maximize/*' component={null} />
 
           <Route path='/'>

docs/src/components/CodeEditor/CodeEditor.js

@@ -3,13 +3,9 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import Ace from 'react-ace'
 
-import 'brace'
 import 'brace/ext/language_tools'
 import 'brace/mode/jsx'
-import 'brace/mode/json'
-import 'brace/mode/html'
-import 'brace/mode/sh'
-import 'brace/theme/tomorrow_night'
+import 'brace/theme/tomorrow_night_eighties'
 
 import { componentInfoContext } from 'docs/src/utils'
 
@@ -103,14 +99,12 @@ class CodeEditor extends React.Component {
 
   static propTypes = {
     active: PropTypes.bool,
-    mode: PropTypes.oneOf(['html', 'json', 'jsx', 'sh']),
     showCursor: PropTypes.bool,
     value: PropTypes.string.isRequired,
   }
 
   static defaultProps = {
     active: true,
-    mode: 'jsx',
     showCursor: true,
   }
 
@@ -150,13 +144,14 @@ class CodeEditor extends React.Component {
         highlightGutterLine
         name={this.name}
         maxLines={Infinity}
+        mode='jsx'
         onChange={this.handleChange}
         readOnly={false}
         ref={this.editorRef}
         setOptions={{ fixedWidthGutter: true, showFoldWidgets: false }}
         showPrintMargin={false}
         tabSize={2}
-        theme='tomorrow_night'
+        theme='tomorrow_night_eighties'
         width='100%'
         {...this.props}
       />

docs/src/components/CodeEditor/index.js

@@ -13,7 +13,4 @@ const CodeEditorSafe = (props) => (
   </NoSSR>
 )
 
-export const EDITOR_BACKGROUND_COLOR = '#1d1f21'
-export const EDITOR_GUTTER_COLOR = '#25282d'
-
 export default CodeEditorSafe

docs/src/components/CodeSnippet/CodeSnippet.js

@@ -1,61 +1,12 @@
+import { CodeSnippet as StardustCodeSnippet } from '@stardust-ui/docs-components'
 import React from 'react'
-import PropTypes from 'prop-types'
 
-import CodeEditor, { EDITOR_BACKGROUND_COLOR } from 'docs/src/components/CodeEditor'
-import formatCode from 'docs/src/utils/formatCode'
+import NoSSR from '../NoSSR'
 
-const containerStyle = {
-  padding: '1rem',
-  position: 'relative',
-  background: EDITOR_BACKGROUND_COLOR,
-}
-
-const labelStyle = {
-  border: '1px solid #566',
-  color: '#899',
-  fontFamily: 'monospace',
-  fontSize: '0.8rem',
-  lineHeight: 1,
-  padding: '0.2rem 0.35rem',
-  position: 'absolute',
-  right: '1rem',
-  top: '1rem',
-  zIndex: 100,
-}
-
-const formatters = {
-  html: (val) => formatCode(val, 'html'),
-  json: (val) => val,
-  jsx: (val) => formatCode(val, 'babel').replace(/^;</m, '<'), // will replace ";" from the beginning of line
-  sh: (val) => val.replace(/^/g, '$  '),
-}
-
-const CodeSnippet = ({ fitted, label, mode, value, ...rest }) => (
-  <div style={{ ...containerStyle, margin: fitted ? 0 : '1rem 0' }}>
-    {label === false ? null : <div style={labelStyle}>{label || mode}</div>}
-
-    <CodeEditor
-      highlightActiveLine={false}
-      highlightGutterLine={false}
-      mode={mode}
-      readOnly
-      showGutter={false}
-      showCursor={false}
-      value={formatters[mode](value).trim()}
-      {...rest}
-    />
-  </div>
+const CodeSnippet = (props) => (
+  <NoSSR>
+    <StardustCodeSnippet {...props} />
+  </NoSSR>
 )
 
-CodeSnippet.propTypes = {
-  fitted: PropTypes.bool,
-  label: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  mode: PropTypes.oneOf(['html', 'json', 'jsx', 'sh']),
-  value: PropTypes.string.isRequired,
-}
-
-CodeSnippet.defaultProps = {
-  mode: 'jsx',
-}
-
 export default CodeSnippet

docs/src/components/Document.js

@@ -15,6 +15,12 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) =
         rel='stylesheet'
         href={`https://cdn.jsdelivr.net/npm/semantic-ui@${versions.sui}/dist/semantic.min.css`}
       />
+      <link
+        rel='stylesheet'
+        href={`https://cdn.jsdelivr.net/npm/prismjs@${
+          versions.prismjs
+        }/themes/prism-tomorrow.min.css`}
+      />
 
       <script src='https://cdn.jsdelivr.net/npm/@babel/[email protected]/dist/polyfill.min.js' />
       <script
@@ -34,15 +40,13 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) =
 
       <script
         crossOrigin='true'
-        src={`https://unpkg.com/prettier@${versions.prettier}/standalone.js`}
-      />
-      <script
-        crossOrigin='true'
-        src={`https://unpkg.com/prettier@${versions.prettier}/parser-babylon.js`}
+        src={`https://cdn.jsdelivr.net/npm/prettier@${versions.prettier}/standalone.min.js`}
       />
       <script
         crossOrigin='true'
-        src={`https://unpkg.com/prettier@${versions.prettier}/parser-html.js`}
+        src={`https://cdn.jsdelivr.net/combine/npm/prettier@${
+          versions.prettier
+        }/parser-babylon.min.js,npm/prettier@${versions.prettier}/parser-html.min.js`}
       />
       <script
         src={`https://cdnjs.cloudflare.com/ajax/libs/prop-types/${versions.propTypes}/prop-types${

docs/src/pages/Introduction.js

@@ -102,7 +102,7 @@ const MenuItemLinkAugmentationHTML = `<div class="ui menu">
 </div>`
 
 const Comparison = ({ jsx, html }) => (
-  <Segment inverted className='code-example'>
+  <Segment inverted style={{ backgroundColor: '#2d2d2d' }}>
     <Grid columns='equal' centered textAlign='left'>
       <Grid.Column computer='8' largeScreen='7' widescreen='7'>
         <Label color='grey' size='tiny' attached='top left'>
@@ -112,7 +112,7 @@ const Comparison = ({ jsx, html }) => (
       </Grid.Column>
       <Grid.Column largeScreen='2' only='large screen' textAlign='center'>
         <Divider vertical>
-          <Icon name='right arrow circle' />
+          <Icon inverted name='right arrow circle' />
         </Divider>
       </Grid.Column>
       <Grid.Column computer='8' largeScreen='7' widescreen='7'>

docs/src/pages/ShorthandProps.mdx

@@ -6,13 +6,13 @@ export const meta = {
   nextPage: { title: 'Theming', href: '/theming' },
 }
 
-It is quite common for Semantic UI React component to have "shorthands" which accept shorthand values. For example, `Button` component has an `icon` shorthand which value defines the icon that will be rendered.
+Semantic UI React components can have "shorthands". For example, `Button` component has an `icon` shorthand which value defines the icon that will be rendered.
 
 ```jsx
 <Button icon='like' />
 ```
 
-There are several forms of shorthand values that can be provided, but all of them share one common thing - each is eventually evaluated to React Element. Thus, you can think of shorthand values as a recipe to customize rendered React Element at corresponding shorthand.
+There are several forms of shorthand values that can be provided, but all of them share one common thing - each is eventually evaluated to React Element. Thus, you can think of shorthand values as a recipe to customize rendered React Element.
 
 ## Object as value
 
@@ -27,8 +27,6 @@ Each component's shorthand has associated default element type. For example, by
 
 There is even shorter way to define default element's props - by using a primitive value. In that case provided shorthand value will be taken as a value for "default prop" of this element.
 
-This could be much easier seen with an example. Here, again, we have a `Button` element with its icon being defined with shorthand - where provided `string` value will be used as icon's `name`:
-
 ```jsx
 <>
   <Button content='Like' icon='like' />
@@ -37,7 +35,7 @@ This could be much easier seen with an example. Here, again, we have a `Button`
 </>
 ```
 
-This works because name is the default prop of shorthand's `<Icon />` element.
+This works because `name` is the default prop of shorthand's `<Icon />` element.
 
 ```jsx
 <>
@@ -51,7 +49,7 @@ This works because name is the default prop of shorthand's `<Icon />` element.
 
 ## Disable shorthand's rendering
 
-It is also possible to pass falsy values (`false`, `null` or `undefined`) to shorthand prop - in that case there will be nothing rendered for the component's shorthand.
+It is also possible to pass falsy values (`false`, `null` or `undefined`) - in that case there will be nothing rendered for the component's shorthand.
 
 ```jsx
 <Dropdown icon={null} />

docs/src/pages/Theming.mdx

@@ -68,20 +68,30 @@ The key point is that you don't want `eject`, but you want to customize styles 
 
 ### Remove existing styles
 
-First of all, please remove existing references for `semantic-ui-css` package or styles included from CDN to avoid styles duplication.
+First of all, please remove existing references for `semantic-ui` & `semantic-ui-css` package or styles included from CDN to avoid styles duplication.
 
-```sh
-yarn remove semantic-ui-css
+```bash
+npm uninstall semantic-ui semantic-ui-css
+```
+
+```bash
+yarn remove semantic-ui semantic-ui-css
 ```
 
 ### Install required dependencies
 
-Create React App does not support LESS out of the box, we and propose to use [`@craco/craco`](https://www.npmjs.com/package/@craco/craco) to add it and avoid `eject`. You have to install required packages, update your `package.json` and create `craco.config.js`.
+Create React App does not support LESS out of the box, we and propose to use [`@craco/craco`](https://www.npmjs.com/package/@craco/craco) to add it and avoid `eject`. You have to install required packages:
 
-```sh
-yarn add @craco/craco craco-less cpy-cli semantic-ui-less --dev
+```bash
+npm install @craco/craco craco-less semantic-ui-less --save-dev
 ```
 
+```bash
+yarn add @craco/craco craco-less semantic-ui-less --dev
+```
+
+And then update your `package.json` and create `craco.config.js`:
+
 ```json label=package.json
 {
   "scripts": {
@@ -139,12 +149,12 @@ module.exports = {
 
 Now we need to copy necessary files with the skeleton of your customization.
 
-```sh
-yarn cpy node_modules/semantic-ui-less/_site/**/* src/semantic-ui/site
+```bash
+npx cpy-cli **/* ../../../src/semantic-ui/site --cwd node_modules/semantic-ui-less/_site --parents
 ```
 
-```sh
-yarn cpy node_modules/semantic-ui-less/theme.config.example src/semantic-ui --rename=theme.config
+```bash
+npx cpy-cli node_modules/semantic-ui-less/theme.config.example src/semantic-ui --rename=theme.config
 ```
 
 ### `theme.config`
@@ -167,13 +177,13 @@ This file is mostly prepared but you have to change some details in the bottom o
 
 You have to import `semantic.less` file in your entry file.
 
-```jsx
+```jsx label=index.js
 import 'semantic-ui-less/semantic.less'
 ```
 
 ### It is working now!
 
-```sh
+```bash
 yarn start
 ```
 
@@ -184,4 +194,4 @@ You can now go e.g. to `src/semantic-ui/site/globals/site.variables` and add:
 @pageBackground: #eff0f1;
 ```
 
-which will change your primary color and background color of the `<body>` 🚀
+Which will change your primary color and background color of the `<body>` 🚀

docs/src/pages/Usage.mdx

@@ -18,7 +18,7 @@ Install the React components and choose a theme that suits your needs.
 
 React components can be installed via <code>yarn</code>:
 
-<CodeSnippet mode='sh' value={`yarn add ${props.pkg.name}`} fitted />
+<CodeSnippet mode='bash' value={`yarn add ${props.pkg.name}`} fitted />
 
 <Message info size='tiny' attached='bottom'>
   <Icon name='idea' />
@@ -44,7 +44,7 @@ Choose a theme and delivery method that suits your needs:
           </p>
           <CodeSnippet
             fitted
-            label='index.html'
+            label={false}
             mode='html'
             value={`
               <link
@@ -67,7 +67,7 @@ Choose a theme and delivery method that suits your needs:
             with the main Semantic UI repository to provide a lightweight CSS only version of
             Semantic UI.
           </p>
-          <CodeSnippet mode='sh' value={'yarn add semantic-ui-css'} />
+          <CodeSnippet mode='bash' value={'yarn add semantic-ui-css'} />
           <p>After install, import the minified CSS file in your app's entry file:</p>
           <CodeSnippet fitted label='index.js' value="import 'semantic-ui-css/semantic.min.css'" />
         </Tab.Pane>
@@ -77,22 +77,8 @@ Choose a theme and delivery method that suits your needs:
       menuItem: 'Custom theme (NPM)',
       render: () => (
         <Tab.Pane style={{ fontSize: 'inherit' }}>
-          <p>
-            The <a href={semanticUIRepoURL}>Semantic UI package</a> installs a Gulp build tool that
-            will walk you through creating a custom theme within your project. Install this as a dev
-            dependency:
-          </p>
-          <CodeSnippet mode='sh' value={'yarn add semantic-ui --dev'} />
-          <p>
-            After building a theme with Gulp, include the minified CSS file in your{' '}
-            <code>index.js</code> file:
-          </p>
-          <CodeSnippet label='index.js' value="import '../semantic/dist/semantic.min.css'" />
-          <p>
-            Detailed documentation on Semantic UI theming is provided{' '}
-            <a href={`${semanticUIDocsURL}usage/theming.html`}>here</a> and in our{' '}
-            <Link to='/theming'>Theming guide</Link>.
-          </p>
+          Detailed documentation on Semantic UI theming is provided in our{' '}
+          <Link to='/theming'>Theming guide</Link>.
         </Tab.Pane>
       ),
     },