From 23b8aea4a4fdd4e54e664d97cd3d58b25ea3eab7 Mon Sep 17 00:00:00 2001 From: Devin Fee Date: Sat, 15 Dec 2018 11:19:07 -0800 Subject: [PATCH] refactored modifiers -> base/helpers to better reflect bulma structure --- package-lock.json | 2 +- .../__snapshots__/index.test.ts.snap | 1 + src/base/__tests__/helpers.test.ts | 399 ++++++++++++++++++ src/base/generic.tsx | 6 +- src/base/helpers.ts | 380 +++++++++++++++++ src/base/index.ts | 1 + src/components/breadcrumb/breadcrumb-item.tsx | 7 +- src/components/breadcrumb/breadcrumb.tsx | 7 +- src/components/card/card-content.tsx | 7 +- src/components/card/card-footer-item.tsx | 7 +- src/components/card/card-footer.tsx | 7 +- src/components/card/card-header-icon.tsx | 7 +- src/components/card/card-header-title.tsx | 7 +- src/components/card/card-header.tsx | 7 +- src/components/card/card-image.tsx | 7 +- src/components/card/card.tsx | 7 +- src/components/dropdown/dropdown-content.tsx | 7 +- src/components/dropdown/dropdown-divider.tsx | 7 +- src/components/dropdown/dropdown-item.tsx | 7 +- src/components/dropdown/dropdown-menu.tsx | 7 +- src/components/dropdown/dropdown-trigger.tsx | 7 +- src/components/dropdown/dropdown.tsx | 7 +- src/components/level/__tests__/level.test.tsx | 2 +- src/components/level/level-item.tsx | 7 +- src/components/level/level-left.tsx | 7 +- src/components/level/level-right.tsx | 7 +- src/components/level/level.tsx | 9 +- src/components/list/list-item.tsx | 7 +- src/components/list/list.tsx | 7 +- src/components/media/media-item.tsx | 7 +- src/components/media/media.tsx | 7 +- src/components/menu/menu-label.tsx | 7 +- src/components/menu/menu-list-item.tsx | 10 +- src/components/menu/menu-list.tsx | 7 +- src/components/menu/menu.tsx | 7 +- .../message/__tests__/message.test.tsx | 2 +- src/components/message/message-body.tsx | 7 +- src/components/message/message-header.tsx | 7 +- src/components/message/message.tsx | 9 +- src/components/modal/modal-background.tsx | 7 +- src/components/modal/modal-card-body.tsx | 7 +- src/components/modal/modal-card-foot.tsx | 7 +- src/components/modal/modal-card-head.tsx | 7 +- src/components/modal/modal-card-title.tsx | 7 +- src/components/modal/modal-card.tsx | 7 +- src/components/modal/modal-close.tsx | 7 +- src/components/modal/modal-content.tsx | 7 +- .../navbar/__tests__/navbar.test.tsx | 2 +- src/components/navbar/navbar-brand.tsx | 7 +- src/components/navbar/navbar-burger.tsx | 7 +- src/components/navbar/navbar-divider.tsx | 7 +- src/components/navbar/navbar-dropdown.tsx | 7 +- src/components/navbar/navbar-end.tsx | 7 +- src/components/navbar/navbar-item.tsx | 7 +- src/components/navbar/navbar-link.tsx | 7 +- src/components/navbar/navbar-menu.tsx | 7 +- src/components/navbar/navbar-start.tsx | 7 +- src/components/navbar/navbar.tsx | 9 +- .../pagination/pagination-ellipsis.tsx | 7 +- src/components/pagination/pagination-link.tsx | 7 +- src/components/pagination/pagination-list.tsx | 7 +- src/components/pagination/pagination-next.tsx | 7 +- .../pagination/pagination-previous.tsx | 7 +- src/components/pagination/pagination.tsx | 7 +- src/components/panel/panel-block.tsx | 7 +- src/components/panel/panel-heading.tsx | 7 +- src/components/panel/panel-icon.tsx | 7 +- src/components/panel/panel-tab.tsx | 7 +- src/components/panel/panel-tabs.tsx | 7 +- src/components/panel/panel.tsx | 7 +- src/components/tabs/tab.tsx | 7 +- src/components/tabs/tabs.tsx | 7 +- src/elements/box/box.tsx | 7 +- src/elements/button/__tests__/button.test.tsx | 2 +- src/elements/button/button-group.tsx | 7 +- src/elements/button/button.tsx | 9 +- .../container/__tests__/container.test.tsx | 2 +- src/elements/container/container.tsx | 9 +- .../content/content-ordered-list-item.tsx | 7 +- src/elements/content/content-ordered-list.tsx | 7 +- src/elements/content/content.tsx | 7 +- src/elements/form/__tests__/file.test.tsx | 2 +- src/elements/form/__tests__/input.test.tsx | 2 +- .../form/__tests__/select-container.test.tsx | 2 +- src/elements/form/__tests__/textarea.test.tsx | 2 +- src/elements/form/checkbox.tsx | 7 +- src/elements/form/control.tsx | 7 +- src/elements/form/field-body.tsx | 7 +- src/elements/form/field-label.tsx | 7 +- src/elements/form/field.tsx | 7 +- src/elements/form/file-cta.tsx | 7 +- src/elements/form/file-icon.tsx | 7 +- src/elements/form/file-input.tsx | 7 +- src/elements/form/file-label.tsx | 7 +- src/elements/form/file-name.tsx | 7 +- src/elements/form/file.tsx | 9 +- src/elements/form/help.tsx | 9 +- src/elements/form/input.tsx | 9 +- src/elements/form/label.tsx | 7 +- src/elements/form/radio.tsx | 7 +- src/elements/form/select-container.tsx | 9 +- src/elements/form/select-option.tsx | 7 +- src/elements/form/select.tsx | 7 +- src/elements/form/textarea.tsx | 9 +- src/elements/icon/__tests__/icon.test.tsx | 2 +- src/elements/icon/icon.tsx | 9 +- src/elements/image/image-container.tsx | 7 +- src/elements/image/image.tsx | 7 +- .../__tests__/notification.test.tsx | 2 +- src/elements/notification/notification.tsx | 9 +- src/elements/other/block.tsx | 7 +- src/elements/other/delete.tsx | 7 +- src/elements/other/heading.tsx | 7 +- src/elements/other/highlight.tsx | 7 +- src/elements/other/loader.tsx | 7 +- src/elements/other/numeric.tsx | 7 +- .../progress/__tests__/progress.test.tsx | 2 +- src/elements/progress/progress.tsx | 9 +- src/elements/table/table.tsx | 7 +- src/elements/tag/__tests__/tag.test.tsx | 2 +- src/elements/tag/tag-group.tsx | 7 +- src/elements/tag/tag.tsx | 9 +- src/elements/title/title.tsx | 7 +- src/grid/columns/__tests__/columns.test.tsx | 2 +- src/grid/columns/column.tsx | 7 +- src/grid/columns/columns.tsx | 9 +- src/grid/tiles/__tests__/tile.test.tsx | 2 +- src/grid/tiles/tile.tsx | 9 +- src/layout/footer/footer.tsx | 7 +- src/layout/hero/__tests__/hero.test.tsx | 2 +- src/layout/hero/hero-body.tsx | 7 +- src/layout/hero/hero-foot.tsx | 7 +- src/layout/hero/hero-head.tsx | 7 +- src/layout/hero/hero.tsx | 9 +- src/layout/section/section.tsx | 7 +- src/modifiers/__tests__/color.test.ts | 33 -- src/modifiers/__tests__/helpers.test.ts | 143 ------- src/modifiers/__tests__/index.test.ts | 43 -- src/modifiers/__tests__/responsive.test.ts | 129 ------ src/modifiers/__tests__/typography.test.ts | 65 --- src/modifiers/color.ts | 45 -- src/modifiers/helpers.ts | 87 ---- src/modifiers/index.ts | 18 - src/modifiers/responsive.ts | 118 ------ src/modifiers/typography.ts | 36 -- src/modifiers/utils.ts | 19 - stories/base/base.story.tsx | 2 +- stories/elements/button.story.tsx | 2 +- stories/elements/container.story.tsx | 2 +- stories/grid/columns.story.tsx | 4 +- stories/modifiers.ts | 8 +- 151 files changed, 1168 insertions(+), 1235 deletions(-) create mode 100644 src/base/__tests__/helpers.test.ts create mode 100644 src/base/helpers.ts delete mode 100644 src/modifiers/__tests__/color.test.ts delete mode 100644 src/modifiers/__tests__/helpers.test.ts delete mode 100644 src/modifiers/__tests__/index.test.ts delete mode 100644 src/modifiers/__tests__/responsive.test.ts delete mode 100644 src/modifiers/__tests__/typography.test.ts delete mode 100644 src/modifiers/color.ts delete mode 100644 src/modifiers/helpers.ts delete mode 100644 src/modifiers/index.ts delete mode 100644 src/modifiers/responsive.ts delete mode 100644 src/modifiers/typography.ts delete mode 100644 src/modifiers/utils.ts diff --git a/package-lock.json b/package-lock.json index 8995ff69..058e2426 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "rbx", - "version": "1.0.0-beta", + "version": "1.0.0-beta.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/__tests__/__snapshots__/index.test.ts.snap b/src/__tests__/__snapshots__/index.test.ts.snap index 86d3981a..d7ce7a7d 100644 --- a/src/__tests__/__snapshots__/index.test.ts.snap +++ b/src/__tests__/__snapshots__/index.test.ts.snap @@ -865,5 +865,6 @@ Object { "render": [Function], }, "forwardRefAs": [Function], + "transformHelpers": [Function], } `; diff --git a/src/base/__tests__/helpers.test.ts b/src/base/__tests__/helpers.test.ts new file mode 100644 index 00000000..5ae39af9 --- /dev/null +++ b/src/base/__tests__/helpers.test.ts @@ -0,0 +1,399 @@ +import { + BREAKPOINTS, + COLORS, + DISPLAYS, + FLOAT_PULLED_ALIGNMENTS, + GREY_COLORS, + TEXT_ALIGNMENTS, + TEXT_SIZES, + TEXT_TRANSFORMS, + TEXT_WEIGHTS, + transformFloatHelpers, + transformHelpers, + transformOtherHelpers, + transformOverflowHelpers, + transformOverlayHelpers, + transformResponsiveHelpers, + transformTypographyHelpers, + transformVisibilityHelpers, +} from "../helpers"; + +const makeItShouldPreserveUnknown = (transformer: any) => + it("should preserve unknown props", () => { + const props = { foo: "bar" }; + expect(transformer(props)).toEqual(props); + }); + +const makeItShouldNotSetClassNameOnEmpty = (transformer: any) => + it("should not set className on empty", () => { + expect(transformer({})).toEqual({}); + }); + +const makeItShouldPreserveCustomClassName = (transformer: any) => + it("should preserve custom className", () => { + const className = "foo"; + expect(transformer({ className })).toEqual({ className }); + }); + +describe("Float helpers", () => { + const transformer = transformFloatHelpers; + makeItShouldPreserveUnknown(transformer); + makeItShouldNotSetClassNameOnEmpty(transformer); + makeItShouldPreserveCustomClassName(transformer); + + [false, true].map(clearfix => + it(`should ${clearfix ? "" : "not "}be clearfix`, () => { + expect(transformer({ clearfix })).toEqual( + clearfix ? { className: "is-clearfix" } : {}, + ); + }), + ); + + FLOAT_PULLED_ALIGNMENTS.map(align => + it(`should pull ${align}`, () => { + expect(transformer({ pull: align })).toEqual({ + className: `is-pulled-${align}`, + }); + }), + ); +}); + +describe("Overflow helpers", () => { + const transformer = transformOverflowHelpers; + makeItShouldPreserveUnknown(transformer); + makeItShouldNotSetClassNameOnEmpty(transformer); + makeItShouldPreserveCustomClassName(transformer); + + [false, true].map(clipped => + it(`should ${clipped ? "" : "not "}be clipped`, () => { + expect(transformer({ clipped })).toEqual( + clipped ? { className: "is-clipped" } : {}, + ); + }), + ); +}); + +describe("Overlay helpers", () => { + const transformer = transformOverlayHelpers; + makeItShouldPreserveUnknown(transformer); + makeItShouldNotSetClassNameOnEmpty(transformer); + makeItShouldPreserveCustomClassName(transformer); + + [false, true].map(overlay => + it(`should ${overlay ? "" : "not "}be overlay`, () => { + expect(transformer({ overlay })).toEqual( + overlay ? { className: "is-overlay" } : {}, + ); + }), + ); +}); + +describe("Typography modifiers", () => { + const transformer = transformTypographyHelpers; + makeItShouldPreserveUnknown(transformer); + makeItShouldNotSetClassNameOnEmpty(transformer); + makeItShouldPreserveCustomClassName(transformer); + + it("should not set className on empty", () => { + expect(transformer({})).toEqual({}); + }); + + it("should preserve custom className", () => { + const className = "foo"; + expect(transformer({ className })).toEqual({ className }); + }); + + [...COLORS, ...GREY_COLORS].map(color => + it(`should make background-color ${color}`, () => { + expect(transformer({ backgroundColor: color })).toEqual({ + className: `has-background-${color}`, + }); + }), + ); + + [false, true].map(italic => + it(`should ${italic ? "" : "not "}be italic`, () => { + expect(transformer({ italic })).toEqual( + italic ? { className: "is-italic" } : {}, + ); + }), + ); + + TEXT_ALIGNMENTS.map(align => + it(`should align ${align}`, () => { + expect(transformer({ textAlignment: align })).toEqual({ + className: `has-text-${align}`, + }); + }), + ); + + [...COLORS, ...GREY_COLORS].map(color => + it(`should make text-color ${color}`, () => { + expect(transformer({ textColor: color })).toEqual({ + className: `has-text-${color}`, + }); + }), + ); + + TEXT_SIZES.map(size => + it(`should be size ${size}`, () => { + expect(transformer({ textSize: size })).toEqual({ + className: `is-size-${size}`, + }); + }), + ); + + TEXT_TRANSFORMS.map(textTransform => + it(`should be ${textTransform}`, () => { + expect(transformer({ textTransform })).toEqual({ + className: `is-${textTransform}`, + }); + }), + ); + + TEXT_WEIGHTS.map(weight => + it(`should be ${weight}`, () => { + expect(transformer({ textWeight: weight })).toEqual({ + className: `has-text-weight-${weight}`, + }); + }), + ); +}); + +describe("Visibility helpers", () => { + const transformer = transformVisibilityHelpers; + makeItShouldPreserveUnknown(transformer); + makeItShouldNotSetClassNameOnEmpty(transformer); + makeItShouldPreserveCustomClassName(transformer); + + [false, true].map(hidden => + it(`should ${hidden ? "" : "not "}be hidden`, () => { + expect(transformer({ hidden })).toEqual( + hidden ? { className: "is-hidden" } : {}, + ); + }), + ); + + [false, true].map(invisible => + it(`should ${invisible ? "" : "not "}be invisible`, () => { + expect(transformer({ invisible })).toEqual( + invisible ? { className: "is-invisible" } : {}, + ); + }), + ); + + [false, true].map(srOnly => + it(`should ${srOnly ? "" : "not "}be srOnly`, () => { + expect(transformer({ srOnly })).toEqual( + srOnly ? { className: "is-sr-only" } : {}, + ); + }), + ); +}); + +describe("Other helpers", () => { + const transformer = transformOtherHelpers; + makeItShouldPreserveUnknown(transformer); + makeItShouldNotSetClassNameOnEmpty(transformer); + makeItShouldPreserveCustomClassName(transformer); + + [false, true].map(marginless => + it(`should ${marginless ? "" : "not "}be marginless`, () => { + expect(transformer({ marginless })).toEqual( + marginless ? { className: "is-marginless" } : {}, + ); + }), + ); + + [false, true].map(paddingless => + it(`should ${paddingless ? "" : "not "}be paddingless`, () => { + expect(transformer({ paddingless })).toEqual( + paddingless ? { className: "is-paddingless" } : {}, + ); + }), + ); + + [false, true].map(radiusless => + it(`should ${radiusless ? "" : "not "}be radiusless`, () => { + expect(transformer({ radiusless })).toEqual( + radiusless ? { className: "is-radiusless" } : {}, + ); + }), + ); + + [false, true].map(shadowless => + it(`should ${shadowless ? "" : "not "}be shadowless`, () => { + expect(transformer({ shadowless })).toEqual( + shadowless ? { className: "is-shadowless" } : {}, + ); + }), + ); + + [false, true].map(unselectable => + it(`should ${unselectable ? "" : "not "}be unselectable`, () => { + expect(transformer({ unselectable })).toEqual( + unselectable ? { className: "is-unselectable" } : {}, + ); + }), + ); +}); + +describe("Responsive modifiers", () => { + const transformer = transformResponsiveHelpers; + makeItShouldPreserveUnknown(transformer); + makeItShouldNotSetClassNameOnEmpty(transformer); + makeItShouldPreserveCustomClassName(transformer); + + BREAKPOINTS.map(breakpoint => { + // these sizes don't support the `only` prop. + const noOnly = ["mobile", "fullhd", "desktop"]; + + describe(`for ${breakpoint}`, () => { + DISPLAYS.map(value => + [undefined, false, true] + .filter(() => noOnly.includes(breakpoint)) + .map(only => + it(`should be display ${value} ${only ? "only" : ""}`, () => { + const display = only === undefined ? { value } : { value, only }; + expect( + transformer({ + responsive: { [breakpoint]: { display } }, + }), + ).toEqual( + value + ? { + className: `is-${value}-${breakpoint}${ + only ? "-only" : "" + }`, + } + : {}, + ); + }), + ), + ); + + [false, true].map(value => + [undefined, false, true] + .filter(() => noOnly.includes(breakpoint)) + .map(only => + it(`should ${value ? "" : "not "}be hidden ${ + only ? "only" : "" + }`, () => { + const hide = only === undefined ? { value } : { value, only }; + expect( + transformer({ + responsive: { [breakpoint]: { hide } }, + }), + ).toEqual( + value + ? { + className: `is-hidden-${breakpoint}${only ? "-only" : ""}`, + } + : {}, + ); + }), + ), + ); + + TEXT_ALIGNMENTS.map(value => + [undefined, false, true] + .filter(() => noOnly.includes(breakpoint)) + .map(only => + it(`should have text aligned ${value} ${ + only ? "only" : "" + }`, () => { + const textAlignment = + only === undefined ? { value } : { value, only }; + expect( + transformer({ + responsive: { [breakpoint]: { textAlignment } }, + }), + ).toEqual( + value + ? { + className: `has-text-${value}-${breakpoint}${ + only ? "-only" : "" + }`, + } + : {}, + ); + }), + ), + ); + + TEXT_SIZES.map(value => + [undefined, false, true] + .filter(() => noOnly.includes(breakpoint)) + .map(only => + it(`should have text size ${value} ${only ? "only" : ""}`, () => { + const textSize = only === undefined ? { value } : { value, only }; + expect( + transformer({ + responsive: { [breakpoint]: { textSize } }, + }), + ).toEqual( + value + ? { + className: `is-size-${value}-${breakpoint}${ + only ? "-only" : "" + }`, + } + : {}, + ); + }), + ), + ); + }); + }); +}); + +describe("Modifiers", () => { + const transformer = transformHelpers; + makeItShouldPreserveUnknown(transformer); + makeItShouldNotSetClassNameOnEmpty(transformer); + makeItShouldPreserveCustomClassName(transformer); + + it("should apply float transforms", () => { + expect(transformer({ clearfix: true })).toEqual({ + className: "is-clearfix", + }); + }); + + it("should apply overflow transforms", () => { + expect(transformer({ clipped: true })).toEqual({ + className: "is-clipped", + }); + }); + + it("should apply overlay transforms", () => { + expect(transformer({ overlay: true })).toEqual({ + className: "is-overlay", + }); + }); + + it("should apply typography transforms", () => { + expect(transformer({ textSize: 1 })).toEqual({ + className: "is-size-1", + }); + }); + + it("should apply visibility transforms", () => { + expect(transformer({ hidden: true })).toEqual({ + className: "is-hidden", + }); + }); + + it("should apply other transforms", () => { + expect(transformer({ marginless: true })).toEqual({ + className: "is-marginless", + }); + }); + + it("should apply responsive transforms", () => { + expect( + transformer({ responsive: { mobile: { textSize: { value: 1 } } } }), + ).toEqual({ + className: "is-size-1-mobile", + }); + }); +}); diff --git a/src/base/generic.tsx b/src/base/generic.tsx index 218fe772..ba80baf1 100644 --- a/src/base/generic.tsx +++ b/src/base/generic.tsx @@ -1,13 +1,13 @@ import React from "react"; -import { ModifierProps, transformModifiers } from "../modifiers"; import { forwardRefAs } from "./exotic"; +import { HelpersProps, transformHelpers } from "./helpers"; -export type GenericProps = ModifierProps; +export type GenericProps = HelpersProps; export const Generic = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); return React.createElement(as!, { ref, ...rest }); }, { as: "div" }, diff --git a/src/base/helpers.ts b/src/base/helpers.ts new file mode 100644 index 00000000..7b90ca62 --- /dev/null +++ b/src/base/helpers.ts @@ -0,0 +1,380 @@ +import classNames from "classnames"; + +import { tuple } from "../utils"; + +/** + * Float + */ +export const FLOAT_PULLED_ALIGNMENTS = tuple("left", "right"); +export type FloatPulledAlignments = (typeof FLOAT_PULLED_ALIGNMENTS)[number]; + +export type FloatHelpersProps = Partial<{ + /** Fixes an element's floating children */ + clearfix: boolean; + /** Moves an element to the left or right */ + pull: FloatPulledAlignments; +}>; + +export const transformFloatHelpers = < + P extends object & FloatHelpersProps & { className?: string } +>( + props: P, +) => { + const { className: initialClassName, clearfix, pull, ...rest } = props; + const className = + classNames( + { + "is-clearfix": clearfix, + [`is-pulled-${pull}`]: pull, + }, + initialClassName, + ) || undefined; + return { className, ...rest }; +}; + +/** + * Overflow + */ +export type OverflowHelpersProps = Partial<{ + /** Adds overflow hidden */ + clipped: boolean; +}>; + +export const transformOverflowHelpers = < + P extends object & OverflowHelpersProps & { className?: string } +>( + props: P, +) => { + const { className: initialClassName, clipped, ...rest } = props; + const className = + classNames({ "is-clipped": clipped }, initialClassName) || undefined; + return { className, ...rest }; +}; + +/** + * Overlay + */ +export type OverlayHelpersProps = Partial<{ + /** Completely covers the first positioned parent */ + overlay: boolean; +}>; + +export const transformOverlayHelpers = < + P extends object & OverlayHelpersProps & { className?: string } +>( + props: P, +) => { + const { className: initialClassName, overlay, ...rest } = props; + const className = + classNames({ "is-overlay": overlay }, initialClassName) || undefined; + return { className, ...rest }; +}; + +/** + * Typography + */ +export const COLORS = tuple( + "primary", + "success", + "info", + "warning", + "danger", + "light", + "dark", + "white", + "black", + "link", +); +export type Colors = (typeof COLORS)[number]; + +export const GREY_COLORS = tuple( + "black-bis", + "black-ter", + "grey-darker", + "grey-dark", + "grey", + "grey-light", + "grey-lighter", + "white-ter", + "white-bis", +); +export type GreyColors = (typeof GREY_COLORS)[number]; + +export const TEXT_ALIGNMENTS = tuple("centered", "justified", "left", "right"); +export type TextAlignments = (typeof TEXT_ALIGNMENTS)[number]; + +export const TEXT_SIZES = tuple(1, 2, 3, 4, 5, 6); +export type TextSizes = (typeof TEXT_SIZES)[number]; + +export const TEXT_TRANSFORMS = tuple("capitalized", "lowercase", "uppercase"); +export type TextTransforms = (typeof TEXT_TRANSFORMS)[number]; + +export const TEXT_WEIGHTS = tuple("light", "normal", "semibold", "bold"); +export type TextWeights = (typeof TEXT_WEIGHTS)[number]; + +export type TypographyHelpersProps = Partial<{ + backgroundColor: Colors | GreyColors; + italic: boolean; + textAlignment: TextAlignments; + textColor: Colors | GreyColors; + textSize: TextSizes; + textTransform: TextTransforms; + textWeight: TextWeights; +}>; + +export const transformTypographyHelpers = < + P extends object & TypographyHelpersProps & { className?: string } +>( + props: P, +) => { + const { + backgroundColor, + className: initialClassName, + italic, + textAlignment, + textColor, + textSize, + textTransform, + textWeight, + ...rest + } = props; + + const className = + classNames( + { + [`has-background-${backgroundColor}`]: backgroundColor, + [`has-text-${textColor}`]: textColor, + "is-italic": italic, + [`is-${textTransform}`]: textTransform, + [`has-text-${textAlignment}`]: textAlignment, + [`has-text-weight-${textWeight}`]: textWeight, + [`is-size-${textSize}`]: !!textSize, + }, + initialClassName, + ) || undefined; + + return { className, ...rest }; +}; + +/** + * Visibility + */ +export const DISPLAYS = tuple( + "block", + "flex", + "inline", + "inline-block", + "inline-flex", +); +export type Displays = (typeof DISPLAYS)[number]; + +export type VisibilityHelpersProps = Partial<{ + /** Hides an element (unclear on where this is documented in Bulma) */ + hidden: boolean; + /** Adds visibility hidden */ + invisible: boolean; + /** + * Hide elements visually but keep the element available to be announced by a + * screen reader + */ + srOnly: boolean; +}>; + +export const transformVisibilityHelpers = < + P extends object & VisibilityHelpersProps & { className?: string } +>( + props: P, +) => { + const { + className: initialClassName, + hidden, + invisible, + srOnly, + ...rest + } = props; + const className = + classNames( + { + "is-hidden": hidden, + "is-invisible": invisible, + "is-sr-only": srOnly, + }, + initialClassName, + ) || undefined; + return { className, ...rest }; +}; + +/** + * Other + */ +export type OtherHelpersProps = Partial<{ + /** Removes any margin */ + marginless: boolean; + /** Removes any padding */ + paddingless: boolean; + /** Removes any radius */ + radiusless: boolean; + /** Removes any shadow */ + shadowless: boolean; + /** Prevents the text from being selectable */ + unselectable: boolean; +}>; + +export const transformOtherHelpers = < + P extends object & OtherHelpersProps & { className?: string } +>( + props: P, +) => { + const { + className: initialClassName, + marginless, + paddingless, + radiusless, + shadowless, + unselectable, + ...rest + } = props; + + const className = + classNames( + { + "is-marginless": props.marginless, + "is-paddingless": props.paddingless, + "is-radiusless": props.radiusless, + "is-shadowless": props.shadowless, + "is-unselectable": props.unselectable, + }, + initialClassName, + ) || undefined; + + return { className, ...rest }; +}; + +/** + * Responsive + */ +export const BREAKPOINTS = tuple( + "mobile", + "tablet", + "desktop", + "widescreen", + "fullhd", + "touch", +); +export type Breakpoints = (typeof BREAKPOINTS)[number]; + +export type LimitiedResponsiveBreakpointProps = Partial<{ + display: { + value: Displays; + }; + hide: { + value: boolean; + }; + textAlignment: { + value: TextAlignments; + }; + textSize: { + value: TextSizes; + }; +}>; + +export type ResponsiveBreakpointProps = Partial<{ + display: { + only?: boolean; + value: Displays; + }; + hide: { + only?: boolean; + value: boolean; + }; + textAlignment: { + only?: boolean; + value: TextAlignments; + }; + textSize: { + only?: boolean; + value: TextSizes; + }; +}>; + +export type ResponsiveHelpersProps = Partial<{ + responsive: Partial<{ + mobile: LimitiedResponsiveBreakpointProps; + tablet: ResponsiveBreakpointProps; + desktop: ResponsiveBreakpointProps; + widescreen: ResponsiveBreakpointProps; + fullhd: LimitiedResponsiveBreakpointProps; + touch: LimitiedResponsiveBreakpointProps; + }>; +}>; + +export const transformResponsiveHelpers = < + P extends object & ResponsiveHelpersProps & { className?: string } +>( + props: P, +) => { + const { className: initialClassName, responsive, ...rest } = props; + + const className = + classNames( + responsive && + Object.keys(responsive) + .filter(breakpoint => responsive![breakpoint]) + .map(breakpoint => { + const names = {}; + const { display, hide, textAlignment, textSize } = responsive![ + breakpoint + ] as ResponsiveBreakpointProps | LimitiedResponsiveBreakpointProps; + if (display) { + const value = display.value; + const only = "only" in display ? display.only : false; + names[`is-${value}-${breakpoint}${only ? "-only" : ""}`] = value; + } + if (hide) { + const value = hide.value; + const only = "only" in hide ? hide.only : false; + names[`is-hidden-${breakpoint}${only ? "-only" : ""}`] = value; + } + if (textAlignment) { + const value = textAlignment.value; + const only = "only" in textAlignment ? textAlignment.only : false; + names[ + `has-text-${value}-${breakpoint}${only ? "-only" : ""}` + ] = value; + } + if (textSize) { + const value = textSize.value; + const only = "only" in textSize ? textSize.only : false; + names[ + `is-size-${value}-${breakpoint}${only ? "-only" : ""}` + ] = !!value; + } + return names; + }) + .reduce((acc, cv) => ({ ...acc, ...cv }), {}), + initialClassName, + ) || undefined; + + return { className, ...rest }; +}; + +export type HelpersProps = FloatHelpersProps & + OverflowHelpersProps & + OverlayHelpersProps & + TypographyHelpersProps & + VisibilityHelpersProps & + OtherHelpersProps & + ResponsiveHelpersProps; + +export const transformHelpers = ( + props: T, +): Omit & { className?: string } => + [ + transformFloatHelpers, + transformOverflowHelpers, + transformOverlayHelpers, + transformTypographyHelpers, + transformVisibilityHelpers, + transformOtherHelpers, + transformResponsiveHelpers, + ].reduce((acc, transformer) => transformer(acc as any), props); diff --git a/src/base/index.ts b/src/base/index.ts index 0761920d..a5c28892 100644 --- a/src/base/index.ts +++ b/src/base/index.ts @@ -1,2 +1,3 @@ export { forwardRefAs } from "./exotic"; export { Generic } from "./generic"; +export { HelpersProps, transformHelpers } from "./helpers"; diff --git a/src/components/breadcrumb/breadcrumb-item.tsx b/src/components/breadcrumb/breadcrumb-item.tsx index 3b0ae33d..7141cf5e 100644 --- a/src/components/breadcrumb/breadcrumb-item.tsx +++ b/src/components/breadcrumb/breadcrumb-item.tsx @@ -1,18 +1,17 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export interface BreadcrumbItemModifierProps { active?: boolean; } -export type BreadcrumbItemProps = ModifierProps & BreadcrumbItemModifierProps; +export type BreadcrumbItemProps = HelpersProps & BreadcrumbItemModifierProps; export const BreadcrumbItem = forwardRefAs( (props, ref) => { - const { as, active, ...rest } = transformModifiers(props); + const { as, active, ...rest } = transformHelpers(props); return (
  • {React.createElement(as!, { ref, ...rest })} diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx index a691d277..b79c98d2 100644 --- a/src/components/breadcrumb/breadcrumb.tsx +++ b/src/components/breadcrumb/breadcrumb.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { tuple } from "../../utils"; import { BreadcrumbItem } from "./breadcrumb-item"; @@ -27,7 +26,7 @@ export type BreadcrumbModifierProps = Partial<{ }>; export type BreadcrumbProps = Prefer< - ModifierProps & BreadcrumbModifierProps, + HelpersProps & BreadcrumbModifierProps, React.HTMLAttributes >; @@ -41,7 +40,7 @@ export const Breadcrumb = Object.assign( separator, size, ...rest - } = transformModifiers(props); + } = transformHelpers(props); rest.className = classNames("breadcrumb", rest.className, { [`has-${separator}-separator`]: separator, [`is-${align}`]: align, diff --git a/src/components/card/card-content.tsx b/src/components/card/card-content.tsx index 28ea98a4..09eb3667 100644 --- a/src/components/card/card-content.tsx +++ b/src/components/card/card-content.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type CardContentModifierProps = Partial<{ className: string }>; -export type CardContentProps = ModifierProps & CardContentModifierProps; +export type CardContentProps = HelpersProps & CardContentModifierProps; export const CardContent = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("card-content", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/card/card-footer-item.tsx b/src/components/card/card-footer-item.tsx index 9d2866c3..f7679840 100644 --- a/src/components/card/card-footer-item.tsx +++ b/src/components/card/card-footer-item.tsx @@ -1,15 +1,14 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type CardFooterItemModifierProps = Partial<{ className: string }>; -export type CardFooterItemProps = ModifierProps & CardFooterItemModifierProps; +export type CardFooterItemProps = HelpersProps & CardFooterItemModifierProps; export const CardFooterItem = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("card-footer-item", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/card/card-footer.tsx b/src/components/card/card-footer.tsx index 207e0441..db554330 100644 --- a/src/components/card/card-footer.tsx +++ b/src/components/card/card-footer.tsx @@ -1,18 +1,17 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { CardFooterItem } from "./card-footer-item"; export type CardFooterModifierProps = Partial<{ className: string }>; -export type CardFooterProps = ModifierProps & CardFooterModifierProps; +export type CardFooterProps = HelpersProps & CardFooterModifierProps; export const CardFooter = Object.assign( forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("card-footer", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/card/card-header-icon.tsx b/src/components/card/card-header-icon.tsx index 6763dbc6..0bc09078 100644 --- a/src/components/card/card-header-icon.tsx +++ b/src/components/card/card-header-icon.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type CardHeaderIconModifierProps = Partial<{ className: string }>; -export type CardHeaderIconProps = ModifierProps & CardHeaderIconModifierProps; +export type CardHeaderIconProps = HelpersProps & CardHeaderIconModifierProps; export const CardHeaderIcon = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("card-header-icon", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/card/card-header-title.tsx b/src/components/card/card-header-title.tsx index c8911651..7c5430f0 100644 --- a/src/components/card/card-header-title.tsx +++ b/src/components/card/card-header-title.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type CardHeaderTitleModifierProps = Partial<{ className: string }>; -export type CardHeaderTitleProps = ModifierProps & CardHeaderTitleModifierProps; +export type CardHeaderTitleProps = HelpersProps & CardHeaderTitleModifierProps; export const CardHeaderTitle = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("card-header-title", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/card/card-header.tsx b/src/components/card/card-header.tsx index acab5345..b3966e5f 100644 --- a/src/components/card/card-header.tsx +++ b/src/components/card/card-header.tsx @@ -1,18 +1,17 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { CardHeaderIcon } from "./card-header-icon"; import { CardHeaderTitle } from "./card-header-title"; export type CardHeaderModifierProps = Partial<{ className: string }>; -export type CardHeaderProps = ModifierProps & CardHeaderModifierProps; +export type CardHeaderProps = HelpersProps & CardHeaderModifierProps; export const CardHeader = Object.assign( forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("card-header", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/card/card-image.tsx b/src/components/card/card-image.tsx index ff5c504e..85b29626 100644 --- a/src/components/card/card-image.tsx +++ b/src/components/card/card-image.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type CardImageModifierProps = Partial<{ className: string }>; -export type CardImageProps = ModifierProps & CardImageModifierProps; +export type CardImageProps = HelpersProps & CardImageModifierProps; export const CardImage = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("card-image", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx index 1357de41..da9f3886 100644 --- a/src/components/card/card.tsx +++ b/src/components/card/card.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { CardContent } from "./card-content"; import { CardFooter } from "./card-footer"; import { CardHeader } from "./card-header"; @@ -10,12 +9,12 @@ import { CardImage } from "./card-image"; export type CardModifierProps = Partial<{ className: string }>; -export type CardProps = ModifierProps & CardModifierProps; +export type CardProps = HelpersProps & CardModifierProps; export const Card = Object.assign( forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("card", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/dropdown/dropdown-content.tsx b/src/components/dropdown/dropdown-content.tsx index 596364d8..faf88325 100644 --- a/src/components/dropdown/dropdown-content.tsx +++ b/src/components/dropdown/dropdown-content.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type DropdownContentModifierProps = Partial<{ className: string }>; -export type DropdownContentProps = ModifierProps & DropdownContentModifierProps; +export type DropdownContentProps = HelpersProps & DropdownContentModifierProps; export const DropdownContent = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("dropdown-content", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/dropdown/dropdown-divider.tsx b/src/components/dropdown/dropdown-divider.tsx index e4b8fd8e..6fbcb680 100644 --- a/src/components/dropdown/dropdown-divider.tsx +++ b/src/components/dropdown/dropdown-divider.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type DropdownDividerModifierProps = Partial<{ className: string }>; -export type DropdownDividerProps = ModifierProps & DropdownDividerModifierProps; +export type DropdownDividerProps = HelpersProps & DropdownDividerModifierProps; export const DropdownDivider = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("dropdown-divider", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/dropdown/dropdown-item.tsx b/src/components/dropdown/dropdown-item.tsx index 8624c1d5..743586df 100644 --- a/src/components/dropdown/dropdown-item.tsx +++ b/src/components/dropdown/dropdown-item.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { DropdownContext } from "./dropdown-context"; export type DropdownItemModifierProps = Partial<{ @@ -11,11 +10,11 @@ export type DropdownItemModifierProps = Partial<{ onClick: React.MouseEventHandler; }>; -export type DropdownItemProps = ModifierProps & DropdownItemModifierProps; +export type DropdownItemProps = HelpersProps & DropdownItemModifierProps; export const DropdownItem = forwardRefAs( (props, ref) => { - const { as, active, onClick, ...rest } = transformModifiers(props); + const { as, active, onClick, ...rest } = transformHelpers(props); rest.className = classNames("dropdown-item", rest.className, { "is-active": active, }); diff --git a/src/components/dropdown/dropdown-menu.tsx b/src/components/dropdown/dropdown-menu.tsx index 1cf21c9a..e4286727 100644 --- a/src/components/dropdown/dropdown-menu.tsx +++ b/src/components/dropdown/dropdown-menu.tsx @@ -1,15 +1,14 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type DropdownMenuModifierProps = Partial<{ className: string }>; -export type DropdownMenuProps = ModifierProps & DropdownMenuModifierProps; +export type DropdownMenuProps = HelpersProps & DropdownMenuModifierProps; export const DropdownMenu = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("dropdown-menu", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/dropdown/dropdown-trigger.tsx b/src/components/dropdown/dropdown-trigger.tsx index 9f3a45aa..df8a459e 100644 --- a/src/components/dropdown/dropdown-trigger.tsx +++ b/src/components/dropdown/dropdown-trigger.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { DropdownContext } from "./dropdown-context"; export type DropdownTriggerModifierProps = Partial<{ @@ -10,11 +9,11 @@ export type DropdownTriggerModifierProps = Partial<{ onClick: React.MouseEventHandler; }>; -export type DropdownTriggerProps = ModifierProps & DropdownTriggerModifierProps; +export type DropdownTriggerProps = HelpersProps & DropdownTriggerModifierProps; export const DropdownTrigger = forwardRefAs( (props, ref) => { - const { as, onClick, ...rest } = transformModifiers(props); + const { as, onClick, ...rest } = transformHelpers(props); rest.className = classNames("dropdown-trigger", rest.className); return ( diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx index 75827666..aaa9999d 100644 --- a/src/components/dropdown/dropdown.tsx +++ b/src/components/dropdown/dropdown.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { tuple } from "../../utils"; import { combineRefs } from "../../utils"; import { DropdownContent } from "./dropdown-content"; @@ -24,7 +23,7 @@ export type DropdownModifierProps = Partial<{ up: boolean; }>; -export type DropdownProps = ModifierProps & DropdownModifierProps; +export type DropdownProps = HelpersProps & DropdownModifierProps; const initialState = { active: false, @@ -70,7 +69,7 @@ export class DropdownController extends React.PureComponent< managed, up, ...rest - } = transformModifiers(this.props); + } = transformHelpers(this.props); rest.className = classNames("dropdown", rest.className, { [`is-${align}`]: align, "is-active": this.active, diff --git a/src/components/level/__tests__/level.test.tsx b/src/components/level/__tests__/level.test.tsx index 4076a3e8..69d9a94d 100644 --- a/src/components/level/__tests__/level.test.tsx +++ b/src/components/level/__tests__/level.test.tsx @@ -1,7 +1,7 @@ import Enzyme from "enzyme"; import React from "react"; -import { BREAKPOINTS } from "@/modifiers/responsive"; +import { BREAKPOINTS } from "@/base/helpers"; import { Level } from "../level"; import { LevelItem } from "../level-item"; import { LevelLeft } from "../level-left"; diff --git a/src/components/level/level-item.tsx b/src/components/level/level-item.tsx index fe069aeb..8e214ad4 100644 --- a/src/components/level/level-item.tsx +++ b/src/components/level/level-item.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type LevelItemModifierProps = Partial<{ className: string }>; -export type LevelItemProps = ModifierProps & LevelItemModifierProps; +export type LevelItemProps = HelpersProps & LevelItemModifierProps; export const LevelItem = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("level-item", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/level/level-left.tsx b/src/components/level/level-left.tsx index 748aade5..3dbcd276 100644 --- a/src/components/level/level-left.tsx +++ b/src/components/level/level-left.tsx @@ -1,18 +1,17 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type LevelLeftModifierProps = Partial<{ className: string; }>; -export type LevelLeftProps = ModifierProps & LevelLeftModifierProps; +export type LevelLeftProps = HelpersProps & LevelLeftModifierProps; export const LevelLeft = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("level-left", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/level/level-right.tsx b/src/components/level/level-right.tsx index b76a9b79..2112d9ff 100644 --- a/src/components/level/level-right.tsx +++ b/src/components/level/level-right.tsx @@ -1,18 +1,17 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type LevelRightModifierProps = Partial<{ className: string; }>; -export type LevelRightProps = ModifierProps & LevelRightModifierProps; +export type LevelRightProps = HelpersProps & LevelRightModifierProps; export const LevelRight = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("level-right", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/level/level.tsx b/src/components/level/level.tsx index 9c2e31f6..95d84737 100644 --- a/src/components/level/level.tsx +++ b/src/components/level/level.tsx @@ -1,9 +1,8 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; -import { Breakpoints } from "../../modifiers/responsive"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; +import { Breakpoints } from "../../base/helpers"; import { LevelItem } from "./level-item"; import { LevelLeft } from "./level-left"; import { LevelRight } from "./level-right"; @@ -13,12 +12,12 @@ export type LevelModifierProps = Partial<{ className: string; }>; -export type LevelProps = ModifierProps & LevelModifierProps; +export type LevelProps = HelpersProps & LevelModifierProps; export const Level = Object.assign( forwardRefAs( (props, ref) => { - const { as, breakpoint, ...rest } = transformModifiers(props); + const { as, breakpoint, ...rest } = transformHelpers(props); rest.className = classNames("level", rest.className, { [`is-${breakpoint}`]: breakpoint, }); diff --git a/src/components/list/list-item.tsx b/src/components/list/list-item.tsx index 519883a8..563d8515 100644 --- a/src/components/list/list-item.tsx +++ b/src/components/list/list-item.tsx @@ -1,19 +1,18 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type ListItemModifierProps = Partial<{ active: boolean; className: string; }>; -export type ListItemProps = ModifierProps & ListItemModifierProps; +export type ListItemProps = HelpersProps & ListItemModifierProps; export const ListItem = forwardRefAs( (props, ref) => { - const { active, as, ...rest } = transformModifiers(props); + const { active, as, ...rest } = transformHelpers(props); rest.className = classNames("list-item", rest.className, { "is-active": active, }); diff --git a/src/components/list/list.tsx b/src/components/list/list.tsx index 90613bb8..0437447a 100644 --- a/src/components/list/list.tsx +++ b/src/components/list/list.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { ListItem } from "./list-item"; export type ListModifierProps = Partial<{ @@ -10,12 +9,12 @@ export type ListModifierProps = Partial<{ hoverable: boolean; }>; -export type ListProps = ModifierProps & ListModifierProps; +export type ListProps = HelpersProps & ListModifierProps; export const List = Object.assign( forwardRefAs( (props, ref) => { - const { as, hoverable, ...rest } = transformModifiers(props); + const { as, hoverable, ...rest } = transformHelpers(props); rest.className = classNames("list", rest.className, { "is-hoverable": hoverable, }); diff --git a/src/components/media/media-item.tsx b/src/components/media/media-item.tsx index c2625252..56a2515e 100644 --- a/src/components/media/media-item.tsx +++ b/src/components/media/media-item.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { tuple } from "../../utils"; export const MEDIA_ITEM_POSITIONS = tuple("content", "left", "right"); @@ -13,11 +12,11 @@ export type MediaItemModifierProps = Partial<{ position: MediaItemPositions; }>; -export type MediaItemProps = ModifierProps & MediaItemModifierProps; +export type MediaItemProps = HelpersProps & MediaItemModifierProps; export const MediaItem = forwardRefAs( (props, ref) => { - const { as, position, ...rest } = transformModifiers(props); + const { as, position, ...rest } = transformHelpers(props); rest.className = classNames(rest.className, { [`media-${position}`]: position, }); diff --git a/src/components/media/media.tsx b/src/components/media/media.tsx index dfc4e006..1c439455 100644 --- a/src/components/media/media.tsx +++ b/src/components/media/media.tsx @@ -1,18 +1,17 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { MediaItem } from "./media-item"; export type MediaModifierProps = Partial<{ className: string }>; -export type MediaProps = ModifierProps & MediaModifierProps; +export type MediaProps = HelpersProps & MediaModifierProps; export const Media = Object.assign( forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("media", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/menu/menu-label.tsx b/src/components/menu/menu-label.tsx index cb77fb5a..2a56fea5 100644 --- a/src/components/menu/menu-label.tsx +++ b/src/components/menu/menu-label.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type MenuLabelModifierProps = Partial<{ className: string }>; -export type MenuLabelProps = ModifierProps & MenuLabelModifierProps; +export type MenuLabelProps = HelpersProps & MenuLabelModifierProps; export const MenuLabel = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("menu-label", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/menu/menu-list-item.tsx b/src/components/menu/menu-list-item.tsx index d0d3862b..5b455828 100644 --- a/src/components/menu/menu-list-item.tsx +++ b/src/components/menu/menu-list-item.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type MenuListItemModifierProps = Partial<{ active: boolean; @@ -10,12 +9,13 @@ export type MenuListItemModifierProps = Partial<{ menu: React.ReactNode; }>; -export type MenuListItemProps = ModifierProps & MenuListItemModifierProps; +export type MenuListItemProps = HelpersProps & MenuListItemModifierProps; export const MenuListItem = forwardRefAs( (props, ref) => { - const { active, as, menu, ...rest } = transformModifiers(props); - rest.className = classNames({ "is-active": active }, rest.className) || undefined; + const { active, as, menu, ...rest } = transformHelpers(props); + rest.className = + classNames({ "is-active": active }, rest.className) || undefined; return (
  • {React.createElement(as!, { ref, ...rest })} diff --git a/src/components/menu/menu-list.tsx b/src/components/menu/menu-list.tsx index 0f001cfa..6136174b 100644 --- a/src/components/menu/menu-list.tsx +++ b/src/components/menu/menu-list.tsx @@ -1,18 +1,17 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { MenuListItem } from "./menu-list-item"; export type MenuListModifierProps = Partial<{ className: string }>; -export type MenuListProps = ModifierProps & MenuListModifierProps; +export type MenuListProps = HelpersProps & MenuListModifierProps; export const MenuList = Object.assign( forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("menu-list", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx index dc5881eb..329613ed 100644 --- a/src/components/menu/menu.tsx +++ b/src/components/menu/menu.tsx @@ -1,19 +1,18 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { MenuLabel } from "./menu-label"; import { MenuList } from "./menu-list"; export type MenuModifierProps = Partial<{ className: string }>; -export type MenuProps = ModifierProps & MenuModifierProps; +export type MenuProps = HelpersProps & MenuModifierProps; export const Menu = Object.assign( forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("menu", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/message/__tests__/message.test.tsx b/src/components/message/__tests__/message.test.tsx index c8da86a8..25226847 100644 --- a/src/components/message/__tests__/message.test.tsx +++ b/src/components/message/__tests__/message.test.tsx @@ -1,7 +1,7 @@ import Enzyme from "enzyme"; import React from "react"; -import { COLORS } from "@/modifiers/color"; +import { COLORS } from "@/base/helpers"; import { Message, MESSAGE_SIZES } from "../message"; import { MessageBody } from "../message-body"; import { MessageHeader } from "../message-header"; diff --git a/src/components/message/message-body.tsx b/src/components/message/message-body.tsx index 2db922db..baf48c7e 100644 --- a/src/components/message/message-body.tsx +++ b/src/components/message/message-body.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type MessageBodyModifierProps = Partial<{ className: string }>; -export type MessageBodyProps = ModifierProps & MessageBodyModifierProps; +export type MessageBodyProps = HelpersProps & MessageBodyModifierProps; export const MessageBody = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("message-body", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/message/message-header.tsx b/src/components/message/message-header.tsx index 99cc6e24..401745f6 100644 --- a/src/components/message/message-header.tsx +++ b/src/components/message/message-header.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type MessageHeaderModifierProps = Partial<{ className: string }>; -export type MessageHeaderProps = ModifierProps & MessageHeaderModifierProps; +export type MessageHeaderProps = HelpersProps & MessageHeaderModifierProps; export const MessageHeader = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("message-header", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/message/message.tsx b/src/components/message/message.tsx index cf2251ac..0adf38e2 100644 --- a/src/components/message/message.tsx +++ b/src/components/message/message.tsx @@ -1,9 +1,8 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; -import { Colors } from "../../modifiers/color"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; +import { Colors } from "../../base/helpers"; import { tuple } from "../../utils"; import { MessageBody } from "./message-body"; import { MessageHeader } from "./message-header"; @@ -17,12 +16,12 @@ export type MessageModifierProps = Partial<{ size: MessageSizes; }>; -export type MessageProps = ModifierProps & MessageModifierProps; +export type MessageProps = HelpersProps & MessageModifierProps; export const Message = Object.assign( forwardRefAs( (props, ref) => { - const { as, color, size, ...rest } = transformModifiers(props); + const { as, color, size, ...rest } = transformHelpers(props); rest.className = classNames("message", rest.className, { [`is-${color}`]: color, [`is-${size}`]: size, diff --git a/src/components/modal/modal-background.tsx b/src/components/modal/modal-background.tsx index ccffb366..c6053191 100644 --- a/src/components/modal/modal-background.tsx +++ b/src/components/modal/modal-background.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { ModalContext } from "./modal-context"; export type ModalBackgroundModifierProps = Partial<{ @@ -10,11 +9,11 @@ export type ModalBackgroundModifierProps = Partial<{ onClick: React.MouseEventHandler; }>; -export type ModalBackgroundProps = ModifierProps & ModalBackgroundModifierProps; +export type ModalBackgroundProps = HelpersProps & ModalBackgroundModifierProps; export const ModalBackground = forwardRefAs( (props, ref) => { - const { as, onClick, ...rest } = transformModifiers(props); + const { as, onClick, ...rest } = transformHelpers(props); rest.className = classNames("modal-background", rest.className); return ( diff --git a/src/components/modal/modal-card-body.tsx b/src/components/modal/modal-card-body.tsx index add23b88..323b217c 100644 --- a/src/components/modal/modal-card-body.tsx +++ b/src/components/modal/modal-card-body.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type ModalCardBodyModifierProps = Partial<{ className: string }>; -export type ModalCardBodyProps = ModifierProps & ModalCardBodyModifierProps; +export type ModalCardBodyProps = HelpersProps & ModalCardBodyModifierProps; export const ModalCardBody = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("modal-card-body", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/modal/modal-card-foot.tsx b/src/components/modal/modal-card-foot.tsx index e32c3a7f..5323bff3 100644 --- a/src/components/modal/modal-card-foot.tsx +++ b/src/components/modal/modal-card-foot.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type ModalCardFootModifierProps = Partial<{ className: string }>; -export type ModalCardFootProps = ModifierProps & ModalCardFootModifierProps; +export type ModalCardFootProps = HelpersProps & ModalCardFootModifierProps; export const ModalCardFoot = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("modal-card-foot", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/modal/modal-card-head.tsx b/src/components/modal/modal-card-head.tsx index 124cd17f..d87c99ec 100644 --- a/src/components/modal/modal-card-head.tsx +++ b/src/components/modal/modal-card-head.tsx @@ -1,18 +1,17 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { Delete } from "../../elements"; -import { ModifierProps, transformModifiers } from "../../modifiers"; import { ModalContext } from "./modal-context"; export type ModalCardHeadModifierProps = Partial<{ className: string }>; -export type ModalCardHeadProps = ModifierProps & ModalCardHeadModifierProps; +export type ModalCardHeadProps = HelpersProps & ModalCardHeadModifierProps; export const ModalCardHead = forwardRefAs( (props, ref) => { - const { as, children, ...rest } = transformModifiers(props); + const { as, children, ...rest } = transformHelpers(props); rest.className = classNames("modal-card-head", rest.className); return ( diff --git a/src/components/modal/modal-card-title.tsx b/src/components/modal/modal-card-title.tsx index 2a91c8e8..fa6fa25a 100644 --- a/src/components/modal/modal-card-title.tsx +++ b/src/components/modal/modal-card-title.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type ModalCardTitleModifierProps = Partial<{ className: string }>; -export type ModalCardTitleProps = ModifierProps & ModalCardTitleModifierProps; +export type ModalCardTitleProps = HelpersProps & ModalCardTitleModifierProps; export const ModalCardTitle = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("modal-card-title", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/modal/modal-card.tsx b/src/components/modal/modal-card.tsx index 31d141f8..13f608e3 100644 --- a/src/components/modal/modal-card.tsx +++ b/src/components/modal/modal-card.tsx @@ -1,22 +1,21 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { ModalCardBody } from "./modal-card-body"; import { ModalCardFoot } from "./modal-card-foot"; import { ModalCardHead } from "./modal-card-head"; import { ModalCardTitle } from "./modal-card-title"; export type ModalCardProps = Prefer< - ModifierProps, + HelpersProps, React.HTMLAttributes >; export const ModalCard = Object.assign( forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("modal-card", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/modal/modal-close.tsx b/src/components/modal/modal-close.tsx index 85a3287d..4c0d0fbe 100644 --- a/src/components/modal/modal-close.tsx +++ b/src/components/modal/modal-close.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { ModalContext } from "./modal-context"; export type ModalCloseModifierProps = Partial<{ @@ -10,11 +9,11 @@ export type ModalCloseModifierProps = Partial<{ onClick: React.MouseEventHandler; }>; -export type ModalCloseProps = ModifierProps & ModalCloseModifierProps; +export type ModalCloseProps = HelpersProps & ModalCloseModifierProps; export const ModalClose = forwardRefAs( (props, ref) => { - const { as, onClick, ...rest } = transformModifiers(props); + const { as, onClick, ...rest } = transformHelpers(props); rest.className = classNames("modal-close", "is-large", rest.className); return ( diff --git a/src/components/modal/modal-content.tsx b/src/components/modal/modal-content.tsx index 90f8ada1..2c9c19e9 100644 --- a/src/components/modal/modal-content.tsx +++ b/src/components/modal/modal-content.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type ModalContentModifierProps = Partial<{ className: string }>; -export type ModalContentProps = ModifierProps & ModalContentModifierProps; +export type ModalContentProps = HelpersProps & ModalContentModifierProps; export const ModalContent = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("modal-content", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/navbar/__tests__/navbar.test.tsx b/src/components/navbar/__tests__/navbar.test.tsx index ad70c4b8..e204e794 100644 --- a/src/components/navbar/__tests__/navbar.test.tsx +++ b/src/components/navbar/__tests__/navbar.test.tsx @@ -1,7 +1,7 @@ import Enzyme from "enzyme"; import React from "react"; -import { COLORS } from "@/modifiers/color"; +import { COLORS } from "@/base/helpers"; import { Navbar, NAVBAR_FIXED_ALIGNMENTS, diff --git a/src/components/navbar/navbar-brand.tsx b/src/components/navbar/navbar-brand.tsx index 6797663a..46a9ce3b 100644 --- a/src/components/navbar/navbar-brand.tsx +++ b/src/components/navbar/navbar-brand.tsx @@ -1,17 +1,16 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type NavbarBrandProps = Prefer< - ModifierProps, + HelpersProps, React.HTMLAttributes >; export const NavbarBrand = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("navbar-brand", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/navbar/navbar-burger.tsx b/src/components/navbar/navbar-burger.tsx index ef26dfa3..b5350762 100644 --- a/src/components/navbar/navbar-burger.tsx +++ b/src/components/navbar/navbar-burger.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { NavbarContext } from "./navbar-context"; export type NavbarBurgerModifierProps = Partial<{ @@ -11,14 +10,14 @@ export type NavbarBurgerModifierProps = Partial<{ style: React.CSSProperties; }>; -export type NavbarBurgerProps = ModifierProps & NavbarBurgerModifierProps; +export type NavbarBurgerProps = HelpersProps & NavbarBurgerModifierProps; export const NavbarBurger = forwardRefAs( (props, ref) => { return ( {({ active, setActive }) => { - const { as, style, onClick, ...rest } = transformModifiers(props); + const { as, style, onClick, ...rest } = transformHelpers(props); rest.className = classNames("navbar-burger", rest.className, { "is-active": active, }); diff --git a/src/components/navbar/navbar-divider.tsx b/src/components/navbar/navbar-divider.tsx index e468fc32..d4bc9c1f 100644 --- a/src/components/navbar/navbar-divider.tsx +++ b/src/components/navbar/navbar-divider.tsx @@ -1,17 +1,16 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type NavbarDividerProps = Prefer< - ModifierProps, + HelpersProps, React.HTMLAttributes >; export const NavbarDivider = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("navbar-divider", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/navbar/navbar-dropdown.tsx b/src/components/navbar/navbar-dropdown.tsx index 3dc3d3a8..69cf40f5 100644 --- a/src/components/navbar/navbar-dropdown.tsx +++ b/src/components/navbar/navbar-dropdown.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type NavbarDropdownModifierProps = Partial<{ boxed: boolean; @@ -10,11 +9,11 @@ export type NavbarDropdownModifierProps = Partial<{ right: boolean; }>; -export type NavbarDropdownProps = ModifierProps & NavbarDropdownModifierProps; +export type NavbarDropdownProps = HelpersProps & NavbarDropdownModifierProps; export const NavbarDropdown = forwardRefAs( (props, ref) => { - const { as, boxed, right, ...rest } = transformModifiers(props); + const { as, boxed, right, ...rest } = transformHelpers(props); rest.className = classNames("navbar-dropdown", rest.className, { "is-boxed": boxed, "is-right": right, diff --git a/src/components/navbar/navbar-end.tsx b/src/components/navbar/navbar-end.tsx index 9d793df4..ff3f56e8 100644 --- a/src/components/navbar/navbar-end.tsx +++ b/src/components/navbar/navbar-end.tsx @@ -1,17 +1,16 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type NavbarEndModifierProps = Partial<{ className: string }>; -export type NavbarEndProps = ModifierProps & NavbarEndModifierProps; +export type NavbarEndProps = HelpersProps & NavbarEndModifierProps; export const NavbarEnd = Object.assign( forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("navbar-end", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/navbar/navbar-item.tsx b/src/components/navbar/navbar-item.tsx index 0080df34..3518ff8b 100644 --- a/src/components/navbar/navbar-item.tsx +++ b/src/components/navbar/navbar-item.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type NavbarItemModifierProps = Partial<{ active: boolean; @@ -12,7 +11,7 @@ export type NavbarItemModifierProps = Partial<{ hoverable: boolean; }>; -export type NavbarItemProps = ModifierProps & NavbarItemModifierProps; +export type NavbarItemProps = HelpersProps & NavbarItemModifierProps; export const NavbarItem = forwardRefAs( (props, ref) => { @@ -23,7 +22,7 @@ export const NavbarItem = forwardRefAs( dropdownUp, hoverable, ...rest - } = transformModifiers(props); + } = transformHelpers(props); rest.className = classNames("navbar-item", rest.className, { "has-dropdown": dropdown, "has-dropdown-up": dropdownUp, diff --git a/src/components/navbar/navbar-link.tsx b/src/components/navbar/navbar-link.tsx index 6ec0fdc1..643a16c4 100644 --- a/src/components/navbar/navbar-link.tsx +++ b/src/components/navbar/navbar-link.tsx @@ -1,19 +1,18 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type NavbarLinkModifierProps = Partial<{ arrowless: boolean; className: string; }>; -export type NavbarLinkProps = ModifierProps & NavbarLinkModifierProps; +export type NavbarLinkProps = HelpersProps & NavbarLinkModifierProps; export const NavbarLink = forwardRefAs( (props, ref) => { - const { as, arrowless, ...rest } = transformModifiers(props); + const { as, arrowless, ...rest } = transformHelpers(props); rest.className = classNames("navbar-link", rest.className, { "is-arrowless": arrowless, }); diff --git a/src/components/navbar/navbar-menu.tsx b/src/components/navbar/navbar-menu.tsx index bb8ec369..f54ef5bb 100644 --- a/src/components/navbar/navbar-menu.tsx +++ b/src/components/navbar/navbar-menu.tsx @@ -1,12 +1,11 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { NavbarContext } from "./navbar-context"; export type NavbarMenuProps = Prefer< - ModifierProps, + HelpersProps, React.HTMLAttributes >; @@ -15,7 +14,7 @@ export const NavbarMenu = forwardRefAs( return ( {({ active }) => { - const { as, ...rest } = props; + const { as, ...rest } = transformHelpers(props); rest.className = classNames("navbar-menu", rest.className, { "is-active": active, }); diff --git a/src/components/navbar/navbar-start.tsx b/src/components/navbar/navbar-start.tsx index c21b189c..815ee701 100644 --- a/src/components/navbar/navbar-start.tsx +++ b/src/components/navbar/navbar-start.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type NavbarStartModifierProps = Partial<{ className: string }>; -export type NavbarStartProps = ModifierProps & NavbarStartModifierProps; +export type NavbarStartProps = HelpersProps & NavbarStartModifierProps; export const NavbarStart = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("navbar-start", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx index 94dd4877..365b5918 100644 --- a/src/components/navbar/navbar.tsx +++ b/src/components/navbar/navbar.tsx @@ -1,9 +1,8 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; -import { Colors } from "../../modifiers/color"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; +import { Colors } from "../../base/helpers"; import { canUseDOM, tuple } from "../../utils"; import { NavbarBrand } from "./navbar-brand"; import { NavbarBurger } from "./navbar-burger"; @@ -31,7 +30,7 @@ export type NavbarModifierProps = Partial<{ transparent: boolean; }>; -export type NavbarProps = ModifierProps & NavbarModifierProps; +export type NavbarProps = HelpersProps & NavbarModifierProps; export type NavbarControllerProps = NavbarProps & { as: React.ReactType; @@ -80,7 +79,7 @@ export class NavbarController extends React.PureComponent< managed, transparent, ...rest - } = transformModifiers(this.props); + } = transformHelpers(this.props); rest.className = classNames("navbar", rest.className, { "is-transparent": transparent, diff --git a/src/components/pagination/pagination-ellipsis.tsx b/src/components/pagination/pagination-ellipsis.tsx index db703021..80ff6dae 100644 --- a/src/components/pagination/pagination-ellipsis.tsx +++ b/src/components/pagination/pagination-ellipsis.tsx @@ -1,17 +1,16 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type PaginationEllipsisModifierProps = Partial<{ className: string }>; -export type PaginationEllipsisProps = ModifierProps & +export type PaginationEllipsisProps = HelpersProps & PaginationEllipsisModifierProps; export const PaginationEllipsis = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("pagination-ellipsis", rest.className); return
  • ; }, diff --git a/src/components/pagination/pagination-link.tsx b/src/components/pagination/pagination-link.tsx index 49b4d6f2..cce85167 100644 --- a/src/components/pagination/pagination-link.tsx +++ b/src/components/pagination/pagination-link.tsx @@ -1,19 +1,18 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type PaginationLinkModifiers = Partial<{ className: string; current: boolean; }>; -export type PaginationLinkProps = ModifierProps & PaginationLinkModifiers; +export type PaginationLinkProps = HelpersProps & PaginationLinkModifiers; export const PaginationLink = forwardRefAs( (props, ref) => { - const { as, current, ...rest } = transformModifiers(props); + const { as, current, ...rest } = transformHelpers(props); rest.className = classNames("pagination-link", rest.className, { "is-current": current, }); diff --git a/src/components/pagination/pagination-list.tsx b/src/components/pagination/pagination-list.tsx index 7bd70a29..81a1f06b 100644 --- a/src/components/pagination/pagination-list.tsx +++ b/src/components/pagination/pagination-list.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type PaginationListModifierProps = Partial<{ className: string }>; -export type PaginationListProps = ModifierProps & PaginationListModifierProps; +export type PaginationListProps = HelpersProps & PaginationListModifierProps; export const PaginationList = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("pagination-list", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/pagination/pagination-next.tsx b/src/components/pagination/pagination-next.tsx index addb6254..1e85261e 100644 --- a/src/components/pagination/pagination-next.tsx +++ b/src/components/pagination/pagination-next.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type PaginationNextModifierProps = Partial<{ className: string }>; -export type PaginationNextProps = ModifierProps & PaginationNextModifierProps; +export type PaginationNextProps = HelpersProps & PaginationNextModifierProps; export const PaginationNext = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("pagination-next", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/pagination/pagination-previous.tsx b/src/components/pagination/pagination-previous.tsx index 67cb7e43..fa925c3b 100644 --- a/src/components/pagination/pagination-previous.tsx +++ b/src/components/pagination/pagination-previous.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type PaginationPreviousModifierProps = Partial<{ className: string }>; -export type PaginationPreviousProps = ModifierProps & +export type PaginationPreviousProps = HelpersProps & PaginationPreviousModifierProps; export const PaginationPrevious = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("pagination-previous", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx index 929a246b..c6d64efd 100644 --- a/src/components/pagination/pagination.tsx +++ b/src/components/pagination/pagination.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { tuple } from "../../utils"; import { PaginationEllipsis } from "./pagination-ellipsis"; import { PaginationLink } from "./pagination-link"; @@ -23,12 +22,12 @@ export type PaginationModifiers = Partial<{ size: PaginationSizes; }>; -export type PaginationProps = ModifierProps & PaginationModifiers; +export type PaginationProps = HelpersProps & PaginationModifiers; export const Pagination = Object.assign( forwardRefAs( (props, ref) => { - const { as, align, rounded, size, ...rest } = transformModifiers(props); + const { as, align, rounded, size, ...rest } = transformHelpers(props); rest.className = classNames("pagination", rest.className, { [`is-${align}`]: align, "is-rounded": rounded, diff --git a/src/components/panel/panel-block.tsx b/src/components/panel/panel-block.tsx index 7725178b..502596c7 100644 --- a/src/components/panel/panel-block.tsx +++ b/src/components/panel/panel-block.tsx @@ -1,19 +1,18 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type PanelBlockModifierProps = Partial<{ active: boolean; className: string; }>; -export type PanelBlockProps = ModifierProps & PanelBlockModifierProps; +export type PanelBlockProps = HelpersProps & PanelBlockModifierProps; export const PanelBlock = forwardRefAs( (props, ref) => { - const { active, as, ...rest } = transformModifiers(props); + const { active, as, ...rest } = transformHelpers(props); rest.className = classNames("panel-block", rest.className, { "is-active": active, }); diff --git a/src/components/panel/panel-heading.tsx b/src/components/panel/panel-heading.tsx index 9a97340b..bbaf92a5 100644 --- a/src/components/panel/panel-heading.tsx +++ b/src/components/panel/panel-heading.tsx @@ -1,15 +1,14 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type PanelHeadingModifierProps = Partial<{ className: string }>; -export type PanelHeadingProps = ModifierProps & PanelHeadingModifierProps; +export type PanelHeadingProps = HelpersProps & PanelHeadingModifierProps; export const PanelHeading = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("panel-heading", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/panel/panel-icon.tsx b/src/components/panel/panel-icon.tsx index 394a89e3..c3f5707c 100644 --- a/src/components/panel/panel-icon.tsx +++ b/src/components/panel/panel-icon.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type PanelIconModifierProps = Partial<{ className: string }>; -export type PanelIconProps = ModifierProps & PanelIconModifierProps; +export type PanelIconProps = HelpersProps & PanelIconModifierProps; export const PanelIcon = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("panel-icon", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/panel/panel-tab.tsx b/src/components/panel/panel-tab.tsx index febbd407..98d74733 100644 --- a/src/components/panel/panel-tab.tsx +++ b/src/components/panel/panel-tab.tsx @@ -1,19 +1,18 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type PanelTabModifierProps = Partial<{ active: boolean; className: string; }>; -export type PanelTabProps = ModifierProps & PanelTabModifierProps; +export type PanelTabProps = HelpersProps & PanelTabModifierProps; export const PanelTab = forwardRefAs( (props, ref) => { - const { active, as, className: cn, ...rest } = transformModifiers(props); + const { active, as, className: cn, ...rest } = transformHelpers(props); const className = classNames(cn, { "is-active": active }) || undefined; return React.createElement(as!, { className, ref, ...rest }); }, diff --git a/src/components/panel/panel-tabs.tsx b/src/components/panel/panel-tabs.tsx index e05de664..c19756fa 100644 --- a/src/components/panel/panel-tabs.tsx +++ b/src/components/panel/panel-tabs.tsx @@ -1,18 +1,17 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { PanelTab } from "./panel-tab"; export type PanelTabsModifierProps = Partial<{ className: string }>; -export type PanelTabsProps = ModifierProps & PanelTabsModifierProps; +export type PanelTabsProps = HelpersProps & PanelTabsModifierProps; export const PanelTabs = Object.assign( forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("panel-tabs", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx index fe6663ea..e2e5dfaa 100644 --- a/src/components/panel/panel.tsx +++ b/src/components/panel/panel.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { PanelBlock } from "./panel-block"; import { PanelHeading } from "./panel-heading"; import { PanelIcon } from "./panel-icon"; @@ -10,12 +9,12 @@ import { PanelTabs } from "./panel-tabs"; export type PanelModifierProps = Partial<{ className: string }>; -export type PanelProps = ModifierProps & PanelModifierProps; +export type PanelProps = HelpersProps & PanelModifierProps; export const Panel = Object.assign( forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("panel", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/components/tabs/tab.tsx b/src/components/tabs/tab.tsx index 0782127b..ed8e3696 100644 --- a/src/components/tabs/tab.tsx +++ b/src/components/tabs/tab.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type TabModifierProps = Partial<{ active: boolean; @@ -10,11 +9,11 @@ export type TabModifierProps = Partial<{ style: React.CSSProperties; }>; -export type TabProps = ModifierProps & TabModifierProps; +export type TabProps = HelpersProps & TabModifierProps; export const Tab = forwardRefAs( (props, ref) => { - const { as, active, className, style, ...rest } = transformModifiers(props); + const { as, active, className, style, ...rest } = transformHelpers(props); return (
  • ; -export type TabsProps = ModifierProps & TabsModifierProps; +export type TabsProps = HelpersProps & TabsModifierProps; export const Tabs = Object.assign( forwardRefAs( @@ -39,7 +38,7 @@ export const Tabs = Object.assign( size, type, ...rest - } = transformModifiers(props); + } = transformHelpers(props); rest.className = classNames("tabs", rest.className, { [`is-${align}`]: align, [`is-${size}`]: size, diff --git a/src/elements/box/box.tsx b/src/elements/box/box.tsx index ccdb0451..31e586cc 100644 --- a/src/elements/box/box.tsx +++ b/src/elements/box/box.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type BoxModifierProps = Partial<{ className: string }>; -export type BoxProps = ModifierProps & BoxModifierProps; +export type BoxProps = HelpersProps & BoxModifierProps; export const Box = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("box", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/elements/button/__tests__/button.test.tsx b/src/elements/button/__tests__/button.test.tsx index 24ca8cab..00cfae17 100644 --- a/src/elements/button/__tests__/button.test.tsx +++ b/src/elements/button/__tests__/button.test.tsx @@ -1,7 +1,7 @@ import Enzyme from "enzyme"; import React from "react"; -import { COLORS } from "@/modifiers/color"; +import { COLORS } from "@/base/helpers"; import { Button, BUTTON_SIZES, BUTTON_STATES } from "../button"; import { ButtonGroup } from "../button-group"; diff --git a/src/elements/button/button-group.tsx b/src/elements/button/button-group.tsx index d2f26d18..90e88ba0 100644 --- a/src/elements/button/button-group.tsx +++ b/src/elements/button/button-group.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { tuple } from "../../utils"; export const BUTTON_GROUP_POSITIONS = tuple("centered", "right"); @@ -14,11 +13,11 @@ export type ButtonGroupModifierProps = Partial<{ position: ButtonGroupPositions; }>; -export type ButtonGroupProps = ModifierProps & ButtonGroupModifierProps; +export type ButtonGroupProps = HelpersProps & ButtonGroupModifierProps; export const ButtonGroup = forwardRefAs( (props, ref) => { - const { as, children, hasAddons, position, ...rest } = transformModifiers( + const { as, children, hasAddons, position, ...rest } = transformHelpers( props, ); rest.className = classNames("buttons", rest.className, { diff --git a/src/elements/button/button.tsx b/src/elements/button/button.tsx index e4cb9697..037524bf 100644 --- a/src/elements/button/button.tsx +++ b/src/elements/button/button.tsx @@ -1,9 +1,8 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; -import { Colors } from "../../modifiers/color"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; +import { Colors } from "../../base/helpers"; import { tuple } from "../../utils"; import { ButtonGroup } from "./button-group"; @@ -29,7 +28,7 @@ export type ButtonModifierProps = Partial<{ text: boolean; }>; -export type ButtonProps = ModifierProps & ButtonModifierProps; +export type ButtonProps = HelpersProps & ButtonModifierProps; export const Button = Object.assign( forwardRefAs( @@ -50,7 +49,7 @@ export const Button = Object.assign( static: isStatic, text, ...rest - } = transformModifiers(props); + } = transformHelpers(props); rest.className = classNames("button", rest.className, { [`is-${color}`]: color, [`is-${size}`]: size, diff --git a/src/elements/container/__tests__/container.test.tsx b/src/elements/container/__tests__/container.test.tsx index 6f234292..f45c9bb6 100644 --- a/src/elements/container/__tests__/container.test.tsx +++ b/src/elements/container/__tests__/container.test.tsx @@ -1,7 +1,7 @@ import Enzyme from "enzyme"; import React from "react"; -import { BREAKPOINTS } from "@/modifiers/responsive"; +import { BREAKPOINTS } from "@/base/helpers"; import { Container } from "../container"; import { hasProperties } from "@/__tests__/helpers"; diff --git a/src/elements/container/container.tsx b/src/elements/container/container.tsx index 896bbd76..0c1c92bc 100644 --- a/src/elements/container/container.tsx +++ b/src/elements/container/container.tsx @@ -1,9 +1,8 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; -import { Breakpoints } from "../../modifiers/responsive"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; +import { Breakpoints } from "../../base/helpers"; export type ContainerModifierProps = Partial<{ breakpoint: Breakpoints; @@ -11,11 +10,11 @@ export type ContainerModifierProps = Partial<{ fluid: boolean; }>; -export type ContainerProps = ModifierProps & ContainerModifierProps; +export type ContainerProps = HelpersProps & ContainerModifierProps; export const Container = forwardRefAs( (props, ref) => { - const { as, fluid, breakpoint, ...rest } = transformModifiers(props); + const { as, fluid, breakpoint, ...rest } = transformHelpers(props); rest.className = classNames("container", rest.className, { "is-fluid": fluid, [`is-${breakpoint}`]: breakpoint, diff --git a/src/elements/content/content-ordered-list-item.tsx b/src/elements/content/content-ordered-list-item.tsx index 1f5566a5..19504b22 100644 --- a/src/elements/content/content-ordered-list-item.tsx +++ b/src/elements/content/content-ordered-list-item.tsx @@ -1,13 +1,12 @@ import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type ContentOrderedListItemModifierProps = Partial<{ className: string; }>; -export type ContentOrderedListItemProps = ModifierProps & +export type ContentOrderedListItemProps = HelpersProps & ContentOrderedListItemModifierProps; export const ContentOrderedListItem = forwardRefAs< @@ -15,7 +14,7 @@ export const ContentOrderedListItem = forwardRefAs< "li" >( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); return React.createElement(as!, { ref, ...rest }); }, { as: "li" }, diff --git a/src/elements/content/content-ordered-list.tsx b/src/elements/content/content-ordered-list.tsx index 46aa7501..07affaf3 100644 --- a/src/elements/content/content-ordered-list.tsx +++ b/src/elements/content/content-ordered-list.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { tuple } from "../../utils"; import { ContentOrderedListItem } from "./content-ordered-list-item"; @@ -19,14 +18,14 @@ export type ContentOrderedListModifierProps = Partial<{ }>; export type ContentOrderedListProps = Prefer< - ModifierProps & ContentOrderedListModifierProps, + HelpersProps & ContentOrderedListModifierProps, Omit, "type"> >; export const ContentOrderedList = Object.assign( forwardRefAs( (props, ref) => { - const { as, type, ...rest } = transformModifiers(props); + const { as, type, ...rest } = transformHelpers(props); rest.className = classNames(rest.className, { [`is-${type}`]: type, }); diff --git a/src/elements/content/content.tsx b/src/elements/content/content.tsx index b0809b60..257b06a1 100644 --- a/src/elements/content/content.tsx +++ b/src/elements/content/content.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { tuple } from "../../utils"; import { ContentOrderedList } from "./content-ordered-list"; @@ -14,12 +13,12 @@ export type ContentModifierProps = Partial<{ size: ContentSizes; }>; -export type ContentProps = ModifierProps & ContentModifierProps; +export type ContentProps = HelpersProps & ContentModifierProps; export const Content = Object.assign( forwardRefAs( (props, ref) => { - const { as, size, ...rest } = transformModifiers(props); + const { as, size, ...rest } = transformHelpers(props); rest.className = classNames("content", rest.className, { [`is-${size}`]: size, }); diff --git a/src/elements/form/__tests__/file.test.tsx b/src/elements/form/__tests__/file.test.tsx index 00867397..9037a810 100644 --- a/src/elements/form/__tests__/file.test.tsx +++ b/src/elements/form/__tests__/file.test.tsx @@ -1,7 +1,7 @@ import Enzyme from "enzyme"; import React from "react"; -import { COLORS } from "@/modifiers/color"; +import { COLORS } from "@/base/helpers"; import { File, FILE_ALIGNMENTS, FILE_SIZES } from "../file"; import { FileCTA } from "../file-cta"; import { FileIcon } from "../file-icon"; diff --git a/src/elements/form/__tests__/input.test.tsx b/src/elements/form/__tests__/input.test.tsx index 42427de0..9caae55c 100644 --- a/src/elements/form/__tests__/input.test.tsx +++ b/src/elements/form/__tests__/input.test.tsx @@ -1,7 +1,7 @@ import Enzyme from "enzyme"; import React from "react"; -import { COLORS } from "@/modifiers/color"; +import { COLORS } from "@/base/helpers"; import { Input, INPUT_SIZES, INPUT_STATES, INPUT_TYPES } from "../input"; import { hasProperties } from "@/__tests__/helpers"; diff --git a/src/elements/form/__tests__/select-container.test.tsx b/src/elements/form/__tests__/select-container.test.tsx index f6fc6c86..c1d347f6 100644 --- a/src/elements/form/__tests__/select-container.test.tsx +++ b/src/elements/form/__tests__/select-container.test.tsx @@ -1,7 +1,7 @@ import Enzyme from "enzyme"; import React from "react"; -import { COLORS } from "@/modifiers/color"; +import { COLORS } from "@/base/helpers"; import { Select } from "../select"; import { SELECT_CONTAINER_SIZES, diff --git a/src/elements/form/__tests__/textarea.test.tsx b/src/elements/form/__tests__/textarea.test.tsx index 295c106b..1c0f0d6f 100644 --- a/src/elements/form/__tests__/textarea.test.tsx +++ b/src/elements/form/__tests__/textarea.test.tsx @@ -1,7 +1,7 @@ import Enzyme from "enzyme"; import React from "react"; -import { COLORS } from "@/modifiers/color"; +import { COLORS } from "@/base/helpers"; import { Textarea, TEXTAREA_SIZES, TEXTAREA_STATES } from "../textarea"; import { hasProperties } from "@/__tests__/helpers"; diff --git a/src/elements/form/checkbox.tsx b/src/elements/form/checkbox.tsx index 72686321..36c64cb7 100644 --- a/src/elements/form/checkbox.tsx +++ b/src/elements/form/checkbox.tsx @@ -1,13 +1,12 @@ import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; -export type CheckboxProps = ModifierProps; +export type CheckboxProps = HelpersProps; export const Checkbox = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); return React.createElement(as!, { ref, type: "checkbox", ...rest }); }, { as: "input" }, diff --git a/src/elements/form/control.tsx b/src/elements/form/control.tsx index 1859bd7d..7611a997 100644 --- a/src/elements/form/control.tsx +++ b/src/elements/form/control.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { tuple } from "../../utils"; export const CONTROL_SIZES = tuple("small", "medium", "large"); @@ -17,7 +16,7 @@ export type ControlModifierProps = Partial<{ size: ControlSizes; }>; -export type ControlProps = ModifierProps & ControlModifierProps; +export type ControlProps = HelpersProps & ControlModifierProps; export const Control = forwardRefAs( (props, ref) => { @@ -29,7 +28,7 @@ export const Control = forwardRefAs( loading, size, ...rest - } = transformModifiers(props); + } = transformHelpers(props); rest.className = classNames("control", rest.className, { "has-icons-left": iconLeft, "has-icons-right": iconRight, diff --git a/src/elements/form/field-body.tsx b/src/elements/form/field-body.tsx index 32704812..4599974a 100644 --- a/src/elements/form/field-body.tsx +++ b/src/elements/form/field-body.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type FieldBodyModifierProps = Partial<{ className: string }>; -export type FieldBodyProps = ModifierProps & FieldBodyModifierProps; +export type FieldBodyProps = HelpersProps & FieldBodyModifierProps; export const FieldBody = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("field-body", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/elements/form/field-label.tsx b/src/elements/form/field-label.tsx index 3d7779c7..4c5f998a 100644 --- a/src/elements/form/field-label.tsx +++ b/src/elements/form/field-label.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { tuple } from "../../utils"; export const FILED_LABEL_SIZES = tuple("small", "normal", "medium", "large"); @@ -13,11 +12,11 @@ export type FieldLabelModifierProps = Partial<{ size: FieldLabelSizes; }>; -export type FieldLabelProps = ModifierProps & FieldLabelModifierProps; +export type FieldLabelProps = HelpersProps & FieldLabelModifierProps; export const FieldLabel = forwardRefAs( (props, ref) => { - const { as, size, ...rest } = transformModifiers(props); + const { as, size, ...rest } = transformHelpers(props); rest.className = classNames("field-label", rest.className, { [`is-${size}`]: size, }); diff --git a/src/elements/form/field.tsx b/src/elements/form/field.tsx index 596a7e87..a4bd8d64 100644 --- a/src/elements/form/field.tsx +++ b/src/elements/form/field.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { tuple } from "../../utils"; import { FieldBody } from "./field-body"; import { FieldLabel } from "./field-label"; @@ -23,7 +22,7 @@ export type FieldModifierProps = Partial<{ narrow: boolean; }>; -export type FieldProps = ModifierProps & FieldModifierProps; +export type FieldProps = HelpersProps & FieldModifierProps; export const Field = Object.assign( forwardRefAs( @@ -37,7 +36,7 @@ export const Field = Object.assign( kind, narrow, ...rest - } = transformModifiers(props); + } = transformHelpers(props); let k = null; if (kind === "addons") { diff --git a/src/elements/form/file-cta.tsx b/src/elements/form/file-cta.tsx index f5c30fdb..1b55d0dc 100644 --- a/src/elements/form/file-cta.tsx +++ b/src/elements/form/file-cta.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type FileCTAModifierProps = Partial<{ className: string }>; -export type FileCTAProps = ModifierProps & FileCTAModifierProps; +export type FileCTAProps = HelpersProps & FileCTAModifierProps; export const FileCTA = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("file-cta", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/elements/form/file-icon.tsx b/src/elements/form/file-icon.tsx index 16559494..58492ad0 100644 --- a/src/elements/form/file-icon.tsx +++ b/src/elements/form/file-icon.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type FileIconModifierProps = Partial<{ className: string }>; -export type FileIconProps = ModifierProps & FileIconModifierProps; +export type FileIconProps = HelpersProps & FileIconModifierProps; export const FileIcon = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("file-icon", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/elements/form/file-input.tsx b/src/elements/form/file-input.tsx index cac4a934..07d7ecf8 100644 --- a/src/elements/form/file-input.tsx +++ b/src/elements/form/file-input.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type FileInputModifierProps = Partial<{ className: string }>; -export type FileInputProps = ModifierProps & FileInputModifierProps; +export type FileInputProps = HelpersProps & FileInputModifierProps; export const FileInput = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("file-input", rest.className); return React.createElement(as!, { ref, type: "file", ...rest }); }, diff --git a/src/elements/form/file-label.tsx b/src/elements/form/file-label.tsx index 79698d68..e450ba0e 100644 --- a/src/elements/form/file-label.tsx +++ b/src/elements/form/file-label.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type FileLabelModifierProps = Partial<{ className: string }>; -export type FileLabelProps = ModifierProps & FileLabelModifierProps; +export type FileLabelProps = HelpersProps & FileLabelModifierProps; export const FileLabel = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("file-label", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/elements/form/file-name.tsx b/src/elements/form/file-name.tsx index 85b59a67..c2f18b21 100644 --- a/src/elements/form/file-name.tsx +++ b/src/elements/form/file-name.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type FileNameModifierProps = Partial<{ className: string }>; -export type FileNameProps = ModifierProps & FileNameModifierProps; +export type FileNameProps = HelpersProps & FileNameModifierProps; export const FileName = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("file-name", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/elements/form/file.tsx b/src/elements/form/file.tsx index 90353d88..a8cc2df9 100644 --- a/src/elements/form/file.tsx +++ b/src/elements/form/file.tsx @@ -1,9 +1,8 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; -import { Colors } from "../../modifiers/color"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; +import { Colors } from "../../base/helpers"; import { tuple } from "../../utils"; import { FileCTA } from "./file-cta"; @@ -28,7 +27,7 @@ export type FileModifierProps = Partial<{ size: FileSizes; }>; -export type FileProps = ModifierProps & FileModifierProps; +export type FileProps = HelpersProps & FileModifierProps; export const File = Object.assign( forwardRefAs( @@ -42,7 +41,7 @@ export const File = Object.assign( fullwidth, size, ...rest - } = transformModifiers(props); + } = transformHelpers(props); rest.className = classNames("file", rest.className, { "has-name": hasName, [`is-${align}`]: align, diff --git a/src/elements/form/help.tsx b/src/elements/form/help.tsx index fedf3139..98eded77 100644 --- a/src/elements/form/help.tsx +++ b/src/elements/form/help.tsx @@ -1,20 +1,19 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; -import { Colors } from "../../modifiers/color"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; +import { Colors } from "../../base/helpers"; export type HelpModifierProps = Partial<{ className: string; color: Colors; }>; -export type HelpProps = ModifierProps & HelpModifierProps; +export type HelpProps = HelpersProps & HelpModifierProps; export const Help = forwardRefAs( (props, ref) => { - const { as, color, ...rest } = transformModifiers(props); + const { as, color, ...rest } = transformHelpers(props); rest.className = classNames("help", rest.className, { [`is-${color}`]: color, }); diff --git a/src/elements/form/input.tsx b/src/elements/form/input.tsx index 671e344c..e2b5e5fe 100644 --- a/src/elements/form/input.tsx +++ b/src/elements/form/input.tsx @@ -1,9 +1,8 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; -import { Colors } from "../../modifiers/color"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; +import { Colors } from "../../base/helpers"; import { tuple } from "../../utils"; export const INPUT_SIZES = tuple("small", "medium", "large"); @@ -36,7 +35,7 @@ export type InputModifierProps = Partial<{ type: InputTypes; }>; -export type InputProps = ModifierProps & InputModifierProps; +export type InputProps = HelpersProps & InputModifierProps; export const Input = forwardRefAs( (props, ref) => { @@ -49,7 +48,7 @@ export const Input = forwardRefAs( state, static: isStatic, ...rest - } = transformModifiers(props); + } = transformHelpers(props); rest.className = classNames("input", rest.className, { [`is-${color}`]: color, "is-rounded": rounded, diff --git a/src/elements/form/label.tsx b/src/elements/form/label.tsx index a5cf203c..f482cdc8 100644 --- a/src/elements/form/label.tsx +++ b/src/elements/form/label.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { tuple } from "../../utils"; import { Checkbox } from "./checkbox"; import { Radio } from "./radio"; @@ -16,11 +15,11 @@ export type LabelModifierProps = Partial<{ size: LabelSizes; }>; -export type LabelProps = ModifierProps & LabelModifierProps; +export type LabelProps = HelpersProps & LabelModifierProps; export const Label = forwardRefAs( (props, ref) => { - const { as, disabled, size, ...rest } = transformModifiers(props); + const { as, disabled, size, ...rest } = transformHelpers(props); let kind = "label"; React.Children.forEach(rest.children, (child, i) => { if (typeof child === "object") { diff --git a/src/elements/form/radio.tsx b/src/elements/form/radio.tsx index 67adfdfa..cfc8a50b 100644 --- a/src/elements/form/radio.tsx +++ b/src/elements/form/radio.tsx @@ -1,16 +1,15 @@ import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type RadioProps = Prefer< - ModifierProps, + HelpersProps, React.InputHTMLAttributes >; export const Radio = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); return React.createElement(as!, { ref, type: "radio", ...rest }); }, { as: "input" }, diff --git a/src/elements/form/select-container.tsx b/src/elements/form/select-container.tsx index ef49bbd0..4b336e06 100644 --- a/src/elements/form/select-container.tsx +++ b/src/elements/form/select-container.tsx @@ -1,9 +1,8 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; -import { Colors } from "../../modifiers/color"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; +import { Colors } from "../../base/helpers"; import { tuple } from "../../utils"; import { Select } from "./select"; @@ -22,7 +21,7 @@ export type SelectContainerModifierProps = Partial<{ state: SelectContainerStates; }>; -export type SelectContainerProps = ModifierProps & SelectContainerModifierProps; +export type SelectContainerProps = HelpersProps & SelectContainerModifierProps; export const SelectContainer = forwardRefAs( (props, ref) => { @@ -35,7 +34,7 @@ export const SelectContainer = forwardRefAs( size, state, ...rest - } = transformModifiers(props); + } = transformHelpers(props); rest.className = classNames("select", rest.className, { [`is-${color}`]: color, "is-fullwidth": fullwidth, diff --git a/src/elements/form/select-option.tsx b/src/elements/form/select-option.tsx index 8cde0ff7..5d03e64c 100644 --- a/src/elements/form/select-option.tsx +++ b/src/elements/form/select-option.tsx @@ -1,14 +1,13 @@ import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type SelectOptionModifierProps = Partial<{ className: string }>; -export type SelectOptionProps = ModifierProps & SelectOptionModifierProps; +export type SelectOptionProps = HelpersProps & SelectOptionModifierProps; export const SelectOption = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); return React.createElement(as!, { ref, ...rest }); }, { as: "option" }, diff --git a/src/elements/form/select.tsx b/src/elements/form/select.tsx index 73fbc458..ef1384ac 100644 --- a/src/elements/form/select.tsx +++ b/src/elements/form/select.tsx @@ -1,19 +1,18 @@ import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { SelectContainer } from "./select-container"; import { SelectOption } from "./select-option"; export type SelectProps = Prefer< - ModifierProps, + HelpersProps, React.SelectHTMLAttributes >; export const Select = Object.assign( forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); return React.createElement(as!, { ref, ...rest }); }, { as: "select" }, diff --git a/src/elements/form/textarea.tsx b/src/elements/form/textarea.tsx index 41978ed6..7078140a 100644 --- a/src/elements/form/textarea.tsx +++ b/src/elements/form/textarea.tsx @@ -1,9 +1,8 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; -import { Colors } from "../../modifiers/color"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; +import { Colors } from "../../base/helpers"; import { tuple } from "../../utils"; export const TEXTAREA_SIZES = tuple("small", "medium", "large"); @@ -20,11 +19,11 @@ export type TextareaModifierProps = Partial<{ state: TextareaStates; }>; -export type TextareaProps = ModifierProps & TextareaModifierProps; +export type TextareaProps = HelpersProps & TextareaModifierProps; export const Textarea = forwardRefAs( (props, ref) => { - const { as, color, fixedSize, size, state, ...rest } = transformModifiers( + const { as, color, fixedSize, size, state, ...rest } = transformHelpers( props, ); rest.className = classNames("textarea", rest.className, { diff --git a/src/elements/icon/__tests__/icon.test.tsx b/src/elements/icon/__tests__/icon.test.tsx index c2af79e1..4d25ed5b 100644 --- a/src/elements/icon/__tests__/icon.test.tsx +++ b/src/elements/icon/__tests__/icon.test.tsx @@ -1,7 +1,7 @@ import Enzyme from "enzyme"; import React from "react"; -import { COLORS } from "@/modifiers/color"; +import { COLORS } from "@/base/helpers"; import { Icon, ICON_ALIGNMENTS, ICON_SIZES } from "../icon"; import { hasProperties } from "@/__tests__/helpers"; diff --git a/src/elements/icon/icon.tsx b/src/elements/icon/icon.tsx index 2b3b3fed..040c8c5e 100644 --- a/src/elements/icon/icon.tsx +++ b/src/elements/icon/icon.tsx @@ -1,9 +1,8 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; -import { Colors } from "../../modifiers/color"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; +import { Colors } from "../../base/helpers"; import { tuple } from "../../utils"; export const ICON_ALIGNMENTS = tuple("left", "right"); @@ -20,13 +19,13 @@ export type IconModifierProps = Partial<{ }>; export type IconProps = Prefer< - ModifierProps & IconModifierProps, + HelpersProps & IconModifierProps, React.HTMLAttributes >; export const Icon = forwardRefAs( (props, ref) => { - const { align, as, color, size, ...rest } = transformModifiers(props); + const { align, as, color, size, ...rest } = transformHelpers(props); rest.className = classNames("icon", rest.className, { [`has-text-${color}`]: color, [`is-${align}`]: align, diff --git a/src/elements/image/image-container.tsx b/src/elements/image/image-container.tsx index aea52272..ed063106 100644 --- a/src/elements/image/image-container.tsx +++ b/src/elements/image/image-container.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { tuple } from "../../utils"; export const IMAGE_CONTAINER_SIZES = tuple( @@ -38,11 +37,11 @@ export type ImageContainerModifierProps = Partial<{ size: ImageContainerSizes; }>; -export type ImageContainerProps = ModifierProps & ImageContainerModifierProps; +export type ImageContainerProps = HelpersProps & ImageContainerModifierProps; export const ImageContainer = forwardRefAs( (props, ref) => { - const { as, size, ...rest } = transformModifiers(props); + const { as, size, ...rest } = transformHelpers(props); let s: string | undefined; if (typeof size === "string") { s = size; diff --git a/src/elements/image/image.tsx b/src/elements/image/image.tsx index 3382a8f4..02ca8fb5 100644 --- a/src/elements/image/image.tsx +++ b/src/elements/image/image.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { ImageContainer } from "./image-container"; export type ImageModifierProps = Partial<{ @@ -10,12 +9,12 @@ export type ImageModifierProps = Partial<{ rounded: boolean; }>; -export type ImageProps = ModifierProps & ImageModifierProps; +export type ImageProps = HelpersProps & ImageModifierProps; export const Image = Object.assign( forwardRefAs( (props, ref) => { - const { as, rounded, ...rest } = transformModifiers(props); + const { as, rounded, ...rest } = transformHelpers(props); rest.className = classNames(rest.className, { "is-rounded": rounded }); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/elements/notification/__tests__/notification.test.tsx b/src/elements/notification/__tests__/notification.test.tsx index 5fcdf2c3..960363b1 100644 --- a/src/elements/notification/__tests__/notification.test.tsx +++ b/src/elements/notification/__tests__/notification.test.tsx @@ -1,7 +1,7 @@ import Enzyme from "enzyme"; import React from "react"; -import { COLORS } from "@/modifiers/color"; +import { COLORS } from "@/base/helpers"; import { Notification } from "../notification"; import { hasProperties } from "@/__tests__/helpers"; diff --git a/src/elements/notification/notification.tsx b/src/elements/notification/notification.tsx index 9fd393aa..005f5947 100644 --- a/src/elements/notification/notification.tsx +++ b/src/elements/notification/notification.tsx @@ -1,20 +1,19 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; -import { Colors } from "../../modifiers/color"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; +import { Colors } from "../../base/helpers"; export type NotificationModifierProps = Partial<{ className: string; color: Colors; }>; -export type NotificationProps = ModifierProps & NotificationModifierProps; +export type NotificationProps = HelpersProps & NotificationModifierProps; export const Notification = forwardRefAs( (props, ref) => { - const { as, color, ...rest } = transformModifiers(props); + const { as, color, ...rest } = transformHelpers(props); rest.className = classNames("notification", rest.className, { [`is-${color}`]: color, }); diff --git a/src/elements/other/block.tsx b/src/elements/other/block.tsx index dfcfd117..79498c98 100644 --- a/src/elements/other/block.tsx +++ b/src/elements/other/block.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type BlockModifierProps = Partial<{ className: string }>; -export type BlockProps = ModifierProps & BlockModifierProps; +export type BlockProps = HelpersProps & BlockModifierProps; export const Block = forwardRefAs( (props, ref) => { - const { as, ...rest } = props; + const { as, ...rest } = transformHelpers(props); rest.className = classNames("block", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/elements/other/delete.tsx b/src/elements/other/delete.tsx index e72728d4..0b0f2a10 100644 --- a/src/elements/other/delete.tsx +++ b/src/elements/other/delete.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { tuple } from "../../utils"; export const DELETE_SIZES = tuple("small", "medium", "large"); @@ -13,11 +12,11 @@ export type DeleteModifierProps = Partial<{ size: DeleteSizes; }>; -export type DeleteProps = ModifierProps & DeleteModifierProps; +export type DeleteProps = HelpersProps & DeleteModifierProps; export const Delete = forwardRefAs( (props, ref) => { - const { as, size, ...rest } = props; + const { as, size, ...rest } = transformHelpers(props); rest.className = classNames("delete", rest.className, { [`is-${size}`]: size, }); diff --git a/src/elements/other/heading.tsx b/src/elements/other/heading.tsx index fa6ea65e..a5481051 100644 --- a/src/elements/other/heading.tsx +++ b/src/elements/other/heading.tsx @@ -1,15 +1,14 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type HeadingModifierProps = Partial<{ className: string }>; -export type HeadingProps = ModifierProps & HeadingModifierProps; +export type HeadingProps = HelpersProps & HeadingModifierProps; export const Heading = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("heading", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/elements/other/highlight.tsx b/src/elements/other/highlight.tsx index 9dd4b54a..2f21dcbe 100644 --- a/src/elements/other/highlight.tsx +++ b/src/elements/other/highlight.tsx @@ -1,15 +1,14 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type HighlightModifierProps = Partial<{ className: string }>; -export type HighlightProps = ModifierProps & HighlightModifierProps; +export type HighlightProps = HelpersProps & HighlightModifierProps; export const Highlight = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("highlight", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/elements/other/loader.tsx b/src/elements/other/loader.tsx index 4c3aa8a6..69f017cc 100644 --- a/src/elements/other/loader.tsx +++ b/src/elements/other/loader.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type LoaderModifierProps = Partial<{ className: string }>; -export type LoaderProps = ModifierProps & LoaderModifierProps; +export type LoaderProps = HelpersProps & LoaderModifierProps; export const Loader = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("loader", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/elements/other/numeric.tsx b/src/elements/other/numeric.tsx index 914c5a1b..df35da84 100644 --- a/src/elements/other/numeric.tsx +++ b/src/elements/other/numeric.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type NumericModifierProps = Partial<{ className: string }>; -export type NumericProps = ModifierProps & NumericModifierProps; +export type NumericProps = HelpersProps & NumericModifierProps; export const Numeric = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("number", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/elements/progress/__tests__/progress.test.tsx b/src/elements/progress/__tests__/progress.test.tsx index fd6194e0..b084b827 100644 --- a/src/elements/progress/__tests__/progress.test.tsx +++ b/src/elements/progress/__tests__/progress.test.tsx @@ -1,7 +1,7 @@ import Enzyme from "enzyme"; import React from "react"; -import { COLORS } from "@/modifiers/color"; +import { COLORS } from "@/base/helpers"; import { Progress, PROGRESS_SIZES } from "../progress"; import { hasProperties } from "@/__tests__/helpers"; diff --git a/src/elements/progress/progress.tsx b/src/elements/progress/progress.tsx index b70f07a1..57cb3f59 100644 --- a/src/elements/progress/progress.tsx +++ b/src/elements/progress/progress.tsx @@ -1,9 +1,8 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps } from "../../modifiers"; -import { Colors } from "../../modifiers/color"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; +import { Colors } from "../../base/helpers"; import { tuple } from "../../utils"; export const PROGRESS_SIZES = tuple("small", "medium", "large"); @@ -17,11 +16,11 @@ export interface ProgressModifierProps { value: number; } -export type ProgressProps = ModifierProps & ProgressModifierProps; +export type ProgressProps = HelpersProps & ProgressModifierProps; export const Progress = forwardRefAs( (props, ref) => { - const { as, color, size, ...rest } = props; + const { as, color, size, ...rest } = transformHelpers(props); rest.className = classNames("progress", rest.className, { [`is-${color}`]: color, [`is-${size}`]: size, diff --git a/src/elements/table/table.tsx b/src/elements/table/table.tsx index b2403b8a..22589b49 100644 --- a/src/elements/table/table.tsx +++ b/src/elements/table/table.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type TableModifierProps = Partial<{ bordered: boolean; @@ -13,7 +12,7 @@ export type TableModifierProps = Partial<{ striped: boolean; }>; -export type TableProps = ModifierProps & TableModifierProps; +export type TableProps = HelpersProps & TableModifierProps; export const Table = forwardRefAs( (props, ref) => { @@ -25,7 +24,7 @@ export const Table = forwardRefAs( narrow, striped, ...rest - } = transformModifiers(props); + } = transformHelpers(props); rest.className = classNames("table", rest.className, { "is-bordered": bordered, "is-fullwidth": fullwidth, diff --git a/src/elements/tag/__tests__/tag.test.tsx b/src/elements/tag/__tests__/tag.test.tsx index 2949d986..5c0edda0 100644 --- a/src/elements/tag/__tests__/tag.test.tsx +++ b/src/elements/tag/__tests__/tag.test.tsx @@ -1,7 +1,7 @@ import Enzyme from "enzyme"; import React from "react"; -import { COLORS } from "@/modifiers/color"; +import { COLORS } from "@/base/helpers"; import { Tag, TAG_SIZES } from "../tag"; import { TagGroup } from "../tag-group"; diff --git a/src/elements/tag/tag-group.tsx b/src/elements/tag/tag-group.tsx index 8122f636..ef758554 100644 --- a/src/elements/tag/tag-group.tsx +++ b/src/elements/tag/tag-group.tsx @@ -1,19 +1,18 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type TagGroupModifierProps = Partial<{ className: string; gapless: boolean; }>; -export type TagGroupProps = ModifierProps & TagGroupModifierProps; +export type TagGroupProps = HelpersProps & TagGroupModifierProps; export const TagGroup = forwardRefAs( (props, ref) => { - const { as, gapless, ...rest } = transformModifiers(props); + const { as, gapless, ...rest } = transformHelpers(props); rest.className = classNames("tags", rest.className, { "has-addons": gapless, }); diff --git a/src/elements/tag/tag.tsx b/src/elements/tag/tag.tsx index 6e0316ef..ed775ccc 100644 --- a/src/elements/tag/tag.tsx +++ b/src/elements/tag/tag.tsx @@ -1,9 +1,8 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; -import { Colors } from "../../modifiers/color"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; +import { Colors } from "../../base/helpers"; import { tuple } from "../../utils"; import { TagGroup } from "./tag-group"; @@ -18,7 +17,7 @@ export type TagModifierProps = Partial<{ size: TagSizes; }>; -export type TagProps = ModifierProps & TagModifierProps; +export type TagProps = HelpersProps & TagModifierProps; export const Tag = Object.assign( forwardRefAs( @@ -31,7 +30,7 @@ export const Tag = Object.assign( rounded, size, ...rest - } = transformModifiers(props); + } = transformHelpers(props); rest.className = classNames("tag", rest.className, { [`is-${size}`]: size, [`is-${color}`]: color, diff --git a/src/elements/title/title.tsx b/src/elements/title/title.tsx index eb28652a..9dbc9181 100644 --- a/src/elements/title/title.tsx +++ b/src/elements/title/title.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { tuple } from "../../utils"; export const TITLE_SIZES = tuple(1, 2, 3, 4, 5, 6); @@ -15,11 +14,11 @@ export type TitleModifierProps = Partial<{ subtitle: boolean; }>; -export type TitleProps = ModifierProps & TitleModifierProps; +export type TitleProps = HelpersProps & TitleModifierProps; export const Title = forwardRefAs( (props, ref) => { - const { as, size, spaced, subtitle, ...rest } = transformModifiers(props); + const { as, size, spaced, subtitle, ...rest } = transformHelpers(props); rest.className = classNames(rest.className, { [`is-${size}`]: !!size, "is-spaced": spaced && !subtitle, diff --git a/src/grid/columns/__tests__/columns.test.tsx b/src/grid/columns/__tests__/columns.test.tsx index 0a82fb7d..f032cce8 100644 --- a/src/grid/columns/__tests__/columns.test.tsx +++ b/src/grid/columns/__tests__/columns.test.tsx @@ -1,7 +1,7 @@ import Enzyme from "enzyme"; import React from "react"; -import { BREAKPOINTS } from "@/modifiers/responsive"; +import { BREAKPOINTS } from "@/base/helpers"; import { Column } from "../column"; import { Columns, COLUMNS_GAPS } from "../columns"; diff --git a/src/grid/columns/column.tsx b/src/grid/columns/column.tsx index b93e7f67..925a18ee 100644 --- a/src/grid/columns/column.tsx +++ b/src/grid/columns/column.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { tuple } from "../../utils"; export const COLUMN_SIZES = tuple( @@ -79,7 +78,7 @@ export type ColumnModifierProps = Partial< } & ColumnSizeModifierProps >; -export type ColumnProps = ModifierProps & ColumnModifierProps; +export type ColumnProps = HelpersProps & ColumnModifierProps; export const Column = forwardRefAs( (props, ref) => { @@ -95,7 +94,7 @@ export const Column = forwardRefAs( offset, size, ...rest - } = transformModifiers(props); + } = transformHelpers(props); rest.className = classNames( "column", diff --git a/src/grid/columns/columns.tsx b/src/grid/columns/columns.tsx index 4675e3c2..27507cf9 100644 --- a/src/grid/columns/columns.tsx +++ b/src/grid/columns/columns.tsx @@ -1,9 +1,8 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; -import { Breakpoints } from "../../modifiers/responsive"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; +import { Breakpoints } from "../../base/helpers"; import { tuple } from "../../utils"; import { Column } from "./column"; @@ -61,7 +60,7 @@ type ColumnsModifierProps = Partial< } & ColumnsBreakpointProps >; -export type ColumnsProps = ModifierProps & ColumnsModifierProps; +export type ColumnsProps = HelpersProps & ColumnsModifierProps; export const Columns = Object.assign( forwardRefAs( @@ -79,7 +78,7 @@ export const Columns = Object.assign( tablet, widescreen, ...rest - } = transformModifiers(props); + } = transformHelpers(props); const gapClassNames = classNames( { [`is-${gap}`]: typeof gap === "number" }, diff --git a/src/grid/tiles/__tests__/tile.test.tsx b/src/grid/tiles/__tests__/tile.test.tsx index b98f4e2e..bada49db 100644 --- a/src/grid/tiles/__tests__/tile.test.tsx +++ b/src/grid/tiles/__tests__/tile.test.tsx @@ -1,7 +1,7 @@ import Enzyme from "enzyme"; import React from "react"; -import { COLORS } from "@/modifiers/color"; +import { COLORS } from "@/base/helpers"; import { Tile, TILE_KINDS, TILE_SIZES } from "../tile"; import { hasProperties } from "@/__tests__/helpers"; diff --git a/src/grid/tiles/tile.tsx b/src/grid/tiles/tile.tsx index c27dd974..2b11bad4 100644 --- a/src/grid/tiles/tile.tsx +++ b/src/grid/tiles/tile.tsx @@ -1,9 +1,8 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; -import { Colors } from "../../modifiers/color"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; +import { Colors } from "../../base/helpers"; import { tuple } from "../../utils"; export const TILE_KINDS = tuple("ancestor", "parent", "child"); @@ -21,7 +20,7 @@ export type TileModifierProps = Partial<{ vertical: boolean; }>; -export type TileProps = ModifierProps & TileModifierProps; +export type TileProps = HelpersProps & TileModifierProps; export const Tile = forwardRefAs( (props, ref) => { @@ -33,7 +32,7 @@ export const Tile = forwardRefAs( size, vertical, ...rest - } = transformModifiers(props); + } = transformHelpers(props); rest.className = classNames("tile", rest.className, { [`is-${color}`]: color, [`is-${kind}`]: kind, diff --git a/src/layout/footer/footer.tsx b/src/layout/footer/footer.tsx index 701f4f01..b257e802 100644 --- a/src/layout/footer/footer.tsx +++ b/src/layout/footer/footer.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type FooterModifierProps = Partial<{ className: string }>; -export type FooterProps = ModifierProps & FooterModifierProps; +export type FooterProps = HelpersProps & FooterModifierProps; export const Footer = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("footer", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/layout/hero/__tests__/hero.test.tsx b/src/layout/hero/__tests__/hero.test.tsx index 0c7513cd..df131537 100644 --- a/src/layout/hero/__tests__/hero.test.tsx +++ b/src/layout/hero/__tests__/hero.test.tsx @@ -1,7 +1,7 @@ import Enzyme from "enzyme"; import React from "react"; -import { COLORS } from "@/modifiers/color"; +import { COLORS } from "@/base/helpers"; import { Hero, HERO_SIZES } from "../hero"; import { HeroBody } from "../hero-body"; import { HeroFoot } from "../hero-foot"; diff --git a/src/layout/hero/hero-body.tsx b/src/layout/hero/hero-body.tsx index 13c20cd3..2cd02be5 100644 --- a/src/layout/hero/hero-body.tsx +++ b/src/layout/hero/hero-body.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type HeroBodyModifierProps = Partial<{ className: string }>; -export type HeroBodyProps = ModifierProps & HeroBodyModifierProps; +export type HeroBodyProps = HelpersProps & HeroBodyModifierProps; export const HeroBody = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("hero-body", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/layout/hero/hero-foot.tsx b/src/layout/hero/hero-foot.tsx index ecd988e7..46f63eb0 100644 --- a/src/layout/hero/hero-foot.tsx +++ b/src/layout/hero/hero-foot.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type HeroFootModifierProps = Partial<{ className: string }>; -export type HeroFootProps = ModifierProps & HeroFootModifierProps; +export type HeroFootProps = HelpersProps & HeroFootModifierProps; export const HeroFoot = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("hero-foot", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/layout/hero/hero-head.tsx b/src/layout/hero/hero-head.tsx index f1d63e8c..97931ded 100644 --- a/src/layout/hero/hero-head.tsx +++ b/src/layout/hero/hero-head.tsx @@ -1,16 +1,15 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; export type HeroHeadModifierProps = Partial<{ className: string }>; -export type HeroHeadProps = ModifierProps & HeroHeadModifierProps; +export type HeroHeadProps = HelpersProps & HeroHeadModifierProps; export const HeroHead = forwardRefAs( (props, ref) => { - const { as, ...rest } = transformModifiers(props); + const { as, ...rest } = transformHelpers(props); rest.className = classNames("hero-head", rest.className); return React.createElement(as!, { ref, ...rest }); }, diff --git a/src/layout/hero/hero.tsx b/src/layout/hero/hero.tsx index c5182f9e..3463331d 100644 --- a/src/layout/hero/hero.tsx +++ b/src/layout/hero/hero.tsx @@ -1,9 +1,8 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; -import { Colors } from "../../modifiers/color"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; +import { Colors } from "../../base/helpers"; import { tuple } from "../../utils"; import { HeroBody } from "./hero-body"; import { HeroFoot } from "./hero-foot"; @@ -24,12 +23,12 @@ export type HeroModifierProps = Partial<{ size: HeroSizes; }>; -export type HeroProps = ModifierProps & HeroModifierProps; +export type HeroProps = HelpersProps & HeroModifierProps; export const Hero = Object.assign( forwardRefAs( (props, ref) => { - const { as, color, gradient, size, ...rest } = transformModifiers(props); + const { as, color, gradient, size, ...rest } = transformHelpers(props); rest.className = classNames("hero", rest.className, { "is-bold": gradient, [`is-${color}`]: color, diff --git a/src/layout/section/section.tsx b/src/layout/section/section.tsx index be0b2307..61e7c6b9 100644 --- a/src/layout/section/section.tsx +++ b/src/layout/section/section.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { forwardRefAs } from "../../base"; -import { ModifierProps, transformModifiers } from "../../modifiers"; +import { forwardRefAs, HelpersProps, transformHelpers } from "../../base"; import { tuple } from "../../utils"; export const SECTION_SIZES = tuple("medium", "large"); @@ -13,11 +12,11 @@ export type SectionModifierProps = Partial<{ size: SectionSizes; }>; -export type SectionProps = ModifierProps & SectionModifierProps; +export type SectionProps = HelpersProps & SectionModifierProps; export const Section = forwardRefAs( (props, ref) => { - const { as, size, ...rest } = transformModifiers(props); + const { as, size, ...rest } = transformHelpers(props); rest.className = classNames("section", rest.className, { [`is-${size}`]: size, }); diff --git a/src/modifiers/__tests__/color.test.ts b/src/modifiers/__tests__/color.test.ts deleted file mode 100644 index b7c5a60d..00000000 --- a/src/modifiers/__tests__/color.test.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { COLORS, GREY_COLORS, transformColorModifiers } from "../color"; - -describe("Color modifiers", () => { - it("should preserve unknown props", () => { - const props = { foo: "bar" }; - expect(transformColorModifiers(props)).toEqual(props); - }); - - it("should not set className on empty", () => { - expect(transformColorModifiers({})).toEqual({}); - }); - - it("should preserve custom className", () => { - const className = "foo"; - expect(transformColorModifiers({ className })).toEqual({ className }); - }); - - [...COLORS, ...GREY_COLORS].map(color => - it(`should make text-color ${color}`, () => { - expect(transformColorModifiers({ textColor: color })).toEqual({ - className: `has-text-${color}`, - }); - }), - ); - - [...COLORS, ...GREY_COLORS].map(color => - it(`should make background-color ${color}`, () => { - expect(transformColorModifiers({ backgroundColor: color })).toEqual({ - className: `has-background-${color}`, - }); - }), - ); -}); diff --git a/src/modifiers/__tests__/helpers.test.ts b/src/modifiers/__tests__/helpers.test.ts deleted file mode 100644 index adb11e31..00000000 --- a/src/modifiers/__tests__/helpers.test.ts +++ /dev/null @@ -1,143 +0,0 @@ -import { FLOAT_PULLED_ALIGNMENTS, transformHelpersModifiers } from "../helpers"; - -describe("Helpers modifiers", () => { - it("should preserve unknown props", () => { - const props = { foo: "bar" }; - expect(transformHelpersModifiers(props)).toEqual(props); - }); - - it("should not set className on empty", () => { - expect(transformHelpersModifiers({})).toEqual({}); - }); - - it("should preserve custom className", () => { - const className = "foo"; - expect(transformHelpersModifiers({ className })).toEqual({ className }); - }); - - describe("float modifiers:", () => { - [false, true].map(clearfix => - it(`should ${clearfix ? "" : "not "}be clearfix`, () => { - expect(transformHelpersModifiers({ clearfix })).toEqual( - clearfix ? { className: "is-clearfix" } : {}, - ); - }), - ); - - FLOAT_PULLED_ALIGNMENTS.map(align => - it(`should pull ${align}`, () => { - expect(transformHelpersModifiers({ pull: align })).toEqual({ - className: `is-pulled-${align}`, - }); - }), - ); - }); - - describe("spacing modifiers:", () => { - [false, true].map(marginless => - it(`should ${marginless ? "" : "not "}be marginless`, () => { - expect(transformHelpersModifiers({ marginless })).toEqual( - marginless ? { className: "is-marginless" } : {}, - ); - }), - ); - - [false, true].map(paddingless => - it(`should ${paddingless ? "" : "not "}be paddingless`, () => { - expect(transformHelpersModifiers({ paddingless })).toEqual( - paddingless ? { className: "is-paddingless" } : {}, - ); - }), - ); - }); - - describe("other modifiers:", () => { - [false, true].map(clipped => - it(`should ${clipped ? "" : "not "}be clipped`, () => { - expect(transformHelpersModifiers({ clipped })).toEqual( - clipped ? { className: "is-clipped" } : {}, - ); - }), - ); - - [false, true].map(hidden => - it(`should ${hidden ? "" : "not "}be hidden`, () => { - expect(transformHelpersModifiers({ hidden })).toEqual( - hidden ? { className: "is-hidden" } : {}, - ); - }), - ); - - [false, true].map(invisible => - it(`should ${invisible ? "" : "not "}be invisible`, () => { - expect(transformHelpersModifiers({ invisible })).toEqual( - invisible ? { className: "is-invisible" } : {}, - ); - }), - ); - - [false, true].map(overlay => - it(`should ${overlay ? "" : "not "}be overlay`, () => { - expect(transformHelpersModifiers({ overlay })).toEqual( - overlay ? { className: "is-overlay" } : {}, - ); - }), - ); - - [false, true].map(radiusless => - it(`should ${radiusless ? "" : "not "}be radiusless`, () => { - expect(transformHelpersModifiers({ radiusless })).toEqual( - radiusless ? { className: "is-radiusless" } : {}, - ); - }), - ); - - [false, true].map(srOnly => - it(`should ${srOnly ? "" : "not "}be srOnly`, () => { - expect(transformHelpersModifiers({ srOnly })).toEqual( - srOnly ? { className: "is-sr-only" } : {}, - ); - }), - ); - - [false, true].map(shadowless => - it(`should ${shadowless ? "" : "not "}be shadowless`, () => { - expect(transformHelpersModifiers({ shadowless })).toEqual( - shadowless ? { className: "is-shadowless" } : {}, - ); - }), - ); - - [false, true].map(unselectable => - it(`should ${unselectable ? "" : "not "}be unselectable`, () => { - expect(transformHelpersModifiers({ unselectable })).toEqual( - unselectable ? { className: "is-unselectable" } : {}, - ); - }), - ); - }); - - // [false, true].map(z => - // it(`should ${z ? "" : "not "}be z`, () => { - // expect(transformHelpersModifiers({ z })).toEqual( - // z ? { className: "is-z" } : {}, - // ); - // }), - // ); - - // [false, true].map(clearfix => - // it(`should ${clearfix ? "" : "not "}be clearfix`, () => { - // expect(transformHelpersModifiers({ clearfix })).toEqual( - // clearfix ? { className: "is-clearfix" } : {}, - // ); - // }), - // ); - - // [false, true].map(clearfix => - // it(`should ${clearfix ? "" : "not "}be clearfix`, () => { - // expect(transformHelpersModifiers({ clearfix })).toEqual( - // clearfix ? { className: "is-clearfix" } : {}, - // ); - // }), - // ); -}); diff --git a/src/modifiers/__tests__/index.test.ts b/src/modifiers/__tests__/index.test.ts deleted file mode 100644 index cbde17b4..00000000 --- a/src/modifiers/__tests__/index.test.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { transformModifiers } from ".."; - -describe("Modifiers", () => { - it("should preserve unknown props", () => { - const props = { foo: "bar" }; - expect(transformModifiers(props)).toEqual(props); - }); - - it("should not set className on empty", () => { - expect(transformModifiers({})).toEqual({}); - }); - - it("should preserve custom className", () => { - const className = "foo"; - expect(transformModifiers({ className })).toEqual({ className }); - }); - - it("should apply color transforms", () => { - expect(transformModifiers({ textColor: "primary" })).toEqual({ - className: "has-text-primary", - }); - }); - - it("should apply helpers transforms", () => { - expect(transformModifiers({ clearfix: true })).toEqual({ - className: "is-clearfix", - }); - }); - - it("should apply responsive transforms", () => { - expect( - transformModifiers({ responsive: { mobile: { textSize: { value: 1 } } } }), - ).toEqual({ - className: "is-size-1-mobile", - }); - }); - - it("should apply typography transforms", () => { - expect(transformModifiers({ textSize: 1 })).toEqual({ - className: "is-size-1", - }); - }); -}); diff --git a/src/modifiers/__tests__/responsive.test.ts b/src/modifiers/__tests__/responsive.test.ts deleted file mode 100644 index 47185b39..00000000 --- a/src/modifiers/__tests__/responsive.test.ts +++ /dev/null @@ -1,129 +0,0 @@ -import { - BREAKPOINTS, - DISPLAYS, - transformResponsiveModifiers, -} from "../responsive"; -import { TEXT_ALIGNMENTS, TEXT_SIZES } from "../typography"; - -describe("Responsive modifiers", () => { - it("should preserve unknown props", () => { - const props = { foo: "bar" }; - expect(transformResponsiveModifiers(props)).toEqual(props); - }); - - it("should not set className on empty", () => { - expect(transformResponsiveModifiers({})).toEqual({}); - }); - - it("should preserve custom className", () => { - const className = "foo"; - expect(transformResponsiveModifiers({ className })).toEqual({ className }); - }); - - it("should preserve custom className", () => { - const className = "foo"; - expect(transformResponsiveModifiers({ className })).toEqual({ className }); - }); - - BREAKPOINTS.map(breakpoint => { - // these sizes don't support the `only` prop. - const noOnly = ["mobile", "fullhd", "desktop"]; - - describe(`for ${breakpoint}`, () => { - DISPLAYS.map(value => - [undefined, false, true] - .filter(() => noOnly.includes(breakpoint)) - .map(only => - it(`should be display ${value} ${only ? "only" : ""}`, () => { - const display = only === undefined ? { value } : { value, only }; - expect( - transformResponsiveModifiers({ - responsive: { [breakpoint]: { display } }, - }), - ).toEqual( - value - ? { - className: `is-${value}-${breakpoint}${ - only ? "-only" : "" - }`, - } - : {}, - ); - }), - ), - ); - - [false, true].map(value => - [undefined, false, true] - .filter(() => noOnly.includes(breakpoint)) - .map(only => - it(`should ${value ? "" : "not "}be hidden ${ - only ? "only" : "" - }`, () => { - const hide = only === undefined ? { value } : { value, only }; - expect( - transformResponsiveModifiers({ - responsive: { [breakpoint]: { hide } }, - }), - ).toEqual( - value - ? { - className: `is-hidden-${breakpoint}${only ? "-only" : ""}`, - } - : {}, - ); - }), - ), - ); - - TEXT_ALIGNMENTS.map(value => - [undefined, false, true] - .filter(() => noOnly.includes(breakpoint)) - .map(only => - it(`should have text aligned ${value} ${ - only ? "only" : "" - }`, () => { - const textAlignment = - only === undefined ? { value } : { value, only }; - expect( - transformResponsiveModifiers({ - responsive: { [breakpoint]: { textAlignment } }, - }), - ).toEqual( - value - ? { - className: `has-text-${value}-${breakpoint}${ - only ? "-only" : "" - }`, - } - : {}, - ); - }), - ), - ); - - TEXT_SIZES.map(value => - [undefined, false, true] - .filter(() => noOnly.includes(breakpoint)) - .map(only => - it(`should have text size ${value} ${only ? "only" : ""}`, () => { - const textSize = only === undefined ? { value } : { value, only }; - expect( - transformResponsiveModifiers({ - responsive: { [breakpoint]: { textSize } }, - }), - ).toEqual( - value - ? { - className: `is-size-${value}-${breakpoint}${ - only ? "-only" : "" - }`, - } - : {}, - ); - }), - ), - ); - }); - }); -}); diff --git a/src/modifiers/__tests__/typography.test.ts b/src/modifiers/__tests__/typography.test.ts deleted file mode 100644 index 129594f2..00000000 --- a/src/modifiers/__tests__/typography.test.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { - TEXT_ALIGNMENTS, - TEXT_SIZES, - TEXT_TRANSFORMS, - TEXT_WEIGHTS, - transformTypographyModifiers, -} from "../typography"; - -describe("Typography modifiers", () => { - it("should preserve unknown props", () => { - const props = { foo: "bar" }; - expect(transformTypographyModifiers(props)).toEqual(props); - }); - - it("should not set className on empty", () => { - expect(transformTypographyModifiers({})).toEqual({}); - }); - - it("should preserve custom className", () => { - const className = "foo"; - expect(transformTypographyModifiers({ className })).toEqual({ className }); - }); - - [false, true].map(italic => - it(`should ${italic ? "" : "not "}be italic`, () => { - expect(transformTypographyModifiers({ italic })).toEqual( - italic ? { className: "is-italic" } : {}, - ); - }), - ); - - TEXT_ALIGNMENTS.map(align => - it(`should align ${align}`, () => { - expect(transformTypographyModifiers({ textAlignment: align })).toEqual({ - className: `has-text-${align}`, - }); - }), - ); - - TEXT_SIZES.map(size => - it(`should be size ${size}`, () => { - expect(transformTypographyModifiers({ textSize: size })).toEqual({ - className: `is-size-${size}`, - }); - }), - ); - - TEXT_TRANSFORMS.map(transform => - it(`should be ${transform}`, () => { - expect( - transformTypographyModifiers({ textTransform: transform }), - ).toEqual({ - className: `is-${transform}`, - }); - }), - ); - - TEXT_WEIGHTS.map(weight => - it(`should be ${weight}`, () => { - expect(transformTypographyModifiers({ textWeight: weight })).toEqual({ - className: `has-text-weight-${weight}`, - }); - }), - ); -}); diff --git a/src/modifiers/color.ts b/src/modifiers/color.ts deleted file mode 100644 index ca873791..00000000 --- a/src/modifiers/color.ts +++ /dev/null @@ -1,45 +0,0 @@ -import classNames from "classnames"; - -import { tuple } from "../utils"; -import { makeTransform } from "./utils"; - -export const COLORS = tuple( - "primary", - "success", - "info", - "warning", - "danger", - "light", - "dark", - "white", - "black", - "link", -); -export type Colors = (typeof COLORS)[number]; - -export const GREY_COLORS = tuple( - "black-bis", - "black-ter", - "grey-darker", - "grey-dark", - "grey", - "grey-light", - "grey-lighter", - "white-ter", - "white-bis", -); -export type GreyColors = (typeof GREY_COLORS)[number]; - -export type ColorsProps = Partial<{ - backgroundColor: Colors | GreyColors; - textColor: Colors | GreyColors; -}>; - -export const transformColorModifiers = makeTransform( - props => - classNames(props.className, { - [`has-background-${props.backgroundColor}`]: props.backgroundColor, - [`has-text-${props.textColor}`]: props.textColor, - }), - ["backgroundColor", "textColor"], -); diff --git a/src/modifiers/helpers.ts b/src/modifiers/helpers.ts deleted file mode 100644 index 9188b1fd..00000000 --- a/src/modifiers/helpers.ts +++ /dev/null @@ -1,87 +0,0 @@ -import classNames from "classnames"; - -import { tuple } from "../utils"; -import { makeTransform } from "./utils"; - -export const FLOAT_PULLED_ALIGNMENTS = tuple("left", "right"); -export type FloatPulledAlignments = (typeof FLOAT_PULLED_ALIGNMENTS)[number]; - -export type FloatHelpersProps = Partial<{ - /** Fixes an element's floating children */ - clearfix: boolean; - /** Moves an element to the left or right */ - pull: FloatPulledAlignments; -}>; - -export type SpacingHelpersProps = Partial<{ - /** Removes any margin */ - marginless: boolean; - /** Removes any padding */ - paddingless: boolean; -}>; - -export type OtherHelpersProps = Partial<{ - /** Adds overflow hidden */ - clipped: boolean; - /** Hides an element (unclear on where this is documented in Bulma) */ - hidden: boolean; - /** Adds visibility hidden */ - invisible: boolean; - /** Completely covers the first positioned parent */ - overlay: boolean; - /** Removes any radius */ - radiusless: boolean; - /** Removes any shadow */ - shadowless: boolean; - /** - * Hide elements visually but keep the element available to be announced by a - * screen reader - */ - srOnly: boolean; - /** Prevents the text from being selectable */ - unselectable: boolean; -}>; - -export type HelpersProps = FloatHelpersProps & - SpacingHelpersProps & - OtherHelpersProps; - -// tslint:disable:object-literal-sort-keys -export const transformHelpersModifiers = makeTransform( - props => - classNames(props.className, { - // Float - "is-clearfix": props.clearfix, - [`is-pulled-${props.pull}`]: props.pull, - // Spacing - "is-marginless": props.marginless, - "is-paddingless": props.paddingless, - // Other - "is-clipped": props.clipped, - "is-hidden": props.hidden, - "is-invisible": props.invisible, - "is-overlay": props.overlay, - "is-radiusless": props.radiusless, - "is-shadowless": props.shadowless, - "is-sr-only": props.srOnly, - "is-unselectable": props.unselectable, - }), - [ - // Float - "clearfix", - "pull", - // Spacing - "marginless", - "paddingless", - // Other - "clipped", - "hidden", - "invisible", - "overlay", - "radiusless", - "shadowless", - "srOnly", - "unselectable", - ], -); -// tslint:enable:object-literal-sort-keys diff --git a/src/modifiers/index.ts b/src/modifiers/index.ts deleted file mode 100644 index 5c8d3b52..00000000 --- a/src/modifiers/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -import * as color from "./color"; -import * as helpers from "./helpers"; -import * as responsive from "./responsive"; -import * as typography from "./typography"; - -export type ModifierProps = color.ColorsProps & - helpers.HelpersProps & - responsive.ResponsiveProps & - typography.TypographyProps; - -export const transformModifiers = ( - props: T, -) => - typography.transformTypographyModifiers( - responsive.transformResponsiveModifiers( - helpers.transformHelpersModifiers(color.transformColorModifiers(props)), - ), - ); diff --git a/src/modifiers/responsive.ts b/src/modifiers/responsive.ts deleted file mode 100644 index 4851ba8b..00000000 --- a/src/modifiers/responsive.ts +++ /dev/null @@ -1,118 +0,0 @@ -import classNames from "classnames"; - -import { tuple } from "../utils"; -import { TextAlignments, TextSizes } from "./typography"; -import { makeTransform } from "./utils"; - -export const BREAKPOINTS = tuple( - "mobile", - "tablet", - "desktop", - "widescreen", - "fullhd", - "touch", -); -export type Breakpoints = (typeof BREAKPOINTS)[number]; - -export const DISPLAYS = tuple( - "block", - "flex", - "inline", - "inline-block", - "inline-flex", -); -export type Displays = (typeof DISPLAYS)[number]; - -export type LimitiedResponsiveBreakpointProps = Partial<{ - display: { - value: Displays; - }; - hide: { - value: boolean; - }; - textAlignment: { - value: TextAlignments; - }; - textSize: { - value: TextSizes; - }; -}>; - -export type ResponsiveBreakpointProps = Partial<{ - display: { - only?: boolean; - value: Displays; - }; - hide: { - only?: boolean; - value: boolean; - }; - textAlignment: { - only?: boolean; - value: TextAlignments; - }; - textSize: { - only?: boolean; - value: TextSizes; - }; -}>; - -export type ResponsiveProps = Partial<{ - responsive: Partial<{ - mobile: LimitiedResponsiveBreakpointProps; - tablet: ResponsiveBreakpointProps; - desktop: ResponsiveBreakpointProps; - widescreen: ResponsiveBreakpointProps; - fullhd: LimitiedResponsiveBreakpointProps; - touch: LimitiedResponsiveBreakpointProps; - }>; -}>; - -export const transformResponsiveModifiers = makeTransform( - props => { - return classNames( - props.className, - props.responsive && - Object.keys(props.responsive) - .filter(breakpoint => props.responsive![breakpoint]) - .map(breakpoint => { - const names = {}; - const { - display, - hide, - textAlignment, - textSize, - } = props.responsive![breakpoint] as - | ResponsiveBreakpointProps - | LimitiedResponsiveBreakpointProps; - if (display) { - const value = display.value; - const only = "only" in display ? display.only : false; - names[`is-${value}-${breakpoint}${only ? "-only" : ""}`] = value; - } - if (hide) { - const value = hide.value; - const only = "only" in hide ? hide.only : false; - names[`is-hidden-${breakpoint}${only ? "-only" : ""}`] = value; - } - if (textAlignment) { - const value = textAlignment.value; - const only = "only" in textAlignment ? textAlignment.only : false; - names[ - `has-text-${value}-${breakpoint}${only ? "-only" : ""}` - ] = value; - } - if (textSize) { - const value = textSize.value; - const only = "only" in textSize ? textSize.only : false; - names[ - `is-size-${value}-${breakpoint}${only ? "-only" : ""}` - ] = !!value; - } - return names; - }) - .reduce((acc, cv) => ({ ...acc, ...cv }), {}), - ); - }, - ["responsive"], -); diff --git a/src/modifiers/typography.ts b/src/modifiers/typography.ts deleted file mode 100644 index 05081a0c..00000000 --- a/src/modifiers/typography.ts +++ /dev/null @@ -1,36 +0,0 @@ -import classNames from "classnames"; - -import { tuple } from "../utils"; -import { makeTransform } from "./utils"; - -export const TEXT_ALIGNMENTS = tuple("centered", "justified", "left", "right"); -export type TextAlignments = (typeof TEXT_ALIGNMENTS)[number]; - -export const TEXT_SIZES = tuple(1, 2, 3, 4, 5, 6); -export type TextSizes = (typeof TEXT_SIZES)[number]; - -export const TEXT_TRANSFORMS = tuple("capitalized", "lowercase", "uppercase"); -export type TextTransforms = (typeof TEXT_TRANSFORMS)[number]; - -export const TEXT_WEIGHTS = tuple("light", "normal", "semibold", "bold"); -export type TextWeights = (typeof TEXT_WEIGHTS)[number]; - -export type TypographyProps = Partial<{ - italic: boolean; - textAlignment: TextAlignments; - textSize: TextSizes; - textTransform: TextTransforms; - textWeight: TextWeights; -}>; - -export const transformTypographyModifiers = makeTransform( - props => - classNames(props.className, { - "is-italic": props.italic, - [`is-${props.textTransform}`]: props.textTransform, - [`has-text-${props.textAlignment}`]: props.textAlignment, - [`has-text-weight-${props.textWeight}`]: props.textWeight, - [`is-size-${props.textSize}`]: !!props.textSize, - }), - ["italic", "textAlignment", "textSize", "textTransform", "textWeight"], -); diff --git a/src/modifiers/utils.ts b/src/modifiers/utils.ts deleted file mode 100644 index b8494d72..00000000 --- a/src/modifiers/utils.ts +++ /dev/null @@ -1,19 +0,0 @@ -type TransformedProps = Omit; - -export function makeTransform( - classNameTransform: ( - props: U, - ) => string, - removeKeys: string[], -) { - return (props: V) => { - const className = classNameTransform(props); - const initial = Object.assign({}, props, className ? { className } : null); - - // remove keys - return Object.entries(initial) - .filter(([key, value]) => !removeKeys.includes(key)) - .map(([key, value]) => ({ [key]: value })) - .reduce((acc, cv) => ({ ...acc, ...cv }), {}) as TransformedProps; - }; -} diff --git a/stories/base/base.story.tsx b/stories/base/base.story.tsx index d6ab8ea2..1c5738ae 100644 --- a/stories/base/base.story.tsx +++ b/stories/base/base.story.tsx @@ -2,8 +2,8 @@ import { storiesOf } from "@storybook/react"; import React from "react"; import { Generic } from "@/base"; +import { BREAKPOINTS } from "@/base/helpers"; import { Section } from "@/layout"; -import { BREAKPOINTS } from "@/modifiers/responsive"; import { iterableToSelectObject, selectFactory } from "../helpers"; import { modifiersKnobs as mk } from "../modifiers"; diff --git a/stories/elements/button.story.tsx b/stories/elements/button.story.tsx index b9dd7261..d34b3cbb 100644 --- a/stories/elements/button.story.tsx +++ b/stories/elements/button.story.tsx @@ -15,6 +15,7 @@ import { boolean, select } from "@storybook/addon-knobs"; import { storiesOf } from "@storybook/react"; import React from "react"; +import { COLORS } from "@/base/helpers"; import { Button, Icon } from "@/elements"; import { BUTTON_SIZES, @@ -23,7 +24,6 @@ import { } from "@/elements/button/button"; import { BUTTON_GROUP_POSITIONS } from "@/elements/button/button-group"; import { Section } from "@/layout"; -import { COLORS } from "@/modifiers/color"; import { iterableToSelectObject, titleize } from "../helpers"; diff --git a/stories/elements/container.story.tsx b/stories/elements/container.story.tsx index 77031c80..2da3c8f7 100644 --- a/stories/elements/container.story.tsx +++ b/stories/elements/container.story.tsx @@ -2,9 +2,9 @@ import { select } from "@storybook/addon-knobs"; import { storiesOf } from "@storybook/react"; import React from "react"; +import { BREAKPOINTS } from "@/base/helpers"; import { Container, Notification } from "@/elements"; import { Section } from "@/layout"; -import { BREAKPOINTS } from "@/modifiers/responsive"; import { iterableToSelectObject } from "../helpers"; diff --git a/stories/grid/columns.story.tsx b/stories/grid/columns.story.tsx index 0b45afed..2d5c440b 100644 --- a/stories/grid/columns.story.tsx +++ b/stories/grid/columns.story.tsx @@ -2,14 +2,14 @@ import { boolean, select } from "@storybook/addon-knobs"; import { storiesOf } from "@storybook/react"; import React from "react"; +import { Colors } from "@/base/helpers"; +import { BREAKPOINTS } from "@/base/helpers"; import { Box, Notification, Title } from "@/elements"; import { Columns } from "@/grid"; import { ColumnProps } from "@/grid/columns/column"; import { COLUMN_SIZES, ColumnSizes } from "@/grid/columns/column"; import { COLUMNS_GAPS, ColumnsGaps } from "@/grid/columns/columns"; import { Section } from "@/layout"; -import { Colors } from "@/modifiers/color"; -import { BREAKPOINTS } from "@/modifiers/responsive"; import { iterableToSelectObject } from "../helpers"; diff --git a/stories/modifiers.ts b/stories/modifiers.ts index fef1671b..6403b907 100644 --- a/stories/modifiers.ts +++ b/stories/modifiers.ts @@ -1,14 +1,14 @@ import { select } from "@storybook/addon-knobs"; -import { COLORS, GREY_COLORS } from "@/modifiers/color"; -import { FLOAT_PULLED_ALIGNMENTS } from "@/modifiers/helpers"; -import { BREAKPOINTS, DISPLAYS } from "@/modifiers/responsive"; +import { COLORS, GREY_COLORS } from "@/base/helpers"; +import { BREAKPOINTS, DISPLAYS } from "@/base/helpers"; import { + FLOAT_PULLED_ALIGNMENTS, TEXT_ALIGNMENTS, TEXT_SIZES, TEXT_TRANSFORMS, TEXT_WEIGHTS, -} from "@/modifiers/typography"; +} from "@/base/helpers"; import { booleanFactory,