Merge pull request #27 from vtex/chore/admin-template

Chore/admin template

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Add initial admin development
+
 ## [0.20.0] - 2022-01-17
 
 ### Updated

admin/navigation.json

@@ -0,0 +1,14 @@
+{
+  "section": "other",
+  "titleId": "admin/navigation.label",
+  "subSectionItems": [
+    {
+      "labelId": "admin/navigation.commissions.label",
+      "path": "admin/affiliates-commissions"
+    },
+    {
+      "labelId": "admin/navigation.dashboard.label",
+      "path": "admin/affiliates-dashboard"
+    }
+  ]
+}

admin/routes.json

@@ -0,0 +1,11 @@
+{
+  "admin.app.affiliates": {},
+  "admin.app.affiliates.commissions": {
+    "component": "CommissionsPage",
+    "path": "/admin/app/affiliates-commissions"
+  },
+  "admin.app.affiliates.dashboard": {
+    "component": "DashboardPage",
+    "path": "/admin/app/affiliates-dashboard"
+  }
+}

manifest.json

@@ -26,7 +26,9 @@
     "react": "3.x",
     "masterdata": "1.x",
     "graphql": "1.x",
-    "store": "0.x"
+    "store": "0.x",
+    "messages": "1.x",
+    "admin": "0.x"
   },
   "scripts": {
     "prereleasy": "bash lint.sh"

messages/en.json

@@ -0,0 +1,5 @@
+{
+  "admin/navigation.label": "Affiliates",
+  "admin/navigation.commissions.label": "Commissions",
+  "admin/navigation.dashboard.label": "Dashboard"
+}

messages/pt.json

@@ -0,0 +1,5 @@
+{
+  "admin/navigation.label": "Afiliados",
+  "admin/navigation.commissions.label": "Comissões",
+  "admin/navigation.dashboard.label": "Dashboard"
+}

package.json

@@ -20,6 +20,15 @@
       "prettier --write"
     ]
   },
+  "jest": {
+    "testMatch": [
+      "**/__tests__/**/+(spec|test).+(ts|tsx|js)",
+      "**/?(*.)+(spec|test).+(ts|tsx|js)"
+    ],
+    "transform": {
+      "^.+\\.(ts|tsx)$": "ts-jest"
+    }
+  },
   "devDependencies": {
     "@types/node": "^12.12.21",
     "@vtex/danger": "^0.2.7",

react/CommissionsPage.tsx

@@ -0,0 +1,32 @@
+import type { FC } from 'react'
+import React from 'react'
+import {
+  Page,
+  PageHeader,
+  PageTitle,
+  PageContent,
+  createSystem,
+} from '@vtex/admin-ui'
+
+import CommissionsTabs from './components/admin/commissions/CommissionsTabs'
+
+const [ThemeProvider] = createSystem({
+  key: 'affiliates-commissions',
+})
+
+const CommissionsPage: FC = () => {
+  return (
+    <ThemeProvider>
+      <Page>
+        <PageHeader>
+          <PageTitle>Page Title</PageTitle>
+        </PageHeader>
+        <PageContent csx={{ padding: 5 }}>
+          <CommissionsTabs />
+        </PageContent>
+      </Page>
+    </ThemeProvider>
+  )
+}
+
+export default CommissionsPage

react/DashboardPage.tsx

@@ -0,0 +1,28 @@
+import type { FC } from 'react'
+import React from 'react'
+import {
+  Page,
+  PageHeader,
+  PageTitle,
+  PageContent,
+  createSystem,
+} from '@vtex/admin-ui'
+
+const [ThemeProvider] = createSystem({
+  key: 'affiliates-dashboard',
+})
+
+const DashboardPage: FC = () => {
+  return (
+    <ThemeProvider>
+      <Page>
+        <PageHeader>
+          <PageTitle>Dashboard</PageTitle>
+        </PageHeader>
+        <PageContent csx={{ padding: 5 }}>Dashboard</PageContent>
+      </Page>
+    </ThemeProvider>
+  )
+}
+
+export default DashboardPage

react/components/admin/commissions/CommissionsTabs.tsx

@@ -0,0 +1,27 @@
+import type { FC } from 'react'
+import React from 'react'
+import { Tabs, Tab, TabList, TabPanel, useTabState } from '@vtex/admin-ui'
+
+import ImportCommissionsTab from './ImportCommissionsTab'
+import ExportCommissionsTab from './ExportCommissionsTab'
+
+const CommissionsTabs: FC = () => {
+  const state = useTabState()
+
+  return (
+    <Tabs state={state}>
+      <TabList aria-label="Usage Tabs">
+        <Tab id="1">Tab 1</Tab>
+        <Tab id="2">Tab 2</Tab>
+      </TabList>
+      <TabPanel id="1" csx={{ padding: 3 }}>
+        <ImportCommissionsTab />
+      </TabPanel>
+      <TabPanel id="2" csx={{ padding: 3 }}>
+        <ExportCommissionsTab />
+      </TabPanel>
+    </Tabs>
+  )
+}
+
+export default CommissionsTabs

react/components/admin/commissions/ExportCommissionsTab.tsx

@@ -0,0 +1,8 @@
+import type { FC } from 'react'
+import React from 'react'
+
+const ExportCommissionsTab: FC = () => {
+  return <div>Tab 2</div>
+}
+
+export default ExportCommissionsTab

react/components/admin/commissions/ImportCommissionsTab.tsx

@@ -0,0 +1,8 @@
+import type { FC } from 'react'
+import React from 'react'
+
+const ImportCommissionsTab: FC = () => {
+  return <div>Tab 1</div>
+}
+
+export default ImportCommissionsTab

react/package.json

@@ -5,6 +5,7 @@
     "test": "vtex-test-tools test --collectCoverage"
   },
   "dependencies": {
+    "@vtex/admin-ui": "^0.117.1-next.1",
     "apollo-client": "^2.6.8",
     "react": "^16.12.0",
     "react-apollo": "^3.1.3",