feat(spindle-hooks): add spindle-hooks pkg

.github/workflows/deploy-hooks-catalog.yml

@@ -0,0 +1,33 @@
+name: deploy Hooks catalog
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'packages/spindle-hooks/**'
+
+jobs:
+  deploy_ui_catalog:
+    name: deploy_ui_catalog
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2-beta
+        with:
+          node-version: 14
+      - name: restore lerna
+        uses: actions/cache@v2
+        with:
+          path: |
+            node_modules
+            */*/node_modules
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-v2
+      - run: yarn install --frozen-lockfile
+      - run: npx lerna bootstrap -- --frozen-lockfile
+      - name: Update UI catalog
+        env:
+          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
+        run: |
+          npx lerna run --scope @openameba/spindle-hooks storybook:build
+          npx lerna run --scope @openameba/spindle-hooks storybook:deploy -- --token $FIREBASE_TOKEN

.github/workflows/deploy-hoooks-preview.yml

@@ -0,0 +1,27 @@
+name: deploy Hooks preview
+
+on:
+  pull_request:
+    paths:
+      - 'packages/spindle-hooks/**'
+
+jobs:
+  build_and_preview:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./packages/spindle-hooks/
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2-beta
+        with:
+          node-version: 14
+      - run: yarn install --frozen-lockfile
+      - run: yarn storybook:build
+      - name: deploy to preview channel
+        uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
+          expires: 30d
+          entryPoint: ./packages/spindle-hooks/

README.md

@@ -9,4 +9,5 @@ Ameba Design System
 - [Spindle Tokens](packages/spindle-tokens) (Design tokens)
 - [Spindle Icons](packages/spindle-icons) (SVG and PDF icons)
 - [Spindle UI](packages/spindle-ui) (UI components)
+- [Spindle Hooks](packages/spindle-hooks) (React Hooks)
 - [Spindle Syntax Themes](packages/spindle-syntax-themes) (Syntax themes with Spindle color palette)

packages/spindle-hooks/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "ameba-spindle"
+  }
+}

packages/spindle-hooks/.gitignore

@@ -0,0 +1,85 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+firebase-debug.log*
+firebase-debug.*.log*
+
+# Firebase cache
+.firebase/
+
+# Firebase config
+
+# Uncomment this if you'd like others to create their own Firebase project.
+# For a team working on the same Firebase project(s), it is recommended to leave
+# it commented so all members can deploy to the same project(s) in .firebaserc.
+# .firebaserc
+
+# 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
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# Output for Firebase hosting
+public
+
+# reg-suit working directory
+.reg
+
+# storing directory for reg-suit and storycap
+.reg-suit
+
+# components for npm
+*/*.css
+*/*.js
+*/*.d.ts
+*/*.map
+index.css
+index.js
+index.d.ts
+index*.map

packages/spindle-hooks/.npmignore

@@ -0,0 +1,12 @@
+src
+dist
+public
+.storybook
+.firebaserc
+.gitignore
+jest.config.js
+bundlesize.config.json
+firebase.json
+tsconfig.json
+design-doc.md
+setup-tests.ts

packages/spindle-hooks/.prettierignore

@@ -0,0 +1,2 @@
+*.md
+*.mdx

packages/spindle-hooks/.storybook/main.js

@@ -0,0 +1,10 @@
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|tsx|mdx)'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-docs',
+    '@storybook/addon-viewport',
+  ]
+};

packages/spindle-hooks/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<style>
+  body {
+    font-family: Meiryo, Yu Gothic Medium, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  }
+</style>
+<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\x2fscript>');</script>

packages/spindle-hooks/.storybook/preview.js

@@ -0,0 +1,23 @@
+export const parameters = {
+  backgrounds: {
+    default: 'Surface Primary',
+    values: [
+      {
+        name: 'Background Color',
+        value: '#F5F6F6',
+      },
+      {
+        name: 'Surface Primary',
+        value: '#FFFFFF',
+      },
+      {
+        name: 'Surface Secondary',
+        value: 'rgba(8,18,26,0.04)',
+      },
+      {
+        name: 'Background Color Dark',
+        value: '#08121A'
+      }
+    ],
+  },
+};

packages/spindle-hooks/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/spindle-hooks/README.md

@@ -0,0 +1,57 @@
+# Spindle Hooks (In development)
+
+Spindle (Ameba Design System) Hooks
+
+<p align="center">
+  <img alt="Spindle" src="./docs/images/components.png" width="400">
+</p>
+
+> Spindle Hooks は試験開発中のため、大幅に変更される可能性があります。安定版リリースまでの間はバージョン番号は 0 となり、バージョンに関わらず breaking change が行われることがありますので、利用時には注意してください。変更内容は、[CHANGELOG](CHANGELOG.md)に記載されています。
+
+![MIT licence](https://img.shields.io/npm/l/@openameba/spindle-ui) ![npm](https://img.shields.io/npm/v/@openameba/spindle-ui)
+
+Spindle Hooks は、Ameba のデザインシステム「Spindle」で定義されたコンポーネントを配布するライブラリです。様々なタイプのプロジェクトに導入できるように設計されています。
+
+## インストール
+
+```
+npm install @openameba/spindle-hooks
+```
+
+```
+yarn add @openameba/spindle-hooks
+```
+
+## 利用方法
+
+TODO
+
+## Hooks 一覧
+
+TODO
+
+- ![stability-stable](https://img.shields.io/badge/stability-stable-green.svg) 想定された機能が実装、テストされており本番環境で利用できます
+- ![stability-unstable](https://img.shields.io/badge/stability-unstable-yellow.svg) 足りていない機能や不安定な動作があり、まだ完全ではないですが、本番環境で利用できます
+- ![stability-wip](https://img.shields.io/badge/stability-work_in_progress-lightgrey.svg) 開発中のため、本番環境での利用はしない方がよいでしょう
+- ![stability-experimental](https://img.shields.io/badge/stability-experimental-orange.svg) 実験的な機能で大きな変更や削除される可能性があります
+- ![stability-deprecated](https://img.shields.io/badge/stability-deprecated-red.svg) 廃止される予定のため、できるだけはやく利用を停止してください
+
+## サンプルアプリケーション
+
+TODO
+
+## ブラウザサポート
+
+Spindle Hooks は Firefox、Google Chrome、Microsoft Edge、Safari の最新版と Internet Explorer 11 で動作確認しています。
+
+## 開発方法
+
+TODO
+
+## ライセンス
+
+Spindle Hooks は MIT ライセンスで公開されています。ただし、アイコンは[Spindle Icons](../spindle-icons/)に準じて、Creative Commons BY-NC-ND 4.0 ライセンスで公開されています。
+
+## 関連ドキュメント
+
+- [Design Doc](docs/design-doc.md)

packages/spindle-hooks/bundlesize.config.json

@@ -0,0 +1,8 @@
+{
+  "files": [
+    {
+      "path": "./dist/**/*.js",
+      "maxSize": "1.5 kB"
+    }
+  ]
+}

