Feat/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,48 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 0.0.1-alpha.3 (2022-04-15)
+
+
+### Features
+
+* **spindle-hooks:** add spindle-hooks pkg ([1d203af](https://github.com/openameba/spindle/commit/1d203afca4d89392183e96d95bc3fdecdf1cc291))
+* **spindle-hooks:** add useCarousel hooks ([80adf49](https://github.com/openameba/spindle/commit/80adf49da1a7ef2920a9230b155e0834a472f419))
+
+
+
+
+
+## 0.0.1-alpha.2 (2022-04-01)
+
+
+### Features
+
+* **spindle-hooks:** add spindle-hooks pkg ([dee8e61](https://github.com/openameba/spindle/commit/dee8e6173aa7a6f05d6edb855503445fcee54154))
+* **spindle-hooks:** add useCarousel hooks ([d620ecb](https://github.com/openameba/spindle/commit/d620ecbc075f466273f545d666152f8aba879bfb))
+
+
+
+
+
+## [0.0.1-alpha.1](https://github.com/openameba/spindle/compare/@openameba/spindle-hooks@0.0.1-alpha.0...@openameba/spindle-hooks@0.0.1-alpha.1) (2022-03-31)
+
+
+### Features
+
+* **spindle-hooks:** add spindle-hooks pkg ([10f6dd9](https://github.com/openameba/spindle/commit/10f6dd91e5e761d4d48b49539651ac3b6c4c029a))
+* **spindle-hooks:** add useCarousel hooks ([d62bd35](https://github.com/openameba/spindle/commit/d62bd353bcf02a38a77a91e7374ce12ba672773c))
+
+
+
+
+
+## 0.0.1-alpha.0 (2022-03-31)
+
+
+### Features
+
+* **spindle-hooks:** add spindle-hooks pkg ([34851cc](https://github.com/openameba/spindle/commit/34851ccda29e972932180b90a5e3b6559aed94a2))
+* **spindle-hooks:** add useCarousel hooks ([17c7221](https://github.com/openameba/spindle/commit/17c7221291d5dc0942e40dce4d0235df556ed6e2))

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/**/*.mjs",
+      "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',
+};