@storybook/components 6.4.0-beta.24 → 6.4.0-beta.25

package/dist/modern/Colors/colorpalette.stories.mdx

@@ -0,0 +1,125 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
+
+import { themes, ThemeProvider, convert, ensure } from '@storybook/theming';
+
+import { SideBySide } from './SideBySide';
+
+<Meta title="Basics/ColorPalette" />
+
+<SideBySide>
+  <div style={{background: '#202020' }}>
+<ThemeProvider theme={ensure(themes.dark)}>
+
+Dark theme Colors
+
+<ColorPalette>
+  {Object.entries(convert(themes.dark).color).map(([k, v]) => {
+    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+      return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
+    } else if (typeof v === 'object') {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={Object.entries(v).reduce(
+            (acc, [key, value]) =>
+              typeof value === 'string' &&
+              (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))
+                ? { ...acc, [key]: value }
+                : acc,
+            {}
+          )}
+        />
+      );
+    }
+    return null;
+  })}
+</ColorPalette>
+
+Dark theme Backgrounds
+
+<ColorPalette>
+  {Object.entries(convert(themes.dark).background).map(([k,v]) => {
+    if(k === 'color'){
+      return null
+    }
+    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={{ [k]: v }}
+        />
+      );
+    } else if (typeof v === 'object') {
+      const colors = Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {});
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={colors}
+        />
+      );
+    }
+    return null;
+  })}
+</ColorPalette>
+  </ThemeProvider></div>
+  <div styles={{ background: '#eeeeee'}}>
+
+Light theme Colors
+
+<ColorPalette>
+  {Object.entries(convert(themes.light).color).map(([k, v]) => {
+    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+      return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
+    } else if (typeof v === 'object') {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={Object.entries(v).reduce(
+            (acc, [key, value]) =>
+              typeof value === 'string' &&
+              (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))
+                ? { ...acc, [key]: value }
+                : acc,
+            {}
+          )}
+        />
+      );
+    }
+    return null;
+  })}
+</ColorPalette>
+
+Light theme Backgrounds
+
+<ColorPalette>
+  {Object.entries(convert(themes.light).background).map(([k,v]) => {
+    if(k === 'color'){
+      return null
+    }
+    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={{ [k]: v }}
+        />
+      );
+    } else if (typeof v === 'object') {
+      const colors = Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {});
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={colors}
+        />
+      );
+    }
+    return null;
+  })}
+</ColorPalette>
+  </div>
+</SideBySide>

package/dist/modern/Loader/Loader.js

