React Riichi Mahjong Tiles

Riichi Mahjong tiles as React SVG components. Includes all standard tiles in both light (white) and dark (black) variants.

Installation

yarn add react-riichi-mahjong-tiles
# or
npm install react-riichi-mahjong-tiles

Usage

import { Man1, Pin5Dora, TonBlack } from 'react-riichi-mahjong-tiles';

function MyComponent() {
    return (
        <div>
            <Man1 />
            <Pin5Dora />
            <TonBlack />
        </div>
    );
}

Available Tiles

Light (White) Tiles

| Category | Tiles | | ---------------- | --------------------------------------------------------- | | Man (Characters) | Man1 - Man9, Man5Dora | | Pin (Circles) | Pin1 - Pin9, Pin5Dora | | Sou (Bamboo) | Sou1 - Sou9, Sou5Dora | | Winds | Ton (East), Nan (South), Shaa (West), Pei (North) | | Dragons | Chun (Red), Haku (White), Hatsu (Green) | | Other | Blank |

Dark (Black) Tiles

All tiles above are also available with a Black suffix (e.g., Man1Black, TonBlack, ChunBlack).

Development

Prerequisites

• Node.js 18+ (tested with Node.js 22)
• Yarn package manager

Setup

# Clone the repository
git clone https://github.com/MaijaHeiskanen/react-riichi-mahjong-tiles.git
cd react-riichi-mahjong-tiles

# Install dependencies
yarn install

Available Scripts

| Script | Description | | ---------------------- | --------------------------------------- | | yarn storybook | Start Storybook dev server on port 6006 | | yarn build-storybook | Build static Storybook for deployment | | yarn build-lib | Build the library for distribution |

Adding New Tile Components

When adding new SVG tile components, you need to update two files:

1. src/index.js - Add the import/export for the new SVG:

   export { default as NewTile } from './svgs/white_tiles/new_tile.svg';

2. src/index.d.ts - Add the corresponding TypeScript type declaration:

   export const NewTile: MahjongTileComponent;

Note: The type definitions in src/index.d.ts are manually maintained and must be kept in sync with the actual exports in src/index.js.

Running Storybook

Storybook provides a visual preview of all tile components:

yarn storybook

Open http://localhost:6006 to view the component library.

Testing the Package Locally

A test React app is included in the test-app/ folder to verify the package works correctly before publishing:

# First, build the library
yarn build-lib

# Then install and run the test app
cd test-app
yarn install
yarn dev

Open http://localhost:5173 to see all tile components in action. The test app imports the package using a local file reference and tests:

• All tile categories (Man, Pin, Sou, Winds, Dragons)
• Custom sizing with width and height props
• Custom styling with className and style props
• Event handlers like onClick
• TypeScript type checking

Publishing to npm

Prerequisites

1. npm account: Create one at npmjs.com/signup
2. Authentication: Log in from your terminal:

   npm login

3. Permissions: You must be the package owner or a collaborator

Step 1: Build the Library

yarn build-lib

This creates the distribution files in the dist/ folder:

• dist/index.js - CommonJS bundle
• dist/index.es.js - ES module bundle

Step 2: Update Version

Use semantic versioning to bump the version:

# Patch release (bug fixes): 1.0.0 → 1.0.1
npm version patch

# Minor release (new features): 1.0.0 → 1.1.0
npm version minor

# Major release (breaking changes): 1.0.0 → 2.0.0
npm version major

Step 3: Verify Package Contents

Preview what will be published:

npm publish --dry-run

Included in package:

• dist/ (built library)
• package.json
• README.md
• LICENSE.md

Excluded (via .npmignore):

• .storybook/
• stories/
• src/
• node_modules/

Step 4: Publish

npm publish

Step 5: Push to Git

git push && git push --tags

Step 6: Verify

# Check the registry
npm view react-riichi-mahjong-tiles

# Test installation
npx create-react-app test-app
cd test-app
npm install react-riichi-mahjong-tiles

License

CC BY 4.0 - Original SVG artwork by FluffyStuff