@c-rex/components 0.1.1 → 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 +3 -0
  3. package/src/navbar/navbar.tsx +5 -1
  4. package/src/result-list.tsx +54 -4
  5. package/src/result-view/blog.tsx +4 -8
  6. package/src/result-view/table.tsx +25 -22
  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.1",
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,4 +1,5 @@
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 { useTranslations } from "next-intl";
@@ -68,6 +69,7 @@ export const BlogCard = ({
68
69
  </p>
69
70
  )}
70
71
  </div>
72
+ {/*
71
73
  <div className="mt-4 flex items-center space-x-3">
72
74
  <div className="flex items-center -space-x-2">
73
75
  {data.authors && (
@@ -79,6 +81,7 @@ export const BlogCard = ({
79
81
  <p className="text-sm text-muted-foreground">{data.date}</p>
80
82
  )}
81
83
  </div>
84
+ */}
82
85
  </div>
83
86
  <Link href={data.slug} className="absolute inset-0" target="_blank">
84
87
  <span className="sr-only">{t("viewArticle")}</span>
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,6 +42,10 @@ 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,
package/src/result-list.tsx CHANGED
@@ -1,8 +1,10 @@
1
1
  import React, { FC } from "react";
2
- import { ConfigInterface, informationUnitsItems } from "@c-rex/interfaces";
2
+ import { ConfigInterface, informationUnitsItems, Labels } from "@c-rex/interfaces";
3
3
  import { Empty } from "./empty";
4
4
  import BlogView from './result-view/blog';
5
5
  import TableView from './result-view/table';
6
+ import { useLocale } from "next-intl";
7
+ import { DEFAULT_UI_LANG, RESULT_TYPES } from "@c-rex/constants";
6
8
 
7
9
  interface ResultListProps {
8
10
  items: informationUnitsItems[];
@@ -10,13 +12,61 @@ interface ResultListProps {
10
12
  }
11
13
 
12
14
  export const ResultList: FC<ResultListProps> = ({ items, configs }) => {
15
+ const locale = useLocale();
13
16
  const ViewComponent = configs.resultViewStyle == "table" ? TableView : BlogView;
14
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
+
15
56
  return (
16
- <>
57
+ <div>
17
58
  {
18
- items.length == 0 ? <Empty /> : <ViewComponent items={items} />
59
+ items.length == 0 ? (
60
+ <Empty />
61
+ ) : (
62
+ <ViewComponent
63
+ items={items}
64
+ getTitle={getTitle}
65
+ getType={getType}
66
+ handleByType={handleByType}
67
+ />
68
+ )
19
69
  }
20
- </>
70
+ </div>
21
71
  );
22
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,4 +1,4 @@
1
- import React, { FC, ReactNode } from "react";
1
+ import React, { FC } from "react";
2
2
  import {
3
3
  Table,
4
4
  TableBody,
@@ -7,45 +7,48 @@ import {
7
7
  TableRow,
8
8
  } from "@c-rex/ui/table";
9
9
  import { informationUnitsItems, Labels } from "@c-rex/interfaces";
10
- import Link from "next/link";
11
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 }) => {
19
+ const TableView: FC<TableViewProps> = ({ items, getType, getTitle, handleByType }) => {
18
20
  const t = useTranslations("results")
19
21
 
20
- const getTitle = (labels: Labels[]): string => {
21
- return labels.map((item) => item.value).join();
22
- };
23
- const getIcons = (languages: string[]): string => {
24
- return languages.map((lang) => lang.split("-")[1]).join(",");
25
- };
26
-
27
22
  return (
28
23
  <div className="rounded-md border">
29
24
  <Table>
30
25
  <TableHeader>
31
26
  <TableRow>
32
27
  <TableCell>{t("title")}</TableCell>
28
+ <TableCell>{t("type")}</TableCell>
33
29
  <TableCell>{t("language")}</TableCell>
34
30
  </TableRow>
35
31
  </TableHeader>
36
32
  <TableBody>
37
- {items.map((item: informationUnitsItems, index: number) => (
38
- <TableRow key={index}>
39
- <Link
40
- key={index}
41
- href={`info/${item.shortId}`}
42
- target="_blank"
43
- >
44
- <TableCell>{getTitle(item.labels)}</TableCell>
45
- </Link>
46
- <TableCell>{getIcons(item.languages)}</TableCell>
47
- </TableRow>
48
- ))}
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
+ })}
49
52
  </TableBody>
50
53
  </Table>
51
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>