@c-rex/components 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/package.json +4 -2
  2. package/src/blog-card.tsx +7 -3
  3. package/src/navbar/navbar.tsx +6 -2
  4. package/src/result-list.tsx +64 -8
  5. package/src/result-view/blog.tsx +4 -8
  6. package/src/result-view/table.tsx +29 -36
  7. package/src/sidebar.tsx +80 -65
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@c-rex/components",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "files": [
5
5
  "src"
6
6
  ],
@@ -60,7 +60,9 @@
60
60
  },
61
61
  "scripts": {
62
62
  "storybook": "storybook dev -p 6006",
63
- "build-storybook": "storybook build"
63
+ "build-storybook": "storybook build",
64
+ "lint": "eslint .",
65
+ "lint:fix": "eslint . --fix"
64
66
  },
65
67
  "devDependencies": {
66
68
  "@c-rex/eslint-config": "*",
package/src/blog-card.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import Link from "next/link";
2
+ import React from "react";
2
3
  import { cn } from "@c-rex/utils";
3
4
  import { BlurImage } from "./blur-image";
4
-
5
- //import Author from "./author";
5
+ import { useTranslations } from "next-intl";
6
6
 
7
7
  interface BlogCardProp {
8
8
  data: {
@@ -24,6 +24,8 @@ export const BlogCard = ({
24
24
  priority,
25
25
  horizontal = false,
26
26
  }: BlogCardProp) => {
27
+ const t = useTranslations("results")
28
+
27
29
  return (
28
30
  <article
29
31
  className={cn(
@@ -67,6 +69,7 @@ export const BlogCard = ({
67
69
  </p>
68
70
  )}
69
71
  </div>
72
+ {/*
70
73
  <div className="mt-4 flex items-center space-x-3">
71
74
  <div className="flex items-center -space-x-2">
72
75
  {data.authors && (
@@ -78,9 +81,10 @@ export const BlogCard = ({
78
81
  <p className="text-sm text-muted-foreground">{data.date}</p>
79
82
  )}
80
83
  </div>
84
+ */}
81
85
  </div>
82
86
  <Link href={data.slug} className="absolute inset-0" target="_blank">
83
- <span className="sr-only">View Article</span>
87
+ <span className="sr-only">{t("viewArticle")}</span>
84
88
  </Link>
85
89
  </article>
86
90
  );
package/src/navbar/navbar.tsx CHANGED
@@ -31,7 +31,7 @@ interface NavBarProps {
31
31
 
32
32
  export const NavBar: FC<NavBarProps> = async () => {
33
33
  const t = await getTranslations();
34
- const session = await getServerSession()
34
+ let session;
35
35
 
36
36
  const jsonConfigs = await getCookie(SDK_CONFIG_KEY);
37
37
  if (!jsonConfigs) {
@@ -42,13 +42,16 @@ export const NavBar: FC<NavBarProps> = async () => {
42
42
  const service = new LanguageService(configs.languageSwitcher.endpoint);
43
43
  const contentLanguages = await service.getLanguagesAndCountries();
44
44
 
45
+ if (configs.OIDC.user.enabled) {
46
+ session = await getServerSession();
47
+ }
48
+
45
49
  const UILanguages = UI_LANG_OPTIONS.map((lang) => ({
46
50
  value: lang,
47
51
  lang: lang,
48
52
  country: getCountryCodeByLang(lang)
49
53
  }));
50
54
 
51
-
52
55
  return (
53
56
  <header className="sticky top-0 z-40 flex w-full bg-background/60 backdrop-blur-xl transition-all bg-transparent border-b justify-center py-4">
54
57
  <div className="container flex justify-between">
@@ -61,6 +64,7 @@ export const NavBar: FC<NavBarProps> = async () => {
61
64
  height={50}
62
65
  />
63
66
  </Link>
67
+ {configs.projectName}
64
68
  </div>
65
69
 
66
70
  <div className="flex items-center space-x-3">
package/src/result-list.tsx CHANGED
@@ -1,16 +1,72 @@
1
- import { FC } from "react";
2
- import { informationUnitsItems } from "@c-rex/interfaces";
1
+ import React, { FC } from "react";
2
+ import { ConfigInterface, informationUnitsItems, Labels } from "@c-rex/interfaces";
3
3
  import { Empty } from "./empty";
4
- //import { CUSTOMER_CONFIG } from '@/config/customerConfig';
5
- //import { RESULT_VIEW_OPTIONS } from '@/constants/components';
6
4
  import BlogView from './result-view/blog';
7
-
8
- const ViewComponent = BlogView;
5
+ import TableView from './result-view/table';
6
+ import { useLocale } from "next-intl";
7
+ import { DEFAULT_UI_LANG, RESULT_TYPES } from "@c-rex/constants";
9
8
 
10
9
  interface ResultListProps {
11
10
  items: informationUnitsItems[];
11
+ configs: ConfigInterface
12
12
  }
13
13
 
14
- export const ResultList: FC<ResultListProps> = ({ items }) => {
15
- return <>{items.length == 0 ? <Empty /> : <ViewComponent items={items} />}</>;
14
+ export const ResultList: FC<ResultListProps> = ({ items, configs }) => {
15
+ const locale = useLocale();
16
+ const ViewComponent = configs.resultViewStyle == "table" ? TableView : BlogView;
17
+
18
+ const getTitle = (labels: Labels[]): string => {
19
+ if (labels === undefined) {
20
+ return "";
21
+ }
22
+ return labels.map((item) => item.value).join();
23
+ };
24
+
25
+ const getType = (labels: Labels[]): { localeLabel: string, comparableLabel: string } => {
26
+ const localeLabel = labels.find((item) => item.language === locale);
27
+ const comparableLabel = labels.find((item) => item.language === DEFAULT_UI_LANG);
28
+
29
+ if (!localeLabel || !comparableLabel) {
30
+ return {
31
+ localeLabel: "",
32
+ comparableLabel: ""
33
+ }
34
+ }
35
+
36
+ return {
37
+ localeLabel: localeLabel.value,
38
+ comparableLabel: comparableLabel.value
39
+ }
40
+ }
41
+
42
+ const handleByType = (type: string, shortId: string) => {
43
+ switch (type) {
44
+ case RESULT_TYPES.TOPIC:
45
+ window.location.href = `/topics/${shortId}`;
46
+ break;
47
+ case RESULT_TYPES.DOCUMENT:
48
+ //should check if its a pdf or not
49
+ // if pdf then open in new tab
50
+ // else download the file
51
+ window.open(`/documents/${shortId}`, '_blank');
52
+ break;
53
+ }
54
+ }
55
+
56
+ return (
57
+ <div>
58
+ {
59
+ items.length == 0 ? (
60
+ <Empty />
61
+ ) : (
62
+ <ViewComponent
63
+ items={items}
64
+ getTitle={getTitle}
65
+ getType={getType}
66
+ handleByType={handleByType}
67
+ />
68
+ )
69
+ }
70
+ </div>
71
+ );
16
72
  };
package/src/result-view/blog.tsx CHANGED
@@ -4,15 +4,11 @@ import { informationUnitsItems, Labels } from "@c-rex/interfaces";
4
4
 
5
5
  interface BlogViewProps {
6
6
  items: informationUnitsItems[];
7
+ getType: (labels: Labels[]) => { localeLabel: string, comparableLabel: string };
8
+ getTitle: (labels: Labels[]) => string;
7
9
  }
8
10
 
9
- const BlogView: FC<BlogViewProps> = ({ items }) => {
10
- const getTitle = (labels: Labels[]): string => {
11
- if (labels === undefined) {
12
- return "";
13
- }
14
- return labels.map((item) => item.value).join();
15
- };
11
+ const BlogView: FC<BlogViewProps> = ({ items, getTitle, getType }) => {
16
12
 
17
13
  return (
18
14
  <div className="grid gap-8 md:grid-cols-2 md:gap-x-6 md:gap-y-10 xl:grid-cols-3">
@@ -24,7 +20,7 @@ const BlogView: FC<BlogViewProps> = ({ items }) => {
24
20
  title: getTitle(item.labels),
25
21
  blurDataURL: "/img/blog-post-1.webp",
26
22
  image: "/img/blog-post-1.webp",
27
- description: "item.shortDescription",
23
+ description: getType(item.class.labels).localeLabel,
28
24
  authors: "item.authors",
29
25
  _id: "item._id",
30
26
  date: "item.date",
package/src/result-view/table.tsx CHANGED
@@ -1,5 +1,4 @@
1
- import { FC, ReactNode } from "react";
2
-
1
+ import React, { FC } from "react";
3
2
  import {
4
3
  Table,
5
4
  TableBody,
@@ -8,54 +7,48 @@ import {
8
7
  TableRow,
9
8
  } from "@c-rex/ui/table";
10
9
  import { informationUnitsItems, Labels } from "@c-rex/interfaces";
11
- //import { getFlagIcon } from '@c-rex/utils/index';
10
+ import { useTranslations } from "next-intl";
12
11
 
13
12
  interface TableViewProps {
14
13
  items: informationUnitsItems[];
14
+ getType: (labels: Labels[]) => { localeLabel: string, comparableLabel: string };
15
+ getTitle: (labels: Labels[]) => string;
16
+ handleByType: any;
15
17
  }
16
18
 
17
- const TableView: FC<TableViewProps> = ({ items }) => {
18
- const getTitle = (labels: Labels[]): string => {
19
- return labels.map((item) => item.value).join();
20
- };
21
- const getIcons = (languages: string[]): ReactNode[] => {
22
- return languages.map((lang, index) => {
23
- const aux = lang.split("-")[1];
24
-
25
- /*
26
- const FlagIcon = getFlagIcon(aux);
27
-
28
- return FlagIcon && (
29
- <div key={index} style={{ width: 36 }} className="border me-3">
30
- <FlagIcon />
31
- </div>
32
- )
33
- */
34
-
35
- return (
36
- <div key={index} style={{ width: 36 }} className="border me-3">
37
- {aux}
38
- </div>
39
- );
40
- });
41
- };
19
+ const TableView: FC<TableViewProps> = ({ items, getType, getTitle, handleByType }) => {
20
+ const t = useTranslations("results")
42
21
 
43
22
  return (
44
23
  <div className="rounded-md border">
45
24
  <Table>
46
25
  <TableHeader>
47
26
  <TableRow>
48
- <TableCell>Title</TableCell>
49
- <TableCell>Country</TableCell>
27
+ <TableCell>{t("title")}</TableCell>
28
+ <TableCell>{t("type")}</TableCell>
29
+ <TableCell>{t("language")}</TableCell>
50
30
  </TableRow>
51
31
  </TableHeader>
52
32
  <TableBody>
53
- {items.map((item: informationUnitsItems, index: number) => (
54
- <TableRow key={index}>
55
- <TableCell>{getTitle(item.labels)}</TableCell>
56
- <TableCell>{getIcons(item.languages)}</TableCell>
57
- </TableRow>
58
- ))}
33
+ {items.map((item: informationUnitsItems, index: number) => {
34
+ const type = getType(item.class.labels);
35
+ let lang = "";
36
+
37
+ if (item.languages.length > 0) {
38
+ lang = item.languages[0] as string;
39
+ lang = lang.split("-")[0] as string;
40
+ }
41
+
42
+ return (
43
+ <TableRow key={index}>
44
+ <TableCell className="cursor-pointer" onClick={() => handleByType(type.comparableLabel.toUpperCase(), item.shortId)}>
45
+ {getTitle(item.labels)}
46
+ </TableCell>
47
+ <TableCell>{type.localeLabel}</TableCell>
48
+ <TableCell>{lang.toUpperCase()}</TableCell>
49
+ </TableRow>
50
+ )
51
+ })}
59
52
  </TableBody>
60
53
  </Table>
61
54
  </div>
package/src/sidebar.tsx CHANGED
@@ -15,14 +15,14 @@ import {
15
15
  SidebarRail
16
16
  } from "@c-rex/ui/sidebar";
17
17
  import { Skeleton } from "@c-rex/ui/skeleton";
18
- import { TreeOfContent } from "@c-rex/interfaces";
18
+ import { SidebarAvailableVersionsInterface, TreeOfContent } from "@c-rex/interfaces";
19
19
  import * as Flags from 'country-flag-icons/react/3x2';
20
20
  import { useTranslations } from "next-intl";
21
21
 
22
22
  interface SidebarProps extends ComponentProps<typeof Sidebar> {
23
23
  data: TreeOfContent[];
24
24
  loading?: boolean;
25
- availableVersions: any
25
+ availableVersions: SidebarAvailableVersionsInterface[]
26
26
  }
27
27
 
28
28
  export function AppSidebar({ data, availableVersions, loading, ...props }: SidebarProps) {
@@ -36,73 +36,88 @@ export function AppSidebar({ data, availableVersions, loading, ...props }: Sideb
36
36
  return <FlagComponent />;
37
37
  };
38
38
 
39
- return (
40
- <Sidebar collapsible="icon" {...props}>
41
- <SidebarContent>
42
- <SidebarGroup className="my-4">
43
- <SidebarGroupLabel>{t("tableOfContent")}:</SidebarGroupLabel>
44
- <SidebarMenu>
45
- {loading ? (
46
- <>
47
- <Skeleton className="w-auto h-10 mb-2" />
48
- <Skeleton className="w-auto h-10 mb-2" />
49
- <Skeleton className="w-auto h-10 mb-2 ml-8" />
50
- <Skeleton className="w-auto h-10 mb-2 ml-8" />
51
- <Skeleton className="w-auto h-10 mb-2 ml-8" />
52
- <Skeleton className="w-auto h-10 mb-2 ml-8" />
53
- <Skeleton className="w-auto h-10 mb-2" />
54
- </>
55
- ) : (
56
- <>
57
- {data.map((item) => (
58
- <SidebarMenuItem key={item.id}>
59
- <SidebarMenuButton asChild isActive={item.active}>
60
- <a href={item.link} title={item.label}>
61
- {item.label}
62
- </a>
63
- </SidebarMenuButton>
39
+ const tableOfContentGroup = (): JSX.Element | null => {
40
+ if (loading) {
41
+ return (
42
+ <>
43
+ <Skeleton className="w-auto h-10 mb-2" />
44
+ <Skeleton className="w-auto h-10 mb-2" />
45
+ <Skeleton className="w-auto h-10 mb-2 ml-8" />
46
+ <Skeleton className="w-auto h-10 mb-2 ml-8" />
47
+ <Skeleton className="w-auto h-10 mb-2 ml-8" />
48
+ <Skeleton className="w-auto h-10 mb-2 ml-8" />
49
+ <Skeleton className="w-auto h-10 mb-2" />
50
+ </>
51
+ )
52
+ }
53
+
54
+ if (data.length == 0) return null;
55
+
56
+ return (
57
+ <SidebarGroup className="my-4">
58
+ <SidebarGroupLabel>{t("tableOfContent")}:</SidebarGroupLabel>
59
+ <SidebarMenu>
60
+ {data.map((item) => (
61
+ <SidebarMenuItem key={item.id}>
62
+ <SidebarMenuButton asChild isActive={item.active}>
63
+ <a href={item.link} title={item.label}>
64
+ {item.label}
65
+ </a>
66
+ </SidebarMenuButton>
64
67
 
65
- {item.children?.length ? (
66
- <SidebarMenuSub>
67
- {item.children.map((item) => (
68
- <SidebarMenuSubItem key={item.label}>
69
- <SidebarMenuSubButton
70
- asChild
71
- isActive={item.active}
72
- >
73
- <a href={item.link} title={item.label}>
74
- {item.label}
75
- </a>
76
- </SidebarMenuSubButton>
77
- </SidebarMenuSubItem>
78
- ))}
79
- </SidebarMenuSub>
80
- ) : null}
81
- </SidebarMenuItem>
82
- ))}
83
- </>
84
- )}
85
- </SidebarMenu>
86
- </SidebarGroup>
68
+ {item.children?.length ? (
69
+ <SidebarMenuSub>
70
+ {item.children.map((item) => (
71
+ <SidebarMenuSubItem key={item.label}>
72
+ <SidebarMenuSubButton
73
+ asChild
74
+ isActive={item.active}
75
+ >
76
+ <a href={item.link} title={item.label}>
77
+ {item.label}
78
+ </a>
79
+ </SidebarMenuSubButton>
80
+ </SidebarMenuSubItem>
81
+ ))}
82
+ </SidebarMenuSub>
83
+ ) : null}
84
+ </SidebarMenuItem>
85
+ ))}
86
+ </SidebarMenu>
87
+ </SidebarGroup>
88
+ );
89
+ }
87
90
 
88
- <SidebarGroup>
89
- <SidebarGroupLabel>{t("availableIn")}:</SidebarGroupLabel>
90
- <SidebarMenu>
91
+ const availableVersionsGroup = (): JSX.Element | null => {
91
92
 
92
- {availableVersions.map((item: any) => {
93
- return (
93
+ if (availableVersions.length == 0) return null;
94
94
 
95
- <SidebarMenuItem key={item.shortId}>
96
- <SidebarMenuButton asChild isActive={item.active}>
97
- <a href={`../info/${item.shortId}`} title={item.lang}>
98
- {getFlagIcon(item.country)} {item.lang}
99
- </a>
100
- </SidebarMenuButton>
101
- </SidebarMenuItem>
102
- )
103
- })}
104
- </SidebarMenu>
105
- </SidebarGroup>
95
+ return (
96
+ <SidebarGroup>
97
+ <SidebarGroupLabel>{t("availableIn")}:</SidebarGroupLabel>
98
+ <SidebarMenu>
99
+ {availableVersions.map((item: any) => {
100
+ return (
101
+ <SidebarMenuItem key={item.shortId}>
102
+ <SidebarMenuButton asChild isActive={item.active}>
103
+ <a href={item.link} title={item.lang}>
104
+ {getFlagIcon(item.country)} {item.lang}
105
+ </a>
106
+ </SidebarMenuButton>
107
+ </SidebarMenuItem>
108
+ )
109
+ })}
110
+ </SidebarMenu>
111
+ </SidebarGroup>
112
+ )
113
+
114
+ }
115
+
116
+ return (
117
+ <Sidebar collapsible="icon" {...props}>
118
+ <SidebarContent>
119
+ {tableOfContentGroup()}
120
+ {availableVersionsGroup()}
106
121
  </SidebarContent>
107
122
  <SidebarRail />
108
123
  </Sidebar>