@multiplatform.one/storybook

Cross-platform Storybook addon-actions for multiplatform.one

Overview

This package provides a unified way to import Storybook's addon-actions across different platforms (Web and React Native). It automatically detects the platform and exports the appropriate addon-actions module.

Installation

npm install @multiplatform.one/storybook @storybook/addon-actions

For React Native projects, also install the native addon-actions:

npm install @storybook/addon-actions/native

Usage

Automatic Platform Detection

import { action } from "@multiplatform.one/storybook";

// This will automatically use:
// - @storybook/addon-actions on web
// - @storybook/addon-actions/native on React Native

Platform Detection

Metro bundler automatically selects the appropriate file based on the platform:

• index.ts - Web platforms (exports @storybook/addon-actions)
• index.native.ts - React Native platforms (exports @storybook/addon-actions/native)

This follows React Native's standard file resolution pattern.

Examples

Basic Action Logging

import { action } from "@multiplatform.one/storybook";

const MyComponent = () => {
  const handleClick = () => {
    action("button-clicked")("Hello World");
  };

  return <button onClick={handleClick}>Click me</button>;
};

Action with Arguments

import { action } from "@multiplatform.one/storybook";

const handleChange = action("input-changed");

const MyInput = ({ value, onChange }) => {
  const handleInputChange = (event) => {
    handleChange(event.target.value);
    onChange(event);
  };

  return <input value={value} onChange={handleInputChange} />;
};

Multiple Actions

import { action } from "@multiplatform.one/storybook";

const actions = {
  onSubmit: action("form-submitted"),
  onCancel: action("form-cancelled"),
  onFieldChange: action("field-changed"),
};

const MyForm = () => {
  return (
    <form>
      <input
        onChange={(e) => actions.onFieldChange(e.target.value)}
        placeholder="Enter something"
      />
      <button onClick={actions.onSubmit}>Submit</button>
      <button onClick={actions.onCancel}>Cancel</button>
    </form>
  );
};

Platform Detection

The package automatically detects the platform using React Native's Platform.OS:

• Web/Storybook: Uses @storybook/addon-actions
• React Native: Uses @storybook/addon-actions/native

API Reference

All exported functions and utilities from the underlying addon-actions packages are available:

• action(name?) - Creates an action logger
• actions(names) - Creates multiple action loggers
• configureActions(options) - Configures action behavior

TypeScript Support

The package includes full TypeScript support with proper type definitions for both platforms.

Peer Dependencies

• @storybook/addon-actions: Required for web platform
• @storybook/addon-actions/native: Required for React Native platform
• react: Required for all platforms
• react-native: Required for React Native platform

License

Apache-2.0