diff --git a/02/Task02.js b/02/Task02.js index 0894136e..5cc942e6 100644 --- a/02/Task02.js +++ b/02/Task02.js @@ -4,17 +4,20 @@ import Button from './../src/components/Button'; import { Row, Col, Button as RBButton } from 'react-bootstrap'; const Task02 = () => { - return ( - - - Button! - - - Button! - - -) -} - -export default Task02; + return ( + + + + Button! + + + + + + + ); +}; +export default Task02; \ No newline at end of file diff --git a/03/Task03.js b/03/Task03.js index 6c884d18..764286bf 100644 --- a/03/Task03.js +++ b/03/Task03.js @@ -1,25 +1,31 @@ -import React from 'react'; +import React from "react"; -import { Row, Col, Breadcrumb as RBBreadcrumb } from 'react-bootstrap'; +import { Row, Col, Breadcrumb as RBBreadcrumb } from "react-bootstrap"; +import Breadcrumb from "./../src/components/Breadcrumb"; const Task03 = () => { - return ( - - - - Home - - Library - - Data - - - - Breadcrumb! - - -) -} + return ( + + + + Home + + Library + + Data + + + + + Home + + Library + + Data + + + + ); +}; export default Task03; - diff --git a/04/Task04.js b/04/Task04.js index 8a8e5b21..1d5fb756 100644 --- a/04/Task04.js +++ b/04/Task04.js @@ -1,29 +1,74 @@ import React from 'react'; import { Row, Col, Tabs as RBTabs, Tab as RBTab, } from 'react-bootstrap'; +import Tabs from "./../src/components/Tabs"; const Task04 = () => { - return ( - - - - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum lacus nec ligula faucibus rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

- - -

Donec dignissim ultricies felis, eu dictum eros congue in. In gravida lobortis libero nec tempus. Cras rutrum nisl ut leo volutpat rhoncus. Nulla massa nulla, viverra hendrerit laoreet at, tincidunt eu lacus.

- - -

Vivamus metus nulla, fermentum eget placerat vitae, mollis interdum elit. Pellentesque arcu augue, vulputate ut porttitor ut, suscipit non orci. Integer justo odio, suscipit eget tortor nec, molestie lobortis eros. Nullam commodo elit sit amet lacus blandit aliquet. Mauris at nibh eget nisl pulvinar dignissim.

- - - - - Tabs! - - - ) -} + return ( + + + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur + condimentum lacus nec ligula faucibus rhoncus. Vestibulum ante + ipsum primis in faucibus orci luctus et ultrices posuere cubilia + Curae;{" "} +

+ + +

+ Donec dignissim ultricies felis, eu dictum eros congue in. In + gravida lobortis libero nec tempus. Cras rutrum nisl ut leo + volutpat rhoncus. Nulla massa nulla, viverra hendrerit laoreet at, + tincidunt eu lacus. +

+ + +

+ Vivamus metus nulla, fermentum eget placerat vitae, mollis + interdum elit. Pellentesque arcu augue, vulputate ut porttitor ut, + suscipit non orci. Integer justo odio, suscipit eget tortor nec, + molestie lobortis eros. Nullam commodo elit sit amet lacus blandit + aliquet. Mauris at nibh eget nisl pulvinar dignissim. +

+ + + + + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur + condimentum lacus nec ligula faucibus rhoncus. Vestibulum ante + ipsum primis in faucibus orci luctus et ultrices posuere cubilia + Curae; +

+ + + +

+ Donec dignissim ultricies felis, eu dictum eros congue in. In + gravida lobortis libero nec tempus. Cras rutrum nisl ut leo + volutpat rhoncus. Nulla massa nulla, viverra hendrerit laoreet at, + tincidunt eu lacus. +

+ + + +

+ Vivamus metus nulla, fermentum eget placerat vitae, mollis + interdum elit. Pellentesque arcu augue, vulputate ut porttitor ut, + suscipit non orci. Integer justo odio, suscipit eget tortor nec, + molestie lobortis eros. Nullam commodo elit sit amet lacus blandit + aliquet. Mauris at nibh eget nisl pulvinar dignissim. +

+ + + + + ); +}; export default Task04; diff --git a/05/Task05.js b/05/Task05.js index 6cebfeda..e195062e 100644 --- a/05/Task05.js +++ b/05/Task05.js @@ -1,29 +1,44 @@ import React from 'react'; import { Row, Col, Card as RBCard, Button as RBButton } from 'react-bootstrap'; +import Card from "./../src/components/Card"; +import Button from "./../src/components/Button"; const Task05 = () => { - return ( - - - - - - Card Title - - Some quick example text to build on the card title and make up the bulk of - the card's content. - - Go somewhere - - - - - Card! - - - ) -} + return ( + + + + + + Card Title + + Some quick example text to build on the card title and make up the + bulk of the card's content. + + Go somewhere + + + + + + + + + Card title + + + Some quick example text to build on the card title and make up the + bulk of the card's content. + + + + + + + + ); +}; export default Task05; diff --git a/src/components/Alert/Alert.js b/src/components/Alert/Alert.js index 1b5f521c..54e71282 100644 --- a/src/components/Alert/Alert.js +++ b/src/components/Alert/Alert.js @@ -2,10 +2,13 @@ import React from 'react'; import { StyledAlert } from './Alert.styled'; -const Alert = props => { - return ( - {props.children} - ); -} +const Alert = ({ children, variant = "secondary", ...props }) => { + // tutaj uzwywam warunkow początkowych, fajnie było by zrobić w rozszerzeniu aplikacji zmianę stylowania jasny/ciemny, widok dwu/jednokolumnowy + return ( + + {children} + + ); +}; export default Alert; \ No newline at end of file diff --git a/src/components/Alert/Alert.styled.js b/src/components/Alert/Alert.styled.js index 117843d9..ecddc42a 100644 --- a/src/components/Alert/Alert.styled.js +++ b/src/components/Alert/Alert.styled.js @@ -1,7 +1,38 @@ -import styled from 'styled-components'; +import styled, { css } from "styled-components"; + +const defaultVariants = { + primary: { + bg: "#cfe2ff", + color: "#084298", + border: "#b6d4fe", + }, + secondary: { + bg: "#e2e3e5", + color: "#41464b", + border: "#d3d6d8", + }, +}; + +const getVariantStyles = (variant, theme) => { + const themeVariants = theme?.alert?.variants; + const current = themeVariants?.[variant] || defaultVariants[variant]; + + if (!current) return ""; + + return css` + background-color: ${current.bg}; + color: ${current.color}; + border: 1px solid ${current.border}; + `; +}; const StyledAlert = styled.div` - display: block; -` + display: block; + padding: 1rem; + border-radius: 0.375rem; + margin: 0.5rem 0; + + ${({ variant = "primary", theme }) => getVariantStyles(variant, theme)} +`; -export { StyledAlert }; \ No newline at end of file +export { StyledAlert }; diff --git a/src/components/Breadcrumb/Breadcrumb.js b/src/components/Breadcrumb/Breadcrumb.js new file mode 100644 index 00000000..1d3ba664 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { StyledBreadcrumb } from './Breadcrumb.styled'; + +const Breadcrumb = ({ children, ...props }) => { + return ( + + {children} + + ); +}; + +export default Breadcrumb; \ No newline at end of file diff --git a/src/components/Breadcrumb/Breadcrumb.styled.js b/src/components/Breadcrumb/Breadcrumb.styled.js new file mode 100644 index 00000000..1a87ef57 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.styled.js @@ -0,0 +1,28 @@ +import styled from 'styled-components'; + +const StyledBreadcrumb = styled.ol` + display: flex; + flex-wrap: wrap; + padding: 0.75rem 1rem; + margin: 0; + list-style: none; + background-color: #e9ecef; + border-radius: 0.375rem; + + .breadcrumb-item + .breadcrumb-item::before { + content: "/"; + padding: 0 0.5rem; + color: #6c757d; + } + + .breadcrumb-item a { + color: #0d6efd; + text-decoration: none; + } + + .breadcrumb-item.active { + color: #6c757d; + } +`; + +export { StyledBreadcrumb }; \ No newline at end of file diff --git a/src/components/Breadcrumb/BreadcrumbItem.js b/src/components/Breadcrumb/BreadcrumbItem.js new file mode 100644 index 00000000..1a18458f --- /dev/null +++ b/src/components/Breadcrumb/BreadcrumbItem.js @@ -0,0 +1,20 @@ +import React from 'react'; + +const BreadcrumbItem = ({ children, href, active, ...props }) => { + return ( +
  • + {href && !active ? ( + + {children} + + ) : ( + children + )} +
    • + ); +}; + +export default BreadcrumbItem; \ No newline at end of file diff --git a/src/components/Breadcrumb/index.js b/src/components/Breadcrumb/index.js new file mode 100644 index 00000000..68cbdfdf --- /dev/null +++ b/src/components/Breadcrumb/index.js @@ -0,0 +1,6 @@ +import Breadcrumb from './Breadcrumb'; +import BreadcrumbItem from './BreadcrumbItem'; + +Breadcrumb.Item = BreadcrumbItem; + +export default Breadcrumb; \ No newline at end of file diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index e69de29b..0cb795d6 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -0,0 +1,25 @@ +import React from "react"; +import { StyledButton } from "./Button.styled"; + +const Button = ({ + children, + variant = "secondary", + size = "md", + active = false, + disabled = false, + ...props +}) => { + return ( + + {children} + + ); +}; + +export default Button; diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js index e69de29b..4c59b024 100644 --- a/src/components/Button/Button.styled.js +++ b/src/components/Button/Button.styled.js @@ -0,0 +1,77 @@ +import styled, { css } from "styled-components"; + +const defaultVariants = { + primary: { + bg: "#0d6efd", + color: "#fff", + border: "#0d6efd", + }, + secondary: { + bg: "#6c757d", + color: "#fff", + border: "#6c757d", + }, +}; + +const defaultSizes = { + sm: { + padding: "0.25rem 0.5rem", + fontSize: "0.875rem", + }, + md: { + padding: "0.375rem 0.75rem", + fontSize: "1rem", + }, + lg: { + padding: "0.5rem 1rem", + fontSize: "1.25rem", + }, +}; + +const getVariantStyles = (variant, theme, active, disabled) => { + const themeVariants = theme?.button?.variants; + const current = themeVariants?.[variant] || defaultVariants[variant]; + + if (!current) return ""; + + return css` + background-color: ${current.bg}; + color: ${current.color}; + border: 1px solid ${current.border}; + + opacity: ${disabled ? 0.65 : 1}; + cursor: ${disabled ? "not-allowed" : "pointer"}; + + ${active && + css` + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + `} + `; +}; + +const getSizeStyles = (size, theme) => { + const themeSizes = theme?.button?.sizes; + const current = themeSizes?.[size] || defaultSizes[size]; + + if (!current) return ""; + + return css` + padding: ${current.padding}; + font-size: ${current.fontSize}; + `; +}; + +const StyledButton = styled.button` + display: inline-block; + font-weight: 400; + text-align: center; + border-radius: 0.375rem; + transition: all 0.15s ease-in-out; + + ${({ variant = "primary", theme, active, disabled }) => + getVariantStyles(variant, theme, active, disabled)} + + ${({ size = "md", theme }) => getSizeStyles(size, theme)} +`; + +export { StyledButton }; diff --git a/src/components/Button/index.js b/src/components/Button/index.js index e69de29b..150e1117 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -0,0 +1,3 @@ +import Button from "./Button"; + +export default Button; diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js new file mode 100644 index 00000000..8c79b726 --- /dev/null +++ b/src/components/Card/Card.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { StyledCard } from './Card.styled'; + +const Card = ({ children, variant = "secondary", ...props }) => { +// tutaj rowniez uzwywam warunkow początkowych, fajnie było by zrobić w rozszerzeniu aplikacji zmianę stylowania jasny/ciemny, widok dwu/jednokolumnowy + return {children}; +}; + +export default Card; \ No newline at end of file diff --git a/src/components/Card/Card.styled.js b/src/components/Card/Card.styled.js new file mode 100644 index 00000000..7f8db295 --- /dev/null +++ b/src/components/Card/Card.styled.js @@ -0,0 +1,11 @@ +import styled from 'styled-components'; + +const StyledCard = styled.div` + border: 1px solid #dee2e6; + border-radius: 0.5rem; + overflow: hidden; + background: #fff; + width: 18rem; +`; + +export { StyledCard }; \ No newline at end of file diff --git a/src/components/Card/CardBody.js b/src/components/Card/CardBody.js new file mode 100644 index 00000000..1e17cd3f --- /dev/null +++ b/src/components/Card/CardBody.js @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +const CardBody = styled.div` + padding: 1rem; +`; + +export default CardBody; \ No newline at end of file diff --git a/src/components/Card/CardImg.js b/src/components/Card/CardImg.js new file mode 100644 index 00000000..9e913170 --- /dev/null +++ b/src/components/Card/CardImg.js @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + +const CardImg = styled.img` + width: 100%; + display: block; +`; + +export default CardImg; \ No newline at end of file diff --git a/src/components/Card/CardText.js b/src/components/Card/CardText.js new file mode 100644 index 00000000..ec7e2e17 --- /dev/null +++ b/src/components/Card/CardText.js @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + +const CardText = styled.p` + margin: 0; + color: #6c757d; +`; + +export default CardText; \ No newline at end of file diff --git a/src/components/Card/CardTitle.js b/src/components/Card/CardTitle.js new file mode 100644 index 00000000..009e7f0c --- /dev/null +++ b/src/components/Card/CardTitle.js @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + +const CardTitle = styled.h5` + margin: 0 0 0.5rem 0; + font-size: 1.25rem; +`; + +export default CardTitle; \ No newline at end of file diff --git a/src/components/Card/index.js b/src/components/Card/index.js new file mode 100644 index 00000000..4c90545b --- /dev/null +++ b/src/components/Card/index.js @@ -0,0 +1,12 @@ +import Card from './Card'; +import CardImg from './CardImg'; +import CardBody from './CardBody'; +import CardTitle from './CardTitle'; +import CardText from './CardText'; + +Card.Img = CardImg; +Card.Body = CardBody; +Card.Title = CardTitle; +Card.Text = CardText; + +export default Card; \ No newline at end of file diff --git a/src/components/Tabs/Tab.js b/src/components/Tabs/Tab.js new file mode 100644 index 00000000..eea35f65 --- /dev/null +++ b/src/components/Tabs/Tab.js @@ -0,0 +1,7 @@ +import React from 'react'; + +const Tab = ({ children }) => { + return
    {children}
    ; +}; + +export default Tab; \ No newline at end of file diff --git a/src/components/Tabs/Tabs.js b/src/components/Tabs/Tabs.js new file mode 100644 index 00000000..e726be1b --- /dev/null +++ b/src/components/Tabs/Tabs.js @@ -0,0 +1,48 @@ +import React, { useState } from 'react'; +import { + StyledTabs, + TabList, + TabButton, + TabContent +} from './Tabs.styled'; + +const Tabs = ({ children, defaultActiveKey }) => { + const tabs = React.Children.toArray(children); + + const defaultIndex = tabs.findIndex( + tab => tab.props.eventKey === defaultActiveKey + ); + + const [activeKey, setActiveKey] = useState( + defaultIndex >= 0 ? defaultActiveKey : tabs[0]?.props.eventKey + ); + + const activeTab = tabs.find(tab => tab.props.eventKey === activeKey); + + return ( + + + {tabs.map((tab, index) => ( + { + if (!tab.props.disabled) { + setActiveKey(tab.props.eventKey); + } + }} + > + {tab.props.title} + + ))} + + + + {activeTab} + + + ); +}; + +export default Tabs; \ No newline at end of file diff --git a/src/components/Tabs/Tabs.styled.js b/src/components/Tabs/Tabs.styled.js new file mode 100644 index 00000000..459d4f06 --- /dev/null +++ b/src/components/Tabs/Tabs.styled.js @@ -0,0 +1,39 @@ +import styled, { css } from 'styled-components'; + +const StyledTabs = styled.div` + width: 100%; +`; + +const TabList = styled.div` + display: flex; + border-bottom: 1px solid #dee2e6; +`; + +const TabButton = styled.button` + padding: 0.5rem 1rem; + border: none; + background: none; + cursor: pointer; + border-bottom: 2px solid transparent; + + ${({ active }) => + active && + css` + border-color: #0d6efd; + color: #0d6efd; + font-weight: 500; + `} + + ${({ disabled }) => + disabled && + css` + opacity: 0.5; + cursor: not-allowed; + `} +`; + +const TabContent = styled.div` + padding: 1rem 0; +`; + +export { StyledTabs, TabList, TabButton, TabContent }; \ No newline at end of file diff --git a/src/components/Tabs/index.js b/src/components/Tabs/index.js new file mode 100644 index 00000000..8327cb99 --- /dev/null +++ b/src/components/Tabs/index.js @@ -0,0 +1,6 @@ +import Tabs from './Tabs'; +import Tab from './Tab'; + +Tabs.Tab = Tab; + +export default Tabs; \ No newline at end of file