open-index/open-npm huggingface dataset:
npm package: @proximahq-dev/components
Description: - **Components Folder:** Always create a new folder for page specific components e.g. src/components/PageName - **Shared Components:** Any component used on more than one page should be added to src/components/shared - **Page Registry:** TBC, currently ea
Latest version: 1.3.23

# How to use

- **Components Folder:** Always create a new folder for page specific components e.g. src/components/PageName
- **Shared Components:** Any component used on more than one page should be added to src/components/shared
- **Page Registry:** TBC, currently each page requires the projectSlug as the Prop.

# How to develop

- **Create component**
- **Add it to Storybook**
- **Write unit tests**
- **Execute "npx changeset" and choose appropriate version to bump**
- **PR to main branch**
- **Package will be deployed to NPM automatically**

# Versioning

Take the version 1.3.5 as an example.

- "1" is the major change to the project - for incompatible API changes
- "3" is the minor change - for backward-compatible functionality additions
- "5" is the patch - for backward-compatible bug fixes

Bumping the major version resets both minor and patch versions to 0.

Bumping the minor version resets patch version to 0.

1.3.5 => 1.4.0

1.3.5 => 2.0.0
npm package: @proximahq-dev/floorplans
Description: ### Import component style at the top of the page ```<link rel="stylesheet" href="https://unpkg.com/@proximahq-dev/floorplans@latest/dist/floorplan-styles.css">```
Latest version: 3.0.8

# How to use

### Import component style at the top of the page
```<link rel="stylesheet" href="https://unpkg.com/@proximahq-dev/floorplans@latest/dist/floorplan-styles.css">```

### Create a wrapper element to contain the component
```<div id="floorplansContainer" />```

### Add a script at the bottom of the body
```<script src="https://unpkg.com/@proximahq-dev/floorplans@latest/dist/proxima-floorplans.umd.js"></script>```
```flow js
<script>
    const floorplans = new ProximaFloorplans({
      projectSlug: "slug (e.g. nikola)",
      cardDisplayInfo: ["type", "totalSize"], // optional
      moreModalDisplayInfo: ["totalSize", "interiorSize", "mezzanineSize", "floors", "type"] // optional
    });
    floorplans.init("floorplansContainer");
</script>
```

#### Types
```cardDisplayInfo``` and ```moreModalDisplayInfo``` can accept the following values:

```
type InfoType =
    | "totalSize"
    | "interiorSize"
    | "exteriorSize"
    | "mezzanineSize"
    | "bedrooms"
    | "bathrooms"
    | "type"
    | "floors"
    | "buildings";
```

```cardDisplayInfo``` can take up to 3 info values

```moreModalDisplayInfo``` can take up to 6 info values
npm package: @proximahq-dev/frames
Description: ### Import component style at the top of the page
Latest version: 2.0.1

# How to use

### Import component style at the top of the page

```<link rel="stylesheet" href="https://unpkg.com/@proximahq-dev/frames@latest/dist/frames-styles.css">```

### Create a wrapper element to contain the component

```<div id="framesContainer" />```

### Add a script at the bottom of the body

```<script src="https://unpkg.com/@proximahq-dev/frames@latest/dist/proxima-frames.umd.js"></script>```

```flow js
<script>
  const frames = new ProximaFrames({
    projectSlug: 'e.g. (nikola)',
    enableFilters: true // optional
});
  frames.init("framesContainer");
</script>
```
npm package: @proximahq-dev/map
Description: ### Import component style at the top of the page
Latest version: 2.0.0

# How to use

### Import component style at the top of the page

```<link rel="stylesheet" href="https://unpkg.com/@proximahq-dev/map@latest/dist/map-styles.css">```

### Import mapbox style at the top of the page

```<link rel="stylesheet" href="https://unpkg.com/@proximahq-dev/map@latest/dist/style.css">```

### Create a wrapper element to contain the component

```<div id="mapContainer" />```

### Add a script at the bottom of the body

```<script src="https://unpkg.com/@proximahq-dev/map@latest/dist/proxima-map.umd.js"></script>```

```flow js
<script>
  const map = new ProximaMap({
    projectSlug: 'slug (e.g. nikola)',
  });
  map.init("mapContainer");
</script>;
```
npm package: @proximahq-dev/sitemap
Description: ### Import component style at the top of the page
Latest version: 3.0.1

# How to use

### Import component style at the top of the page

```<link rel="stylesheet" href="https://unpkg.com/@proximahq-dev/sitemap@latest/dist/sitemap-styles.css">```

### Create a wrapper element to contain the component

```<div id="sitemapContainer" style="height: 500px;" />```

### Add a script at the bottom of the body

```<script src="https://unpkg.com/@proximahq-dev/sitemap@latest/dist/proxima-sitemap.umd.js"></script>```

```html
<script>
  const sitemap = new ProximaSitemap({
    projectSlug: 'e.g. (nikola)'
  });
  sitemap.init('sitemapContainer');
</script>
```

### IMPORTANT

The wrapper element MUST have a fixed height

The wrapper element MUST NOT have a fixed width