diff --git a/README.md b/README.md index 0565ba3e..1acbac71 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,6 @@ -## 👟 rbx – The Comprehensive Bulma UI Framework for React +## rbx + +### The Comprehensive Bulma UI Framework for React [![Build Status](https://travis-ci.org/dfee/rbx.svg?branch=master)](https://travis-ci.org/dfee/rbx) [![Coverage Status](https://coveralls.io/repos/github/dfee/rbx/badge.svg?branch=master)](https://coveralls.io/github/dfee/rbx?branch=master) @@ -7,15 +9,25 @@ `rbx` is a comprehensive library of React components for [Bulma 0.7.2](http://bulma.io). -🔥 **[Read the docs](https://dfee.github.io/rbx/stories)**. - +👟 **[Read the docs](https://dfee.github.io/rbx)**. 🙃 _I'll wait, go check them out!_ -### To Install +![A quick look](src/__docs__/public/demo.png?raw=true "A quick look") + +### Features + +- up-to-date Bulma implementation (0.7.2) +- written with TypeScript 3 for React 16 +- well tested and documented +- extensive customization support +- _quite unopinionated, if you ask me_ +- **very simple to get started** + +### To install `npm install rbx` or `yarn add rbx` -### To Use +### To use ```tsx import "rbx/index.css"; @@ -32,63 +44,14 @@ 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`. -For example, to render a `Button` component as a `react-router` `Link`: - -```tsx -import { Button } from "rbx"; -import { Link } from "react-router-dom"; - -export const goHomeLink = ( - -); -``` - -### Customize Bulma - -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/dist/rbx.sass` as it contains any pertinent bug fixes for Bulma. - -A minimal example of `App.sass` might look like: - -```sass -$primary: #61dafb - -@import "~rbx/dist/index.sass" -``` - -Or, for further customization; - -```sass -$primary: #61dafb - -@import "~bulma/bulma.sass" // alternatively, select which parts to include. -@import "~rbx/dist/rbx.sass" -``` - -Then, import this file somewhere in your project. - -#### Create React App +Documentation for all the components, information on customization, a defense of design, and more is available at the [canonical rbx documentation](https://dfee.github.io/rbx) -Create React App 2 supports SASS compilation out of the box. +### License -To get started, please follow the [official instructions](https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet) to enable this feature. +**rbx** is available under the [MIT License](https://opensource.org/licenses/MIT). -Then, create a SASS file in your project (as described above): - -Finally, import this stylesheet somewhere in your CRA app. - -```js -import "./App.sass"; -``` +The sneaker logo is a modified version of the [Twitter Twemoji](https://github.com/twitter/twemoji) _running shoe_ under the [Creative Commons Attribution License](https://creativecommons.org/licenses/by/4.0/). -#### Prior Art +### Prior Art This package was forked from [`react-bulma-components`](https://github.com/couds/react-bulma-components`), and re-written in its entirety to support the latest version of Bulma, use TypeScript, and fix many outstanding bugs. diff --git a/doczrc.js b/doczrc.js index 928def21..235454f5 100644 --- a/doczrc.js +++ b/doczrc.js @@ -1,7 +1,6 @@ -// https://www.docz.site/documentation/project-configuration - const path = require("path"); +// https://www.docz.site/documentation/project-configuration export default { base: "/rbx", // unfortnately, "too-many-modules" @@ -9,9 +8,9 @@ export default { codeSandbox: false, description: "The Comprehensive Bulma UI Framework for React. This is a lightweight, yet robust, React framework that enables rapid, beautiful web development.", - files: "**/*(.docs)?*.mdx", + files: "**/[^_]*(.docs)?*.mdx", htmlContext: { - favicon: "/rbx/public/favicon.ico" + favicon: "/rbx/public/favicon.ico", }, indexHtml: "src/__docs__/index.html", modifyBundlerConfig: config => { @@ -20,7 +19,7 @@ export default { config.entry.app.push("src/index.sass"); config.module.rules.push({ test: /\.s[ac]ss$/, - use: ["style-loader", "css-loader", "sass-loader"] + use: ["style-loader", "css-loader", "sass-loader"], }); return config; @@ -40,20 +39,24 @@ export default { negative: "#121212", blue: "#3273dc", skyBlue: "#209cee", - primary: "#00d1b2", + primary: "#3273dc", codeColor: "#ff3860", codeBg: "#f5f5f5", sidebarBg: "#f5f5f5", text: "#4a4a4a", - link: "#3273dc" + link: "#3273dc", + }, + logo: { + src: "/rbx/public/logo-wide.svg", + width: "150px", }, styles: { code: { fontFamily: "monospace", - padding: "0.25em 0.5em" - } - } + padding: "0.25em 0.5em", + }, + }, }, - title: "👟 rbx", - typescript: true + title: "rbx", + typescript: true, }; diff --git a/rbx.code-workspace b/rbx.code-workspace new file mode 100644 index 00000000..c7223d8e --- /dev/null +++ b/rbx.code-workspace @@ -0,0 +1,7 @@ +{ + "folders": [ + { + "path": "." + } + ] +} diff --git a/src/__docs__/_component.docs.mdx.tmpl b/src/__docs__/_component.docs.mdx similarity index 100% rename from src/__docs__/_component.docs.mdx.tmpl rename to src/__docs__/_component.docs.mdx diff --git a/src/__docs__/_demo.mdx b/src/__docs__/_demo.mdx new file mode 100644 index 00000000..d690bc75 --- /dev/null +++ b/src/__docs__/_demo.mdx @@ -0,0 +1,357 @@ +--- +name: Demo +route: /demo +--- + +import { + faBan, + faEnvelope, + faCheck, + faStar, + faCheckSquare, + faCodeBranch, + faExclamationTriangle, + faUser, + faHome, + faInfoCircle, + faDownload, +} from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { Link } from "docz"; + +import { + Block, + Breadcrumb, + Box, + Button, + Card, + Column, + Control, + Content, + Container, + Delete, + Field, + Icon, + Help, + Input, + Image, + Label, + Notification, + Pagination, + Select, + Radio, + Tag, + Textarea, + Tile, + Title, +} from "src"; +import { DEFAULTS } from "src/base/helpers/variables"; +import { BREADCRUMB_DEFAULTS } from "src/components/breadcrumb/breadcrumb"; +import { PAGINATION_DEFAULTS } from "src/components/pagination/pagination"; +import LogoWide from "./public/logo-wide.svg"; + + + + + + + + + + + + Buttons + + + + {DEFAULTS.colors.map((color, i) => ( + + + + + + + Do not enter the first zero + + + + + + + + + + + + + + + + + + + + + + + + + {["Yes", "No"].map(value => ( + + ))} + + + + + + + + + + + + + + This field is required + + + + + + + + + + +