migration to typesript

Author: MykolaGolubyev

README.md

@@ -1,18 +1,43 @@
 {
   "name": "react-components-viewer",
   "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+  "private": false,
+  "main": "build/lib/components/index.js",
+  "types": "build/lib/components/index.d.ts",
+  "engines": {
+    "node": ">=8.0.0"
   },
-  "devDependencies": {
-    "react-scripts": "1.0.10"
+  "files": [
+    "build/lib"
+  ],
+  "dependencies": {
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-scripts-ts": "2.13.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "start-js": "react-scripts-ts start",
+    "start": "npm-run-all -p watch-sass-to-css start-js",
+    "build-js": "react-scripts-ts build",
+    "build": "npm-run-all -p build-sass-to-css build-js",
+    "build-lib": "tsc && npm run build-sass-to-css && npm run copy-css-to-lib",
+    "test": "react-scripts-ts test --env=jsdom",
+    "eject": "react-scripts-ts eject",
+    "copy-css-to-lib": "npm-run-all -s copy-base-css copy-component-css",
+    "copy-base-css": "cpx \"./src/**/*.css\" ./build/lib/",
+    "copy-component-css": "cpx \"./src/components/**/*.css\" ./build/lib/components",
+    "build-sass-to-css": "node-sass-chokidar src/ -o src/",
+    "watch-sass-to-css": "node-sass-chokidar src/ -o src/ --watch --recursive"
+  },
+  "devDependencies": {
+    "@types/jest": "^22.1.0",
+    "@types/node": "^9.4.0",
+    "@types/react": "^16.0.35",
+    "@types/react-dom": "^16.0.3",
+    "cpx": "^1.5.0",
+    "node-sass-chokidar": "0.0.3",
+    "npm-run-all": "^4.1.2",
+    "typescript": "^2.6.2",
+    "webpack": "^3.10.0"
   }
-}
+}

package-lock.json

@@ -1,8 +1,8 @@
 import React, {Component} from 'react';
 
-import Registry from './registry/Registry';
-import Header from './registry/Header';
-import ComponentsViewer from './viewer/ComponentsViewer';
+import Registry from './components/registry/Registry';
+import Header from './components/registry/Header';
+import ComponentsViewer from './components/viewer/ComponentsViewer';
 
 const TestComponent = ({label}) => <div>TC: {label}</div>;
 const AnotherTestComponent = ({label}) => <div>Another TC: {label}</div>;

package.json

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Component } from 'react';
+
+import Registry from './components/registry/Registry';
+import { Header } from './components/registry/Header';
+import { ComponentsViewer } from './components/viewer/ComponentsViewer';
+
+const TestComponent = ({label}: {label: string}) => <div>TC: {label}</div>;
+const AnotherTestComponent = ({label}: {label: string}) => <div>Another TC: {label}</div>;
+
+const registry = new Registry();
+
+registry.registerAsGrid('Links', {
+    'simple states': <Header label="header one"/>,
+    'state-one': <AnotherTestComponent label="1"/>,
+    'state-two': <AnotherTestComponent label="2"/>,
+    'complex states': <Header label="header two"/>,
+    'state-three': <AnotherTestComponent label="3"/>
+});
+
+registry.registerAsGrid('Buttons', {
+    'disabled': <TestComponent label="1"/>,
+    'enabled': <TestComponent label="2"/>
+});
+
+class Demo extends Component {
+    render() {
+        return (
+            <ComponentsViewer registry={registry}/>
+        );
+    }
+}
+
+export default Demo;

src/App.js

@@ -0,0 +1,15 @@
+import GridLayout from 'components/layouts/GridLayout';
+import { Header } from 'components/registry/Header';
+import Registry from 'components/registry/Registry';
+import ComponentWithDescription from 'components/viewer/ComponentWithDescription';
+import ComponentDemo from 'components/viewer/ComponentDemo';
+import { ComponentsViewer } from 'components/viewer/ComponentsViewer';
+
+export {
+    GridLayout,
+    Registry,
+    Header,
+    ComponentDemo,
+    ComponentsViewer,
+    ComponentWithDescription
+};

src/Demo.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import './GridLayout.css';
+
+export interface LayoutProps {
+    children: JSX.Element[];
+}
+
+const GridLayout = ({children}: LayoutProps) => {
+    return (
+        <div className="grid-layout">
+            {children}
+        </div>
+    );
+};
+
+export default GridLayout;

src/components/index.ts

@@ -0,0 +1,11 @@
+import './Header.css';
+
+import * as React from 'react';
+
+export interface Props {
+    label: string;
+}
+
+const Header = ({label}: Props) => <div className="header">{label}</div>;
+
+export {Header};

