feat: carbon design system theme #3883
Conversation
packages/carbon/.eslintrc
Outdated
| "plugins": ["@typescript-eslint", "jsx-a11y", "react", "import", "@emotion"], | ||
| "rules": { "@emotion/jsx-import": "error" } |
There was a problem hiding this comment.
I'm guessing that carbon uses emotion?
There was a problem hiding this comment.
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); |
There was a problem hiding this comment.
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>({ |
There was a problem hiding this comment.
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< |
There was a problem hiding this comment.
Can you add Documentation similar to what is in other themes?
| import { ReactNode } from 'react'; | ||
| import { CarbonOptionsContextType, useCarbonOptions } from '../contexts'; | ||
|
|
||
| function getMark(required: boolean, labelMark: CarbonOptionsContextType['labelMark']) { |
There was a problem hiding this comment.
Can you add Documentation?
| import { ReactNode } from 'react'; | ||
| import { NestDepth, useNestDepth } from '../contexts'; | ||
|
|
||
| export function Layer({ children }: { children: ReactNode }) { |
There was a problem hiding this comment.
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 */} | |||
| @@ -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'); | |||
There was a problem hiding this comment.
For dev convenience. I'll add a TODO and remove before merge.
This reverts commit 8144e24.
|
Maybe we need |
| ### Installation | ||
|
|
||
| ```bash | ||
| yarn add @carbon/react |
There was a problem hiding this comment.
Probably need to add
| yarn add @carbon/react | |
| yarn add @carbon/react @carbon/styles |
| ## Usage | ||
|
|
||
| ```js | ||
| import Form from '@rjsf/carbon'; |
There was a problem hiding this comment.
However you decide to make custom styles work, you might need something like this
import Form from '@rjsf/carbon';
import '@rjsf/carbon/styles.css'
|
@YuJianghao How goes the work on this theme? You seemed to have stalled out. Do you need anything from us? |
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
npm run test:updateto update snapshots, if needed.Additional Information
I build a site to preview the theme: rjsf playground with carbon
Dev TODOs
formContextorglobalUISchema.Could not find a declaration file for module "@rjsf/utils"