npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@wlloyalty/wll-react-sdk

v1.0.46

Published

> A React SDK for building customisable loyalty experiences with configurable tiles, themes, and navigation

Downloads

1,316

Readme

Loyalty Tiles SDK

A React SDK for building customisable loyalty experiences with configurable tiles, themes, and navigation

Conventional Commits React Support React Native Support

✨ Features

  • 🎨 Flexible Theming - Full control over visual styling with automatic color derivation and responsive design system
  • 🧩 Composable Tiles - Pre-built components for rewards, points, badges, and tiers that work together seamlessly
  • 🔌 Platform Agnostic - Bring your own navigation and network layer to integrate with any React application
  • 📱 Mobile First - Responsive components optimized for both mobile and desktop experiences
  • 🔒 Secure by Design - Built-in support for custom API integration through your own backend proxy
  • Easy Integration - Simple setup with customisable configuration for navigation, theming, and API handling

📚 Documentation

🚀 Quick Start

# npm
npm install @wlloyalty/wll-react-sdk

# yarn
yarn add @wlloyalty/wll-react-sdk

💻 System Requirements

The SDK is compatible with:

  • React: ^18.0.0
  • React Native: >=0.70.0 <0.73.0

Please ensure your project meets these version requirements for optimal compatibility.

🤝 Contributing

We welcome contributions! This project follows the Conventional Commits specification to ensure consistent commit messages and automated versioning.

Commit Message Format

type(scope?): subject

[optional body]

[optional footer(s)]

Types

| Type | Description | | ---------- | --------------------------------------------------------- | | feat | New features (e.g., feat(auth): add Google OAuth login) | | fix | Bug fixes (e.g., fix(api): correct rate limiting logic) | | hotfix | Critical bug fixes requiring immediate deployment | | docs | Documentation changes | | style | Code style changes (formatting, etc) | | refactor | Code changes that neither fix bugs nor add features | | perf | Performance improvements | | test | Adding or updating tests | | build | Changes to build system or dependencies | | ci | Changes to CI configuration | | chore | Other changes that don't modify src or test files | | revert | Reverting previous changes | | wip | Work in progress |

Automated Release Process

We use automated versioning and release management through GitHub Actions. Here's how it works:

  1. Version Bumping:

    • When Pull Requests are merged to main, our automation will increment the package version
    • The version bump follows semantic versioning based on conventional commit types:
      • feat: commits trigger new minor versions
      • fix: commits trigger new patch versions
      • Adding BREAKING CHANGE: in the commit body triggers major versions
  2. Release Triggering: New releases are automatically created when:

    • A PR title starts with feat: or fix:
    • A PR has the release label
    • A PR title contains RELEASE

    Other types of changes (like docs:, style:, chore:) won't trigger releases.

  3. Changelog Generation:

    • Each release automatically generates an updated CHANGELOG.md
    • The changelog is organized by commit types (Features, Bug Fixes, etc.)
    • Release notes are created from the consolidated changes
  4. NPM Publishing:

    • New versions are automatically published to NPM
    • The package is always published with public access

Development Workflow

We use several tools to maintain code quality:

  • Commitlint: Validates commit message format
  • Commitizen: Interactive commit message formatter
  • Husky: Git hooks for enforcing conventions
# Make a commit using the interactive tool
yarn commit

# Reinstall git hooks if needed
yarn prepare

Creating New Components

We provide an interactive component generator to help maintain consistent structure. To create a new component:

yarn create-component

You'll be prompted for:

  1. Component name - The name of your new component
  2. Component type - Choose from:
    • atoms: Basic building blocks
    • molecules: Simple combinations of atoms
    • organisms: Complex combinations of molecules
    • particles: Smallest UI elements
    • templates: Page-level components
  3. Base directory - Where to create the component (defaults to ./lib/components)

The script will generate a new component with the proper file structure and boilerplate code.

📄 License

MIT License - See LICENSE for more information.

Copyright (c) 2024 WLL

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.

🆘 Support