@os-team/profile 1.2.1 → 1.2.3

package/src/lib/components/shared/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/lib/components/shared/icons/AndroidIcon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon, type IconProps } from '@os-design/icons';
+
+const AndroidIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M270.1 741.7c0 23.4 19.1 42.5 42.6 42.5h48.7v120.4c0 30.5 24.5 55.4 54.6 55.4c30.2 0 54.6-24.8 54.6-55.4V784.1h85v120.4c0 30.5 24.5 55.4 54.6 55.4c30.2 0 54.6-24.8 54.6-55.4V784.1h48.7c23.5 0 42.6-19.1 42.6-42.5V346.4h-486v395.3zm357.1-600.1l44.9-65c2.6-3.8 2-8.9-1.5-11.4c-3.5-2.4-8.5-1.2-11.1 2.6l-46.6 67.6c-30.7-12.1-64.9-18.8-100.8-18.8c-35.9 0-70.1 6.7-100.8 18.8l-46.6-67.5c-2.6-3.8-7.6-5.1-11.1-2.6c-3.5 2.4-4.1 7.4-1.5 11.4l44.9 65c-71.4 33.2-121.4 96.1-127.8 169.6h486c-6.6-73.6-56.7-136.5-128-169.7zM409.5 244.1a26.9 26.9 0 1 1 26.9-26.9a26.97 26.97 0 0 1-26.9 26.9zm208.4 0a26.9 26.9 0 1 1 26.9-26.9a26.97 26.97 0 0 1-26.9 26.9zm223.4 100.7c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4c30.2 0 54.6-24.8 54.6-55.4V400.1c.1-30.6-24.3-55.3-54.6-55.3zm-658.6 0c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4c30.2 0 54.6-24.8 54.6-55.4V400.1c0-30.6-24.5-55.3-54.6-55.3z' />
+  </Icon>
+));
+
+AndroidIcon.displayName = 'AndroidIcon';
+
+export default AndroidIcon;

package/src/lib/components/shared/icons/AppleIcon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon, type IconProps } from '@os-design/icons';
+
+const AppleIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M747.4 535.7c-.4-68.2 30.5-119.6 92.9-157.5c-34.9-50-87.7-77.5-157.3-82.8c-65.9-5.2-138 38.4-164.4 38.4c-27.9 0-91.7-36.6-141.9-36.6C273.1 298.8 163 379.8 163 544.6c0 48.7 8.9 99 26.7 150.8c23.8 68.2 109.6 235.3 199.1 232.6c46.8-1.1 79.9-33.2 140.8-33.2c59.1 0 89.7 33.2 141.9 33.2c90.3-1.3 167.9-153.2 190.5-221.6c-121.1-57.1-114.6-167.2-114.6-170.7zm-105.1-305c50.7-60.2 46.1-115 44.6-134.7c-44.8 2.6-96.6 30.5-126.1 64.8c-32.5 36.8-51.6 82.3-47.5 133.6c48.4 3.7 92.6-21.2 129-63.7z' />
+  </Icon>
+));
+
+AppleIcon.displayName = 'AppleIcon';
+
+export default AppleIcon;

package/src/lib/components/shared/icons/BrowserIcon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon, type IconProps } from '@os-design/icons';
+
+const BrowserIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M371.8 512c0 77.5 62.7 140.2 140.2 140.2S652.2 589.5 652.2 512S589.5 371.8 512 371.8S371.8 434.4 371.8 512zM900 362.4l-234.3 12.1c63.6 74.3 64.6 181.5 11.1 263.7l-188 289.2c78 4.2 158.4-12.9 231.2-55.2c180-104 253-322.1 180-509.8zM320.3 591.9L163.8 284.1A415.35 415.35 0 0 0 96 512c0 208 152.3 380.3 351.4 410.8l106.9-209.4c-96.6 18.2-189.9-34.8-234-121.5zm218.5-285.5l344.4 18.1C848 254.7 792.6 194 719.8 151.7C653.9 113.6 581.5 95.5 510.5 96c-122.5.5-242.2 55.2-322.1 154.5l128.2 196.9c32-91.9 124.8-146.7 222.2-141z' />
+  </Icon>
+));
+
+BrowserIcon.displayName = 'BrowserIcon';
+
+export default BrowserIcon;

