@os-team/profile 1.2.0 → 1.2.2

package/src/@types/react-app-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react-scripts" />
+/// <reference types="react-dom/experimental" />
+/// <reference types="react/experimental" />

package/src/App.tsx

@@ -0,0 +1,42 @@
+import React, { Suspense } from 'react';
+import { GlobalStyles } from '@os-design/core';
+import { ThemeProvider } from '@os-design/theming';
+import { BrowserRouter } from 'react-router-dom';
+import { RelayEnvironmentProvider } from 'react-relay';
+import { ErrorBoundary, type FallbackFn } from '@os-design/utils';
+import AppRouter from './AppRouter';
+import createRelayEnvironment from './utils/createRelayEnvironment';
+import MainLoader from './components/MainLoader';
+import Layout from './components/Layout';
+import { ProtectedWrapper } from './lib';
+import 'lazysizes';
+import 'lazysizes/plugins/attrchange/ls.attrchange';
+
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+require('./i18next');
+
+const relayEnvironment = createRelayEnvironment();
+
+const errorFallback: FallbackFn = ({ error }) => <p>{error.message}</p>;
+
+const App: React.FC = () => (
+  <ThemeProvider>
+    <GlobalStyles />
+
+    <RelayEnvironmentProvider environment={relayEnvironment}>
+      <BrowserRouter>
+        <Suspense fallback={<MainLoader />}>
+          <ProtectedWrapper bucketId='os-team-test'>
+            <ErrorBoundary fallback={errorFallback}>
+              <Layout>
+                <AppRouter />
+              </Layout>
+            </ErrorBoundary>
+          </ProtectedWrapper>
+        </Suspense>
+      </BrowserRouter>
+    </RelayEnvironmentProvider>
+  </ThemeProvider>
+);
+
+export default App;

package/src/AppRouter.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import HomePage from './pages/HomePage';
+
+const AppRouter: React.FC = () => (
+  <Routes>
+    <Route path='home' element={<HomePage />} />
+    <Route path='*' element={<Navigate replace to='home' />} />
+  </Routes>
+);
+
+export default AppRouter;

package/src/components/ErrorResult.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { CloseCircle } from '@os-design/icons';
+import { Result } from '@os-design/core';
+import { useTranslation } from 'react-i18next';
+import getError from '../utils/getError';
+
+interface ErrorResultProps {
+  error: Error;
+}
+
+const ErrorResult: React.FC<ErrorResultProps> = ({ error }) => {
+  const { t } = useTranslation(['common']);
+
+  return (
+    <Result
+      title={t('common:errorTitle')}
+      description={getError(error).message}
+      icon={<CloseCircle />}
+    />
+  );
+};
+
+export default ErrorResult;

