update storybook styles; rebuild storybook files

Author: based-ghost

.storybook/global-style/global-style.ts

@@ -1,7 +1,7 @@
 import { createGlobalStyle } from 'styled-components';
 import ReactToastifyCss from './react-toastify-css';
 
-export const GlobalStyle = createGlobalStyle`
+const GlobalStyle = createGlobalStyle`
   *,
   *::before,
   *::after {
@@ -59,4 +59,6 @@ export const GlobalStyle = createGlobalStyle`
   }
 
   ${ReactToastifyCss}
-`;
+`;
+
+export default GlobalStyle;

.storybook/global-style/index.ts

@@ -1 +1 @@
-export { GlobalStyle } from './global-style';
+export { default as GlobalStyle } from './global-style';

.storybook/global-style/react-toastify-css.ts

@@ -1,14 +1,14 @@
 import { css, keyframes } from 'styled-components';
 
-const _toastify_trackProgress = keyframes`
+const TOASTIFY_TRACK_PROGRESS = keyframes`
   0% {
     transform: scaleX(1);
   } 100% {
     transform: scaleX(0);
   }
 `;
 
-const _toastify_bounceOut = keyframes`
+const TOASTIFY_BOUNCE_OUT = keyframes`
   20% {
     transform: scale3d(0.9, 0.9, 0.9);
   } 50%,
@@ -21,7 +21,7 @@ const _toastify_bounceOut = keyframes`
   }
 `;
 
-const _toastify_bounceIn = keyframes`
+const TOASTIFY_BOUNCE_IN = keyframes`
   from,
   20%,
   40%,
@@ -51,11 +51,11 @@ const _toastify_bounceIn = keyframes`
 
 const ReactToastifyCss = css`
   .Toastify__animate__bounceIn {
-    animation: ${_toastify_bounceIn} 1s both;
+    animation: ${TOASTIFY_BOUNCE_IN} 1s both;
   }
 
   .Toastify__animate__bounceOut {
-    animation: ${_toastify_bounceOut} 0.85s both;
+    animation: ${TOASTIFY_BOUNCE_OUT} 0.85s both;
   }
 
   .Toastify__toast-container {
@@ -163,7 +163,7 @@ const ReactToastifyCss = css`
       transform-origin: left;
 
       &--animated {
-        animation: ${_toastify_trackProgress} linear 1 forwards;
+        animation: ${TOASTIFY_TRACK_PROGRESS} linear 1 forwards;
       }
 
       &--controlled {

.storybook/preview.tsx

@@ -2,21 +2,21 @@ import ReactDOM from 'react-dom';
 import { GlobalStyle } from './global-style';
 
 // Configure createGlobalStyle for styled-components
-const _gsNodeId = 'temp2-global-style';
+const GS_NODE_ID = 'temp2-global-style';
 
-const _gsNode =
-  document.getElementById(_gsNodeId) ||
+const GS_NODE =
+  document.getElementById(GS_NODE_ID) ||
   (() => {
     const el = document.createElement('div');
-    el.id = _gsNodeId;
+    el.id = GS_NODE_ID;
     document.head.appendChild(el);
     return el;
   })();
 
 // Callback to remove node used to mount GlobalStyle to
 const rendererCallbackFn = () => {
-  _gsNode && document.head.removeChild(_gsNode);
+  GS_NODE && document.head.removeChild(GS_NODE);
 };
 
 // Mount GlobalStyle to gsNode and then execute callback rendererCallbackFn()
-ReactDOM.render(<GlobalStyle />, _gsNode, rendererCallbackFn);
+ReactDOM.render(<GlobalStyle />, GS_NODE, rendererCallbackFn);

__stories__/helpers/components/Checkbox.tsx

@@ -9,8 +9,8 @@ type CheckboxProps = Readonly<{
   onCheck: (checked: boolean) => void;
 }>;
 
-const _colorCheckMark = '#149DF3';
-const _colorBorderChecked = hexToRgba(_colorCheckMark, 0.78);
+const CHECK_COLOR = '#149DF3';
+const CHECK_BORDER_COLOR = hexToRgba(CHECK_COLOR, 0.78);
 
 const Label = styled.span`
   user-select: none;
@@ -26,7 +26,7 @@ const Input = styled.input`
   position: absolute;
 
   :checked ~ i {
-    border-color: ${_colorBorderChecked};
+    border-color: ${CHECK_BORDER_COLOR};
 
     :after,
     :before {
@@ -87,7 +87,7 @@ const CheckIcon = styled.i`
     position: absolute;
     border-radius: 3px;
     transform-origin: left top;
-    background-color: ${_colorCheckMark};
+    background-color: ${CHECK_COLOR};
     transition: opacity 0.365s ease, height 0s linear 0.365s;
   }
 

__stories__/helpers/constants/theme.ts

@@ -4,22 +4,22 @@ import { mergeThemes } from '../../../src/utils';
 import type { Theme } from '../../../src';
 
 // Normalize animation props as be default they are type of styled-component's "FlattenSimpleInterpolation"
-const _bounceKeyframes = 'BOUNCE_KEYFRAMES 1.19s ease-in-out infinite';
-const _fadeInKeyframes = 'FADE_IN_KEYFRAMES 0.225s ease-in-out forwards';
+const FADE_IN_KEYFRAMES = 'FADE_IN_KEYFRAMES 0.25s ease-in-out';
+const BOUNCE_KEYFRAMES = 'BOUNCE_KEYFRAMES 1.19s ease-in-out infinite';
 
-const _themeAnimations: Theme = {
+const THEME_ANIMATIONS: Theme = {
   loader: {
-    animation: _bounceKeyframes
+    animation: BOUNCE_KEYFRAMES
   },
   menu: {
-    animation: _fadeInKeyframes
+    animation: FADE_IN_KEYFRAMES
   },
   multiValue: {
-    animation: _fadeInKeyframes
+    animation: FADE_IN_KEYFRAMES
   },
   icon: {
     clear: {
-      animation: _fadeInKeyframes
+      animation: FADE_IN_KEYFRAMES
     }
   }
 };
@@ -72,7 +72,7 @@ export const ThemeConfigMap: Theme = {
 };
 
 export const THEME_OPTIONS = createThemeOptions(ThemeEnum);
-export const THEME_DEFAULTS = mergeThemes(_themeAnimations);
+export const THEME_DEFAULTS = mergeThemes(THEME_ANIMATIONS);
 
 export const THEME_CONFIG: Theme = {
   menu: {

__stories__/helpers/styled/index.ts

@@ -7,7 +7,7 @@ export const MEDIA_QUERY_IS_TABLET = '@media only screen and (max-width: 991px)
 
 // Need to implement a div version of Paragraph since PrettyPrintJson contains an <pre> element
 // ...which cannot be a child of a <p> element
-const _paragraphCSS = css`
+const PARAGRAPH_BASE_STYLE = css`
   margin-top: 0;
   display: block;
   margin-bottom: 1rem;
@@ -18,11 +18,11 @@ const _paragraphCSS = css`
 `;
 
 export const Content = styled.p`
-  ${_paragraphCSS}
+  ${PARAGRAPH_BASE_STYLE}
 `;
 
 export const Paragraph = styled.p`
-  ${_paragraphCSS}
+  ${PARAGRAPH_BASE_STYLE}
 
   ${MEDIA_QUERY_IS_TABLET_OR_DESKTOP} {
     max-width: 85%;
@@ -92,7 +92,7 @@ export const Column = styled.div<{ widthPercent?: number }>`
 `;
 
 export const ListWrapper = styled.div`
-  ${_paragraphCSS}
+  ${PARAGRAPH_BASE_STYLE}
 
   ${MEDIA_QUERY_IS_TABLET_OR_DESKTOP} {
     max-width: 85%;
@@ -138,16 +138,16 @@ export const TextHeader = styled.span`
   line-height: 1.65;
   font-size: 1.025em;
   border-radius: 3px;
+  padding: .15em .3em;
   word-break: break-word;
   background-color: #eef0f3;
-  padding: .15em .45em .15em;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
   font-family: SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
 
   ${MEDIA_QUERY_IS_MOBILE_XS} {
     line-height: 1.6;
-    padding: .1em .4em .1em;
+    padding: .1em .25em;
   }
 `;
 
@@ -350,23 +350,23 @@ export const MenuPortalElement = styled.div<{ menuOpen: boolean; }>`
 // Advanced story specific
 // =======================================
 
-const _spinKeyframes = keyframes`
+const SPIN_KEYFRAMES = keyframes`
   from {
     transform: rotate(0deg);
   } to {
     transform: rotate(360deg);
   }
 `;
 
-const _spinAnimationCss = css`animation: ${_spinKeyframes} infinite 8s linear;`;
+const SPIN_ANIMATION_CSS = css`animation: ${SPIN_KEYFRAMES} infinite 8s linear;`;
 
 export const ReactSvg = styled.svg<{ isDisabled?: boolean }>`
   width: 34px;
   height: 34px;
   color: #1ea7fd;
   fill: currentColor;
   display: inline-block;
-  ${({ isDisabled }) => !isDisabled && _spinAnimationCss}
+  ${({ isDisabled }) => !isDisabled && SPIN_ANIMATION_CSS}
 `;
 
 export const ChevronDownSvg = styled.svg<{ menuOpen: boolean }>`

docs/asset-manifest.json

@@ -1,6 +1,6 @@
 {
   "files": {
-    "main.js": "./main.ad5f44b6.iframe.bundle.js",
+    "main.js": "./main.eeb30b91.iframe.bundle.js",
     "runtime~main.js": "./runtime~main.f398e60b.iframe.bundle.js",
     "vendors~main.js": "./vendors~main.31a06b8d.iframe.bundle.js",
     "vendors~main.js.map": "./vendors~main.31a06b8d.iframe.bundle.js.map",
@@ -10,6 +10,6 @@
   "entrypoints": [
     "runtime~main.f398e60b.iframe.bundle.js",
     "vendors~main.31a06b8d.iframe.bundle.js",
-    "main.ad5f44b6.iframe.bundle.js"
+    "main.eeb30b91.iframe.bundle.js"
   ]
 }

docs/iframe.html

@@ -130,4 +130,4 @@
 
 
 
-              window['FRAMEWORK_OPTIONS'] = {"fastRefresh":true};</script><script src="runtime~main.f398e60b.iframe.bundle.js"></script><script src="vendors~main.31a06b8d.iframe.bundle.js"></script><script src="main.ad5f44b6.iframe.bundle.js"></script></body></html>
+              window['FRAMEWORK_OPTIONS'] = {"fastRefresh":true};</script><script src="runtime~main.f398e60b.iframe.bundle.js"></script><script src="vendors~main.31a06b8d.iframe.bundle.js"></script><script src="main.eeb30b91.iframe.bundle.js"></script></body></html>