From 987917b600469631232087545c57b87c5b0f910a Mon Sep 17 00:00:00 2001 From: sanadriu Date: Tue, 21 Sep 2021 11:01:52 +0200 Subject: [PATCH 01/37] Component structure created --- src/index.js | 1 + src/styles/abstracts/_index.scss | 7 + src/styles/abstracts/_mixin-block.scss | 12 + src/styles/abstracts/_mixin-button.scss | 13 + src/styles/abstracts/_mixin-hr.scss | 23 ++ src/styles/abstracts/_mixin-input.scss | 26 ++ src/styles/abstracts/_responsive-media.scss | 19 + src/styles/abstracts/_responsive-width.scss | 7 + src/styles/base/_index.scss | 1 + src/styles/base/_reset.scss | 49 +++ src/styles/main.scss | 55 +++ src/styles/utilities/_breakpoint.scss | 7 + src/styles/utilities/_color.scss | 34 ++ src/styles/utilities/_dimension.scss | 11 + src/styles/utilities/_display.scss | 9 + src/styles/utilities/_flex.scss | 49 +++ src/styles/utilities/_font.scss | 66 ++++ src/styles/utilities/_index.scss | 10 + src/styles/utilities/_radius.scss | 16 + .../utilities/_responsive-container.scss | 34 ++ src/styles/utilities/_spacing.scss | 66 ++++ src/styles/utilities/_state.scss | 5 + src/styles/vendors/_index.scss | 1 + src/styles/vendors/_normalize.scss | 349 ++++++++++++++++++ 24 files changed, 870 insertions(+) create mode 100644 src/styles/abstracts/_index.scss create mode 100644 src/styles/abstracts/_mixin-block.scss create mode 100644 src/styles/abstracts/_mixin-button.scss create mode 100644 src/styles/abstracts/_mixin-hr.scss create mode 100644 src/styles/abstracts/_mixin-input.scss create mode 100644 src/styles/abstracts/_responsive-media.scss create mode 100644 src/styles/abstracts/_responsive-width.scss create mode 100644 src/styles/base/_index.scss create mode 100644 src/styles/base/_reset.scss create mode 100644 src/styles/main.scss create mode 100644 src/styles/utilities/_breakpoint.scss create mode 100644 src/styles/utilities/_color.scss create mode 100644 src/styles/utilities/_dimension.scss create mode 100644 src/styles/utilities/_display.scss create mode 100644 src/styles/utilities/_flex.scss create mode 100644 src/styles/utilities/_font.scss create mode 100644 src/styles/utilities/_index.scss create mode 100644 src/styles/utilities/_radius.scss create mode 100644 src/styles/utilities/_responsive-container.scss create mode 100644 src/styles/utilities/_spacing.scss create mode 100644 src/styles/utilities/_state.scss create mode 100644 src/styles/vendors/_index.scss create mode 100644 src/styles/vendors/_normalize.scss diff --git a/src/index.js b/src/index.js index 19bb154c..8c3ec24f 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,7 @@ import "bootstrap/dist/css/bootstrap.min.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; +import "./styles/main.scss"; ReactDOM.render( diff --git a/src/styles/abstracts/_index.scss b/src/styles/abstracts/_index.scss new file mode 100644 index 00000000..4b7b6149 --- /dev/null +++ b/src/styles/abstracts/_index.scss @@ -0,0 +1,7 @@ +@forward "mixin-block"; +@forward "mixin-button"; +@forward "mixin-hr"; +@forward "mixin-input"; +@forward "responsive-media"; +@forward "responsive-width"; + diff --git a/src/styles/abstracts/_mixin-block.scss b/src/styles/abstracts/_mixin-block.scss new file mode 100644 index 00000000..620be108 --- /dev/null +++ b/src/styles/abstracts/_mixin-block.scss @@ -0,0 +1,12 @@ +@mixin block($width: 100%, $height: auto, $padding: 0, $margin: 0, $set-inline: false) { + @if $set-inline { + display: inline-block; + } @else { + display: block; + } + + width: $width; + height: $height; + padding: $padding; + margin: $margin; +}; \ No newline at end of file diff --git a/src/styles/abstracts/_mixin-button.scss b/src/styles/abstracts/_mixin-button.scss new file mode 100644 index 00000000..929ef229 --- /dev/null +++ b/src/styles/abstracts/_mixin-button.scss @@ -0,0 +1,13 @@ +@mixin button-reset() { + background: none; + border: none; + padding: 0; +} + +@mixin button-behaviour() { + cursor: pointer; + + &:active { + opacity: 0.75; + } +} \ No newline at end of file diff --git a/src/styles/abstracts/_mixin-hr.scss b/src/styles/abstracts/_mixin-hr.scss new file mode 100644 index 00000000..e8cc2617 --- /dev/null +++ b/src/styles/abstracts/_mixin-hr.scss @@ -0,0 +1,23 @@ +@mixin hr-template($stroke: 2px, $line-color: gray, $text-color: gray, $text-padding: 0.75rem, $font-size: 1rem, $font-weight: 600) { + display: flex; + justify-content: center; + align-items: center; + + & > :nth-child(1), + & > :nth-child(3) { + flex-grow: 1; + flex-shrink: 1; + background-color: $line-color; + height: $stroke; + } + + & > :nth-child(2) { + padding: $text-padding; + flex-grow: 0; + flex-shrink: 0; + color: $text-color; + font-size: $font-size; + font-weight: $font-weight; + text-align: center; + } +} \ No newline at end of file diff --git a/src/styles/abstracts/_mixin-input.scss b/src/styles/abstracts/_mixin-input.scss new file mode 100644 index 00000000..5eaa5843 --- /dev/null +++ b/src/styles/abstracts/_mixin-input.scss @@ -0,0 +1,26 @@ +@mixin input-reset { + border: none; + outline: none; +} + +@mixin input-template($width: 100%, $height: auto, $padding: 0, $margin: 0, $radius: 0, $text-color: grey, $border-color: grey, $bg-color: white) { + width: $width; + height: $height; + padding: $padding; + margin: $margin; + + font-size: 0.8rem; + font-weight: 300; + + background-color: $bg-color; + color: $text-color; + border-radius: $radius; + border-width: 1px; + border-style: solid; + border-color: $border-color; + outline: none; + + &:focus { + border-color: color.scale($border-color, $lightness: -20%); + } +} \ No newline at end of file diff --git a/src/styles/abstracts/_responsive-media.scss b/src/styles/abstracts/_responsive-media.scss new file mode 100644 index 00000000..b68ebbe2 --- /dev/null +++ b/src/styles/abstracts/_responsive-media.scss @@ -0,0 +1,19 @@ +/* ===== Responsive Media Query Mixins ===== */ + +@mixin media-screen-min($breakpoint) { + @media screen and (min-width: $breakpoint) { + @content; + } +} + +@mixin media-screen-max($breakpoint) { + @media screen and (max-width: $breakpoint) { + @content; + } +} + +@mixin media-screen-range($breakpoint-min, $breakpoint-max) { + @media screen and (min-width: $breakpoint-min) and (max-width: $breakpoint-max - 1px) { + @content; + } +} diff --git a/src/styles/abstracts/_responsive-width.scss b/src/styles/abstracts/_responsive-width.scss new file mode 100644 index 00000000..c0f122f2 --- /dev/null +++ b/src/styles/abstracts/_responsive-width.scss @@ -0,0 +1,7 @@ +@use "responsive-media"; + +/* ===== Responsive Width Mixins ===== */ + +@mixin width-constraint($breakpoint) { + @include responsive-media.media-screen-min($breakpoint) { width: $breakpoint } +} diff --git a/src/styles/base/_index.scss b/src/styles/base/_index.scss new file mode 100644 index 00000000..edf2ac1d --- /dev/null +++ b/src/styles/base/_index.scss @@ -0,0 +1 @@ +@forward "reset"; diff --git a/src/styles/base/_reset.scss b/src/styles/base/_reset.scss new file mode 100644 index 00000000..4f00d890 --- /dev/null +++ b/src/styles/base/_reset.scss @@ -0,0 +1,49 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} + +* { + box-sizing: border-box; +} + +ul, +ol { + margin: 0; + padding: 0; + list-style: none; +} + +a { + color: inherit; + text-decoration: none; +} + + +*::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +*::-webkit-scrollbar-thumb { + background: rgb(204, 204, 204); + border-radius: 4px; +} + +*::-webkit-scrollbar-thumb:hover { + background: rgb(179, 179, 179); + box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2); +} + +*::-webkit-scrollbar-thumb:active { + background-color: rgb(153, 153, 153); +} + +*::-webkit-scrollbar-track { + background: rgb(224, 224, 224); + border-radius: 4px; +} + +*::-webkit-scrollbar-track:hover, +*::-webkit-scrollbar-track:active { + background: rgb(212, 212, 212); +} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 00000000..cefa0d27 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,55 @@ +/* ==== Font Typescales ==== + +* minor-second -> 1.067; +* major-second -> 1.125; +* minor-third -> 1.2; +* major-third -> 1.25; +* perfect-fourth -> 1.333; +* augmented-fourth -> 1.414; +* perfect-fifth -> 1.5; +* golden-scale -> 1.618; + +*/ + +@use "vendors"; +@use "base"; +@use "abstracts"; +@use "components"; +//@use "utilities"; + +@use "utilities" with ( + + // Variables for breakpoints.scss + $sm: 576px, + $md: 768px, + $lg: 992px, + $xl: 1200px, + $xxl: 1400px, + + // Variables for color.scss + $colors: ( + "blue": #0d6efd, + "indigo": #6610f2, + "purple": #6f42c1, + "pink": #d63384, + "red": #dc3545, + "orange": #fd7e14, + "yellow": #ffc107, + "green": #198754, + "teal": #20c997, + "cyan": #0dcaf0, + "transparent": transparent, + ), + + // Variables for font.scss + $font-size-base: 1rem, + $font-size-scale: 1.25, + + // Variables for spacing.scss + $spacer-gap: 0.25rem, + $spacer-iterations: 10, + + // Variables for radius.scss + $radius-gap: 0.125rem, + $radius-iterations: 10, +); \ No newline at end of file diff --git a/src/styles/utilities/_breakpoint.scss b/src/styles/utilities/_breakpoint.scss new file mode 100644 index 00000000..01b69777 --- /dev/null +++ b/src/styles/utilities/_breakpoint.scss @@ -0,0 +1,7 @@ +/* ===== Breakpoints ===== */ + +$sm: 576px !default; +$md: 768px !default; +$lg: 992px !default; +$xl: 1200px !default; +$xxl: 1400px !default; \ No newline at end of file diff --git a/src/styles/utilities/_color.scss b/src/styles/utilities/_color.scss new file mode 100644 index 00000000..bda9266e --- /dev/null +++ b/src/styles/utilities/_color.scss @@ -0,0 +1,34 @@ +/* ===== Colors ===== */ + +$colors: ( + "blue": #0d6efd, + "indigo": #6610f2, + "purple": #6f42c1, + "pink": #d63384, + "red": #dc3545, + "orange": #fd7e14, + "yellow": #ffc107, + "green": #198754, + "teal": #20c997, + "cyan": #0dcaf0, + "transparent": transparent, +) !default; + +/* ===== Color Classes ===== */ + +@each $name, $value in $colors { + .text-color-#{$name} { + color: $value; + } + + .bg-color-#{$name} { + background-color: $value; + } + + .border-color-#{$name} { + border-color: $value; + } +} + + + diff --git a/src/styles/utilities/_dimension.scss b/src/styles/utilities/_dimension.scss new file mode 100644 index 00000000..0faf2beb --- /dev/null +++ b/src/styles/utilities/_dimension.scss @@ -0,0 +1,11 @@ +/* ===== Dimensional Classes ===== */ + +@for $i from 0 through 20 { + .width-#{$i * 5} { + width: $i * 5%; + } + + .height-#{$i * 5} { + height: $i * 5%; + } +} diff --git a/src/styles/utilities/_display.scss b/src/styles/utilities/_display.scss new file mode 100644 index 00000000..64e11108 --- /dev/null +++ b/src/styles/utilities/_display.scss @@ -0,0 +1,9 @@ +/* ===== Display Mode Classes ===== */ + +$_display-modes: inline-block, block, flex, grid; + +@each $display-mode in $_display-modes { + .#{$display-mode} { + display: $display-mode; + } +} diff --git a/src/styles/utilities/_flex.scss b/src/styles/utilities/_flex.scss new file mode 100644 index 00000000..b9aa79aa --- /dev/null +++ b/src/styles/utilities/_flex.scss @@ -0,0 +1,49 @@ +/* ===== Flex Direction Classes ===== */ + +$_direction-opts: row, column, row-reverse, column-reverse; + +@each $value in $_direction-opts { + .flex-#{$value} { + flex-direction: $value; + } +} + +/* ===== Flex Wrap Classes ===== */ + +$_wrap-opts: wrap, wrap-reverse; + +@each $value in $_wrap-opts { + .flex-#{$value} { + flex-wrap: $value; + } +} + +/* ===== Flex Main Axis Alignment Classes ===== */ + +$_justify-content-opts: start, end, center, space-between, space-evenly, space-around; + +@each $value in $_justify-content-opts { + .justify-content-#{$value} { + justify-content: $value; + } +} + +/* ===== Flex Cross Axis Alignment Classes ===== */ + +$_align-items-opts: start, end, center, stretch; + +@each $value in $_align-items-opts { + .align-items-#{$value} { + align-items: $value; + } +} + +/* =====~ Flex Content Alignment Classes ===== */ + +$_align-content-opts: start, end, center, space-between, space-evenly, space-around; + +@each $value in $_align-content-opts { + .align-content-#{$value} { + align-content: $value; + } +} diff --git a/src/styles/utilities/_font.scss b/src/styles/utilities/_font.scss new file mode 100644 index 00000000..10b94bea --- /dev/null +++ b/src/styles/utilities/_font.scss @@ -0,0 +1,66 @@ +@use "sass:math"; + +/* ===== Font Config Variables ===== */ + +$font-size-base: 1rem !default; +$font-size-scale: 1.25 !default; + +/* ===== Font Size Classes ===== */ + +$_font-sizes: ( + 100: $font-size-base * math.pow($font-size-scale, -3), + 200: $font-size-base * math.pow($font-size-scale, -2), + 300: $font-size-base * math.pow($font-size-scale, -1), + 400: $font-size-base, + 500: $font-size-base * math.pow($font-size-scale, 2), + 600: $font-size-base * math.pow($font-size-scale, 3), + 700: $font-size-base * math.pow($font-size-scale, 4), + 800: $font-size-base * math.pow($font-size-scale, 5), + 900: $font-size-base * math.pow($font-size-scale, 6) +); + +@each $name, $value in $_font-sizes { + .font-size-#{$name} { + font-size: $value; + } +} + +/* ===== Font Weight Classes ===== */ + +$_font-weights: 100, 200, 300, 400, 500, 600, 700, 800, 900; + +@each $value in $_font-weights { + .font-weight-#{$value} { + font-weight: $value; + } +} + +/* ===== Font Style Classes ===== */ + +$_font-styles: normal, italic; + +@each $value in $_font-styles { + .font-style-#{$value} { + font-style: $value; + } +} + +/* ===== Text Align Classes ===== */ + +$_text-aligns: left, right, center, justify; + +@each $value in $_text-aligns{ + .text-align-#{$value} { + text-align: $value; + } +} + +/* ===== Text Decoration Classes ===== */ + +$_text-decorations: "none", "underline"; + +@each $value in $_text-decorations { + .text-decoration-#{$value} { + text-decoration: $value; + } +} \ No newline at end of file diff --git a/src/styles/utilities/_index.scss b/src/styles/utilities/_index.scss new file mode 100644 index 00000000..3b4911a6 --- /dev/null +++ b/src/styles/utilities/_index.scss @@ -0,0 +1,10 @@ +@forward "breakpoint"; +@forward "color"; +@forward "display"; +@forward "flex"; +@forward "font"; +@forward "radius"; +@forward "responsive-container"; +@forward "spacing"; +@forward "state"; +@forward "dimension"; \ No newline at end of file diff --git a/src/styles/utilities/_radius.scss b/src/styles/utilities/_radius.scss new file mode 100644 index 00000000..296cb565 --- /dev/null +++ b/src/styles/utilities/_radius.scss @@ -0,0 +1,16 @@ +/* ===== Border Radius Config Variables ===== */ + +$radius-gap: 0.125rem !default; +$radius-iterations: 10 !default; + +/* ===== Border Radius Classes ===== */ + +@for $i from 0 through $radius-iterations { + .radius-#{$i} { + border-radius: $radius-gap * $i; + } +} + +.radius-round { + border-radius: 50%; +} \ No newline at end of file diff --git a/src/styles/utilities/_responsive-container.scss b/src/styles/utilities/_responsive-container.scss new file mode 100644 index 00000000..8eb9f398 --- /dev/null +++ b/src/styles/utilities/_responsive-container.scss @@ -0,0 +1,34 @@ +@use "breakpoint"; +@use "../abstracts/responsive-width"; + +/* ===== Responsive Container Classes ====== */ + +.container-sm { + @include responsive-width.width-constraint(breakpoint.$sm); + @include responsive-width.width-constraint(breakpoint.$md); + @include responsive-width.width-constraint(breakpoint.$lg); + @include responsive-width.width-constraint(breakpoint.$xl); + @include responsive-width.width-constraint(breakpoint.$xxl); +} + +.container-md { + @include responsive-width.width-constraint(breakpoint.$md); + @include responsive-width.width-constraint(breakpoint.$lg); + @include responsive-width.width-constraint(breakpoint.$xl); + @include responsive-width.width-constraint(breakpoint.$xxl); +} + +.container-lg { + @include responsive-width.width-constraint(breakpoint.$lg); + @include responsive-width.width-constraint(breakpoint.$xl); + @include responsive-width.width-constraint(breakpoint.$xxl); +} + +.container-xl { + @include responsive-width.width-constraint(breakpoint.$xl); + @include responsive-width.width-constraint(breakpoint.$xxl); +} + +.container-xxl { + @include responsive-width.width-constraint(breakpoint.$xxl); +} \ No newline at end of file diff --git a/src/styles/utilities/_spacing.scss b/src/styles/utilities/_spacing.scss new file mode 100644 index 00000000..1f099807 --- /dev/null +++ b/src/styles/utilities/_spacing.scss @@ -0,0 +1,66 @@ +/* ===== Spacing Config Variables ===== */ + +$spacer-gap: 0.25rem !default; +$spacer-iterations: 10 !default; + +/* ===== Padding Classes ===== */ + +@for $i from 0 through $spacer-iterations { + .p-#{$i} { + padding: $i * $spacer-gap; + } // Full + + .px-#{$i} { + padding-left: $i * $spacer-gap; + padding-right: $i * $spacer-gap; + } // Horizontal + + .py-#{$i} { + padding-top: $i * $spacer-gap; + padding-bottom: $i * $spacer-gap; + } // Vertical + + .pl-#{$i} { padding-left: $i * $spacer-gap; } // Left + .pr-#{$i} { padding-right: $i * $spacer-gap; } // Right + .pt-#{$i} { padding-top: $i * $spacer-gap; } // Top + .pb-#{$i} { padding-bottom: $i * $spacer-gap; } // Bottom +} + +/* ===== Margin Classes ===== */ + +@for $i from 0 through $spacer-iterations{ + .m-#{$i} { + margin: $i * $spacer-gap; + } // Full + + .mx-#{$i} { + margin-left: $i * $spacer-gap; + margin-right: $i * $spacer-gap; + } // Horizontal + + .my-#{$i} { + margin-top: $i * $spacer-gap; + margin-bottom: $i * $spacer-gap; + } // Vertical + + .ml-#{$i} { margin-left: $i * $spacer-gap; } // Left + .mr-#{$i} { margin-right: $i * $spacer-gap; } // Right + .mt-#{$i} { margin-top: $i * $spacer-gap; } // Top + .mb-#{$i} { margin-bottom: $i * $spacer-gap; } // Bottom +} + +.mx-auto { + margin-left: auto; + margin-right: auto; +} // Horizontal Centered + +.my-auto { + margin-top: auto; + margin-bottom: auto; +} + +/* ===== Grid/Flexbox Gap Classes ===== */ + +@for $i from 0 through $spacer-iterations { + .gap-#{$i} { gap: $i * $spacer-gap; } +} \ No newline at end of file diff --git a/src/styles/utilities/_state.scss b/src/styles/utilities/_state.scss new file mode 100644 index 00000000..db6b8232 --- /dev/null +++ b/src/styles/utilities/_state.scss @@ -0,0 +1,5 @@ +/* ===== State Classes ===== */ + +.is-hidden { + display: none !important; +} \ No newline at end of file diff --git a/src/styles/vendors/_index.scss b/src/styles/vendors/_index.scss new file mode 100644 index 00000000..a6ceee71 --- /dev/null +++ b/src/styles/vendors/_index.scss @@ -0,0 +1 @@ +@forward "normalize"; \ No newline at end of file diff --git a/src/styles/vendors/_normalize.scss b/src/styles/vendors/_normalize.scss new file mode 100644 index 00000000..b0c1902d --- /dev/null +++ b/src/styles/vendors/_normalize.scss @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} \ No newline at end of file From 34fbe70b8777ef26039bfc8d3ff2081db56831de Mon Sep 17 00:00:00 2001 From: sanadriu Date: Tue, 21 Sep 2021 11:06:22 +0200 Subject: [PATCH 02/37] Component structure push --- .husky/.gitignore | 1 + src/styles/main.scss | 2 -- 2 files changed, 1 insertion(+), 2 deletions(-) create mode 100644 .husky/.gitignore diff --git a/.husky/.gitignore b/.husky/.gitignore new file mode 100644 index 00000000..31354ec1 --- /dev/null +++ b/.husky/.gitignore @@ -0,0 +1 @@ +_ diff --git a/src/styles/main.scss b/src/styles/main.scss index cefa0d27..57d3e704 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -14,8 +14,6 @@ @use "vendors"; @use "base"; @use "abstracts"; -@use "components"; -//@use "utilities"; @use "utilities" with ( From 678d1d6635fabc6107ee2171b7d6168bbf4ca969 Mon Sep 17 00:00:00 2001 From: sanadriu Date: Tue, 21 Sep 2021 11:08:41 +0200 Subject: [PATCH 03/37] Button Component Testing --- src/components/Button/Button.js | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/components/Button/Button.js diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js new file mode 100644 index 00000000..7cf67b51 --- /dev/null +++ b/src/components/Button/Button.js @@ -0,0 +1,3 @@ +export function Button() { + return ; +} From a478ecec1394282cba9dda1b070eddbb8b2401cf Mon Sep 17 00:00:00 2001 From: sanadriu Date: Tue, 21 Sep 2021 11:22:00 +0200 Subject: [PATCH 04/37] Added .js files in components --- src/components/Button/Button.js | 4 +--- src/components/Button/Button.scss | 0 src/components/Button/index.js | 1 + src/components/CheckBox/CheckBox.js | 1 + src/components/CheckBox/CheckBox.scss | 0 src/components/CheckBox/index.js | 1 + src/components/DeleteButton/DeleteButton.js | 1 + src/components/DeleteButton/DeleteButton.scss | 0 src/components/DeleteButton/index.js | 1 + src/components/Footer/Footer.js | 1 + src/components/Footer/Footer.scss | 1 + src/components/Footer/index.js | 1 + src/components/NoTodoPreview/NoTodoPreview.js | 1 + src/components/NoTodoPreview/NoTodoPreview.scss | 0 src/components/NoTodoPreview/index.js | 1 + src/components/TodoCounter/TodoCounter.js | 1 + src/components/TodoCounter/TodoCounter.scss | 0 src/components/TodoCounter/index.js | 1 + src/components/TodoCreate/TodoCreate.js | 1 + src/components/TodoCreate/TodoCreate.scss | 0 src/components/TodoCreate/index.js | 1 + src/components/TodoErrorMessage/TodoErrorMessage.js | 1 + src/components/TodoErrorMessage/TodoErrorMessage.scss | 0 src/components/TodoErrorMessage/index.js | 1 + src/components/TodoFilter/TodoFilter.js | 1 + src/components/TodoFilter/TodoFilter.scss | 0 src/components/TodoFilter/index.js | 1 + src/components/TodoInput/TodoInput.js | 2 ++ src/components/TodoInput/TodoInput.scss | 0 src/components/TodoInput/index.js | 1 + src/components/TodoItem/TodoItem.js | 1 + src/components/TodoItem/TodoItem.scss | 0 src/components/TodoItem/index.js | 1 + src/components/TodoList/TodoList.js | 1 + src/components/TodoList/TodoList.scss | 0 src/components/TodoList/index.js | 1 + 36 files changed, 26 insertions(+), 3 deletions(-) create mode 100644 src/components/Button/Button.scss create mode 100644 src/components/Button/index.js create mode 100644 src/components/CheckBox/CheckBox.js create mode 100644 src/components/CheckBox/CheckBox.scss create mode 100644 src/components/CheckBox/index.js create mode 100644 src/components/DeleteButton/DeleteButton.js create mode 100644 src/components/DeleteButton/DeleteButton.scss create mode 100644 src/components/DeleteButton/index.js create mode 100644 src/components/Footer/Footer.js create mode 100644 src/components/Footer/Footer.scss create mode 100644 src/components/Footer/index.js create mode 100644 src/components/NoTodoPreview/NoTodoPreview.js create mode 100644 src/components/NoTodoPreview/NoTodoPreview.scss create mode 100644 src/components/NoTodoPreview/index.js create mode 100644 src/components/TodoCounter/TodoCounter.js create mode 100644 src/components/TodoCounter/TodoCounter.scss create mode 100644 src/components/TodoCounter/index.js create mode 100644 src/components/TodoCreate/TodoCreate.js create mode 100644 src/components/TodoCreate/TodoCreate.scss create mode 100644 src/components/TodoCreate/index.js create mode 100644 src/components/TodoErrorMessage/TodoErrorMessage.js create mode 100644 src/components/TodoErrorMessage/TodoErrorMessage.scss create mode 100644 src/components/TodoErrorMessage/index.js create mode 100644 src/components/TodoFilter/TodoFilter.js create mode 100644 src/components/TodoFilter/TodoFilter.scss create mode 100644 src/components/TodoFilter/index.js create mode 100644 src/components/TodoInput/TodoInput.js create mode 100644 src/components/TodoInput/TodoInput.scss create mode 100644 src/components/TodoInput/index.js create mode 100644 src/components/TodoItem/TodoItem.js create mode 100644 src/components/TodoItem/TodoItem.scss create mode 100644 src/components/TodoItem/index.js create mode 100644 src/components/TodoList/TodoList.js create mode 100644 src/components/TodoList/TodoList.scss create mode 100644 src/components/TodoList/index.js diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index 7cf67b51..f9f4a715 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -1,3 +1 @@ -export function Button() { - return ; -} +export default function Button() {} diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/components/Button/index.js b/src/components/Button/index.js new file mode 100644 index 00000000..c4719be7 --- /dev/null +++ b/src/components/Button/index.js @@ -0,0 +1 @@ +export { default } from "./Button"; diff --git a/src/components/CheckBox/CheckBox.js b/src/components/CheckBox/CheckBox.js new file mode 100644 index 00000000..7dfc1e79 --- /dev/null +++ b/src/components/CheckBox/CheckBox.js @@ -0,0 +1 @@ +export default function CheckBox() {} diff --git a/src/components/CheckBox/CheckBox.scss b/src/components/CheckBox/CheckBox.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/components/CheckBox/index.js b/src/components/CheckBox/index.js new file mode 100644 index 00000000..551e1723 --- /dev/null +++ b/src/components/CheckBox/index.js @@ -0,0 +1 @@ +export { default } from "./CheckBox"; diff --git a/src/components/DeleteButton/DeleteButton.js b/src/components/DeleteButton/DeleteButton.js new file mode 100644 index 00000000..b2a185b5 --- /dev/null +++ b/src/components/DeleteButton/DeleteButton.js @@ -0,0 +1 @@ +export default function DeleteButton() {} diff --git a/src/components/DeleteButton/DeleteButton.scss b/src/components/DeleteButton/DeleteButton.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/components/DeleteButton/index.js b/src/components/DeleteButton/index.js new file mode 100644 index 00000000..e1157601 --- /dev/null +++ b/src/components/DeleteButton/index.js @@ -0,0 +1 @@ +export { default } from "./DeleteButton"; diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js new file mode 100644 index 00000000..2e3dd8f5 --- /dev/null +++ b/src/components/Footer/Footer.js @@ -0,0 +1 @@ +export default function Footer() {} diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss new file mode 100644 index 00000000..cc1a1e2e --- /dev/null +++ b/src/components/Footer/Footer.scss @@ -0,0 +1 @@ +export function Button() {} diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js new file mode 100644 index 00000000..3738288b --- /dev/null +++ b/src/components/Footer/index.js @@ -0,0 +1 @@ +export { default } from "./Footer"; diff --git a/src/components/NoTodoPreview/NoTodoPreview.js b/src/components/NoTodoPreview/NoTodoPreview.js new file mode 100644 index 00000000..3fdda48c --- /dev/null +++ b/src/components/NoTodoPreview/NoTodoPreview.js @@ -0,0 +1 @@ +export default function NoTodoPreview() {} diff --git a/src/components/NoTodoPreview/NoTodoPreview.scss b/src/components/NoTodoPreview/NoTodoPreview.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/components/NoTodoPreview/index.js b/src/components/NoTodoPreview/index.js new file mode 100644 index 00000000..9438f057 --- /dev/null +++ b/src/components/NoTodoPreview/index.js @@ -0,0 +1 @@ +export { default } from "./NoTodoPreview"; diff --git a/src/components/TodoCounter/TodoCounter.js b/src/components/TodoCounter/TodoCounter.js new file mode 100644 index 00000000..8b34d1fd --- /dev/null +++ b/src/components/TodoCounter/TodoCounter.js @@ -0,0 +1 @@ +export default function TodoCounter() {} diff --git a/src/components/TodoCounter/TodoCounter.scss b/src/components/TodoCounter/TodoCounter.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/components/TodoCounter/index.js b/src/components/TodoCounter/index.js new file mode 100644 index 00000000..7c8f234a --- /dev/null +++ b/src/components/TodoCounter/index.js @@ -0,0 +1 @@ +export { default } from "./TodoCounter"; diff --git a/src/components/TodoCreate/TodoCreate.js b/src/components/TodoCreate/TodoCreate.js new file mode 100644 index 00000000..273fe59c --- /dev/null +++ b/src/components/TodoCreate/TodoCreate.js @@ -0,0 +1 @@ +export default function TodoCreate() {} diff --git a/src/components/TodoCreate/TodoCreate.scss b/src/components/TodoCreate/TodoCreate.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/components/TodoCreate/index.js b/src/components/TodoCreate/index.js new file mode 100644 index 00000000..802eb725 --- /dev/null +++ b/src/components/TodoCreate/index.js @@ -0,0 +1 @@ +export { default } from "./TodoCreate"; diff --git a/src/components/TodoErrorMessage/TodoErrorMessage.js b/src/components/TodoErrorMessage/TodoErrorMessage.js new file mode 100644 index 00000000..e04385f4 --- /dev/null +++ b/src/components/TodoErrorMessage/TodoErrorMessage.js @@ -0,0 +1 @@ +export default function TodoErrorMessage() {} diff --git a/src/components/TodoErrorMessage/TodoErrorMessage.scss b/src/components/TodoErrorMessage/TodoErrorMessage.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/components/TodoErrorMessage/index.js b/src/components/TodoErrorMessage/index.js new file mode 100644 index 00000000..691d9a21 --- /dev/null +++ b/src/components/TodoErrorMessage/index.js @@ -0,0 +1 @@ +export { default } from "./TodoErrorMessage"; diff --git a/src/components/TodoFilter/TodoFilter.js b/src/components/TodoFilter/TodoFilter.js new file mode 100644 index 00000000..684790a7 --- /dev/null +++ b/src/components/TodoFilter/TodoFilter.js @@ -0,0 +1 @@ +export default function TodoFilter() {} diff --git a/src/components/TodoFilter/TodoFilter.scss b/src/components/TodoFilter/TodoFilter.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/components/TodoFilter/index.js b/src/components/TodoFilter/index.js new file mode 100644 index 00000000..91cde53d --- /dev/null +++ b/src/components/TodoFilter/index.js @@ -0,0 +1 @@ +export { default } from "./TodoFilter"; diff --git a/src/components/TodoInput/TodoInput.js b/src/components/TodoInput/TodoInput.js new file mode 100644 index 00000000..63fd2026 --- /dev/null +++ b/src/components/TodoInput/TodoInput.js @@ -0,0 +1,2 @@ +export function Button() {} +export default function TodoInput() {} diff --git a/src/components/TodoInput/TodoInput.scss b/src/components/TodoInput/TodoInput.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/components/TodoInput/index.js b/src/components/TodoInput/index.js new file mode 100644 index 00000000..a2a1eed3 --- /dev/null +++ b/src/components/TodoInput/index.js @@ -0,0 +1 @@ +export { default } from "./TodoInput"; diff --git a/src/components/TodoItem/TodoItem.js b/src/components/TodoItem/TodoItem.js new file mode 100644 index 00000000..c5a6439a --- /dev/null +++ b/src/components/TodoItem/TodoItem.js @@ -0,0 +1 @@ +export default function TodoItem() {} diff --git a/src/components/TodoItem/TodoItem.scss b/src/components/TodoItem/TodoItem.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/components/TodoItem/index.js b/src/components/TodoItem/index.js new file mode 100644 index 00000000..ca66afea --- /dev/null +++ b/src/components/TodoItem/index.js @@ -0,0 +1 @@ +export { default } from "./TodoItem"; diff --git a/src/components/TodoList/TodoList.js b/src/components/TodoList/TodoList.js new file mode 100644 index 00000000..bf0a2500 --- /dev/null +++ b/src/components/TodoList/TodoList.js @@ -0,0 +1 @@ +export default function TodoList() {} diff --git a/src/components/TodoList/TodoList.scss b/src/components/TodoList/TodoList.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/components/TodoList/index.js b/src/components/TodoList/index.js new file mode 100644 index 00000000..8d439448 --- /dev/null +++ b/src/components/TodoList/index.js @@ -0,0 +1 @@ +export { default } from "./TodoList"; From 09771cfc22666392c77850b90a2c2df98456b01c Mon Sep 17 00:00:00 2001 From: sergi92 <45389112+sergi92@users.noreply.github.com> Date: Tue, 21 Sep 2021 12:16:10 +0200 Subject: [PATCH 05/37] delete button complete --- src/components/DeleteButton/DeleteButton.js | 21 +++++++++++++++++++ src/components/DeleteButton/DeleteButton.scss | 4 ++++ 2 files changed, 25 insertions(+) diff --git a/src/components/DeleteButton/DeleteButton.js b/src/components/DeleteButton/DeleteButton.js index b2a185b5..3df931e3 100644 --- a/src/components/DeleteButton/DeleteButton.js +++ b/src/components/DeleteButton/DeleteButton.js @@ -1 +1,22 @@ export default function DeleteButton() {} + +class DeleteButton extends React.Component { + constructor(props){ + super(props); + + this.state = { + listToDelete: [], + } + }; + + deleteItem(item){ + const list = this.state.listToDelete.filter(i => i.id !== item.id) + this.setState({list}) + } + + render(){ + return + } +} diff --git a/src/components/DeleteButton/DeleteButton.scss b/src/components/DeleteButton/DeleteButton.scss index e69de29b..04c4d284 100644 --- a/src/components/DeleteButton/DeleteButton.scss +++ b/src/components/DeleteButton/DeleteButton.scss @@ -0,0 +1,4 @@ +.delete-button:hover{ + content: "\00d7"; /* This will render the 'X' */ +} + From 7b98efa602e6d09ac994c9988c469b70211d31c8 Mon Sep 17 00:00:00 2001 From: sergi92 <45389112+sergi92@users.noreply.github.com> Date: Tue, 21 Sep 2021 13:18:52 +0200 Subject: [PATCH 06/37] Buton DeleteButton TodoCounter TodoFilter ready --- src/components/Button/Button.js | 19 ++++++++++++ src/components/Button/Button.scss | 7 +++++ src/components/DeleteButton/DeleteButton.js | 7 +++-- src/components/NoTodoPreview/NoTodoPreview.js | 1 + src/components/TodoCounter/TodoCounter.js | 23 ++++++++++++++ src/components/TodoCounter/TodoCounter.scss | 3 ++ src/components/TodoFilter/TodoFilter.js | 31 +++++++++++++++++++ src/components/TodoFilter/TodoFilter.scss | 7 +++++ 8 files changed, 95 insertions(+), 3 deletions(-) diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index f9f4a715..67dfee75 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -1 +1,20 @@ +import React from "react"; + export default function Button() {} + +class Button extends React.Component{ + constructor(props){ + super(props) + } + clearCompleted(){ + + } + render(){ + return( + + ) + } + +} \ No newline at end of file diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index e69de29b..8c721fe8 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -0,0 +1,7 @@ +.btn{ + color:grey; +} + +.btn:hover{ + color:black; +} \ No newline at end of file diff --git a/src/components/DeleteButton/DeleteButton.js b/src/components/DeleteButton/DeleteButton.js index 3df931e3..87f48aaf 100644 --- a/src/components/DeleteButton/DeleteButton.js +++ b/src/components/DeleteButton/DeleteButton.js @@ -15,8 +15,9 @@ class DeleteButton extends React.Component { } render(){ - return + return ( + + ) } } diff --git a/src/components/NoTodoPreview/NoTodoPreview.js b/src/components/NoTodoPreview/NoTodoPreview.js index 3fdda48c..d06c0590 100644 --- a/src/components/NoTodoPreview/NoTodoPreview.js +++ b/src/components/NoTodoPreview/NoTodoPreview.js @@ -1 +1,2 @@ export default function NoTodoPreview() {} + diff --git a/src/components/TodoCounter/TodoCounter.js b/src/components/TodoCounter/TodoCounter.js index 8b34d1fd..4ec33899 100644 --- a/src/components/TodoCounter/TodoCounter.js +++ b/src/components/TodoCounter/TodoCounter.js @@ -1 +1,24 @@ export default function TodoCounter() {} +import "/TodoCounter.scss" + +class TodoCounter extends React.Component{ + constructor(props){ + super(props) + this.state = { + itemsLeft: 0 + } + + } + + updateCounter(){ + + } + + render(){ + return ( + + ) + } +} diff --git a/src/components/TodoCounter/TodoCounter.scss b/src/components/TodoCounter/TodoCounter.scss index e69de29b..1578c0e3 100644 --- a/src/components/TodoCounter/TodoCounter.scss +++ b/src/components/TodoCounter/TodoCounter.scss @@ -0,0 +1,3 @@ +.todo-counter{ + color: "grey"; +} \ No newline at end of file diff --git a/src/components/TodoFilter/TodoFilter.js b/src/components/TodoFilter/TodoFilter.js index 684790a7..dd910db7 100644 --- a/src/components/TodoFilter/TodoFilter.js +++ b/src/components/TodoFilter/TodoFilter.js @@ -1 +1,32 @@ +import React from "react"; + export default function TodoFilter() {} + +class TodoFilter extends React.Component{ + constructor(props){ + super(props) + } + filterAll(){ + + } + + filterActive(){ + + } + + filterCompleted(){ + + } + + render(){ + return ( +
+
    +
  • All
    • +
  • Active
    • +
  • Completed
    • +
