@cerebruminc/cerebellum 16.14.0 → 17.0.0

package/.babelrc

@@ -0,0 +1,15 @@
+{
+  "plugins": [
+    [
+      "babel-plugin-styled-components",
+      {
+        "displayName": true,
+        "meaninglessFileNames": ["index", "styles"],
+        "preprocess": false
+      }
+    ],
+		["@babel/plugin-transform-runtime", {
+      "regenerator": true
+    }]
+  ]
+}

package/.chromatic-local.sh

@@ -0,0 +1,27 @@
+#!/bin/bash
+
+# Local Chromatic runner script
+# Run this to test visual changes locally before pushing
+
+set -e
+
+echo "🎨 Running Chromatic visual regression tests locally..."
+
+# Check if CHROMATIC_PROJECT_TOKEN is set
+if [ -z "$CHROMATIC_PROJECT_TOKEN" ]; then
+    echo "❌ Error: CHROMATIC_PROJECT_TOKEN environment variable is not set"
+    echo "Please set your Chromatic project token:"
+    echo "export CHROMATIC_PROJECT_TOKEN=your_token_here"
+    exit 1
+fi
+
+# Build Storybook first
+echo "📚 Building Storybook..."
+npm run build-storybook
+
+# Run Chromatic
+echo "📸 Running visual regression tests..."
+npm run chromatic -- --build-script-name=build-storybook
+
+echo "✅ Chromatic tests completed!"
+echo "Check the output URL to review any visual changes."

package/.deepsource.toml

@@ -0,0 +1,9 @@
+version = 1
+
+[[analyzers]]
+name = "javascript"
+enabled = true
+
+[[analyzers]]
+name = "test-coverage"
+enabled = true

package/.env.sample

@@ -0,0 +1,2 @@
+CHROMATIC_PROJECT_TOKEN=xxxx
+STORYBOOK_GOOGLE_MAP_API_KEY=xxxx

package/.jsonSeeds/addButton.json

@@ -0,0 +1,35 @@
+{
+  "name": "AddButton",
+  "props": [
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "default": "false",
+      "description": "Puts the Button into a disabled state."
+    },
+    {
+      "name": "focus",
+      "type": "boolean",
+      "default": "",
+      "description": "Will set focus on the Button if true"
+    },
+    {
+      "name": "onClick",
+      "type": "function",
+      "description": "Called when the button is clicked",
+      "required": true
+    }
+  ],
+  "interfaces": [],
+  "themeProps": [],
+  "elements": [
+    {
+      "name": "SecondaryButton",
+      "props": ["disabled", "focus", "onClick"],
+      "themeProps": [],
+      "domType": "required"
+    }
+  ],
+  "stories": [],
+  "isFixedPosition": false
+}

package/.jsonSeeds/addMenu.json

