prettier organize imports

hack/dockerfiles/bot.Dockerfile

@@ -2,9 +2,9 @@ FROM golang:1.15-alpine AS builder
 
 # Create the user and group files that will be used in the running container to
 # run the process as an unprivileged user.
-RUN mkdir /user && \
+RUN mkdir /user \
-  echo 'nobody:x:65534:65534:nobody:/:' > /user/passwd && \
+    && echo 'nobody:x:65534:65534:nobody:/:' >/user/passwd \
-  echo 'nobody:x:65534:' > /user/group
+    && echo 'nobody:x:65534:' >/user/group
 
 # Install the Certificate-Authority certificates for the app to be able to make
 # calls to HTTPS endpoints.
@@ -24,8 +24,8 @@ COPY ./ ./
 
 # Build the executable to `/app`. Mark the build as statically linked.
 RUN CGO_ENABLED=0 go build \
-  -installsuffix "static" \
+    -installsuffix "static" \
-  -o /app ./src/discord-bot
+    -o /app ./src/discord-bot
 
 # Final stage: the running container.
 FROM scratch AS final
@@ -43,4 +43,4 @@ COPY --from=builder /app /app
 USER nobody:nobody
 
 # Run the compiled binary.
-ENTRYPOINT ["/app"]
+ENTRYPOINT ["/app"]

hack/dockerfiles/dev-container.Dockerfile

@@ -5,4 +5,4 @@ ARG NODE_VERSION="lts/*"
 RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"
 
 # Install Wrangler
-RUN su vscode -c "npm install -g wrangler"
+RUN su vscode -c "npm install -g wrangler"

hack/dockerfiles/ui.Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14-alpine AS base 
+FROM node:14-alpine AS base
 WORKDIR /src
 
 #
@@ -22,4 +22,4 @@ FROM base AS output
 COPY --from=builder /src/.next /src/node_modules ./
 
 EXPOSE 3000
-CMD yarn ui:prod
+CMD yarn ui:prod

hack/jestSetup.ts

@@ -1,5 +1,5 @@
-import Enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Enzyme from 'enzyme';
 import enableHooks from 'jest-react-hooks-shallow';
 
 Enzyme.configure({ adapter: new Adapter() });

package.json

