update web, fix integration issues

packages/design-system/atoms/breakpoints/BreakpointProvider.tsx

@@ -31,7 +31,7 @@ export const BreakpointsProvider = (props: { children: React.ReactNode }) => {
     };
 
     updateScreenSize();
-    setImmediate(() => updateScreenSize());
+    setTimeout(() => updateScreenSize(), 0);
 
     mediaQueries.onDesktop.addEventListener('change', updateScreenSize);
     mediaQueries.onTablet.addEventListener('change', updateScreenSize);

packages/design-system/hack/jestSetup.ts

@@ -0,0 +1,5 @@
+import '@testing-library/jest-dom';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Enzyme from 'enzyme';
+
+Enzyme.configure({ adapter: new Adapter() });

packages/design-system/jest.config.js

@@ -3,7 +3,11 @@ module.exports = {
   preset: 'ts-jest/presets/js-with-ts',
   testEnvironment: 'jsdom',
   reporters: ['default'],
-  setupFilesAfterEnv: ['jest-styled-components', '../../hack/jestSetup.ts'],
+  setupFilesAfterEnv: [
+    'jest-styled-components',
+    '../../hack/jestSetup.ts',
+    './hack/jestSetup.ts',
+  ],
   snapshotSerializers: ['enzyme-to-json/serializer'],
   globals: {
     'ts-jest': {

packages/design-system/molecules/server-utilities/ServerUtilities.tsx

@@ -6,7 +6,7 @@ import {
 } from '@roleypoly/design-system/molecules/server-utilities/ServerUtilities.styled';
 import { hasFeature } from '@roleypoly/misc-utils/hasFeature';
 import { Features, GuildData } from '@roleypoly/types';
-import { GoArchive, GoChevronRight, GoReport, GoShield, GoSync } from 'react-icons/go';
+import { GoArchive, GoChevronRight, GoReport, GoShield } from 'react-icons/go';
 
 type Props = {
   guildData: GuildData;
@@ -54,25 +54,17 @@ export const ServerUtilities = (props: Props) => (
         link={`/s/${props.guildData.id}/edit/audit-logging`}
       />
     )}
-    <Utility
-      title={
-        <>
-          <GoSync />
-          &nbsp;&nbsp;Import from Roleypoly Legacy
-        </>
-      }
-      description="Used Roleypoly before and don't see your categories?"
-      link={`/s/${props.guildData.id}/edit/import-from-legacy`}
-    />
-    <Utility
-      title={
-        <>
-          <GoArchive />
-          &nbsp;&nbsp;Manage your Data
-        </>
-      }
-      description="Export or delete all of your Roleypoly data."
-      link={`/s/${props.guildData.id}/edit/data`}
-    />
+    {hasFeature(props.guildData.features, Features.Preview) && (
+      <Utility
+        title={
+          <>
+            <GoArchive />
+            &nbsp;&nbsp;Manage your Data
+          </>
+        }
+        description="Export or delete all of your Roleypoly data."
+        link={`/s/${props.guildData.id}/edit/data`}
+      />
+    )}
   </div>
 );

packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx

@@ -11,12 +11,12 @@ import {
   Role,
   RoleSafety,
 } from '@roleypoly/types';
-import KSUID from 'ksuid';
 import { flatten, sortBy } from 'lodash';
 import React from 'react';
 import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
 import { CgReorder } from 'react-icons/cg';
 import { GoArrowDown, GoArrowUp, GoCheck, GoGrabber, GoPlus } from 'react-icons/go';
+import { ulid } from 'ulidx';
 import {
   CategoryActions,
   ReorderButton,
@@ -70,7 +70,7 @@ export const ServerCategoryEditor = (props: Props) => {
 
     const newCategory: Category = {
       ...defaultCategory,
-      id: KSUID.randomSync().string,
+      id: ulid(),
       position: categories.length,
     };
 
@@ -96,7 +96,7 @@ export const ServerCategoryEditor = (props: Props) => {
       if (c.id === category.id) {
         return {
           ...defaultCategory,
-          id: KSUID.randomSync().string,
+          id: ulid(),
           position: category.position,
         };
       }

packages/design-system/package.json

@@ -12,7 +12,6 @@
     "chroma-js": "^2.3.0",
     "deep-equal": "^2.0.5",
     "isomorphic-unfetch": "^3.1.0",
-    "ksuid": "^3.0.0",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",
@@ -23,7 +22,8 @@
     "react-is": "^17.0.2",
     "react-tooltip": "^4.2.21",
     "styled-components": "^5.3.3",
-    "styled-normalize": "^8.0.7"
+    "styled-normalize": "^8.0.7",
+    "ulidx": "^0.3.0"
   },
   "devDependencies": {
     "@icons/material": "^0.4.1",
@@ -33,8 +33,13 @@
     "@storybook/addons": "^6.4.16",
     "@storybook/react": "^6.4.16",
     "@storybook/theming": "^6.4.16",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
     "@types/chroma-js": "^2.1.3",
     "@types/deep-equal": "^1.0.1",
+    "@types/enzyme": "^3.10.11",
+    "@types/lodash": "^4.14.178",
     "@types/node": "^17.0.13",
     "@types/react": "^17.0.38",
     "@types/react-beautiful-dnd": "^13.1.2",
@@ -47,7 +52,7 @@
     "babel-plugin-styled-components": "^2.0.2",
     "change-case": "^4.1.2",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
+    "enzyme-to-json": "^3.6.2",
     "jest": "^27.4.7",
     "jest-styled-components": "^7.0.8",
     "typescript": "^4.5.5"

packages/design-system/tsconfig.test.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  }
+  // "exclude": ["node_modules"]
+}