diff --git a/.size-snapshot.json b/.size-snapshot.json index 3dd6e146..aab863b7 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -36,5 +36,43 @@ "code": 45291 } } + }, + "dist/index.cjs.js": { + "bundled": 88776, + "minified": 58882, + "gzipped": 10585 + }, + "dist/rbx.esm.js": { + "bundled": 87646, + "minified": 57908, + "gzipped": 10344, + "treeshaked": { + "rollup": { + "code": 42405, + "import_statements": 98 + }, + "webpack": { + "code": 45291 + } + } + }, + "dist/bundle.cjs.js": { + "bundled": 88776, + "minified": 58882, + "gzipped": 10585 + }, + "dist/bundle.esm.js": { + "bundled": 87646, + "minified": 57908, + "gzipped": 10344, + "treeshaked": { + "rollup": { + "code": 42405, + "import_statements": 98 + }, + "webpack": { + "code": 45291 + } + } } } diff --git a/README.md b/README.md index ef826360..4e5cb3f8 100644 --- a/README.md +++ b/README.md @@ -13,19 +13,14 @@ ### To Install -`npm install rbx bulma@0.7.2` or `yarn add rbx bulma@0.7.2` +`npm install rbx` or `yarn add rbx` ### To Use -Follow the instructions below for adding `sass` support to your webpack configuration, and then: - ```tsx +import "rbx/index.css"; import React from "react"; import { Columns } from "rbx"; -/** - * Alternatively, you can import only the components you need - */ -import { Columns } from "rbx/grid/columns"; export const MyPage = () => ( @@ -37,6 +32,8 @@ export const MyPage = () => ( ); ``` +To customize Bulma (including colors), follow the instructions below. + ### Library All components support ref-forwarding, and are able to render as any other React Component Type you want to provide, by using the special prop `as`. @@ -116,13 +113,11 @@ While some components may slightly differ from the Bulma API, these changes are | Hero | [Stories](https://dfee.github.io/rbx/?selectedKind=Layout%2FHero) | [Documentation](http://bulma.io/documentation/layout/hero/) | | Section | [Stories](https://dfee.github.io/rbx/?selectedKind=Layout%2FSection) | [Documentation](http://bulma.io/documentation/layout/section/) | -### Styling - -#### SASS Support +### Customize Bulma -To override the variables set by Bulma, [follow the Bulma instructions](https://bulma.io/documentation/customize/variables/). +To override the variables set by Bulma, install Bulma (`npm install bulma@0.7.2`), and [follow the Bulma instructions](https://bulma.io/documentation/customize/variables/). -You will also need to import `rbx/index.sass` as it contains any pertinent bug fixes for Bulma. +You will also need to import `rbx/rbx.sass` as it contains any pertinent bug fixes for Bulma. A minimal example of `style.sass` might look like: @@ -148,10 +143,3 @@ Finally, import this stylesheet somewhere in your CRA app. ```js import "./App.sass"; ``` - -#### Etc. - -This library was hard-forked from [`react-bulma-components`](https://github.com/couds/react-bulma-components) and has been rewritten in its entirety from scratch. - -If you're coming from that library, expect some breaking changes - largely due to stylistic interpretations of the Bulma API and a propensity to keep the React component names semantic. -In addition, there were **many** additions and bug fixes required to bring this library into compliance with the latest release of Bulma. diff --git a/package.json b/package.json index f123cbab..6a260210 100644 --- a/package.json +++ b/package.json @@ -1,19 +1,15 @@ { "name": "rbx", - "version": "1.0.0-beta.2", + "version": "1.0.0-beta.3", "description": "The Comprehensive Bulma UI Framework for React", - "main": "lib/index.js", - "module": "es/index.js", + "main": "dist/bundle.cjs.js", + "module": "dist/bundle.esm.js", "files": [ - "dist", - "es", - "lib" + "dist" ], "types": "dist/index.d.ts", "scripts": { - "build:dist": "rollup -c", - "build:lib": "tsc -project tsconfig.build.json && cpx \"src/**/*.sass\" lib", - "build": "npm run clean && npm run build:dist && npm run build:lib", + "build": "npm run clean && rollup -c && cpx \"src/**/*.sass\" dist", "clean": "rimraf dist es lib", "coveralls": "cat ./.coverage/lcov.info | coveralls", "lint": "tslint --project .", diff --git a/rollup.config.js b/rollup.config.js index fe2baa0b..80c1ba3d 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -28,7 +28,7 @@ export default { sourcemap: true }, { - file: "dist/index.js", + file: pkg.main, format: "cjs", globals, sourcemap: true @@ -40,7 +40,7 @@ export default { moduleDirectory: "compiled" } }), - sass({ output: true }), + sass({ output: "dist/index.css" }), typescript({ tsconfig: "tsconfig.build.json", typescript: require("typescript") diff --git a/src/index.sass b/src/index.sass index fbe582bf..74806b46 100644 --- a/src/index.sass +++ b/src/index.sass @@ -1,5 +1,2 @@ -// https://github.com/jgthms/bulma/issues/2271 -.checkbox, .radio - &.is-disabled - color: $input-disabled-color - cursor: not-allowed +@import "~bulma/bulma.sass" +@import "./rbx.sass" diff --git a/src/index.ts b/src/index.ts index 564fd04e..08e80f87 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,3 +3,4 @@ export * from "./components"; export * from "./elements"; export * from "./grid"; export * from "./layout"; +import "./index.sass"; diff --git a/src/rbx.sass b/src/rbx.sass new file mode 100644 index 00000000..fbe582bf --- /dev/null +++ b/src/rbx.sass @@ -0,0 +1,5 @@ +// https://github.com/jgthms/bulma/issues/2271 +.checkbox, .radio + &.is-disabled + color: $input-disabled-color + cursor: not-allowed