Merge pull request #12707 from storybookjs/12702-instant-on-manager

UI: Instant-on manager

.eslintignore

@@ -7,6 +7,7 @@ docs/public
 storybook-static
 built-storybooks
 lib/cli/test
+lib/core/prebuilt
 lib/codemod/src/transforms/__testfixtures__
 scripts/storage
 *.bundle.js

.gitignore

@@ -24,6 +24,7 @@ integration/__image_snapshots__/__diff_output__
 /examples/cra-kitchen-sink/src/__image_snapshots__/__diff_output__/
 lib/*.jar
 lib/**/dll
+lib/core/prebuilt
 /false
 /addons/docs/common/config-*
 built-storybooks

app/react/src/server/framework-preset-react.ts

@@ -59,7 +59,7 @@ export async function webpackFinal(config: Configuration, options: StorybookOpti
     return config;
   }
 
-  logger.info('=> Using React fast refresh feature.');
+  logger.info('=> Using React fast refresh');
   return {
     ...config,
     plugins: [...(config.plugins || []), new ReactRefreshWebpackPlugin()],

examples/vue-cli/package.json

@@ -4,9 +4,9 @@
   "private": true,
   "scripts": {
     "build": "vue-cli-service build",
-    "build-storybook": "build-storybook -s public",
+    "build-storybook": "build-storybook",
     "serve": "vue-cli-service serve",
-    "storybook": "start-storybook -p 9009 -s public"
+    "storybook": "start-storybook -p 9009"
   },
   "dependencies": {
     "core-js": "^3.6.4",

jest.config.js

@@ -49,6 +49,7 @@ module.exports = {
   testPathIgnorePatterns: [
     '/node_modules/',
     '/dist/',
+    '/prebuilt/',
     'addon-jest.test.js',
     '/cli/test/',
     '/examples/cra-kitchen-sink/src/*',
@@ -66,6 +67,7 @@ module.exports = {
     '/node_modules/',
     '/cli/test/',
     '/dist/',
+    '/prebuilt/',
     '/generators/',
     '/dll/',
     '/__mocks__ /',

lib/cli/src/generators/baseGenerator.ts

@@ -44,6 +44,7 @@ export async function baseGenerator(
   };
 
   // added to main.js
+  // make sure to update `canUsePrebuiltManager` in dev-server.js and build-manager-config/main.js when this list changes
   const addons = ['@storybook/addon-links', '@storybook/addon-essentials'];
   // added to package.json
   const addonPackages = [...addons, '@storybook/addon-actions'];

lib/components/src/Loader/Loader.stories.tsx

@@ -1,33 +1,44 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Loader } from './Loader';
+import { PureLoader as Loader } from './Loader';
 
-storiesOf('Basics/Loader', module)
-  .addDecorator((storyFn) => (
-    <div
+const withBackground = (storyFn) => (
+  <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%)',
+    }}
+  >
+    <span
       style={{
-        position: 'fixed',
-        top: 0,
+        position: 'absolute',
+        top: '50%',
         left: 0,
+        height: '50vh',
         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%)',
+        background: 'linear-gradient(to right, red 0%, orangered 50%, blue 50%, deepskyblue 100%)',
       }}
-    >
-      <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()}
-    </div>
-  ))
-  .add('infinite state', () => <Loader role="progressbar" />)
-  .add('size adjusted', () => <Loader size={64} role="progressbar" />);
+    />
+    {storyFn()}
+  </div>
+);
+
+export default {
+  title: 'Basics/Loader',
+};
+
+export const InfiniteState = () => <Loader role="progressbar" />;
+InfiniteState.decorators = [withBackground];
+
+export const SizeAdjusted = () => <Loader size={64} role="progressbar" />;
+SizeAdjusted.decorators = [withBackground];
+
+export const ProgressBar = () => (
+  <Loader progress={{ value: 0.3, message: 'Building', modules: { complete: 500, total: 1337 } }} />
+);
+
+export const ProgressError = () => <Loader error={new Error('Connection closed')} />;

lib/components/src/Loader/Loader.tsx

