React components for Bulma framework

Overview

React-bulma-components

Build Status Coverage Status Release Version Npm Downloads

React components for Bulma (v0.8.2) UI compatible with most used React Frameworks (Gatsby, CRA, Next.js)

V4 Pool

Please Check https://github.com/couds/react-bulma-components/issues/258, we are thinking to change the bulma dependency to a peer dependency and remove the style importes from this library. you can vote here https://doodle.com/poll/mqqpxwkzm6nnrs3s

BREAKING CHANGES V2 -> V3:

  • Now the alias needed to override Bulma variables (and/or use the directly the sass files) is _variables.sass instead of ~_variables.sass, See Advanced setup below.
  • V3 Use the new Context api so requires react >= 16.3

To Install

npm install react-bulma-components or yarn add -E react-bulma-components

To Use

Currently there are two ways to use this library depending of your needs and configuration:

  • Basic: You import from the main module the components and include the css yourself (No treeshaking by default, no bulma variables override)
  • Advanced: You import from the lib folder the components you need, this is the more versatile way but need some extra configuration (See Advanced Setup section)

Basic

This configuration will allow you to start fast but with one drawback, by default will include all components (no treeshaking) and will use the default variables of Bulma.

import React from 'react';
import 'react-bulma-components/dist/react-bulma-components.min.css';
import { Button } from 'react-bulma-components';

export default () => (
  <Button color="primary">My Bulma button</Button>
)

Form elements are imported as part of the Form class.

import { Form } from 'react-bulma-components';

const { Input, Field, Control, Label } = Form;

Advanced

This configuration is recomended if you answer yes to one of the following questions:

  • I'm worried about the final size of my bundle?
  • I need to override the default Bulma variables?

In your main scss/sass file you will need to include the generic css classes bulma use, please ensure you do this on your main scss file (App.scss fox example) and do not add this inside the _variables file (see below)

@import "~react-bulma-components/src/index.sass"

// Other styles

You can start using the library like this

import React from 'react';
import Button from 'react-bulma-components/lib/components/button';

export default () => (
  <Button color="primary">My Bulma button</Button>
)

Before you use this configuration you need to setup a _variables.sass file somewhere in your project (I recommend inside your src folder). This file will allow you to override bulma variables if need it like:

$primary: #c3c3c3

Note Use this file only for variables, do not include any css rule in it because that rule will be duplicated every time you include a component from this library.

Depending of your project configuration you will need to setup your framework to use this file:

Raw Webpack

Configure your webpack to handle sass files.

Inside the resolve directive setup your webpack to use modules from the folder where you put the _variables.sass file

{
  // ...
  resolve: {
    modules: ['node_modules', 'src'],
    // ...
  }
}

CRA

Install node-sass to enable the sass compiles on your project.

After that update your jsconfig.json to add the folder to your path

{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

where ./src is the folder where you put your _variables.sass

Gatsby

Follow the instructions to enable Sass compiling in project, and configure the sass plugin to include the path where you put the _variables.sass file, for example:

plugins: [
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        includePaths: ["./src"],
      },
    }
    ...
]

Next.js

Follow the instructions to enable sass in the project. You will also need to configure the transpiled modules plugin next-transpile-modules so install it npm i --save-dev next-transpile-modules.

Now on your next.config.js configure your sass to include the directory where you put your _variables.sass file and add react-bulma-components to the transpiled modules. note withTM() should always be the most nested function in your config.

const withSass = require('@zeit/next-sass')
const withTM = require('next-transpile-modules')(['react-bulma-components']);

module.exports = withTM(withSass({
    // NOTE: this also allow to use abolute import from this folder not only for the _variables.sass file
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        config.resolve.modules.push('./pages'); // Add to webpack configuration the folder where you put the _variables file
        return config
    },
}));

The last thing to remember is that since you're transpiling react-bulma-components from source, make sure your import statements reflect this in your app:

import React from 'react';
import Button from 'react-bulma-components/src/components/button'; //import from src, not lib

export default () => (
  <Button color="primary">My Bulma button</Button>
)

Documentation