@@ -15,7 +15,7 @@
     "scripts": {
         "lint": "run-p -c lint:* --",
         "lint:eslint": "eslint",
-        "lint:prettier": "cross-env prettier -c '**/*.{ts,tsx,css,yml,yaml,md,json,js,jsx,sh,gitignore,mdx}'",
+        "lint:prettier": "cross-env prettier -c '**/*.{ts,tsx,css,yml,yaml,md,json,js,jsx,sh,gitignore,mdx,Dockerfile}'",
         "lint:stylelint": "cross-env stylelint '**/*.{ts,tsx}'",
         "lint:types": "tsc --noEmit",
         "now-build": "run-s storybook:build",
@@ -86,6 +86,7 @@
         "minimist": "^1.2.5",
         "npm-run-all": "^4.1.5",
         "prettier": "^2.2.1",
+        "prettier-plugin-organize-imports": "^1.1.1",
         "prettier-plugin-packagejson": "^2.2.8",
         "prettier-plugin-sh": "^0.6.0",
         "stylelint": "^13.8.0",

src/backend-worker/handlers/login-callback.ts

@@ -1,11 +1,11 @@
 import KSUID from 'ksuid';
 import {
+    AuthTokenResponse,
     DiscordUser,
     GuildSlug,
     SessionData,
-    AuthTokenResponse,
 } from '../../common/types';
-import { formData, resolveFailures, parsePermissions } from '../utils/api-tools';
+import { formData, parsePermissions, resolveFailures } from '../utils/api-tools';
 import { Bounce } from '../utils/bounce';
 import { apiPublicURI, botClientID, botClientSecret, uiPublicURI } from '../utils/config';
 import { Sessions } from '../utils/kv';

src/common/types/index.ts

@@ -1,5 +1,5 @@
-export * from './Role';
 export * from './Category';
 export * from './Guild';
-export * from './User';
+export * from './Role';
 export * from './Session';
+export * from './User';

src/common/types/storyData.ts

@@ -1,16 +1,16 @@
 import {
     Category,
+    CategoryType,
     DiscordUser,
     Guild,
     GuildData,
     GuildEnumeration,
     GuildRoles,
+    GuildSlug,
     Member,
     Role,
     RoleSafety,
     RoleypolyUser,
-    CategoryType,
-    GuildSlug,
 } from '.';
 
 export const roleCategory: Role[] = [

src/common/utils/hasPermission.spec.ts

@@ -1,6 +1,6 @@
-import { hasPermission, permissions, hasPermissionOrAdmin } from './hasPermission';
 import { Role } from 'roleypoly/common/types';
 import { guildRoles } from 'roleypoly/common/types/storyData';
+import { hasPermission, hasPermissionOrAdmin, permissions } from './hasPermission';
 
 const roles: Role[] = [
     {

src/common/utils/withContext/index.ts

@@ -1,3 +1,3 @@
 export * from './withContext';
-import * as testHelpers from './contextTestHelpers';
 export { testHelpers };
+import * as testHelpers from './contextTestHelpers';

src/design-system/atoms/avatar/Avatar.styled.ts

@@ -1,7 +1,6 @@
-import { AvatarProps } from './Avatar';
-import styled, { css } from 'styled-components';
-
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import styled, { css } from 'styled-components';
+import { AvatarProps } from './Avatar';
 
 type ContainerProps = Pick<AvatarProps, 'size'> & Pick<AvatarProps, 'deliberatelyEmpty'>;
 export const Container = styled.div<ContainerProps>`

src/design-system/atoms/avatar/index.ts

@@ -1,4 +1,4 @@
 export * from './Avatar';
+export { utils };
 
 import * as utils from './avatarUtils';
-export { utils };

src/design-system/atoms/branding/Branding.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Logomark as BrandingLogomark, Logotype as BrandingLogotype } from './Branding';
 import styled from 'styled-components';
+import { Logomark as BrandingLogomark, Logotype as BrandingLogotype } from './Branding';
 
 export default {
     title: 'Atoms/Branding',

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { mediaQueryDefs } from './Breakpoints';
-import { ScreenSize, BreakpointContext } from './Context';
+import { BreakpointContext, ScreenSize } from './Context';
 
 const resetScreen: ScreenSize = {
     onSmallScreen: false,

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BreakpointDebugTool } from './DebugTool';
 import { BreakpointsProvider } from './BreakpointProvider';
+import { BreakpointDebugTool } from './DebugTool';
 
 export default {
     title: 'Atoms/Breakpoints',

src/design-system/atoms/breakpoints/index.ts

@@ -1,3 +1,3 @@
+export * from './BreakpointProvider';
 export * from './Breakpoints';
 export * from './Context';
-export * from './BreakpointProvider';

src/design-system/atoms/button/Button.spec.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
+import * as React from 'react';
 import { Button } from './Button';
 
 it('fires an onClick callback when clicked', () => {

src/design-system/atoms/button/Button.styled.ts

@@ -1,7 +1,7 @@
-import styled, { css } from 'styled-components';
-import { text400, text300 } from 'roleypoly/design-system/atoms/typography';
-import { fontCSS } from 'roleypoly/design-system/atoms/fonts';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import { fontCSS } from 'roleypoly/design-system/atoms/fonts';
+import { text300, text400 } from 'roleypoly/design-system/atoms/typography';
+import styled, { css } from 'styled-components';
 
 export const IconContainer = styled.div`
     margin-right: 0.6rem;

src/design-system/atoms/button/Button.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import {
     Button as StyledButton,
-    IconContainer,
     ButtonComposerOptions,
+    IconContainer,
 } from './Button.styled';
 
 export type ButtonProps = Partial<ButtonComposerOptions> & {

src/design-system/atoms/colors/colors.stories.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { palette } from './colors';
-import styled from 'styled-components';
 import chroma from 'chroma-js';
+import * as React from 'react';
 import { AmbientSmall } from 'roleypoly/design-system/atoms/typography';
+import styled from 'styled-components';
+import { palette } from './colors';
 
 type RatioList = {
     color1: string[];

src/design-system/atoms/colors/colors.tsx

@@ -1,6 +1,5 @@
-import { css, createGlobalStyle } from 'styled-components';
-
 import chroma from 'chroma-js';
+import { createGlobalStyle, css } from 'styled-components';
 
 export const palette = {
     taupe100: '#332D2D',

src/design-system/atoms/dot-overlay/DotOverlay.tsx

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
 import * as React from 'react';
+import styled from 'styled-components';
 
 const dotOverlayBase = styled.div`
     opacity: 0.6;

src/design-system/atoms/fader/Fader.stories.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { FaderOpacity, FaderSlide } from './Fader';
-import { Button } from 'roleypoly/design-system/atoms/button';
 import { action } from '@storybook/addon-actions';
+import * as React from 'react';
+import { Button } from 'roleypoly/design-system/atoms/button';
+import { FaderOpacity, FaderSlide } from './Fader';
 
 export default {
     title: 'Atoms/Fader',

src/design-system/atoms/fonts/fonts.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { UseFontStyled } from './fonts';
-import styled from 'styled-components';
 import { MediumTitle, Text as TextBlock } from 'roleypoly/design-system/atoms/typography';
+import styled from 'styled-components';
+import { UseFontStyled } from './fonts';
 
 const resetFont = (storyFn: () => React.ReactNode) => <FontReset>{storyFn()}</FontReset>;
 

src/design-system/atoms/fonts/fonts.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import Head from 'next/head';
+import * as React from 'react';
 import styled, { css } from 'styled-components';
 
 export const InjectTypekitFont = () => {

src/design-system/atoms/halfsies/Halfsies.tsx

@@ -1,5 +1,5 @@
-import styled, { css } from 'styled-components';
 import { onTablet } from 'roleypoly/design-system/atoms/breakpoints';
+import styled, { css } from 'styled-components';
 
 export const HalfsiesContainer = styled.div`
     display: flex;

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

@@ -1,13 +1,11 @@
-import styled, { css } from 'styled-components';
-import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 import { palette } from 'roleypoly/design-system/atoms/colors';
 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`

src/design-system/atoms/popover/Popover.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
+import { IoMdClose } from 'react-icons/io';
+import { globalOnKeyUp } from 'roleypoly/design-system/atoms/key-events';
 import {
-    PopoverBase,
     DefocusHandler,
+    PopoverBase,
+    PopoverContent,
     PopoverHead,
     PopoverHeadCloser,
-    PopoverContent,
 } from './Popover.styled';
-import { globalOnKeyUp } from 'roleypoly/design-system/atoms/key-events';
-import { IoMdClose } from 'react-icons/io';
 
 type PopoverProps = {
     children: () => React.ReactNode;

src/design-system/atoms/role/Role.spec.tsx

@@ -1,6 +1,6 @@
 import { shallow } from 'enzyme';
-import { roleCategory } from 'roleypoly/common/types/storyData';
 import * as React from 'react';
+import { roleCategory } from 'roleypoly/common/types/storyData';
 import { Role } from './Role';
 
 it('fires an OnClick handler when clicked', () => {

src/design-system/atoms/role/Role.stories.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Role as RoleComponent } from './Role';
 import { roleCategory } from 'roleypoly/common/types/storyData';
 import { withColors } from 'roleypoly/design-system/atoms/colors/withColors';
 import styled from 'styled-components';
+import { Role as RoleComponent } from './Role';
 
 export default {
     title: 'Atoms/Role',

src/design-system/atoms/role/Role.styled.tsx

@@ -1,6 +1,6 @@
-import styled, { css } from 'styled-components';
-import { transitions } from 'roleypoly/design-system/atoms/timings';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import { transitions } from 'roleypoly/design-system/atoms/timings';
+import styled, { css } from 'styled-components';
 
 export type StyledProps = {
     selected: boolean;

src/design-system/atoms/role/Role.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { Role as RPCRole, RoleSafety } from 'roleypoly/common/types';
-import * as styled from './Role.styled';
-import { FaCheck, FaTimes } from 'react-icons/fa';
-import { numberToChroma } from 'roleypoly/design-system/atoms/colors';
 import chroma from 'chroma-js';
+import * as React from 'react';
+import { FaCheck, FaTimes } from 'react-icons/fa';
+import { Role as RPCRole, RoleSafety } from 'roleypoly/common/types';
+import { numberToChroma } from 'roleypoly/design-system/atoms/colors';
+import * as styled from './Role.styled';
 
 type Props = {
     role: RPCRole;

src/design-system/atoms/space/Space.stories.tsx

@@ -1,5 +1,5 @@
-import { Space as SpaceComponent } from './Space';
 import * as React from 'react';
+import { Space as SpaceComponent } from './Space';
 
 export default {
     title: 'Atoms',

src/design-system/atoms/sparkle/Shapes.tsx

@@ -1,5 +1,5 @@
-import { CSSProperties } from 'styled-components';
 import * as React from 'react';
+import { CSSProperties } from 'styled-components';
 
 type SparkleProps = {
     height: string;

src/design-system/atoms/sparkle/Sparkle.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { SparkleOverlay } from './Sparkle';
 import { Button } from 'roleypoly/design-system/atoms/button';
 import { Hero } from 'roleypoly/design-system/atoms/hero';
+import { SparkleOverlay } from './Sparkle';
 
 export default {
     title: 'Atoms/Sparkle',

src/design-system/atoms/sparkle/Sparkle.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import styled from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
-
+import styled from 'styled-components';
 import { SparklePatternAlpha, SparklePatternBeta } from './Shapes';
 
 type Props = {

src/design-system/atoms/tab-view/TabView.spec.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
-import { TabView, Tab, TabViewProps } from './TabView';
+import * as React from 'react';
-import { TabTitle, TabContent } from './TabView.styled';
+import { Tab, TabView, TabViewProps } from './TabView';
+import { TabContent, TabTitle } from './TabView.styled';
 
 const makeView = (props: Partial<TabViewProps> = {}) =>
     shallow(

src/design-system/atoms/tab-view/TabView.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TabView, Tab } from './TabView';
+import { Tab, TabView } from './TabView';
 
 export default {
     title: 'Atoms/Tab View',

src/design-system/atoms/tab-view/TabView.styled.ts

@@ -1,7 +1,7 @@
-import styled, { css } from 'styled-components';
+import { onTablet } from 'roleypoly/design-system/atoms/breakpoints';
 import { palette } from 'roleypoly/design-system/atoms/colors';
 import { transitions } from 'roleypoly/design-system/atoms/timings';
-import { onTablet } from 'roleypoly/design-system/atoms/breakpoints';
+import styled, { css } from 'styled-components';
 
 export const TabViewStyled = styled.div``;
 

src/design-system/atoms/tab-view/TabView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TabTitleRow, TabContent, TabViewStyled, TabTitle } from './TabView.styled';
+import { TabContent, TabTitle, TabTitleRow, TabViewStyled } from './TabView.styled';
 
 export type TabViewProps = {
     children: React.ReactNode[];

src/design-system/atoms/text-input/TextInput.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { TextInput, TextInputWithIcon } from './TextInput';
-import { SmallTitle } from 'roleypoly/design-system/atoms/typography';
 import { FiKey } from 'react-icons/fi';
+import { SmallTitle } from 'roleypoly/design-system/atoms/typography';
+import { TextInput, TextInputWithIcon } from './TextInput';
 
 export default {
     title: 'Atoms/Text Input',

src/design-system/atoms/text-input/TextInput.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import styled from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import styled from 'styled-components';
 
 const StyledTextInput = styled.input`
     appearance: none;

src/design-system/atoms/typography/mdx.tsx

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-
 import { Link, Text, text600, text700, text800, text900 } from './typography';
 
 export const mdxComponents = {

src/design-system/atoms/typography/typography.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import * as typography from './typography';
 import styled from 'styled-components';
+import * as typography from './typography';
 
 export default {
     title: 'Atoms/Typography',

src/design-system/atoms/typography/typography.tsx

@@ -1,6 +1,6 @@
-import styled, { css } from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
 import { transitions } from 'roleypoly/design-system/atoms/timings';
+import styled, { css } from 'styled-components';
 
 const reset = css`
     margin: 0;

src/design-system/molecules/demo-discord/DemoDiscord.styled.ts

@@ -1,6 +1,5 @@
-import styled, { keyframes } from 'styled-components';
-
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import styled, { keyframes } from 'styled-components';
 
 export const Base = styled.div`
     background-color: ${palette.discord100};

src/design-system/molecules/demo-discord/DemoDiscord.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import {
-    Base,
-    Timestamp,
-    TextParts,
-    Username,
-    InputBox,
-    Line,
-    InputTextAlignment,
-} from './DemoDiscord.styled';
 import { demoData } from 'roleypoly/common/types/demoData';
 import { Typist } from 'roleypoly/design-system/atoms/typist';
+import {
+    Base,
+    InputBox,
+    InputTextAlignment,
+    Line,
+    TextParts,
+    Timestamp,
+    Username,
+} from './DemoDiscord.styled';
 
 export const DemoDiscord = () => {
     const time = new Date();

src/design-system/molecules/demo-picker/DemoPicker.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Role } from 'roleypoly/design-system/atoms/role';
 import { Role as RPCRole } from 'roleypoly/common/types';
-import styled from 'styled-components';
 import { demoData } from 'roleypoly/common/types/demoData';
+import { Role } from 'roleypoly/design-system/atoms/role';
+import styled from 'styled-components';
 
 const Container = styled.div`
     display: flex;

src/design-system/molecules/editor-category/EditorCategory.styled.ts

@@ -1,4 +1,3 @@
-import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 import styled from 'styled-components';
 
 export const RoleContainer = styled.div`

src/design-system/molecules/editor-category/EditorCategory.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
+import { GoSearch } from 'react-icons/go';
+import { Category, CategoryType, Role as RoleType } from 'roleypoly/common/types';
+import { FaderOpacity } from 'roleypoly/design-system/atoms/fader';
 import { HorizontalSwitch } from 'roleypoly/design-system/atoms/horizontal-switch';
+import { Popover } from 'roleypoly/design-system/atoms/popover';
+import { Role } from 'roleypoly/design-system/atoms/role';
 import { Space } from 'roleypoly/design-system/atoms/space';
 import { TextInput, TextInputWithIcon } from 'roleypoly/design-system/atoms/text-input';
 import { Text } from 'roleypoly/design-system/atoms/typography';
-import { Popover } from 'roleypoly/design-system/atoms/popover';
-import { FaderOpacity } from 'roleypoly/design-system/atoms/fader';
 import { RoleSearch } from 'roleypoly/design-system/molecules/role-search';
-import { Category, CategoryType, Role as RoleType } from 'roleypoly/common/types';
-import { Role } from 'roleypoly/design-system/atoms/role';
-import { GoSearch } from 'react-icons/go';
 import { RoleContainer } from './EditorCategory.styled';
 
 type Props = {

src/design-system/molecules/error-banner/ErrorBanner.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import {
-    ErrorWrapper,
     ErrorDivider,
     ErrorSideCode,
     ErrorText,
     ErrorTextLower,
+    ErrorWrapper,
 } from './ErrorBanner.styled';
 
 export type ErrorMessage = {

src/design-system/molecules/footer/Footer.styled.ts

@@ -1,7 +1,6 @@
-import styled from 'styled-components';
-
 import { palette } from 'roleypoly/design-system/atoms/colors';
 import { transitions } from 'roleypoly/design-system/atoms/timings';
+import styled from 'styled-components';
 
 export const FooterWrapper = styled.div`
     display: flex;

src/design-system/molecules/footer/Footer.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { FooterWrapper, HoverColor } from './Footer.styled';
-import { AmbientLarge } from 'roleypoly/design-system/atoms/typography';
 import { FaHeart } from 'react-icons/fa';
+import { AmbientLarge } from 'roleypoly/design-system/atoms/typography';
 import { Flags } from './Flags';
+import { FooterWrapper, HoverColor } from './Footer.styled';
 
 const year = new Date().getFullYear();
 

src/design-system/molecules/guild-nav/GuildNav.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { GuildNav } from './GuildNav';
 import { mastheadSlugs } from 'roleypoly/common/types/storyData';
 import { PopoverBase } from 'roleypoly/design-system/atoms/popover/Popover.styled';
+import { GuildNav } from './GuildNav';
 
 export default {
     title: 'Molecules/Guild Nav',

src/design-system/molecules/guild-nav/GuildNav.styled.ts

@@ -1,7 +1,6 @@
-import styled from 'styled-components';
-
-import { transitions } from 'roleypoly/design-system/atoms/timings';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import { transitions } from 'roleypoly/design-system/atoms/timings';
+import styled from 'styled-components';
 
 export const GuildNavItem = styled.a`
     display: flex;

src/design-system/molecules/help-page-base/HelpPageBase.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import styled from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import styled from 'styled-components';
 
 export type HelpPageProps = {
     children: React.ReactNode;

src/design-system/molecules/help-page-base/storyDecorator.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HelpPageBase } from './HelpPageBase';
 import { Content } from 'roleypoly/design-system/organisms/app-shell/AppShell.styled';
+import { HelpPageBase } from './HelpPageBase';
 
 export const HelpStoryWrapper = (storyFn: any): React.ReactNode => (
     <Content>

src/design-system/molecules/nav-slug/NavSlug.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { NavSlug } from './NavSlug';
 import { guild } from 'roleypoly/common/types/storyData';
+import { NavSlug } from './NavSlug';
 
 export default {
     title: 'Molecules/Server Slug',

src/design-system/molecules/picker-category/PickerCategory.stories.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import {
-    roleWikiData,
-    roleCategory,
     mockCategory,
+    roleCategory,
+    roleWikiData,
 } from 'roleypoly/common/types/storyData';
 import { PickerCategory } from './PickerCategory';
 

src/design-system/molecules/picker-category/PickerCategory.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import ReactTooltip from 'react-tooltip';
-import { Role } from 'roleypoly/design-system/atoms/role';
-import { AmbientLarge, LargeText } from 'roleypoly/design-system/atoms/typography';
 import {
     Category as RPCCategory,
     Role as RPCRole,
     RoleSafety,
 } from 'roleypoly/common/types';
+import { Role } from 'roleypoly/design-system/atoms/role';
+import { AmbientLarge, LargeText } from 'roleypoly/design-system/atoms/typography';
 import styled from 'styled-components';
 import { Head, HeadSub, HeadTitle } from './PickerCategory.styled';
 

src/design-system/molecules/preauth-secret-code/PreauthSecretCode.spec.tsx

@@ -1,12 +1,12 @@
 jest.unmock('roleypoly/design-system/atoms/text-input');
 jest.unmock('./PreauthSecretCode');
 
-import { Button } from 'roleypoly/design-system/atoms/button';
-import { TextInputWithIcon } from 'roleypoly/design-system/atoms/text-input';
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { PreauthSecretCode } from './PreauthSecretCode';
+import { Button } from 'roleypoly/design-system/atoms/button';
 import { FaderOpacity } from 'roleypoly/design-system/atoms/fader';
+import { TextInputWithIcon } from 'roleypoly/design-system/atoms/text-input';
+import { PreauthSecretCode } from './PreauthSecretCode';
 
 const value = 'unfathomable fishy sticks';
 const onSubmit = jest.fn();

src/design-system/molecules/preauth-secret-code/PreauthSecretCode.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { TextInputWithIcon } from 'roleypoly/design-system/atoms/text-input';
 import { FiKey } from 'react-icons/fi';
-import { FaderOpacity } from 'roleypoly/design-system/atoms/fader';
 import { Button } from 'roleypoly/design-system/atoms/button';
+import { FaderOpacity } from 'roleypoly/design-system/atoms/fader';
 import { Space } from 'roleypoly/design-system/atoms/space';
+import { TextInputWithIcon } from 'roleypoly/design-system/atoms/text-input';
 
 type PreauthProps = {
     onSubmit: (code: string) => void;

src/design-system/molecules/reset-submit/ResetSubmit.spec.tsx

@@ -1,6 +1,6 @@
-import { Button } from 'roleypoly/design-system/atoms/button';
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { Button } from 'roleypoly/design-system/atoms/button';
 import { ResetSubmit } from './ResetSubmit';
 
 const onReset = jest.fn();

src/design-system/molecules/reset-submit/ResetSubmit.styled.ts

@@ -1,6 +1,5 @@
-import styled from 'styled-components';
-
 import { onSmallScreen } from 'roleypoly/design-system/atoms/breakpoints';
+import styled from 'styled-components';
 
 export const Buttons = styled.div`
     display: flex;

src/design-system/molecules/reset-submit/ResetSubmit.tsx

@@ -1,7 +1,7 @@
-import { onSmallScreen } from 'roleypoly/design-system/atoms/breakpoints';
-import { Button } from 'roleypoly/design-system/atoms/button';
 import * as React from 'react';
 import { MdRestore } from 'react-icons/md';
+import { onSmallScreen } from 'roleypoly/design-system/atoms/breakpoints';
+import { Button } from 'roleypoly/design-system/atoms/button';
 import styled from 'styled-components';
 
 type Props = {

src/design-system/molecules/role-search/RoleSearch.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { RoleSearch } from './RoleSearch';
 import { roleCategory } from 'roleypoly/common/types/storyData';
+import { RoleSearch } from './RoleSearch';
 
 export default {
     title: 'Molecules/Role Search',

src/design-system/molecules/role-search/RoleSearch.tsx

@@ -1,11 +1,11 @@
-import styled from 'styled-components';
 import Fuse from 'fuse.js';
 import * as React from 'react';
 import { GoSearch } from 'react-icons/go';
+import { Role as RoleType } from 'roleypoly/common/types';
 import { Role } from 'roleypoly/design-system/atoms/role';
 import { Space } from 'roleypoly/design-system/atoms/space';
 import { TextInputWithIcon } from 'roleypoly/design-system/atoms/text-input';
-import { Role as RoleType } from 'roleypoly/common/types';
+import styled from 'styled-components';
 
 type Props = {
     roles: RoleType[];

src/design-system/molecules/server-masthead/ServerMasthead.spec.tsx

@@ -1,9 +1,9 @@
 jest.unmock('./ServerMasthead');
 
-import * as React from 'react';
 import { shallow } from 'enzyme';
-import { ServerMasthead } from './ServerMasthead';
+import * as React from 'react';
 import { guild } from 'roleypoly/common/types/storyData';
+import { ServerMasthead } from './ServerMasthead';
 import { Editable } from './ServerMasthead.styled';
 
 it('shows Edit Server when editable is true', () => {

src/design-system/molecules/server-masthead/ServerMasthead.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ServerMasthead } from './ServerMasthead';
 import { guild } from 'roleypoly/common/types/storyData';
+import { ServerMasthead } from './ServerMasthead';
 
 export default {
     title: 'Molecules/Server Masthead',

src/design-system/molecules/server-masthead/ServerMasthead.styled.ts

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
 import { transitions } from 'roleypoly/design-system/atoms/timings';
+import styled from 'styled-components';
 
 export const Wrapper = styled.div`
     display: flex;

src/design-system/molecules/server-masthead/ServerMasthead.tsx

@@ -1,10 +1,10 @@
-import { Guild } from 'roleypoly/common/types';
-import { Avatar, utils } from 'roleypoly/design-system/atoms/avatar';
-import { AccentTitle, AmbientLarge } from 'roleypoly/design-system/atoms/typography';
 import Link from 'next/link';
-import { guild } from 'roleypoly/common/types/storyData';
 import * as React from 'react';
 import { GoPencil } from 'react-icons/go';
+import { Guild } from 'roleypoly/common/types';
+import { guild } from 'roleypoly/common/types/storyData';
+import { Avatar, utils } from 'roleypoly/design-system/atoms/avatar';
+import { AccentTitle, AmbientLarge } from 'roleypoly/design-system/atoms/typography';
 import { Editable, Icon, Name, Wrapper } from './ServerMasthead.styled';
 
 export type ServerMastheadProps = {

src/design-system/molecules/user-avatar-group/UserAvatarGroup.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { UserAvatarGroup } from './UserAvatarGroup';
 import { user } from 'roleypoly/common/types/storyData';
 import { Hero } from 'roleypoly/design-system/atoms/hero';
+import { UserAvatarGroup } from './UserAvatarGroup';
 
 export default {
     title: 'Molecules/User Avatar Group',

src/design-system/molecules/user-avatar-group/UserAvatarGroup.styled.ts

@@ -1,6 +1,6 @@
-import styled, { css } from 'styled-components';
 import { onSmallScreen } from 'roleypoly/design-system/atoms/breakpoints';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import styled, { css } from 'styled-components';
 
 export const Collapse = styled.div<{ preventCollapse: boolean }>`
     ${(props) =>

src/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DiscordUser } from 'roleypoly/common/types';
-import { utils, Avatar } from 'roleypoly/design-system/atoms/avatar';
+import { Avatar, utils } from 'roleypoly/design-system/atoms/avatar';
-import { Group, Collapse, Discriminator, GroupText } from './UserAvatarGroup.styled';
+import { Collapse, Discriminator, Group, GroupText } from './UserAvatarGroup.styled';
 
 type Props = {
     user: DiscordUser;

src/design-system/molecules/user-popover/UserPopover.stories.tsx

@@ -1,7 +1,7 @@
-import { user } from 'roleypoly/common/types/storyData';
 import * as React from 'react';
-import { UserPopover as UserPopoverComponent } from './UserPopover';
+import { user } from 'roleypoly/common/types/storyData';
 import { PopoverBase } from 'roleypoly/design-system/atoms/popover/Popover.styled';
+import { UserPopover as UserPopoverComponent } from './UserPopover';
 
 export default {
     title: 'Molecules/User Popover',

src/design-system/molecules/user-popover/UserPopover.styled.ts

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
 import { transitions } from 'roleypoly/design-system/atoms/timings';
+import styled from 'styled-components';
 
 export const Base = styled.div`
     text-align: right;

src/design-system/molecules/user-popover/UserPopover.tsx

@@ -1,9 +1,9 @@
+import Link from 'next/link';
 import * as React from 'react';
+import { GoGear, GoSignOut } from 'react-icons/go';
 import { DiscordUser } from 'roleypoly/common/types';
 import { UserAvatarGroup } from 'roleypoly/design-system/molecules/user-avatar-group';
 import { Base, NavAction } from './UserPopover.styled';
-import { GoGear, GoSignOut } from 'react-icons/go';
-import Link from 'next/link';
 
 type UserPopoverProps = {
     user: DiscordUser;

src/design-system/organisms/app-shell/AppShell.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import { mastheadSlugs, user } from 'roleypoly/common/types/storyData';
 import { AppShell } from './AppShell';
-import { user, mastheadSlugs } from 'roleypoly/common/types/storyData';
 
 export default {
     title: 'Organisms/App Shell',

src/design-system/organisms/app-shell/AppShell.styled.tsx

@@ -1,6 +1,6 @@
-import styled, { createGlobalStyle } from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
 import { fontCSS } from 'roleypoly/design-system/atoms/fonts';
+import styled, { createGlobalStyle } from 'styled-components';
 
 export const Content = styled.div<{ small?: boolean }>`
     margin: 0 auto;

src/design-system/organisms/editor/EditorShell.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { EditorShell } from './EditorShell';
 import { guildEnum } from 'roleypoly/common/types/storyData';
+import { EditorShell } from './EditorShell';
 
 export default {
     title: 'Organisms/Editor',

src/design-system/organisms/editor/EditorShell.styled.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import styled from 'styled-components';
 
 export const CategoryContainer = styled.div`
     background-color: ${palette.taupe100};

src/design-system/organisms/editor/EditorShell.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { TabView, Tab } from 'roleypoly/design-system/atoms/tab-view';
 import { PresentableGuild } from 'roleypoly/common/types';
+import { Tab, TabView } from 'roleypoly/design-system/atoms/tab-view';
 import { EditorCategory } from '../../molecules/editor-category';
 import { CategoryContainer } from './EditorShell.styled';
 

src/design-system/organisms/help-why-no-roles/WhyNoRoles.stories.tsx

@@ -1,6 +1,6 @@
-import { WhyNoRoles } from './WhyNoRoles';
 import * as React from 'react';
 import { HelpStoryWrapper } from '../../molecules/help-page-base/storyDecorator';
+import { WhyNoRoles } from './WhyNoRoles';
 
 export default {
     title: 'Organisms/Help Pages',

src/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts

@@ -1,6 +1,6 @@
-import styled, { css } from 'styled-components';
-import { palette, numberToChroma } from 'roleypoly/design-system/atoms/colors';
 import { Role } from 'roleypoly/common/types';
+import { numberToChroma, palette } from 'roleypoly/design-system/atoms/colors';
+import styled, { css } from 'styled-components';
 
 export const DiscordBase = styled.div`
     background-color: ${palette.discord100};

src/design-system/organisms/help-why-no-roles/WhyNoRoles.tsx

@@ -1,11 +1,11 @@
 import chroma from 'chroma-js';
 import * as React from 'react';
 import { FaCheck, FaTimes } from 'react-icons/fa';
+import { Role } from 'roleypoly/common/types';
+import { demoData } from 'roleypoly/common/types/demoData';
 import { palette } from 'roleypoly/design-system/atoms/colors';
 import { HalfsiesContainer, HalfsiesItem } from 'roleypoly/design-system/atoms/halfsies';
 import { SparkleOverlay } from 'roleypoly/design-system/atoms/sparkle';
-import { Role } from 'roleypoly/common/types';
-import { demoData } from 'roleypoly/common/types/demoData';
 import { DiscordBase, DiscordRole } from './WhyNoRoles.styled';
 
 const adminRoles: Role[] = [

src/design-system/organisms/landing/Landing.styled.ts

@@ -1,7 +1,6 @@
 import { onTablet } from 'roleypoly/design-system/atoms/breakpoints';
 import { text400 } from 'roleypoly/design-system/atoms/typography';
 import styled, { css } from 'styled-components';
-import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 export const HeroText = styled.div`
     ${onTablet(css`

src/design-system/organisms/landing/Landing.tsx

@@ -1,11 +1,11 @@
+import * as React from 'react';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import { HalfsiesContainer, HalfsiesItem } from 'roleypoly/design-system/atoms/halfsies';
 import { Space } from 'roleypoly/design-system/atoms/space';
 import { LargeText, LargeTitle } from 'roleypoly/design-system/atoms/typography';
 import { DemoDiscord } from 'roleypoly/design-system/molecules/demo-discord';
 import { DemoPicker } from 'roleypoly/design-system/molecules/demo-picker';
-import * as React from 'react';
 import { DemoAlignment, DemoSubtitle, HeroCentering, HeroText } from './Landing.styled';
-import { HalfsiesContainer, HalfsiesItem } from 'roleypoly/design-system/atoms/halfsies';
 
 export const Landing = () => (
     <HeroCentering>

src/design-system/organisms/masthead/Masthead.styled.tsx

@@ -2,7 +2,6 @@ import { onSmallScreen } from 'roleypoly/design-system/atoms/breakpoints';
 import { palette } from 'roleypoly/design-system/atoms/colors';
 import { transitions } from 'roleypoly/design-system/atoms/timings';
 import styled, { css } from 'styled-components';
-import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 export const MastheadBase = styled.div`
     position: fixed;

src/design-system/organisms/masthead/index.ts

@@ -1,2 +1,2 @@
-export * from './Guest';
 export * from './Authed';
+export * from './Guest';

src/design-system/organisms/role-picker/RolePicker.styled.tsx

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import styled from 'styled-components';
 
 export const Container = styled.div``;
 

src/design-system/organisms/role-picker/RolePicker.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
 import { GoInfo } from 'react-icons/go';
-import { FaderOpacity } from 'roleypoly/design-system/atoms/fader';
-import { Space } from 'roleypoly/design-system/atoms/space';
-import { PickerCategory } from 'roleypoly/design-system/molecules/picker-category';
-import { ResetSubmit } from 'roleypoly/design-system/molecules/reset-submit';
-import { ServerMasthead } from 'roleypoly/design-system/molecules/server-masthead';
 import {
     Category,
+    CategoryType,
     Guild,
     GuildData,
     GuildRoles,
     Member,
     Role,
-    CategoryType,
 } from 'roleypoly/common/types';
 import { ReactifyNewlines } from 'roleypoly/common/utils/ReactifyNewlines';
+import { FaderOpacity } from 'roleypoly/design-system/atoms/fader';
+import { Space } from 'roleypoly/design-system/atoms/space';
+import { PickerCategory } from 'roleypoly/design-system/molecules/picker-category';
+import { ResetSubmit } from 'roleypoly/design-system/molecules/reset-submit';
+import { ServerMasthead } from 'roleypoly/design-system/molecules/server-masthead';
 import {
     CategoryContainer,
     Container,

src/design-system/templates/auth-login/AuthLogin.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { AuthLogin } from './AuthLogin';
 import { guild } from 'roleypoly/common/types/storyData';
+import { AuthLogin } from './AuthLogin';
 
 export default {
     title: 'Templates/Auth: Login',

src/design-system/templates/auth-login/AuthLogin.tsx

@@ -1,7 +1,7 @@
+import * as React from 'react';
 import { Hero } from 'roleypoly/design-system/atoms/hero';
 import { AppShell } from 'roleypoly/design-system/organisms/app-shell';
 import { Preauth, PreauthProps } from 'roleypoly/design-system/organisms/preauth';
-import * as React from 'react';
 
 export type AuthLoginProps = PreauthProps;
 

src/design-system/templates/errors/Errors.stories.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { storiesOf } from '@storybook/react';
+import * as React from 'react';
 import { Error } from './Errors';
 import { errorMessages } from './errorStrings';
 

src/design-system/templates/help-page/HelpPage.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HelpPageTemplate } from './HelpPage';
 import { WhyNoRoles } from '../../organisms/help-why-no-roles';
+import { HelpPageTemplate } from './HelpPage';
 
 export default {
     title: 'Templates/Help Page',

src/design-system/templates/help-page/HelpPage.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { AppShell, AppShellProps } from 'roleypoly/design-system/organisms/app-shell';
 import { HelpPageBase } from 'roleypoly/design-system/molecules/help-page-base';
+import { AppShell, AppShellProps } from 'roleypoly/design-system/organisms/app-shell';
 
 export type HelpPageProps = AppShellProps & {
     children: React.ReactNode;

src/design-system/templates/role-picker/RolePicker.stories.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { RolePickerTemplate, RolePickerTemplateProps } from './RolePicker';
 import {
-    guildData,
-    member,
-    guildRoles,
     guild,
-    user,
+    guildData,
     guildEnum,
+    guildRoles,
     mastheadSlugs,
+    member,
+    user,
 } from 'roleypoly/common/types/storyData';
+import { RolePickerTemplate, RolePickerTemplateProps } from './RolePicker';
 
 const props: RolePickerTemplateProps = {
     guildData: {

src/pages/_app.tsx

@@ -1,7 +1,7 @@
 import NextApp, { AppContext, AppProps } from 'next/app';
+import nookies from 'nookies';
 import * as React from 'react';
 import { InjectTypekitFont } from 'roleypoly/design-system/atoms/fonts';
-import nookies from 'nookies';
 import { AuthProvider } from 'roleypoly/providers/auth/AuthContext';
 
 type Props = AppProps & {

src/pages/help/why-no-roles.tsx

@@ -1,7 +1,7 @@
 import { WhyNoRoles } from 'roleypoly/design-system/organisms/help-why-no-roles';
 import {
-    HelpPageTemplate,
     HelpPageProps,
+    HelpPageTemplate,
 } from 'roleypoly/design-system/templates/help-page';
 
 const WhyNoRolesPage = (props: HelpPageProps) => (

src/pages/machinery/new-session.tsx

@@ -1,9 +1,9 @@
 import { NextPageContext } from 'next';
-import * as React from 'react';
 import nookies from 'nookies';
-import { AppShell } from 'roleypoly/design-system/organisms/app-shell';
+import * as React from 'react';
 import { Hero } from 'roleypoly/design-system/atoms/hero';
 import { AccentTitle } from 'roleypoly/design-system/atoms/typography';
+import { AppShell } from 'roleypoly/design-system/organisms/app-shell';
 
 type Props = {
     sessionID: string;