@solana-foundation/ms-tools

Overview

This is the core repository containing reusable packages for building Solana microsites. It serves as the source of truth for shared components, configurations, and integrations. Packages within this repo are published to npm for easy consumption in individual microsite projects.

Packages

@solana-foundation/ms-tools-ui

UI components for microsites. Includes:

• Reusable React components
• Custom hooks for common functionality
• Utility functions
• Modern UI components with Tailwind CSS v4 support

@solana-foundation/ms-tools-integrations

Integration utilities for microsites. Provides:

• Standardized third-party service integrations
• API client utilities
• Common integration patterns
• Authentication helpers

@solana-foundation/ms-tools-config

Shared configuration for microsites. Features:

• ESLint configuration with React and TypeScript support
• Prettier setup with import sorting
• TypeScript configuration with strict type checking
• Stylelint setup for modern CSS
• Vitest configuration for testing
• PostCSS setup with Tailwind CSS v4 integration

Development Setup

Installation

1. Clone the repository:

   git clone https://github.com/solana-foundation/solana-ms-tools.git
   cd solana-ms-tools

2. Install dependencies:

   pnpm install

3. Build all packages:

   pnpm build

Development Commands

• pnpm test - Run all tests
• pnpm lint - Run linting
• pnpm build - Build all packages
• pnpm format - Run Prettier
• pnpm changeset - Create a new changeset for version management

Usage

Registry Setup

Add this to your .npmrc to use these public packages from the GitHub registry:

@solana-foundation:registry=https://npm.pkg.github.com

And authenticate with GitHub Package Registry:

1. Generate a Classic Personal Access Token (PAT):

   • Go to GitHub Settings > Developer Settings > Personal Access Tokens > Tokens (classic)
   • Click "Generate new token (classic)"
   • Select at least read:packages scope
   • Copy your token

2. Login to the registry:

   npm login --registry=https://npm.pkg.github.com

   When prompted:

   • Username: your GitHub username
   • Password: your classic PAT (not your GitHub password)

Installing Packages

pnpm add @solana-foundation/ms-tools-ui
pnpm add @solana-foundation/ms-tools-integrations
pnpm add @solana-foundation/ms-tools-config

Basic Configuration

1. ESLint Setup:

   import baseConfig from '@solana-foundation/ms-tools-config/eslint.config.base.js'
   
   export default [...baseConfig]

2. Prettier Setup:

   import baseConfig from '@solana-foundation/ms-tools-config/prettier.config.js'
   
   export default { ...baseConfig }

3. TypeScript Setup:

   {
     "extends": "@solana-foundation/ms-tools-config/tsconfig.json"
   }

For detailed configuration options, refer to each package's README.

Release Process

We use Changesets for version management and package publishing. The release process is automated through GitHub Actions.

1. Create a changeset for your changes:

   pnpm changeset

2. Commit the changeset and push to main branch

3. The release workflow will automatically:

   • Version the packages
   • Update the changelog
   • Create a release PR
   • Publish to GitHub Package Registry when merged

For detailed release instructions, see RELEASE.md.

Contributing

1. Create a new branch for your changes
2. Make your changes and add tests if applicable
3. Create a changeset to document your changes and bump the version
4. Submit a pull request
5. Ensure all checks pass