### Install React Design System

Source: https://github.com/lifesg/react-design-system/blob/master/README.md

Install the React Design System package using npm.

```bash
npm i @lifesg/react-design-system
```

--------------------------------

### Install V3 React Design System

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Install the latest version of the React Design System to begin the migration to V3.

```bash
npm i @lifesg/react-design-system@latest
```

--------------------------------

### Alpha Versioning Example

Source: https://github.com/lifesg/react-design-system/blob/master/CONTRIBUTING.md

Example of how to format an alpha version tag for larger features or changes that may introduce breaking changes. This helps in testing potential disruptions.

```bash
v1.x.x-alpha.x

e.g.
v1.2.0-alpha.2
```

--------------------------------

### Build and Test Latest Build

Source: https://github.com/lifesg/react-design-system/blob/master/README.md

Commands to build the library and install a local tarball for testing.

```bash
npm run build-lib
```

```bash
npm i /path/to/repo/dist/lifesg-react-design-system-<version>.tgz
```

--------------------------------

### Install V4 React Design System

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V4

Install the V4 version of the React Design System. This is a core step in the migration process.

```bash
npm i @lifesg/react-design-system@4
```

--------------------------------

### Install V3 React Design System

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V4

Install the V3 version of the React Design System. Ensure your project is on the latest V3 release before upgrading.

```bash
npm i @lifesg/react-design-system@3
```

--------------------------------

### V2 MediaWidths Usage

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Example of using MediaWidths in V2 with the `useMediaQuery` hook.

```javascript
import { MediaWidths } from "@lifesg/react-design-system/media";

useMediaQuery({ maxWidth: MediaWidths.mobileL });

```

--------------------------------

### Data Table Default Example

Source: https://github.com/lifesg/react-design-system/blob/master/stories/data-table/data-table.mdx

A basic example showcasing the default configuration of the Data Table component.

```tsx
<Canvas of={DataTableStories.Default} />
```

--------------------------------

### Popover Appearance Example

Source: https://github.com/lifesg/react-design-system/blob/master/stories/popover-v2/popover.mdx

An example illustrating the positioning behavior of the Popover component on desktop viewports.

```tsx
<Canvas of={PopoverStories.Appearance} />
```

--------------------------------

### Import V2_MediaQuery

Source: https://github.com/lifesg/react-design-system/blob/master/stories/v2/media-query.mdx

Import the V2_MediaQuery component to start using media query functionalities.

```tsx
import { V2_MediaQuery } from "@lifesg/react-design-system/v2_media";
```

--------------------------------

### Max Lines Example

Source: https://github.com/lifesg/react-design-system/blob/master/stories/typography/typography.mdx

Shows how to limit the number of lines for a text element.

```tsx
<Typography.Text maxLines={2}>
  This text is intended to demonstrate the maxLines prop. If the text exceeds the specified number of lines, it will be truncated with an ellipsis.
</Typography.Text>
```

--------------------------------

### V3 Breakpoint Usage

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Example of using the new `Breakpoint` module in V3 with `useMediaQuery`, demonstrating both mobile-first and desktop-first approaches.

```javascript
import { Breakpoint } from "@lifesg/react-design-system/theme";
import { useTheme } from "styled-components";

const theme = useTheme();
useMediaQuery({ minWidth: Breakpoint["sm-min"]({ theme }) }); // mobile-first
useMediaQuery({ maxWidth: Breakpoint["sm-max"]({ theme }) }); // desktop-first

```

--------------------------------

### Layout Structure Example

Source: https://github.com/lifesg/react-design-system/blob/master/stories/v2_layout/layout.mdx

Illustrates the structure of Section and Container components, showing their relationship and padding.

```tsx
<div style={{ padding: "3rem 0" }}>
    <V2_Layout.Section
        style={{
            padding: "2.5rem 1.5rem",
            background: "#F9B5B2",
            display: "flex",
            justifyContent: "center",
        }}
    >
        <Label>Section</Label>
        <PaddingLabel>1.5rem</PaddingLabel>
        <PaddingLabel direction="right">1.5rem</PaddingLabel>
        <V2_Layout.Container
            style={{
                background: "#FDDDD7",
                display: "flex",
                justifyContent: "center",
            }}
        >
            <Label>Container</Label>
            <div
                style={{
                    width: "100%",
                    height: "50px",
                }}
            />
        </V2_Layout.Container>
    </V2_Layout.Section>
    <br />
    <V2_Text.XSmall>
        <em>
            Note: <strong>Section</strong> does not come with vertical padding.
            This is for illustration purposes.
        </em>
    </V2_Text.XSmall>
</div>
```

--------------------------------

### Import Card Component

Source: https://github.com/lifesg/react-design-system/blob/master/stories/card/card.mdx

Import the Card component from the library. This is a basic setup step.

```tsx
import { Card } from "@lifesg/react-design-system/card";
```

--------------------------------

### V2 Typography Usage

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Example of how text styles were applied using TextStyleHelper in V2.

```javascript
import { TextStyleHelper } from "@lifesg/react-design-system/text";

export const ExampleComponent = styled.div`
  ${TextStyleHelper.getTextStyle("Body", "regular")}

  strong {
    ${TextStyleHelper.getTextStyle("Body", "semibold")}
  }
`
```

--------------------------------

### Install Latest V2 React Design System

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Before upgrading to V3, ensure your project is on the latest V2 release and all tests are passing.

```bash
npm i @lifesg/react-design-system@2
```

--------------------------------

### Button Disabled State Example

