@astrouxds/mock-data v0.6.4

Astro UXDS Mock Data

Generate "contacts", "alerts" and "mnemonics" data for testing Astro Web Components and building demo applications.

Install

npm install @astrouxds/mock-data

Getting Started

The example below creates a state object with the generated contacts and maps the alerts and mnemonics connected to those contacts on their respective properties.

import { generateContacts } from '@astrouxds/mock-data';

const contacts = generateContacts();

const state = {
  contacts,
  alerts: contacts.flatMap(({ alerts }) => alerts),
  mnemonics: contacts.flatMap(({ mnemonics }) => mnemonics),
};

console.log(state);

Contacts

Contacts include alerts with a "contact ref" on the alert based on where in the array (the index) a contact is. Meaning not all contacts will have alerts, only a percentage of them will.

All contacts will have mnemonics as an array property on the contact object.

import { generateContacts } from '@astrouxds/mock-data';

const contacts = generateContacts(); // returns 100 contacts by default

const contacts = generateContacts(300); // returns 300 contacts

// returns 200 contacts with options provided below
const contacts = generateContacts(200, {
  alertsPercentage: 5, // percentage of the 200 contacts to have an alert @default 10%
  secondAlertPercentage: 3, // percentage of the 200 contacts to have 2 alerts @default 2%
  daysRange: 2, // range of the start and end timestamps @default 1 day
  dateRef: '3/17/2008', // date reference for timestamps @default now
});

Alerts

If you just want alerts without any contact ref you can generate just an array of alerts.

import { generateAlerts } from '@astrouxds/mock-data';

const alerts = generateAlerts(5); // returns 5 alerts

Mnemonics

If you just want mnemonics without any contact ref you can generate just an array of alerts.

import { generateMnemonics } from '@astrouxds/mock-data';

const mnemonics = generateMnemonics(5); // returns 5 mnemonics

Contacts Subscriber

Publishes 100 contacts and generates a new contact every 5 seconds up to 200 contacts by default.

import { onContactsChange } from '@astrouxds/mock-data';

const unsubscribe = onContactsChange((contacts) => {
  console.log(contacts);
});

With options as second argument

const unsubscribe = onContactsChange(
  (contacts) => console.log(contacts),
  { limit: 50 }, // options with a limit of 50
);

Use the unsubscribe function returned from onContactsChange to unsubscribe

setTimeout(() => {
  unsubscribe();
}, 1000 * 60 * 5); // unsubscribe after 5 mins

Contacts Subscriber Example With React

import { useEffect, useState } from 'react';
import { onContactsChange, Contact } from '@astrouxds/mock-data';

const App = () => {
  const [contacts, setContacts] = useState<Contact[]>([]);

  useEffect(() => {
    const unsubscribe = onContactsChange((contacts) => {
      setContacts(contacts);
    });

    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <ul>
      {contacts.map(({ id, equipment }) => (
        <li key={id}>{equipment}</li>
      ))}
    </ul>
  );
};

export default App;

Contacts Service

Class based store for instaciating then subscribing to an auto-generate contacts state

import { ContactsService } from '@astrouxds/mock-data';

// with manually set options
const contactsService = new ContactsService({
  initial: 10,
  interval: 2,
  limit: 20,
});

let contacts: Contact[] = [];
const unsubscribe = contactsService.subscribe((data) => {
  contacts = data;
});

Use the unsubscribe function returned from contactsService.subscribe to unsubscribe

setTimeout(() => {
  unsubscribe();
}, 1000 * 60 * 5); // unsubscribe after 5 mins

API

function

generateContacts

Returns an array of contacts.

Parameters

function

generateContact

Returns a single contact.

Parameters

function

generateAlerts

Returns an array of alerts.

Parameters

function

generateAlert

Returns a single alert.

Parameters

generateMnemonics

Returns an array of menmonics.

Parameters

function

generateMnemonic

Returns a single mnemonic.

Parameters

function

onContactsChange

Publishes 100 contacts and generates a new contact every 5 seconds up to 200 contacts by default.

Returns an unsubscribe function.

Parameters

class

ContactsService

Generates initial contacts, publishes a new contact every x amount of seconds, and has methods to add, update, and delete a contact.

Returns an instance a ContactsService.

Parameters

Methods

subscribe

Subscribes to received published contacts.

Returns a function to unsubscribe.

Parameters

addContact

Adds a newly generated contact.

Returns the added contact.

Parameters

updateContact

Updates the specified contact.

Returns a success message.

Parameters

deleteContact

Deletes the specified contact.

Returns a success message.

Parameters

Schema

Types

Contact

Alert

Mnemonic