Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: carbon design system theme #3883

Draft
wants to merge 39 commits into
base: main
Choose a base branch
from
Draft

Conversation

YuJianghao
Copy link

@YuJianghao YuJianghao commented Sep 29, 2023

Reasons for making this change

Add Carbon Design System theme. Also see #3857.

I use this Theme too. So, I'm here and try to make a PR for that.

If your PR is non-trivial and you'd like to schedule a synchronous review, please add it to the weekly meeting agenda: https://docs.google.com/document/d/12PjTvv21k6LIky6bNQVnsplMLLnmEuypTLQF8a-8Wss/edit

Checklist

  • I'm updating documentation
  • I'm adding or updating code
    • I've added and/or updated tests. I've run npm run test:update to update snapshots, if needed.
    • I've updated docs if needed
    • I've updated the changelog with a description of the PR
  • I'm adding a new feature
    • I've updated the playground with an example use of the feature

Additional Information

I build a site to preview the theme: rjsf playground with carbon

Dev TODOs

  • It seems that RJSF's component should have specific CSS class names, which needs a check also in the carbon theme.
  • Switch custom context to formContext or globalUISchema.
  • Fix styles in style tags.
  • More widgets.
  • Figure out how to compile Sass files and distribute them to CSS.
  • Template support for MultiSchemaField(OneOfField/AnyOfField) #3918
  • Update Readme.
  • Update Tests.
  • Update minor Version.
  • Fix: Netlify CI failed with build with cache. Could not find a declaration file for module "@rjsf/utils"

Comment on lines 3 to 4
"plugins": ["@typescript-eslint", "jsx-a11y", "react", "import", "@emotion"],
"rules": { "@emotion/jsx-import": "error" }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm guessing that carbon uses emotion?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Carbon doesn't use emotion, I copy most settings from @rjsf/chakra-ui. Going to remove code about emotion.

F extends FormContextType = any
>(props: FieldErrorProps<T, S, F>) {
const { errors = [], idSchema } = props;
console.log('FieldErrorTemplate errors', errors);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This probably wants to be removed

import { Button } from '@carbon/react';
import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';

export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add Documentation similar to what is in other themes?

import { useMemo } from 'react';
import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';

export default function ArrayFieldItemTemplate<
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add Documentation similar to what is in other themes?

packages/carbon/src/Widgets/Widgets.ts Show resolved Hide resolved
import { ReactNode } from 'react';
import { CarbonOptionsContextType, useCarbonOptions } from '../contexts';

function getMark(required: boolean, labelMark: CarbonOptionsContextType['labelMark']) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add Documentation?

import { ReactNode } from 'react';
import { NestDepth, useNestDepth } from '../contexts';

export function Layer({ children }: { children: ReactNode }) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add Documentation?

@@ -248,6 +248,28 @@ export default function Header({
return (
<div className='page-header'>
<h1>react-jsonschema-form</h1>
{/* TODO remove this before merge */}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes please!

@@ -23,7 +23,7 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
const [formData, setFormData] = useState<any>(samples.Simple.formData);
const [extraErrors, setExtraErrors] = useState<ErrorSchema | undefined>();
const [shareURL, setShareURL] = useState<string | null>(null);
const [theme, setTheme] = useState<string>('default');
const [theme, setTheme] = useState<string>('carbon');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why make this change?

Copy link
Author

@YuJianghao YuJianghao Oct 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For dev convenience. I'll add a TODO and remove before merge.

@YuJianghao
Copy link
Author

YuJianghao commented Oct 9, 2023

Maybe we need OneOfFieldTemplate and AnyOfFieldTemplate, it's better than override a MultiSchemaField in custom theme. Also a SchemaFieldTemplate.

### Installation

```bash
yarn add @carbon/react
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably need to add

Suggested change
yarn add @carbon/react
yarn add @carbon/react @carbon/styles

## Usage

```js
import Form from '@rjsf/carbon';
Copy link
Contributor

@nickgros nickgros Oct 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

However you decide to make custom styles work, you might need something like this

import Form from '@rjsf/carbon';
import '@rjsf/carbon/styles.css'

@heath-freenome
Copy link
Member

@YuJianghao How goes the work on this theme? You seemed to have stalled out. Do you need anything from us?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants