Migrate from simplebar to overlaybars

app/riot/src/client/preview/__snapshots__/render-riot.test.js.snap

@@ -1,7 +1,72 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`render a riot element can accept a constructor 1`] = `"<simpletest hacked=\\"true\\" test=\\"with a parameter\\"><div>HACKED : true ; simple test (with a parameter). Oh, by the way (value is mapped to riotValue)</div></simpletest>"`;
+exports[`render a riot element can accept a constructor 1`] = `
+<simpletest hacked="true"
+            test="with a parameter"
+>
+  <div>
+    HACKED : true ; simple test (with a parameter). Oh, by the way (value is mapped to riotValue)
+  </div>
+</simpletest>
+`;
 
-exports[`render a riot element can nest several tags 1`] = `"<matriochka><div><tag1><div>Inside tag1:<ul><li><tag2><div>Inside tag2:<ul><li><tag3><div>Inside tag3:<ul><li><tag4><div>Inside tag4:<ul><li><tag5><div>Inside tag5:<ul><li>Content</li></ul></div></tag5></li></ul></div></tag4></li></ul></div></tag3></li></ul></div></tag2></li></ul></div></tag1></div></matriochka>"`;
+exports[`render a riot element can nest several tags 1`] = `
+<matriochka>
+  <div>
+    <tag1>
+      <div>
+        Inside tag1:
+        <ul>
+          <li>
+            <tag2>
+              <div>
+                Inside tag2:
+                <ul>
+                  <li>
+                    <tag3>
+                      <div>
+                        Inside tag3:
+                        <ul>
+                          <li>
+                            <tag4>
+                              <div>
+                                Inside tag4:
+                                <ul>
+                                  <li>
+                                    <tag5>
+                                      <div>
+                                        Inside tag5:
+                                        <ul>
+                                          <li>
+                                            Content
+                                          </li>
+                                        </ul>
+                                      </div>
+                                    </tag5>
+                                  </li>
+                                </ul>
+                              </div>
+                            </tag4>
+                          </li>
+                        </ul>
+                      </div>
+                    </tag3>
+                  </li>
+                </ul>
+              </div>
+            </tag2>
+          </li>
+        </ul>
+      </div>
+    </tag1>
+  </div>
+</matriochka>
+`;
 
-exports[`render a riot element can template some vars 1`] = `"<simpletest test=\\"with a parameter\\"><div>simple test (with a parameter). Oh, by the way (value is mapped to riotValue)</div></simpletest>"`;
+exports[`render a riot element can template some vars 1`] = `
+<simpletest test="with a parameter">
+  <div>
+    simple test (with a parameter). Oh, by the way (value is mapped to riotValue)
+  </div>
+</simpletest>
+`;

jest.config.js

@@ -75,7 +75,7 @@ module.exports = {
     DOCS_MODE: false,
     PREVIEW_URL: undefined,
   },
-  snapshotSerializers: ['jest-emotion', 'enzyme-to-json/serializer'],
+  snapshotSerializers: ['jest-emotion', 'enzyme-to-json/serializer', 'jest-serializer-html'],
   coverageDirectory: 'coverage',
   setupFilesAfterEnv: ['./scripts/jest.init.js'],
   coverageReporters: ['lcov'],

lib/components/package.json

