Updates

.eslintrc.js

@@ -1,8 +1,6 @@
 module.exports = {
   root: true,
-
   extends: [require.resolve('@codecademy/eslint-config')],
-
   overrides: [
     {
       files: ['**/typings/*', '*.d.ts'],
@@ -32,6 +30,8 @@ module.exports = {
         '@typescript-eslint/no-unsafe-return': 'off',
         '@typescript-eslint/restrict-plus-operands': 'off',
         '@typescript-eslint/restrict-template-expressions': 'off',
+        '@typescript-eslint/no-empty-object-type': 'off',
+        '@typescript-eslint/no-redundant-type-constituents': 'off',
       },
     },
   ],

.github/workflows/publish-alpha.yaml

@@ -12,12 +12,12 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Use NodeJS 19
+      - name: Use NodeJS 20
         uses: actions/setup-node@v3
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_SECRET }}
         with:
-          node-version: '19'
+          node-version: '20'
           registry-url: 'https://registry.npmjs.org'
           scope: 'animus-ui'
 

.github/workflows/publish-beta.yaml

@@ -20,12 +20,12 @@ jobs:
           git config user.name "codecaaron"
           git config user.email "raelaggro@gmail.com"
 
-      - name: Use NodeJS 19
+      - name: Use NodeJS 20
         uses: actions/setup-node@v3
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_SECRET }}
         with:
-          node-version: '19'
+          node-version: '20'
           registry-url: 'https://registry.npmjs.org'
           scope: 'animus-ui'
 

package.json

@@ -1,12 +1,16 @@
 {
   "name": "root",
   "private": true,
+  "engines": {
+    "node": "^20",
+    "npm": "please-use-yarn"
+  },
   "scripts": {
     "start": "yarn workspace @animus-ui/docs dev",
     "build": "yarn nx run-many --target=build",
     "build-changed": "yarn nx affected --target=build",
     "build-all": "yarn nx run-many --target=build",
-    "lint": "eslint --ignore-path .eslintignore \"./**/*.{mdx,js,ts,tsx,json}\" --max-warnings 0",
+    "lint": "eslint \"./**/*.{mdx,js,ts,tsx,json}\" --max-warnings 0",
     "format": "prettier --ignore-path .prettierignore \"./**/*.{mdx,js,ts,tsx,json}\" --write",
     "test": "jest",
     "compile": "lerna run compile",
@@ -23,38 +27,38 @@
     ]
   },
   "devDependencies": {
-    "@babel/cli": "^7.21.0",
-    "@babel/core": "^7.21.3",
-    "@babel/preset-typescript": "^7.21.0",
-    "@babel/runtime": "^7.21.0",
-    "@codecademy/eslint-config": "^8.0.0",
+    "@babel/cli": "^7.27.2",
+    "@babel/core": "^7.27.3",
+    "@babel/preset-typescript": "^7.27.1",
+    "@babel/runtime": "^7.21.3",
+    "@codecademy/eslint-config": "^8.2.0",
     "@codecademy/prettier-config": "^0.2.0",
-    "@emotion/babel-plugin": "11.10.6",
-    "@emotion/jest": "11.10.5",
+    "@emotion/babel-plugin": "11.13.5",
+    "@emotion/jest": "11.13.0",
     "@nrwl/cli": "^15.8.6",
     "@nrwl/nx-cloud": "^15.2.1",
-    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-babel": "^6.0.4",
     "@types/jest": "^29.4.3",
     "@types/lodash": "^4.14.178",
     "@types/node": "^18.15.0",
     "@types/react": "18.0.28",
-    "@types/stylis": "^4.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.55.0",
-    "@typescript-eslint/parser": "^5.55.0",
+    "@types/stylis": "^4.2.7",
+    "@typescript-eslint/eslint-plugin": "^8.33.0",
+    "@typescript-eslint/parser": "^8.33.0",
     "babel-jest": "29.5.0",
-    "babel-preset-codecademy": "7.0.0",
-    "csstype": "3.0.10",
+    "babel-preset-codecademy": "7.1.0",
+    "csstype": "3.1.3",
     "eslint": "^8.11.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.7.0",
-    "eslint-import-resolver-typescript": "^3.5.3",
-    "eslint-mdx": "^2.0.5",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-import-resolver-typescript": "^4.4.1",
+    "eslint-mdx": "^3.4.2",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-jest-react": "^0.1.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-no-only-tests": "^3.1.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-no-only-tests": "^3.3.0",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-unused-imports": "^2.0.0",
@@ -65,11 +69,11 @@
     "lerna": "6.5.1",
     "lodash": "4.17.21",
     "nx": "15.8.6",
-    "prettier": "2.5.1",
+    "prettier": "3.5.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rollup": "3.19.1",
-    "rollup-plugin-typescript2": "0.34.1",
-    "typescript": "4.9.5"
+    "rollup-plugin-typescript2": "0.36.0",
+    "typescript": "5.8.3"
   }
 }

