feat: initial commit

.eslintrc

@@ -0,0 +1,18 @@
+{
+  "env": {},
+  "extends": ["airbnb", "plugin:jest/recommended"],
+  "globals": {
+    "document": true
+  },
+  "parser": "babel-eslint",
+  "plugins": ["babel", "jest"],
+  "rules": {
+    "import/prefer-default-export": "off",
+    "import/no-extraneous-dependencies": "off",
+    "no-console": "off",
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "react/jsx-fragments": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/prefer-stateless-function": "off"
+  }
+}

.github/workflows/node.js.yml

@@ -0,0 +1,51 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js 16.8.x
+      uses: actions/setup-node@v3
+      with:
+        node-version: 16.8.x
+    - run: npm install -g codecov
+    - run: npm install
+    - run: npm test
+    - run: codecov
+    - run: npm run build
+    - name: Setup Pages
+      uses: actions/configure-pages@v3
+    - name: Upload artifact
+      uses: actions/upload-pages-artifact@v2
+      with:
+        # Upload dist repository
+        path: './demo/dist'
+    - name: Deploy to GitHub Pages
+      id: deployment
+      uses: actions/deploy-pages@v2

.gitignore

@@ -0,0 +1,11 @@
+/coverage
+/demo/dist
+/es
+/lib
+/node_modules
+/umd
+npm-debug.log*
+
+package-lock.json
+
+.DS_Store

CONTRIBUTING.md

