charretto F3 design

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

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
+

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",

packages/boilerplate/.storybook/main.js → 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: {

packages/boilerplate/package.json → 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 <tero@digiole.com>",
+  "description": "Charretto Application F3",
+  "author": "tero <tero@digiole.com> Radwan Alhourani <github/rhourani>",
   "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"

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 }) => (
+  <Link
+    px={2}
+    py={1}
+    rounded={'md'}
+    _hover={{
+      textDecoration: 'none',
+      bg: useColorModeValue('green.700', 'green.700'),
+    }}
+    href={'#'}>
+    {children}
+  </Link>
+);
+
+export const HeadNavBar = ({title,avatarMenuItemText,avatarMenuItemText2,avatarMenuItemText3,...props}) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <>
+      <Box bg={useColorModeValue('green.700', 'green.700')} px={4}>
+        <Flex h={16} alignItems={'center'} justifyContent={'space-between'}>
+          <IconButton
+            size={'md'}
+            colorScheme={'green.700'}
+            icon={isOpen ? <CloseIcon /> : <HamburgerIcon />}
+            aria-label={'Open Menu'}
+            display={{ md: 'none' }}
+            onClick={isOpen ? onClose : onOpen}
+          />
+          <HStack style= {whitecons} spacing={8} alignItems={'center'}>
+            <Image ml="6.2px" h="40px" w="40px" src={charetto_logo}></Image>
+            <Box>{title}</Box>
+
+          </HStack>
+          <Flex alignItems={'center'}>
+          <HStack
+              as={'nav'}
+              spacing={4}
+              display={{ base: 'none', md: 'flex' }}
+              style= {whitecons}>
+              {Links.map((link) => (
+                <NavLink key={link}>{link}</NavLink>
+              ))}
+            </HStack>
+            <IconButton
+              colorScheme={'whiteAlpha'}
+              borderRadius="50%"
+              bgColor="green.700"
+              size={'lg'}
+              mr={4}
+              icon={<Icon icon="mdi:bell-outline" />}
+              >
+              Action
+            </IconButton>
+            <Menu >
+              <MenuButton
+                as={Button}
+                rounded={'full'}
+                variant={'link'}
+                cursor={'pointer'}
+                minW={0}
+
+                >
+                <Avatar
+                  size={'sm'}
+                  src={
+                    'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9'
+                  }
+                />
+              </MenuButton >
+              <MenuList >
+                <MenuItem>{avatarMenuItemText}</MenuItem>
+                <MenuItem>{avatarMenuItemText2}</MenuItem>
+                <MenuDivider />
+                <MenuItem>{avatarMenuItemText3}</MenuItem>
+              </MenuList>
+            </Menu>
+          </Flex>
+        </Flex>
+
+        {isOpen ? (
+          <Box  pb={4} display={{ md: 'none' }}>
+            <Stack style= {whitecons} as={'nav'} spacing={4}>
+              {Links.map((link) => (
+                <NavLink key={link}>{link}</NavLink>
+              ))}
+            </Stack>
+          </Box>
+        ) : null}
+      </Box>
+
+    {/* <Box p={4}>Main Content Here</Box> */}
+    </>
+  );
+}
+HeadNavBar.propTypes = {
+  title: PropTypes.string.isRequired,
+  avatarMenuItemText: PropTypes.string.isRequired,
+  avatarMenuItemText2: PropTypes.string.isRequired,
+  avatarMenuItemText3: PropTypes.string.isRequired,
+};

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 (
+    <FlexParent>
+      <FlexInnerParent>
+        <HeadingStyles><Heading>{title}</Heading></HeadingStyles>
+        <Divider opacity="1" borderColor="#276749" border="1px solid #276749" orientation="horizontal" />
+      </FlexInnerParent>
+      <FlexIcon>
+        <Icon icon={icon} />
+      </FlexIcon>
+    </FlexParent>
+  )
+}
+
+HeaderWithA3dotsMenuIcon.propTypes = {
+  title: PropTypes.string.isRequired,
+  icon: PropTypes.string.isRequired,
+};

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 (
+        <>
+            <Flex
+                pos="absolute"
+                mt="calc(100px - 7.5px)"
+                ml="-10px"
+                width={0}
+                height={0}
+                borderTop="10px solid transparent"
+                borderBottom="10px solid transparent"
+                borderRight="10px solid #82AAAD"
+            />
+            <Flex
+                h={200}
+                w={200}
+                w="100%"
+                flexDir="column"
+                alignItems="center"
+                justify="center"
+                backgroundColor="#82AAAD"
+                borderRadius="10px"
+                color="#fff"
+                textAlign="center"
+            >
+                <Icon as={iconLeftSideBarNavHoverBox} fontSize="3xl" mb={4} />
+                <Heading size="md" fontWeight="normal">{titleLeftSideBarNavHoverBox}</Heading>
+                <Text>{descriptionLeftSideBarNavHoverBox}</Text>
+            </Flex>
+        </>
+    )
+}
+LeftSideBarNavHoverBox.propTypes = {
+    titleLeftSideBarNavHoverBox: PropTypes.string.isRequired,
+    iconLeftSideBarNavHoverBox: PropTypes.string.isRequired,
+    descriptionLeftSideBarNavHoverBox: PropTypes.string.isRequired,
+  };