Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add monorepo support to API * feat: add UI for monorepos * feat: add react-select * chore: remove package-lock.json * chore: add package-lock.json to .gitignore * chore: fix mege conflicts
- Loading branch information
Showing
15 changed files
with
345 additions
and
77 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 |
|---|---|---|
|
|
@@ -15,3 +15,4 @@ env: | |
| browser: true | ||
| node: true | ||
| jest: true | ||
| es6: true | ||
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 |
|---|---|---|
|
|
@@ -2,3 +2,4 @@ node_modules | |
| *.log | ||
| .cache | ||
| dist | ||
| package-lock.json | ||
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 |
|---|---|---|
| @@ -1,3 +1,12 @@ | ||
| const { getDependencies } = require('../../src/packageUtils.js'); | ||
| const { | ||
| getDependencies, | ||
| getMonoRepoDependencies, | ||
| } = require('../../src/packageUtils.js'); | ||
|
|
||
| module.exports = () => getDependencies(); | ||
| module.exports = async () => { | ||
| const [dependencies, monorepo] = await Promise.all([ | ||
| getDependencies(), | ||
| getMonoRepoDependencies(), | ||
| ]); | ||
| return { root: dependencies, monorepo }; | ||
| }; |
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 |
|---|---|---|
| @@ -1,31 +1,39 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { connect } from 'react-redux'; | ||
| import { Grid, Cell } from 'styled-css-grid'; | ||
|
|
||
| import { selectors } from '../ducks/dependencies'; | ||
| import DependenciesList from './DependenciesList'; | ||
| import Search from './Search'; | ||
| import { Grid } from './styled'; | ||
|
|
||
| const Dependencies = ({ dependencies, devDependencies }) => ( | ||
| <Grid col="2"> | ||
| <div> | ||
| <Grid columns={2}> | ||
| <Cell> | ||
| <h1>Dependencies</h1> | ||
| <DependenciesList dependencies={dependencies} /> | ||
| <h1>DevDependencies</h1> | ||
| <DependenciesList dependencies={devDependencies} /> | ||
| </div> | ||
| <div> | ||
| </Cell> | ||
| <Cell> | ||
| <Search /> | ||
| </div> | ||
| </Cell> | ||
| </Grid> | ||
| ); | ||
|
|
||
| Dependencies.propTypes = { | ||
| dependencies: PropTypes.array.isRequired, | ||
| devDependencies: PropTypes.array.isRequired, | ||
| packageName: PropTypes.string.isRequired, | ||
| }; | ||
|
|
||
| export default connect(state => ({ | ||
| dependencies: selectors.getDependencies(state.dependencies), | ||
| devDependencies: selectors.getDevDependencies(state.dependencies), | ||
| export default connect((state, ownProps) => ({ | ||
| dependencies: selectors.getDependencies( | ||
| state.dependencies, | ||
| ownProps.packageName, | ||
| ), | ||
| devDependencies: selectors.getDevDependencies( | ||
| state.dependencies, | ||
| ownProps.packageName, | ||
| ), | ||
| }))(Dependencies); |
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,55 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import Select from 'react-select'; | ||
| import { connect } from 'react-redux'; | ||
| import styled from 'styled-components'; | ||
| import { bindActionCreators } from 'redux'; | ||
|
|
||
| import Dependencies from './Dependencies'; | ||
| import { actions, selectors } from '../ducks/dependencies'; | ||
|
|
||
| const PackageSelect = styled(Select)` | ||
| width: 300px; | ||
| `; | ||
|
|
||
| const Packages = ({ | ||
| className, | ||
| selectedPackageName, | ||
| packageNames, | ||
| onSelectPackage, | ||
| }) => ( | ||
| <div> | ||
| <PackageSelect | ||
| className={className} | ||
| clearable={false} | ||
| value={selectedPackageName} | ||
| onChange={selectedOption => onSelectPackage(selectedOption.value)} | ||
| options={packageNames.map(name => ({ | ||
| value: name, | ||
| label: name || '<anonymous>', | ||
| }))} | ||
| /> | ||
| <Dependencies packageName={selectedPackageName} /> | ||
| </div> | ||
| ); | ||
|
|
||
| Packages.propTypes = { | ||
| className: PropTypes.string, | ||
| packageNames: PropTypes.arrayOf(PropTypes.string).isRequired, | ||
| selectedPackageName: PropTypes.string.isRequired, | ||
| onSelectPackage: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| export default connect( | ||
| state => ({ | ||
| selectedPackageName: selectors.getSelectedPackageName(state.dependencies), | ||
| packageNames: selectors.getPackageNames(state.dependencies), | ||
| }), | ||
| dispatch => | ||
| bindActionCreators( | ||
| { | ||
| onSelectPackage: actions.setSelectedPackage, | ||
| }, | ||
| dispatch, | ||
| ), | ||
| )(Packages); |
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 |
|---|---|---|
| @@ -1,46 +1,73 @@ | ||
| const initialState = { | ||
| packageDependencies: { | ||
| dependencies: {}, | ||
| devDependencies: {}, | ||
| selectedPackage: '', | ||
| root: { | ||
| dependencies: [], | ||
| devDependencies: [], | ||
| name: '', | ||
| }, | ||
| monorepo: [], | ||
| }; | ||
|
|
||
| export const FETCH_DEPENDENCIES = 'FETCH_DEPENDENCIES'; | ||
| export const SET_DEPENDENCIES = 'SET_DEPENDENCIES'; | ||
| export const SET_SELECTED_PACKAGE = 'SET_SELECTED_PACKAGE'; | ||
|
|
||
| export default (state = initialState, { type, ...payload }) => { | ||
| switch (type) { | ||
| case SET_SELECTED_PACKAGE: | ||
| return { | ||
| ...state, | ||
| selectedPackage: payload.name, | ||
| }; | ||
| case SET_DEPENDENCIES: | ||
| return { | ||
| ...state, | ||
| packageDependencies: { | ||
| devDependencies: payload.devDependencies, | ||
| dependencies: payload.dependencies, | ||
| selectedPackage: payload.root.name, | ||
| root: { | ||
| name: payload.root.name, | ||
| dependencies: arrayify(payload.root.dependencies, 'version'), | ||
| devDependencies: arrayify(payload.root.devDependencies, 'version'), | ||
| }, | ||
| monorepo: payload.monorepo.map(pkg => ({ | ||
| name: pkg.name, | ||
| dependencies: arrayify(pkg.dependencies, 'version'), | ||
| devDependencies: arrayify(pkg.devDependencies, 'version'), | ||
| })), | ||
| }; | ||
| default: | ||
| return state; | ||
| } | ||
| }; | ||
|
|
||
| function arrayify(object = {}, key) { | ||
| return Object.keys(object).map(name => ({ | ||
| name, | ||
| [key]: object[name], | ||
| })); | ||
| } | ||
|
|
||
| export const actions = { | ||
| fetchDependencies: () => ({ type: FETCH_DEPENDENCIES }), | ||
| setDependencies: ({ dependencies, devDependencies }) => ({ | ||
| setDependencies: ({ root, monorepo }) => ({ | ||
| type: SET_DEPENDENCIES, | ||
| dependencies, | ||
| devDependencies, | ||
| root, | ||
| monorepo, | ||
| }), | ||
| setSelectedPackage: name => ({ type: SET_SELECTED_PACKAGE, name }), | ||
| }; | ||
|
|
||
| export const selectors = { | ||
| getDependencies: ({ packageDependencies: { dependencies } }) => | ||
| Object.keys(dependencies).map(name => ({ | ||
| name, | ||
| version: dependencies[name], | ||
| })), | ||
| getDevDependencies: ({ packageDependencies: { devDependencies } }) => | ||
| Object.keys(devDependencies).map(name => ({ | ||
| name, | ||
| version: devDependencies[name], | ||
| })), | ||
| getSelectedPackageName: ({ selectedPackage }) => selectedPackage, | ||
| getPackageNames: ({ monorepo, root }) => [ | ||
| root.name, | ||
| ...monorepo.map(({ name }) => name), | ||
| ], | ||
| getDependencies: ({ monorepo, root }, packageName) => | ||
| root.name === packageName | ||
| ? root.dependencies | ||
| : monorepo.find(({ name }) => name === packageName).dependencies, | ||
| getDevDependencies: ({ monorepo, root }, packageName) => | ||
| root.name === packageName | ||
| ? root.devDependencies | ||
| : monorepo.find(({ name }) => name === packageName).devDependencies, | ||
| }; |
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
Oops, something went wrong.