Migrate react-styleguide to ^10.0.0

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Precise UI Changelog
 
+## 1.1.1
+
+- Migrate `react-styleguidist` to `^10.0.0`
+- Update all examples to use ES modules
+
 ## 1.1.0
 
 - Add `borderless` and `tagRenderer` props to AutocompleteTagBuilder

docs/components/ComponentsList.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { ActionLink, Expander, styled, distance, Icon, ActionLinkProps } from '../../src';
+import { ActionLink, Expander, styled, distance, themed, Icon, ActionLinkProps } from '../../src';
 
 // @ts-ignore
-import getUrl from 'react-styleguidist/lib/utils/getUrl';
-import { themed } from '../../src';
+import getUrl from 'react-styleguidist/lib/client/utils/getUrl';
 
 interface ComponentDefinition {
   hasExamples: boolean;

docs/components/HomePage.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled, Headline, Icon, IconName, Button, BodyText, StackPanel, StackItem, colors } from '../../src';
 
 // @ts-ignore
-import Markdown from 'react-styleguidist/lib/rsg-components/Markdown';
+import Markdown from 'react-styleguidist/lib/client/rsg-components/Markdown';
 
 const HeadIcon = styled(Icon)`
   vertical-align: text-bottom;
@@ -77,8 +77,8 @@ function codeBlock(language: string, block: string) {
 
 const cb = '```';
 // edit via https://codepen.io/anon/pen/GzRYXd
-const installation = codeBlock('sh', 'npm i precise-ui');
-const dependencies = codeBlock('sh', 'npm i react@16 styled-components@2');
+const installation = codeBlock('bash', 'npm i precise-ui');
+const dependencies = codeBlock('bash', 'npm i react@16 styled-components@2');
 const usageExample = codeBlock(
   'jsx',
   `<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;

docs/components/ReactComponentRenderer.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Tabs, TabPage, styled, Headline, distance, TabChangeEvent } from '../../src';
 
 // @ts-ignore
-import Pathline from 'react-styleguidist/lib/rsg-components/Pathline';
+import Pathline from 'react-styleguidist/lib/client/rsg-components/Pathline';
 
 interface ReactComponentRendererProps {
   name: string;

docs/components/SectionRenderer.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 
 // @ts-ignore
-import SectionHeading from 'react-styleguidist/lib/rsg-components/SectionHeading';
+import SectionHeading from 'react-styleguidist/lib/client/rsg-components/SectionHeading';
 // @ts-ignore
-import Markdown from 'react-styleguidist/lib/rsg-components/Markdown';
+import Markdown from 'react-styleguidist/lib/client/rsg-components/Markdown';
 
 interface SectionRendererProps {
   name: string;

docs/components/StyleGuideRenderer.tsx

@@ -5,9 +5,9 @@ import { HomePage } from './HomePage';
 import { AppState } from './context';
 
 // @ts-ignore
-import Ribbon from 'react-styleguidist/lib/rsg-components/Ribbon';
+import Ribbon from 'react-styleguidist/lib/client/rsg-components/Ribbon';
 // @ts-ignore
-import Logo from 'react-styleguidist/lib/rsg-components/Logo';
+import Logo from 'react-styleguidist/lib/client/rsg-components/Logo';
 import { createGlobalStyle } from '../../src';
 
 interface StyleGuideRendererProps {
@@ -39,7 +39,7 @@ function useTheme() {
 }
 
 /*
-  CSS animations should be disabled to ensure that animations don't 
+  CSS animations should be disabled to ensure that animations don't
   affect `react-styleguidist-visual` screenshots
 */
 const GlobalStyle = createGlobalStyle`

docs/introduction/installation.md

@@ -4,19 +4,19 @@ Precise UI can be easily integrated in your frontend project by using npm or Yar
 
 1. Firstly, you have to install it:
 
-  ```sh
+  ```bash
   npm i precise-ui
   ```
 
   or alternatively, using Yarn
 
-  ```sh
+  ```bash
   yarn add precise-ui
   ```
 
 2. Then, make sure that you have also all peer dependencies installed:
 
-  ```sh
+  ```bash
   npm i react@16 styled-components@2
   ```
 

docs/styleguide/colors.md

@@ -3,7 +3,8 @@
 The following generic colors are available.
 
 ```jsx
-const { colors, clipboardCopy, notify, Notifications, invertColor, MetroInfoTile, StackPanel, StackPanelDirection } = require('precise-ui');
+import { colors, clipboardCopy, notify, Notifications, invertColor, MetroInfoTile, StackPanel, StackPanelDirection } from 'precise-ui';
+
 const namedColors = Object.keys(colors.all);
 
 const ColorTile = ({ colorName, color }) => typeof color === 'string' ? (

docs/styleguide/typography.md

@@ -5,7 +5,8 @@ Library exports helper functions `getFontLineHeight`, `getFontSize`, `getFontWei
 ### Font weights:
 
 ```
-const { styled, getFontStyle } = require('precise-ui');
+import { getFontStyle } from 'precise-ui';
+import styled from 'styled-components';
 
 const fontWeights = ['light', 'regular', 'medium', 'bold'];
 
@@ -23,7 +24,8 @@ const StyledText = styled.p`
 ### Font sizes:
 
 ```
-const { styled, getFontStyle } = require('precise-ui');
+import { getFontStyle } from 'precise-ui';
+import styled from 'styled-components';
 
 const fontSizes = ['xSmall', 'small', 'medium', 'large', 'xLarge', 'xxLarge', 'xxxLarge'];
 
@@ -36,4 +38,4 @@ const StyledText = styled.p`
   {fontSizes.map((size) => <StyledText key={size} size={size}>Lorem ipsum dolor sit amet [{size}]</StyledText>)}
 </div>;
 
-```
+```

docs/theme/colors.md

@@ -3,17 +3,19 @@
 The following colors are available. Feel free to change them.
 
 ```jsx
-const {
-  colors,
-  clipboardCopy,
-  notify,
-  themes,
-  Notifications,
-  Table,
-  TextField,
-  Flyout,
-  serializeColor,
-} = require('precise-ui');
+import {
+    colors,
+    clipboardCopy,
+    notify,
+    themes,
+    Notifications,
+    MetroInfoTile,
+    ColorPicker,
+    Table,
+    TextField,
+    Flyout,
+    serializeColor
+} from 'precise-ui';
 
 const isUi = m => /^ui[0-9]+$/.test(m);
 const isText = m => /^text[0-9]+$/.test(m);