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

packages/design-system/atoms/horizontal-switch/HorizontalSwitch.stories.tsx

@@ -2,32 +2,32 @@ import * as React from 'react';
 import { HorizontalSwitch } from './HorizontalSwitch';
 
 export default {
-    title: 'Atoms/Horizontal Switch',
-    component: HorizontalSwitch,
-    args: {
-        items: ['true', 'false'],
-        value: 'true',
-    },
+  title: 'Atoms/Horizontal Switch',
+  component: HorizontalSwitch,
+  args: {
+    items: ['true', 'false'],
+    value: 'true',
+  },
 };
 
 const Story = (args) => {
-    const [value, setValue] = React.useState(args.value);
+  const [value, setValue] = React.useState(args.value);
 
-    return (
-        <HorizontalSwitch
-            {...args}
-            value={value}
-            onChange={(a) => {
-                setValue(a);
-                args.onChange(a);
-            }}
-        />
-    );
+  return (
+    <HorizontalSwitch
+      {...args}
+      value={value}
+      onChange={(a) => {
+        setValue(a);
+        args.onChange(a);
+      }}
+    />
+  );
 };
 
 export const Switch = Story.bind({});
 export const SwitchThree = Story.bind({});
 SwitchThree.args = {
-    items: ['aaa', 'bbb', 'ccc'],
-    value: 'aaa',
+  items: ['aaa', 'bbb', 'ccc'],
+  value: 'aaa',
 };

packages/design-system/atoms/horizontal-switch/HorizontalSwitch.styled.ts

@@ -3,21 +3,21 @@ import { transitions } from '@roleypoly/design-system/atoms/timings';
 import styled, { css } from 'styled-components';
 
 export const Item = styled.div<{ selected: boolean }>`
-    padding: 10px;
-    box-sizing: border-box;
-    transition: background-color ease-in-out ${transitions.actionable}s;
-    ${(props) =>
-        props.selected &&
-        css`
-            background-color: ${palette.taupe300};
-        `}
+  padding: 10px;
+  box-sizing: border-box;
+  transition: background-color ease-in-out ${transitions.actionable}s;
+  ${(props) =>
+    props.selected &&
+    css`
+      background-color: ${palette.taupe300};
+    `}
 `;
 
 export const Wrapper = styled.div`
-    display: inline-flex;
-    user-select: none;
-    cursor: pointer;
-    border: 1px solid ${palette.taupe200};
-    border-radius: calc(1em + 20px);
-    overflow: hidden;
+  display: inline-flex;
+  user-select: none;
+  cursor: pointer;
+  border: 1px solid ${palette.taupe200};
+  border-radius: calc(1em + 20px);
+  overflow: hidden;
 `;

packages/design-system/atoms/horizontal-switch/HorizontalSwitch.tsx

@@ -2,27 +2,23 @@ import * as React from 'react';
 import { Item, Wrapper } from './HorizontalSwitch.styled';
 
 export type SwitchProps = {
-    items: string[];
-    value: string;
-    onChange: (value: string) => void;
+  items: string[];
+  value: string;
+  onChange: (value: string) => void;
 };
 
 export const HorizontalSwitch = (props: SwitchProps) => {
-    const handleClick = (item: typeof props.value) => () => {
-        props.onChange?.(item);
-    };
+  const handleClick = (item: typeof props.value) => () => {
+    props.onChange?.(item);
+  };
 
-    return (
-        <Wrapper>
-            {props.items.map((item, idx) => (
-                <Item
-                    key={idx}
-                    selected={item === props.value}
-                    onClick={handleClick(item)}
-                >
-                    {item}
-                </Item>
-            ))}
-        </Wrapper>
-    );
+  return (
+    <Wrapper>
+      {props.items.map((item, idx) => (
+        <Item key={idx} selected={item === props.value} onClick={handleClick(item)}>
+          {item}
+        </Item>
+      ))}
+    </Wrapper>
+  );
 };