From 5818c8eeaf35cf71b8c49089eab25e1411694a5b Mon Sep 17 00:00:00 2001 From: Abhijeet Date: Fri, 30 Apr 2021 13:06:14 +0530 Subject: [PATCH 1/2] SDP Componenet bar --- ...tch project defaults.....preview-head.html | 30 +++++++ ...dd svg import support....webpack.config.js | 27 ++++++ packages/sdkComponent/.storybook/main.js | 33 +++++++ packages/sdkComponent/.storybook/preview.js | 20 +++++ packages/sdkComponent/README.md | 11 +++ .../__tests__/boilerplate.test.js | 7 ++ packages/sdkComponent/package.json | 52 +++++++++++ packages/sdkComponent/src/Test.js | 3 + .../sdkComponent/src/assets/Css/Component.css | 16 ++++ .../src/components/SDPBarComponent.jsx | 54 ++++++++++++ .../subComponents/SDPScaleComponent.jsx | 88 +++++++++++++++++++ packages/sdkComponent/src/index.js | 3 + .../stories/000-Intro.stories.mdx | 7 ++ .../stories/Chakra-test.stories.js | 10 +++ packages/sdkComponent/stories/SDP.stories.js | 17 ++++ packages/sdkComponent/stories/Test.stories.js | 8 ++ 16 files changed, 386 insertions(+) create mode 100644 packages/sdkComponent/.storybook/change this to match project defaults.....preview-head.html create mode 100644 packages/sdkComponent/.storybook/how to add svg import support....webpack.config.js create mode 100644 packages/sdkComponent/.storybook/main.js create mode 100644 packages/sdkComponent/.storybook/preview.js create mode 100644 packages/sdkComponent/README.md create mode 100644 packages/sdkComponent/__tests__/boilerplate.test.js create mode 100644 packages/sdkComponent/package.json create mode 100644 packages/sdkComponent/src/Test.js create mode 100644 packages/sdkComponent/src/assets/Css/Component.css create mode 100644 packages/sdkComponent/src/components/SDPBarComponent.jsx create mode 100644 packages/sdkComponent/src/components/subComponents/SDPScaleComponent.jsx create mode 100644 packages/sdkComponent/src/index.js create mode 100644 packages/sdkComponent/stories/000-Intro.stories.mdx create mode 100644 packages/sdkComponent/stories/Chakra-test.stories.js create mode 100644 packages/sdkComponent/stories/SDP.stories.js create mode 100644 packages/sdkComponent/stories/Test.stories.js diff --git a/packages/sdkComponent/.storybook/change this to match project defaults.....preview-head.html b/packages/sdkComponent/.storybook/change this to match project defaults.....preview-head.html new file mode 100644 index 0000000..0fb0123 --- /dev/null +++ b/packages/sdkComponent/.storybook/change this to match project defaults.....preview-head.html @@ -0,0 +1,30 @@ + + + diff --git a/packages/sdkComponent/.storybook/how to add svg import support....webpack.config.js b/packages/sdkComponent/.storybook/how to add svg import support....webpack.config.js new file mode 100644 index 0000000..1ed1dd6 --- /dev/null +++ b/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], +}); + +*/ diff --git a/packages/sdkComponent/.storybook/main.js b/packages/sdkComponent/.storybook/main.js new file mode 100644 index 0000000..fe4e438 --- /dev/null +++ b/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"), + }, + }, + }; + }, +}; diff --git a/packages/sdkComponent/.storybook/preview.js b/packages/sdkComponent/.storybook/preview.js new file mode 100644 index 0000000..e9ece40 --- /dev/null +++ b/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 ( + /* + + */ + + + + ); +}; + +export const decorators = [withChakra]; diff --git a/packages/sdkComponent/README.md b/packages/sdkComponent/README.md new file mode 100644 index 0000000..e847f26 --- /dev/null +++ b/packages/sdkComponent/README.md @@ -0,0 +1,11 @@ +# `boilerplate` + +> TODO: description + +## Usage + +``` +const boilerplate = require('boilerplate'); + +// TODO: DEMONSTRATE API +``` diff --git a/packages/sdkComponent/__tests__/boilerplate.test.js b/packages/sdkComponent/__tests__/boilerplate.test.js new file mode 100644 index 0000000..9dd98f4 --- /dev/null +++ b/packages/sdkComponent/__tests__/boilerplate.test.js @@ -0,0 +1,7 @@ +'use strict'; + +const boilerplate = require('..'); + +describe('boilerplate', () => { + it('needs tests'); +}); diff --git a/packages/sdkComponent/package.json b/packages/sdkComponent/package.json new file mode 100644 index 0000000..b085713 --- /dev/null +++ b/packages/sdkComponent/package.json @@ -0,0 +1,52 @@ +{ + "name": "@ecosystemos/sdkComponent", + "version": "0.0.0", + "description": "Component development boilerplate", + "author": "Tero ", + "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": { + } +} diff --git a/packages/sdkComponent/src/Test.js b/packages/sdkComponent/src/Test.js new file mode 100644 index 0000000..5a22043 --- /dev/null +++ b/packages/sdkComponent/src/Test.js @@ -0,0 +1,3 @@ +export const getInfo = () => { + return ["Testing"]; +}; diff --git a/packages/sdkComponent/src/assets/Css/Component.css b/packages/sdkComponent/src/assets/Css/Component.css new file mode 100644 index 0000000..16b694d --- /dev/null +++ b/packages/sdkComponent/src/assets/Css/Component.css @@ -0,0 +1,16 @@ +@media screen and (max-width: 550px) { + .sdp-scale-text { + width: 8% !important; + } +} +.sdp-scale-text { + width: 16%; +} + +.grid-item { + padding: 10px 0 0 !important; +} +.justify-center +{ + justify-content: center !important; +} diff --git a/packages/sdkComponent/src/components/SDPBarComponent.jsx b/packages/sdkComponent/src/components/SDPBarComponent.jsx new file mode 100644 index 0000000..0e37fa6 --- /dev/null +++ b/packages/sdkComponent/src/components/SDPBarComponent.jsx @@ -0,0 +1,54 @@ +import React from "react"; +import { Grid } from "@chakra-ui/react"; +import { SDPScaleComponent } from "./subComponents/SDPScaleComponent"; +import "../assets/Css/Component.css"; +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 ( + + {range.map((val, key) => { + debugger; + return ( + + + + ); + })} + + ); +} +SDPBar.propTypes = { + from: PropTypes.number, + to: PropTypes.number, +}; diff --git a/packages/sdkComponent/src/components/subComponents/SDPScaleComponent.jsx b/packages/sdkComponent/src/components/subComponents/SDPScaleComponent.jsx new file mode 100644 index 0000000..95de7a2 --- /dev/null +++ b/packages/sdkComponent/src/components/subComponents/SDPScaleComponent.jsx @@ -0,0 +1,88 @@ +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}; + `; + // 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 ( + + + {value} + {boxType.map((type, key) => { + return ( + { + return sendHeightVal(type) + "%"; + }} + position={type} + /> + ); + })} + + + ); +}; +SDPScaleComponent.propTypes = { + from: PropTypes.number, + to: PropTypes.number, + value: PropTypes.number, + theme: PropTypes.string, + position: PropTypes.string, + widthScale: PropTypes.string, +}; diff --git a/packages/sdkComponent/src/index.js b/packages/sdkComponent/src/index.js new file mode 100644 index 0000000..16721d1 --- /dev/null +++ b/packages/sdkComponent/src/index.js @@ -0,0 +1,3 @@ +import { getInfo } from "./Test"; +const Test = { getInfo }; +export default Test; diff --git a/packages/sdkComponent/stories/000-Intro.stories.mdx b/packages/sdkComponent/stories/000-Intro.stories.mdx new file mode 100644 index 0000000..5961677 --- /dev/null +++ b/packages/sdkComponent/stories/000-Intro.stories.mdx @@ -0,0 +1,7 @@ +import { Meta, Story, Preview } from "@storybook/addon-docs/blocks"; + + + +# Get started + +The goal is to make building durable UIs more productive and satisfying. diff --git a/packages/sdkComponent/stories/Chakra-test.stories.js b/packages/sdkComponent/stories/Chakra-test.stories.js new file mode 100644 index 0000000..fb06c7b --- /dev/null +++ b/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 = () => ( + +); +test2.story = { + name: "Chakra test", +}; diff --git a/packages/sdkComponent/stories/SDP.stories.js b/packages/sdkComponent/stories/SDP.stories.js new file mode 100644 index 0000000..a02c5dc --- /dev/null +++ b/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) => ( + +); + +export const SdpComponent = Template.bind({}); +SdpComponent.args = { + from: -1.4, + to: 1.6, +}; diff --git a/packages/sdkComponent/stories/Test.stories.js b/packages/sdkComponent/stories/Test.stories.js new file mode 100644 index 0000000..4ea0c0f --- /dev/null +++ b/packages/sdkComponent/stories/Test.stories.js @@ -0,0 +1,8 @@ +import React from "react"; + +export default { title: "Test" }; + +export const test = () =>
Testing...
; +test.story = { + name: "Test", +}; From 0eced4311664c5c2a48e740aa5000f6807d037f5 Mon Sep 17 00:00:00 2001 From: abhijeets-ht Date: Sat, 1 May 2021 11:05:04 +0530 Subject: [PATCH 2/2] Css removed --- .../sdkComponent/src/assets/Css/Component.css | 16 -------- .../src/components/SDPBarComponent.jsx | 4 +- .../subComponents/SDPScaleComponent.jsx | 39 ++++++++++--------- 3 files changed, 22 insertions(+), 37 deletions(-) delete mode 100644 packages/sdkComponent/src/assets/Css/Component.css diff --git a/packages/sdkComponent/src/assets/Css/Component.css b/packages/sdkComponent/src/assets/Css/Component.css deleted file mode 100644 index 16b694d..0000000 --- a/packages/sdkComponent/src/assets/Css/Component.css +++ /dev/null @@ -1,16 +0,0 @@ -@media screen and (max-width: 550px) { - .sdp-scale-text { - width: 8% !important; - } -} -.sdp-scale-text { - width: 16%; -} - -.grid-item { - padding: 10px 0 0 !important; -} -.justify-center -{ - justify-content: center !important; -} diff --git a/packages/sdkComponent/src/components/SDPBarComponent.jsx b/packages/sdkComponent/src/components/SDPBarComponent.jsx index 0e37fa6..c4973b0 100644 --- a/packages/sdkComponent/src/components/SDPBarComponent.jsx +++ b/packages/sdkComponent/src/components/SDPBarComponent.jsx @@ -1,7 +1,6 @@ import React from "react"; import { Grid } from "@chakra-ui/react"; import { SDPScaleComponent } from "./subComponents/SDPScaleComponent"; -import "../assets/Css/Component.css"; import PropTypes from "prop-types"; import styled from "styled-components"; @@ -32,9 +31,8 @@ export function SDPBar({ from = 0, to = 1 }) { } }; return ( - + {range.map((val, key) => { - debugger; return ( { const Wrap = styled.div` - color: ${(props) => props.theme.light}; + color: ${props => props.theme.light}; position: absolute; height: 22px; text-align: center; @@ -18,10 +18,12 @@ export const SDPScaleComponent = ({ from, to, value }) => { line-height: 22px; `; const Cube = styled.div` - height:22px; - background:${(props) => props.position === "Mid" ? "#4CA6CD" : "#B4E4F8"}; - width:${(props) => props.widthScale}; + 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", @@ -33,7 +35,7 @@ export const SDPScaleComponent = ({ from, to, value }) => { const boxType = ["Start", "Mid", "End"]; - const sendHeightVal = (data) => { + const sendHeightVal = data => { if (data === "Start") { if (from === 100 && to === 0) { return 100; @@ -62,19 +64,20 @@ export const SDPScaleComponent = ({ from, to, value }) => { }; return ( - - {value} - {boxType.map((type, key) => { - return ( - { - return sendHeightVal(type) + "%"; - }} - position={type} - /> - ); - })} - + + {value} + {boxType.map((type, key) => { + return ( + { + return sendHeightVal(type) + "%"; + }} + position={type} + /> + ); + })} + ); };