package/src/lib/components/shared/icons/ProfileIcon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon, type IconProps } from '@os-design/icons';
+
+const ProfileIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon {...props} ref={ref}>
+    <path d='M373 411c-28.5 0-51.7 23.3-51.7 52s23.2 52 51.7 52s51.7-23.3 51.7-52s-23.2-52-51.7-52zm555-251H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zM608 420c0-4.4 1-8 2.3-8h123.4c1.3 0 2.3 3.6 2.3 8v48c0 4.4-1 8-2.3 8H610.3c-1.3 0-2.3-3.6-2.3-8v-48zm-86 253h-43.9c-4.2 0-7.6-3.3-7.9-7.5c-3.8-50.5-46-90.5-97.2-90.5s-93.4 40-97.2 90.5c-.3 4.2-3.7 7.5-7.9 7.5H224a8 8 0 0 1-8-8.4c2.8-53.3 32-99.7 74.6-126.1a111.8 111.8 0 0 1-29.1-75.5c0-61.9 49.9-112 111.4-112s111.4 50.1 111.4 112c0 29.1-11 55.5-29.1 75.5c42.7 26.5 71.8 72.8 74.6 126.1c.4 4.6-3.2 8.4-7.8 8.4zm278.9-53H615.1c-3.9 0-7.1-3.6-7.1-8v-48c0-4.4 3.2-8 7.1-8h185.7c3.9 0 7.1 3.6 7.1 8v48h.1c0 4.4-3.2 8-7.1 8z' />
+  </Icon>
+));
+
+ProfileIcon.displayName = 'ProfileIcon';
+
+export default ProfileIcon;

package/src/lib/components/shared/icons/UnknownDeviceIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, type IconProps } from '@os-design/icons';
+
+const UnknownDeviceIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  (props, ref) => (
+    <Icon {...props} ref={ref}>
+      <path d='M764 280.9c-14-30.6-33.9-58.1-59.3-81.6C653.1 151.4 584.6 125 512 125s-141.1 26.4-192.7 74.2c-25.4 23.6-45.3 51-59.3 81.7c-14.6 32-22 65.9-22 100.9v27c0 6.2 5 11.2 11.2 11.2h54c6.2 0 11.2-5 11.2-11.2v-27c0-99.5 88.6-180.4 197.6-180.4s197.6 80.9 197.6 180.4c0 40.8-14.5 79.2-42 111.2c-27.2 31.7-65.6 54.4-108.1 64c-24.3 5.5-46.2 19.2-61.7 38.8a110.85 110.85 0 0 0-23.9 68.6v31.4c0 6.2 5 11.2 11.2 11.2h54c6.2 0 11.2-5 11.2-11.2v-31.4c0-15.7 10.9-29.5 26-32.9c58.4-13.2 111.4-44.7 149.3-88.7c19.1-22.3 34-47.1 44.3-74c10.7-27.9 16.1-57.2 16.1-87c0-35-7.4-69-22-100.9zM512 787c-30.9 0-56 25.1-56 56s25.1 56 56 56s56-25.1 56-56s-25.1-56-56-56z' />
+    </Icon>
+  )
+);
+
+UnknownDeviceIcon.displayName = 'UnknownDeviceIcon';
+
+export default UnknownDeviceIcon;

package/{dist/esm/index.js → src/lib/index.ts}

@@ -6,10 +6,10 @@ export { default as UserAvatar } from './components/profile/UserAvatar';
 export { default as UserAvatarAddon } from './components/profile/UserAvatarAddon';
 export { default as SessionDrawer } from './components/session/SessionDrawer';
 export { default as getUserFullName } from './utils/getUserFullName';
+
 export * from './components/profile/ProfileContext';
 export * from './components/profile/ProfileDrawer';
 export * from './components/profile/ProfileNavigationItem';
 export * from './components/profile/ProtectedWrapper';
 export * from './components/profile/UserAvatarAddon';
 export * from './utils/getUserFullName';