Source: https://github.com/lifesg/react-design-system/blob/master/stories/button/button.mdx

Example demonstrating how to manage the disabled state of a button and handle click events conditionally. The `disabled` prop prevents the `onClick` callback from being invoked.

```tsx
const Page = () => {
    const [disabled, setDisabled] = useState(false);

    return (
        <div
            onClick={() => {
                if (disabled) return;
                // application logic here
            }}
        >
            <Button.Default disabled={disabled}>Add to cart</Button.Default>
        </div>
    );
};
```

--------------------------------

### Inline Link Example

Source: https://github.com/lifesg/react-design-system/blob/master/stories/typography/typography.mdx

Shows how to include links within a set of text. Links are inline by default.

```tsx
<Typography.Text>This is a normal text and this is a <Typography.Link>link</Typography.Link>.</Typography.Text>
```

--------------------------------

### Link Underline Style Example

Source: https://github.com/lifesg/react-design-system/blob/master/stories/typography/typography.mdx

Demonstrates changing the text decoration style for links using the `underlineStyle` prop. Links use underline by default for accessibility.

```tsx
<Typography.Link underlineStyle="none">Link without underline</Typography.Link>
<Typography.Link underlineStyle="hover">Link with underline on hover</Typography.Link>
```

--------------------------------

### Import Sidenav Component

Source: https://github.com/lifesg/react-design-system/blob/master/stories/sidenav/sidenav.mdx

Import the Sidenav component from the library. This is a required setup step before using the component.

```tsx
import { Sidenav } from "@lifesg/react-design-system/sidenav";
```

--------------------------------

### V3 MediaQuery Usage

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Example of using MediaQuery tokens in V3, which are now imported from `@lifesg/react-design-system/theme`. Note the updated syntax for breakpoints.

```javascript
import { MediaQuery } from "@lifesg/react-design-system/theme";

const ExampleComponent = styled.div`
  background-color: red;

  ${MediaQuery.MinWidth.lg} {
    background-color: yellow;
  }

  ${MediaQuery.MaxWidth.lg} {
    background-color: purple;
  }

  ${props => props.$success && css`
    ${MediaQuery.MaxWidth.tablet} {
      background-color: green;
    }
  }
`;

```

--------------------------------

### V3 Color Usage

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Example of applying color styles using the new Colour tokens from the theme in V3. Shows usage for text and borders.

```javascript
import { Colour } from "@lifesg/react-design-system/theme";

export const ExampleComponent = styled.div`
  color: ${Color["text"]};
  :hover {
    color: ${Colour["text-hover"]};
  }

  border-color: ${Colour["border"]};
`
```

--------------------------------

### External Link Example

Source: https://github.com/lifesg/react-design-system/blob/master/stories/typography/typography.mdx

Illustrates how to indicate external links using the `external` prop, which displays an indicator.

```tsx
<Typography.Link external href="https://example.com">External Link</Typography.Link>
```

--------------------------------

### V2 Transition Usage

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Example of how to use the deprecated Transition module in V2. This module is replaced by Motion tokens in V3.

```tsx
import { Transition } from "@lifesg/react-design-system/transition";

export const ExampleComponent = styled.div`
  transition: ${Transition.Base};
`
```

--------------------------------

### Paragraph Spacing Example

Source: https://github.com/lifesg/react-design-system/blob/master/stories/typography/typography.mdx

Demonstrates how to add paragraph spacing between text blocks by specifying the `paragraph` prop.

```tsx
<Typography.Text paragraph>This is the first paragraph.</Typography.Text>
<Typography.Text paragraph>This is the second paragraph.</Typography.Text>
<Typography.Text>This is a paragraph without spacing.</Typography.Text>
```

--------------------------------

### V3 Border and Radius Tokens Usage

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Example of applying border styles using Border and Radius tokens in V3. Includes border width, style, color, and radius.

```javascript
import { Border, Colour, Radius } from "@lifesg/react-design-system/theme";

const ExampleComponent = styled.div`
  border: ${Border["width-010"]} ${Border.solid} ${Colour["border"]};
  border-radius: ${Radius["sm"]};
`;
```

--------------------------------

### SupportGoWhere Theme Specification

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/font/g-font-supportgowhere.mdx

Example of how to specify the 'supportgowhere' font scheme within a theme configuration.

```tsx
const theme: ThemeSpec = {
    fontScheme: "supportgowhere",
    // ...other specifications
};
```

--------------------------------

### V2 Color Usage

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Example of how color styles were applied using the deprecated Color module in V2.

```javascript
import { Color } from "@lifesg/react-design-system/color";

export const ExampleComponent = styled.div`
  color: ${Color.Neutral[3]};
  :hover {
    color: ${Color.Neutral[2]};
  }

  border-color: ${Color.Neutral[5]};
`
```

--------------------------------

### Define Default Spacing Theme

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/spacing/b-spacing-lifesg.mdx

Example of how to define the theme specification with the 'default' spacing scheme. Ensure other specifications are included as needed.

```tsx
const theme: ThemeSpec = {
    spacingScheme: "default",
    // ...other specifications
};
```

--------------------------------

### Tab Component with Title Addon

Source: https://github.com/lifesg/react-design-system/blob/master/stories/tab/tab.mdx

Example showcasing the ability to display a custom addon within each tab item.

```tsx
<Canvas of={TabStories.TitleAddon} />
```

--------------------------------

### V2 MediaQuery Usage

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Example of using MediaQuery tokens in V2 for responsive styling within styled components. Ensure it's wrapped in `styled` or `css`.

```javascript
import { MediaQuery } from "@lifesg/react-design-system/media";

const ExampleComponent = styled.div`
  background-color: red;

  ${MediaQuery.MinWidth.tablet} {
    background-color: yellow;
  }

  ${MediaQuery.MaxWidth.tablet} {
    background-color: purple;
  }

  ${props => props.$success && `
    ${MediaQuery.MaxWidth.tablet} {
      background-color: green;
    }
  }
  `
};

```

