Merge pull request #1 from readyplayerme/feature/initial-version

feat: implement initial version of visage

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+build

.eslintrc.js

@@ -0,0 +1,69 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    jest: true
+  },
+  extends: [
+    'airbnb',
+    'airbnb-typescript',
+    'airbnb/hooks',
+    'prettier',
+    'plugin:storybook/recommended',
+    'plugin:react-hooks/recommended'
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: './tsconfig.json'
+  },
+  plugins: ['react', '@typescript-eslint', 'prettier', 'react-hooks'],
+  rules: {
+    'import/prefer-default-export': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'react/jsx-filename-extension': [
+      1,
+      {
+        extensions: ['.ts', '.tsx', '.js', '.jsx']
+      }
+    ],
+    'react/react-in-jsx-scope': 'off',
+    'react/require-default-props': 'off',
+    'react/function-component-definition': 'off',
+    'react/destructuring-assignment': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    'import/no-unresolved': 'off',
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never'
+      }
+    ]
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
+      }
+    },
+    'import/extensions': ['.ts', '.tsx', '.d.ts', '.js', '.jsx'],
+    'import/external-module-folders': ['node_modules', 'node_modules/@types']
+  },
+  overrides: [
+    {
+      files: ['**/*.stories.*'],
+      rules: {
+        'import/no-anonymous-default-export': 'off'
+      }
+    }
+  ],
+  ignorePatterns: ['docs/*']
+};

.github/workflows/release.yml

@@ -0,0 +1,85 @@
+name: Release pipeline
+
+on:
+  push:
+    branches:
+      - main
+      - "feature/**"
+      - "hotfix/**"
+
+concurrency:
+  group: ${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+jobs:
+  linting:
+    name: Linting
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '17.x'
+      - name: Install deps
+        run: npm ci
+      - name: Run linter
+        run: npm run lint
+  tests:
+    name: Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '17.x'
+      - name: Install deps
+        run: npm ci
+      - name: Run tests
+        run: npm run test
+      - name: Run storybook build
+        run: npm run build-storybook
+  build-and-deploy:
+    name: Build, Deploy to GitHub pages, Release npm package
+    needs: [linting, tests]
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main' # Trigger release process only on main
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          persist-credentials: false
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '17.x'
+      - name: 🛠 Install & Build
+        run: |
+          npm ci
+          npm run build-storybook
+          npm run build-package
+      - name: 📃 Deploy
+        uses: JamesIves/[email protected]
+        with:
+          branch: main
+          folder: storybook-static
+          target-folder: docs
+      - name: 🚀 Release npm package
+        uses: cycjimmy/semantic-release-action@v3
+        with:
+          dry_run: true
+          extra_plugins: |
+            @semantic-release/git
+          branches: |
+            [
+              'main'
+            ]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,73 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# Production
+/build
+
+# Library
+/dist
+
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+
+# Miscellaneous
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.npmignore

@@ -0,0 +1,4 @@
+.github
+.husky
+.storybook
+storybook-static

.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+build

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "printWidth": 120,
+  "singleQuote": true,
+  "useTabs": false
+}

.storybook/index.css

@@ -0,0 +1,21 @@
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+#root {
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+}

.storybook/main.js

@@ -0,0 +1,12 @@
+module.exports = {
+  staticDirs: ['../public'],
+  stories: ['../src/**/*.stories.@(tsx|mdx)'],
+  addons: ['@storybook/addon-essentials', '@storybook/preset-create-react-app'],
+  typescript: {
+    check: true
+  },
+  framework: '@storybook/react',
+  core: {
+    builder: 'webpack5'
+  }
+};

.storybook/manager.js

@@ -0,0 +1,8 @@
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+  panelPosition: 'right',
+  showPanel: true
+});

.storybook/preview.js

@@ -0,0 +1,11 @@
+import './index.css';
+
+export const parameters = {
+  layout: 'fullscreen',
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/
+    }
+  }
+};

.storybook/theme.js

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming';
+import rpmLogo from './ReadyPlayerMe.png';
+
+export default create({
+  base: 'light',
+  brandImage: rpmLogo,
+  brandUlr: 'https://readyplayer.me',
+  appBg: '#fafafa'
+});

README.md

@@ -1,2 +1,31 @@
-# visage
-Easily display 3D models and Ready Player Me avatars on the web.
+# Visage
+A growing collection of react components for showcasing 3D on the web!
+
+Built with [`three.js`](https://github.com/mrdoob/three.js), [`react-three-fiber`](https://github.com/pmndrs/react-three-fiber), [`drei`](https://github.com/pmndrs/drei), [`three-stdlib`](https://github.com/pmndrs/three-stdlib)
+
+
+## Installation
+
+```
+npm install @readyplayerme/visage
+```
+
+## Documentation
+
+You can find all examples of components and their documentation on [our GitHub page](https://readyplayerme.github.io/visage/).
+
+## Usage
+
+```typescript jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Exhibit } from '@readyplayerme/visage';
+
+function App() {
+  return (
+    <Exhibit glbUrl="/model.glb" />
+  );
+}
+
+ReactDOM.render(<App />, document.querySelector('#app'));
+```

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

css-modules.d.ts

@@ -0,0 +1,9 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}