Move global components to ui package

apps/dataset-browser/.eslintrc.js

@@ -1,4 +1,12 @@
 module.exports = {
   root: true,
   extends: ['custom'],
+  rules: {
+    'node/no-extraneous-import': [
+      'error',
+      {
+        allowModules: ['ui'],
+      },
+    ],
+  },
 };

apps/dataset-browser/src/app/[locale]/about/page.tsx

@@ -1,4 +1,4 @@
-import LocalizedMarkdown from '@/components/localized-markdown';
+import {LocalizedMarkdown} from 'ui';
 
 export default function About() {
   return <LocalizedMarkdown name="about" />;

apps/dataset-browser/src/app/[locale]/client-filters.tsx

@@ -13,7 +13,7 @@ import {
 import {SearchOptions, SearchResult} from '@/lib/dataset-fetcher';
 import FilterSet from './filter-set';
 import Paginator from './paginator';
-import {PageTitle, PageHeader} from '@/components/page';
+import {PageTitle, PageHeader} from 'ui';
 import {useTranslations} from 'next-intl';
 import SelectedFilters from './selected-filters';
 import {useRouter} from 'next/navigation';

apps/dataset-browser/src/app/[locale]/contact/page.tsx

@@ -1,4 +1,4 @@
-import LocalizedMarkdown from '@/components/localized-markdown';
+import {LocalizedMarkdown} from 'ui';
 
 export default function Contact() {
   return <LocalizedMarkdown name="contact" />;

apps/dataset-browser/src/app/[locale]/dataset-card.tsx

@@ -1,7 +1,7 @@
 import {Link} from 'next-intl';
 import {useTranslations} from 'next-intl';
 import {Dataset} from '@/lib/dataset-fetcher';
-import Badge from '@/components/badge';
+import {Badge} from 'ui';
 
 export default function DatasetCard({dataset}: {dataset: Dataset}) {
   const t = useTranslations('DatasetCard');

apps/dataset-browser/src/app/[locale]/dataset/[id]/page.tsx

@@ -1,5 +1,5 @@
 import {getTranslations} from 'next-intl/server';
-import {PageHeader, PageTitle} from '@/components/page';
+import {PageHeader, PageTitle} from 'ui';
 import {ChevronLeftIcon} from '@heroicons/react/24/solid';
 import datasetFetcher from '@/lib/dataset-fetcher-instance';
 import {Link} from 'next-intl';

apps/dataset-browser/src/app/[locale]/faq/page.tsx

@@ -1,4 +1,4 @@
-import LocalizedMarkdown from '@/components/localized-markdown';
+import {LocalizedMarkdown} from 'ui';
 
 export default function Faq() {
   return <LocalizedMarkdown name="faq" />;

apps/dataset-browser/src/app/[locale]/layout.tsx

@@ -2,7 +2,7 @@ import './globals.css';
 import {useLocale} from 'next-intl';
 import {notFound} from 'next/navigation';
 import {ReactNode} from 'react';
-import Navigation from '@/components/navigation';
+import Navigation from './navigation';
 import {useTranslations} from 'next-intl';
 import {locales} from '@/middleware';
 

apps/dataset-browser/src/app/[locale]/selected-filters.tsx

@@ -1,7 +1,7 @@
 import {SearchResultFilter} from '@/lib/dataset-fetcher';
 import {Dispatch} from 'react';
 import {useTranslations} from 'next-intl';
-import Badge from '@/components/badge';
+import {Badge} from 'ui';
 
 interface Props {
   filters: {

apps/dataset-browser/src/components/badge.tsx → packages/ui/badge.tsx

@@ -8,7 +8,7 @@ interface Props {
   variant?: 'transparent' | 'gray';
 }
 
-export default function Badge({
+export function Badge({
   children,
   variant = 'transparent',
   testId,

packages/ui/index.tsx

@@ -1,2 +1,5 @@
 import * as React from 'react';
-export * from './Button';
+export * from './badge';
+export * from './page';
+export * from './localized-markdown';
+

apps/dataset-browser/src/components/localized-markdown.tsx → packages/ui/localized-markdown.tsx

@@ -5,7 +5,7 @@ interface Props {
   name: string;
 }
 
-async function LocalizedMarkdown({name}: Props) {
+const LocalizedMarkdown = (async ({ name }: Props) => {
   const locale = useLocale();
   try {
     const Markdown = (await import(`@/messages/${locale}/${name}.mdx`)).default;
@@ -17,11 +17,12 @@ async function LocalizedMarkdown({name}: Props) {
   } catch {
     notFound();
   }
-}
+}) as unknown as (props: Props) => JSX.Element
 
 // TypeScript doesn't understand async components yet.
 // So this is a temporary workaround.
 // More info:
 //  - Next.js issue: https://github.com/vercel/next.js/issues/42292
 //  - Typescript pull request: https://github.com/microsoft/TypeScript/pull/51328
-export default LocalizedMarkdown as unknown as (props: Props) => JSX.Element;
+// export LocalizedMarkdown as unknown as (props: Props) => JSX.Element;
+export {LocalizedMarkdown};