forumone · coreylafferty · Jan 23, 2024 · Nov 1, 2023 · Dec 13, 2023 · Dec 18, 2023
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,9 +1,12 @@
 {
   "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": true
+  },
   "plugins": ["@typescript-eslint", "prettier"],
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-type-checked",
     "next/core-web-vitals",
     "prettier"
   ],
@@ -29,7 +32,11 @@
     {
       "files": ["**/*.stories.tsx"],
       "rules": {
-        "@next/next/no-img-element": "off"
+        "@next/next/no-img-element": "off",
+        "@typescript-eslint/no-unsafe-assignment": "off",
+        "@typescript-eslint/no-unsafe-argument": "off",
+        "@typescript-eslint/no-unsafe-call": "off",
+        "@typescript-eslint/no-unsafe-member-access": "off"
       }
     },
     {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
-    "@csstools/postcss-global-data": "^1.0.1",
+    "@csstools/postcss-global-data": "^2.1.1",
     "@storybook/addon-a11y": "^7.5.1",
     "@storybook/addon-actions": "^7.5.1",
     "@storybook/addon-essentials": "^7.5.1",
@@ -44,40 +44,43 @@
     "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0",
     "@svgr/babel-plugin-remove-jsx-attribute": "^8.0.0",
     "@svgr/cli": "^8.0.1",
-    "@types/node": "^16.11.25",
+    "@types/node": "^18.19.3",
     "@types/react": "^18.0.5",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "@typescript-eslint/parser": "^5.20.0",
-    "babel-loader": "^8.3.0",
-    "clsx": "^1.2.1",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "babel-loader": "^9.1.3",
+    "clsx": "^2.0.0",
     "css-loader": "^6.8.1",
-    "enhanced-resolve": "5.10.0",
+    "csstype": "3.1.2",
+    "enhanced-resolve": "^5.15.0",
     "eslint": "^8.13.0",
-    "eslint-config-next": "^13.2.3",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "html-react-parser": "^4.2.2",
-    "husky": "^7.0.4",
-    "inquirer": "^8.2.4",
-    "mkdirp": "^1.0.4",
+    "eslint-config-next": "^14.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "html-react-parser": "^5.0.9",
+    "husky": "^8.0.3",
+    "i": "^0.3.7",
+    "inquirer": "^9.2.12",
+    "mkdirp": "^3.0.1",
+    "npm": "^10.2.5",
     "postcss": "^8.4.21",
     "postcss-advanced-variables": "github:kmonahan/postcss-advanced-variables",
     "postcss-loader": "^7.3.3",
-    "postcss-nesting": "^11.1.0",
-    "postcss-preset-env": "^8.0.1",
+    "postcss-nesting": "^12.0.2",
+    "postcss-preset-env": "^9.3.0",
     "postcss-rem": "^2.0.2",
-    "prettier": "^2.6.2",
-    "prettier-plugin-organize-imports": "^2.3.4",
+    "prettier": "^3.1.1",
+    "prettier-plugin-organize-imports": "^3.2.4",
     "storybook": "^7.5.1",
     "style-loader": "^3.3.3",
     "stylelint": "^15.5.0",
     "stylelint-config-standard": "^33.0.0",
     "stylelint-order": "^6.0.3",
     "stylelint-webpack-plugin": "^4.1.1",
-    "typescript": "^4.6.3",
+    "typescript": "^5.3.3",
     "yaml": "^2.2.2"
   },
   "overrides": {
-    "semver": "7.5.3"
+    "csstype": "3.1.2"
   }
 }
diff --git a/source/00-config/mixins/list.css b/source/00-config/mixins/list.css
@@ -40,8 +40,7 @@
     display: block;
     float: inline-start;
     margin-inline-end: 0.75em;
