@os-team/profile 1.2.1 → 1.2.3

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { ThemeOverrider } from '@os-design/theming';
+import styled from '@emotion/styled';
+import { resetFocusStyles, transitionStyles } from '@os-design/styles';
+import { type AvatarProps } from '@os-design/core';
+import UserAvatar from './UserAvatar';
+
+export interface UserAvatarAddonProps extends AvatarProps {
+  onClick?: () => void;
+}
+
+const Addon = styled.div`
+  width: 100%;
+  height: ${(p) => p.theme.navigationSideWidth}em;
+  min-height: ${(p) => p.theme.navigationSideWidth}em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const AVATAR_SIZE = 2.5;
+
+const StyledUserAvatar = styled(UserAvatar)`
+  ${resetFocusStyles};
+  cursor: pointer;
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus {
+      opacity: 0.7;
+    }
+    ${transitionStyles('opacity')};
+  }
+`;
+
+const UserAvatarAddon: React.FC<UserAvatarAddonProps> = ({
+  onClick = () => {},
+  ...rest
+}) => (
+  <Addon>
+    <ThemeOverrider
+      overrides={(theme) => ({
+        avatarOnlineColorScoop: theme.navigationColorBg,
+      })}
+    >
+      <StyledUserAvatar
+        online
+        size={`${AVATAR_SIZE}em`}
+        tabIndex={0}
+        role='button'
+        onClick={onClick}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') onClick();
+        }}
+        onMouseDown={(e) => e.preventDefault()}
+        {...rest}
+      />
+    </ThemeOverrider>
+  </Addon>
+);
+
+export default UserAvatarAddon;

package/src/lib/components/profile/__generated__/ProfileDrawerContentSignOutMutation.graphql.ts

@@ -0,0 +1,74 @@
+/**
+ * @generated SignedSource<<efa148d8abdd56447bf12fa5b041af67>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type ProfileDrawerContentSignOutMutation$variables = Record<PropertyKey, never>;
+export type ProfileDrawerContentSignOutMutation$data = {
+  readonly signOut: {
+    readonly ok: boolean;
+  };
+};
+export type ProfileDrawerContentSignOutMutation = {
+  response: ProfileDrawerContentSignOutMutation$data;
+  variables: ProfileDrawerContentSignOutMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "alias": null,
+    "args": null,
+    "concreteType": "StatusPayload",
+    "kind": "LinkedField",
+    "name": "signOut",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "ok",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "ProfileDrawerContentSignOutMutation",
+    "selections": (v0/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "ProfileDrawerContentSignOutMutation",
+    "selections": (v0/*: any*/)
+  },
+  "params": {
+    "cacheID": "f5241cc562af19628cf38a9731067807",
+    "id": null,
+    "metadata": {},
+    "name": "ProfileDrawerContentSignOutMutation",
+    "operationKind": "mutation",
+    "text": "mutation ProfileDrawerContentSignOutMutation {\n  signOut {\n    ok\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "c7ca96e9e713315606b0c22d196b6f7b";
+
+export default node;

package/src/lib/components/profile/__generated__/ProfileDrawerContentUpdateAvatarMutation.graphql.ts

@@ -0,0 +1,100 @@
+/**
+ * @generated SignedSource<<08352a363b20a40c74d7623ce7ecf238>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type UpdateAvatarInput = {
+  avatar?: any | null | undefined;
+};
+export type ProfileDrawerContentUpdateAvatarMutation$variables = {
+  input: UpdateAvatarInput;
+};
+export type ProfileDrawerContentUpdateAvatarMutation$data = {
+  readonly updateAvatar: {
+    readonly avatar: string | null | undefined;
+    readonly id: string;
+  };
+};
+export type ProfileDrawerContentUpdateAvatarMutation = {
+  response: ProfileDrawerContentUpdateAvatarMutation$data;
+  variables: ProfileDrawerContentUpdateAvatarMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "User",
+    "kind": "LinkedField",
+    "name": "updateAvatar",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "id",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "avatar",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "ProfileDrawerContentUpdateAvatarMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "ProfileDrawerContentUpdateAvatarMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "b749732615af9f8027386d69ffb57b63",
+    "id": null,
+    "metadata": {},
+    "name": "ProfileDrawerContentUpdateAvatarMutation",
+    "operationKind": "mutation",
+    "text": "mutation ProfileDrawerContentUpdateAvatarMutation(\n  $input: UpdateAvatarInput!\n) {\n  updateAvatar(input: $input) {\n    id\n    avatar\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "cf72a6314772ed0d1f182b197c858505";
+
+export default node;

package/src/lib/components/profile/__generated__/ProfileUpdateNameModalMutation.graphql.ts

@@ -0,0 +1,124 @@
+/**
+ * @generated SignedSource<<0e663480ed80dc8424202b84f5f750a1>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type UpdateProfileInput = {
+  firstName?: string | null | undefined;
+  lastName?: string | null | undefined;
+};
+export type ProfileUpdateNameModalMutation$variables = {
+  input: UpdateProfileInput;
+};
+export type ProfileUpdateNameModalMutation$data = {
+  readonly updateProfile: {
+    readonly firstName: string | null | undefined;
+    readonly lastName: string | null | undefined;
+  };
+};
+export type ProfileUpdateNameModalMutation = {
+  response: ProfileUpdateNameModalMutation$data;
+  variables: ProfileUpdateNameModalMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "kind": "Variable",
+    "name": "input",
+    "variableName": "input"
+  }
+],
+v2 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "firstName",
+  "storageKey": null
+},
+v3 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "lastName",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "ProfileUpdateNameModalMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": "User",
+        "kind": "LinkedField",
+        "name": "updateProfile",
+        "plural": false,
+        "selections": [
+          (v2/*: any*/),
+          (v3/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "ProfileUpdateNameModalMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": "User",
+        "kind": "LinkedField",
+        "name": "updateProfile",
+        "plural": false,
+        "selections": [
+          (v2/*: any*/),
+          (v3/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "id",
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "f70f0aaabf917dc446c3a71cf7b4f25f",
+    "id": null,
+    "metadata": {},
+    "name": "ProfileUpdateNameModalMutation",
+    "operationKind": "mutation",
+    "text": "mutation ProfileUpdateNameModalMutation(\n  $input: UpdateProfileInput!\n) {\n  updateProfile(input: $input) {\n    firstName\n    lastName\n    id\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "7264a05b6738d5417df9f1dc462486aa";
+
+export default node;

package/src/lib/components/profile/__generated__/ProfileUpdatePasswordModalMutation.graphql.ts

@@ -0,0 +1,93 @@
+/**
+ * @generated SignedSource<<98f5f690dc69060f35dc48468bd2f481>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type UpdatePasswordInput = {
+  currentPassword: string;
+  password: string;
+};
+export type ProfileUpdatePasswordModalMutation$variables = {
+  input: UpdatePasswordInput;
+};
+export type ProfileUpdatePasswordModalMutation$data = {
+  readonly updatePassword: {
+    readonly id: string;
+  };
+};
+export type ProfileUpdatePasswordModalMutation = {
+  response: ProfileUpdatePasswordModalMutation$data;
+  variables: ProfileUpdatePasswordModalMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "User",
+    "kind": "LinkedField",
+    "name": "updatePassword",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "id",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "ProfileUpdatePasswordModalMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "ProfileUpdatePasswordModalMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "64308136a7a18e3fb1ab2d16aa93add7",
+    "id": null,
+    "metadata": {},
+    "name": "ProfileUpdatePasswordModalMutation",
+    "operationKind": "mutation",
+    "text": "mutation ProfileUpdatePasswordModalMutation(\n  $input: UpdatePasswordInput!\n) {\n  updatePassword(input: $input) {\n    id\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "efa37ccbe82fbace709f7e3992643c05";
+
+export default node;

package/src/lib/components/profile/__generated__/ProtectedWrapperQuery.graphql.ts

@@ -0,0 +1,106 @@
+/**
+ * @generated SignedSource<<a105331072d86f186651d3270145cc53>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type ProtectedWrapperQuery$variables = Record<PropertyKey, never>;
+export type ProtectedWrapperQuery$data = {
+  readonly profile: {
+    readonly avatar: string | null | undefined;
+    readonly email: string;
+    readonly firstName: string | null | undefined;
+    readonly id: string;
+    readonly lastName: string | null | undefined;
+  };
+};
+export type ProtectedWrapperQuery = {
+  response: ProtectedWrapperQuery$data;
+  variables: ProtectedWrapperQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "alias": null,
+    "args": null,
+    "concreteType": "User",
+    "kind": "LinkedField",
+    "name": "profile",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "id",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "email",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "firstName",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "lastName",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "avatar",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "ProtectedWrapperQuery",
+    "selections": (v0/*: any*/),
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "ProtectedWrapperQuery",
+    "selections": (v0/*: any*/)
+  },
+  "params": {
+    "cacheID": "c77ada94a5456167ef4c0c17a1fd7cd7",
+    "id": null,
+    "metadata": {},
+    "name": "ProtectedWrapperQuery",
+    "operationKind": "query",
+    "text": "query ProtectedWrapperQuery {\n  profile {\n    id\n    email\n    firstName\n    lastName\n    avatar\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "903b234e48f53b4a44dc0b4974ebc521";
+
+export default node;

package/src/lib/components/session/SessionDrawer.tsx

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+import {
+  Alert,
+  Drawer,
+  type DrawerProps,
+  Layout,
+  PageHeader,
+} from '@os-design/core';
+import { useIsMinWidth } from '@os-design/media';
+import { type Theme, ThemeOverrider } from '@os-design/theming';
+import React, { lazy, Suspense } from 'react';
+import { useTranslation } from 'react-i18next';
+import SessionListSkeleton from './SessionListSkeleton';
+
+const LazySessionDrawerContent = lazy(() => import('./SessionDrawerContent'));
+
+const overrides: Partial<Theme> = { horizontalPadding: [1, 1] };
+
+const StyledPageHeader = styled(PageHeader)`
+  position: relative;
+`;
+
+const StyledAlert = styled(Alert)`
+  border-radius: 0;
+`;
+
+const SessionDrawer: React.FC<DrawerProps> = (props) => {
+  const { t } = useTranslation(['profile']);
+  const isMinSm = useIsMinWidth('sm');
+
+  return (
+    <Drawer placement='right' width={isMinSm ? '24em' : '90%'} {...props}>
+      <ThemeOverrider overrides={overrides}>
+        <Layout>
+          <StyledPageHeader title={t('profile:sessions.title')} />
+
+          <StyledAlert type='info' size='small'>
+            {t('profile:sessions.description')}
+          </StyledAlert>
+
+          <Suspense fallback={<SessionListSkeleton />}>
+            <LazySessionDrawerContent />
+          </Suspense>
+        </Layout>
+      </ThemeOverrider>
+    </Drawer>
+  );
+};
+
+export default SessionDrawer;

package/src/lib/components/session/SessionDrawerContent.tsx

@@ -0,0 +1,34 @@
+import React, { Suspense } from 'react';
+import { useLazyLoadQuery } from 'react-relay';
+import { ErrorBoundary, type FallbackFn } from '@os-design/utils';
+import graphql from 'babel-plugin-relay/macro';
+import ErrorResult from '../shared/ErrorResult';
+import SessionList from './SessionList';
+import SessionListSkeleton from './SessionListSkeleton';
+import { type SessionDrawerContentQuery } from './__generated__/SessionDrawerContentQuery.graphql';
+
+const SessionDrawerContentLoader: React.FC = () => {
+  const props = useLazyLoadQuery<SessionDrawerContentQuery>(
+    graphql`
+      query SessionDrawerContentQuery {
+        ...SessionList_sessions
+      }
+    `,
+    {},
+    { fetchPolicy: 'network-only' }
+  );
+
+  return <SessionList sessionsKey={props} />;
+};
+
+const errorFallback: FallbackFn = ({ error }) => <ErrorResult error={error} />;
+
+const SessionDrawerContent: React.FC = () => (
+  <ErrorBoundary fallback={errorFallback}>
+    <Suspense fallback={<SessionListSkeleton />}>
+      <SessionDrawerContentLoader />
+    </Suspense>
+  </ErrorBoundary>
+);
+
+export default SessionDrawerContent;