diff --git a/01/Task01.js b/01/Task01.js index c12ef98b..c6751983 100644 --- a/01/Task01.js +++ b/01/Task01.js @@ -1,20 +1,58 @@ -import React from 'react'; +import React from "react"; +import { ThemeProvider } from "styled-components"; +import { theme } from "./theme"; -import Alert from './../src/components/Alert'; -import { Row, Col, Alert as RBAlert } from 'react-bootstrap'; +import Alert from "./../src/components/Alert"; +import { Row, Col, Alert as RBAlert } from "react-bootstrap"; const Task01 = () => { - return ( - - - Uwaga! Styled Components nadchodzi! - - - Uwaga! Styled Components nadchodzi! - - - ) -} + return ( + <> + + +
Bootstrap orginał
+ + Uwaga! Styled Components nadchodzi! (1.1) + + + Uwaga! Styled Components nadchodzi! (1.2) + + + + +
Moje komponenty
+ + Uwaga! Styled Components nadchodzi! (1.3) + + + Uwaga! Styled Components nadchodzi! (1.4) + + + + + Uwaga! Styled Components nadchodzi! (1.5) + + + Uwaga! Styled Components nadchodzi! (1.6) + + + + + + ); +}; export default Task01; +// +// +// +// Uwaga! Styled Components nadchodzi! +// +// +// +// +// Uwaga! Styled Components nadchodzi! +// +// +// diff --git a/01/theme.js b/01/theme.js new file mode 100644 index 00000000..290aa11a --- /dev/null +++ b/01/theme.js @@ -0,0 +1,14 @@ +export const theme = { + colors: { + primary: { + background: "#052c65", + color: "#e9ecef", + border: "#0b396a", + }, + secondary: { + background: "#343a40", + color: "#ced4da", + border: "#23272b", + }, + }, +}; diff --git a/02/Task02.js b/02/Task02.js index 0894136e..652bb10d 100644 --- a/02/Task02.js +++ b/02/Task02.js @@ -1,20 +1,90 @@ -import React from 'react'; +import React from "react"; -import Button from './../src/components/Button'; -import { Row, Col, Button as RBButton } from 'react-bootstrap'; +import { Row, Col, Button as RBButton } from "react-bootstrap"; +import Button from "./../src/components/Button"; +import { ThemeProvider } from "styled-components"; +import { theme } from "./theme"; const Task02 = () => { - return ( - - - Button! - - - Button! - - -) -} + return ( + + +
Bootstrap Button
+ + Large primary + + + Large secondary + +
+
-export default Task02; + Default primary + Default secondary +
+
+ + + Small primary + + + Small secondary + +
+
+ + + Active + + + Disabled + +
+
+ + +
Moje komponenty
+ + +
+
+ + + +
+
+ + +
+
+ + + +
+
+ + + + +
+
+ + + + ); +}; + +export default Task02; diff --git a/02/theme.js b/02/theme.js new file mode 100644 index 00000000..be831047 --- /dev/null +++ b/02/theme.js @@ -0,0 +1,18 @@ +export const theme = { + variants: { + primary: { + background: "#0d6efd", + border: "#0d6efd", + color: "#fff", + hoverBackground: "#0b5ed7", + hoverBorder: "#0a58ca", + }, + secondary: { + background: "#6c757d", + border: "#6c757d", + color: "#fff", + hoverBackground: "#5c636a", + hoverBorder: "#565e64", + }, + }, +}; diff --git a/03/Task03.js b/03/Task03.js index 6c884d18..d7773479 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 ( + + +
Bootstrap Breadcrumb
+ + Home + + Library + + Data + + + +
Moje komponenty
+ + Home + Library + Data + + + + ); +}; export default Task03; - diff --git a/04/Task04.js b/04/Task04.js index 8a8e5b21..e37af04b 100644 --- a/04/Task04.js +++ b/04/Task04.js @@ -1,29 +1,66 @@ -import React from 'react'; +import React from "react"; -import { Row, Col, Tabs as RBTabs, Tab as RBTab, } from 'react-bootstrap'; +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 ( + + +
Bootstrap Tabs
+ + +

+ 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. +

+ + + + +
Moje komponenty
+ + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt + laboriosam fugiat ducimus odio excepturi placeat. +

+ + +

+ A ullam omnis neque eos, quas, debitis cupiditate vitae amet eaque + aperiam illum accusamus aut ipsum quod repellat error cumque? +

+ + +

+ Recusandae cumque iste modi ab nulla culpa nam alias hic beatae + dolores. Dolore reiciendis obcaecati animi praesentium. +

+ + + + + ); +}; export default Task04; - diff --git a/05/Task05.js b/05/Task05.js index 6cebfeda..70f3f646 100644 --- a/05/Task05.js +++ b/05/Task05.js @@ -1,29 +1,43 @@ -import React from 'react'; +import React from "react"; -import { Row, Col, Card as RBCard, Button as RBButton } from 'react-bootstrap'; +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 ( + + +
Bootstrap Card
+ + + + Card Title + + Some quick example text to build on the card title and make up the + bulk of the card's content. + + Go somewhere + + + + +
Mój komponent Card
+ + + + Card Title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Necessitatibus quisquam distinctio, architecto magnam voluptate + vitae laborum illo unde nam quia. + + + + + + + ); +}; export default Task05; - diff --git a/package.json b/package.json index 610d1d74..020c96ae 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,6 @@ "react": "^18.2.0", "react-bootstrap": "^1.0.0", "react-dom": "^18.2.0", - "styled-components": "^5.3.6" + "styled-components": "^5.3.11" } } diff --git a/src/components/Alert/Alert.js b/src/components/Alert/Alert.js index 1b5f521c..5945920d 100644 --- a/src/components/Alert/Alert.js +++ b/src/components/Alert/Alert.js @@ -1,11 +1,8 @@ -import React from 'react'; +import React from "react"; +import { StyledAlert } from "./Alert.styled"; -import { StyledAlert } from './Alert.styled'; +const Alert = ({ variant, children }) => { + return {children}; +}; -const Alert = props => { - return ( - {props.children} - ); -} - -export default Alert; \ No newline at end of file +export default Alert; diff --git a/src/components/Alert/Alert.styled.js b/src/components/Alert/Alert.styled.js index 117843d9..9f7fd761 100644 --- a/src/components/Alert/Alert.styled.js +++ b/src/components/Alert/Alert.styled.js @@ -1,7 +1,33 @@ -import styled from 'styled-components'; +import styled from "styled-components"; -const StyledAlert = styled.div` - display: block; -` +const defaultColors = { + primary: { + background: "#cfe2ff", + border: "#9ec5fe", + color: "#084298", + }, + secondary: { + background: "#e2e3e5", + border: "#c4c8cb", + color: "#41464b", + }, +}; -export { StyledAlert }; \ No newline at end of file +const getColors = (props) => { + const variant = props.variant || "primary"; + return props.theme?.colors?.[variant] || defaultColors[variant]; +}; + +export const StyledAlert = styled.div` + ${({ theme, variant }) => { + const colors = getColors({ theme, variant }); + return ` + background-color: ${colors.background}; + color: ${colors.color}; + border: 1px solid ${colors.border}; + padding: 0.75rem 1.6rem; + border-radius: 0.25rem; + margin-bottom: 1rem; + `; + }} +`; diff --git a/src/components/Breadcrumb/Breadcrumb.js b/src/components/Breadcrumb/Breadcrumb.js new file mode 100644 index 00000000..df6242bf --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.js @@ -0,0 +1,10 @@ +import React from "react"; +import { StyledBreadcrumb } from "./Breadcrumb.styled"; + +export const Breadcrumb = ({ children, ...props }) => { + return ( + + ); +}; diff --git a/src/components/Breadcrumb/Breadcrumb.styled.js b/src/components/Breadcrumb/Breadcrumb.styled.js new file mode 100644 index 00000000..dd9802f6 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.styled.js @@ -0,0 +1,29 @@ +import styled from "styled-components"; + +export const StyledBreadcrumb = styled.ol` + display: flex; + list-style: none; + margin-bottom: 1rem; + padding: 0.75rem 1rem; + background-color: #e9ecef; + border-radius: 0.25rem; +`; + +export const StyledBreadcrumbItem = styled.li` + color: ${(props) => (props.active ? "#6c757d" : "inherit")}; + margin-right: 0.5rem; + & + &::before { + content: "/ "; + padding: 0 0.5rem; + color: #6c757d; + } +`; + +export const StyledBreadcrumbLink = styled.a` + text-decoration: none; + color: #0d6efd; + + &:hover { + text-decoration: underline; + } +`; diff --git a/src/components/Breadcrumb/BreadcrumbItem.js b/src/components/Breadcrumb/BreadcrumbItem.js new file mode 100644 index 00000000..2a01e791 --- /dev/null +++ b/src/components/Breadcrumb/BreadcrumbItem.js @@ -0,0 +1,21 @@ +import React from "react"; +import { + StyledBreadcrumbItem, + StyledBreadcrumbLink, +} from "./Breadcrumb.styled"; + +export const BreadcrumbItem = ({ href, active, children, ...props }) => { + if (active) { + return ( + + {children} + + ); + } + + return ( + + {children} + + ); +}; diff --git a/src/components/Breadcrumb/index.js b/src/components/Breadcrumb/index.js new file mode 100644 index 00000000..8aad68f9 --- /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; diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index e69de29b..4097606c 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -0,0 +1,23 @@ +import React from "react"; +import { StyledButton } from "./Button.styled"; + +export const Button = ({ + variant, + size, + active, + disabled, + children, + onClick, +}) => { + return ( + + {children} + + ); +}; diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js index e69de29b..f3d4871c 100644 --- a/src/components/Button/Button.styled.js +++ b/src/components/Button/Button.styled.js @@ -0,0 +1,82 @@ +import styled, { css } from "styled-components"; + +const defaultColors = { + primary: { + background: "#5fa8ff", + border: "#339cff", + color: "#fff", + hoverBackground: "#388ee7", + hoverBorder: "#2676c9", + }, + secondary: { + background: "#b0b6bb", + border: "#8d9399", + color: "#222", + hoverBackground: "#8d9399", + hoverBorder: "#6c757d", + }, +}; + +const sizes = { + sm: css` + padding: 0.25rem 0.5rem; + font-size: 0.85rem; + border-radius: 0.2rem; + `, + lg: css` + padding: 0.5rem 1rem; + font-size: 1.25rem; + border-radius: 0.3rem; + `, + default: css` + padding: 0.35rem 0.75; + font-size: 1rem; + border-radius: 0.25rem; + `, +}; + +const getVariant = (props) => { + const variant = props.variant || "primary"; + return props.theme?.variants?.[variant] || defaultColors[variant]; +}; + +const getSize = (props) => sizes[props.size] || sizes.default; + +export const StyledButton = styled.button` + display: inline-block; + font-weight: 400; + line-height: 1.5; + text-align: center; + text-decoration: none; + vertical-align: middle; + cursor: pointer; + border: 1px solid transparent; + transition: + color, + background-color, + border-color 0.15s; + + ${(props) => getSize(props)} + + background-color: ${(props) => getVariant(props).background}; + border-color: ${(props) => getVariant(props).border}; + color: ${(props) => getVariant(props).color}; + + &:hover { + background-color: ${(props) => getVariant(props).hoverBackground}; + border-color: ${(props) => getVariant(props).hoverBorder}; + } + + ${(props) => + props.active && + css` + background-color: ${getVariant(props).hoverBackground}; + border-color: ${getVariant(props).hoverBorder}; + `}; + + &:disabled { + opacity: 0.6; + cursor: not-allowed; + pointer-events: none; + } +`; diff --git a/src/components/Button/index.js b/src/components/Button/index.js index e69de29b..56dca6cb 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..6d510954 --- /dev/null +++ b/src/components/Card/Card.js @@ -0,0 +1,6 @@ +import React from "react"; +import { StyledCard } from "./Card.styled"; + +export const Card = ({ children, style }) => ( + {children} +); diff --git a/src/components/Card/Card.styled.js b/src/components/Card/Card.styled.js new file mode 100644 index 00000000..55969e46 --- /dev/null +++ b/src/components/Card/Card.styled.js @@ -0,0 +1,30 @@ +import styled from "styled-components"; + +export const StyledCard = styled.div` + border: 1px solid #dee2e6; + border-radius: 0.25rem; + overflow: hidden; + background: #fff; + box-shadow: 0 2px 8px rgba(33, 37, 41, 0.05); +`; + +export const StyledCardImg = styled.img` + display: block; + width: 100%; + height: auto; + object-fit: cover; +`; + +export const StyledCardBody = styled.div` + padding: 1rem; +`; + +export const StyledCardTitle = styled.h5` + font-size: 1.25rem; + font-weight: 500; +`; + +export const StyledCardText = styled.p` + font-size: 0.9rem; + margin-bottom: 1rem; +`; diff --git a/src/components/Card/CardBody.js b/src/components/Card/CardBody.js new file mode 100644 index 00000000..261205ed --- /dev/null +++ b/src/components/Card/CardBody.js @@ -0,0 +1,6 @@ +import React from "react"; +import { StyledCardBody } from "./Card.styled"; + +export const CardBody = ({ children }) => ( + {children} +); diff --git a/src/components/Card/CardImg.js b/src/components/Card/CardImg.js new file mode 100644 index 00000000..bd2ca81c --- /dev/null +++ b/src/components/Card/CardImg.js @@ -0,0 +1,4 @@ +import React from "react"; +import { StyledCardImg } from "./Card.styled"; + +export const CardImg = ({ src, alt }) => ; diff --git a/src/components/Card/CardText.js b/src/components/Card/CardText.js new file mode 100644 index 00000000..6eaa2326 --- /dev/null +++ b/src/components/Card/CardText.js @@ -0,0 +1,6 @@ +import React from "react"; +import { StyledCardText } from "./Card.styled"; + +export const CardText = ({ children }) => ( + {children} +); diff --git a/src/components/Card/CardTitle.js b/src/components/Card/CardTitle.js new file mode 100644 index 00000000..6a1bb114 --- /dev/null +++ b/src/components/Card/CardTitle.js @@ -0,0 +1,6 @@ +import React from "react"; +import { StyledCardTitle } from "./Card.styled"; + +export const CardTitle = ({ children }) => ( + {children} +); diff --git a/src/components/Card/index.js b/src/components/Card/index.js new file mode 100644 index 00000000..613cbd5b --- /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; diff --git a/src/components/Tabs/Tab.js b/src/components/Tabs/Tab.js new file mode 100644 index 00000000..d97d9251 --- /dev/null +++ b/src/components/Tabs/Tab.js @@ -0,0 +1,3 @@ +import React from "react"; + +export const Tab = ({ children }) => <>{children}; diff --git a/src/components/Tabs/Tabs.js b/src/components/Tabs/Tabs.js new file mode 100644 index 00000000..c1c99777 --- /dev/null +++ b/src/components/Tabs/Tabs.js @@ -0,0 +1,35 @@ +import React, { useState } from "react"; +import { + StyledTabList, + StyledTabItem, + StyledTabButton, + StyledTabContent, +} from "./Tabs.styled"; + +export const Tabs = ({ children, defaultActiveKey }) => { + const [activeKey, setActiveKey] = useState(defaultActiveKey); + + const tabs = React.Children.toArray(children); + const activeTab = tabs.find((tab) => tab.props.eventKey === activeKey); + + return ( +
+ + {tabs.map((tab) => ( + + + !tab.props.disabled && setActiveKey(tab.props.eventKey) + } + > + {tab.props.title} + + + ))} + + {activeTab?.props.children} +
+ ); +}; diff --git a/src/components/Tabs/Tabs.styled.js b/src/components/Tabs/Tabs.styled.js new file mode 100644 index 00000000..0d0074aa --- /dev/null +++ b/src/components/Tabs/Tabs.styled.js @@ -0,0 +1,30 @@ +import styled from "styled-components"; + +export const StyledTabList = styled.ul` + display: flex; + list-style: none; + padding: 0; + margin: 0 0 -1px 0; + border-bottom: 1px solid #dee2e6; +`; + +export const StyledTabItem = styled.li` + margin-bottom: -1px; +`; + +export const StyledTabButton = styled.button` + padding: 0.5rem 1rem; + border: 1px solid transparent; + border-radius: 0.25rem 0.25rem 0 0; + background: none; + cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; + color: ${(props) => + props.disabled ? "#6c757d" : props.active ? "#495057" : "#0d6efd"}; + opacity: ${(props) => (props.disabled ? "0.6" : "1")}; + border-color: ${(props) => + props.active ? "#dee2e6 #dee2e6 #fff" : "transparent"}; +`; + +export const StyledTabContent = styled.div` + padding: 0.15rem; +`; diff --git a/src/components/Tabs/index.js b/src/components/Tabs/index.js new file mode 100644 index 00000000..cca99101 --- /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;