12
Parser process id: 12
codeclimate-parser socket not present
waiting 1s...
W, [2022年10月31日T19:30:00.941696 #1] WARN -- : Skipping ./apps/server/migrations/change-case-of-storage-and-gql.ts due to CC::Parser::Client::HTTPError
W, [2022年10月31日T19:30:00.942233 #1] WARN -- : Response status: 422
W, [2022年10月31日T19:30:10.475738 #1] WARN -- : Skipping ./apps/studio/providers/Theme.tsx due to CC::Parser::Client::HTTPError
W, [2022年10月31日T19:30:10.578032 #1] WARN -- : Response status: 422
W, [2022年10月31日T19:30:13.775996 #1] WARN -- : Skipping apps/studio/types.ts due to CC::Parser::Client::HTTPError
W, [2022年10月31日T19:30:13.776403 #1] WARN -- : Response status: 422
W, [2022年10月31日T19:30:16.860534 #1] WARN -- : Skipping ./apps/studio/new-app-flow/NewApp.tsx due to CC::Parser::Client::HTTPError
W, [2022年10月31日T19:30:16.860594 #1] WARN -- : Response status: 422

import React, {
 createContext,
 ReactElement,
 useContext,
 useEffect,
 useMemo,
 useState,
} from "react";
import { useWindowDimensions, View } from "react-native";
import * as styles from "@/studio/styles";
export enum THEME_TYPES {
 LIGHT = "LIGHT",
 DARK = "DARK",
 WAITLIST = "WAITLIST",
}
export enum SCREEN_SIZE {
 SMALL = "SMALL",
 MEDIUM = "MEDIUM",
 LARGE = "LARGE",
}
// This isn't perfect and doesn't cover all cases but is slightly stricter than string
type RGB = `rgb(${number}, ${number}, ${number})`;
type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
type HEX = `#${string}`;
type Color = RGB | RGBA | HEX;
export type StudioTheme = {
 type: THEME_TYPES;
 background: Color;
 backgroundSecondary: Color;
 text: Color;
 secondary: Color;
 highlight: Color;
 // I couldn't find a more semantically meaningful name or think of how it'll be re-used so did this for now
 selectComponentBackground: Color;
 inputBackground: Color;
 inputBorderColor: Color;
 shadowColor: Color;
 shadowOpacity: number;
};
const themes: { [key in THEME_TYPES]: StudioTheme } = {
 [THEME_TYPES.LIGHT]: {
 type: THEME_TYPES.LIGHT,
 background: "#f5f8fa",
 backgroundSecondary: "#eee",
 text: "#000",
 secondary: "#444",
 highlight: "#4970DA",
 selectComponentBackground: "#F5F5F5",
 inputBackground: "#fff",
 inputBorderColor: "#888",
 shadowColor: "#000",
 shadowOpacity: 0.15,
 },
 [THEME_TYPES.DARK]: {
 type: THEME_TYPES.DARK,
 background: "#141013",
 backgroundSecondary: "#17161B",
 text: "#fff",
 secondary: "#ddd",
 highlight: "#4970DA",
 selectComponentBackground: "#F5F5F5",
 inputBackground: "#fff",
 inputBorderColor: "#888",
 shadowColor: "#fff",
 shadowOpacity: 0.15,
 },
 [THEME_TYPES.WAITLIST]: {
 type: THEME_TYPES.WAITLIST,
 background: "#091121",
 backgroundSecondary: "#070D24",
 text: "#fff",
 secondary: "#aaa",
 highlight: "#4970DA",
 selectComponentBackground: "#F5F5F5",
 inputBackground: "#fff",
 inputBorderColor: "#888",
 shadowColor: "#ddd",
 shadowOpacity: 0.1,
 },
};
interface StudioThemeContextType {
 themeEnum: THEME_TYPES;
 setTheme: (_: THEME_TYPES) => void;
 studioTheme: StudioTheme;
 width: number;
 height: number;
 screenSize: SCREEN_SIZE;
}
const StudioThemeContext = createContext<StudioThemeContextType>({
 themeEnum: THEME_TYPES.LIGHT,
 setTheme: (_: THEME_TYPES) => {},
 studioTheme: themes[THEME_TYPES.LIGHT],
 width: 0,
 height: 0,
 screenSize: SCREEN_SIZE.MEDIUM,
});
// TODO determine better bounds for screensize and potentially incorporate mobile
const getScreenSize = (width: number): SCREEN_SIZE => {
 if (width > 1200) {
 return SCREEN_SIZE.LARGE;
 } else if (width > 1000) {
 return SCREEN_SIZE.MEDIUM;
 } else {
 return SCREEN_SIZE.SMALL;
 }
};
export const StyleProvider = ({ children }: { children: ReactElement }) => {
 const { width, height } = useWindowDimensions();
 const [themeEnum, setThemeEnum] = useState<THEME_TYPES>(THEME_TYPES.LIGHT);
 const screenSize = useMemo(() => getScreenSize(width), [width]);
 useEffect(() => {
 document.body.style.color = themes[themeEnum].text;
 document.body.style.backgroundColor = themes[themeEnum].background;
 }, [themeEnum]);
 const theme = themes[themeEnum];
 return (
 <StudioThemeContext.Provider
 value={{
 themeEnum: themeEnum,
 setTheme: setThemeEnum,
 studioTheme: theme,
 width,
 height,
 screenSize,
 }}
 >
 <View
 style={{
 backgroundColor: theme.background,
 height: "100%",
 // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
 accentColor: styles.sutroPurple,
 }}
 testID="studio-body"
 >
 {children}
 </View>
 </StudioThemeContext.Provider>
 );
};
export const useStudioTheme = () => useContext(StudioThemeContext);