--------------------------------

### Configure Default Breakpoint Scheme

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/breakpoint/b-breakpoint-default.mdx

Example of how to configure the default breakpoint scheme within a theme specification. This is used when no other scheme is explicitly provided.

```tsx
const theme: ThemeSpec = {
    breakpointScheme: "default",
    // ...other specifications
};
```

--------------------------------

### Basic Modal.Box Usage

Source: https://github.com/lifesg/react-design-system/blob/master/stories/modal/modal.mdx

Example of using the Modal.Box component, which represents the dialog box. It requires an onClose handler and should contain scrollable content if necessary.

```tsx
<Modal.Box onClose={closeModal}>
    <ScrollableContent>
        <span>I am a Modal</span>
    </ScrollableContent>
</Modal.Box>
```

--------------------------------

### Mixed Font Weights Example

Source: https://github.com/lifesg/react-design-system/blob/master/stories/typography/typography.mdx

Illustrates how to use different font weights within a text block using the `weight` and `inline` props.

```tsx
<Typography.Text inline weight="regular">Regular text</Typography.Text>
<Typography.Text inline weight="bold">Bold text</Typography.Text>
<Typography.Text inline weight="semibold">Semi-bold text</Typography.Text>
```

--------------------------------

### Data Table with Sort Indicators

Source: https://github.com/lifesg/react-design-system/blob/master/stories/data-table/data-table.mdx

Illustrates how to implement sort indicators for columns. Note: The provided source code is an example and not for direct production use.

```tsx
<Canvas of={DataTableStories.SortIndicators} />
```

--------------------------------

### Component Directory Structure

Source: https://github.com/lifesg/react-design-system/blob/master/CONTRIBUTING.md

This is the recommended directory structure for adding new components to the project. Follow this pattern for consistency.

```bash
├── src
│	├── component-name
│	│	├── component-name.tsx
│	│	├── component-name.style.tsx
│	│	├── index.tsx
│	│	└── types.ts
│	└── index.ts
└── tests
	└── component-name
		└── component-name.spec.tsx
```

--------------------------------

### V3 Motion Token Usage

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Example of how to use the V3 Motion tokens for transition duration and easing. This replaces the deprecated V2 Transition module.

```tsx
import { Motion } from "@lifesg/react-design-system/theme";

export const ExampleComponent = styled.div`
  transition: all ${Motion["duration-250"]} ${Motion["ease-default"]};
`
```

--------------------------------

### Run Storybook

Source: https://github.com/lifesg/react-design-system/blob/master/CONTRIBUTING.md

Use this command to run Storybook and preview components. Ensure you are in the project's root directory.

```bash
npm run storybook
```

--------------------------------

### Toggle Group Example

Source: https://github.com/lifesg/react-design-system/blob/master/stories/toggle/toggle-accessibility.mdx

Demonstrates how to wrap toggles in a fieldset with a legend for proper group semantics. Ensure radio-type toggles share the same name attribute.

```javascript
import { Canvas, Meta } from "@storybook/addon-docs/blocks";
import * as ToggleAccessibilityStories from "./toggle-accessibility.stories";

<Meta of={ToggleAccessibilityStories} />

## Building radio or checkbox groups with toggles

Wrap the toggles in a `<fieldset>` and provide a `<legend>` for the group label.
Assistive technologies will announce the legend before each option.

Additionally, ensure that all radio-type toggles in the group share the same name attribute.
This allows screen readers to recognize them as a single group and announce their position within it.

<Canvas of={ToggleAccessibilityStories.GroupExample} />
```

--------------------------------

### Styled Components v6 Migration Example

Source: https://github.com/lifesg/react-design-system/wiki/Changelog

When migrating to styled-components v6, ensure pseudo-classes and pseudo-elements are prefixed with '&'. This example shows the required prefixing for hover and before pseudo-elements.

```diff
- :hover {
}
- ::before {
}
+ &:hover {
}
+ &::before {
}
```

--------------------------------

### Import Breakpoint and MediaQuery

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/breakpoint/a-breakpoint-introduction.mdx

Import the necessary Breakpoint and MediaQuery components from the theme.

```tsx
import { Breakpoint, MediaQuery } from "@lifesg/react-design-system/theme";
```

--------------------------------

### V3 Typography Usage

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Example of applying font styles using new Font tokens in V3. Allows overriding individual properties like font-weight.

```javascript
import { Font } from "@lifesg/react-design-system/theme";

export const ExampleComponent = styled.div`
  ${Font["body-baseline-regular"]} // apply all font-related styles
  
  strong {
    font-weight: ${Font.Spec["weight-semibold"]}; // only 1 property to override
  }
`
```

--------------------------------

### Accessing Design Tokens as Constants

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/a-introduction.mdx

Shows how to access design tokens as constant values, providing an example of retrieving a text color token using a specific theme.

```tsx
import { Colour, LifeSGTheme } from "@lifesg/react-design-system/theme";
import { useTheme } from "styled-components";

const colour = Colour["text"]({ theme: LifeSGTheme });
```