package/src/components/Layout.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import {
+  Layout as BaseLayout,
+  Navigation,
+  NavigationItem,
+} from '@os-design/core';
+import { useLocation, Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import HomeIcon from './icons/HomeIcon';
+import {
+  UserAvatarAddon,
+  ProfileDrawer,
+  ProfileNavigationItem,
+  ProfileButton,
+  SessionDrawer,
+} from '../lib';
+
+interface LayoutProps {
+  children?: React.ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  const { pathname } = useLocation();
+  const { t } = useTranslation(['profile']);
+  const [profileDrawerVisible, setProfileDrawerVisible] = useState(false);
+  const [sessionDrawerVisible, setSessionDrawerVisible] = useState(false);
+
+  return (
+    <>
+      <BaseLayout hasNavigation hasPageHeader>
+        <Navigation
+          sideBottom={
+            <UserAvatarAddon onClick={() => setProfileDrawerVisible(true)} />
+          }
+        >
+          <NavigationItem
+            icon={<HomeIcon />}
+            currentPage={pathname === '/home'}
+            as={Link}
+            to='/home'
+          >
+            Home
+          </NavigationItem>
+          <ProfileNavigationItem
+            onClick={() => setProfileDrawerVisible(true)}
+          />
+        </Navigation>
+
+        {children}
+      </BaseLayout>
+
+      <ProfileDrawer
+        visible={profileDrawerVisible}
+        onClose={() => setProfileDrawerVisible(false)}
+        actions={
+          <ProfileButton onClick={() => setSessionDrawerVisible(true)}>
+            {t('profile:sessions.title')}
+          </ProfileButton>
+        }
+      />
+
+      <SessionDrawer
+        visible={sessionDrawerVisible}
+        onClose={() => setSessionDrawerVisible(false)}
+      />
+    </>
+  );
+};
+
+export default Layout;

package/src/components/MainLoader.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Loading } from '@os-design/icons';
+import { clr } from '@os-design/theming';
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  height: calc(var(--vh, 1vh) * 100);
+  font-size: 2em;
+  color: ${(p) => clr(p.theme.colorPrimary)};
+`;
+
+const MainLoader: React.FC = () => (
+  <Container>
+    <Loading />
+  </Container>
+);
+
+export default MainLoader;

package/src/components/icons/HomeIcon.tsx

@@ -0,0 +1,12 @@
+import { forwardRef } from 'react';
+import { Icon, type IconProps } from '@os-design/icons';
+
+const HomeIcon = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M946.5 505L534.6 93.4a31.93 31.93 0 0 0-45.2 0L77.5 505c-12 12-18.8 28.3-18.8 45.3c0 35.3 28.7 64 64 64h43.4V908c0 17.7 14.3 32 32 32H448V716h112v224h265.9c17.7 0 32-14.3 32-32V614.3h43.4c17 0 33.3-6.7 45.3-18.8c24.9-25 24.9-65.5-.1-90.5z' />
+  </Icon>
+));
+
+HomeIcon.displayName = 'HomeIcon';
+
+export default HomeIcon;

package/src/i18next.ts

@@ -0,0 +1,34 @@
+import i18next from 'i18next';
+import HttpBackend from 'i18next-http-backend';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+i18next
+  .use(HttpBackend) // Load translation. See /public/locales
+  .use(LanguageDetector) // Detect user language
+  .use(initReactI18next) // Pass the i18n instance to react-i18next
+  .init({
+    fallbackLng: 'en',
+    supportedLngs: ['en', 'ru'],
+    ns: [], // Do not preload any namespaces
+    defaultNS: undefined, // No default namespace
+
+    backend: {
+      loadPath: '/locales/{{lng}}/{{ns}}.json',
+    },
+
+    interpolation: {
+      escapeValue: false, // Not needed for react as it escapes by default
+    },
+
+    detection: {
+      order: ['sessionStorage', 'navigator'],
+      caches: ['sessionStorage'],
+    },
+  });
+
+i18next.on('languageChanged', (lang) => {
+  document.documentElement.lang = lang; // Update html lang
+});
+
+export default i18next;

package/src/index.tsx

@@ -0,0 +1,6 @@
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = document.getElementById('root') as HTMLElement;
+
+ReactDOM.createRoot(root).render(<App />);

package/src/lib/@types/emotion.d.ts

@@ -0,0 +1,7 @@
+import '@emotion/react';
+import { Theme as BaseTheme } from '@os-design/theming';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface Theme extends BaseTheme {}
+}

package/src/lib/@types/i18next.d.ts

@@ -0,0 +1,12 @@
+import 'i18next';
+import common from '../../../public/locales/en/common.json';
+import profile from '../../../public/locales/en/profile.json';
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    resources: {
+      common: typeof common;
+      profile: typeof profile;
+    };
+  }
+}

package/src/lib/@types/relay.d.ts

@@ -0,0 +1,3 @@
+declare module 'babel-plugin-relay/macro' {
+  export { graphql as default } from 'react-relay';
+}

package/src/lib/components/profile/ProfileButton.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button, type ButtonProps } from '@os-design/core';
+
+const ProfileButton: React.FC<ButtonProps> = (props) => (
+  <Button type='ghost' wide='always' {...props} />
+);
+
+export default ProfileButton;

package/src/lib/components/profile/ProfileConfigContext.ts

@@ -0,0 +1,16 @@
+import React, { useContext } from 'react';
+
+export interface ProfileConfigProps {
+  bucketId: string;
+}
+
+const ProfileConfig = React.createContext<ProfileConfigProps>({
+  bucketId: '',
+});
+
+ProfileConfig.displayName = 'ProfileConfig';
+
+export const useProfileConfig = (): ProfileConfigProps =>
+  useContext(ProfileConfig);
+
+export default ProfileConfig;

package/src/lib/components/profile/ProfileContext.ts

@@ -0,0 +1,20 @@
+import React, { useContext } from 'react';
+
+export interface ProfileContextProps {
+  id: string;
+  email: string;
+  firstName?: string;
+  lastName?: string;
+  avatar?: string;
+}
+
+const ProfileContext = React.createContext<ProfileContextProps>({
+  id: '',
+  email: '',
+});
+
+ProfileContext.displayName = 'ProfileContext';
+
+export const useProfile = (): ProfileContextProps => useContext(ProfileContext);
+
+export default ProfileContext;

package/src/lib/components/profile/ProfileDrawer.tsx

@@ -0,0 +1,31 @@
+import React, { lazy, Suspense } from 'react';
+import { Drawer, type DrawerProps } from '@os-design/core';
+import styled from '@emotion/styled';
+import { type ProfileDrawerContentProps } from './ProfileDrawerContent';
+import MainLoader from '../shared/MainLoader';
+
+const LazyProfileDrawerContent = lazy(() => import('./ProfileDrawerContent'));
+
+export type ProfileDrawerProps = ProfileDrawerContentProps & DrawerProps;
+
+const StyledDrawer = styled(Drawer)`
+  display: flex;
+  flex-direction: column;
+  padding: 2em 1em;
+`;
+
+const ProfileDrawer: React.FC<ProfileDrawerProps> = ({
+  actions,
+  children,
+  ...rest
+}) => (
+  <StyledDrawer placement='right' width='15em' {...rest}>
+    <Suspense fallback={<MainLoader />}>
+      <LazyProfileDrawerContent actions={actions}>
+        {children}
+      </LazyProfileDrawerContent>
+    </Suspense>
+  </StyledDrawer>
+);
+
+export default ProfileDrawer;

package/src/lib/components/profile/ProfileDrawerContent.tsx

@@ -0,0 +1,276 @@
+import styled from '@emotion/styled';
+import { ThemeSwitcher, message } from '@os-design/core';
+import { clr } from '@os-design/theming';
+import graphql from 'babel-plugin-relay/macro';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation } from 'react-relay';
+import getError from '../../utils/getError';
+import ProfileButton from './ProfileButton';
+import { useProfile } from './ProfileContext';
+import ProfileUpdateNameModal from './ProfileUpdateNameModal';
+import ProfileUpdatePasswordModal from './ProfileUpdatePasswordModal';
+import UserAvatar from './UserAvatar';
+import { type ProfileDrawerContentSignOutMutation } from './__generated__/ProfileDrawerContentSignOutMutation.graphql';
+import { type ProfileDrawerContentUpdateAvatarMutation } from './__generated__/ProfileDrawerContentUpdateAvatarMutation.graphql';
+
+export interface ProfileDrawerContentProps {
+  /**
+   * Additional actions placed under the avatar.
+   * @default undefined
+   */
+  actions?: React.ReactNode;
+  /**
+   * The children.
+   */
+  children?: React.ReactNode;
+}
+
+const AvatarContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const UserContent = styled.div`
+  margin-top: 1em;
+`;
+
+const FullName = styled.div`
+  font-size: ${(p) => p.theme.sizes.large}em;
+  font-weight: 500;
+  text-align: center;
+  line-height: 1.2;
+`;
+
+const Email = styled.div`
+  color: ${(p) => clr(p.theme.inputColorPlaceholder)};
+  margin-top: 0.2em;
+  text-align: center;
+`;
+
+const ActionsContainer = styled.div`
+  margin-top: 1.5em;
+`;
+
+const Footer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: auto;
+  padding-top: 1.5em;
+`;
+
+const HiddenInput = styled.input`
+  display: none;
+`;
+
+const query = graphql`
+  mutation ProfileDrawerContentUpdateAvatarMutation(
+    $input: UpdateAvatarInput!
+  ) {
+    updateAvatar(input: $input) {
+      id
+      avatar
+    }
+  }
+`;
+
+const DeleteAvatarButton: React.FC = () => {
+  const { t } = useTranslation(['profile']);
+
+  const [commit, loading] =
+    useMutation<ProfileDrawerContentUpdateAvatarMutation>(query);
+
+  const handler = useCallback(() => {
+    commit({
+      variables: {
+        input: { avatar: null },
+      },
+      onError: (e) => message.error(getError(e).message),
+      onCompleted: () => {
+        message.success(t('profile:updated'));
+      },
+    });
+  }, [commit, t]);
+
+  return (
+    <ProfileButton loading={loading} onClick={handler}>
+      {t('profile:deleteAvatar')}
+    </ProfileButton>
+  );
+};
+
+interface UpdateAvatarButtonProps {
+  hasAvatar: boolean;
+}
+
+const UpdateAvatarButton: React.FC<UpdateAvatarButtonProps> = ({
+  hasAvatar,
+}) => {
+  const { t } = useTranslation(['profile']);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [commit, loading] =
+    useMutation<ProfileDrawerContentUpdateAvatarMutation>(query);
+
+  const handler = useCallback(
+    (e) => {
+      const target = e.target as HTMLInputElement | null;
+      if (!target) return;
+
+      const { files } = target;
+      if (!files) return;
+
+      const file = files[0];
+
+      commit({
+        variables: {
+          input: {},
+        },
+        uploadables: { avatar: file },
+        onError: (error) => message.error(getError(error).message),
+        onCompleted: () => {
+          message.success(t('profile:updated'));
+        },
+      });
+    },
+    [commit, t]
+  );
+
+  return (
+    <>
+      <ProfileButton
+        loading={loading}
+        onClick={() => {
+          if (!fileInputRef.current) return;
+          fileInputRef.current.value = '';
+          fileInputRef.current.click();
+        }}
+      >
+        {t(`profile:${hasAvatar ? 'changeAvatar' : 'setAvatar'}`)}
+      </ProfileButton>
+
+      <HiddenInput
+        type='file'
+        accept='image/jpeg,image/png,image/webp'
+        onChange={handler}
+        ref={fileInputRef}
+      />
+    </>
+  );
+};
+
+interface UpdateNameButtonProps {
+  hasName: boolean;
+}
+
+const UpdateNameButton: React.FC<UpdateNameButtonProps> = ({ hasName }) => {
+  const { t } = useTranslation(['profile']);
+  const [modalVisible, setModalVisible] = useState(false);
+
+  return (
+    <>
+      <ProfileButton onClick={() => setModalVisible(true)}>
+        {t(`profile:${hasName ? 'changeName' : 'setName'}`)}
+      </ProfileButton>
+
+      <ProfileUpdateNameModal
+        visible={modalVisible}
+        onClose={() => setModalVisible(false)}
+      />
+    </>
+  );
+};
+
+const ChangePasswordButton: React.FC = () => {
+  const { t } = useTranslation(['profile']);
+  const [modalVisible, setModalVisible] = useState(false);
+
+  return (
+    <>
+      <ProfileButton onClick={() => setModalVisible(true)}>
+        {t('profile:changePassword')}
+      </ProfileButton>
+
+      <ProfileUpdatePasswordModal
+        visible={modalVisible}
+        onClose={() => setModalVisible(false)}
+      />
+    </>
+  );
+};
+
+const SignOutButton: React.FC = () => {
+  const { t } = useTranslation(['profile']);
+
+  const [commit, loading] = useMutation<ProfileDrawerContentSignOutMutation>(
+    graphql`
+      mutation ProfileDrawerContentSignOutMutation {
+        signOut {
+          ok
+        }
+      }
+    `
+  );
+
+  const handler = useCallback(() => {
+    commit({
+      variables: {},
+      onError: (e) => message.error(getError(e).message),
+      onCompleted: () => {
+        window.location.href = '/auth/';
+      },
+    });
+  }, [commit]);
+
+  return (
+    <ProfileButton danger loading={loading} onClick={handler}>
+      {t('profile:signOut')}
+    </ProfileButton>
+  );
+};
+
+const ProfileDrawerContent: React.FC<ProfileDrawerContentProps> = ({
+  actions,
+  children,
+}) => {
+  const { email, firstName, lastName, avatar } = useProfile();
+
+  const fullName = useMemo(
+    () => [firstName, lastName].filter((i) => i).join(' '),
+    [firstName, lastName]
+  );
+
+  return (
+    <>
+      <AvatarContainer>
+        <UserAvatar size='10em' />
+        <UserContent>
+          {fullName && <FullName>{fullName}</FullName>}
+          <Email>{email}</Email>
+        </UserContent>
+      </AvatarContainer>
+
+      <ActionsContainer>
+        {avatar && <DeleteAvatarButton />}
+
+        <UpdateAvatarButton hasAvatar={!!avatar} />
+        <UpdateNameButton hasName={!!fullName} />
+        <ChangePasswordButton />
+
+        {actions}
+
+        <SignOutButton />
+
+        {children}
+      </ActionsContainer>
+
+      <Footer>
+        <ThemeSwitcher />
+      </Footer>
+    </>
+  );
+};
+
+export default ProfileDrawerContent;

package/src/lib/components/profile/ProfileNavigationItem.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useIsMinWidth } from '@os-design/media';
+import { NavigationItem, type NavigationItemProps } from '@os-design/core';
+import { useTranslation } from 'react-i18next';
+import ProfileIcon from '../shared/icons/ProfileIcon';
+
+export interface ProfileNavigationItemProps
+  extends Partial<NavigationItemProps> {
+  onClick?: () => void;
+}
+
+const ProfileNavigationItem: React.FC<ProfileNavigationItemProps> = ({
+  onClick = () => {},
+  ...rest
+}) => {
+  const { t } = useTranslation(['profile']);
+  const isMinMd = useIsMinWidth('md');
+
+  if (isMinMd) return null;
+
+  return (
+    <NavigationItem
+      href='#' // To make focusable
+      icon={<ProfileIcon />}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') onClick();
+      }}
+      {...rest}
+    >
+      {t('profile:menu')}
+    </NavigationItem>
+  );
+};
+
+export default ProfileNavigationItem;