removed use of tuple as v3.5 has const

.size-snapshot.json

@@ -81,8 +81,8 @@
     "gzipped": 9217
   },
   "dist/rbx.umd.js": {
-    "bundled": 92904,
-    "minified": 46726,
-    "gzipped": 9618
+    "bundled": 94443,
+    "minified": 47449,
+    "gzipped": 9762
   }
 }

examples/with-customization/src/theme.tsx

@@ -1,8 +1,7 @@
 import { makeRootValidatingTransform } from "rbx/base/helpers";
 import { DEFAULTS } from "rbx/base/helpers/variables";
-import { tuple } from "rbx/utils";
 
-const COLORS = tuple(...DEFAULTS.colors, "react");
+const COLORS = [...DEFAULTS.colors, "react"] as const;
 
 export const themeValue = {
   transform: makeRootValidatingTransform({ colors: COLORS }),

src/__docs__/customize.mdx

@@ -21,7 +21,7 @@ Before we get on to an example, here's an overview of how we use _TypeScript_ to
 
 Take a look at the [source code for the **helpers variables**](https://github.com/dfee/rbx/blob/master/src/base/helpers/variables.ts), or the [source code for `<Button>`](https://github.com/dfee/rbx/blob/master/src/elements/button/button.tsx), and you'll notice two very important expressions:
 
-1. the `DEFAULTS` or `<COMPONENT>_DEFAULTS` variable that defines the defaults in a `tuple()`
+1. the `DEFAULTS` or `<COMPONENT>_DEFAULTS` variable that defines the defaults in a `const`
 2. a `Variables` or `<Component>Variables` `type` that uses those defaults to construct a _TypeScript_ type.
 
 Looking deeper at the **DEFAULTS**, that's where the _Bulma_ defaults are defined in code.
@@ -68,12 +68,11 @@ If you've altered a [Bulma modifier](https://bulma.io/documentation/modifiers/),
 
 import { makeRootValidatingTransform } from "rbx/base/helpers";
 import { DEFAULTS } from "rbx/base/helpers/variables";
-import { tuple } from "rbx/utils";
 
 import { MyAppNavbar } from "./components";
 import "./App.sass";
 
-const COLORS = tuple(...DEFAULTS.colors, "react");
+const COLORS = [ ...DEFAULTS.colors, "react" ] as const;
 
 const themeValue = {
   transform: makeRootValidatingTransform({ colors: COLORS })

src/__tests__/testing.tsx

@@ -187,7 +187,7 @@ export const validateNumberPropType = <T extends {}>(
 export const validateOneOfPropType = <T extends {}>(
   propTypes: React.WeakValidationMap<T>,
   propName: string,
-  choices: (string | number)[],
+  choices: Readonly<(string | number)[]>,
   extras?: Partial<T>,
 ) =>
   validatePropType(propTypes, propName, [

src/base/helpers/__tests__/badge.test.tsx

@@ -1,6 +1,5 @@
 import { makePropTypes, makeValidatingTransform } from "src/base/helpers/badge";
 import { DEFAULTS } from "src/base/helpers/variables";
-import { tuple } from "../../../utils";
 
 import {
   validateBoolPropType,
@@ -32,7 +31,7 @@ describe("Badge helpers", () => {
     });
 
     describe("custom", () => {
-      const customBadgeSizes = tuple("a", "b");
+      const customBadgeSizes = ["a", "b"] as const;
       const customPropTypes = makePropTypes({
         badgeSizes: customBadgeSizes,
       });

src/base/helpers/__tests__/float.test.tsx

@@ -1,6 +1,5 @@
 import { makePropTypes, makeValidatingTransform } from "src/base/helpers/float";
 import { DEFAULTS } from "src/base/helpers/variables";
-import { tuple } from "../../../utils";
 
 import {
   validateBoolPropType,
@@ -26,7 +25,7 @@ describe("Float helpers", () => {
     testItShouldUseDefaultLocationProp(vtfunc, { clearfix: "__UNKNOWN" });
 
     describe("custom", () => {
-      const customFloatPulledAlignments = tuple("a", "b");
+      const customFloatPulledAlignments = ["a", "b"] as const;
       const customPropTypes = makePropTypes({
         floatPulledAlignments: customFloatPulledAlignments,
       });

src/base/helpers/__tests__/responsive.test.tsx

@@ -17,7 +17,8 @@ const LOC = "prop";
 
 /** these sizes support the `only` prop. */
 const checkIsLimited = (breakpoint: string) =>
-  (DEFAULTS.breakpointsLimited as string[]).indexOf(breakpoint) !== -1;
+  (DEFAULTS.breakpointsLimited as Readonly<string[]>).indexOf(breakpoint) !==
+  -1;
 
 describe("Responsive modifiers", () => {
   const propTypes = makePropTypes();

src/base/helpers/__tests__/tooltip.test.tsx

@@ -3,7 +3,6 @@ import {
   makeValidatingTransform,
 } from "src/base/helpers/tooltip";
 import { DEFAULTS } from "src/base/helpers/variables";
-import { tuple } from "../../../utils";
 
 import {
   validateBoolPropType,
@@ -61,7 +60,7 @@ describe("Tooltip helpers", () => {
     });
 
     describe("custom", () => {
-      const customTooltipPositions = tuple("a", "b");
+      const customTooltipPositions = ["a", "b"] as const;
       const customPropTypes = makePropTypes({
         tooltipPositions: customTooltipPositions,
       });

src/base/helpers/factory.ts

@@ -79,8 +79,8 @@ export const makeRootValidatingTransformFactory = <
   T extends MakeValidatingTransformFunction<any, any>[]
 >(
   ...mvtfs: T
-) => (variables: VariablesDefinitions) => {
-  const vtfs = mvtfs.map(func => func(variables));
+) => (variables: Partial<VariablesDefinitions>) => {
+  const vtfs = mvtfs.map(func => func({ ...DEFAULTS, ...variables }));
   return <
     P extends { className?: string | undefined } & UnionToIntersection<
       ExtractTTransformProps<T[number]>

src/base/helpers/variables.ts

@@ -1,35 +1,34 @@
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export type VariablesDefinitions = {
-  colors: (string | number)[];
-  shades: (string | number)[];
+  colors: Readonly<(string | number)[]>;
+  shades: Readonly<(string | number)[]>;
 
   // Badge
-  badgeSizes: (string | number)[];
+  badgeSizes: Readonly<(string | number)[]>;
 
   // Float
-  floatPulledAlignments: (string | number)[];
+  floatPulledAlignments: Readonly<(string | number)[]>;
 
   // Responsive
-  breakpoints: (string | number)[];
-  breakpointsLimited: (string | number)[];
+  breakpoints: Readonly<(string | number)[]>;
+  breakpointsLimited: Readonly<(string | number)[]>;
 
   // Tooltip
-  tooltipPositions: (string | number)[];
+  tooltipPositions: Readonly<(string | number)[]>;
 
   // Typography
-  textAlignments: (string | number)[];
-  textSizes: (string | number)[];
-  textTransforms: (string | number)[];
-  textWeights: (string | number)[];
+  textAlignments: Readonly<(string | number)[]>;
+  textSizes: Readonly<(string | number)[]>;
+  textTransforms: Readonly<(string | number)[]>;
+  textWeights: Readonly<(string | number)[]>;
 
   // Visibility
-  displays: (string | number)[];
+  displays: Readonly<(string | number)[]>;
 };
 
 export const DEFAULTS = {
-  colors: tuple(
+  colors: [
     "primary",
     "success",
     "info",
@@ -40,8 +39,8 @@ export const DEFAULTS = {
     "white",
     "black",
     "link",
-  ),
-  shades: tuple(
+  ] as const,
+  shades: [
     "black-bis",
     "black-ter",
     "grey-darker",
@@ -51,41 +50,41 @@ export const DEFAULTS = {
     "grey-lighter",
     "white-ter",
     "white-bis",
-  ),
+  ] as const,
 
   // Badge
-  badgeSizes: tuple("small", "medium", "large"),
+  badgeSizes: ["small", "medium", "large"] as const,
 
   // Float
-  floatPulledAlignments: tuple("left", "right"),
+  floatPulledAlignments: ["left", "right"] as const,
 
   // Responsive
-  breakpoints: tuple(
+  breakpoints: [
     "mobile", // up to 768px
     "tablet", // between 769px and 1023px
     "desktop", // between 1024px and 1215px
     "widescreen", // between 1216px and 1407px
     "fullhd", // 1408px and above
     "touch", // mobile or tablet
-  ),
+  ] as const,
   /**
    * Breakpoints that are limited don't support the `only` option, e.g.:
    *   `is-hidden-mobile`: supported
    *   `is-hidden-mobile-only`: unsupported
    */
-  breakpointsLimited: tuple("mobile", "fullhd", "touch"),
+  breakpointsLimited: ["mobile", "fullhd", "touch"] as const,
 
   // Tooltips:
-  tooltipPositions: tuple("top", "right", "bottom", "left"),
+  tooltipPositions: ["top", "right", "bottom", "left"] as const,
 
   // Typography
-  textAlignments: tuple("centered", "justified", "left", "right"),
-  textSizes: tuple(1, 2, 3, 4, 5, 6, 7),
-  textTransforms: tuple("capitalized", "lowercase", "uppercase"),
-  textWeights: tuple("light", "medium", "normal", "semibold", "bold"),
+  textAlignments: ["centered", "justified", "left", "right"] as const,
+  textSizes: [1, 2, 3, 4, 5, 6, 7] as const,
+  textTransforms: ["capitalized", "lowercase", "uppercase"] as const,
+  textWeights: ["light", "medium", "normal", "semibold", "bold"] as const,
 
   // Visibility
-  displays: tuple("block", "flex", "inline", "inline-block", "inline-flex"),
+  displays: ["block", "flex", "inline", "inline-block", "inline-flex"] as const,
 };
 
 // tslint:disable-next-line: no-empty-interface

src/components/breadcrumb/breadcrumb.tsx

@@ -5,13 +5,12 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 import { BreadcrumbItem } from "./breadcrumb-item";
 
 export const BREADCRUMB_DEFAULTS = {
-  alignments: tuple("centered", "right"),
-  separators: tuple("arrow", "bullet", "dot", "succeeds"),
-  sizes: tuple("small", "medium", "large"),
+  alignments: ["centered", "right"] as const,
+  separators: ["arrow", "bullet", "dot", "succeeds"] as const,
+  sizes: ["small", "medium", "large"] as const,
 };
 
 export interface BreadcrumbVariablesOverrides {}

src/components/card/card-header-title.tsx

@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const CARD_HEADER_TITLE_DEFAULTS = {
-  alignments: tuple("centered"),
+  alignments: ["centered"] as const,
 };
 
 export interface CardHeaderTitleVariablesOverrides {}

src/components/dropdown/dropdown-container.tsx

@@ -4,11 +4,11 @@ import React from "react";
 import { Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { combineRefs, tuple } from "../../utils";
+import { combineRefs } from "../../utils";
 import { DropdownContext } from "./dropdown-context";
 
 export const DROPDOWN_DEFAULTS = {
-  alignments: tuple("right"),
+  alignments: ["right"] as const,
 };
 
 export interface DropdownVariablesOverrides {}

src/components/level/level-item.tsx

@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const LEVEL_ITEM_DEFAULTS = {
-  alignments: tuple("left", "right"),
+  alignments: ["left", "right"] as const,
 };
 
 export interface LevelItemVariablesOverrides {}

src/components/media/media-item.tsx

@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const MEDIA_ITEM_DEFAULTS = {
-  alignments: tuple("content", "left", "right"),
+  alignments: ["content", "left", "right"] as const,
 };
 
 export interface MediaItemVariablesOverrides {}

src/components/message/message.tsx

@@ -6,12 +6,11 @@ import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Variables } from "../../base/helpers/variables";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 import { MessageBody } from "./message-body";
 import { MessageHeader } from "./message-header";
 
 export const MESSAGE_DEFAULTS = {
-  sizes: tuple("small", "medium", "large"),
+  sizes: ["small", "medium", "large"] as const,
 };
 
 export interface MessageVariablesOverrides {}

src/components/navbar/navbar-container.tsx

@@ -5,11 +5,11 @@ import { Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Variables } from "../../base/helpers/variables";
 import { Prefer } from "../../types";
-import { canUseDOM, tuple } from "../../utils";
+import { canUseDOM } from "../../utils";
 import { NavbarContext } from "./navbar-context";
 
 export const NAVBAR_DEFAULTS = {
-  fixedAlignments: tuple("top", "bottom"),
+  fixedAlignments: ["top", "bottom"] as const,
 };
 
 export interface NavbarVariablesOverrides {}

src/components/navbar/navbar-dropdown.tsx

@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const NAVBAR_DROPDOWN_DEFAULTS = {
-  alignments: tuple("right"),
+  alignments: ["right"] as const,
 };
 
 export interface NavbarDropdownVariablesOverrides {}

src/components/navbar/navbar-segment.tsx

@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const NAVBAR_SEGMENT_DEFAULTS = {
-  alignments: tuple("start", "end"),
+  alignments: ["start", "end"] as const,
 };
 
 export interface NavbarSegmentVariablesOverrides {}

src/components/pagination/pagination-step.tsx

@@ -5,10 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 
 export const PAGINATION_STEP_DEFAULTS = {
-  alignments: tuple("next", "previous"),
+  alignments: ["next", "previous"] as const,
 };
 
 export interface PaginationStepVariablesOverrides {}

src/components/pagination/pagination.tsx

@@ -5,15 +5,14 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { Prefer } from "../../types";
-import { tuple } from "../../utils";
 import { PaginationEllipsis } from "./pagination-ellipsis";
 import { PaginationLink } from "./pagination-link";
 import { PaginationList } from "./pagination-list";
 import { PaginationStep } from "./pagination-step";
 
 export const PAGINATION_DEFAULTS = {
-  alignments: tuple("centered", "right"),
-  sizes: tuple("small", "medium", "large"),
+  alignments: ["centered", "right"] as const,
+  sizes: ["small", "medium", "large"] as const,
 };
 
 export interface PaginationVariablesOverrides {}