--------------------------------

### UneditableSection Default Example

Source: https://github.com/lifesg/react-design-system/blob/master/stories/uneditable-section/uneditable-section.mdx

Renders the UneditableSection with its default grey background.

```tsx
<Canvas of={UneditableSectionStories.Default} />
```

--------------------------------

### Configuring Theme with ThemeProvider

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/b-theme-introduction.mdx

Demonstrates how to configure the application theme by importing a theme preset and wrapping the application with the ThemeProvider from styled-components. The theme object is passed via the 'theme' prop.

```typescript
import { LifeSGTheme } from "@lifesg/react-design-system/theme";
import { ThemeProvider } from "styled-components";
import { Component } from "./index";

const App = () => {
    return (
        <ThemeProvider theme={LifeSGTheme}>
            <Component />
        </ThemeProvider>
    );
};

export default App;
```

--------------------------------

### V4 TimeSlotBar Component Usage

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V4

Example of V4 TimeSlotBar component usage, demonstrating the new way to apply styles directly. Function interpolation for styling is removed.

```tsx
const { mode } = useTheme();

<TimeSlotBar
    slots={[
        {
            id: "1",
            startTime: "09:00",
            endTime: "09:30",
            styleAttributes: {
                backgroundColor: mode === "dark" ? "black" : "white",
                backgroundColor: Colour["bg"],
                backgroundColor: "#E3F2FD",
            },
        },
    ]}
/>;
```

--------------------------------

### Canary and Stable Release Versioning

Source: https://github.com/lifesg/react-design-system/blob/master/CONTRIBUTING.md

Illustrates the versioning format for canary and stable releases. Canary releases are for testing new features before official rollout.

```bash
- canary v1.0.1-canary.1
- stable v1.0.1
```

--------------------------------

### Styling Imports Comparison

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V1

Illustrates the change in importing styling-related utilities like Color, MediaQuery, and TextStyleHelper. These are now imported from their respective subdirectories.

```tsx
// v6
import { Color, MediaQuery, TextStyleHelper } from "react-lifesg-design-system";

// New
import { Color } from "@lifesg/react-design-system/color";
import { MediaQuery } from "@lifesg/react-design-system/media";
import { TextStyleHelper } from "@lifesg/react-design-system/text";
```

--------------------------------

### V2 TextStyleHelper Usage

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Example of using the deprecated TextStyleHelper in V2 with styled-components.

```javascript
import { TextStyleHelper } from "@lifesg/react-design-system/text";

export const ExampleComponent = styled.div`
  ${TextStyleHelper.getTextStyle("Body", "semibold")}
`
```

--------------------------------

### Define CareerCompass Theme

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/colour/n-colour-careercompass.mdx

Example of defining a theme specification with the 'careercompass' colour scheme.

```tsx
const theme: ThemeSpec = {
    colourScheme: "careercompass",
    // ...other specifications
};
```

--------------------------------

### Table with Fixed Column Widths

Source: https://github.com/lifesg/react-design-system/blob/master/stories/table/table.mdx

Demonstrates how to set fixed widths for table columns by applying the 'width' style to the header elements. This ensures consistent column sizing.

```javascript
import { Canvas, Meta } from "@storybook/addon-docs/blocks";
import { PropsTable } from "./props-table";
import * as TableStories from "./table.stories";

<Meta of={TableStories} />

# Table

## Overview

A low-level table component for displaying tabular data. This is a lightweight
alternative to [DataTable](/docs/content-datatable--docs) when advanced styling,
row/column spans, or fully custom rendering is required.

```tsx
import { Table } from "@lifesg/react-design-system/table";
```

<Canvas of={TableStories.Default} />

## Fixed column widths

This example illustrates how column widths can be fixed by setting the `width` style on headers.

<Canvas of={TableStories.FixedColumnWidths} />

## Row and column span

<Canvas of={TableStories.RowAndColSpan} />

## Scrollable table

<Canvas of={TableStories.ScrollableTable} />

## Component API

<PropsTable />

```

--------------------------------

### Tab Component Default Usage

Source: https://github.com/lifesg/react-design-system/blob/master/stories/tab/tab.mdx

Basic example of the Tab component with default settings.

```tsx
<Canvas of={TabStories.Default} />
```

--------------------------------

### Styling Practices: Styled Components vs. ClassNames

Source: https://github.com/lifesg/react-design-system/blob/master/CONVENTIONS.md

Refrain from using `className` and instead create corresponding styled components. Give styled components sensible names.

```tsx
// Wrong

/** component.style.tsx */
const Wrapper = styled.div`
    .label {
        // styles here...
    }

    .description {
        // styles here...
    }
`;

/** component.tsx */
return (
    <Wrapper>
        <label className="label">This is the label</label>
        <span className="description">Lorem ipsum dolar sit amet...</span>
    </Wrapper>
);

```

```tsx
// Correct

/** component.style.tsx */
const Wrapper = styled.div`
    // styles here...
`;

const Label = styled.label`
    // styles here...
`;

const Description = styled.span`
    // styles here...
`;

/** component.tsx */
return (
    <Wrapper>
        <Label>This is the label</Label>
        <Description>Lorem ipsum dolar sit amet...</Description>
    </Wrapper>
);

```

--------------------------------

### V4 Out-of-the-Box Media Query Hooks

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V4

Demonstrates the V4 approach using provided media query hooks like `useMaxWidthMediaQuery`, `useMinWidthMediaQuery`, and `useMediaQuery` for simplified responsive detection.

