首页 发现 帮助
登录
wumu
/
react-photo-view
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

add-storybook

MinJieLiu 5 年之前
父节点
0bc2ac5221
当前提交
dbd4a379ea
共有 24 个文件被更改，包括 316 次插入 和 466 次删除
分列视图 显示文件统计
  1. 2 0
      example/.storybook/addons.js
  2. 4 0
      example/.storybook/config.js
  3. 13 8
      example/package.json
  4. 二进制
      example/public/favicon.ico
  5. 0 43
      example/public/index.html
  6. 二进制
      example/public/logo192.png
  7. 二进制
      example/public/logo512.png
  8. 0 25
      example/public/manifest.json
  9. 0 2
      example/public/robots.txt
  10. 0 22
      example/src/App.css
  11. 0 9
      example/src/App.test.tsx
  12. 0 56
      example/src/App.tsx
  13. 0 13
      example/src/index.css
  14. 0 12
      example/src/index.tsx
  15. 0 1
      example/src/react-app-env.d.ts
  16. 0 143
      example/src/serviceWorker.ts
  17. 55 0
      example/stories/Index.stories.js
  18. 0 0
      example/stories/static/1.png
  19. 0 0
      example/stories/static/2.jpg
  20. 0 0
      example/stories/static/3.jpg
  21. 0 0
      example/stories/static/4.jpg
  22. 0 0
      example/stories/static/5.jpg
  23. 0 25
      example/tsconfig.json
  24. 242 107
      example/yarn.lock

+ 2 - 0
example/.storybook/addons.js
查看文件 

@@ -0,0 +1,2 @@
 
+import '@storybook/addon-actions/register';
 
+import '@storybook/addon-links/register';

+ 4 - 0
example/.storybook/config.js
查看文件 

@@ -0,0 +1,4 @@
 
+import { configure } from '@storybook/react';
 
+
 
+// automatically import all files ending in *.stories.js
 
+configure(require.context('../stories', true, /\.stories\.js$/), module);

+ 13 - 8
example/package.json
查看文件 

@@ -3,18 +3,14 @@
 
   "version": "0.0.0",
 
   "private": true,
 
   "dependencies": {
 
-    "@types/jest": "24.0.22",
 
-    "@types/node": "12.12.6",
 
     "react-photo-view": "link:..",
 
     "react-scripts": "3.2.0",
 
-    "styled-components": "^4.4.1",
 
-    "typescript": "3.7.2"
 
+    "styled-components": "^4.4.1"
 
   },
 
   "scripts": {
 
-    "start": "react-scripts start",
 
-    "build": "react-scripts build",
 
-    "test": "react-scripts test",
 
-    "eject": "react-scripts eject"
 
+    "start": "start-storybook -p 6006",
 
+    "build": "build-storybook",
 
+    "deploy-storybook": "storybook-to-ghpages"
 
   },
 
   "eslintConfig": {
 
     "extends": "react-app"
 
@@ -30,5 +26,14 @@
 
       "last 1 firefox version",
 
       "last 1 safari version"
 
     ]
 
+  },
 
+  "devDependencies": {
 
+    "@babel/core": "^7.7.2",
 
+    "@storybook/addon-actions": "^5.3.0-beta.2",
 
+    "@storybook/addon-links": "^5.3.0-beta.2",
 
+    "@storybook/addons": "^5.3.0-beta.2",
 
+    "@storybook/react": "^5.3.0-beta.2",
 
+    "@storybook/storybook-deployer": "^2.8.1",
 
+    "babel-loader": "^8.0.6"
 
   }
 
 }

二进制
example/public/favicon.ico
查看文件


+ 0 - 43
example/public/index.html
查看文件 

@@ -1,43 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-  <head>
 
-    <meta charset="utf-8" />
 
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <meta name="theme-color" content="#000000" />
 
-    <meta
 
-      name="description"
 
-      content="Web site created using create-react-app"
 
-    />
 
-    <link rel="apple-touch-icon" href="logo192.png" />
 
-    <!--
 
-      manifest.json provides metadata used when your web app is installed on a
 
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 
-    -->
 
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-    <!--
 
-      Notice the use of %PUBLIC_URL% in the tags above.
 
-      It will be replaced with the URL of the `public` folder during the build.
 
-      Only files inside the `public` folder can be referenced from the HTML.
 
-
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
 
-      work correctly both with client-side routing and a non-root public URL.
 
-      Learn how to configure a non-root public URL by running `npm run build`.
 
-    -->
 
-    <title>React App</title>
 
-  </head>
 
-  <body>
 
-    <noscript>You need to enable JavaScript to run this app.</noscript>
 
-    <div id="root"></div>
 
