algusdark / bloomer Goto Github PK

View Code? Open in Web Editor NEW

676.0 17.0 68.0 8.19 MB

A set of React components for Bulma CSS Framework

Home Page: http://bloomer.js.org

License: MIT License

TypeScript 97.85% JavaScript 2.15%

react bulma css components jsx javascript

bloomer's Introduction

Bloomer

==================================

A cool set of React Stateless components for Bulma

Install

Bulma should be included in your project.

Using NPM

$ npm install bloomer --save

Using Yarn

$ yarn add bloomer

Using CDN

<html>
  <head>
    ...
  </head>
  <body>
    Other libraries
    <script type="text/javascript" src="https://unpkg.com/bloomer/bundles/bloomer.min.js">
    Cutom code
  </body>
</html>

Usage

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Container, Box  } from 'bloomer';

ReactDOM.render(
  <Container>
    <Box>Hello World!</Box>
  </Container>,
  document.getElementById('root')
);

Documentation

The online documentation resides in bloomer page, you can find all the different topics related to this library.

Sections

Buy me a beer

Contributions

All contributions are welcome send your PR and Issues.

License

This is a open-source software licensed under the MIT license

bloomer's People

Contributors

Stargazers

Watchers

bloomer's Issues

Tab Content

Hello,

Which component do I need to use to set a is active flag for tab content? Say I have 2 tabs, and those tabs have different content.

I don't see any examples in the documentation.

Some attributes name are misleading?

When I read the docs I got the feeling that "isColor" and "isSize" are states from the component, but I think it shouldn't be.

Only removing "is" from the attributes name makes it more understandable. Or am I wrong?

Add `tag` prop to Documentation

Refactor Icon element

<Icon isSize='small'><span className='fa fa-home' /></Icon>
<!-- Rendering
<span class="icon is-small">
  <span className='fa fa-home'></span>
</span>
-->

<Icon isSize='small' icon='home' />
<!-- Rendering
<span class="icon is-small">
  <span class="fa fa-home" aria-hidden="true"></span>
</span>
-->

Add Tree-shaking and UMD info on Docs

Bloomer is able to be used with Tree-shaking thanks to bloomer/esm and already has module | jsnext:main in package.json.

Also, you can use it with UMD thanks to www.unpkg.com

Problems with Rollup and Bloomer

Suddenly, I stop being able to publish a library that uses bloomer with rollup during its deploy. The error was with the classNames import, but actually, it was with every import that was not a namespace. So, in bloomer all imports are written in the form import * as ______ from ______;

This seems ok for namespaces, but it is not for functions. So, is ok for React, but wrong for classNames. If you import functions like import ______ from ________; there's no problem at all....

Here is the source to the rollup discussion: rollup/rollup#670 (comment)

I'm not sure if this is a rollup problem, or a bloomer problem.... But people at rollup says is wrong to import a function as a namespace. So....

Missing hasTextAlign on Container component

Missing hasTextAlign on Container component

Provide <Buttons> element

Button in a group should be contained in a 'button group'

https://bulma.io/documentation/elements/button/#list-of-buttons

<div class="buttons">
  <span class="button">One</span>
  <span class="button">Two</span>
  <span class="button">Three</span>
  <span class="button">Four</span>
  <span class="button">Five</span>
  <span class="button">Six</span>
  <span class="button">Seven</span>
  <span class="button">Eight</span>
  <span class="button">Nine</span>
  <span class="button">Ten</span>
  <span class="button">Eleven</span>
  <span class="button">Twelve</span>
  <span class="button">Thirteen</span>
  <span class="button">Fourteen</span>
  <span class="button">Fifteen</span>
  <span class="button">Sixteen</span>
  <span class="button">Seventeen</span>
  <span class="button">Eighteen</span>
  <span class="button">Nineteen</span>
  <span class="button">Twenty</span>
</div>

I've created one for my webapp, I'm sharing it as a concept in this issue

import React from 'react';

export default class Buttons extends React.Component {

    constructor(props) {
        super(props);
        this.className = this.className.bind(this);
    }

    className() {
        const classes = [];
        classes.push("buttons");
        if (this.props.hasAddons) classes.push("has-addons");
        if (this.props.isCentered) classes.push("is-centered");
        if (this.props.isRight) classes.push("is-right");
        if (this.props.className) classes.push(this.props.className);
        
        return classes.join(" ");
    }

    render() {
        return (<div className={this.className()}>{this.props.children}</div>)
    }
}

Can't set ref to <Input>

I am unable to set a ref to a Input, which I want to use to focus() on it.

