storybook-device-viewports 0.0.1 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 koralle
+
+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.

package/README.ja.md

@@ -0,0 +1,113 @@
+[English](./README.md)
+
+# Storybook Device Viewport
+
+Storybookで使用するための、さまざまなデバイスのビューポート設定を提供するTypeScriptライブラリです。
+
+Apple（iPhone / iPad）とGoogle（Pixel）のデバイスに対応したプレ定義されたビューポート設定が含まれています。
+
+## インストール
+
+```bash
+bun add storybook-device-viewports
+```
+
+## 使い方
+
+Storybookの設定ファイルでビューポートを追加します。
+
+### 全デバイスを使用する場合
+
+```typescript
+// .storybook/preview.ts
+import { AWESOME_DEVICE_VIEWPORTS } from 'storybook-device-viewports';
+
+const preview: Preview = {
+  parameters: {
+    viewport: {
+      viewports: AWESOME_DEVICE_VIEWPORTS,
+    },
+  },
+};
+```
+
+### 特定のデバイスカテゴリのみを使用する場合
+
+```typescript
+import { APPLE_MOBILE_VIEWPORTS, GOOGLE_MOBILE_VIEWPORTS } from 'storybook-device-viewports';
+
+const preview: Preview = {
+  parameters: {
+    viewport: {
+      viewports: {
+        ...APPLE_MOBILE_VIEWPORTS,
+        ...GOOGLE_MOBILE_VIEWPORTS,
+      },
+    },
+  },
+};
+```
+
+## 対応デバイス
+
+### Apple
+
+#### iPhone
+
+- iPhone 17 Pro Max / Pro / Air / 17
+- iPhone 16 Pro Max / Pro / Plus / 16 / 16e
+- iPhone 15 Pro Max / Pro / Plus / 15
+- iPhone 14 Pro Max / Pro / Plus / 14
+- iPhone 13 Pro Max / Pro / 13 / Mini
+- iPhone 12 Pro Max / Pro / 12 / Mini
+- iPhone 11 Pro Max / Pro / 11
+- iPhone XS Max / XS / XR / X
+- iPhone 8 Plus / 8
+- iPhone 7 Plus / 7
+- iPhone 6s Plus / 6s
+- iPhone SE (2022 / 2020 / 初代)
+
+#### iPad
+
+**iPad Pro**
+- 13" (第7世代 / 初代)
+- 11" (第7世代 / 第3世代)
+- 12.9" (第6世代 / 初代)
+- 10.5" (第2世代)
+- 9.7" (初代)
+
+**iPad Air**
+- 13" (第6世代)
+- 11" (第6世代)
+- 第5世代 / 第4世代 / 第3世代 / 第2世代
+
+**iPad**
+- 第10世代 / 第9世代 / 第8世代 / 第7世代 / 第6世代 / 第5世代
+
+**iPad mini**
+- 第7世代 / 第6世代 / 第5世代 / 第4世代
+
+### Google (Pixel)
+
+- Pixel 9
+- Pixel 8 Pro / 8
+- Pixel 7 Pro / 7 / 7a
+- Pixel 6 Pro / 6
+- Pixel 5
+- Pixel 4 XL / 4
+- Pixel 3 XL / 3a XL / 3a / 3
+- Pixel 2 XL / 2
+- Pixel XL / Pixel
+
+## エクスポート一覧
+
+| エクスポート | 説明 |
+|------------|------|
+| `AWESOME_DEVICE_VIEWPORTS` | 全デバイスのビューポート設定 |
+| `APPLE_MOBILE_VIEWPORTS` | iPhoneのビューポート設定 |
+| `APPLE_TABLET_VIEWPORTS` | iPadのビューポート設定 |
+| `GOOGLE_MOBILE_VIEWPORTS` | Pixelのビューポート設定 |
+
+## ライセンス
+
+MIT

package/README.md

@@ -1,45 +1,113 @@
-# storybook-device-viewports
+[日本語版](./README.ja.md)
 
