From 5ee04b19efe2c7d1449f66fc302011cbc91a1507 Mon Sep 17 00:00:00 2001 From: Devin Fee Date: Sat, 5 Jan 2019 18:27:31 -0800 Subject: [PATCH] added extendability to helpers --- .size-snapshot.json | 18 ++-- README.md | 14 ++- docs/stories/base/generic.story.tsx | 140 +++++++++++++++------------- package.json | 2 +- src/base/helpers.ts | 21 +++-- tsconfig.json | 2 +- 6 files changed, 111 insertions(+), 86 deletions(-) diff --git a/.size-snapshot.json b/.size-snapshot.json index cf13fcce..be4195c5 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -57,21 +57,21 @@ } }, "dist/bundle.cjs.js": { - "bundled": 83751, - "minified": 58456, - "gzipped": 10066 + "bundled": 80540, + "minified": 54420, + "gzipped": 10007 }, "dist/bundle.esm.js": { - "bundled": 82621, - "minified": 57482, - "gzipped": 9821, + "bundled": 76521, + "minified": 50523, + "gzipped": 9693, "treeshaked": { "rollup": { - "code": 43125, - "import_statements": 98 + "code": 36964, + "import_statements": 367 }, "webpack": { - "code": 46036 + "code": 44531 } } } diff --git a/README.md b/README.md index 8c540917..0565ba3e 100644 --- a/README.md +++ b/README.md @@ -54,15 +54,23 @@ export const goHomeLink = ( 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/rbx.sass` as it contains any pertinent bug fixes for Bulma. +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 "~bulma/bulma.sass" -@import "../src/index.sass" +@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. diff --git a/docs/stories/base/generic.story.tsx b/docs/stories/base/generic.story.tsx index 55af9a98..637991e4 100644 --- a/docs/stories/base/generic.story.tsx +++ b/docs/stories/base/generic.story.tsx @@ -13,6 +13,8 @@ import { TEXT_TRANSFORMS, TEXT_WEIGHTS, } from "src/base/helpers"; +import { Card } from "src/components"; +import { Notification } from "src/elements"; import { Section } from "src/layout"; import { @@ -23,47 +25,73 @@ import { selectFactory, } from "docs/stories/utils"; +const asMap = { + undefined: undefined, + div: "div", + span: "span", + card: Card, + notification: Notification, +}; + export const knobs = { as: selectFactory( "as", - iterableToSelectObject(["a", "div", "h1", "p", "span"], { + iterableToSelectObject(Object.keys(asMap), { undefined: "", }), "div", ), - color: { + float: { + clearfix: booleanFactory("clearfix", false), + pull: selectFactory( + "pull", + iterableToSelectObject(FLOAT_PULLED_ALIGNMENTS, { undefined: "" }), + ), + }, + overflow: { + clipped: booleanFactory("clipped", false), + }, + overlay: { + overlay: booleanFactory("overlay", false), + }, + typograpahy: { backgroundColor: selectFactory( "backgroundColor", iterableToSelectObject([...COLORS, ...GREY_COLORS], { undefined: "" }), ), + italic: booleanFactory("italic", false), + textAlignment: selectFactory( + "textAlignemnt", + iterableToSelectObject(TEXT_ALIGNMENTS, { undefined: "" }), + ), textColor: selectFactory( "textColor", iterableToSelectObject([...COLORS, ...GREY_COLORS], { undefined: "" }), ), + textSize: selectFactory( + "textSize", + iterableToSelectObject(TEXT_SIZES, { undefined: "" }), + ), + textTransform: selectFactory( + "textTransform", + iterableToSelectObject(TEXT_TRANSFORMS, { undefined: "" }), + ), + textWeight: selectFactory( + "textWeight", + iterableToSelectObject(TEXT_WEIGHTS, { undefined: "" }), + ), + }, + visibility: { + hidden: booleanFactory("hidden", false), + invisible: booleanFactory("invisible", false), + srOnly: booleanFactory("srOnly", false), }, - helpers: { - float: { - clearfix: booleanFactory("clearfix", false), - pull: selectFactory( - "pull", - iterableToSelectObject(FLOAT_PULLED_ALIGNMENTS, { undefined: "" }), - ), - }, - spacing: { - marginless: booleanFactory("marginless", false), - paddingless: booleanFactory("paddingless", false), - }, - // tslint:disable-next-line:object-literal-sort-keys - other: { - clipped: booleanFactory("clipped", false), - hidden: booleanFactory("hidden", false), - invisible: booleanFactory("invisible", false), - overlay: booleanFactory("overlay", false), - radiusless: booleanFactory("radiusless", false), - shadowless: booleanFactory("shadowless", false), - srOnly: booleanFactory("srOnly", false), - unselectable: booleanFactory("unselectable", false), - }, + other: { + marginless: booleanFactory("marginless", false), + paddingless: booleanFactory("paddingless", false), + radiusless: booleanFactory("radiusless", false), + shadowless: booleanFactory("shadowless", false), + unselectable: booleanFactory("unselectable", false), }, responsive: { ...BREAKPOINTS.map(breakpoint => { @@ -109,40 +137,19 @@ export const knobs = { return { [breakpoint]: { display, hide, textAlignment, textSize } }; }).reduce((acc, cv) => ({ ...acc, ...cv }), {}), }, - typography: { - italic: booleanFactory("italic", false), - textAlignment: selectFactory( - "textAlignemnt", - iterableToSelectObject(TEXT_ALIGNMENTS, { undefined: "" }), - ), - textSize: selectFactory( - "textSize", - iterableToSelectObject(TEXT_SIZES, { undefined: "" }), - ), - textTransform: selectFactory( - "textTransform", - iterableToSelectObject(TEXT_TRANSFORMS, { undefined: "" }), - ), - textWeight: selectFactory( - "textWeight", - iterableToSelectObject(TEXT_WEIGHTS, { undefined: "" }), - ), - }, }; storiesOf("Base", module) .addDecorator(story =>
) .add("Generic", () => { const props = filterUndefined({ - // generic - as: knobs.as({ group: "as" }), - // colors - ...mapFactories(knobs.color, "Color"), - // helpers - ...mapFactories(knobs.helpers.float, "Helpers"), - ...mapFactories(knobs.helpers.spacing, "Helpers"), - ...mapFactories(knobs.helpers.other, "Helpers"), - // responsive + as: asMap[knobs.as({ group: "as" })], + ...mapFactories(knobs.float, "Float"), + ...mapFactories(knobs.overflow, "Overflow"), + ...mapFactories(knobs.overlay, "Overlay"), + ...mapFactories(knobs.typograpahy, "Typography"), + ...mapFactories(knobs.visibility, "Visibility"), + ...mapFactories(knobs.other, "Other"), responsive: { ...BREAKPOINTS.map(breakpoint => ({ [breakpoint]: { @@ -162,21 +169,26 @@ storiesOf("Base", module) }, })).reduce((acc, cv) => ({ ...acc, ...cv }), {}), }, - ...mapFactories(knobs.typography, "Typography"), }); return ( - This is the Generic component. -
- It takes advantage of all the modifiers available with Bulma. -
- It supports ref forwarding (using the `ref` prop). -
- In addition, you can render this component as any other component (with - the `as` prop). -
- All components support these features. +

+ This is the Generic component. +
+ All components render through this – meaning that these props are + available to all components +
+ It supports ref forwarding (using the `ref` prop). +
+ In addition, you can render this component as any other component + (like a Card or Notification) or JSX + Element (like a div or span), using + the `as` + prop. +

+
+

Customize this element with the knobs below.

 ); }); diff --git a/package.json b/package.json index 3d173e4d..b6c569f7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rbx", - "version": "1.0.0-beta.7", + "version": "1.0.0-beta.8", "description": "The Comprehensive Bulma UI Framework for React", "main": "dist/bundle.cjs.js", "module": "dist/bundle.esm.js", diff --git a/src/base/helpers.ts b/src/base/helpers.ts index 99fa1186..bda3c5a6 100644 --- a/src/base/helpers.ts +++ b/src/base/helpers.ts @@ -1,7 +1,7 @@ import classNames from "classnames"; import * as PropTypes from "prop-types"; -import { Omit } from "src/types"; +import { Omit, Prefer } from "src/types"; import { tuple } from "src/utils"; /** @@ -499,13 +499,18 @@ export const transformResponsiveHelpers: TransformFunc< /** * Union of helpers */ -export type HelpersProps = FloatHelpersProps & - OverflowHelpersProps & - OverlayHelpersProps & - TypographyHelpersProps & - VisibilityHelpersProps & - OtherHelpersProps & - ResponsiveHelpersProps & { className?: string }; +export type HelpersPropsOverrides = {}; + +export type HelpersProps = Prefer< + HelpersPropsOverrides, + FloatHelpersProps & + OverflowHelpersProps & + OverlayHelpersProps & + TypographyHelpersProps & + VisibilityHelpersProps & + OtherHelpersProps & + ResponsiveHelpersProps & { className?: string } +>; export const helpersPropTypes = { ...floatHelpersPropTypes, diff --git a/tsconfig.json b/tsconfig.json index e122eede..10ecbf23 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,5 +21,5 @@ // "include": ["src"], // "exclude": ["node_modules", "dist", "docs"] "include": ["src", "docs"], - "exclude": ["node_modules", "dist"] + "exclude": ["node_modules", "dist", "docs/build"] }