Add build.

.gitignore

@@ -3,7 +3,6 @@
 *node_modules/
 
 # Build artefacts
-*build/
 .next/
 styleguide/out
 test/shared/sampleApplication/out

build/lib/Documentation.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+declare const Documentation: () => ReactElement;
+export { Documentation };

build/lib/Documentation.js

@@ -0,0 +1,130 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Documentation = void 0;
+const _1 = require(".");
+const react_1 = __importDefault(require("react"));
+const Documentation = () => (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(_1.Headline, null, "thenativeweb-ux"),
+    react_1.default.createElement(_1.Paragraph, null, "thenativeweb-ux provides UI components for the native web applications."),
+    react_1.default.createElement(_1.Headline, { level: '2' }, "Quick start"),
+    react_1.default.createElement(_1.Paragraph, null,
+        "First you need to install the module. ",
+        react_1.default.createElement("code", null, "thenativeweb-ux"),
+        " builds upon ",
+        react_1.default.createElement("code", null, "React"),
+        " and ",
+        react_1.default.createElement("code", null, "Next.js"),
+        ", so make sure to install them as well."),
+    react_1.default.createElement(_1.Code, { language: 'shell' }, `
+      npm install thenativeweb-ux react react-dom next
+    `),
+    react_1.default.createElement(_1.Headline, { level: '3' }, "Create a theme"),
+    react_1.default.createElement(_1.Paragraph, null, "To style your application, you need to create a theme:"),
+    react_1.default.createElement(_1.Code, { language: 'shell' }, `
+      touch theme.ts
+    `),
+    react_1.default.createElement(_1.Paragraph, null, "In most of the cases you can just use one of the built-in themes:"),
+    react_1.default.createElement(_1.Code, { language: 'typescript', showLineNumbers: true }, `
+      import { themes } from 'thenativeweb-ux';
+
+      const theme = new themes.TheNativeWeb();
+
+      export { theme };
+    `),
+    react_1.default.createElement(_1.Headline, { level: '3' }, "Create a document"),
+    react_1.default.createElement(_1.Paragraph, null,
+        "To setup server side rendering of the critical styles for your application, create a custom ",
+        react_1.default.createElement("code", null, "_document.ts"),
+        "."),
+    react_1.default.createElement(_1.Code, { language: 'shell' }, `
+      mkdir pages
+      touch pages/_document.ts
+    `),
+    react_1.default.createElement(_1.Paragraph, null,
+        "Import and extend the ",
+        react_1.default.createElement("code", null, "NextDocument"),
+        " component. Make sure to override its ",
+        react_1.default.createElement("code", null, "getInitialProps"),
+        " method. Use the static method ",
+        react_1.default.createElement("code", null, "NextDocument.getInitialPropsWithTheme"),
+        " to setup your theme:"),
+    react_1.default.createElement(_1.Code, { language: 'typescript', showLineNumbers: true }, `
+      import { NextDocument } from 'thenativeweb-ux';
+      import { theme } from '../theme';
+      import { DocumentContext, DocumentInitialProps } from 'next/document';
+
+      class CustomDocument extends NextDocument {
+        public static async getInitialProps (originalContext: DocumentContext): Promise<DocumentInitialProps> {
+          return NextDocument.getInitialPropsWithTheme(originalContext, theme);
+        }
+      }
+
+      export default CustomDocument;
+    `),
+    react_1.default.createElement(_1.Headline, { level: '3' }, "Create an app"),
+    react_1.default.createElement(_1.Paragraph, null,
+        "To remove server side styles once the application has been loaded on the client, create a custom ",
+        react_1.default.createElement("code", null, "_app.ts"),
+        ":"),
+    react_1.default.createElement(_1.Code, { language: 'shell' }, `
+      touch pages/_app.ts
+    `),
+    react_1.default.createElement(_1.Paragraph, null,
+        "Import and extend the ",
+        react_1.default.createElement("code", null, "NextApp"),
+        " component. Override its ",
+        react_1.default.createElement("code", null, "render"),
+        " method. Use the ",
+        react_1.default.createElement("code", null, "NextApp.renderWithTheme"),
+        " to setup your theme properly. You can render any HTML here that you might need for your application."),
+    react_1.default.createElement(_1.Code, { language: 'tsx', showLineNumbers: true }, `
+      import { theme } from '../theme';
+      import { NextApp, Website } from 'thenativeweb-ux';
+      import React, { ReactElement } from 'react';
+
+      class CustomApp extends NextApp {
+        public render (): ReactElement {
+          const { Component, pageProps } = this.props;
+
+          return NextApp.renderWithTheme((
+            <Website>
+              <Component { ...pageProps } />
+            </Website>
+          ), theme);
+        }
+      }
+
+      export default CustomApp;
+    `),
+    react_1.default.createElement(_1.Headline, { level: '3' }, "Create your first page"),
+    react_1.default.createElement(_1.Paragraph, null, "Add an index page to your application:"),
+    react_1.default.createElement(_1.Code, { language: 'shell' }, `
+      touch pages/index.tsx
+    `),
+    react_1.default.createElement(_1.Paragraph, null,
+        "Besides setting up the page itself, you may also use a variety of components. To use a component, you need to add a reference to it. E.g., to use the ",
+        react_1.default.createElement("code", null, "Headline"),
+        " component, add the following line to your code:"),
+    react_1.default.createElement(_1.Code, { language: 'tsx', showLineNumbers: true }, `
+      import React, { ReactElement, Fragment } from 'react';
+      import { Paragraph, Headline } from 'thenativeweb-ux';
+
+      export default (): ReactElement => (
+        <Fragment>
+          <Headline>Your first page</Headline>
+          <Paragraph>Now go ahead and add more components…</Paragraph>
+        </Fragment>
+      );
+    `),
+    react_1.default.createElement(_1.Headline, { level: '3' }, "Runing your application"),
+    react_1.default.createElement(_1.Paragraph, null,
+        "Finally, you can run your application using the ",
+        react_1.default.createElement("code", null, "next"),
+        " CLI:"),
+    react_1.default.createElement(_1.Code, { language: 'shell' }, `
+      npx next dev
+    `)));
+exports.Documentation = Documentation;

