Merge pull request #9 from elite-se/feature/feature-flags

Feature/feature flags

development.configuration.ts

@@ -0,0 +1,9 @@
+import { Configuration } from 'elite-types';
+
+const configuration: Configuration = {
+  featureMap: {
+    'under-construction-message': true,
+  },
+};
+
+export default configuration;

package.json

@@ -13,8 +13,9 @@
     "lint": "eslint './packages/*/src/**/*.{ts,d.ts}' --max-warnings 0",
     "lint:fix": "eslint './packages/*/src/**/*.{ts,d.ts}' --fix",
     "build": "tsc -b && lerna run webpack:build --stream",
-    "start": "lerna run production:start --stream",
-    "frontend:watch": "lerna run frontend:watch --stream"
+    "frontend:start": "lerna run frontend:start --stream",
+    "frontend:watch": "lerna run frontend:watch --stream",
+    "watch": "tsc -b -w"
   },
   "devDependencies": {
     "@hot-loader/react-dom": "^16.11.0",

packages/configuration/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "elite-configuration",
+  "version": "1.0.0",
+  "private": true,
+  "publishConfig": {
+    "access": "public"
+  },
+  "types": "dist/index.d.ts",
+  "main": "dist/index.js",
+  "scripts": {
+    "clean": "rm -rf dist/ node_modules/ tsconfig.tsbuildinfo"
+  },
+  "devDependencies": {
+    "elite-types": "^1.0.0"
+  }
+}

packages/configuration/src/development.configuration.ts

@@ -0,0 +1 @@
+../../../development.configuration.ts

packages/configuration/src/index.ts

@@ -0,0 +1,7 @@
+import devConfig from './development.configuration';
+import prodConfig from './production.configuration';
+import { Configuration } from 'elite-types';
+
+export function getConfiguration(): Configuration {
+  return process.env.NODE_ENV === 'development' ? devConfig : prodConfig;
+}

packages/configuration/src/production.configuration.ts

@@ -0,0 +1 @@
+../../../production.configuration.ts

packages/configuration/tsconfig.json

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

packages/feature-flags/package.json

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

packages/feature-flags/src/components/featureFlag.component.tsx

@@ -0,0 +1,29 @@
+import React, { PureComponent, createContext, Context } from 'react';
+import { FeatureMap } from 'elite-types';
+
+const FeatureFlags: Context<FeatureMap> = createContext<FeatureMap>({});
+
+export interface FeatureToggleProperties {
+  readonly inverted?: boolean;
+  readonly featureName: string;
+}
+
+export class FeatureFlag extends PureComponent<FeatureToggleProperties> {
+  render() {
+    const { children, inverted, featureName } = this.props;
+
+    return (
+      <FeatureFlags.Consumer>
+        {(featureMap: FeatureMap) => {
+          if ((featureMap[featureName] && !inverted) || (!featureMap[featureName] && inverted)) {
+            return children;
+          } else {
+            return null;
+          }
+        }}
+      </FeatureFlags.Consumer>
+    );
+  }
+}
+
+export const FeatureFlagsProvider = FeatureFlags.Provider;

packages/feature-flags/src/index.ts

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

packages/feature-flags/tsconfig.json

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

packages/frontend/package.json

@@ -7,23 +7,25 @@
   },
   "scripts": {
     "frontend:watch": "webpack-dev-server --mode development --color --hot --progress",
+    "frontend:start": "webpack-dev-server --mode production --color --progress",
     "webpack:build": "webpack --mode production",
-    "clean": "rm -rf dist/"
+    "clean": "rm -rf dist/ node_modules/ tsconfig.tsbuildinfo"
   },
   "devDependencies": {
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.4",
     "@types/react-router": "^5.1.3",
     "@types/react-router-dom": "^5.1.3",
-    "elite-types": "^1.0.0",
-    "replace": "^1.1.3"
+    "elite-types": "^1.0.0"
   },
   "dependencies": {
     "@material-ui/core": "^4.9.3",
     "@material-ui/icons": "^4.9.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2"
+    "react-router-dom": "^5.1.2",
+    "elite-feature-flags": "^1.0.0",
+    "elite-configuration": "^1.0.0"
   }
 }

packages/frontend/src/components/App.tsx

