feat: upgrade mosaic for FA v6 (#200)

* feat: upgrade mosaic for FA v6

* bump mosaic

* update snap

Author: marbemac

package.json

@@ -45,7 +45,6 @@
     "react-dom": ">=16.8"
   },
   "dependencies": {
-    "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@stoplight/json": "^3.17.1",
     "@stoplight/json-schema-tree": "^2.2.1",
     "@stoplight/react-error-boundary": "^2.0.0",
@@ -59,8 +58,8 @@
     "@size-limit/preset-big-lib": "^4.11.0",
     "@stoplight/eslint-config": "3.0.0",
     "@stoplight/markdown-viewer": "^5.3.3",
-    "@stoplight/mosaic": "^1.12.6",
-    "@stoplight/mosaic-code-viewer": "^1.12.6",
+    "@stoplight/mosaic": "^1.24.0",
+    "@stoplight/mosaic-code-viewer": "^1.24.0",
     "@stoplight/scripts": "9.2.0",
     "@stoplight/types": "^12.3.0",
     "@storybook/addon-essentials": "^6.4.14",

src/components/SchemaRow/SchemaRow.tsx

@@ -1,4 +1,3 @@
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle.js';
 import {
   isMirroredNode,
   isReferenceNode,
@@ -172,7 +171,7 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = React.memo(({
             <Icon
               title={refNode?.error! || internalSchemaError.error}
               color="danger"
-              icon={faExclamationTriangle}
+              icon={['fas', 'exclamation-triangle']}
               size="sm"
             />
           )}

src/components/SchemaRow/TopLevelSchemaRow.tsx

@@ -1,5 +1,3 @@
-import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown.js';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle.js';
 import { isRegularNode, RegularNode } from '@stoplight/json-schema-tree';
 import { Box, Flex, HStack, Icon, Menu, Pressable } from '@stoplight/mosaic';
 import { useUpdateAtom } from 'jotai/utils';
@@ -28,7 +26,7 @@ export const TopLevelSchemaRow = ({ schemaNode }: Pick<SchemaRowProps, 'schemaNo
         <ScrollCheck />
         <ChildStack schemaNode={schemaNode} childNodes={childNodes} currentNestingLevel={nestingLevel} />
         {internalSchemaError.hasError && (
-          <Icon title={internalSchemaError.error} color="danger" icon={faExclamationTriangle} size="sm" />
+          <Icon title={internalSchemaError.error} color="danger" icon={['fas', 'exclamation-triangle']} size="sm" />
         )}
       </>
     );
@@ -56,7 +54,7 @@ export const TopLevelSchemaRow = ({ schemaNode }: Pick<SchemaRowProps, 'schemaNo
                 <Flex fontFamily="mono" fontWeight="semibold" cursor="pointer" fontSize="base">
                   {selectedChoice.title}
                   <Box ml={1}>
-                    <Icon icon={faCaretDown} />
+                    <Icon icon={['fas', 'caret-down']} />
                   </Box>
                 </Flex>
               </Pressable>

src/components/shared/__tests__/Property.spec.tsx

@@ -141,7 +141,7 @@ describe('Property component', () => {
 
       const wrapper = render(schema);
       expect(wrapper.html()).toMatchInlineSnapshot(
-        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-flex sl-max-w-full sl-py-2\\"><div class=\\"sl-stack sl-stack--vertical sl-stack--1 sl-flex sl-flex-1 sl-flex-col sl-items-stretch sl-max-w-full\\"><div class=\\"sl-flex sl-items-center sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base\\"><div class=\\"sl-select sl-relative\\"><div style=\\"border: 0px; clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;\\" aria-hidden=\\"true\\"><input type=\\"text\\" tabindex=\\"-1\\" style=\\"font-size: 16px;\\"><label><select size=\\"2\\" tabindex=\\"-1\\"><option></option><option value=\\"0\\">array (oneOf) [strings]</option><option value=\\"1\\">array (oneOf) [numbers]</option></select></label></div><div class=\\"sl-relative\\"><button aria-label=\\"Pick a type\\" aria-haspopup=\\"listbox\\" aria-expanded=\\"false\\" id=\\"react-aria-0-4\\" aria-labelledby=\\"react-aria-0-4 react-aria-0-6\\" type=\\"button\\" class=\\"sl-button sl-w-full sl-h-sm sl-text-base sl-font-normal sl-px-1.5 sl-bg-transparent sl-rounded sl-border-transparent hover:sl-border-input focus:sl-border-primary active:sl-border-primary sl-border disabled:sl-opacity-60\\"><div class=\\"sl-flex sl-flex-1 sl-justify-items-start sl-items-center\\"><div class=\\"sl-pr-1\\">array (oneOf) [strings]</div></div><div class=\\"sl-text-xs sl--mr-0.5 sl-ml-1\\"><div class=\\"sl-pt-0.5 sl-pr-0.5\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"chevron-down\\" class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-xs sl-icon\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"></path></svg></div></div></button></div></div></div></div></div></div></div></div>"`,
+        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-flex sl-max-w-full sl-py-2\\"><div class=\\"sl-stack sl-stack--vertical sl-stack--1 sl-flex sl-flex-1 sl-flex-col sl-items-stretch sl-max-w-full\\"><div class=\\"sl-flex sl-items-center sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base\\"><div class=\\"sl-select sl-relative\\"><div style=\\"border: 0px; clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;\\" aria-hidden=\\"true\\"><input type=\\"text\\" tabindex=\\"-1\\" style=\\"font-size: 16px;\\"><label><select size=\\"2\\" tabindex=\\"-1\\"><option></option><option value=\\"0\\">array (oneOf) [strings]</option><option value=\\"1\\">array (oneOf) [numbers]</option></select></label></div><div class=\\"sl-relative\\"><button aria-label=\\"Pick a type\\" aria-haspopup=\\"listbox\\" aria-expanded=\\"false\\" id=\\"react-aria-0-4\\" aria-labelledby=\\"react-aria-0-4 react-aria-0-6\\" type=\\"button\\" class=\\"sl-button sl-w-full sl-h-sm sl-text-base sl-font-normal sl-px-1.5 sl-bg-transparent sl-rounded sl-border-transparent hover:sl-border-input focus:sl-border-primary active:sl-border-primary sl-border disabled:sl-opacity-60\\"><div class=\\"sl-flex sl-flex-1 sl-justify-items-start sl-items-center\\"><div class=\\"sl-pr-1\\">array (oneOf) [strings]</div></div><div class=\\"sl-text-xs sl--mr-0.5 sl-ml-1\\"><div class=\\"sl-pt-0.5 sl-pr-0.5\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"chevron-down\\" class=\\"svg-inline--fa fa-chevron-down fa-xs sl-icon\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z\\"></path></svg></div></div></button></div></div></div></div></div></div></div></div>"`,
       );
     });
 
@@ -164,7 +164,7 @@ describe('Property component', () => {
 
       const wrapper = render(schema);
       expect(wrapper.html()).toMatchInlineSnapshot(
-        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-flex sl-max-w-full sl-py-2\\"><div class=\\"sl-stack sl-stack--vertical sl-stack--1 sl-flex sl-flex-1 sl-flex-col sl-items-stretch sl-max-w-full\\"><div class=\\"sl-flex sl-items-center sl-max-w-full sl-cursor-pointer\\"><div class=\\"sl-flex sl-justify-center sl-w-8 sl--ml-8 sl-pl-3 sl-text-muted\\" role=\\"button\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"chevron-down\\" class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-fw fa-sm sl-icon\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"></path></svg></div><div class=\\"sl-flex sl-items-baseline sl-text-base\\"><span class=\\"sl-truncate sl-text-muted\\">array[object]</span></div></div></div></div><div data-level=\\"0\\" class=\\"sl-text-sm\\"><div class=\\"sl-flex sl-max-w-full sl-py-2\\"><div class=\\"sl-stack sl-stack--vertical sl-stack--1 sl-flex sl-flex-1 sl-flex-col sl-items-stretch sl-max-w-full\\"><div class=\\"sl-flex sl-items-center sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base\\"><div class=\\"sl-font-mono sl-font-semibold sl-mr-2\\">foo</div></div></div></div></div><div class=\\"sl-flex sl-max-w-full sl-py-2\\"><div class=\\"sl-stack sl-stack--vertical sl-stack--1 sl-flex sl-flex-1 sl-flex-col sl-items-stretch sl-max-w-full\\"><div class=\\"sl-flex sl-items-center sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base\\"><div class=\\"sl-font-mono sl-font-semibold sl-mr-2\\">bar</div></div></div></div></div><div class=\\"sl-flex sl-max-w-full sl-py-2\\"><div class=\\"sl-stack sl-stack--vertical sl-stack--1 sl-flex sl-flex-1 sl-flex-col sl-items-stretch sl-max-w-full\\"><div class=\\"sl-flex sl-items-center sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base\\"><div class=\\"sl-font-mono sl-font-semibold sl-mr-2\\">baz</div></div></div></div></div></div></div></div>"`,
+        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-flex sl-max-w-full sl-py-2\\"><div class=\\"sl-stack sl-stack--vertical sl-stack--1 sl-flex sl-flex-1 sl-flex-col sl-items-stretch sl-max-w-full\\"><div class=\\"sl-flex sl-items-center sl-max-w-full sl-cursor-pointer\\"><div class=\\"sl-flex sl-justify-center sl-w-8 sl--ml-8 sl-pl-3 sl-text-muted\\" role=\\"button\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"chevron-down\\" class=\\"svg-inline--fa fa-chevron-down fa-fw fa-sm sl-icon\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z\\"></path></svg></div><div class=\\"sl-flex sl-items-baseline sl-text-base\\"><span class=\\"sl-truncate sl-text-muted\\">array[object]</span></div></div></div></div><div data-level=\\"0\\" class=\\"sl-text-sm\\"><div class=\\"sl-flex sl-max-w-full sl-py-2\\"><div class=\\"sl-stack sl-stack--vertical sl-stack--1 sl-flex sl-flex-1 sl-flex-col sl-items-stretch sl-max-w-full\\"><div class=\\"sl-flex sl-items-center sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base\\"><div class=\\"sl-font-mono sl-font-semibold sl-mr-2\\">foo</div></div></div></div></div><div class=\\"sl-flex sl-max-w-full sl-py-2\\"><div class=\\"sl-stack sl-stack--vertical sl-stack--1 sl-flex sl-flex-1 sl-flex-col sl-items-stretch sl-max-w-full\\"><div class=\\"sl-flex sl-items-center sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base\\"><div class=\\"sl-font-mono sl-font-semibold sl-mr-2\\">bar</div></div></div></div></div><div class=\\"sl-flex sl-max-w-full sl-py-2\\"><div class=\\"sl-stack sl-stack--vertical sl-stack--1 sl-flex sl-flex-1 sl-flex-col sl-items-stretch sl-max-w-full\\"><div class=\\"sl-flex sl-items-center sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base\\"><div class=\\"sl-font-mono sl-font-semibold sl-mr-2\\">baz</div></div></div></div></div></div></div></div>"`,
       );
     });