@@ -1,5 +1,7 @@
-import React, { FunctionComponent, ComponentProps } from 'react';
-import { styled } from '@storybook/theming';
+import { EventSource } from 'global';
+import React, { ComponentProps, FunctionComponent, useEffect, useState } from 'react';
+import { styled, keyframes } from '@storybook/theming';
+import { Icons } from '../icon/icon';
 import { rotate360 } from '../shared/animation';
 
 const LoaderWrapper = styled.div<{ size?: number }>(({ size = 32 }) => ({
@@ -25,6 +27,153 @@ const LoaderWrapper = styled.div<{ size?: number }>(({ size = 32 }) => ({
   mixBlendMode: 'difference',
 }));
 
-export const Loader: FunctionComponent<ComponentProps<typeof LoaderWrapper>> = (props) => (
-  <LoaderWrapper aria-label="Content is loading ..." aria-live="polite" role="status" {...props} />
-);
+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: `${theme.color.secondary}33`,
+  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',
+  },
+});
+
+interface Progress {
+  value: number;
+  message: string;
+  modules?: {
+    complete: number;
+    total: number;
+  };
+}
+
+interface LoaderProps {
+  progress?: Progress;
+  error?: Error;
+  size?: number;
+}
+
+export const PureLoader: FunctionComponent<
+  LoaderProps & ComponentProps<typeof ProgressWrapper>
+> = ({ progress, error, size, ...props }) => {
+  if (error) {
+    return (
+      <ProgressWrapper aria-label={error.toString()} aria-live="polite" role="status" {...props}>
+        <ErrorIcon icon="lightningoff" />
+        <ProgressMessage>{error.message}</ProgressMessage>
+      </ProgressWrapper>
+    );
+  }
+
+  if (progress) {
+    const { value, modules } = progress;
+    let { message } = progress;
+    if (modules) message += ` ${modules.complete} / ${modules.total} modules`;
+    return (
+      <ProgressWrapper
+        aria-label="Content is loading..."
+        aria-live="polite"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={value * 100}
+        aria-valuetext={message}
+        role="progressbar"
+        {...props}
+      >
+        <ProgressTrack>
+          <ProgressBar style={{ width: `${value * 100}%` }} />
+        </ProgressTrack>
+        <ProgressMessage>
+          {message}
+          {value < 1 && <Ellipsis key={message} />}
+        </ProgressMessage>
+      </ProgressWrapper>
+    );
+  }
+
+  return (
+    <LoaderWrapper
+      aria-label="Content is loading..."
+      aria-live="polite"
+      role="status"
+      size={size}
+      {...props}
+    />
+  );
+};
+
+export const Loader: FunctionComponent<ComponentProps<typeof PureLoader>> = (props) => {
+  const [progress, setProgress] = useState(undefined);
+  const [error, setError] = useState(undefined);
+
+  useEffect(() => {
+    const eventSource = new EventSource('/progress');
+    let lastProgress: Progress;
+    eventSource.onmessage = (event: any) => {
+      try {
+        lastProgress = JSON.parse(event.data);
+        setProgress(lastProgress);
+      } catch (e) {
+        setError(e);
+        eventSource.close();
+      }
+    };
+    eventSource.onerror = () => {
+      if (lastProgress?.value !== 1) setError(new Error('Connection closed'));
+      eventSource.close();
+    };
+    return () => eventSource.close();
+  }, []);
+
+  return <PureLoader progress={progress} error={error} {...props} />;
+};

lib/core/package.json

@@ -20,8 +20,8 @@
   "files": [
     "dist/**/*",
     "dll/**/*",
+    "prebuilt/**/*",
     "types/**/*",
-    "README.md",
     "*.js",
     "*.d.ts",
     "ts3.4/**/*"
@@ -83,6 +83,7 @@
     "cli-table3": "0.6.0",
     "commander": "^5.0.0",
     "core-js": "^3.0.1",
+    "cpy": "^8.1.1",
     "css-loader": "^3.5.3",
     "detect-port": "^1.3.0",
     "dotenv-webpack": "^1.7.0",
@@ -121,7 +122,9 @@
     "shelljs": "^0.8.4",
     "stable": "^0.1.8",
     "style-loader": "^1.2.1",
+    "telejson": "^5.0.2",
     "terser-webpack-plugin": "^3.0.0",
+    "trash": "^6.1.1",
     "ts-dedent": "^2.0.0",
     "unfetch": "^4.1.0",
     "url-loader": "^4.0.0",