@@ -4,14 +4,23 @@ import { Route, Switch } from 'react-router';
 import { Router } from 'react-router-dom';
 import { APP_ROUTES, ERROR_404_PAGE } from '../util/approutes';
 import history from '../util/history';
+import { FeatureFlagsProvider } from 'elite-feature-flags';
+import { Configuration } from 'elite-types';
+import { getConfiguration } from 'elite-configuration';
+
+const configuration: Configuration = getConfiguration();
 
 export const AppComponent = () => (
-  <Router history={history}>
-    <Switch>
-      {APP_ROUTES.map((routeProps, index) => <Route key={index} {...routeProps} />)}
-      <Route {...ERROR_404_PAGE} />
-    </Switch>
-  </Router>
+  <FeatureFlagsProvider value={configuration.featureMap}>
+    <Router history={history}>
+      <Switch>
+        {APP_ROUTES.map((routeProps, index) => (
+          <Route key={index} {...routeProps} />
+        ))}
+        <Route {...ERROR_404_PAGE} />
+      </Switch>
+    </Router>
+  </FeatureFlagsProvider>
 );
 
-export const App = hot(module)(AppComponent);
+export const App = hot(module)(AppComponent);

packages/frontend/src/components/pages/HomePage.tsx

@@ -2,13 +2,16 @@ import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
 import { LinkDirectory } from './support/LinkDirectory';
 import { Divider } from '@material-ui/core';
+import { FeatureFlag } from 'elite-feature-flags';
 
 export interface HomePageProps extends RouteComponentProps {}
 
 export const HomePage = (props: HomePageProps) => (
   <>
     <h1>Main Page</h1>
-    Elite Sexyz is currently under construction. See discord main channel for more information
+    <FeatureFlag featureName="under-construction-message">
+      Elite Sexyz is currently under construction. See discord main channel for more information
+    </FeatureFlag>
     <Divider />
     <LinkDirectory />
   </>

packages/frontend/src/index.tsx

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

packages/frontend/tsconfig.json

@@ -7,6 +7,12 @@
   },
   "include": ["src/**/*"],
   "references": [
+    {
+      "path": "../configuration"
+    },
+    {
+      "path": "../feature-flags"
+    },
     {
       "path": "../types"
     }

packages/types/src/config/configuration.type.ts

@@ -0,0 +1,5 @@
+import { FeatureMap } from './featureMap.type';
+
+export type Configuration = {
+  featureMap: FeatureMap;
+};

packages/types/src/config/featureMap.type.ts

@@ -0,0 +1 @@
+export type FeatureMap = { [key: string]: boolean };

packages/types/src/config/index.ts

@@ -0,0 +1,2 @@
+export * from './configuration.type';
+export * from './featureMap.type';

packages/types/src/index.ts

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

production.configuration.ts

@@ -0,0 +1,9 @@
+import { Configuration } from 'elite-types';
+
+const configuration: Configuration = {
+  featureMap: {
+    'under-construction-message': false,
+  },
+};
+
+export default configuration;

tsconfig.json

@@ -4,6 +4,12 @@
     {
       "path": "./packages/types"
     },
+    {
+      "path": "./packages/configuration"
+    },
+    {
+      "path": "./packages/feature-flags"
+    },
     {
       "path": "./packages/frontend"
     }

yarn.lock

@@ -5546,7 +5546,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-minimatch@3.0.4, minimatch@^3.0.4:
+minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -7094,15 +7094,6 @@ repeating@^2.0.0:
   dependencies:
     is-finite "^1.0.0"
 
-replace@^1.1.3:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/replace/-/replace-1.1.5.tgz#adac4e0cd111b57da568393cba03f3ef8fac7f96"
-  integrity sha512-Mww6GyTix4GqN1GSbJDkUzftkjQE0xfzzlGkFF26ukm8DBzgwGPFntvmVsvAKJogwSSMjvAoZei7fJ2tfiKMcA==
-  dependencies:
-    chalk "2.4.2"
-    minimatch "3.0.4"
-    yargs "^12.0.5"
-
 request@^2.88.0:
   version "2.88.2"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
@@ -8851,7 +8842,7 @@ yargs-parser@^15.0.0:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-[email protected], yargs@^12.0.5:
+[email protected]:
   version "12.0.5"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
   integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==