packages/spindle-hooks/docs/design-doc.md

@@ -0,0 +1 @@
+追記します。

packages/spindle-hooks/firebase.json

@@ -0,0 +1,17 @@
+{
+  "hosting": {
+    "site": "ameba-spindle-hooks",
+    "public": "public",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

packages/spindle-hooks/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  verbose: true,
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  setupFilesAfterEnv: ['<rootDir>/setup-tests.ts'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  testEnvironment: 'jsdom',
+};

packages/spindle-hooks/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@openameba/spindle-hooks",
+  "version": "0.0.0",
+  "main": "./dist/index.mjs",
+  "exports": "./dist/index.mjs",
+  "engines": {
+    "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+  },
+  "scripts": {
+    "test": "run-p bundlesize test:interaction",
+    "test:interaction": "jest --passWithNoTests",
+    "dev": "yarn storybook:start",
+    "storybook:start": "start-storybook -p 6006 -c .storybook",
+    "storybook:build": "build-storybook -o public -c .storybook",
+    "storybook:deploy": "firebase deploy --only hosting",
+    "serve": "firebase serve",
+    "prebundlesize": "yarn build:script",
+    "bundlesize": "npx bundlesize",
+    "clean": "npx rimraf dist",
+    "cp": "npx cpx 'dist/**/*' .",
+    "prebuild": "yarn clean",
+    "build": "run-s build:script build:script:rename",
+    "build:script": "tsc",
+    "build:script:rename": "npx renamer --find js --replace mjs 'dist/**'",
+    "prepublishOnly": "yarn build && yarn cp"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@types/react": "^16.8.6 || ^17.0.0",
+    "react": "^16.8.0 || ^17.0.0"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@storybook/addon-a11y": "^6.1.10",
+    "@storybook/addon-actions": "^6.1.10",
+    "@storybook/addon-backgrounds": "^6.1.10",
+    "@storybook/addon-docs": "^6.1.10",
+    "@storybook/addon-viewport": "^6.1.10",
+    "@storybook/react": "^6.1.10",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "^13.0.0",
+    "@types/jest": "^27.0.0",
+    "babel-loader": "^8.1.0",
+    "bundlesize": "^0.18.0",
+    "jest": "^27.0.0",
+    "react": "^17.0.1",
+    "ts-jest": "^27.0.0"
+  }
+}

packages/spindle-hooks/setup-tests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

packages/spindle-hooks/src/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 openameba
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.