Skip to content

DevX and release process improvements #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tyom merged 9 commits into from
Aug 16, 2025
Merged

DevX and release process improvements #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
657e731
Update error message in example and uncomment tsconfig option
tyom Aug 16, 2025
dec6087
Export types and remove unnecessary fragment
tyom Aug 16, 2025
161aee0
Improve Prettier and ESLint config + format
tyom Aug 16, 2025
a00eb76
Add changeset and update GH Actions workflows
tyom Aug 16, 2025
461140e
Update dependencies
tyom Aug 16, 2025
ba8214c
Add changeset details
tyom Aug 16, 2025
7f3a301
Skip release PRs for pre-release branches
tyom Aug 16, 2025
8f5f1d1
Set up husky to lint staged files
tyom Aug 16, 2025
838da49
Update changeset
tyom Aug 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .changeset/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# Changesets

Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets)

We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
14 changes: 14 additions & 0 deletions .changeset/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
"changelog": [
"@changesets/changelog-github",
{ "repo": "tyom/storybook-react-context" }
],
"commit": false,
"fixed": [],
"linked": [],
"access": "public",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"ignore": ["react-example"]
}
23 changes: 23 additions & 0 deletions .changeset/minor-updates.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
'storybook-react-context': minor
---

Export TypeScript types and improve developer experience

- **New Features:**
- Export `ContextOptions` and `DecoratorOptions` types for better TypeScript support
- Add automated changelog generation with changesets
- Add GitHub Actions workflows for CI/CD and automated releases

- **Improvements:**
- Fix inconsistent error messages in context hooks
- Remove unnecessary React Fragment wrapper in decorator
- Enable `noUnusedLocals` TypeScript option for better code hygiene
- Improve code formatting with updated Prettier and ESLint configurations
- Update all dependencies to latest versions

- **Developer Experience:**
- Add comprehensive CONTRIBUTING.md documentation
- Set up automated release process with pre-release support
- Add support for alpha, beta, and next pre-release channels
- Add Husky pre-commit hooks with lint-staged for automated code quality checks
32 changes: 0 additions & 32 deletions .github/workflows/build.yaml
View file
Open in desktop

This file was deleted.

41 changes: 41 additions & 0 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
name: CI

on:
pull_request:
branches: [main]
push:
branches: [main]

jobs:
test:
name: Test
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4

- name: Setup PNPM
uses: pnpm/action-setup@v2
with:
version: 10

- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 20
cache: 'pnpm'

- name: Install dependencies
run: pnpm install --frozen-lockfile

- name: Lint
run: pnpm lint

- name: Type check
run: pnpm typecheck

- name: Build
run: pnpm build

- name: Test
run: pnpm test
0 .github/workflows/publish.yaml → ...ub/workflows/manual-publish.yaml.disabled
View file
Open in desktop
File renamed without changes.
90 changes: 90 additions & 0 deletions .github/workflows/release.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
name: Release

on:
push:
branches:
- main
- next
- beta
- alpha

concurrency: ${{ github.workflow }}-${{ github.ref }}

jobs:
release:
name: Release
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0

- name: Setup PNPM
uses: pnpm/action-setup@v2
with:
version: 10

- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 20
cache: 'pnpm'

- name: Install dependencies
run: pnpm install --frozen-lockfile

- name: Build
run: pnpm build:lib

- name: Run tests
run: pnpm test

- name: Enter pre-release mode if not on main
if: github.ref != 'refs/heads/main'
run: |
# Determine pre-release tag from branch name
if [[ "${{ github.ref }}" == "refs/heads/alpha" ]]; then
npx changeset pre enter alpha
elif [[ "${{ github.ref }}" == "refs/heads/beta" ]]; then
npx changeset pre enter beta
elif [[ "${{ github.ref }}" == "refs/heads/next" ]]; then
npx changeset pre enter next
fi

- name: Create Release Pull Request (main only)
if: github.ref == 'refs/heads/main'
uses: changesets/action@v1
with:
publish: pnpm release
version: pnpm version
commit: 'chore: release'
title: 'chore: release'
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

- name: Publish Pre-release (non-main branches)
if: github.ref != 'refs/heads/main'
run: |
git config user.name "github-actions[bot]"
git config user.email "41898282+github-actions[bot]@users.noreply.github.com"

# Version packages (pre-release mode already set in previous step)
npx changeset version

# Commit version changes
git add -A
git commit -m "chore: version packages (pre-release)" || echo "No changes to commit"

# Build and publish
pnpm build:lib

# Configure npm authentication
echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc

# Publish to npm
npx changeset publish
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
1 change: 1 addition & 0 deletions .husky/pre-commit
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
npx lint-staged
5 changes: 5 additions & 0 deletions .lintstagedrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
"*.{json,md,yml,yaml}": ["prettier --write"],
"*.{ts,tsx}": ["bash -c 'tsc --noEmit'"]
}
3 changes: 3 additions & 0 deletions .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules
dist
pnpm-lock.yaml
14 changes: 7 additions & 7 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ All notable changes to this project will be documented in this file.

## 0.8.0

* Upgrade to support Storybook v9
* Add `@storybook/react` as a peer dependency
* Clean up dependencies and ensure proper workspace configuration
- Upgrade to support Storybook v9
- Add `@storybook/react` as a peer dependency
- Clean up dependencies and ensure proper workspace configuration

