open-index/open-npm huggingface dataset:
npm package: @itemconsulting/details-animated
Description: [![npm version](https://badge.fury.io/js/@itemconsulting%2Fdetails-animated.svg)](https://badge.fury.io/js/@itemconsulting%2Fdetails-animated)
Author: Tom Arild Jakobsen
Latest version: 0.0.6

# Custom component for animating details/summary elements

[![npm version](https://badge.fury.io/js/@itemconsulting%2Fdetails-animated.svg)](https://badge.fury.io/js/@itemconsulting%2Fdetails-animated)

## Usage

Register the custom element with JavaScript.

```javascript
import DetailsAnimated from "@itemconsulting/details-animated";

if (!window.customElements.get("details-animated")) {
  window.customElements.define("details-animated", DetailsAnimated);
}
```

Use the custom element to wrap a `<details>`/`<summary`.

```html
<details-animated>
  <details>
    <summary>Open this nice animated disclosure</summary>
    
    This part here will animate in nicely!
  </details>
</details-animated>
```
npm package: @itemconsulting/popover-gallery
Description: [![npm version](https://badge.fury.io/js/@itemconsulting%2Fpopover-gallery.svg)](https://badge.fury.io/js/@itemconsulting%2Fpopover-gallery)
Author: Tom Arild Jakobsen
Latest version: 0.4.0

# Custom component for animating opening an image link in a popover

[![npm version](https://badge.fury.io/js/@itemconsulting%2Fpopover-gallery.svg)](https://badge.fury.io/js/@itemconsulting%2Fpopover-gallery)

A custom elements that replaces links to images with buttons that opens that image in a popover.

## Usage

Register the custom element with JavaScript.

```javascript
import PopoverGallery from "@itemconsulting/popover-gallery";

if (!window.customElements.get("popover-gallery")) {
  window.customElements.define("popover-gallery", PopoverGallery);
}
```

Use the custom element to wrap a set of images in links.

```html
<popover-gallery data-popover-text-close="Lukk">
  <a href="image1-large.jpg" id="pg-image-1" target="_blank">
    <img src="image1-thumb.jpg" alt="" />
  </a>

  <a href="image2-large.jpg" id="pg-image-2" target="_blank">
    <img src="image2-thumb.jpg" alt="" />
  </a>
</popover-gallery>
```
npm package: @itemconsulting/preset-enonic-xp
Description: Preset for using Storybook with Enonic XP
Author: Tom Arild Jakobsen
Latest version: 0.5.0

# Enonic XP preset for Storybook

Storybook preset for integrating with Enonic XP

[![npm version](https://badge.fury.io/js/@itemconsulting%2Fpreset-enonic-xp.svg)](https://badge.fury.io/js/@itemconsulting%2Fpreset-enonic-xp)

## Usage

Install the package in your project.

```bash
npm i --save @itemconsulting/preset-enonic-xp
```
Add the preset to your *main.ts* (or *main.js*) file.

```typescript
import type { StorybookConfig } from "@storybook/server-webpack5";

const config: StorybookConfig = {
  addons: [
    '@itemconsulting/preset-enonic-xp'
  ],
};

export default config;
```

## Running tests

Unit tests can be run with the following command

```bash
npm run build && node --test
```
npm package: @itemku/fe-core
Description: itemku fe-core is available as an [npm package](https://www.npmjs.com/package/@itemku/fe-core).
Author: itemku team
Latest version: 0.1.4

<!-- markdownlint-disable-next-line -->
<p align="center">
  <a href="https://itemku.com/" rel="noopener" target="_blank">
  <img width="150" src="https://itemku.com/favicon.ico" alt="itemku logo"></a>
</p>

<h1 align="center">itemku Fe-Core</h1>

<div align="center">

Design and implement [React](https://reactjs.org/) apps. itemku-fe-core is a collection of various function & commonly used React component


</div>

## Installation

itemku fe-core is available as an [npm package](https://www.npmjs.com/package/@itemku/fe-core).

## Usage

Here is a quick example to get you started, **it's all you need**:

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { COMMON_HELPER } from '@itemku/fe-core';

function App() {
  return (
    <div>
      <p>{
        // convert string to title case
        COMMON_HELPER.titleCase('this string should be converted to title case') // expected output: This String Should Be Converted To Title Case
      }</p>
      <p>{
        // convert string to slug
        COMMON_HELPER.convertToSlug('this string should be converted to slug') // expected output: this-string-should-be-converted-to-slug
      }</p>
      <p>{
        // get 2nd day of the week in bahasa indonesia
        COMMON_HELPER.numberToDayOfWeek(2) // expected output: Selasa
      }</p>
      <p>{
        // combine array of string to a sentence in bahasa indonesia
        COMMON_HELPER.arrayToSentence(['jeruk', 'anggur', 'apel', 'kentang', 'pepaya']) //expected output: jeruk, anggur, apel, kentang dan pepaya
      }</p>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));
```

Yes, it's really all you need to get started as you can see in this live and interactive demo:

## Documentation

Check out our [documentation website](https://itemku.com/).

## Changelog

If you have recently updated, please read the [changelog](https://github.com/FIVEJACK/itemku-fe-core/releases) for details of what has changed.

## License

This project is licensed under the terms of the
[MIT license](/LICENSE).
npm package: @itemku/itemku-arcade
Description: itemku design system
Author: itemku team
Latest version: 1.59.2

<!-- markdownlint-disable-next-line -->
<p align="center">
  <a href="https://itemku.com/" rel="noopener" target="_blank"><img width="150" src="https://itemku.com/favicon.ico" alt="itemku logo"></a>
</p>

<h1 align="center">itemku Arcade</h1>

<div align="center">

Design and implement [React](https://reactjs.org/) apps. itemku-arcade is a simple and customizable component library to build UX React applications..


</div>

## Installation

itemku arcade is available as an [npm package](https://www.npmjs.com/package/@itemku/itemku-arcade).

## Usage

Here is a quick example to get you started, **it's all you need**:

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@itemku/itemku-arcade/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));
```

Yes, it's really all you need to get started as you can see in this live and interactive demo:

## Documentation

Check out our [documentation website](https://itemku.com/).

## Changelog

If you have recently updated, please read the [changelog](https://github.com/FIVEJACK/itemku-arcade/releases) for details of what has changed.

## Roadmap

The future plans and high priority features and enhancements can be found in the [roadmap](https://github.com/FIVEJACK/itemku-arcade/roadmap) file.

## License

This project is licensed under the terms of the
[MIT license](/LICENSE).
npm package: @itemku/react-native-unified-sdk
Description: Zendesk Unified SDK for React Native
Author: Rionardo
Latest version: 0.4.1

# React Native Zendesk Unified SDK

[![npm version](https://badge.fury.io/js/%40itemku%2Freact-native-unified-sdk.svg)](https://badge.fury.io/js/%40itemku%2Freact-native-unified-sdk)

React Native Zendesk Unified SDK, current only Android Ver
https://developer.zendesk.com/embeddables/docs/android-unified-sdk/introduction

# Getting started

## Android

#### Add packages

```jsx
yarn add react-native-unified-sdk
```

### Add Zendesk Maven Url in build.gradle

```
maven {
    url "https://zendesk.jfrog.io/zendesk/repo"
}
```

### Quickstart

Init Zendesk in index.js

```jsx
import {
  UnifiedSDK,
  HelpCenterProvider,
} from "@itemku/react-native-unified-sdk";

UnifiedSDK.initSDK("https://itemku.zendesk.com", "testId", "testKey");
HelpCenterProvider.init();
```

### Call Function

```jsx
UnifiedSDK.setAnonymousIdentity("itemku", "itemku@itemku.com"); // set anonymous identity
UnifiedSDK.showMessagingActivity(useAnswerBot); // show messaging activity
UnifiedSDK.showCreateTicket({
  subject: "itemku Hebat",
  tags: ["itemku", "hebat"],
  fields: [
    {
      id: 12345678,
      value: "rionardo",
    },
  ],
}); // create ticket with configuration
UnifiedSDK.showTicketList({
  isContactUsVisible: false,
  showConversationButton: false,
  labels: ["rionardo", "itemku"],
  categoryIds: [1231, 1232],
  sectionIds: [12345, 123456],
}); // show ticket list

//Help Center API Get Categories
const getCategories = async () => {
  let result = await HelpCenterProvider.getAllCategories();
  console.log(result);
};

//Help Center API Get Sections
const getSections = async () => {
  let result = await HelpCenterProvider.getSections(202586637);
  console.log(result);
};

//Help Center API Get Articles
const getArticles = async () => {
  let result = await HelpCenterProvider.getArticles(203885138);
  console.log(result);
};

//Help Center API Get Suggested Articles
const getSuggestedArticles = async () => {
  try {
    let result = await HelpCenterProvider.getSuggestedArticles("itemku");
    console.log(result);
  } catch (e) {
    console.log(e);
  }
};

//Help Center API upvote article
const upvoteArticle = async () => {
  try {
    let result = await HelpCenterProvider.upvoteArticle(115002238612);
    console.log(result);
  } catch (e) {
    console.log(e);
  }
};

//Help Center API downvote article
const downvoteArticle = async () => {
  try {
    let result = await HelpCenterProvider.downvoteArticle(115002238612);
    console.log(result);
  } catch (e) {
    console.log(e);
  }
};
```

## Customize Theme

### in your Android styles.xml

```jsx
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <!-- Customize your theme here. -->
    <item name="android:textColor">#000000</item>
    <item name="colorPrimary">#307FE2</item>
    <item name="colorPrimaryDark">#0065D2</item>
    <item name="colorAccent">#E1EEFF</item>
</style>
```

### More info

https://developer.zendesk.com/embeddables/docs/android-support-sdk/customize_the_look
npm package: @itemku/redux-maker
Description: Easily create redux action, reducers
Author: Rionardo
Latest version: 0.2.3

# Redux Maker

[![npm version](https://badge.fury.io/js/%40itemku%2Fredux-maker.svg)](https://badge.fury.io/js/%40itemku%2Fredux-maker)
![CI](https://github.com/FIVEJACK/redux-saga/workflows/CI/badge.svg?branch=master)

Redux maker is an action creator and reducers helper that will create the actions and name for you

# Quickstart

create actions + reducers return

```jsx
import 'ReduxMaker' from '@itemku/redux-maker';

export const Actions = {
  testChangeId: (userId: number) => {
    let state = store.getState();
    return {
      user: {
        ...state.reducersTest.user,
        userId: userId,
      },
    };
  },

  testChangeEmailPassword: (email: string, password: string) => {
    let state = store.getState();
    return {
      user: {
        ...state.reducersTest.user,
        email: email,
        password: password,
      },
    };
  },

  testChangeEmailPasswordAlternative: (email: string, password: string) => (prevState: any) => {
    return {
      user: {
        ...prevState.reducersTest.user,
        email: email,
        password: password,
      },
    };
  },
};


export const Sagas = {
  testLoginSagas: (email: string, password: string) => ({
    email,
    password,
  }),
};

const testAction = (test: AnyAction) => {
  console.log('SAGAS RUN', test);
};

const testReducers = new ReduxMaker('TEST', INITIAL_STATE, Actions, Sagas);

export default testReducers; // for getting name info etc

export const sagas = [
  takeLatest(testReducers.names.testLoginSagas, testAction),
]; // for sagas part
export const reducers = testReducers.getReducers; // for reducers part

```
npm package: @itemku/typeorm-code-generator
Description: From SQL Statement to typeorm migration code in typescript
Author: Henry
Latest version: 0.1.0

# Fivejack / Typeorm Migration Code Generator

This CLI program helps generate code segment used in typeorm migration typescript code.
The input is MySql DDL in MySql Workbench or SQL statements in general.

## Basic dependencies

Make sure you have these installed in your computer for development

1. Node.js
2. Yarn (or npm)
3. Nodemon (`yarn global add nodemon` or `npm install -g nodemon`)

## How to Install

1. yarn build (if you clone the project and want to build locally)
2. npm install -g @itemku/typeorm-code-generator

## How to Generate Migration Code

run in git bash terminal: 'typeorm-generate migration:create -i <input_sql_file> -n <migration_name>'
example: typeorm-generate migration:create -i shop.sql -n create-shop-table

You should already have database/migrations folder, and it will generate <timestamp>-create-shop-table.ts

## How to Generate Columns Code Segment

run in git bash terminal: 'typeorm-generate migration:column -i <input_sql_file> -o <output_file>'
example: typeorm-generate migration:column -i shop.sql -o columns.ts

This is for generating columns code segment only.

## How to Generate Indices Code Segment

run in git bash terminal: 'typeorm-generate migration:index -i <input_sql_file> -o <output_file>'
example: typeorm-generate migration:index -i shop.sql -o indices.ts

This is for generating indices code segment only.
npm package: @itenium/date-holidays-be
Description: Zero dependency functions to determine the official Belgian holidays for a given year in NL/FR/EN/DE
Author: Itenium
Latest version: 1.0.0

# date-holidays-be

> Provides the official Belgian holidays in NL/FR/DE/EN.

A zero dependency package to get the official Belgian holidays.

## Install

```sh
npm install --save @itenium/date-holidays-be
```

## Use

```js
import { isHoliday, getHolidays } from '@itenium/date-holidays-be';

const holiday: boolean = isHoliday(new Date(2023, 0, 1));
const holidays: Holiday[] = getHolidays(2023);
```

## Typings

```ts
type Holiday = {
  date: Date;
  labels: {
    nl: string;
    fr: string;
    de: string;
    en: string;
  }
}
```

## Motivation

If you just need to calculate something very specific,
importing [`date-holidays`](https://github.com/commenthol/date-holidays)
results in a whopping 10MB dependency.

This turned out to be a performance issue that
came up during our "React Component Profiling"
technical session at itenium.


## Development

```sh
npm install
npm run build

# Run tests
npm t
```

### Publish

[`date-holidays-be` @ npmjs.com](https://www.npmjs.com/package/@itenium/date-holidays-be)

```sh
npm run build
npm login  # username: itenium
npm publish --access public
```