core app/components/styles demo

README.md

@@ -4,6 +4,11 @@
 
 This project was generated using [Nx](https://nx.dev).
 
+Things to try:
+- `npm nx serve nx-core-demo` to run the app
+- `npm nx build core-components` to create a distributable library for the core components.
+- `npm nx build core-styles` to build the style library.
+
 <p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="450"></p>
 
 🔎 **Smart, Fast and Extensible Build System**

apps/nx-core-demo/project.json

@@ -28,7 +28,8 @@
           "extractLicenses": false,
           "optimization": false,
           "sourceMap": true,
-          "vendorChunk": true
+          "vendorChunk": true,
+          "watch": true
         },
         "production": {
           "fileReplacements": [

apps/nx-core-demo/src/app/app.spec.tsx

@@ -12,6 +12,6 @@ describe('App', () => {
   it('should have a greeting as the title', () => {
     const { getByText } = render(<App />);
 
-    expect(getByText(/Welcome nx-core-demo/gi)).toBeTruthy();
+    expect(getByText(/hello/gi)).toBeTruthy();
   });
 });

apps/nx-core-demo/src/app/app.tsx

@@ -1,12 +1,14 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import styles from './app.module.scss';
-import NxWelcome from './nx-welcome';
+import { Message } from '@tacc/core-components';
+import '@tacc/core-styles';
+
 
 export function App() {
   return (
     <>
-      <NxWelcome title="nx-core-demo" />
-      <div />
+      <div>hello nx</div>
+      <Message/>
     </>
   );
 }

libs/core-components/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/core-components/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/core-components/README.md

@@ -0,0 +1,7 @@
+# core-components
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test core-components` to execute the unit tests via [Jest](https://jestjs.io).

libs/core-components/jest.config.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+  displayName: 'core-components',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': 'babel-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/libs/core-components',
+};

libs/core-components/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@tacc/core-components",
+  "version": "0.0.1"
+}

libs/core-components/project.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/core-components/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nrwl/web:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/core-components",
+        "tsConfig": "libs/core-components/tsconfig.lib.json",
+        "project": "libs/core-components/package.json",
+        "entryFile": "libs/core-components/src/index.ts",
+        "external": ["react/jsx-runtime"],
+        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+        "compiler": "babel",
+        "assets": [
+          {
+            "glob": "libs/core-components/README.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/core-components/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/libs/core-components"],
+      "options": {
+        "jestConfig": "libs/core-components/jest.config.ts",
+        "passWithNoTests": true
+      }
+    }
+  }
+}

libs/core-components/src/index.ts

@@ -0,0 +1 @@
+export { default as Message } from './lib/core-components';

libs/core-components/src/lib/core-components.module.scss

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

libs/core-components/src/lib/core-components.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import CoreComponents from './core-components';
+
+describe('CoreComponents', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<CoreComponents />);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/core-components/src/lib/core-components.tsx

@@ -0,0 +1,14 @@
+import styles from './core-components.module.scss';
+
+/* eslint-disable-next-line */
+export interface CoreComponentsProps {}
+
+export function CoreComponents(props: CoreComponentsProps) {
+  return (
+    <div className={styles['container']}>
+      <h1>Welcome to CoreComponents!</h1>
+    </div>
+  );
+}
+
+export default CoreComponents;

libs/core-components/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/core-components/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "jest.config.ts",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

libs/core-components/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

libs/core-styles/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [["@nrwl/web/babel", { "useBuiltIns": "usage" }]]
+}

libs/core-styles/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/core-styles/README.md

@@ -0,0 +1,11 @@
+# core-styles
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test core-styles` to execute the unit tests via [Jest](https://jestjs.io).
+
+## Running lint
+
+Run `nx lint core-styles` to execute the lint via [ESLint](https://eslint.org/).

libs/core-styles/jest.config.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+export default {
+  displayName: 'core-styles',
+  preset: '../../jest.preset.js',
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+    },
+  },
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]sx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/libs/core-styles',
+};

libs/core-styles/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@tacc/core-styles",
+  "version": "0.0.1"
+}

libs/core-styles/project.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/core-styles/src",
+  "projectType": "library",
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/core-styles/**/*.ts"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/libs/core-styles"],
+      "options": {
+        "jestConfig": "libs/core-styles/jest.config.ts",
+        "passWithNoTests": true
+      }
+    },
+    "build": {
+      "executor": "@nrwl/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/core-styles",
+        "tsConfig": "libs/core-styles/tsconfig.lib.json",
+        "packageJson": "libs/core-styles/package.json",
+        "main": "libs/core-styles/src/index.ts",
+        "assets": ["libs/core-styles/*.md", "libs/core-styles/**/*.scss"]
+      }
+    }
+  },
+  "tags": []
+}

libs/core-styles/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/core-styles';

libs/core-styles/src/lib/core-styles.scss

@@ -0,0 +1,3 @@
+body {
+    background-color: lavender;
+}

libs/core-styles/src/lib/core-styles.spec.ts

@@ -0,0 +1,7 @@
+import { coreStyles } from './core-styles';
+
+describe('coreStyles', () => {
+  it('should work', () => {
+    expect(coreStyles()).toEqual('core-styles');
+  });
+});

libs/core-styles/src/lib/core-styles.ts

@@ -0,0 +1,4 @@
+import './core-styles.scss';
+export function coreStyles(): string {
+  return 'core-styles';
+}

libs/core-styles/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/core-styles/tsconfig.lib.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "exclude": ["jest.config.ts", "**/*.spec.ts", "**/*.test.ts"],
+  "include": ["**/*.ts"]
+}