open-index/open-npm huggingface dataset:
npm package: @jordif/react-calendar-list
Description: A lightweight, unstyled React component for rendering schedules or archives as a list of monthly calendars. Perfect for event feeds, blog archives and availability overviews.
Author: Jordi Fontseca
Latest version: 1.0.1

# @jordif/react-calendar-list

A lightweight, unstyled React component for rendering schedules or archives as a list of monthly calendars. Perfect for event feeds, blog archives and availability overviews.

---

## 🚀 Features

* **🪶 Lightweight:** Zero dependencies (other than React).
* **🎨 Unstyled:** Provides the logic and structure; you provide the CSS.
* **📅 Sequential Layout:** Renders months in a list.
* **🧩 Flexible:** Perfect for event feeds, availability overviews or blog archives.

## 📦 Installation

```bash
npm install @jordif/react-calendar-list
```

## ⚙️ Options

The component accepts the following props:

| Prop                | Type                       | Description                                                                   |
| :------------------ | :------------------------- | :---------------------------------------------------------------------------- |
| `posts`             | `Array<Post>` *(required)* | Array of objects to be rendered. Each object must include a `date`.           |
| `locale`            | `string` *(optional)*      | Determines the calendar language. Default: `en-US`.                           |
| `startOnMonday`     | `boolean` *(optional)*     | If `true`, the week will begin on Monday instead of Sunday. Default: `false`  |

## ⚙️ The 'Post' Object

The `posts` array should contain objects with the following structure:

| Key         | Type                | Description                                      |
| :---------- | :------------------ | :----------------------------------------------- |
| `date`      | `Date` *(required)*   | The date of the post.                |
| `url`       | `string` *(optional)* | The link the post points to.         |
| `className` | `string` *(optional)* | A CSS class name for custom styling. |

## Usage Example

### 1. Import the component
First, import the calendar into your React file:

```jsx
import { CalendarList } from "@jordif/react-calendar-list/CalendarList";
```

### 2. Define your data
Prepare the list of items (posts or events) that you want to display:

```jsx
type Post = {
  date: Date;
  url?: string;
  className?: string;
};

const posts: Post[] = [
  {
    date: new Date(2025, 11, 17),
    url: "https://web.dev/blog/lcp-and-inp-are-now-baseline-newly-available",
    className: "cwv",
  },
  {
    date: new Date(2025, 11, 16),
    url: "https://web.dev/blog/web-platform-12-2025",
    className: "css",
  },
  {
    date: new Date(2025, 11, 11),
    url: "https://web.dev/blog/upvote-features",
    className: "baseline",
  },
];
```

### 3. Render the component
Pass the list of posts to the component in your JSX:

```jsx
<CalendarList posts={posts} />
```
npm package: @jordwest/redux-effects
Description: Minimalistic side effects library for Redux
Author: Jordan West
Latest version: 0.1.2

# redux-effects

### Simple, tiny side-effects library for Redux

This library is a simple middleware to deal with side effects outside your action creators
without using thunks or other complex frameworks.

### Example

First, import and add the middleware to your reducer

```js
import {applyMiddleware} from "redux";
import {Effect, effectsMiddleware, afterEffect} from '@jordwest/redux-effects';

return Redux.createStore(
  rootReducer,
  undefined,
  applyMiddleware(effectsMiddleware(rootEffect))
);
```

Let's say you want to fire an API request when a `GET_WIDGETS` action is dispatched.

```js
let rootEffect = Effect.all(getWidgets);

const getWidgets = afterEffect(store => async (action) => {
  if (action.type === ActionType.GET_WIDGETS) {
    const widgets = await myApi.getWidgets();

    store.dispatch({ type: POPULATE_WIDGETS, widgets });
  }
});
```

Because each effect is effectively just a function, you can also pass dependencies to each effect, making it really easy to mock them out in tests.

```js
let rootEffect = myApi => Effect.all(getWidgets(myApi));

const getWidgets = myApi => afterEffect(store => async (action) => {
  if (action.type === ActionType.GET_WIDGETS) {
    const widgets = await myApi.getWidgets();

    store.dispatch({ type: POPULATE_WIDGETS, widgets });
  }
});
```

You can also perform one-time initialization of an effect in the first function:

```ts
const dragDrop = afterEffect(store => {
  let keyDownHandler = (e) => {
    store.dispatch({ type: ActionType.KEY_PRESSED, key: e.key });
  }

  return action => {
    if (action.type === ActionType.START_REPORTING_KEYS) {
      document.addEventListener('keydown', keyDownHandler);
    }
    if (action.type === ActionType.STOP_REPORTING_KEYS) {
      document.removeEventListener('keydown', keyDownHandler);
    }
  }
});
```

Note that handlers wrapped with `afterEffect` run actions after the action has been dispatched. For effects that need to run before the action
has been dispatched and before state has changed, use `beforeEffect`.

These functions are just convenience functions that are shorthand for returning an object as the second parameter. If you need to add an effect that
acts both before and after dispatch, you can skip the convenience functions and instead do:

```js
const myEffect = store => ({
    before: (action) => { ... },
    after: (action) => { ... },
})
```

### TypeScript

Type definitions are included. For easier type checking, it's recommended to create your own effect type to reuse:

```ts
export type AppEffect = Effect<RootState, RootAction>;

const myEffect: AppEffect = afterEffect(store => action => { ... });

// With dependency injection
const myDepEffect = (dependencies: Dependencies): AppEffect => afterEffect(store => action => { ... });
```