chore: update prettier tab width for consistency (#175)

packages/design-system/atoms/breakpoints/BreakpointProvider.tsx

@@ -3,66 +3,64 @@ import { mediaQueryDefs } from './Breakpoints';
 import { BreakpointContext, ScreenSize } from './Context';
 
 const resetScreen: ScreenSize = {
-    onSmallScreen: false,
-    onTablet: false,
-    onDesktop: false,
+  onSmallScreen: false,
+  onTablet: false,
+  onDesktop: false,
 };
 
 export class BreakpointsProvider extends React.Component<{}, ScreenSize> {
-    public state = {
-        ...resetScreen,
-        onSmallScreen: true,
-    };
+  public state = {
+    ...resetScreen,
+    onSmallScreen: true,
+  };
 
-    private mediaQueries: { [key in keyof ScreenSize]: MediaQueryList } = {
-        onSmallScreen: window.matchMedia(
-            mediaQueryDefs.onSmallScreen.replace('@media screen and', '')
-        ),
-        onTablet: window.matchMedia(
-            mediaQueryDefs.onTablet.replace('@media screen and', '')
-        ),
-        onDesktop: window.matchMedia(
-            mediaQueryDefs.onDesktop.replace('@media screen and', '')
-        ),
-    };
+  private mediaQueries: { [key in keyof ScreenSize]: MediaQueryList } = {
+    onSmallScreen: window.matchMedia(
+      mediaQueryDefs.onSmallScreen.replace('@media screen and', '')
+    ),
+    onTablet: window.matchMedia(mediaQueryDefs.onTablet.replace('@media screen and', '')),
+    onDesktop: window.matchMedia(
+      mediaQueryDefs.onDesktop.replace('@media screen and', '')
+    ),
+  };
 
-    componentDidMount() {
-        Object.entries(this.mediaQueries).forEach(([key, mediaQuery]) =>
-            mediaQuery.addEventListener('change', this.handleMediaEvent)
-        );
+  componentDidMount() {
+    Object.entries(this.mediaQueries).forEach(([key, mediaQuery]) =>
+      mediaQuery.addEventListener('change', this.handleMediaEvent)
+    );
+  }
+
+  componentWillUnmount() {
+    Object.entries(this.mediaQueries).forEach(([key, mediaQuery]) =>
+      mediaQuery.removeEventListener('change', this.handleMediaEvent)
+    );
+  }
+
+  handleMediaEvent = (event: MediaQueryListEvent) => {
+    console.log('handleMediaEvent', { event });
+    this.setState({
+      ...resetScreen,
+      ...this.calculateScreen(),
+    });
+  };
+
+  calculateScreen = () => {
+    if (this.mediaQueries.onDesktop.matches) {
+      return { onDesktop: true };
     }
 
-    componentWillUnmount() {
-        Object.entries(this.mediaQueries).forEach(([key, mediaQuery]) =>
-            mediaQuery.removeEventListener('change', this.handleMediaEvent)
-        );
+    if (this.mediaQueries.onTablet.matches) {
+      return { onTablet: true };
     }
 
-    handleMediaEvent = (event: MediaQueryListEvent) => {
-        console.log('handleMediaEvent', { event });
-        this.setState({
-            ...resetScreen,
-            ...this.calculateScreen(),
-        });
-    };
+    return { onSmallScreen: true };
+  };
 
-    calculateScreen = () => {
-        if (this.mediaQueries.onDesktop.matches) {
-            return { onDesktop: true };
-        }
-
-        if (this.mediaQueries.onTablet.matches) {
-            return { onTablet: true };
-        }
-
-        return { onSmallScreen: true };
-    };
-
-    render() {
-        return (
-            <BreakpointContext.Provider value={{ screenSize: { ...this.state } }}>
-                {this.props.children}
-            </BreakpointContext.Provider>
-        );
-    }
+  render() {
+    return (
+      <BreakpointContext.Provider value={{ screenSize: { ...this.state } }}>
+        {this.props.children}
+      </BreakpointContext.Provider>
+    );
+  }
 }

packages/design-system/atoms/breakpoints/Breakpoints.stories.tsx

@@ -3,9 +3,9 @@ import { BreakpointsProvider } from './BreakpointProvider';
 import { BreakpointDebugTool } from './DebugTool';
 
 export default {
-    title: 'Atoms/Breakpoints',
-    decorators: [(story) => <BreakpointsProvider>{story()}</BreakpointsProvider>],
-    component: BreakpointDebugTool,
+  title: 'Atoms/Breakpoints',
+  decorators: [(story) => <BreakpointsProvider>{story()}</BreakpointsProvider>],
+  component: BreakpointDebugTool,
 };
 
 export const DebugTool = () => <BreakpointDebugTool />;

packages/design-system/atoms/breakpoints/Breakpoints.ts

@@ -1,16 +1,16 @@
 export const breakpoints = {
-    onTablet: 768,
-    onDesktop: 1024,
+  onTablet: 768,
+  onDesktop: 1024,
 };
 
 export const mediaQueryDefs = {
-    onSmallScreen: `@media screen and (max-width: ${breakpoints.onTablet - 1}px)`,
-    onTablet: `@media screen and (min-width: ${breakpoints.onTablet}px)`,
-    onDesktop: `@media screen and (min-width: ${breakpoints.onDesktop}px)`,
+  onSmallScreen: `@media screen and (max-width: ${breakpoints.onTablet - 1}px)`,
+  onTablet: `@media screen and (min-width: ${breakpoints.onTablet}px)`,
+  onDesktop: `@media screen and (min-width: ${breakpoints.onDesktop}px)`,
 };
 
 export const onTablet = (...expressions: any) => {
-    return `
+  return `
     ${mediaQueryDefs.onTablet} {
       ${expressions.join()}
     }
@@ -18,7 +18,7 @@ export const onTablet = (...expressions: any) => {
 };
 
 export const onDesktop = (...expressions: any) => {
-    return `
+  return `
     ${mediaQueryDefs.onDesktop} {
       ${expressions.join()}
     }
@@ -26,7 +26,7 @@ export const onDesktop = (...expressions: any) => {
 };
 
 export const onSmallScreen = (...expressions: any) => {
-    return `
+  return `
     ${mediaQueryDefs.onSmallScreen} {
       ${expressions.join()}
     }

packages/design-system/atoms/breakpoints/Context.ts

@@ -2,21 +2,21 @@ import { withContext } from '@roleypoly/misc-utils/withContext';
 import * as React from 'react';
 
 export type ScreenSize = {
-    onSmallScreen: boolean;
-    onTablet: boolean;
-    onDesktop: boolean;
+  onSmallScreen: boolean;
+  onTablet: boolean;
+  onDesktop: boolean;
 };
 
 export type BreakpointProps = {
-    screenSize: ScreenSize;
+  screenSize: ScreenSize;
 };
 
 const defaultScreenSize: BreakpointProps = {
-    screenSize: {
-        onSmallScreen: true,
-        onDesktop: false,
-        onTablet: false,
-    },
+  screenSize: {
+    onSmallScreen: true,
+    onDesktop: false,
+    onTablet: false,
+  },
 };
 
 export const BreakpointContext = React.createContext(defaultScreenSize);
@@ -24,4 +24,4 @@ export const BreakpointContext = React.createContext(defaultScreenSize);
 export const useBreakpointContext = () => React.useContext(BreakpointContext);
 
 export const withBreakpoints = <T>(Component: React.ComponentType<T>) =>
-    withContext(BreakpointContext, Component as any);
+  withContext(BreakpointContext, Component as any);

packages/design-system/atoms/breakpoints/DebugTool.tsx

@@ -4,53 +4,53 @@ import { onDesktop, onTablet } from './Breakpoints';
 import { useBreakpointContext } from './Context';
 
 const DebuggerPosition = styled.div`
-    position: fixed;
-    top: 0;
-    left: 0;
-    font-family: monospace;
-    & > div {
-        display: flex;
-    }
+  position: fixed;
+  top: 0;
+  left: 0;
+  font-family: monospace;
+  & > div {
+    display: flex;
+  }
 `;
 
 const OnSmallScreen = styled.div`
-    display: block;
+  display: block;
 `;
 
 const OnTablet = styled.div`
-    display: none;
-    ${onTablet(`display: block;`)}
+  display: none;
+  ${onTablet(`display: block;`)}
 `;
 
 const OnDesktop = styled.div`
-    display: none;
-    ${onDesktop`display: block;`}
+  display: none;
+  ${onDesktop`display: block;`}
 `;
 
 const CSSBreakpointDebugger = () => (
-    <div>
-        <OnSmallScreen style={{ backgroundColor: 'red' }}>S</OnSmallScreen>
-        <OnTablet style={{ backgroundColor: 'green' }}>T</OnTablet>
-        <OnDesktop style={{ backgroundColor: 'blue' }}>D</OnDesktop>
-    </div>
+  <div>
+    <OnSmallScreen style={{ backgroundColor: 'red' }}>S</OnSmallScreen>
+    <OnTablet style={{ backgroundColor: 'green' }}>T</OnTablet>
+    <OnDesktop style={{ backgroundColor: 'blue' }}>D</OnDesktop>
+  </div>
 );
 
 const JSBreakpointDebugger = () => {
-    const {
-        screenSize: { onTablet, onDesktop, onSmallScreen },
-    } = useBreakpointContext();
+  const {
+    screenSize: { onTablet, onDesktop, onSmallScreen },
+  } = useBreakpointContext();
 
-    return (
-        <div>
-            {onSmallScreen && <div style={{ backgroundColor: 'red' }}>S</div>}
-            {onTablet && <div style={{ backgroundColor: 'green' }}>T</div>}
-            {onDesktop && <div style={{ backgroundColor: 'blue' }}>D</div>}
-        </div>
-    );
+  return (
+    <div>
+      {onSmallScreen && <div style={{ backgroundColor: 'red' }}>S</div>}
+      {onTablet && <div style={{ backgroundColor: 'green' }}>T</div>}
+      {onDesktop && <div style={{ backgroundColor: 'blue' }}>D</div>}
+    </div>
+  );
 };
 export const BreakpointDebugTool = () => (
-    <DebuggerPosition>
-        <JSBreakpointDebugger />
-        <CSSBreakpointDebugger />
-    </DebuggerPosition>
+  <DebuggerPosition>
+    <JSBreakpointDebugger />
+    <CSSBreakpointDebugger />
+  </DebuggerPosition>
 );