From 4248108e9d9f347473b66292a621a00de5a90cdf Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Wed, 10 Nov 2021 02:05:57 -0800 Subject: [PATCH 1/7] created a party size selctor component where you are able to select your party size --- .../PartySizeSelector.stories.tsx | 16 +++ .../PartySizeSelector/PartySizeSelector.tsx | 98 +++++++++++++++++++ 2 files changed, 114 insertions(+) create mode 100644 src/Containers/PartySizeSelector/PartySizeSelector.stories.tsx create mode 100644 src/Containers/PartySizeSelector/PartySizeSelector.tsx diff --git a/src/Containers/PartySizeSelector/PartySizeSelector.stories.tsx b/src/Containers/PartySizeSelector/PartySizeSelector.stories.tsx new file mode 100644 index 00000000..39959b75 --- /dev/null +++ b/src/Containers/PartySizeSelector/PartySizeSelector.stories.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import {Meta, Story} from "@storybook/react"; +import {IPartySizeSelector, PartySizeSelector} from "@Containers/PartySizeSelector/PartySizeSelector"; +import {createStoryTitle} from "../../Constants"; + +export default { + title: createStoryTitle('PartySizeSelector'), + component: PartySizeSelector, +} as Meta; + +const Template: Story = (args) => ; + +export const PartySizeSelectorComponent = Template.bind({}); + +PartySizeSelectorComponent.args = { +} \ No newline at end of file diff --git a/src/Containers/PartySizeSelector/PartySizeSelector.tsx b/src/Containers/PartySizeSelector/PartySizeSelector.tsx new file mode 100644 index 00000000..39fa4a27 --- /dev/null +++ b/src/Containers/PartySizeSelector/PartySizeSelector.tsx @@ -0,0 +1,98 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; +import {Person} from '@styled-icons/bootstrap/Person' +import {PersonFill} from '@styled-icons/bootstrap/PersonFill' + +export interface IPartySizeSelector { + person?: React.ForwardRefExoticComponent>; + personFill?: React.ForwardRefExoticComponent>; +} + + + +export const PartySizeSelector: React.FC = ({ + person = Person, + personFill = PersonFill, + ...props +}) => { + const [partySize, setIsFilled] = useState(0); + + const clientIndexes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; + + const getIcon = (clientIndex: number) =>{ + /*changes icons that have a smaller index then selected*/ + if(clientIndex > partySize) { + return ( + + ); + }else { + if (clientIndex < 10){ + + } + return ( + + ); + } + } + + const cols = clientIndexes.map((clientIndex) => + /* makes 10 columns*/ + + setIsFilled(clientIndex)}> + + {getIcon(clientIndex)} + + {clientIndex} + + ); + + return( +
+ AMOUNT + + {cols} + +
+ ) +}; + +const Icon = styled.svg` + fill: #8c9c9c; +`; + +const SecondIcon = styled.svg` + fill: #dda859; +`; + +const IconButton = styled.button` + background-color: white; + border: none; + width: 100%; + height: 5em; +` +const Title = styled.div` + padding-left: 15px; + fill: #8c9c9c; + font-weight: bold; +` + +const Col = styled.div` + float: left; + width: 7%; +` + +const Row = styled.div` + width: 100%; + max-width: 800px; +` +const IndexNum = styled.div` + width: 100%; + margin-left: 24px; + fill: #8c9c9c; + font-weight: bold; +` + + + + + From bf0fa5d163d53373078234304de0da99bd378f9a Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Wed, 10 Nov 2021 02:17:16 -0800 Subject: [PATCH 2/7] fixed unused if statement --- src/Containers/PartySizeSelector/PartySizeSelector.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/Containers/PartySizeSelector/PartySizeSelector.tsx b/src/Containers/PartySizeSelector/PartySizeSelector.tsx index 39fa4a27..5901464d 100644 --- a/src/Containers/PartySizeSelector/PartySizeSelector.tsx +++ b/src/Containers/PartySizeSelector/PartySizeSelector.tsx @@ -26,9 +26,6 @@ export const PartySizeSelector: React.FC = ({ ); }else { - if (clientIndex < 10){ - - } return ( ); From 9191a07ed157a936af805c2f00ff708f6cfa7db9 Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Tue, 16 Nov 2021 23:43:14 -0800 Subject: [PATCH 3/7] fixed issues discussed in meeting --- .../PartySizeSelector.stories.tsx | 5 +- .../PartySizeSelector/PartySizeSelector.tsx | 78 ++++++++++--------- 2 files changed, 47 insertions(+), 36 deletions(-) diff --git a/src/Containers/PartySizeSelector/PartySizeSelector.stories.tsx b/src/Containers/PartySizeSelector/PartySizeSelector.stories.tsx index 39959b75..1f61c0e1 100644 --- a/src/Containers/PartySizeSelector/PartySizeSelector.stories.tsx +++ b/src/Containers/PartySizeSelector/PartySizeSelector.stories.tsx @@ -13,4 +13,7 @@ const Template: Story = (args) => { + clientIndexes: Array; + partyName: string, person?: React.ForwardRefExoticComponent>; personFill?: React.ForwardRefExoticComponent>; } - export const PartySizeSelector: React.FC = ({ + clientIndexes= [], + partyName= "", person = Person, personFill = PersonFill, ...props }) => { - const [partySize, setIsFilled] = useState(0); - const clientIndexes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; + const [partySize, setPartySize] = useState(0); + /**changes icons that have a smaller index then selected*/ const getIcon = (clientIndex: number) =>{ - /*changes icons that have a smaller index then selected*/ if(clientIndex > partySize) { return ( ); }else { return ( - + ); } } + /*makes the columns of icons*/ const cols = clientIndexes.map((clientIndex) => - /* makes 10 columns*/ - setIsFilled(clientIndex)}> + setPartySize(clientIndex)}> {getIcon(clientIndex)} @@ -44,50 +46,56 @@ export const PartySizeSelector: React.FC = ({ ); return( -
- AMOUNT - - {cols} - -
+ + {partyName} + + + {cols} + + + ) }; -const Icon = styled.svg` - fill: #8c9c9c; +const Content = styled.div` +`; + +const Scrolling = styled.div` + overflow-x: scroll; + overflow-y: hidden; `; -const SecondIcon = styled.svg` - fill: #dda859; +const Icon = styled.svg` + fill: #f98300; + width: 35px; `; const IconButton = styled.button` - background-color: white; + background-color: #ffffff; border: none; - width: 100%; - height: 5em; -` +`; + const Title = styled.div` - padding-left: 15px; - fill: #8c9c9c; + fill: #4a4a4a; + padding-bottom: 3px; font-weight: bold; -` + font-size: 1.3rem; + margin-left: 13px; +`; const Col = styled.div` - float: left; - width: 7%; -` +`; const Row = styled.div` - width: 100%; - max-width: 800px; -` + display: inline-flex; +`; + const IndexNum = styled.div` - width: 100%; - margin-left: 24px; - fill: #8c9c9c; + fill: #4a4a4a; font-weight: bold; -` + display: flex; + justify-content: center; +`; From b582145365ca1f026dfb6e757b6b2a07393d3d9e Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Wed, 17 Nov 2021 00:01:04 -0800 Subject: [PATCH 4/7] updated version to fix error --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bed40ed7..188e891c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cheapreats/react-ui", - "version": "2.4.38", + "version": "2.4.39git ", "description": "React UI library for CheaprEats", "main": "./dist/index.js", "module": "./dist/index.es.js", From 918443fdaae6f4bd012823ea7b4837478d844950 Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Wed, 17 Nov 2021 00:06:45 -0800 Subject: [PATCH 5/7] fixed type in version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 188e891c..a42f6709 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cheapreats/react-ui", - "version": "2.4.39git ", + "version": "2.4.39", "description": "React UI library for CheaprEats", "main": "./dist/index.js", "module": "./dist/index.es.js", From 6509e1ac2197533100296f79d004e551b9cad559 Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Tue, 23 Nov 2021 14:48:06 -0800 Subject: [PATCH 6/7] used themes for colors and used scroll mixin --- .../PartySizeSelector.stories.tsx | 2 ++ .../PartySizeSelector/PartySizeSelector.tsx | 28 ++++++++++++++----- 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/Containers/PartySizeSelector/PartySizeSelector.stories.tsx b/src/Containers/PartySizeSelector/PartySizeSelector.stories.tsx index 1f61c0e1..39ceca3a 100644 --- a/src/Containers/PartySizeSelector/PartySizeSelector.stories.tsx +++ b/src/Containers/PartySizeSelector/PartySizeSelector.stories.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {Meta, Story} from "@storybook/react"; import {IPartySizeSelector, PartySizeSelector} from "@Containers/PartySizeSelector/PartySizeSelector"; import {createStoryTitle} from "../../Constants"; +import {action} from "@storybook/addon-actions"; export default { title: createStoryTitle('PartySizeSelector'), @@ -13,6 +14,7 @@ const Template: Story = (args) => { clientIndexes: Array; partyName: string, + onPersonClick: (index: number) => void, person?: React.ForwardRefExoticComponent>; personFill?: React.ForwardRefExoticComponent>; } @@ -14,6 +16,7 @@ export interface IPartySizeSelector extends React.HTMLAttributes export const PartySizeSelector: React.FC = ({ clientIndexes= [], partyName= "", + onPersonClick, person = Person, personFill = PersonFill, ...props @@ -33,11 +36,15 @@ export const PartySizeSelector: React.FC = ({ ); } } + const onPersonClickFinal = (clientIndex: number) => { + setPartySize(clientIndex); + onPersonClick(clientIndex); + } /*makes the columns of icons*/ const cols = clientIndexes.map((clientIndex) => - setPartySize(clientIndex)}> + onPersonClickFinal(clientIndex)}> {getIcon(clientIndex)} @@ -61,22 +68,28 @@ const Content = styled.div` `; const Scrolling = styled.div` - overflow-x: scroll; - overflow-y: hidden; + ${Mixins.scroll} + overflow: auto; + &::-webkit-scrollbar { + background-color: transparent; + } + /*overflow-x: scroll; + overflow-y: hidden;*/ `; const Icon = styled.svg` - fill: #f98300; + fill: ${({theme}) => theme.colors.statusColors.orange}; width: 35px; `; const IconButton = styled.button` - background-color: #ffffff; + background-color: ${({theme}) => theme.colors.background}; border: none; + `; const Title = styled.div` - fill: #4a4a4a; + fill: ${({theme}) => theme.colors.text}; padding-bottom: 3px; font-weight: bold; font-size: 1.3rem; @@ -84,6 +97,7 @@ const Title = styled.div` `; const Col = styled.div` + margin-bottom: 6px; `; const Row = styled.div` @@ -91,7 +105,7 @@ const Row = styled.div` `; const IndexNum = styled.div` - fill: #4a4a4a; + fill: ${({theme}) => theme.colors.text}; font-weight: bold; display: flex; justify-content: center; From 2c8c30360c4ef601fc9cdb4dffa200bc1e0001ac Mon Sep 17 00:00:00 2001 From: David Pavlenko Date: Mon, 29 Nov 2021 20:09:53 -0800 Subject: [PATCH 7/7] added reservation price to calander and added functonality to change color in stories --- src/Inputs/Datepicker/Datebox.tsx | 145 ++++++++++++------- src/Inputs/Datepicker/Datepicker.stories.tsx | 2 + src/Inputs/Datepicker/index.tsx | 8 +- 3 files changed, 102 insertions(+), 53 deletions(-) diff --git a/src/Inputs/Datepicker/Datebox.tsx b/src/Inputs/Datepicker/Datebox.tsx index d1e6fbef..c7b732e6 100644 --- a/src/Inputs/Datepicker/Datebox.tsx +++ b/src/Inputs/Datepicker/Datebox.tsx @@ -14,6 +14,12 @@ import { Button } from '../Button/Button'; const SIZE = 40; +export enum PriceStatus{ + Good, + Okay, + Surge +} + const displayDate = (date: Date = new Date()): string => `${MONTHS[date.getMonth()]}, ${date.getFullYear()}`; @@ -26,6 +32,8 @@ const buildCalendar = ( date: Date, value: Date, selectDate: React.MouseEventHandler, + priceStatus: PriceStatus, + price: Number, ): React.ReactElement[] => { const start = new Date(date); start.setDate(1); @@ -36,15 +44,24 @@ const buildCalendar = ( let exit = false; while (!exit) { row.push( - - {start.getDate()} - , + + {start.getDate()} +
+ {'$'+price} + + + , ); start.setDate(start.getDate() + 1); if (start.getDay() === 0) { @@ -70,16 +87,20 @@ export interface DateboxProps extends React.HTMLAttributes { animate: boolean; value: Date | undefined; clearDate?: Function; + price:Number; + priceStatus:PriceStatus; } export const Datebox: React.FC = ({ - changePage, - clearDate = (): void => undefined, - selectedDate, - selectDate, - animate, - value, -}): React.ReactElement => ( + changePage, + clearDate = (): void => undefined, + selectedDate, + selectDate, + animate, + value, + price, + priceStatus, + }): React.ReactElement => ( @@ -108,72 +131,78 @@ export const Datebox: React.FC = ({ const DateBox = styled.div<{ animate: boolean; }>` - ${position('absolute', 'auto', '100%', 'auto', 'auto')} - margin: 0 auto auto 0; - padding: 15px 10px 10px; - box-sizing: border-box; - background-color: white; - text-align: center; - font-size: 0.9rem; - z-index: 90; - - // Theme Stuff - ${({ theme }): string => ` + ${position('absolute', 'auto', '100%', 'auto', 'auto')} + margin: 0 auto auto 0; + padding: 15px 10px 10px; + box-sizing: border-box; + background-color: white; + text-align: center; + font-size: 0.9rem; + z-index: 90; + + // Theme Stuff + ${({ theme }): string => ` ${transition(['transform', 'opacity'])} border-radius: ${theme.dimensions.radius}; font-family: ${theme.font.family}; box-shadow: ${theme.depth[1]}; `} - ${({ animate }): string => - !animate - ? ` + ${({ animate }): string => + !animate + ? ` transform: translateY(-20px); opacity: 0; ` - : ''} + : ''} `; const DateControls = styled.div` - ${flex('center')} - padding-bottom: 8px; + ${flex('center')} + padding-bottom: 8px; `; + const DateDisplay = styled.span` - font-weight: bold; - font-size: 1.05rem; - margin: auto; + font-weight: bold; + font-size: 1.05rem; + margin: auto; `; const WeekDays = styled.ul` - ${flex()} - padding: 0; - margin: 0; - list-style-type: none; + ${flex()} + padding: 0; + margin: 0; + list-style-type: none; `; const WeekDay = styled.li` - font-weight: bold; - padding: 5px 0; - width: ${SIZE}px; + font-weight: bold; + padding: 5px 0; + width: ${SIZE}px; `; const Calendar = styled.ul` - ${flex('column')} - list-style-type: none; - flex-wrap: wrap; - padding: 0; - margin: 0; + ${flex('column')} + list-style-type: none; + flex-wrap: wrap; + padding: 0; + margin: 0; `; const CalendarWeek = styled.li` - ${flex()} + ${flex()} `; const CalendarDay = styled.span<{ + data: string; +}>` + +`; + +const DayWrapper = styled.div<{ faded: boolean; selected: boolean; - data: string; }>` ${transition(['background-color', 'color'])} ${flex('center')} @@ -184,13 +213,25 @@ const CalendarDay = styled.span<{ ${({ faded }): string => (faded ? 'opacity: 0.3;' : '')} ${({ selected, theme }): string => - styledCondition( - selected, - ` + styledCondition( + selected, + ` background-color: ${theme.colors.primary}; cursor: pointer; color: white; `, - clickable('#ffffff', 0.05), - )} + clickable('#ffffff', 0.05), + )} +`; + +const Price = styled.div<{ + priceColor: PriceStatus; +}>` + ${({ priceColor }): string => (priceColor == 0 ? 'color: green;' : '')} + ${({ priceColor }): string => (priceColor == 1 ? 'color: yellow;' : '')} + ${({ priceColor }): string => (priceColor == 2 ? 'color: red;' : '')} + `; + + + diff --git a/src/Inputs/Datepicker/Datepicker.stories.tsx b/src/Inputs/Datepicker/Datepicker.stories.tsx index 120ceed3..54de6fcf 100644 --- a/src/Inputs/Datepicker/Datepicker.stories.tsx +++ b/src/Inputs/Datepicker/Datepicker.stories.tsx @@ -12,6 +12,8 @@ export default { label: 'label', placeholder: 'Placeholder', description: 'Description', + price:25, + priceStatus:0, }, } as Meta; diff --git a/src/Inputs/Datepicker/index.tsx b/src/Inputs/Datepicker/index.tsx index 6a05f9a6..c4da0ab6 100644 --- a/src/Inputs/Datepicker/index.tsx +++ b/src/Inputs/Datepicker/index.tsx @@ -14,7 +14,7 @@ import { LabelLayout as LL, LabelLayoutProps, } from '../../Fragments'; -import { Datebox } from './Datebox'; +import {Datebox, PriceStatus} from './Datebox'; const printDate = (date?: Date): string => { if (date) { @@ -33,6 +33,8 @@ export interface DatepickerProps extends LabelLayoutProps { onClear?: Function; value?: Date; initialShow?: boolean; + price:Number; + priceStatus:PriceStatus; } export const Datepicker: React.FC = ({ @@ -41,6 +43,8 @@ export const Datepicker: React.FC = ({ onClear = (): void => undefined, placeholder = 'MM-DD-YYYY', initialShow, + price, + priceStatus, ...props }): React.ReactElement => { const theme = useTheme(); @@ -161,6 +165,8 @@ export const Datepicker: React.FC = ({ animate={animate} value={value} clearDate={clearDate} + price={price} + priceStatus={priceStatus} /> )}