open-index/open-npm huggingface dataset:
npm package: @phronesyss/bar-chart
Description: This is the first part of the admetricks challenge, that consist on creating two components:
Author: phronesys
Latest version: 0.0.12

## Admetricks challenge

This is the first part of the admetricks challenge, that consist on creating two components:

- [X] Responsive landing page
- [X] D3 chart
- [ ] ~~AngularJS Microfront~~

The idea is to incorporate this components into an AngularJS App as a single-spa, containing the Vue app as a component with views...
But I couldn't do the AngularJs part because of time, I spend quite a while on learning D3, and I did enjoy it 
### [Demo](https://luxury-hamster-60025b.netlify.app/#/) 

## To run this project
To compile use Node v16 or newer

```bash
git clone https://github.com/phronesys/admetricks-challenge-vue
```

```
cd admetricks-challenge-vue && npm i && npm run dev
```

Will open the app in http://localhost:3000 on the landing page, click on any of the buttons in there or add `/chart` to the url to see the d3 chart.

### Tools used

- vue 3 (script setup)
- vueuse
- vue-router
- typescript
- vitest (similar to jest with hmr)
- tailwindcss
- D3

### Reference D3

- https://www.digitalocean.com/community/tutorials/getting-started-with-data-visualization-using-javascript-and-the-d3-library
- https://youtu.be/TOJ9yjvlapY
- https://stackoverflow.com/questions/63720976/d3-v5-center-path-line-in-a-bar-graph
- https://observablehq.com/@d3/learn-d3-scales?collection=@d3/learn-d3
- https://stackoverflow.com/questions/46976677/d3-typescript-set-element-to-an-attribute-of-the-path-element

and much more stackoverflow...
I should have used this 😳 https://c3js.org/examples.html
npm package: @phryneas/experimental-redux-starter-kit
Description: A simple set of tools to make using Redux easier
Author: Mark Erikson
Latest version: 0.8.1-donotuse-dtsRollup-2

# Redux Starter Kit

[![build status](https://img.shields.io/travis/reduxjs/redux-starter-kit/master.svg?style=flat-square)](https://travis-ci.org/reduxjs/redux-starter-kit)

[![npm version](https://img.shields.io/npm/v/redux-starter-kit.svg?style=flat-square)](https://www.npmjs.com/package/redux-starter-kit)

[![npm downloads](https://img.shields.io/npm/dm/redux-starter-kit.svg?style=flat-square)](https://www.npmjs.com/package/redux-starter-kit)

**A simple set of tools to make using Redux easier**

`npm install redux-starter-kit`

(Special thanks to Github user @shotak for donating to the package name.)

### Purpose

The Redux Starter Kit package is intended to help address three common concerns about Redux:

- "Configuring a Redux store is too complicated"
- "I have to add a lot of packages to get Redux to do anything useful"
- "Redux requires too much boilerplate code"

We can't solve every use case, but in the spirit of [`create-react-app`](https://github.com/facebook/create-react-app) and [`apollo-boost`](https://dev-blog.apollodata.com/zero-config-graphql-state-management-27b1f1b3c2c3), we can try to provide some tools that abstract over the setup process and handle the most common use cases, as well as include some useful utilities that will let the user simplify their application code.

This package is _not_ intended to solve every possible concern about Redux, and is deliberately limited in scope. It does _not_ address concepts like "reusable encapsulated Redux modules", data fetching, folder or file structures, managing entity relationships in the store, and so on.

### What's Included

Redux Starter Kit includes:

- A `configureStore()` function with simplified configuration options. It can automatically combine your slice reducers, adds whatever Redux middleware you supply, includes `redux-thunk` by default, and enables use of the Redux DevTools Extension.
- A `createReducer()` utility that lets you supply a lookup table of action types to case reducer functions, rather than writing switch statements. In addition, it automatically uses the [`immer` library](https://github.com/mweststrate/immer) to let you write simpler immutable updates with normal mutative code, like `state.todos[3].completed = true`.
- A `createAction()` utility that returns an action creator function for the given action type string. The function itself has `toString()` defined, so that it can be used in place of the type constant.
- A `createSlice()` function that accepts a set of reducer functions, a slice name, and an initial state value, and automatically generates corresponding action creators, types, and simple selector functions.
- The `createSelector` utility from the [Reselect](https://github.com/reduxjs/reselect) library, re-exported for ease of use.

## Documentation

The Redux Starter Kit docs are now published at **https://redux-starter-kit.js.org**.

We're currently expanding and rewriting our docs content - check back soon for more updates!
npm package: @phryneas/fluent-ie11-compat
Description: This is the basis for a IE11-compatible build of [fluent.js](https://projectfluent.org/).
Latest version: 0.12.2

This is the basis for a IE11-compatible build of [fluent.js](https://projectfluent.org/).

It polyfills the `y` flag for regexes.

Currently version 0.12, because that's what we use internally. Modify it as you want.
npm package: @phryneas/ts-version
Description: A little utility type package that allows you to access the current TypeScript version from your types.
Author: Lenz Weber
Latest version: 1.0.2

# `@phryneas/ts-version`

A little utility type package that allows you to access the current TypeScript version from your types.

```ts
import { TSVersion } from "@phryneas/ts-version";

type Version = `${TSVersion.Major}.${TSVersion.Minor}`;

type VersionDependentType = TSVersion.AtLeast<4, 7> extends true
  ? "we're in the future!"
  : "it's the stone age!";
```
npm package: @phryxia/oof
Description: `oof` is a tiny TypeScript library for functional programming utilities with type safety. When learning functional paradigm with JavaScript, you may feel some despair of typing `pipe` (or `go`) correctly.
Author: phryxia
Latest version: 1.0.7

# oof!

`oof` is a tiny TypeScript library for functional programming utilities with type safety. When learning functional paradigm with JavaScript, you may feel some despair of typing `pipe` (or `go`) correctly.

# API

```ts
// you only type once
const foo = oof((x: string) => x.length)
  .compose(num => num === 42)
  .compose(isTruthUnveiled => isTruthUnveiled ? () => console.log("I'm die. Thank you forever.") : () => {})

// you can call this directly
foo() // foo(x: string): () => void

// want to proceed more?
const bar = foo.compose()
```

# Why?

```ts
// You're currently writing a nice composed function...
pipe(
  (value: string) => returnsSomeNiceComplexType(),
  // Parameter 'iWantNoImplicitAnyBeTrue' implicitly has an 'any' type (7006)
  (iWantNoImplicitAnyBeTrue) => butYouCantBecauseAboveTypeIsHell(),
)

// This is also verbose
// since most of the time you start with inner things
const result = pipe<[Do, I, Have, To, Declare, These, Always, QuestionMark]>(
  what,
  if,
  you,
  add,
  other,
  functions,
  somewhere,
  between,
  these // type error: Expected 8 arguments, but got 9 (2554)
)

// of course, this anyscript often ends up with 
// "Uncaught ReferenceError: peace is not defined"
result.peace()
```