build/lib/NextApp.d.ts

@@ -0,0 +1,8 @@
+import App from 'next/app';
+import { ReactElement } from 'react';
+import { Theme } from '.';
+declare class NextApp extends App {
+    componentDidMount(): void;
+    static renderWithTheme(children: ReactElement, theme: Theme): ReactElement;
+}
+export { NextApp };

build/lib/NextApp.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextApp = void 0;
+const app_1 = __importDefault(require("next/app"));
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+class NextApp extends app_1.default {
+    /* eslint-disable class-methods-use-this */
+    componentDidMount() {
+        (0, _1.removeServerSideStyles)();
+    }
+    /* eslint-enable class-methods-use-this */
+    static renderWithTheme(children, theme) {
+        return (react_1.default.createElement(_1.ThemeProvider, { theme: theme }, children));
+    }
+}
+exports.NextApp = NextApp;

build/lib/NextDocument.d.ts

@@ -0,0 +1,6 @@
+import Document, { DocumentContext, DocumentInitialProps } from 'next/document';
+import { Theme } from '.';
+declare class NextDocument extends Document {
+    static getInitialPropsWithTheme(originalContext: DocumentContext, theme: Theme): Promise<DocumentInitialProps>;
+}
+export { NextDocument };

build/lib/NextDocument.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextDocument = void 0;
+const document_1 = __importDefault(require("next/document"));
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+class NextDocument extends document_1.default {
+    static async getInitialPropsWithTheme(originalContext, theme) {
+        const serverSideStyles = new _1.ServerSideStyles();
+        const staticGlobalStyles = new _1.StaticGlobalStyles({ theme });
+        const customContext = {
+            ...originalContext,
+            async renderPage() {
+                return await originalContext.renderPage({
+                    enhanceApp(App) {
+                        return (props) => (react_1.default.createElement(_1.StyleCollector, { serverSideStyles: serverSideStyles },
+                            react_1.default.createElement(App, { ...props })));
+                    }
+                });
+            }
+        };
+        const initialProps = await NextDocument.getInitialProps(customContext);
+        return {
+            ...initialProps,
+            styles: (react_1.default.createElement(react_1.default.Fragment, null,
+                initialProps.styles,
+                serverSideStyles.generateStyleTag(),
+                staticGlobalStyles.generateStyleTag()))
+        };
+    }
+}
+exports.NextDocument = NextDocument;

build/lib/bin/getHandlers.d.ts

@@ -0,0 +1,3 @@
+import { Handlers } from 'command-line-interface';
+declare const getHandlers: () => Partial<Handlers>;
+export { getHandlers };

build/lib/bin/getHandlers.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHandlers = void 0;
+const buntstift_1 = require("buntstift");
+const getHandlers = function () {
+    return {
+        commandFailed({ ex }) {
+            var _a;
+            if (ex.stack) {
+                buntstift_1.buntstift.verbose((_a = ex.stack) !== null && _a !== void 0 ? _a : '', { isVerboseModeEnabled: true });
+            }
+        },
+        commandUnknown({ unknownCommandName, recommendedCommandName }) {
+            buntstift_1.buntstift.error(`Unknown command '${unknownCommandName}', did you mean '${recommendedCommandName}'?`);
+        },
+        optionInvalid({ reason }) {
+            buntstift_1.buntstift.error(reason);
+        },
+        optionMissing({ optionDefinition }) {
+            buntstift_1.buntstift.error(`Option '${optionDefinition.name}' is missing.`);
+        },
+        optionUnknown({ optionName }) {
+            buntstift_1.buntstift.error(`Unknown option '${optionName}'.`);
+        }
+    };
+};
+exports.getHandlers = getHandlers;

