@oef/components

A TypeScript package containing text/typography components and module components from CityCatalyst. This package provides consistent UI components built on top of Chakra UI.

Installation

``bash
npm install @oef/components
`

Peer Dependencies

This package requires the following peer dependencies:

`bash
npm install react react-dom @chakra-ui/react @emotion/react i18next
`

Usage

`tsx
import {
BlueSubtitle,
BodyLarge,
DisplayMedium,
HeadlineSmall,
TitleLarge,
GHGIDashboard,
HIAPDashboard,
CCRADashboard
} from '@oef/components';

function MyComponent() {
return (



);
}
`

Available Components

$3

- DisplaySmall - Small display text
- DisplayMedium - Medium display text
- DisplayLarge - Large display text

$3

- HeadlineSmall - Small headline
- HeadlineMedium - Medium headline
- HeadlineLarge - Large headline

$3

- TitleSmall - Small title
- TitleMedium - Medium title
- TitleLarge - Large title

$3

- BodySmall - Small body text
- BodyMedium - Medium body text
- BodyLarge - Large body text
- BodyXLarge - Extra large body text

$3

- LabelMedium - Medium label
- LabelLarge - Large label

$3

- ButtonSmall - Small button text
- ButtonMedium - Medium button text

$3

- BlueSubtitle - Blue colored subtitle with i18n support
- Overline - Overline text component

$3

- GHGIDashboard
- HIAPDashboard
- CCRADashboard

Development

This package references the original components in the main CityCatalyst app, so you can continue editing them in their original location at app/src/components/Texts/ and app/src/components/Modules/. Changes will be automatically reflected when the package is rebuilt.

$3

`bash
npm run build
`

$3

`bash
npm run clean
`

License

LGPL

Using the package locally (without publishing)

$3

Create a tarball from the package and install it in the consumer:

`bash


From the package folder

cd CityCatalyst/app/src/components
npm run build
npm pack # → produces something like oef-components-1.0.4.tgz

In the consuming app

cd ../../../demo-oef-components
npm install ../CityCatalyst/app/src/components/@oef/components-*.tgz
`

This mimics a real npm install (no nested node_modules in the package), and is closest to what you'll publish.

$3

`bash
cd demo-oef-components
npm pkg set dependencies.@oef/components="file:../CityCatalyst/app/src/components"
npm install
`

Publishing to npm

1. Log in with an account belonging to the oef organization.

`bash
npm login
`

2. Ensure a clean build and bump version:

`bash
cd CityCatalyst/app/src/components
npm ci
npm run clean && npm run build
npm version minor # or minor/major
`

3. Publish (requires npm account with access):

`bash
npm publish --access public
`

Notes:
- This package ships compiled JS and type declarations from dist/.
- Verify name and version in package.json before publishing.

Next.js + Chakra setup (in consumer)

Wrap your app with Chakra’s provider and pass a theme value:

`tsx
// app/providers.tsx
"use client";
import { ReactNode } from 'react';
import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react';
const appTheme = createSystem(defaultConfig, {});
export function Providers({ children }: { children: ReactNode }) {
return {children};
}
``