It seems to be because Input is not declared as a class. (which is required to set refs)

<Input
  isColor={emailWarning && 'danger'}
  type="email"
  placeholder="[email protected]"
  name="email"
  value={email}
  onChange={this.handleEmailChange}
  ref={input => {
    this.emailInput = input
  }}
/>

no way to use Tab & TabLink with NavLink from 'react-router'

<Tab isActive>
  <TabLink>Name</TabLink>
</Tab>

will generate:

<li class="is-active">
  <a>Name</a>
</li>

But, NavLink from react-router can only add className to itself, if it's active.

<NavLink to="/path" activeClassName="is-active" >Title</NavLink>

if we're in /path url, it will generate:

<a href="/path" class="is-active">Title</a>

So, even if we compose NavLink & TabLink, there's still no way to use bulma's style with it. Because, we can't add className to Tab when NavLink is active.

Missing hasTextWeight Property

As mentioned in title

Create examples in Documentation

Make it more modular

Hello,
I really like bulma and this is really nice soluton to using it with React, but...
Including every component on it's own just so you can use it make some pretty long inports:

import { Field as Bfield, Form, Input, Group, Label, Control, Checkbox, Textarea, Select } from 'bloomer'

Instead why don't you make it modular, so it can be simplier like this

import { Form } from 'bloomer'
...
<Form>
  <Form.Field>
    <Form.Input />
  </Form.Field>
<Form>

This goes for Form, Nav, Navbar, Columns, Hero, Cards and basically everything.

Here's a pseudo example on Forms and how it could be done:

...
import FormCheckbox from './Form/Checkbox'
import FormField from './Form/Field/Field'
import FormInput from './Form/Input'
import FormLabel from './Form/Label'
import FormRadio from './Form/Radio'
import FormSelect from './Form/Select'
import FormTextArea from './Form/TextArea'
....
class Form extends Component {
 ...
  static Field = FormField
  static Checkbox = FormCheckbox
  static Input = FormInput
  static Radio = FormRadio
  static Select = FormSelect
  static TextArea = FormTextArea
  static Label = FormLabel
  ....
}

button loader not showing on first click

At the first click, it's showing just an empty button without button content or text.
on second click it's showing the loader.

import React, { Component } from 'react';
import { Button } from 'bloomer';

export default class Subjects extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    };
  }
  render() {
    return (
      <div>
        <Button
          isColor="info"
          isOutlined
          isLoading={this.state.loading}
          onClick={() => this.setState({ loading: true })}
        >
          show loading
        </Button>
      </div>
    );
  }
}

Feature Request: Add Bulma-Extensions components

I just discovered Bulma-Extensions, pretty awesome stuff! and thought.. It would be even more awesome if these would one day be accessible as ready to use React Components through Bloomer!

Must use default export to get Helpers

This isn't a bug, but rather a clarification of the documents. I was trying to use Bloomer and the Helpers were not working, so after some debugging, I realized, only the default export has Helpers attached. I couldn't find this anywhere in the docs, and I didn't realize this straight away. Mentioning this somewhere or making it clearer would definitely benefit the usability of Bloomer.

Request: Add File Upload element to Forms

Is this implemented? I can't find it anywhere in the documentation.

New API for Columns

Prop	Description
isSize	`1..12` - `'3/4'` - `'2/3'` - `'1/2'` - `'1/3'` - `'1/4'` - `'full'` - `'narrow'`
isMobile	same as above
isTablet	same as above
isDesktop	same as above

That way we can remove props isFull, isNarrow, isThreeQuarters, isTwoThirds, isHalf, isOneThird, isOneQuarter.

The same should occur to Offset props, leaving only isOffset, isOffsetMobile, isOffsetTablet, isOffsetDesktop.

That would be a total of 12 props removed.

Important: Offset doesn't have full or narrow, but it has the other sizes.

Create all styles with styled components

Maybe creating a new repo or rewrite bloomer helpers to have same logic as Bulma but with styled components instead of sass

Any solution to focus Input

I'm having an issue with focus on-load in . Seems refs is breaking things. Any solutions welcome.

Thanks.

Introduction of `tag` prop

User would be able to render the tag element that's best suited. Since Bulma let's you do that, then we should introduce it as a feature.

For example, if we want a Title as h3 but with class .is-size-1, we should do something like:

<Title isHeading={3} isSize={1}>My Title</Title>

And, if we want that to be a paragraph instead:

<Title isSize={1} isParagraph>My Title</Title>

With this new prop, we could do it like:

<Title isSize={1} tag='h3'>My Title</Title>

