bokuweb / re-bulma

[Deprecated] 💎Bulma components for React

No longer maintained, sorry.

No longer maintained, sorry.

---

re-bulma

Bulma components build with react (based bulma(https://github.com/jgthms/bulma) v0.1.0)
This repository is heavily under development and unstable.

Install

npm i -S re-bulma

In your javascript pick up the css using

import insertCss from 'insert-css';
import css from '<path to yours or rebulmas>/build/css';
try {
  if (typeof document !== 'undefined' || document !== null) insertCss(css, { prepend: true });
} catch (e) {}

If you want to change the styles then do the following as well.

npm install [email protected] --save-dev
npm install https://github.com/bokuweb/csjs.git --save-dev
npm install lodash.camelcase --save-dev

add the following to your Gruntfile.js or do similar for your build process
    shell: {
      buildReBulma: {
        command: 'node node_modules/re-bulma/scripts/transform.js
          ./re-bulma-variables.properties node_modules/re-bulma/src/styles/ build/ no'
      }
and include shell:buildReBulma in the grunt.registerTask('default'...) line

in the re-bulma-variables.properties specify the settings you require (see the 
re-bulma/default/re-bulma-variables.properties for reference)

Development

npm i
npm start

• styleguide server

npm run styleguide-server

• build style

If you change src/styles/*.css, pelease rebuild styles.

npm run build:style

Document

See http://bokuweb.github.io/re-bulma/, and please try to edit sample code.

Components

Grid

• Columns
• Tile

Elements

• Box
• Button
• Content
• Form
• Icon
• Image
• Notification
• Progress
• Table
• Tag
• Titles

Components

• Card
• Level
• Media object
• Menu
• Message
• Modal
• Nav
• Pagination
• Panel
• Tabs

Layout

• Container
• Hero
• Section
• Footer

License

The MIT License (MIT)

Copyright (c) 2016 @Bokuweb

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

re-bulma's Issues

Using server side rendering, "document is not defined" error

In my server side rendering app, I have come across this error:

project/node_modules/insert-css/index.js:7
    var elem = document.createElement('style');

I just wrote: import { Container } from 're-bulma';

How can I use re-bulma with SSR?

Excessive spaces in the "class" attribute.

For example, i noticed this in components Button and Input, if use own class through the className.

This:

<form>
  <Input className="test-input" type="text" placeholder="Test input" />
  <Button className="test-button" type="submit" color="isPrimary">Test Button</Button>
</form>

Compiled into:

<form>
  <p class="__re-bulma_control    test-input">
    <input class="__re-bulma_input" placeholder="Test input">
  </p>
  <button class="__re-bulma_button  __re-bulma_is-primary    test-button">
    Test Button
  </button>
</form>

Responsive Helpers

Are the responsive helpers available, such as is-hidden-mobile?

http://bulma.io/documentation/modifiers/responsive-helpers/

I tried searching for through the code and docs to no avail. thanks!

Option to have no class suffix

I'm using re-bulma (and loving it), but there are certain app-specific styles I'd like to implement, using bulma class names. Unfortunately, all class names have a random suffix appended, I assume for isolation/modularity? I'd rather not hard-code the bulma suffix in my css, and I'd like to use bulma's class names freely in my code. Is there any way around this in the current version? It would be nice to have a build without this, or maybe with a prefix to classes, like re-bulma-message, etc.

Edit:

Just tracked down csjs. That makes sense. Any suggestions for elegantly extending re-bulma's styles?

package.json refers to lib/index.js but file not in repository

Hello, I am trying to make use of the bokuweb main branch rather than my fork. I notice the package.json has "main": "lib/index.js", and that the file does not exist in the repository. I'm not familiar with node modules. Should it be there and if not then how is it built if it's even needed? (I'm finding my code cannot find re-bulma in the 'import' call.)

NavItem has no cursor:pointer css property

Textarea giving me a warning in React - unknown props: 'isLoading', 'isActive'

Here is the full warning:

warning.js:36 Warning: Unknown props isLoading, isActive on <textarea> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop

NavGroup is referred to as NavGloup in docs

https://bokuweb.github.io/re-bulma/#NavGloup

Material-icons with <Icon></Icon> does not work as expected

Hi :)

I want to use re-bulma with material-icons like this:

<Addons>
     <Icon icon='material-icons'>face</Icon>
     <Input className="username"
          onChange={this.validateUsernameOnChange}
          color={this.state.inputusername}/>
</Addons>

I expected it looks like <Button/> instead <Icon/>but there is only white space. Even if I user className it doesn't look like with a button.

Could help please?

Thanks and best regards
Gino

Got TypeError: Cannot read property 'any' of undefined ./node_modules/re-bulma/lib-es/grid/columns.js:25

Hi, when trying install re-bulma based on this instruction (using create-react-app which is already use react version 16.0.0),

https://github.com/bokuweb/re-bulma#install

I put these on index.js

import insertCss from "insert-css";
import css from "re-bulma/build/css";
try {
  if (typeof document !== "undefined" || document !== null) insertCss(css, { prepend: true });
} catch (e) {}

but after that, I got this error

TypeError: Cannot read property 'any' of undefined ./node_modules/re-bulma/lib-es/grid/columns.js:25

any clue how to solve this issue?

Thank you

add a prop for callbacks on DOM event

For example on the Checkbox element.

I want to do the following :

import { Checkbox } from 're-bulma'

const CustomComponent = ({ option, onToggle }) => (
  <Checkbox
    key={ option.name }
    onCheck={ () => onToggle()}
  >{option.name}</Checkbox>
)

and have my callback be fired everytime I check or uncheck this checkbox.

but at the moment . . . nothing is happening, and I'm too lazy to implement this myself :)

Input element (missing props)

Cannot set the following props:

autoCapitalize
autoComplete
autoCorrect
autoFocus
tabIndex

and probably a whole bunch of others. Perhaps we should just pass through all props except the ones used by the bulma code?

Checkbox - setting checked property

Is there currently any way to set the checked property on a Checkbox element?

__WEBPACK_IMPORTED_MODULE_0_react__.PropTypes is undefined

"bloomer": "^0.6.3",
"bulma": "^0.6.2",
"react": "^16.2.0",
"react-dom": "^16.2.0"

when I try use display a error
WEBPACK_IMPORTED_MODULE_0_react.PropTypes is undefined
./node_modules/re-bulma/lib-es/grid/columns.js

Re-bulma Fails to build on UglifyJS step

Due to Uglify JS's lack of support for ES2015 (see: mishoo/UglifyJS#659, webpack/webpack#2545) , re-bulma causes UglifyJS to throw an error when using Webpack 2 (because of its use of the module) field. It seems that this can be fixed by adding the es2015 flag back into the es property of the .babelrc file. Although it kind of defeats the purpose of using the module field is seems like a pratical solution until UglifyJS is able to natively parse ES2015 code.

Error from webpack:

ERROR in vendor.7130423d.js from UglifyJs
    Unexpected token: operator (>) [./~/re-bulma/lib-es/helper/helper.js:1,0][vendor.7130423d.js:250,28]

Let me know your thoughts and I appreciate the help in this issue.

Support for typescript

Create d.ts files to support typescript and create a pull request for DefinitelyTyped.

Incorrect use of the `module` field for ES2015 module-support

Added with this commit aee8cbc , it seems that re-bulma is incorrectly using the module field in package.json. Using webpack2, re-bulma is failing to build because the module field is pointing to src/index.js which is a file that requires transpilation.

Correct me if I'm wrong, but all of my research on the topic leads me to believe that the module field should still be built & transpiled, leaving only the ES2015 module syntax in tact (i.e. import and export are okay, but as a consumer we still need you to transpile / build your code). If you look at redux, they have a build step that transpiles their code using babel, but leaves the es6 module syntax in place.

React 16

This library doesn't seem to be working well with React 16. Can we have a new build with React 16 or if i can help somewhere that would be great.

Use styled-component

Using in React-Native

I failed to use this in my experiment with react-native. Is there any specific configuration? Here is the error that I encounter

customization

How can I customize the default styles, like font-family etc ?

Is the author not updating this project ?

Is the author not updating this project ?

The react in es6 defines the defaultProps error in the component.

taxError: /Users/huangjihua/Documents/autohome/projects/re-bulma/src/components/panel/panel-tabs.js: Unexpected token (6:19
`export default class PanelTabs extends Component {

6 | static propTypes = {
| ^
7 | children: PropTypes.any,
8 | className: PropTypes.string,
9 | style: PropTypes.object,
`
Defining the static property is not es6, and in the es7 draft, install the babel-preset-stage-0 and try again after the babelrc reference, but not yet.

Production release expectation!

Are there any plans to have a production release for re-bulma? This repo looks very promising.

I want to automate capture of original Bulma.css.

utilize classnames library instead of manually joining classes

joining often creates unneeded spaces, which results in something like

class="tabs    is-fullwidth"

This could be much better if re-bulma used classnames. The same bug is #50

jsnext:main

You should consider including src in the npm publish and using the jsnext:main field so ES6 module loaders like rollup can find the ES6 code and do tree-shaking before bundling. You can get much smaller builds than webpack or browserify that way. 😸

Why Title is <p>?

And why not use the most recent bulma version? This looked as a promising project before I realized that it uses an very very old bulma version and produces really ugly and messed up html :(.

Question: Create-React-App example?

Hi, like what you doing here. Does this work with CRA without eject or not?

Question: What do you think about using cjsx instead?

I'm just wondering if you would be interested in switching to cjsx

here is your Card Component rewritten in cjsx with few minor details left out:

import React, {Component, PropTypes} from 'react'


export default class Card extends Component

    propTypes = {
      style: PropTypes.object
      children: PropTypes.any
      className: PropTypes.string
      isFullWidth: PropTypes.bool
      isRounded: PropTypes.bool
    }

    defaultProps = {
      style: {}
      className: ''
    }

    createClassName: ->
      return [
        'card'
        @props.isFullWidth ? 'is-fullwidth'
        @props.isRounded ? 'is-rounded'
        @props.className
      ].join(' ').trim()

    render: ->
      <div style={@props.style} className={@createClassName()}>
        {@props.children}
      </div>