-    padding-inline-end: 0.75em;
-    padding-inline-start: 0;
+    padding-inline: 0 0.75em;
 
     @supports not (float: inline-start) {
       float: left;

diff --git a/source/01-global/01-typography/fonts.stories.tsx b/source/01-global/01-typography/fonts.stories.tsx
@@ -43,7 +43,7 @@ const Fonts: StoryObj<FontsArgs> = {
   render: args => {
     return (
       <>
-        {Object.entries(args.fonts as FontOptions).map(([name, fontFamily]) => (
+        {Object.entries(args.fonts).map(([name, fontFamily]) => (
           <div className={styles.fonts} key={name}>
             <h3
               className={styles.family}
@@ -53,47 +53,45 @@ const Fonts: StoryObj<FontsArgs> = {
             >
               {name}
             </h3>
-            {Object.entries(args.weights as WeightOptions).map(
-              ([name, fontWeight]) => (
-                <div className={styles.item} key={name}>
-                  <div
-                    className={styles['preview-character']}
-                    style={{
-                      fontStyle: 'normal',
-                      fontFamily,
-                      fontWeight,
-                    }}
-                  >
-                    AaBbCc
-                  </div>
-                  <div
-                    className={styles.preview}
-                    style={{
-                      fontStyle: 'normal',
-                      fontFamily,
-                      fontWeight,
-                    }}
-                  >
-                    ABCDEFGHIJKLMNOPQRSTUVWXYZ
-                    <br />
-                    abcdefghijklmnopqrstuvwxyz
-                    <br />
-                    1234567890(,.;:?!$&*)
+            {Object.entries(args.weights).map(([name, fontWeight]) => (
+              <div className={styles.item} key={name}>
+                <div
+                  className={styles['preview-character']}
+                  style={{
+                    fontStyle: 'normal',
+                    fontFamily,
+                    fontWeight,
+                  }}
+                >
+                  AaBbCc
+                </div>
+                <div
+                  className={styles.preview}
+                  style={{
+                    fontStyle: 'normal',
+                    fontFamily,
+                    fontWeight,
+                  }}
+                >
+                  ABCDEFGHIJKLMNOPQRSTUVWXYZ
+                  <br />
+                  abcdefghijklmnopqrstuvwxyz
+                  <br />
+                  1234567890(,.;:?!$&*)
+                </div>
+                <div className={styles['preview-meta']}>
+                  <div className={styles.name}>{name}</div>
+                  <div className={styles.weight}>
+                    <span className={styles.label}>Weight:</span>
+                    {fontWeight}
                   </div>
-                  <div className={styles['preview-meta']}>
-                    <div className={styles.name}>{name}</div>
-                    <div className={styles.weight}>
-                      <span className={styles.label}>Weight:</span>
-                      {fontWeight}
-                    </div>
-                    <div className={styles.style}>
-                      <span className={styles.label}>Style:</span>
-                      {fontFamily}
-                    </div>
+                  <div className={styles.style}>
+                    <span className={styles.label}>Style:</span>
+                    {fontFamily}
                   </div>
                 </div>
-              ),
-            )}
+              </div>
+            ))}
           </div>
         ))}
       </>

diff --git a/source/01-global/01-typography/line-height.stories.tsx b/source/01-global/01-typography/line-height.stories.tsx
@@ -43,26 +43,24 @@ const LineHeight: StoryObj<LineHeightArgs> = {
   render: args => {
     return (
       <>
-        {Object.entries(args.fonts as FontOptions).map(([name, fontFamily]) => (
+        {Object.entries(args.fonts).map(([name, fontFamily]) => (
           <div className={styles['line-height']} key={name}>
             <h2 className={styles.heading}>{name}</h2>
             <div style={{ fontFamily }}>
-              {Object.entries(args.lineHeights as LineHeightOptions).map(
-                ([name, lineHeight]) => (
-                  <div className={styles.row} key={name}>
-                    <div className={styles.label}>{name}</div>
-                    <div className={styles.preview} style={{ lineHeight }}>
-                      The line-height for this text is{' '}
-                      <strong>{lineHeight}</strong> times the font-size. It’s
-                      worth remembering that line height is affected by the
-                      x-height. Much like how different typefaces can appear to
-                      be different heights despite being set at the same font
-                      size, so too can line height appear to be more open or
-                      tighter, depending on each individual font.
-                    </div>
+              {Object.entries(args.lineHeights).map(([name, lineHeight]) => (
+                <div className={styles.row} key={name}>
+                  <div className={styles.label}>{name}</div>
+                  <div className={styles.preview} style={{ lineHeight }}>
+                    The line-height for this text is{' '}
+                    <strong>{lineHeight}</strong> times the font-size. It’s
+                    worth remembering that line height is affected by the
+                    x-height. Much like how different typefaces can appear to be
+                    different heights despite being set at the same font size,
+                    so too can line height appear to be more open or tighter,
+                    depending on each individual font.
                   </div>
-                ),
-              )}
+                </div>
+              ))}
             </div>
           </div>
         ))}

diff --git a/source/01-global/01-typography/text-styles.stories.tsx b/source/01-global/01-typography/text-styles.stories.tsx
@@ -7,7 +7,7 @@ const TextStylesComponent = () => {
       {Object.entries(styles).map(([name, style]) => (
         <div key={name} style={{ marginBottom: '3rem' }}>
           <div style={{ textTransform: 'uppercase' }}>{name}</div>
-          <div className={style as string}>
+          <div className={style}>
             Alice was beginning to get very tired of sitting by her sister on
             the bank, and of having nothing to do: once or twice she had peeped
             into the book her sister was reading, but it had no pictures or

diff --git a/source/01-global/03-box-shadow/shadows.stories.tsx b/source/01-global/03-box-shadow/shadows.stories.tsx
@@ -22,17 +22,19 @@ function BoxShadowDemo({
 }): JSX.Element {
   return (
     <div className={styles['box-shadow']}>
-      {Object.entries(boxShadow).map(([elevation, boxShadowCss]) => (
-        <div
-          key={`box-shadow-${elevation}`}
-          className={styles.item}
-          style={{
-            boxShadow: boxShadowCss,
-          }}
-        >
-          <div className={styles.label}>Elevation Level: {elevation}</div>
-        </div>
-      ))}
+      {Object.entries(boxShadow).map(
+        ([elevation, boxShadowCss]: [string, Property.BoxShadow]) => (
+          <div
+            key={`box-shadow-${elevation}`}
+            className={styles.item}
+            style={{
+              boxShadow: boxShadowCss,
+            }}
+          >
+            <div className={styles.label}>Elevation Level: {elevation}</div>
+          </div>
+        ),
+      )}
     </div>
   );
 }

diff --git a/source/03-components/HeroInlineImage/hero-inline-image.module.css b/source/03-components/HeroInlineImage/hero-inline-image.module.css
@@ -77,8 +77,7 @@
     .content {
       @media (--desktop) {
         align-items: flex-start;
-        inset-inline-end: 35%;
-        inset-inline-start: 10%;
+        inset-inline: 10% 35%;
       }
     }
   }
@@ -87,8 +86,7 @@
     .content {
       @media (--desktop) {
         align-items: flex-start;
-        inset-inline-end: 10%;
-        inset-inline-start: 35%;
+        inset-inline: 35% 10%;
       }
     }
   }

diff --git a/source/03-components/StyledSelect/StyledSelect.tsx b/source/03-components/StyledSelect/StyledSelect.tsx
@@ -144,8 +144,8 @@ function StyledSelect<
           backgroundColor: state.isSelected
             ? 'var(--brand-blue-dark)'
             : state.isFocused
-            ? 'var(--brand-blue-base)'
-            : 'transparent',
+              ? 'var(--brand-blue-base)'
+              : 'transparent',
           color:
             state.isSelected || state.isFocused
               ? 'var(--text-on-dark)'

diff --git a/source/06-utility/slide.ts b/source/06-utility/slide.ts
@@ -150,10 +150,15 @@ export const slideToggle = (
   hideContent = true,
 ) => {
   if (!target.dataset.isSliding) {
-    target.addEventListener('finishslider', function () {
-      delete target.dataset.isSliding;
-      target.removeEventListener('finishslider', arguments.callee());
-    });
+    target.addEventListener(
+      'finishslider',
+      function () {
+        delete target.dataset.isSliding;
+      },
+      {
+        once: true,
+      },
+    );
 
     if (
       (hideContent && window.getComputedStyle(target).display === 'none') ||