-    <!--
 
-      This HTML file is a template.
 
-      If you open it directly in the browser, you will see an empty page.
 
-
 
-      You can add webfonts, meta tags, or analytics to this file.
 
-      The build step will place the bundled scripts into the <body> tag.
 
-
 
-      To begin the development, run `npm start` or `yarn start`.
 
-      To create a production bundle, use `npm run build` or `yarn build`.
 
-    -->
 
-  </body>
 
-</html>

二进制
example/public/logo192.png
查看文件


二进制
example/public/logo512.png
查看文件


+ 0 - 25
example/public/manifest.json
查看文件 

@@ -1,25 +0,0 @@
 
-{
 
-  "short_name": "React App",
 
-  "name": "Create React App Sample",
 
-  "icons": [
 
-    {
 
-      "src": "favicon.ico",
 
-      "sizes": "64x64 32x32 24x24 16x16",
 
-      "type": "image/x-icon"
 
-    },
 
-    {
 
-      "src": "logo192.png",
 
-      "type": "image/png",
 
-      "sizes": "192x192"
 
-    },
 
-    {
 
-      "src": "logo512.png",
 
-      "type": "image/png",
 
-      "sizes": "512x512"
 
-    }
 
-  ],
 
-  "start_url": ".",
 
-  "display": "standalone",
 
-  "theme_color": "#000000",
 
-  "background_color": "#ffffff"
 
-}

+ 0 - 2
example/public/robots.txt
查看文件 

@@ -1,2 +0,0 @@
 
-# https://www.robotstxt.org/robotstxt.html
 
-User-agent: *

+ 0 - 22
example/src/App.css
查看文件 

@@ -1,22 +0,0 @@
 
-.App {
 
-  text-align: center;
 
-}
 
-
 
-.App-logo {
 
-  height: 40vmin;
 
-}
 
-
 
-.App-header {
 
-  background-color: #282c34;
 
-  min-height: 100vh;
 
-  display: flex;
 
-  flex-direction: column;
 
-  align-items: center;
 
-  justify-content: center;
 
-  font-size: calc(10px + 2vmin);
 
-  color: white;
 
-}
 
-
 
-.App-link {
 
-  color: #09d3ac;
 
-}

+ 0 - 9
example/src/App.test.tsx
查看文件 

@@ -1,9 +0,0 @@
 
-import React from 'react';
 
-import ReactDOM from 'react-dom';
 
-import App from './App';
 
-
 
-it('renders without crashing', () => {
 
-  const div = document.createElement('div');
 
-  ReactDOM.render(<App />, div);
 
-  ReactDOM.unmountComponentAtNode(div);
 
-});

+ 0 - 56
example/src/App.tsx
查看文件 

@@ -1,56 +0,0 @@
 
-import React from 'react';
 
-import styled from 'styled-components';
 
-import { PhotoProvider, PhotoConsumer } from 'react-photo-view';
 
-import './App.css';
 
-import 'react-photo-view/dist/index.css';
 
-
 
-const Container = styled.div`
 
-  font-size: 32px;
 
-`;
 
-
 
-const ImageList = styled.div`
 
-  padding: 40px;
 
-  display: flex;
 
-  flex-wrap: wrap;
 
-  align-items: center;
 
-`;
 
-
 
-const SmallImage = styled.img`
 
-  margin-right: 20px;
 
-  margin-bottom: 20px;
 
-  width: 100px;
 
-  height: 100px;
 
-  cursor: pointer;
 
-`;
 
-
 
-class App extends React.Component {
 
-  state = {
 
-    photoImages: [
 
-      'images/1.png',
 
-      'images/2.jpg',
 
-      'images/3.jpg',
 
-      'images/4.jpg',
 
-      'images/5.jpg',
 
-    ],
 
-  };
 
-
 
-  render() {
 
-    const { photoImages } = this.state;
 
-
 
-    return (
 
-      <Container>
 
-        <PhotoProvider>
 
-          <ImageList>
 
-            {photoImages.map((item, index) => (
 
-              <PhotoConsumer key={index} src={item} intro={item}>
 
-                {index < 2 ? <SmallImage src={item} /> : undefined}
 
-              </PhotoConsumer>
 
-            ))}
 
-          </ImageList>
 
-        </PhotoProvider>
 
-      </Container>
 
-    );
 
-  }
 
-}
 
-
 
-export default App;

+ 0 - 13
example/src/index.css
查看文件 

@@ -1,13 +0,0 @@
 
-body {
 
-  margin: 0;
 
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 
-    sans-serif;
 
-  -webkit-font-smoothing: antialiased;
 
-  -moz-osx-font-smoothing: grayscale;
 
-}
 