or:

<Title isSize={1} tag='p'>My Title</Title>

This should be implemented to all Bloomer Components, but we should leave the current default ones.

Documentation build errors

When building the documentation, I get errors:

ERROR in [at-loader] ./docs/src/Components/NavBar.tsx:115:27
    TS2344: Type '{}' does not satisfy the constraint 'RouteComponentProps<any>'.
  Property 'match' is missing in type '{}'.

It seems related to react-router but I'm not familiar enough with the package to fix it.

Dropdown example ?

I saw that Dropdown component was added, but how can I use it ?

Some more complex components?

Looking at Buefy and it seems to have quite a few interesting and useful components implemented.

Any chance you'll be including some as part of bloomer as well?

Add JSDOC on entire project

This way, intellisense is going to be better with this hints. Also, it's going to be easier for new developers to contribute.

Provide isAlign to Navbar Dropdown

Thank you for this great project. It will be nice to have more options for the Navbar dropdown to allow aligning it either to right or left. I have a use case for having the dropdown as a child of a NavBarEnd. It currently projects beyond the viewport

No upload components?

why

Refactor isRatio prop from Image

Prop	Description
isRatio	`square` - `1:1` - `4:3` - `3:2` - `16:9` - `2:1`

React 16 - Not working

Hi Team,
can we have this library for React 16. I see it is using React.createElement and both React.createElement and React.PropTypes has been deprecated.

Bloomer needs a logo

New API for Responsive Helpers

Prop	type	Description
isDisplay	`string` - `string[]` - `object`	keys `flex` - `block` -`inline` - `inline-block`- `inline-flex` values `mobile`- `tablet` - `touch` - `desktop` - `widescreen` - `tablet-only` - `desktop-only`

Value can be string or string[], so users can:

<Column isDisplay='flex' />

<Column isDisplay='inline-flex-mobile' />

<Column isDisplay=['flex-mobile', 'block-tablet-only'] />

const display = {
  flex: 'desktop',
  block: ['widescreen', 'touch']
  'inline-flex': 'tablet-only'
}

<Column isDisplay={display} />

With this, we're going to reduce the 10 current props to 1.

Not applying 'is-fullwidth' to button

is-fullwidth css rule is not applying for the button when using isFullWidth={true}

Revisit tests

Need a lot of work in testing, right now the tests have positive cases and lack of some points.

Icon is not working correctly

We need to create a new prop for Icon fa that can receive a string for all the moddifiers that FontAwesome have. For example:

<Icon icon="cog" fa="fa-cog fa-spin fa-3x fa-fw">

Override Bulma variables

How do we override Bulma's variables when using Bloomer? I thought just defining the var before importing Bloomer would do it, but it doesn't seem to affect anything, e.g.:

$cyan: #55C4D4;

Looking through the source it's not clear how Bloomer even imports Bulma. Does it happen automatically?

A cool set of React Stateless components for Bulma v0.4.3

Any reason this says "Bulma v0.4.3"? I've been turned back a few times because I thought this was not going to support newer versions of bulma. Only just realized it's being updated. What am I missing?

CSS not loaded

The CSS is not loaded when using bloomer with next.js. Take a look at this example:

componentes/hero.js

import { ... , Hero, ... } from 'bloomer'
export default () => (
  <Hero isSize='medium'>
  ...
)

layouts/body.js

import Head from '../components/head'
import Header from '../components/header'
import Footer from '../components/footer'

export default ({ children }) =>
  <div>
    <Head/>
    <Header/>
    { children }
    <Footer/>
  </div>

pages/index.js

import Body from '../layouts/body'
import Hero from '../components/hero'
export default () =>
  <Body>
    <Hero/>
  </Body>

There are no errors in the dev console. The css from <style jsx global> in the Head component is loading properly, only the Bulma css is missing. I have installed bulma with npm. Loading manually with <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css" rel="stylesheet" />. Any idea what I am missing?

This is the components/head.js

import Head from 'next/head'
export default () =>
  <Head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1" />
    <meta charSet="utf-8" />
    <style jsx global>{`
      body { 
        background: #000;
        color: #181b2b;
      }
  `}</style>
 </Head>

Missing possibility to set the alt and title attribute of images

It would be nice to be able to set the alt and title attribute on an <img /> using the Bloomer Image component because of SEO, screen readers and stuff. As of now, attributes added will only be rendered on the <figure /> tag.

Support for Font Awesome 5

Is this already support Font Awesome 5?

I got something like this screenshot when including

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>

