diff --git a/package.json b/package.json index b3ac0dc..fab009d 100644 --- a/package.json +++ b/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", diff --git a/packages/feature-flags/package.json b/packages/components/package.json similarity index 82% rename from packages/feature-flags/package.json rename to packages/components/package.json index 68f70a5..9955ac2 100644 --- a/packages/feature-flags/package.json +++ b/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": { diff --git a/packages/frontend/src/components/general/ErrorBoundary.tsx b/packages/components/src/general/errorBoundary.component.tsx similarity index 91% rename from packages/frontend/src/components/general/ErrorBoundary.tsx rename to packages/components/src/general/errorBoundary.component.tsx index eee30d0..7d03522 100644 --- a/packages/frontend/src/components/general/ErrorBoundary.tsx +++ b/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 { +export class ErrorBoundaryComponent extends React.Component { constructor(props: ErrorBoundaryProps) { super(props); this.state = {}; @@ -64,8 +64,8 @@ export function withErrorBoundary( errorRenderer: (error: Error) => React.ReactNode = renderError, ): React.ComponentType { return (props: TProps) => ( - + - + ); } diff --git a/packages/feature-flags/src/components/featureFlag.component.tsx b/packages/components/src/general/featureFlag.component.tsx similarity index 100% rename from packages/feature-flags/src/components/featureFlag.component.tsx rename to packages/components/src/general/featureFlag.component.tsx diff --git a/packages/components/src/general/index.ts b/packages/components/src/general/index.ts new file mode 100644 index 0000000..92ab926 --- /dev/null +++ b/packages/components/src/general/index.ts @@ -0,0 +1,2 @@ +export * from './errorBoundary.component'; +export * from './featureFlag.component'; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts new file mode 100644 index 0000000..a2836d7 --- /dev/null +++ b/packages/components/src/index.ts @@ -0,0 +1,2 @@ +export * from './general'; +export * from './list'; diff --git a/packages/components/src/list/index.ts b/packages/components/src/list/index.ts new file mode 100644 index 0000000..1aff602 --- /dev/null +++ b/packages/components/src/list/index.ts @@ -0,0 +1 @@ +export * from './linkListItem.component'; diff --git a/packages/frontend/src/components/general/LinkListItem.tsx b/packages/components/src/list/linkListItem.component.tsx similarity index 100% rename from packages/frontend/src/components/general/LinkListItem.tsx rename to packages/components/src/list/linkListItem.component.tsx diff --git a/packages/feature-flags/tsconfig.json b/packages/components/tsconfig.json similarity index 100% rename from packages/feature-flags/tsconfig.json rename to packages/components/tsconfig.json diff --git a/packages/feature-flags/src/index.ts b/packages/feature-flags/src/index.ts deleted file mode 100644 index 8f6db98..0000000 --- a/packages/feature-flags/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/featureFlag.component'; diff --git a/packages/frontend/package.json b/packages/frontend/package.json index bb4667d..016a58f 100644 --- a/packages/frontend/package.json +++ b/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" } diff --git a/packages/frontend/src/components/App.tsx b/packages/frontend/src/app.tsx similarity index 50% rename from packages/frontend/src/components/App.tsx rename to packages/frontend/src/app.tsx index dd36b8b..2f81e20 100644 --- a/packages/frontend/src/components/App.tsx +++ b/packages/frontend/src/app.tsx @@ -1,13 +1,14 @@ 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(); @@ -15,15 +16,17 @@ const configuration: Configuration = getConfiguration(); export const AppComponent = () => ( - - {APP_ROUTES.map((routeProps, index) => ( - + + + {APP_ROUTES.map((routeProps, index) => ( - - ))} - {/* Error 404 Fallback */} - - + ))} + {/* Error 404 Fallback */} + + + + + ); diff --git a/packages/frontend/src/index.tsx b/packages/frontend/src/index.tsx index ad3bc8b..ded7936 100644 --- a/packages/frontend/src/index.tsx +++ b/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(, document.getElementById('root')); diff --git a/packages/frontend/src/components/pages/support/LinkDirectory.tsx b/packages/frontend/src/util/linkDirectory.tsx similarity index 92% rename from packages/frontend/src/components/pages/support/LinkDirectory.tsx rename to packages/frontend/src/util/linkDirectory.tsx index 84964f2..4972ee9 100644 --- a/packages/frontend/src/components/pages/support/LinkDirectory.tsx +++ b/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 = () => (
    diff --git a/packages/frontend/src/util/routes.tsx b/packages/frontend/src/util/routes.tsx index 2428e6e..666485b 100644 --- a/packages/frontend/src/util/routes.tsx +++ b/packages/frontend/src/util/routes.tsx @@ -1,64 +1,9 @@ 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 => , -}; - -/** - * 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 => , -}; - -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 @@ -66,7 +11,7 @@ export const APP_ROUTES: AppRouteProps[] = [HOME_ROUTE, LINK_ROUTE]; * * @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); } diff --git a/packages/frontend/tsconfig.json b/packages/frontend/tsconfig.json index 5976b36..4a55f7b 100644 --- a/packages/frontend/tsconfig.json +++ b/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" } ] } diff --git a/packages/home/package.json b/packages/home/package.json new file mode 100644 index 0000000..cc9f666 --- /dev/null +++ b/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" + } +} diff --git a/packages/frontend/src/components/pages/HomePage.tsx b/packages/home/src/home.page.tsx similarity index 59% rename from packages/frontend/src/components/pages/HomePage.tsx rename to packages/home/src/home.page.tsx index 272989c..aac8236 100644 --- a/packages/frontend/src/components/pages/HomePage.tsx +++ b/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 => , +}; + export const HomePage = (props: HomePageProps) => ( <>

    Main Page

    Elite Sexyz is currently under construction. See discord main channel for more information - - ); diff --git a/packages/home/src/index.ts b/packages/home/src/index.ts new file mode 100644 index 0000000..9879f4a --- /dev/null +++ b/packages/home/src/index.ts @@ -0,0 +1 @@ +export * from './home.page'; diff --git a/packages/home/tsconfig.json b/packages/home/tsconfig.json new file mode 100644 index 0000000..ccfc6c0 --- /dev/null +++ b/packages/home/tsconfig.json @@ -0,0 +1,14 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "rootDir": "src", + "outDir": "dist", + "baseUrl": "src" + }, + "include": ["src/**/*"], + "references": [ + { + "path": "../types" + } + ] +} diff --git a/packages/link/package.json b/packages/link/package.json new file mode 100644 index 0000000..4032feb --- /dev/null +++ b/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" + } +} diff --git a/packages/link/src/index.ts b/packages/link/src/index.ts new file mode 100644 index 0000000..30a5053 --- /dev/null +++ b/packages/link/src/index.ts @@ -0,0 +1 @@ +export * from './link.page'; diff --git a/packages/frontend/src/components/pages/LinkPage.tsx b/packages/link/src/link.page.tsx similarity index 57% rename from packages/frontend/src/components/pages/LinkPage.tsx rename to packages/link/src/link.page.tsx index ef63230..d7bfdde 100644 --- a/packages/frontend/src/components/pages/LinkPage.tsx +++ b/packages/link/src/link.page.tsx @@ -1,11 +1,24 @@ -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 => ( + <> + + + ), +}; + export const LinkPage = (props: LinkPageProps) => ( <>

    Useful Links List

    @@ -13,9 +26,5 @@ export const LinkPage = (props: LinkPageProps) => ( - - - - ); diff --git a/packages/link/tsconfig.json b/packages/link/tsconfig.json new file mode 100644 index 0000000..ccfc6c0 --- /dev/null +++ b/packages/link/tsconfig.json @@ -0,0 +1,14 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "rootDir": "src", + "outDir": "dist", + "baseUrl": "src" + }, + "include": ["src/**/*"], + "references": [ + { + "path": "../types" + } + ] +} diff --git a/packages/types/package.json b/packages/types/package.json index 2f5cf4b..59ded6f 100644 --- a/packages/types/package.json +++ b/packages/types/package.json @@ -9,6 +9,9 @@ "scripts": { "clean": "rm -rf dist/ node_modules/ tsconfig.tsbuildinfo" }, - "devDependencies": {}, + "devDependencies": { + "@types/react": "^16.9.23", + "@types/react-router": "^5.1.4" + }, "dependencies": {} } diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index f03c228..58a6950 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -1 +1,2 @@ export * from './config'; +export * from './routes'; diff --git a/packages/types/src/routes/appPath.type.ts b/packages/types/src/routes/appPath.type.ts new file mode 100644 index 0000000..2920073 --- /dev/null +++ b/packages/types/src/routes/appPath.type.ts @@ -0,0 +1,8 @@ +/** + * All available paths in this app + */ +export enum AppPath { + HOME = '/home', + LINK = '/link', + ERROR = '/', +} diff --git a/packages/types/src/routes/appRoute.type.ts b/packages/types/src/routes/appRoute.type.ts new file mode 100644 index 0000000..2fd581d --- /dev/null +++ b/packages/types/src/routes/appRoute.type.ts @@ -0,0 +1,21 @@ +import { LinkType } from './link.type'; +import { AppPath } from './appPath.type'; +import { RouteProps } from 'react-router'; + +/** + * 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 + */ +export interface AppRoute 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; + + render(props: any): any; +} diff --git a/packages/types/src/routes/index.ts b/packages/types/src/routes/index.ts new file mode 100644 index 0000000..91d063f --- /dev/null +++ b/packages/types/src/routes/index.ts @@ -0,0 +1,3 @@ +export * from './appPath.type'; +export * from './appRoute.type'; +export * from './link.type'; diff --git a/packages/types/src/routes/link.type.ts b/packages/types/src/routes/link.type.ts new file mode 100644 index 0000000..db15a69 --- /dev/null +++ b/packages/types/src/routes/link.type.ts @@ -0,0 +1 @@ +export type LinkType = string; diff --git a/tsconfig.json b/tsconfig.json index 740cc9b..3b035c4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,7 +8,16 @@ "path": "./packages/configuration" }, { - "path": "./packages/feature-flags" + "path": "./packages/decorators" + }, + { + "path": "./packages/components" + }, + { + "path": "./packages/home" + }, + { + "path": "./packages/link" }, { "path": "./packages/frontend" diff --git a/yarn.lock b/yarn.lock index 40fd992..faeb821 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1036,7 +1036,7 @@ "@types/react" "*" "@types/react-router" "*" -"@types/react-router@*", "@types/react-router@^5.1.3": +"@types/react-router@*", "@types/react-router@^5.1.4": version "5.1.4" resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.4.tgz#7d70bd905543cb6bcbdcc6bd98902332054f31a6" integrity sha512-PZtnBuyfL07sqCJvGg3z+0+kt6fobc/xmle08jBiezLS8FrmGeiGkJnuxL/8Zgy9L83ypUhniV5atZn/L8n9MQ== @@ -1051,7 +1051,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^16.9.11", "@types/react@^16.9.16": +"@types/react@*": version "16.9.22" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.22.tgz#f0288c92d94e93c4b43e3f5633edf788b2c040ae" integrity sha512-7OSt4EGiLvy0h5R7X+r0c7S739TCU/LvWbkNOrm10lUwNHe7XPz5OLhLOSZeCkqO9JSCly1NkYJ7ODTUqVnHJQ== @@ -1059,6 +1059,14 @@ "@types/prop-types" "*" csstype "^2.2.0" +"@types/react@^16.9.23": + version "16.9.23" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.23.tgz#1a66c6d468ba11a8943ad958a8cb3e737568271c" + integrity sha512-SsGVT4E7L2wLN3tPYLiF20hmZTPGuzaayVunfgXzUn1x4uHVsKH6QDJQ/TdpHqwsTLd4CwrmQ2vOgxN7gE24gw== + dependencies: + "@types/prop-types" "*" + csstype "^2.2.0" + "@typescript-eslint/eslint-plugin@^2.6.1": version "2.20.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.20.0.tgz#a522d0e1e4898f7c9c6a8e1ed3579b60867693fa"