@lanaco/lnc-react-ui 2.1.42 → 3.0.0-rc.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2020 Lanaco
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2020 Lanaco
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,39 +1,39 @@
-# Lanaco ReactJS UI components library
-
-This library includes basic and advanced UI components used with ReactJS frontend framework
-
-- [Installing](#installing)
-- [Developing Locally](#requirements)
-- [Contributing](#contributing)
-- [License](#license)
-
-
-## Installing
-
-```
-$ npm install --save-dev @lanaco/lnc-react-ui
-```
-
-
-## Developing Locally
-
-To see your changes to `@lanaco/lnc-react-ui` locally, all you need is to run storybook with `npm start` command
-
-```
-$ git clone https://github.com/lanaco/lnc-react-ui
-$ cd /path/to/component-library
-$ npm start
-```
-
-## Contributing
-
-1. Clone this repo
-2. Create a branch: `git checkout -b your-feature`
-3. Make some changes
-4. Test your changes by [running your local version](#requirements)
-5. Push your branch and open a Pull Request
-
-
-## License
-
-This code is open source software licensed under the MIT License.
+# Lanaco ReactJS UI components library
+
+This library includes basic and advanced UI components used with ReactJS frontend framework
+
+- [Installing](#installing)
+- [Developing Locally](#requirements)
+- [Contributing](#contributing)
+- [License](#license)
+
+
+## Installing
+
+```
+$ npm install --save-dev @lanaco/lnc-react-ui
+```
+
+
+## Developing Locally
+
+To see your changes to `@lanaco/lnc-react-ui` locally, all you need is to run storybook with `npm start` command
+
+```
+$ git clone https://github.com/lanaco/lnc-react-ui
+$ cd /path/to/component-library
+$ npm start
+```
+
+## Contributing
+
+1. Clone this repo
+2. Create a branch: `git checkout -b your-feature`
+3. Make some changes
+4. Test your changes by [running your local version](#requirements)
+5. Push your branch and open a Pull Request
+
+
+## License
+
+This code is open source software licensed under the MIT License.

package/custom-addons/ThemeSelector.js

@@ -0,0 +1,111 @@
+// OutlineSelector.js
+
+import React, { memo, useState } from "react";
+import { useGlobals } from "@storybook/api";
+import {
+  Icons,
+  IconButton,
+} from "@storybook/components";
+import { createPortal } from "react-dom";
+import { useRef } from "react";
+import styled from "@emotion/styled";
+import { themes } from "../src/_utils/theme";
+import "./theme-selector.css"
+
+const StyledTooltip = styled.div`
+  position: absolute;
+  width: 180px;
+  z-index: 2147483647;
+  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.05))
+    drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
+  border-radius: 8px;
+  font-size: 12px;
+`;
+
+const Item = styled.div`
+  padding: 7px 15px;
+  cursor: pointer;
+  font-weight: 400;
+`;
+
+const Triangle = styled.div`
+  position: absolute;
+  border-style: solid;
+  -webkit-transform: translate3d(8px, 0px, 0px);
+  -moz-transform: translate3d(8px, 0px, 0px);
+  -ms-transform: translate3d(8px, 0px, 0px);
+  transform: translate3d(8px, 0px, 0px);
+  bottom: autopx;
+  top: -8px;
+  right: autopx;
+  left: autopx;
+  border-bottom-width: 8px;
+  border-top-width: 0px;
+  border-right-width: 8px;
+  border-left-width: 8px;
+  border-top-color: transparent;
+  border-left-color: transparent;
+  border-right-color: transparent;
+`;
+
+export const ThemeSelector = memo(() => {
+  const [globals, updateGlobals] = useGlobals();
+  const buttonRef = useRef();
+  const [toggleTooltip, setToggleTooltip] = useState();
+
+  const changeTheme = (themeName) => {
+    setToggleTooltip((prev) => !prev);
+    updateGlobals({
+      theme: themeName,
+    });
+  };
+
+  return (
+    <div ref={buttonRef}>
+      <IconButton
+        style={{ position: "relative" }}
+        key="outline"
+        active={globals["theme"]}
+        title="Apply themes to the preview"
+        onClick={() => setToggleTooltip((prev) => !prev)}
+      >
+        <Icons icon="photo" />
+      </IconButton>
+      {toggleTooltip &&
+        createPortal(
+          <>
+            <Triangle
+              className="tooltip-triangle-lnc"
+              style={{
+                position: "absolute",
+                transform: "translate(74px)",
+                top: buttonRef?.current?.getBoundingClientRect()?.bottom + 5,
+                left: buttonRef?.current?.getBoundingClientRect()?.left - 70,
+              }}
+            ></Triangle>
+            <StyledTooltip
+              className="tooltip-lnc"
+              style={{
+                top: buttonRef?.current?.getBoundingClientRect()?.bottom + 12,
+                left: buttonRef?.current?.getBoundingClientRect()?.left - 90,
+              }}
+            >
+              {themes.map((theme, i) => (
+                <Item
+                  key={i}
+                  style={{
+                    color:
+                      globals["theme"] === theme?.name ? "#FF4785" : "unset",
+                  }}
+                  onClick={() => changeTheme(theme?.name)}
+                >
+                  {theme?.name}
+                </Item>
+              ))}
+            </StyledTooltip>
+          </>,
+          document.body
+        )}
+    </div>
+  );
+});

package/custom-addons/register.js

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import { addons, types } from '@storybook/addons';
+
+import { ThemeSelector } from './ThemeSelector';
+
+const ADDON_ID = 'smyaddon';
+
+addons.register(ADDON_ID, () => {
+  addons.add(ADDON_ID, {
+    title: 'Theme',
+    type: types.TOOL,
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: () => <ThemeSelector />,
+  });
+});

package/custom-addons/theme-selector.css

@@ -0,0 +1,17 @@
+.dark .tooltip-lnc {
+    background: rgba(0, 0, 0, 0.95);
+    color: white;
+}
+
+.light .tooltip-lnc{
+    background: rgba(255,255,255,0.95);
+    color: black;
+}
+
+.dark .tooltip-triangle-lnc {
+    border-bottom-color: rgba(0, 0, 0, 0.95);
+}
+
+.light .tooltip-triangle-lnc{
+    border-bottom-color: rgba(255,255,255,0.95);
+}

package/jest.config.js

@@ -0,0 +1,7 @@
+//Jest is hitting CSS imports and trying to parse them as if they were JavaScript.
+//The moduleNameMapper setting tells Jest how to interpret files with different extensions.
+module.exports = {
+    moduleNameMapper: {
+        '\\.(css|less)$': '<rootDir>/test/jest/__mocks__/styleMock.js',
+    },
+};