@@ -0,0 +1,160 @@
+{
+  "name": "AddMenu",
+  "props": [
+    {
+      "name": "bottomButtonLabel",
+      "type": "string | FC | JSX.Element",
+      "default": "",
+      "description": "Bottom button label text. This and bottomButtonClick are required to enable the bottom button"
+    },
+    {
+      "name": "bottomButtonClick",
+      "type": "function",
+      "default": "",
+      "description": "Called when the bottom button is clicked. This and bottomButtonLabel are required to enable the bottom button"
+    },
+    {
+      "name": "BottomButtonIcon",
+      "type": "interface",
+      "interface": "IconType",
+      "default": "",
+      "description": "An icon to emphasize the button action. Strongly encouraged, but not technically required. Accepts a Cerebellum Icon component directly, or JSX"
+    },
+    {
+      "name": "defaultId",
+      "type": "string | number",
+      "default": "",
+      "description": "The id for the active option. Otherwise, AddMenu tracks this internally"
+    },
+    {
+      "name": "defaultOpen",
+      "type": "boolean",
+      "default": false,
+      "description": "The menu will be visible on the initial render without any user interaction"
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "default": "false",
+      "description": "Puts the Button into a disabled state."
+    },
+    {
+      "name": "focus",
+      "type": "boolean",
+      "default": false,
+      "description": "Will set focus on the Button if true"
+    },
+    {
+      "name": "hideSearch",
+      "type": "boolean",
+      "default": false,
+      "description": "Never show the search"
+    },
+    {
+      "name": "idField",
+      "type": "string | number",
+      "default": "id",
+      "description": "Unique field in each `option` object"
+    },
+    {
+      "name": "innerSearch",
+      "type": "boolean",
+      "default": false,
+      "description": "Search will include the middle of words"
+    },
+    {
+      "name": "menuWidth",
+      "type": "number",
+      "default": 300,
+      "description": "The menu width, in pixels"
+    },
+    {
+      "name": "openUp",
+      "type": "boolean",
+      "default": true,
+      "description": "The menu will appear above the button, if there is room"
+    },
+    {
+      "name": "onSelect",
+      "type": "function",
+      "description": "Called when an option is selected. Receives option when selecting, or undefined when deselecting"
+    },
+    {
+      "name": "options",
+      "type": "interface",
+      "interface": "Array<OptionType>",
+      "required": true,
+      "description": "The options that appear in the menu"
+    },
+    {
+      "name": "preventDeselect",
+      "type": "boolean",
+      "default": false,
+      "description": "Active options are not clickable"
+    },
+    {
+      "name": "renderOptionLabel",
+      "type": "function",
+      "default": "",
+      "description": "A transform function that runs on each option. Accepts option and returns a React component. Useful for custom styles."
+    },
+    {
+      "name": "showSearchThreshold",
+      "type": "number",
+      "default": 10,
+      "description": "Disables the search box if there are fewer options than this"
+    },
+    {
+      "name": "stayOpen",
+      "type": "boolean",
+      "default": false,
+      "description": "Keeps the menu open after click. Default behavior keeps the modal open on deselect only"
+    }
+  ],
+  "interfaces": [
+    {
+      "name": "OptionType",
+      "props": [
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": false,
+          "description": "This option will appear greyed out and unclickable"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "description": "This is what appears in the menu"
+        },
+        {
+          "name": "id",
+          "type": "string | number",
+          "default": "",
+          "description": "Must be unique. Required unless idField matches a different unique field"
+        },
+        {
+          "name": "[key: string]",
+          "type": "any",
+          "description": "Options can hold any data you want. You can use this for the id if you want"
+        },
+        {
+          "name": "children",
+          "type": "Array<OptionType>",
+          "description": "This will create nested children"
+        }
+      ]
+    }
+  ],
+  "themeProps": [],
+  "elements": [
+    {
+      "name": "AddMenuGroup",
+      "props": ["menuWidth"],
+      "themeProps": [],
+      "domType": "div"
+    }
+  ],
+  "stories": [],
+  "isFixedPosition": false
+}

package/.jsonSeeds/addressInput.json