```tsx
import {
    Breakpoint,
    useMaxWidthMediaQuery,
    useMinWidthMediaQuery,
    useMediaQuery,
} from "@lifesg/react-design-system/theme";

const ExampleComponent = () => {
    const isTablet = useMaxWidthMediaQuery("lg");
    const isTablet = useMinWidthMediaQuery("md");

    const isTablet = useMediaQuery({ maxWidth: Breakpoint["lg-max"] });
    const isTablet = useMediaQuery({ minWidth: Breakpoint["lg-min"] });
};

```

--------------------------------

### Create Trigger Component

Source: https://github.com/lifesg/react-design-system/blob/master/stories/tooltip/tooltip.mdx

Define the component that will trigger the tooltip. This example uses a Button component.

```tsx
import { Button, ButtonProps } from "@lifesg/react-design-system/button";

const TriggerComponent = (props: ButtonProps) => (
    <Button.Default {...props}>Click on me</Button.Default>
);
```

--------------------------------

### Data Table with Disabled Checkboxes

Source: https://github.com/lifesg/react-design-system/blob/master/stories/data-table/data-table.mdx

Example of how to disable checkboxes for row selection in the Data Table.

```tsx
<Canvas of={DataTableStories.DisabledCheckboxes} />
```

--------------------------------

### Basic Dark Mode Implementation

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/d-dark-mode.mdx

Use DSThemeProvider with LifeSGTheme for automatic light/dark mode switching based on system preference.

```tsx
import {
    DSThemeProvider,
    LifeSGTheme,
} from "@lifesg/react-design-system/theme";
import { Component } from "./index";

const App = () => {
    return (
        <DSThemeProvider theme={LifeSGTheme}>
            <Component />
        </DSThemeProvider>
    );
};

export default App;
```

--------------------------------

### Configure OneService Font Scheme

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/font/e-font-oneservice.mdx

Example of how to configure the OneService font scheme within your theme specification.

```tsx
const theme: ThemeSpec = {
    fontScheme: "oneservice",
    // ...other specifications
};
```

--------------------------------

### Importing Theme Presets

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/b-theme-introduction.mdx

Shows how to import various theme presets available in the design system. These presets can be used to configure the application's theme.

```typescript
// The LifeSG theme
import { LifeSGTheme } from "@lifesg/react-design-system/theme";

// The BookingSG theme
import { BookingSGTheme } from "@lifesg/react-design-system/theme";

// The CCUBE theme
import { CCubeTheme } from "@lifesg/react-design-system/theme";

// The MyLegacy theme
import { MyLegacyTheme } from "@lifesg/react-design-system/theme";

// The OneService theme
import { OneServiceTheme } from "@lifesg/react-design-system/theme";

// The PA theme
import { PATheme } from "@lifesg/react-design-system/theme";

// The SupportGoWhere theme
import { SupportGoWhereTheme } from "@lifesg/react-design-system/theme";

// The SGW Digital Lobby theme
import { SGWDigitalLobbyTheme } from "@lifesg/react-design-system/theme";

// The A11y Playground theme
import { A11yPlaygroundTheme } from "@lifesg/react-design-system/theme";

// The IMDA theme
import { IMDATheme } from "@lifesg/react-design-system/theme";

// The RBS theme
import { RBSTheme } from "@lifesg/react-design-system/theme";

// The SPF theme
import { SPFTheme } from "@lifesg/react-design-system/theme";

// The SMGS theme
import { SMGSTheme } from "@lifesg/react-design-system/theme";

// The CareerCompass theme
import { CareerCompassTheme } from "@lifesg/react-design-system/theme";
```

--------------------------------

### OneService Theme Specification

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/colour/f-colour-oneservice.mdx

Defines the theme object with the 'oneservice' colour scheme. This is a basic configuration example.

```tsx
const theme: ThemeSpec = {
    colourScheme: "oneservice",
    // ...other specifications
};
```

--------------------------------

### V3 Typography Component Usage

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Demonstrates the import and usage of the new Typography component in V3, including setting font weight.

```javascript
import { Typography } from "@lifesg/react-design-system/typography";

<Typography.HeadingXXL weight="bold">Hello world</Typography.HeadingXXL>
<Typography.BodyBL>Hello world</Typography.BodyBL>
<Typography.LinkBL>Hello world</Text.LinkBL>
```

--------------------------------

### Data Table with Action Bar

Source: https://github.com/lifesg/react-design-system/blob/master/stories/data-table/data-table.mdx

An example showcasing the integration of an action bar within the Data Table.

```tsx
<Canvas of={DataTableStories.ActionBar} />
```

--------------------------------

### Using a Preset Theme with ThemeProvider

Source: https://github.com/lifesg/react-design-system/blob/master/stories/v2/themes.mdx

Applies a predefined preset theme, such as BaseTheme, globally using the ThemeProvider.

```tsx
// app.tsx
import { BaseTheme } from "@lifesg/react-design-system/theme";
import { ThemeProvider } from "styled-components";
import { Component } from "./index";

const App = () => {
    return (
        <ThemeProvider theme={BaseTheme}>
            <Component />
        </ThemeProvider>
    );
};

export default App;
```

--------------------------------

### Default Shadow Scheme Theme Specification

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/shadow/b-shadow-default.mdx

Example of how to specify the default shadow scheme within a theme configuration.

```tsx
const theme: ThemeSpec = {
    shadowScheme: "default",
    // ...other specifications
};
```

--------------------------------

