Merge branch 'swapping-webpack-for-ts-compiler'

Author: Shenato

.eslintrc.js

@@ -4,10 +4,12 @@ const aliases = require('./scripts/aliases.js');
 
 module.exports = {
   extends: [
+    'eslint:recommended',
     'airbnb',
     'plugin:prettier/recommended',
     'plugin:storybook/recommended',
     'plugin:testing-library/dom',
+    'plugin:@typescript-eslint/recommended',
   ],
   plugins: ['prettier', 'react-hooks', 'typescript'],
   overrides: [
@@ -23,7 +25,7 @@ module.exports = {
     browser: true,
     jest: true,
   },
-  parser: 'babel-eslint',
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 8,
     ecmaFeatures: {

.github/workflows/main.yml

@@ -30,10 +30,9 @@ jobs:
       # Setup .npmrc file to publish to GitHub Packages
       - uses: actions/setup-node@v2
         with:
-          node-version: '12.x'
+          node-version: '16.x'
           registry-url: 'https://registry.npmjs.org'
 
-
       - name: Get the version
         id: get_version
         run: echo ::set-output name=VERSION::$( git describe --tag --abbrev=0 )
@@ -55,12 +54,13 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: '12.x'
+          node-version: '16.x'
           registry-url: 'https://npm.pkg.github.com'
+          scope: '@shenato'
 
       - name: Prefix with scope
         run: npm run prepublishGit
-        
+       
       - name: publish-git
         run: npm publish
         env:

.github/workflows/test.yml

@@ -17,7 +17,7 @@ jobs:
       # Setup .npmrc file to publish to GitHub Packages
       - uses: actions/setup-node@v2
         with:
-          node-version: '12.x'
+          node-version: '16.x'
           registry-url: 'https://registry.npmjs.org'
 
       - run: npm ci
@@ -26,5 +26,7 @@ jobs:
 
       - run: npm run build
 
+      - run: npm run build-storybook
+
       - name: run unit tests
         run: npm test

.storybook/main.js

@@ -9,6 +9,10 @@ const SRC_DIR = path.resolve(ROOT_DIR, '/src');
 // Export a function. Accept the base config as the only param.
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
+  typescript: {
+    reactDocgen: false,
+  },
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -34,9 +38,7 @@ module.exports = {
     // Make whatever fine-grained changes you need
     config.module.rules.push({
       test: /\.(js|jsx)$/,
-      exclude: {
-        test: path.resolve(ROOT_DIR, 'node_modules'),
-      },
+      exclude: [path.resolve(ROOT_DIR, 'node_modules')],
       use: {
         loader: 'babel-loader',
         options: {
@@ -56,7 +58,14 @@ module.exports = {
     config.module.rules.push({
       test: /\.(ts|tsx)$/,
       exclude: /node_modules/,
-      use: ['ts-loader'],
+      use: [
+        {
+          loader: 'ts-loader',
+          options: {
+            configFile: 'tsconfig.node.json',
+          },
+        },
+      ],
     });
     config.resolve.extensions.push('.ts', '.tsx');
     // Alternately, for an alias:
@@ -70,4 +79,13 @@ module.exports = {
     // Return the altered config
     return config;
   },
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
 };

.storybook/preview.js

@@ -1,8 +1,6 @@
-import { addDecorator } from '@storybook/react';
 
 import 'minireset.css/minireset.min.css';
 
-addDecorator(storyFn => storyFn());
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

.vscode/settings.json

@@ -1,12 +1,4 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "peacock.color": "#fd9d5a",
-  "workbench.colorCustomizations": {
-    "sash.hoverBorder": "#febb8c",
-    "statusBar.background": "#fd9d5a",
-    "statusBar.foreground": "#15202b",
-    "statusBarItem.hoverBackground": "#fc7f28",
-    "statusBarItem.remoteBackground": "#fd9d5a",
-    "statusBarItem.remoteForeground": "#15202b"
-  }
+  "peacock.color": "#fd9d5a"
 }

demos/create-react-app/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

demos/create-react-app/README.md

@@ -0,0 +1,40 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## How to test the library against nextjs demo
+- in root of project, run `npm run test-lib-build` if you haven't already to generate the `g-loot-react-tournament-brackets-1.0.0.tar.gz` local package for testing
+- `cd demos/create-react-app`
+- run `npm install` 
+- run the development server: with `npm run start`
+
+
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.