From e05c318035275cea6d7f38142eed95e6458f67f2 Mon Sep 17 00:00:00 2001
From: Pavel <14926950+prichodko@users.noreply.github.com>
Date: Wed, 3 May 2023 14:25:17 +0200
Subject: [PATCH] Add initial insights implementation (#388)
* add colors to tailwind config
* update reset.css
* add epics page
* add epic detail page
* add orphans page
* add repos page
* add missing @status-im/components exports
* update visx link
* support icons in
* update Tag in website
* emojiOnly -> iconOnly
* update icons scripts
* add missing dir to clean script
* enable eslint next config
* restructure website and add layouts
* move static data outside components
---
.eslintrc | 5 +-
apps/website/next.config.js | 11 +
apps/website/package.json | 1 +
apps/website/src/components/epic-overview.tsx | 790 ++++++++++++++++++
apps/website/src/components/table-issues.tsx | 85 ++
apps/website/src/layouts/insights-layout.tsx | 52 ++
apps/website/src/next.d.ts | 9 +
apps/website/{ => src}/pages/_app.tsx | 13 +-
apps/website/{ => src}/pages/_document.tsx | 2 +-
apps/website/src/pages/insights/[epic].tsx | 25 +
apps/website/src/pages/insights/index.tsx | 62 ++
apps/website/src/pages/insights/orphans.tsx | 22 +
apps/website/src/pages/insights/repos.tsx | 92 ++
apps/website/{ => src}/styles/app.css | 0
apps/website/{ => src}/styles/reset.css | 6 +-
apps/website/tailwind.config.js | 24 +-
apps/website/tsconfig.json | 4 +-
packages/components/package.json | 2 +-
packages/components/src/index.tsx | 2 +
packages/components/src/tag/index.tsx | 2 +-
packages/components/src/tag/tag.stories.tsx | 12 +-
packages/components/src/tag/tag.tsx | 36 +-
packages/icons/package.json | 7 +-
23 files changed, 1225 insertions(+), 39 deletions(-)
create mode 100644 apps/website/src/components/epic-overview.tsx
create mode 100644 apps/website/src/components/table-issues.tsx
create mode 100644 apps/website/src/layouts/insights-layout.tsx
create mode 100644 apps/website/src/next.d.ts
rename apps/website/{ => src}/pages/_app.tsx (55%)
rename apps/website/{ => src}/pages/_document.tsx (95%)
create mode 100644 apps/website/src/pages/insights/[epic].tsx
create mode 100644 apps/website/src/pages/insights/index.tsx
create mode 100644 apps/website/src/pages/insights/orphans.tsx
create mode 100644 apps/website/src/pages/insights/repos.tsx
rename apps/website/{ => src}/styles/app.css (100%)
rename apps/website/{ => src}/styles/reset.css (92%)
diff --git a/.eslintrc b/.eslintrc
index c8f5f29c..d6903d5c 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -46,10 +46,7 @@
{
// TODO: add https://github.com/francoismassart/eslint-plugin-tailwindcss
"files": ["./apps/website/"],
- "extends": [
- // "next"
- "next/core-web-vitals"
- ]
+ "extends": ["next", "next/core-web-vitals"]
// "settings": {
// "import/resolver": {
// "typescript": {
diff --git a/apps/website/next.config.js b/apps/website/next.config.js
index 835598aa..b6dd11cb 100644
--- a/apps/website/next.config.js
+++ b/apps/website/next.config.js
@@ -11,6 +11,7 @@ process.env.TAMAGUI_DISABLE_WARN_DYNAMIC_LOAD = '1'
/** @type {import('next').NextConfig} */
let config = {
+ // output: 'export',
reactStrictMode: true,
typescript: {
ignoreBuildErrors: true,
@@ -30,6 +31,16 @@ let config = {
legacyBrowsers: false,
// esmExternals: 'loose',
},
+
+ redirects: async () => {
+ return [
+ {
+ source: '/',
+ destination: '/insights',
+ permanent: false,
+ },
+ ]
+ },
}
const plugins = [
diff --git a/apps/website/package.json b/apps/website/package.json
index 29a84ac5..2a0588c0 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -17,6 +17,7 @@
"@status-im/components": "*",
"@status-im/icons": "*",
"@status-im/js": "*",
+ "@status-im/colors": "*",
"@tamagui/next-theme": "1.11.1",
"next": "13.2.4",
"react": "^18.2.0",
diff --git a/apps/website/src/components/epic-overview.tsx b/apps/website/src/components/epic-overview.tsx
new file mode 100644
index 00000000..59955691
--- /dev/null
+++ b/apps/website/src/components/epic-overview.tsx
@@ -0,0 +1,790 @@
+import { Tag, Text } from '@status-im/components'
+import { OpenIcon } from '@status-im/icons'
+
+type Props = {
+ title: string
+ description: string
+ fullscreen?: boolean
+}
+
+export const EpicOverview = (props: Props) => {
+ const { title, description, fullscreen } = props
+
+ return (
+
+
+
+ {title}
+
+
+
+
+ {description}
+
+
+
+
+
+
+
+
+
+
+
+ 784 Open
+
+
+
+
+ {issues.map(issue => (
+
+
+
+ {issue.title}
+
+
+ #9667 • Opened 2 days ago by slaedjenic
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ }>
+ Log in
+
+
+
{page}
+
+ )
+}
+
+const NavLink = (props: LinkProps & { children: string }) => {
+ const { children, ...linkProps } = props
+
+ const { asPath } = useRouter()
+ const active = asPath === props.href
+
+ return (
+
+
+ {children}
+
+
+ )
+}
diff --git a/apps/website/src/next.d.ts b/apps/website/src/next.d.ts
new file mode 100644
index 00000000..62e1fc66
--- /dev/null
+++ b/apps/website/src/next.d.ts
@@ -0,0 +1,9 @@
+import type { NextPage } from 'next'
+
+declare module 'next' {
+ export type PageLayout = (page: React.ReactElement) => React.ReactNode
+
+ export type Page = NextPage & {
+ getLayout?: (page: ReactElement) => ReactNode
+ }
+}
diff --git a/apps/website/pages/_app.tsx b/apps/website/src/pages/_app.tsx
similarity index 55%
rename from apps/website/pages/_app.tsx
rename to apps/website/src/pages/_app.tsx
index d8c0bf1d..f910f341 100644
--- a/apps/website/pages/_app.tsx
+++ b/apps/website/src/pages/_app.tsx
@@ -4,6 +4,7 @@ import '@/styles/reset.css'
import { Provider } from '@status-im/components'
import { Inter } from 'next/font/google'
+import type { Page, PageLayout } from 'next'
import type { AppProps } from 'next/app'
const inter = Inter({
@@ -12,12 +13,16 @@ const inter = Inter({
subsets: ['latin'],
})
-export default function App({ Component, pageProps }: AppProps) {
+type Props = AppProps & {
+ Component: Page
+}
+
+export default function App({ Component, pageProps }: Props) {
+ const getLayout: PageLayout = Component.getLayout || (page => page)
+
return (
)
}
diff --git a/apps/website/pages/_document.tsx b/apps/website/src/pages/_document.tsx
similarity index 95%
rename from apps/website/pages/_document.tsx
rename to apps/website/src/pages/_document.tsx
index d2cb1aec..df9bd6c0 100644
--- a/apps/website/pages/_document.tsx
+++ b/apps/website/src/pages/_document.tsx
@@ -3,7 +3,7 @@ import { Children } from 'react'
import NextDocument, { Head, Html, Main, NextScript } from 'next/document'
import { AppRegistry } from 'react-native'
-import Tamagui from '../tamagui.config'
+import Tamagui from '../../tamagui.config'
import type { DocumentContext } from 'next/document'
diff --git a/apps/website/src/pages/insights/[epic].tsx b/apps/website/src/pages/insights/[epic].tsx
new file mode 100644
index 00000000..68a822e4
--- /dev/null
+++ b/apps/website/src/pages/insights/[epic].tsx
@@ -0,0 +1,25 @@
+import { EpicOverview } from '@/components/epic-overview'
+import { TableIssues } from '@/components/table-issues'
+import { InsightsLayout } from '@/layouts/insights-layout'
+
+import type { Page } from 'next'
+
+const InsightsDetailPage: Page = () => {
+ return (
+ <>
+
+
+
+
+
+
+ )
+}
+
+InsightsDetailPage.getLayout = InsightsLayout
+
+export default InsightsDetailPage
diff --git a/apps/website/src/pages/insights/index.tsx b/apps/website/src/pages/insights/index.tsx
new file mode 100644
index 00000000..4a47fdea
--- /dev/null
+++ b/apps/website/src/pages/insights/index.tsx
@@ -0,0 +1,62 @@
+import { IconButton, Shadow, Tag, Text } from '@status-im/components'
+import {
+ DoneIcon,
+ NotStartedIcon,
+ OpenIcon,
+ SearchIcon,
+ SortIcon,
+} from '@status-im/icons'
+
+import { EpicOverview } from '@/components/epic-overview'
+import { InsightsLayout } from '@/layouts/insights-layout'
+
+import type { Page } from 'next'
+
+const epics = [
+ {
+ id: 1,
+ title: 'Communities protocol',
+ description: 'Support Encrypted Communities',
+ },
+ {
+ id: 5155,
+ title: 'Keycard',
+ description:
+ 'Detecting keycard reader removal for the beginning of each flow',
+ },
+]
+
+const InsightsPage: Page = () => {
+ return (
+
+
+ Epics
+
+
+
+
+
+
+
+
+
+
+ } />
+ } />
+
+
+
+
+ {epics.map(epic => (
+
+
+
+ ))}
+
+
+
+ Repos
+
+
+
+
+ {repos.map(repo => (
+
+
+ {repo.name}
+
+
+ {repo.description}
+
+
+
+
+ Public
+
+
+ 42 Issues
+
+
+ 32
+
+
+
+ ))}
+