From 72084cb02dea48190ccde83308f27485efb23c35 Mon Sep 17 00:00:00 2001 From: jadasenebouttarath Date: Tue, 9 Nov 2021 21:00:29 -0800 Subject: [PATCH 1/5] Created a chair using HTML and CSS --- .../Chair/AdvancedChair.stories.tsx | 16 +++++ src/Containers/Chair/AdvancedChair.tsx | 70 +++++++++++++++++++ 2 files changed, 86 insertions(+) create mode 100644 src/Containers/Chair/AdvancedChair.stories.tsx create mode 100644 src/Containers/Chair/AdvancedChair.tsx diff --git a/src/Containers/Chair/AdvancedChair.stories.tsx b/src/Containers/Chair/AdvancedChair.stories.tsx new file mode 100644 index 00000000..ccb5857f --- /dev/null +++ b/src/Containers/Chair/AdvancedChair.stories.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { AdvancedChair, IAdvancedChair } from './AdvancedChair'; +import { createStoryTitle } from '../../Constants'; + +export default { + title: createStoryTitle('AdvancedChair'), + component: AdvancedChair, +} as Meta; + +const Template: Story = (args) => ; + +export const VacantChair = Template.bind({}); +VacantChair.args = { + +}; diff --git a/src/Containers/Chair/AdvancedChair.tsx b/src/Containers/Chair/AdvancedChair.tsx new file mode 100644 index 00000000..8c893b34 --- /dev/null +++ b/src/Containers/Chair/AdvancedChair.tsx @@ -0,0 +1,70 @@ +import React from 'react'; +import styled from "styled-components"; + +type Position = 'top' | 'bottom' | 'left' | 'right'; + +export interface IAdvancedChair { + position: Position; + isVisible: boolean; + relativeSize: number; +} + +export const AdvancedChair: React.FC = ({ + position = 'top', + isVisible = true, + relativeSize = 1.0, + ...props +}) => { + return ( + + + + + + + + + < + > + + + + + +) +} + +const ChairBody = styled.div` + display: grid; + grid-template-columns: 7px 21px 4px; + grid-template-rows: 2px 3px 5px 12px 5px 3px 2px; + grid-template-areas: + "back . ." + "back seat ." + "back seat firstleg" + "back seat ." + "back seat secondleg" + "back seat ." + "back . ." +`; +const BackOfChair = styled.div` + grid-area: back; + border-radius: 1px 3px 3px 1px; + + background: linear-gradient(to right, #6495ED, #adbcf9); +`; +const ChairSeat = styled.div` + grid-area: seat; + border-radius: 0px 3px 3px 0px; + background: linear-gradient(to right, #6495ED, #adbcf9); +`; +const TopChairLeg = styled.div` + grid-area: firstleg; + border-radius: 0px 3px 3px 0px; + background: #6495ED; +`; +const BottomChairLeg = styled.div` + grid-area: secondleg; + border-radius: 0px 3px 3px 0px; + background: #6495ED; +`; \ No newline at end of file From b0a50c65d7b3ef2252bdf1a0653db5784b01e076 Mon Sep 17 00:00:00 2001 From: jadasenebouttarath Date: Tue, 16 Nov 2021 21:14:57 -0800 Subject: [PATCH 2/5] Updated interface by re using exisiting interface from Chair --- .../AdvancedChair.stories.tsx | 0 .../AdvancedChair.tsx | 46 +++++++++++++------ 2 files changed, 33 insertions(+), 13 deletions(-) rename src/Containers/{Chair => AdvancedChair}/AdvancedChair.stories.tsx (100%) rename src/Containers/{Chair => AdvancedChair}/AdvancedChair.tsx (61%) diff --git a/src/Containers/Chair/AdvancedChair.stories.tsx b/src/Containers/AdvancedChair/AdvancedChair.stories.tsx similarity index 100% rename from src/Containers/Chair/AdvancedChair.stories.tsx rename to src/Containers/AdvancedChair/AdvancedChair.stories.tsx diff --git a/src/Containers/Chair/AdvancedChair.tsx b/src/Containers/AdvancedChair/AdvancedChair.tsx similarity index 61% rename from src/Containers/Chair/AdvancedChair.tsx rename to src/Containers/AdvancedChair/AdvancedChair.tsx index 8c893b34..d4b9f25a 100644 --- a/src/Containers/Chair/AdvancedChair.tsx +++ b/src/Containers/AdvancedChair/AdvancedChair.tsx @@ -3,38 +3,55 @@ import styled from "styled-components"; type Position = 'top' | 'bottom' | 'left' | 'right'; -export interface IAdvancedChair { +type tableUseTypes = + | 'AddTableButton' + | 'TableForEditCanvas' + | 'TableForManagement'; + +export interface IAdvancedChair extends React.HTMLAttributes { position: Position; + isSeated: boolean; + occupiedBy: string; isVisible: boolean; relativeSize: number; + tableUse: tableUseTypes; + tableIndex: number; + chairIndex: number; + selectedIndex: number; + onChairClick: ( + parentTableIndex: number, + chairIndex: number, + selectedIndex: number, + ) => void; } export const AdvancedChair: React.FC = ({ position = 'top', + isSeated = false, + occupiedBy = '', isVisible = true, relativeSize = 1.0, + tableUse = 'TableForManagement', + tableIndex = -1, + chairIndex = -1, + selectedIndex = -1, + onChairClick, ...props }) => { return ( - - - - - - - < - > - - - + + + + ) } const ChairBody = styled.div` + color: ${({ theme }) => theme.colors.background}; display: grid; grid-template-columns: 7px 21px 4px; grid-template-rows: 2px 3px 5px 12px 5px 3px 2px; @@ -47,22 +64,25 @@ const ChairBody = styled.div` "back seat ." "back . ." `; + const BackOfChair = styled.div` grid-area: back; border-radius: 1px 3px 3px 1px; - background: linear-gradient(to right, #6495ED, #adbcf9); `; + const ChairSeat = styled.div` grid-area: seat; border-radius: 0px 3px 3px 0px; background: linear-gradient(to right, #6495ED, #adbcf9); `; + const TopChairLeg = styled.div` grid-area: firstleg; border-radius: 0px 3px 3px 0px; background: #6495ED; `; + const BottomChairLeg = styled.div` grid-area: secondleg; border-radius: 0px 3px 3px 0px; From b7e2b07c4be68d49dae3a01eeda1a576b5c371a1 Mon Sep 17 00:00:00 2001 From: jadasenebouttarath Date: Tue, 16 Nov 2021 22:26:12 -0800 Subject: [PATCH 3/5] Update version to resolve error --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bed40ed7..a42f6709 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cheapreats/react-ui", - "version": "2.4.38", + "version": "2.4.39", "description": "React UI library for CheaprEats", "main": "./dist/index.js", "module": "./dist/index.es.js", From 94dd63504ae57b652d283429047e06d97fe650ff Mon Sep 17 00:00:00 2001 From: jadasenebouttarath Date: Wed, 17 Nov 2021 16:43:21 -0800 Subject: [PATCH 4/5] Included onChairClick actions for when the chair is clicked --- src/Containers/AdvancedChair/AdvancedChair.stories.tsx | 5 ++++- src/Containers/AdvancedChair/AdvancedChair.tsx | 5 +---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/Containers/AdvancedChair/AdvancedChair.stories.tsx b/src/Containers/AdvancedChair/AdvancedChair.stories.tsx index ccb5857f..bff9c590 100644 --- a/src/Containers/AdvancedChair/AdvancedChair.stories.tsx +++ b/src/Containers/AdvancedChair/AdvancedChair.stories.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Meta, Story } from '@storybook/react'; import { AdvancedChair, IAdvancedChair } from './AdvancedChair'; import { createStoryTitle } from '../../Constants'; +import {action} from "@storybook/addon-actions"; export default { title: createStoryTitle('AdvancedChair'), @@ -12,5 +13,7 @@ const Template: Story = (args) => ; export const VacantChair = Template.bind({}); VacantChair.args = { - + position: 'right', + relativeSize: 0.5, + onChairClick: action('The chair is clicked') }; diff --git a/src/Containers/AdvancedChair/AdvancedChair.tsx b/src/Containers/AdvancedChair/AdvancedChair.tsx index d4b9f25a..05bb30fc 100644 --- a/src/Containers/AdvancedChair/AdvancedChair.tsx +++ b/src/Containers/AdvancedChair/AdvancedChair.tsx @@ -19,9 +19,6 @@ export interface IAdvancedChair extends React.HTMLAttributes { chairIndex: number; selectedIndex: number; onChairClick: ( - parentTableIndex: number, - chairIndex: number, - selectedIndex: number, ) => void; } @@ -40,7 +37,7 @@ export const AdvancedChair: React.FC = ({ }) => { return ( - + From 79e4fe23ce88b6597bd0a18692a3dc8447cf90d2 Mon Sep 17 00:00:00 2001 From: jadasenebouttarath Date: Tue, 23 Nov 2021 16:46:58 -0800 Subject: [PATCH 5/5] Fixed chair color and gradient redundancy. --- .../AdvancedChair/AdvancedChair.tsx | 61 +++++++++++++------ 1 file changed, 41 insertions(+), 20 deletions(-) diff --git a/src/Containers/AdvancedChair/AdvancedChair.tsx b/src/Containers/AdvancedChair/AdvancedChair.tsx index 05bb30fc..2f7e92f6 100644 --- a/src/Containers/AdvancedChair/AdvancedChair.tsx +++ b/src/Containers/AdvancedChair/AdvancedChair.tsx @@ -18,8 +18,9 @@ export interface IAdvancedChair extends React.HTMLAttributes { tableIndex: number; chairIndex: number; selectedIndex: number; - onChairClick: ( - ) => void; + primaryChairColor: string; + chairColorGradient: string; + onChairClick: () => void; } export const AdvancedChair: React.FC = ({ @@ -32,19 +33,29 @@ export const AdvancedChair: React.FC = ({ tableIndex = -1, chairIndex = -1, selectedIndex = -1, + primaryChairColor = '#6495ED', + chairColorGradient='#adbcf9', onChairClick, ...props -}) => { + }) => { return ( - - - - - - - - -) + + + + + + + + + ) } const ChairBody = styled.div` @@ -62,26 +73,36 @@ const ChairBody = styled.div` "back . ." `; -const BackOfChair = styled.div` +interface IChairColor { + primaryChairColor: string; + chairColorGradient: string; +} + +const ChairColorStyle = styled.div` + ${({primaryChairColor, chairColorGradient}) => { + return `background: linear-gradient(to right,${primaryChairColor}, ${chairColorGradient})`; + }}; +`; + +const BackOfChair = styled(ChairColorStyle)` grid-area: back; border-radius: 1px 3px 3px 1px; - background: linear-gradient(to right, #6495ED, #adbcf9); + `; -const ChairSeat = styled.div` +const ChairSeat = styled(ChairColorStyle)` grid-area: seat; border-radius: 0px 3px 3px 0px; - background: linear-gradient(to right, #6495ED, #adbcf9); + `; -const TopChairLeg = styled.div` +const TopChairLeg = styled(ChairColorStyle)` grid-area: firstleg; border-radius: 0px 3px 3px 0px; - background: #6495ED; + `; -const BottomChairLeg = styled.div` +const BottomChairLeg = styled(ChairColorStyle)` grid-area: secondleg; border-radius: 0px 3px 3px 0px; - background: #6495ED; `; \ No newline at end of file