[WIP] In-progress grouping of components #46
Conversation
jvhoven
force-pushed
the
improvement/restructure
branch
from
f089fae
to
e8724bb
Compare
rollup-plugin-typescript2Author: @ezolenko Description: Seamless integration between Rollup and TypeScript. Now with errors. Homepage: https://github.com/ezolenko/rollup-plugin-typescript2
rollup-plugin-size-snapshotAuthor: Bogdan Chadkin Description: [travis-img]: https://travis-ci.org/TrySound/rollup-plugin-size-snapshot.svg [travis]: https://travis-ci.org/TrySound/rollup-plugin-size-snapshot Homepage: http://npmjs.com/package/rollup-plugin-size-snapshot
|
| Created | over 2 years ago |
| Last Updated | about 1 month ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 16 |
| Direct Dependencies | @types/fs-extra, colorette, fs-extra, globby and is-plain-object |
| Keywords | rollup, rollup-plugin, copy, cp, asset, assets, file, files, folder, folders and glob |
README
rollup-plugin-copy
Copy files and folders, with glob support.
Installation
# yarn
yarn add rollup-plugin-copy -D
# npm
npm install rollup-plugin-copy -DUsage
// rollup.config.js
import copy from 'rollup-plugin-copy'
export default {
input: 'src/index.js',
output: {
file: 'dist/app.js',
format: 'cjs'
},
plugins: [
copy({
targets: [
{ src: 'src/index.html', dest: 'dist/public' },
{ src: ['assets/fonts/arial.woff', 'assets/fonts/arial.woff2'], dest: 'dist/public/fonts' },
{ src: 'assets/images/**/*', dest: 'dist/public/images' }
]
})
]
}Configuration
There are some useful options:
targets
Type: Array | Default: []
Array of targets to copy. A target is an object with properties:
- src (
stringArray): Path or glob of what to copy - dest (
stringArray): One or more destinations where to copy - rename (
stringFunction): Change destination file or folder name
Each object should have src and dest properties, rename is optional. globby is used inside, check it for glob pattern examples.
File
copy({
targets: [{ src: 'src/index.html', dest: 'dist/public' }]
})Folder
copy({
targets: [{ src: 'assets/images', dest: 'dist/public' }]
})Glob
copy({
targets: [{ src: 'assets/*', dest: 'dist/public' }]
})Glob: multiple items
copy({
targets: [{ src: ['src/index.html', 'src/styles.css', 'assets/images'], dest: 'dist/public' }]
})Glob: negated patterns
copy({
targets: [{ src: ['assets/images/**/*', '!**/*.gif'], dest: 'dist/public/images' }]
})Multiple targets
copy({
targets: [
{ src: 'src/index.html', dest: 'dist/public' },
{ src: 'assets/images/**/*', dest: 'dist/public/images' }
]
})Multiple destinations
copy({
targets: [{ src: 'src/index.html', dest: ['dist/public', 'build/public'] }]
})Rename with a string
copy({
targets: [{ src: 'src/app.html', dest: 'dist/public', rename: 'index.html' }]
})Rename with a function
copy({
targets: [{
src: 'assets/docs/*',
dest: 'dist/public/docs',
rename: (name, extension) => `${name}-v1.${extension}`
}]
})verbose
Type: boolean | Default: false
Output copied items to console.
copy({
targets: [{ src: 'assets/*', dest: 'dist/public' }],
verbose: true
})hook
Type: string | Default: buildEnd
Rollup hook the plugin should use. By default, plugin runs when rollup has finished bundling, before bundle is written to disk.
copy({
targets: [{ src: 'assets/*', dest: 'dist/public' }],
hook: 'writeBundle'
})copyOnce
Type: boolean | Default: false
Copy items once. Useful in watch mode.
copy({
targets: [{ src: 'assets/*', dest: 'dist/public' }],
copyOnce: true
})All other options are passed to packages, used inside:
Original Author
License
MIT
rollup-plugin-auto-external
Author: Steven Benisek
Description: Rollup plugin to automatically exclude package.json dependencies and peerDependencies from your bundle
Homepage: https://github.com/stevenbenisek/rollup-plugin-auto-external
| Created | about 2 years ago |
| Last Updated | 6 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 6 |
| Direct Dependencies | builtins, read-pkg, safe-resolve and semver |
| Keywords | rollup, plugin, external, auto, dependencies and peerDependencies |
rollup
Author: Rich Harris
Description: Next-generation ES module bundler
Homepage: https://github.com/rollup/rollup
| Created | over 4 years ago |
| Last Updated | about 10 hours ago |
| License | MIT |
| Maintainers | 5 |
| Releases | 352 |
| Direct Dependencies | @types/estree, @types/node and acorn |
| Keywords | modules, bundler, bundling, es6 and optimizer |
README
Rollup
Overview
Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the standardized ES module format for code, instead of previous idiosyncratic solutions such as CommonJS and AMD. ES modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries. Rollup can optimize ES modules for faster native loading in modern browsers, or output a legacy module format allowing ES module workflows today.
Quick Start Guide
Install with npm install --global rollup. Rollup can be used either through a command line interface with an optional configuration file, or else through its JavaScript API. Run rollup --help to see the available options and parameters. The starter project templates, rollup-starter-lib and rollup-starter-app, demonstrate common configuration options, and more detailed instructions are available throughout the user guide.
Commands
These commands assume the entry point to your application is named main.js, and that you'd like all imports compiled into a single file named bundle.js.
For browsers:
# compile to a <script> containing a self-executing function
$ rollup main.js --format iife --name "myBundle" --file bundle.jsFor Node.js:
# compile to a CommonJS module
$ rollup main.js --format cjs --file bundle.jsFor both browsers and Node.js:
# UMD format requires a bundle name
$ rollup main.js --format umd --name "myBundle" --file bundle.jsWhy
Developing software is usually easier if you break your project into smaller separate pieces, since that often removes unexpected interactions and dramatically reduces the complexity of the problems you'll need to solve, and simply writing smaller projects in the first place isn't necessarily the answer. Unfortunately, JavaScript has not historically included this capability as a core feature in the language.
This finally changed with ES modules support in JavaScript, which provides a syntax for importing and exporting functions and data so they can be shared between separate scripts. The specification is now implemented in all major browsers and in Node.js behind the --experimental-modules flag for ".mjs" files. Rollup allows you to write your code using this module system, either outputting optimized ES modules for use in these native environments, or compiling it back down to existing supported formats such as CommonJS modules, AMD modules, and IIFE-style scripts. This means that you get to write future-proof code, and you also get the tremendous benefits of...
Tree Shaking
In addition to enabling the use of ES modules, Rollup also statically analyzes and optimizes the code you are importing, and will exclude anything that isn't actually used. This allows you to build on top of existing tools and modules without adding extra dependencies or bloating the size of your project.
For example, with CommonJS, the entire tool or library must be imported.
// import the entire utils object with CommonJS
var utils = require( 'utils' );
var query = 'Rollup';
// use the ajax method of the utils object
utils.ajax( 'https://api.example.com?search=' + query ).then( handleResponse );But with ES modules, instead of importing the whole utils object, we can just import the one ajax function we need:
// import the ajax function with an ES import statement
import { ajax } from 'utils';
var query = 'Rollup';
// call the ajax function
ajax( 'https://api.example.com?search=' + query ).then( handleResponse );Because Rollup includes the bare minimum, it results in lighter, faster, and less complicated libraries and applications. Since this approach is based on explicit import and export statements, it is vastly more effective than simply running an automated minifier to detect unused variables in the compiled output code.
Compatibility
Importing CommonJS
Rollup can import existing CommonJS modules through a plugin.
Publishing ES Modules
To make sure your ES modules are immediately usable by tools that work with CommonJS such as Node.js and webpack, you can use Rollup to compile to UMD or CommonJS format, and then point to that compiled version with the main property in your package.json file. If your package.json file also has a module field, ES-module-aware tools like Rollup and webpack 2 will import the ES module version directly.
Contributors
This project exists thanks to all the people who contribute. [Contribute].
Backers
Thank you to all our backers! 🙏 [Become a backer]
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
License
fs-extra
Author: JP Richardson
Description: fs-extra contains methods that aren't included in the vanilla Node.js fs package. Such as mkdir -p, cp -r, and rm -rf.
Homepage: https://github.com/jprichardson/node-fs-extra
| Created | almost 8 years ago |
| Last Updated | about 1 month ago |
| License | MIT |
| Maintainers | 3 |
| Releases | 86 |
| Direct Dependencies | graceful-fs, jsonfile and universalify |
| Keywords | fs, file, file system, copy, directory, extra, mkdirp, mkdir, mkdirs, recursive, json, read, write, extra, delete, remove, touch, create, text, output and move |
README
Node.js: fs-extra
fs-extra adds file system methods that aren't included in the native fs module and adds promise support to the fs methods. It also uses graceful-fs to prevent EMFILE errors. It should be a drop in replacement for fs.
Why?
I got tired of including mkdirp, rimraf, and ncp in most of my projects.
Installation
npm install fs-extra
Usage
fs-extra is a drop in replacement for native fs. All methods in fs are attached to fs-extra. All fs methods return promises if the callback isn't passed.
You don't ever need to include the original fs module again:
const fs = require('fs') // this is no longer necessaryyou can now do this:
const fs = require('fs-extra')or if you prefer to make it clear that you're using fs-extra and not fs, you may want
to name your fs variable fse like so:
const fse = require('fs-extra')you can also keep both, but it's redundant:
const fs = require('fs')
const fse = require('fs-extra')Sync vs Async vs Async/Await
Most methods are async by default. All async methods will return a promise if the callback isn't passed.
Sync methods on the other hand will throw if an error occurs.
Also Async/Await will throw an error if one occurs.
Example:
const fs = require('fs-extra')
// Async with promises:
fs.copy('/tmp/myfile', '/tmp/mynewfile')
.then(() => console.log('success!'))
.catch(err => console.error(err))
// Async with callbacks:
fs.copy('/tmp/myfile', '/tmp/mynewfile', err => {
if (err) return console.error(err)
console.log('success!')
})
// Sync:
try {
fs.copySync('/tmp/myfile', '/tmp/mynewfile')
console.log('success!')
} catch (err) {
console.error(err)
}
// Async/Await:
async function copyFiles () {
try {
await fs.copy('/tmp/myfile', '/tmp/mynewfile')
console.log('success!')
} catch (err) {
console.error(err)
}
}
copyFiles()Methods
Async
- copy
- emptyDir
- ensureFile
- ensureDir
- ensureLink
- ensureSymlink
- mkdirp
- mkdirs
- move
- outputFile
- outputJson
- pathExists
- readJson
- remove
- writeJson
Sync
- copySync
- emptyDirSync
- ensureFileSync
- ensureDirSync
- ensureLinkSync
- ensureSymlinkSync
- mkdirpSync
- mkdirsSync
- moveSync
- outputFileSync
- outputJsonSync
- pathExistsSync
- readJsonSync
- removeSync
- writeJsonSync
NOTE: You can still use the native Node.js methods. They are promisified and copied over to fs-extra. See notes on fs.read() & fs.write()
What happened to walk() and walkSync()?
They were removed from fs-extra in v2.0.0. If you need the functionality, walk and walkSync are available as separate packages, klaw and klaw-sync.
Third Party
TypeScript
If you like TypeScript, you can use fs-extra with it: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/fs-extra
File / Directory Watching
If you want to watch for changes to files or directories, then you should use chokidar.
Obtain Filesystem (Devices, Partitions) Information
fs-filesystem allows you to read the state of the filesystem of the host on which it is run. It returns information about both the devices and the partitions (volumes) of the system.
Misc.
- fs-extra-debug - Send your fs-extra calls to debug.
- mfs - Monitor your fs-extra calls.
Hacking on fs-extra
Wanna hack on fs-extra? Great! Your help is needed! fs-extra is one of the most depended upon Node.js packages. This project
uses JavaScript Standard Style - if the name or style choices bother you,
you're gonna have to get over it :) If standard is good enough for npm, it's good enough for fs-extra.
What's needed?
- First, take a look at existing issues. Those are probably going to be where the priority lies.
- More tests for edge cases. Specifically on different platforms. There can never be enough tests.
- Improve test coverage. See coveralls output for more info.
Note: If you make any big changes, you should definitely file an issue for discussion first.
Running the Test Suite
fs-extra contains hundreds of tests.
npm run lint: runs the linter (standard)npm run unit: runs the unit testsnpm test: runs both the linter and the tests
Windows
If you run the tests on the Windows and receive a lot of symbolic link EPERM permission errors, it's
because on Windows you need elevated privilege to create symbolic links. You can add this to your Windows's
account by following the instructions here: http://superuser.com/questions/104845/permission-to-make-symbolic-links-in-windows-7
However, I didn't have much luck doing this.
Since I develop on Mac OS X, I use VMWare Fusion for Windows testing. I create a shared folder that I map to a drive on Windows.
I open the Node.js command prompt and run as Administrator. I then map the network drive running the following command:
net use z: "\\vmware-host\Shared Folders"
I can then navigate to my fs-extra directory and run the tests.
Naming
I put a lot of thought into the naming of these functions. Inspired by @coolaj86's request. So he deserves much of the credit for raising the issue. See discussion(s) here:
- Merge with fs.extra and mkdirp jprichardson/node-fs-extra#2
- other fs modules to merge in flatiron/utile#11
- join forces with fs.extra, fs-extra, and others? ryanmcgrath/wrench-js#29
- https://github.com/substack/node-mkdirp/issues/17
First, I believe that in as many cases as possible, the Node.js naming schemes should be chosen. However, there are problems with the Node.js own naming schemes.
For example, fs.readFile() and fs.readdir(): the F is capitalized in File and the d is not capitalized in dir. Perhaps a bit pedantic, but they should still be consistent. Also, Node.js has chosen a lot of POSIX naming schemes, which I believe is great. See: fs.mkdir(), fs.rmdir(), fs.chown(), etc.
We have a dilemma though. How do you consistently name methods that perform the following POSIX commands: cp, cp -r, mkdir -p, and rm -rf?
My perspective: when in doubt, err on the side of simplicity. A directory is just a hierarchical grouping of directories and files. Consider that for a moment. So when you want to copy it or remove it, in most cases you'll want to copy or remove all of its contents. When you want to create a directory, if the directory that it's suppose to be contained in does not exist, then in most cases you'll want to create that too.
So, if you want to remove a file or a directory regardless of whether it has contents, just call fs.remove(path). If you want to copy a file or a directory whether it has contents, just call fs.copy(source, destination). If you want to create a directory regardless of whether its parent directories exist, just call fs.mkdirs(path) or fs.mkdirp(path).
Credit
fs-extra wouldn't be possible without using the modules from the following authors:
License
Licensed under MIT
Copyright (c) 2011-2017 JP Richardson
cssnano
Author: Ben Briggs
Description: A modular minifier, built on top of the PostCSS ecosystem.
Homepage: https://github.com/cssnano/cssnano
| Created | over 4 years ago |
| Last Updated | 7 months ago |
| License | MIT |
| Maintainers | 5 |
| Releases | 76 |
| Direct Dependencies | cosmiconfig, cssnano-preset-default, is-resolvable and postcss |
| Keywords | css, compress, minify, optimise, optimisation, postcss and postcss-plugin |
README
cssnano
For documentation, please see the following links:
- Repository: https://github.com/cssnano/cssnano
- Website: http://cssnano.co
@types/react-router-dom
Author: Unknown
Description: TypeScript definitions for React Router
Homepage: http://npmjs.com/package/@types/react-router-dom
| Created | over 2 years ago |
| Last Updated | 7 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 23 |
| Direct Dependencies | @types/history, @types/react and @types/react-router |
README
Installation
npm install --save @types/react-router-dom
Summary
This package contains type definitions for React Router (https://github.com/ReactTraining/react-router).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-router-dom
Additional Details
- Last updated: Thu, 22 Aug 2019 04:31:06 GMT
- Dependencies: @types/react-router, @types/react, @types/history
- Global values: none
Credits
These definitions were written by Huy Nguyen https://github.com/huy-nguyen, Philip Jackson https://github.com/p-jackson, John Reilly https://github.com/johnnyreilly, Sebastian Silbermann https://github.com/eps1lon, and Daniel Nixon https://github.com/danielnixon.
@types/lodash.take
Author: Unknown
Description: TypeScript definitions for lodash.take
Homepage: http://npmjs.com/package/@types/lodash.take
| Created | over 2 years ago |
| Last Updated | 3 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 7 |
| Direct Dependencies | @types/lodash |
README
Installation
npm install --save @types/lodash.take
Summary
This package contains type definitions for lodash.take ( https://lodash.com ).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/lodash.take
Additional Details
- Last updated: Mon, 04 Mar 2019 23:26:48 GMT
- Dependencies: @types/lodash
- Global values: none
Credits
These definitions were written by Brian Zengel https://github.com/bczengel, Ilya Mochalov https://github.com/chrootsu, Stepan Mikhaylyuk https://github.com/stepancar.
@types/lodash.uniqueid
Author: Unknown
Description: TypeScript definitions for lodash.uniqueId
Homepage: http://npmjs.com/package/@types/lodash.uniqueid
| Created | over 2 years ago |
| Last Updated | 3 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 7 |
| Direct Dependencies | @types/lodash |
README
Installation
npm install --save @types/lodash.uniqueid
Summary
This package contains type definitions for lodash.uniqueId ( https://lodash.com ).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/lodash.uniqueid
Additional Details
- Last updated: Mon, 04 Mar 2019 23:26:51 GMT
- Dependencies: @types/lodash
- Global values: none
Credits
These definitions were written by Brian Zengel https://github.com/bczengel, Ilya Mochalov https://github.com/chrootsu, Stepan Mikhaylyuk https://github.com/stepancar.
@types/storybook__addon-actions
Author: Unknown
Description: TypeScript definitions for @storybook/addon-actions
Homepage: http://npmjs.com/package/@types/storybook__addon-actions
| Created | about 2 years ago |
| Last Updated | 3 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 8 |
| Direct Dependencies |
README
Installation
npm install --save @types/storybook__addon-actions
Summary
This package contains type definitions for @storybook/addon-actions ( https://github.com/storybookjs/storybook ).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/storybook__addon-actions
Additional Details
- Last updated: Wed, 05 Jun 2019 22:03:02 GMT
- Dependencies: none
- Global values: none
Credits
These definitions were written by Joscha Feth https://github.com/joscha, June https://github.com/jicjjang.
@types/react-dom
Author: Unknown
Description: TypeScript definitions for React (react-dom)
Homepage: http://npmjs.com/package/@types/react-dom
| Created | over 3 years ago |
| Last Updated | 10 days ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 49 |
| Direct Dependencies | @types/react |
README
Installation
npm install --save @types/react-dom
Summary
This package contains type definitions for React (react-dom) (http://facebook.github.io/react/).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-dom
Additional Details
- Last updated: Mon, 19 Aug 2019 20:08:04 GMT
- Dependencies: @types/react
- Global values: ReactDOM, ReactDOMNodeStream, ReactDOMServer
Credits
These definitions were written by Asana https://asana.com, AssureSign http://www.assuresign.com, Microsoft https://microsoft.com, MartynasZilinskas https://github.com/MartynasZilinskas, Josh Rutherford https://github.com/theruther4d, and Jessica Franco https://github.com/Jessidhia.
@types/enzyme-to-json
Author: Unknown
Description: TypeScript definitions for enzyme-to-json
Homepage: http://npmjs.com/package/@types/enzyme-to-json
| Created | about 2 years ago |
| Last Updated | 3 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 4 |
| Direct Dependencies | @types/enzyme |
README
Installation
npm install --save @types/enzyme-to-json
Summary
This package contains type definitions for enzyme-to-json ( https://github.com/adriantoine/enzyme-to-json#readme ).
Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/enzyme-to-json
Additional Details
- Last updated: Sat, 23 Feb 2019 00:16:57 GMT
- Dependencies: @types/enzyme
- Global values: none
Credits
These definitions were written by Joscha Feth https://github.com/joscha.
reactstrap
Author: Unknown
Description: React Bootstrap 4 components
Homepage: https://github.com/reactstrap/reactstrap#readme
| Created | over 3 years ago |
| Last Updated | about 2 months ago |
| License | MIT |
| Maintainers | 3 |
| Releases | 110 |
| Direct Dependencies | @babel/runtime, classnames, lodash.isfunction, lodash.isobject, lodash.tonumber, prop-types, react-lifecycles-compat, react-popper and react-transition-group |
| Keywords | reactstrap, bootstrap, react, component, components, react-component and ui |
react-router-dom
Author: Unknown
Description: DOM bindings for React Router
Homepage: https://github.com/ReactTraining/react-router#readme
| Created | over 2 years ago |
| Last Updated | 13 days ago |
| License | MIT |
| Maintainers | 2 |
| Releases | 34 |
| Direct Dependencies | @babel/runtime, history, loose-envify, prop-types, react-router, tiny-invariant and tiny-warning |
| Keywords | react, router, route, routing, history and link |
README
react-router-dom
DOM bindings for React Router.
Installation
Using npm:
$ npm install --save react-router-dom
Then with a module bundler like webpack, use as you would anything else:
// using ES6 modules
import { BrowserRouter, Route, Link } from "react-router-dom";
// using CommonJS modules
const BrowserRouter = require("react-router-dom").BrowserRouter;
const Route = require("react-router-dom").Route;
const Link = require("react-router-dom").Link;The UMD build is also available on unpkg:
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>You can find the library on window.ReactRouterDOM.
Issues
If you find a bug, please file an issue on our issue tracker on GitHub.
Credits
React Router is built and maintained by React Training.
material-design-icons
Author: Material Design Authors
Description: Material Design icons by Google
Homepage: https://github.com/google/material-design-icons
| Created | almost 5 years ago |
| Last Updated | over 1 year ago |
| License | Apache-2.0 |
| Maintainers | 5 |
| Releases | 12 |
| Keywords | icons, material, material-design and google |
README
Material design icons
Material design icons are the official icon set from Google that are designed under the material design guidelines.
3.0.1 Update
- Changed license in package.json.
- Added missing device symbol sprites.
3.0.0 Update
License change to Apache 2.0!
Getting Started
Read the developer guide on how to use the material design icons in your project.
Using a font collection
The iconfont folder contains pre-generated font files that can be included in a project. This is especially convenient for the web; however, it is generally better to link to the web font hosted on Google Fonts:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">Read more in the font portion of our full developer guide.
Using symbols and sprites
The css-sprite and svg-sprite folders contain pre-generated sprite sheets, as well as svg symbols that can be <use>d more directly and with fewer constraints. Instructions for using them are in the sprites documentation.
Polymer icons
If you wish to use the icon set with Polymer, we recommend consuming them via the <iron-icons> element (<core-icons> in v0.5).
License
We have made these icons available for you to incorporate them into your products under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in your products.
We'd love attribution in your app's about screen, but it's not required. The only thing we ask is that you not re-sell these icons.
lodash.uniqueid
Author: John-David Dalton
Description: The lodash method `_.uniqueId` exported as a module.
Homepage: https://lodash.com/
| Created | almost 6 years ago |
| Last Updated | over 2 years ago |
| License | MIT |
| Maintainers | 2 |
| Releases | 14 |
| Keywords | lodash-modularized and uniqueid |
README
lodash.uniqueid v4.0.1
The lodash method _.uniqueId exported as a Node.js module.
Installation
Using npm:
$ {sudo -H} npm i -g npm
$ npm i --save lodash.uniqueidIn Node.js:
var uniqueId = require('lodash.uniqueid');See the documentation or package source for more details.
lodash.take
Author: John-David Dalton
Description: The lodash method `_.take` exported as a module.
Homepage: https://lodash.com/
| Created | over 4 years ago |
| Last Updated | almost 3 years ago |
| License | MIT |
| Maintainers | 2 |
| Releases | 8 |
| Keywords | lodash-modularized and take |
README
lodash.take v4.1.1
The lodash method _.take exported as a Node.js module.
Installation
Using npm:
$ {sudo -H} npm i -g npm
$ npm i --save lodash.takeIn Node.js:
var take = require('lodash.take');See the documentation or package source for more details.
classnames
Author: Jed Watson
Description: A simple utility for conditionally joining classNames together
Homepage: https://github.com/JedWatson/classnames#readme
| Created | almost 5 years ago |
| Last Updated | 8 months ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 23 |
| Keywords | react, css, classes, classname, classnames, util and utility |
README
Classnames
A simple JavaScript utility for conditionally joining classNames together.
Install with npm, Bower, or Yarn:
npm:
npm install classnames --saveBower:
bower install classnames --saveYarn (note that yarn add automatically saves the package to the dependencies in package.json):
yarn add classnamesUse with Node.js, Browserify, or webpack:
var classNames = require('classnames');
classNames('foo', 'bar'); // => 'foo bar'Alternatively, you can simply include index.js on your page with a standalone <script> tag and it will export a global classNames method, or define the module if you are using RequireJS.
Project philosophy
We take the stability and performance of this package seriously, because it is run millions of times a day in browsers all around the world. Updates are thoroughly reviewed for performance impacts before being released, and we have a comprehensive test suite.
Classnames follows the SemVer standard for versioning.
There is also a Changelog.
Usage
The classNames function takes any number of arguments which can be a string or object.
The argument 'foo' is short for { foo: true }. If the value associated with a given key is falsy, that key won't be included in the output.
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'Arrays will be recursively flattened as per the rules above:
var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'Dynamic class names with ES2015
If you're in an environment that supports computed keys (available in ES2015 and Babel) you can use dynamic class names:
let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true });Usage with React.js
This package is the official replacement for classSet, which was originally shipped in the React.js Addons bundle.
One of its primary use cases is to make dynamic and conditional className props simpler to work with (especially more so than conditional string manipulation). So where you may have the following code to generate a className prop for a <button> in React:
var Button = React.createClass({
// ...
render () {
var btnClass = 'btn';
if (this.state.isPressed) btnClass += ' btn-pressed';
else if (this.state.isHovered) btnClass += ' btn-over';
return <button className={btnClass}>{this.props.label}</button>;
}
});You can express the conditional classes more simply as an object:
var classNames = require('classnames');
var Button = React.createClass({
// ...
render () {
var btnClass = classNames({
btn: true,
'btn-pressed': this.state.isPressed,
'btn-over': !this.state.isPressed && this.state.isHovered
});
return <button className={btnClass}>{this.props.label}</button>;
}
});Because you can mix together object, array and string arguments, supporting optional className props is also simpler as only truthy arguments get included in the result:
var btnClass = classNames('btn', this.props.className, {
'btn-pressed': this.state.isPressed,
'btn-over': !this.state.isPressed && this.state.isHovered
});Alternate dedupe version
There is an alternate version of classNames available which correctly dedupes classes and ensures that falsy classes specified in later arguments are excluded from the result set.
This version is slower (about 5x) so it is offered as an opt-in.
To use the dedupe version with Node.js, Browserify, or webpack:
var classNames = require('classnames/dedupe');
classNames('foo', 'foo', 'bar'); // => 'foo bar'
classNames('foo', { foo: false, bar: true }); // => 'bar'For standalone (global / AMD) use, include dedupe.js in a <script> tag on your page.
Alternate bind version (for css-modules)
If you are using css-modules, or a similar approach to abstract class "names" and the real className values that are actually output to the DOM, you may want to use the bind variant.
Note that in ES2015 environments, it may be better to use the "dynamic class names" approach documented above.
var classNames = require('classnames/bind');
var styles = {
foo: 'abc',
bar: 'def',
baz: 'xyz'
};
var cx = classNames.bind(styles);
var className = cx('foo', ['bar'], { baz: true }); // => "abc def xyz"Real-world example:
/* components/submit-button.js */
import { Component } from 'react';
import classNames from 'classnames/bind';
import styles from './submit-button.css';
let cx = classNames.bind(styles);
export default class SubmitButton extends Component {
render () {
let text = this.props.store.submissionInProgress ? 'Processing...' : 'Submit';
let className = cx({
base: true,
inProgress: this.props.store.submissionInProgress,
error: this.props.store.errorOccurred,
disabled: this.props.form.valid,
});
return <button className={className}>{text}</button>;
}
};Polyfills needed to support older browsers
classNames >=2.0.0
Array.isArray: see MDN for details about unsupported older browsers (e.g. <= IE8) and a simple polyfill.
Object.keys: see MDN for details about unsupported older browsers (e.g. <= IE8) and a simple polyfill. This is only used in dedupe.js.
License
MIT. Copyright (c) 2017 Jed Watson.
bootstrap
Author: The Bootstrap Authors
Description: The most popular front-end framework for developing responsive, mobile first projects on the web.
Homepage: https://getbootstrap.com/
| Created | about 8 years ago |
| Last Updated | 5 months ago |
| License | MIT |
| Maintainers | 3 |
| Releases | 29 |
| Direct Dependencies | |
| Keywords | css, sass, mobile-first, responsive, front-end, framework and web |
@42.nl/spring-connect
Author: Maarten Hus
Description: Connecting with a Spring REST APIs in a domain friendly manner
Homepage: https://github.com/42BV/mad-spring-connect#readme
| Created | 23 days ago |
| Last Updated | 16 days ago |
| License | ISC |
| Maintainers | 3 |
| Releases | 4 |
| Direct Dependencies | lodash.merge and query-string |
| Keywords | REST, fetch and Spring |
README
About
This library makes it easy to create Resource to connect to a Spring MVC back-end.
Installation
npm install @42.nl/spring-connect --save
Documentation
See the documentation
@42.nl/react-flash-messages
Author: Maarten Hus
Description: Storing flash messages via a nice api for use with React.
Homepage: https://github.com/42BV/flash-messages#readme
| Created | about 2 months ago |
| Last Updated | about 2 months ago |
| License | ISC |
| Maintainers | 3 |
| Releases | 2 |
| Keywords | react and flash-messages |
README
About
This library makes it easy to create flash messages and to store them in a store.
What makes this project a little different from most flash message libraries is that it is UI agnostic. This library does not render the FlashMessages for you it only stores them!
Installation
npm install @42.nl/react-flash-messages --save
Documentation
See the documentation
New dependencies added: @42.nl/react-flash-messages, @42.nl/spring-connect, bootstrap, classnames, lodash.take, lodash.uniqueid, material-design-icons, react-router-dom, reactstrap, @types/enzyme-to-json, @types/react-dom, @types/storybook__addon-actions, @types/lodash.uniqueid, @types/lodash.take, @types/react-router-dom, cssnano, fs-extra, rollup, rollup-plugin-auto-external, rollup-plugin-copy, rollup-plugin-size-snapshot and rollup-plugin-typescript2.
jvhoven
force-pushed
the
improvement/restructure
branch
from
e8724bb
to
d2a8d5a
Compare
Codecov Report
@@ Coverage Diff @@
## master #46 +/- ##
=====================================
Coverage 100% 100%
=====================================
Files 20 19 -1
Lines 269 254 -15
Branches 66 66
=====================================
- Hits 269 254 -15
Continue to review full report at Codecov.
|
In light of recent struggles with traditional css within a monorepo setup, we've opted out of the monorepo structure and reverting it to the good old fashioned way; grouping it in a single package.
Things we aimed to achieve by using a monorepo:
The biggest struggle is our dependency on
bootstrap. All the individual components are required to havebootstrapstyling and utilities to provide a nice development experience and easy themability.