feat: add app-bar

Author: Draeken

package-lock.json

@@ -29,7 +29,6 @@
   "homepage": "https://github.com/AutoScheduleJS/react-elements#readme",
   "peerDependencies": {
     "emotion": "^10.0.5",
-    "emotion-theming": "^10.0.5",
     "react": "^16.7.0"
   },
   "devDependencies": {
@@ -49,10 +48,11 @@
     "@types/storybook__react": "^4.0.1",
     "awesome-typescript-loader": "^5.2.1",
     "emotion": "^10.0.9",
-    "emotion-theming": "^10.0.10",
     "jest": "^24.0.0",
     "react": "^16.8.6",
     "ts-jest": "^24.0.0",
+    "tslint": "^5.15.0",
+    "tslint-config-prettier": "^1.18.0",
     "tslint-react": "^4.0.0",
     "typescript": "^3.3.4000"
   }

package.json

@@ -1,14 +1,10 @@
 import { css } from 'emotion';
-import { withTheme } from 'emotion-theming';
 import * as React from 'react';
 import { ElevationProps } from '../elevation/elevation';
 import { merge, mergeProps } from '../util/hoc.util';
+import { ThemeContext } from '../util/theme';
 
-interface CustomableProps extends React.HTMLAttributes<HTMLDivElement> {
-  theme?: any;
-}
-
-interface AppBarProps extends CustomableProps {}
+interface AppBarProps extends React.HTMLAttributes<HTMLDivElement> {}
 
 interface AppBarTheme {
   appBar: {
@@ -22,7 +18,7 @@ const defaultTheme = (theme: any): AppBarTheme =>
     {
       appBar: {
         elevation: 4,
-        totalHeight: '58px'
+        totalHeight: '58px',
       },
     },
     theme
@@ -37,21 +33,13 @@ const AppBarRootStyles = (theme: AppBarTheme) => ({
 /**
  * AppBar container. Not responsible for hiding/reveal upon scroll (should be another component -> when tabs & app-bar are unified, this behavior should be)
  */
-class AppBarImpl extends React.PureComponent<AppBarProps> {
-  render() {
-    const {
-      children,
-      theme: incomingTheme,
-      ...defaultHostProps
-    } = this.props;
-    const theme = defaultTheme(incomingTheme);
-    const hostProps = mergeProps(
-      ElevationProps(theme.appBar.elevation, theme),
-      AppBarRootStyles(theme),
-      defaultHostProps
-    );
-    return <div {...hostProps}>{children}</div>;
-  }
-}
-
-export const AppBar = withTheme(AppBarImpl);
+export const AppBar: React.FunctionComponent<AppBarProps> = props => {
+  const { children, ...defaultHostProps } = props;
+  const theme = defaultTheme(React.useContext(ThemeContext));
+  const hostProps = mergeProps(
+    ElevationProps(theme.appBar.elevation, theme),
+    AppBarRootStyles(theme),
+    defaultHostProps
+  );
+  return <div {...hostProps}>{children}</div>;
+};

src/app-bar/app-bar.tsx

@@ -0,0 +1,3 @@
+import { createContext} from 'react';
+
+export const ThemeContext = createContext({});

src/util/theme.ts

@@ -1,9 +1,8 @@
-import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import { css } from 'emotion';
-
+import * as React from 'react';
 import { AppBar } from '../src/app-bar/app-bar';
-import { ThemeProvider } from 'emotion-theming';
+import { ThemeContext } from '../src/util/theme';
 
 const classFlex = css`
   display: flex;
@@ -13,14 +12,14 @@ storiesOf('Component/Material/AppBar', module)
   .addDecorator(story => <div className={classFlex}>{story()}</div>)
   .add('default', () => <AppBar>Subarashi AppBar</AppBar>)
   .add('with custom theme', () => (
-    <ThemeProvider
-      theme={{
+    <ThemeContext.Provider
+      value={{
         appBar: {
           elevation: 12,
           totalHeight: '100px',
         },
       }}
     >
       <AppBar>Subarashi AppBar</AppBar>
-    </ThemeProvider>
+    </ThemeContext.Provider>
   ));

stories/app-bar.stories.tsx

@@ -2,9 +2,12 @@
     "defaultSeverity": "error",
     "extends": [
         "tslint:latest",
-        "tslint-react"
+        "tslint-react",
+        "tslint-config-prettier"
     ],
     "jsRules": {},
-    "rules": {},
+    "rules": {
+        "interface-name": false
+    },
     "rulesDirectory": []
 }