From 20f9f11fbf9b9c420707eca79baa80c2b08e73e6 Mon Sep 17 00:00:00 2001 From: marcelines Date: Fri, 2 Jun 2023 17:03:46 +0100 Subject: [PATCH 01/14] feat: adds all input variants and stars building filters for table issues --- apps/website/src/components/table-issues.tsx | 163 +++++++++++++++-- .../src/icon-button/icon-button.tsx | 2 +- .../components/src/input/input.stories.tsx | 46 +++++ packages/components/src/input/input.tsx | 164 +++++++++++++++--- 4 files changed, 337 insertions(+), 38 deletions(-) diff --git a/apps/website/src/components/table-issues.tsx b/apps/website/src/components/table-issues.tsx index 8064bf23..649a1b3a 100644 --- a/apps/website/src/components/table-issues.tsx +++ b/apps/website/src/components/table-issues.tsx @@ -1,41 +1,182 @@ -import { Avatar, Button, Tag, Text } from '@status-im/components' +import { useState } from 'react' + +import { Avatar, Button, Input, Tag, Text } from '@status-im/components' +import { DropdownMenu } from '@status-im/components/src/dropdown-menu' +import { DropdownIcon, OpenIcon, SearchIcon } from '@status-im/icons' import Link from 'next/link' const issues = [ { id: 5154, title: 'Add support for encrypted communities', - status: 'Open', + status: 'open', }, { id: 5155, title: 'Add support for encrypted communities', - status: 'Open', + status: 'open', }, { id: 4, title: 'Add support for encrypted communities', - status: 'Open', + status: 'open', }, { id: 4324, title: 'Add support for encrypted communities', - status: 'Open', + status: 'open', }, { - id: 876, + id: 134, title: 'Add support for encrypted communities', - status: 'Open', + status: 'closed', + }, + { + id: 999, + title: 'Add support for encrypted communities', + status: 'closed', + }, + { + id: 873, + title: 'Add support for encrypted communities', + status: 'open', + }, + { + id: 123, + title: 'Add support for encrypted communities', + status: 'open', + }, +] + +const authors = [ + { + id: 1, + name: 'Tobias', + avatar: + 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', + }, + { + id: 2, + name: 'Arnold', + avatar: + 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', + }, + { + id: 3, + name: 'Alisher', + avatar: + 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', + }, + { + id: 4, + name: 'marcelines', + avatar: 'https://avatars.githubusercontent.com/u/29401404?v=4', + }, + { + id: 5, + name: 'prichodko', + avatar: 'https://avatars.githubusercontent.com/u/14926950?v=4', + }, + { + id: 6, + name: 'felicio', + avatar: 'https://avatars.githubusercontent.com/u/13265126?v=4', + }, + { + id: 7, + name: 'jkbktl', + avatar: 'https://avatars.githubusercontent.com/u/520927?v=4', }, ] export const TableIssues = () => { + const [activeTab, setActiveTab] = useState<'open' | 'closed'>('open') + + const [authorFilterText, setAuthorFilterText] = useState('') + const filteredAuthors = authors.filter(author => + author.name.toLowerCase().includes(authorFilterText.toLowerCase()) + ) + return (
-
- - 784 Open - +
+
+
+ +
+
+ +
+
+
+
+
+ + + +
+ } + size={32} + value={authorFilterText} + onChangeText={setAuthorFilterText} + /> +
+ {filteredAuthors.map(author => ( + + } + label={author.name} + onSelect={() => alert('Author: ' + author.name)} + /> + ))} + {filteredAuthors.length === 0 && ( +
+ No authors found +
+ )} + + +
+
+ +
+
+ +
+
+
diff --git a/packages/components/src/icon-button/icon-button.tsx b/packages/components/src/icon-button/icon-button.tsx index bd58de10..24bbed19 100644 --- a/packages/components/src/icon-button/icon-button.tsx +++ b/packages/components/src/icon-button/icon-button.tsx @@ -1,6 +1,6 @@ import { cloneElement, forwardRef } from 'react' -import { Stack, styled } from 'tamagui' +import { Stack, styled } from '@tamagui/core' import { usePressableColors } from '../hooks/use-pressable-colors' diff --git a/packages/components/src/input/input.stories.tsx b/packages/components/src/input/input.stories.tsx index 10ccabfb..39d6d52f 100644 --- a/packages/components/src/input/input.stories.tsx +++ b/packages/components/src/input/input.stories.tsx @@ -1,3 +1,7 @@ +import { useEffect, useState } from 'react' + +import { SearchIcon } from '@status-im/icons' + import { Input } from './input' import type { Meta, StoryObj } from '@storybook/react' @@ -18,4 +22,46 @@ export const Primary: Story = { }, } +const InputSearch = () => { + const [value, setValue] = useState('') + + // limit input to 100 characters just for demo purposes + useEffect(() => { + if (value.length > 100) { + setValue(value.slice(0, 100)) + } + }, [value]) + + return ( + <> + } + onClear={() => setValue('')} + label="Search" + endLabel={`${value.length}/100`} + size={40} + button={{ + label: 'Confirm', + onPress: () => alert('Confirmed!'), + }} + /> + + ) +} + +export const CompleteExample: Story = { + render: () => , +} + +export const WithError: Story = { + args: { + placeholder: 'Type something...', + error: true, + // children: 'Click me', + }, +} + export default meta diff --git a/packages/components/src/input/input.tsx b/packages/components/src/input/input.tsx index 54034d72..5ca43a5d 100644 --- a/packages/components/src/input/input.tsx +++ b/packages/components/src/input/input.tsx @@ -1,62 +1,174 @@ -import { setupReactNative, styled } from '@tamagui/core' +import { cloneElement, forwardRef } from 'react' + +import { ClearIcon } from '@status-im/icons' +import { setupReactNative, Stack, styled } from '@tamagui/core' import { focusableInputHOC } from '@tamagui/focusable' import { TextInput } from 'react-native' +import { Button } from '../button' +import { IconButton } from '../icon-button' +import { Text } from '../text' + import type { GetProps } from '@tamagui/core' +import type { Ref } from 'react' setupReactNative({ TextInput, }) -export const InputFrame = styled( +const InputFrame = styled( TextInput, { tag: 'input', name: 'Input', - borderWidth: 1, outlineWidth: 0, - borderColor: 'rgba(0, 200, 0, 1)', + borderColor: '$neutral-20', - paddingHorizontal: 30, - color: 'hsla(218, 51%, 7%, 1)', + color: '$neutral-100', placeholderTextColor: '$placeHolderColor', backgroundColor: 'transparent', - height: 32, - borderRadius: '$12', - - animation: 'fast', - // this fixes a flex bug where it overflows container minWidth: 0, - hoverStyle: { - borderColor: '$beigeHover', - }, - - focusStyle: { - borderColor: '$blueHover', - }, - variants: { blurred: { true: { placeholderTextColor: '$placeHolderColorBlurred', }, }, - }, - - defaultVariants: { - blurred: '$false', - }, + } as const, }, { isInput: true, } ) -export type InputProps = GetProps +const InputContainer = styled(Stack, { + name: 'InputContainer', + tag: 'div', + flexDirection: 'row', + alignItems: 'center', + gap: 8, -export const Input = focusableInputHOC(InputFrame) + borderWidth: 1, + borderColor: '$neutral-20', + + paddingHorizontal: 12, + + animation: 'fast', + + hoverStyle: { + borderColor: '$neutral-40', + }, + + focusStyle: { + borderColor: '$neutral-40', + }, + + pressStyle: { + borderColor: '$neutral-40', + }, + + variants: { + size: { + 40: { + height: 40, + paddingHorizontal: 16, + borderRadius: '$12', + }, + 32: { + height: 32, + paddingHorizontal: 8, + borderRadius: '$10', + }, + }, + error: { + true: { + borderColor: '$danger-50-opa-40', + }, + }, + + disabled: { + true: { + opacity: 0.3, + cursor: 'default', + }, + }, + } as const, +}) + +type Props = GetProps & { + button?: { + label: string + onPress: () => void + } + endLabel?: string + icon?: React.ReactElement + label?: string + onClear?: () => void + size?: 40 | 32 + error?: boolean +} + +const InputBase = focusableInputHOC(InputFrame) + +const _Input = (props: Props, ref: Ref) => { + const { + button, + color = '$neutral-50', + endLabel, + error, + icon, + label, + onClear, + size = 40, + value, + ...rest + } = props + return ( + + {Boolean(label || endLabel) && ( + + {label && ( + + {label} + + )} + {endLabel && ( + + {endLabel} + + )} + + )} + + {icon ? cloneElement(icon, { color }) : null} + + + {Boolean(onClear) && !!value && ( + + } + onPress={onClear} + /> + + )} + {button && ( + + )} + + + + ) +} + +const Input = forwardRef(_Input) + +export { Input } +export type { Props as InputProps } From b6f24857c142b7f117656be29e65b256191c4cfb Mon Sep 17 00:00:00 2001 From: marcelines Date: Mon, 5 Jun 2023 17:21:39 +0100 Subject: [PATCH 02/14] feat: adds checkbox and changes dropdown menu --- apps/website/src/components/index.tsx | 2 + .../table-issues/filters/filter-author.tsx | 79 +++++++++++ .../src/components/table-issues/index.tsx | 1 + .../{ => table-issues}/table-issues.tsx | 55 +------- .../src/pages/insights/epics/[epic].tsx | 4 +- apps/website/src/pages/insights/orphans.tsx | 2 +- .../insights/workstreams/[workstream].tsx | 4 +- packages/components/package.json | 1 + .../src/dropdown-menu/dropdown-menu.tsx | 64 ++++++++- .../src/selectors/checkbox.stories.tsx | 58 ++++++++ .../components/src/selectors/checkbox.tsx | 124 ++++++++++++++++++ packages/components/src/selectors/index.tsx | 1 + yarn.lock | 98 ++++++++++++++ 13 files changed, 434 insertions(+), 59 deletions(-) create mode 100644 apps/website/src/components/table-issues/filters/filter-author.tsx create mode 100644 apps/website/src/components/table-issues/index.tsx rename apps/website/src/components/{ => table-issues}/table-issues.tsx (71%) create mode 100644 packages/components/src/selectors/checkbox.stories.tsx create mode 100644 packages/components/src/selectors/checkbox.tsx create mode 100644 packages/components/src/selectors/index.tsx diff --git a/apps/website/src/components/index.tsx b/apps/website/src/components/index.tsx index 096e0f20..2e50d9c0 100644 --- a/apps/website/src/components/index.tsx +++ b/apps/website/src/components/index.tsx @@ -1,2 +1,4 @@ export { Breadcrumbs } from './breadcrumbs/breadcrumbs' +export { EpicOverview } from './epic-overview' export { SideBar } from './side-bar/side-bar' +export { TableIssues } from './table-issues' diff --git a/apps/website/src/components/table-issues/filters/filter-author.tsx b/apps/website/src/components/table-issues/filters/filter-author.tsx new file mode 100644 index 00000000..c0c3ffc8 --- /dev/null +++ b/apps/website/src/components/table-issues/filters/filter-author.tsx @@ -0,0 +1,79 @@ +import { useState } from 'react' + +import { Avatar, Button, Input, Text } from '@status-im/components' +import { DropdownMenu } from '@status-im/components/src/dropdown-menu' +import { DropdownIcon, SearchIcon } from '@status-im/icons' + +type Props = { + authors: { + id: number + name: string + avatar?: string + }[] +} +const FilterAuthor = (props: Props) => { + const { authors } = props + + const [authorFilterText, setAuthorFilterText] = useState('') + const filteredAuthors = authors.filter(author => + author.name.toLowerCase().includes(authorFilterText.toLowerCase()) + ) + + const [selectedAuthors, setSelectedAuthors] = useState([]) + + return ( +
+ + + +
+ } + size={32} + value={authorFilterText} + onChangeText={setAuthorFilterText} + /> +
+ {filteredAuthors.map(author => ( + + } + label={author.name} + checked={selectedAuthors.includes(author.id)} + onSelect={() => { + if (selectedAuthors.includes(author.id)) { + setSelectedAuthors( + selectedAuthors.filter(id => id !== author.id) + ) + } else { + setSelectedAuthors([...selectedAuthors, author.id]) + } + }} + /> + ))} + {filteredAuthors.length === 0 && ( +
+ No authors found +
+ )} + + +
+ ) +} + +export { FilterAuthor } diff --git a/apps/website/src/components/table-issues/index.tsx b/apps/website/src/components/table-issues/index.tsx new file mode 100644 index 00000000..2a1b462d --- /dev/null +++ b/apps/website/src/components/table-issues/index.tsx @@ -0,0 +1 @@ +export { TableIssues } from './table-issues' diff --git a/apps/website/src/components/table-issues.tsx b/apps/website/src/components/table-issues/table-issues.tsx similarity index 71% rename from apps/website/src/components/table-issues.tsx rename to apps/website/src/components/table-issues/table-issues.tsx index 649a1b3a..e047a920 100644 --- a/apps/website/src/components/table-issues.tsx +++ b/apps/website/src/components/table-issues/table-issues.tsx @@ -1,10 +1,11 @@ import { useState } from 'react' -import { Avatar, Button, Input, Tag, Text } from '@status-im/components' -import { DropdownMenu } from '@status-im/components/src/dropdown-menu' -import { DropdownIcon, OpenIcon, SearchIcon } from '@status-im/icons' +import { Avatar, Button, Tag, Text } from '@status-im/components' +import { OpenIcon } from '@status-im/icons' import Link from 'next/link' +import { FilterAuthor } from './filters/filter-author' + const issues = [ { id: 5154, @@ -92,11 +93,6 @@ const authors = [ export const TableIssues = () => { const [activeTab, setActiveTab] = useState<'open' | 'closed'>('open') - const [authorFilterText, setAuthorFilterText] = useState('') - const filteredAuthors = authors.filter(author => - author.name.toLowerCase().includes(authorFilterText.toLowerCase()) - ) - return (
@@ -123,48 +119,7 @@ export const TableIssues = () => {
-
- - - -
- } - size={32} - value={authorFilterText} - onChangeText={setAuthorFilterText} - /> -
- {filteredAuthors.map(author => ( - - } - label={author.name} - onSelect={() => alert('Author: ' + author.name)} - /> - ))} - {filteredAuthors.length === 0 && ( -
- No authors found -
- )} - - -
+
+ )} + + + + ) +} + +const Input = forwardRef(_Input) + +export { Input } +export type { Props as InputProps } + const InputFrame = styled( TextInput, { @@ -46,6 +157,8 @@ const InputFrame = styled( } ) +const InputBase = focusableInputHOC(InputFrame) + const InputContainer = styled(Stack, { name: 'InputContainer', tag: 'div', @@ -54,11 +167,12 @@ const InputContainer = styled(Stack, { gap: 8, borderWidth: 1, - borderColor: '$neutral-20', + borderColor: '$neutral-30', paddingHorizontal: 12, - animation: 'fast', + animation: 'medium', + width: '100%', hoverStyle: { borderColor: '$neutral-40', @@ -85,6 +199,15 @@ const InputContainer = styled(Stack, { borderRadius: '$10', }, }, + minimized: { + true: { + width: 32, + paddingHorizontal: 0, + paddingLeft: 5, + + cursor: 'pointer', + }, + }, error: { true: { borderColor: '$danger-50-opa-40', @@ -99,76 +222,3 @@ const InputContainer = styled(Stack, { }, } as const, }) - -type Props = GetProps & { - button?: { - label: string - onPress: () => void - } - endLabel?: string - icon?: React.ReactElement - label?: string - onClear?: () => void - size?: 40 | 32 - error?: boolean -} - -const InputBase = focusableInputHOC(InputFrame) - -const _Input = (props: Props, ref: Ref) => { - const { - button, - color = '$neutral-50', - endLabel, - error, - icon, - label, - onClear, - size = 40, - value, - ...rest - } = props - return ( - - {Boolean(label || endLabel) && ( - - {label && ( - - {label} - - )} - {endLabel && ( - - {endLabel} - - )} - - )} - - {icon ? cloneElement(icon, { color }) : null} - - - {Boolean(onClear) && !!value && ( - - } - onPress={onClear} - /> - - )} - {button && ( - - )} - - - - ) -} - -const Input = forwardRef(_Input) - -export { Input } -export type { Props as InputProps } From e40ed199d8748281a44316c31f82b7d068e982a9 Mon Sep 17 00:00:00 2001 From: marcelines Date: Tue, 6 Jun 2023 15:21:56 +0100 Subject: [PATCH 04/14] feat: change story input --- packages/components/src/input/input.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/input/input.stories.tsx b/packages/components/src/input/input.stories.tsx index e48fce40..acf323c6 100644 --- a/packages/components/src/input/input.stories.tsx +++ b/packages/components/src/input/input.stories.tsx @@ -69,6 +69,7 @@ const InputSearchMinimzed = () => { icon={} onClear={() => setValue('')} size={32} + direction="rtl" minimized={isMinimized} ref={inputRef} /> From c6488be581bcd6f93a1ef71e9ad16ebc7fa981a7 Mon Sep 17 00:00:00 2001 From: marcelines Date: Tue, 6 Jun 2023 17:49:23 +0100 Subject: [PATCH 05/14] feat: add filters with checkboxes --- .../filters/components/color-circle.tsx | 44 +++++++ .../table-issues/filters/filter-author.tsx | 79 ----------- .../filters/filter-with-checkboxes.tsx | 105 +++++++++++++++ .../components/table-issues/filters/index.ts | 2 + .../components/table-issues/filters/tabs.tsx | 41 ++++++ .../components/table-issues/table-issues.tsx | 124 ++++++++++-------- .../src/pages/insights/epics/[epic].tsx | 7 +- .../src/dropdown-menu/dropdown-menu.tsx | 2 +- packages/components/src/tag/tag.stories.tsx | 2 +- 9 files changed, 265 insertions(+), 141 deletions(-) create mode 100644 apps/website/src/components/table-issues/filters/components/color-circle.tsx delete mode 100644 apps/website/src/components/table-issues/filters/filter-author.tsx create mode 100644 apps/website/src/components/table-issues/filters/filter-with-checkboxes.tsx create mode 100644 apps/website/src/components/table-issues/filters/index.ts create mode 100644 apps/website/src/components/table-issues/filters/tabs.tsx diff --git a/apps/website/src/components/table-issues/filters/components/color-circle.tsx b/apps/website/src/components/table-issues/filters/components/color-circle.tsx new file mode 100644 index 00000000..d0cabe46 --- /dev/null +++ b/apps/website/src/components/table-issues/filters/components/color-circle.tsx @@ -0,0 +1,44 @@ +import { tokens } from '@status-im/components/src/tokens' + +import type { ColorTokens } from '@tamagui/core' + +// TypeGuard for ColorTokens +function isColorTokens( + value: `#${string}` | ColorTokens +): value is ColorTokens { + return typeof value === 'string' && value.startsWith('$') +} + +const ColorCircle = ({ + color: colorFromProps, +}: { + color?: ColorTokens | `#${string}` +}) => { + if (!colorFromProps) { + return null + } + + let color: ColorTokens | string = colorFromProps + + if (isColorTokens(colorFromProps)) { + const colorToken = colorFromProps.replace( + '$', + '' + ) as keyof typeof tokens.color + color = tokens.color[colorToken]?.val || colorFromProps + } + + return ( +
+ ) +} + +export { ColorCircle } diff --git a/apps/website/src/components/table-issues/filters/filter-author.tsx b/apps/website/src/components/table-issues/filters/filter-author.tsx deleted file mode 100644 index c0c3ffc8..00000000 --- a/apps/website/src/components/table-issues/filters/filter-author.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { useState } from 'react' - -import { Avatar, Button, Input, Text } from '@status-im/components' -import { DropdownMenu } from '@status-im/components/src/dropdown-menu' -import { DropdownIcon, SearchIcon } from '@status-im/icons' - -type Props = { - authors: { - id: number - name: string - avatar?: string - }[] -} -const FilterAuthor = (props: Props) => { - const { authors } = props - - const [authorFilterText, setAuthorFilterText] = useState('') - const filteredAuthors = authors.filter(author => - author.name.toLowerCase().includes(authorFilterText.toLowerCase()) - ) - - const [selectedAuthors, setSelectedAuthors] = useState([]) - - return ( -
- - - -
- } - size={32} - value={authorFilterText} - onChangeText={setAuthorFilterText} - /> -
- {filteredAuthors.map(author => ( - - } - label={author.name} - checked={selectedAuthors.includes(author.id)} - onSelect={() => { - if (selectedAuthors.includes(author.id)) { - setSelectedAuthors( - selectedAuthors.filter(id => id !== author.id) - ) - } else { - setSelectedAuthors([...selectedAuthors, author.id]) - } - }} - /> - ))} - {filteredAuthors.length === 0 && ( -
- No authors found -
- )} - - -
- ) -} - -export { FilterAuthor } diff --git a/apps/website/src/components/table-issues/filters/filter-with-checkboxes.tsx b/apps/website/src/components/table-issues/filters/filter-with-checkboxes.tsx new file mode 100644 index 00000000..de74a2ef --- /dev/null +++ b/apps/website/src/components/table-issues/filters/filter-with-checkboxes.tsx @@ -0,0 +1,105 @@ +import { useState } from 'react' + +import { Avatar, Button, Input, Text } from '@status-im/components' +import { DropdownMenu } from '@status-im/components/src/dropdown-menu' +import { DropdownIcon, SearchIcon } from '@status-im/icons' + +import { ColorCircle } from './components/color-circle' + +import type { ColorTokens } from '@tamagui/core' + +type Props = { + data: { + id: number + name: string + avatar?: string + color?: ColorTokens | `#${string}` + }[] + label: string + noResultsText?: string + noPadding?: boolean +} +const FilterWithCheckboxes = (props: Props) => { + const { data, label, noResultsText, noPadding } = props + + const [filterText, setFilterText] = useState('') + + // TODO - this will be improved by having a debounced search and use memoization + const filteredData = data.filter(label => + label.name.toLowerCase().includes(filterText.toLowerCase()) + ) + + const [selectedValues, setSelectedValues] = useState([]) + const [isOpen, setIsOpen] = useState(false) + + return ( +
+ setIsOpen(!isOpen)}> +
+ } + > + {label} + + +
+ } + size={32} + value={filterText} + onChangeText={setFilterText} + /> +
+ {filteredData.map(filtered => { + return ( + + ) : ( + + ) + } + label={filtered.name} + checked={selectedValues.includes(filtered.id)} + onSelect={() => { + if (selectedValues.includes(filtered.id)) { + setSelectedValues( + selectedValues.filter(id => id !== filtered.id) + ) + } else { + setSelectedValues([...selectedValues, filtered.id]) + } + }} + /> + ) + })} + {filteredData.length === 0 && ( +
+ {noResultsText} +
+ )} + + +
+ ) +} + +export { FilterWithCheckboxes } +export type { Props as FilterWithCheckboxesProps } diff --git a/apps/website/src/components/table-issues/filters/index.ts b/apps/website/src/components/table-issues/filters/index.ts new file mode 100644 index 00000000..40cc2f58 --- /dev/null +++ b/apps/website/src/components/table-issues/filters/index.ts @@ -0,0 +1,2 @@ +export { FilterWithCheckboxes } from './filter-with-checkboxes' +export { Tabs } from './tabs' diff --git a/apps/website/src/components/table-issues/filters/tabs.tsx b/apps/website/src/components/table-issues/filters/tabs.tsx new file mode 100644 index 00000000..c90037b7 --- /dev/null +++ b/apps/website/src/components/table-issues/filters/tabs.tsx @@ -0,0 +1,41 @@ +import { useState } from 'react' + +import { DoneIcon, OpenIcon } from '@status-im/icons' + +const Tabs = (): JSX.Element => { + const [activeTab, setActiveTab] = useState<'open' | 'closed'>('open') + + const isOpen = activeTab === 'open' + + return ( +
+
+ +
+
+ +
+
+ ) +} + +export { Tabs } diff --git a/apps/website/src/components/table-issues/table-issues.tsx b/apps/website/src/components/table-issues/table-issues.tsx index 5266442c..737b04ae 100644 --- a/apps/website/src/components/table-issues/table-issues.tsx +++ b/apps/website/src/components/table-issues/table-issues.tsx @@ -1,11 +1,12 @@ import { useRef, useState } from 'react' import { Avatar, Button, Input, Tag, Text } from '@status-im/components' -import { OpenIcon, SearchIcon } from '@status-im/icons' +import { SearchIcon } from '@status-im/icons' import Link from 'next/link' -import { FilterAuthor } from './filters/filter-author' +import { FilterWithCheckboxes, Tabs } from './filters' +import type { FilterWithCheckboxesProps } from './filters/filter-with-checkboxes' import type { TextInput } from 'react-native' const issues = [ @@ -51,25 +52,7 @@ const issues = [ }, ] -const authors = [ - { - id: 1, - name: 'Tobias', - avatar: - 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', - }, - { - id: 2, - name: 'Arnold', - avatar: - 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', - }, - { - id: 3, - name: 'Alisher', - avatar: - 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', - }, +const authors: FilterWithCheckboxesProps['data'] = [ { id: 4, name: 'marcelines', @@ -92,9 +75,53 @@ const authors = [ }, ] -export const TableIssues = () => { - const [activeTab, setActiveTab] = useState<'open' | 'closed'>('open') +const epics: FilterWithCheckboxesProps['data'] = [ + { + id: 4, + name: 'E:ActivityCenter', + color: '$orange-60', + }, + { + id: 5, + name: 'E:Keycard', + color: '$purple-60', + }, + { + id: 6, + name: 'E:Wallet', + color: '$pink-60', + }, + { + id: 7, + name: 'E:Chat', + color: '$beige-60', + }, +] +const labels: FilterWithCheckboxesProps['data'] = [ + { + id: 4, + name: 'Mobile', + color: '$blue-60', + }, + { + id: 5, + name: 'Frontend', + color: '$brown-50', + }, + { + id: 6, + name: 'Backend', + color: '$red-60', + }, + { + id: 7, + name: 'Desktop', + color: '$green-60', + }, +] + +export const TableIssues = () => { const [issuesSearchText, setIssuesSearchText] = useState('') const inputRef = useRef(null) const [isMinimized, setIsMinimized] = useState(true) @@ -102,30 +129,10 @@ export const TableIssues = () => { return (
-
-
- -
-
- -
-
+
-
+
} @@ -138,17 +145,22 @@ export const TableIssues = () => { ref={inputRef} />
- -
- -
-
- -
+ + +
diff --git a/apps/website/src/pages/insights/epics/[epic].tsx b/apps/website/src/pages/insights/epics/[epic].tsx index 09a66fd0..80eaf823 100644 --- a/apps/website/src/pages/insights/epics/[epic].tsx +++ b/apps/website/src/pages/insights/epics/[epic].tsx @@ -9,15 +9,14 @@ const EpicsDetailPage: Page = () => {
-
+
- -
- +
+
diff --git a/packages/components/src/dropdown-menu/dropdown-menu.tsx b/packages/components/src/dropdown-menu/dropdown-menu.tsx index 1fc4990f..32c4f454 100644 --- a/packages/components/src/dropdown-menu/dropdown-menu.tsx +++ b/packages/components/src/dropdown-menu/dropdown-menu.tsx @@ -79,7 +79,7 @@ const DropdownMenuCheckboxItem = forwardRef< return ( - {cloneElement(icon, { color: '$neutral-50' })} + {cloneElement(icon)} {label} diff --git a/packages/components/src/tag/tag.stories.tsx b/packages/components/src/tag/tag.stories.tsx index 1bd16fcd..6ddc331a 100644 --- a/packages/components/src/tag/tag.stories.tsx +++ b/packages/components/src/tag/tag.stories.tsx @@ -42,7 +42,7 @@ export const Default: Story = { - + Date: Tue, 6 Jun 2023 18:08:06 +0100 Subject: [PATCH 06/14] feat: add empty state to filters --- apps/website/public/assets/filters/empty.png | Bin 0 -> 24125 bytes .../filters/filter-with-checkboxes.tsx | 23 +++++++++++++++--- .../components/table-issues/table-issues.tsx | 19 +++------------ 3 files changed, 22 insertions(+), 20 deletions(-) create mode 100644 apps/website/public/assets/filters/empty.png diff --git a/apps/website/public/assets/filters/empty.png b/apps/website/public/assets/filters/empty.png new file mode 100644 index 0000000000000000000000000000000000000000..1f7de5aa3b8eca4f7d157207dab5cdc89f85cb61 GIT binary patch literal 24125 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 X=`!PTz%Gpd00000NkvXXu0mjf0E8PP literal 0 HcmV?d00001 diff --git a/apps/website/src/components/table-issues/filters/filter-with-checkboxes.tsx b/apps/website/src/components/table-issues/filters/filter-with-checkboxes.tsx index de74a2ef..5c4806f6 100644 --- a/apps/website/src/components/table-issues/filters/filter-with-checkboxes.tsx +++ b/apps/website/src/components/table-issues/filters/filter-with-checkboxes.tsx @@ -16,11 +16,10 @@ type Props = { color?: ColorTokens | `#${string}` }[] label: string - noResultsText?: string noPadding?: boolean } const FilterWithCheckboxes = (props: Props) => { - const { data, label, noResultsText, noPadding } = props + const { data, label, noPadding } = props const [filterText, setFilterText] = useState('') @@ -91,8 +90,24 @@ const FilterWithCheckboxes = (props: Props) => { ) })} {filteredData.length === 0 && ( -
- {noResultsText} +
+ No results +
+ + No options found + +
+
+ + We didn't find results that match your search + +
)} diff --git a/apps/website/src/components/table-issues/table-issues.tsx b/apps/website/src/components/table-issues/table-issues.tsx index 737b04ae..c616d713 100644 --- a/apps/website/src/components/table-issues/table-issues.tsx +++ b/apps/website/src/components/table-issues/table-issues.tsx @@ -145,22 +145,9 @@ export const TableIssues = () => { ref={inputRef} />
- - - + + +
From ddcddbac351c634b22f6d2e9289f54d4ea547ace Mon Sep 17 00:00:00 2001 From: marcelines Date: Wed, 7 Jun 2023 13:54:54 +0100 Subject: [PATCH 07/14] feat: add remaining filters and some polishment with breakpoint table issues component --- .../src/components/side-bar/side-bar.tsx | 2 +- .../filters/components/color-circle.tsx | 12 +- .../filters/filter-with-checkboxes.tsx | 52 +++--- .../components/table-issues/filters/index.ts | 1 + .../components/table-issues/filters/sort.tsx | 73 +++++++++ .../components/table-issues/filters/tabs.tsx | 6 +- .../components/table-issues/table-issues.tsx | 149 +++++++++++++++--- .../src/hooks/use-current-breakpoint.ts | 43 +++++ .../src/dropdown-menu/dropdown-menu.tsx | 22 ++- .../src/icon-button/icon-button.tsx | 4 +- packages/components/src/input/input.tsx | 2 +- 11 files changed, 306 insertions(+), 60 deletions(-) create mode 100644 apps/website/src/components/table-issues/filters/sort.tsx create mode 100644 apps/website/src/hooks/use-current-breakpoint.ts diff --git a/apps/website/src/components/side-bar/side-bar.tsx b/apps/website/src/components/side-bar/side-bar.tsx index 754f2101..0cdad8f8 100644 --- a/apps/website/src/components/side-bar/side-bar.tsx +++ b/apps/website/src/components/side-bar/side-bar.tsx @@ -37,7 +37,7 @@ const SideBar = (props: Props) => { return (
-