chore: add support for react-intl, mui, apolloql

packages/web/src/components/ApolloProvider/index.tsx

@@ -0,0 +1,14 @@
+import { ApolloProvider as BaseApolloProvider } from '@apollo/client';
+import client from 'graphql/client';
+
+type ApolloProviderProps = {
+  children: React.ReactNode;
+};
+
+const ApolloProvider = (props: ApolloProviderProps) => {
+  return (
+    <BaseApolloProvider client={client} {...props} />
+  );
+};
+
+export default ApolloProvider;

packages/web/src/components/App/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+function App() {
+  return (
+    <FormattedMessage id="welcomeText" />
+  );
+}
+
+export default App;

packages/web/src/components/IntlProvider/index.tsx

@@ -0,0 +1,16 @@
+import { IntlProvider as BaseIntlProvider } from 'react-intl';
+import englishMessages from 'locales/en.json';
+
+type IntlProviderProps = {
+  children: React.ReactNode;
+};
+
+const IntlProvider = ({ children }: IntlProviderProps) => {
+  return (
+    <BaseIntlProvider locale={navigator.language} defaultLocale="en" messages={englishMessages}>
+      {children}
+    </BaseIntlProvider>
+  );
+};
+
+export default IntlProvider;

packages/web/src/components/ThemeProvider/index.tsx

@@ -0,0 +1,19 @@
+import { ThemeProvider as BaseThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import theme from 'styles/theme';
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+};
+
+const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => {
+  return (
+    <BaseThemeProvider theme={theme} {...props}>
+      <CssBaseline />
+
+      {children}
+    </BaseThemeProvider>
+  );
+};
+
+export default ThemeProvider;