open-index/open-npm huggingface dataset:
npm package: @simple-state-machine/core
Description: ## Installation ```    npm i @simple-state-machine/core ``` ## Quick glance - A simplest state machine can be a "Light<>Dark" Mode toggling. On click of button is toggle from `light` to `dark` or vice versa. - State diagram looks something like this for i
Author: Akhil Sai Ram Chennareddy
Latest version: 0.1.0-alpha.3

# Simple State Machine

## Installation
```
   npm i @simple-state-machine/core
```
## Quick glance
- A simplest state machine can be a "Light<>Dark" Mode toggling. On click of button is toggle from `light` to `dark` or vice versa.
- State diagram looks something like this for it: ![toggle-sm](./docs/assets/toggle-sm.png)
- Code for the above machine using the library looks like
   ```js
      import {createState, createEvents, createContext, MachineConfig} from 'simple-state-machine'

      const states = createStates('light', 'dark');
      const events = createEvents('TOGGLE');
      const context = createContext({});

      const ThemeMachine = new MachineConfig(states, context, events);

      const {whenIn} = ThemeMachine;
      whenIn('light').on('TOGGLE').moveTo('dark');
      whenIn('dark').on('TOGGLE').moveTo('light');
   ```

## Examples

- [Toggle Theme Machine](https://codesandbox.io/p/sandbox/toggle-theme-machine-dyrwzd)
- [Throttling Machine](https://codesandbox.io/p/sandbox/throttling-x9mzy5) in typescript

## API

- [API Documentation](./docs/api.md)
npm package: @simple-state-machine/react
Description: ## Installation
Author: Akhil Sai Ram Chennareddy
Latest version: 0.1.0-alpha.3

# react

## Installation

```
    npm i @simple-state-machine/core @simple-state-machine/react
```

## Quick Glance

```jsx
    import {useMachine} from '@simple-state-machine/react'
    import ThemeMachine from './theme-machine';

    function Theme({children}){
        const {state, send} = useMachine(ThemeMachine)
        const themeClassName = state.value === 'light' ? 'light-mode' : 'dark-mode'
        const toggleTheme = () => send('TOGGLE');

        return (
            <>
                <button onClick={toggleTheme}>Toggle Theme</button>
                <div className={themeClassName}>
                    {children}
                </div>
            </>
        )
    }
```

### API

- If you are new to `simple-state-machine`, it is recommended to go through the [core package](../core/README.md)
- In order to understand the API in depth, please go through the [api-documentation](../react/docs/api.md)

## Examples
- [Debounced Input](https://codesandbox.io/p/sandbox/debounce-stg462)
- [Polling API](https://codesandbox.io/p/sandbox/polling-463vsz)

## Tutorial
- [Timer App](./docs/tutorial.md)
npm package: @simple-svelte-ui/button
Description: Native HTML button component enhanced with design to provide easy integration with Svelte.
Author: Syam SV
Latest version: 1.0.4

# @simple-svelte-ui/button

Native HTML button component enhanced with design to provide easy integration with Svelte.

## Installation

Install with npm:

```bash
npm install @simple-svelte-ui/button
```

Install with yarn:

```bash
yarn add @simple-svelte-ui/button
```

## Usage/Examples

Svelte REPL example is available [here](https://svelte.dev/repl/e1d1e77a86a94ff3947c68f0e99c4e00?version=3.49.0)

```js
<script>
    import {Button} from '@simple-svelte-ui/button';
</script>
<Button>Click me</Button>
```

Further more  `CButton` is also provided in this package with following customization

```js
<script>
    import {CButton} from '@simple-svelte-ui/button';
</script>
<CButton
  variant = 'contained'
  backgroundColor = 'red'
  foregroundColor = 'black'
  rippleColor='blue'
  textTransform='lowercase'
  fontWeight='bold'
  >
  Hello</CButton>
```
npm package: @simple-test-org/org-lib-simple
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.
Author: Aspire Software Solutions
Latest version: 1.0.0

# OrgLibSimple

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

## Code scaffolding

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

## Build

Run `ng build org-lib-simple` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

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

## Running unit tests

Run `ng test org-lib-simple` 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 README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @simple-ui-kit/theme
Description: CSS theme styles for simple-ui-kit components
Author: c-goldcrane
Latest version: 1.0.0

# @simple-ui-kit/theme

CSS theme styles for simple-ui-kit components. This package provides a consistent theming system for all @simple-ui-kit components.

## Installation

```bash
npm install @simple-ui-kit/theme
```

### Import in your project

You can import the theme styles directly in your JavaScript/TypeScript:

```js
// Import in your main entry file
import "@simple-ui-kit/theme/dist/styles.css";
```

Make sure to import your custom styles after importing the theme to properly override the default values.

## Components Styles

This theme package includes styles for the following components:

- Search Bar
  - Input field
  - Button
  - Suggestions container
  - Suggestion items

## License

MIT
npm package: @simple_merchant/component-ui
Description: > UI components for Simple Dealer
Author: Simple Dealer
Latest version: 1.0.12

# component-ui

> UI components for SD

[![NPM](https://img.shields.io/npm/v/component-ui.svg)](https://www.npmjs.com/package/component-ui) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @simple_merchant/component-ui

```

## Usage

```tsx
import React, { Component } from 'react';

import { Icon } from '@simple_merchant/component-ui';

class Example extends Component {
  render() {
    return <Icon name="cloudUpload" />;
  }
}
```

## Issues
If you get an error with the datepicker component from bit carbon components.

```bash
yarn config set "@bit:registry" "https://node.bit.dev"

```

## License
npm package: @simple_merchant/sd-formatter
Description: Simple Dealer standard formatting library
Author: Ernest Hayford
Latest version: 0.1.2

## Description

A functional formatting library that follows SD Standard rules for displaying data.

## Installation

Add this as a dependency to your project using [npm] with

```
$ npm i @simple_merchant/sd-formatter
```

or using [Yarn] with

```
$ yarn add @simple_merchant/sd-formatter
```

## Usage

**See the complete [documentation]**

### Currency

```js
import { currency, currencyOptions } from '***/***' // standard compose function

const amount = 123.45
currency(amount) //=> '$123.45'

// with diffent currency
currency(amount, {currency: 'GHS'}) //=> 'GHS 123.45'

// with currencyOptions constants 
currency(amount, { currency: currencyOptions.currency.GBP }) //=> '£123.45'

```

### Date

```js
import { date, dateOptions } from '***/***'

const currentDate = '2021-10-13T22:16:18.032Z'

date(currentDate)//=> 'October 13, 2021'

//With options
date(currentDate, {
  year: dateOptions.year.DIGIT // '2-digit', 
  month: dateOptions.month.SHORT // 'short', 
  day: dateOptions.day.NUMERIC // 'numeric', 
  weekday: dateOptions.weekend.LONG // 'long',
})//=> 'Wednesday, Oct 13, 21'
```

### NumberFormat

```js
import { numberFormat, numberFormatOptions } from '***/***'

//Phone formatting
const phoneNumber = '1234567890'
numberFormat(phoneNumber, formatOptions.PHONE)//=> '123-456-7890'

//SSN formatting
const ssn = '123456789'
numberFormat(phoneNumber, formatOptions.SSN)//=> '123-45-6789'


```

#### Currency Parameters

- `amount`: An integer or a float for the amount to be formatted.
- `options`:

  - `currency`:
    The currency to use in currency formatting.
    Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar,
    "EUR" for the euro, or "CNY" for the Chinese RMB — see the [Current currency & funds code list](https://www.currency-iso.org/en/home/tables/table-a1.html).
    The default value is USD.
  - `local`:
    A string with a BCP 47 language tag, or an array of such strings.
    For the general form and interpretation of the locale argument, see the [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_identification_and_negotiation) page.
    The default value is en-US.

#### Date Parameters

- `date`: A date string or Date object.
- `options`: Using the dateOptions relative to the options
  - `year`: NUMERIC | DIGIT | undefined,
  - `month`: LONG | NUMERIC | DIGIT | NARROW' | SHORT | undefined,
  - `day`: NUMERIC | DIGIT | undefined
  - `weekend`: LONG | NARROW | SHORT | undefined,

#### Format Parameters

- `value`: the string or number to formatted
- `options`: Using the numberFormatOptions
  - `PHONE`: For phone number formatting
  - `SSN`: For social security number formatting

[Intl]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl
[npm]: https://www.npmjs.com/
[Yarn]: https://yarnpkg.com/
[documentation]: https://www.notion.so/simpledealer/SD-Formatter-e27f23ef86f74ad1b1f885a9a83a6ea4
npm package: @simpleanalytics/next
Description: Simple Analytics for Next.js
Latest version: 1.1.1

# Simple Analytics for Next.js

This package provides a simple way to add privacy-friendly pageview and event tracking using Simple Analytics to your Next.js application.

## Documentation

You can find the full documentation for this package at [simpleanalytics-next-docs.vercel.app](https://simpleanalytics-next-docs.vercel.app).

## Installation

To install the package, run:

```bash
npm i @simpleanalytics/next
```

## Usage

### Configure environment variables

You need to pass the website domain you have added to the [Simple Analytics dashboard](https://dashboard.simpleanalytics.com/) as an environment variable:

```txt
NEXT_PUBLIC_SIMPLE_ANALYTICS_HOSTNAME=example.com
SIMPLE_ANALYTICS_HOSTNAME=example.com
```

### Update your Next.js config to enable client-side analytics

To enable client-side tracking and to ensure the Simple Analytics script you must add the Next.js plugin `withSimpleAnalytics` from `@simpleanalytics/next` in your Next.js config (`next.config.ts`):

```typescript
import { NextConfig } from "next";
import withSimpleAnalytics from "@simpleanalytics/next/plugin";

const nextConfig: NextConfig = {
  /* the rest of your Next.js config */
};

export default withSimpleAnalytics(nextConfig);
```

### Include the analytics script

The client-side analytics component, `SimpleAnalytics`, imports the Simple Analytics tracking script:

```tsx
import { SimpleAnalytics } from "@simpleanalytics/next";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        {children}
        <SimpleAnalytics />
      </body>
    </html>
  );
}
```

### Tracking events

#### Usage in client components

To start tracking programmatically tracking events in client components use the `trackEvent` function.
This requires the `<SimpleAnalytics />` component to be present on the page or layout.

```tsx
"use client";

import { trackEvent } from "@simpleanalytics/next";
import { useState } from "react";

export default function Page() {
  return (
    <div>
      <button
        onClick={() => {
          trackEvent("clicked");
        }}
      >
        increment
      </button>
    </div>
  );
}
```

#### Usage in Server Actions

To track events in server actions, use the `trackEvent` function from `@simpleanalytics/next/server`.
This function requires you to pass the request headers that can be obtained using `headers`.

```typescript
"use server";

import { after } from "next/server";
import { headers } from "next/headers";
import { trackEvent } from "@simpleanalytics/next/server";

export async function exampleAction() {
  // Add your logic here...

  after(async () => {
    await trackEvent("event_in_example_action", {
      headers: await headers(),
    });
  });

  return { success: true };
}
```
npm package: @simpleanalytics/react
Description: Simple Analytics for React applications
Latest version: 0.0.1

# Simple Analytics for React

This package provides a simple way to add privacy-friendly pageview and event tracking using Simple Analytics to your React application.

## Installation

To install the package, run:

```bash
npm i @simpleanalytics/react
```

## Usage

### Include the analytics script

The client-side analytics component, `SimpleAnalytics`, imports the Simple Analytics tracking script.

```tsx
import { SimpleAnalytics } from "@simpleanalytics/react";

export default function App() {
  return (
    <div>
      {/* ... rest of your app */}
      <SimpleAnalytics />
    </div>
  );
}
```

By default, the script will be loaded from `https://scripts.simpleanalyticscdn.com/latest.js`. If you use a custom domain for your scripts, you can pass it as a prop:

```tsx
<SimpleAnalytics domain="custom.domain.com" />
```

### Tracking events

To start programmatically tracking events use the `trackEvent` function.
This requires the `<SimpleAnalytics />` component to be present in your application.

```tsx
import { trackEvent } from "@simpleanalytics/react";

export default function MyComponent() {
  return (
    <button
      onClick={() => {
        trackEvent("clicked");
      }}
    >
      Track event
    </button>
  );
}
```