SDP Componenet bar

packages/sdkComponent/.storybook/change this to match project defaults.....preview-head.html

@@ -0,0 +1,30 @@
+<link
+  href="https://fonts.googleapis.com/css?family=Open+Sans"
+  rel="stylesheet"
+/>
+
+<style>
+  /* Change the white to any color ;) */
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 30px #f5f8f7 inset !important;
+  }
+
+  /*Change text in autofill textbox*/
+  input:-webkit-autofill {
+    -webkit-text-fill-color: #1e1d1d !important;
+  }
+  p {
+    margin: 0;
+  }
+  body {
+  margin:0 !important;
+   padding:0 !important;
+  }
+
+  * {
+    box-sizing: border-box;
+    }
+</style>

packages/sdkComponent/.storybook/how to add svg import support....webpack.config.js

@@ -0,0 +1,27 @@
+module.exports = ({ config }) => {
+  const fileLoaderRule = config.module.rules.find(
+    rule => !Array.isArray(rule.test) && rule.test.test(".svg"),
+  );
+  fileLoaderRule.exclude = /\.svg$/;
+  config.module.rules.push({
+    test: /\.svg$/,
+    use: ["@svgr/webpack", "url-loader"],
+  });
+  return config;
+};
+
+/*
+  const assetRule = config.module.rules.find(({ test }) => test.test(".svg"));
+
+const assetLoader = {
+  loader: assetRule.loader,
+  options: assetRule.options || assetRule.query,
+};
+
+// Merge our rule with existing assetLoader rules
+config.module.rules.unshift({
+  test: /\.svg$/,
+  use: ["@svgr/webpack", assetLoader],
+});
+
+*/

packages/sdkComponent/.storybook/main.js

@@ -0,0 +1,33 @@
+const path = require("path");
+const toPath = _path => path.join(process.cwd(), _path);
+
+module.exports = {
+  stories: ["../stories/**/*.stories.@(js|mdx)"],
+  addons: [
+    "@storybook/addon-actions/register",
+    "@storybook/addon-links/register",
+    "@storybook/addon-knobs/register",
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        configureJSX: true,
+        babelOptions: {},
+        sourceLoaderOptions: null,
+      },
+    },
+    "@storybook/addon-controls",
+  ],
+  webpackFinal: async config => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          "@emotion/core": toPath("../../node_modules/@emotion/react"),
+          "emotion-theming": toPath("../../node_modules/@emotion/react"),
+        },
+      },
+    };
+  },
+};

packages/sdkComponent/.storybook/preview.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { ChakraProvider } from "@chakra-ui/react";
+//import theme from '../src/theme'
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+};
+
+const withChakra = StoryFn => {
+  return (
+    /* 
+    <ChakraProvider resetCSS theme={theme}>
+      */
+    <ChakraProvider resetCSS>
+      <StoryFn />
+    </ChakraProvider>
+  );
+};
+
+export const decorators = [withChakra];

packages/sdkComponent/README.md

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

packages/sdkComponent/__tests__/boilerplate.test.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const boilerplate = require('..');
+
+describe('boilerplate', () => {
+    it('needs tests');
+});

packages/sdkComponent/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@ecosystemos/sdkComponent",
+  "version": "0.0.0",
+  "description": "Component development boilerplate",
+  "author": "Tero <tero@digiole.com>",
+  "license": "MIT",
+  "main": "dist/esm/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn build:cjs && yarn build:es && yarn build:esm",
+    "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel ./src --out-dir ./dist/esm",
+    "build:cjs": "cross-env NODE_ENV=production BABEL_ENV=cjs babel ./src --out-dir ./dist/cjs",
+    "build:es": "cross-env NODE_ENV=production BABEL_ENV=es babel ./src --out-dir ./dist/es",
+    "storybook": "start-storybook"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.11.5",
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-react": "^7.9.4",
+    "@storybook/addon-actions": "^6.2.8",
+    "@storybook/addon-storyshots": "^6.2.8",
+    "@storybook/addon-docs": "^6.2.8",
+    "@storybook/addon-controls": "^6.2.8",
+    "@storybook/addon-knobs": "^6.2.8",
+    "@storybook/addon-links": "^6.2.8",
+
+    "@storybook/react": "^6.0.16",
+    "@styled-system/prop-types": "^5.1.5",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.1.0",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-react-docgen": "^4.2.1",
+    "cross-env": "^7.0.2",
+    "react": ">=16.8.6",
+    "react-dom": ">=16.8.6",
+    "@chakra-ui/react": "^1.5.1",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "framer-motion": "^4"
+  },
+  "peerDependencies": {
+
+  },
+  "dependencies": {
+  }
+}

packages/sdkComponent/src/Test.js

@@ -0,0 +1,3 @@
+export const getInfo = () => {
+  return ["Testing"];
+};

