enigma-io / boundless Goto Github PK

Hey!
First of all, his project looks really cool!

I noticed that the display of the buttons in the popover demo doesn't work in iOS 10

<div>
	<a href="#" id="menu" onClick={this.props.openMenu}></a>
	{this.props.menuOpen && <Popover
		anchor={document.querySelector('#menu')}
		preset={Popover.preset.S}
		onClose={this.props.closeMenu}>
		<ul>
			<li>Stuff</li>
			<li>Menu</li>
			<li>Wow</li>
		</ul>
	</Popover>}
</div>

This code gives me an error when this.props.menuOpen becomes true.

boundless.js:4 Uncaught TypeError: Cannot read property 'appendChild' of null
    at Portal.value (boundless.js:4)
    at ReactCompositeComponent.js:348
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:347)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at Object.updateChildren (ReactChildReconciler.js:121)

Essentially all the demos stacked on a page.

Since we moved much of the README for each package into the docgen'd file comments, we need to pull the data back out again to create finalized modules for publishing to NPM... otherwise each module would have no usable README and people would have to rely on the website.

• packages/*/README.md should be rebuilt and injected with prop descriptions; still figuring out how to handle this... it's a bit complicated since node doesn't support ES6 modules by default and there's a fair bit of dynamic templating happening--might end up doing some webpack hackery
• packages/*/build/index.js should be the minified commonjs version of the package

The intent being that we'd measure the size of the anchor component and update the portalled popover container width to match on cDM, cDU, and window resize.

(default false)

This allows Popover to be used like a dropdown when you want the content to follow the size of the trigger button.

https://www.npmjs.com/package/eslint-plugin-jsx-a11y

(since 7039c8b)

Commits before that work fine.

package.json contains:

"dependencies": {
    "boundless": "enigma-io/boundless#7039c8b6a40cd5fbbcec8e194d1d3aa1cef1aef3",
}

output from npm i boundless:

> [email protected] postinstall /Users/.../node_modules/boundless
> npm run bootstrap


> [email protected] bootstrap /Users/.../node_modules/boundless
> lerna bootstrap

Lerna v2.0.0-beta.37
`package.json` does not exist, have you run `lerna init`?

npm ERR! Darwin 15.5.0
npm ERR! argv "/Users/.../.nvm/versions/node/v7.4.0/bin/node" "/Users/.../.nvm/versions/node/v7.4.0/bin/npm" "run" "bootstrap"
npm ERR! node v7.4.0
npm ERR! npm  v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! [email protected] bootstrap: `lerna bootstrap`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] bootstrap script 'lerna bootstrap'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the boundless package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     lerna bootstrap
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs boundless
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls boundless
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

And it can commit those files back to master after a PR is merged. No reason why it should be manual.

• make sure Travis doesn't try to build its own commits
• make sure Travis only builds for master branch

For those that don't want to use Stylus, should be unminified and not vendor-prefixed for easy customization.

Interested in using the data table but it's not listed in the readme

Need to do a final component-by-component review before cutting 1.x final. Async in particular still feels a bit clumsy.

Assuming the following lines in your project's main styles, per Getting Started:

@require "../node_modules/boundless/variables"
@require "../node_modules/boundless/style"

Problem

In the Boundless master style.styl, there is the following statement, which pulls the package styles:

@require "packages/*/style.styl"

However, some of the package styles have a statement like this:

@require "node_modules/<some_dependency>/style"

This causes the following error (from boundless-checkbox-group because it is the first package encountered with such a statement):

Error: node_modules/boundless/packages/boundless-checkbox-group/style.styl:2:10
   1| @require "variables"
   2| @require "node_modules/boundless-checkbox/style";
---------------^
   3|
   4| // Skin-specific styles go here. Demo-specific styles go in demo/style.styl.
   5|

failed to locate @require file node_modules/boundless-checkbox/style.styl

Possible solution

