From 1eafb225d24b45368266dfc4376b66c172f8227d Mon Sep 17 00:00:00 2001 From: PierreCrb <43297207+PierreCrb@users.noreply.github.com> Date: Thu, 3 Dec 2020 15:03:36 +0100 Subject: [PATCH] Upgrade to Chakra UI v1 (#91) * start migration to v1 * migration to ChakraUI v1 * upgrade version & start debugging * add theme * continue upgrade * fix all error for migration * fix bug & ts-ignore * fix menu icon * update theme * Multiple fixes, handle button icons * Fix types * Fix background grid * Fix tests * Fix clear popover color * Fix code panel * Fix tests * Upgrade circleci node version * Upgrade circle ci node version * Fix tests * Add preview for Icon and IconButton * Upgrade next.js * Upgrade to official chakra v1 release * Fix Header layout * Fix build, fix codesandbox packages * Fix z-index on popover, fix search bar * Fix icon preview and multiple inconsistencies * Fix tests * Fix default props and some previews * Fix tests * Fix searchbar clear button * Add v0 menu entry * Update templates * Fix searchbar zindex * Fix env variable name Co-authored-by: Hugo FOYART Co-authored-by: shinework --- .circleci/config.yml | 2 +- package.json | 12 +- scripts/ref.json | 8 +- scripts/types.json | 6254 ++++++++--------- src/components/CodePanel.tsx | 6 +- src/components/Header.tsx | 73 +- .../editor/ComponentPreview.test.tsx | 19 +- src/components/editor/ComponentPreview.tsx | 36 +- src/components/editor/Editor.tsx | 4 +- src/components/editor/PreviewContainer.tsx | 2 +- .../editor/WithChildrenPreviewContainer.tsx | 2 +- .../editor/previews/AccordionPreview.tsx | 10 +- .../editor/previews/AlertPreview.tsx | 2 +- .../editor/previews/AspectRatioBoxPreview.tsx | 12 +- .../editor/previews/AvatarPreview.tsx | 2 +- src/components/editor/previews/BoxPreview.tsx | 2 +- .../editor/previews/ButtonPreview.tsx | 40 + .../editor/previews/IconButtonPreview.tsx | 33 + .../editor/previews/IconPreview.tsx | 36 + .../editor/previews/InputGroupPreview.tsx | 2 +- .../editor/previews/InputLeftAddonPreview.tsx | 2 +- .../editor/previews/InputLeftElement.tsx | 2 +- .../previews/InputRightAddonPreview.tsx | 2 +- .../editor/previews/InputRightElement.tsx | 2 +- .../editor/previews/NumberInputPreview.tsx | 29 + .../editor/previews/SelectPreview.tsx | 30 + .../editor/previews/StackPreview.tsx | 2 +- .../errorBoundaries/AppErrorBoundary.tsx | 10 +- .../errorBoundaries/EditorErrorBoundary.tsx | 10 +- src/components/headerMenu/ExportMenuItem.tsx | 2 +- src/components/headerMenu/HeaderMenu.tsx | 54 +- src/components/headerMenu/ImportMenuItem.tsx | 2 +- .../inspector/AccordionContainer.tsx | 11 +- src/components/inspector/ActionButton.tsx | 19 +- src/components/inspector/Inspector.tsx | 117 +- .../inspector/controls/ChildrenControl.tsx | 2 +- .../inspector/controls/ColorsControl.tsx | 119 +- .../inspector/controls/FormControl.tsx | 2 +- .../inspector/controls/IconControl.tsx | 25 +- .../inspector/controls/NumberControl.tsx | 2 +- .../inspector/controls/SizeControl.tsx | 2 +- .../inspector/controls/SwitchControl.tsx | 2 +- .../inspector/controls/TextControl.tsx | 4 +- .../inspector/controls/VariantsControl.tsx | 2 +- .../elements-list/ElementListItem.tsx | 21 +- .../inspector/elements-list/ElementsList.tsx | 2 +- .../inspector/inputs/InputSuggestion.tsx | 2 +- .../inspector/panels/CustomPropsPanel.tsx | 7 +- src/components/inspector/panels/Panels.tsx | 2 +- .../inspector/panels/StylesPanel.tsx | 2 +- .../panels/components/AlertPanel.tsx | 2 +- .../panels/components/AvatarGroupPanel.tsx | 9 +- .../panels/components/AvatarPanel.tsx | 2 +- .../panels/components/BadgePanel.tsx | 4 +- .../panels/components/BreadcrumbPanel.tsx | 2 - .../panels/components/ButtonPanel.tsx | 4 +- .../panels/components/CheckboxPanel.tsx | 4 +- .../components/CircularProgressPanel.tsx | 17 +- .../panels/components/CloseButtonPanel.tsx | 2 +- .../inspector/panels/components/CodePanel.tsx | 2 +- .../panels/components/DividerPanel.tsx | 2 +- .../panels/components/HeadingPanel.tsx | 2 +- .../panels/components/IconButtonPanel.tsx | 2 +- .../inspector/panels/components/IconPanel.tsx | 14 +- .../panels/components/ImagePanel.tsx | 2 +- .../panels/components/InputPanel.tsx | 2 +- .../inspector/panels/components/ListPanel.tsx | 2 +- .../panels/components/ProgressPanel.tsx | 11 +- .../panels/components/RadioGroupPanel.tsx | 2 +- .../panels/components/RadioPanel.tsx | 2 +- .../panels/components/SelectPanel.tsx | 2 +- .../panels/components/SpinnerPanel.tsx | 2 +- .../panels/components/StackPanel.tsx | 3 +- .../panels/components/SwitchPanel.tsx | 4 +- .../inspector/panels/components/TabsPanel.tsx | 4 +- .../inspector/panels/components/TagPanel.tsx | 4 +- .../panels/components/TextareaPanel.tsx | 2 +- .../panels/styles/DimensionPanel.tsx | 2 +- .../inspector/panels/styles/DisplayPanel.tsx | 2 +- .../inspector/panels/styles/EffectsPanel.tsx | 14 +- .../inspector/panels/styles/FlexPanel.tsx | 2 +- .../inspector/panels/styles/PaddingPanel.tsx | 17 +- .../inspector/panels/styles/TextPanel.tsx | 26 +- src/components/sidebar/DragItem.tsx | 20 +- src/components/sidebar/Sidebar.tsx | 39 +- src/componentsList.ts | 11 +- src/core/models/components.test.ts | 10 +- src/core/models/components.ts | 7 +- src/core/models/composer/builder.ts | 2 +- src/core/models/composer/composer.ts | 4 +- src/iconsList.ts | 5 + src/pages/_app.tsx | 8 +- src/pages/index.tsx | 6 +- src/react-app-env.d.ts | 94 +- src/templates/airbnb.ts | 8 +- src/templates/onboarding.ts | 74 +- src/templates/producthunt.ts | 9 +- src/templates/secretchakra.ts | 60 +- src/theme/theme.ts | 10 - src/utils/code.test.ts | 61 +- src/utils/code.ts | 36 +- src/utils/codesandbox.ts | 35 +- src/utils/defaultProps.tsx | 378 +- src/utils/editor.ts | 8 +- yarn.lock | 3575 +++++----- 105 files changed, 6139 insertions(+), 5541 deletions(-) create mode 100644 src/components/editor/previews/ButtonPreview.tsx create mode 100644 src/components/editor/previews/IconButtonPreview.tsx create mode 100644 src/components/editor/previews/IconPreview.tsx create mode 100644 src/components/editor/previews/NumberInputPreview.tsx create mode 100644 src/components/editor/previews/SelectPreview.tsx create mode 100644 src/iconsList.ts delete mode 100644 src/theme/theme.ts diff --git a/.circleci/config.yml b/.circleci/config.yml index d5eba45c07..6c9c9cee6c 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -7,7 +7,7 @@ jobs: build: docker: # specify the version you desire here - - image: circleci/node:10.16.3 + - image: circleci/node:11.10.1 steps: - checkout diff --git a/package.json b/package.json index 660d77c171..6fbfe3e4b5 100644 --- a/package.json +++ b/package.json @@ -5,9 +5,11 @@ "dependencies": { "@bugsnag/js": "^6.5.2", "@bugsnag/plugin-react": "^6.5.0", - "@chakra-ui/core": "^0.5.2", - "@emotion/core": "^10.0.27", - "@emotion/styled": "^10.0.27", + "@chakra-ui/icons": "^1.0.1", + "@chakra-ui/react": "^1.0.1", + "@chakra-ui/theme": "^1.0.1", + "@emotion/react": "^11.1.1", + "@emotion/styled": "^11.0.0", "@mdx-js/react": "^1.5.5", "@reach/combobox": "^0.7.3", "@rehooks/local-storage": "^2.1.1", @@ -16,7 +18,7 @@ "codesandbox": "^2.1.11", "coloreact": "^0.3.1", "copy-to-clipboard": "^3.2.1", - "emotion-theming": "^10.0.27", + "framer-motion": "^2.9.4", "lodash": "^4.17.15", "lodash-es": "^4.17.15", "lz-string": "^1.4.4", @@ -37,7 +39,7 @@ "redux": "^4.0.5", "redux-persist": "^6.0.0", "redux-undo": "^1.0.0", - "typescript": "^3.7.5", + "typescript": "3.8", "webpack-bundle-analyzer": "^3.6.0" }, "scripts": { diff --git a/scripts/ref.json b/scripts/ref.json index 9a0a69f621..f59294dac8 100644 --- a/scripts/ref.json +++ b/scripts/ref.json @@ -37,7 +37,7 @@ "description": "The variant of the badge" }, { - "name": "variantColor", + "name": "colorScheme", "type": { "type": "string" }, "description": "The color scheme of the badge" } @@ -107,7 +107,7 @@ "description": "The variant of the button style to use." }, { - "name": "variantColor", + "name": "colorScheme", "type": { "type": "string" }, "description": "The color scheme of the button." } @@ -179,7 +179,7 @@ "description": "The value to be used in the checkbox input.\nThis is the value that will be returned on form submission." }, { - "name": "variantColor", + "name": "colorScheme", "type": { "type": "string" }, "description": "The color scheme of the checkbox." } @@ -265,7 +265,7 @@ "description": "The variant of the tag." }, { - "name": "variantColor", + "name": "colorScheme", "type": { "type": "string" }, "description": "The color scheme of the tag." } diff --git a/scripts/types.json b/scripts/types.json index 18419ca3c0..88354e8168 100644 --- a/scripts/types.json +++ b/scripts/types.json @@ -1,3180 +1,3076 @@ { - "id": 0, - "name": "undefined", - "kind": 0, - "flags": {}, - "originalName": "", - "children": [ - { - "id": 63, - "name": "IAvatar", - "kind": 256, - "kindString": "Interface", - "flags": { - "isExported": true - }, - "children": [ - { - "id": 67, - "name": "children", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The badge at the bottom right corner of the avatar." - }, - "sources": [ - { - "fileName": "Avatar/index.d.ts", - "line": 28, - "character": 10 - } - ], - "type": { - "type": "reference", - "name": "React.ReactNode" - } - }, - { - "id": 64, - "name": "name", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The name of the person in the avatar.", - "text": "- if `src` has loaded, the name will be used as the `alt` attribute of the `img`\n- If `src` is not loaded, the name will be used to create the initials\n" - }, - "sources": [ - { - "fileName": "Avatar/index.d.ts", - "line": 14, - "character": 6 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "string" - } - ] - } - }, - { - "id": 66, - "name": "showBorder", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "If `true`, the `Avatar` will show a border around it.", - "text": "Best for a group of avatars\n" - }, - "sources": [ - { - "fileName": "Avatar/index.d.ts", - "line": 24, - "character": 12 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "false" - }, - { - "type": "intrinsic", - "name": "true" - } - ] - } - }, - { - "id": 65, - "name": "size", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The size of the avatar." - }, - "sources": [ - { - "fileName": "Avatar/index.d.ts", - "line": 18, - "character": 6 - } - ], - "type": { - "type": "reference", - "id": 69, - "name": "Size" - } - }, - { - "id": 68, - "name": "src", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The image url of the `Avatar`" - }, - "sources": [ - { - "fileName": "Avatar/index.d.ts", - "line": 32, - "character": 5 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "string" - } - ] - } - } - ], - "groups": [ - { - "title": "Properties", - "kind": 1024, - "children": [ - 67, - 64, - 66, - 65, - 68 - ] - } - ], - "sources": [ - { - "fileName": "Avatar/index.d.ts", - "line": 7, - "character": 24 - } - ] - }, - { - "id": 78, - "name": "IAvatarGroup", - "kind": 256, - "kindString": "Interface", - "flags": { - "isExported": true - }, - "children": [ - { - "id": 80, - "name": "children", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true - }, - "comment": { - "shortText": "The children of the avatar group.", - "text": "Ideally should be `Avatar` and `MoreIndicator` components\n" - }, - "sources": [ - { - "fileName": "AvatarGroup/index.d.ts", - "line": 21, - "character": 10 - } - ], - "type": { - "type": "reference", - "name": "React.ReactNode" - } - }, - { - "id": 82, - "name": "max", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The maximum number of visible avatars" - }, - "sources": [ - { - "fileName": "AvatarGroup/index.d.ts", - "line": 29, - "character": 5 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "number" - } - ] - } - }, - { - "id": 79, - "name": "size", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The size of the avatar group." - }, - "sources": [ - { - "fileName": "AvatarGroup/index.d.ts", - "line": 15, - "character": 6 - } - ], - "type": { - "type": "indexedAccess", - "indexType": { - "type": "stringLiteral", - "value": "size" - }, - "objectType": { - "type": "reference", - "name": "IAvatar" - } - } - }, - { - "id": 81, - "name": "spacing", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The space between the avatars in the group." - }, - "sources": [ - { - "fileName": "AvatarGroup/index.d.ts", - "line": 25, - "character": 9 - } - ], - "type": { - "type": "indexedAccess", - "indexType": { - "type": "stringLiteral", - "value": "marginLeft" - }, - "objectType": { - "type": "reference", - "name": "BoxProps" - } - } - } - ], - "groups": [ - { - "title": "Properties", - "kind": 1024, - "children": [ - 80, - 82, - 79, - 81 - ] - } - ], - "sources": [ - { - "fileName": "AvatarGroup/index.d.ts", - "line": 11, - "character": 22 - } - ] - }, - { - "id": 1, - "name": "IBadge", - "kind": 256, - "kindString": "Interface", - "flags": { - "isExported": true - }, - "children": [ - { - "id": 3, - "name": "variant", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The variant of the badge" - }, - "sources": [ - { - "fileName": "Badge/index.d.ts", - "line": 15, - "character": 9 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "stringLiteral", - "value": "solid" - }, - { - "type": "stringLiteral", - "value": "subtle" - }, - { - "type": "stringLiteral", - "value": "outline" - } - ] - } - }, - { - "id": 2, - "name": "variantColor", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The color scheme of the badge", - "text": "🚨Note: This should be one of the color keys in the theme that has `100` - `900` color values (e.g.`green`, `red`).", - "tags": [ - { - "tag": "see", - "text": "http://chakra-ui.com/theme#colors\n" - } - ] - }, - "sources": [ - { - "fileName": "Badge/index.d.ts", - "line": 11, - "character": 14 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "string" - } - ] - } - } - ], - "groups": [ - { - "title": "Properties", - "kind": 1024, - "children": [ - 3, - 2 - ] - } - ], - "sources": [ - { - "fileName": "Badge/index.d.ts", - "line": 4, - "character": 23 - } - ] - }, - { - "id": 23, - "name": "IButton", - "kind": 256, - "kindString": "Interface", - "flags": { - "isExported": true - }, - "children": [ - { - "id": 33, - "name": "children", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true - }, - "comment": { - "shortText": "The content of the button." - }, - "sources": [ - { - "fileName": "Button/index.d.ts", - "line": 50, - "character": 10 - } - ], - "type": { - "type": "reference", - "name": "React.ReactNode" - } - }, - { - "id": 36, - "name": "iconSpacing", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The space between the button icon and label.\nUse the styled-system tokens or add custom values as a string" - }, - "sources": [ - { - "fileName": "Button/index.d.ts", - "line": 65, - "character": 13 - } - ], - "type": { - "type": "indexedAccess", - "indexType": { - "type": "stringLiteral", - "value": "margin" - }, - "objectType": { - "type": "reference", - "name": "PseudoBoxProps" - } - } - }, - { - "id": 28, - "name": "isActive", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "If `true`, the button will be styled in it's active state." - }, - "sources": [ - { - "fileName": "Button/index.d.ts", - "line": 29, - "character": 10 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "false" - }, - { - "type": "intrinsic", - "name": "true" - } - ] - } - }, - { - "id": 29, - "name": "isDisabled", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "If `true`, the button will be disabled." - }, - "sources": [ - { - "fileName": "Button/index.d.ts", - "line": 33, - "character": 12 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "false" - }, - { - "type": "intrinsic", - "name": "true" - } - ] - } - }, - { - "id": 31, - "name": "isFullWidth", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "If `true`, the button will take up the full width of its container." - }, - "sources": [ - { - "fileName": "Button/index.d.ts", - "line": 42, - "character": 13 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "false" - }, - { - "type": "intrinsic", - "name": "true" - } - ] - } - }, - { - "id": 25, - "name": "isLoading", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "If `true`, the button will show a spinner." - }, - "sources": [ - { - "fileName": "Button/index.d.ts", - "line": 14, - "character": 11 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "false" - }, - { - "type": "intrinsic", - "name": "true" - } - ] - } - }, - { - "id": 34, - "name": "leftIcon", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "If added, the button will show an icon before the button's label.\nUse the icon key in `theme.iconPath`" - }, - "sources": [ - { - "fileName": "Button/index.d.ts", - "line": 55, - "character": 10 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "reference", - "name": "Icons" - }, - { - "type": "reference", - "name": "React.ComponentType" - } - ] - } - }, - { - "id": 30, - "name": "loadingText", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The label to show in the button when `isLoading` is true\nIf no text is passed, it only shows the spinner" - }, - "sources": [ - { - "fileName": "Button/index.d.ts", - "line": 38, - "character": 13 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "string" - } - ] - } - }, - { - "id": 35, - "name": "rightIcon", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "If added, the button will show an icon after the button's label.\nUse the icon key in `theme.iconPath`" - }, - "sources": [ - { - "fileName": "Button/index.d.ts", - "line": 60, - "character": 11 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "reference", - "name": "Icons" - }, - { - "type": "reference", - "name": "React.ComponentType" - } - ] - } - }, - { - "id": 24, - "name": "size", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The size of the button" - }, - "sources": [ - { - "fileName": "Button/index.d.ts", - "line": 10, - "character": 6 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "stringLiteral", - "value": "xs" - }, - { - "type": "stringLiteral", - "value": "sm" - }, - { - "type": "stringLiteral", - "value": "md" - }, - { - "type": "stringLiteral", - "value": "lg" - } - ] - } - }, - { - "id": 32, - "name": "type", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The html button type to use." - }, - "sources": [ - { - "fileName": "Button/index.d.ts", - "line": 46, - "character": 6 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "stringLiteral", - "value": "button" - }, - { - "type": "stringLiteral", - "value": "reset" - }, - { - "type": "stringLiteral", - "value": "submit" - } - ] - } - }, - { - "id": 27, - "name": "variant", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The variant of the button style to use." - }, - "sources": [ - { - "fileName": "Button/index.d.ts", - "line": 25, - "character": 9 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "stringLiteral", - "value": "outline" - }, - { - "type": "stringLiteral", - "value": "ghost" - }, - { - "type": "stringLiteral", - "value": "unstyled" - }, - { - "type": "stringLiteral", - "value": "link" - }, - { - "type": "stringLiteral", - "value": "solid" - } - ] - } - }, - { - "id": 26, - "name": "variantColor", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The color scheme of the button.", - "text": "🚨Note: This should be one of the color keys in the theme that has `100` - `900` color values (e.g.`green`, `red`).", - "tags": [ - { - "tag": "see", - "text": "http://chakra-ui.com/theme#colors\n" - } - ] - }, - "sources": [ - { - "fileName": "Button/index.d.ts", - "line": 21, - "character": 14 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "string" - } - ] - } - } - ], - "groups": [ - { - "title": "Properties", - "kind": 1024, - "children": [ - 33, - 36, - 28, - 29, - 31, - 25, - 34, - 30, - 35, - 24, - 32, - 27, - 26 - ] - } - ], - "sources": [ - { - "fileName": "Button/index.d.ts", - "line": 6, - "character": 24 - } - ] - }, - { - "id": 6, - "name": "ICheckbox", - "kind": 256, - "kindString": "Interface", - "flags": { - "isExported": true - }, - "children": [ - { - "id": 20, - "name": "children", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The children is the label to be displayed to the right of the checkbox." - }, - "sources": [ - { - "fileName": "Checkbox/index.d.ts", - "line": 70, - "character": 10 - } - ], - "type": { - "type": "reference", - "name": "React.ReactNode" - } - }, - { - "id": 11, - "name": "defaultIsChecked", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "If `true`, the checkbox will be initially checked." - }, - "sources": [ - { - "fileName": "Checkbox/index.d.ts", - "line": 30, - "character": 18 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "false" - }, - { - "type": "intrinsic", - "name": "true" - } - ] - } - }, - { - "id": 7, - "name": "id", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "id assigned to input" - }, - "sources": [ - { - "fileName": "Checkbox/index.d.ts", - "line": 9, - "character": 4 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "string" - } - ] - } - }, - { - "id": 12, - "name": "isChecked", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "If `true`, the checkbox will be checked.\nYou'll need to pass `onChange` to update it's value (since it's now controlled)" - }, - "sources": [ - { - "fileName": "Checkbox/index.d.ts", - "line": 35, - "character": 11 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "false" - }, - { - "type": "intrinsic", - "name": "true" - } - ] - } - }, - { - "id": 15, - "name": "isDisabled", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "If `true`, the checkbox will be disabled" - }, - "sources": [ - { - "fileName": "Checkbox/index.d.ts", - "line": 47, - "character": 12 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "false" - }, - { - "type": "intrinsic", - "name": "true" - } - ] - } - }, - { - "id": 13, - "name": "isFullWidth", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "If `true`, the checkbox should take up the full width of the parent." - }, - "sources": [ - { - "fileName": "Checkbox/index.d.ts", - "line": 39, - "character": 13 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "false" - }, - { - "type": "intrinsic", - "name": "true" - } - ] - } - }, - { - "id": 19, - "name": "isIndeterminate", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "If `true`, the checkbox will be indeterminate.\nThis only affects the icon shown inside checkbox\nand does not modify the isChecked property." - }, - "sources": [ - { - "fileName": "Checkbox/index.d.ts", - "line": 66, - "character": 17 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "false" - }, - { - "type": "intrinsic", - "name": "true" - } - ] - } - }, - { - "id": 17, - "name": "isInvalid", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "If `true`, the checkbox is marked as invalid.\nChanges style of unchecked state." - }, - "sources": [ - { - "fileName": "Checkbox/index.d.ts", - "line": 56, - "character": 11 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "false" - }, - { - "type": "intrinsic", - "name": "true" - } - ] - } - }, - { - "id": 16, - "name": "isReadOnly", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "If `true`, the checkbox will be readonly" - }, - "sources": [ - { - "fileName": "Checkbox/index.d.ts", - "line": 51, - "character": 12 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "false" - }, - { - "type": "intrinsic", - "name": "true" - } - ] - } - }, - { - "id": 8, - "name": "name", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The name of the input field in a checkbox\n(Useful for form submission)." - }, - "sources": [ - { - "fileName": "Checkbox/index.d.ts", - "line": 14, - "character": 6 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "string" - } - ] - } - }, - { - "id": 18, - "name": "onChange", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The callback invoked when the checked state of the `Checkbox` changes.." - }, - "sources": [ - { - "fileName": "Checkbox/index.d.ts", - "line": 60, - "character": 10 - } - ], - "type": { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "name": "HTMLInputElement" - } - ], - "name": "React.ChangeEventHandler" - } - }, - { - "id": 14, - "name": "size", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The size (width and height) of the checkbox" - }, - "sources": [ - { - "fileName": "Checkbox/index.d.ts", - "line": 43, - "character": 6 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "stringLiteral", - "value": "sm" - }, - { - "type": "stringLiteral", - "value": "md" - }, - { - "type": "stringLiteral", - "value": "lg" - } - ] - } - }, - { - "id": 9, - "name": "value", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The value to be used in the checkbox input.\nThis is the value that will be returned on form submission." - }, - "sources": [ - { - "fileName": "Checkbox/index.d.ts", - "line": 19, - "character": 7 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "string" - }, - { - "type": "intrinsic", - "name": "number" - } - ] - } - }, - { - "id": 10, - "name": "variantColor", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The color scheme of the checkbox.", - "text": "🚨Note: This should be one of the color keys in the theme that has `100` - `900` color values (e.g.`green`, `red`).", - "tags": [ - { - "tag": "see", - "text": "http://chakra-ui.com/theme#colors\n" - } - ] - }, - "sources": [ - { - "fileName": "Checkbox/index.d.ts", - "line": 26, - "character": 14 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "string" - } - ] - } - } - ], - "groups": [ - { - "title": "Properties", - "kind": 1024, - "children": [ - 20, - 11, - 7, - 12, - 15, - 13, - 19, - 17, - 16, - 8, - 18, - 14, - 9, - 10 - ] - } - ], - "sources": [ - { - "fileName": "Checkbox/index.d.ts", - "line": 5, - "character": 26 - } - ] - }, - { - "id": 54, - "name": "IIcon", - "kind": 256, - "kindString": "Interface", - "flags": { - "isExported": true - }, - "children": [ - { - "id": 57, - "name": "color", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The color of the icon." - }, - "sources": [ - { - "fileName": "Icon/index.d.ts", - "line": 18, - "character": 7 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "string" - } - ] - } - }, - { - "id": 59, - "name": "focusable", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "If `false`, it means the icon is used within interactive\nelement and won't be focuable." - }, - "sources": [ - { - "fileName": "Icon/index.d.ts", - "line": 27, - "character": 11 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "false" - }, - { - "type": "intrinsic", - "name": "true" - } - ] - } - }, - { - "id": 56, - "name": "name", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The name of the icon." - }, - "sources": [ - { - "fileName": "Icon/index.d.ts", - "line": 14, - "character": 6 - } - ], - "type": { - "type": "reference", - "name": "Icons" - } - }, - { - "id": 58, - "name": "role", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The role of the icon. `presentation` or `img`" - }, - "sources": [ - { - "fileName": "Icon/index.d.ts", - "line": 22, - "character": 6 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "stringLiteral", - "value": "presentation" - }, - { - "type": "stringLiteral", - "value": "img" - } - ] - } - }, - { - "id": 55, - "name": "size", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The size of the icon." - }, - "sources": [ - { - "fileName": "Icon/index.d.ts", - "line": 10, - "character": 6 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "string" - } - ] - } - } - ], - "groups": [ - { - "title": "Properties", - "kind": 1024, - "children": [ - 57, - 59, - 56, - 58, - 55 - ] - } - ], - "sources": [ - { - "fileName": "Icon/index.d.ts", - "line": 6, - "character": 15 - } - ] - }, - { - "id": 39, - "name": "IImage", - "kind": 256, - "kindString": "Interface", - "flags": { - "isExported": true - }, - "children": [ - { - "id": 42, - "name": "alt", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The alt text that describes the image" - }, - "sources": [ - { - "fileName": "Image/index.d.ts", - "line": 17, - "character": 5 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "string" - } - ] - } - }, - { - "id": 41, - "name": "fallbackSrc", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "In event there was an error loading the `src`, specify a fallback\nIn most cases, this can be an avatar or image placeholder" - }, - "sources": [ - { - "fileName": "Image/index.d.ts", - "line": 13, - "character": 13 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "string" - } - ] - } - }, - { - "id": 50, - "name": "htmlHeight", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The native HTML `height` attribute to the passed to the `img`" - }, - "sources": [ - { - "fileName": "Image/index.d.ts", - "line": 33, - "character": 12 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "string" - }, - { - "type": "intrinsic", - "name": "number" - } - ] - } - }, - { - "id": 49, - "name": "htmlWidth", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The native HTML `width` attribute to the passed to the `img`" - }, - "sources": [ - { - "fileName": "Image/index.d.ts", - "line": 29, - "character": 11 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "string" - }, - { - "type": "intrinsic", - "name": "number" - } - ] - } - }, - { - "id": 51, - "name": "ignoreFallback", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "Opt out of the `fallbackSrc` logic and use the `Image` directly" - }, - "sources": [ - { - "fileName": "Image/index.d.ts", - "line": 37, - "character": 16 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "false" - }, - { - "type": "intrinsic", - "name": "true" - } - ] - } - }, - { - "id": 46, - "name": "onError", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "A callback for when there was an error loading the image `src`" - }, - "sources": [ - { - "fileName": "Image/index.d.ts", - "line": 25, - "character": 9 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "reflection", - "declaration": { - "id": 47, - "name": "__type", - "kind": 65536, - "kindString": "Type literal", - "flags": { - "isExported": true - }, - "signatures": [ - { - "id": 48, - "name": "__call", - "kind": 4096, - "kindString": "Call signature", - "flags": { - "isExported": true - }, - "type": { - "type": "intrinsic", - "name": "void" - } - } - ] - } - } - ] - } - }, - { - "id": 43, - "name": "onLoad", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "A callback for when the image `src` has been loaded" - }, - "sources": [ - { - "fileName": "Image/index.d.ts", - "line": 21, - "character": 8 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "reflection", - "declaration": { - "id": 44, - "name": "__type", - "kind": 65536, - "kindString": "Type literal", - "flags": { - "isExported": true - }, - "signatures": [ - { - "id": 45, - "name": "__call", - "kind": 4096, - "kindString": "Call signature", - "flags": { - "isExported": true - }, - "type": { - "type": "intrinsic", - "name": "void" - } - } - ] - } - } - ] - } - }, - { - "id": 40, - "name": "src", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The path to the image source" - }, - "sources": [ - { - "fileName": "Image/index.d.ts", - "line": 8, - "character": 5 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "intrinsic", - "name": "undefined" - }, - { - "type": "intrinsic", - "name": "string" - } - ] - } - } - ], - "groups": [ - { - "title": "Properties", - "kind": 1024, - "children": [ - 42, - 41, - 50, - 49, - 51, - 46, - 43, - 40 - ] - } - ], - "sources": [ - { - "fileName": "Image/index.d.ts", - "line": 4, - "character": 16 - } - ] - }, - { - "id": 75, - "name": "IMoreIndicator", - "kind": 256, - "kindString": "Interface", - "flags": { - "isExported": true - }, - "children": [ - { - "id": 77, - "name": "label", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true - }, - "sources": [ - { - "fileName": "AvatarGroup/index.d.ts", - "line": 8, - "character": 7 - } - ], - "type": { - "type": "reference", - "name": "React.ReactNode" - } - }, - { - "id": 76, - "name": "size", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "sources": [ - { - "fileName": "AvatarGroup/index.d.ts", - "line": 7, - "character": 6 - } - ], - "type": { - "type": "indexedAccess", - "indexType": { - "type": "stringLiteral", - "value": "size" - }, - "objectType": { - "type": "reference", - "name": "IAvatar" - } - } - } - ], - "groups": [ - { - "title": "Properties", - "kind": 1024, - "children": [ - 77, - 76 - ] - } - ], - "sources": [ - { - "fileName": "AvatarGroup/index.d.ts", - "line": 6, - "character": 24 - } - ] - }, - { - "id": 85, - "name": "ITag", - "kind": 256, - "kindString": "Interface", - "flags": { - "isExported": true - }, - "children": [ - { - "id": 87, - "name": "size", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The size of the tag." - }, - "sources": [ - { - "fileName": "Tag/index.d.ts", - "line": 16, - "character": 6 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "stringLiteral", - "value": "sm" - }, - { - "type": "stringLiteral", - "value": "md" - }, - { - "type": "stringLiteral", - "value": "lg" - } - ] - } - }, - { - "id": 86, - "name": "variant", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The variant of the tag." - }, - "sources": [ - { - "fileName": "Tag/index.d.ts", - "line": 12, - "character": 9 - } - ], - "type": { - "type": "indexedAccess", - "indexType": { - "type": "stringLiteral", - "value": "variant" - }, - "objectType": { - "type": "reference", - "name": "IBadge" - } - } - }, - { - "id": 88, - "name": "variantColor", - "kind": 1024, - "kindString": "Property", - "flags": { - "isExported": true, - "isOptional": true - }, - "comment": { - "shortText": "The color scheme of the tag." - }, - "sources": [ - { - "fileName": "Tag/index.d.ts", - "line": 20, - "character": 14 - } - ], - "type": { - "type": "indexedAccess", - "indexType": { - "type": "stringLiteral", - "value": "variantColor" - }, - "objectType": { - "type": "reference", - "name": "IBadge" - } - } - } - ], - "groups": [ - { - "title": "Properties", - "kind": 1024, - "children": [ - 87, - 86, - 88 - ] - } - ], - "sources": [ - { - "fileName": "Tag/index.d.ts", - "line": 8, - "character": 21 - } - ] - }, - { - "id": 83, - "name": "AvatarGroupProps", - "kind": 4194304, - "kindString": "Type alias", - "flags": { - "isExported": true - }, - "sources": [ - { - "fileName": "AvatarGroup/index.d.ts", - "line": 32, - "character": 28 - } - ], - "type": { - "type": "intersection", - "types": [ - { - "type": "reference", - "id": 78, - "name": "IAvatarGroup" - }, - { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "name": "BoxProps" - }, - { - "type": "stringLiteral", - "value": "size" - } - ], - "name": "Omit" - } - ] - } - }, - { - "id": 70, - "name": "AvatarNameProps", - "kind": 4194304, - "kindString": "Type alias", - "flags": { - "isExported": true - }, - "sources": [ - { - "fileName": "Avatar/index.d.ts", - "line": 35, - "character": 27 - } - ], - "type": { - "type": "intersection", - "types": [ - { - "type": "indexedAccess", - "indexType": { - "type": "stringLiteral", - "value": "name" - }, - "objectType": { - "type": "reference", - "name": "IAvatar" - } - }, - { - "type": "reference", - "name": "BoxProps" - } - ] - } - }, - { - "id": 73, - "name": "AvatarProps", - "kind": 4194304, - "kindString": "Type alias", - "flags": { - "isExported": true - }, - "sources": [ - { - "fileName": "Avatar/index.d.ts", - "line": 40, - "character": 23 - } - ], - "type": { - "type": "intersection", - "types": [ - { - "type": "reference", - "id": 63, - "name": "IAvatar" - }, - { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "name": "BoxProps" - }, - { - "type": "stringLiteral", - "value": "size" - } - ], - "name": "Omit" - } - ] - } - }, - { - "id": 4, - "name": "BadgeProps", - "kind": 4194304, - "kindString": "Type alias", - "flags": { - "isExported": true - }, - "sources": [ - { - "fileName": "Badge/index.d.ts", - "line": 18, - "character": 22 - } - ], - "type": { - "type": "intersection", - "types": [ - { - "type": "reference", - "id": 1, - "name": "IBadge" - }, - { - "type": "reference", - "name": "BoxProps" - } - ] - } - }, - { - "id": 37, - "name": "ButtonProps", - "kind": 4194304, - "kindString": "Type alias", - "flags": { - "isExported": true - }, - "sources": [ - { - "fileName": "Button/index.d.ts", - "line": 68, - "character": 23 - } - ], - "type": { - "type": "intersection", - "types": [ - { - "type": "reference", - "id": 23, - "name": "IButton" - }, - { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "name": "PseudoBoxProps" - }, - { - "type": "stringLiteral", - "value": "size" - } - ], - "name": "Omit" - } - ] - } - }, - { - "id": 21, - "name": "CheckboxProps", - "kind": 4194304, - "kindString": "Type alias", - "flags": { - "isExported": true - }, - "sources": [ - { - "fileName": "Checkbox/index.d.ts", - "line": 73, - "character": 25 - } - ], - "type": { - "type": "intersection", - "types": [ - { - "type": "reference", - "id": 6, - "name": "ICheckbox" - }, - { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "name": "HTMLInputElement" - } - ], - "name": "RefAttributes" - }, - { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "name": "BoxProps" - }, - { - "type": "union", - "types": [ - { - "type": "stringLiteral", - "value": "onChange" - }, - { - "type": "stringLiteral", - "value": "defaultChecked" - } - ] - } - ], - "name": "Omit" - } - ] - } - }, - { - "id": 60, - "name": "IconProps", - "kind": 4194304, - "kindString": "Type alias", - "flags": { - "isExported": true - }, - "sources": [ - { - "fileName": "Icon/index.d.ts", - "line": 30, - "character": 21 - } - ], - "type": { - "type": "intersection", - "types": [ - { - "type": "reference", - "id": 54, - "name": "IIcon" - }, - { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "name": "BoxProps" - }, - { - "type": "stringLiteral", - "value": "size" - } - ], - "name": "Omit" - } - ] - } - }, - { - "id": 52, - "name": "ImageProps", - "kind": 4194304, - "kindString": "Type alias", - "flags": { - "isExported": true - }, - "sources": [ - { - "fileName": "Image/index.d.ts", - "line": 40, - "character": 22 - } - ], - "type": { - "type": "intersection", - "types": [ - { - "type": "reference", - "id": 39, - "name": "IImage" - }, - { - "type": "reference", - "name": "BoxProps" - } - ] - } - }, - { - "id": 69, - "name": "Size", - "kind": 4194304, - "kindString": "Type alias", - "flags": { - "isExported": true - }, - "sources": [ - { - "fileName": "Avatar/index.d.ts", - "line": 5, - "character": 9 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "stringLiteral", - "value": "2xs" - }, - { - "type": "stringLiteral", - "value": "xs" - }, - { - "type": "stringLiteral", - "value": "sm" - }, - { - "type": "stringLiteral", - "value": "md" - }, - { - "type": "stringLiteral", - "value": "lg" - }, - { - "type": "stringLiteral", - "value": "xl" - }, - { - "type": "stringLiteral", - "value": "2xl" - } - ] - } - }, - { - "id": 93, - "name": "TagIconProps", - "kind": 4194304, - "kindString": "Type alias", - "flags": { - "isExported": true - }, - "sources": [ - { - "fileName": "Tag/index.d.ts", - "line": 29, - "character": 17 - } - ], - "type": { - "type": "intersection", - "types": [ - { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "id": 60, - "name": "IconProps" - }, - { - "type": "stringLiteral", - "value": "name" - } - ], - "name": "Omit" - }, - { - "type": "reflection", - "declaration": { - "id": 94, - "name": "__type", - "kind": 65536, - "kindString": "Type literal", - "flags": { - "isExported": true - }, - "children": [ - { - "id": 95, - "name": "icon", - "kind": 32, - "kindString": "Variable", - "flags": { - "isExported": true - }, - "sources": [ - { - "fileName": "Tag/index.d.ts", - "line": 30, - "character": 6 - } - ], - "type": { - "type": "union", - "types": [ - { - "type": "indexedAccess", - "indexType": { - "type": "stringLiteral", - "value": "name" - }, - "objectType": { - "type": "reference", - "name": "IconProps" - } - }, - { - "type": "reference", - "name": "React.ComponentType" - } - ] - } - } - ], - "groups": [ - { - "title": "Variables", - "kind": 32, - "children": [ - 95 - ] - } - ], - "sources": [ - { - "fileName": "Tag/index.d.ts", - "line": 29, - "character": 45 - } - ] - } - } - ] - } - }, - { - "id": 89, - "name": "TagProps", - "kind": 4194304, - "kindString": "Type alias", - "flags": { - "isExported": true - }, - "sources": [ - { - "fileName": "Tag/index.d.ts", - "line": 22, - "character": 20 - } - ], - "type": { - "type": "intersection", - "types": [ - { - "type": "reference", - "id": 85, - "name": "ITag" - }, - { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "name": "PseudoBoxProps" - }, - { - "type": "stringLiteral", - "value": "size" - } - ], - "name": "Omit" - } - ] - } - }, - { - "id": 74, - "name": "Avatar", - "kind": 32, - "kindString": "Variable", - "flags": { - "isExported": true, - "isConst": true - }, - "comment": { - "shortText": "The Avatar component is used to represent user, and displays the profile\npicture, initials or fallback icon." - }, - "sources": [ - { - "fileName": "Avatar/index.d.ts", - "line": 45, - "character": 20 - } - ], - "type": { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "id": 73, - "name": "AvatarProps" - } - ], - "name": "React.FC" - } - }, - { - "id": 72, - "name": "AvatarBadge", - "kind": 32, - "kindString": "Variable", - "flags": { - "isExported": true, - "isConst": true - }, - "sources": [ - { - "fileName": "Avatar/index.d.ts", - "line": 38, - "character": 24 - } - ], - "type": { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "name": "BoxProps" - } - ], - "name": "React.FC" - } - }, - { - "id": 84, - "name": "AvatarGroup", - "kind": 32, - "kindString": "Variable", - "flags": { - "isExported": true, - "isConst": true - }, - "comment": { - "shortText": "AvatarGroup is a wrapper to render a collection of evenly spaced avatars." - }, - "sources": [ - { - "fileName": "AvatarGroup/index.d.ts", - "line": 36, - "character": 25 - } - ], - "type": { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "id": 83, - "name": "AvatarGroupProps" - } - ], - "name": "React.FC" - } - }, - { - "id": 71, - "name": "AvatarName", - "kind": 32, - "kindString": "Variable", - "flags": { - "isExported": true, - "isConst": true - }, - "sources": [ - { - "fileName": "Avatar/index.d.ts", - "line": 36, - "character": 23 - } - ], - "type": { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "id": 70, - "name": "AvatarNameProps" - } - ], - "name": "React.FC" - } - }, - { - "id": 5, - "name": "Badge", - "kind": 32, - "kindString": "Variable", - "flags": { - "isExported": true, - "isConst": true - }, - "comment": { - "shortText": "The Badge component is used for state, general text, and number labels." - }, - "sources": [ - { - "fileName": "Badge/index.d.ts", - "line": 23, - "character": 19 - } - ], - "type": { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "id": 4, - "name": "BadgeProps" - } - ], - "name": "React.FC" - } - }, - { - "id": 38, - "name": "Button", - "kind": 32, - "kindString": "Variable", - "flags": { - "isExported": true, - "isConst": true - }, - "sources": [ - { - "fileName": "Button/index.d.ts", - "line": 70, - "character": 20 - } - ], - "type": { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "id": 37, - "name": "ButtonProps" - } - ], - "name": "React.FC" - } - }, - { - "id": 22, - "name": "Checkbox", - "kind": 32, - "kindString": "Variable", - "flags": { - "isExported": true, - "isConst": true - }, - "sources": [ - { - "fileName": "Checkbox/index.d.ts", - "line": 77, - "character": 22 - } - ], - "type": { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "id": 21, - "name": "CheckboxProps" - } - ], - "name": "React.FC" - } - }, - { - "id": 61, - "name": "Icon", - "kind": 32, - "kindString": "Variable", - "flags": { - "isExported": true, - "isConst": true - }, - "sources": [ - { - "fileName": "Icon/index.d.ts", - "line": 32, - "character": 18 - } - ], - "type": { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "id": 60, - "name": "IconProps" - } - ], - "name": "React.FC" - } - }, - { - "id": 53, - "name": "Image", - "kind": 32, - "kindString": "Variable", - "flags": { - "isExported": true, - "isConst": true - }, - "sources": [ - { - "fileName": "Image/index.d.ts", - "line": 42, - "character": 19 - } - ], - "type": { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "id": 52, - "name": "ImageProps" - } - ], - "name": "React.FC" - } - }, - { - "id": 90, - "name": "Tag", - "kind": 32, - "kindString": "Variable", - "flags": { - "isExported": true, - "isConst": true - }, - "sources": [ - { - "fileName": "Tag/index.d.ts", - "line": 23, - "character": 17 - } - ], - "type": { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "id": 89, - "name": "TagProps" - } - ], - "name": "React.FC" - } - }, - { - "id": 92, - "name": "TagCloseButton", - "kind": 32, - "kindString": "Variable", - "flags": { - "isExported": true, - "isConst": true - }, - "sources": [ - { - "fileName": "Tag/index.d.ts", - "line": 27, - "character": 27 - } - ], - "type": { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "name": "PseudoBoxProps" - } - ], - "name": "React.FC" - } - }, - { - "id": 96, - "name": "TagIcon", - "kind": 32, - "kindString": "Variable", - "flags": { - "isExported": true, - "isConst": true - }, - "sources": [ - { - "fileName": "Tag/index.d.ts", - "line": 32, - "character": 20 - } - ], - "type": { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "id": 93, - "name": "TagIconProps" - } - ], - "name": "React.FC" - } - }, - { - "id": 91, - "name": "TagLabel", - "kind": 32, - "kindString": "Variable", - "flags": { - "isExported": true, - "isConst": true - }, - "sources": [ - { - "fileName": "Tag/index.d.ts", - "line": 26, - "character": 21 - } - ], - "type": { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "name": "BoxProps" - } - ], - "name": "React.FC" - } - }, - { - "id": 62, - "name": "Text", - "kind": 32, - "kindString": "Variable", - "flags": { - "isExported": true, - "isConst": true - }, - "sources": [ - { - "fileName": "Text/index.d.ts", - "line": 4, - "character": 18 - } - ], - "type": { - "type": "reference", - "typeArguments": [ - { - "type": "reference", - "name": "BoxProps" - } - ], - "name": "React.FC" - } - } - ], - "groups": [ - { - "title": "Interfaces", - "kind": 256, - "children": [ - 63, - 78, - 1, - 23, - 6, - 54, - 39, - 75, - 85 - ] - }, - { - "title": "Type aliases", - "kind": 4194304, - "children": [ - 83, - 70, - 73, - 4, - 37, - 21, - 60, - 52, - 69, - 93, - 89 - ] - }, - { - "title": "Variables", - "kind": 32, - "children": [ - 74, - 72, - 84, - 71, - 5, - 38, - 22, - 61, - 53, - 90, - 92, - 96, - 91, - 62 - ] - } - ] -} \ No newline at end of file + "id": 0, + "name": "undefined", + "kind": 0, + "flags": {}, + "originalName": "", + "children": [ + { + "id": 63, + "name": "IAvatar", + "kind": 256, + "kindString": "Interface", + "flags": { + "isExported": true + }, + "children": [ + { + "id": 67, + "name": "children", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The badge at the bottom right corner of the avatar." + }, + "sources": [ + { + "fileName": "Avatar/index.d.ts", + "line": 28, + "character": 10 + } + ], + "type": { + "type": "reference", + "name": "React.ReactNode" + } + }, + { + "id": 64, + "name": "name", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The name of the person in the avatar.", + "text": "- if `src` has loaded, the name will be used as the `alt` attribute of the `img`\n- If `src` is not loaded, the name will be used to create the initials\n" + }, + "sources": [ + { + "fileName": "Avatar/index.d.ts", + "line": 14, + "character": 6 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "string" + } + ] + } + }, + { + "id": 66, + "name": "showBorder", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "If `true`, the `Avatar` will show a border around it.", + "text": "Best for a group of avatars\n" + }, + "sources": [ + { + "fileName": "Avatar/index.d.ts", + "line": 24, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "false" + }, + { + "type": "intrinsic", + "name": "true" + } + ] + } + }, + { + "id": 65, + "name": "size", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The size of the avatar." + }, + "sources": [ + { + "fileName": "Avatar/index.d.ts", + "line": 18, + "character": 6 + } + ], + "type": { + "type": "reference", + "id": 69, + "name": "Size" + } + }, + { + "id": 68, + "name": "src", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The image url of the `Avatar`" + }, + "sources": [ + { + "fileName": "Avatar/index.d.ts", + "line": 32, + "character": 5 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "string" + } + ] + } + } + ], + "groups": [ + { + "title": "Properties", + "kind": 1024, + "children": [67, 64, 66, 65, 68] + } + ], + "sources": [ + { + "fileName": "Avatar/index.d.ts", + "line": 7, + "character": 24 + } + ] + }, + { + "id": 78, + "name": "IAvatarGroup", + "kind": 256, + "kindString": "Interface", + "flags": { + "isExported": true + }, + "children": [ + { + "id": 80, + "name": "children", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true + }, + "comment": { + "shortText": "The children of the avatar group.", + "text": "Ideally should be `Avatar` and `MoreIndicator` components\n" + }, + "sources": [ + { + "fileName": "AvatarGroup/index.d.ts", + "line": 21, + "character": 10 + } + ], + "type": { + "type": "reference", + "name": "React.ReactNode" + } + }, + { + "id": 82, + "name": "max", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The maximum number of visible avatars" + }, + "sources": [ + { + "fileName": "AvatarGroup/index.d.ts", + "line": 29, + "character": 5 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "number" + } + ] + } + }, + { + "id": 79, + "name": "size", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The size of the avatar group." + }, + "sources": [ + { + "fileName": "AvatarGroup/index.d.ts", + "line": 15, + "character": 6 + } + ], + "type": { + "type": "indexedAccess", + "indexType": { + "type": "stringLiteral", + "value": "size" + }, + "objectType": { + "type": "reference", + "name": "IAvatar" + } + } + }, + { + "id": 81, + "name": "spacing", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The space between the avatars in the group." + }, + "sources": [ + { + "fileName": "AvatarGroup/index.d.ts", + "line": 25, + "character": 9 + } + ], + "type": { + "type": "indexedAccess", + "indexType": { + "type": "stringLiteral", + "value": "marginLeft" + }, + "objectType": { + "type": "reference", + "name": "BoxProps" + } + } + } + ], + "groups": [ + { + "title": "Properties", + "kind": 1024, + "children": [80, 82, 79, 81] + } + ], + "sources": [ + { + "fileName": "AvatarGroup/index.d.ts", + "line": 11, + "character": 22 + } + ] + }, + { + "id": 1, + "name": "IBadge", + "kind": 256, + "kindString": "Interface", + "flags": { + "isExported": true + }, + "children": [ + { + "id": 3, + "name": "variant", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The variant of the badge" + }, + "sources": [ + { + "fileName": "Badge/index.d.ts", + "line": 15, + "character": 9 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "stringLiteral", + "value": "solid" + }, + { + "type": "stringLiteral", + "value": "subtle" + }, + { + "type": "stringLiteral", + "value": "outline" + } + ] + } + }, + { + "id": 2, + "name": "colorScheme", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The color scheme of the badge", + "text": "🚨Note: This should be one of the color keys in the theme that has `100` - `900` color values (e.g.`green`, `red`).", + "tags": [ + { + "tag": "see", + "text": "http://chakra-ui.com/theme#colors\n" + } + ] + }, + "sources": [ + { + "fileName": "Badge/index.d.ts", + "line": 11, + "character": 14 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "string" + } + ] + } + } + ], + "groups": [ + { + "title": "Properties", + "kind": 1024, + "children": [3, 2] + } + ], + "sources": [ + { + "fileName": "Badge/index.d.ts", + "line": 4, + "character": 23 + } + ] + }, + { + "id": 23, + "name": "IButton", + "kind": 256, + "kindString": "Interface", + "flags": { + "isExported": true + }, + "children": [ + { + "id": 33, + "name": "children", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true + }, + "comment": { + "shortText": "The content of the button." + }, + "sources": [ + { + "fileName": "Button/index.d.ts", + "line": 50, + "character": 10 + } + ], + "type": { + "type": "reference", + "name": "React.ReactNode" + } + }, + { + "id": 36, + "name": "iconSpacing", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The space between the button icon and label.\nUse the styled-system tokens or add custom values as a string" + }, + "sources": [ + { + "fileName": "Button/index.d.ts", + "line": 65, + "character": 13 + } + ], + "type": { + "type": "indexedAccess", + "indexType": { + "type": "stringLiteral", + "value": "margin" + }, + "objectType": { + "type": "reference", + "name": "PseudoBoxProps" + } + } + }, + { + "id": 28, + "name": "isActive", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "If `true`, the button will be styled in it's active state." + }, + "sources": [ + { + "fileName": "Button/index.d.ts", + "line": 29, + "character": 10 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "false" + }, + { + "type": "intrinsic", + "name": "true" + } + ] + } + }, + { + "id": 29, + "name": "isDisabled", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "If `true`, the button will be disabled." + }, + "sources": [ + { + "fileName": "Button/index.d.ts", + "line": 33, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "false" + }, + { + "type": "intrinsic", + "name": "true" + } + ] + } + }, + { + "id": 31, + "name": "isFullWidth", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "If `true`, the button will take up the full width of its container." + }, + "sources": [ + { + "fileName": "Button/index.d.ts", + "line": 42, + "character": 13 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "false" + }, + { + "type": "intrinsic", + "name": "true" + } + ] + } + }, + { + "id": 25, + "name": "isLoading", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "If `true`, the button will show a spinner." + }, + "sources": [ + { + "fileName": "Button/index.d.ts", + "line": 14, + "character": 11 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "false" + }, + { + "type": "intrinsic", + "name": "true" + } + ] + } + }, + { + "id": 34, + "name": "leftIcon", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "If added, the button will show an icon before the button's label.\nUse the icon key in `theme.iconPath`" + }, + "sources": [ + { + "fileName": "Button/index.d.ts", + "line": 55, + "character": 10 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "name": "Icons" + }, + { + "type": "reference", + "name": "React.ComponentType" + } + ] + } + }, + { + "id": 30, + "name": "loadingText", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The label to show in the button when `isLoading` is true\nIf no text is passed, it only shows the spinner" + }, + "sources": [ + { + "fileName": "Button/index.d.ts", + "line": 38, + "character": 13 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "string" + } + ] + } + }, + { + "id": 35, + "name": "rightIcon", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "If added, the button will show an icon after the button's label.\nUse the icon key in `theme.iconPath`" + }, + "sources": [ + { + "fileName": "Button/index.d.ts", + "line": 60, + "character": 11 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "reference", + "name": "Icons" + }, + { + "type": "reference", + "name": "React.ComponentType" + } + ] + } + }, + { + "id": 24, + "name": "size", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The size of the button" + }, + "sources": [ + { + "fileName": "Button/index.d.ts", + "line": 10, + "character": 6 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "stringLiteral", + "value": "xs" + }, + { + "type": "stringLiteral", + "value": "sm" + }, + { + "type": "stringLiteral", + "value": "md" + }, + { + "type": "stringLiteral", + "value": "lg" + } + ] + } + }, + { + "id": 32, + "name": "type", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The html button type to use." + }, + "sources": [ + { + "fileName": "Button/index.d.ts", + "line": 46, + "character": 6 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "stringLiteral", + "value": "button" + }, + { + "type": "stringLiteral", + "value": "reset" + }, + { + "type": "stringLiteral", + "value": "submit" + } + ] + } + }, + { + "id": 27, + "name": "variant", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The variant of the button style to use." + }, + "sources": [ + { + "fileName": "Button/index.d.ts", + "line": 25, + "character": 9 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "stringLiteral", + "value": "outline" + }, + { + "type": "stringLiteral", + "value": "ghost" + }, + { + "type": "stringLiteral", + "value": "unstyled" + }, + { + "type": "stringLiteral", + "value": "link" + }, + { + "type": "stringLiteral", + "value": "solid" + } + ] + } + }, + { + "id": 26, + "name": "colorScheme", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The color scheme of the button.", + "text": "🚨Note: This should be one of the color keys in the theme that has `100` - `900` color values (e.g.`green`, `red`).", + "tags": [ + { + "tag": "see", + "text": "http://chakra-ui.com/theme#colors\n" + } + ] + }, + "sources": [ + { + "fileName": "Button/index.d.ts", + "line": 21, + "character": 14 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "string" + } + ] + } + } + ], + "groups": [ + { + "title": "Properties", + "kind": 1024, + "children": [33, 36, 28, 29, 31, 25, 34, 30, 35, 24, 32, 27, 26] + } + ], + "sources": [ + { + "fileName": "Button/index.d.ts", + "line": 6, + "character": 24 + } + ] + }, + { + "id": 6, + "name": "ICheckbox", + "kind": 256, + "kindString": "Interface", + "flags": { + "isExported": true + }, + "children": [ + { + "id": 20, + "name": "children", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The children is the label to be displayed to the right of the checkbox." + }, + "sources": [ + { + "fileName": "Checkbox/index.d.ts", + "line": 70, + "character": 10 + } + ], + "type": { + "type": "reference", + "name": "React.ReactNode" + } + }, + { + "id": 11, + "name": "defaultIsChecked", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "If `true`, the checkbox will be initially checked." + }, + "sources": [ + { + "fileName": "Checkbox/index.d.ts", + "line": 30, + "character": 18 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "false" + }, + { + "type": "intrinsic", + "name": "true" + } + ] + } + }, + { + "id": 7, + "name": "id", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "id assigned to input" + }, + "sources": [ + { + "fileName": "Checkbox/index.d.ts", + "line": 9, + "character": 4 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "string" + } + ] + } + }, + { + "id": 12, + "name": "isChecked", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "If `true`, the checkbox will be checked.\nYou'll need to pass `onChange` to update it's value (since it's now controlled)" + }, + "sources": [ + { + "fileName": "Checkbox/index.d.ts", + "line": 35, + "character": 11 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "false" + }, + { + "type": "intrinsic", + "name": "true" + } + ] + } + }, + { + "id": 15, + "name": "isDisabled", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "If `true`, the checkbox will be disabled" + }, + "sources": [ + { + "fileName": "Checkbox/index.d.ts", + "line": 47, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "false" + }, + { + "type": "intrinsic", + "name": "true" + } + ] + } + }, + { + "id": 13, + "name": "isFullWidth", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "If `true`, the checkbox should take up the full width of the parent." + }, + "sources": [ + { + "fileName": "Checkbox/index.d.ts", + "line": 39, + "character": 13 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "false" + }, + { + "type": "intrinsic", + "name": "true" + } + ] + } + }, + { + "id": 19, + "name": "isIndeterminate", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "If `true`, the checkbox will be indeterminate.\nThis only affects the icon shown inside checkbox\nand does not modify the isChecked property." + }, + "sources": [ + { + "fileName": "Checkbox/index.d.ts", + "line": 66, + "character": 17 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "false" + }, + { + "type": "intrinsic", + "name": "true" + } + ] + } + }, + { + "id": 17, + "name": "isInvalid", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "If `true`, the checkbox is marked as invalid.\nChanges style of unchecked state." + }, + "sources": [ + { + "fileName": "Checkbox/index.d.ts", + "line": 56, + "character": 11 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "false" + }, + { + "type": "intrinsic", + "name": "true" + } + ] + } + }, + { + "id": 16, + "name": "isReadOnly", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "If `true`, the checkbox will be readonly" + }, + "sources": [ + { + "fileName": "Checkbox/index.d.ts", + "line": 51, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "false" + }, + { + "type": "intrinsic", + "name": "true" + } + ] + } + }, + { + "id": 8, + "name": "name", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The name of the input field in a checkbox\n(Useful for form submission)." + }, + "sources": [ + { + "fileName": "Checkbox/index.d.ts", + "line": 14, + "character": 6 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "string" + } + ] + } + }, + { + "id": 18, + "name": "onChange", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The callback invoked when the checked state of the `Checkbox` changes.." + }, + "sources": [ + { + "fileName": "Checkbox/index.d.ts", + "line": 60, + "character": 10 + } + ], + "type": { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "name": "HTMLInputElement" + } + ], + "name": "React.ChangeEventHandler" + } + }, + { + "id": 14, + "name": "size", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The size (width and height) of the checkbox" + }, + "sources": [ + { + "fileName": "Checkbox/index.d.ts", + "line": 43, + "character": 6 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "stringLiteral", + "value": "sm" + }, + { + "type": "stringLiteral", + "value": "md" + }, + { + "type": "stringLiteral", + "value": "lg" + } + ] + } + }, + { + "id": 9, + "name": "value", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The value to be used in the checkbox input.\nThis is the value that will be returned on form submission." + }, + "sources": [ + { + "fileName": "Checkbox/index.d.ts", + "line": 19, + "character": 7 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "string" + }, + { + "type": "intrinsic", + "name": "number" + } + ] + } + }, + { + "id": 10, + "name": "colorScheme", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The color scheme of the checkbox.", + "text": "🚨Note: This should be one of the color keys in the theme that has `100` - `900` color values (e.g.`green`, `red`).", + "tags": [ + { + "tag": "see", + "text": "http://chakra-ui.com/theme#colors\n" + } + ] + }, + "sources": [ + { + "fileName": "Checkbox/index.d.ts", + "line": 26, + "character": 14 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "string" + } + ] + } + } + ], + "groups": [ + { + "title": "Properties", + "kind": 1024, + "children": [20, 11, 7, 12, 15, 13, 19, 17, 16, 8, 18, 14, 9, 10] + } + ], + "sources": [ + { + "fileName": "Checkbox/index.d.ts", + "line": 5, + "character": 26 + } + ] + }, + { + "id": 54, + "name": "IIcon", + "kind": 256, + "kindString": "Interface", + "flags": { + "isExported": true + }, + "children": [ + { + "id": 57, + "name": "color", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The color of the icon." + }, + "sources": [ + { + "fileName": "Icon/index.d.ts", + "line": 18, + "character": 7 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "string" + } + ] + } + }, + { + "id": 59, + "name": "focusable", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "If `false`, it means the icon is used within interactive\nelement and won't be focuable." + }, + "sources": [ + { + "fileName": "Icon/index.d.ts", + "line": 27, + "character": 11 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "false" + }, + { + "type": "intrinsic", + "name": "true" + } + ] + } + }, + { + "id": 56, + "name": "name", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The name of the icon." + }, + "sources": [ + { + "fileName": "Icon/index.d.ts", + "line": 14, + "character": 6 + } + ], + "type": { + "type": "reference", + "name": "Icons" + } + }, + { + "id": 58, + "name": "role", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The role of the icon. `presentation` or `img`" + }, + "sources": [ + { + "fileName": "Icon/index.d.ts", + "line": 22, + "character": 6 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "stringLiteral", + "value": "presentation" + }, + { + "type": "stringLiteral", + "value": "img" + } + ] + } + }, + { + "id": 55, + "name": "size", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The size of the icon." + }, + "sources": [ + { + "fileName": "Icon/index.d.ts", + "line": 10, + "character": 6 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "string" + } + ] + } + } + ], + "groups": [ + { + "title": "Properties", + "kind": 1024, + "children": [57, 59, 56, 58, 55] + } + ], + "sources": [ + { + "fileName": "Icon/index.d.ts", + "line": 6, + "character": 15 + } + ] + }, + { + "id": 39, + "name": "IImage", + "kind": 256, + "kindString": "Interface", + "flags": { + "isExported": true + }, + "children": [ + { + "id": 42, + "name": "alt", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The alt text that describes the image" + }, + "sources": [ + { + "fileName": "Image/index.d.ts", + "line": 17, + "character": 5 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "string" + } + ] + } + }, + { + "id": 41, + "name": "fallbackSrc", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "In event there was an error loading the `src`, specify a fallback\nIn most cases, this can be an avatar or image placeholder" + }, + "sources": [ + { + "fileName": "Image/index.d.ts", + "line": 13, + "character": 13 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "string" + } + ] + } + }, + { + "id": 50, + "name": "htmlHeight", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The native HTML `height` attribute to the passed to the `img`" + }, + "sources": [ + { + "fileName": "Image/index.d.ts", + "line": 33, + "character": 12 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "string" + }, + { + "type": "intrinsic", + "name": "number" + } + ] + } + }, + { + "id": 49, + "name": "htmlWidth", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The native HTML `width` attribute to the passed to the `img`" + }, + "sources": [ + { + "fileName": "Image/index.d.ts", + "line": 29, + "character": 11 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "string" + }, + { + "type": "intrinsic", + "name": "number" + } + ] + } + }, + { + "id": 51, + "name": "ignoreFallback", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "Opt out of the `fallbackSrc` logic and use the `Image` directly" + }, + "sources": [ + { + "fileName": "Image/index.d.ts", + "line": 37, + "character": 16 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "false" + }, + { + "type": "intrinsic", + "name": "true" + } + ] + } + }, + { + "id": 46, + "name": "onError", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "A callback for when there was an error loading the image `src`" + }, + "sources": [ + { + "fileName": "Image/index.d.ts", + "line": 25, + "character": 9 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "reflection", + "declaration": { + "id": 47, + "name": "__type", + "kind": 65536, + "kindString": "Type literal", + "flags": { + "isExported": true + }, + "signatures": [ + { + "id": 48, + "name": "__call", + "kind": 4096, + "kindString": "Call signature", + "flags": { + "isExported": true + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + ] + } + }, + { + "id": 43, + "name": "onLoad", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "A callback for when the image `src` has been loaded" + }, + "sources": [ + { + "fileName": "Image/index.d.ts", + "line": 21, + "character": 8 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "reflection", + "declaration": { + "id": 44, + "name": "__type", + "kind": 65536, + "kindString": "Type literal", + "flags": { + "isExported": true + }, + "signatures": [ + { + "id": 45, + "name": "__call", + "kind": 4096, + "kindString": "Call signature", + "flags": { + "isExported": true + }, + "type": { + "type": "intrinsic", + "name": "void" + } + } + ] + } + } + ] + } + }, + { + "id": 40, + "name": "src", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The path to the image source" + }, + "sources": [ + { + "fileName": "Image/index.d.ts", + "line": 8, + "character": 5 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "intrinsic", + "name": "undefined" + }, + { + "type": "intrinsic", + "name": "string" + } + ] + } + } + ], + "groups": [ + { + "title": "Properties", + "kind": 1024, + "children": [42, 41, 50, 49, 51, 46, 43, 40] + } + ], + "sources": [ + { + "fileName": "Image/index.d.ts", + "line": 4, + "character": 16 + } + ] + }, + { + "id": 75, + "name": "IMoreIndicator", + "kind": 256, + "kindString": "Interface", + "flags": { + "isExported": true + }, + "children": [ + { + "id": 77, + "name": "label", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true + }, + "sources": [ + { + "fileName": "AvatarGroup/index.d.ts", + "line": 8, + "character": 7 + } + ], + "type": { + "type": "reference", + "name": "React.ReactNode" + } + }, + { + "id": 76, + "name": "size", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "sources": [ + { + "fileName": "AvatarGroup/index.d.ts", + "line": 7, + "character": 6 + } + ], + "type": { + "type": "indexedAccess", + "indexType": { + "type": "stringLiteral", + "value": "size" + }, + "objectType": { + "type": "reference", + "name": "IAvatar" + } + } + } + ], + "groups": [ + { + "title": "Properties", + "kind": 1024, + "children": [77, 76] + } + ], + "sources": [ + { + "fileName": "AvatarGroup/index.d.ts", + "line": 6, + "character": 24 + } + ] + }, + { + "id": 85, + "name": "ITag", + "kind": 256, + "kindString": "Interface", + "flags": { + "isExported": true + }, + "children": [ + { + "id": 87, + "name": "size", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The size of the tag." + }, + "sources": [ + { + "fileName": "Tag/index.d.ts", + "line": 16, + "character": 6 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "stringLiteral", + "value": "sm" + }, + { + "type": "stringLiteral", + "value": "md" + }, + { + "type": "stringLiteral", + "value": "lg" + } + ] + } + }, + { + "id": 86, + "name": "variant", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The variant of the tag." + }, + "sources": [ + { + "fileName": "Tag/index.d.ts", + "line": 12, + "character": 9 + } + ], + "type": { + "type": "indexedAccess", + "indexType": { + "type": "stringLiteral", + "value": "variant" + }, + "objectType": { + "type": "reference", + "name": "IBadge" + } + } + }, + { + "id": 88, + "name": "colorScheme", + "kind": 1024, + "kindString": "Property", + "flags": { + "isExported": true, + "isOptional": true + }, + "comment": { + "shortText": "The color scheme of the tag." + }, + "sources": [ + { + "fileName": "Tag/index.d.ts", + "line": 20, + "character": 14 + } + ], + "type": { + "type": "indexedAccess", + "indexType": { + "type": "stringLiteral", + "value": "colorScheme" + }, + "objectType": { + "type": "reference", + "name": "IBadge" + } + } + } + ], + "groups": [ + { + "title": "Properties", + "kind": 1024, + "children": [87, 86, 88] + } + ], + "sources": [ + { + "fileName": "Tag/index.d.ts", + "line": 8, + "character": 21 + } + ] + }, + { + "id": 83, + "name": "AvatarGroupProps", + "kind": 4194304, + "kindString": "Type alias", + "flags": { + "isExported": true + }, + "sources": [ + { + "fileName": "AvatarGroup/index.d.ts", + "line": 32, + "character": 28 + } + ], + "type": { + "type": "intersection", + "types": [ + { + "type": "reference", + "id": 78, + "name": "IAvatarGroup" + }, + { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "name": "BoxProps" + }, + { + "type": "stringLiteral", + "value": "size" + } + ], + "name": "Omit" + } + ] + } + }, + { + "id": 70, + "name": "AvatarNameProps", + "kind": 4194304, + "kindString": "Type alias", + "flags": { + "isExported": true + }, + "sources": [ + { + "fileName": "Avatar/index.d.ts", + "line": 35, + "character": 27 + } + ], + "type": { + "type": "intersection", + "types": [ + { + "type": "indexedAccess", + "indexType": { + "type": "stringLiteral", + "value": "name" + }, + "objectType": { + "type": "reference", + "name": "IAvatar" + } + }, + { + "type": "reference", + "name": "BoxProps" + } + ] + } + }, + { + "id": 73, + "name": "AvatarProps", + "kind": 4194304, + "kindString": "Type alias", + "flags": { + "isExported": true + }, + "sources": [ + { + "fileName": "Avatar/index.d.ts", + "line": 40, + "character": 23 + } + ], + "type": { + "type": "intersection", + "types": [ + { + "type": "reference", + "id": 63, + "name": "IAvatar" + }, + { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "name": "BoxProps" + }, + { + "type": "stringLiteral", + "value": "size" + } + ], + "name": "Omit" + } + ] + } + }, + { + "id": 4, + "name": "BadgeProps", + "kind": 4194304, + "kindString": "Type alias", + "flags": { + "isExported": true + }, + "sources": [ + { + "fileName": "Badge/index.d.ts", + "line": 18, + "character": 22 + } + ], + "type": { + "type": "intersection", + "types": [ + { + "type": "reference", + "id": 1, + "name": "IBadge" + }, + { + "type": "reference", + "name": "BoxProps" + } + ] + } + }, + { + "id": 37, + "name": "ButtonProps", + "kind": 4194304, + "kindString": "Type alias", + "flags": { + "isExported": true + }, + "sources": [ + { + "fileName": "Button/index.d.ts", + "line": 68, + "character": 23 + } + ], + "type": { + "type": "intersection", + "types": [ + { + "type": "reference", + "id": 23, + "name": "IButton" + }, + { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "name": "PseudoBoxProps" + }, + { + "type": "stringLiteral", + "value": "size" + } + ], + "name": "Omit" + } + ] + } + }, + { + "id": 21, + "name": "CheckboxProps", + "kind": 4194304, + "kindString": "Type alias", + "flags": { + "isExported": true + }, + "sources": [ + { + "fileName": "Checkbox/index.d.ts", + "line": 73, + "character": 25 + } + ], + "type": { + "type": "intersection", + "types": [ + { + "type": "reference", + "id": 6, + "name": "ICheckbox" + }, + { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "name": "HTMLInputElement" + } + ], + "name": "RefAttributes" + }, + { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "name": "BoxProps" + }, + { + "type": "union", + "types": [ + { + "type": "stringLiteral", + "value": "onChange" + }, + { + "type": "stringLiteral", + "value": "defaultChecked" + } + ] + } + ], + "name": "Omit" + } + ] + } + }, + { + "id": 60, + "name": "IconProps", + "kind": 4194304, + "kindString": "Type alias", + "flags": { + "isExported": true + }, + "sources": [ + { + "fileName": "Icon/index.d.ts", + "line": 30, + "character": 21 + } + ], + "type": { + "type": "intersection", + "types": [ + { + "type": "reference", + "id": 54, + "name": "IIcon" + }, + { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "name": "BoxProps" + }, + { + "type": "stringLiteral", + "value": "size" + } + ], + "name": "Omit" + } + ] + } + }, + { + "id": 52, + "name": "ImageProps", + "kind": 4194304, + "kindString": "Type alias", + "flags": { + "isExported": true + }, + "sources": [ + { + "fileName": "Image/index.d.ts", + "line": 40, + "character": 22 + } + ], + "type": { + "type": "intersection", + "types": [ + { + "type": "reference", + "id": 39, + "name": "IImage" + }, + { + "type": "reference", + "name": "BoxProps" + } + ] + } + }, + { + "id": 69, + "name": "Size", + "kind": 4194304, + "kindString": "Type alias", + "flags": { + "isExported": true + }, + "sources": [ + { + "fileName": "Avatar/index.d.ts", + "line": 5, + "character": 9 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "stringLiteral", + "value": "2xs" + }, + { + "type": "stringLiteral", + "value": "xs" + }, + { + "type": "stringLiteral", + "value": "sm" + }, + { + "type": "stringLiteral", + "value": "md" + }, + { + "type": "stringLiteral", + "value": "lg" + }, + { + "type": "stringLiteral", + "value": "xl" + }, + { + "type": "stringLiteral", + "value": "2xl" + } + ] + } + }, + { + "id": 93, + "name": "TagIconProps", + "kind": 4194304, + "kindString": "Type alias", + "flags": { + "isExported": true + }, + "sources": [ + { + "fileName": "Tag/index.d.ts", + "line": 29, + "character": 17 + } + ], + "type": { + "type": "intersection", + "types": [ + { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "id": 60, + "name": "IconProps" + }, + { + "type": "stringLiteral", + "value": "name" + } + ], + "name": "Omit" + }, + { + "type": "reflection", + "declaration": { + "id": 94, + "name": "__type", + "kind": 65536, + "kindString": "Type literal", + "flags": { + "isExported": true + }, + "children": [ + { + "id": 95, + "name": "icon", + "kind": 32, + "kindString": "Variable", + "flags": { + "isExported": true + }, + "sources": [ + { + "fileName": "Tag/index.d.ts", + "line": 30, + "character": 6 + } + ], + "type": { + "type": "union", + "types": [ + { + "type": "indexedAccess", + "indexType": { + "type": "stringLiteral", + "value": "name" + }, + "objectType": { + "type": "reference", + "name": "IconProps" + } + }, + { + "type": "reference", + "name": "React.ComponentType" + } + ] + } + } + ], + "groups": [ + { + "title": "Variables", + "kind": 32, + "children": [95] + } + ], + "sources": [ + { + "fileName": "Tag/index.d.ts", + "line": 29, + "character": 45 + } + ] + } + } + ] + } + }, + { + "id": 89, + "name": "TagProps", + "kind": 4194304, + "kindString": "Type alias", + "flags": { + "isExported": true + }, + "sources": [ + { + "fileName": "Tag/index.d.ts", + "line": 22, + "character": 20 + } + ], + "type": { + "type": "intersection", + "types": [ + { + "type": "reference", + "id": 85, + "name": "ITag" + }, + { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "name": "PseudoBoxProps" + }, + { + "type": "stringLiteral", + "value": "size" + } + ], + "name": "Omit" + } + ] + } + }, + { + "id": 74, + "name": "Avatar", + "kind": 32, + "kindString": "Variable", + "flags": { + "isExported": true, + "isConst": true + }, + "comment": { + "shortText": "The Avatar component is used to represent user, and displays the profile\npicture, initials or fallback icon." + }, + "sources": [ + { + "fileName": "Avatar/index.d.ts", + "line": 45, + "character": 20 + } + ], + "type": { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "id": 73, + "name": "AvatarProps" + } + ], + "name": "React.FC" + } + }, + { + "id": 72, + "name": "AvatarBadge", + "kind": 32, + "kindString": "Variable", + "flags": { + "isExported": true, + "isConst": true + }, + "sources": [ + { + "fileName": "Avatar/index.d.ts", + "line": 38, + "character": 24 + } + ], + "type": { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "name": "BoxProps" + } + ], + "name": "React.FC" + } + }, + { + "id": 84, + "name": "AvatarGroup", + "kind": 32, + "kindString": "Variable", + "flags": { + "isExported": true, + "isConst": true + }, + "comment": { + "shortText": "AvatarGroup is a wrapper to render a collection of evenly spaced avatars." + }, + "sources": [ + { + "fileName": "AvatarGroup/index.d.ts", + "line": 36, + "character": 25 + } + ], + "type": { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "id": 83, + "name": "AvatarGroupProps" + } + ], + "name": "React.FC" + } + }, + { + "id": 71, + "name": "AvatarName", + "kind": 32, + "kindString": "Variable", + "flags": { + "isExported": true, + "isConst": true + }, + "sources": [ + { + "fileName": "Avatar/index.d.ts", + "line": 36, + "character": 23 + } + ], + "type": { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "id": 70, + "name": "AvatarNameProps" + } + ], + "name": "React.FC" + } + }, + { + "id": 5, + "name": "Badge", + "kind": 32, + "kindString": "Variable", + "flags": { + "isExported": true, + "isConst": true + }, + "comment": { + "shortText": "The Badge component is used for state, general text, and number labels." + }, + "sources": [ + { + "fileName": "Badge/index.d.ts", + "line": 23, + "character": 19 + } + ], + "type": { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "id": 4, + "name": "BadgeProps" + } + ], + "name": "React.FC" + } + }, + { + "id": 38, + "name": "Button", + "kind": 32, + "kindString": "Variable", + "flags": { + "isExported": true, + "isConst": true + }, + "sources": [ + { + "fileName": "Button/index.d.ts", + "line": 70, + "character": 20 + } + ], + "type": { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "id": 37, + "name": "ButtonProps" + } + ], + "name": "React.FC" + } + }, + { + "id": 22, + "name": "Checkbox", + "kind": 32, + "kindString": "Variable", + "flags": { + "isExported": true, + "isConst": true + }, + "sources": [ + { + "fileName": "Checkbox/index.d.ts", + "line": 77, + "character": 22 + } + ], + "type": { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "id": 21, + "name": "CheckboxProps" + } + ], + "name": "React.FC" + } + }, + { + "id": 61, + "name": "Icon", + "kind": 32, + "kindString": "Variable", + "flags": { + "isExported": true, + "isConst": true + }, + "sources": [ + { + "fileName": "Icon/index.d.ts", + "line": 32, + "character": 18 + } + ], + "type": { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "id": 60, + "name": "IconProps" + } + ], + "name": "React.FC" + } + }, + { + "id": 53, + "name": "Image", + "kind": 32, + "kindString": "Variable", + "flags": { + "isExported": true, + "isConst": true + }, + "sources": [ + { + "fileName": "Image/index.d.ts", + "line": 42, + "character": 19 + } + ], + "type": { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "id": 52, + "name": "ImageProps" + } + ], + "name": "React.FC" + } + }, + { + "id": 90, + "name": "Tag", + "kind": 32, + "kindString": "Variable", + "flags": { + "isExported": true, + "isConst": true + }, + "sources": [ + { + "fileName": "Tag/index.d.ts", + "line": 23, + "character": 17 + } + ], + "type": { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "id": 89, + "name": "TagProps" + } + ], + "name": "React.FC" + } + }, + { + "id": 92, + "name": "TagCloseButton", + "kind": 32, + "kindString": "Variable", + "flags": { + "isExported": true, + "isConst": true + }, + "sources": [ + { + "fileName": "Tag/index.d.ts", + "line": 27, + "character": 27 + } + ], + "type": { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "name": "PseudoBoxProps" + } + ], + "name": "React.FC" + } + }, + { + "id": 96, + "name": "TagIcon", + "kind": 32, + "kindString": "Variable", + "flags": { + "isExported": true, + "isConst": true + }, + "sources": [ + { + "fileName": "Tag/index.d.ts", + "line": 32, + "character": 20 + } + ], + "type": { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "id": 93, + "name": "TagIconProps" + } + ], + "name": "React.FC" + } + }, + { + "id": 91, + "name": "TagLabel", + "kind": 32, + "kindString": "Variable", + "flags": { + "isExported": true, + "isConst": true + }, + "sources": [ + { + "fileName": "Tag/index.d.ts", + "line": 26, + "character": 21 + } + ], + "type": { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "name": "BoxProps" + } + ], + "name": "React.FC" + } + }, + { + "id": 62, + "name": "Text", + "kind": 32, + "kindString": "Variable", + "flags": { + "isExported": true, + "isConst": true + }, + "sources": [ + { + "fileName": "Text/index.d.ts", + "line": 4, + "character": 18 + } + ], + "type": { + "type": "reference", + "typeArguments": [ + { + "type": "reference", + "name": "BoxProps" + } + ], + "name": "React.FC" + } + } + ], + "groups": [ + { + "title": "Interfaces", + "kind": 256, + "children": [63, 78, 1, 23, 6, 54, 39, 75, 85] + }, + { + "title": "Type aliases", + "kind": 4194304, + "children": [83, 70, 73, 4, 37, 21, 60, 52, 69, 93, 89] + }, + { + "title": "Variables", + "kind": 32, + "children": [74, 72, 84, 71, 5, 38, 22, 61, 53, 90, 92, 96, 91, 62] + } + ] +} diff --git a/src/components/CodePanel.tsx b/src/components/CodePanel.tsx index 93b9b72610..45105abceb 100644 --- a/src/components/CodePanel.tsx +++ b/src/components/CodePanel.tsx @@ -1,6 +1,6 @@ import React, { memo, useState, useEffect } from 'react' import Highlight, { defaultProps } from 'prism-react-renderer' -import { Box, Button, useClipboard } from '@chakra-ui/core' +import { Box, Button, useClipboard } from '@chakra-ui/react' import { generateCode } from '~utils/code' import theme from 'prism-react-renderer/themes/nightOwl' import { useSelector } from 'react-redux' @@ -19,7 +19,7 @@ const CodePanel = () => { getCode() }, [components]) - const { onCopy, hasCopied } = useClipboard(code) + const { onCopy, hasCopied } = useClipboard(code!) return ( { size="sm" position="absolute" textTransform="uppercase" - variantColor="teal" + colorScheme="teal" fontSize="xs" height="24px" top={4} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 503f2a5c92..df8fdc4783 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -19,7 +19,9 @@ import { LightMode, PopoverFooter, Tooltip, -} from '@chakra-ui/core' + HStack, +} from '@chakra-ui/react' +import { ExternalLinkIcon, SmallCloseIcon, CheckIcon } from '@chakra-ui/icons' import { DiGithubBadge } from 'react-icons/di' import { AiFillThunderbolt } from 'react-icons/ai' import { buildParameters } from '~utils/codesandbox' @@ -55,7 +57,7 @@ const CodeSandboxButton = () => { ) }} isLoading={isLoading} - rightIcon="external-link" + rightIcon={} variant="ghost" size="xs" > @@ -95,11 +97,11 @@ const Header = () => { - + - + { fontSize="xs" htmlFor="preview" pb={0} + mb={0} + mr={2} + whiteSpace="nowrap" > Builder mode - dispatch.app.toggleBuilderMode()} - id="preview" - /> + + dispatch.app.toggleBuilderMode()} + id="preview" + /> + - - + + Code panel - dispatch.app.toggleCodePanel()} - size="sm" - /> + + dispatch.app.toggleCodePanel()} + size="sm" + /> + - + - + {({ onClose }) => ( @@ -148,7 +165,7 @@ const Header = () => { - + Are you sure? @@ -168,8 +185,8 @@ const Header = () => { - - - - + + +
+ Save this component + + + + Component name + ) => + onChangeComponentName(e.target.value) + } + /> + {!isValidComponentName && ( + + Component name must start with a capital character and + must not contain space or special character, and name + should not be already taken (including existing chakra-ui + components). + + )} + + This will name your component that you will see in the code + panel as a separated component. + + + + + + + + +
+ ) diff --git a/src/components/inspector/controls/ChildrenControl.tsx b/src/components/inspector/controls/ChildrenControl.tsx index 6233399c9f..cb9dec2a01 100644 --- a/src/components/inspector/controls/ChildrenControl.tsx +++ b/src/components/inspector/controls/ChildrenControl.tsx @@ -1,5 +1,5 @@ import React, { useRef, useEffect, KeyboardEvent } from 'react' -import { Input } from '@chakra-ui/core' +import { Input } from '@chakra-ui/react' import useDispatch from '~hooks/useDispatch' import { useForm } from '~hooks/useForm' import usePropsSelector from '~hooks/usePropsSelector' diff --git a/src/components/inspector/controls/ColorsControl.tsx b/src/components/inspector/controls/ColorsControl.tsx index ace7255fe6..0d47cb9b8e 100644 --- a/src/components/inspector/controls/ColorsControl.tsx +++ b/src/components/inspector/controls/ColorsControl.tsx @@ -5,10 +5,8 @@ import { PopoverContent, PopoverArrow, Grid, - PseudoBox, PopoverBody, IconButton, - Slider, SliderTrack, SliderFilledTrack, SliderThumb, @@ -20,7 +18,9 @@ import { TabPanel, Input, useTheme, -} from '@chakra-ui/core' + Slider, + Portal, +} from '@chakra-ui/react' import FormControl from './FormControl' import { useForm } from '~hooks/useForm' import omit from 'lodash/omit' @@ -49,17 +49,17 @@ const ColorsControl = (props: ColorControlPropsType) => { let propsIconButton: any = { bg: value } if (value && themeColors[value]) { - propsIconButton = { variantColor: value } + propsIconButton = { colorScheme: value } } const huesPicker = ( <> {Object.keys(themeColors).map(colorName => ( - @@ -69,7 +69,7 @@ const ColorsControl = (props: ColorControlPropsType) => { ) } mt={2} - rounded="full" + borderRadius="full" height="30px" width="30px" /> @@ -77,24 +77,27 @@ const ColorsControl = (props: ColorControlPropsType) => { {props.enableHues && ( - { - value = value === 0 ? 50 : value - setHue(value) - }} - min={0} - max={900} - step={100} - value={hue} - > - - - - - {hue} - - - + <> + { + value = value === 0 ? 50 : value + setHue(value) + }} + min={0} + max={900} + step={100} + value={hue} + > + + + + + + {hue} + + + + )} ) @@ -105,46 +108,46 @@ const ColorsControl = (props: ColorControlPropsType) => { - {props.label} - + /> - - - - {props.withFullColor ? ( - - - Theme - All - - - {huesPicker} + + + + + {props.withFullColor ? ( + + + Theme + All + + + {huesPicker} - - - { - setValue(props.name, `#${color.hex}`) - }} - /> - ); - - - - - ) : ( - huesPicker - )} - - + + + { + setValue(props.name, `#${color.hex}`) + }} + /> + ); + + + + + ) : ( + huesPicker + )} + + + = ({ name, label }) => { const { setValueFromEvent } = useForm() - const theme = useTheme() const value = usePropsSelector(name) return ( @@ -24,13 +24,20 @@ const IconControl: React.FC = ({ name, label }) => { handleChange={setValueFromEvent} name={name} > - {Object.keys(theme.icons) + {(Object.keys(icons) as Array) .filter(icon => icon.includes(value) || !value) - .map((icon, index) => ( - - - - ))} + .map((icon, index) => { + const IconComponent = icons[icon] + return ( + + + + + ) + })} ) diff --git a/src/components/inspector/controls/NumberControl.tsx b/src/components/inspector/controls/NumberControl.tsx index ae2127a0c3..220a001af1 100644 --- a/src/components/inspector/controls/NumberControl.tsx +++ b/src/components/inspector/controls/NumberControl.tsx @@ -1,5 +1,5 @@ import React, { ReactNode, useCallback } from 'react' -import { NumberInput, NumberInputProps } from '@chakra-ui/core' +import { NumberInput, NumberInputProps } from '@chakra-ui/react' import FormControl from './FormControl' import { useForm } from '~hooks/useForm' import usePropsSelector from '~hooks/usePropsSelector' diff --git a/src/components/inspector/controls/SizeControl.tsx b/src/components/inspector/controls/SizeControl.tsx index cfc8aeeb56..c276f78210 100644 --- a/src/components/inspector/controls/SizeControl.tsx +++ b/src/components/inspector/controls/SizeControl.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from 'react' import FormControl from './FormControl' -import { Select } from '@chakra-ui/core' +import { Select } from '@chakra-ui/react' import { useForm } from '~hooks/useForm' export type Size = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' diff --git a/src/components/inspector/controls/SwitchControl.tsx b/src/components/inspector/controls/SwitchControl.tsx index fb992247da..b27e8cf93c 100644 --- a/src/components/inspector/controls/SwitchControl.tsx +++ b/src/components/inspector/controls/SwitchControl.tsx @@ -1,5 +1,5 @@ import React, { ReactNode } from 'react' -import { Switch } from '@chakra-ui/core' +import { Switch } from '@chakra-ui/react' import FormControl from './FormControl' import { useForm } from '~hooks/useForm' import usePropsSelector from '~hooks/usePropsSelector' diff --git a/src/components/inspector/controls/TextControl.tsx b/src/components/inspector/controls/TextControl.tsx index 05042d5635..d9b8cb96c3 100644 --- a/src/components/inspector/controls/TextControl.tsx +++ b/src/components/inspector/controls/TextControl.tsx @@ -1,5 +1,5 @@ import React, { ReactNode } from 'react' -import { Input } from '@chakra-ui/core' +import { Input } from '@chakra-ui/react' import FormControl from './FormControl' import { useForm } from '~hooks/useForm' import usePropsSelector from '~hooks/usePropsSelector' @@ -25,7 +25,7 @@ const TextControl: React.FC = ({ return ( { opacity?: number - onSelect: PseudoBoxProps['onClick'] - onMouseOver: PseudoBoxProps['onMouseOver'] - onMouseOut: PseudoBoxProps['onMouseOut'] + onSelect: () => void + onMouseOver: BoxProps['onMouseOver'] + onMouseOut: BoxProps['onMouseOut'] draggable?: boolean name?: string } @@ -25,11 +26,11 @@ const ElementListItem = forwardRef( ref: React.Ref, ) => { return ( - - {draggable && } + {draggable && } {name || type} @@ -49,11 +50,11 @@ const ElementListItem = forwardRef( } + colorScheme="blackAlpha" /> - + ) }, ) diff --git a/src/components/inspector/elements-list/ElementsList.tsx b/src/components/inspector/elements-list/ElementsList.tsx index 95123cee0b..7f7f1b4a30 100644 --- a/src/components/inspector/elements-list/ElementsList.tsx +++ b/src/components/inspector/elements-list/ElementsList.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Box } from '@chakra-ui/core' +import { Box } from '@chakra-ui/react' import ElementListItem from './ElementListItemDraggable' interface Props { diff --git a/src/components/inspector/inputs/InputSuggestion.tsx b/src/components/inspector/inputs/InputSuggestion.tsx index 22f55c3ded..7d5be5c18e 100644 --- a/src/components/inspector/inputs/InputSuggestion.tsx +++ b/src/components/inspector/inputs/InputSuggestion.tsx @@ -5,7 +5,7 @@ import { ComboboxPopover, ComboboxList, } from '@reach/combobox' -import { Input } from '@chakra-ui/core' +import { Input } from '@chakra-ui/react' import { useForm } from '~hooks/useForm' type FormControlPropType = { diff --git a/src/components/inspector/panels/CustomPropsPanel.tsx b/src/components/inspector/panels/CustomPropsPanel.tsx index c0ca4094fe..d5a6d09542 100644 --- a/src/components/inspector/panels/CustomPropsPanel.tsx +++ b/src/components/inspector/panels/CustomPropsPanel.tsx @@ -12,7 +12,8 @@ import { InputRightElement, Input, ButtonGroup, -} from '@chakra-ui/core' +} from '@chakra-ui/react' +import { EditIcon, SmallCloseIcon } from '@chakra-ui/icons' import useDispatch from '~hooks/useDispatch' import { useForm } from '~hooks/useForm' @@ -99,14 +100,14 @@ const CustomPropsPanel = () => { variant="ghost" size="xs" aria-label="edit" - icon="edit" + icon={} /> onDelete(propsName)} variant="ghost" size="xs" aria-label="delete" - icon="small-close" + icon={} /> diff --git a/src/components/inspector/panels/Panels.tsx b/src/components/inspector/panels/Panels.tsx index 91f7999263..5cc760d578 100644 --- a/src/components/inspector/panels/Panels.tsx +++ b/src/components/inspector/panels/Panels.tsx @@ -108,7 +108,7 @@ const Panels: React.FC<{ component: IComponent; isRoot: boolean }> = ({ {type === 'InputLeftAddon' && } {type === 'Grid' && } {type === 'NumberInput' && } - {type === 'AspectRatioBox' && } + {type === 'AspectRatio' && } {type === 'Breadcrumb' && } {type === 'BreadcrumbItem' && } {type === 'BreadcrumbLink' && } diff --git a/src/components/inspector/panels/StylesPanel.tsx b/src/components/inspector/panels/StylesPanel.tsx index abcef3b17a..7b65fab4c4 100644 --- a/src/components/inspector/panels/StylesPanel.tsx +++ b/src/components/inspector/panels/StylesPanel.tsx @@ -1,5 +1,5 @@ import React, { memo } from 'react' -import { Accordion } from '@chakra-ui/core' +import { Accordion } from '@chakra-ui/react' import PaddingPanel from '~components/inspector/panels/styles/PaddingPanel' import DimensionPanel from '~components/inspector/panels/styles/DimensionPanel' diff --git a/src/components/inspector/panels/components/AlertPanel.tsx b/src/components/inspector/panels/components/AlertPanel.tsx index cb0d7f009d..52adfb7714 100644 --- a/src/components/inspector/panels/components/AlertPanel.tsx +++ b/src/components/inspector/panels/components/AlertPanel.tsx @@ -1,5 +1,5 @@ import React, { memo } from 'react' -import { Select } from '@chakra-ui/core' +import { Select } from '@chakra-ui/react' import FormControl from '~components/inspector/controls/FormControl' import { useForm } from '~hooks/useForm' import usePropsSelector from '~hooks/usePropsSelector' diff --git a/src/components/inspector/panels/components/AvatarGroupPanel.tsx b/src/components/inspector/panels/components/AvatarGroupPanel.tsx index b72f66491b..fe8eaeb86e 100644 --- a/src/components/inspector/panels/components/AvatarGroupPanel.tsx +++ b/src/components/inspector/panels/components/AvatarGroupPanel.tsx @@ -1,7 +1,6 @@ import React, { memo } from 'react' import FormControl from '~components/inspector/controls/FormControl' import { - Slider, SliderTrack, SliderThumb, NumberInput, @@ -11,7 +10,8 @@ import { NumberDecrementStepper, SliderFilledTrack, Select, -} from '@chakra-ui/core' + Slider, +} from '@chakra-ui/react' import { useForm } from '~hooks/useForm' import usePropsSelector from '~hooks/usePropsSelector' @@ -50,8 +50,9 @@ const AvatarGroupPanel = () => { step={1} defaultValue={spacing} > - - + + + diff --git a/src/components/inspector/panels/components/AvatarPanel.tsx b/src/components/inspector/panels/components/AvatarPanel.tsx index 0f296b1512..77a852ecee 100644 --- a/src/components/inspector/panels/components/AvatarPanel.tsx +++ b/src/components/inspector/panels/components/AvatarPanel.tsx @@ -1,5 +1,5 @@ import React, { memo } from 'react' -import { Select } from '@chakra-ui/core' +import { Select } from '@chakra-ui/react' import FormControl from '~components/inspector/controls/FormControl' import { useForm } from '~hooks/useForm' import usePropsSelector from '~hooks/usePropsSelector' diff --git a/src/components/inspector/panels/components/BadgePanel.tsx b/src/components/inspector/panels/components/BadgePanel.tsx index d5a4e8bb25..dcfb579e13 100644 --- a/src/components/inspector/panels/components/BadgePanel.tsx +++ b/src/components/inspector/panels/components/BadgePanel.tsx @@ -1,5 +1,5 @@ import React, { memo } from 'react' -import { Select } from '@chakra-ui/core' +import { Select } from '@chakra-ui/react' import ColorsControl from '~components/inspector/controls/ColorsControl' import ChildrenControl from '~components/inspector/controls/ChildrenControl' @@ -29,7 +29,7 @@ const BadgePanel = () => { - + ) } diff --git a/src/components/inspector/panels/components/BreadcrumbPanel.tsx b/src/components/inspector/panels/components/BreadcrumbPanel.tsx index 3debd3ca71..66f13214ab 100644 --- a/src/components/inspector/panels/components/BreadcrumbPanel.tsx +++ b/src/components/inspector/panels/components/BreadcrumbPanel.tsx @@ -1,13 +1,11 @@ import React, { memo } from 'react' import TextControl from '~components/inspector/controls/TextControl' -import SwitchControl from '~components/inspector/controls/SwitchControl' const BreadcrumbPanel = () => { return ( <> - ) } diff --git a/src/components/inspector/panels/components/ButtonPanel.tsx b/src/components/inspector/panels/components/ButtonPanel.tsx index 90baf8ca32..7b6452fb62 100644 --- a/src/components/inspector/panels/components/ButtonPanel.tsx +++ b/src/components/inspector/panels/components/ButtonPanel.tsx @@ -1,7 +1,7 @@ import React, { memo } from 'react' import ColorsControl from '~components/inspector/controls/ColorsControl' import SizeControl from '~components/inspector/controls/SizeControl' -import { Select } from '@chakra-ui/core' +import { Select } from '@chakra-ui/react' import ChildrenControl from '~components/inspector/controls/ChildrenControl' import FormControl from '~components/inspector/controls/FormControl' import { useForm } from '~hooks/useForm' @@ -36,7 +36,7 @@ const ButtonPanel = () => { - + diff --git a/src/components/inspector/panels/components/CheckboxPanel.tsx b/src/components/inspector/panels/components/CheckboxPanel.tsx index 861c39bf82..05e9de19e7 100644 --- a/src/components/inspector/panels/components/CheckboxPanel.tsx +++ b/src/components/inspector/panels/components/CheckboxPanel.tsx @@ -3,7 +3,7 @@ import ColorsControl from '~components/inspector/controls/ColorsControl' import ChildrenControl from '~components/inspector/controls/ChildrenControl' import { useForm } from '~hooks/useForm' import FormControl from '~components/inspector/controls/FormControl' -import { Select } from '@chakra-ui/core' +import { Select } from '@chakra-ui/react' import usePropsSelector from '~hooks/usePropsSelector' import SwitchControl from '~components/inspector/controls/SwitchControl' @@ -15,7 +15,7 @@ const CheckboxPanel = () => { <> - + { - + ) } diff --git a/src/components/inspector/panels/components/TabsPanel.tsx b/src/components/inspector/panels/components/TabsPanel.tsx index 0ba959c43c..5b89d76de7 100644 --- a/src/components/inspector/panels/components/TabsPanel.tsx +++ b/src/components/inspector/panels/components/TabsPanel.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Select } from '@chakra-ui/core' +import { Select } from '@chakra-ui/react' import FormControl from '~components/inspector/controls/FormControl' import { useForm } from '~hooks/useForm' import ColorsControl from '~components/inspector/controls/ColorsControl' @@ -61,7 +61,7 @@ const TabsPanel = () => { - + ) } diff --git a/src/components/inspector/panels/components/TagPanel.tsx b/src/components/inspector/panels/components/TagPanel.tsx index 75261dbeb5..dd17fbc6ac 100644 --- a/src/components/inspector/panels/components/TagPanel.tsx +++ b/src/components/inspector/panels/components/TagPanel.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Select } from '@chakra-ui/core' +import { Select } from '@chakra-ui/react' import { useForm } from '~hooks/useForm' import SizeControl from '~components/inspector/controls/SizeControl' import ChildrenControl from '~components/inspector/controls/ChildrenControl' @@ -38,7 +38,7 @@ const TagPanel = () => { - + diff --git a/src/components/inspector/panels/components/TextareaPanel.tsx b/src/components/inspector/panels/components/TextareaPanel.tsx index a62995bd5f..0601b9ff86 100644 --- a/src/components/inspector/panels/components/TextareaPanel.tsx +++ b/src/components/inspector/panels/components/TextareaPanel.tsx @@ -1,5 +1,5 @@ import React, { memo } from 'react' -import { Input, Select } from '@chakra-ui/core' +import { Input, Select } from '@chakra-ui/react' import FormControl from '~components/inspector/controls/FormControl' import { useForm } from '~hooks/useForm' import SizeControl, { Size } from '~components/inspector/controls/SizeControl' diff --git a/src/components/inspector/panels/styles/DimensionPanel.tsx b/src/components/inspector/panels/styles/DimensionPanel.tsx index e90d436417..263779ff29 100644 --- a/src/components/inspector/panels/styles/DimensionPanel.tsx +++ b/src/components/inspector/panels/styles/DimensionPanel.tsx @@ -1,5 +1,5 @@ import React, { memo } from 'react' -import { SimpleGrid, Select } from '@chakra-ui/core' +import { SimpleGrid, Select } from '@chakra-ui/react' import FormControl from '~components/inspector/controls/FormControl' import usePropsSelector from '~hooks/usePropsSelector' import { useForm } from '~hooks/useForm' diff --git a/src/components/inspector/panels/styles/DisplayPanel.tsx b/src/components/inspector/panels/styles/DisplayPanel.tsx index 678f9375a9..96d7660e89 100644 --- a/src/components/inspector/panels/styles/DisplayPanel.tsx +++ b/src/components/inspector/panels/styles/DisplayPanel.tsx @@ -1,5 +1,5 @@ import React, { memo } from 'react' -import { Select } from '@chakra-ui/core' +import { Select } from '@chakra-ui/react' import FormControl from '~components/inspector/controls/FormControl' import { useForm } from '~hooks/useForm' import usePropsSelector from '~hooks/usePropsSelector' diff --git a/src/components/inspector/panels/styles/EffectsPanel.tsx b/src/components/inspector/panels/styles/EffectsPanel.tsx index f79c5b39b5..a95f589423 100644 --- a/src/components/inspector/panels/styles/EffectsPanel.tsx +++ b/src/components/inspector/panels/styles/EffectsPanel.tsx @@ -3,11 +3,11 @@ import FormControl from '~components/inspector/controls/FormControl' import { useForm } from '~hooks/useForm' import usePropsSelector from '~hooks/usePropsSelector' import { - Slider, SliderTrack, SliderFilledTrack, + Slider, SliderThumb, -} from '@chakra-ui/core' +} from '@chakra-ui/react' import TextControl from '~components/inspector/controls/TextControl' const EffectsPanel = () => { @@ -23,16 +23,18 @@ const EffectsPanel = () => { setValue('opacity', value / 100)} + onChange={(value: any) => setValue('opacity', value / 100)} value={normalizedOpacity} + mr={2} > - - + + + - + ) } diff --git a/src/components/inspector/panels/styles/FlexPanel.tsx b/src/components/inspector/panels/styles/FlexPanel.tsx index 56909278e3..0fe2142d35 100644 --- a/src/components/inspector/panels/styles/FlexPanel.tsx +++ b/src/components/inspector/panels/styles/FlexPanel.tsx @@ -1,5 +1,5 @@ import React, { memo } from 'react' -import { Select } from '@chakra-ui/core' +import { Select } from '@chakra-ui/react' import FormControl from '~components/inspector/controls/FormControl' import { useForm } from '~hooks/useForm' import usePropsSelector from '~hooks/usePropsSelector' diff --git a/src/components/inspector/panels/styles/PaddingPanel.tsx b/src/components/inspector/panels/styles/PaddingPanel.tsx index 7c5c096cae..de470fd32c 100644 --- a/src/components/inspector/panels/styles/PaddingPanel.tsx +++ b/src/components/inspector/panels/styles/PaddingPanel.tsx @@ -6,9 +6,14 @@ import { SimpleGrid, InputGroup, InputLeftElement, - Icon, Box, -} from '@chakra-ui/core' +} from '@chakra-ui/react' +import { + ArrowBackIcon, + ArrowForwardIcon, + ArrowUpIcon, + ChevronDownIcon, +} from '@chakra-ui/icons' import { useForm } from '~hooks/useForm' import usePropsSelector from '~hooks/usePropsSelector' @@ -65,7 +70,7 @@ const PaddingPanel = ({ type }: PaddingPanelPropsType) => { + } /> { + } /> { } + children={} /> { + } /> { } onClick={() => { setValue('fontWeight', fontWeight ? null : 'bold') }} size="xs" - variantColor={fontWeight ? 'whatsapp' : 'gray'} + colorScheme={fontWeight ? 'whatsapp' : 'gray'} variant={fontWeight ? 'solid' : 'outline'} > Bold } onClick={() => { setValue('fontStyle', fontStyle === 'italic' ? null : 'italic') }} size="xs" - variantColor={fontStyle === 'italic' ? 'whatsapp' : 'gray'} + colorScheme={fontStyle === 'italic' ? 'whatsapp' : 'gray'} variant={fontStyle === 'italic' ? 'solid' : 'outline'} > Italic @@ -59,41 +59,41 @@ const TextPanel = () => { } onClick={() => { setValue('textAlign', 'left') }} - variantColor={textAlign === 'left' ? 'whatsapp' : 'gray'} + colorScheme={textAlign === 'left' ? 'whatsapp' : 'gray'} variant={textAlign === 'left' ? 'solid' : 'outline'} /> } onClick={() => { setValue('textAlign', 'center') }} - variantColor={textAlign === 'center' ? 'whatsapp' : 'gray'} + colorScheme={textAlign === 'center' ? 'whatsapp' : 'gray'} variant={textAlign === 'center' ? 'solid' : 'outline'} /> } onClick={() => { setValue('textAlign', 'right') }} - variantColor={textAlign === 'right' ? 'whatsapp' : 'gray'} + colorScheme={textAlign === 'right' ? 'whatsapp' : 'gray'} variant={textAlign === 'right' ? 'solid' : 'outline'} /> } onClick={() => { setValue('textAlign', 'justify') }} - variantColor={textAlign === 'justify' ? 'whatsapp' : 'gray'} + colorScheme={textAlign === 'justify' ? 'whatsapp' : 'gray'} variant={textAlign === 'justify' ? 'solid' : 'outline'} /> diff --git a/src/components/sidebar/DragItem.tsx b/src/components/sidebar/DragItem.tsx index 97b60a378e..ec18ac6167 100644 --- a/src/components/sidebar/DragItem.tsx +++ b/src/components/sidebar/DragItem.tsx @@ -1,6 +1,7 @@ import React from 'react' import { useDrag } from 'react-dnd' -import { Text, PseudoBox, Icon, Box } from '@chakra-ui/core' +import { Text, Box } from '@chakra-ui/react' +import { DragHandleIcon } from '@chakra-ui/icons' const DragItem: React.FC = ({ type, @@ -28,7 +29,7 @@ const DragItem: React.FC = ({ ml: -1, mr: 1, bg: 'teal.100', - shadow: 'sm', + boxShadow: 'sm', color: 'teal.800', }, } @@ -39,22 +40,20 @@ const DragItem: React.FC = ({ } return ( - - - + {label} - {isMeta && ( = ({ color="teal.300" borderColor="teal.600" fontSize="xs" - rounded={4} + borderRadius={4} px={1} > preset )} - {soon && ( = ({ color="whiteAlpha.500" borderColor="whiteAlpha.300" fontSize="xs" - rounded={4} + borderRadius={4} px={1} > soon )} - + ) } diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 7b1f5ae5da..7ff5f7974c 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -3,11 +3,11 @@ import { Box, Input, InputGroup, - Icon, InputRightElement, DarkMode, IconButton, -} from '@chakra-ui/core' +} from '@chakra-ui/react' +import { CloseIcon, SearchIcon } from '@chakra-ui/icons' import DragItem from './DragItem' import { menuItems, MenuItem } from '~componentsList' @@ -20,7 +20,7 @@ const Menu = () => { maxH="calc(100vh - 3rem)" overflowY="auto" overflowX="visible" - shadow="xl" + boxShadow="xl" flex="0 0 14rem" p={5} m={0} @@ -29,30 +29,33 @@ const Menu = () => { width="15rem" > - + ) => + setSearchTerm(event.target.value) + } + borderColor="rgba(255, 255, 255, 0.04)" + bg="rgba(255, 255, 255, 0.06)" + _hover={{ + borderColor: 'rgba(255, 255, 255, 0.08)', + }} + zIndex={0} + /> + {searchTerm ? ( } size="xs" onClick={() => setSearchTerm('')} - > - x - + /> ) : ( - + )} - )} - ) => - setSearchTerm(event.target.value) - } - /> {(Object.keys(menuItems) as ComponentType[]) diff --git a/src/componentsList.ts b/src/componentsList.ts index 579b7b35fd..96a02dbdb2 100644 --- a/src/componentsList.ts +++ b/src/componentsList.ts @@ -15,7 +15,7 @@ export const menuItems: MenuItems = { children: { Accordion: {}, AccordionItem: {}, - AccordionHeader: {}, + AccordionButton: {}, AccordionPanel: {}, AccordionIcon: {}, }, @@ -28,7 +28,7 @@ export const menuItems: MenuItems = { AlertTitle: {}, }, }, - AspectRatioBox: {}, + AspectRatio: {}, AvatarGroup: { rootParentType: 'Avatar', }, @@ -45,6 +45,8 @@ export const menuItems: MenuItems = { }, }, Button: {}, + Center: {}, + Container: {}, Checkbox: {}, CircularProgress: {}, CloseButton: {}, @@ -107,7 +109,6 @@ export const menuItems: MenuItems = { export const componentsList: ComponentType[] = [ 'Accordion', - 'AccordionHeader', 'AccordionIcon', 'AccordionItem', 'AccordionPanel', @@ -115,7 +116,7 @@ export const componentsList: ComponentType[] = [ 'AlertDescription', 'AlertIcon', 'AlertTitle', - 'AspectRatioBox', + 'AspectRatio', 'Avatar', 'AvatarBadge', 'AvatarGroup', @@ -125,10 +126,12 @@ export const componentsList: ComponentType[] = [ 'BreadcrumbItem', 'BreadcrumbLink', 'Button', + 'Center', 'Checkbox', 'CircularProgress', 'CloseButton', 'Code', + 'Container', 'Divider', 'Editable', 'Flex', diff --git a/src/core/models/components.test.ts b/src/core/models/components.test.ts index 0a5186c37e..cf8412ad7b 100644 --- a/src/core/models/components.test.ts +++ b/src/core/models/components.test.ts @@ -8,7 +8,7 @@ const STATE: ComponentsState = { children: [], id: 'button-testid', parent: 'root', - props: { children: 'Button text' }, + props: { children: 'Button text', variant: 'solid', size: 'md' }, rootParentType: 'Button', type: 'Button', }, @@ -61,6 +61,8 @@ describe('Components model', () => { expect(nextState.components['button-testid'].props).toEqual({ children: 'Button text', + variant: 'solid', + size: 'md', }) }) }) @@ -68,13 +70,15 @@ describe('Components model', () => { it('should update props', async () => { const nextState = components.reducers.updateProps(STATE, { id: 'button-testid', - name: 'variantColor', + name: 'colorScheme', value: 'teal.300', }) expect(nextState.components['button-testid'].props).toEqual({ children: 'Button text', - variantColor: 'teal.300', + colorScheme: 'teal.300', + variant: 'solid', + size: 'md', }) }) diff --git a/src/core/models/components.ts b/src/core/models/components.ts index 1902648003..559d7b20b9 100644 --- a/src/core/models/components.ts +++ b/src/core/models/components.ts @@ -52,9 +52,9 @@ const components = createModel({ resetProps(state: ComponentsState, componentId: string): ComponentsState { return produce(state, (draftState: ComponentsState) => { const component = draftState.components[componentId] + const { form, ...defaultProps } = DEFAULT_PROPS[component.type] || {} - draftState.components[componentId].props = - DEFAULT_PROPS[component.type] || {} + draftState.components[componentId].props = defaultProps || {} }) }, updateProps( @@ -157,11 +157,12 @@ const components = createModel({ ): ComponentsState { return produce(state, (draftState: ComponentsState) => { const id = payload.testId || generateId() + const { form, ...defaultProps } = DEFAULT_PROPS[payload.type] || {} draftState.selectedId = id draftState.components[payload.parentName].children.push(id) draftState.components[id] = { id, - props: DEFAULT_PROPS[payload.type] || {}, + props: defaultProps || {}, children: [], type: payload.type, parent: payload.parentName, diff --git a/src/core/models/composer/builder.ts b/src/core/models/composer/builder.ts index c00836bccc..31682d012b 100644 --- a/src/core/models/composer/builder.ts +++ b/src/core/models/composer/builder.ts @@ -73,7 +73,7 @@ export const buildAccordion = (parent: string): ComposedComponent => { const nodeId = composer.addNode({ type: 'Accordion', parent }) const itemId = composer.addNode({ type: 'AccordionItem', parent: nodeId }) - const headerId = composer.addNode({ type: 'AccordionHeader', parent: itemId }) + const headerId = composer.addNode({ type: 'AccordionButton', parent: itemId }) const panelId = composer.addNode({ type: 'AccordionPanel', parent: itemId }) composer.addNode({ type: 'Text', parent: headerId, rootParentType: 'Text' }) diff --git a/src/core/models/composer/composer.ts b/src/core/models/composer/composer.ts index 532f0b0f39..c19f1ea431 100644 --- a/src/core/models/composer/composer.ts +++ b/src/core/models/composer/composer.ts @@ -32,6 +32,8 @@ class Composer { } const localRootParentType = rootParentType || this.rootComponentType + const { form, ...defaultProps } = DEFAULT_PROPS[type] || {} + this.components = { ...this.components, [id]: { @@ -39,7 +41,7 @@ class Composer { type, parent, id, - props: { ...DEFAULT_PROPS[type], ...props }, + props: { ...defaultProps, ...props }, rootParentType: localRootParentType, }, } diff --git a/src/iconsList.ts b/src/iconsList.ts new file mode 100644 index 0000000000..7085e64417 --- /dev/null +++ b/src/iconsList.ts @@ -0,0 +1,5 @@ +import * as Icons from '@chakra-ui/icons' + +const { createIcon, ...iconsList } = Icons + +export default iconsList diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index f33694bc6a..0c713de21d 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,5 +1,6 @@ import React from 'react' -import { ThemeProvider, CSSReset, theme } from '@chakra-ui/core' +import { ChakraProvider } from '@chakra-ui/react' +import theme from '@chakra-ui/theme' import 'react-color-picker/index.css' import '@reach/combobox/styles.css' @@ -10,12 +11,11 @@ import { AppProps } from 'next/app' const Main = ({ Component, pageProps }: AppProps) => ( - + - - + ) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 34450fe039..e5a165e832 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,8 +1,8 @@ import React from 'react' -import { Flex, Box } from '@chakra-ui/core' +import { Flex, Box } from '@chakra-ui/react' import { DndProvider } from 'react-dnd' import Backend from 'react-dnd-html5-backend' -import { Global } from '@emotion/core' +import { Global } from '@emotion/react' import { HotKeys } from 'react-hotkeys' import Metadata from '~components/Metadata' import useShortcuts, { keyMap } from '~hooks/useShortcuts' @@ -31,7 +31,7 @@ const App = () => { - + diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 6ffc748e3f..ada769f8d1 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -4,69 +4,71 @@ declare module 'coloreact' declare module 'browser-nativefs' type ComponentType = - | 'AspectRatioBox' - | 'Badge' - | 'Box' - | 'Button' - | 'Breadcrumb' - | 'Icon' - | 'IconButton' - | 'Image' - | 'Text' - | 'Progress' + | 'Accordion' + | 'AccordionItem' + | 'AccordionButton' + | 'AccordionPanel' + | 'AccordionIcon' + | 'Alert' + | 'AlertIcon' + | 'AlertTitle' + | 'AlertDescription' + | 'AspectRatio' | 'AvatarBadge' | 'AvatarGroup' | 'Avatar' + | 'Badge' + | 'Box' + | 'Breadcrumb' + | 'BreadcrumbItem' + | 'BreadcrumbLink' + | 'Button' + | 'Center' | 'Checkbox' - | 'Link' - | 'Spinner' + | 'CircularProgress' | 'CloseButton' + | 'Code' + | 'Container' | 'Divider' - | 'Textarea' - | 'CircularProgress' - | 'Heading' - | 'Tag' - | 'Switch' - | 'SimpleGrid' - | 'Alert' - | 'AlertIcon' - | 'AlertTitle' - | 'AlertDescription' + | 'Editable' | 'Flex' - | 'Stack' - | 'Accordion' - | 'AccordionItem' - | 'AccordionHeader' - | 'AccordionPanel' - | 'AccordionIcon' | 'FormControl' | 'FormLabel' | 'FormHelperText' | 'FormErrorMessage' - | 'TabList' - | 'TabPanel' - | 'TabPanels' - | 'Tab' - | 'Tabs' - | 'Code' - | 'Editable' - | 'Menu' - | 'NumberInput' - | 'Radio' - | 'RadioGroup' - | 'Select' - | 'List' - | 'ListItem' - | 'ListIcon' + | 'Grid' + | 'Heading' + | 'Icon' + | 'IconButton' + | 'Image' | 'Input' | 'InputGroup' | 'InputLeftAddon' | 'InputRightAddon' | 'InputLeftElement' | 'InputRightElement' - | 'Grid' - | 'BreadcrumbItem' - | 'BreadcrumbLink' + | 'Link' + | 'List' + | 'ListItem' + | 'ListIcon' + | 'Menu' + | 'NumberInput' + | 'Progress' + | 'Radio' + | 'RadioGroup' + | 'Select' + | 'SimpleGrid' + | 'Spinner' + | 'Stack' + | 'Switch' + | 'Tab' + | 'Tabs' + | 'TabList' + | 'TabPanel' + | 'TabPanels' + | 'Tag' + | 'Text' + | 'Textarea' type MetaComponentType = | 'FormControlMeta' diff --git a/src/templates/airbnb.ts b/src/templates/airbnb.ts index dbcc2cdc4f..c199233b43 100644 --- a/src/templates/airbnb.ts +++ b/src/templates/airbnb.ts @@ -10,7 +10,7 @@ export const airbnbCard: IComponents = { id: 'comp-root', props: { bg: '#ffffff', - rounded: 'lg', + borderRadius: 'lg', width: 'sm', minHeight: 'sm', border: '1px solid lightgrey', @@ -75,9 +75,9 @@ export const airbnbCard: IComponents = { props: { children: 'NEW', variant: 'subtle', - variantColor: 'teal', + colorScheme: 'teal', mr: '2', - rounded: 'lg', + borderRadius: 'lg', pl: '2', pr: '2', }, @@ -134,7 +134,7 @@ export const airbnbCard: IComponents = { 'comp-1580479816': { id: 'comp-1580479816', props: { - name: 'star', + icon: 'StarIcon', color: 'yellow.400', mr: '1', }, diff --git a/src/templates/onboarding.ts b/src/templates/onboarding.ts index d6f67e5695..67ca9c40cc 100644 --- a/src/templates/onboarding.ts +++ b/src/templates/onboarding.ts @@ -12,7 +12,7 @@ export const onboarding: IComponents = { id: 'comp-1580479567', props: { bg: '#ffffff', - rounded: 'lg', + borderRadius: 'lg', width: 'sm', minHeight: 'sm', border: '1px solid lightgrey', @@ -77,9 +77,9 @@ export const onboarding: IComponents = { props: { children: 'NEW', variant: 'subtle', - variantColor: 'teal', + colorScheme: 'teal', mr: '2', - rounded: 'lg', + borderRadius: 'lg', pl: '2', pr: '2', }, @@ -136,7 +136,7 @@ export const onboarding: IComponents = { 'comp-1580479816': { id: 'comp-1580479816', props: { - name: 'star', + icon: 'StarIcon', color: 'yellow.400', mr: '1', }, @@ -170,7 +170,6 @@ export const onboarding: IComponents = { props: { isInline: true, spacing: '3', - shouldWrapChildren: true, }, children: ['comp-K6GOJIZK48606', 'comp-K6GOMJN7JIXFL'], type: 'Stack', @@ -346,7 +345,7 @@ export const onboarding: IComponents = { id: 'comp-K6GOPXN2COS0O', props: { isInline: true, - shouldWrapChildren: true, + spacing: '4', p: '', m: '', @@ -402,7 +401,7 @@ export const onboarding: IComponents = { 'comp-K6GP60GCOFWJI': { id: 'comp-K6GP60GCOFWJI', props: { - name: 'email', + icon: 'EmailIcon', color: 'blackAlpha.300', }, children: [], @@ -444,7 +443,7 @@ export const onboarding: IComponents = { props: { children: 'BETA', variant: 'subtle', - variantColor: 'pink', + colorScheme: 'pink', ml: '1', }, children: [], @@ -464,7 +463,7 @@ export const onboarding: IComponents = { id: 'comp-K6GXDV4IMW2CP', props: { backgroundColor: 'white', - shadow: 'sm', + boxShadow: 'sm', borderRadius: 'lg', p: '', pl: '3', @@ -481,7 +480,7 @@ export const onboarding: IComponents = { id: 'comp-K6GXFBY5JLD6C', props: { isInline: false, - shouldWrapChildren: true, + justifyContent: 'flex-start', alignItems: 'flex-start', ml: '', @@ -512,7 +511,7 @@ export const onboarding: IComponents = { 'comp-K6GXHPLKU3KD7': { id: 'comp-K6GXHPLKU3KD7', props: { - name: 'chevron-left', + icon: 'ChevronLeftIcon', }, children: [], type: 'Icon', @@ -538,7 +537,7 @@ export const onboarding: IComponents = { props: { ml: '', isInline: false, - shouldWrapChildren: true, + spacing: '2', }, children: ['comp-K6GYJVZZPAWEH', 'comp-K6GYL9G557J57'], @@ -553,7 +552,7 @@ export const onboarding: IComponents = { size: 'md', variant: 'subtle', isInline: false, - variantColor: 'whatsapp', + colorScheme: 'whatsapp', }, children: [], type: 'Tag', @@ -577,7 +576,7 @@ export const onboarding: IComponents = { props: { ml: '4', spacing: '2', - shouldWrapChildren: true, + mt: '4', mr: '4', }, @@ -625,8 +624,8 @@ export const onboarding: IComponents = { children: 'Drag and Drop!', size: 'md', variant: 'subtle', - variantColor: 'whatsapp', - rounded: 'sm', + colorScheme: 'whatsapp', + borderRadius: 'sm', fontSize: 'sm', }, children: [], @@ -712,7 +711,7 @@ export const onboarding: IComponents = { props: { backgroundColor: 'white', borderRadius: 'lg', - shadow: 'sm', + boxShadow: 'sm', pl: '3', pr: '3', pt: '5', @@ -739,7 +738,7 @@ export const onboarding: IComponents = { 'comp-K6H0L81XGIHU1': { id: 'comp-K6H0L81XGIHU1', props: { - name: 'chevron-right', + icon: 'ChevronRightIcon', }, children: [], type: 'Icon', @@ -749,7 +748,6 @@ export const onboarding: IComponents = { 'comp-K6H0PTU71NGNY': { id: 'comp-K6H0PTU71NGNY', props: { - shouldWrapChildren: true, spacing: '4', ml: '4', mt: '4', @@ -766,7 +764,6 @@ export const onboarding: IComponents = { 'comp-K6H0PXX1VMIEO': { id: 'comp-K6H0PXX1VMIEO', props: { - shouldWrapChildren: true, spacing: '2', }, children: ['comp-K6H0Q3HFG0Q14', 'comp-K6H0RNTHVY7IT'], @@ -780,7 +777,7 @@ export const onboarding: IComponents = { children: 'Update props & style', size: 'md', variant: 'subtle', - variantColor: 'yellow', + colorScheme: 'yellow', }, children: [], type: 'Tag', @@ -804,7 +801,6 @@ export const onboarding: IComponents = { id: 'comp-K6H0VNVDZ2TRH', props: { spacing: '2', - shouldWrapChildren: true, }, children: ['comp-K6H0VZBSG4SCN', 'comp-K6H0WPDNKQ6CR'], type: 'Stack', @@ -818,7 +814,7 @@ export const onboarding: IComponents = { size: 'md', variant: 'subtle', isInline: false, - variantColor: 'yellow', + colorScheme: 'yellow', }, children: [], type: 'Tag', @@ -897,7 +893,6 @@ export const onboarding: IComponents = { 'comp-K6H175A76GO7R': { id: 'comp-K6H175A76GO7R', props: { - shouldWrapChildren: true, spacing: '2', }, children: ['comp-K6H17C6VB8XQL', 'comp-K6H17HIGGSUHM'], @@ -911,7 +906,7 @@ export const onboarding: IComponents = { children: 'Delete, reset and read doc', size: 'md', variant: 'subtle', - variantColor: 'yellow', + colorScheme: 'yellow', }, children: [], type: 'Tag', @@ -1031,7 +1026,7 @@ export const onboarding: IComponents = { props: { backgroundColor: 'white', borderRadius: 'lg', - shadow: 'sm', + boxShadow: 'sm', pl: '3', pr: '3', pt: '5', @@ -1076,7 +1071,6 @@ export const onboarding: IComponents = { 'comp-K6H1TRQ8GRP98': { id: 'comp-K6H1TRQ8GRP98', props: { - shouldWrapChildren: true, spacing: '5', pl: '4', pt: '4', @@ -1093,7 +1087,6 @@ export const onboarding: IComponents = { 'comp-K6H1UG7QF7UP4': { id: 'comp-K6H1UG7QF7UP4', props: { - shouldWrapChildren: true, spacing: '2', }, children: ['comp-K6H1UMW2YLSAB', 'comp-K6H1VU1P3OYRQ'], @@ -1107,7 +1100,7 @@ export const onboarding: IComponents = { children: 'Builder mode', size: 'md', variant: 'solid', - variantColor: 'facebook', + colorScheme: 'facebook', }, children: [], type: 'Tag', @@ -1128,9 +1121,7 @@ export const onboarding: IComponents = { }, 'comp-K6H1WTCRIIFNG': { id: 'comp-K6H1WTCRIIFNG', - props: { - shouldWrapChildren: true, - }, + props: {}, children: ['comp-K6H1XCSNJY88G', 'comp-K6H1XZB37JTJ4'], type: 'Stack', parent: 'comp-K6H1TRQ8GRP98', @@ -1142,7 +1133,7 @@ export const onboarding: IComponents = { children: 'Code Panel', size: 'md', variant: 'solid', - variantColor: 'facebook', + colorScheme: 'facebook', }, children: [], type: 'Tag', @@ -1164,7 +1155,6 @@ export const onboarding: IComponents = { 'comp-K6HM4MGL0S6AH': { id: 'comp-K6HM4MGL0S6AH', props: { - shouldWrapChildren: true, spacing: '4', }, children: [ @@ -1184,7 +1174,7 @@ export const onboarding: IComponents = { children: 'ctrl+z', size: 'sm', variant: 'subtle', - variantColor: 'gray', + colorScheme: 'gray', }, children: [], type: 'Tag', @@ -1207,7 +1197,6 @@ export const onboarding: IComponents = { id: 'comp-K6HM7KLJLO714', props: { isInline: true, - shouldWrapChildren: true, }, children: [ 'comp-K6HM7F0ZLPGFE', @@ -1233,7 +1222,6 @@ export const onboarding: IComponents = { id: 'comp-K6HM9HOFHX07Z', props: { isInline: true, - shouldWrapChildren: true, }, children: ['comp-K6HM9L3VKMKHN', 'comp-K6HM9Y9W5FRUJ'], type: 'Stack', @@ -1246,7 +1234,7 @@ export const onboarding: IComponents = { children: 'b', size: 'md', variant: 'subtle', - variantColor: 'gray', + colorScheme: 'gray', }, children: [], type: 'Tag', @@ -1268,7 +1256,6 @@ export const onboarding: IComponents = { id: 'comp-K6HMA6UCR000W', props: { isInline: true, - shouldWrapChildren: true, }, children: ['comp-K6HMAAF672VE5', 'comp-K6HMAKMTZWD8Z'], type: 'Stack', @@ -1281,7 +1268,7 @@ export const onboarding: IComponents = { children: 'c', size: 'sm', variant: 'subtle', - variantColor: 'gray', + colorScheme: 'gray', }, children: [], type: 'Tag', @@ -1305,7 +1292,7 @@ export const onboarding: IComponents = { children: 'Shortcuts', size: 'md', variant: 'solid', - variantColor: 'facebook', + colorScheme: 'facebook', }, children: [], type: 'Tag', @@ -1315,7 +1302,6 @@ export const onboarding: IComponents = { 'comp-K6HMEG7J926M9': { id: 'comp-K6HMEG7J926M9', props: { - shouldWrapChildren: true, isInline: true, }, children: [ @@ -1333,7 +1319,7 @@ export const onboarding: IComponents = { children: 'cmd+y', size: 'sm', variant: 'subtle', - variantColor: 'gray', + colorScheme: 'gray', isInline: false, }, children: [], @@ -1358,7 +1344,7 @@ export const onboarding: IComponents = { children: 'ctrl+y', size: 'sm', variant: 'subtle', - variantColor: 'gray', + colorScheme: 'gray', }, children: [], type: 'Tag', diff --git a/src/templates/producthunt.ts b/src/templates/producthunt.ts index 6f1810b53e..d1c611ed23 100644 --- a/src/templates/producthunt.ts +++ b/src/templates/producthunt.ts @@ -17,7 +17,7 @@ export const productHunt: IComponents = { alignItems: 'flex-start', justifyContent: 'space-between', p: '5', - shadow: 'sm', + boxShadow: 'sm', }, children: ['comp-K6IAUUX80CXD6', 'comp-K6IAWV0WFDNW7'], type: 'Box', @@ -88,7 +88,7 @@ export const productHunt: IComponents = { parent: 'comp-K6IATGON4BXKS', id: 'comp-K6IATGOOHID42', props: { - name: 'email', + icon: 'EmailIcon', }, rootParentType: 'Input', }, @@ -125,7 +125,7 @@ export const productHunt: IComponents = { props: { isInline: true, isReversed: false, - shouldWrapChildren: true, + alignItems: 'center', spacing: '3', }, @@ -278,7 +278,7 @@ export const productHunt: IComponents = { id: 'comp-K6IB42UQBXOB8', props: { isInline: true, - shouldWrapChildren: true, + spacing: '2', alignItems: 'center', }, @@ -305,7 +305,6 @@ export const productHunt: IComponents = { 'comp-K6IB6HDI4V5B0': { id: 'comp-K6IB6HDI4V5B0', props: { - shouldWrapChildren: true, spacing: '0', }, children: [ diff --git a/src/templates/secretchakra.ts b/src/templates/secretchakra.ts index cc5a277015..77e8268080 100644 --- a/src/templates/secretchakra.ts +++ b/src/templates/secretchakra.ts @@ -78,7 +78,7 @@ export const secretchakra: IComponents = { 'comp-K74L8Y2I2J5V4': { id: 'comp-K74L8Y2I2J5V4', props: { - name: 'moon', + icon: 'MoonIcon', color: 'whatsapp.100', mr: '2', }, @@ -223,7 +223,7 @@ export const secretchakra: IComponents = { 'comp-K74LJUTPCBAFB': { id: 'comp-K74LJUTPCBAFB', props: { - name: 'drag-handle', + icon: 'DragHandleIcon', color: 'gray.300', fontSize: 'sm', mr: '2', @@ -248,7 +248,7 @@ export const secretchakra: IComponents = { 'comp-K74LN1I49Q2D6': { id: 'comp-K74LN1I49Q2D6', props: { - name: 'drag-handle', + icon: 'DragHandleIcon', color: 'gray.300', fontSize: 'sm', mr: '2', @@ -285,7 +285,7 @@ export const secretchakra: IComponents = { 'comp-K74LN28W6SFUY': { id: 'comp-K74LN28W6SFUY', props: { - name: 'drag-handle', + icon: 'DragHandleIcon', color: 'gray.300', fontSize: 'sm', mr: '2', @@ -322,7 +322,7 @@ export const secretchakra: IComponents = { 'comp-K74LNLUXPHO6M': { id: 'comp-K74LNLUXPHO6M', props: { - name: 'drag-handle', + icon: 'DragHandleIcon', color: 'gray.300', fontSize: 'sm', mr: '2', @@ -359,7 +359,7 @@ export const secretchakra: IComponents = { 'comp-K74LNM597JAOI': { id: 'comp-K74LNM597JAOI', props: { - name: 'drag-handle', + icon: 'DragHandleIcon', color: 'gray.300', fontSize: 'sm', mr: '2', @@ -396,7 +396,7 @@ export const secretchakra: IComponents = { 'comp-K74LNMAD8I86G': { id: 'comp-K74LNMAD8I86G', props: { - name: 'drag-handle', + icon: 'DragHandleIcon', color: 'gray.300', fontSize: 'sm', mr: '2', @@ -433,7 +433,7 @@ export const secretchakra: IComponents = { 'comp-K74LNMENCU4KP': { id: 'comp-K74LNMENCU4KP', props: { - name: 'drag-handle', + icon: 'DragHandleIcon', color: 'gray.300', fontSize: 'sm', mr: '2', @@ -518,7 +518,7 @@ export const secretchakra: IComponents = { props: { bg: 'yellow.100', p: '2', - shadow: 'sm', + boxShadow: 'sm', }, children: ['comp-K74LZHHZT6RVX'], type: 'Box', @@ -557,10 +557,10 @@ export const secretchakra: IComponents = { id: 'comp-K74M2CH7IR4IT', props: { 'aria-label': 'icon', - icon: 'copy', + icon: 'CopyIcon', size: 'xs', variant: 'ghost', - variantColor: 'gray', + colorScheme: 'gray', }, children: [], type: 'IconButton', @@ -571,10 +571,10 @@ export const secretchakra: IComponents = { id: 'comp-K74M2TSIDQKT0', props: { 'aria-label': 'icon', - icon: 'delete', + icon: 'DeleteIcon', size: 'xs', variant: 'ghost', - variantColor: 'gray', + colorScheme: 'gray', }, children: [], type: 'IconButton', @@ -585,10 +585,10 @@ export const secretchakra: IComponents = { id: 'comp-K74M2U4X3SQZX', props: { 'aria-label': 'icon', - icon: 'repeat', + icon: 'RepeatIcon', size: 'xs', variant: 'ghost', - variantColor: 'gray', + colorScheme: 'gray', }, children: [], type: 'IconButton', @@ -716,7 +716,7 @@ export const secretchakra: IComponents = { 'comp-K74M9CCGNQPHP': { id: 'comp-K74M9CCGNQPHP', props: { - name: 'moon', + icon: 'MoonIcon', color: 'whatsapp.100', mr: '2', }, @@ -856,7 +856,7 @@ export const secretchakra: IComponents = { 'comp-K74M9CCGGZE9Q': { id: 'comp-K74M9CCGGZE9Q', props: { - name: 'drag-handle', + icon: 'DragHandleIcon', color: 'gray.300', fontSize: 'sm', mr: '2', @@ -893,7 +893,7 @@ export const secretchakra: IComponents = { 'comp-K74M9CCG0S0RV': { id: 'comp-K74M9CCG0S0RV', props: { - name: 'drag-handle', + icon: 'DragHandleIcon', color: 'gray.300', fontSize: 'sm', mr: '2', @@ -930,7 +930,7 @@ export const secretchakra: IComponents = { 'comp-K74M9CCGPQ7C2': { id: 'comp-K74M9CCGPQ7C2', props: { - name: 'drag-handle', + icon: 'DragHandleIcon', color: 'gray.300', fontSize: 'sm', mr: '2', @@ -967,7 +967,7 @@ export const secretchakra: IComponents = { 'comp-K74M9CCGEPP92': { id: 'comp-K74M9CCGEPP92', props: { - name: 'drag-handle', + icon: 'DragHandleIcon', color: 'gray.300', fontSize: 'sm', mr: '2', @@ -1004,7 +1004,7 @@ export const secretchakra: IComponents = { 'comp-K74M9CCG2CWCC': { id: 'comp-K74M9CCG2CWCC', props: { - name: 'drag-handle', + icon: 'DragHandleIcon', color: 'gray.300', fontSize: 'sm', mr: '2', @@ -1041,7 +1041,7 @@ export const secretchakra: IComponents = { 'comp-K74M9CCGBHD01': { id: 'comp-K74M9CCGBHD01', props: { - name: 'drag-handle', + icon: 'DragHandleIcon', color: 'gray.300', fontSize: 'sm', mr: '2', @@ -1078,7 +1078,7 @@ export const secretchakra: IComponents = { 'comp-K74M9CCGJS0IN': { id: 'comp-K74M9CCGJS0IN', props: { - name: 'drag-handle', + icon: 'DragHandleIcon', color: 'gray.300', fontSize: 'sm', mr: '2', @@ -1173,7 +1173,7 @@ export const secretchakra: IComponents = { props: { bg: 'yellow.100', p: '2', - shadow: 'sm', + boxShadow: 'sm', }, children: ['comp-K74M9CCG9YO15'], type: 'Box', @@ -1184,10 +1184,10 @@ export const secretchakra: IComponents = { id: 'comp-K74M9CCGSW3SU', props: { 'aria-label': 'icon', - icon: 'copy', + icon: 'CopyIcon', size: 'xs', variant: 'ghost', - variantColor: 'gray', + colorScheme: 'gray', }, children: [], type: 'IconButton', @@ -1198,10 +1198,10 @@ export const secretchakra: IComponents = { id: 'comp-K74M9CCGTKCJ7', props: { 'aria-label': 'icon', - icon: 'delete', + icon: 'DeleteIcon', size: 'xs', variant: 'ghost', - variantColor: 'gray', + colorScheme: 'gray', }, children: [], type: 'IconButton', @@ -1212,10 +1212,10 @@ export const secretchakra: IComponents = { id: 'comp-K74M9CCGGX02O', props: { 'aria-label': 'icon', - icon: 'repeat', + icon: 'RepeatIcon', size: 'xs', variant: 'ghost', - variantColor: 'gray', + colorScheme: 'gray', }, children: [], type: 'IconButton', diff --git a/src/theme/theme.ts b/src/theme/theme.ts deleted file mode 100644 index 3ac35d7100..0000000000 --- a/src/theme/theme.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { theme } from "@chakra-ui/core"; - -export default { - ...theme, - fonts: { - heading: `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`, - body: `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`, - mono: `SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace` - } -}; diff --git a/src/utils/code.test.ts b/src/utils/code.test.ts index f64c67245c..e5d069f937 100644 --- a/src/utils/code.test.ts +++ b/src/utils/code.test.ts @@ -31,6 +31,37 @@ const componentFixtures: IComponents = { }, } +const componentFixturesWithButtonIcon: IComponents = { + root: { + id: 'root', + parent: 'root', + type: 'Box', + children: ['comp-1'], + props: {}, + }, + 'comp-1': { + id: 'comp-1', + props: { + bg: 'whatsapp.500', + }, + children: ['comp-2'], + type: 'Box', + parent: 'root', + rootParentType: 'Box', + componentName: 'MyBox', + }, + 'comp-2': { + id: 'comp-2', + props: { + leftIcon: 'PhoneIcon', + }, + children: [], + type: 'Button', + parent: 'comp-1', + rootParentType: 'Button', + }, +} + describe('Code utils', () => { it('should generate component code', async () => { const code = await generateComponentCode({ @@ -52,7 +83,7 @@ describe('Code utils', () => { const code = await generateCode(componentFixtures) expect(code).toEqual(`import React from 'react' -import { ThemeProvider, CSSReset, theme, Box, Text } from '@chakra-ui/core' +import { ChakraProvider, Box, Text } from '@chakra-ui/react' const MyBox = () => ( @@ -61,10 +92,32 @@ const MyBox = () => ( ) const App = () => ( - - + + + +) + +export default App +`) + }) + + it('should generate icons imports and icon instanciation', async () => { + const code = await generateCode(componentFixturesWithButtonIcon) + + expect(code).toEqual(`import React from 'react' +import { ChakraProvider, Box, Button } from '@chakra-ui/react' +import { PhoneIcon } from '@chakra-ui/icons' + +const MyBox = () => ( + +