packages/sdkComponent/src/components/SDPBarComponent.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Grid } from "@chakra-ui/react";
+import { SDPScaleComponent } from "./subComponents/SDPScaleComponent";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+export function SDPBar({ from = 0, to = 1 }) {
+  const range = [-2, -1, 0, 1, 2, 3];
+  const Wrap = styled.div`
+    margin-left: 7px;
+  `;
+
+  const FromVal = val => {
+    if (from >= val) {
+      return Math.abs(val - from - 0.1) * 100 > 100
+        ? 100
+        : Math.abs((val - from) * 100);
+    } else if (to >= val + 1 && from <= val) {
+      return 0;
+    } else if (to >= val) {
+      return 0;
+    } else {
+      return 100;
+    }
+  };
+  const ToVal = val => {
+    if (to < val + 1 && val <= to) {
+      return Math.abs((val % 1) - (to % 1)) * 100;
+    } else {
+      return 100;
+    }
+  };
+  return (
+    <Grid templateColumns="repeat(6, 1fr)" gap={2}>
+      {range.map((val, key) => {
+        return (
+          <Wrap key={key}>
+            <SDPScaleComponent
+              from={FromVal(val)}
+              to={ToVal(val)}
+              value={val}
+            />
+          </Wrap>
+        );
+      })}
+    </Grid>
+  );
+}
+SDPBar.propTypes = {
+  from: PropTypes.number,
+  to: PropTypes.number,
+};

packages/sdkComponent/src/components/subComponents/SDPScaleComponent.jsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { HStack } from "@chakra-ui/react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { ThemeProvider } from "styled-components";
+export const SDPScaleComponent = ({ from, to, value }) => {
+  const Wrap = styled.div`
+    color: ${props => props.theme.light};
+    position: absolute;
+    height: 22px;
+    text-align: center;
+    font-family: Roboto;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 900;
+    letter-spacing: 0em;
+    text-align: center;
+    line-height: 22px;
+  `;
+  const Cube = styled.div`
+    height: 22px;
+    background: ${props => (props.position === "Mid" ? "#4CA6CD" : "#B4E4F8")};
+    width: ${props => props.widthScale};
+  `;
+  const justifyCenter = {  justifyContent: "center"};
+
+  // eslint-disable-next-line no-unused-vars
+  const light = {
+    light: "white",
+  };
+  // eslint-disable-next-line no-unused-vars
+  const dark = {
+    dark: "#737373",
+  };
+
+  const boxType = ["Start", "Mid", "End"];
+
+  const sendHeightVal = data => {
+    if (data === "Start") {
+      if (from === 100 && to === 0) {
+        return 100;
+      } else if (to === 100 && from === 0) {
+        return 0;
+      } else {
+        return from;
+      }
+    } else if (data === "Mid") {
+      if (from === 100 && to === 0) {
+        return 0;
+      } else if (to === 100 && from === 0) {
+        return 100;
+      } else {
+        return from > to ? from - to : to - from;
+      }
+    } else if (data === "End") {
+      if (from === 100 && to === 0) {
+        return 0;
+      } else if (to === 100 && from === 0) {
+        return 0;
+      } else {
+        return 100 - to;
+      }
+    }
+  };
+  return (
+    <ThemeProvider theme={light}>
+        <HStack style={justifyCenter} spacing="0px">
+          <Wrap>{value}</Wrap>
+          {boxType.map((type, key) => {
+            return (
+              <Cube
+                key={key}
+                widthScale={() => {
+                  return sendHeightVal(type) + "%";
+                }}
+                position={type}
+              />
+            );
+          })}
+        </HStack>
+    </ThemeProvider>
+  );
+};
+SDPScaleComponent.propTypes = {
+  from: PropTypes.number,
+  to: PropTypes.number,
+  value: PropTypes.number,
+  theme: PropTypes.string,
+  position: PropTypes.string,
+  widthScale: PropTypes.string,
+};

packages/sdkComponent/src/index.js

@@ -0,0 +1,3 @@
+import { getInfo } from "./Test";
+const Test = { getInfo };
+export default Test;

packages/sdkComponent/stories/000-Intro.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
+
+<Meta title="Doc/Intro" />
+
+# Get started
+
+The goal is to make building durable UIs more productive and satisfying.

packages/sdkComponent/stories/Chakra-test.stories.js

@@ -0,0 +1,10 @@
+import { Button } from "@chakra-ui/react";
+
+export default { title: "Chakra test" };
+
+export const test2 = () => (
+  <Button colorScheme="blue">I just consumed some ⚡️Chakra!</Button>
+);
+test2.story = {
+  name: "Chakra test",
+};

packages/sdkComponent/stories/SDP.stories.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { SDPBar } from "../src/components/SDPBarComponent";
+
+export default {
+  title: "Startup/SDP",
+  component: SDPBar,
+};
+
+const Template = (args) => (
+    <SDPBar {...args} />
+);
+
+export const SdpComponent = Template.bind({});
+SdpComponent.args = {
+  from: -1.4,
+  to: 1.6,
+};

packages/sdkComponent/stories/Test.stories.js

@@ -0,0 +1,8 @@
+import React from "react";
+
+export default { title: "Test" };
+
+export const test = () => <div>Testing...</div>;
+test.story = {
+  name: "Test",
+};