Bulma 0.6.2 already support Font Awesome 5
https://bulma.io/2018/01/18/bulma-supports-font-awesome-5/

Typo in Navbar docs

bloomer/docs/src/Scenes/Documentation/Components/Scenes/Navbar.tsx

Line 132 in 723e9eb

 documentation you can still access temporaly <Link to={`/documentation/components/nav`}>here</Link> 

Missing `isFullWidth` prop in Table element

Table element is lacking of isFullWidth prop, so it can render is-fullwidth css rule from bulma.

Allow custom colors with isColor

I noticed that the isColor prop only works with built-in colors like primary. But by customizing bulma's $colors variable, you can use new colors with the is- prefix.

For example:

$colors: (
   myColor: (#ffffff, #000000)
);

will style this correctly

<div class="is-myColor">

but this does not work in Bloomer

<Notification isColor="myColor">

Does this feature make sense to add? Right now, I'm having to manually set the colors like so

<Notification className="is-myColor">

which removes some of the convenience of this awesome library.

Package CSS via CSS in JS

What do you think about bringing Bulma into CSS in JS using something like styled-components?

Usage with redux-form

I'm honestly not sure if this is an issue with redux-form, bloomer, or my concoction of the two, but I'm experiencing a very strange issue. Basically I have a component that wraps a bloomer Input in a Field from the redux-form library:

import React, { Component } from 'react'
import { Field } from 'redux-form'
import { Input as BInput } from 'bloomer'

class Input extends Component {
  renderInput (field) {
    return (
      <BInput
        id={this.props.id}
        type={this.props.type}
        value={field.input.value}
        onChange={field.input.onChange}
      />
    )
  }

  render () {
    return (
      <Field
        name={this.props.name}
        component={this.renderInput.bind(this)}
      />
    )
  }
}

export default Input

Here's an example use inside of a form:

import React from 'react'
import { reduxForm } from 'redux-form'
import { Field, Label, Control } from 'bloomer'

import Input from '../Input'

let LoginForm = props => {
  const { handleSubmit } = props

  return (
    <form onSubmit={handleSubmit}>
      <Field>
        <Label htmlFor="user_email">Email</Label>
        <Control>
          <Input id="user_email" name="email" type="text" />
        </Control>
      </Field>
      <Field>
        <Label htmlFor="user_password">Password</Label>
        <Control>
          <Input id="user_password" name="password" type="password" />
        </Control>
      </Field>
      <button type="submit">Submit</button>
    </form>
  )
}

LoginForm = reduxForm({
  form: 'login'
})(LoginForm)

export default LoginForm

When I focus on the input and type a single character, the input blurs and I lose focus. What's especially strange is that upon refocusing the input and typing a second character, the behavior does not persist and I am able to continue typing as usual. Any clues as to what's going on here?

Overrides

For overriding Bulma variables and things like breakpoints, it's pretty straightforward. How would the same concept be done using Bloomer?

Mainly, I want to be able to override the breakpoint values and a few other elements that come with Bulma.

Links on NavBar section are redirecting to home page

When you're here
https://bloomer.js.org/#/documentation/components/navbar

and you click on a link like "Home", "One A" or "Two B" you are redirected to the home page.
You can always hit "Back" on your browser, but it might be confusing for some people.

Can't set properties in 'Column' element

The component doesn't follow the the props.

Extensions support?

Hello,

Would love to see extensions support (i.e. http://bulma.io/extensions/).
Any plans to do so? Even on a separate "bloomer-extensions" project.

Thanks,
Howe

Use dot notation for JSX components

For example, instead of

import {Nav, NavLeft, NavCenter, NavRight, NavToggle, NavItem} from 'bloomer';

<Nav>
  <NavLeft>...</NavLeft>
  <NavCenter>...</NavCenter>
  <NavRight>...</NavRight>
</Nav>

You could:

import {Nav} from 'bloomer';

<Nav>
  <Nav.Left>...</Nav.Left>
  <Nav.Center>...</Nav.Center>
  <Nav.Right>...</Nav.Right>
</Nav>

flow type definitions?

I'm working on a project using Flow, and was trying (unsuccessfully) to generate flow type definitions from the typescript type definitions, using flowgen.

$ cd node_modules/bloomer/lib && flowgen index.d.ts 
Parsing index
Missing node parse ExportDeclaration
Missing node parse ExportDeclaration
Missing node parse ExportDeclaration
Missing node parse ExportDeclaration
Missing node parse ExportDeclaration
Missing node parse ExportDeclaration
...

I'm curious if you've considered providing flow type definitions, perhaps in the code or through the flow-typed project?