-## ⚠️ IMPORTANT NOTICE ⚠️
+# Storybook Device Viewport
 
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
+A TypeScript library providing viewport configurations for various devices to use with Storybook.
 
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
+Includes predefined viewport settings for devices from Apple (iPhone / iPad) and Google (Pixel).
+
+## Installation
 
-## Purpose
+```bash
+bun add storybook-device-viewports
+```
 
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `storybook-device-viewports`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
+## Usage
 
-## What is OIDC Trusted Publishing?
+Add viewports in your Storybook configuration file.
 
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
+### To use all devices
 
-## Setup Instructions
+```typescript
+// .storybook/preview.ts
+import { AWESOME_DEVICE_VIEWPORTS } from 'storybook-device-viewports';
 
-To properly configure OIDC trusted publishing for this package:
+const preview: Preview = {
+  parameters: {
+    viewport: {
+      viewports: AWESOME_DEVICE_VIEWPORTS,
+    },
+  },
+};
+```
 
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
+### To use specific device categories only
 
-## DO NOT USE THIS PACKAGE
+```typescript
+import { APPLE_MOBILE_VIEWPORTS, GOOGLE_MOBILE_VIEWPORTS } from 'storybook-device-viewports';
 
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
+const preview: Preview = {
+  parameters: {
+    viewport: {
+      viewports: {
+        ...APPLE_MOBILE_VIEWPORTS,
+        ...GOOGLE_MOBILE_VIEWPORTS,
+      },
+    },
+  },
+};
+```
 
-## More Information
+## Supported Devices
 
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
+### Apple
 
----
+#### iPhone
 
-**Maintained for OIDC setup purposes only**
+- iPhone 17 Pro Max / Pro / Air / 17
+- iPhone 16 Pro Max / Pro / Plus / 16 / 16e
+- iPhone 15 Pro Max / Pro / Plus / 15
+- iPhone 14 Pro Max / Pro / Plus / 14
+- iPhone 13 Pro Max / Pro / 13 / Mini
+- iPhone 12 Pro Max / Pro / 12 / Mini
+- iPhone 11 Pro Max / Pro / 11
+- iPhone XS Max / XS / XR / X
+- iPhone 8 Plus / 8
+- iPhone 7 Plus / 7
+- iPhone 6s Plus / 6s
+- iPhone SE (2022 / 2020 / 1st Gen)
+
+#### iPad
+
+**iPad Pro**
+- 13" (7th Gen / 1st Gen)
+- 11" (7th Gen / 3rd Gen)
+- 12.9" (6th Gen / 1st Gen)
+- 10.5" (2nd Gen)
+- 9.7" (1st Gen)
+
+**iPad Air**
+- 13" (6th Gen)
+- 11" (6th Gen)
+- 5th Gen / 4th Gen / 3rd Gen / 2nd Gen
+
+**iPad**
+- 10th Gen / 9th Gen / 8th Gen / 7th Gen / 6th Gen / 5th Gen
+
+**iPad mini**
+- 7th Gen / 6th Gen / 5th Gen / 4th Gen
+
+### Google (Pixel)
+
+- Pixel 9
+- Pixel 8 Pro / 8
+- Pixel 7 Pro / 7 / 7a
+- Pixel 6 Pro / 6
+- Pixel 5
+- Pixel 4 XL / 4
+- Pixel 3 XL / 3a XL / 3a / 3
+- Pixel 2 XL / 2
+- Pixel XL / Pixel
+
+## Export List
+
+| Export | Description |
+|--------|-------------|
+| `AWESOME_DEVICE_VIEWPORTS` | Viewport settings for all devices |
+| `APPLE_MOBILE_VIEWPORTS` | iPhone viewport settings |
+| `APPLE_TABLET_VIEWPORTS` | iPad viewport settings |
+| `GOOGLE_MOBILE_VIEWPORTS` | Pixel viewport settings |
+
+## License
+
+MIT