Merge pull request #38 from aeksco/feature/add-tailwind

Version 2.0.0

Author: aeksco

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,36 @@
+## Prerequisites
+
+Please answer the following questions for yourself before submitting an issue:
+
+-   [ ] I am running the latest version
+-   [ ] I checked the documentation and found no answer
+-   [ ] I checked to make sure that this issue has not already been filed
+-   [ ] I'm reporting the issue to the correct repository (for multi-repository projects)
+
+## Context
+
+Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.
+
+## Expected Behavior
+
+If relevant, please describe the behavior you are expecting
+
+## Current Behavior
+
+If relevant, describe the current behavior
+
+## Failure Information (for bugs)
+
+Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.
+
+### Steps to Reproduce
+
+Please provide detailed steps for reproducing the issue.
+
+1. step 1
+2. step 2
+3. you get it...
+
+### Failure Logs
+
+Please include any relevant log snippets or files here.

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,30 @@
+## Description
+
+Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
+
+Fixes # (issue)
+
+## Type of change
+
+Please delete options that are not relevant.
+
+-   [ ] Bug fix (non-breaking change which fixes an issue)
+-   [ ] New feature (non-breaking change which adds functionality)
+-   [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+-   [ ] This change requires a documentation update
+
+## How Has This Been Tested?
+
+Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
+
+## Checklist:
+
+-   [ ] My code follows the style guidelines of this project
+-   [ ] I have performed a self-review of my own code
+-   [ ] I have commented my code, particularly in hard-to-understand areas
+-   [ ] I have made corresponding changes to the documentation
+-   [ ] My changes generate no new warnings
+-   [ ] I have added tests that prove my fix is effective or that my feature works
+-   [ ] New and existing unit tests pass locally with my changes
+-   [ ] Any dependent changes have been merged and published in downstream modules
+-   [ ] I have checked my code and corrected any misspellings

.gitignore

@@ -1,5 +1,4 @@
 dist/js/*
-.vscode
 storybook-static/*
 
 /node_modules

.storybook/main.js

@@ -4,26 +4,21 @@ const path = require("path");
 module.exports = {
     stories: ["../src/**/*.stories.tsx"],
     addons: [
-        "@storybook/addon-actions/register",
-        "@storybook/addon-viewport/register",
+        "@storybook/addon-essentials",
+        "@storybook/addon-interactions",
     ],
+    // Enable the Storybook Interactions debugger
+    // Docs: https://storybook.js.org/addons/@storybook/addon-interactions
+    features: {
+        interactionsDebugger: true,
+    },
+    // Configure Storybook to use Webpack@5.x
+    // Docs: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5
+    core: {
+        builder: "webpack5",
+    },
     webpackFinal: async (config) => {
-        config.module.rules.push({
-            exclude: /node_modules/,
-            test: /\.scss$/,
-            use: [
-                {
-                    loader: "style-loader", // Creates style nodes from JS strings
-                },
-                {
-                    loader: "css-loader", // Translates CSS into CommonJS
-                },
-                {
-                    loader: "sass-loader", // Compiles Sass to CSS
-                },
-            ],
-        });
-
+        // Setup @src path resolution for TypeScript files
         config.resolve = {
             ...config.resolve,
             extensions: [".ts", ".tsx", ".js"],
@@ -32,6 +27,7 @@ module.exports = {
             },
         };
 
+        // Setup module replacement for mocked webextension-polyfill
         config.plugins = [
             ...config.plugins,
             new webpack.NormalModuleReplacementPlugin(
@@ -57,6 +53,42 @@ module.exports = {
             ),
         ];
 
+        // Remove the default .css webpack module rule
+        // This is necessary because we use both global CSS and CSS modules
+        // in the extension and in Storybook
+        config.module.rules = config.module.rules.filter((r) => {
+            if (".css".match(r.test)) {
+                return false;
+            }
+            return true
+        })
+
+        // Treat src/css/app.css as a global stylesheet
+        config.module.rules.push({
+            test: /\app.css$/,
+            use: [
+                "style-loader",
+                "css-loader",
+                "postcss-loader",
+            ],
+        })
+
+        // Load .module.css files as CSS modules
+        config.module.rules.push({
+            test: /\.module.css$/,
+            use: [
+                "style-loader",
+                {
+                    loader: "css-loader",
+                    options: {
+                        modules: true,
+                    },
+                },
+                "postcss-loader",
+            ],
+        })
+
+        // Return the final Webpack configuration
         return config;
     },
 };

.storybook/preview.js

@@ -1,28 +1,2 @@
-import {
-    addParameters,
-    addDecorator,
-    INITIAL_VIEWPORTS,
-} from "@storybook/react";
-import { withConsole, setConsoleOptions } from "@storybook/addon-console";
-import { withInfo } from "@storybook/addon-info";
-
-// Configure Viewports addon
-addParameters({
-    viewport: {
-        viewports: INITIAL_VIEWPORTS,
-        defaultViewport: "someDefault",
-    },
-});
-
-// You'll start to receive all console messages, warnings, errors in your action logger panel - Everything except HMR logs.
-setConsoleOptions({
-    panelExclude: [],
-});
-
-// Setup StoryInfo addon
-addDecorator(withInfo);
-
-// You'll receive console outputs as a console,
-// warn and error actions in the panel. You might want to know from
-// what stories they come. In this case, add withConsole decorator:
-addDecorator((storyFn, context) => withConsole()(storyFn)(context));
+// Import global app.css file
+import "../src/css/app.css";

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+	// List of extensions which should be recommended for users of this workspace.
+	"recommendations": [
+		"esbenp.prettier-vscode",
+		"bradlc.vscode-tailwindcss"
+	],
+	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+	"unwantedRecommendations": []
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.formatOnSave": true,
+  "css.lint.unknownAtRules": "ignore"
+}

