move data exchange to examples

.eslintrc.js

@@ -11,7 +11,6 @@ module.exports = {
     node: true,
   },
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
   parserOptions: {
     sourceType: 'module',
     ecmaVersion: 'es2022',

examples/data-exchange/.eslintrc.json

@@ -0,0 +1,16 @@
+{
+  "ignorePatterns": ["**/generated/**/*.ts"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "next"
+  ],
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["warn"],
+    "@typescript-eslint/no-explicit-any": ["off"],
+    "react/display-name": "off",
+    "@next/next/no-html-link-for-pages": "off",
+    "prefer-const": "off"
+  }
+}

apps/www/app/[locale]/(user)/components/Content.tsx → examples/data-exchange/app/[locale]/(user)/components/Content.tsx

@@ -39,4 +39,4 @@ export function Content() {
       </ButtonGroup>
     </>
   );
-}
+}

apps/www/app/[locale]/(user)/page.module.scss → examples/data-exchange/app/[locale]/(user)/page.module.scss

@@ -6,7 +6,9 @@
   border-radius: 4px;
   background: rgba(var(--card-rgb), 0.1);
   border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  transition: background 200ms, border 200ms;
+  transition:
+    background 200ms,
+    border 200ms;
   display: flex;
   gap: 16px;
   align-items: center;

apps/www/app/[locale]/(user)/page.tsx → examples/data-exchange/app/[locale]/(user)/page.tsx

@@ -6,4 +6,4 @@ export default async function Home() {
       <Content />
     </main>
   );
-}
+}

apps/www/app/[locale]/dashboard/account/page.tsx → examples/data-exchange/app/[locale]/dashboard/account/page.tsx