src/layouts/GridLayout.css renamed to src/components/layouts/GridLayout.css

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import ComponentDemo from '../viewer/ComponentDemo';
+import GridLayout from '../layouts/GridLayout';
+
+class Registry {
+    _componentsDemo: {[name: string]: JSX.Element} = {};
+
+    registerAsGrid(demoName: string, instancesWithDescription: {[name: string]: JSX.Element}) {
+        this._componentsDemo[demoName] = (
+            <ComponentDemo
+                name={demoName}
+                layoutComponent={GridLayout}
+                instancesWithDescription={instancesWithDescription}
+            />
+        );
+    }
+
+    findComponentsDemoByName(name: string) {
+        return this._componentsDemo[name];
+    }
+
+    get demoNames() {
+        return Object.keys(this._componentsDemo);
+    }
+}
+
+export default Registry;

src/components/layouts/GridLayout.tsx

@@ -1,13 +1,22 @@
-import React, {Component} from 'react';
+import * as React from 'react';
+import { Component } from 'react';
+
 import ComponentWithDescription from './ComponentWithDescription';
 
-import Header from '../registry/Header';
+import { Header } from '../registry/Header';
+import { LayoutProps } from '../layouts/GridLayout';
+
+export interface Props {
+    name: string;
+    layoutComponent: React.ComponentClass<LayoutProps> | React.StatelessComponent<LayoutProps>;
+    instancesWithDescription: {[name: string]: JSX.Element };
+}
 
-class ComponentDemo extends Component {
+class ComponentDemo extends Component<Props> {
     render() {
         const {layoutComponent, instancesWithDescription} = this.props;
-
         const Layout = layoutComponent;
+
         const layoutItems = Object.keys(instancesWithDescription).map(description =>
             createComponent(description, instancesWithDescription[description]));
 
@@ -17,19 +26,22 @@ class ComponentDemo extends Component {
                     {layoutItems}
                 </Layout>
             </div>
-        )
+        );
     }
 }
 
-function createComponent(description, componentInstance) {
+function createComponent(description: string, componentInstance: JSX.Element) {
     if (componentInstance.type === Header) {
         return React.cloneElement(componentInstance, {key: description, label: description});
     }
 
-    return <ComponentWithDescription key={description}
-                                     description={description}
-                                     componentInstance={componentInstance}/>
-
+    return (
+        <ComponentWithDescription
+            key={description}
+            description={description}
+            componentInstance={componentInstance}
+        />
+    );
 }
 
 export default ComponentDemo;

src/registry/Header.css renamed to src/components/registry/Header.css

@@ -1,8 +1,13 @@
-import React from 'react';
+import * as React from 'react';
 
-import './ComponentWithDescription.css'
+import './ComponentWithDescription.css';
 
-const ComponentWithDescription = ({description, componentInstance}) => {
+export interface Props {
+    description: string;
+    componentInstance: JSX.Element;
+}
+
+const ComponentWithDescription = ({description, componentInstance}: Props) => {
     return (
         <div className="component-with-description">
             <div className="description">
@@ -13,7 +18,7 @@ const ComponentWithDescription = ({description, componentInstance}) => {
                 {componentInstance}
             </div>
         </div>
-    )
+    );
 };
 
 export default ComponentWithDescription;

src/components/registry/Header.tsx

@@ -1,23 +1,33 @@
-import React, {Component} from 'react';
+import * as React from 'react';
+import { Component } from 'react';
 
 import './ComponentsViewer.css';
+import Registry from '../registry/Registry';
 
 const queryParamNames = {
-    demoName: "demo"
+    demoName: 'demo'
 };
 
-class ComponentsViewer extends Component {
-    constructor(props) {
+export interface Props {
+    registry: Registry;
+}
+
+export interface State {
+    selectedDemoName: string;
+}
+
+class ComponentsViewer extends Component<Props, State> {
+    constructor(props: Props) {
         super(props);
         const {registry} = this.props;
 
         this.state = {selectedDemoName: registry.demoNames[0]};
     }
 
-    selectDemo = (demoName) => {
+    selectDemo = (demoName: string) => {
         this.setState({selectedDemoName: demoName});
-        window.history.pushState({}, null, `?${queryParamNames.demoName}=` + demoName);
-    };
+        window.history.pushState({}, '', `?${queryParamNames.demoName}=` + demoName);
+    }
 
     render() {
         const {registry} = this.props;
@@ -30,21 +40,21 @@ class ComponentsViewer extends Component {
                 <div className="toc">
                     {registry.demoNames.map(name => {
                         const isSelected = selectedDemoName === name;
-                        const className = "name" + (isSelected ? " selected" : "");
+                        const className = 'name' + (isSelected ? ' selected' : '');
 
                         return (
                             <div key={name} className={className} onClick={() => this.selectDemo(name)}>
                                 {name}
                             </div>
-                        )
+                        );
                     })}
 
                 </div>
                 <div className="preview">
                     {componentsDemo}
                 </div>
             </div>
-        )
+        );
     }
 
     componentDidMount() {
@@ -56,4 +66,4 @@ class ComponentsViewer extends Component {
     }
 }
 
-export default ComponentsViewer;
+export {ComponentsViewer};

src/components/registry/Registry.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import Demo from './Demo';
+
+ReactDOM.render(
+    <Demo />,
+    document.getElementById('root') as HTMLElement
+);