Articles Dev Box

Shared code, functions, and components that are commonly used across Articles Media projects.

Warning

A lot of this package is expected to be consumed in a Articles Media related React ecosystem. See Package Exports section for more details.

Getting Started

For production use add the organization scooped package to your package.json.

npm i @articles-media/articles-dev-box

The component package uses Material UI v9 and Emotion. Consuming projects must provide the peer dependencies declared in package.json (@mui/material, @mui/icons-material, @emotion/cache, @emotion/react, and @emotion/styled). Bootstrap, React-Bootstrap, Sass, and package-level stylesheet imports are not required.

For local development, navigate to this project and run this command.

npm link

Then go to the consuming project directory and run this command.

npm link @articles-media/articles-dev-box

You will need to have a dev script running to watch for changes and build the dist to see local changes

npm run dev

Package Exports

| Name | Description | Usage Example | | :--- | :--- | :--- | | ReturnToLauncherButton | For bringing users back to their state in the games showcase/launcher | | | SignInButton | For bringing users to the accounts service to login at and redirecting back | | | SessionButton | Button that manages sign in, sign out, and account details. | Catching Game and School Run | | GameScoreboard | Scoreboard for registered games that links with a user's Articles Media account. | | | Ad | Articles Ad component that connects with user data. | | | GameMenu | All in one component that handles the sidebar and menu-bar inside a game page. | Catching Game and School Run use Static Panel for sidebarStyle and Corner Button for menuBarStyle. Ice Slide uses Floating Panel for sidebarStyle and Bar for menuBarStyle. | | GameMenuPrimaryButtonGroup | The common button groups for landing page and menu content across our games | Catching Game and Move Match | | NicknameInput | Handles nickname UI on landing page | Catching Game | | GlobalHead | Not used at this time, allows for head element related tags to be added to site without other logic. | | | GlobalBody | Reserved for shared body-level behavior across Articles Media projects. | | | ViewUserModal | View user profile data and recent activity. | | | SettingsModal | All in one component to handle game settings UI across multiple games. | | | CreditsModal | All in one component to handle game credits UI across multiple games. | | | InfoModal | All in one component to handle game info modal across multiple games. | USA Tycoon | | FriendsList | List and Modal for showing friends. | Auto imported via GlobalClientModals | | InviteModal | Modal for showing FriendsList with allowInvite | Normally used via GlobalClientModals | | ReusedSocketLogicHandler | Sets up a lot of common websocket logic | Catching Game, Ocean Rings | | DarkModeHandler | Consumes a Zustand store, detects prefers-color-scheme, and sets the MUI color-scheme attribute. | | | ToontownModeHandler | Handles setting zustand state from url params if toontownMode is passed. | | | SocketServerUrlHandler | Handles setting socket server state from url params if socketServerUrl is passed. | | | HasNoMouseHandler | Sets hasNoMouse and isTouchCapable on first load | | | HotkeyHandler | Handles all the common used game commands that modify game store data | Cannon Game | | useUserToken | Hook for getting the subdomain auth token. | | | useUserDetails | Hook for getting the details of the current user if a valid user token is found. | | | useFullscreen | Hook for going fullscreen on the body or provided element | | | typicalZustandStoreExcludes | Array of strings that every game published by Articles Media would want to normally exclude from persisting in base game store. | Catching Game and School Run | | typicalZustandStoreStateSlice | Slice of zustand states that every game normally uses | Catching Game and School Run | | zustandSocketStoreSlice | Slice of zustand states that every game normally uses for sockets | School Run | getSignOutRedirectUrl | Handles signout redirect api logic | Catching Game | | GlobalClientModals | Imports all global client modals like FriendsList, CreditsModal, SettingsModal, InfoModal, and so on | USA Tycoon | | generateRandomNickname | Reusable way of doing random nicknames from package | USA Tycoon | | getAssetSource | Gets an assets source location based on the NEXT_PUBLIC_MODEL_SOURCE env value, allows easier/cheaper open sourcing of games by serving public site assets as CDN and dev/cloned site assets locally | School Run | | useAssetSource | Like getAssetSource but gets an assets source location based on the useStore state of modelSource. Main difference is this can be changed in game. | School Run | | defaultGameNextConfig | Not usable, for reference | None | | defaultGameThemeConfig | Not usable, for reference | None | | bootstrapCompatibilityTheme | Temporary MuiCssBaseline theme overrides for Bootstrap-style utility and legacy card class names while consuming projects migrate to MUI. Requires CssBaseline. | School Run | | useModalNavigation | Handles navigating a modal with controller | None | | gameLandingPageTemplate | All in one component that sets up the default landing page as much as possible | USA Tycoon | | gamePageTemplate | All in one component that sets up the default game page as much as possible | USA Tycoon |

Temporary Bootstrap class compatibility

Projects that are still removing Bootstrap class names can import the compatibility component overrides into their MUI theme:

import { createTheme } from '@mui/material/styles';
import bootstrapCompatibilityTheme from '@articles-media/articles-dev-box/bootstrapCompatibilityTheme';

const theme = createTheme({
  components: {
    ...bootstrapCompatibilityTheme,
  },
});

The application must render MUI's CssBaseline beneath its ThemeProvider. This bridge includes Bootstrap-style spacing, responsive display and flex utilities, sizing, text, borders, badges, containers, and legacy card sections. Responsive class names use the consuming MUI theme's breakpoint values. Prefer sx on new or migrated components and remove this compatibility import after the final legacy class is gone.

Usage Examples

For newly developed components I sometimes find myself trying to remember what repos used it. Here is a short list of recent components developed and what project is using it. Doing this until AMPM can search by imports or enough projects adopted the component.

Old Version Note

Last version of first version of this package is 1.6.3. Here is a link https://github.com/Articles-Joey/articles-dev-box/tree/6fc99733f3088f7ba03c3330f14e6a2b07e4fe84. Version 2 drops all support and usage of bootstrap, react-bootstrap, scss, and font awesome in favor of using a MUI 9 only approach.

TODO

• Nothing major right now, search "TODO" in repo for minor stuff.