### Import V2_MediaWidths

Source: https://github.com/lifesg/react-design-system/blob/master/stories/v2/media-query.mdx

Import V2_MediaWidths to access breakpoint values directly for conditional rendering or custom logic.

```tsx
import { V2_MediaWidths } from "@lifesg/react-design-system/v2_media";
```

--------------------------------

### Run Codemod for Layout Migration

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

A codemod is available to automate the migration of `V2_Layout` imports and `Layout.ColDiv` column props. Manual adjustment of column counts may still be required.

```console
$ npx lifesg-react-design-system
Select codemods to run:
❯◉ migrate-layout
```

--------------------------------

### Create Trigger Component

Source: https://github.com/lifesg/react-design-system/blob/master/stories/popover/popover.mdx

Define the component that will trigger the popover. This example uses `V2_Text` for displaying body text.

```tsx
import { V2_Text } from "@lifesg/react-design-system/v2_text";

const Trigger = () => (
    <CustomDiv>
        <V2_Text.Body>Hover me</V2_Text.Body>
    </CustomDiv>
);
```

--------------------------------

### Import LoadingDotsSpinner

Source: https://github.com/lifesg/react-design-system/blob/master/stories/animation/2-animations-customisable.mdx

Import the LoadingDotsSpinner component from the react-design-system animations library. This is the basic setup required to use the component.

```tsx
import { LoadingDotsSpinner } from "@lifesg/react-design-system/animations";
```

--------------------------------

### Schedule Component Usage

Source: https://github.com/lifesg/react-design-system/blob/master/stories/schedule/Schedule.mdx

Demonstrates how to import and use the Schedule component with various props for date, view, time settings, service data, and event handlers.

```jsx
import { Schedule } from "src/schedule";

<Schedule
    date="2025-07-22"
    data-id="schedule"
    view="day"
    minTime="00:00"
    maxTime="23:59"
    initialScrollTime="08:00"
    serviceData={data}
    loading={loading}
    onNextDayClick={onNextDayClick}
    onPreviousDayClick={onPreviousDayClick}
    onTodayClick={onTodayClick}
    onSlotClick={onSlotClick}
    onCalendarDateSelect={onCalendarDateSelect}
    emptySlotPopover={emptySlotPopover}
    blockedMessage="Not Available"
    onClickHiddenSlots={onClickHiddenSlots}
/>;
```

--------------------------------

### IMDA Theme Specification

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/colour/j-colour-imda.mdx

Defines the theme specification with the 'imda' colour scheme. This is a basic example of how to set up the theme object.

```tsx
const theme: ThemeSpec = {
    colourScheme: "imda",
    // ...other specifications
};
```

--------------------------------

### Data Table with Fixed Column Widths

Source: https://github.com/lifesg/react-design-system/blob/master/stories/data-table/data-table.mdx

Demonstrates how to set fixed column widths by applying the `width` style to headers.

```tsx
<Canvas of={DataTableStories.FixedColumnWidths} />
```

--------------------------------

### RBS Theme Specification

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/colour/k-colour-rbs.mdx

Defines the theme object with the 'rbs' colour scheme. This is a basic example and may require other specifications.

```tsx
const theme: ThemeSpec = {
    colourScheme: "rbs",
    // ...other specifications
};
```

--------------------------------

### Popover Resize and Flip Configuration

Source: https://github.com/lifesg/react-design-system/blob/master/stories/popover-v2/popover.mdx

Demonstrates enabling resize to fit vertical space and disabling content flipping for the Popover.

```tsx
<Canvas of={PopoverStories.ResizeAndFlip} />
```

--------------------------------

### CCube Theme Specification

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/colour/d-colour-ccube.mdx

Defines the theme specification for the 'ccube' colour scheme. This is a basic example and may include other specifications.

```tsx
const theme: ThemeSpec = {
    colourScheme: "ccube",
    // ...other specifications
};
```

--------------------------------

### Run Codemod for Import Migration

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V4

Execute the provided codemod script to automatically migrate import statements in your project.

```console
$ npx lifesg-react-design-system
Select codemods to run:
❯◉ migrate-popover
```

--------------------------------

### V3 Spacing Tokens Usage

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Demonstrates using Spacing tokens for layout margins and element spacing in V3. Recommends tokens over hardcoded pixel values for flexibility.

```javascript
import { Spacing } from "@lifesg/react-design-system/theme";

const SectionContainer = styled.div`
  // use layout to position page-level sections
  margin-bottom: ${Spacing["layout-md"]};
`;

const Row = styled.div`
  // use spacing within elements
  display: flex;
  gap: ${Spacing["spacing-8"]};
`
```

--------------------------------

### Navbar with Hidden Masthead

Source: https://github.com/lifesg/react-design-system/blob/master/stories/navbar/navbar.mdx

Shows an example where the masthead section of the Navbar is hidden. This configuration can be used to simplify the top navigation area.

```tsx
<Canvas of={NavbarStories.HiddenMasthead} />
```

--------------------------------

### Import React Design System Components

Source: https://github.com/lifesg/react-design-system/blob/master/README.md

Demonstrates the efficient way to import individual components from the React Design System.

```tsx
// Efficient manner
import { Button } from "@lifesg/react-design-system/button";

// Less ideal manner
import { Button } from "@lifesg/react-design-system";
```

--------------------------------

### Inline Text Example

Source: https://github.com/lifesg/react-design-system/blob/master/stories/typography/typography.mdx

Demonstrates nesting text within text using the `inline` prop. The nested text is rendered as a `span` element.