packages/_docs/components/AppProvider/markdown.tsx

@@ -90,6 +90,6 @@ export const components = {
   Box,
   FlexBox,
   GridBox,
-  Link,
+  Link: (props) => <Link variant="text" {...props} />,
   Meta,
 };

packages/_docs/components/Highlighter/Highlighter.tsx

@@ -38,6 +38,7 @@ export function Highlighter({ children }) {
             }}
           >
             {tokens.map((line, i) => (
+              // eslint-disable-next-line react/jsx-key
               <Line {...getLineProps({ line, key: i })}>
                 {line.map((token, key) => (
                   // eslint-disable-next-line react/jsx-key

packages/_docs/components/Tables.tsx

@@ -10,7 +10,7 @@ import { Table, TableCell, TableRow } from '../elements/Tables';
 export const PropTable = ({
   group,
 }: {
-  group: keyof typeof animus['groupRegistry'];
+  group: keyof (typeof animus)['groupRegistry'];
 }) => {
   return (
     <Table>
@@ -42,7 +42,11 @@ export const PropTable = ({
               ))}
             </TableCell>
             <TableCell size="xs">
-              <Code fontSize={14}>{String(scale)}</Code>
+              <Code fontSize={14}>
+                {typeof scale === 'object'
+                  ? JSON.stringify(scale)
+                  : String(scale)}
+              </Code>
             </TableCell>
           </TableRow>
         );

packages/_docs/package.json

@@ -13,15 +13,15 @@
     "@animus-ui/components": "^0.1.1-beta.31",
     "@animus-ui/core": "^0.1.1-beta.24",
     "@animus-ui/theming": "^0.1.1-beta.25",
-    "@emotion/cache": "11.10.5",
-    "@emotion/react": "11.10.6",
-    "@emotion/server": "11.10.0",
-    "@emotion/styled": "11.10.6",
+    "@emotion/cache": "11.14.0",
+    "@emotion/react": "11.14.0",
+    "@emotion/server": "11.11.0",
+    "@emotion/styled": "11.14.0",
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^13.2.4",
     "lodash": "^4.17.21",
     "next": "^13.2.4",
-    "polished": "^4.1.3",
+    "polished": "^4.3.1",
     "prism-react-renderer": "^1.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

packages/_docs/pages/_document.tsx

@@ -19,8 +19,9 @@ class MyDocument extends Document {
 
     ctx.renderPage = () =>
       originalRenderPage({
-        enhanceApp: (App) => (props) =>
-          <App {...({ ...props, cache } as any)} />,
+        enhanceApp: (App) => (props) => (
+          <App {...({ ...props, cache } as any)} />
+        ),
       });
 
     const initialProps = await Document.getInitialProps(ctx);

packages/_integration/__tests__/variance.test.ts

@@ -25,7 +25,7 @@ describe('style props', () => {
   describe('parsers', () => {
     it('has the correct config', () => {
       const propNamesRestricted: Assert<
-        typeof space['propNames'],
+        (typeof space)['propNames'],
         ('margin' | 'padding')[]
       > = true;
 

packages/_integration/package.json

@@ -25,9 +25,9 @@
     "@animus-ui/theming": "^0.1.1-beta.25"
   },
   "devDependencies": {
-    "@emotion/jest": "11.10.5",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
+    "@emotion/jest": "11.13.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@types/react-test-renderer": "18.0.0",
     "react-test-renderer": "18.2.0"
   }

packages/core/package.json

@@ -31,9 +31,9 @@
     "typescript": ">=4.3.5"
   },
   "dependencies": {
-    "@emotion/is-prop-valid": "^1.1.1",
-    "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0",
-    "csstype": "^3.0.7"
+    "@emotion/is-prop-valid": "^1.3.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "csstype": "^3.1.3"
   }
 }

packages/core/src/Animus.ts

@@ -26,7 +26,7 @@ export class AnimusWithAll<
   Variants extends Record<string, VariantConfig>,
   States extends CSSPropMap<AbstractProps, SystemProps<BaseParser>>,
   ActiveGroups extends Record<string, true>,
-  CustomProps extends Record<string, Prop>
+  CustomProps extends Record<string, Prop>,
 > {
   propRegistry = {} as PropRegistry;
   groupRegistry = {} as GroupRegistry;
@@ -77,7 +77,7 @@ export class AnimusWithAll<
       shouldForwardProp: (
         prop: PropertyKey
       ): prop is ForwardableProps<T, keyof PropRegistry> =>
-        isPropValid(prop) && !propNames.includes(prop as string),
+        isPropValid(prop as string) && !propNames.includes(prop as string),
     })(this.build());
 
     return Object.assign(Component, { extend: this.extend.bind(this) });
@@ -141,7 +141,7 @@ class AnimusWithSystem<
   BaseStyles extends CSSProps<AbstractProps, SystemProps<BaseParser>>,
   Variants extends Record<string, VariantConfig>,
   States extends CSSPropMap<AbstractProps, SystemProps<BaseParser>>,
-  ActiveGroups extends Record<string, true>
+  ActiveGroups extends Record<string, true>,
 > extends AnimusWithAll<
   PropRegistry,
   GroupRegistry,
@@ -184,7 +184,7 @@ class AnimusWithStates<
   BaseParser extends Parser<PropRegistry>,
   BaseStyles extends CSSProps<AbstractProps, SystemProps<BaseParser>>,
   Variants extends Record<string, VariantConfig>,
-  States extends CSSPropMap<AbstractProps, SystemProps<BaseParser>>
+  States extends CSSPropMap<AbstractProps, SystemProps<BaseParser>>,
 > extends AnimusWithSystem<
   PropRegistry,
   GroupRegistry,
@@ -225,7 +225,7 @@ class AnimusWithVariants<
   GroupRegistry extends Record<string, (keyof PropRegistry)[]>,
   BaseParser extends Parser<PropRegistry>,
   BaseStyles extends CSSProps<AbstractProps, SystemProps<BaseParser>>,
-  Variants extends Record<string, VariantConfig>
+  Variants extends Record<string, VariantConfig>,
 > extends AnimusWithStates<
   PropRegistry,
   GroupRegistry,
@@ -261,7 +261,7 @@ class AnimusWithVariants<
     Keys extends keyof Props,
     Base extends AbstractProps,
     Props extends Record<Keys, AbstractProps>,
-    PropKey extends Readonly<string> = 'variant'
+    PropKey extends Readonly<string> = 'variant',
   >(options: {
     prop?: PropKey;
     defaultVariant?: keyof Props;
@@ -285,7 +285,7 @@ class AnimusWithBase<
   PropRegistry extends Record<string, Prop>,
   GroupRegistry extends Record<string, (keyof PropRegistry)[]>,
   BaseParser extends Parser<PropRegistry>,
-  BaseStyles extends CSSProps<AbstractProps, SystemProps<BaseParser>>
+  BaseStyles extends CSSProps<AbstractProps, SystemProps<BaseParser>>,
 > extends AnimusWithVariants<
   PropRegistry,
   GroupRegistry,
@@ -305,7 +305,7 @@ class AnimusWithBase<
     Keys extends keyof Props,
     Base extends AbstractProps,
     Props extends Record<Keys, AbstractProps>,
-    PropKey extends Readonly<string> = 'variant'
+    PropKey extends Readonly<string> = 'variant',
   >(options: {
     prop?: PropKey;
     defaultVariant?: keyof Props;
@@ -328,7 +328,7 @@ class AnimusWithBase<
 export class Animus<
   PropRegistry extends Record<string, Prop>,
   GroupRegistry extends Record<string, (keyof PropRegistry)[]>,
-  BaseParser extends Parser<PropRegistry>
+  BaseParser extends Parser<PropRegistry>,
 > extends AnimusWithBase<PropRegistry, GroupRegistry, BaseParser, {}> {
   constructor(props: PropRegistry, groups: GroupRegistry) {
     super(props, groups, createParser(props) as BaseParser, {});

packages/core/src/AnimusConfig.ts

@@ -3,7 +3,7 @@ import { Prop } from './types/config';
 
 export class AnimusConfig<
   C extends Record<string, Prop> = {},
-  G extends Record<string, (keyof C)[]> = {}
+  G extends Record<string, (keyof C)[]> = {},
 > {
   #props = {} as C;
   #groups = {} as G;
@@ -16,7 +16,7 @@ export class AnimusConfig<
   addGroup<
     Name extends string,
     Conf extends Record<string, Prop>,
-    PropNames extends keyof Conf
+    PropNames extends keyof Conf,
   >(name: Name, config: Conf) {
     const newGroup = {
       [name]: Object.keys(config),

packages/core/src/AnimusExtended.ts

@@ -25,7 +25,7 @@ export class AnimusExtended<
   Variants extends Record<string, VariantConfig>,
   States extends CSSPropMap<AbstractProps, SystemProps<BaseParser>>,
   ActiveGroups extends Record<string, true>,
-  CustomProps extends Record<string, Prop>
+  CustomProps extends Record<string, Prop>,
 > {
   propRegistry = {} as PropRegistry;
   groupRegistry = {} as GroupRegistry;
@@ -88,7 +88,7 @@ export class AnimusExtended<
     Keys extends keyof Props,
     Base extends AbstractProps,
     Props extends Record<Keys, AbstractProps>,
-    PropKey extends Readonly<string> = 'variant'
+    PropKey extends Readonly<string> = 'variant',
   >(options: {
     prop?: PropKey;
     defaultVariant?: keyof Props;
@@ -159,7 +159,7 @@ export class AnimusExtended<
       shouldForwardProp: (
         prop: PropertyKey
       ): prop is ForwardableProps<T, keyof PropRegistry> =>
-        isPropValid(prop) && !propNames.includes(prop as string),
+        isPropValid(prop as string) && !propNames.includes(prop as string),
     })(this.build());
 
     return Object.assign(StyledComponent, { extend: this.extend.bind(this) });

packages/core/src/__tests__/createAnimus.test.ts

@@ -5,6 +5,7 @@ describe('createAnimus', () => {
     .addGroup('cool', {
       m: { property: 'margin' },
       p: { property: 'padding' },
+      pl: { property: 'paddingLeft', scale: [4, 8, 12] as const },
       fontFamily: {
         property: 'fontFamily',
         scale: 'fonts',
@@ -57,8 +58,9 @@ describe('createAnimus', () => {
       },
       dude: {
         '&:hover': {
-          m: { _: '4px', sm: '8px', xl: '12px' },
           p: ['4', '8', '12'],
+          pl: 4,
+          m: { _: '4px', sm: '8px', xl: '12px' },
         },
       },
     })
@@ -104,6 +106,7 @@ describe('createAnimus', () => {
         color: 'purple',
         margin: '4px',
         padding: '4',
+        paddingLeft: 4,
         '@media screen and (min-width: 480px)': {
           padding: '8',
         },