-
 
-code {
 
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 
-    monospace;
 
-}

+ 0 - 12
example/src/index.tsx
查看文件 

@@ -1,12 +0,0 @@
 
-import React from 'react';
 
-import ReactDOM from 'react-dom';
 
-import './index.css';
 
-import App from './App';
 
-import * as serviceWorker from './serviceWorker';
 
-
 
-ReactDOM.render(<App />, document.getElementById('root'));
 
-
 
-// If you want your app to work offline and load faster, you can change
 
-// unregister() to register() below. Note this comes with some pitfalls.
 
-// Learn more about service workers: https://bit.ly/CRA-PWA
 
-serviceWorker.unregister();

+ 0 - 1
example/src/react-app-env.d.ts
查看文件 

@@ -1 +0,0 @@
 
-/// <reference types="react-scripts" />

+ 0 - 143
example/src/serviceWorker.ts
查看文件 

@@ -1,143 +0,0 @@
 
-// This optional code is used to register a service worker.
 
-// register() is not called by default.
 
-
 
-// This lets the app load faster on subsequent visits in production, and gives
 
-// it offline capabilities. However, it also means that developers (and users)
 
-// will only see deployed updates on subsequent visits to a page, after all the
 
-// existing tabs open on the page have been closed, since previously cached
 
-// resources are updated in the background.
 
-
 
-// To learn more about the benefits of this model and instructions on how to
 
-// opt-in, read https://bit.ly/CRA-PWA
 
-
 
-const isLocalhost = Boolean(
 
-  window.location.hostname === 'localhost' ||
 
-    // [::1] is the IPv6 localhost address.
 
-    window.location.hostname === '[::1]' ||
 
-    // 127.0.0.1/8 is considered localhost for IPv4.
 
-    window.location.hostname.match(
 
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 
-    )
 
-);
 
-
 
-type Config = {
 
-  onSuccess?: (registration: ServiceWorkerRegistration) => void;
 
-  onUpdate?: (registration: ServiceWorkerRegistration) => void;
 
-};
 
-
 
-export function register(config?: Config) {
 
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 
-    // The URL constructor is available in all browsers that support SW.
 
-    const publicUrl = new URL(
 
-      (process as { env: { [key: string]: string } }).env.PUBLIC_URL,
 
-      window.location.href
 
-    );
 
-    if (publicUrl.origin !== window.location.origin) {
 
-      // Our service worker won't work if PUBLIC_URL is on a different origin
 
-      // from what our page is served on. This might happen if a CDN is used to
 
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 
-      return;
 
-    }
 
-
 
-    window.addEventListener('load', () => {
 
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
-
 
-      if (isLocalhost) {
 
-        // This is running on localhost. Let's check if a service worker still exists or not.
 
-        checkValidServiceWorker(swUrl, config);
 
-
 
-        // Add some additional logging to localhost, pointing developers to the
 
-        // service worker/PWA documentation.
 
-        navigator.serviceWorker.ready.then(() => {
 
-          console.log(
 
-            'This web app is being served cache-first by a service ' +
 
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
 
-          );
 
-        });
 
-      } else {
 
-        // Is not localhost. Just register service worker
 
-        registerValidSW(swUrl, config);
 
-      }
 
-    });
 
-  }
 
-}
 
-
 
-function registerValidSW(swUrl: string, config?: Config) {
 
-  navigator.serviceWorker
 
-    .register(swUrl)
 
-    .then(registration => {
 
-      registration.onupdatefound = () => {
 
-        const installingWorker = registration.installing;
 
-        if (installingWorker == null) {
 
-          return;
 
-        }
 
-        installingWorker.onstatechange = () => {
 
-          if (installingWorker.state === 'installed') {
 
-            if (navigator.serviceWorker.controller) {
 
-              // At this point, the updated precached content has been fetched,
 
-              // but the previous service worker will still serve the older
 
-              // content until all client tabs are closed.
 
-              console.log(
 
-                'New content is available and will be used when all ' +
 
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 
-              );
 
-
 
-              // Execute callback
 
-              if (config && config.onUpdate) {
 
-                config.onUpdate(registration);
 
-              }
 
-            } else {
 
-              // At this point, everything has been precached.
 
-              // It's the perfect time to display a
 
-              // "Content is cached for offline use." message.
 
-              console.log('Content is cached for offline use.');
 
-
 
-              // Execute callback
 
-              if (config && config.onSuccess) {
 
-                config.onSuccess(registration);
 
-              }
 
-            }
 
-          }
 
-        };
 
-      };
 
-    })
 
-    .catch(error => {
 
-      console.error('Error during service worker registration:', error);
 
-    });
 
-}
 
-
 