## 0.7.0

* Extract the package from the [monorepo](https://github.com/tyom/storybook-addons) to make it easier to iterate and maintain.
* Rewrite the decorator to support Storybook v8.
* Add support for multiple contexts.
* Expose `useArgs` hook from `@storybook/preview-api` to access and update the args in the story.
- Extract the package from the [monorepo](https://github.com/tyom/storybook-addons) to make it easier to iterate and maintain.
- Rewrite the decorator to support Storybook v8.
- Add support for multiple contexts.
- Expose `useArgs` hook from `@storybook/preview-api` to access and update the args in the story.
91 changes: 91 additions & 0 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
# Contributing

## Development Setup

1. Clone the repository
2. Install dependencies: `pnpm install`
3. Build the library: `pnpm build:lib`
4. Run tests: `pnpm test`

## Making Changes

1. Create a new branch from `main`
2. Make your changes
3. Run linting: `pnpm lint` (or `pnpm lint:fix` to auto-fix)
4. Run type checking: `pnpm typecheck`
5. Run tests: `pnpm test`
6. Add a changeset: `pnpm changeset`

## Adding a Changeset

When you make changes that should be included in the changelog:

1. Run `pnpm changeset`
2. Select the packages to release (usually just `storybook-react-context`)
3. Select the type of change:
- `patch` - Bug fixes and minor updates
- `minor` - New features that are backward compatible
- `major` - Breaking changes
4. Write a summary of your changes (this will appear in the changelog)
5. Commit the generated changeset file in `.changeset/`

## Release Process

### Automated Releases (Recommended)

Releases are fully automated via GitHub Actions:

#### Stable Releases (from `main` branch)

1. Create a PR with your changes and changeset files
2. When merged to `main`, a "Release PR" is automatically created/updated
3. The Release PR contains version bumps and changelog updates
4. Merge the Release PR to publish to npm with the `latest` tag

#### Pre-releases (from `beta`, `alpha`, or `next` branches)

1. Create your branch from `main` (e.g., `beta`)
2. Add changesets as normal
3. Push to the pre-release branch
4. A Release PR is created for that branch
5. Merge to automatically publish with the appropriate tag (`beta`, `alpha`, or `next`)

### Manual Pre-release Process (Local Development)

For testing pre-releases locally:

1. Enter pre-release mode: `pnpm prerelease beta` (or `alpha`, `next`)
2. Add changesets: `pnpm changeset`
3. Version: `pnpm version` (creates versions like `0.8.1-beta.0`)
4. Publish: `pnpm release` (publishes with appropriate npm tag)
5. Exit pre-release mode: `pnpm prerelease:exit` (return to stable versioning)

### Manual Release Process (Emergency Only)

If you need to release manually:

1. Ensure you're on the correct branch (`main` for stable)
2. Run `pnpm version` to update version and changelog
3. Commit the changes: `git commit -m "chore: release"`
4. Run `pnpm release` to build and publish to npm
5. Push the changes and tags: `git push --follow-tags`

## Branch Strategy

- `main` - Stable releases (0.8.0, 0.9.0, 1.0.0)
- `beta` - Beta pre-releases (0.8.1-beta.0)
- `alpha` - Alpha pre-releases (0.8.1-alpha.0)
- `next` - Next version pre-releases (0.9.0-next.0)

## Scripts Reference

- `pnpm lint` - Run Biome linting
- `pnpm lint:fix` - Auto-fix linting issues
- `pnpm format` - Format code with Biome
- `pnpm typecheck` - Run TypeScript type checking
- `pnpm test` - Build and run tests
- `pnpm changeset` - Add a changeset for your changes
- `pnpm version` - Update versions based on changesets
- `pnpm release` - Build and publish to npm
- `pnpm prerelease <tag>` - Enter pre-release mode
- `pnpm prerelease:exit` - Exit pre-release mode
12 changes: 6 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,15 +53,15 @@ export default {
```

NB: Avoid using the same `context` parameter for `reactContext` as in the default export of the story. This will cause a
maximum call stack size exceeded error.
maximum call stack size exceeded error.

### Options

`withReactContext` takes an argument which is an object with the following optional properties:

- `context` - The context returned by `React.createContext` to provide for story's components
- `contextValue` - the value to use for the provider value. If a function is provided, it will be called with the story context as the first argument.
The function can return React hooks such as `useState` of `useReducer` to manage the state in the story definition.
The function can return React hooks such as `useState` of `useReducer` to manage the state in the story definition.
- `contexts` - an array of context options (an object with `context` and `contextValue` properties) to provide multiple contexts for story's components

The decorator options can also be set in story parameters using `reactContext` key:
Expand All @@ -81,7 +81,7 @@ const SomeStory = {
contextValue: { someContextValue: true },
},
},
}
};

// multiple provider are used wrapping the `MyComponent` component
const AnotherStory = {
Expand All @@ -95,11 +95,11 @@ const AnotherStory = {
{
context: SecondContext,
contextValue: [1, 2, 3],
}
]
},
],
},
},
}
};
```

The component or the result of the render function will be wrapped with providers setting the value to the result of `contextValue`.
Expand Down
Loading