123 tabs

package.json

@@ -85,6 +85,7 @@
     "@electrocrud/shared": "link:./packages/shared",
     "@electrocrud/tables": "link:./packages/tables",
     "@electrocrud/utils": "link:./packages/utils",
+    "@electrocrud/tabs": "link:./packages/tabs",
     "@emotion/cache": "^11.7.1",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",

packages/buttons/package.json

@@ -32,15 +32,16 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^2.4.9",
+    "@electrocrud/utils": "link:./../utils",
     "arc-hash": "^3.0.0",
     "chroma-js": "^2.4.2",
+    "csstype": "^3.1.1",
     "eslint-plugin-prettier": "^4.2.1",
     "flatted": "^3.2.7",
     "framer-motion": "^9.0.2",
     "react": "^18.2.0",
     "react-icons": "^4.7.1",
     "ts-toolbelt": "^9.6.0",
-    "underscore": "^1.13.6",
-    "@electrocrud/utils": "link:./../utils"
+    "underscore": "^1.13.6"
   }
 }

packages/buttons/src/index.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 export * from './save-button';
 export * from './ripple-button';
 export * from './actions-dropdown-menu';
@@ -8,4 +7,4 @@ export * from './cancel-button';
 export * from './add-button';
 export * from './delete-button';
 export * from './lock-button';
-export * from './action-button';
+export * from './action-button';

packages/feedback/package.json

@@ -33,9 +33,11 @@
   "dependencies": {
     "@chakra-ui/react": "^2.4.9",
     "chroma-js": "^2.4.2",
+    "csstype": "^3.1.1",
     "framer-motion": "^9.0.2",
     "react": "^18.2.0",
     "react-icons": "^4.7.1",
-    "ts-toolbelt": "^9.6.0"
+    "ts-toolbelt": "^9.6.0",
+    "underscore": "^1.13.6"
   }
 }

packages/shared/package.json

@@ -31,6 +31,7 @@
     "@chakra-ui/react": "^2.4.9",
     "arc-hash": "^3.0.0",
     "chroma-js": "^2.4.2",
+    "csstype": "^3.1.1",
     "eslint-plugin-prettier": "^4.2.1",
     "flatted": "^3.2.7",
     "framer-motion": "^9.0.2",

packages/tables/package.json

@@ -32,9 +32,11 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^2.4.9",
+    "csstype": "^3.1.1",
     "framer-motion": "^9.0.2",
     "react": "^18.2.0",
     "react-icons": "^4.7.1",
-    "ts-toolbelt": "^9.6.0"
+    "ts-toolbelt": "^9.6.0",
+    "underscore": "^1.13.6"
   }
 }

packages/tabs/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  "extends": [
+      "../../.eslintrc.js"
+  ],
+};

packages/tabs/README.md

@@ -0,0 +1,11 @@
+# `@electrocrud/tabs`
+
+> TODO: description
+
+## Usage
+
+```
+const tabs = require('@electrocrud/tabs');
+
+// TODO: DEMONSTRATE API
+```

packages/tabs/__tests__/tabs.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { TabProperties, Tabs } from '../src/tabs';
+import { ChakraProvider } from '@chakra-ui/react';
+import theme from '../../../src/renderer/theme/theme';
+import { TabClose } from '../src/list';
+
+test('tab close icon', () => {
+  const clickFunction = jest.fn();
+  const { getByTestId } = render(
+    <ChakraProvider theme={theme}>
+      <TabClose onClose={clickFunction} />
+    </ChakraProvider>
+  );
+
+  const tabClose = getByTestId('tab-close');
+  fireEvent.click(tabClose);
+  expect(clickFunction).toHaveBeenCalledTimes(1);
+});

packages/tabs/lib/index.css

@@ -0,0 +1,15 @@
+/* src/tabs.scss */
+.chakra-tabs__tab[aria-selected=true] {
+  position: relative;
+  border-bottom: 0px;
+}
+.chakra-tabs__tab[aria-selected=true]::after {
+  content: "";
+  position: absolute;
+  width: 0px;
+  height: 2px;
+  bottom: 0px;
+  background-color: var(--chakra-colors-primary-400);
+  animation: animateborder 0.5s ease-in-out 1 normal forwards;
+  animation-iteration-count: 1;
+}

packages/tabs/lib/index.d.ts

@@ -0,0 +1,5 @@
+export { TabProperties, Tabs, TabsAPI, TabsProperties } from './tabs.js';
+import 'react';
+import '@chakra-ui/react';
+import 'csstype';
+import 'react-icons';