-function checkValidServiceWorker(swUrl: string, config?: Config) {
 
-  // Check if the service worker can be found. If it can't reload the page.
 
-  fetch(swUrl)
 
-    .then(response => {
 
-      // Ensure service worker exists, and that we really are getting a JS file.
 
-      const contentType = response.headers.get('content-type');
 
-      if (
 
-        response.status === 404 ||
 
-        (contentType != null && contentType.indexOf('javascript') === -1)
 
-      ) {
 
-        // No service worker found. Probably a different app. Reload the page.
 
-        navigator.serviceWorker.ready.then(registration => {
 
-          registration.unregister().then(() => {
 
-            window.location.reload();
 
-          });
 
-        });
 
-      } else {
 
-        // Service worker found. Proceed as normal.
 
-        registerValidSW(swUrl, config);
 
-      }
 
-    })
 
-    .catch(() => {
 
-      console.log(
 
-        'No internet connection found. App is running in offline mode.'
 
-      );
 
-    });
 
-}
 
-
 
-export function unregister() {
 
-  if ('serviceWorker' in navigator) {
 
-    navigator.serviceWorker.ready.then(registration => {
 
-      registration.unregister();
 
-    });
 
-  }
 
-}

+ 55 - 0
example/stories/Index.stories.js
查看文件 

@@ -0,0 +1,55 @@
 
+import * as React from 'react';
 
+import styled from 'styled-components';
 
+import { storiesOf } from '@storybook/react';
 
+import { PhotoProvider, PhotoConsumer } from 'react-photo-view';
 
+import 'react-photo-view/dist/index.css';
 
+import image1 from './static/1.png';
 
+import image2 from './static/2.jpg';
 
+import image3 from './static/3.jpg';
 
+import image4 from './static/4.jpg';
 
+import image5 from './static/5.jpg';
 
+
 
+const photoImages = [image1, image2, image3, image4, image5];
 
+
 
+const ImageList = styled.div`
 
+  padding: 40px;
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+  align-items: center;
 
+`;
 
+
 
+const SmallImage = styled.img`
 
+  margin-right: 20px;
 
+  margin-bottom: 20px;
 
+  width: 100px;
 
+  height: 100px;
 
+  cursor: pointer;
 
+`;
 
+
 
+export default {
 
+  title: '基本操作',
 
+};
 
+
 
+storiesOf('基本操作', module)
 
+  .add('默认预览', () => (
 
+    <PhotoProvider>
 
+      <ImageList>
 
+        {photoImages.map((item, index) => (
 
+          <PhotoConsumer key={index} src={item} intro={item}>
 
+            <SmallImage src={item} />
 
+          </PhotoConsumer>
 
+        ))}
 
+      </ImageList>
 
+    </PhotoProvider>
 
+  ))
 
+  .add('只展示两张图片', () => (
 
+    <PhotoProvider>
 
+      <ImageList>
 
+        {photoImages.map((item, index) => (
 
+          <PhotoConsumer key={index} src={item} intro={item}>
 
+            {index < 2 ? <SmallImage src={item} /> : undefined}
 
+          </PhotoConsumer>
 
+        ))}
 
+      </ImageList>
 
+    </PhotoProvider>
 
+  ));

+ 0 - 0
example/public/images/1.png → example/stories/static/1.png
查看文件


+ 0 - 0
example/public/images/2.jpg → example/stories/static/2.jpg
查看文件


+ 0 - 0
example/public/images/3.jpg → example/stories/static/3.jpg
查看文件


+ 0 - 0
example/public/images/4.jpg → example/stories/static/4.jpg
查看文件


+ 0 - 0
example/public/images/5.jpg → example/stories/static/5.jpg
查看文件


+ 0 - 25
example/tsconfig.json
查看文件 

@@ -1,25 +0,0 @@
 
-{
 
-  "compilerOptions": {
 
-    "target": "es5",
 
-    "lib": [
 
-      "dom",
 
-      "dom.iterable",
 
-      "esnext"
 
-    ],
 
-    "allowJs": true,
 
-    "skipLibCheck": true,
 
-    "esModuleInterop": true,
 
-    "allowSyntheticDefaultImports": true,
 
-    "strict": true,
 
-    "forceConsistentCasingInFileNames": true,
 
-    "module": "esnext",
 
-    "moduleResolution": "node",
 
-    "resolveJsonModule": true,
 
-    "isolatedModules": true,
 
-    "noEmit": true,
 
-    "jsx": "react"
 
-  },
 
-  "include": [
 
-    "src"
 
-  ]
 
-}

文件差异内容过多而无法显示
+ 242 - 107
example/yarn.lock


部分文件因为文件数量过多而无法显示