You can find the documentation in https://couds.github.io/react-bulma-components

Each component imports their own sass file. Thus, you can reduce your css total file size by only including the styles that you will use. To enable this, please configure your Webpack to handle sass files. You can use the webpack.config.js on the root folder of this repository.

Some components may vary the api/naming convention with the Bulma Docs. Please refer to each stories in the Storybook to see how each component could be used (you can find the source code of the story on the tab Story on the bottom panel

The following components were ported:

Component Storybook Bulma docs
Box Storybook Docs
Breadcrumb Storybook Docs
Button Storybook Docs
Card Storybook Docs
Column Storybook Docs
Container Storybook Docs
Content Storybook Docs
Dropdown Storybook Docs
Footer Storybook Docs
Form Storybook Docs
Heading Title, Subtitle and heading on Bulma Storybook Docs
Hero Storybook Docs
Icon Storybook Docs
Image Storybook Docs
Level Storybook Docs
List Storybook Docs
Loader Storybook --
Media Storybook Docs
Message Storybook Docs
Menu Storybook Docs
Modal Storybook Docs
Navbar Storybook Docs
Notification Storybook Docs
Pagination Storybook Docs
Panel Storybook Docs
Progress Storybook Docs
Section Storybook Docs
Tabs Storybook Docs
Table Storybook Docs
Tag Storybook Docs
Tile Storybook Docs

Adding ref to a component

We use a custom prop to pass down the ref to the next dom object. (instead to the instance of the component).

const TestComponent = () => {
  const buttonRef = useRef(null);
  return <Button domRef={buttonRef}>button</Button>
}

Why we do this instead of using React.forwardRef? The forwardRef wrap the component into another one, because this is a library for wrapping the Bulma Framework cause an overhead and a lot of noise on the component tab of the React Dev Tools.

Comments
  • v4.0

    v4.0

    This is an issue tracking this library's upgrade to v4.0.

    New features:

    • [x] Support for Bulma 0.9.1
      • [x] Spacing helpers
      • [x] Light/Dark color helpers
      • [x] Remove <List /> component
      • [x] is-clickable helper
      • [x] is-max-desktop and is-max-widescreen for Container
    • [x] Standalone display prop without viewport modifiers. (5f1b1eb48e53ac87ac95ddcd53c3e7922323db98)
    • [x] Support is-size-7 (2162f3fb4d38f31a4c52446860c12fa098fd3161)
    • [x] Support font family modifiers (d82cee85e89d391e6eae18ff703032684be30589)
    • [x] Support for is-sr-only modifier (e9fc3d2854298988b1b8136619688a3a86fcc960)
    • [x] Tree shaking
    • [x] Update Documentation for installation process (Now there will be only one no more advanced configuration need it)
    • [x] TypeScript support
    • [x] Add missing table-container component (#274)
    • [x] Add missing hoverable prop for Table component (#273)
    • [x] Add missing rounded prop for Form.Select component (aed577435c2f6070d49e1d53102964232beb4a21)
    • [x] Add various state props for Form.Select (d2afa6dcc4f2b3de383db7ac2ba4cc1120934bd4)
    • [x] BREAKING name prop of Form.Radio is no longer required. (b365663a0bdd8ff3bb2ecf6fae4722cb09c4335e)
    • [x] BREAKING Simplify responsive props (#279)
    • [x] BREAKING remove Breadcrumb item prop and replace it with Breadcrumb.Item
    • [x] Ability to show the first and last page in Pagination (#283)
    • [x] BREAKING ~Remove loading Button prop in favor of a unified state prop that already exists.~ Button can have multiple state at once - the state prop will be removed because it can only take one state at a time. (0da86324c10f9182c9904149e0d1422ea1b38bf6) Reverting this, does not make sense to have focus, hover and/or hover at the same time
    • [x] Add focus, hover ~and loading~ (UPDATE loading state is applied to Control instead of Input, removing) state props for Form.Input. (aff9690ef622413c93a92aeafca21ad72f659523)
    • [x] Add rounded prop for Form.Input (corresponds to is-rounded) (af1c3a2a063db32eb6b0f973ca666ce0d2910b4b).
    • [x] Add centered prop for InputFile
    • [x] BREAKING Remove Form.Textarea default rows of 4. (2153d5b20f1a763c12621096d50ff88e8caf2357)
    • [x] Add has-fixed-size support for Form.Textarea (2153d5b20f1a763c12621096d50ff88e8caf2357)
    • [x] Add various state props (loading, focused, etc.) for Form.Textarea (2153d5b20f1a763c12621096d50ff88e8caf2357) Reverting this, does not make sense to have focus, hover and/or hover at the same time
    • [x] BREAKING Form.InputFile is now a controlled component
    • [x] ~BREAKING Heading will now pick the appropriate header element based on the supplied size. For example, size={4} tells Heading to render h4 under the hood. Default size will now be 3~ Won't do, the user will select the appropiate element with renderAs
    • [x] Allow override of renderAs for various components for consistency's sake. Except Table because with any other component will not work

    Housekeeping:

    • [x] BREAKING Move bulma to peerDependency (#258)
    • [x] BREAKING Move Remove sass import from codebase
    • [x] Remove yarn.lock
    • [x] (Optional) Rewrite class components with hooks.
    • [x] (Optional) Review how we exports the components and see if there are no a better way
    • [x] Remove default HTML attributes/React props from propTypes object (for example style, disabled) unless it is accessed by the component.

    cc @couds

    edit: marked breaking changes.

    WIP Major change dependencies 
    opened by kennethnym 67
  • Rewrite TypeScript definition

    Rewrite TypeScript definition

    I open this here to discuss if I should remove the TS support. currently there are several issues related with the .d.ts file but I do not know ts (I use pure JS), so maybe removeing this can solve some issues. unless someone can help me with the TS support.

    So. Unless someone help me with TS I will probably remove the TS condiguration on the next major release.

    Thanks!

    help wanted Typescript 
    opened by couds 23
  • Documentation

    Documentation

    Using a library that generates documentations from markdown files will make writing documentation much easier and less tedious. Updating documentation will also be easier too. Right now, we are using a full-blown create-react-app project just to display a static docs page. It is way too overkill and inefficient imo. cc @couds

    enhancement help wanted good first issue discussion 
    opened by kennethnym 21
  • Allow the use of `ref` in the button component

    Allow the use of `ref` in the button component

    I am trying to use the Button-component together with the Reach UI library's AlertDialog and it's causing some trouble because you can't use ref with the Button-component. The React documentation suggests that forwardRef can be used to allow this, see: https://reactjs.org/docs/forwarding-refs.html

    Potentially, this would also avoid change the Input etc to class components at the same time

    react-bulma-components version in use is: 2.1.0

    opened by weyert 21
  • Next 9 - File to import not found or unreadable: _variables.sass.

    Next 9 - File to import not found or unreadable: _variables.sass.

    Hi! I've followed the advanced instructions to install the components for next.js but am still failing to correctly import the variable sass file. Its a next.js 9 app created with creat-next-app. On yarn dev I get the following stack trace:

    ModuleBuildError: Module build failed (from ./node_modules/@zeit/next-css/node_modules/mini-css-extract-plugin/dist/loader.js):
    ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
    
    @import "_variables.sass"
    ^
          File to import not found or unreadable: _variables.sass.
          in /Users/richard/Documents/code/oddsjar/node_modules/react-bulma-components/src/components/utils.sass (line 3, column 1)
        at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/NormalModule.js:316:20
        at /Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:367:11
        at /Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:233:18
        at context.callback (/Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
        at Object.callback (/Users/richard/Documents/code/oddsjar/node_modules/sass-loader/lib/loader.js:55:13)
        at Object.<anonymous> (/Users/richard/Documents/code/oddsjar/node_modules/async/dist/async.js:2271:31)
        at Object.callback (/Users/richard/Documents/code/oddsjar/node_modules/async/dist/async.js:969:16)
        at options.error (/Users/richard/Documents/code/oddsjar/node_modules/node-sass/lib/index.js:294:32)
        at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/NormalModule.js:316:20
        at /Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:367:11
        at /Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:182:20
        at context.callback (/Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
        at /Users/richard/Documents/code/oddsjar/node_modules/@zeit/next-css/node_modules/mini-css-extract-plugin/dist/loader.js:112:14
        at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compiler.js:343:11
        at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compiler.js:681:15
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
        at AsyncSeriesHook.lazyCompileHook (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/Hook.js:154:20)
        at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compiler.js:678:31
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/Hook.js:154:20)
        at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compilation.js:1423:35
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/Hook.js:154:20)
        at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compilation.js:1414:32
    

    I've tried to follow all the similar issues in the repo but none have yet solved the problem, the only difference I can see is that I am using nextjs 9. I've setup a demo repo here https://github.com/RichAWarren/react-bulma-next-9

    Thanks in advance!

    opened by RichAWarren 18
  • How to use Button with Link from react-router-dom?

    How to use Button with Link from react-router-dom?

    Hello @couds and team :)

    It's not allow in documentation, but still huge important thing β€” how to use Button component from react-bulma-components with Link from react-router-dom?

    For example:

    import React, { Component } from 'react';
    import { Link } from 'react-router-dom';
    
    import Columns from 'react-bulma-components/lib/components/columns';
    import Heading from 'react-bulma-components/lib/components/heading';
    import Button from 'react-bulma-components/lib/components/button';
    
    class Navigation extends Component {
      render () {
        return (
          <Columns className="has-vertical-centered is-mobile" multiline>
            <Columns.Column>
              <div className="field is-grouped is-pulled-right">
                <p className="control">
                  <Link to="/account">
                    <Button color="white" className="is-rounded">
                      <span>My Account</span>
                    </Button>
                  </Link>
                </p>
              </div>
            </Columns.Column>
          </Columns>
        );
      }
    }
    
    export default Navigation;
    

    And generated html code is:

    <div className="has-vertical-centered is-mobile columns is-multiline">
      <div className="column">
        <div className="field is-grouped is-pulled-right">
          <p className="control">
            <a href="/account">
              <a tabIndex="0" className="is-rounded is-white button">
                <span>My Account</span>
              </a>
            </a>
          </p>
      </div>
    </div>
    

    I mean one <a> tag into another <a> tag β€” it's strange and not valid. Okay, I can use renderAs props for Button to change tag to, for example, <span>. But if I do that, I get this error message in Chrome console:

    Warning: Failed prop type: Invalid prop `renderAs` supplied to `Button`.
        in Button (at Navigation.js:19)
        in Navigation (at LandingIndex.js:12)
        in div (at LandingIndex.js:11)
        in div (at LandingIndex.js:10)
        in div (at LandingIndex.js:9)
        in LandingIndex (created by Route)
        in Route (at index.js:18)
        in Switch (at index.js:17)
        in Router (created by BrowserRouter)
        in BrowserRouter (at index.js:16)
    

    How can I work via react-router-dom in right valid way? Please help ;)

    P.S. and one more question.. what component may help me to replace this CSS classes to components: field is-grouped and its options, like is-pulled-right (or center/left)?

    opened by koddr 18
  • How to use it with React FontAwesome component?

    How to use it with React FontAwesome component?

    Hello.

    Would be great to replace icons with React FontAwesome component.

    I have no idea what is the rbc rbc-* icons do you use into React Bulma component, for example, Dropdown component? But...

    Code is:

    import React, { Component } from 'react';
    
    import Hero from 'react-bulma-components/lib/components/hero';
    import Dropdown from 'react-bulma-components/lib/components/dropdown';
    
    class SliderHero extends Component {
      render () {
        return (
          <Hero size="fullheight" color="link">
            <Hero.Body>
              <Dropdown hoverable>
                <Dropdown.Item value="item">
                  Dropdown item
                </Dropdown.Item>
                <Dropdown.Item value="other">
                  Other Dropdown item
                </Dropdown.Item>
                <Dropdown.Item value="active">
                  Active Dropdown item
                </Dropdown.Item>
                <Dropdown.Item value="other 2">
                  Other Dropdown item
                </Dropdown.Item>
                <Dropdown.Divider/>
                <Dropdown.Item value="divider">
                  With divider
                </Dropdown.Item>
              </Dropdown>
            </Hero.Body>
          </Hero>
        );
      }
    }
    
    export default SliderHero;
    

    HTML is:

    <section className="hero is-link is-fullheight">
      <div className="hero-body">
        <div className="dropdown is-hoverable">
          <div className="dropdown-trigger" role="presentation">
            <a tabIndex="0" className="button">
              <span>Dropdown item</span>
              <span className="icon is-small"><i className="rbc rbc-angle-down"></i></span>
            </a>
          </div>
          <div className="dropdown-menu" id="dropdown-menu" role="menu">
            <div className="dropdown-content">
              <div title="item" role="presentation" className="dropdown-item">Dropdown item</div>
              <div title="other" role="presentation" className="dropdown-item">Other Dropdown item</div>
              <div title="active" role="presentation" className="dropdown-item">Active Dropdown item</div>
              <div title="other 2" role="presentation" className="dropdown-item">Other Dropdown item</div>
              <hr className="dropdown-divider">
              <div title="divider" role="presentation" className="dropdown-item">With divider</div>
            </div>
          </div>
        </div>
      </div>
    </section>
    

    And output is:

    screen shot 2018-06-16 at 20 03 05

    How to solve this OR use FontAwesome instead strange rbc-* icons? Please help me.

    opened by koddr 16
  • 2.0.0 missing displayName from all components in the new build and defaultProps boolean noise

    2.0.0 missing displayName from all components in the new build and defaultProps boolean noise

    Hey

    Just upgraded from 1.5.0 to 2.0.0 and noticed all snapshots are now very very different to what they were before.

    eg minified name for Columns is v, Card is p etc:

        -       <Columns
        +       <v
        +         backgroundColor={null}
    
        -       <Card
        +       <p
        +         backgroundColor={null}
    

    this is probably because of webpack 4 optimisation minimise settings for prod where UglifyJS is just being called with defaults. https://webpack.js.org/configuration/optimization/#optimization-minimize

    additionally, there seem to be a lot of new defaultProps across the board. eg Card:

        +         clearfix={false}
        +         clipped={false}
        +         hidden={false}
        +         invisible={false}
        +         italic={false}
        +         marginless={false}
        +         overlay={false}
        +         paddingless={false}
        +         radiusless={false}
    

    this is coming from https://github.com/couds/react-bulma-components/blob/master/src/modifiers/index.js#L16

     defaultProps: {
        clearfix: false,
        pull: undefined,
        marginless: false,
        paddingless: false,
        overlay: false,
        clipped: false,
        radiusless: false,
        shadowless: false,
        unselectable: false,
        invisible: false,
        hidden: false,
      },
    

    there is NO need to add any default props of type Boolean with a falsy value, simply omitting it has the same result in 99% of the cases w/o the noise.

    opened by DimitarChristoff 14
  • Reduce Noise of ForwardRef components

    Reduce Noise of ForwardRef components

    With the addition of the ForwardRef to all components now the React tree its quite difficult to follow with wuite a lot "ForwardRef Component" image

    Solution: Expose 2 components one with Ref and one without, so the developer can import the Component with Ref if necessary.

    enhancement 
    opened by couds 13
  • Added support for .buttons class

    Added support for .buttons class

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

    New component: <Button.Group />
    Props:

    {
      hasAddons: PropTypes.bool,
      position: PropTypes.oneOf([undefined, '', 'centered', 'right']),
      renderAs: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.func 
      ])
    }
    

    New/modified props for <Button />:

    • renderAs now supports <span>
    • { isSelected: PropTypes.bool }

    Closes issue: https://github.com/couds/react-bulma-components/issues/93

    opened by kennethnym 13
  • Filter DOM properties before rendering element

    Filter DOM properties before rendering element

    I have a lot of warnings and errors in my console due to bulma components passing through properties to DOM elements that are not DOM properties.

    Using something like pick react known prop to filter the properties may be useful.

    opened by RickEyre 13
  • Bump express from 4.17.1 to 4.18.2

    Bump express from 4.17.1 to 4.18.2

    Bumps express from 4.17.1 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump qs from 6.5.2 to 6.5.3

    Bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge`: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump loader-utils from 1.4.0 to 1.4.2

    Bump loader-utils from 1.4.0 to 1.4.2

    Bumps loader-utils from 1.4.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Remove misleading title on previous button in Pagination

    Remove misleading title on previous button in Pagination

    I think the title here is misleading, as the previous button is not always the first page.

    Also, the text is not customizable as the Nest/Previous button.

    opened by KirianCaumes 0
Releases(v4.1.0)
  • v4.1.0(Feb 4, 2022)

  • v4.0.7(Jun 28, 2021)

  • v4.0.6(May 28, 2021)

  • v4.0.5(May 28, 2021)

  • v4.0.4(May 13, 2021)

  • v4.0.3(May 5, 2021)

  • v4.0.2(Apr 29, 2021)

  • v4.0.1(Apr 28, 2021)

  • v4.0.0(Apr 24, 2021)

    We Finally release the V4. There are a lot of changes, so dont rush to update. We will try to setup a migration guide (but no promises here sorry u.u)

    • [Breaking Change] Move Bulma as a Peer Dependency
    • [Breaking Change] <List /> component is completely removed.
    • Bump Bulma version to 0.9.2
    • Improves TS support
    • New Storybook, with more details (and hopefully more helpful)
    • Enable Tree shaking by default

    All Components

    • New spacing modifiers. They have the same names as their equivalent Bulma class names. Refer to the official documentation for more information.
      • Usage: pt-0 in Bulma is equivalent to pt={0} in props. Applies to all spacing modifiers.
    • Added srOnly prop to all components to display only on screen readers
    • Add Support to textSize 7
    • [Breaking Change] Improve responsive helper props (mobile, tablet, desktop, widescreen, fullhd, touch, untilWidescreen, untilFullhd)
    • Added invisible to responsive props
    • hidden is now inside display prop, { hidden: true } become { display: 'hidden' }
    • Added invisible prop on all Components
    • [Breaking Change] Renamed the prop value centered to center on all components to use the same everywhere
    • Added display prop with same values as responsive display (bulma currently only support flex, hidden and relative at this level)
    • Added colorVariation prop to hancle light/dark color helpers
    • Added clickable prop
    • Added fontFamily prop

    Breadcrumb

    • [Breaking Change] Removed items props in favor of composition with Breadcrumb.Item

    Breadcrumb.Item

    • New Component

    Botton.Group

    • Deprecated gapless to hasAddons in Button.Group
    • [Breaking Change] Renamed position prop to align

    Columns

    • [Breaking Change] Remove gapless prop
    • [Breaking Change] Add variable gap prop
    • Add gap to responsive option

    Columns.Column

    • Merge common responsive props with Column responsive props

    Container

    • [Breaking Change] Removed fluid prop in favor to add it as an option of the breakpoint prop
    • Added max prop to allow use is-max-desktop and is-max-widescreen from bulma

    Dropdown

    • [Breaking Change] Dropdown component now accept an icon prop that will accept the the component to render the icon
    • [Breaking Change] Removed deprecated align prop in favor of boolean right prop

    Form.Control

    • [Breaking Change] Removed size props (did nothing)
    • Automatically add has-icon-left/right if an Icon with align is on the children

    Footer

    • Update default renderAs to footer

    Form.Field

    • Added size prop that will be also used on childrens that accept size as a prop Input, InputFile, Label, Icon, Button...

    Form.Input

    • [Breaking Change] Removed hovered and focused prop in favor to a state props that accept hover or focus as value

    Form.InputFile

    • Removed centered and right prop in favor to a align props that accept center or right as value

    Form.Label

    • Added size prop that will be used on components inside the Field, like Input, Select, Label...

    Form.Select

    • Added state props that accept hover or focus as value
    • Added rounded prop

    Form.Textarea

    • Removed hovered and focused prop in favor to a state props that accept hover or focus as value

    Hero

    • size prop its ignored if hasNavbar prop is set

    Hero.Head

    • Renamed to Hero.Header

    Icon

    • Removed the icon prop from the Icon component.
    • Add text prop to enable icon-text

    Level

    • Update default renderAs from div to nav

    Media.Content

    • Removed the whole component, use Content component insted

    Media.Item

    • Renamed position prop to align

    Modal

    • Renamed Modal.Card.Head to Modal.Card.Header
    • Renamed Modal.Card.Foot to Modal.Card.Footer
    • Close button on the top-right corner will be displayed always if the showClose prop is passed, (Before if the children was a card was not displayed)
    • Only need to pass onClose prop to Modal component, no need to pass if to any Modal.* any more

    Navbar.Item

    • Removed dropdown prop, it will be added automatically if a Navbar.Dropdown is detected on the childrens.

    Navbar.Container

    • Renamed position prop to align
    • Change align values from start,end to left/right

    Pagination

    • Renamed position prop to align

    Table

    • Add hoverable prop

    Table.Container

    • New Component

    Tile

    • Remove notification prop. You can use renderAs={Notification} if need it
    • Remove color prop.
    Source code(tar.gz)
    Source code(zip)
  • v3.4.0(Jun 29, 2020)

  • v3.1.3(Oct 8, 2019)

  • v3.1.2(Oct 6, 2019)

  • v3.0.1-5(May 3, 2019)

    • Fix Element response helpers on storybook
    • Manually disable pagination buttons
    • Allow multiple dropdown components on a page
    • List items with custom children now are correctly rendered as an anchor
    • Add inputProps to pass down props to the input element for InputFile Component
    • Revert breaking change on TS definition file
    Source code(tar.gz)
    Source code(zip)
  • v3.0.1-4(Mar 1, 2019)

  • v2.2.0(Oct 10, 2018)

  • v2.1.0(Oct 8, 2018)

    • Add color, date propTypes to input
    • Added Gatsby.js v2 webpack info to README.md
    • Refactor component to use Generic Element
    • Show real component name on storybook
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Aug 16, 2018)

    A lot of Internal improvements!!

    • Migrated almost all components to funcional ones again (there are a few that have internal state so they are still classes).
    • Now all components have props for all the Bulma helpers https://bulma.io/documentation/modifiers/
    • The Mobile Menu of the navbar is now a controlled component so you should pass as prop if the menu its opened
    • The Storybook now have the working code of the component For example the Button
    • The Storybook now implement some knob to see how the compoent behave depending of the props
    • Added a new component Element that do no add any bulma class but have all the props to use the helpers Docs
    Source code(tar.gz)
    Source code(zip)
  • v1.5.0(Jun 23, 2018)

    • Updated nodemon to 1.17.5 (#50)
    • Add static class to static buttons (#46)
    • Support for search HTML5 input type (#47)
    • Updated Storybook for Icon component (improve documentation)
    Source code(tar.gz)
    Source code(zip)
  • v1.4.6(Jun 12, 2018)

    • Added support to text-weight helpers for Heading Component
    • Fix inconsistencies on sass files (has ; at the end of the import lines)
    • Added support to number type on Input component
    Source code(tar.gz)
    Source code(zip)
  • v1.4.5(May 28, 2018)

  • v1.4.4(May 28, 2018)

    • Fix Heading component to render a title by default
    • Fix Label component to not render an empty htmlFor by default
    • Add export statement for breadcrumb component
    Source code(tar.gz)
    Source code(zip)
  • v1.4.3(Apr 27, 2018)

  • v1.4.2(Apr 27, 2018)

    • Fix Icon component to not require icon prop (you can use a children component instead)
    • Add missing columns sizes (one-fifth, two-fifths, etc)
    • Update storybook to newer version
    • Prepare Image tag to support new sizes (introduced on Bulma 0.7)
    Source code(tar.gz)
    Source code(zip)
  • v1.3.1(Apr 2, 2018)

  • v1.3.0(Mar 30, 2018)

    • Improve modal component (do not mount if not necessary and pass down class names)
    • Fix names of the coponents to math their namesspaces (ex: ColumnsColumns to Columns.Column)
    Source code(tar.gz)
    Source code(zip)
  • v1.2.2(Mar 26, 2018)

  • 1.2.1(Dec 27, 2017)

  • 1.2.0(Dec 27, 2017)

  • 1.1.3(Dec 27, 2017)

Owner
John
John
Super Saiyan React components, son of awesome Bulma, implemented in TypeScript

Trunx Super Saiyan React components, son of awesome Bulma, implemented in TypeScript Status Almost all Bulma features are available and documented, fe

Gianluca Casati 61 Dec 30, 2022
React.js components for Modern CSS framework based on Flexbox

React-Bulma React.js components for Modern CSS framework based on Flexbox Styleguide: https://kulakowka.github.io/react-bulma/ Official Repo: https://

Anton Kulakov 467 Dec 7, 2022
🌲 Evergreen React UI Framework by Segment

Works out of the box. Evergreen contains a set of polished React components that work out of the box. Flexible & composable. Evergreen components are

Segment 12k Jan 5, 2023
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

grommet 8.1k Jan 7, 2023
React utility component primitives & UI framework for use with Tailwind CSS

Tailwind React UI NB: As the 0.#.# version number suggests this is still very much work in progress, so semantic versioning will not be followed until

Ed Mortlock 267 Dec 28, 2022
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 21.3k Jan 7, 2023
Elastic UI Framework πŸ™Œ

Elastic UI Framework The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic. Not using React?

elastic 5.6k Jan 5, 2023
dataminr-react-components - Collection of reusable React Components and utility functions.

react-components A collection of reusable React components with their own Flux lifecycle. What's inside react-components? Table Component From a simpl

Dataminr 264 Oct 17, 2022
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Microsoft 14.5k Dec 31, 2022
🧩 Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

?? Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

Medly 77 Nov 14, 2022
Nextjs-components - A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation TBD Todo's Unit test coverage Unit tests

null 94 Nov 30, 2022
A React Higher Order Component library to assign class names to components, looks like styled-components

Claas A React Higher Order Component library to assign classNames to components, looks like styled-components Why I always liked to use Tailwind and w

Mohamed Sofiene (Niemand) 8 Sep 14, 2022
Mintlify Components - Open-source library of UI components made with React and TailwindCSS

Mintlify Components Open-source library of UI components made with React and TailwindCSS. Checkout Mintlify.com to see the components in action. Mintl

Mintlify 9 Dec 30, 2022
PyScript-React integrates PyScript library into react components

PyScript-React integrates PyScript library into react components. Making it easier to use inside your react projects ??

null 85 Dec 29, 2022
React-daisyui 🌼 DaisyUI components built with React, Typescript and TailwindCSS

react-daisyui ?? DaisyUI components built with React, Typescript and TailwindCSS. ?? Check out our Storybook | ?? Try it with CodeSandbox ?? Need help

null 373 Dec 30, 2022
TailGrids React is Tailwind UI Components for React Web Projects.

TailGrids React is Tailwind UI Components for React Web Projects. This version is free open-source TailGrids Core that coded specifically for React, so anyone can use TailGrids Tailwind CSS components with your React projects flawlessly.

TailGrids 27 Jan 7, 2023
A React declarative component for converting HTML strings into React componentsπŸš€

React HTML String ?? A React declarative component for converting HTML strings into React components. Avoids the use of dangerouslySetInnerHTML and co

Mo'men Sherif 9 Sep 20, 2022
Bootstrap components built with React

React-Bootstrap Bootstrap 4 components built with React. Docs See the documentation with live editable examples and API documentation. To find the doc

react-bootstrap 21.4k Jan 1, 2023
Simple React Bootstrap 4 components

reactstrap Stateless React Components for Bootstrap 4. Getting Started Follow the create-react-app instructions to get started and then follow the rea

reactstrap 10.4k Jan 3, 2023