@@ -0,0 +1,143 @@
+{
+  "name": "AddressInput",
+  "props": [
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "default": "false",
+      "description": "Puts the input into a disabled state."
+    },
+    {
+      "name": "focus",
+      "type": "boolean",
+      "default": "",
+      "description": "Will set focus on the Input if true"
+    },
+    {
+      "name": "helperText",
+      "type": "string",
+      "default": "Include a number and a special character",
+      "description": "Descriptive text for your input. Keep it short & concise"
+    },
+    {
+      "name": "inputWidth",
+      "type": "number",
+      "default": "",
+      "description": "Sets the width, in pixels. Default is 100%, with a 700px max width."
+    },
+    {
+      "name": "inputLabel",
+      "type": "string",
+      "default": "Password",
+      "description": "A label for your input. Not required, but strongly recommended."
+    },
+    {
+      "name": "LeadingIcon",
+      "type": "react component",
+      "default": "",
+      "description": "Left aligned icon used to further emphasize the Input Label. Accepts a Cerebellum Icon component directly, or JSX"
+    },
+    {
+      "name": "onInputBlur",
+      "type": "function",
+      "default": "",
+      "description": "Called when the Input is blured"
+    },
+    {
+      "name": "onInputFocus",
+      "type": "function",
+      "default": "",
+      "description": "Called when the Input is focused"
+    },
+    {
+      "name": "onValueChange",
+      "type": "function",
+      "default": "",
+      "description": "Called when the value is changed. Required if you want to update `value`. If not present, `Input` becomes a display only component"
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "default": "Password",
+      "description": "Placeholder text. Do not use in place of a label"
+    },
+    {
+      "name": "showValidationMessage",
+      "type": "boolean",
+      "default": "false",
+      "description": "Makes the `validationMessage` visible"
+    },
+    {
+      "name": "theme",
+      "type": "interface",
+      "interface": "Theme",
+      "default": "Default",
+      "description": "Sets the theme"
+    },
+    {
+      "name": "TrailingIcon",
+      "type": "react component",
+      "default": "",
+      "description": "Right aligned icon, provides an additional control or context for the entered text. Accepts a Cerebellum Icon component directly, or JSX"
+    },
+    {
+      "name": "trailingIconFunction",
+      "type": "function",
+      "default": "",
+      "description": "Fires when TrailingIcon is clicked"
+    },
+    {
+      "name": "trailingText",
+      "type": "string",
+      "default": "",
+      "description": "Text inside the input that helps to disambiguate entered data type (e.g. units of measure)"
+    },
+    {
+      "name": "type",
+      "type": "string",
+      "default": "text",
+      "description": "Passed to the html input element."
+    },
+    {
+      "name": "validationMessage",
+      "type": "string",
+      "default": "",
+      "description": "A message when the input fails validation."
+    },
+    {
+      "name": "value",
+      "type": "string",
+      "required": true,
+      "description": "Input value. This must always be defined."
+    }
+  ],
+  "interfaces": [
+    {
+      "name": "Theme",
+      "props": [
+        {
+          "name": "Contained",
+          "type": "CONTAINED",
+          "default": "",
+          "description": "The contained theme, with compact labels, which are used to conserve vertical space. Often used in mobile apps or dense forms where screen space is at a premium."
+        },
+        {
+          "name": "Default",
+          "type": "DEFAULT",
+          "default": "",
+          "description": "The default theme, with top aligned labels - often used for web applications and forms with only a few fields. "
+        },
+        {
+          "name": "Underlined",
+          "type": "UNDERLINED",
+          "default": "",
+          "description": "Underline only theme. Not recommended for forms or dense layouts. Underlined inputs are often used to bring emphasis to an important field"
+        }
+      ]
+    }
+  ],
+  "themeProps": [],
+  "elements": [],
+  "stories": ["LeadingIcon", "Disabled", "FailedValidation"],
+  "isFixedPosition": false
+}

package/.jsonSeeds/alertCount.json

