diff --git a/package-lock.json b/package-lock.json index c5bfa65..df76061 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "@remirror/react": "^1.0.34", "@shopify/react-web-worker": "^5.0.1", "@szhsin/react-menu": "^3.0.2", - "@tailwindcss/line-clamp": "^0.4.0", + "@tailwindcss/line-clamp": "^0.4.2", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.1.1", "@testing-library/user-event": "^13.5.0", @@ -15324,9 +15324,9 @@ } }, "node_modules/@tailwindcss/line-clamp": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.0.tgz", - "integrity": "sha512-HQZo6gfx1D0+DU3nWlNLD5iA6Ef4JAXh0LeD8lOGrJwEDBwwJNKQza6WoXhhY1uQrxOuU8ROxV7CqiQV4CoiLw==", + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz", + "integrity": "sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==", "peerDependencies": { "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1" } @@ -82381,9 +82381,9 @@ } }, "@tailwindcss/line-clamp": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.0.tgz", - "integrity": "sha512-HQZo6gfx1D0+DU3nWlNLD5iA6Ef4JAXh0LeD8lOGrJwEDBwwJNKQza6WoXhhY1uQrxOuU8ROxV7CqiQV4CoiLw==", + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz", + "integrity": "sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==", "requires": {} }, "@testing-library/dom": { diff --git a/package.json b/package.json index 0b3b6f4..eeb56f4 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "my-app", + "name": "makers-bolt-fun", "version": "0.1.0", "private": true, "dependencies": { @@ -14,7 +14,7 @@ "@remirror/react": "^1.0.34", "@shopify/react-web-worker": "^5.0.1", "@szhsin/react-menu": "^3.0.2", - "@tailwindcss/line-clamp": "^0.4.0", + "@tailwindcss/line-clamp": "^0.4.2", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.1.1", "@testing-library/user-event": "^13.5.0", diff --git a/src/Components/Card/Card.tsx b/src/Components/Card/Card.tsx index edc6123..e9727e7 100644 --- a/src/Components/Card/Card.tsx +++ b/src/Components/Card/Card.tsx @@ -21,8 +21,8 @@ const Card = React.forwardRef>(({ ref={ref} className={` ${onlyMd ? - `md:bg-white md:rounded-16 md:border-2 border-gray-200 ${defaultPadding && "md:p-24"}` : - `bg-white rounded-12 md:rounded-16 border-2 border-gray-200 ${defaultPadding && "p-16 md:p-24"}` + `md:bg-white md:rounded-16 md:outline outline-2 outline-gray-200 ${defaultPadding && "md:p-24"}` : + `bg-white rounded-12 md:rounded-16 outline outline-2 outline-gray-200 ${defaultPadding && "p-16 md:p-24"}` } ${className} `} diff --git a/src/Components/Inputs/Autocomplete/Autocomplete.stories.tsx b/src/Components/Inputs/Autocomplete/Autocomplete.stories.tsx deleted file mode 100644 index 02df6f4..0000000 --- a/src/Components/Inputs/Autocomplete/Autocomplete.stories.tsx +++ /dev/null @@ -1,171 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { useWatch } from 'react-hook-form'; -import { WrapForm } from 'src/utils/storybook/decorators'; - -import Autocomplete from './Autocomplete'; - -export default { - title: 'Shared/Inputs/AutoComplete', - component: Autocomplete, - decorators: [WrapForm({ - defaultValues: { - autocomplete: null - } - })], - -} as ComponentMeta; - -const options = [ - { - "id": "20f0eb8d-c0cd-4e12-8a08-0d9846fc8704", - "name": "Nichole Bailey", - "username": "Cassie14", - "email": "Daisy_Auer50@hotmail.com", - "address": { - "street": "Anastasia Tunnel", - "suite": 95587, - "city": "Port Casperview", - "zipcode": "04167-6996", - "geo": { - "lat": "-73.4727", - "lng": "-142.9435" - } - }, - "phone": "324-615-9195 x5902", - "website": "ron.net", - "company": { - "name": "Roberts, Tremblay and Christiansen", - "catchPhrase": "Vision-oriented actuating access", - "bs": "bricks-and-clicks strategize portals" - } - }, - { - "id": "62b70f76-85ba-4241-9ffd-07582008c497", - "name": "Robert Blick", - "username": "Madilyn93", - "email": "Ronaldo82@gmail.com", - "address": { - "street": "Charlie Plain", - "suite": 83070, - "city": "Lake Bonitaland", - "zipcode": "01109", - "geo": { - "lat": "50.0971", - "lng": "-2.3057" - } - }, - "phone": "1-541-367-2047 x9006", - "website": "jovani.com", - "company": { - "name": "Parisian - Kling", - "catchPhrase": "Multi-tiered tertiary toolset", - "bs": "plug-and-play benchmark content" - } - }, - { - "id": "d02f74d9-bf99-4e41-b678-15e903abc1b3", - "name": "Eli O'Kon", - "username": "Rosario.Davis", - "email": "Mckayla59@hotmail.com", - "address": { - "street": "Wilford Drive", - "suite": 69742, - "city": "North Dianna", - "zipcode": "80620", - "geo": { - "lat": "-61.4191", - "lng": "126.7878" - } - }, - "phone": "(339) 709-4080", - "website": "clay.name", - "company": { - "name": "Gerlach - Metz", - "catchPhrase": "Pre-emptive user-facing service-desk", - "bs": "frictionless monetize markets" - } - }, - { - "id": "21077fa6-6a53-4b84-8407-6cd949718945", - "name": "Marilie Feil", - "username": "Antwon.Carter92", - "email": "Demario.Hyatt20@yahoo.com", - "address": { - "street": "Kenton Spurs", - "suite": 20079, - "city": "Beahanberg", - "zipcode": "79385", - "geo": { - "lat": "-70.7199", - "lng": "4.6977" - } - }, - "phone": "608.750.4947", - "website": "jacynthe.org", - "company": { - "name": "Kuhn and Sons", - "catchPhrase": "Total eco-centric matrices", - "bs": "out-of-the-box target communities" - } - }, - { - "id": "e07cf1b4-ff43-4c4a-a670-fd7417d6bbaf", - "name": "Ella Pagac", - "username": "Damien.Jaskolski", - "email": "Delmer1@gmail.com", - "address": { - "street": "VonRueden Shoals", - "suite": 14035, - "city": "Starkmouth", - "zipcode": "72448-1915", - "geo": { - "lat": "55.2157", - "lng": "98.0822" - } - }, - "phone": "(165) 247-5332 x71067", - "website": "chad.info", - "company": { - "name": "Nicolas, Doyle and Rempel", - "catchPhrase": "Adaptive real-time strategy", - "bs": "innovative whiteboard supply-chains" - } - } -] -const Template: ComponentStory = (args) => { - - const value = useWatch({ name: 'autocomplete' }) - - console.log(value); - - - return -} - - -export const Default = Template.bind({}); -Default.args = { - onChange: console.log -} - - -export const Lodaing = Template.bind({}); -Lodaing.args = { - isLoading: true -} - -export const Clearable = Template.bind({}); -Clearable.args = { - isClearable: true -} - -export const MultipleAllowed = Template.bind({}); -MultipleAllowed.args = { - isMulti: true -} - diff --git a/src/Components/Inputs/Autocomplete/Autocomplete.tsx b/src/Components/Inputs/Autocomplete/Autocomplete.tsx deleted file mode 100644 index d5c5df2..0000000 --- a/src/Components/Inputs/Autocomplete/Autocomplete.tsx +++ /dev/null @@ -1,111 +0,0 @@ - -import { useMemo } from "react"; -import Select, { StylesConfig } from "react-select"; -import { ControlledStateHandler } from "src/utils/interfaces"; - - -type Props = { - options: T[]; - labelField?: keyof T - valueField?: keyof T - placeholder?: string - disabled?: boolean - isLoading?: boolean; - isClearable?: boolean; - control?: any, - name?: string, - className?: string, - onBlur?: () => void; - size?: 'sm' | 'md' | 'lg' -} & ControlledStateHandler - - - - -export default function AutoComplete({ - options, - labelField, - valueField, - placeholder = "Select Option...", - isMulti, - isClearable, - disabled, - className, - value, - onChange, - onBlur, - size = 'md', - ...props -}: Props) { - - - const colourStyles: StylesConfig = useMemo(() => ({ - control: (styles, state) => ({ - ...styles, - padding: '5px 12px', - borderRadius: 12, - // border: 'none', - // boxShadow: 'none', - - ":hover": { - cursor: "pointer" - }, - ":focus-within": { - '--tw-border-opacity': '1', - borderColor: 'rgb(179 160 255 / var(--tw-border-opacity))', - outlineColor: '#9E88FF', - '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)', - '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)', - boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)', - '--tw-ring-color': 'rgb(179 160 255 / var(--tw-ring-opacity))', - '--tw-ring-opacity': '0.5' - } - }), - indicatorSeparator: (styles, state) => ({ - ...styles, - display: "none" - }), - input: (styles, state) => ({ - ...styles, - " input": { - boxShadow: 'none !important' - }, - }), - }), []) - - return ( -
- o[labelField]} + getOptionValue={o => o[valueField]} + + value={value as any} + onChange={v => onChange?.(v as any)} + onBlur={onBlur} + components={{ + Option: getOptionComponent(renderOption, labelField), + // ValueContainer: CustomValueContainer + }} + + styles={selectCustomStyle as any} + theme={(theme) => ({ + ...theme, + borderRadius: 8, + colors: { + ...theme.colors, + primary: 'var(--primary)', + }, + })} + /> + +
+ + ); +} + +function getOptionComponent>(renderOption: Props['renderOption'], labelField: Props['labelField']) { + const _render = renderOption ?? ((option) =>
+ {option.data[labelField]} +
) + + return function OptionComponent(props: OptionProps) { + return ( + + {_render(props)} + + ); + }; +} \ No newline at end of file diff --git a/src/features/Hackathons/Components/SortByFilter/SortByFilter.tsx b/src/features/Hackathons/Components/SortByFilter/SortByFilter.tsx index 037b88c..7f3eb4d 100644 --- a/src/features/Hackathons/Components/SortByFilter/SortByFilter.tsx +++ b/src/features/Hackathons/Components/SortByFilter/SortByFilter.tsx @@ -1,5 +1,4 @@ import React, { useState } from 'react' -import AutoComplete from 'src/Components/Inputs/Autocomplete/Autocomplete'; import { useMediaQuery } from 'src/utils/hooks'; import { MEDIA_QUERIES } from 'src/utils/theme'; diff --git a/src/features/Tournaments/pages/EventsPage/EventCard/EventCard.tsx b/src/features/Tournaments/pages/EventsPage/EventCard/EventCard.tsx index 577a7e6..e4aeccc 100644 --- a/src/features/Tournaments/pages/EventsPage/EventCard/EventCard.tsx +++ b/src/features/Tournaments/pages/EventsPage/EventCard/EventCard.tsx @@ -40,10 +40,10 @@ export default function EventCard({ event }: Props) { return (
- +

diff --git a/src/features/Tournaments/pages/EventsPage/EventsFilters/EventsFilters.tsx b/src/features/Tournaments/pages/EventsPage/EventsFilters/EventsFilters.tsx index a16b30d..18ae1eb 100644 --- a/src/features/Tournaments/pages/EventsPage/EventsFilters/EventsFilters.tsx +++ b/src/features/Tournaments/pages/EventsPage/EventsFilters/EventsFilters.tsx @@ -1,5 +1,5 @@ import { FiSearch } from 'react-icons/fi' -import AutoComplete from 'src/Components/Inputs/Autocomplete/Autocomplete'; +import BasicSelectInput from 'src/Components/Inputs/Selects/BasicSelectInput/BasicSelectInput'; import { TournamentEventTypeEnum } from 'src/graphql'; import { mapTypeToBadge } from '../EventCard/EventCard'; @@ -31,12 +31,12 @@ export default function EventsFilters(props: Props) { onChange={e => props.onSearchChange(e.target.value)} />

- props.onEventChange(v ? v.value : null)} options={options} diff --git a/src/utils/interfaces/misc.interfaces.ts b/src/utils/interfaces/misc.interfaces.ts index f3fc015..c906a59 100644 --- a/src/utils/interfaces/misc.interfaces.ts +++ b/src/utils/interfaces/misc.interfaces.ts @@ -13,12 +13,10 @@ export type ListComponentProps = { export type ControlledStateHandler = { isMulti?: IsMulti; value?: - | (true extends IsMulti ? T[] : never) - | (false extends IsMulti ? T : never) + | (true extends IsMulti ? T[] : T) | null onChange?: ( - nv: | (true extends IsMulti ? T[] : never) - | (false extends IsMulti ? T : never) + nv: | (true extends IsMulti ? T[] : T) | null ) => void onBlur?: () => void