diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..dfe0770 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/README.md b/README.md new file mode 100644 index 0000000..17604d8 --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +# common-components + sc-traineeship-charretto-code-library + +Here is a quick loom for it as well: https://www.loom.com/share/e8e1f6ff487a43a89a39224ed61908f4 + +Here is chromatic link for the whole lib: https://617153c21240d3003a0a1899-yesiooohtr.chromatic.com/?path=/story/charretto-f3-grid-system-complete-page-view--prd-app-grids-structure-story + diff --git a/package.json b/package.json index 38894c6..0a16bca 100644 --- a/package.json +++ b/package.json @@ -9,17 +9,17 @@ "@babel/core": "^7.12.10", "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", - "@storybook/addon-actions": "^6.2.8", - "@storybook/addon-controls": "^6.2.8", - "@storybook/addon-docs": "^6.2.8", - "@storybook/addon-knobs": "^6.2.8", - "@storybook/addon-links": "^6.2.8", - "@storybook/addon-storyshots": "^6.2.8", + "@storybook/addon-actions": "^6.3.8", + "@storybook/addon-controls": "^6.3.8", + "@storybook/addon-docs": "^6.3.8", + "@storybook/addon-links": "^6.3.8", + "@storybook/addon-storyshots": "^6.3.8", "@styled-system/theme-get": "^5.1.2", "babel-eslint": "^10.1.0", "babel-jest": "^26.1.0", "babel-loader": "^8.2.2", "babel-plugin-styled-components": "^1.12.0", + "chromatic": "^6.0.4", "cross-env": "^7.0.3", "eslint": "^6.8.0", "eslint-plugin-import": "^2.20.1", diff --git a/packages/boilerplate/src/Test.js b/packages/boilerplate/src/Test.js deleted file mode 100644 index 5a22043..0000000 --- a/packages/boilerplate/src/Test.js +++ /dev/null @@ -1,3 +0,0 @@ -export const getInfo = () => { - return ["Testing"]; -}; diff --git a/packages/boilerplate/src/index.js b/packages/boilerplate/src/index.js deleted file mode 100644 index 16721d1..0000000 --- a/packages/boilerplate/src/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import { getInfo } from "./Test"; -const Test = { getInfo }; -export default Test; diff --git a/packages/boilerplate/stories/000-Intro.stories.mdx b/packages/boilerplate/stories/000-Intro.stories.mdx deleted file mode 100644 index 5961677..0000000 --- a/packages/boilerplate/stories/000-Intro.stories.mdx +++ /dev/null @@ -1,7 +0,0 @@ -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/boilerplate/stories/Chakra-test.stories.js b/packages/boilerplate/stories/Chakra-test.stories.js deleted file mode 100644 index fb06c7b..0000000 --- a/packages/boilerplate/stories/Chakra-test.stories.js +++ /dev/null @@ -1,10 +0,0 @@ -import { Button } from "@chakra-ui/react"; - -export default { title: "Chakra test" }; - -export const test2 = () => ( - -); -test2.story = { - name: "Chakra test", -}; diff --git a/packages/boilerplate/stories/Test.stories.js b/packages/boilerplate/stories/Test.stories.js deleted file mode 100644 index 4ea0c0f..0000000 --- a/packages/boilerplate/stories/Test.stories.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from "react"; - -export default { title: "Test" }; - -export const test = () =>
Testing...
; -test.story = { - name: "Test", -}; diff --git a/packages/boilerplate/.storybook/change this to match project defaults.....preview-head.html b/packages/charretto_F3/.storybook/change this to match project defaults.....preview-head.html similarity index 100% rename from packages/boilerplate/.storybook/change this to match project defaults.....preview-head.html rename to packages/charretto_F3/.storybook/change this to match project defaults.....preview-head.html diff --git a/packages/boilerplate/.storybook/how to add svg import support....webpack.config.js b/packages/charretto_F3/.storybook/how to add svg import support....webpack.config.js similarity index 100% rename from packages/boilerplate/.storybook/how to add svg import support....webpack.config.js rename to packages/charretto_F3/.storybook/how to add svg import support....webpack.config.js diff --git a/packages/boilerplate/.storybook/main.js b/packages/charretto_F3/.storybook/main.js similarity index 95% rename from packages/boilerplate/.storybook/main.js rename to packages/charretto_F3/.storybook/main.js index fe4e438..b3adf78 100644 --- a/packages/boilerplate/.storybook/main.js +++ b/packages/charretto_F3/.storybook/main.js @@ -6,7 +6,7 @@ module.exports = { addons: [ "@storybook/addon-actions/register", "@storybook/addon-links/register", - "@storybook/addon-knobs/register", + //"@storybook/addon-knobs/register", { name: "@storybook/addon-docs", options: { diff --git a/packages/boilerplate/.storybook/preview.js b/packages/charretto_F3/.storybook/preview.js similarity index 100% rename from packages/boilerplate/.storybook/preview.js rename to packages/charretto_F3/.storybook/preview.js diff --git a/packages/boilerplate/README.md b/packages/charretto_F3/README.md similarity index 100% rename from packages/boilerplate/README.md rename to packages/charretto_F3/README.md diff --git a/packages/boilerplate/__tests__/boilerplate.test.js b/packages/charretto_F3/__tests__/boilerplate.test.js similarity index 100% rename from packages/boilerplate/__tests__/boilerplate.test.js rename to packages/charretto_F3/__tests__/boilerplate.test.js diff --git a/packages/boilerplate/package.json b/packages/charretto_F3/package.json similarity index 68% rename from packages/boilerplate/package.json rename to packages/charretto_F3/package.json index db2f7d0..1105b34 100644 --- a/packages/boilerplate/package.json +++ b/packages/charretto_F3/package.json @@ -1,8 +1,8 @@ { - "name": "@ecosystemos/boilerplate", + "name": "@ecosystemos/charretto_f3", "version": "0.0.0", - "description": "Component development boilerplate", - "author": "Tero ", + "description": "Charretto Application F3", + "author": "tero Radwan Alhourani ", "license": "MIT", "main": "dist/esm/index.js", "publishConfig": { @@ -23,14 +23,17 @@ "@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/addon-actions": "^6.3.8", + "@storybook/addon-storyshots": "^6.3.8", + "@storybook/addon-docs": "^6.3.8", + "@storybook/addon-controls": "^6.3.8", + "@storybook/addon-links": "^6.3.8", - "@storybook/react": "^6.0.16", + "@iconify/react": "^3.0.1", + "react-responsive-carousel": "^3.2.20", + "chromatic": "^6.0.4", + + "@storybook/react": "^6.3.7", "@styled-system/prop-types": "^5.1.5", "babel-eslint": "^10.1.0", "babel-jest": "^26.1.0", @@ -40,6 +43,7 @@ "react": ">=16.8.6", "react-dom": ">=16.8.6", "@chakra-ui/react": "^1.5.1", + "@chakra-ui/icons": "^1.0.15", "@emotion/react": "^11", "@emotion/styled": "^11", "framer-motion": "^4" diff --git a/packages/charretto_F3/src/HeadNavBar.js b/packages/charretto_F3/src/HeadNavBar.js new file mode 100644 index 0000000..1b3f3d6 --- /dev/null +++ b/packages/charretto_F3/src/HeadNavBar.js @@ -0,0 +1,133 @@ +import charetto_logo from './assets/images/charetto_logo.png'; +import PropTypes from 'prop-types'; + +import { + Box, + Flex, + Avatar, + HStack, + Link, + IconButton, + Button, + Menu, + MenuButton, + MenuList, + MenuItem, + MenuDivider, + useDisclosure, + useColorModeValue, + Stack, + Image, +} from '@chakra-ui/react'; +import { HamburgerIcon, CloseIcon, BellIcon } from '@chakra-ui/icons'; +import { Icon } from '@iconify/react'; +import styled from "styled-components"; + +const whitecons = { + color: 'white', + letterSpacing: '0.02em', +} + +const Links = ['Dashboard', 'Products', 'Calendar']; + +const NavLink = ({ children }) => ( + + {children} + +); + +export const HeadNavBar = ({title,avatarMenuItemText,avatarMenuItemText2,avatarMenuItemText3,...props}) => { + const { isOpen, onOpen, onClose } = useDisclosure(); + + return ( + <> + + + : } + aria-label={'Open Menu'} + display={{ md: 'none' }} + onClick={isOpen ? onClose : onOpen} + /> + + + {title} + + + + + {Links.map((link) => ( + {link} + ))} + + } + > + Action + + + + + + + {avatarMenuItemText} + {avatarMenuItemText2} + + {avatarMenuItemText3} + + + + + + {isOpen ? ( + + + {Links.map((link) => ( + {link} + ))} + + + ) : null} + + + {/* Main Content Here */} + + ); +} +HeadNavBar.propTypes = { + title: PropTypes.string.isRequired, + avatarMenuItemText: PropTypes.string.isRequired, + avatarMenuItemText2: PropTypes.string.isRequired, + avatarMenuItemText3: PropTypes.string.isRequired, +}; \ No newline at end of file diff --git a/packages/charretto_F3/src/HeaderWithA3dotsMenuIcon.js b/packages/charretto_F3/src/HeaderWithA3dotsMenuIcon.js new file mode 100644 index 0000000..344998b --- /dev/null +++ b/packages/charretto_F3/src/HeaderWithA3dotsMenuIcon.js @@ -0,0 +1,51 @@ +import { + Flex, + Heading, + Divider, +} from '@chakra-ui/react'; +import styled from "styled-components"; +import { Icon } from '@iconify/react'; +import PropTypes from 'prop-types'; + +const FlexParent = styled.div` + display:flex; + justify-content:space-between; + padding: 3.5% 1% 0 0; + overflow-x:auto; + align-items:center; +`; +const FlexInnerParent = styled.div` +flex-dir:column; +`; +const HeadingStyles = styled.div` +font-weight:normal; + font-family:Lucida Sans; + font-weight:600; + line-height:36px; + letter-spacing:tight; + font-size:24px; + color:#276749; +`; +const FlexIcon = styled.div` + color:#276749; + font-size:24px; +`; + +export const HeaderWithA3dotsMenuIcon = ({ title, icon, ...props }) => { + return ( + + + {title} + + + + + + + ) +} + +HeaderWithA3dotsMenuIcon.propTypes = { + title: PropTypes.string.isRequired, + icon: PropTypes.string.isRequired, +}; \ No newline at end of file diff --git a/packages/charretto_F3/src/LeftSideBarNavHoverBox.js b/packages/charretto_F3/src/LeftSideBarNavHoverBox.js new file mode 100644 index 0000000..be70b15 --- /dev/null +++ b/packages/charretto_F3/src/LeftSideBarNavHoverBox.js @@ -0,0 +1,47 @@ +import React from 'react' +import { + Flex, + Heading, + Text, + Icon//use iconify to show the icon -- now it shows ""?"" +} from '@chakra-ui/react' +import PropTypes from 'prop-types'; +//import { Icon } from '@iconify/react'; // use this lib + +export const LeftSideBarNavHoverBox=({ titleLeftSideBarNavHoverBox, iconLeftSideBarNavHoverBox, descriptionLeftSideBarNavHoverBox,...props }) =>{ + return ( + <> + + + + {titleLeftSideBarNavHoverBox} + {descriptionLeftSideBarNavHoverBox} + + + ) +} +LeftSideBarNavHoverBox.propTypes = { + titleLeftSideBarNavHoverBox: PropTypes.string.isRequired, + iconLeftSideBarNavHoverBox: PropTypes.string.isRequired, + descriptionLeftSideBarNavHoverBox: PropTypes.string.isRequired, + }; \ No newline at end of file diff --git a/packages/charretto_F3/src/LeftSideBarNavItem.js b/packages/charretto_F3/src/LeftSideBarNavItem.js new file mode 100644 index 0000000..aec2bb4 --- /dev/null +++ b/packages/charretto_F3/src/LeftSideBarNavItem.js @@ -0,0 +1,47 @@ +import React from 'react' +import { + Flex, + Text, + Link, + Menu, + MenuButton, +} from '@chakra-ui/react' +import { Icon } from '@iconify/react'; +import PropTypes from 'prop-types'; + +export const LeftSideBarNavItem = ({ iconLeftSideBarNavItem, titleLeftSideBarNavItem,linkLeftSideBarNavItem, descriptionLeftSideBarNavItem, activeLeftSideBarNavItem, navSizeLeftSideBarNavItem, ...props }) => { + return ( + + + + + + + {titleLeftSideBarNavItem} + + + + + + ) +} +LeftSideBarNavItem.propTypes = { + titleLeftSideBarNavItem: PropTypes.string.isRequired, + iconLeftSideBarNavItem: PropTypes.string.isRequired, + linkLeftSideBarNavItem: PropTypes.string.isRequired, + activeLeftSideBarNavItem: PropTypes.bool.isRequired, + navSizeLeftSideBarNavItem: PropTypes.string.isRequired, + descriptionLeftSideBarNavItem: PropTypes.string.isRequired, + }; \ No newline at end of file diff --git a/packages/charretto_F3/src/LeftSidebar.js b/packages/charretto_F3/src/LeftSidebar.js new file mode 100644 index 0000000..1a6472e --- /dev/null +++ b/packages/charretto_F3/src/LeftSidebar.js @@ -0,0 +1,47 @@ +/** + * TODO: Need converting to styled-components + */ +import React, { useState } from 'react' +import {LeftSideBarNavItem} from './LeftSideBarNavItem' +import { + Flex, +} from '@chakra-ui/react' +import styled from "styled-components"; +import PropTypes from 'prop-types'; + +const FlexParent = styled.div` + display: flex; + justify-content: space-between; + align-items: flex-start; +`; + +export const LeftSidebar = ({titleNavItem,descriptionNavItem,navSizeNavItem,iconNavItem,...props}) => { + const [navSize, changeNavSize] = useState("large") + return ( + + + + + + + + + + ) +} +LeftSidebar.propTypes = { + titleNavItem: PropTypes.string.isRequired, + iconNavItem: PropTypes.string.isRequired, + }; diff --git a/packages/charretto_F3/src/PRDAppGridsStructure.js b/packages/charretto_F3/src/PRDAppGridsStructure.js new file mode 100644 index 0000000..0e5712c --- /dev/null +++ b/packages/charretto_F3/src/PRDAppGridsStructure.js @@ -0,0 +1,189 @@ +import {LeftSidebar} from './LeftSidebar' +import { + Flex, + Grid, + GridItem, + Button, +} from '@chakra-ui/react'; +import {TitleDescriptionInputExpandableCard} from './TitleDescription_InputExpandableCard'; +import {TitleDescriptionItemListExpandableCard} from './TitleDescription_ItemListExpandableCard'; +import {RightSideAppCard} from './Right_Side_App_Card'; +import {RightSideLinksCard} from './Right_Side_Links_Card'; +import {HeaderWithA3dotsMenuIcon} from './HeaderWithA3dotsMenuIcon'; +import {HeadNavBar} from './HeadNavBar' + +//import {NoItemCards,CreateNoItemCard,UpdateNoItemCard} from './../../data/queries'; +//import { useQuery,useMutation} from "@apollo/client"; +//import {connect} from "reacr-redux"; +import PropTypes from "prop-types"; + +export const PRDAppGridsStructure = ({ text, url }) => { + //const {data, loading, error} = useQuery(NoItemCards); + //const [addCard,{dataCreateResponse, loadingCreateResponse, errorCreateResponse}] = useMutation(CreateNoItemCard); + //const [updateCard,{dataUpdateResponse, loadingUpdateResponse, errorUpdateResponse}] = useMutation(UpdateNoItemCard, { + // variables: { + // id: "cktwq4lnkebg70b08p988h3gd", + // content: "Vision update param", + // }, + // }); + + // if(loading){ + // return(

); + // } + // if(error){ + // return(

); + // } + + const data = [ + { + "title": "Vision updated", + "description": "Where do we want out product to be in the future", + "contentInputPlaceHolder": "Click here to start editing...", + "content": "Vision content Updated", + "order": 1 + }, + { + "title": "Description", + "description": "General Description of the application", + "contentInputPlaceHolder": "Click here to start editing...", + "content": null, + "order": 2 + }, + { + "title": "Purpose", + "description": "What is the key use case, purpose or mission statment for this application from the users' perspective and from our perspective?", + "contentInputPlaceHolder": "Click here to start editing...", + "content": null, + "order": 3 + }, + { + "title": "User Problem", + "description": "Pain point(s) or challenge(s) user(s) have in the markets and existing solutions. Why are we building this?", + "contentInputPlaceHolder": "Click here to start editing...", + "content": null, + "order": 4 + }, + { + "title": "User Value", + "description": "How the propsed solution generates values for the user(s)?", + "contentInputPlaceHolder": "Click here to start editing...", + "content": null, + "order": 5 + }, + { + "title": "Assumptions & Decisions", + "description": "Key bussiness logic, user experience an/or technical architeracture related assumptions & decisions concluded for this solution", + "contentInputPlaceHolder": "Click here to start editing...", + "content": null, + "order": 6 + } + ] + + return ( + <> + + + + + {/* Column 1 */} + + + + + + {/* Column 2 */} + + {/*