```tsx
<Typography.Text inline>This is a normal text and this is <Typography.Text inline>nested text</Typography.Text>.</Typography.Text>
```

--------------------------------

### Codemod for Migrating Color Tokens

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Command to run the codemod for migrating color tokens from V2 to V3. Recommends using semantic tokens where possible.

```bash
$ npx lifesg-react-design-system
Select codemods to run:
❯◉ migrate-colour
```

--------------------------------

### Define SPF Theme Specification

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/colour/l-colour-spf.mdx

Defines the theme specification object with the 'spf' colour scheme. This is a basic example; other specifications may be included.

```tsx
const theme: ThemeSpec = {
    colourScheme: "spf",
    // ...other specifications
};
```

--------------------------------

### Component File Structure

Source: https://github.com/lifesg/react-design-system/blob/master/CONVENTIONS_V4.md

Organize your component files with imports, interfaces, effects, event handlers, helper functions, and render functions in a structured manner. Use relative import paths for internal components and name event handlers with the 'handle' prefix.

```tsx
// component-file.tsx

// Import statements here
/**
 * When importing other components, use the relative import path
 * to prevent circular dependency issues.
 * E.g. import { Text } from "../text/text";
 */

/**
 * For local props. If the props are to be exported
 * add them to types.ts
 */
interface Props {
    a: string;
}

/**
 * Refrain from typing React.FC<Props>
 */
export const MyComponent = ({ a }: Props) => {
    // =========================================================================
    // CONST, STATE, REF
    // =========================================================================

    // =========================================================================
    // EFFECTS
    // =========================================================================

    /**
     * When adding event listeners, remember to remove them as well
     */
    useEffect(() => {
        document.addEventListener("keydown", handleKeyDown);

        return () => {
            document.removeEventListener("keydown", handleKeyDown);
        };
    }, []);

    /**
     * Make sure to add all dependencies to hooks
     */
    useEffect(() => {
        fetchItems(page);
    }, [page]);

    /**
     * A polyfill for `useEffectEvent` (React 19+) is available
     */
    const fireShowEvent = useEvent(() => {
        onOpen?.();
    });

    useEffect(() => {
        if (show) {
            fireShowEvent();
        }
    }, [show, fireShowEvent]);

    // =========================================================================
    // EVENT HANDLERS
    // =========================================================================

    /**
     * Name event handlers using `handle` prefix and the name of the action after.
     * E.g. handleClick, handleChange
     */

    const handleClick = (event: React.KeyboardEvent<HTMLButtonElement>) => {
        // do something...
    };

    // =========================================================================
    // HELPER FUNCTIONS
    // =========================================================================

    /**
     * If the helper function can be extracted (i.e. doesnt rely on any internal
     * constant/state value), then consider putting it outside of the component
     * instead
     */

    // =========================================================================
    // RENDER FUNCTIONS
    // =========================================================================
    /**
     * We recommend doing complex rendering in a render function
     * of its own for ease of maintenance
     */
    const renderItems = () => {
        // Map or complex render logic
    };

    /**
     * Remember to pass down standard html element props to the inner component
     * especially `className` to allow for external styling to be applied
     */

    return (
        <WrapperComponent>
            <InnerComponent>{renderItems()}</InnerComponent>
        </WrapperComponent>
    );
};

```

--------------------------------

### V4 Responsive Styling with MediaQuery Directive

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V4

Demonstrates the V4 approach for responsive styling using the `MediaQuery` directive, which replaces direct embedding of breakpoint tokens in media queries.

```tsx
import { MediaQuery } from "@lifesg/react-design-system/theme";

const Container = styled.div`
    ${MediaQuery.MaxWidth.sm} {
        /* styles */
    }
`;

```

--------------------------------

### SGW Digital Lobby Theme Specification

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/colour/m-colour-sgw-digital-lobby.mdx

Defines the theme object with the 'sgwdigitallobby' colour scheme. This is a basic setup for applying the specific palette.

```tsx
const theme: ThemeSpec = {
    colourScheme: "sgwdigitallobby",
    // ...other specifications
};
```

--------------------------------

### Use MediaQuery for Min Width

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/breakpoint/a-breakpoint-introduction.mdx

Target styles for screen widths from a minimum value upwards using MediaQuery.MinWidth.

```tsx
import { MediaQuery } from "@lifesg/react-design-system/theme";
import styled from "styled-components";

const Container = styled.div`
    ${MediaQuery.MinWidth.xs} {
        // styles
    }
`;

/* @media screen and (min-width: 321px) */
```

--------------------------------

### Add SupportGoWhere Theme CSS to HTML Head

Source: https://github.com/lifesg/react-design-system/blob/master/stories/getting-started/installation.mdx

Include these links in the `<head>` of your HTML file for the SupportGoWhere theme.

```html
<link
    rel="stylesheet"
    type="text/css"
    href="https://assets.life.gov.sg/react-design-system/v3/css/main.css"
/>
<link
    rel="stylesheet"
    type="text/css"
    href="https://assets.life.gov.sg/react-design-system/v3/css/libre-franklin.css"
/>
```

--------------------------------

### Theme Specification for MyLegacy Colour Scheme

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/colour/e-colour-mylegacy.mdx

Defines the theme object with the 'mylegacy' colour scheme. This is a basic setup for applying legacy colours.

```tsx
const theme: ThemeSpec = {
    colourScheme: "mylegacy",
    // ...other specifications
};
```

--------------------------------

### Theme Configuration for Plus Jakarta Sans