-//# sourceMappingURL=index.js.map

package/src/lib/utils/getError.ts

@@ -0,0 +1,101 @@
+interface Constraint {
+  code: string;
+  message: string;
+}
+
+interface ErrorObject {
+  code: string;
+  message: string;
+  data?: Record<string, Constraint>;
+}
+
+const DEFAULT_CODE = 'no_code';
+const DEFAULT_MESSAGE = 'Error';
+
+const isObject = (value: unknown): value is object =>
+  typeof value === 'object' && !Array.isArray(value) && value !== null;
+
+const isData = (value: unknown): value is Record<string, Constraint> =>
+  isObject(value) &&
+  Object.values(value).every(
+    (constraint: unknown) =>
+      isObject(constraint) &&
+      'code' in constraint &&
+      typeof constraint.code === 'string' &&
+      'message' in constraint &&
+      typeof constraint.message === 'string'
+  );
+
+const getError = (error: unknown): ErrorObject => {
+  // Trying to find the message of an error
+  if (
+    !isObject(error) ||
+    !('message' in error) ||
+    typeof error.message !== 'string'
+  ) {
+    return {
+      code: DEFAULT_CODE,
+      message: DEFAULT_MESSAGE,
+    };
+  }
+
+  // Trying to find the first GraphQL error
+  if (
+    !('source' in error) ||
+    !isObject(error.source) ||
+    !('errors' in error.source) ||
+    !Array.isArray(error.source.errors) ||
+    error.source.errors.length === 0
+  ) {
+    return {
+      code: DEFAULT_CODE,
+      message: error.message,
+    };
+  }
+
+  const firstError = error.source.errors[0] as unknown;
+
+  // Trying to find the message of the GraphQL error
+  if (
+    !isObject(firstError) ||
+    !('message' in firstError) ||
+    typeof firstError.message !== 'string'
+  ) {
+    return {
+      code: DEFAULT_CODE,
+      message: error.message,
+    };
+  }
+
+  // Trying to find the code of the GraphQL message
+  if (
+    !('extensions' in firstError) ||
+    !isObject(firstError.extensions) ||
+    !('code' in firstError.extensions) ||
+    typeof firstError.extensions.code !== 'string'
+  ) {
+    return {
+      code: DEFAULT_CODE,
+      message: firstError.message,
+    };
+  }
+
+  // Trying to find the data in the GraphQL message
+  if (
+    !('data' in firstError.extensions) ||
+    !isData(firstError.extensions.data)
+  ) {
+    return {
+      code: firstError.extensions.code,
+      message: firstError.message,
+    };
+  }
+
+  return {
+    code: firstError.extensions.code,
+    message: firstError.message,
+    data: firstError.extensions.data,
+  };
+};
+
+export default getError;

package/src/lib/utils/getUserFullName.ts

@@ -0,0 +1,14 @@
+export interface User {
+  email: string;
+  firstName?: string | null;
+  lastName?: string | null;
+}
+
+const getUserFullName = ({ email, firstName, lastName }: User): string => {
+  const parts: string[] = [];
+  if (firstName) parts.push(firstName);
+  if (lastName) parts.push(lastName);
+  return parts.length > 0 ? parts.join(' ') : email;
+};
+
+export default getUserFullName;

package/src/lib/utils/handleFormErrors.ts

@@ -0,0 +1,16 @@
+import { type Form } from '@os-design/form';
+import getError from './getError';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const handleFormErrors = (form: Form<any>, error: unknown): void => {
+  const { message, data } = getError(error);
+  if (data) {
+    Object.entries(data).forEach(([key, constraint]) => {
+      form.errors.set(key, constraint.message);
+    });
+  } else {
+    form.errors.set('_error', message);
+  }
+};
+
+export default handleFormErrors;

package/src/pages/HomePage.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PageHeader, PageContent } from '@os-design/core';
+
+const HomePage: React.FC = () => (
+  <>
+    <PageHeader title='Home' />
+    <PageContent>Home</PageContent>
+  </>
+);
+
+export default HomePage;