Rename vars for stories to be clearer

rushi · Nov 13, 2023 · dcad056 · dcad056
1 parent 1f0f65f
commit dcad056
Show file tree

Hide file tree

Showing 16 changed files with 59 additions and 53 deletions.
diff --git a/src/components/Avatar.jsx b/src/components/Avatar.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import React from "react";
 import { getInitials } from "../helpers/avatar";
 
-export const sizes = {
+export const avatarSizes = {
     tiny: "h-7 w-7 text-base",
     small: "h-10 w-10 text-base",
     medium: "h-12 w-12 text-md",
@@ -14,7 +14,7 @@ export const Avatar = ({ className, name, color = "bg-primary-lighter", size = "
     const classes = clsx(
         "ui-avatar",
         "inline-flex items-center justify-center rounded-full text-black leading-none",
-        sizes[size],
+        avatarSizes[size],
         color,
         className,
     );
@@ -30,5 +30,5 @@ Avatar.propTypes = {
     className: PropTypes.string,
     color: PropTypes.string,
     name: PropTypes.string,
-    size: PropTypes.oneOf(Object.keys(sizes)),
+    size: PropTypes.oneOf(Object.keys(avatarSizes)),
 };
diff --git a/src/components/Badge.jsx b/src/components/Badge.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import React, { cloneElement } from "react";
 import { cn } from "../helpers/classnames";
 
-export const colors = {
+export const badgeColors = {
     primary: "bg-primary-lighter text-primary-dark",
     secondary: "bg-secondary-lighter text-black",
     success: "bg-success-lightish text-success-darker",
@@ -14,7 +14,7 @@ export const colors = {
     critical: "bg-danger text-white",
 };
 
-const sizes = {
+const badgeSizes = {
     small: "px-2 py-0.75 h-5 text-sm leading-sm", // 20px
     medium: "px-3 py-1.5 h-7.5 text-base leading-base", // 30px
     large: "px-3.5 py-0.75 h-10 text-lg leading-lg", // 40px
@@ -32,8 +32,8 @@ export const Badge = ({ color = "primary", size = "small", icon, className, chil
             className={cn(
                 "ui-badge",
                 "inline-flex items-center whitespace-nowrap rounded-full",
-                colors[color],
-                sizes[size],
+                badgeColors[color],
+                badgeSizes[size],
                 className,
             )}
             {...rest}
@@ -46,8 +46,8 @@ export const Badge = ({ color = "primary", size = "small", icon, className, chil
 
 Badge.propTypes = {
     className: PropTypes.string,
-    color: PropTypes.oneOf(Object.keys(colors)),
-    size: PropTypes.oneOf(Object.keys(sizes)),
+    color: PropTypes.oneOf(Object.keys(badgeColors)),
+    size: PropTypes.oneOf(Object.keys(badgeSizes)),
     icon: PropTypes.element,
     children: PropTypes.node.isRequired,
 };
diff --git a/src/components/Buttons/Button.jsx b/src/components/Buttons/Button.jsx
@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import React from "react";
 import { cn } from "../../helpers/classnames";
 
-export const colors = {
+export const buttonColors = {
     standard: {
         common: "border-transparent text-white", // Common classes for each style
         primary: "bg-primary hover:bg-primary-darker disabled:bg-primary active:bg-primary",
@@ -40,7 +40,7 @@ export const colors = {
     },
 };
 
-export const sizes = {
+export const buttonSizes = {
     tiny: "px-2 py-0.5 text-xs leading-xs", // 20px
     small: "px-3 py-2 h-7.5 text-sm leading-sm", // 30px
     medium: "px-4.5 py-3 h-10 text-base leading-base", // 40px
@@ -64,9 +64,9 @@ export const Button = ({
                 "ui-button",
                 "inline-flex rounded border transition-colors focus:ring disabled:cursor-default disabled:bg-gray-lighter disabled:text-gray-dark",
                 "items-center justify-center font-semibold",
-                colors[variant].common,
-                colors[variant][color],
-                sizes[size],
+                buttonColors[variant].common,
+                buttonColors[variant][color],
+                buttonSizes[size],
                 className,
             )}
             {...rest}
@@ -80,9 +80,9 @@ export const Button = ({
 
 Button.propTypes = {
     // as: PropTypes.string,
-    color: PropTypes.oneOf(Object.keys(colors.outline)),
-    variant: PropTypes.oneOf(Object.keys(colors)),
-    size: PropTypes.oneOf(Object.keys(sizes)),
+    color: PropTypes.oneOf(Object.keys(buttonColors.outline)),
+    variant: PropTypes.oneOf(Object.keys(buttonColors)),
+    size: PropTypes.oneOf(Object.keys(buttonSizes)),
     className: PropTypes.string,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
     icon(props, ...rest) {

diff --git a/src/components/Buttons/SubmitButton.jsx b/src/components/Buttons/SubmitButton.jsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from "react";
 import { Spinner } from "../Spinner";
 import { CheckIcon } from "../../icons/CheckIcon";
 import { cn } from "../../helpers/classnames";
-import { Button, colors } from "./Button";
+import { Button, buttonColors } from "./Button";
 
 const loadingColors = {
     primary: "!bg-primary-light",
@@ -89,7 +89,7 @@ SubmitButton.propTypes = {
     ...Button.propTypes,
     isLoading: PropTypes.bool,
     isSuccess: PropTypes.bool,
-    variant: PropTypes.oneOf(Object.keys(colors)),
+    variant: PropTypes.oneOf(Object.keys(buttonColors)),
     // eslint-disable-next-line react/boolean-prop-naming
     disabled: PropTypes.bool,
 };
diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx
@@ -5,7 +5,7 @@ import React, { Fragment } from "react";
 import { CloseIcon } from "../icons/CloseIcon";
 import { Button } from "./Buttons/Button";
 
-export const sizes = {
+export const drawerSizes = {
     small: "w-72",
     medium: "w-85",
     large: "w-110",
@@ -64,7 +64,7 @@ export const Drawer = ({
                                 <div
                                     className={clsx(
                                         "flex h-full w-full flex-col overflow-y-auto bg-white px-4 py-8 shadow-xl sm:px-6",
-                                        sizes[size],
+                                        drawerSizes[size],
                                         classNames.children,
                                     )}
                                 >

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import React, { Fragment } from "react";
 import { CloseIcon } from "../icons/CloseIcon";
 
-export const sizes = {
+export const modalSizes = {
     small: "max-w-100", // 400px
     medium: "max-w-125", // 500px
     large: "max-w-150", // 600px
@@ -102,7 +102,7 @@ export const Modal = ({
                         <div
                             className={clsx(
                                 className,
-                                sizes[size],
+                                modalSizes[size],
                                 positions[position],
                                 "w-full transform overflow-hidden rounded-lg bg-white p-10 text-left align-middle shadow-xl transition-all",
                             )}
@@ -127,7 +127,7 @@ export const Modal = ({
 };
 
 Modal.propTypes = {
-    size: PropTypes.oneOf(Object.keys(sizes)),
+    size: PropTypes.oneOf(Object.keys(modalSizes)),
     position: PropTypes.oneOf(Object.keys(positions)),
     isOpen: PropTypes.bool.isRequired,
     shouldCloseOnOutsideClick: PropTypes.bool,

diff --git a/src/components/Spinner.jsx b/src/components/Spinner.jsx
@@ -3,7 +3,7 @@ import clsx from "clsx";
 import PropTypes from "prop-types";
 import CircleNotch from "../icons/CircleNotch";
 
-export const colors = {
+export const spinnerColors = {
     primary: "text-primary",
     secondary: "text-secondary",
     warning: "text-warning",
@@ -13,7 +13,7 @@ export const colors = {
     current: null, // TODO: Consider setting this as the default value.
 };
 
-export const sizes = {
+export const spinnerSizes = {
     tiny: "w-4 h-4",
     small: "w-7 h-7",
     medium: "w-10 h-10",
@@ -24,7 +24,13 @@ export const sizes = {
 export const Spinner = ({ className, size = "small", color = "secondary", ...rest }) => {
     return (
         <CircleNotch
-            className={clsx("ui-spinner", className, sizes[size], colors[color], "inline-block animate-spin")}
+            className={clsx(
+                "ui-spinner",
+                className,
+                spinnerSizes[size],
+                spinnerColors[color],
+                "inline-block animate-spin",
+            )}
             {...rest}
         />
     );

diff --git a/src/components/Tag.jsx b/src/components/Tag.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import React from "react";
 import { CloseIcon } from "../icons/CloseIcon";
 
-export const colors = {
+export const tagColors = {
     primary: "bg-primary-lighter text-black border border-primary",
     secondary: "bg-secondary-light text-gray-darker border border-secondary",
     success: "bg-success-lighter text-black border border-success",
@@ -12,7 +12,7 @@ export const colors = {
     caution: "bg-caution-lighter text-black border border-caution",
 };
 
-export const sizes = {
+export const tagSizes = {
     small: "px-1 py-0.75 text-sm leading-3.5",
     medium: "px-2 py-1 text-base leading-3.5",
     large: "px-2 py-1.5 text-base leading-4",
@@ -27,7 +27,7 @@ export const Tag = ({ color = "primary", size = "small", onClose, className, chi
     };
 
     return (
-        <span className={clsx("ui-tag", "inline-flex rounded", colors[color], sizes[size], className)} {...rest}>
+        <span className={clsx("ui-tag", "inline-flex rounded", tagColors[color], tagSizes[size], className)} {...rest}>
             {children}
 
             {onClose ? (
@@ -45,8 +45,8 @@ export const Tag = ({ color = "primary", size = "small", onClose, className, chi
 };
 
 Tag.propTypes = {
-    color: PropTypes.oneOf(Object.keys(colors)),
-    size: PropTypes.oneOf(Object.keys(sizes)),
+    color: PropTypes.oneOf(Object.keys(tagColors)),
+    size: PropTypes.oneOf(Object.keys(tagSizes)),
     onClose: PropTypes.func,
     className: PropTypes.string,
     children: PropTypes.node.isRequired,

diff --git a/src/helpers/flash.jsx b/src/helpers/flash.jsx
@@ -4,7 +4,7 @@ import React, { Fragment } from "react";
 import toast from "react-hot-toast";
 import { CloseIcon } from "../icons/CloseIcon";
 
-export const colors = {
+export const flashColors = {
     primary: "bg-primary",
     secondary: "bg-secondary",
     success: "bg-success",
@@ -13,7 +13,7 @@ export const colors = {
     caution: "bg-caution",
 };
 
-const sizes = {
+const flashSizes = {
     small: "px-3 py-2 text-sm leading-3.5 shadow max-w-50",
     medium: "px-4 py-3.5 text-base leading-4 shadow max-w-100",
     large: "px-4.5 py-4 text-md leading-4.5 shadow max-w-xl",
@@ -67,7 +67,7 @@ export const flash = {
     },
 
     getStyles(color, size, className) {
-        return clsx("flex text-white rounded pointer-events-auto", colors[color], sizes[size], className);
+        return clsx("flex text-white rounded pointer-events-auto", flashColors[color], flashSizes[size], className);
     },
 
     container(text, className, onClose, toastObject) {

diff --git a/src/stories/DataDisplay/Flash.stories.jsx b/src/stories/DataDisplay/Flash.stories.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Toaster } from "react-hot-toast";
 import { Button, flash } from "../..";
 import { inlineRadio, select, sizeParams } from "../helpers";
-import { colors } from "../../helpers/flash";
+import { flashColors } from "../../helpers/flash";
 
 const FlashStories = {
     title: "Data Display/Flash",
@@ -28,7 +28,7 @@ const FlashStories = {
             control: { type: "text" },
         },
         size: sizeParams,
-        color: select(Object.keys(colors)),
+        color: select(Object.keys(flashColors)),
         duration: {
             type: { required: false },
             description: "Time in `ms`",

diff --git a/src/stories/DataDisplay/Tag.stories.jsx b/src/stories/DataDisplay/Tag.stories.jsx
@@ -1,6 +1,6 @@
 import { Tag } from "../..";
 import { select, sizeParams } from "../helpers";
-import { colors } from "../../components/Tag";
+import { tagColors } from "../../components/Tag";
 
 const TagStories = {
     title: "Data Display/Tag",
@@ -18,7 +18,7 @@ const TagStories = {
             type: { required: true },
             control: { type: "text" },
         },
-        color: select(Object.keys(colors)),
+        color: select(Object.keys(tagColors)),
         size: sizeParams,
     },
 };

diff --git a/src/stories/Forms/Button.stories.jsx b/src/stories/Forms/Button.stories.jsx
@@ -1,14 +1,14 @@
 import React from "react";
 import { Button, UserIcon, EllipsisIcon, WaitlistIcon, KeyIcon, WarningIcon, PlusIcon } from "../..";
-import { colors, sizes } from "../../components/Buttons/Button";
+import { buttonColors, buttonSizes } from "../../components/Buttons/Button";
 import { disableFields, disableType, inlineRadio, radio } from "../helpers";
 
 const defaultArgTypes = {
-    color: inlineRadio(Object.keys(colors.standard).slice(1)),
-    size: radio(Object.keys(sizes)),
+    color: inlineRadio(Object.keys(buttonColors.standard).slice(1)),
+    size: radio(Object.keys(buttonSizes)),
     variant: {
         control: "radio",
-        options: Object.keys(colors),
+        options: Object.keys(buttonColors),
     },
     className: {
         control: "text",

diff --git a/src/stories/Media/Avatar.stories.jsx b/src/stories/Media/Avatar.stories.jsx
@@ -1,6 +1,6 @@
 import React, { Fragment } from "react";
 import { Avatar } from "../..";
-import { sizes } from "../../components/Avatar";
+import { avatarSizes } from "../../components/Avatar";
 import { inlineRadio, select, tableDefault } from "../helpers";
 
 const avatarColors = [
@@ -40,7 +40,7 @@ const AvatarStories = {
             description: "A user's full name",
             ...tableDefault("example: John Doe"),
         },
-        size: inlineRadio(Object.keys(sizes), tableDefault("large")),
+        size: inlineRadio(Object.keys(avatarSizes), tableDefault("large")),
         color: select(avatarColors, tableDefault("bg-primary-lighter")),
     },
 };

diff --git a/src/stories/Other/Spinner.stories.jsx b/src/stories/Other/Spinner.stories.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Spinner } from "../..";
 import { inlineRadio, select } from "../helpers";
-import { colors, sizes } from "../../components/Spinner";
+import { spinnerColors, spinnerSizes } from "../../components/Spinner";
 
 const SpinnerStories = {
     title: "Other/Spinner",
@@ -12,8 +12,8 @@ const SpinnerStories = {
         size: "small",
     },
     argTypes: {
-        color: select(Object.keys(colors)),
-        size: inlineRadio(Object.keys(sizes)),
+        color: select(Object.keys(spinnerColors)),
+        size: inlineRadio(Object.keys(spinnerSizes)),
     },
 };
 
@@ -24,7 +24,7 @@ export const Default = (props) => {
 export const Sizes = () => {
     return (
         <div className="space-x-8">
-            {Object.keys(sizes).map((size) => (
+            {Object.keys(spinnerSizes).map((size) => (
                 <Spinner size={size} />
             ))}
         </div>

diff --git a/src/stories/Overlay/Drawer.stories.jsx b/src/stories/Overlay/Drawer.stories.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Button, Drawer } from "../..";
 import { inlineRadio } from "../helpers";
-import { sizes } from "../../components/Drawer";
+import { drawerSizes } from "../../components/Drawer";
 
 const DrawerStories = {
     title: "Overlay/Drawers",
@@ -34,7 +34,7 @@ const DrawerStories = {
             description: "The body of the Drawer",
             control: { type: "text" },
         },
-        size: inlineRadio(Object.keys(sizes).slice(0, -1)),
+        size: inlineRadio(Object.keys(drawerSizes).slice(0, -1)),
         onClose: {
             description: "Function to callback to close the Drawer",
             control: { type: "function" },