CHANGELOG.md

@@ -0,0 +1,19 @@
+### v2.0.0
+
+-   Bump `version` field in `package.json` to `2.0.0`
+-   Upgrade `react` + `react-dom` to version `17.x`
+-   Upgrade Storybook to version `6.4`
+-   Upgrade `webpack` to `5.x`
+-   Storybook stories written in Component Story Format
+-   Add Tailwind@3.x with CSS modules
+-   Removed Bootstrap and SCSS
+-   Add `CONTRIBUTING.md`
+-   Add `CHANGELOG.md`
+-   Add `CODE_OF_CONDUCT.md`
+-   Add `.github/PULL_REQUEST_TEMPLATE.md`
+-   Add `.github/ISSUE_TEMPLATE.md`
+-   Simplify Storybook tooling
+-   Updated placeholder icon for extension
+-   Verified support for Microsoft Edge
+-   Updated `README.md` screenshots
+-   Add `.vscode` directory with workplace settings and recommended extensions

CODE_OF_CONDUCT.md

@@ -0,0 +1,35 @@
+# Code of Conduct
+
+All participants of `react-typescript-web-extension-starter` are expected to abide by our Code of Conduct, both online and during in-person events that are hosted and/or associated with `react-typescript-web-extension-starter`.
+
+## The Pledge
+
+In the interest of fostering an open and welcoming environment, we pledge to make participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## The Standards
+
+Examples of behaviour that contributes to creating a positive environment include:
+
+-   Using welcoming and inclusive language
+-   Being respectful of differing viewpoints and experiences
+-   Gracefully accepting constructive criticism
+
+Examples of unacceptable behaviour by participants include:
+
+-   Trolling, insulting/derogatory comments, public or private harassment
+-   Publishing others' private information, such as a physical or electronic address, without explicit permission
+-   Not being respectful to reasonable communication boundaries, such as 'leave me alone,' 'go away,' or 'I’m not discussing this with you.'
+-   The usage of sexualised language or imagery and unwelcome sexual attention or advances
+-   Demonstrating the graphics or any other content you know may be considered disturbing
+-   Starting and/or participating in arguments related to politics
+-   Other conduct which you know could reasonably be considered inappropriate in a professional setting.
+
+## Enforcement
+
+Violations of the Code of Conduct may be reported by sending an email to `aeksco at gmail.com`. All reports will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. Further details of specific enforcement policies may be posted separately.
+
+We hold the right and responsibility to remove comments or other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any members for other behaviours that they deem inappropriate, threatening, offensive, or harmful.
+
+## Attribution
+
+This Code of Conduct is adapted from dev.to.

CONTRIBUTING.md

@@ -0,0 +1,44 @@
+# Contributing Guide
+
+Welcome and thanks for stopping by! There are many ways to contribute, including submitting bug reports, improving documentation, submitting feature requests, reviewing new submissions, or contributing code that can be incorporated into the project.
+
+**Table of Contents:**
+
+1. [Code of Conduct](#code-of-conduct)
+2. [Questions](#questions)
+3. [Feature Requests](#feature-requests)
+4. [Reporting Bugs](#reporting-bugs)
+5. [Contributing Code](#contributing-code)
+
+## Code of Conduct
+
+By participating in this project, you agree to abide by our [Code of Conduct][0].
+
+## Questions
+
+Please open a GitHub issue if you have any questions about the project.
+
+## Feature Requests
+
+Please request new features by opening a GitHub issue.
+
+## Reporting Bugs
+
+**If you find a security vulnerability, do NOT open an issue. Email aeksco@gmail.COM instead.**
+
+Please check open issues before opening a new ticket. Also, provide any references to FAQs or debugging guides that you might have.
+
+## Contributing Code
+
+Unsure where to begin contributing to this project? You can start by looking through open `help-wanted` issues!
+
+Working on your first open source project or pull request? Here are some helpful tutorials:
+
+-   [How to Contribute to an Open Source Project on GitHub][1]
+-   [Make a Pull Request][2]
+-   [First Timers Only][3]
+
+[0]: CODE_OF_CONDUCT.md
+[1]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github
+[2]: http://makeapullrequest.com/
+[3]: http://www.firsttimersonly.com