@@ -2,7 +2,7 @@ import { InProgress } from '../components/in-progress';
 
 export default async function DashboardPage() {
   return (
-    <div className="min-h-full h-full">
+    <div className="h-full min-h-full">
       <InProgress />
     </div>
   );

apps/www/app/[locale]/dashboard/components/in-progress.tsx → examples/data-exchange/app/[locale]/dashboard/components/in-progress.tsx

@@ -6,7 +6,7 @@ import { Icons } from '@/components/icons';
 
 export function InProgress() {
   return (
-    <div className="flex flex-col h-full items-center justify-center gap-4">
+    <div className="flex h-full flex-col items-center justify-center gap-4">
       <Icon source={Icons.construction} size={80} />
       <Text variant="headingSm" color="subdued">
         This page is currently under construction.

apps/www/app/[locale]/dashboard/components/mobile-dashboard-nav.tsx → examples/data-exchange/app/[locale]/dashboard/components/mobile-dashboard-nav.tsx

@@ -63,24 +63,24 @@ export function MobileDashboardNav({
                     href={item.disabled ? '/' : item.href}
                     onClick={() => setIsOpened(false)}
                   >
-                    <div className={twMerge('flex justify-between relative')}>
+                    <div className={twMerge('relative flex justify-between')}>
                       <span
                         className={twMerge(
-                          'bg-transparent rounded-r-1 w-[3px] h-full absolute top-0 left-0',
+                          'absolute left-0 top-0 h-full w-[3px] rounded-r-1 bg-transparent',
                           path.includes(item.href) && 'bg-decorativeIconFour'
                         )}
                       />
                       <div
                         className={twMerge(
-                          'flex items-center pl-2 w-full ml-2 rounded-1 overflow-hidden',
+                          'ml-2 flex w-full items-center overflow-hidden rounded-1 pl-2',
                           dashboardStyles.Item,
                           path.includes(item.href) && dashboardStyles.Selected
                         )}
                       >
                         <Icon source={icon} />
                         <div
                           className={twMerge(
-                            'py-2 px-3',
+                            'px-3 py-2',
                             'whitespace-nowrap opacity-100 transition-opacity duration-300'
                           )}
                         >

examples/data-exchange/app/[locale]/dashboard/dataset/[id]/edit/components/DistributionList.tsx

@@ -0,0 +1,47 @@
+import { Button, Divider, Icon, Text } from 'opub-ui';
+
+import { Icons } from '@/components/icons';
+
+export function DistributionList({
+  setPage,
+}: {
+  setPage: (page: 'list' | 'create') => void;
+  setEditId: (id: string) => void;
+}) {
+  return (
+    <div>
+      <Text variant="headingMd">Add Distribution</Text>
+      <div className="pt-4">
+        <Divider />
+      </div>
+      <div className="py-20">
+        <NoList setPage={setPage} />
+      </div>
+    </div>
+  );
+}
+
+const NoList = ({
+  setPage,
+}: {
+  setPage: (page: 'list' | 'create') => void;
+}) => {
+  return (
+    <div className="flex flex-col items-center justify-center p-6">
+      <Icon
+        source={Icons.distribution}
+        size={64}
+        stroke={1}
+        color="interactive"
+      />
+      <div className="pt-4">
+        <Text variant="headingSm" color="subdued">
+          You have not added any distributions yet.
+        </Text>
+      </div>
+      <div className="pt-6">
+        <Button onClick={() => setPage('create')}>Add Distribution</Button>
+      </div>
+    </div>
+  );
+};

apps/www/app/[locale]/dashboard/dataset/[id]/edit/components/EditDataset.tsx → examples/data-exchange/app/[locale]/dashboard/dataset/[id]/edit/components/EditDataset.tsx

@@ -1,6 +1,7 @@
-import { CreateDataset } from '../../../new/components/new-dataset';
-import { PatchDataset } from '@/types';
 import React from 'react';
+import { PatchDataset } from '@/types';
+
+import { CreateDataset } from '../../../new/components/new-dataset';
 
 export function EditDataset({
   defaultVal,

apps/www/app/[locale]/dashboard/dataset/[id]/edit/distribution/page.tsx → examples/data-exchange/app/[locale]/dashboard/dataset/[id]/edit/distribution/page.tsx

@@ -2,7 +2,7 @@ import { graphql } from '@/gql';
 import { Hydrate } from '@/lib';
 import { dehydrate } from '@tanstack/react-query';
 
-import { GraphQL, getQueryClient } from '@/lib/api';
+import { getQueryClient, GraphQL } from '@/lib/api';
 import styles from '../edit.module.scss';
 import { DistibutionPage } from './page-layout';
 

apps/www/app/[locale]/dashboard/dataset/[id]/edit/layout.tsx → examples/data-exchange/app/[locale]/dashboard/dataset/[id]/edit/layout.tsx

@@ -1,6 +1,7 @@
-import { EditLayout } from './components/EditLayout';
 import React from 'react';
 
+import { EditLayout } from './components/EditLayout';
+
 interface DashboardLayoutProps {
   children?: React.ReactNode;
   params: { id: string };

apps/www/app/[locale]/dashboard/dataset/[id]/edit/metadata/page.tsx → examples/data-exchange/app/[locale]/dashboard/dataset/[id]/edit/metadata/page.tsx

@@ -2,7 +2,7 @@ import { graphql } from '@/gql';
 import { Hydrate } from '@/lib';
 import { dehydrate } from '@tanstack/react-query';
 
-import { GraphQL, getQueryClient } from '@/lib/api';
+import { getQueryClient, GraphQL } from '@/lib/api';
 import styles from '../edit.module.scss';
 import { MetadataPage } from './page-layout';
 

apps/www/app/[locale]/dashboard/dataset/[id]/edit/page.tsx → examples/data-exchange/app/[locale]/dashboard/dataset/[id]/edit/page.tsx

@@ -2,7 +2,7 @@ import { graphql } from '@/gql';
 import { Hydrate } from '@/lib';
 import { dehydrate } from '@tanstack/react-query';
 
-import { GraphQL, getQueryClient } from '@/lib/api';
+import { getQueryClient, GraphQL } from '@/lib/api';
 import styles from './edit.module.scss';
 import { EditPage } from './page-layout';
 

examples/data-exchange/app/[locale]/dashboard/dataset/components/content.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { Box, Icon, Text } from 'opub-ui';
+import { twMerge } from 'tailwind-merge';
+
+import { Icons } from '@/components/icons';
+import { LinkButton } from '@/components/Link';
+
+export function Content() {
+  return (
+    <div className="flex h-full w-full grow flex-col items-center justify-center">
+      <div className={twMerge('h-100 flex flex-col items-center gap-4')}>
+        <Icon
+          source={Icons.addDataset}
+          color="interactive"
+          stroke={1}
+          size={80}
+        />
+        <Text variant="headingSm" color="subdued">
+          You have not added any datasets yet.
+        </Text>
+        <Box paddingBlockStart="4">
+          <LinkButton href="/dashboard/dataset/new">Add New Dataset</LinkButton>
+        </Box>
+      </div>
+    </div>
+  );
+}

apps/www/app/[locale]/dashboard/dataset/components/dataset-form.tsx → examples/data-exchange/app/[locale]/dashboard/dataset/components/dataset-form.tsx

@@ -1,5 +1,5 @@
-import { Form } from 'opub-ui';
 import React from 'react';
+import { Form } from 'opub-ui';
 
 interface DatasetFormProps {
   onSubmit: (e?: any) => void;

apps/www/app/[locale]/layout.tsx → examples/data-exchange/app/[locale]/layout.tsx

@@ -1,11 +1,12 @@
-import locales from '../../config/locales';
-import Provider from '@/components/provider';
-import { siteConfig } from '@/config/site';
-import { NextIntlClientProvider } from 'next-intl';
-import { unstable_setRequestLocale } from 'next-intl/server';
+import React from 'react';
 import { Inter as FontSans } from 'next/font/google';
 import { notFound } from 'next/navigation';
-import React from 'react';
+import { NextIntlClientProvider } from 'next-intl';
+import { unstable_setRequestLocale } from 'next-intl/server';
+
+import { siteConfig } from '@/config/site';
+import Provider from '@/components/provider';
+import locales from '../../config/locales';
 
 const fontSans = FontSans({ subsets: ['latin'], display: 'swap' });