open-index/open-npm huggingface dataset:
npm package: @govtechsg/redux-account-middleware
Description: redux middleware for account
Author: MCF Team
Latest version: 0.0.12

redux-account-middleware
============================
This library helps with the helps with the management of authentication account lifecycle

# Installation

```bash
npm i @govtechsg/redux-account-middleware --save
```
or
```bash
yarn add @govtechsg/redux-account-middleware
```

# Usage

To run the middleware, we'll have to connect it to the Redux Store.

#### `main.js`

```javascript
import {createStore, applyMiddleware, combineReducers} from 'redux'
import {
  accountReducer,
  createAccountMiddleware,
} from './middleware/account';

// create the account middleware
const accountMiddleware = createAccountMiddleware({
  fetchAccountRequest: fetch('getAccountRequest'),
  logoutRequest: fetch('logoutRequest'),
  refreshTokenRequest: fetch('refreshTokenRequest'),
});

import reducer from './reducers'

const sagaMiddleware = createSagaMiddleware()
// mount it on the Store
const store = createStore(
  // include the account reducer into the main reducer
  combineReducers({
    account: accountReducer,
    ...reducer,
  }),
  applyMiddleware(accountMiddleware)
)

// render the application
```

# Refresh token

This redux middleware will try to refresh the token by calling refresh token api if there is any dispatched action to the redux (given that user is logged in and token expiring within refreshIntervalMinutes)

there are exceptions where the middleware is in the middle of requesting new token and getting account info, or user is logging out  
which represented by status below

- `REFRESH_REQUESTED`: When refresh is already requested and in progress. This is to prevent duplicates refresh request.
- `REFRESH_RECEIVED`: This is the intermediate state where account api will be called in next action. This is to prevent duplicates refresh request.
- `ACCOUNT_REQUESTED`: This is the intermediate state to get the latest token expiry from account api. This is to prevent duplicates refresh request.
- `LOGOUT_REQUESTED`: When there is a logout request on-going, We should stop refreshing the token. This is so that the user session will not be re-populated with the fresh token and log the user back in

so when the state is either any one mentioned above, refresh token api will not be called
npm package: @govtechsg/sgds
Description: Design System unites Singapore Government digital services around a common visual language and user experience
Author: Tey Liang Tai
Latest version: 2.3.6

# Singapore Government Design System

[![npm](https://img.shields.io/npm/v/@govtechsg/sgds.svg)](https://www.npmjs.com/package/@govtechsg/sgds)

The [Singapore Government Design System](https://www.designsystem.tech.gov.sg) was developed to empower teams in creating fast, accessible and mobile-friendly digital services.

Visit our [React storybook](https://react.designsystem.tech.gov.sg)
Visit our [Web Component storybook](https://webcomponent.designsystem.tech.gov.sg)

***

## Installation

### CSS

```html
<head>
    ...
    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@govtechsg/sgds/css/sgds.css"
    />
    ...
</head>
```

### Vanilla JavaScript

SGDS components makes use of [bootstrap v5.1.3 js library](https://getbootstrap.com/docs/5.1/getting-started/javascript/) as an external dependency. If you only need the visual parts of SGDS, or if you are [using frontend frameworks like React](https://react.designsystem.tech.gov.sg), you do not need to import this.

> `@govtechsg/sgds` uses `bootstrap-icons` for certain components like Form but it is not ship with it. Install `bootstrap-icons` or use CDN if you need it. Please refer to [bootstrap-icons](bootstrap-icons) for usage instructions.

```html
<head>
  ...
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@govtechsg/sgds/css/sgds.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
  ...
</head>

<body>
  ...
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    crossorigin="anonymous"></script>
</body>
```

For more information, please refer to the [components documentation](https://www.designsystem.tech.gov.sg/components).

### Via NPM

```sh
$ npm i @govtechsg/sgds bootstrap-icons
```

### For Webpack

```js
//importing css
import '@govtechsg/sgds/css/sgds.css';

import '@popperjs/core';
import * as bootstrap from 'bootstrap';
```

***

## Patch Notes

See [Changelog](./CHANGELOG.md)
npm package: @govtechsg/sgds-masthead
Description: sgds masthead
Latest version: 0.0.20
Deprecated: This package is no loger supported. We recommend using @govtechsg/sgds-web-component  instead.

# SGDS Masthead web component

![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

## Quick start

### For Vanilla JS

Add the following code to your page.

```
<head>
    ...
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-masthead/dist/sgds-masthead/sgds-masthead.css">
    <script
        type="module"
        src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-masthead/dist/sgds-masthead/sgds-masthead.js">
    </script>
    ...
</head>

<body>
    ...
    <sgds-masthead></sgds-masthead>
    ...
</body>
```
npm package: @govtechsg/sgds-react
Description: Design System unites Singapore Government digital services around a common visual language and user experience
Author: GovTechSG
Latest version: 2.7.7

# @govtechsg/sgds-react

React components powered by [Singapore Government Design System](https://www.designsystem.gov.sg)

`@govtechsg/sgds-react` take references from [react-bootstrap](https://react-bootstrap.github.io/)

## Version Compatibility

See the below table on which version of `@govtechsg/sgds` you should be using in your project.

| @govtechsg/sgds version | @govtechsg/sgds-react version |
| ----------------------- | ----------------------------- |
| v2.x                    | v2.x                          |

## Installation

`@govtechsg/sgds-react` is not shipped with any included CSS. Apply `@govtechsg/sgds@latest` styles by installing the module or using CDN.

`@govtechsg/sgds-react` uses `bootstrap-icons` for certain components like Form, but does not ship with it. Install `bootstrap-icons` or use CDN if you need it. Please refer to [bootstrap-icons](https://icons.getbootstrap.com/#usage) for usage instructions

```js

npm install @govtechsg/sgds-react

//not required if using CDN
npm install @govtechsg/sgds bootstrap-icons

```

## Importing Components

You should import individual components like: `@govtechsg/sgds-react/Button` rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client.

```js
import { Button } from '@govtechsg/sgds-react/Button';

// or less ideally
import { Button } from '@govtechsg/sgds-react';
```

## Stylesheets

#### Using CSS / SASS

```js
// In your entry point
// import CSS or
import '@govtechsg/sgds/css/sgds.css';
// import SASS
import '@govtechsg/sgds/sass/sgds.scss';
```

#### Using CDN

```js

//index.html
<link href='https://designsystem.gov.sg/css/sgds.css' rel='stylesheet' type='text/css'/>

//index.css
@import url('https://designsystem.gov.sg/css/sgds.css');

```

# Advanced Usage


## "as" Prop API

With certain SGDS React components, you may want to modify the component or HTML tag that is rendered.

If you want to keep all the styling of a particular component but switch the component that is finally rendered (whether it's a different SGDS React component, a different custom component, or a different HTML tag), you can use the "as" Prop to do so.

See [example](https://react-bootstrap.github.io/docs/getting-started/introduction#as-prop-api)