I think changing the path of the package style requirements would solve the whole thing:

@require "../<some_dependency>/style"

Also, to your point about installing the children individually (à la npm i boundless-checkbox-group):

Boundless, its children and any child dependencies end up at the same level inside of your project's node_modules:

Hi, I'm trying to render a popover:

1. When the data is fetching, it simply shows a 'Loading...' text.
2. When fetching is done, it shows the actual data.

The size of the popover changes dynamically according to the amount of data fetched. The problem happens when the popover is near the screen edge. When the data fetching is done, the popover repositions itself to always remain inside the viewport, but the caret doesn't reposition.

Is there a way to make the caret reposition correctly?

Hello! I have this error when I try to use ArrowKeyNavigation in my project:

My React Class:

`
import React, { Component } from 'react';
import { ArrowKeyNavigation } from 'boundless-arrow-key-navigation';

class TestPage extends Component {
state = {
items: [ 'lorem', 'ipsum', 'dolor' ],
}

render() {
    return (
        <div>
            <section>
                <h6>Horizontal-only</h6>
                <ArrowKeyNavigation className='demo-loose-list' mode={ArrowKeyNavigation.mode.HORIZONTAL}>
                    {this.state.items.map((item) => <span key={item}>{item}</span>)}
                </ArrowKeyNavigation>
            </section>
        </div>
    );
}

}

export default TestPage;
`

Can you help me?

Thank you.

I noticed there were some variables that weren't named correctly... in general there is just a lot of them. It would be nice to pare them down a bit and perhaps do a little more sane automagic so theming isn't as intimidating.

Should chop some bytes off the compiled bundle size.

A select box / dropdown component.

Interactions

• Enter or click on anchor should open a dialog below the anchor (possibly using Popover?)
• Focus option list inside the dialog automatically
• Arrow keys should cycle selection through the list of options
• Enter or click on an option should select it

Developer Interface

• Should support grouping of options (similar to <optgroup>)
• Should support asynchronously-fetched options
• Should support multiple selected options (behind a prop flag, multiselect)
• Should have typeahead integration for long lists (behind a prop flag, showSearchField)

multiselect={true}

• anchor should contain a list of removable tokens for each selected option (similar to UITokenizedInput)

showSearchField={true}

• Focus the search field when anchor is clicked (instead of the option list)
• Tab should move focus off the field and to the option list

I have this warning with last version of React when using boundless-popover package.

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

The warning speaks for itself

There might be some sort of webpack plugin for this that looks at react-router?

Due to looking for HTMLElement, which is undefined in a non-browser context. Initially noticed it when trying to use Portal, there might be other cases.

Hi, I think your project is really awesome and exactly what I need.
Since it doesn't look your maintaining it anymore, is there any way you publish the source code of these components, so I can fork and self maintain?
Thanks!

The modal demo at the very least still has it to button. They should all be normal import statements now like:

import Button from 'boundless-button`;

https://www.npmjs.com/package/boundless-arrow-key-navigation is particularly bad

• use a stacked layout instead for props
• include the demo example inline in a fenced block?
• include directions on how to consume the styles per-component? perhaps at the bottom

I'm thinking something tangram-related.

If one or more of the children is null, trying to access child.props will cause an error.

<ArrowKeyNavigation>
    <div>Child 1</div>
    <div>Child 2</div>
    {null}
</ArrowKeyNavigation>

Uncaught TypeError: Cannot read property 'props' of null
    at index.js:179

Potential solution:

children() {
    return React.Children.map(this.props.children, (child, index) => {

        if (child) { // <-- add this check

            return React.cloneElement(child, {
                'data-focus-index': index,
                'data-skip': parseInt(child.props.tabIndex, 10) === -1 || undefined,
                key: child.key || index,
                tabIndex: this.state.activeChildIndex === index ? 0 : -1,
            });

        }

    });
}

However, if the null child is not the last child, this would result in values computed from index becoming offset / not continuous.