@moda/om 16.2.0 → 17.0.0

package/src/mixins/font-smoothing/font-smoothing.stories.tsx

@@ -9,22 +9,22 @@ export default { title: 'Mixins/font-smoothing' };
 
 export const Default = () => (
   <Stack space={3}>
-    <div className='Story Mixins font-smoothing--antialiased'>
-      <Text treatment='eyebrow'>@include font-smoothing(antialiased);</Text>
+    <div className="Story Mixins font-smoothing--antialiased">
+      <Text treatment="eyebrow">@include font-smoothing(antialiased);</Text>
     </div>
 
-    <div className='Story Mixins font-smoothing--subpixel'>
-      <Text treatment='eyebrow'>@include font-smoothing(subpixel);</Text>
+    <div className="Story Mixins font-smoothing--subpixel">
+      <Text treatment="eyebrow">@include font-smoothing(subpixel);</Text>
     </div>
 
-    <div className='Story Mixins font-smoothing--antialiased' style={{ backgroundColor: 'black' }}>
-      <Text color='snow' treatment='eyebrow'>
+    <div className="Story Mixins font-smoothing--antialiased" style={{ backgroundColor: 'black' }}>
+      <Text color="snow" treatment="eyebrow">
         @include font-smoothing(antialiased);
       </Text>
     </div>
 
-    <div className='Story Mixins font-smoothing--subpixel' style={{ backgroundColor: 'black' }}>
-      <Text color='snow' treatment='eyebrow'>
+    <div className="Story Mixins font-smoothing--subpixel" style={{ backgroundColor: 'black' }}>
+      <Text color="snow" treatment="eyebrow">
         @include font-smoothing(subpixel);
       </Text>
     </div>

package/src/mixins/overflow-scroll/overflow-scroll.stories.tsx

@@ -5,9 +5,9 @@ import './overflow-scroll.stories.scss';
 export default { title: 'Mixins/overflow-scroll' };
 
 export const Default = () => (
-  <div className='Story Mixins overflow-scroll'>Overflowed on the y axis!</div>
+  <div className="Story Mixins overflow-scroll">Overflowed on the y axis!</div>
 );
 
 export const OverflowX = () => (
-  <div className='Story Mixins overflow-scroll-x'>Overflowed on the x axis!</div>
+  <div className="Story Mixins overflow-scroll-x">Overflowed on the x axis!</div>
 );

package/src/mixins/stack/stack.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
 import React from 'react';
 import { space } from '@moda/tokens';
 
@@ -6,10 +7,8 @@ import './stack.stories.scss';
 export default { title: 'Mixins/stack' };
 
 export const Default = () => (
-  <div className='Story Mixins stack'>
-    <p>
-      Defaults to {`$space: 4`} === {space.scale[4]}
-    </p>
+  <div className="Story Mixins stack">
+    <p>Defaults to $space: 4 === {space.scale[4]}</p>
 
     <span>Notice the different element tags</span>
 
@@ -18,8 +17,8 @@ export const Default = () => (
 );
 
 export const Horizontal = () => (
-  <div className='Story Mixins stack stack--horizontal'>
-    <p>Accepts {`$direction: horizontal`}</p>
+  <div className="Story Mixins stack stack--horizontal">
+    <p>Accepts $direction: horizontal</p>
 
     <span>Notice the different element tags</span>
 

package/src/mixins/thin-underline/thin-underline.stories.tsx

@@ -4,4 +4,4 @@ import './thin-underline.stories.scss';
 
 export default { title: 'Mixins/thin-underline' };
 
-export const Default = () => <div className='Story Mixins thin-underline'>Hello</div>;
+export const Default = () => <div className="Story Mixins thin-underline">Hello</div>;

package/src/mixins/visually-hidden/visually-hidden.stories.tsx

@@ -4,4 +4,4 @@ import './visually-hidden.stories.scss';
 
 export default { title: 'Mixins/visually-hidden' };
 
-export const Default = () => <div className='Story Mixins visually-hidden'>Hello</div>;
+export const Default = () => <div className="Story Mixins visually-hidden">Hello</div>;

package/src/utilities/States/State.tsx

@@ -4,6 +4,7 @@ import { StatesProps } from './StatesProps';
 import './State.scss';
 
 interface Props {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   props: any;
   children: JSX.Element | RenderProps;
 }
@@ -13,10 +14,10 @@ export const State: React.FC<Props> = ({ props, children, ...rest }) => {
   const innerChildren = isRenderProps(children) ? children(props) : children;
 
   return (
-    <div className='State' {...rest}>
+    <div className="State" {...rest}>
       {Specimen}
 
-      <code className='State__props'>
+      <code className="State__props">
         <StatesProps props={props}>{innerChildren}</StatesProps>
       </code>
     </div>

package/src/utilities/States/States.tsx

@@ -4,15 +4,16 @@ import { State } from './State';
 import './States.scss';
 
 export interface Props {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   states?: any[];
   children: JSX.Element | RenderProps;
 }
 
 export const States: React.FC<Props> = ({ states = [{}], children, ...rest }) => {
   return (
-    <div className='States'>
-      {states.map((props, i) => (
-        <State key={i} props={props} {...rest}>
+    <div className="States">
+      {states.map((props, index) => (
+        <State key={index} props={props} {...rest}>
           {children}
         </State>
       ))}

package/src/utilities/States/StatesProps.tsx

@@ -1,22 +1,25 @@
 import React from 'react';
 import { Stack } from '../../components/Stack';
+import { omit } from '../omit';
 import { isRenderProps } from './isRenderProps';
 import { stringifyProps } from './stringifyProps';
-import { omit } from '../omit';
 import './StatesProps.scss';
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 interface Props {
   children: any;
   props: any;
 }
+/* eslint-enable @typescript-eslint/no-explicit-any */
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const isEmpty = (obj?: any) => Object.entries(obj || {}).length === 0;
 
 export const StatesProps: React.FC<Props> = ({ props, children }) => {
   const childrenProps = omit(children.props, ...Object.keys(props || {}));
 
   return (
-    <Stack className='StatesProps' space={2} direction='horizontal'>
+    <Stack className="StatesProps" space={2} direction="horizontal">
       <span>{children.type.displayName || children.type.name}</span>
       {!isEmpty(props) && <strong>{stringifyProps(props)}</strong>}
       {!isRenderProps(children) && !isEmpty(childrenProps) && (

package/src/utilities/States/isRenderProps.ts

@@ -1,4 +1,5 @@
 export type RenderProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (props: any): JSX.Element;
 };
 

package/src/utilities/States/stringifyProps.tsx

@@ -4,6 +4,7 @@ const truncate = (string: string, maxLength = 25) => {
   return `${string.substring(0, maxLength)}${ellipsis ? '...' : ''}`;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const stringifyProps = (props: any) => {
   const stringifiedProps = Object.entries(props || {}).reduce((memo: string, [key, value]) => {
     if (key === 'children') return `${memo} children={...}`;