open-index/open-npm huggingface dataset:
npm package: @springmatter/components
Description: The Springmatter Component Library is a set of components and tools for rapidly building applications from the ground up.
Latest version: 4.6.8

# @springmatter/components

The Springmatter Component Library is a set of components and tools for rapidly building applications from the ground up.

## Getting Started

### Install
```
npm install @springmatter/components
```

### Import
Import the components into your main file and register the components. This must be done before calling `new Vue()`, and it will also automatically include our CSS files.

```js
import components from "@springmatter/components";
for (let c of components) { Vue.component(c.name, c); }

new Vue({ ... });
```

### [Documentation can be found on the wiki](https://github.com/springmatter/design/wiki)
npm package: @springmicro/auth
Description: Auth config supplied for connecting with a Casdoor instance. Uses [auth-astro](https://github.com/nowaythatworked/auth-astro).
Latest version: 0.7.24

# @springmicro/auth

Auth config supplied for connecting with a Casdoor instance. Uses [auth-astro](https://github.com/nowaythatworked/auth-astro).

## Usage

```bash
npm i -g @springmicro/cli
springmicro add auth
```

```ts
// auth.config.ts

import { getAuthConfig } from "@springmicro/auth";

export default getAuthConfig({
  casdoorEndpoint: import.meta.env.PUBLIC_CASDOOR_ENDPOINT,
  clientId: import.meta.env.PUBLIC_CASDOOR_CLIENT_ID,
  clientSecret: import.meta.env.CASDOOR_CLIENT_SECRET,
});
```

`auth-astro` requires building your site in `server` mode with a platform adapter like `@astrojs/node`.

```bash
pnpm run astro add node
```

```js
// astro.config.mjs
export default defineConfig({
  output: "server",
  adapter: node({
    mode: "standalone",
  }),
});
```

### Casdoor

In the `application` settings, add the callback URL of `http://yourhost/callback`. Enable auto signin (optional).

## Development

### Build

```bash
pnpm run build
```

### Install in repo (locally)

```bash
# testing it out in a demo project
cd astro-demo-project
pnpm run astro add react
pnpm run astro add auth-astro
pnpm add --workspace @springmicro/auth
```
npm package: @springmicro/cart
Description: A package for eCommerce sites that provides shopping cart functionality.
Latest version: 0.7.24

# @springmicro/cart

A package for eCommerce sites that provides shopping cart functionality.

# Exports

## Components

### CartProvider

Provides and handles all the data for the cart.
Requires a ReactNode child. `apiUrl` will be modified to end with `/api/ecommerce/cart`. If the user object changes, the provider automatically logs in and out of the cart.

#### Required props:

```ts
user={({ id: number | string } & any) | undefined}
apiUrl={string}
```

### CartContext

Allows all scopes under the `CartProvider` to read from the cart data and the functions to modify the cart.

#### Provisions:

- `cart`: `Cart`
- - Provides cart and authentication data.
- `addToCart`: `(product: CartProduct) => void`
- - Adds a product to the cart.
- `removeFromCart`: `(i: number) => void`
- - Removes an item from the cart at the given index.
- `clearCart`: `() => void`
- - Clears the cart.

### CartButton

A frontend-facing component to display the cart contents in a Modal. This component is designed to go in a top navbar, ideally on the right-hand side.
This component is required to be in a `CartProvider` scope.

## Types

### Cart

The type of the `cart` in `CartContext.cart`.

```ts
{
  cart: CartProducts[],
  authentication: {loggedIn: boolean, user_id: string | number}
}
```

### CartProduct

The type of the products listed in `Cart.cart`.

```ts
{
  id: number | string,
  name: string,
  quantity: number | undefined
}
```
npm package: @springmicro/page
Description: Webpage Editor with Slate and other widgets.
Latest version: 0.7.24

# @springmicro/page

Webpage Editor with Slate and other widgets.

Fork of React Page. Original repository: https://github.com/react-page/react-page. The commit that was accessed was https://github.com/react-page/react-page/tree/2463f837858716626ff6892328e760b7fbd14c4d.

## Motivation

`react-page` has dependencies that are outdated; some only work with React 17 and lower. The original repository was referenced when creating this one.

## Changes

- All references to [`react-dnd`](https://github.com/react-dnd/react-dnd/) have been commented out, but are still searchable within the repository. `react-dnd` v15 was the one used by `react-page` and was incompatible with React 18 mostly due to problems with refs. The references to `react-dnd` are keep in because we have plans to support drag and drop again, perhaps with [`@hello-pangea/dnd`](https://github.com/hello-pangea/dnd).
- In the redux store, there was a `__nodeCache` that wasn't working so references to that have also been commented out.
- Autoform from `uniforms` wasn't working, so it was replaced by [`rjsf`](https://rjsf-team.github.io/react-jsonschema-form/docs/). Reference file: `src\editor\core\components\Cell\PluginControls\index.tsx`. The old Autoform code is still here for reference.
- Right now, everything is bundled into one package, including dependencies like `react-admin`. Several of those will become peer dependencies soon.

## Development

- Visit `src/plugins` for examples on how to implement a plugin. Plugins are types of "blocks" in the editor (i.e. slate rich text, youtube embed, etc.). Also the `PluginDrawer` at `src\editor\ui\PluginDrawer\index.tsx` is where the sidebar is when you add a new plugin. `BottomToolbar` (`src\editor\ui\BottomToolbar\index.tsx`) is where the controls are for the active plugin.

## Exports

Here are the exposed components and types.

```tsx
// Value is the editor state.
export type { EditorProps, Value };
// Ra* components are for react-admin. Adapted from https://www.npmjs.com/package/@react-page/react-admin.
export { Editor, RaReactPageInput, RaSelectReferenceInputField };
```
npm package: @springmicro/rte
Description: > WARNING: This package will likely see many breaking changes until its first major release.
Latest version: 0.7.24

# @springmicro/rte

> WARNING: This package will likely see many breaking changes until its first major release.

## Styling

For the slate editor styles.

```tsx
import "@springmicro/rte/dist/style.css";
```

## PaperEditor

```tsx
import { PaperEditor } from "@springmicro/rte";

declare type PaperEditorProps = {
  value?: Descendant[];
};
```

## InlineEditor

```tsx
import { InlineEditor } from "@springmicro/rte";

declare type InlineEditorProps = {
  value?: Descendant[];
  setValue?: React.Dispatch<React.SetStateAction<Descendant[]>>;
  readOnly: boolean;
  editor?: BaseEditor & ReactEditor;
  scrollElement?: HTMLElement;
};
```

`scrollElement` refers to a parent scroll element. The default is the global `window` but if you are placing the `InlineEditor` in a custom scroll element then a reference to that element needs to be placed here to properly position the toolbar either above or below the editor.

```jsx
/**
 * Scroll Element Example
 * Put other content above and below to scroll and see the menu move.
 */
export function InlineEditorWithScrolling(props) {
  const [ref, setRef] = React.useState();
  return (
    <div
      style={{ height: "50vh", overflowY: "scroll" }}
      ref={(newRef) => setRef(newRef)}
    >
      <div style={{ color: "#aaa" }}>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure sint fuga
        reprehenderit unde dolores expedita, nam, enim repellendus sit
        doloremque eveniet quas vel perferendis! Cumque, eveniet? Dignissimos
        mollitia voluptas provident?
      </div>
      <InlineEditor {...props} scrollElement={ref} />
      <div style={{ color: "#aaa" }}>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure sint fuga
        reprehenderit unde dolores expedita, nam, enim repellendus sit
        doloremque eveniet quas vel perferendis! Cumque, eveniet? Dignissimos
        mollitia voluptas provident?
      </div>
      <div style={{ height: "100vh" }}></div>
    </div>
  );
}
```