feat: carbon design system theme

package.json

@@ -64,6 +64,7 @@
   "workspaces": [
     "packages/antd",
     "packages/bootstrap-4",
+    "packages/carbon",
     "packages/chakra-ui",
     "packages/core",
     "packages/docs",

packages/carbon/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "extends": ["../../.eslintrc"],
+  "plugins": ["@typescript-eslint", "jsx-a11y", "react", "import"]
+}

packages/carbon/README.md

@@ -0,0 +1,164 @@
+[![Build Status][build-shield]][build-url]
+[![npm][npm-shield]][npm-url]
+[![npm downloads][npm-dl-shield]][npm-dl-url]
+[![Contributors][contributors-shield]][contributors-url]
+[![Apache 2.0 License][license-shield]][license-url]
+
+<!-- PROJECT LOGO -->
+<br />
+<p align="center">
+  <a href="https://github.com/rjsf-team/react-jsonschema-form">
+    <img src="./logo.png" alt="Logo" width="340">
+  </a>
+
+  <h3 align="center">@rjsf/chakra-ui</h3>
+
+  <p align="center">
+  Chakra UI theme, fields and widgets for <a href="https://github.com/rjsf-team/react-jsonschema-form/"><code>react-jsonschema-form</code></a>.
+    <br />
+    <a href="https://rjsf-team.github.io/react-jsonschema-form/docs/"><strong>Explore the docs »</strong></a>
+    <br />
+    <br />
+    <a href="https://rjsf-team.github.io/react-jsonschema-form/">View Playground</a>
+    ·
+    <a href="https://github.com/rjsf-team/react-jsonschema-form/issues">Report Bug</a>
+    ·
+    <a href="https://github.com/rjsf-team/react-jsonschema-form/issues">Request Feature</a>
+  </p>
+</p>
+
+<!-- TABLE OF CONTENTS -->
+
+## Table of Contents
+
+- [Table of Contents](#table-of-contents)
+- [About The Project](#about-the-project)
+  - [Built With](#built-with)
+- [Getting Started](#getting-started)
+  - [Prerequisites](#prerequisites)
+  - [Installation](#installation)
+- [Usage](#usage)
+- [Optional Chakra UI Theme properties](#optional-chakra-ui-theme-properties)
+  - [Custom Chakra uiSchema Chakra Property](#custom-chakra-uischema-chakra-property)
+- [Roadmap](#roadmap)
+- [Contributing](#contributing)
+- [Contact](#contact)
+
+<!-- ABOUT THE PROJECT -->
+
+## About The Project
+
+[![@rjsf/chakra-ui Screen Shot][product-screenshot]](https://rjsf-team.github.io/@rjsf/chakra-ui)
+
+Exports `chakra-ui` theme, fields and widgets for `react-jsonschema-form`.
+
+### Built With
+
+- [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/)
+- [Chakra UI](https://chakra-ui.com/)
+- [TypeScript](https://www.typescriptlang.org/)
+
+<!-- GETTING STARTED -->
+
+## Getting Started
+
+### Prerequisites
+
+- `@chakra-ui/react >= 1.7.0`
+- `chakra-react-select >= 3.3.8`
+- `react >= 17.0.0`
+- `framer-motion >= 5.0.0`
+- `@rjsf/core >= 2.0.0`
+
+Refer to the [rjsf installation guide](https://rjsf-team.github.io/react-jsonschema-form/docs/#installation) and [chakra-ui installation guide](https://chakra-ui.com/docs/getting-started#installation) and for more details.
+
+---
+
+### Installation
+
+```bash
+yarn add @chakra-ui/react@^1.7 @emotion/react@^11 @emotion/styled@^11 framer-motion@^5
+```
+
+```bash
+yarn add @rjsf/chakra-ui @rjsf/core
+```
+
+<!-- USAGE EXAMPLES -->
+
+## Usage
+
+```js
+import Form from '@rjsf/chakra-ui';
+```
+
+or
+
+```js
+import { withTheme } from '@rjsf/core';
+import { Theme as ChakraUITheme } from '@rjsf/chakra-ui';
+
+// Make modifications to the theme with your own fields and widgets
+
+const Form = withTheme(ChakraUITheme);
+```
+
+## Optional Chakra UI Theme properties
+
+- To pass additional properties to widgets, see this [guide](https://rjsf-team.github.io/react-jsonschema-form/docs/usage/objects#additional-properties).
+
+You can use `ChakraProvider`, to customize the components at a theme level.\
+And, `uiSchema` allows for the use of a `"chakra"` `"ui:option"` to customize the styling of the form widgets.
+
+#### Custom Chakra uiSchema Chakra Property
+
+```json
+{
+  "ui:options": {
+    "chakra": {
+      "p": "1rem",
+      "color": "blue.200",
+      "sx": {
+        "margin": "0 auto"
+      }
+    }
+  }
+}
+```
+
+It accepts the theme accessible [style props](https://chakra-ui.com/docs/features/style-props) provided by [Chakra](https://chakra-ui.com/docs/getting-started) and [Emotion](https://emotion.sh/docs/introduction).
+
+<!-- ROADMAP -->
+
+## Roadmap
+
+See the [open issues](https://github.com/rjsf-team/react-jsonschema-form/issues) for a list of proposed features (and known issues).
+
+<!-- CONTRIBUTING -->
+
+## Contributing
+
+Read our [contributors' guide](https://rjsf-team.github.io/react-jsonschema-form/docs/contributing/) to get started.
+
+<!-- CONTACT -->
+
+## Contact
+
+rjsf team: [https://github.com/orgs/rjsf-team/people](https://github.com/orgs/rjsf-team/people)
+
+GitHub repository: [https://github.com/rjsf-team/react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form)
+
+<!-- MARKDOWN LINKS & IMAGES -->
+<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+
+[build-shield]: https://github.com/rjsf-team/react-jsonschema-form/workflows/CI/badge.svg
+[build-url]: https://github.com/rjsf-team/react-jsonschema-form/actions
+[contributors-shield]: https://img.shields.io/github/contributors/rjsf-team/react-jsonschema-form.svg
+[contributors-url]: https://github.com/rjsf-team/react-jsonschema-form/graphs/contributors
+[license-shield]: https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square
+[license-url]: https://choosealicense.com/licenses/apache-2.0/
+[npm-shield]: https://img.shields.io/npm/v/@rjsf/chakra-ui/latest.svg?style=flat-square
+[npm-url]: https://www.npmjs.com/package/@rjsf/chakra-ui
+[npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/chakra-ui.svg?style=flat-square
+[npm-dl-url]: https://www.npmjs.com/package/@rjsf/chakra-ui
+[product-screenshot]: ./screenshot.png

packages/carbon/babel.config.js

@@ -0,0 +1,3 @@
+const defaultConfig = require('../../babel.config');
+
+module.exports = defaultConfig;

packages/carbon/jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    browsers: ['chrome', 'firefox', 'safari'],
+  },
+  transformIgnorePatterns: [`/node_modules/(?!nanoid)`],
+};

packages/carbon/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@rjsf/carbon",
+  "version": "5.18.4",
+  "description": "Carbon Design UI theme, fields, and widgets for react-jsonschema-form",
+  "main": "dist/index.js",
+  "module": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "files": [
+    "dist",
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "build:ts": "tsc -b",
+    "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --sourcemap --packages=external --format=cjs",
+    "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/carbon.esm.js --sourcemap --packages=external --format=esm",
+    "build:umd": "rollup dist/carbon.esm.js --format=umd --file=dist/carbon.umd.js --name=@rjsf/carbon",
+    "build": "npm run build:ts && npm run build:cjs && npm run build:esm && npm run build:umd",
+    "cs-check": "prettier -l \"{src,test}/**/*.ts?(x)\"",
+    "cs-format": "prettier \"{src,test}/**/*.ts?(x)\" --write",
+    "lint": "eslint src test",
+    "precommit": "lint-staged",
+    "test": "jest",
+    "test:update": "jest --u",
+    "test:watch": "jest --watch"
+  },
+  "lint-staged": {
+    "{src,test}/**/*.ts?(x)": [
+      "eslint --fix"
+    ]
+  },
+  "engineStrict": false,
+  "engines": {
+    "node": ">=14"
+  },
+  "peerDependencies": {
+    "@carbon/icons-react": "11.43.0",
+    "@carbon/react": "1.59.0",
+    "@rjsf/core": "^5.18.x",
+    "@rjsf/utils": "^5.18.x",
+    "react": "^16.14.0 || >=17"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Jianghao Yu <[email protected]>",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@babel/core": "^7.23.9",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@carbon/icons-react": "11.43.0",
+    "@carbon/react": "1.59.0",
+    "@rjsf/core": "^5.18.4",
+    "@rjsf/snapshot-tests": "^5.18.4",
+    "@rjsf/utils": "^5.18.4",
+    "@rjsf/validator-ajv8": "^5.18.4",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.58",
+    "@types/react-dom": "^18.2.19",
+    "@types/react-test-renderer": "^18.0.7",
+    "babel-jest": "^29.7.0",
+    "esbuild": "^0.18.20",
+    "eslint": "^8.56.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-watch-typeahead": "^2.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "rimraf": "^5.0.5",
+    "rollup": "^3.29.4",
+    "typescript": "^4.9.5"
+  }
+}

packages/carbon/src/AddButton/AddButton.tsx

@@ -0,0 +1,18 @@
+import { Add } from '@carbon/icons-react';
+import { Button } from '@carbon/react';
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+
+/** Implement `ButtonTemplates.AddButton`
+ */
+export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  uiSchema,
+  registry,
+  ...props
+}: IconButtonProps<T, S, F>) {
+  const { translateString } = registry;
+  return (
+    <Button size='sm' kind='tertiary' renderIcon={Add} {...props}>
+      {translateString(TranslatableString.AddItemButton)}
+    </Button>
+  );
+}

packages/carbon/src/AddButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './AddButton';
+export * from './AddButton';

packages/carbon/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -0,0 +1,80 @@
+import { useMemo } from 'react';
+import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+/** Implement `ArrayFieldItemTemplate`
+ */
+export default function ArrayFieldItemTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ArrayFieldTemplateItemType<T, S, F>) {
+  const {
+    className,
+    children,
+    disabled,
+    hasToolbar,
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    index,
+    onCopyIndexClick,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    uiSchema,
+    registry,
+  } = props;
+  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
+  const onCopyClick = useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
+
+  const onRemoveClick = useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
+
+  const onArrowUpClick = useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
+
+  const onArrowDownClick = useMemo(() => onReorderClick(index, index + 1), [index, onReorderClick]);
+
+  return (
+    <div className={className} style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'center' }}>
+      <div style={{ flex: 1 }}>{children}</div>
+      {hasToolbar && (
+        <div
+          className='array-item-toolbox'
+          style={{
+            marginLeft: '1rem',
+            maxWidth: '4rem',
+          }}
+        >
+          {(hasMoveUp || hasMoveDown) && (
+            <MoveUpButton
+              disabled={disabled || readonly || !hasMoveUp}
+              onClick={onArrowUpClick}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+          {(hasMoveUp || hasMoveDown) && (
+            <MoveDownButton
+              disabled={disabled || readonly || !hasMoveDown}
+              onClick={onArrowDownClick}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+          {hasCopy && (
+            <CopyButton disabled={disabled || readonly} onClick={onCopyClick} uiSchema={uiSchema} registry={registry} />
+          )}
+          {hasRemove && (
+            <RemoveButton
+              disabled={disabled || readonly}
+              onClick={onRemoveClick}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+          <span />
+        </div>
+      )}
+    </div>
+  );
+}

packages/carbon/src/ArrayFieldItemTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ArrayFieldItemTemplate';
+export * from './ArrayFieldItemTemplate';