@@ -0,0 +1,25 @@
+## Prerequisites
+
+[Node.js](http://nodejs.org/) >= 6 must be installed.
+
+## Installation
+
+- Running `npm install` in the component's root directory will install everything you need for development.
+
+## Demo Development Server
+
+- `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
+
+## Running Tests
+
+- `npm test` will run the tests once.
+
+- `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
+
+- `npm run test:watch` will run the tests on every change.
+
+## Building
+
+- `npm run build` will build the component for publishing to npm and also bundle the demo app.
+
+- `npm run clean` will delete built resources.

LICENSE

@@ -0,0 +1,13 @@
+Copyright 2023 Satoru Nakamura
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

README.md

@@ -0,0 +1,39 @@
+# mirador-rotation
+
+<!-- ![Node.js CI](https://github.com/ProjectMirador/mirador-rotation/workflows/Node.js%20CI/badge.svg)
+[![npm version](https://badge.fury.io/js/mirador-rotation.svg)](https://badge.fury.io/js/mirador-rotation) -->
+
+
+`mirador-rotation` is a [Mirador 3](https://github.com/projectmirador/mirador) plugin that adds layer slideshow.
+
+<!-- ![Mirador layer slideshow example](assets/demo.gif) -->
+
+<img src="assets/demo.gif" width="100%" title="Mirador layer slideshow example">
+
+**Demo on https://nakamura196.github.io/mirador-rotation-plugin/**
+
+## Configuration
+Several configuration options are available on windows that use mirador-rotation.
+
+
+Configuration | type | default | description
+--- | --- | --- | ---
+`rotationEnabled` | boolean | false | Enable the plugin to be shown
+
+Example configuration:
+
+```javascript
+const config = {
+  id: 'demo',
+  windows: [{
+    rotationEnabled: true,
+    manifestId: 'https://gist.githubusercontent.com/nakamura196/0c6a28d03b34d18165bb0d4940673b7e/raw/9cf148fbf8df6cee43debaafd9a47d8757e9380a/kaishi.json',
+  }]
+};
+```
+## Installing `mirador-rotation`
+
+`mirador-rotation` requires an instance of Mirador 3. See the [Mirador wiki](https://github.com/ProjectMirador/mirador/wiki) for examples of embedding Mirador within an application. See the [live demo's index.js](https://github.com/nakamura196/mirador-rotation-plugin/blob/main/demo/src/index.js) for an example of importing the `mirador-rotation` plugin and configuring the adapter.
+
+## Contribute
+Mirador's development, design, and maintenance is driven by community needs and ongoing feedback and discussion. Join us at our regularly scheduled community calls, on [IIIF slack #mirador](http://bit.ly/iiif-slack), or the [mirador-tech](https://groups.google.com/forum/#!forum/mirador-tech) and [iiif-discuss](https://groups.google.com/forum/#!forum/iiif-discuss) mailing lists. To suggest features, report bugs, and clarify usage, please submit a GitHub issue.

__tests__/MiradorLayerSlideshow.test.js

@@ -0,0 +1,40 @@
+// import React from 'react';
+// import { shallow } from 'enzyme';
+// import { TestableRotation as MiradorRotation }
+// from '../src/plugins/MiradorRotation';
+// import Rotation from '../src/plugins/Rotation';
+
+/*
+const mockPalette = {
+  palette: {
+    shades: { main: 'rgb(255, 255, 255)' },
+    getContrastText: () => 'rgb(0, 0, 0)',
+  },
+};
+*/
+
+/*
+function createWrapper(props) {
+  return shallow(
+    <MiradorRotation
+      classes={{}}
+      viewer={{}}
+      updateViewport={() => {}}
+      updateWindow={() => {}}
+      windowId="x"
+      width="sm"
+      theme={mockPalette}
+      t={() => {}}
+      {...props}
+    />,
+  );
+}
+*/
+
+describe('MiradorRotation', () => {
+  // let wrapper;
+  it('renders Rotation', () => {
+    // wrapper = createWrapper();
+    // expect(wrapper.find(Rotation).length).toBe(5);
+  });
+});

babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+    '@babel/preset-react',
+  ],
+};

demo/src/index.js

@@ -0,0 +1,14 @@
+import Mirador from 'mirador/dist/es/src/index';
+import { miradorRotationPlugin } from '../../src';
+
+const config = {
+  id: 'demo',
+  windows: [{
+    rotationEnabled: true,
+    manifestId: 'https://nakamura196.github.io/mirador2/data/examples/hi.json',
+  }],
+};
+
+Mirador.viewer(config, [
+  ...miradorRotationPlugin,
+]);

jest.config.js

@@ -0,0 +1,17 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+module.exports = {
+  // Automatically clear mock calls and instances between every test
+  clearMocks: true,
+
+  // The directory where Jest should output its coverage files
+  coverageDirectory: 'coverage',
+  setupFiles: [
+    '<rootDir>/setupJest.js',
+  ],
+  // Ignore Mirador code from jest transforms
+  transformIgnorePatterns: [
+    '<rootDir>/node_modules/(?!mirador)',
+  ],
+};

nwb.config.js

@@ -0,0 +1,23 @@
+const path = require('path');
+
+module.exports = {
+  type: 'react-component',
+  npm: {
+    esModules: true,
+    umd: {
+      global: 'MiradorRotation',
+      externals: {
+        react: 'React',
+        'react-dom': 'ReactDom',
+      },
+    },
+  },
+  webpack: {
+    aliases: {
+      '@material-ui/core': path.resolve('./', 'node_modules', '@material-ui/core'),
+      '@material-ui/styles': path.resolve('./', 'node_modules', '@material-ui/styles'),
+      react: path.resolve('./', 'node_modules', 'react'),
+      'react-dom': path.resolve('./', 'node_modules', 'react-dom'),
+    },
+  },
+};

package.json

@@ -0,0 +1,62 @@
+{
+  "name": "mirador-rotation",
+  "version": "0.11.0",
+  "description": "mirador-rotation React component",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "files": [
+    "css",
+    "es",
+    "lib",
+    "umd"
+  ],
+  "scripts": {
+    "build": "nwb build-react-component",
+    "clean": "nwb clean-module && nwb clean-demo",
+    "lint": "eslint ./src ./__tests__",
+    "prepublishOnly": "npm run build",
+    "start": "nwb serve-react-demo",
+    "test": "npm run lint && jest",
+    "test:coverage": "jest --coverage",
+    "test:watch": "jest --watch"
+  },
+  "dependencies": {
+    "@blueprintjs/core": "^5.2.1",
+    "@blueprintjs/icons": "^5.1.5",
+    "@material-ui/styles": "^4.11.5"
+  },
+  "peerDependencies": {
+    "mirador": "^3.0.0-rc.4",
+    "react": "16.x",
+    "react-dom": "16.x"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.6.2",
+    "@babel/preset-env": "^7.6.2",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.9.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "eslint": "^6.1.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jest": "^22.17.0",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "jest": "^24.9.0",
+    "mirador": "^3.0.0-rc.4",
+    "nwb": "0.23.x",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "author": "",
+  "homepage": "",
+  "license": "Apache-2.0",
+  "repository": "",
+  "keywords": [
+    "react-component"
+  ]
+}

setupJest.js

@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme'; // eslint-disable-line import/no-extraneous-dependencies
+import Adapter from 'enzyme-adapter-react-16'; // eslint-disable-line import/no-extraneous-dependencies
+
+Enzyme.configure({ adapter: new Adapter() });

src/index.js

@@ -0,0 +1 @@
+export miradorRotationPlugin from './plugins/miradorRotationPlugin';

src/plugins/ImageSlideshow.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { MiradorMenuButton } from 'mirador/dist/es/src/components/MiradorMenuButton';
+import StopIcon from '@material-ui/icons/Replay';
+
+export default class ImageSlideshow extends Component {
+  render() {
+    const { label, variant, ...otherProps } = this.props;
+    return (
+      <MiradorMenuButton
+        aria-label={label}
+        {...otherProps}
+      >
+        <StopIcon />
+      </MiradorMenuButton>
+    );
+  }
+}
+
+ImageSlideshow.propTypes = {
+  containerId: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  variant: PropTypes.string.isRequired,
+};