+
+ ) + } +} diff --git a/src/components/TodoFilter/TodoFilter.scss b/src/components/TodoFilter/TodoFilter.scss index e69de29b..24ec300f 100644 --- a/src/components/TodoFilter/TodoFilter.scss +++ b/src/components/TodoFilter/TodoFilter.scss @@ -0,0 +1,7 @@ +.todo-filter{ + color:grey; +} + +.todo-filter:hover{ + color:black +} \ No newline at end of file From 1b4d6a281fbab85904a56b1348af29ac62881843 Mon Sep 17 00:00:00 2001 From: sanadriu Date: Tue, 21 Sep 2021 13:21:49 +0200 Subject: [PATCH 07/37] CheckBox created. Fixing required --- .eslintrc.js | 168 +++++++++++++------------- src/App.js | 2 + src/components/CheckBox/CheckBox.js | 59 ++++++++- src/components/CheckBox/CheckBox.scss | 43 +++++++ src/components/Footer/Footer.scss | 1 - 5 files changed, 187 insertions(+), 86 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 91f0a228..465c2470 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,84 +1,84 @@ -module.exports = { - env: { - browser: true, - es2021: true, - jest: true, - "jest/globals": true, - }, - extends: [ - "airbnb", - "eslint:recommended", - "plugin:react/recommended", - "plugin:import/errors", - "plugin:import/warnings", - "plugin:jsx-a11y/recommended", - "prettier", - "plugin:cypress/recommended", - ], - parser: "@babel/eslint-parser", - parserOptions: { - ecmaVersion: 12, - sourceType: "module", - requireConfigFile: "false", - jsx: true, - }, - plugins: [ - "html", - "react", - "react-hooks", - "jsx-a11y", - "markdown", - "react-hooks", - "import", - "prettier", - ], - settings: { - react: { - version: "detect", - }, - jest: { - version: 26, - }, - }, - overrides: [ - { - files: ["*.html"], - parser: "@html-eslint/parser", - extends: ["plugin:@html-eslint/recommended"], - }, - { - files: ["src/**/*.test.js"], - plugins: ["jest"], - rules: { - "jest/expect-expect": "error", - }, - extends: ["plugin:jest/recommended"], - }, - ], - rules: { - "prettier/prettier": [ - "error", - { - endOfLine: "auto", - }, - ], - "react/jsx-filename-extension": "off", - "import/prefer-default-export": "off", - "prefer-destructuring": "off", - "object-shorthand": "off", - "react/jsx-props-no-spreading": "off", - "arrow-body-style": "off", - "no-underscore-dangle": "off", - "react/forbid-prop-types": "off", - "react/prop-types": "off", - "no-unused-expressions": "off", - "jsx-a11y/label-has-for": [ - "error", - { - required: { - some: ["nesting", "id"], - }, - }, - ], - }, -}; +// module.exports = { +// env: { +// browser: true, +// es2021: true, +// jest: true, +// "jest/globals": true, +// }, +// extends: [ +// "airbnb", +// "eslint:recommended", +// "plugin:react/recommended", +// "plugin:import/errors", +// "plugin:import/warnings", +// "plugin:jsx-a11y/recommended", +// "prettier", +// "plugin:cypress/recommended", +// ], +// parser: "@babel/eslint-parser", +// parserOptions: { +// ecmaVersion: 12, +// sourceType: "module", +// requireConfigFile: "false", +// jsx: true, +// }, +// plugins: [ +// "html", +// "react", +// "react-hooks", +// "jsx-a11y", +// "markdown", +// "react-hooks", +// "import", +// "prettier", +// ], +// settings: { +// react: { +// version: "detect", +// }, +// jest: { +// version: 26, +// }, +// }, +// overrides: [ +// { +// files: ["*.html"], +// parser: "@html-eslint/parser", +// extends: ["plugin:@html-eslint/recommended"], +// }, +// { +// files: ["src/**/*.test.js"], +// plugins: ["jest"], +// rules: { +// "jest/expect-expect": "error", +// }, +// extends: ["plugin:jest/recommended"], +// }, +// ], +// rules: { +// "prettier/prettier": [ +// "error", +// { +// endOfLine: "auto", +// }, +// ], +// "react/jsx-filename-extension": "off", +// "import/prefer-default-export": "off", +// "prefer-destructuring": "off", +// "object-shorthand": "off", +// "react/jsx-props-no-spreading": "off", +// "arrow-body-style": "off", +// "no-underscore-dangle": "off", +// "react/forbid-prop-types": "off", +// "react/prop-types": "off", +// "no-unused-expressions": "off", +// "jsx-a11y/label-has-for": [ +// "error", +// { +// required: { +// some: ["nesting", "id"], +// }, +// }, +// ], +// }, +// }; diff --git a/src/App.js b/src/App.js index de524524..61749187 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,5 @@ import React from "react"; +import CheckBox from "./components/CheckBox"; function App() { return ( @@ -6,6 +7,7 @@ function App() {

