From c10c59ae24fe632b1868a02172c949ce52935863 Mon Sep 17 00:00:00 2001 From: Camila Sosa Morales Date: Fri, 31 Mar 2023 12:33:30 -0300 Subject: [PATCH] feat: UI create explore view skeleton (#197) * wip: added header for explore view * chore: add skeleton for explore view * chore: add dropdown variation * style: align dropdown list --- ui/src/app.tsx | 5 +- ui/src/components/core/combobox/dropdown.tsx | 111 ++++++++++++++---- ui/src/components/core/input/input.tsx | 2 +- ui/src/components/layout/nav-bar/nav-bar.tsx | 2 +- ui/src/views/explore/explore.styles.ts | 12 ++ ui/src/views/explore/explore.tsx | 12 ++ ui/src/views/explore/header.styles.ts | 29 +++++ ui/src/views/explore/header.tsx | 22 ++++ ui/src/views/explore/index.ts | 1 + ui/src/views/explore/list-nfas/index.ts | 0 ui/src/views/explore/list-nfas/list-nfas.tsx | 12 ++ .../list-nfas}/nfa-list/index.ts | 0 .../list-nfas}/nfa-list/nfa-list.tsx | 2 +- .../explore/list-nfas/results-search.tsx | 38 ++++++ .../views/explore/list-nfas/results.styles.ts | 18 +++ ui/src/views/home/home.tsx | 2 - ui/src/views/index.ts | 1 + ui/tailwind.config.js | 9 ++ 18 files changed, 249 insertions(+), 29 deletions(-) create mode 100644 ui/src/views/explore/explore.styles.ts create mode 100644 ui/src/views/explore/explore.tsx create mode 100644 ui/src/views/explore/header.styles.ts create mode 100644 ui/src/views/explore/header.tsx create mode 100644 ui/src/views/explore/index.ts create mode 100644 ui/src/views/explore/list-nfas/index.ts create mode 100644 ui/src/views/explore/list-nfas/list-nfas.tsx rename ui/src/views/{home => explore/list-nfas}/nfa-list/index.ts (100%) rename ui/src/views/{home => explore/list-nfas}/nfa-list/nfa-list.tsx (94%) create mode 100644 ui/src/views/explore/list-nfas/results-search.tsx create mode 100644 ui/src/views/explore/list-nfas/results.styles.ts diff --git a/ui/src/app.tsx b/ui/src/app.tsx index 26b96ff..4c2dd2d 100644 --- a/ui/src/app.tsx +++ b/ui/src/app.tsx @@ -1,7 +1,6 @@ import { HashRouter, Route, Routes, Navigate } from 'react-router-dom'; import { themeGlobals } from '@/theme/globals'; -import { ComponentsTest, CreateAP, Home, Mint } from './views'; -import { MintTest } from './views/mint-test'; +import { ComponentsTest, Home, Mint, Explore, CreateAP } from './views'; import { AppPage, ToastProvider } from './components'; export const App = () => { @@ -13,12 +12,12 @@ export const App = () => { } /> + } /> } /> } /> } /> {/** TODO remove for release */} } /> - } /> } /> diff --git a/ui/src/components/core/combobox/dropdown.tsx b/ui/src/components/core/combobox/dropdown.tsx index 976c6cf..acfefe1 100644 --- a/ui/src/components/core/combobox/dropdown.tsx +++ b/ui/src/components/core/combobox/dropdown.tsx @@ -46,63 +46,132 @@ const DropdownOption = ({ option }: DropdownOptionProps) => ( ); type DropdownButtonProps = { + /** + * The selected value of the dropdown. + */ selectedValue: DropdownItem | undefined; + /** + * If it's true, the list of options will be displayed + */ open: boolean; + /** + * Background color of the dropdown. Should be on tailwind palette. + */ + backgroundColor?: string; + /** + * Text color of the dropdown. Should be on tailwind palette. + */ + textColor?: string; }; -const DropdownButton = ({ selectedValue, open }: DropdownButtonProps) => ( - - { + const textColorCss = textColor ? `text-${textColor}` : 'text-slate12'; + const borderColor = backgroundColor + ? `border-${backgroundColor}` + : 'border-slate7'; + const backgroundColorClass = backgroundColor + ? `bg-${backgroundColor}` + : 'bg-transparent'; + + return ( + - {selectedValue && selectedValue.label ? selectedValue.label : 'Select'} - - - - - -); + + {selectedValue && selectedValue.label ? selectedValue.label : 'Select'} + + + + + + ); +}; export type DropdownItem = { + /** + * The key of the item. + */ value: string; + /** + * The label to display of the item. + */ label: string; }; export type DropdownProps = { + /** + * List of items to be displayed in the dropdown. + */ items: DropdownItem[]; + /** + * The selected value of the dropdown. + */ selectedValue: DropdownItem | undefined; + /** + * Callback when the selected value changes. + */ onChange(option: DropdownItem): void; + /** + * Background color of the dropdown. Should be on tailwind palette. https://tailwindcss.com/docs/background-color + */ + backgroundColor?: string; + /** + * Text color of the dropdown. Should be on tailwind palette. https://tailwindcss.com/docs/text-color + */ + textColor?: string; + /** + * Width of the options list. Should be on tailwind width. https://tailwindcss.com/docs/width + */ + optionsWidth?: string; }; export const Dropdown: React.FC = ({ items, selectedValue, onChange, + backgroundColor, + textColor, + optionsWidth, }) => { const handleDropdownChange = (option: DropdownItem) => { onChange(option); }; + const width = optionsWidth ? `w-${optionsWidth}` : 'w-full'; return ( {({ open }) => (
- + - + {items.map((option: DropdownItem) => ( ))} diff --git a/ui/src/components/core/input/input.tsx b/ui/src/components/core/input/input.tsx index d50c157..40ba4fa 100644 --- a/ui/src/components/core/input/input.tsx +++ b/ui/src/components/core/input/input.tsx @@ -21,7 +21,7 @@ export const Input = forwardRef(
); diff --git a/ui/src/components/layout/nav-bar/nav-bar.tsx b/ui/src/components/layout/nav-bar/nav-bar.tsx index 7d660c6..4a0fe2e 100644 --- a/ui/src/components/layout/nav-bar/nav-bar.tsx +++ b/ui/src/components/layout/nav-bar/nav-bar.tsx @@ -13,7 +13,7 @@ export const NavBar: React.FC = () => { - + {/* TODO replace with create ap route */} + + + +); diff --git a/ui/src/views/explore/index.ts b/ui/src/views/explore/index.ts new file mode 100644 index 0000000..7ece4a3 --- /dev/null +++ b/ui/src/views/explore/index.ts @@ -0,0 +1 @@ +export * from './explore'; diff --git a/ui/src/views/explore/list-nfas/index.ts b/ui/src/views/explore/list-nfas/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/ui/src/views/explore/list-nfas/list-nfas.tsx b/ui/src/views/explore/list-nfas/list-nfas.tsx new file mode 100644 index 0000000..db9e80e --- /dev/null +++ b/ui/src/views/explore/list-nfas/list-nfas.tsx @@ -0,0 +1,12 @@ +import { Flex } from '@/components'; +import { NFAList } from './nfa-list'; +import { ResultsSearch } from './results-search'; + +export const ListNfas: React.FC = () => { + return ( + + + + + ); +}; diff --git a/ui/src/views/home/nfa-list/index.ts b/ui/src/views/explore/list-nfas/nfa-list/index.ts similarity index 100% rename from ui/src/views/home/nfa-list/index.ts rename to ui/src/views/explore/list-nfas/nfa-list/index.ts diff --git a/ui/src/views/home/nfa-list/nfa-list.tsx b/ui/src/views/explore/list-nfas/nfa-list/nfa-list.tsx similarity index 94% rename from ui/src/views/home/nfa-list/nfa-list.tsx rename to ui/src/views/explore/list-nfas/nfa-list/nfa-list.tsx index 4129394..ed982c4 100644 --- a/ui/src/views/home/nfa-list/nfa-list.tsx +++ b/ui/src/views/explore/list-nfas/nfa-list/nfa-list.tsx @@ -52,7 +52,7 @@ export const NFAList = () => { }; return ( - + {/* TODO this will be remove when we have pagination component */} items per page: {pageSize} diff --git a/ui/src/views/explore/list-nfas/results-search.tsx b/ui/src/views/explore/list-nfas/results-search.tsx new file mode 100644 index 0000000..a666e38 --- /dev/null +++ b/ui/src/views/explore/list-nfas/results-search.tsx @@ -0,0 +1,38 @@ +import { Dropdown, DropdownItem, Flex, Input } from '@/components'; +import { useState } from 'react'; +import { ResultsContainer, ResultsNumber, ResultsText } from './results.styles'; + +const orderResults: DropdownItem[] = [ + { value: 'a-z', label: 'Sort A-Z' }, + { value: 'z-a', label: 'Sort Z-A' }, +]; + +export const ResultsSearch: React.FC = () => { + const [selectedValue, setSelectedValue] = useState( + orderResults[0] + ); //TODO replace for context + + return ( + + + All NFAs + (3,271) + + + + + + + ); +}; diff --git a/ui/src/views/explore/list-nfas/results.styles.ts b/ui/src/views/explore/list-nfas/results.styles.ts new file mode 100644 index 0000000..e44ff19 --- /dev/null +++ b/ui/src/views/explore/list-nfas/results.styles.ts @@ -0,0 +1,18 @@ +import { dripStitches } from '@/theme'; + +const { styled } = dripStitches; + +export const ResultsContainer = styled('div', { + fontSize: '$xl', + fontWeight: '$bold', + display: 'flex', + alignItems: 'center', +}); + +export const ResultsText = styled('span', { + color: '$slate12', +}); + +export const ResultsNumber = styled('span', { + color: '$slate11', +}); diff --git a/ui/src/views/home/home.tsx b/ui/src/views/home/home.tsx index 8c731d7..faa5227 100644 --- a/ui/src/views/home/home.tsx +++ b/ui/src/views/home/home.tsx @@ -1,6 +1,5 @@ import { Flex } from '@/components'; import { Link } from 'react-router-dom'; -import { NFAList } from './nfa-list/nfa-list'; export const Home = () => { return ( @@ -9,7 +8,6 @@ export const Home = () => { Mint NFA! - ); }; diff --git a/ui/src/views/index.ts b/ui/src/views/index.ts index ddacf9c..129b412 100644 --- a/ui/src/views/index.ts +++ b/ui/src/views/index.ts @@ -1,4 +1,5 @@ export * from './home'; export * from './mint'; export * from './components-test'; +export * from './explore'; export * from './access-point'; diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js index 9bd1c2b..a907678 100644 --- a/ui/tailwind.config.js +++ b/ui/tailwind.config.js @@ -3,10 +3,19 @@ module.exports = { content: ['./src/**/*.tsx'], + safelist: [ + { + pattern: /(bg|border|text)-(slate)(4|11|12)/, + }, + { + pattern: /w-(0|[1-9][0-9]?|100)/, + }, + ], theme: { extend: { colors: { //TODO if we're gonna have ligth mode we should add also the light colors cause tailwind doesn't have them + slate4: 'rgba(38, 41, 43, 1)', slate5: 'rgba(43, 47, 49, 1)', slate6: 'rgba(49, 53, 56, 1)', slate7: 'rgba(58, 63, 66, 1)',