Minor fixes.

novykh · novykh · commit 41a89b4b0f62 · 2022-12-14T11:16:57.000+02:00
diff --git a/jest/setup.js b/jest/setup.js
@@ -0,0 +1,7 @@
+class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+window.ResizeObserver = ResizeObserver
diff --git a/src/components/button/button.stories.js b/src/components/button/button.stories.js
@@ -9,8 +9,8 @@ import { Button, IconButton } from "."
 import readme from "./README.md"
 import { iconsList } from "src/components/icon"
 
-const buttonStory = storiesOf("COMPONENTS|Controls/Button", module)
-const icons: string[] = Object.keys(iconsList)
+const buttonStory = storiesOf("Input/Button", module)
+const icons = Object.keys(iconsList)
 
 const subData = {
   readme: {
diff --git a/src/components/checkbox/checkbox.stories.js b/src/components/checkbox/checkbox.stories.js
@@ -7,7 +7,7 @@ import { getGutterHeight } from "src/theme/utils"
 import { readmeCleanup } from "utils/readme"
 import readme from "./README.md"
 
-const checkBoxStory = storiesOf("COMPONENTS|Controls/Checkbox", module)
+const checkBoxStory = storiesOf("Input/Checkbox", module)
 
 const position = ["left", "right"]
 
@@ -22,7 +22,7 @@ checkBoxStory.add(
   "Controlled Checkbox",
   () => {
     const [checked, setChecked] = useState(false)
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleChange = e => {
       setChecked(e.currentTarget.checked)
     }
     return (
@@ -36,7 +36,7 @@ checkBoxStory.add(
   "Labeled Checkbox",
   () => {
     const [checked, setChecked] = useState(false)
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleChange = e => {
       setChecked(e.currentTarget.checked)
     }
     return (
@@ -55,7 +55,7 @@ checkBoxStory.add(
   "Disabled Checkobox",
   () => {
     const [checked, setChecked] = useState(false)
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleChange = e => {
       setChecked(e.currentTarget.checked)
     }
     return (
diff --git a/src/components/drops/drop/index.stories.js b/src/components/drops/drop/index.stories.js
@@ -6,7 +6,7 @@ import Flex from "src/components/templates/flex"
 import readme from "./README.md"
 import Drop from "./index"
 
-const story = storiesOf("COMPONENTS|Drops/Drop", module)
+const story = storiesOf("Drops/Drop", module)
 
 const subData = {
   readme: {
diff --git a/src/components/drops/menu/dropdown.js b/src/components/drops/menu/dropdown.js
@@ -3,7 +3,7 @@ import styled from "styled-components"
 import { useVirtualizer } from "@tanstack/react-virtual"
 import Flex from "src/components/templates/flex"
 import Search from "src/components/search"
-import { Box } from "src/index"
+import { Box } from "src/components/templates/box"
 
 const Container = styled(Flex)`
   ${({ hideShadow }) =>
diff --git a/src/components/drops/menu/index.stories.js b/src/components/drops/menu/index.stories.js
@@ -10,7 +10,7 @@ import { Icon } from "src/components/icon"
 import readme from "./README.md"
 import Menu from "./index"
 
-const story = storiesOf("COMPONENTS|Drops/Menu", module)
+const story = storiesOf("Drops/Menu", module)
 
 const subData = {
   readme: {
diff --git a/src/components/drops/popover/index.stories.js b/src/components/drops/popover/index.stories.js
@@ -8,7 +8,7 @@ import { Button } from "src/components/button"
 import readme from "./README.md"
 import Popover from "./index"
 
-const story = storiesOf("COMPONENTS|Drops/Popover", module)
+const story = storiesOf("Drops/Popover", module)
 
 const subData = {
   readme: {
diff --git a/src/components/drops/tooltip/index.stories.js b/src/components/drops/tooltip/index.stories.js
@@ -7,7 +7,7 @@ import { Button } from "src/components/button"
 import readme from "./README.md"
 import Tooltip from "./index"
 
-const story = storiesOf("COMPONENTS|Drops/Tooltip", module)
+const story = storiesOf("Drops/Tooltip", module)
 
 const subData = {
   readme: {
diff --git a/src/components/filter-box/filter-box.stories.js b/src/components/filter-box/filter-box.stories.js
@@ -6,7 +6,7 @@ import { FilterBox, FilterBoxProcessing } from "."
 import { Text } from "src/components/typography"
 import readme from "./README.md"
 
-const filterBoxStory = storiesOf("COMPONENTS|Controls/Filter Box", module)
+const filterBoxStory = storiesOf("Input/Filter Box", module)
 
 const subData = {
   readme: {
diff --git a/src/components/icon/icon-list.stories.js b/src/components/icon/icon-list.stories.js
@@ -10,7 +10,7 @@ import { getColor } from "../../theme"
 import { iconsList } from "./icons-list"
 import { Icon } from "."
 
-const iconListStory = storiesOf("COMPONENTS|Icons", module)
+const iconListStory = storiesOf("Icons/List", module)
 
 const iconsExposed = Object.keys(iconsList)
 
diff --git a/src/components/icon/icon.stories.js b/src/components/icon/icon.stories.js
@@ -7,7 +7,7 @@ import { iconsList } from "./icons-list"
 import { Icon } from "."
 import readme from "./README.md"
 
-const iconStory = storiesOf("COMPONENTS|Utils/Icon", module)
+const iconStory = storiesOf("Icons/Icon", module)
 
 const subData = {
   readme: {
diff --git a/src/components/intersection/index.stories.js b/src/components/intersection/index.stories.js
@@ -5,7 +5,7 @@ import Flex from "src/components/templates/flex"
 import readme from "./README.md"
 import Intersection from "./index"
 
-const story = storiesOf("COMPONENTS|Intersection", module)
+const story = storiesOf("Utils/Intersection", module)
 
 const subData = {
   readme: {
diff --git a/src/components/modal/index.stories.js b/src/components/modal/index.stories.js
@@ -5,7 +5,7 @@ import Modal, { ModalContent, ModalHeader, ModalBody, ModalFooter, ModalCloseBut
 import Flex from "../templates/flex"
 import { Button } from "../button"
 
-const modalStory = storiesOf("COMPONENTS|Modal")
+const modalStory = storiesOf("Utils/Modal")
 
 modalStory.add("Modal", () => {
   return (
diff --git a/src/components/pill/index.stories.js b/src/components/pill/index.stories.js
@@ -5,8 +5,7 @@ import Flex from "src/components/templates/flex"
 import Pill from "./index"
 import MasterCard from "./mastercard"
 
-
-const story = storiesOf("COMPONENTS|Pills")
+const story = storiesOf("Atoms/Pills")
 
 const Custom = () => (
   <Flex gap={4}>
@@ -31,16 +30,32 @@ const Pills = () => (
       <Pill flavour="neutral">Neutral</Pill>
     </Flex>
     <Flex gap={4}>
-      <Pill flavour="warning" size="small">Warning</Pill>
-      <Pill flavour="error" size="small">Error</Pill>
-      <Pill flavour="success" size="small">Success</Pill>
-      <Pill flavour="neutral" size="small">Neutral</Pill>
+      <Pill flavour="warning" size="small">
+        Warning
+      </Pill>
+      <Pill flavour="error" size="small">
+        Error
+      </Pill>
+      <Pill flavour="success" size="small">
+        Success
+      </Pill>
+      <Pill flavour="neutral" size="small">
+        Neutral
+      </Pill>
     </Flex>
     <Flex gap={4}>
-      <Pill flavour="warning" size="large">Warning</Pill>
-      <Pill flavour="error" size="large">Error</Pill>
-      <Pill flavour="success" size="large">Success</Pill>
-      <Pill flavour="neutral" size="large">Neutral</Pill>
+      <Pill flavour="warning" size="large">
+        Warning
+      </Pill>
+      <Pill flavour="error" size="large">
+        Error
+      </Pill>
+      <Pill flavour="success" size="large">
+        Success
+      </Pill>
+      <Pill flavour="neutral" size="large">
+        Neutral
+      </Pill>
     </Flex>
   </Flex>
 )
@@ -190,11 +205,18 @@ const PillsTiny = () => (
 const MasterCards = () => (
   <Flex column gap={4}>
     <Flex gap={2}>
-      <MasterCard pillLeft={{ flavour: "error", text: "3" }} pillRight={{ flavour: "warning", text: "2" }} />
+      <MasterCard
+        pillLeft={{ flavour: "error", text: "3" }}
+        pillRight={{ flavour: "warning", text: "2" }}
+      />
       <MasterCard />
     </Flex>
     <Flex gap={2}>
-      <MasterCard pillLeft={{ flavour: "error", text: "3" }} pillRight={{ flavour: "warning", text: "2" }} size="large" />
+      <MasterCard
+        pillLeft={{ flavour: "error", text: "3" }}
+        pillRight={{ flavour: "warning", text: "2" }}
+        size="large"
+      />
       <MasterCard size="large" />
     </Flex>
   </Flex>
@@ -203,11 +225,19 @@ const MasterCards = () => (
 const AlertMasterCards = () => (
   <Flex column gap={4}>
     <Flex gap={2}>
-      <AlertMasterCard onClick={() => console.log("test")} pillLeft={{ flavour: "error", text: "3" }} pillRight={{ flavour: "warning", text: "2" }} />
+      <AlertMasterCard
+        onClick={() => console.log("test")}
+        pillLeft={{ flavour: "error", text: "3" }}
+        pillRight={{ flavour: "warning", text: "2" }}
+      />
       <AlertMasterCard />
     </Flex>
     <Flex gap={2}>
-      <AlertMasterCard pillLeft={{ flavour: "error", text: "3" }} pillRight={{ flavour: "warning", text: "2" }} size="large" />
+      <AlertMasterCard
+        pillLeft={{ flavour: "error", text: "3" }}
+        pillRight={{ flavour: "warning", text: "2" }}
+        size="large"
+      />
       <AlertMasterCard size="large" />
     </Flex>
   </Flex>
diff --git a/src/components/radio-button/index.stories.js b/src/components/radio-button/index.stories.js
@@ -6,7 +6,7 @@ import readme from "./README.md"
 
 import RadioButton from "./index"
 
-const radioButtonStory = storiesOf("COMPONENTS|Controls/RadioButton", module)
+const radioButtonStory = storiesOf("Input/RadioButton", module)
 
 const subData = {
   readme: {
diff --git a/src/components/sidebar/sidebar.stories.js b/src/components/sidebar/sidebar.stories.js
@@ -10,7 +10,7 @@ import { readmeCleanup } from "utils/readme"
 import { Button } from "src/components/button"
 import readme from "./README.md"
 
-const sidebarStory = storiesOf("COMPONENTS|Layout/Sidebar", module)
+const sidebarStory = storiesOf("Templates/Sidebar", module)
 
 const subData = {
   readme: {
diff --git a/src/components/table/table.stories.js b/src/components/table/table.stories.js
@@ -18,7 +18,7 @@ const subData = {
   },
   jest: ["table.test.tsx"],
 }
-const tableStory = storiesOf("COMPONENTS|Controls/Table", module)
+const tableStory = storiesOf("Table/OldTable", module)
 
 const initialState = [
   {
diff --git a/src/components/table/virtualized-table.stories.js b/src/components/table/virtualized-table.stories.js
@@ -18,7 +18,7 @@ const subData = {
   },
   jest: ["table.test.tsx"],
 }
-const virtualizedTableStory = storiesOf("COMPONENTS|Controls/VirtualizedTable", module)
+const virtualizedTableStory = storiesOf("Table/OldVirtualizedTable", module)
 
 const sampleNode = {
   node: { name: "Happiness" },
diff --git a/src/components/tableV2/netdataTable.stories.js b/src/components/tableV2/netdataTable.stories.js
@@ -20,7 +20,7 @@ const colorFilter = {
   value: "",
 }
 
-const StoryTable = storiesOf("COMPONENTS|NetdaTable")
+const StoryTable = storiesOf("Table/Table")
 
 StoryTable.add("Base Table", () => {
   const [value, setValue] = useState()
diff --git a/src/components/tabs/__snapshots__/tabs.test.js.snap b/src/components/tabs/__snapshots__/tabs.test.js.snap
@@ -20,9 +20,9 @@ exports[`Tabs states  * should render uncontrolled 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -70,6 +70,7 @@ exports[`Tabs states  * should render uncontrolled 1`] = `
 }
 
 .c4 {
+  white-space: nowrap;
   border-bottom: 4px solid #42B861;
   box-sizing: border-box;
   min-width: 80px;
@@ -91,6 +92,7 @@ exports[`Tabs states  * should render uncontrolled 1`] = `
 }
 
 .c5 {
+  white-space: nowrap;
   border-bottom: 4px solid rgba(255,255,255,0.0);
   box-sizing: border-box;
   min-width: 80px;
diff --git a/src/components/tabs/styled.js b/src/components/tabs/styled.js
@@ -27,6 +27,7 @@ export const StyledTabs = styled(Flex).attrs(props => ({
 `
 
 export const StyledTab = styled(Flex)`
+  white-space: nowrap;
   border-bottom: ${({ small }) => (small ? "2px" : "4px")} solid
     ${({ active }) => (active ? getColor("accent") : getColor(["transparent", "full"]))};
   box-sizing: border-box;
@@ -50,6 +51,7 @@ export const StyledTab = styled(Flex)`
   }
 `
 export const StyledTabMenu = styled(Flex)`
+  white-space: nowrap;
   color: ${getColor("text")};
   padding: 4px 8px;
   background: ${({ active }) =>
diff --git a/src/components/tabs/tabs.stories.js b/src/components/tabs/tabs.stories.js
@@ -6,7 +6,7 @@ import { readmeCleanup } from "utils/readme"
 import { Tabs, Tab } from "."
 import readme from "./README.md"
 
-const tabsStory = storiesOf("COMPONENTS|Tabs", module)
+const tabsStory = storiesOf("Templates/Tabs", module)
 
 const subData = {
   readme: {
diff --git a/src/components/templates/box/index.stories.js b/src/components/templates/box/index.stories.js
@@ -12,7 +12,7 @@ const subData = {
   },
 }
 
-const flexStory = storiesOf("COMPONENTS|Templates/Box", module)
+const flexStory = storiesOf("Templates/Box", module)
 
 flexStory.add(
   "With Different positions",
diff --git a/src/components/templates/flex/index.stories.js b/src/components/templates/flex/index.stories.js
@@ -6,7 +6,7 @@ import readme from "./README.md"
 
 import Flex from "./index"
 
-const flexStory = storiesOf("COMPONENTS|Templates/Flex", module)
+const flexStory = storiesOf("Templates/Flex", module)
 
 const subData = {
   readme: {
diff --git a/src/components/templates/layer/index.stories.js b/src/components/templates/layer/index.stories.js
@@ -16,7 +16,7 @@ const subData = {
   jest: ["index.test.js"],
 }
 
-const story = storiesOf("COMPONENTS|Templates/Layer", module)
+const story = storiesOf("Templates/Layer", module)
 
 story.add(
   "Simple",
diff --git a/src/components/toggle/toggle.stories.js b/src/components/toggle/toggle.stories.js
@@ -5,7 +5,7 @@ import { Toggle } from "."
 import { readmeCleanup } from "utils/readme"
 import readme from "./README.md"
 
-const toggleStory = storiesOf("COMPONENTS|Controls/Toggle", module)
+const toggleStory = storiesOf("Input/Toggle", module)
 
 const subData = {
   readme: {
diff --git a/src/components/typography/typography.stories.js b/src/components/typography/typography.stories.js
@@ -77,7 +77,7 @@ const controls = (
   </>
 )
 
-storiesOf("COMPONENTS|Utils", module)
+storiesOf("Typography", module)
   .add(
     "Typography",
     () => (
