@os-team/profile 1.2.1 → 1.2.3

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@os-team/profile",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/profile.git",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "sideEffects": false,
+  "packageManager": "yarn@4.5.1",
   "scripts": {
     "clean": "rimraf dist",
-    "build:esm": "cross-env BABEL_ENV=esm babel src/lib --extensions .ts,.tsx --out-dir dist/esm --source-maps",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src/lib --extensions .ts,.tsx --out-dir dist/cjs --source-maps",
-    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "build:esm": "cross-env BABEL_ENV=esm babel src/lib --extensions .ts,.tsx --out-dir dist",
+    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --declarationDir dist",
     "build": "yarn clean && npm-run-all 'build:*'",
     "release": "yarn build && release-it --only-version",
     "gen-schema": "get-graphql-schema http://localhost:4000/graphql > ./src/schema.graphql",
@@ -35,70 +35,63 @@
     "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "@os-design/core": "^1.0.241",
-    "@os-design/form": "^1.0.74",
-    "@os-design/icons": "^1.0.58",
-    "@os-design/media": "^1.0.25",
-    "@os-design/styles": "^1.0.55",
-    "@os-design/theming": "^1.0.51",
-    "@os-design/utils": "^1.0.73",
-    "@os-team/plural-forms": "^1.0.12"
+    "@os-design/core": "^1.0.262",
+    "@os-design/form": "^1.0.97",
+    "@os-design/icons": "^1.0.65",
+    "@os-design/media": "^1.0.30",
+    "@os-design/styles": "^1.0.62",
+    "@os-design/theming": "^1.0.58",
+    "@os-design/utils": "^1.0.82",
+    "@os-team/plural-forms": "^1.0.14"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.6",
-    "@babel/core": "^7.24.6",
+    "@babel/cli": "^7.25.9",
+    "@babel/core": "^7.26.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-env": "^7.24.6",
-    "@babel/preset-react": "^7.24.6",
-    "@babel/preset-typescript": "^7.24.6",
-    "@emotion/react": "^11.11.4",
-    "@emotion/serialize": "^1.1.4",
-    "@emotion/styled": "^11.11.5",
-    "@os-team/prettier-config": "1.1.11",
-    "@os-team/relay-network-creator": "^1.2.19",
-    "@os-team/relay-network-mw-upload": "^1.2.19",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^20.12.12",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@emotion/react": "^11.13.5",
+    "@emotion/serialize": "^1.3.3",
+    "@emotion/styled": "^11.13.5",
+    "@os-team/prettier-config": "1.2.7",
+    "@os-team/relay-network-creator": "^1.3.1",
+    "@os-team/relay-network-mw-upload": "^1.2.24",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.9.3",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/react-relay": "^16.0.6",
-    "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^7.10.0",
-    "@typescript-eslint/parser": "^7.10.0",
-    "babel-plugin-relay": "^16.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "babel-plugin-relay": "^18.2.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
-    "eslint-config-os-team-react": "1.1.49",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.5.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint": "^9.15.0",
+    "eslint-config-os-team-react": "1.2.22",
     "get-graphql-schema": "^2.1.2",
-    "graphql": "^16.8.1",
-    "husky": "^9.0.11",
-    "i18next": "^23.11.5",
+    "graphql": "^16.9.0",
+    "husky": "^9.1.7",
+    "i18next": "^24.0.0",
     "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-http-backend": "^2.5.2",
+    "i18next-http-backend": "^3.0.1",
     "lazysizes": "^5.3.2",
-    "lint-staged": "^15.2.5",
+    "lint-staged": "^15.2.10",
     "npm-run-all": "^4.1.5",
-    "prettier": "3.2.5",
+    "prettier": "3.3.3",
     "progress-bar-webpack-plugin": "^2.1.0",
     "react": "^18.3.1",
     "react-app-rewired": "^2.2.1",
     "react-dom": "^18.3.1",
-    "react-i18next": "^14.1.2",
-    "react-relay": "^16.2.0",
-    "react-router-dom": "^6.23.1",
+    "react-i18next": "^15.1.1",
+    "react-relay": "^18.2.0",
+    "react-router": "^7.0.1",
     "react-scripts": "^5.0.1",
     "react-test-renderer": "^18.3.1",
-    "relay-compiler": "^16.2.0",
-    "relay-runtime": "^16.2.0",
-    "release-it": "^17.3.0",
-    "rimraf": "^5.0.7",
-    "typescript": "^5.4.5",
+    "relay-compiler": "^18.2.0",
+    "relay-runtime": "^18.2.0",
+    "release-it": "^17.10.0",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.7.2",
     "webpack-bundle-analyzer": "^4.10.2"
   },
   "peerDependencies": {
@@ -117,7 +110,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": ">=11",
     "react-relay": "^14.1.0",
-    "react-router-dom": ">=5",
+    "react-router": ">=5",
     "react-scripts": ">=5",
     "relay-compiler": ">=12",
     "relay-runtime": ">=12"

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';
+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';
+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';
+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;