open-index/open-npm huggingface dataset:
npm package: @sanjupanicker26/file-processing-unit
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.11.
Latest version: 0.0.1

# FileProcessingUnit

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.11.

## Code scaffolding

Run `ng generate component component-name --project file-processing-unit` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project file-processing-unit`.
> Note: Don't forget to add `--project file-processing-unit` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build file-processing-unit` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build file-processing-unit`, go to the dist folder `cd dist/file-processing-unit` and run `npm publish`.

## Running unit tests

Run `ng test file-processing-unit` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
npm package: @sanjupanicker26/ict-image-processing
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.10.
Latest version: 0.0.1

# ImageProcessing

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.10.

## Code scaffolding

Run `ng generate component component-name --project image-processing` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project image-processing`.
> Note: Don't forget to add `--project image-processing` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build image-processing` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build image-processing`, go to the dist folder `cd dist/image-processing` and run `npm publish`.

## Running unit tests

Run `ng test image-processing` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
npm package: @sanjupanicker26/upload-processing
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.12.
Latest version: 0.0.1

# UploadProcessing

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.12.

## Code scaffolding

Run `ng generate component component-name --project upload-processing` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project upload-processing`.
> Note: Don't forget to add `--project upload-processing` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build upload-processing` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build upload-processing`, go to the dist folder `cd dist/upload-processing` and run `npm publish`.

## Running unit tests

Run `ng test upload-processing` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
npm package: @sankarbala/datepicker
Description: react/typescript component for picking date
Author: Sankar Bala
Latest version: 1.0.5

# @React Datepicker

A simple datepicker for react/typescript component.

You can set an id, name, placeholder, a onChange callback,
className and a preselected value via props.

[See demo link](https://sankarbala.github.io/datepicker/)

## Installation

The package can be installed via npm or yarn:

```bash
npm install @sankarbala/datepicker
```

```bash
yarn add @sankarbala/datepicker
```

## Usage

```js
import React, { useState } from "react";
import { DatePicker } from "@sankarbala/datepicker";

const MyForm = ({ data }) => {
  const [date, setDate] = useState("01/02/2023");

  const handleInputChanged = ({ e }) => {
    setDate(e.target.value);
  };

  <DatePicker
    id="birthday"
    name="birthday"
    onChange={handleInputChanged}
    value={date}
    className="form-control"
  />;
};
```

## Props

**_id_** : an optional id for the datepicker (optional:string)\
**_name_** : an optional name for the datepicker (optional:string)\
**_placeholder_** : a placeholder string (optional:string)\
**_value_** : set the value of the datepicker input (optional:date)\
**_onChange_** : a callback function that takes as argument (target:func)\
**_className_** : an optional attribute for the datepicker (optional:string)\
**_disabled_** : an optional attribute for the datepicker (optional:boolean)\
**_otherAttributes_** : an optional attribute for object of the rest attributes the datepicker (optional:object)
npm package: @sankei-arc-shared-components/content-source_cxense-related-articles
Description: # How do I use it in my Fusion Project?
Latest version: 0.2.1

## CXENSE Related Articles: A Sankei Shared Fusion Component

# How do I use it in my Fusion Project?

```javascript

import 'regenerator-runtime';
import 'isomorphic-fetch';
import createContentSource from '@sankei-arc-shared-components/content-source_cxense-related-articles';

import {
  CXENSE_KEYWORDS_PERSISTED_KEY,
  CXENSE_RELATED_ARTICLES_PERSISTED_KEY,
} from 'fusion:environment';

import { getArticleById } from './utils/fetch-helpers';

const params = {
  storyId: 'text',
  types: 'text',
};

const config = {
  keywordsPersistedKey: CXENSE_KEYWORDS_PERSISTED_KEY,
  articlesPersistedKey: CXENSE_RELATED_ARTICLES_PERSISTED_KEY,
};

const fetch = async (query) => {
  const { 'arc-site': website = 'sankei', storyId, types: typesString } = query;
  const types = typesString.split(',');

  const includedFields = [
    'canonical_website',
    'content_elements',
    'headlines.basic',
    'label.yahoo.text',
    // website is expected to be the canonical_website
    // it will be set by the lambda, using info from draft API
    `websites.${website}.website_section._id`,
  ];

  const storyQuery = { _id: storyId, 'arc-site': website };
  const story = await getArticleById(storyQuery, includedFields);

  return createContentSource(config)(types, story);
};

export default {
  cache: false,
  fetch,
  params,
};
```
npm package: @sankei-arc-shared-components/element_admin-message
Description: ```javascript import React from 'react'; import { useFusionContext } from 'fusion:context'; import AdminMessage from "@sankei-arc-shared-components/element_admin-message";
Latest version: 0.1.2


## Admin Message: A Shared Element

# How do I use it?

```javascript
import React from 'react';
import { useFusionContext } from 'fusion:context';
import AdminMessage from "@sankei-arc-shared-components/element_admin-message";

const ArticleFeature = () => {
  const { globalContent, isAdmin } = useFusionContext();

  if (!globalContent) {
    return (
      <AdminMessage isAdmin={isAdmin} type="error">
        Please add valid global content to use this feature.
      </AdminMessage>
    );
  }

  return <div>I'm the article feature!</div>
}
```

Take a look in the `src/index.mdx` file to see suggested implementations.
npm package: @sankei-arc-shared-components/element_icon
Description: ```javascript import Icon from "@sankei-arc-shared-components/element_icon";
Latest version: 0.4.3


## Icon Element

# How do I use it?

```javascript
import Icon from "@sankei-arc-shared-components/element_icon";

<Icon name="bars" />;
```

Take a look in the `src/index.mdx` file to see suggested implementations.
npm package: @sankei-arc-shared-components/element_layout
Description: A wrapper component that takes in a `className` and `children` as props. ```javascript <Layout className='layout'>   ...   ... </Layout> ```
Latest version: 0.1.5

## Layout Component

# How do I use it?
A wrapper component that takes in a `className` and `children` as props.
```javascript
<Layout className='layout'>
  ...
  ...
</Layout>
```

Take a look in the `src/index.mdx` file to see suggested implementations.
npm package: @sankei-arc-shared-components/feature_sns-share-icons
Description: ```javascript import SnsShareIcons from "@sankei-arc-shared-components/feature_sns-share-icons";
Latest version: 0.3.18


## Hello World: A Test Shared Component

# How do I use it?

```javascript
import SnsShareIcons from "@sankei-arc-shared-components/feature_sns-share-icons";

... some code

const ans = { ... };

<SnsShareIcons ans={ans} />;

more code ...

```

Take a look in the `src/index.mdx` file to see suggested implementations.