Extract shared components into @darekkay/react-ui

app/jest.config.js

@@ -9,8 +9,8 @@ module.exports = {
   coverageThreshold: {
     global: {
       statements: 90,
-      branches: 84,
-      functions: 86,
+      branches: 80,
+      functions: 80,
       lines: 90,
     },
   },

app/package.json

@@ -4,7 +4,8 @@
   "version": "1.5.0",
   "author": "Darek Kay <hello@darekkay.com> (https://darekkay.com/)",
   "dependencies": {
-    "@darekkay/styles": "3.3.4",
+    "@darekkay/react-ui": "1.1.0",
+    "@darekkay/styles": "4.2.1",
     "@fortawesome/fontawesome-svg-core": "6.2.1",
     "@fortawesome/free-brands-svg-icons": "6.2.1",
     "@fortawesome/free-regular-svg-icons": "6.2.1",

app/src/components/button/__stories__/index.stories.tsx → app/src/__stories__/button.stories.tsx

@@ -1,10 +1,9 @@
 import React from "react";
+import { Button, ButtonProps } from "@darekkay/react-ui";
 
 import Icon from "components/icon";
 import Section from "components/section";
 
-import Button, { Props as ButtonProps } from "../index";
-
 interface RowProps {
   title: string;
   children?: React.ReactNode;
@@ -35,7 +34,7 @@ const Row = ({
 );
 
 export default {
-  title: "Components/Button",
+  title: "Shared Components/Button",
 };
 
 export const Variants = () => (

app/src/components/forms/input/__stories__/index.stories.tsx → app/src/__stories__/forms/input.stories.tsx

@@ -1,9 +1,8 @@
 import React, { useState } from "react";
-
-import Input from "../index";
+import { Input } from "@darekkay/react-ui";
 
 export default {
-  title: "Components/Forms/Input",
+  title: "Shared Components/Forms/Input",
 };
 
 export const Variants = () => {

app/src/components/link/__stories__/index.stories.tsx → app/src/__stories__/link.stories.tsx

@@ -1,11 +1,10 @@
 import React from "react";
+import { Link } from "@darekkay/react-ui";
 
 import Icon from "components/icon";
 
-import Link from "../index";
-
 export default {
-  title: "Components/Link",
+  title: "Shared Components/Link",
 };
 
 export const Variants = () => {

app/src/common/hooks/__stories__/index.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
+import { Button } from "@darekkay/react-ui";
 
-import Button from "components/button";
 import Section from "components/section";
 
 import usePrevious from "../usePrevious";

app/src/common/testing.tsx

@@ -2,7 +2,7 @@
  * Common wrapper around testing utilities.
  *
  * All utilities from @testing-library/react are re-exported.
- * Additionally, utilities from @testing-library/user-event and @testing-library/react-hooks are provided.
+ * Additionally, utilities from @testing-library/user-event are provided.
  * */
 
 import React from "react";

app/src/components/drawer/index.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import groupBy from "lodash/groupBy";
+import { Link } from "@darekkay/react-ui";
 
 import widgets, { WidgetProperties } from "widgets";
 import { categories } from "widgets/categories";
 import { WidgetType } from "widgets/list";
 import Icon from "components/icon";
-import Link from "components/link";
 
 const categoriesWithWidgets = groupBy(widgets, (widget) => widget.category);
 

app/src/components/forms/__stories__/index.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
+import { Input } from "@darekkay/react-ui";
 
 import Section from "components/section";
-import Input from "components/forms/input";
 import TextArea from "components/forms/text-area";
 import Dropdown from "components/forms/dropdown";
 import DatePicker from "components/forms/date-picker";