Hola mundo

+
diff --git a/src/components/CheckBox/CheckBox.js b/src/components/CheckBox/CheckBox.js index 7dfc1e79..e02a9ccb 100644 --- a/src/components/CheckBox/CheckBox.js +++ b/src/components/CheckBox/CheckBox.js @@ -1 +1,58 @@ -export default function CheckBox() {} +import { Component } from "react"; +import "./CheckBox.scss"; + +export default class CheckBox extends Component { + constructor(props) { + super(props); + + this.state = { + isChecked: false, + }; + } + + handleCheck = (event) => { + //this.props.handleCheck(this.props.id, this.state.isChecked) + + this.setState((prevState) => ({ + ...prevState, + isChecked: !prevState.isChecked, + })); + }; + + componentDidUpdate() { + console.log(this.state.isChecked); + } + + render() { + const { id = "dummy" } = this.props; + const { isChecked } = this.state; + + return ( +
+ + +
+ ); + } +} diff --git a/src/components/CheckBox/CheckBox.scss b/src/components/CheckBox/CheckBox.scss index e69de29b..e31b13af 100644 --- a/src/components/CheckBox/CheckBox.scss +++ b/src/components/CheckBox/CheckBox.scss @@ -0,0 +1,43 @@ +.checkbox { + &__input { + position: absolute; + cursor: pointer; + opacity: 0; + } + + &__label { + display: flex; + align-items: center; + justify-content: center; + + width: 2rem; + height: 2rem; + + cursor: pointer; + user-select: none; + + border-radius: 50%; + font-size: 1.25rem; + box-shadow: 0 0 4px rgba(0,0,0,0.2); + + &--checked { + background: linear-gradient(147deg, rgba(62,141,180,1) 0%, rgba(236,41,251,1) 100%);; + } + } + + &__checkmark { + display: block; + + width: 90%; + height: 90%; + + border-radius: 50%; + text-align: center; + color: white; + background: white; + + &--checked { + background: transparent; + } + } +} diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss index cc1a1e2e..e69de29b 100644 --- a/src/components/Footer/Footer.scss +++ b/src/components/Footer/Footer.scss @@ -1 +0,0 @@ -export function Button() {} From bb1ba6e71162aac3b1bf1886a9517a7a0746d236 Mon Sep 17 00:00:00 2001 From: sanadriu Date: Tue, 21 Sep 2021 13:57:27 +0200 Subject: [PATCH 08/37] App component brainstorm --- src/App.js | 105 ++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 91 insertions(+), 14 deletions(-) diff --git a/src/App.js b/src/App.js index 61749187..295fc6c7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,94 @@ -import React from "react"; -import CheckBox from "./components/CheckBox"; - -function App() { - return ( -
-
-
-

Hola mundo

- -
-
-
- ); +import React, { Component } from "react"; +import { v4 as uuid } from "uuid"; + +import TodoCreate from "./components/TodoCreate"; +import TodoList from "./components/TodoList"; +import Footer from "./components/Footer"; + +class App extends Component { + constructor(props) { + super(props); + this.state = { + todos: [ + { + id: "9c34e805-7bfc-401a-b386-468c25315e46", + text: "todo 01", + done: false, + isEditing: false, + }, + { + id: "d733a37e-cc4e-4cde-916f-935b3e915bb3", + text: "todo 02", + done: false, + isEditing: false, + }, + ], + }; + + this.addTodo = this.addTodo.bind(this); + this.deleteTodo = this.deleteTodo.bind(this); + } + + addTodo(data) { + const { todos } = this.state; + + todos.push({ + ...data, + id: uuid(), + }); + + this.setState((prevState) => ({ + ...prevState, + todos: newTodos, + })); + } + + deleteTodo(id) { + const { todos } = this.state; + + const newTodos = todos.filter((item) => item.id !== id); + + this.setState((prevState) => ({ + ...prevState, + todos: newTodos, + })); + } + + setDoneTodo(id) { + const { todos } = this.state; + + const newTodos = todos.map((item) => { + if (item.id === id) item.done = !item.done; + + return item; + }); + + this.setState((prevState) => ({ + ...prevState, + todos: newTodos, + })); + } + + render() { + return ( +
+
+
+

TODO

+ +
+ +
+
+
+
+
+ ); + } } export default App; From 96b0228ae5bcbf547c3ca9edb69161ec359f9e9a Mon Sep 17 00:00:00 2001 From: sanadriu Date: Tue, 21 Sep 2021 15:52:09 +0200 Subject: [PATCH 09/37] Saving changes --- .prettierrc | 2 +- src/App.js | 38 ++++++++++++++++++------- src/components/CheckBox/CheckBox.js | 32 ++++++++++----------- src/components/TodoCreate/TodoCreate.js | 24 +++++++++++++++- src/components/TodoItem/TodoItem.js | 38 ++++++++++++++++++++++++- src/components/TodoList/TodoList.js | 22 +++++++++++++- 6 files changed, 125 insertions(+), 31 deletions(-) diff --git a/.prettierrc b/.prettierrc index 8c4b2fa1..6b246796 100644 --- a/.prettierrc +++ b/.prettierrc @@ -6,7 +6,7 @@ "insertPragma": false, "jsxBracketSameLine": false, "jsxSingleQuote": false, - "printWidth": 80, + "printWidth": 160, "proseWrap": "always", "quoteProps": "as-needed", "requirePragma": false, diff --git a/src/App.js b/src/App.js index 295fc6c7..491ca3ee 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import { v4 as uuid } from "uuid"; import TodoCreate from "./components/TodoCreate"; import TodoList from "./components/TodoList"; import Footer from "./components/Footer"; +import NoTodoPreview from "./components/NoTodoPreview"; class App extends Component { constructor(props) { @@ -54,11 +55,26 @@ class App extends Component { })); } - setDoneTodo(id) { + setTextTodo(id, text) { const { todos } = this.state; const newTodos = todos.map((item) => { - if (item.id === id) item.done = !item.done; + if (item.id === id) item.text = text; + + return item; + }); + + this.setState((prevState) => ({ + ...prevState, + todos: newTodos, + })); + } + + setDoneTodo(id, isDone) { + const { todos } = this.state; + + const newTodos = todos.map((item) => { + if (item.id === id) item.done = isDone; return item; }); @@ -70,20 +86,20 @@ class App extends Component { } render() { + const { todos } = this.state; + + const content = todos.length > 0 ? : ; + return (

TODO

- -
- -
-
+ +
+ {content} +
+
diff --git a/src/components/CheckBox/CheckBox.js b/src/components/CheckBox/CheckBox.js index e02a9ccb..29338bbd 100644 --- a/src/components/CheckBox/CheckBox.js +++ b/src/components/CheckBox/CheckBox.js @@ -4,41 +4,41 @@ import "./CheckBox.scss"; export default class CheckBox extends Component { constructor(props) { super(props); - - this.state = { - isChecked: false, - }; } handleCheck = (event) => { - //this.props.handleCheck(this.props.id, this.state.isChecked) + //this.props.handleCheck(this.props.id, event.target.checked); + }; + handleMouse = (event) => { this.setState((prevState) => ({ ...prevState, - isChecked: !prevState.isChecked, + isHovered: !prevState.isHovered, })); }; - componentDidUpdate() { - console.log(this.state.isChecked); - } - render() { - const { id = "dummy" } = this.props; - const { isChecked } = this.state; + const { id = "dummy", checked = false } = this.props; + + const checkStyle = ""; + const labelStyle = ""; return ( -
+
diff --git a/src/components/CheckBox/CheckBox.js b/src/components/CheckBox/CheckBox.js index 29338bbd..50109dfb 100644 --- a/src/components/CheckBox/CheckBox.js +++ b/src/components/CheckBox/CheckBox.js @@ -1,58 +1,21 @@ import { Component } from "react"; +import { v4 as uuid } from "uuid"; import "./CheckBox.scss"; export default class CheckBox extends Component { constructor(props) { super(props); - } - handleCheck = (event) => { - //this.props.handleCheck(this.props.id, event.target.checked); - }; + this.handleChange = this.handleChange.bind(this); + } - handleMouse = (event) => { - this.setState((prevState) => ({ - ...prevState, - isHovered: !prevState.isHovered, - })); - }; + onChange(event) { + this.props.handleChange(event.target.checked); + } render() { - const { id = "dummy", checked = false } = this.props; - - const checkStyle = ""; - const labelStyle = ""; + const { id = uuid(), checked, disabled } = this.props; - return ( -
- - -
- ); + return ; } } diff --git a/src/components/CheckBox/CheckBox.scss b/src/components/CheckBox/CheckBox.scss index e31b13af..c5998eb0 100644 --- a/src/components/CheckBox/CheckBox.scss +++ b/src/components/CheckBox/CheckBox.scss @@ -1,43 +1,36 @@ .checkbox { - &__input { - position: absolute; - cursor: pointer; - opacity: 0; - } - - &__label { - display: flex; - align-items: center; - justify-content: center; - - width: 2rem; - height: 2rem; - - cursor: pointer; - user-select: none; + appearance: none; + display: flex; + align-items: center; + justify-content: center; + + width: 2rem; + height: 2rem; + + cursor: pointer; + user-select: none; - border-radius: 50%; - font-size: 1.25rem; - box-shadow: 0 0 4px rgba(0,0,0,0.2); + border-radius: 50%; + font-size: 1.25rem; + box-shadow: 0 0 4px rgba(0,0,0,0.2); - &--checked { - background: linear-gradient(147deg, rgba(62,141,180,1) 0%, rgba(236,41,251,1) 100%);; - } + &::after { + content: '\2713'; + font-size: 1.5rem; + color: white; + display: none; } - &__checkmark { - display: block; + &:hover { + background: linear-gradient(135deg, rgba(62,141,180,0.25) 0%, rgba(236,41,251,0.25) 100%); + } - width: 90%; - height: 90%; - - border-radius: 50%; - text-align: center; - color: white; - background: white; + &:checked { + background: linear-gradient(135deg, rgba(62,141,180,1) 0%, rgba(236,41,251,1) 100%); + } - &--checked { - background: transparent; - } + &:checked::after { + display: block; } } + diff --git a/src/components/CheckBoxOld/CheckBox.js b/src/components/CheckBoxOld/CheckBox.js new file mode 100644 index 00000000..29338bbd --- /dev/null +++ b/src/components/CheckBoxOld/CheckBox.js @@ -0,0 +1,58 @@ +import { Component } from "react"; +import "./CheckBox.scss"; + +export default class CheckBox extends Component { + constructor(props) { + super(props); + } + + handleCheck = (event) => { + //this.props.handleCheck(this.props.id, event.target.checked); + }; + + handleMouse = (event) => { + this.setState((prevState) => ({ + ...prevState, + isHovered: !prevState.isHovered, + })); + }; + + render() { + const { id = "dummy", checked = false } = this.props; + + const checkStyle = ""; + const labelStyle = ""; + + return ( +
+ + +
+ ); + } +} diff --git a/src/components/CheckBoxOld/CheckBox.scss b/src/components/CheckBoxOld/CheckBox.scss new file mode 100644 index 00000000..e31b13af --- /dev/null +++ b/src/components/CheckBoxOld/CheckBox.scss @@ -0,0 +1,43 @@ +.checkbox { + &__input { + position: absolute; + cursor: pointer; + opacity: 0; + } + + &__label { + display: flex; + align-items: center; + justify-content: center; + + width: 2rem; + height: 2rem; + + cursor: pointer; + user-select: none; + + border-radius: 50%; + font-size: 1.25rem; + box-shadow: 0 0 4px rgba(0,0,0,0.2); + + &--checked { + background: linear-gradient(147deg, rgba(62,141,180,1) 0%, rgba(236,41,251,1) 100%);; + } + } + + &__checkmark { + display: block; + + width: 90%; + height: 90%; + + border-radius: 50%; + text-align: center; + color: white; + background: white; + + &--checked { + background: transparent; + } + } +} diff --git a/src/components/CheckBoxOld/index.js b/src/components/CheckBoxOld/index.js new file mode 100644 index 00000000..551e1723 --- /dev/null +++ b/src/components/CheckBoxOld/index.js @@ -0,0 +1 @@ +export { default } from "./CheckBox"; diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js new file mode 100644 index 00000000..29f388f5 --- /dev/null +++ b/src/components/Input/Input.js @@ -0,0 +1,2 @@ +export function Button() {} +export default function Input() {} diff --git a/src/components/TodoInput/TodoInput.scss b/src/components/Input/Input.scss similarity index 100% rename from src/components/TodoInput/TodoInput.scss rename to src/components/Input/Input.scss diff --git a/src/components/Input/index.js b/src/components/Input/index.js new file mode 100644 index 00000000..a50d7d11 --- /dev/null +++ b/src/components/Input/index.js @@ -0,0 +1 @@ +export { default } from "./Input"; diff --git a/src/components/TodoCreate/TodoCreate.js b/src/components/TodoCreate/TodoCreate.js index c22b6b66..9c0d3f69 100644 --- a/src/components/TodoCreate/TodoCreate.js +++ b/src/components/TodoCreate/TodoCreate.js @@ -1,7 +1,8 @@ import { Component } from "react"; +import { Formik } from "formik"; export default class TodoCreate extends Component { - construct(props) { + constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); @@ -12,12 +13,23 @@ export default class TodoCreate extends Component { } render() { - <> - - - - - - ; + return ( +
+ { + setTimeout(() => { + this.handleSetText(values.text); + }, 500); + }} + > + {(props) => ( +
+ +
+ )} + +
+ ); } } diff --git a/src/components/TodoInput/TodoInput.js b/src/components/TodoInput/TodoInput.js deleted file mode 100644 index 63fd2026..00000000 --- a/src/components/TodoInput/TodoInput.js +++ /dev/null @@ -1,2 +0,0 @@ -export function Button() {} -export default function TodoInput() {} diff --git a/src/components/TodoInput/index.js b/src/components/TodoInput/index.js deleted file mode 100644 index a2a1eed3..00000000 --- a/src/components/TodoInput/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./TodoInput"; diff --git a/src/components/TodoItem/TodoItem.js b/src/components/TodoItem/TodoItem.js index e90c6af3..a72889e1 100644 --- a/src/components/TodoItem/TodoItem.js +++ b/src/components/TodoItem/TodoItem.js @@ -1,7 +1,11 @@ import { Component } from "react"; +import { Formik } from "formik"; +import CheckBox from "../CheckBox"; +import DeleteButton from "../DeleteButton"; +import Input from "../Input"; export default class TodoItem extends Component { - construct(props) { + constructor(props) { super(props); this.handleSetText = this.handleSetText.bind(this); @@ -9,12 +13,12 @@ export default class TodoItem extends Component { this.handleDelete = this.handleDelete.bind(this); } - handleSetText(event) { - this.props.handleSetText(this.props.id, event.target.value); + handleSetText(text) { + this.props.handleSetText(this.props.id, text); } - handleSetDone(event) { - this.props.handleSetDone(this.props.id, event.target.checked); + handleSetDone(done) { + this.props.handleSetDone(this.props.id, done); } handleDelete() { @@ -22,16 +26,27 @@ export default class TodoItem extends Component { } render() { - <> -
- - - - - -
- {/**/} - {/**/} - ; + return ( + <> +
+ + { + setTimeout(() => { + this.handleSetText(values.text); + }, 500); + }} + > + {(props) => ( +
+ +
+ )} + + +
+ + ); } } diff --git a/src/components/TodoList/TodoList.js b/src/components/TodoList/TodoList.js index 5c235b39..63e07642 100644 --- a/src/components/TodoList/TodoList.js +++ b/src/components/TodoList/TodoList.js @@ -1,7 +1,8 @@ import { Component } from "react"; +import TodoItem from "../TodoItem"; export default class TodoList extends Component { - construct(props) { + constructor(props) { super(props); } @@ -12,7 +13,7 @@ export default class TodoList extends Component {
    {todos.map((item) => (
  • - +
    • ))}
From 6ed46dd6f988081dfbc8563f79f0b29d2a521d25 Mon Sep 17 00:00:00 2001 From: sanadriu Date: Wed, 22 Sep 2021 10:17:12 +0200 Subject: [PATCH 11/37] Saving changes --- src/App.js | 2 ++ src/components/CheckBox/CheckBox.js | 10 ++---- src/components/DeleteButton/DeleteButton.js | 4 ++- src/components/Input/Input.js | 38 +++++++++++++++++++-- src/components/TodoCreate/TodoCreate.js | 8 +++-- src/components/TodoItem/TodoItem.js | 19 ++++++----- src/components/TodoList/TodoList.js | 4 +-- 7 files changed, 61 insertions(+), 24 deletions(-) diff --git a/src/App.js b/src/App.js index 41953877..ce9cef41 100644 --- a/src/App.js +++ b/src/App.js @@ -29,6 +29,8 @@ class App extends Component { this.addTodo = this.addTodo.bind(this); this.deleteTodo = this.deleteTodo.bind(this); + this.setTextTodo = this.setTextTodo.bind(this); + this.setDoneTodo = this.setDoneTodo.bind(this); } addTodo(data) { diff --git a/src/components/CheckBox/CheckBox.js b/src/components/CheckBox/CheckBox.js index 50109dfb..22851b8f 100644 --- a/src/components/CheckBox/CheckBox.js +++ b/src/components/CheckBox/CheckBox.js @@ -5,17 +5,11 @@ import "./CheckBox.scss"; export default class CheckBox extends Component { constructor(props) { super(props); - - this.handleChange = this.handleChange.bind(this); - } - - onChange(event) { - this.props.handleChange(event.target.checked); } render() { - const { id = uuid(), checked, disabled } = this.props; + const { id = uuid(), name = "checkbox", handleChange = () => {}, checked, ...props } = this.props; - return ; + return ; } } diff --git a/src/components/DeleteButton/DeleteButton.js b/src/components/DeleteButton/DeleteButton.js index b2a185b5..2df6892f 100644 --- a/src/components/DeleteButton/DeleteButton.js +++ b/src/components/DeleteButton/DeleteButton.js @@ -1 +1,3 @@ -export default function DeleteButton() {} +export default function DeleteButton() { + return ; +} diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js index 29f388f5..5bffad1f 100644 --- a/src/components/Input/Input.js +++ b/src/components/Input/Input.js @@ -1,2 +1,36 @@ -export function Button() {} -export default function Input() {} +import React, { Component } from "react"; +import { v4 as uuid } from "uuid"; + +export default class Input extends Component { + constructor(props) { + super(props); + } + + render() { + const { + id = uuid(), + name = "name", + type = "text", + value = "", + placeholder = "", + handleChange = () => {}, + handleBlur = () => {}, + invalid, + ...props + } = this.props; + + return ( + + ); + } +} diff --git a/src/components/TodoCreate/TodoCreate.js b/src/components/TodoCreate/TodoCreate.js index 9c0d3f69..ccfe7d9f 100644 --- a/src/components/TodoCreate/TodoCreate.js +++ b/src/components/TodoCreate/TodoCreate.js @@ -1,6 +1,8 @@ import { Component } from "react"; import { Formik } from "formik"; +import Input from "../Input"; + export default class TodoCreate extends Component { constructor(props) { super(props); @@ -23,9 +25,9 @@ export default class TodoCreate extends Component { }, 500); }} > - {(props) => ( -
- + {({ handleChange, handleBlur, handleSubmit, errors, values, touched, isValidating, isValid }) => ( + +
)} diff --git a/src/components/TodoItem/TodoItem.js b/src/components/TodoItem/TodoItem.js index a72889e1..bfb8c152 100644 --- a/src/components/TodoItem/TodoItem.js +++ b/src/components/TodoItem/TodoItem.js @@ -13,12 +13,12 @@ export default class TodoItem extends Component { this.handleDelete = this.handleDelete.bind(this); } - handleSetText(text) { - this.props.handleSetText(this.props.id, text); + handleSetText(event) { + this.props.handleSetText(this.props.id, event.target.value); } - handleSetDone(done) { - this.props.handleSetDone(this.props.id, done); + handleSetDone(event) { + this.props.handleSetDone(this.props.id, event.target.checked); } handleDelete() { @@ -31,16 +31,19 @@ export default class TodoItem extends Component {
{ setTimeout(() => { this.handleSetText(values.text); }, 500); }} > - {(props) => ( -
- + {({ handleChange, handleBlur, handleSubmit, errors, values, touched, isValidating, isValid }) => ( + +
)} diff --git a/src/components/TodoList/TodoList.js b/src/components/TodoList/TodoList.js index 63e07642..b42eece5 100644 --- a/src/components/TodoList/TodoList.js +++ b/src/components/TodoList/TodoList.js @@ -12,8 +12,8 @@ export default class TodoList extends Component { return (
    {todos.map((item) => ( -
  • - +
  • +
    • ))}
From fcef71ed9578c11aa165036d488ed447a3b7bc98 Mon Sep 17 00:00:00 2001 From: sanadriu Date: Wed, 22 Sep 2021 12:58:51 +0200 Subject: [PATCH 12/37] Form functionality completed --- src/App.js | 20 +++--- src/App.scss | 0 src/components/Button/Button.js | 32 ++++----- src/components/Button/Button.scss | 10 +-- src/components/ButtonClear/ButtonClear.js | 11 +++ src/components/ButtonClear/ButtonClear.scss | 7 ++ src/components/ButtonClear/index.js | 1 + src/components/CheckBox/CheckBox.js | 14 +++- src/components/DeleteButton/DeleteButton.js | 13 ---- src/components/DeleteButton/DeleteButton.scss | 4 -- src/components/DeleteButton/index.js | 1 - src/components/TodoCreate/TodoCreate.js | 13 ++-- src/components/TodoCreate/TodoCreate.scss | 8 +++ src/components/TodoItem/TodoItem.js | 71 +++++++++++++------ src/components/TodoList/TodoList.js | 32 ++++++++- src/index.js | 2 +- .../utilities/_responsive-container.scss | 10 --- 17 files changed, 154 insertions(+), 95 deletions(-) create mode 100644 src/App.scss create mode 100644 src/components/ButtonClear/ButtonClear.js create mode 100644 src/components/ButtonClear/ButtonClear.scss create mode 100644 src/components/ButtonClear/index.js delete mode 100644 src/components/DeleteButton/DeleteButton.js delete mode 100644 src/components/DeleteButton/DeleteButton.scss delete mode 100644 src/components/DeleteButton/index.js diff --git a/src/App.js b/src/App.js index ce9cef41..68292c9d 100644 --- a/src/App.js +++ b/src/App.js @@ -5,7 +5,7 @@ import TodoCreate from "./components/TodoCreate"; import TodoList from "./components/TodoList"; import Footer from "./components/Footer"; import NoTodoPreview from "./components/NoTodoPreview"; -import CheckBox from "./components/CheckBox"; +import "./App.scss"; class App extends Component { constructor(props) { @@ -43,7 +43,7 @@ class App extends Component { this.setState((prevState) => ({ ...prevState, - todos: newTodos, + todos: todos, })); } @@ -99,16 +99,12 @@ class App extends Component { ); return ( -
-
-
-

TODO

- -
- {content} - {/*
*/} -
-
+
+

TODO

+ +
+ {content} + {/*
*/}
); diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index 67dfee75..a0c619e6 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -1,20 +1,18 @@ -import React from "react"; +import React, { Component } from "react"; +import "./Button.scss"; -export default function Button() {} +export default class Button extends Component { + constructor(props) { + super(props); + } -class Button extends React.Component{ - constructor(props){ - super(props) - } - clearCompleted(){ + render() { + const { handleClick, children } = this.props; - } - render(){ - return( - - ) - } - -} \ No newline at end of file + return ( + + ); + } +} diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 8c721fe8..33dcb082 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -1,7 +1,9 @@ -.btn{ - color:grey; +.btn { + padding: 1rem; + display: block; } .btn:hover{ - color:black; -} \ No newline at end of file + content: "\00d7"; /* This will render the 'X' */ +} + diff --git a/src/components/ButtonClear/ButtonClear.js b/src/components/ButtonClear/ButtonClear.js new file mode 100644 index 00000000..d4a23de7 --- /dev/null +++ b/src/components/ButtonClear/ButtonClear.js @@ -0,0 +1,11 @@ +import React from "react"; + +export default class ButtonClear extends React.Component { + constructor(props) { + super(props); + } + clearCompleted() {} + render() { + return ; + } +} diff --git a/src/components/ButtonClear/ButtonClear.scss b/src/components/ButtonClear/ButtonClear.scss new file mode 100644 index 00000000..8c721fe8 --- /dev/null +++ b/src/components/ButtonClear/ButtonClear.scss @@ -0,0 +1,7 @@ +.btn{ + color:grey; +} + +.btn:hover{ + color:black; +} \ No newline at end of file diff --git a/src/components/ButtonClear/index.js b/src/components/ButtonClear/index.js new file mode 100644 index 00000000..a3f2893b --- /dev/null +++ b/src/components/ButtonClear/index.js @@ -0,0 +1 @@ +export { default } from "./ButtonClear"; diff --git a/src/components/CheckBox/CheckBox.js b/src/components/CheckBox/CheckBox.js index 22851b8f..40b1a98a 100644 --- a/src/components/CheckBox/CheckBox.js +++ b/src/components/CheckBox/CheckBox.js @@ -10,6 +10,18 @@ export default class CheckBox extends Component { render() { const { id = uuid(), name = "checkbox", handleChange = () => {}, checked, ...props } = this.props; - return ; + return ( + { + handleChange(event.target.checked); + }} + {...props} + /> + ); } } diff --git a/src/components/DeleteButton/DeleteButton.js b/src/components/DeleteButton/DeleteButton.js deleted file mode 100644 index 167f1e08..00000000 --- a/src/components/DeleteButton/DeleteButton.js +++ /dev/null @@ -1,13 +0,0 @@ -export default function DeleteButton() {} - -class DeleteButton extends React.Component { - constructor(props) { - super(props); - } - - render() { - const { handleClick } = this.props; - - return ; - } -} diff --git a/src/components/DeleteButton/DeleteButton.scss b/src/components/DeleteButton/DeleteButton.scss deleted file mode 100644 index 04c4d284..00000000 --- a/src/components/DeleteButton/DeleteButton.scss +++ /dev/null @@ -1,4 +0,0 @@ -.delete-button:hover{ - content: "\00d7"; /* This will render the 'X' */ -} - diff --git a/src/components/DeleteButton/index.js b/src/components/DeleteButton/index.js deleted file mode 100644 index e1157601..00000000 --- a/src/components/DeleteButton/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./DeleteButton"; diff --git a/src/components/TodoCreate/TodoCreate.js b/src/components/TodoCreate/TodoCreate.js index ccfe7d9f..d7e6cf97 100644 --- a/src/components/TodoCreate/TodoCreate.js +++ b/src/components/TodoCreate/TodoCreate.js @@ -1,27 +1,24 @@ import { Component } from "react"; import { Formik } from "formik"; +import "./TodoCreate.scss"; import Input from "../Input"; export default class TodoCreate extends Component { constructor(props) { super(props); - - this.handleSubmit = this.handleSubmit.bind(this); - } - - handleSubmit(event) { - //; } render() { + const { handleAddTodo } = this.props; + return ( -
+
{ setTimeout(() => { - this.handleSetText(values.text); + handleAddTodo(values); }, 500); }} > diff --git a/src/components/TodoCreate/TodoCreate.scss b/src/components/TodoCreate/TodoCreate.scss index e69de29b..4cadd0f3 100644 --- a/src/components/TodoCreate/TodoCreate.scss +++ b/src/components/TodoCreate/TodoCreate.scss @@ -0,0 +1,8 @@ +.todo-create { + width: 100%; + + padding: 0.5rem; + + box-shadow: 0 0 4px rgba(0,0,0,0.25); + border-radius: 0.25rem; +} \ No newline at end of file diff --git a/src/components/TodoItem/TodoItem.js b/src/components/TodoItem/TodoItem.js index bfb8c152..56dabad9 100644 --- a/src/components/TodoItem/TodoItem.js +++ b/src/components/TodoItem/TodoItem.js @@ -1,7 +1,7 @@ import { Component } from "react"; import { Formik } from "formik"; import CheckBox from "../CheckBox"; -import DeleteButton from "../DeleteButton"; +import Button from "../Button"; import Input from "../Input"; export default class TodoItem extends Component { @@ -11,45 +11,70 @@ export default class TodoItem extends Component { this.handleSetText = this.handleSetText.bind(this); this.handleSetDone = this.handleSetDone.bind(this); this.handleDelete = this.handleDelete.bind(this); + this.handleEnableForm = this.handleEnableForm.bind(this); } - handleSetText(event) { - this.props.handleSetText(this.props.id, event.target.value); + handleSetText(text) { + this.props.handleSetText(this.props.id, text); } - handleSetDone(event) { - this.props.handleSetDone(this.props.id, event.target.checked); + handleSetDone(checked) { + this.props.handleSetDone(this.props.id, checked); } handleDelete() { this.props.handleDelete(this.props.id); } + handleEnableForm() { + this.props.handleEnableForm(this.props.id); + } + render() { + const { text, enabledForm, handleDisableForm } = this.props; + return ( <>
- { - setTimeout(() => { - this.handleSetText(values.text); - }, 500); - }} - > - {({ handleChange, handleBlur, handleSubmit, errors, values, touched, isValidating, isValid }) => ( -
- -
- )} - - + {enabledForm ? ( + + ) : ( + + )} +
); } } + +class TodoItemForm extends Component { + constructor(props) { + super(props); + } + + render() { + const { text, handleSetText, handleDisableForm } = this.props; + + return ( + { + setTimeout(() => { + handleSetText(values.text); + handleDisableForm(); + }, 500); + }} + > + {({ handleChange, handleBlur, handleSubmit, errors, values, touched, isValidating, isValid }) => ( +
+ +
+ )} + + ); + } +} diff --git a/src/components/TodoList/TodoList.js b/src/components/TodoList/TodoList.js index b42eece5..280245da 100644 --- a/src/components/TodoList/TodoList.js +++ b/src/components/TodoList/TodoList.js @@ -4,16 +4,46 @@ import TodoItem from "../TodoItem"; export default class TodoList extends Component { constructor(props) { super(props); + + this.state = { + enabledFormId: null, + }; + + this.enableForm = this.enableForm.bind(this); + this.disableForm = this.disableForm.bind(this); + } + + enableForm(id) { + this.setState((prevState) => ({ + ...prevState, + enabledFormId: id, + })); + } + + disableForm() { + this.setState((prevState) => ({ + ...prevState, + enabledFormId: null, + })); } render() { const { todos, handleDelete, handleSetDone, handleSetText } = this.props; + const { enabledFormId } = this.state; return (
    {todos.map((item) => (
  • - +
    • ))}
diff --git a/src/index.js b/src/index.js index 8c3ec24f..8582ead3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ import React from "react"; import ReactDOM from "react-dom"; -import "bootstrap/dist/css/bootstrap.min.css"; +//import "bootstrap/dist/css/bootstrap.min.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; diff --git a/src/styles/utilities/_responsive-container.scss b/src/styles/utilities/_responsive-container.scss index 8eb9f398..3a81aad7 100644 --- a/src/styles/utilities/_responsive-container.scss +++ b/src/styles/utilities/_responsive-container.scss @@ -5,28 +5,18 @@ .container-sm { @include responsive-width.width-constraint(breakpoint.$sm); - @include responsive-width.width-constraint(breakpoint.$md); - @include responsive-width.width-constraint(breakpoint.$lg); - @include responsive-width.width-constraint(breakpoint.$xl); - @include responsive-width.width-constraint(breakpoint.$xxl); } .container-md { @include responsive-width.width-constraint(breakpoint.$md); - @include responsive-width.width-constraint(breakpoint.$lg); - @include responsive-width.width-constraint(breakpoint.$xl); - @include responsive-width.width-constraint(breakpoint.$xxl); } .container-lg { @include responsive-width.width-constraint(breakpoint.$lg); - @include responsive-width.width-constraint(breakpoint.$xl); - @include responsive-width.width-constraint(breakpoint.$xxl); } .container-xl { @include responsive-width.width-constraint(breakpoint.$xl); - @include responsive-width.width-constraint(breakpoint.$xxl); } .container-xxl { From 588a5516f5565732294f185e5e08528df2cd3644 Mon Sep 17 00:00:00 2001 From: sergi92 <45389112+sergi92@users.noreply.github.com> Date: Wed, 22 Sep 2021 13:31:48 +0200 Subject: [PATCH 13/37] Footer filter rendered --- src/App.js | 2 +- src/components/Footer/Footer.js | 20 +++++++++++++++++++- src/components/TodoCounter/TodoCounter.js | 19 +++++-------------- 3 files changed, 25 insertions(+), 16 deletions(-) diff --git a/src/App.js b/src/App.js index 68292c9d..2f52c63c 100644 --- a/src/App.js +++ b/src/App.js @@ -104,7 +104,7 @@ class App extends Component {
{content} - {/*
*/} + {
}
); diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js index 2e3dd8f5..929b133e 100644 --- a/src/components/Footer/Footer.js +++ b/src/components/Footer/Footer.js @@ -1 +1,19 @@ -export default function Footer() {} +import React from "react"; +import TodoCounter from "../TodoCounter/TodoCounter"; + + + +export default class Footer extends React.Component{ + constructor(props){ + super(props) + + } + render (){ + return( + + + + ) + } + +} \ No newline at end of file diff --git a/src/components/TodoCounter/TodoCounter.js b/src/components/TodoCounter/TodoCounter.js index 4ec33899..eae9462e 100644 --- a/src/components/TodoCounter/TodoCounter.js +++ b/src/components/TodoCounter/TodoCounter.js @@ -1,23 +1,14 @@ -export default function TodoCounter() {} -import "/TodoCounter.scss" - -class TodoCounter extends React.Component{ +import "./TodoCounter.scss" +import React from "react" +export default class TodoCounter extends React.Component{ constructor(props){ - super(props) - this.state = { - itemsLeft: 0 - } - - } - - updateCounter(){ - + super(props) } render(){ return ( ) } From 0aa518b3556e4a25c9804b6beefac6058384f999 Mon Sep 17 00:00:00 2001 From: sergi92 <45389112+sergi92@users.noreply.github.com> Date: Wed, 22 Sep 2021 16:10:14 +0200 Subject: [PATCH 14/37] NoTodoPreview ready --- src/App.js | 2 +- src/components/Footer/Footer.js | 19 ++++++++++--------- src/components/NoTodoPreview/NoTodoPreview.js | 19 ++++++++++++++++++- .../NoTodoPreview/NoTodoPreview.scss | 3 +++ src/img/undraw_wandering_mind_0mkm.svg | 1 + 5 files changed, 33 insertions(+), 11 deletions(-) create mode 100644 src/img/undraw_wandering_mind_0mkm.svg diff --git a/src/App.js b/src/App.js index 2f52c63c..a12df704 100644 --- a/src/App.js +++ b/src/App.js @@ -104,7 +104,7 @@ class App extends Component {
{content} - {
} +
); diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js index 929b133e..bfa82859 100644 --- a/src/components/Footer/Footer.js +++ b/src/components/Footer/Footer.js @@ -4,16 +4,17 @@ import TodoCounter from "../TodoCounter/TodoCounter"; export default class Footer extends React.Component{ - constructor(props){ - super(props) + constructor(props){ + super(props) - } - render (){ - return( - - - + } + render (){ + return( +
+ + +
) } - + } \ No newline at end of file diff --git a/src/components/NoTodoPreview/NoTodoPreview.js b/src/components/NoTodoPreview/NoTodoPreview.js index d06c0590..3976cc8e 100644 --- a/src/components/NoTodoPreview/NoTodoPreview.js +++ b/src/components/NoTodoPreview/NoTodoPreview.js @@ -1,2 +1,19 @@ -export default function NoTodoPreview() {} +import React from "react"; + + +export default class NoTodoPreview extends React.Component{ + constructor(props){ + super(props) + } + + render(){ + return( +
+ +

Nothing to do yet. Come on, don't be lazy!

+
+ ) + } + +} diff --git a/src/components/NoTodoPreview/NoTodoPreview.scss b/src/components/NoTodoPreview/NoTodoPreview.scss index e69de29b..6f07c0d7 100644 --- a/src/components/NoTodoPreview/NoTodoPreview.scss +++ b/src/components/NoTodoPreview/NoTodoPreview.scss @@ -0,0 +1,3 @@ +.No-todo-preview{ + display: block; +} \ No newline at end of file diff --git a/src/img/undraw_wandering_mind_0mkm.svg b/src/img/undraw_wandering_mind_0mkm.svg new file mode 100644 index 00000000..d6c391cb --- /dev/null +++ b/src/img/undraw_wandering_mind_0mkm.svg @@ -0,0 +1 @@ +wandering_mind \ No newline at end of file From b903b4d1d7dcb210af661ba3ba91fa7a720bccef Mon Sep 17 00:00:00 2001 From: sanadriu Date: Wed, 22 Sep 2021 16:45:42 +0200 Subject: [PATCH 15/37] Saving changes --- src/App.js | 18 +++---- src/components/Button/Button.js | 4 +- src/components/Button/Button.scss | 15 ++++-- src/components/CheckBox/CheckBox.js | 2 +- src/components/CheckBox/CheckBox.scss | 1 + src/components/CheckBoxOld/CheckBox.js | 58 --------------------- src/components/CheckBoxOld/CheckBox.scss | 43 --------------- src/components/CheckBoxOld/index.js | 1 - src/components/Input/Input.js | 5 +- src/components/Input/Input.scss | 19 +++++++ src/components/TodoCreate/TodoCreate.js | 16 +++++- src/components/TodoCreate/TodoCreate.scss | 2 - src/components/TodoItem/TodoItem.js | 45 ++++------------ src/components/TodoItem/TodoItem.scss | 43 +++++++++++++++ src/components/TodoItemForm/TodoItemForm.js | 43 +++++++++++++++ src/components/TodoItemForm/index.js | 1 + src/components/TodoList/TodoList.js | 4 +- src/components/TodoList/TodoList.scss | 4 ++ 18 files changed, 164 insertions(+), 160 deletions(-) delete mode 100644 src/components/CheckBoxOld/CheckBox.js delete mode 100644 src/components/CheckBoxOld/CheckBox.scss delete mode 100644 src/components/CheckBoxOld/index.js create mode 100644 src/components/TodoItemForm/TodoItemForm.js create mode 100644 src/components/TodoItemForm/index.js diff --git a/src/App.js b/src/App.js index 68292c9d..30c68655 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,7 @@ import TodoCreate from "./components/TodoCreate"; import TodoList from "./components/TodoList"; import Footer from "./components/Footer"; import NoTodoPreview from "./components/NoTodoPreview"; + import "./App.scss"; class App extends Component { @@ -91,19 +92,16 @@ class App extends Component { render() { const { todos } = this.state; - const content = - todos.length > 0 ? ( - - ) : ( - - ); - return ( -
-

TODO

+
+

TODO

- {content} + {todos.length > 0 ? ( + + ) : ( + + )} {/*
*/}
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index a0c619e6..d0a51b13 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -7,10 +7,10 @@ export default class Button extends Component { } render() { - const { handleClick, children } = this.props; + const { handleClick, className = "button", children } = this.props; return ( - ); diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 33dcb082..5da3a7e4 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -1,9 +1,16 @@ -.btn { - padding: 1rem; - display: block; +.button { + padding: 0.5rem; + cursor: pointer; + + border-radius: 0.25rem; + border: none; + outline: none; + + background: cornflowerblue; + color: white; } -.btn:hover{ +.button:hover{ content: "\00d7"; /* This will render the 'X' */ } diff --git a/src/components/CheckBox/CheckBox.js b/src/components/CheckBox/CheckBox.js index 40b1a98a..7838cb4d 100644 --- a/src/components/CheckBox/CheckBox.js +++ b/src/components/CheckBox/CheckBox.js @@ -12,7 +12,7 @@ export default class CheckBox extends Component { return ( { - //this.props.handleCheck(this.props.id, event.target.checked); - }; - - handleMouse = (event) => { - this.setState((prevState) => ({ - ...prevState, - isHovered: !prevState.isHovered, - })); - }; - - render() { - const { id = "dummy", checked = false } = this.props; - - const checkStyle = ""; - const labelStyle = ""; - - return ( -
- - -
- ); - } -} diff --git a/src/components/CheckBoxOld/CheckBox.scss b/src/components/CheckBoxOld/CheckBox.scss deleted file mode 100644 index e31b13af..00000000 --- a/src/components/CheckBoxOld/CheckBox.scss +++ /dev/null @@ -1,43 +0,0 @@ -.checkbox { - &__input { - position: absolute; - cursor: pointer; - opacity: 0; - } - - &__label { - display: flex; - align-items: center; - justify-content: center; - - width: 2rem; - height: 2rem; - - cursor: pointer; - user-select: none; - - border-radius: 50%; - font-size: 1.25rem; - box-shadow: 0 0 4px rgba(0,0,0,0.2); - - &--checked { - background: linear-gradient(147deg, rgba(62,141,180,1) 0%, rgba(236,41,251,1) 100%);; - } - } - - &__checkmark { - display: block; - - width: 90%; - height: 90%; - - border-radius: 50%; - text-align: center; - color: white; - background: white; - - &--checked { - background: transparent; - } - } -} diff --git a/src/components/CheckBoxOld/index.js b/src/components/CheckBoxOld/index.js deleted file mode 100644 index 551e1723..00000000 --- a/src/components/CheckBoxOld/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./CheckBox"; diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js index 5bffad1f..df8b99a5 100644 --- a/src/components/Input/Input.js +++ b/src/components/Input/Input.js @@ -1,5 +1,6 @@ import React, { Component } from "react"; import { v4 as uuid } from "uuid"; +import "./Input.scss"; export default class Input extends Component { constructor(props) { @@ -16,12 +17,14 @@ export default class Input extends Component { handleChange = () => {}, handleBlur = () => {}, invalid, + className = "input", + classNameInvalid = "input--invalid", ...props } = this.props; return ( { + onSubmit={(values, actions) => { + actions.setSubmitting(true); + setTimeout(() => { handleAddTodo(values); + actions.resetForm(); }, 500); }} > {({ handleChange, handleBlur, handleSubmit, errors, values, touched, isValidating, isValid }) => (
- +
)} diff --git a/src/components/TodoCreate/TodoCreate.scss b/src/components/TodoCreate/TodoCreate.scss index 4cadd0f3..ce1b5fd7 100644 --- a/src/components/TodoCreate/TodoCreate.scss +++ b/src/components/TodoCreate/TodoCreate.scss @@ -1,6 +1,4 @@ .todo-create { - width: 100%; - padding: 0.5rem; box-shadow: 0 0 4px rgba(0,0,0,0.25); diff --git a/src/components/TodoItem/TodoItem.js b/src/components/TodoItem/TodoItem.js index 56dabad9..63aa166f 100644 --- a/src/components/TodoItem/TodoItem.js +++ b/src/components/TodoItem/TodoItem.js @@ -1,8 +1,9 @@ import { Component } from "react"; -import { Formik } from "formik"; +import TodoItemForm from "../TodoItemForm"; import CheckBox from "../CheckBox"; import Button from "../Button"; -import Input from "../Input"; + +import "./TodoItem.scss"; export default class TodoItem extends Component { constructor(props) { @@ -35,46 +36,20 @@ export default class TodoItem extends Component { return ( <> -
+
{enabledForm ? ( ) : ( - + )} - +
); } } - -class TodoItemForm extends Component { - constructor(props) { - super(props); - } - - render() { - const { text, handleSetText, handleDisableForm } = this.props; - - return ( - { - setTimeout(() => { - handleSetText(values.text); - handleDisableForm(); - }, 500); - }} - > - {({ handleChange, handleBlur, handleSubmit, errors, values, touched, isValidating, isValid }) => ( -
- -
- )} - - ); - } -} diff --git a/src/components/TodoItem/TodoItem.scss b/src/components/TodoItem/TodoItem.scss index e69de29b..92e39c95 100644 --- a/src/components/TodoItem/TodoItem.scss +++ b/src/components/TodoItem/TodoItem.scss @@ -0,0 +1,43 @@ +.todo-item { + display: flex; + align-items: center; + justify-content: space-between; + gap: 2rem; + padding: 1rem; + + box-shadow: 0 1px 1px rgba(0,0,0,0.25); + + &__button { + border: none; + outline: none; + background: none; + + &:hover { + box-shadow: inset 0 0 2px rgba(0,0,0,0.25); + background: linear-gradient(135deg, rgba(62,141,180,0.25) 0%, rgba(236,41,251,0.25) 100%); + color: white; + } + + &--round { + display: flex; + align-items: center; + justify-content: center; + + min-width: 2rem; + width: 2rem; + height: 2rem; + + border-radius: 50%; + } + + &--full-width { + width: 100%; + padding: 0.5rem; + + text-align: left; + + border-radius: 0.25rem; + } + } + +} \ No newline at end of file diff --git a/src/components/TodoItemForm/TodoItemForm.js b/src/components/TodoItemForm/TodoItemForm.js new file mode 100644 index 00000000..1de47c27 --- /dev/null +++ b/src/components/TodoItemForm/TodoItemForm.js @@ -0,0 +1,43 @@ +import { Component } from "react"; +import { Formik } from "formik"; +import Input from "../Input"; + +export default class TodoItemForm extends Component { + constructor(props) { + super(props); + } + + render() { + const { text, handleSetText, handleDisableForm } = this.props; + + return ( + { + setTimeout(() => { + handleSetText(values.text); + handleDisableForm(); + }, 500); + }} + > + {({ handleChange, handleSubmit, errors, values, touched, isValidating, isValid }) => ( +
+ +
+ )} + + ); + } +} diff --git a/src/components/TodoItemForm/index.js b/src/components/TodoItemForm/index.js new file mode 100644 index 00000000..70828df0 --- /dev/null +++ b/src/components/TodoItemForm/index.js @@ -0,0 +1 @@ +export { default } from "./TodoItemForm"; diff --git a/src/components/TodoList/TodoList.js b/src/components/TodoList/TodoList.js index 280245da..7a2cba5e 100644 --- a/src/components/TodoList/TodoList.js +++ b/src/components/TodoList/TodoList.js @@ -1,6 +1,8 @@ import { Component } from "react"; import TodoItem from "../TodoItem"; +import "./TodoList.scss"; + export default class TodoList extends Component { constructor(props) { super(props); @@ -32,7 +34,7 @@ export default class TodoList extends Component { const { enabledFormId } = this.state; return ( -