Merge branch 'dev'

Author: exoRift

.babelrc

@@ -1,3 +1,6 @@
 {
-  "presets": ["@babel/preset-react"]
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-typescript"
+  ]
 }

.eslintignore

@@ -1,5 +1,10 @@
 {
-  "extends": ["standard", "react-app"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "extends": ["standard-with-typescript", "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:storybook/recommended"],
   "rules": {
     "array-bracket-spacing": "error",
     "no-lonely-if": "warn",
@@ -15,9 +20,21 @@
       }
     ],
     "quote-props": "warn",
-    "import/no-anonymous-default-export": [
-      "error", {
-        "allowObject": true
-    }]
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/strict-boolean-expressions": "off",
+    "@typescript-eslint/promise-function-async": "off",
+    "@typescript-eslint/array-type": "warn",
+    "@typescript-eslint/no-confusing-void-expression": "off",
+    "@typescript-eslint/no-invalid-void-type": "off",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/explicit-function-return-type": "warn",
+    "@typescript-eslint/method-signature-style": "off",
+    "@typescript-eslint/no-non-null-assertion": "warn",
+    "react/prop-types": [
+      "warn",
+      {
+        "ignore": ["children"]
+      }
+    ]
   }
-}
+}

.eslintrc

@@ -17,8 +17,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [16]
-        packager: [npm]
+        bun: [1.0.x]
 
     runs-on: ${{ matrix.os }}
 
@@ -33,25 +32,24 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-      - name: Set up Node
+      - name: Set up Bun
         id: setup
-        uses: actions/setup-node@v3
+        uses: oven-sh/setup-bun@v1
         with:
-          node-version: ${{ matrix.node }}
-          cache: ${{ matrix.packager }}
+          bun-version: ${{ matrix.bun }}
       - name: Setup Pages
-        uses: actions/configure-pages@v1
+        uses: actions/configure-pages@v3
       - name: Install Dependencies
-        run: npm ci
+        run: bun i
       - name: Build Resources
-        run: npm run build-storybook
+        run: bun run build-storybook
       - name: Upload Static Artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          path: './storybook/'
+          path: 'storybook/'
       - name: Deploy Storybook to Github Pages
         id: deploy
-        uses: actions/deploy-pages@main
+        uses: actions/deploy-pages@v2
 
   package:
     name: Publish to NPM

.github/workflows/deploy.yml

@@ -1,6 +1,6 @@
 name: Quality Assurance
 
-on: 
+on:
   push:
   pull_request:
 
@@ -11,23 +11,21 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [16, lts/*]
-        packager: [npm]
+        bun: [1.0.x]
 
     runs-on: ${{ matrix.os }}
 
     steps:
       - uses: actions/checkout@v3
-      - name: Set up Node
+      - name: Set up Bun
         id: setup
-        uses: actions/setup-node@v3
+        uses: oven-sh/setup-bun@v1
         with:
-          node-version: ${{ matrix.node }}
-          cache: ${{ matrix.packager }}
+          bun-version: ${{ matrix.bun }}
       - name: Install Dependencies
-        run: npm ci
+        run: bun i
       - name: Lint Code
-        run: npm run lint
+        run: bun run lint
   analyze:
     name: Security Analysis
 

.github/workflows/quality_assurance.yml

@@ -0,0 +1,26 @@
+import { type StorybookConfig } from '@storybook/react-webpack5'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-actions',
+    {
+      name: '@storybook/addon-styling',
+      options: {
+        postCss: true
+      }
+    }
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+  staticDirs: ['../src/stories/assets', '../assets'],
+  docs: {
+    autodocs: false
+  }
+}
+
+export default config

.storybook/main.js

@@ -0,0 +1,27 @@
+import { type Preview } from '@storybook/react'
+import '@storybook/addon-console'
+
+const preview: Preview = {
+  parameters: {
+    actions: {
+      argTypesRegex: '^on[A-Z].*'
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      }
+    },
+    docs: {
+      disable: true,
+      hidden: true
+    },
+    console: {
+      disabled: false,
+      patterns: [/^dev$/],
+      omitFirst: true
+    }
+  }
+}
+
+export default preview

.storybook/main.ts

@@ -6,7 +6,7 @@
 [![Roadmap](https://img.shields.io/badge/ROADMAP-GITHUB%20PROJECT-2d85e3?style=for-the-badge&logo=trello)](https://github.com/users/exoRift/projects/2/views/4)
 
 [![Maintainability](https://api.codeclimate.com/v1/badges/a6122e76dcb42d834772/maintainability)](https://codeclimate.com/github/exoRift/react-fluent-mobile/maintainability)
-[![Quality Assurance](https://img.shields.io/github/workflow/status/exoRift/react-fluent-mobile/Quality%20Assurance/master?label=Quality%20Assurance&logo=github)](https://github.com/exoRift/react-fluent-mobile/actions/workflows/quality_assurance.yml)
+[![Quality Assurance](https://img.shields.io/github/actions/workflow/status/exoRift/react-fluent-mobile/quality_assurance.yml?branch=master&label=Quality%20Assurance&logo=github)](https://github.com/exoRift/react-fluent-mobile/actions/workflows/quality_assurance.yml)
 
 # *What's the problem with mobile browsers?*
 ### Mobile web browsers are an adaptation of the PC browsing experience for your mobile device. As a result, many features found on desktop browsers are sloppily implemented in ways that just aren't meant for phones, degrading your browsing experience.
@@ -16,7 +16,7 @@
 **react-fluent-mobile** allows you to take your mobile browser's native features and augment them, improving gloss and agility without compromising on ability.
 
 ## Selecting text
-<img alt='selectionvideo' src='assets/selection.gif' width='150'/>
+<img alt='selectionvideo' src='assets/selection.gif' width='150' />
 
 Fluent takes selecting text on mobile to a whole new level by adding the *selection manipulation pad*. When text is selected by the user, whether selected through normal means, selected by the website, or tap-selected on Android, the *selection manipulation pad* appears. Users can touch and drag on the pad to shift the bounds of their selection in any direction they'd like, transforming their selection. Once the selection is fit to the user's liking, they can tap on the pad to instantly copy their selection to their clipboard.
 
@@ -35,13 +35,15 @@ nativeManipulationInactivityDuration|The interval the manipulation pad is inacti
 theme|The theme of the pad (dark, light)
 
 ## Context menus
-<img alt='contextvideo' src='assets/context.gif' width='150'/>
+<img alt='contextvideo' src='assets/context.gif' width='150' />
 
 Context menus have been reimagined! Now, instead of holding and lifting your finger four times, holding down on a link or image will launch a cleaner context menu in which you can drag you finger to the desired option and lift your finger to select it. No more tapping!
 
 If the new context menu is not desired, there is an option located at the bottom corner of the screen to disable it.
 
-> NOTE: The *share* features are only available on HTTPS sites
+> *NOTE: Opening in new tab may trigger browser popup blockers*
+> *NOTE: The `share` features are only available on HTTPS sites*
+> *NOTE: Copying images to clipboard utilizes [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) and therefore requires HTTPS.*
 
 ### Component Properties
 Name|Description
@@ -65,8 +67,8 @@ import {
 function Component (props) {
   return (
     <>
-      <FluentContextMixin/>
-      <FluentSelectionMixin/>
+      <FluentContextMixin />
+      <FluentSelectionMixin />
 
       <div ...>
         ...
@@ -79,7 +81,7 @@ function Component (props) {
 ## *Snappy, fluid, deliberate interactions*
 *INSERT GIF*
 
-<br/>
+<br />
 
 ***
 ## Known bugs