Merge pull request #21 from elite-se/feature/split-in-packages

Feature/split in packages

package.json

@@ -19,7 +19,6 @@
   },
   "devDependencies": {
     "@hot-loader/react-dom": "^16.11.0",
-    "@types/react": "^16.9.16",
     "@typescript-eslint/eslint-plugin": "^2.6.1",
     "@typescript-eslint/parser": "^2.6.1",
     "cross-env": "^6.0.3",

packages/feature-flags/package.json → packages/components/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "elite-feature-flags",
+  "name": "elite-components",
   "version": "1.0.0",
   "private": true,
   "publishConfig": {
@@ -10,7 +10,7 @@
     "clean": "rm -rf dist/ node_modules/ tsconfig.tsbuildinfo"
   },
   "devDependencies": {
-    "@types/react": "^16.9.11",
+    "@types/react": "^16.9.23",
     "elite-types": "^1.0.0"
   },
   "dependencies": {

packages/frontend/src/components/general/ErrorBoundary.tsx → packages/components/src/general/errorBoundary.component.tsx

@@ -25,7 +25,7 @@ function renderError(error: Error): React.ReactNode {
  * Use by wrapping it around failable components in JSX
  * or use the withErrorBoundary(...) to wrap component components
  */
-export class ErrorBoundary extends React.Component<ErrorBoundaryProps, State> {
+export class ErrorBoundaryComponent extends React.Component<ErrorBoundaryProps, State> {
   constructor(props: ErrorBoundaryProps) {
     super(props);
     this.state = {};
@@ -64,8 +64,8 @@ export function withErrorBoundary<TProps>(
   errorRenderer: (error: Error) => React.ReactNode = renderError,
 ): React.ComponentType<TProps> {
   return (props: TProps) => (
-    <ErrorBoundary errorRenderer={errorRenderer}>
+    <ErrorBoundaryComponent errorRenderer={errorRenderer}>
       <WrappedComponent {...props} />
-    </ErrorBoundary>
+    </ErrorBoundaryComponent>
   );
 }

packages/components/src/general/index.ts

@@ -0,0 +1,2 @@
+export * from './errorBoundary.component';
+export * from './featureFlag.component';

packages/components/src/index.ts

@@ -0,0 +1,2 @@
+export * from './general';
+export * from './list';

packages/components/src/list/index.ts

@@ -0,0 +1 @@
+export * from './linkListItem.component';

packages/frontend/package.json

@@ -12,9 +12,9 @@
     "clean": "rm -rf dist/ node_modules/ tsconfig.tsbuildinfo"
   },
   "devDependencies": {
-    "@types/react": "^16.9.11",
+    "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.4",
-    "@types/react-router": "^5.1.3",
+    "@types/react-router": "^5.1.4",
     "@types/react-router-dom": "^5.1.3",
     "elite-types": "^1.0.0"
   },
@@ -25,7 +25,7 @@
     "react-dom": "^16.12.0",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
-    "elite-feature-flags": "^1.0.0",
+    "elite-components": "^1.0.0",
     "elite-configuration": "^1.0.0",
     "elite-decorators": "^1.0.0"
   }

packages/frontend/src/components/App.tsx → packages/frontend/src/app.tsx

@@ -1,29 +1,32 @@
 import { getConfiguration } from 'elite-configuration';
-import { FeatureFlagsProvider } from 'elite-feature-flags';
-import { Configuration } from 'elite-types';
+import { AppPath, Configuration } from 'elite-types';
 import * as React from 'react';
 import { hot } from 'react-hot-loader';
 import { Redirect, Route, Switch } from 'react-router';
 import { Router } from 'react-router-dom';
-import history from '../util/history';
-import { ErrorBoundary } from './general/ErrorBoundary';
-import { AppPath, APP_ROUTES } from '../util/routes';
+import history from './util/history';
+import { APP_ROUTES } from './util/routes';
+import { ErrorBoundaryComponent, FeatureFlagsProvider } from 'elite-components';
+import { Divider } from '@material-ui/core';
+import { LinkDirectory } from './util/linkDirectory';
 
 // Global bootstrap: install subsystems and load configuration
 const configuration: Configuration = getConfiguration();
 
 export const AppComponent = () => (
   <FeatureFlagsProvider value={configuration.featureMap}>
     <Router history={history}>
-      <Switch>
-        {APP_ROUTES.map((routeProps, index) => (
-          <ErrorBoundary>
+      <ErrorBoundaryComponent>
+        <Switch>
+          {APP_ROUTES.map((routeProps, index) => (
             <Route key={index} {...routeProps} />
-          </ErrorBoundary>
-        ))}
-        {/* Error 404 Fallback */}
-        <Redirect to={AppPath.HOME} />
-      </Switch>
+          ))}
+          {/* Error 404 Fallback */}
+          <Redirect to={AppPath.HOME} />
+        </Switch>
+        <Divider />
+        <LinkDirectory />
+      </ErrorBoundaryComponent>
     </Router>
   </FeatureFlagsProvider>
 );

packages/frontend/src/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { App } from './components/App';
+import { App } from './app';
 
 ReactDOM.render(<App />, document.getElementById('root'));

packages/frontend/src/components/pages/support/LinkDirectory.tsx → packages/frontend/src/util/linkDirectory.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { APP_ROUTES, getDisplayNameForRoute, getLinkForRoute } from '../../../util/routes';
+import { APP_ROUTES, getDisplayNameForRoute, getLinkForRoute } from './routes';
 
 export const LinkDirectory = () => (
   <ul>

packages/frontend/src/util/routes.tsx

@@ -1,72 +1,17 @@
 import * as React from 'react';
-import { HomePage } from '../components/pages/HomePage';
-import { LinkPage } from '../components/pages/LinkPage';
-import { RouteProps } from 'react-router';
+import { HOME_ROUTE } from 'elite-home';
+import { LINK_ROUTE } from 'elite-link';
+import { AppPath, AppRoute, LinkType } from 'elite-types';
 
-// If necessary, add support for: H.LocationDescriptor | ((location: H.Location) => H.LocationDescriptor);
-type LinkType = string;
-
-/**
- * Each Approute can have a specific link (i.e., path with filled parameter placeholders),
- * a display Name, i.e., text of the link and a nonoptional (!) path
- *
- * TODO: move to types package to be able to move app routes to their own
- * individual packages
- */
-export interface AppRouteProps extends RouteProps {
-  // Use this if the link target differs from the path specification,
-  // i.e., if the path url contains paramter specifications etc
-  readonly link?: LinkType;
-
-  // link text (Human readable!)
-  readonly displayName?: string;
-
-  // AppRoutes must have a path - deoptionalize this property
-  readonly path: AppPath;
-}
-
-/**
- * All available paths in this app
- */
-export enum AppPath {
-  HOME = '/home',
-  LINK = '/link',
-  ERROR = '/',
-}
-
-/**
- * Route for the Home page of this app
- *
- * TODO: replace with imported version (except of path: property)
- * once HomePage is moved to different package
- */
-const HOME_ROUTE: AppRouteProps = {
-  path: AppPath.HOME,
-  displayName: 'Home',
-  render: props => <HomePage {...props} />,
-};
-
-/**
- * Route for the Link page of this app
- *
- * TODO: replace `with imported version (except of path: property
- * once LinkPage is moved to different package)
- */
-const LINK_ROUTE: AppRouteProps = {
-  path: AppPath.LINK,
-  displayName: 'Useful Links',
-  render: props => <LinkPage {...props} />,
-};
-
-export const APP_ROUTES: AppRouteProps[] = [HOME_ROUTE, LINK_ROUTE];
+export const APP_ROUTES: AppRoute[] = [HOME_ROUTE, LINK_ROUTE];
 
 /**
  * Retrieves the url which other pages can use to link to a certain
  * app path
  *
  * @param route
  */
-export function getLinkForRoute(route: AppRouteProps): LinkType {
+export function getLinkForRoute(route: AppRoute): LinkType {
   return route.link || route.path;
 }
 
@@ -89,7 +34,7 @@ export function getLinkForPath(path: AppPath): LinkType {
  *
  * @param route
  */
-export function getDisplayNameForRoute(route: AppRouteProps): string {
+export function getDisplayNameForRoute(route: AppRoute): string {
   return route.displayName || getLinkForRoute(route);
 }
 

packages/frontend/tsconfig.json

@@ -8,16 +8,22 @@
   "include": ["src/**/*"],
   "references": [
     {
-      "path": "../configuration"
+      "path": "../types"
     },
     {
-      "path": "../feature-flags"
+      "path": "../configuration"
     },
     {
       "path": "../decorators"
     },
     {
-      "path": "../types"
+      "path": "../components"
+    },
+    {
+      "path": "../home"
+    },
+    {
+      "path": "../link"
     }
   ]
 }

packages/home/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "elite-home",
+  "version": "1.0.0",
+  "private": true,
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "src/index.ts",
+  "scripts": {
+    "clean": "rm -rf dist/ node_modules/ tsconfig.tsbuildinfo"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.23",
+    "elite-types": "^1.0.0"
+  },
+  "dependencies": {
+    "react": "^16.12.0",
+    "elite-components": "^1.0.0"
+  }
+}

packages/frontend/src/components/pages/HomePage.tsx → packages/home/src/home.page.tsx

@@ -1,18 +1,24 @@
-import { Divider } from '@material-ui/core';
-import { FeatureFlag } from 'elite-feature-flags';
+import { FeatureFlag } from 'elite-components';
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
-import { LinkDirectory } from './support/LinkDirectory';
+import { AppPath, AppRoute } from 'elite-types';
 
 export interface HomePageProps extends RouteComponentProps {}
 
+/**
+ * Route for the Home page of this app
+ */
+export const HOME_ROUTE: AppRoute = {
+  path: AppPath.HOME,
+  displayName: 'Home',
+  render: props => <HomePage {...props} />,
+};
+
 export const HomePage = (props: HomePageProps) => (
   <>
     <h1>Main Page</h1>
     <FeatureFlag featureName="under-construction-message">
       Elite Sexyz is currently under construction. See discord main channel for more information
     </FeatureFlag>
-    <Divider />
-    <LinkDirectory />
   </>
 );

packages/home/src/index.ts

@@ -0,0 +1 @@
+export * from './home.page';

packages/home/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "baseUrl": "src"
+  },
+  "include": ["src/**/*"],
+  "references": [
+    {
+      "path": "../types"
+    }
+  ]
+}

packages/link/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "elite-link",
+  "version": "1.0.0",
+  "private": true,
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "src/index.ts",
+  "scripts": {
+    "clean": "rm -rf dist/ node_modules/ tsconfig.tsbuildinfo"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.23",
+    "elite-types": "^1.0.0"
+  },
+  "dependencies": {
+    "react": "^16.12.0",
+    "elite-components": "^1.0.0"
+  }
+}

packages/link/src/index.ts

@@ -0,0 +1 @@
+export * from './link.page';

packages/frontend/src/components/pages/LinkPage.tsx → packages/link/src/link.page.tsx

@@ -1,21 +1,30 @@
-import { Divider, List } from '@material-ui/core';
+import { List } from '@material-ui/core';
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
-import { LinkListItem } from '../general/LinkListItem';
-import { LinkDirectory } from './support/LinkDirectory';
+import { LinkListItem } from 'elite-components';
+import { AppPath, AppRoute } from 'elite-types';
 
 export interface LinkPageProps extends RouteComponentProps {}
 
+/**
+ * Route for the Link page of this app
+ */
+export const LINK_ROUTE: AppRoute = {
+  path: AppPath.LINK,
+  displayName: 'Useful Links',
+  render: props => (
+    <>
+      <LinkPage {...props} />
+    </>
+  ),
+};
+
 export const LinkPage = (props: LinkPageProps) => (
   <>
     <h1>Useful Links List</h1>
     <List>
       <LinkListItem href={'https://elite-se.informatik.uni-augsburg.de'} title={'Main Webpage'} />
       <LinkListItem href={'https://github.com/elite-se/elite-se.protokolle'} title={'Exam Protocols'} />
     </List>
-
-    <Divider />
-
-    <LinkDirectory />
   </>
 );

packages/link/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "baseUrl": "src"
+  },
+  "include": ["src/**/*"],
+  "references": [
+    {
+      "path": "../types"
+    }
+  ]
+}