@@ -30,13 +30,16 @@
   "dependencies": {
     "@storybook/client-logger": "6.0.0-alpha.22",
     "@storybook/theming": "6.0.0-alpha.22",
+    "@types/overlayscrollbars": "^1.9.0",
     "@types/react-syntax-highlighter": "11.0.4",
     "@types/react-textarea-autosize": "^4.3.3",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "lodash": "^4.17.15",
     "markdown-to-jsx": "^6.9.1",
     "memoizerific": "^1.11.3",
+    "overlayscrollbars": "^1.10.2",
+    "overlayscrollbars-react": "^0.2.1",
     "polished": "^3.4.4",
     "popper.js": "^1.14.7",
     "react": "^16.8.3",
@@ -46,10 +49,10 @@
     "react-popper-tooltip": "^2.8.3",
     "react-syntax-highlighter": "^11.0.2",
     "react-textarea-autosize": "^7.1.0",
-    "simplebar-react": "^1.0.0-alpha.6",
     "ts-dedent": "^1.1.1"
   },
   "devDependencies": {
+    "css": "^2.2.4",
     "enzyme": "^3.9.0",
     "jest": "^25.1.0",
     "jest-enzyme": "^7.0.2"

lib/components/scripts/writeCssScript.js

@@ -0,0 +1,132 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable no-param-reassign */
+
+// This little script converts the overflowscrollbars CSS file into the css-in-js file
+// it's normal you have to run prettier over the file after
+
+const fs = require('fs');
+const { parse } = require('css');
+const { isNaN } = require('global');
+
+const INPUT = require.resolve('overlayscrollbars/css/OverlayScrollbars.min.css');
+const OUTPUT = `${__dirname}/../src/ScrollArea/ScrollAreaStyles.ts`;
+const OPTIONS = { camelCase: true, numbers: true };
+
+const read = file => {
+  return fs
+    .readFileSync(file)
+    .toString()
+    .replace(/(?:\r\n|\r|\n)/g, '');
+};
+
+const convert = (css, opts) => {
+  const ast = parse(css, { source: css });
+  const obj = cssToObject(opts)(ast.stylesheet.rules);
+  return obj;
+};
+
+const cssToObject = opts => (rules, result = {}) => {
+  rules.forEach(rule => {
+    if (rule.type === 'media') {
+      const key = `@media ${rule.media}`;
+      const decs = cssToObject(opts)(rule.rules);
+      result[key] = decs;
+      return;
+    }
+    if (rule.type === 'keyframes') {
+      result.__keyframes = Object.assign(result.__keyframes || {}, { [camel(rule.name)]: rule });
+      return;
+    }
+    if (rule.type === 'comment') {
+      return;
+    }
+
+    const key = rule.selectors.filter(s => !s.includes('.os-theme-none')).join(', ');
+
+    if (key.length) {
+      Object.assign(result, {
+        [key]: Object.assign(result[key] || {}, getDeclarations(rule.declarations, opts)),
+      });
+    }
+  });
+  return result;
+};
+
+const getDeclarations = (decs, opts = {}) => {
+  const result = decs
+    .filter(d => {
+      const filtered = d.type === 'comment' || d.property.match(/^(?:-webkit-|-ms-|-moz-)/);
+      return !filtered;
+    })
+    .map(d => ({
+      key: opts.camelCase ? camel(d.property) : d.property,
+      value: opts.numbers ? parsePx(d.value) : d.value,
+    }))
+    .reduce((a, b) => {
+      a[b.key] = b.value;
+      return a;
+    }, {});
+  return result;
+};
+
+const camel = str => str.replace(/(-[a-z])/g, x => x.toUpperCase()).replace(/-/g, '');
+
+const parsePx = val => {
+  return /px$/.test(val) || val === '' || (val.match(/\d$/) && !isNaN(parseInt(val, 10)))
+    ? parseFloat(val.replace(/px$/, ''))
+    : val;
+};
+
+const { __keyframes, ...styles } = convert(read(INPUT), OPTIONS);
+
+const stringifiedKeyFrames = Object.values(__keyframes)
+  .map(k => {
+    return `const ${camel(k.name)} = keyframes\`${k.keyframes.reduce(
+      (acc, item) =>
+        `${acc}${k.position.source.substring(
+          item.position.start.column - 1,
+          item.position.end.column - 1
+        )}`,
+      ''
+    )}\`;`;
+  })
+  .join('\n');
+
+const stringifiedStyles = JSON.stringify(
+  Object.entries(styles).reduce((acc, [key, item]) => {
+    if (item.animationName && __keyframes[camel(item.animationName)]) {
+      item.animationName = camel(item.animationName);
+    }
+
+    if (item.backgroundImage && item.backgroundImage.match(/^url/)) {
+      item.backgroundImage =
+        'linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0)  50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)';
+    }
+
+    acc[key] = item;
+    return acc;
+  }, {}),
+  null,
+  2
+);
+
+const stringifiedStylesWithReplacedKeyframes = Object.keys(__keyframes)
+  .reduce((acc, item) => {
+    // replace keyframes
+    return acc.replace(`"${item}"`, `\`\${${item}}\``);
+  }, stringifiedStyles)
+  .replace(/"([^\s]+)!important"/g, (f, p1) => {
+    // make "!important" rules work with TS
+    const v = parsePx(p1);
+    return `"${p1}!important" as any as ${JSON.stringify(v)}`;
+  });
+
+const result = `
+  import { Theme, CSSObject, keyframes } from '@storybook/theming';
+
+  ${stringifiedKeyFrames}
+
+  export const getScrollAreaStyles: (theme: Theme) => CSSObject = (theme: Theme) => (${stringifiedStylesWithReplacedKeyframes});
+`;
+
+fs.writeFileSync(OUTPUT, result);

lib/components/src/ScrollArea/ScrollArea.tsx

@@ -1,10 +1,7 @@
-// Storybook's implementation of SimpleBar https://github.com/Grsmto/simplebar
-// Note: "SimpleBar can't be used on the <body>, <textarea> or <iframe> elements."
-
 import React, { Fragment, FunctionComponent } from 'react';
 import { styled, Global } from '@storybook/theming';
 
-import SimpleBar from 'simplebar-react';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import { getScrollAreaStyles } from './ScrollAreaStyles';
 
 export interface ScrollProps {
@@ -14,7 +11,7 @@ export interface ScrollProps {
 }
 
 const Scroll = styled(({ vertical, horizontal, ...rest }: ScrollProps) => (
-  <SimpleBar {...rest} scrollableNodeProps={{ tabIndex: 0 }} />
+  <OverlayScrollbarsComponent options={{ scrollbars: { autoHide: 'scroll' } }} {...rest} />
 ))<ScrollProps>(
   ({ vertical }) =>
     !vertical