Merge pull request #1 from exoRift/dev

Prerelease 0.1.0

.babelrc

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

.codeclimate.yml

@@ -0,0 +1,28 @@
+version: '2'
+checks:
+  method-complexity:
+    config:
+      threshold: 25
+  method-lines:
+    config:
+      threshold: 30
+plugins:
+  eslint:
+    enabled: true
+    channel: 'eslint-7'
+    config:
+      ignore_warnings: true
+  stylelint:
+    enabled: true
+  nodesecurity:
+    enabled: true
+  shellcheck:
+    enabled: true
+  editorconfig:
+    enabled: true
+  fixme:
+    enabled: true
+exclude_patterns:
+  - '**/node_modules/'
+  - '**/*.test.js'
+  - '**/test/'

.eslintignore

@@ -0,0 +1,3 @@
+# Build folder
+build/
+playground/

.eslintrc

@@ -13,6 +13,11 @@
         "tabWidth": 2,
         "ignoreComments": true
       }
-    ]
+    ],
+    "quote-props": "warn",
+    "import/no-anonymous-default-export": [
+      "error", {
+        "allowObject": true
+    }]
   }
-}
+}

.github/workflows/deploy.yml

@@ -0,0 +1,101 @@
+name: Publish Update
+
+on:
+  release:
+    types:
+      - created
+
+jobs:
+  storybook:
+    name: Update Storybook
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [16]
+
+    runs-on: ${{ matrix.os }}
+
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+
+    concurrency:
+      group: pages
+      cancel-in-progress: true
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+      - name: Cache Dependencies
+        id: dep-cache
+        uses: actions/cache@v3
+        env:
+          cache-name: dep-cache
+        with:
+          path: |
+            **/node_modules/
+            ~/.npm/
+          key: ${{ matrix.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Install Dependencies
+        run: npm ci
+        if: steps.dep-cache.outputs.cache-hit != 'true'
+      - name: Setup Pages
+        uses: actions/configure-pages@v1
+      - name: Build Resources
+        run: npm run build-storybook
+      - name: Upload Artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: './storybook/'
+      - name: Deploy Storybook to Github Pages
+        uses: actions/deploy-pages@main
+
+
+  publish:
+    name: Publish to NPM
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [16]
+
+    runs-on: ${{ matrix.os }}
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+      - name: Cache Dependencies
+        id: dep-cache
+        uses: actions/cache@v3
+        env:
+          cache-name: dep-cache
+        with:
+          path: |
+            **/node_modules/
+            ~/.npm/
+          key: ${{ matrix.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Install Dependencies
+        run: npm ci
+        if: steps.dep-cache.outputs.cache-hit != 'true'
+      - name: Build Resources
+        run: npm run build
+      - name: Publish to NPM
+        uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_TOKEN }}

.github/workflows/quality_assurance.yml

@@ -0,0 +1,74 @@
+name: Quality Assurance
+
+on: 
+  push:
+    branches:
+      - master
+      - dev
+  pull_request:
+    branches:
+      - '*'
+      - '!gh-pages'
+
+jobs:
+  lint:
+    name: Linting
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [16]
+
+    runs-on: ${{ matrix.os }}
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+      - name: Cache Dependencies
+        id: dep-cache
+        uses: actions/cache@v3
+        env:
+          cache-name: dep-cache
+        with:
+          path: |
+            **/node_modules/
+            ~/.npm/
+          key: ${{ matrix.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Install Dependencies
+        run: npm ci
+        if: steps.dep-cache.outputs.cache-hit != 'true'
+      - name: Lint Code
+        run: npm run lint
+  analyze:
+    name: Security Analysis
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [16]
+        language: [ 'javascript' ]
+
+    runs-on: ${{ matrix.os }}
+
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2

.gitignore

@@ -1,5 +1,12 @@
-# Text editor data
-.vscode/
+# Modules
+node_modules/
 
-# The dependencies
-**/node_modules/
+# IDE options
+.vscode
+
+# Env file
+.env
+
+# Build folder
+build/
+playground/

.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+  stories: [
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)'
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-console'
+  ],
+  framework: '@storybook/react',
+  staticDirs: [
+    '../src/stories/assets',
+    '../assets'
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,20 @@
+import {
+  addDecorator
+} from '@storybook/react'
+import {
+  withConsole
+} from '@storybook/addon-console'
+
+export const parameters = {
+  actions: {
+    argTypesRegex: '^on[A-Z].*'
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    }
+  }
+}
+
+addDecorator((storyFn, context) => withConsole()(storyFn)(context))

README.md

@@ -0,0 +1,82 @@
+![Banner](assets/banner.png)
+
+[![NPM](https://img.shields.io/npm/v/react-fluent-mobile?style=for-the-badge)](https://www.npmjs.com/package/react-fluent-mobile)
+[![Storybook](https://img.shields.io/badge/TRY%20IT%20OUT-STORYBOOK-ff69b4?style=for-the-badge&logo=storybook)](https://exorift.github.io/react-fluent-mobile?path=/story/tutorials--selection&panel=false)
+[![Gitter](https://img.shields.io/badge/CHAT%20WITH%20US-GITTER-f68d42?style=for-the-badge&logo=gitter)](https://gitter.im/exoRift/react-fluent-mobile)
+[![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)
+
+# *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.
+
+# Introducing fluency!
+
+**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
+*INSERT GIF*
+
+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.
+
+- One finger shifts the end bound
+- If a second finger is present, the first continues shifting the end while the second shifts the beginning, allowing manipulation of both bounds at the same time
+- Double-tapping on the pad copies the contents of the selection to the clipboard
+> *NOTE: Copying to clipboard utilizes [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) and therefore requires HTTPS. ([document.execCommand()](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) will also be attempted for HTTP)*
+- Swiping down on the pad dismisses the pad and selection
+
+### Component Properties
+Name|Description
+-|-
+collapseSwipeDistance|The minimum distance required to swipe down to dismiss the selection
+collapseSwipeDuration|The maximum duration of the swipe down to dismiss the selection
+nativeManipulationInactivityDuration|The interval the manipulation pad is inactive for when the selection is natively manipulated
+theme|The theme of the pad (dark, light)
+
+## Context menus
+*INSERT GIF*
+
+*Coming soon*
+
+## Media control
+*INSERT GIF*
+
+*Coming soon*
+
+# Installation and Quickstart
+> `npm i react-fluent-mobile`
+
+```jsx
+import {
+  FluentContextMixin,
+  FluentSelectionMixin
+} from 'react-fluent-mobile'
+
+function Component (props) {
+  return (
+    <>
+      <FluentContextMixin/>
+      <FluentSelectionMixin/>
+
+      <div ...>
+        ...
+      </div>
+    </>
+  )
+}
+```
+
+## *Snappy, fluid, deliberate interactions*
+*INSERT GIF*
+
+<br/>
+
+***
+## Known bugs
+- Tapping on the manipulation pad on Safari makes the selection invisible (this is an unavoidable quirk with Safari)
+## Developer notes
+- FM works on all browsers and platforms
+- Safari does not allow haptics
+- The custom FlexibleRange class used for the selection system is exposed in the exports. Feel free to use it
+- Try to keep the mixins at the root of the heirarchy
+- **You do not need to check for mobile devices before mounting the component. FM does that for you.**