@moda/om 21.0.0-next.1 → 21.0.0

package/src/components/Toast/Toast.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Toast, ToastProps } from './Toast';
 
 export default { title: 'Components/Toast' };

package/src/components/VerticalDivider/VerticalDivider.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Stack } from '../Stack';
 import { VerticalDivider } from './VerticalDivider';
 

package/src/hooks/useClickOutside.ts

@@ -1,6 +1,9 @@
 import React, { useEffect, useCallback } from 'react';
 
-export const useClickOutside = (ref: React.RefObject<HTMLElement>, onClickOutside: () => void) => {
+export const useClickOutside = (
+  ref: React.RefObject<HTMLElement | null>,
+  onClickOutside: () => void
+) => {
   const handleClickOutside = useCallback(
     (event: MouseEvent) => {
       if (ref.current && !ref.current.contains(event.target as Node)) onClickOutside();

package/src/index.scss

@@ -1,4 +1,3 @@
 @forward '~@moda/tokens';
 
 @forward './mixins/mixins';
-@forward './functions/functions';

package/src/index.ts

@@ -1,3 +1,5 @@
+import 'focus-visible';
+
 import { colors, typography, space, breakpoints } from '@moda/tokens';
 
 import { States } from './utilities';

package/src/utilities/States/State.tsx

@@ -1,25 +1,25 @@
-import React from 'react';
-import { isRenderProps, RenderProps } from './isRenderProps';
-import { StatesProps } from './StatesProps';
-import './State.scss';
+import React, { JSX } from 'react';
+import { isRenderProps, RenderProps } from '../isRenderProps';
+import { StateProps } from './StateProps';
+import { useStyles } from './Styles';
 
-interface Props {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  props: any;
-  children: JSX.Element | RenderProps;
+interface Props<T> {
+  props: T;
+  children: JSX.Element | RenderProps<T>;
 }
 
-export const State: React.FC<Props> = ({ props, children, ...rest }) => {
+export const State = <T extends object>({ props, children, ...rest }: Props<T>) => {
+  const styles = useStyles();
+
   const Specimen = isRenderProps(children) ? children(props) : React.cloneElement(children, props);
+
   const innerChildren = isRenderProps(children) ? children(props) : children;
 
   return (
-    <div className='State' {...rest}>
+    <div style={styles.state} {...rest}>
       {Specimen}
 
-      <code className='State__props'>
-        <StatesProps props={props}>{innerChildren}</StatesProps>
-      </code>
+      <StateProps props={props}>{innerChildren}</StateProps>
     </div>
   );
 };

package/src/utilities/States/StateProps.tsx

@@ -0,0 +1,28 @@
+import React, { JSX } from 'react';
+import { isRenderProps } from '../isRenderProps';
+import { stringifyProps } from '../stringifyProps';
+import { omit } from '../omit';
+import { isEmpty } from '../isEmpty';
+import { useStyles } from './Styles';
+
+interface Props {
+  children: JSX.Element;
+  props: object;
+}
+
+export const StateProps: React.FC<Props> = ({ props, children }) => {
+  const styles = useStyles();
+  const childrenProps = omit(children.props, ...Object.keys(props || {}));
+
+  return (
+    <div style={styles.stateProps}>
+      {'<'}
+      <span>{children.type.displayName || children.type.name}</span>{' '}
+      {!isEmpty(props) && <strong style={styles.statePropsActive}>{stringifyProps(props)}</strong>}{' '}
+      {!isRenderProps(children) && !isEmpty(childrenProps) && (
+        <span>{stringifyProps(childrenProps)}</span>
+      )}
+      <span>{' />'}</span>
+    </div>
+  );
+};

package/src/utilities/States/States.tsx

@@ -1,22 +1,20 @@
-import React from 'react';
-import { RenderProps } from './isRenderProps';
+import React, { JSX } from 'react';
+import { RenderProps } from '../isRenderProps';
 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 interface Props<T> {
+  states?: T[];
+  children: JSX.Element | RenderProps<T>;
 }
 
-export const States: React.FC<Props> = ({ states = [{}], children, ...rest }) => {
+export const States = <T extends object>({ states = [{} as T], children, ...rest }: Props<T>) => {
   return (
-    <div className='States'>
+    <>
       {states.map((props, index) => (
-        <State key={index} props={props} {...rest}>
+        <State<T> key={index} props={props} {...rest}>
           {children}
         </State>
       ))}
-    </div>
+    </>
   );
 };

package/src/utilities/States/Styles.tsx

@@ -0,0 +1,43 @@
+import React, { ReactNode, useContext } from 'react';
+
+export type StateStyles = {
+  state: React.CSSProperties;
+  stateProps: React.CSSProperties;
+  statePropsActive: React.CSSProperties;
+};
+
+export const DEFAULT_STYLES: StateStyles = {
+  state: {
+    border: '1px dotted #ddd',
+    padding: '0.5rem',
+    marginBottom: '1rem'
+  },
+  stateProps: {
+    display: 'block',
+    marginTop: '0.5rem',
+    paddingTop: '0.5rem',
+    fontFamily: "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace",
+    fontSize: '0.8125rem',
+    color: '#999',
+    borderTop: '1px dotted #ddd'
+  },
+  statePropsActive: {
+    color: '#111',
+    textDecoration: 'underline'
+  }
+};
+
+export const Styles = React.createContext<StateStyles>(DEFAULT_STYLES);
+
+export type StylesProvider = {
+  styles: Partial<StateStyles>;
+  children?: ReactNode;
+};
+
+export const StylesProvider: React.FC<StylesProvider> = ({ styles, children }) => {
+  return <Styles.Provider value={{ ...DEFAULT_STYLES, ...styles }}>{children}</Styles.Provider>;
+};
+
+export const useStyles = () => {
+  return useContext(Styles);
+};

package/src/utilities/States/index.ts

@@ -1 +1,2 @@
 export * from './States';
+export * from './Styles';

package/src/utilities/index.ts

@@ -1 +1,8 @@
 export * from './States';
+export * from './isEmpty';
+export * from './isRenderProps';
+export * from './omit';
+export * from './preventNavigation';
+export * from './sample';
+export * from './stringifyProps';
+export * from './truncate';

package/src/utilities/isEmpty.ts

@@ -0,0 +1 @@
+export const isEmpty = (obj?: unknown) => Object.entries(obj || {}).length === 0;

package/src/utilities/isRenderProps.ts

@@ -0,0 +1,9 @@
+import { JSX } from 'react';
+
+export type RenderProps<T> = {
+  (props: T): JSX.Element;
+};
+
+export const isRenderProps = <T>(
+  children: JSX.Element | RenderProps<T>
+): children is RenderProps<T> => typeof children === 'function';

package/src/utilities/{States/stringifyProps.tsx → stringifyProps.ts}

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

package/src/utilities/truncate.ts

@@ -0,0 +1,5 @@
+export const truncate = (string: string, maxLength = 25) => {
+  if (!string) return null;
+  const ellipsis = string.length > maxLength;
+  return `${string.substring(0, maxLength)}${ellipsis ? '...' : ''}`;
+};

package/dist/src/utilities/States/StatesProps.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import './StatesProps.scss';
-interface Props {
-    children: any;
-    props: any;
-}
-export declare const StatesProps: React.FC<Props>;
-export {};

package/dist/src/utilities/States/isRenderProps.d.ts

@@ -1,4 +0,0 @@
-export type RenderProps = {
-    (props: any): JSX.Element;
-};
-export declare const isRenderProps: (children: JSX.Element | RenderProps) => children is RenderProps;

package/dist/src/utilities/States/stringifyProps.d.ts

@@ -1 +0,0 @@
-export declare const stringifyProps: (props: any) => string;

package/src/utilities/States/State.scss

@@ -1,11 +0,0 @@
-@use '~@moda/om';
-
-.State {
-  border: 1px dotted om.color(fog);
-  padding: om.spacing(2);
-
-  &__props {
-    display: block;
-    margin-top: om.space(2);
-  }
-}

package/src/utilities/States/States.scss

@@ -1,5 +0,0 @@
-@use '~@moda/om';
-
-.States {
-  @include om.stack(6);
-}

package/src/utilities/States/StatesProps.scss

@@ -1,24 +0,0 @@
-@use '~@moda/om';
-
-.StatesProps {
-  @include om.text(body1, $font: code);
-
-  padding-top: om.space(2);
-  color: om.color(fog);
-  border-top: 1px dotted om.color(elephant);
-
-  > strong {
-    text-decoration: underline;
-    color: om.color(ink);
-  }
-
-  &::before {
-    content: '<';
-    color: om.color(elephant);
-  }
-
-  &::after {
-    content: '/>';
-    color: om.color(elephant);
-  }
-}

package/src/utilities/States/StatesProps.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { Stack } from '../../components/Stack';
-import { omit } from '../omit';
-import { isRenderProps } from './isRenderProps';
-import { stringifyProps } from './stringifyProps';
-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'>
-      <span>{children.type.displayName || children.type.name}</span>
-      {!isEmpty(props) && <strong>{stringifyProps(props)}</strong>}
-      {!isRenderProps(children) && !isEmpty(childrenProps) && (
-        <span>{stringifyProps(childrenProps)}</span>
-      )}
-      <span> </span>
-    </Stack>
-  );
-};

package/src/utilities/States/isRenderProps.ts

@@ -1,7 +0,0 @@
-export type RenderProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (props: any): JSX.Element;
-};
-
-export const isRenderProps = (children: JSX.Element | RenderProps): children is RenderProps =>
-  typeof children === 'function';