Merge pull request #132 from layerx-labs/develop

feat: refactor horizontal menu

.eslintrc.js

@@ -2,8 +2,7 @@ module.exports = {
   plugins: ['testing-library', 'jest-dom', 'jsx-a11y'],
   extends: [
     'react-app',
-    'prettier/@typescript-eslint',
-    'plugin:prettier/recommended',
+    'prettier',
     'plugin:testing-library/recommended',
     'plugin:testing-library/react',
     'plugin:jest-dom/recommended',

.storybook/preview.tsx

@@ -1,101 +1,8 @@
-import { createGlobalStyle, ThemeProvider } from 'styled-components';
 import { withThemeFromJSXProvider } from '@storybook/addon-styling';
-import { rem } from 'polished';
-import { typography, colors } from '../src/ions/variables';
-import { device } from '../src/ions/breakpoints';
-
-/* TODO: update import for your custom theme configurations */
-// import { lightTheme, darkTheme } from '../path/to/themes';
-
-/* TODO: replace with your own global styles, or remove */
-const GlobalStyles = createGlobalStyle`
-    * {
-    box-sizing: border-box;
-  }
-
-  html {
-    font-size: 16px;
-    scroll-behavior: smooth;
-  }
-
-  body {
-    margin: 0;
-    font-family: 'Space Grotesk', Verdana, Arial, Helvetica, sans-serif;
-    font-size: 1rem;
-    font-weight: ${typography.regular};
-    color: ${colors.black};
-    font-feature-settings: 'ss04' on;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  h1,
-  h1 span,
-  h2,
-  h2 span {
-    margin: 0;
-    font-weight: ${typography.regular};
-  }
-
-  h1,
-  h1 span {
-    font-family: 'Laforgestencil', Verdana, Arial, Helvetica, sans-serif;
-    font-size: 3.5rem;
-    line-height: 1.15;
-  }
-
-  h2,
-  h2 span {
-    font-size: 2rem;
-    line-height: 1.2;
-  }
-
-  h3,
-  h4 {
-    margin: 0;
-    font-size: 1rem;
-    font-weight: 400;
-  }
-
-  span {
-    font-family: ${typography.defaultFont};
-    font-size: ${rem(typography.defaultSize)};
-    font-feature-settings: 'ss04' on;
-  }
-
-  p {
-    margin: 0;
-    font-size: 1rem;
-    line-height: 1.3;
-
-    &:not(:last-child) {
-      margin-bottom: ${rem('10px')};
-    }
-  }
-
-  pre {
-    border: 1px solid ${colors.grey500};
-    border-radius: 4px;
-    background-color: ${colors.grey300};
-    padding: ${rem('15px')};
-  }
-
-  @media ${device.l} {
-    h1,
-    h1 span {
-      font-size: 6rem;
-      line-height: 1.1;
-    }
-
-    h2,
-    h2 span {
-      font-size: 2.5rem;
-    }
-  }
-`;
+import '../src/styles/global.css';
 
 const preview = {
   actions: { argTypesRegex: '^on.*' },
-
   backgrounds: {
     default: 'light',
     values: [
@@ -120,7 +27,6 @@ const preview = {
       // }
       // defaultTheme: 'light',
       // Provider: ThemeProvider,
-      GlobalStyles,
     }),
   ],
 };

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

jest.config.js

@@ -4,4 +4,9 @@ module.exports = {
       babelConfig: '.babelrc.json',
     },
   },
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|less)$': 'identity-obj-proxy',
+  },
 };

package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/taikai/rocket-kit.git"
+    "url": "https://github.com/layerx-labs/rocket-kit"
   },
   "keywords": [
     "react",
@@ -27,7 +27,7 @@
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
+    "lint": "tsdx lint src",
     "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
@@ -63,43 +63,53 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.13.8",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@size-limit/preset-small-lib": "^4.10.0",
-    "@storybook/addon-a11y": "^7.4.1",
-    "@storybook/addon-controls": "^7.4.1",
-    "@storybook/addon-essentials": "^7.4.1",
-    "@storybook/addon-links": "^7.4.1",
+    "@size-limit/preset-small-lib": "^11.0.1",
+    "@storybook/addon-a11y": "^7.6.7",
+    "@storybook/addon-controls": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addons": "^7.4.1",
-    "@storybook/react": "^7.4.1",
-    "@storybook/react-webpack5": "^7.4.1",
-    "@storybook/theming": "^7.4.1",
+    "@storybook/addons": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-webpack5": "^7.6.7",
+    "@storybook/theming": "^7.6.7",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^13.0.7",
+    "@types/css-modules": "^1.0.5",
     "@types/lodash.throttle": "^4.1.6",
     "@types/react": "^17.0.3",
     "@types/react-beautiful-dnd": "^13.1.1",
     "@types/react-dom": "^17.0.1",
     "@types/react-paginate": "^7.1.0",
     "@types/styled-components": "^5.1.4",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "babel-plugin-macros": "^3.1.0",
     "chromatic": "^6.17.4",
     "cross-var": "^1.1.0",
     "dotenv-cli": "^4.0.0",
+    "eslint": "^8.55.0",
     "eslint-plugin-jest-dom": "^3.6.5",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-testing-library": "^3.10.1",
     "husky": "^5.1.3",
+    "identity-obj-proxy": "^3.0.0",
+    "prettier": "^3.1.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-is": "^17.0.1",
-    "size-limit": "^4.10.0",
-    "storybook": "^7.4.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "size-limit": "^11.0.1",
+    "storybook": "^7.6.7",
     "tsdx": "^0.14.1",
     "tslib": "^2.0.3",
     "typescript": "^4.2.3",
@@ -112,17 +122,23 @@
   "dependencies": {
     "@babel/preset-react": "^7.22.5",
     "@types/uuid": "^8.3.4",
-    "boring-avatars": "^1.10.1",
+    "boring-avatars": "1.6.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-react-app": "^7.0.1",
     "jest-styled-components": "^7.0.3",
     "lodash.throttle": "^4.1.1",
     "polished": "^4.1.1",
     "react-beautiful-dnd": "^13.1.0",
+    "react-intersection-observer": "^9.5.3",
     "react-paginate": "^7.1.3",
     "react-player": "^2.9.0",
     "react-responsive-carousel": "^3.2.18",
     "react-responsive-tabs": "^4.4.1",
     "react-select": "^5.7.3",
     "styled-components": "^5.2.1",
     "uuid": "^8.3.2"
+  },
+  "resolutions": {
+    "cliui": "^8.0.1"
   }
 }

src/atoms/select-interactive/__tests__/__snapshots__/select-interactive.test.tsx.snap

@@ -160,6 +160,7 @@ exports[`Select Interactive renders 1`] = `
         aria-live="polite"
         aria-relevant="additions text"
         class="css-1f43avz-a11yText-A11yText"
+        role="log"
       />
       <div
         class="select__control css-13cymwt-control"
@@ -177,6 +178,7 @@ exports[`Select Interactive renders 1`] = `
             data-value=""
           >
             <input
+              aria-activedescendant=""
               aria-autocomplete="list"
               aria-expanded="false"
               aria-haspopup="true"