ODS Ant

Design-system components and wrappers built on Ant Design.

Contributor workflow checklist:

• CONTRIBUTOR-CHECKLIST.md

Local Development

• Start app preview: npm run dev
• Start Storybook: npm run storybook
• Build app preview bundle: npm run build

Library Packaging (npm)

This repo now supports a dedicated library build that is isolated from app and Storybook workflows.

• Build package artifacts: npm run build:lib
• Strictly type-check the library surface: npm run build:lib:strict
• Validate publish tarball contents: npm run pack:check
• Validate entrypoints and consumer imports: npm run test:publish
• Prepublish hook: npm publish will automatically run prepublishOnly

Published output is generated in dist-lib/.

dist-lib/ is generated output and is ignored by git. It is rebuilt during npm publish and included in the package because package.json lists it in files.

Public Entrypoints

| Path | Description | |------|-------------| | ods-ant | Aggregate root — all components (convenience / prototyping) | | ods-ant/theme | Theme tokens and Ant Design theme config | | ods-ant/forms | All form components | | ods-ant/display | All display components | | ods-ant/navigation | All navigation components | | ods-ant/feedback | All feedback components | | ods-ant/forms/Button | Individual component (recommended for app code) | | ods-ant/display/Image | Individual component (recommended for app code) | | ods-ant/<family>/<Component> | Any component following the same pattern |

Peer Dependencies

Consuming applications are expected to provide:

• react
• react-dom
• antd
• @ant-design/icons
• dayjs

Consumer Example

Install the package and peer dependencies:

npm install ods-ant antd @ant-design/icons dayjs react react-dom

Update to the latest published version:

npm install ods-ant@latest

Update to a specific version:

npm install ods-ant@<version>

If you also need to refresh peers at the same time:

npm install ods-ant@latest antd @ant-design/icons dayjs react react-dom

Recommended — import only the components you use:

import { Button } from 'ods-ant/forms/Button';
import { Input } from 'ods-ant/forms/Input';
import { Image } from 'ods-ant/display/Image';
import { Modal } from 'ods-ant/feedback/Modal';
import { appTheme } from 'ods-ant/theme';

export function Example() {
  return <Button dsVariant="primary">Save</Button>;
}

Convenience — import everything from the root (suitable for quick prototyping):

import { Button, Select } from 'ods-ant';
import { appTheme } from 'ods-ant/theme';

export function Example() {
  return <Button dsVariant="primary">Save</Button>;
}

Publishing

Before publishing, update name, version, and registry settings as needed, then run:

npm run pack:check
npm publish

For private scoped packages, set the package name to your scope and adjust publishConfig.access before publishing.