added extendability to helpers

zookatron · Jan 6, 2019 · 5ee04b1 · 5ee04b1
1 parent cf886f7
commit 5ee04b1
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 86 deletions.
diff --git 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
@@ -54,15 +54,23 @@ export const goHomeLink = (
 
 To override the variables set by Bulma, install Bulma (`npm install [email protected]`), 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
@@ -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 => <Section children={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 (
       <Generic {...props}>
-        This is the Generic component.
-        <br />
-        It takes advantage of all the modifiers available with Bulma.
-        <br />
-        It supports ref forwarding (using the `ref` prop).
-        <br />
-        In addition, you can render this component as any other component (with
-        the `as` prop).
-        <br />
-        All components support these features.
+        <p>
+          This is the <strong>Generic</strong> component.
+          <br />
+          All components render through this – meaning that these props are
+          available to all components
+          <br />
+          It supports ref forwarding (using the <strong>`ref`</strong> prop).
+          <br />
+          In addition, you can render this component as any other component
+          (like a <strong>Card</strong> or <strong>Notification</strong>) or JSX
+          Element (like a <strong>div</strong> or <strong>span</strong>), using
+          the <strong>`as`</strong>
+          prop.
+        </p>
+        <hr />
+        <p>Customize this element with the knobs below.</p>
       </Generic>
     );
   });
diff --git 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
@@ -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
@@ -21,5 +21,5 @@
   // "include": ["src"],
   // "exclude": ["node_modules", "dist", "docs"]
   "include": ["src", "docs"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "docs/build"]
 }