open-index/open-npm huggingface dataset:
npm package: @makeflow/gateway
Description: [![NPM version](https://img.shields.io/npm/v/@makeflow/gateway?color=%23cb3837&style=flat-square)](https://www.npmjs.com/package/@makeflow/gateway) [![Repository package.json version](https://img.shields.io/github/package-json/v/mufancom/gateway?color=%23
Author: Chengdu Mufan Technology Co., Ltd.
Latest version: 0.4.0

[![NPM version](https://img.shields.io/npm/v/@makeflow/gateway?color=%23cb3837&style=flat-square)](https://www.npmjs.com/package/@makeflow/gateway)
[![Repository package.json version](https://img.shields.io/github/package-json/v/mufancom/gateway?color=%230969da&label=repo&style=flat-square)](./package.json)
[![MIT License](https://img.shields.io/badge/license-MIT-999999?style=flat-square)](./LICENSE)
[![Discord](https://img.shields.io/badge/chat-discord-5662f6?style=flat-square)](https://discord.gg/vanVrDwSkS)

# Makeflow Gateway

A configurable gateway for development and production.

## Usage

```ts
import {
  Gateway,
  createIndexFileFallbackMatchPathRegex,
} from '@makeflow/gateway';

// development

const gateway = new Gateway({
  listen: {
    port: 8080,
  },
  targets: [
    {
      type: 'proxy',
      match: '/app/api',
      target: 'http://localhost:8081{path}',
    },
    {
      type: 'proxy',
      match: '/app',
      target: 'http://localhost:8082{path}',
    },
    {
      type: 'proxy',
      match: '/api',
      target: 'http://localhost:8061{path}',
    },
    {
      type: 'proxy',
      match: '',
      target: 'http://localhost:8062{path}',
    },
  ],
});

// production

const gateway = new Gateway({
  listen: {
    port: 8080,
  },
  targets: [
    {
      type: 'proxy',
      match: '/app/api',
      target: 'http://makeflow-app-server:8081{path}',
    },
    {
      type: 'file',
      match: createIndexFileFallbackMatchPathRegex('/app'),
      target: Path.join(__dirname, '../../static/app/index.html'),
    },
    {
      type: 'file',
      match: '/app',
      target: Path.join(__dirname, '../../static/app{path}'),
    },
    {
      type: 'proxy',
      match: '/api',
      target: 'http://makeflow-community-site-server:8061{path}',
    },
    {
      type: 'file',
      match: createIndexFileFallbackMatchPathRegex(),
      target: Path.join(__dirname, '../../static/site/index.html'),
    },
    {
      type: 'file',
      match: '',
      target: Path.join(__dirname, '../../static/site{path}'),
    },
  ],
});

gateway.serve();
```

## License

MIT License.
npm package: @makeflow/power-app
Description: Makeflow PowerApp Node.js Framework.
Latest version: 0.3.0-wip.15

# Makeflow PowerApp Framework

```ts
import PowerApp from '@makeflow/power-app';
import Adapter from '@makeflow/power-app-xxxx';

const powerApp = new PowerApp();

powerApp.version('0.1.0', {
  // ...
});

powerApp.serve(Adapter);
```
npm package: @makeflow/power-app-express
Description: Makeflow PowerApp Server Adapter - Express.
Latest version: 0.3.0-wip.12

# Makeflow PowerApp Express Adapter

```ts
const powerApp = new PowerApp();

// middleware
powerApp.middleware(expressAdapter, '/makeflow');

// server
powerApp.serve(expressAdapter, {
  host: 'http://localhost',
  port: 3000,
  path: '/makeflow',
});
```
npm package: @makeflow/power-app-hapi
Description: Makeflow PowerApp Server Adapter - Hapi.
Latest version: 0.3.0-wip.12

# Makeflow PowerApp Hapi Adapter

```ts
const powerApp = new PowerApp();

// hapi plugin
powerApp.middleware(hapiAdapter);

// server
powerApp.serve(hapiAdapter, {
  host: 'http://localhost',
  port: 3000,
});
```
npm package: @makeflow/power-app-koa
Description: Makeflow PowerApp Server Adapter - Koa.
Latest version: 0.3.0-wip.12

# Makeflow PowerApp Koa Adapter

```ts
// middleware
powerApp.middleware(koaAdapter, '/makeflow');

// server
powerApp.serve(koaAdapter, {
  host: 'http://localhost',
  port: 8080,
  path: '/makeflow',
});
```
npm package: @makeflow/slate-react
Description: A set of React components for building completely customizable rich-text editors.
Latest version: 0.12.2

This package contains the React-specific logic for Slate. It's separated further into a series of directories:

* [**Components**](./src/components) — containing the React components for rendering Slate editors.
* [**Constants**](./src/constants) — containing a few private constants modules.
* [**Plugins**](./src/plugins) — containing the React-specific plugins for Slate editors.
* [**Utils**](./src/utils) — containing a few private convenience modules.

Feel free to poke around in each of them to learn more!
npm package: @makeflow/tlds
Description: List of TLDs
Author: Stephen Mathieson
Latest version: 1.207.0


# tlds

  List of TLDs, scraped from [ICANN](https://www.icann.org/resources/pages/tlds-2012-02-25-en)

## License

(The MIT License)

Copyright (c) 2013 Stephen Mathieson &lt;me@stephenmathieson.com&gt;

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
npm package: @makeflow/ui
Description: ## Development
Author: Chengdu Mufan Technology Co., Ltd.
Latest version: 0.1.25

# Makeflow UI

## Development

```sh
parcel design/index.html
```

## Important Information

### z-index

- app: 0
- modal mask: 1
- modal: 2
- popup mask: 3
- popup: 4
npm package: @makeform/agreement
Description: ## config
Author: zbryikt
Latest version: 2.1.0

# @makeform/agreement

## config

 - `value`: text to be shown besides the checkbox.
 - `document`: Array of URLs of documents (either pdf or html) to be shown as the content of the agreement. (See Note)


## Note

While not reproducible, occasionally iframe may fails to load. Check this issue before using inline document feature.


## License

MIT
npm package: @makeform/base
Description: All @makeform blocks should provide a form.widget ( from `@plotdb/form` ) as its interface. There is no other requirement - or we can say that the widget spec defines the requirement.
Author: zbryikt
Latest version: 2.0.0

# @makeform widgets

All @makeform blocks should provide a form.widget ( from `@plotdb/form` ) as its interface. There is no other requirement - or we can say that the widget spec defines the requirement.

However, to minimize duplicated works between blocks, you can build a form block by extending `@makeform/base`. In this case you should follow the requiredment of the `@makeform/base` block and implement accordingly.


## @makeform/base

Implement following parts when extending `@makeform/base`:

 - HTML
 - CSS
 - JS


### HTML

Implement `widget` plug ( for more about a `plug`, see `@plotdb/block` ) which will be used to plug into `@makeform/base`'s DOM.

Additionally, consider following `bootstrap`'s `form-group` + `label` structure when building a block-based widget. A possible construct of a widget:

    .form-group
      label.d-flex.flex-wrap
        div
          div(ld="label")
          span.variant
        .flex-grow-1
        .m-edit(ld="limitation")
      .m-edit(ld-each="note")
      .m-view(ld="content")


There is no other requirement about HTML, however `@makeform/base` expects child blocks to implement their dynamics with `ldview` ( and thus the library is preloaded in `@makeform/base` ), so consider using `ldview` before implementing a form block.


#### Additional Concepts

 - `note`: list of additional notes for users. 
 - `limitation`: limitation of this field. should be short.
 - `variant`: variation of a certain field. e.g., `zh` and `en`.
 - `content`: content for viewing in view mode
 


### CSS Framework

`@makeform/base` is built upon CSS Framework of following:

 - bootstrap@4.6.1
 - @loadingio/bootstrap.ext
 - @loadingio/loading.css ( lite ) 
 - ldiconfont
 - ldbutton
 - ldcover

For other CSS libraries, please import them in separated blocks.


### CSS

Following CSS classes are preserved:

 - `m-edit`: widget is rendered in edit mode ( mutual exclusive with `m-view` )
 - `m-view`: widget is rendered in view mode ( mutual exclusive with `m-edit` )
 - `m-inline`: widget is rendered in inline mode
 - `has-variant`, `variant`
   - by default `variant` isn't displayed
   - use `has-variant` to show `variant` field.
 - `content`: by default, content is displayed as `pre-wrap`.


### JS

`@makeform/base`


## Other Design Consideration

 - we used to add `text-capitalize` in label but decide to remove it so user have total control of their label
npm package: @makeform/budget
Description: ## config
Author: zbryikt
Latest version: 1.0.0

# @makeform/budget

## config

 - `fields`: Array of field object with following fields:
   - `name`: field name.
   - `type`: field type. optional; when provided, it should be one of following:
     - `name`: item name.
     - `unit price`: item price, per item.
     - `quantity`: how many entries of this item.
     - `total price`: when `unit price` and `quantity` provided, this will be readonly and calculated automatically.
   - `width`: optional. used for explicitly set cell width (with unit).
 - `mode`: either `sheet` or `table`. default `sheet` if omitted.
   - when setting to `table`, table style edit interface is used. otherwise `@plotdb/sheet` is used.
 - `unit`: unit of the amount (displayed next to total amount field)


## License

MIT
npm package: @makeform/checkbox
Description: Checkbox style widget for users to make multiple choices from multiple options.
Author: zbryikt
Latest version: 3.0.1

# @makeform/checkbox

Checkbox style widget for users to make multiple choices from multiple options.


## Configs

 - `values`: Array of string/objects for options in this widget.
   - when object is used, it contains following fields:
     - `value`: actual value picked
     - `label`: text shown for user to select
 - `other`: default null. An object for config of `other` option, with following fields:
   - `enabled`: default false. should `other` option be shown.
   - `prompt`: default `其它` or `Other`. Prompt text for `other` option.
   - `requireOnCheck`: default false.
     - when true, the `Other` field must be filled when `Other` is checked;
       otherwise, this field will be considered invalid.
 - `layout`: default `inline`. decide how to layout options. possible values: either `inline` or `block`.
 - `view`: view mode related configs.
   - `mode`: either `text` or `full`. default `text`.
     - `text`: options are shown as concated text. `n/a` if no option is chosen.
     - `full`: all options will be shown with checkbox checked for chosen options.


## License

MIT
npm package: @makeform/checklist
Description: “A table-style checklist widget that displays a list of items for users to review. Each item can be either ‘checked’ or ‘rejected’ based on the user’s self-assessment, and the acceptable options are configurable.”
Author: zbryikt
Latest version: 3.0.1

# @makeform/checklist

“A table-style checklist widget that displays a list of items for users to review. Each item can be either ‘checked’ or ‘rejected’ based on the user’s self-assessment, and the acceptable options are configurable.”


## Configs

 - `items`: a list of string / objects for users to check. For object entries, it contains following fields:
   - `description`: string. the checklist item text. mandatory.
   - `note`: a list of string as the note of this item.
   - `check`: optional. if set, should be either true or false.
     - If not provided, the user’s choice will always be considered correct regardless of selection.
     - Use to decide the correct answer and this widget will be valid only if all items are checked as expected.


Example configuration:

    {   
      isRequired: true,
      config: {
        items: [
          {
            description: "some description, for item1"
            note: [
              "note 1, perhaps some limitation"
              "note 2, perhaps some reminder"
            ]
            check: true
          }
          "some other description, for item 2"
          "yet another description, for item 3"
        ]
      }
    }


## License

MIT
npm package: @makeform/choice
Description: Dropdown style widget for users to make one single choice between multiple options.
Author: zbryikt
Latest version: 4.0.1

# @makeform/choice

Dropdown style widget for users to make one single choice between multiple options.


## Configs

 - `values`: Array of string for options in this widget.
 - `multiple`: default false. when set to true, allow multiple choices
 - `other`: an object with following fields, for configuration of custom data:
   - `enabled`: show a dedicated `other` option.
   - `editable`: show a text field when `other` is chosen. default true if omitted
   - `requireOnCheck`: default false. when set to true, text field for `other` must not empty if `other` is chosen.
 - `sep`: default `,`. text separator for joining values from multiple choice in view mode.
 - `layout`: either `row` or `column`. default `column`. decide how to layout text field for `other` and select widget.
 


## Extension

use `init.choice` event with `{config: { ... }}` parameter to create a new widget based on certain configuration. For example:

    module.exports =
      pkg: extend: name: "@makeform/choice"
      init: ({pubsub}) -> pubsub.fire \init.choice, config: values: <[Apple Orange Banana]>

Specified configurations won't be overrided by users so always predefine a config if you don't want user to change its value.


## License

MIT
npm package: @makeform/common
Description: Base block implementing common features of a widget.
Author: zbryikt
Latest version: 3.1.4

# @makeform/common

Base block implementing common features of a widget.


## Supported Meta

`@makeform/common` provides ld selectors and default DOMs for rendering following meta fields:

 - `title`: field title.
 - `desc`: description of this field.
 - `isRequired`: true if this field is required.


## Supported Configs

`@makeform/common` provides ld selectors and default DOMs for rendering following config fields:

 - `note`: a list of string showing additional note about this field.
 - `limitation`: a string shown as the main requirement of this field.
 - `display`: either `inline` or `block`. The main difference of these display is:
   - `inline`: consider the widget as to be used inline, without header.
     - widget may be shown as `block` style element in CSS, so user should wrap widget properly.
   - `block`: header is shown.


## ld selectors

As mentioned above, a child block can use following ld selectors to build its own DOM:

 - `base`: node with `form-group` class.
 - `limitation`: node displaying limitation
 - `note`: iterable node displaying widget note.
 - `is-required`: show when value of this widget is required.
 - `label`: display widget title
 - `desc`: display widget description
 - `variant`: display widget variant
 - `display`: this node will be hidden if `display` mode is different from `data-display` value.
 - `error`: iterable node displaying widget errros.
 - `error-root`: node containing error information.
   - by default `@makeform/common` use `@loadingio/bootstrap.ext` tips to show tips.
     if `error-root` contains `has-tips` class, `manual` will be toggled based on widget status automatically.


## interface

`@makeform/common` provides additional members for child block to access, which are created by `@makeform/common`:

 - `info`
   - `meta`: the meta object
   - `config`: the config object
   - `display`: display mode, either `inline` of `block`. when omitted, default to `block`.
   - `view`: ldview object created by `@makeform/common`.
 - `child`
   - preserved for child block to use


## default classes

Following are classes used by @makeform/common and all blocks inheriting `@makeform/common`. While you can build the exactly same logic or design conventions with different class names by your own, following these conventions makes it easier to customize your blocks along with the default blocks in headless manner.

 - functional classes:
   - `m-view`: for nodes that should only be shown in view mode.
   - `m-edit`: for nodes that should only be shown in view mode.
 - style classes:
   - `mf-note`: decorator for note nodes.


## License

MIT
npm package: @makeform/country
Description: Dropdown Country Picker
Author: zbryikt
Latest version: 1.0.4

# @makeform/country

Dropdown Country Picker


## Configs

none.


## Performance Consideration

Country list is long, thus it may take time to render. `@makeform/choice` now separate options rendering from other parts to improve performance, however this is just a workaround. form should be rendered when necessary, thus we should consider refactor how forms are rendered.


## License

MIT
npm package: @makeform/currency
Description: (WIP) Short input widget for ease of choosing available currencies.
Author: zbryikt
Latest version: 2.0.0

# @makeform/currency

(WIP) Short input widget for ease of choosing available currencies.

This is a WIP widget and has works to be done before it becomes useful.


## Configs

 - `placeholder`: placeholder for input widget
 - `defaultCurrency`: default currency to use.
 - `availableCurrencies`: available currencies to choose.


## License

MIT
npm package: @makeform/datetime
Description: A datetime picker widget that supports both `date` or `date + time` mode.
Author: zbryikt
Latest version: 2.1.0

# @makeform/datetime

A datetime picker widget that supports both `date` or `date + time` mode.


## Configs

following configs are available:

 - `time`: an object with following fields;
   - `enabled`: default false. when true, show time (hour, minute, second) information.
 - `placeholder`: default ''. placeholder text for input field.


## License

MIT
npm package: @makeform/image
Description: image upload widget that extends `@makeform/upload` widgets to show image preview
Author: zbryikt
Latest version: 1.2.1

# @makeform/image

image upload widget that extends `@makeform/upload` widgets to show image preview


## Config

 - `crop`: an object with following fields:
   - `enabled`: default false. when true, crop image based on ratio derived from width / height below.
   - `width`: expected image width.
   - `height`: expected image height.
 - `lightbox`: an object with following fields:
   - `enabled`: default true. when true, toggle a lightbox for image preview when clicking on image.


## License

MIT
npm package: @makeform/input
Description: Text input widget suitable for one line short text, links or number.
Author: zbryikt
Latest version: 3.0.0

# @makeform/input

Text input widget suitable for one line short text, links or number.


## config

 - `asLink`: render input content as a link in view mode
 - `withLink`: render links inside input content as links in view mode
 - `asImage`: render input content as an image in view mode
 - `autoComma`: automatically add comma in input content. default false
   - yet comma will still be removed in underlying value .
 - `unit`: optional, a string representing unit of this field if provided.
   - shown as a small dimmed text at the corner of this widget if provided
 - `placeholder`: placeholder text to be shown. optional, nothing will be shown if omitted.
 - `hint`: an object with following field for input statistics hint.
   - `enabled`: default false. when true, show information based on length related `term` about how many characters left.

it also provides following configs for using in `@makeform/textarea` or any other widgets want to extend `@makeform/input` and use related features:

 - `showMarkdownOption`: default false. show markdown related options if true


## License

MIT
npm package: @makeform/radio
Description: Radio style widget for users to make one single choice between multiple options.
Author: zbryikt
Latest version: 3.0.2

# @makeform/radio

Radio style widget for users to make one single choice between multiple options.


## Configs

 - `values`: Array of string/objects for options in this widget.
   - when object is used, it contains following fields:
     - `value`: actual value picked
     - `label`: text shown for user to select
 - `other`: default null. An object for config of `other` option, with following fields:
   - `enabled`: default false. should `other` option be shown.
   - `prompt`: default `其它` or `Other`. Prompt text for `other` option.
 - `layout`: default `inline`. decide how to layout options. possible values: either `inline` or `block`.


## License

MIT
npm package: @makeform/richtext
Description: Richtext input widget. Based on Quilljs.
Author: zbryikt
Latest version: 0.2.1

# @makeform/richtext

Richtext input widget. Based on Quilljs.


## Config


## Opset

this widget provides one additional opset `richtext` with following 2 ops:

 - `image-count`: limit how many images users can insert in this widget.
   - config:
     - `min`: number, minimal image count
     - `max`: number, maximal image count
 - `text-length`: limit text length
   - config:
     - `min`: number, minimal image count
     - `max`: number, maximal image count
     - `method: string, default `char`. can be either `char` or `simple-word`.
       - length calculation will be based on character count if set to `char`.
         when `simple-word` is used, it will try to count by words (ignoring space, punctuations, etc)


## License

@makeform/richtext is released under MIT License.
QuillJS 2.0.2 is released under BSD-3 License. see LICENSE.Quill for more information.
npm package: @makeform/table
Description: ## Configs
Author: zbryikt
Latest version: 3.0.2

# @makeform/table

## Configs

 - `fields`: array of fields definition for fields to be used in this table.
 - `noHeader`: default false. hide table header if true.
 - `entryName`: default ''. name used when referring to a single entry in this table.
   - this will be used in places like button text such as "add entry", "add item", etc.

## Fields

`fields` in config is an array of widget definition object. it instructs how we should render and control the dynamics of each field. Each object contains following fields:

 - `type`: `@plotdb/block` style block identifier (bid) to indicate the widget to use. can also be a string such as `@makeform/input`.
 - `meta`: widget meta object. see `@plotdb/form` for more detail.


## License

MIT
npm package: @makeform/upload
Description: Widget for users to upload file(s).
Author: zbryikt
Latest version: 2.1.1

# @makeform/upload

Widget for users to upload file(s).


## Configs

 - `multiple`: boolean value, default false. if true, accept multiple files upload.



## Extension

`@makeform/upload` supports module extension with `ext` api: call `parent.ext` with following parameters to extend:

 - `view`: optional. ldview object to be rendered when re-rendered. `lc` object will be used as its context.
 - `render()`: a callback function that is called when re-rendered, with widget context.
 - `is-support(file)`:
   - given `file` object, return a promise resolving with `{supported}` object,
     indicating if that file is supported by true or false of `supported` field.
 - `detail(list)`: given a list of file objects, extend it with additional information.
   - return a promise.


## License

MIT
npm package: @makeform/video
Description: video upload widget that extends `@makeform/upload` widgets to show video preview.
Author: zbryikt
Latest version: 1.1.1

# @makeform/video

video upload widget that extends `@makeform/upload` widgets to show video preview.

We only support H.264-encoded videos in an MP4 container to ensure compatibility with the browser’s built-in player.


## Format Hint

For browser playback compatibility, we limit video formats to following:

    Please upload a video file with the .mp4 extension, using the MP4 container, encoded with H.264 (avc1) for video and MP3, AAC, or FLAC for audio.

this hint can be used with "video-format-hint" i18n token ( check the `i18n` object in `src/index.ls` ):

    meta: {
      config: { note: ["video-format-hint"] }
    }


## License

MIT
npm package: @makeheadway/commitlint-config
Description: Custom Headway Commitlint configuration
Author: Vlad Zusko
Latest version: 0.1.0

# @makeheadway/commitlint-config

Custom Headway Commitlint configuration.

## Installing

### Using NPM

```bash
npm install --save-dev @commitlint/cli @makeheadway/commitlint-config;
```

### Using Yarn

```bash
yarn add --dev @commitlint/cli @makeheadway/commitlint-config;
```

## Setting config

### By hands

Add the following in `.commitlintrc.js`:

```js
module.exports = {
  extends: ['@makeheadway/commitlint-config'],
  ...
};
```

Or use the following command, if you does not have `Commitlint` yet:

### By command

```bash
echo "module.exports = { extends: ['@makeheadway/commitlint-config'], };" > .commitlintrc.js;
```
npm package: @makeheadway/eslint-config
Description: Custom Headway ESLint configuration
Author: Vlad Zusko
Latest version: 1.0.0

# @makeheadway/eslint-config

Custom Headway ESLint configuration. Based on Airbnb configuration with some changes. Includes Prettier erroring.

## Installing

### Using NPM

```bash
npm install --save-dev eslint @makeheadway/eslint-config;
```

### Using Yarn

```bash
yarn add --dev eslint @makeheadway/eslint-config;
```

## Setting config

### By hands

Add the following in `.eslintrc`:

```json
{
  "extends": [..., "@makeheadway/eslint-config"],
  ...
}
```

Or use the following command, if you does not have `ESLint` yet:

### By command

```bash
echo "{ \"extends\": [\"@makeheadway/eslint-config\"] }" > .eslintrc;
```
npm package: @makeheadway/prettier-config
Description: Custom Headway Prettier configuration
Author: Vlad Zusko
Latest version: 0.1.0

# @makeheadway/prettier-config

Custom Headway Prettier configuration.

## Installing

### Using NPM

```bash
npm install --save-dev prettier @makeheadway/prettier-config;
```

### Using Yarn

```bash
yarn add --dev prettier @makeheadway/prettier-config;
```

## Setting config

### By hands

Add the following in `.prettierrc.js`:

```js
module.exports = {
  ...require('@makeheadway/prettier-config'),
  ...
};
```

Or use the following command, if you does not have `Prettier` yet:

### By command

```bash
echo "module.exports = { ...require('@makeheadway/prettier-config'), };" > .prettierrc.js;
```
npm package: @makeitdev/shared
Description: Shared utilities and types for RightProps applications
Author: MakeIt Team
Latest version: 1.1.20

# @makeit/shared

A shared library for makeitdev. Provides utility functions commonly used between client and server sides.

## Installation

```bash
npm install @makeit/shared
```

## Structure

```
src/
├── index.ts          # Main entry point
├── client/           # Client-side utilities
│   ├── index.ts
│   ├── contexts/
│   │   └── supabaseAuth.tsx
│   ├── hooks/
│   │   └── supabaseAuth.ts
│   └── utils/
│       ├── supabase.ts
│       └── utils.ts
└── server/           # Server-side utilities
    ├── index.ts
    └── utils/
        ├── accountLinking.ts
        ├── auth.ts
        ├── middleware.ts
        ├── profile.ts
        ├── roles.ts
        ├── signup.ts
        ├── supabase.ts
        └── utils.ts
```

## Environment Variables

The following environment variables are required for the server-side utilities:

```bash
# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# Required for JWT verification in getVerifiedUserFast()
SUPABASE_JWT_SECRET=your_supabase_jwt_secret
```

### Where to find these values:

- **SUPABASE_URL & ANON_KEY**: Found in your Supabase project dashboard under Settings > API
- **SERVICE_ROLE_KEY**: Found in the same location, but keep this secret (server-only)
- **JWT_SECRET**: Found under Settings > API > JWT Settings

## Usage

### Using the entire package

```typescript
import { formatDate, validateEmail } from '@makeit/shared'
```

### Using from client-side

```typescript
import { formatDate, formatCurrency } from '@makeit/shared/client'

const date = formatDate(new Date())
const price = formatCurrency(1000000)
```

### Using from server-side

```typescript
import { validateEmail, generateSlug } from '@makeit/shared/server'

const isValidEmail = validateEmail('user@example.com')
const slug = generateSlug('안녕하세요! Hello World!')
```

## Development

### Local Development

```bash
# Install dependencies
npm install

# Development mode (file change detection)
npm run dev

# Build
npm run build

# Release (version update + tag creation + push)
npm run release
```

### Deployment Process

1. After code changes, run `npm run release`
2. Automatically runs `npm version patch`
3. Creates Git tag and pushes
4. GitHub Actions automatically deploys to npm

## License

MIT
npm package: @makeitrealcamp/db-mock
Description: Simulates a database with one table that allows simple CRUD operations
Author: Germán Escobar
Latest version: 1.1.0

# Database Mock

Simulates a database with one table that allow simple CRUD operations (Create, Read, Update, Delete).

Objects that are stored in memory and can represent anything (e.g. people, places, blog posts, invoices, movies, customers, products, etc.).

Mocks in programming are used to simulate other parts of a system. In this case we are simulating a database engine. It is not a real database engine because data is not persisted and lacks all the features that database engines offer.

## Usage

First install the library:

```
npm install --save @makeitrealcamp/db-mock
```

Then require and use it in your code. For example:

```js
// import table from "@makeitrealcamp/db-mock"
const table = require("@makeitrealcamp/db-mock")

// insert records - it returns the record with an id property
const r1 = table.insert({ name: "Pedro Perez" }) // { id: 1, name: "Pedro Perez" }
const r2 = table.insert({ name: "Maria Gomez" }) // { id: 2, name: "Maria Gomez" }

// find all records
const records = table.findAll() // returns an array with all the records

// find by id
const record = table.findById(1) // returns the record with id 1
```

## API

This package exposes the following methods: `findAll`, `findById`, `insert`, `update` and `remove`.

### `findAll`

Returns all the records that have been inserted. For example:

```js
const records = table.findAll()
```

### `findById(id)`

Receives an id and returns the record with that id. If no record exists returns null. 

For example:

```js
const record = table.find(1)
```

### `insert`

Receives an object and returns a shallow copy of the object with an `id` property. The `id` is a number that starts with 1 and is incremented every time a record is inserted.

For example:

```js
const record = table.insert({ name: "Pedro" })
```

### `update`

Receives and object and replaces the record in the table. If the record doesn't have an `id` or the `id` is not found an error is raised.

This method doesn't return anything.

For example, assuming a record was already inserted, we can replace it:

```js
table.update({ id: 1, name: "Maria" })
```

### `remove`

Receives an `id` and deletes the record with that `id`. 

This method doesn't return anything.

For example, if a record was already inserted, we can delete it:

```js
table.delete(1)
```

## TODO

We need to add some tests.
npm package: @makejack4/react-bitkubnext-oauth2
Description: ## Installation ```sh yarn add @makejack4/react-bitkubnext-oauth2 ``` ## How to use ##### Step 1 : Connect with bitkub next for your UI-component ``` import { ReactBitkubNextOauth2 } from "@makejack4/react-bitkubnext-oauth2"
Latest version: 0.0.12

# React BitkubNext Oauth2
## Installation
```sh
yarn add @makejack4/react-bitkubnext-oauth2
```
## How to use
##### Step 1 : Connect with bitkub next for your UI-component
```
import { ReactBitkubNextOauth2 } from "@makejack4/react-bitkubnext-oauth2"

<ReactBitkubNextOauth2       
    clientId={"YOUR_CLIENT_ID"}
    redirectURI={"YOUR_OAUTH_REDIRECT_URI"}
>
    <button>connect with bitkub next</button>
</ReactBitkubNextOauth2>
```
==================
##### Step 2 : When Oauth2 Success, In your redirect uri will have code query string in your URL
```
import { exchangeAuthorizationCode } from '@makejack4/react-bitkubnext-oauth2'

const handlerGetAccessToken = async () => {
    const { access_token, refresh_token } = await exchangeAuthorizationCode("YOUR_OAUTH_CLIENT_ID", "YOUR_OAUTH_REDIRECT_URI", code)
    // success
    alert(access_token)
    alert(refresh_token)
}

```
==================
##### Extra : Extend Your Access Token if you have a refresh token
```
import { exchangeRefreshToken } from '@makejack4/react-bitkubnext-oauth2'

const handlerExtendAccessToken = async () => {
    const { access_token, refresh_token } = await exchangeRefreshToken("YOUR_OAUTH_CLIENT_ID", "YOUR_REFRESH_TOKEN")
    // success
    alert(access_token)
    alert(refresh_token)
}
```
==================
## ReactBitkubNextOauth2 Props
| Name          | Required      | Type          | Default value |
| :------------ | :----------:  | :----------:  | :----------:  |
| clientId      | true          | String        |               |
| redirectURI   | true          | String        |               |
| mode          | false         | 'new_tab' , 'popup' , 'redirect' |       "new_tab"        |
| state         | false         | String        |               |
| onClick       | false         | () => void    |               |
npm package: @makejack4/react-simple-client-hook
Description: This package is sitll beta.
Author: Rattanapol Piakaew
Latest version: 0.0.5

# Welcome to React Simple Client Hook!

This package is sitll beta.

Note : This package work only client side.

# Installation

> npm install @makejack4/react-simple-client-hook

or

> yarn add @makejack4/react-simple-client-hook

# How to use

| Name      | Optional |              Type              |
| :-------- | :------: | :----------------------------: |
| data      |  false   |      Type of task Return       |
| onReuqest |  false   | function(payload: [your type]) |
| loading   |  false   |            boolean             |
| error     |   true   |              any               |

# Setup Provider in Root Project

```ts
import { ReactSimpleClientHookProvider } from '@makejack4/react-simple-client-hook'

export const RootApp = () => {
    return (
        <ReactSimpleClientHookProvider>
            <body>{children}</body>
        </ReactSimpleClientHookProvider>
    )
}
```

## Create Hook

```ts
import { CreateClientHook } from '@makejack4/react-simple-client-hook'

export const useTestHook = () =>
    CreateClientHook({
        name: 'testHook',
        task: async (payload: { id: string; number: number[] }) => {
            // .... your logic
            return {
                key: payload.id,
                myArray: payload.number,
            }
        },
    })
```

## Use Hook

```ts
import { useTestHook } from  '[YOUR_RELATIVE_PATH]'

export const MyPageComponent () => {
	const { data, onRequest, loading } = useTestHook()

	const onClickTest = async () => {
		const response = await onRequest({ id: '1', number: [1,2,3] })
		// should output { ok : true, data : { key : '1', myArray: [1,2,3]}, error: null } follow by task while create hook
		console.log(response)
	}

	return (
		<div>
			<button onClick={onClickTest}>click</button>
			<div> data : {JSON.stringify(data)}</div>
			<div> loading : {loading}</div>
		</div>
	)
}
```

## Props Description

| Name         | Required |               Type                | Default value |       Return        |
| :----------- | :------: | :-------------------------------: | :-----------: | :-----------------: |
| name         |   true   |              String               |               |                     |
| task         |   true   |             function              |               | Type of task Return |
| dataPolicy   |  false   | 'default','merge-deep','no-store' |   'default'   |                     |
| initialState |  false   |               Value               |     null      |                     |

## dataPolicy Props Description

By default on create your hook will be set 'default' but you can change it, each "dataPolicy" value will be describe below.

-   'default' = your return data of task is latest will be store in "context"
-   'merge-deep' = your return data of task is latest will be merged with previous data in "context" and store in "context"
-   'no-store' = your return data of task will not be store in "context" but only return during you get callback "onRequest" only
npm package: @makejsgreatagain/promise-chain
Description: Chain your promises to make code compact.
Author: Siddhesh Kulkarni
Latest version: 1.1.0

# promise-chain
Chain your promise returns

[![Build Status](https://travis-ci.com/siddhesh3/promise-chain.svg?branch=master)](https://travis-ci.com/siddhesh3/promise-chain)

Promise Chain
=============

A small library that chains your multiple promise to 1

## Installation

  `npm i @makejsgreatagain/promise-chain`

## Usage

    var pChain = new PromiseChain(initialPromise);

    pChain.then(firstAsyncMethod)
        .catch(firstAsyncExceptionHandler)
        .then(secondAsyncMethod)
        .catch(secondAsyncExceptionHandler);


Note that each Async method should return new promise.


## Tests

  `npm test`

## Contributing

Siddhesh Kulkarni