docs(Usage|Theming): improve pages, introduce CLI util (#3752)

Author: layershifter

docs/src/pages/Theming.mdx

@@ -1,4 +1,4 @@
-import { Button, Message } from 'semantic-ui-react'
+import { Accordion, Button, List, Message, Segment } from 'semantic-ui-react'
 
 export const meta = {
   title: 'Theming',
@@ -140,22 +140,37 @@ module.exports = {
 }
 ```
 
-<Message size='mini' warning>
-  Make sure it installed <code>less</code> with version <code>>=3.0.0</code> as sometimes it will
-  install <code>2.*</code> by default which will get you in the troubles.
-</Message>
-
 ### Scaffold custom styles
 
-Now we need to copy necessary files with the skeleton of your customization.
+We made a special CLI tool that will copy necessary files with the skeleton of your customization.
 
 ```bash
-npx cpy-cli **/* ../../../src/semantic-ui/site --cwd node_modules/semantic-ui-less/_site --parents
+npx @semantic-ui-react/bootstrap
 ```
 
-```bash
-npx cpy-cli node_modules/semantic-ui-less/theme.config.example src/semantic-ui --rename=theme.config
-```
+<Accordion
+  defaultActiveIndex={-1}
+  panels={[
+    {
+      title: { content: <i>I want copy files manually</i>, style: { fontSize: '0.9rem' } },
+      content: {
+        as: Segment,
+        content: (
+          <List bulleted>
+            <List.Item>
+              Copy the entire <code>node_modules/semantic-ui-less/_site</code> folder to{' '}
+              <code>src/semantic-ui/site</code>
+            </List.Item>
+            <List.Item>
+              Copy <code>node_modules/semantic-ui-less/theme.config.example</code> to{' '}
+              <code>src/semantic-ui/theme.config</code>
+            </List.Item>
+          </List>
+        ),
+      },
+    },
+  ]}
+/>
 
 ### `theme.config`
 

docs/src/pages/Usage.mdx

@@ -87,42 +87,17 @@ Choose a theme and delivery method that suits your needs:
 
 ## Bundling
 
-Semantic UI React is fully supported by all modern JavaScript bundlers. We've made some
-example recipes with some of them. You can use these as a starting point for your project.
+Semantic UI React is fully supported by all modern JavaScript bundlers.
 
-<Tab
-  menu={{ attached: 'top', secondary: true, pointing: true, color: 'teal' }}
-  panes={[
-    {
-      menuItem: 'Create React App',
-      render: () => (
-        <Tab.Pane style={{ fontSize: 'inherit' }}>
-          <p>
-            Semantic UI React is fully compatible with <code>create-react-app</code> and works out
-            the box. Setup of custom theme is covered in <Link to='/theming'>Theming guide</Link>.
-          </p>
-        </Tab.Pane>
-      ),
-    },
-    {
-      menuItem: 'Webpack 4',
-      render: () => (
-        <Tab.Pane style={{ fontSize: 'inherit' }}>
-          <p>
-            Semantic UI React is fully supported by Webpack 4, including tree shaking as of{' '}
-            <code>semantic-ui-react@0.81.2</code>.
-          </p>
-          <p>
-            Please ensure that you build your app in production mode before release. Semantic UI
-            React includes several optimizations in production mode, such as stripping{' '}
-            <code>propTypes</code>
-            from your build.
-          </p>
-        </Tab.Pane>
-      ),
-    },
-  ]}
-/>
+### Create React App
+
+Semantic UI React is fully compatible with `create-react-app` and works out the box. Setup of custom theme is covered in [Theming guide](/theming).
+
+### Webpack 4
+
+Semantic UI React is fully supported by Webpack 4, including tree shaking as of `semantic-ui-react@0.81.2`.
+
+Please ensure that you build your app in production mode before release. Semantic UI React includes several optimizations in production mode, such as stripping `propTypes` from your build.
 
 <Divider hidden section />