-
Notifications
You must be signed in to change notification settings - Fork 67
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #59 from conveyal/add-storybook
Add storybook for improved testing/debugging
- Loading branch information
Showing
16 changed files
with
11,231 additions
and
1,983 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| { | ||
| "presets": [ | ||
| [ | ||
| "@babel/preset-env", { | ||
| "useBuiltIns": "entry", | ||
| "corejs": 2 | ||
| } | ||
| ], | ||
| "@babel/preset-react" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,6 +4,7 @@ lib-cov | |
| *.csv | ||
| *.dat | ||
| *.out | ||
| out* | ||
| *.pid | ||
| *.gz | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| const path = require('path') | ||
| // your app's webpack.config.js | ||
| const custom = require('./webpack.config.js'); | ||
|
|
||
| module.exports = { | ||
| stories: ['../stories/*.stories.js'], | ||
| addons: [ | ||
| '@storybook/addon-links', | ||
| '@storybook/addon-essentials', | ||
| '@storybook/preset-create-react-app' | ||
| ], | ||
| // Ensures that, when running storybook, webpack rules (loaders for css, file, | ||
| // etc.) from the custom config are used. | ||
| webpackFinal: (config) => { | ||
| return { ...config, module: { ...config.module, rules: custom.module.rules } }; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| const path = require('path'); | ||
| const webpack = require('webpack'); | ||
|
|
||
| /** | ||
| * This is a (mostly) auto-generated webpack config that storybook created when | ||
| * initializing the storybook. | ||
| */ | ||
|
|
||
| const TerserPlugin = require('terser-webpack-plugin'); | ||
|
|
||
| module.exports = { | ||
| mode: 'development', | ||
| entry: '../lib/transitive.js', | ||
|
|
||
| output: { | ||
| path: path.resolve(__dirname, 'build'), | ||
| }, | ||
|
|
||
| plugins: [new webpack.ProgressPlugin()], | ||
|
|
||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.(js|jsx)$/, | ||
| include: [path.resolve(__dirname, '../lib'), path.resolve(__dirname, '../stories')], | ||
| loader: 'babel-loader', | ||
| }, | ||
| { | ||
| test: /\.(png|jpe?g|gif)$/i, | ||
| use: [ | ||
| { | ||
| loader: 'file-loader', | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| test: /.css$/, | ||
|
|
||
| use: [ | ||
| { | ||
| loader: 'style-loader', | ||
| }, | ||
| { | ||
| loader: 'css-loader', | ||
|
|
||
| options: { | ||
| sourceMap: true, | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
|
|
||
| optimization: { | ||
| minimizer: [new TerserPlugin()], | ||
|
|
||
| splitChunks: { | ||
| cacheGroups: { | ||
| vendors: { | ||
| priority: -10, | ||
| test: /[\\/]node_modules[\\/]/, | ||
| }, | ||
| }, | ||
|
|
||
| chunks: 'async', | ||
| minChunks: 1, | ||
| minSize: 30000, | ||
| name: false, | ||
| }, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import {TransitiveMap} from './TransitiveMap' | ||
|
|
||
| const companies = [ | ||
| { | ||
| id: 'RAZOR', | ||
| label: 'Razor', | ||
| modes: 'MICROMOBILITY_RENT' | ||
| }, | ||
| { | ||
| id: 'SHARED', | ||
| label: 'Shared', | ||
| modes: 'MICROMOBILITY_RENT' | ||
| } | ||
| ] | ||
|
|
||
| export default { | ||
| title: 'Example/Transitive' | ||
| } | ||
|
|
||
| const Template = (args) => TransitiveMap(args) | ||
|
|
||
| export const Itinerary = Template.bind({}) | ||
| Itinerary.args = { | ||
| companies, | ||
| itinerary: require('./data/walk-interlined-transit-walk-itinerary.json'), | ||
| styles: undefined | ||
| } | ||
|
|
||
| export const Profile = Template.bind({}) | ||
| Profile.args = { | ||
| center: [38.885, -77.0369], | ||
| styles: undefined, | ||
| transitiveData: require('./data/profile.json'), | ||
| zoom: 14 | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import BaseMap from '@opentripplanner/base-map' | ||
| import {itineraryToTransitive} from '@opentripplanner/core-utils/lib/map' | ||
| import React from 'react' | ||
| import styled from 'styled-components' | ||
|
|
||
| import TransitiveOverlay from './transitive-overlay' | ||
|
|
||
| import '../node_modules/leaflet/dist/leaflet.css' | ||
|
|
||
| require('./leaflet-canvas-layer') | ||
|
|
||
| const MapContainer = styled.div` | ||
| height: 800px; | ||
| width: 100%; | ||
| .map { | ||
| height: 800px; | ||
| width: 100%; | ||
| } | ||
| * { | ||
| box-sizing: unset; | ||
| } | ||
| ` | ||
|
|
||
| /** | ||
| * Primary UI component for user interaction | ||
| */ | ||
| export const TransitiveMap = ({ | ||
| center = [45.506, -122.68302], | ||
| companies = [], | ||
| itinerary, | ||
| styles, | ||
| // If no transitiveData is provided, default to generating from itinerary. | ||
| transitiveData = itineraryToTransitive(itinerary, companies), | ||
| zoom = 15 | ||
| }) => { | ||
| return ( | ||
| <MapContainer> | ||
| <BaseMap | ||
| // TODO: Determine center/zoom based on input data? | ||
| center={center} | ||
| zoom={zoom} | ||
| > | ||
| <TransitiveOverlay | ||
| transitiveData={transitiveData} | ||
| visible | ||
| /> | ||
| </BaseMap> | ||
| </MapContainer> | ||
| ) | ||
| } |
Large diffs are not rendered by default.
Oops, something went wrong.
Oops, something went wrong.