build/lib/bin/ux.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

build/lib/bin/ux.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const buntstift_1 = require("buntstift");
+const getHandlers_1 = require("./getHandlers");
+const rootCommand_1 = require("../cli/rootCommand");
+const command_line_interface_1 = require("command-line-interface");
+/* eslint-disable @typescript-eslint/no-floating-promises */
+(async () => {
+    try {
+        await (0, command_line_interface_1.runCli)({
+            rootCommand: (0, rootCommand_1.rootCommand)(),
+            argv: process.argv,
+            handlers: (0, getHandlers_1.getHandlers)()
+        });
+    }
+    catch (ex) {
+        buntstift_1.buntstift.info(ex.message);
+        buntstift_1.buntstift.error('An unexpected error occured.');
+        process.exit(1);
+    }
+})();
+/* eslint-enable @typescript-eslint/no-floating-promises */

build/lib/cli/RootOptions.d.ts

@@ -0,0 +1,3 @@
+export interface RootOptions {
+    verbose: boolean;
+}

build/lib/cli/RootOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

build/lib/cli/noop.d.ts

@@ -0,0 +1,2 @@
+declare const noop: () => void;
+export { noop };

build/lib/cli/noop.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noop = void 0;
+const noop = () => {
+    // Intentionally left blank.
+};
+exports.noop = noop;

build/lib/cli/optimizeImages/OptimizeImagesOptions.d.ts

@@ -0,0 +1,5 @@
+import { RootOptions } from '../RootOptions';
+export interface OptimizeImagesOptions extends RootOptions {
+    source: string;
+    destination: string;
+}

build/lib/cli/optimizeImages/OptimizeImagesOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

build/lib/cli/optimizeImages/optimizeImages.d.ts

@@ -0,0 +1,6 @@
+declare const optimizeImages: ({ source, destination, verbose }: {
+    source: string;
+    destination: string;
+    verbose: boolean;
+}) => Promise<void>;
+export { optimizeImages };

build/lib/cli/optimizeImages/optimizeImages.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.optimizeImages = void 0;
+const buntstift_1 = require("buntstift");
+const fs_extra_1 = require("fs-extra");
+const globby_1 = __importDefault(require("globby"));
+const optimizeJpg_1 = require("./optimizeJpg");
+const optimizePng_1 = require("./optimizePng");
+const optimizeSvg_1 = require("./optimizeSvg");
+const os_1 = __importDefault(require("os"));
+const path_1 = __importDefault(require("path"));
+const p_queue_1 = __importDefault(require("p-queue"));
+const optimizerForExtension = {
+    jpg: optimizeJpg_1.optimizeJpg,
+    jpeg: optimizeJpg_1.optimizeJpg,
+    png: optimizePng_1.optimizePng,
+    svg: optimizeSvg_1.optimizeSvg
+};
+const supportedExtensions = Object.keys(optimizerForExtension);
+const optimizeImages = async function ({ source, destination, verbose }) {
+    const queue = new p_queue_1.default({ concurrency: os_1.default.cpus().length });
+    const imagePaths = await (0, globby_1.default)(source, {
+        expandDirectories: {
+            extensions: supportedExtensions
+        }
+    });
+    for (const imagePath of imagePaths) {
+        const relativeimagePath = path_1.default.relative(source, imagePath);
+        const extensionName = path_1.default.extname(imagePath).toLowerCase().replace('.', '');
+        const destinationPath = path_1.default.join(destination, relativeimagePath);
+        const optimizeImage = optimizerForExtension[extensionName];
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        queue.add(async () => {
+            buntstift_1.buntstift.verbose(`Optimizing '${imagePath}'...`);
+            await (0, fs_extra_1.ensureFile)(destinationPath);
+            await optimizeImage({ source: imagePath, destination: destinationPath, verbose });
+            buntstift_1.buntstift.verbose(`Optimized '${imagePath}'.`);
+        });
+    }
+    await queue.onIdle();
+};
+exports.optimizeImages = optimizeImages;

build/lib/cli/optimizeImages/optimizeImagesCommand.d.ts

@@ -0,0 +1,4 @@
+import { Command } from 'command-line-interface';
+import { OptimizeImagesOptions } from './OptimizeImagesOptions';
+declare const optimizeImagesCommand: () => Command<OptimizeImagesOptions>;
+export { optimizeImagesCommand };