From 2f4dd0097bf8ce84f1b724bf3a49d0b4f063d2b8 Mon Sep 17 00:00:00 2001 From: Daniel Soares Date: Tue, 14 Dec 2021 14:18:50 -0300 Subject: [PATCH] feat: add ColorSelect --- src/components/Button/index.tsx | 6 +- src/components/Button/styles.ts | 106 +++++++++------------- src/components/Dash/ColorSelect/index.tsx | 84 +++++++++++++++++ src/components/Dash/ColorSelect/styles.ts | 32 +++++++ src/components/Dash/index.tsx | 33 +++---- src/components/Home/index.tsx | 4 +- src/components/Home/styles.ts | 3 +- src/components/Link/styles.ts | 5 - src/styles/stitches.config.ts | 44 --------- src/types/Data.ts | 4 +- 10 files changed, 177 insertions(+), 144 deletions(-) create mode 100644 src/components/Dash/ColorSelect/index.tsx create mode 100644 src/components/Dash/ColorSelect/styles.ts diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index ebf79be..14df8d9 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -5,10 +5,10 @@ import { Wrapper } from './styles' type ButtonProps = ButtonHTMLAttributes & { children: ReactNode - theme?: ButtonVariantProps['theme'] - schema?: ButtonVariantProps['schema'] - outline?: ButtonVariantProps['outline'] + colorSchema?: ButtonVariantProps['colorSchema'] + styleSchema?: ButtonVariantProps['styleSchema'] font?: ButtonVariantProps['font'] + outline?: ButtonVariantProps['outline'] } export function Button({ children, ...rest }: ButtonProps) { diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts index 9cee486..a76fdea 100644 --- a/src/components/Button/styles.ts +++ b/src/components/Button/styles.ts @@ -1,6 +1,6 @@ import { Colors, styled, theme, VariantProps } from '../../styles/stitches.config' -const themeVariantFn = ( +const colorSchemaFn = ( lightColor: Colors, regularColor: Colors, darkColor: Colors, @@ -51,32 +51,28 @@ export const Wrapper = styled('button', { }, variants: { - theme: { - slate: themeVariantFn('slate50', 'slate600', 'slate700', 'slate800'), - gray: themeVariantFn('gray50', 'gray600', 'gray700', 'gray800'), - zinc: themeVariantFn('zinc50', 'zinc600', 'zinc700', 'zinc800'), - neutral: themeVariantFn('neutral50', 'neutral600', 'neutral700', 'neutral800'), - stone: themeVariantFn('stone50', 'stone600', 'stone700', 'stone800'), - red: themeVariantFn('red50', 'red600', 'red700', 'red800'), - orange: themeVariantFn('orange50', 'orange600', 'orange700', 'orange800'), - amber: themeVariantFn('amber50', 'amber600', 'amber700', 'amber800'), - yellow: themeVariantFn('yellow50', 'yellow600', 'yellow700', 'yellow800'), - lime: themeVariantFn('lime50', 'lime600', 'lime700', 'lime800'), - green: themeVariantFn('green50', 'green600', 'green700', 'green800'), - emerald: themeVariantFn('emerald50', 'emerald600', 'emerald700', 'emerald800'), - teal: themeVariantFn('teal50', 'teal600', 'teal700', 'teal800'), - cyan: themeVariantFn('cyan50', 'cyan600', 'cyan700', 'cyan800'), - sky: themeVariantFn('sky50', 'sky600', 'sky700', 'sky800'), - blue: themeVariantFn('blue50', 'blue600', 'blue700', 'blue800'), - indigo: themeVariantFn('indigo50', 'indigo600', 'indigo700', 'indigo800'), - violet: themeVariantFn('violet50', 'violet600', 'violet700', 'violet800'), - purple: themeVariantFn('purple50', 'purple600', 'purple700', 'purple800'), - fuchsia: themeVariantFn('fuchsia50', 'fuchsia600', 'fuchsia700', 'fuchsia800'), - pink: themeVariantFn('pink50', 'pink600', 'pink700', 'pink800'), - rose: themeVariantFn('rose50', 'rose600', 'rose700', 'rose800') + colorSchema: { + slate: colorSchemaFn('slate50', 'slate600', 'slate700', 'slate800'), + red: colorSchemaFn('red50', 'red600', 'red700', 'red800'), + orange: colorSchemaFn('orange50', 'orange600', 'orange700', 'orange800'), + amber: colorSchemaFn('amber50', 'amber600', 'amber700', 'amber800'), + yellow: colorSchemaFn('yellow50', 'yellow600', 'yellow700', 'yellow800'), + lime: colorSchemaFn('lime50', 'lime600', 'lime700', 'lime800'), + green: colorSchemaFn('green50', 'green600', 'green700', 'green800'), + emerald: colorSchemaFn('emerald50', 'emerald600', 'emerald700', 'emerald800'), + teal: colorSchemaFn('teal50', 'teal600', 'teal700', 'teal800'), + cyan: colorSchemaFn('cyan50', 'cyan600', 'cyan700', 'cyan800'), + sky: colorSchemaFn('sky50', 'sky600', 'sky700', 'sky800'), + blue: colorSchemaFn('blue50', 'blue600', 'blue700', 'blue800'), + indigo: colorSchemaFn('indigo50', 'indigo600', 'indigo700', 'indigo800'), + violet: colorSchemaFn('violet50', 'violet600', 'violet700', 'violet800'), + purple: colorSchemaFn('purple50', 'purple600', 'purple700', 'purple800'), + fuchsia: colorSchemaFn('fuchsia50', 'fuchsia600', 'fuchsia700', 'fuchsia800'), + pink: colorSchemaFn('pink50', 'pink600', 'pink700', 'pink800'), + rose: colorSchemaFn('rose50', 'rose600', 'rose700', 'rose800') }, - schema: { + styleSchema: { square: { borderRadius: '0' }, @@ -109,120 +105,100 @@ export const Wrapper = styled('button', { compoundVariants: [ { - theme: 'slate', + colorSchema: 'slate', outline: true, css: outlineVariantFn('slate600') }, { - theme: 'gray', - outline: true, - css: outlineVariantFn('gray600') - }, - { - theme: 'zinc', - outline: true, - css: outlineVariantFn('zinc600') - }, - { - theme: 'neutral', - outline: true, - css: outlineVariantFn('neutral600') - }, - { - theme: 'stone', - outline: true, - css: outlineVariantFn('stone600') - }, - { - theme: 'red', + colorSchema: 'red', outline: true, css: outlineVariantFn('red600') }, { - theme: 'orange', + colorSchema: 'orange', outline: true, css: outlineVariantFn('orange600') }, { - theme: 'amber', + colorSchema: 'amber', outline: true, css: outlineVariantFn('amber600') }, { - theme: 'yellow', + colorSchema: 'yellow', outline: true, css: outlineVariantFn('yellow600') }, { - theme: 'lime', + colorSchema: 'lime', outline: true, css: outlineVariantFn('lime600') }, { - theme: 'green', + colorSchema: 'green', outline: true, css: outlineVariantFn('green600') }, { - theme: 'emerald', + colorSchema: 'emerald', outline: true, css: outlineVariantFn('emerald600') }, { - theme: 'teal', + colorSchema: 'teal', outline: true, css: outlineVariantFn('teal600') }, { - theme: 'cyan', + colorSchema: 'cyan', outline: true, css: outlineVariantFn('cyan600') }, { - theme: 'sky', + colorSchema: 'sky', outline: true, css: outlineVariantFn('sky600') }, { - theme: 'blue', + colorSchema: 'blue', outline: true, css: outlineVariantFn('blue600') }, { - theme: 'indigo', + colorSchema: 'indigo', outline: true, css: outlineVariantFn('indigo600') }, { - theme: 'violet', + colorSchema: 'violet', outline: true, css: outlineVariantFn('violet600') }, { - theme: 'purple', + colorSchema: 'purple', outline: true, css: outlineVariantFn('purple600') }, { - theme: 'fuchsia', + colorSchema: 'fuchsia', outline: true, css: outlineVariantFn('fuchsia600') }, { - theme: 'pink', + colorSchema: 'pink', outline: true, css: outlineVariantFn('pink600') }, { - theme: 'rose', + colorSchema: 'rose', outline: true, css: outlineVariantFn('rose600') } ], defaultVariants: { - theme: 'teal', - schema: 'pill', + colorSchema: 'teal', + styleSchema: 'pill', font: 'roboto', outline: false } diff --git a/src/components/Dash/ColorSelect/index.tsx b/src/components/Dash/ColorSelect/index.tsx new file mode 100644 index 0000000..ad1fca1 --- /dev/null +++ b/src/components/Dash/ColorSelect/index.tsx @@ -0,0 +1,84 @@ +import { useState } from 'react' + +import { useData } from '../../../hooks/useData' +import type { Colors } from '../../../styles/stitches.config' +import { theme } from '../../../styles/stitches.config' +import { Color, SelectButton, Wrapper } from './styles' + +type ColorSelectProps = { + prop: 'texts' | 'socialLinks' | 'background' | 'buttonLinks' +} + +export function ColorSelect({ prop }: ColorSelectProps) { + const { data, setData } = useData() + const [activeColor, setActiveColor] = useState(data.settings.colors[prop] as string) + + const allColors = Object.keys(theme.colors) as Colors[] + const colorsSchema = [ + 'slate', + 'red', + 'orange', + 'amber', + 'yellow', + 'lime', + 'green', + 'emerald', + 'teal', + 'cyan', + 'sky', + 'blue', + 'indigo', + 'violet', + 'purple', + 'fuchsia', + 'pink', + 'rose' + ] + + const colors = { + texts: allColors, + socialLinks: colorsSchema, + background: allColors, + buttonLinks: colorsSchema + }[prop] + + const backgroundColor = (color: string) => { + if (prop === 'background' || prop === 'texts') { + return theme.colors[color as Colors] + } + + return theme.colors[`${color}600` as Colors] + } + + const handleChange = (color: string) => { + setActiveColor(color) + setData({ + ...data, + settings: { + ...data.settings, + colors: { + ...data.settings.colors, + [prop]: color + } + } + }) + } + + return ( + + {colors.map(color => ( + handleChange(color)} + > + + + ))} + + ) +} diff --git a/src/components/Dash/ColorSelect/styles.ts b/src/components/Dash/ColorSelect/styles.ts new file mode 100644 index 0000000..b0e0d8d --- /dev/null +++ b/src/components/Dash/ColorSelect/styles.ts @@ -0,0 +1,32 @@ +import { styled, theme } from '../../../styles/stitches.config' + +export const Wrapper = styled('div', { + display: 'grid', + gridTemplateColumns: 'repeat(10, 1fr)', + gridGap: '0.5rem' +}) + +export const SelectButton = styled('button', { + width: '100%', + height: '3rem', + padding: '0.25rem', + borderRadius: '0.25rem', + borderWidth: '3px', + borderStyle: 'solid', + borderColor: theme.colors.slate200, + cursor: 'pointer', + + variants: { + active: { + true: { + borderColor: theme.colors.sky500 + } + } + } +}) + +export const Color = styled('div', { + width: '100%', + height: '100%', + borderRadius: '0.25rem' +}) diff --git a/src/components/Dash/index.tsx b/src/components/Dash/index.tsx index 059c16d..ba11dbe 100644 --- a/src/components/Dash/index.tsx +++ b/src/components/Dash/index.tsx @@ -4,16 +4,16 @@ import { useEffect, useState } from 'react' import { useData } from '../../hooks/useData' import { api } from '../../services/api' -import type { Colors, Fonts } from '../../styles/stitches.config' -import { theme } from '../../styles/stitches.config' +import type { Fonts } from '../../styles/stitches.config' import type { Data } from '../../types/Data' import { getLocalStorageData, removeLocalStorageData, setLocalStorageData } from '../../utils/localStorage' -import type { ButtonVariantProps } from '../Button' +import { ButtonVariantProps } from '../Button' import { Home } from '../Home' +import { ColorSelect } from './ColorSelect' import { DescriptionInput } from './DescriptionInput' import { NameInput } from './NameInput' import { Content, Preview, Wrapper } from './styles' @@ -56,14 +56,7 @@ export function Dash({ initialData }: DashProps) { } } - const handleChangeBackground = (background: Colors) => { - setData({ - ...data, - settings: { ...data.settings, colors: { ...data.settings.colors, background } } - }) - } - - const handleChangeButtonsSchema = (schema: ButtonVariantProps['schema']) => { + const handleChangeButtonsSchema = (schema: ButtonVariantProps['styleSchema']) => { setData({ ...data, settings: { ...data.settings, buttonsSchema: schema } }) } @@ -98,20 +91,16 @@ export function Dash({ initialData }: DashProps) { - + + + +