@@ -0,0 +1,145 @@
+{
+  "name": "AlertCount",
+  "props": [
+    {
+      "name": "colorFamily",
+      "type": "ButtonColorFamilyEnum",
+      "default": "ButtonColorFamilyEnum.Blue",
+      "description": "The color family that sets the color for `AlertCount`. Make sure to pick the color that fits the alert type/level for your project",
+      "required": false
+    },
+    {
+      "name": "colorFamilyOverride",
+      "type": "interface",
+      "interface": "ColorFamilyType",
+      "description": "A custom color family for `AlertCount`",
+      "required": false
+    },
+    {
+      "name": "count",
+      "type": "number | string",
+      "default": "",
+      "description": "The value displayed in `AlertCount`",
+      "required": true
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "default": "false",
+      "description": "Prevents clicks and turns `AlertCount` grey, but still shows the count",
+      "required": false
+    },
+    {
+      "name": "onClick",
+      "type": "function",
+      "default": "",
+      "description": "Called on click",
+      "required": false
+    }
+  ],
+  "interfaces": [
+    {
+      "name": "ColorFamilyType",
+      "props": [
+        {
+          "name": "light",
+          "type": "string",
+          "description": "Color string. `Status` background color",
+          "required": true
+        },
+        {
+          "name": "medium",
+          "type": "string",
+          "description": "Color string. `Status` background color on hover",
+          "required": true
+        },
+        {
+          "name": "main",
+          "type": "string",
+          "description": "Color string. `AlertCount` background color, `Status` text color",
+          "required": true
+        },
+        {
+          "name": "hover",
+          "type": "string",
+          "description": "Color string. `AlertCount` background and `Status` text color on hover",
+          "required": true
+        },
+        {
+          "name": "text",
+          "type": "string",
+          "description": "Color string. `AlertCount` text color",
+          "required": true
+        }
+      ]
+    }
+  ],
+  "enums": [
+    {
+      "name": "ButtonColorFamilyEnum",
+      "props": [
+        {
+          "name": "Aqua",
+          "type": "ButtonColorFamilyEnum",
+          "description": "Positive color scheme"
+        },
+        {
+          "name": "Black",
+          "type": "ButtonColorFamilyEnum",
+          "description": "Black color scheme"
+        },
+        {
+          "name": "Blue",
+          "type": "ButtonColorFamilyEnum",
+          "description": "Neutral color scheme"
+        },
+        {
+          "name": "CoolGrey",
+          "type": "ButtonColorFamilyEnum",
+          "description": "Grey color scheme"
+        },
+        {
+          "name": "Red",
+          "type": "ButtonColorFamilyEnum",
+          "description": "Negative color scheme"
+        },
+        {
+          "name": "Peach",
+          "type": "ButtonColorFamilyEnum",
+          "description": "Slightly negative color scheme"
+        },
+        {
+          "name": "Purple",
+          "type": "ButtonColorFamilyEnum",
+          "description": "Alternative neutral color scheme"
+        }
+      ]
+    }
+  ],
+  "themeProps": [
+    {
+      "name": "fontSize",
+      "property": "font-size",
+      "type": "number",
+      "value": 12,
+      "description": "Font size, in pixels"
+    }
+  ],
+  "elements": [
+    {
+      "name": "Badge",
+      "props": ["disabled"],
+      "themeProps": [],
+      "domType": "span"
+    },
+    {
+      "name": "Score",
+      "props": [],
+      "themeProps": ["fontSize"],
+      "domType": "span"
+    }
+  ],
+  "stories": ["Clickable", "BigNumber", "Disabled"],
+  "themeOverride": true,
+  "isFixedPosition": false
+}

package/.jsonSeeds/avatar.json

@@ -0,0 +1,66 @@
+{
+	"name": "Avatar",
+	"props": [
+    {
+      "name": "imageUrl",
+      "type": "string",
+      "default": "",
+      "description": "URL to the image to be displayed. It's highly recommended the images are square and the size matches the component size.",
+			"required": false
+    },
+    {
+      "name": "placeholderInitials",
+      "type": "string",
+      "default": "",
+      "description": "Placeholder text if no image is available. ",
+			"required": false
+    },
+    {
+      "name": "placeholderInitialsColorOverride",
+      "type": "string",
+      "default": "",
+      "description": "Placeholder text color is chosen by higher contrast by default.",
+      "required": false
+    }
+	],
+	"interfaces": [],
+	"enums": [],
+	"themeProps": [
+    {
+      "name": "backgroundColor",
+      "property": "background-color",
+      "type": "string",
+      "value": "colors.BLUE_50",
+      "description": "Background color when no image is available."
+    },
+    {
+      "name": "size",
+      "property": "width",
+      "type": "number",
+      "value": 94,
+      "description": "Height and width in pixels."
+    }
+	],
+	"elements": [
+    {
+      "name": "Base",
+      "props": ["imageUrl"],
+      "themeProps": ["backgroundColor", "size"],
+      "domType": "div"
+    },
+    {
+      "name": "Initials",
+      "props": [],
+      "themeProps": ["size"],
+      "domType": "h2"
+    }
+  ],
+	"stories": [
+    "NoImage",
+    "RectangleImage",
+    "Options",
+    "LongInitialText"
+  ],
+	"themeOverride": true,
+	"isFixedPosition": false
+}