@@ -0,0 +1,185 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import global from 'global';
+import { transparentize } from 'polished';
+import React, { useEffect, useState } from 'react';
+import { styled, keyframes } from '@storybook/theming';
+import { Icons } from '../icon/icon';
+import { rotate360 } from '../shared/animation';
+const {
+  EventSource,
+  CONFIG_TYPE
+} = global;
+const LoaderWrapper = styled.div(({
+  size = 32
+}) => ({
+  borderRadius: '50%',
+  cursor: 'progress',
+  display: 'inline-block',
+  overflow: 'hidden',
+  position: 'absolute',
+  transition: 'all 200ms ease-out',
+  verticalAlign: 'top',
+  top: '50%',
+  left: '50%',
+  marginTop: -(size / 2),
+  marginLeft: -(size / 2),
+  height: size,
+  width: size,
+  zIndex: 4,
+  borderWidth: 2,
+  borderStyle: 'solid',
+  borderColor: 'rgba(97, 97, 97, 0.29)',
+  borderTopColor: 'rgb(100,100,100)',
+  animation: `${rotate360} 0.7s linear infinite`,
+  mixBlendMode: 'difference'
+}));
+const ProgressWrapper = styled.div({
+  position: 'absolute',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+  height: '100%'
+});
+const ProgressTrack = styled.div(({
+  theme
+}) => ({
+  position: 'relative',
+  width: '80%',
+  marginBottom: '0.75rem',
+  maxWidth: 300,
+  height: 5,
+  borderRadius: 5,
+  background: transparentize(0.8, theme.color.secondary),
+  overflow: 'hidden',
+  cursor: 'progress'
+}));
+const ProgressBar = styled.div(({
+  theme
+}) => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  height: '100%',
+  background: theme.color.secondary
+}));
+const ProgressMessage = styled.div(({
+  theme
+}) => ({
+  minHeight: '2em',
+  fontSize: `${theme.typography.size.s1}px`,
+  color: theme.barTextColor
+}));
+const ErrorIcon = styled(Icons)(({
+  theme
+}) => ({
+  width: 20,
+  height: 20,
+  marginBottom: '0.5rem',
+  color: theme.color.mediumdark
+}));
+const ellipsis = keyframes`
+  from { content: "..." }
+  33% { content: "." }
+  66% { content: ".." }
+  to { content: "..." }
+`;
+const Ellipsis = styled.span({
+  '&::after': {
+    content: "'...'",
+    animation: `${ellipsis} 1s linear infinite`,
+    animationDelay: '1s',
+    display: 'inline-block',
+    width: '1em',
+    height: 'auto'
+  }
+});
+export const PureLoader = (_ref) => {
+  let {
+    progress,
+    error,
+    size
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["progress", "error", "size"]);
+
+  if (error) {
+    return /*#__PURE__*/React.createElement(ProgressWrapper, _extends({
+      "aria-label": error.toString(),
+      "aria-live": "polite",
+      role: "status"
+    }, props), /*#__PURE__*/React.createElement(ErrorIcon, {
+      icon: "lightningoff"
+    }), /*#__PURE__*/React.createElement(ProgressMessage, null, error.message));
+  }
+
+  if (progress) {
+    const {
+      value,
+      modules
+    } = progress;
+    let {
+      message
+    } = progress;
+    if (modules) message += ` ${modules.complete} / ${modules.total} modules`;
+    return /*#__PURE__*/React.createElement(ProgressWrapper, _extends({
+      "aria-label": "Content is loading...",
+      "aria-live": "polite",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": value * 100,
+      "aria-valuetext": message,
+      role: "progressbar"
+    }, props), /*#__PURE__*/React.createElement(ProgressTrack, null, /*#__PURE__*/React.createElement(ProgressBar, {
+      style: {
+        width: `${value * 100}%`
+      }
+    })), /*#__PURE__*/React.createElement(ProgressMessage, null, message, value < 1 && /*#__PURE__*/React.createElement(Ellipsis, {
+      key: message
+    })));
+  }
+
+  return /*#__PURE__*/React.createElement(LoaderWrapper, _extends({
+    "aria-label": "Content is loading...",
+    "aria-live": "polite",
+    role: "status",
+    size: size
+  }, props));
+};
+PureLoader.displayName = "PureLoader";
+export const Loader = props => {
+  const [progress, setProgress] = useState(undefined);
+  const [error, setError] = useState(undefined);
+  useEffect(() => {
+    // Don't listen for progress updates in static builds
+    // Event source is not defined in IE 11
+    if (CONFIG_TYPE !== 'DEVELOPMENT' || !EventSource) return undefined;
+    const eventSource = new EventSource('/progress');
+    let lastProgress;
+
+    eventSource.onmessage = event => {
+      try {
+        lastProgress = JSON.parse(event.data);
+        setProgress(lastProgress);
+      } catch (e) {
+        setError(e);
+        eventSource.close();
+      }
+    };
+
+    eventSource.onerror = () => {
+      if (lastProgress && lastProgress.value !== 1) setError(new Error('Connection closed'));
+      eventSource.close();
+    };
+
+    return () => eventSource.close();
+  }, []);
+  return /*#__PURE__*/React.createElement(PureLoader, _extends({
+    progress: progress,
+    error: error
+  }, props));
+};
+Loader.displayName = "Loader";

package/dist/modern/Loader/Loader.stories.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { PureLoader as Loader } from './Loader';
+
+const withBackground = storyFn => /*#__PURE__*/React.createElement("div", {
+  style: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    background: 'linear-gradient(to right, rgba(56,56,56,1) 0%, rgba(0,0,0,1) 50%, rgba(255,255,255,1) 50%, rgba(224,224,224,1) 100%)'
+  }
+}, /*#__PURE__*/React.createElement("span", {
+  style: {
+    position: 'absolute',
+    top: '50%',
+    left: 0,
+    height: '50vh',
+    width: '100vw',
+    background: 'linear-gradient(to right, red 0%, orangered 50%, blue 50%, deepskyblue 100%)'
+  }
+}), storyFn());
+
+withBackground.displayName = "withBackground";
+export default {
+  title: 'Basics/Loader'
+};
+export const InfiniteState = () => /*#__PURE__*/React.createElement(Loader, {
+  role: "progressbar"
+});
+InfiniteState.displayName = "InfiniteState";
+InfiniteState.decorators = [withBackground];
+export const SizeAdjusted = () => /*#__PURE__*/React.createElement(Loader, {
+  size: 64,
+  role: "progressbar"
+});
+SizeAdjusted.displayName = "SizeAdjusted";
+SizeAdjusted.decorators = [withBackground];
+export const ProgressBar = () => /*#__PURE__*/React.createElement(Loader, {
+  progress: {
+    value: 0.3,
+    message: 'Building',
+    modules: {
+      complete: 500,
+      total: 1337
+    }
+  }
+});
+ProgressBar.displayName = "ProgressBar";
+export const ProgressError = () => /*#__PURE__*/React.createElement(Loader, {
+  error: new Error('Connection closed')
+});
+ProgressError.displayName = "ProgressError";