chore: add typescript strict mode & supress current warnings (#2817)

.github/CODEOWNERS

@@ -1,2 +1,2 @@
 # Design infra team
-* @krzotki @Fasosnql @thomsa @radekwarisch 
+* @krzotki @Fasosnql @radekwarisch

package.json

@@ -28,11 +28,13 @@
     "@codesandbox/sandpack-react": "^1.17.0",
     "@codesandbox/sandpack-themes": "^1.17.0",
     "@floating-ui/react": "^0.21.1",
+    "@types/jest-axe": "^3.5.9",
     "chalk": "4.1.2",
     "classnames": "^2.3.2",
     "glob": "^7.2.0",
     "inquirer": "^8.2.0",
     "jscodeshift": "^0.13.1",
+    "lz-string": "1.4.4",
     "meow": "^5.0.0",
     "patch-package": "^6.5.1",
     "path": "^0.12.7",

src/axe/testA11y.ts

@@ -22,6 +22,7 @@ import {render} from '@testing-library/react';
  * ```
  */
 
+// @ts-expect-error TS7006
 export default async function testA11y(node, axeOptions?) {
   const container = React.isValidElement(node)
     ? render(node, axeOptions).container

src/chromatic/HoverStyle.tsx

@@ -48,14 +48,17 @@ const applyHoverStates = (
 
   const hoverStylesheet = hStylesheet.sheet;
 
+  // @ts-expect-error TS18047
   if (!hoverStylesheet.cssRules || hoverStylesheet.cssRules.length !== 0) {
     return;
   }
 
   const insertUnhoveredRule = (unhoveredSelector: string) => {
     if (unhoveredSelector) {
+      // @ts-expect-error TS18047
       hoverStylesheet.insertRule(
         unhoveredSelector,
+        // @ts-expect-error TS18047
         hoverStylesheet.cssRules.length
       );
     }
@@ -69,6 +72,7 @@ const applyHoverStates = (
       if (conditionText) {
         Array.from((rule as CSSGroupingRule).cssRules).forEach(r => {
           insertUnhoveredRule(
+            // @ts-expect-error TS2345
             generateUnhoveredSelector(
               r as CSSStyleRule,
               hoverContainerId,
@@ -78,6 +82,7 @@ const applyHoverStates = (
         });
       } else {
         insertUnhoveredRule(
+          // @ts-expect-error TS2345
           generateUnhoveredSelector(rule as CSSStyleRule, hoverContainerId)
         );
       }
@@ -98,6 +103,7 @@ const HoverStyle = ({
   const hoverContainerId = 'hover-container';
 
   React.useEffect(() => {
+    // @ts-expect-error TS2345
     applyHoverStates(hoverContainerId, styleheetRef.current);
   }, []);
 

src/chromatic/utils.tsx

@@ -27,6 +27,7 @@ export const generateChromaticStory: any = (
           const storyName = !isNew && storyToHover;
 
           return (
+            // @ts-expect-error TS2322
             <HoverStyle storyName={storyName} key={storyName || i}>
               <HoverStory {...module.default.args} {...HoverStory.args} />
             </HoverStyle>
@@ -36,6 +37,7 @@ export const generateChromaticStory: any = (
   );
 };
 
+// @ts-expect-error TS7006
 const mergeStories: any = module => {
   const stories = Object.keys(module)
     .filter(

src/components/accordion/Accordion.chromatic.stories.tsx

@@ -14,6 +14,7 @@ const copy = {
     "Now your family member just needs to open the link and hit 'accept'. If they aren't already on Brainly",
 };
 
+// @ts-expect-error TS7006
 const WithTooltip = args => {
   const handleChange = () => null;
 

src/components/accordion/Accordion.tsx

@@ -167,6 +167,7 @@ const Accordion = ({
     const wrapper = wrapperRef.current;
 
     function handleKeyDown(event: KeyboardEvent) {
+      // @ts-expect-error TS7053
       const key = KEY_CODES[event.keyCode];
 
       if (['space', 'enter'].includes(key)) {

src/components/action-list/ActionList.spec.tsx

@@ -18,27 +18,31 @@ describe('ActionList', () => {
     );
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error TS18047
     expect(root.classList.contains('sg-actions-list')).toEqual(true);
   });
 
   it('to-right', () => {
     const actionList = render(<ActionList direction={DIRECTION.TO_RIGHT} />);
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error TS18047
     expect(root.classList.contains('sg-actions-list--to-right')).toEqual(true);
   });
 
   it('to-top', () => {
     const actionList = render(<ActionList toTop />);
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error TS18047
     expect(root.classList.contains('sg-actions-list--to-top')).toEqual(true);
   });
 
   it('baseline', () => {
     const actionList = render(<ActionList align={ALIGNMENT.BASELINE} />);
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error TS18047
     expect(root.classList.contains('sg-actions-list--align-baseline')).toEqual(
       true
     );
@@ -48,6 +52,7 @@ describe('ActionList', () => {
     const actionList = render(<ActionList direction={DIRECTION.CENTERED} />);
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error TS18047
     expect(root.classList.contains('sg-actions-list--centered')).toEqual(true);
   });
 
@@ -57,6 +62,7 @@ describe('ActionList', () => {
     );
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error TS18047
     expect(root.classList.contains('sg-actions-list--space-between')).toEqual(
       true
     );
@@ -68,6 +74,7 @@ describe('ActionList', () => {
     );
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error TS18047
     expect(root.classList.contains('sg-actions-list--space-around')).toEqual(
       true
     );
@@ -79,6 +86,7 @@ describe('ActionList', () => {
     );
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error TS18047
     expect(root.classList.contains('sg-actions-list--space-evenly')).toEqual(
       true
     );
@@ -88,6 +96,7 @@ describe('ActionList', () => {
     const actionList = render(<ActionList noWrap />);
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error TS18047
     expect(root.classList.contains('sg-actions-list--no-wrap')).toEqual(true);
   });
 });

src/components/action-list/ActionListHole.spec.tsx

@@ -14,6 +14,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole'
       )
@@ -26,6 +27,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--container'
       )
@@ -37,6 +39,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--no-spacing'
       )
@@ -48,6 +51,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--space-bellow'
       )
@@ -59,6 +63,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--no-shrink'
       )
@@ -68,6 +73,7 @@ describe('<ActionListHole />', () => {
     const actionListHole = render(<ActionListHole grow>test</ActionListHole>);
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--grow'
       )
@@ -77,6 +83,7 @@ describe('<ActionListHole />', () => {
     const actionListHole = render(<ActionListHole toEnd>test</ActionListHole>);
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--to-end'
       )
@@ -88,6 +95,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--to-right'
       )
@@ -99,6 +107,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--to-right'
       )
@@ -112,6 +121,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--spaced-small'
       )
@@ -125,6 +135,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--spaced-xsmall'
       )
@@ -136,6 +147,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--equal-width'
       )

src/components/box/Box.chromatic.stories.tsx

@@ -6,6 +6,7 @@ import {
   responsivePropsStoryLabel,
 } from '../../chromatic/utils';
 
+// @ts-expect-error TS7006
 export const ResponsiveProps = args => {
   return (
     <div>

src/components/buttons/Button.tsx

@@ -369,6 +369,7 @@ const Button = React.forwardRef(
       ico = <span className={iconClass}>{icon}</span>;
     }
 
+    // @ts-expect-error TS7006
     const onButtonClick = e => {
       if (isLink && isDisabled) {
         return;

src/components/buttons/ButtonLite.tsx

@@ -217,6 +217,7 @@ const ButtonLite = ({
     );
   }
 
+  // @ts-expect-error TS7006
   const onButtonClick = e => {
     if (isLink && isDisabled) {
       return;

src/components/card-interactive/CardCheckbox.tsx

@@ -168,6 +168,7 @@ export const CardCheckboxRoot = React.forwardRef<
     };
 
     const onInputChange = React.useCallback(
+      // @ts-expect-error TS7006
       e => {
         if (!isControlled) {
           setIsChecked(val => !val);
@@ -188,7 +189,9 @@ export const CardCheckboxRoot = React.forwardRef<
       <CardCheckboxContext.Provider
         value={{
           checked: isChecked,
+          // @ts-expect-error TS2322
           indeterminate,
+          // @ts-expect-error TS2322
           disabled,
         }}
       >

src/components/card-interactive/CardRadio.tsx

@@ -153,6 +153,7 @@ const CardRadio = React.forwardRef<HTMLInputElement, CardRadioPropsType>(
       <CardRadioContext.Provider
         value={{
           checked: isChecked,
+          // @ts-expect-error TS2322
           disabled,
         }}
       >

src/components/chip/Chip.tsx

@@ -151,9 +151,11 @@ const Chip = ({
 
   const isControlled = checked !== undefined || isWithinChipGroup;
   const isChecked = isControlled
-    ? checked ?? isCheckedWithinGroup(chipGroupContext.groupValue, value)
+    ? // @ts-expect-error TS2345
+      checked ?? isCheckedWithinGroup(chipGroupContext.groupValue, value)
     : undefined;
 
+  // @ts-expect-error TS7006
   const onInputChange = e => {
     if (isWithinChipGroup) {
       chipGroupContext.onChipChange(e, value);

src/components/chip/ChipGroup.spec.tsx

@@ -8,6 +8,7 @@ import {testA11y} from '../../axe';
 const chips = ['option-a', 'option-b'];
 
 describe('<ChipGroup />', () => {
+  // @ts-expect-error TS7006
   const renderChipGroup = props =>
     render(
       <ChipGroup {...props} name="chipgroup">

src/components/chip/ChipGroup.tsx

@@ -92,6 +92,7 @@ const getGroupValue = (
 ) => {
   if (multiSelect) {
     if (Array.isArray(currentValue)) {
+      // @ts-expect-error TS2345
       return currentValue.includes(toggledValue)
         ? currentValue.filter(v => v !== toggledValue)
         : [...currentValue, toggledValue];
@@ -122,10 +123,13 @@ const ChipGroup = ({
   const [selectedValue, setSelectedValue] = React.useState(value || null);
 
   React.useEffect(() => {
+    // @ts-expect-error TS2345
     setSelectedValue(value);
   }, [value]);
 
+  // @ts-expect-error TS7006
   const setValue = (event, chipValue) => {
+    // @ts-expect-error TS2345
     setSelectedValue(getGroupValue(selectedValue, chipValue, multiSelect));
     if (onChange) onChange(event, chipValue);
   };

src/components/colors/hex.spec.ts

@@ -1,3 +1,4 @@
+// @ts-expect-error TS7016
 import colors from './colors';
 import hex from './hex';
 

src/components/colors/hex.ts

@@ -1,8 +1,10 @@
+// @ts-expect-error TS7016
 import colors from './colors';
 
 const hex: Record<string, string> = {};
 
 Object.keys(colors).forEach(groupName => {
+  // @ts-expect-error TS7006
   colors[groupName].forEach(color => {
     hex[color.variable.slice(1)] = `#${color.hex}`;
   });