Source: https://github.com/lifesg/react-design-system/blob/master/stories/v2_text/e-plus-jakarta-sans-collection.mdx

Configure the theme to use the 'plusJakartaSans' text style scheme. This is a basic example and may require other specifications.

```tsx
const theme: ThemeSpec = {
    textStyleScheme: "plusJakartaSans",
    // ...other specifications
};
```

--------------------------------

### Import Tooltip HOC

Source: https://github.com/lifesg/react-design-system/blob/master/stories/tooltip/tooltip.mdx

Import the `withTooltip` higher-order component for creating tooltips.

```tsx
import { withTooltip } from "@lifesg/react-design-system/tooltip";
```

--------------------------------

### V3 TimeTable Component Usage

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V4

Example of V3 TimeTable component usage with function interpolation for cell styling. This method is no longer supported in V4.

```tsx
<TimeTable
    rowData={[
        {
            id: "1",
            rowCells: [
                {
                    startTime: "08:00",
                    endTime: "09:30",
                    cellStyleAttributes: {
                        // accessing the theme prop - no longer works
                        backgroundColor: ({ theme }) =>
                            theme.colourMode === "dark" ? "black" : "white",
                        // colour token - still works
                        backgroundColor: Colour["bg"],
                        // css value - still works
                        backgroundColor: "#E3F2FD",
                    },
                },
            ],
        },
    ]}
/>
```

--------------------------------

### Using Semantic and Primitive Colour Tokens

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/colour/a-colour-introduction.mdx

Demonstrates how to apply semantic and primitive colour tokens to text colour using styled-components.

```tsx
import { Colour } from "@lifesg/react-design-system/theme";
import styled, { css } from "styled-components";

const Container = styled.div`
    color: ${Colour["text"]};
    color: ${Colour.Primitve["neutral-100"]};
`;
```

--------------------------------

### Customize Button Component Tokens

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/component/a-component-token-introduction.mdx

Example of customizing the 'Button' component tokens by overriding radius and background color. Ensure `ThemeSpec` and `Colour` are imported.

```tsx
import { LifeSGTheme } from "@lifesg/react-design-system/theme";

const customTheme: ThemeSpec = {
    ...LifeSGTheme,
    componentOverrides: {
        Button: {
            "button-radius": 15,
            "button-default-colour-bg": Colour["bg-primary"],
        },
    },
};

<ThemeProvider theme={customTheme}>
    <App />
</ThemeProvider>;
```

--------------------------------

### Using Media Width Values in Component Logic

Source: https://github.com/lifesg/react-design-system/blob/master/stories/v2/media-query.mdx

Demonstrates how to use imported media width values to implement responsive behavior within a React component.

```tsx
import { V2_MediaWidths } from "@lifesg/react-design-system/v2_media";

export const MyComponent = () => {
    const { innerWidth } = window;
    if (innerWidth > V2_MediaWidths.mobileL) {
        // render something
    } else {
        // render something else
    }
};
```

--------------------------------

### Content Security Policy Update for Navbar

Source: https://github.com/lifesg/react-design-system/wiki/Migrating-to-V3

Example of updating the Content Security Policy header to whitelist the V3 SGDS Masthead script URL.

```diff
-https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component/Masthead/index.js
+https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js

```

--------------------------------

### Configure Theme with ThemeProvider

Source: https://github.com/lifesg/react-design-system/blob/master/README.md

Wrap your application components with ThemeProvider and pass the theme object to configure the design system's theme.

```tsx
// app.tsx
import { LifeSGTheme } from "@lifesg/react-design-system/theme";
import { ThemeProvider } from "styled-components";
import { Component } from "./index";

const App = () => {
    return (
        <ThemeProvider theme={LifeSGTheme}>
            <Component />
        </ThemeProvider>
    );
};

export default App;
```

--------------------------------

### Import Tooltip Component

Source: https://github.com/lifesg/react-design-system/blob/master/stories/tooltip/tooltip.mdx

Import the standalone `Tooltip` component for direct usage.

```tsx
import { Tooltip } from "@lifesg/react-design-system/tooltip";
```

--------------------------------

### Import LocalNav Components

Source: https://github.com/lifesg/react-design-system/blob/master/stories/local-nav/local-nav.mdx

Import the necessary components for LocalNav menus and dropdowns.

```tsx
import {
    LocalNavMenu,
    LocalNavDropdown,
} from "@lifesg/react-design-system/local-nav";
```

--------------------------------

### Get Color as Constant Value

Source: https://github.com/lifesg/react-design-system/blob/master/stories/v2_color/a-color.mdx

Retrieve a color as a constant value by calling the color function with the theme. This is useful when you need the color value directly.

```tsx
import { V2_Color } from "@lifesg/react-design-system/v2_color";
import { BaseTheme } from "@lifesg/react-design-system/theme";

const PrimaryColor = V2_Color.Primary({ theme: BaseTheme });
```

--------------------------------

### Correctly Apply Font Styles

Source: https://github.com/lifesg/react-design-system/blob/master/stories/theme/font/a-font-introduction.mdx

Demonstrates the correct way to apply font styles using longhand properties to avoid overwriting other values when customising.

```tsx
const Incorrect = styled.p`
    ${Font["heading-xxl-bold"]}
    font: 1rem serif;
    font-variant: small-caps;
`;

const Correct = styled.p`
    ${Font["heading-xxl-bold"]}
    font-size: 1rem;
    font-family: serif;
    font-variant-caps: small-caps;
`;
```