@c-rex/components 0.1.4 → 0.1.5

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 +1 -1
  2. package/src/autocomplete.tsx +40 -28
  3. package/src/blog-card.tsx +1 -1
  4. package/src/check-article-lang.tsx +21 -12
  5. package/src/navbar/language-switcher/content-language-switch.tsx +9 -2
  6. package/src/navbar/navbar.tsx +1 -1
  7. package/src/render-article.tsx +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@c-rex/components",
3
- "version": "0.1.4",
3
+ "version": "0.1.5",
4
4
  "files": [
5
5
  "src"
6
6
  ],
package/src/autocomplete.tsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import React from "react";
2
2
  import { Command as CommandPrimitive } from "cmdk";
3
- import { Check } from "lucide-react";
4
3
  import { useEffect, useState } from "react";
5
4
  import { Input } from "@c-rex/ui/input";
6
5
  import {
@@ -30,6 +29,7 @@ export const AutoComplete = ({
30
29
  const [query, setQuery] = useState(initialValue);
31
30
  const [suggestions, setSuggestions] = useState<string[]>([]);
32
31
  const [open, setOpen] = useState(false);
32
+ const [loading, setLoading] = useState(false);
33
33
 
34
34
  useEffect(() => {
35
35
  setQuery(initialValue);
@@ -38,7 +38,11 @@ export const AutoComplete = ({
38
38
  useEffect(() => {
39
39
  const debounceFetch = setTimeout(() => {
40
40
  if (query) {
41
- onSearch(query).then(setSuggestions);
41
+ setLoading(true)
42
+ onSearch(query).then(suggestions => {
43
+ setSuggestions(suggestions)
44
+ setLoading(false)
45
+ });
42
46
  } else {
43
47
  setSuggestions([]);
44
48
  }
@@ -50,7 +54,7 @@ export const AutoComplete = ({
50
54
  return (
51
55
  <div className="flex items-center">
52
56
  <Popover open={open} onOpenChange={setOpen}>
53
- <Command shouldFilter={false}>
57
+ <Command shouldFilter={!loading} >
54
58
  <PopoverAnchor asChild>
55
59
  <CommandPrimitive.Input
56
60
  asChild
@@ -64,8 +68,6 @@ export const AutoComplete = ({
64
68
  </CommandPrimitive.Input>
65
69
  </PopoverAnchor>
66
70
 
67
- {!open && <CommandList aria-hidden="true" className="hidden" />}
68
-
69
71
  <PopoverContent
70
72
  asChild
71
73
  onOpenAutoFocus={(e) => e.preventDefault()}
@@ -79,29 +81,39 @@ export const AutoComplete = ({
79
81
  }}
80
82
  className="w-[--radix-popover-trigger-width] p-0"
81
83
  >
82
- {query.length > 0 && (
83
- <CommandList>
84
- {suggestions.length > 0 ? (
85
- <CommandGroup>
86
- {suggestions.map((option) => (
87
- <CommandItem
88
- key={option}
89
- value={option}
90
- onMouseDown={(e) => e.preventDefault()}
91
- onSelect={(inputValue) => {
92
- setOpen(false);
93
- onSelect(inputValue);
94
- }}
95
- >
96
- {option}
97
- </CommandItem>
98
- ))}
99
- </CommandGroup>
100
- ) : (
101
- <CommandEmpty>No suggestions.</CommandEmpty>
102
- )}
103
- </CommandList>
104
- )}
84
+ <CommandList
85
+ key={query}
86
+ >
87
+ {loading ? (
88
+ <CommandPrimitive.Loading>
89
+ <div className="flex items-center justify-center py-4">
90
+ <div className="animate-spin rounded-full h-6 w-6 border-2 border-gray-300 border-t-gray-950" />
91
+ </div>
92
+ </CommandPrimitive.Loading>
93
+ ) : (
94
+ <>
95
+ {suggestions.length > 0 ? (
96
+ <CommandGroup>
97
+ {suggestions.map((option) => (
98
+ <CommandItem
99
+ key={option}
100
+ value={option}
101
+ onMouseDown={(e) => e.preventDefault()}
102
+ onSelect={(inputValue) => {
103
+ setOpen(false);
104
+ onSelect(inputValue);
105
+ }}
106
+ >
107
+ {option}
108
+ </CommandItem>
109
+ ))}
110
+ </CommandGroup>
111
+ ) : (
112
+ <CommandEmpty>No suggestions.</CommandEmpty>
113
+ )}
114
+ </>
115
+ )}
116
+ </CommandList>
105
117
  </PopoverContent>
106
118
  </Command>
107
119
  </Popover>
package/src/blog-card.tsx CHANGED
@@ -79,7 +79,7 @@ export const BlogCard = ({
79
79
  </div>
80
80
 
81
81
  {!item.disabled && (
82
- <Link href={item.link} className="absolute inset-0" target="_blank">
82
+ <Link href={item.link} className="absolute inset-0">
83
83
  <span className="sr-only">{t("viewArticle")}</span>
84
84
  </Link>
85
85
  )}
package/src/check-article-lang.tsx CHANGED
@@ -1,41 +1,50 @@
1
1
  "use client"
2
2
 
3
- import { FC, useEffect, useRef } from "react";
3
+ import { FC, useEffect } from "react";
4
4
  import { useAppConfig } from "@c-rex/contexts/config-provider";
5
5
  import { SidebarAvailableVersionsInterface } from "@c-rex/interfaces";
6
6
  import { toast } from "sonner"
7
+ import { useTranslations } from "next-intl"
7
8
 
8
9
  interface Props {
9
10
  availableVersions: SidebarAvailableVersionsInterface[]
10
11
  }
11
12
 
12
13
  export const CheckArticleLangToast: FC<Props> = ({ availableVersions }) => {
13
- const { contentLang } = useAppConfig()
14
- const hasRun = useRef(false)
14
+ const t = useTranslations();
15
+ const { contentLang, setAvailableVersions } = useAppConfig()
15
16
 
16
17
  useEffect(() => {
17
- if (hasRun.current) return
18
- hasRun.current = true
18
+ setAvailableVersions(availableVersions)
19
19
 
20
20
  const activeArticle = availableVersions.filter((item) => item.active)[0]
21
21
  if (activeArticle == undefined || activeArticle.lang == contentLang) return
22
22
 
23
23
  const articleAvailable = availableVersions.find((item) => item.lang === contentLang)
24
- if (articleAvailable == undefined) return
25
-
26
- showToast(articleAvailable.lang, articleAvailable.link)
24
+ if (articleAvailable == undefined) {
25
+ articleNotAvailableToast()
26
+ } else {
27
+ articleAvailableInToast(articleAvailable.lang, articleAvailable.link)
28
+ }
27
29
  }, [])
28
30
 
29
- const showToast = (lang: string, link: string) => {
30
- toast(`Read ${lang} version`, {
31
- description: `This article is also available in ${lang}`,
31
+ const articleAvailableInToast = (lang: string, link: string) => {
32
+ toast(t('toast.read', { lang }), {
33
+ description: t('toast.description', { lang }),
32
34
  action: {
33
- label: `Open ${lang} version`,
35
+ label: t('toast.label', { lang }),
34
36
  onClick: () => window.location.href = link,
35
37
  },
36
38
  duration: 10000,
37
39
  })
38
40
  }
39
41
 
42
+ const articleNotAvailableToast = () => {
43
+ toast(t('sorry'), {
44
+ description: t('toast.articleNotAvailable'),
45
+ duration: 10000,
46
+ })
47
+ }
48
+
40
49
  return null
41
50
  }
package/src/navbar/language-switcher/content-language-switch.tsx CHANGED
@@ -8,7 +8,7 @@ import { useQueryState } from "nuqs"
8
8
  import { useAppConfig } from "@c-rex/contexts/config-provider";
9
9
 
10
10
  export const ContentLanguageSwitch = () => {
11
- const { availableLanguagesAndCountries, setContentLang } = useAppConfig()
11
+ const { availableLanguagesAndCountries, setContentLang, availableVersions } = useAppConfig()
12
12
  const contentLang = getFromCookieString(document.cookie, CONTENT_LANG_KEY)
13
13
  const [queryLanguage, setContentLanguage] = useQueryState('language', {
14
14
  history: 'push',
@@ -19,10 +19,17 @@ export const ContentLanguageSwitch = () => {
19
19
  startTransition(() => {
20
20
  setCookie(CONTENT_LANG_KEY, locale)
21
21
  setContentLang(locale)
22
-
23
22
  if (queryLanguage != null) {
24
23
  setContentLanguage(locale)
25
24
  }
25
+
26
+ if (availableVersions !== null) {
27
+ const filteredList = availableVersions.filter((item) => item.lang === locale)
28
+
29
+ if (filteredList.length > 0 && filteredList[0]) {
30
+ window.location.href = filteredList[0].link as string;
31
+ }
32
+ }
26
33
  });
27
34
  };
28
35
 
package/src/navbar/navbar.tsx CHANGED
@@ -26,7 +26,7 @@ interface NavBarProps {
26
26
 
27
27
  export const NavBar: FC<NavBarProps> = async ({ title }) => {
28
28
  const t = await getTranslations();
29
- const configs = getConfigs();
29
+ const configs = await getConfigs();
30
30
 
31
31
  let session: any;
32
32
  if (configs.OIDC.user.enabled) {
package/src/render-article.tsx CHANGED
@@ -7,7 +7,7 @@ type Props = {
7
7
 
8
8
  export const RenderArticle = ({ htmlContent, contentLang }: Props) => {
9
9
  return (
10
- <div
10
+ <main
11
11
  lang={contentLang}
12
12
  className="pb-4"
13
13
  dangerouslySetInnerHTML={{ __html: htmlContent }}