From fd90c39c05009003546c58c0e468ed298413f4f8 Mon Sep 17 00:00:00 2001 From: MustafaJafar Date: Fri, 20 Sep 2024 20:15:34 +0300 Subject: [PATCH 1/6] add missing step in get started section --- README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 5178e83..41df053 100644 --- a/README.md +++ b/README.md @@ -23,9 +23,7 @@ This is an open source project. We welcome contributions. 🙋 Need some support or want something custom? Take a look at our services. ## Get Started with Storybook - -Run locally: `yarn storybook` - -build: `yarn build-storybook` - -build-package: `yarn build` +After cloning the repo, you'll need to run `yarn install`. Then, you can: +- **Run locally:** `yarn storybook` +- **Build:** `yarn build-storybook` +- **Build package:** `yarn build` From d18e0c03a171fcc2b17464c06d54ae013be70b34 Mon Sep 17 00:00:00 2001 From: Innders <49156310+Innders@users.noreply.github.com> Date: Fri, 27 Sep 2024 16:54:29 +0100 Subject: [PATCH 2/6] fix(dropdown): EnumDropdown --- .../EnumDropdown/EnumDropdown.stories.tsx | 96 +++++++++++++++++++ .../EnumDropdown/EnumDropdown.styled.ts | 68 +++++++++++++ src/Dropdowns/EnumDropdown/EnumDropdown.tsx | 60 ++++++++++++ src/Dropdowns/EnumDropdown/index.tsx | 1 + src/index.tsx | 3 + 5 files changed, 228 insertions(+) create mode 100644 src/Dropdowns/EnumDropdown/EnumDropdown.stories.tsx create mode 100644 src/Dropdowns/EnumDropdown/EnumDropdown.styled.ts create mode 100644 src/Dropdowns/EnumDropdown/EnumDropdown.tsx create mode 100644 src/Dropdowns/EnumDropdown/index.tsx diff --git a/src/Dropdowns/EnumDropdown/EnumDropdown.stories.tsx b/src/Dropdowns/EnumDropdown/EnumDropdown.stories.tsx new file mode 100644 index 0000000..191dad5 --- /dev/null +++ b/src/Dropdowns/EnumDropdown/EnumDropdown.stories.tsx @@ -0,0 +1,96 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { EnumDropdown, EnumDropdownProps } from '.' +import { useState } from 'react' + +const meta: Meta = { + component: EnumDropdown, + tags: ['autodocs'], +} + +export default meta + +type Story = StoryObj + +const Template = ({ value: initValue, ...props }: EnumDropdownProps) => { + const [value, setValue] = useState(initValue) + + console.log(props.onClear) + + return setValue(value)} /> +} + +const priorities: EnumDropdownProps['options'] = [ + { + value: 'low', + label: 'Low', + icon: 'keyboard_double_arrow_down', + color: '#9FA7B1', + }, + { + value: 'normal', + label: 'Normal', + color: '#9AC0E7', + icon: 'check_indeterminate_small', + }, + { + value: 'high', + label: 'High', + color: '#FFAD66', + icon: 'keyboard_arrow_up', + }, + { + value: 'urgent', + label: 'Urgent', + color: '#FF8585', + icon: 'keyboard_double_arrow_up', + }, +] + +const initArgs: Story['args'] = { + onClear: undefined, + onClearNull: undefined, +} + +const priorityValue = 'low' + +export const Priority: Story = { + args: { + ...initArgs, + value: [priorityValue], + options: priorities, + }, + render: Template, +} +export const InverseColors: Story = { + args: { + ...initArgs, + value: [priorityValue], + options: priorities, + colorInverse: true, + }, + render: Template, +} +export const OnlyColors: Story = { + args: { + ...initArgs, + value: [priorityValue], + options: priorities.map(({ color, value, label }) => ({ color, value, label })), + }, + render: Template, +} +export const OnlyIcons: Story = { + args: { + ...initArgs, + value: [priorityValue], + options: priorities.map(({ icon, value, label }) => ({ icon, value, label })), + }, + render: Template, +} +export const OnlyLabels: Story = { + args: { + ...initArgs, + value: [priorityValue], + options: priorities.map(({ value, label }) => ({ value, label })), + }, + render: Template, +} diff --git a/src/Dropdowns/EnumDropdown/EnumDropdown.styled.ts b/src/Dropdowns/EnumDropdown/EnumDropdown.styled.ts new file mode 100644 index 0000000..c916ba5 --- /dev/null +++ b/src/Dropdowns/EnumDropdown/EnumDropdown.styled.ts @@ -0,0 +1,68 @@ +import styled, { css } from 'styled-components' +import { DefaultValueTemplate } from '../Dropdown' + +interface IconStyledProps { + $color?: string +} + +const getSelectedBg = ({ $color }: IconStyledProps) => { + if ($color) + return css` + background: ${$color}; + &:hover { + filter: brightness(1.1); + } + .label, + .icon { + color: var(--md-sys-color-inverse-on-surface); + } + ` + else + return css` + background: var(--md-sys-color-primary-container); + &:hover { + background: var(--md-sys-color-primary-container-hover); + } + .label, + .icon { + color: var(--md-sys-color-on-primary-container); + } + ` +} + +export const StyledDefaultValueTemplate = styled(DefaultValueTemplate)` + padding-left: 0; + + &.inverse { + ${({ $color }) => getSelectedBg({ $color })} + border-color: ${({ $color }) => $color && 'transparent'}; + } +` + +export const Option = styled.div` + display: flex; + align-items: center; + /* justify-content: center; */ + + gap: 8px; + padding-left: 0.5rem; + + height: 32px; + + span:last-child { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + width: 100%; + + .label, + .icon { + color: ${({ $color }) => ($color ? $color : `var(--md-sys-color-on-surface)`)}; + } + + &.selected { + ${({ $color }) => getSelectedBg({ $color })} + } +` diff --git a/src/Dropdowns/EnumDropdown/EnumDropdown.tsx b/src/Dropdowns/EnumDropdown/EnumDropdown.tsx new file mode 100644 index 0000000..ecab170 --- /dev/null +++ b/src/Dropdowns/EnumDropdown/EnumDropdown.tsx @@ -0,0 +1,60 @@ +import { forwardRef, useMemo } from 'react' +import * as Styled from './EnumDropdown.styled' +import { DefaultValueTemplate, Dropdown, DropdownProps, DropdownRef } from '../Dropdown' +import { Icon, IconType } from '../../Icon' +import clsx from 'clsx' + +export interface EnumTemplateProps { + option: EnumDropdownOption | null | undefined + isSelected?: boolean +} + +const EnumTemplate = ({ option, isSelected }: EnumTemplateProps) => { + const { value, label, icon, color } = option || {} + return ( + + {icon && } + {label} + + ) +} + +export type EnumDropdownOption = { + value: string + label: string + icon?: IconType + color?: string +} + +export interface EnumDropdownProps + extends Omit { + options: EnumDropdownOption[] + colorInverse?: boolean +} + +export const EnumDropdown = forwardRef( + ({ colorInverse, ...props }, ref) => { + return ( + { + const option = props.options.find((op) => op.value === v[0]) + return ( + + + + ) + }} + itemTemplate={(option, isSelected) => ( + + )} + {...props} + /> + ) + }, +) diff --git a/src/Dropdowns/EnumDropdown/index.tsx b/src/Dropdowns/EnumDropdown/index.tsx new file mode 100644 index 0000000..6b3602b --- /dev/null +++ b/src/Dropdowns/EnumDropdown/index.tsx @@ -0,0 +1 @@ +export * from './EnumDropdown' diff --git a/src/index.tsx b/src/index.tsx index a979717..0ad11d1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -29,6 +29,9 @@ export type { TagsSelectProps } from './Dropdowns/TagsSelect' // iconSelect export { IconSelect } from './Dropdowns/IconSelect' export type { IconSelectProps } from './Dropdowns/IconSelect' +// enumDropdown +export { EnumDropdown } from './Dropdowns/EnumDropdown' +export type { EnumDropdownProps } from './Dropdowns/EnumDropdown' // versionSelect export { VersionSelect } from './Dropdowns/VersionSelect' export type { VersionSelectProps } from './Dropdowns/VersionSelect' From fe619e70b89dba8172cbac68826cc729d900e5fe Mon Sep 17 00:00:00 2001 From: Innders <49156310+Innders@users.noreply.github.com> Date: Fri, 27 Sep 2024 16:54:47 +0100 Subject: [PATCH 3/6] fix(dropdown): IconSelect fixes --- src/Dropdowns/IconSelect/IconSelect.styled.ts | 4 +--- src/Dropdowns/IconSelect/IconSelect.tsx | 13 ++++++++----- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/Dropdowns/IconSelect/IconSelect.styled.ts b/src/Dropdowns/IconSelect/IconSelect.styled.ts index f146835..4a62033 100644 --- a/src/Dropdowns/IconSelect/IconSelect.styled.ts +++ b/src/Dropdowns/IconSelect/IconSelect.styled.ts @@ -12,9 +12,7 @@ export const Icon = styled.div` gap: 8px; padding-left: 0.5rem; - - height: 30px; - + height: 32px; span:last-child { overflow: hidden; white-space: nowrap; diff --git a/src/Dropdowns/IconSelect/IconSelect.tsx b/src/Dropdowns/IconSelect/IconSelect.tsx index 0fb8b9b..e6c3f13 100644 --- a/src/Dropdowns/IconSelect/IconSelect.tsx +++ b/src/Dropdowns/IconSelect/IconSelect.tsx @@ -1,18 +1,17 @@ import { forwardRef, useMemo } from 'react' import * as Styled from './IconSelect.styled' -import { Dropdown, DropdownProps, DropdownRef } from '../Dropdown' +import { DefaultValueTemplate, Dropdown, DropdownProps, DropdownRef } from '../Dropdown' import { Icon, IconType, iconSet } from '../../Icon' export interface IconTemplateProps { value: IconSelectProps['value'] - valueTemplate?: boolean isActive?: boolean isSelected?: boolean } -const IconTemplate = ({ value, valueTemplate, isActive, isSelected }: IconTemplateProps) => { +const IconTemplate = ({ value, isSelected }: IconTemplateProps) => { return ( - + {value?.map((icon) => ( ))} @@ -57,7 +56,11 @@ export const IconSelect = forwardRef( } + valueTemplate={(v, s, o) => ( + + + + )} options={dropdownOptions} itemTemplate={({ value }, isActive, isSelected) => ( From ba307f26a1a6a3816deb0a3d55f1941dbc871e30 Mon Sep 17 00:00:00 2001 From: Innders <49156310+Innders@users.noreply.github.com> Date: Tue, 1 Oct 2024 13:12:10 +0100 Subject: [PATCH 4/6] chore(EnumDropdown): mixed options story --- .../EnumDropdown/EnumDropdown.stories.tsx | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/Dropdowns/EnumDropdown/EnumDropdown.stories.tsx b/src/Dropdowns/EnumDropdown/EnumDropdown.stories.tsx index 191dad5..01e560b 100644 --- a/src/Dropdowns/EnumDropdown/EnumDropdown.stories.tsx +++ b/src/Dropdowns/EnumDropdown/EnumDropdown.stories.tsx @@ -94,3 +94,33 @@ export const OnlyLabels: Story = { }, render: Template, } +export const MixedIconsAndColors: Story = { + args: { + ...initArgs, + value: [priorityValue], + // some options have icons, some have colors, some have both, some have neither + options: [ + { + value: 'low', + label: 'Low', + icon: 'keyboard_double_arrow_down', + color: '#9FA7B1', + }, + { + value: 'normal', + label: 'Normal', + color: '#9AC0E7', + }, + { + value: 'high', + label: 'High', + icon: 'keyboard_arrow_up', + }, + { + value: 'urgent', + label: 'Urgent', + }, + ], + }, + render: Template, +} From cbdd7690b1d3866c6a4903967984506f6dd38ad2 Mon Sep 17 00:00:00 2001 From: Innders <49156310+Innders@users.noreply.github.com> Date: Wed, 2 Oct 2024 09:27:04 +0100 Subject: [PATCH 5/6] fix(EnumDropdown): use more specific label className --- src/Dropdowns/EnumDropdown/EnumDropdown.stories.tsx | 2 -- src/Dropdowns/EnumDropdown/EnumDropdown.styled.ts | 6 +++--- src/Dropdowns/EnumDropdown/EnumDropdown.tsx | 2 +- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/Dropdowns/EnumDropdown/EnumDropdown.stories.tsx b/src/Dropdowns/EnumDropdown/EnumDropdown.stories.tsx index 01e560b..9d24e17 100644 --- a/src/Dropdowns/EnumDropdown/EnumDropdown.stories.tsx +++ b/src/Dropdowns/EnumDropdown/EnumDropdown.stories.tsx @@ -14,8 +14,6 @@ type Story = StoryObj const Template = ({ value: initValue, ...props }: EnumDropdownProps) => { const [value, setValue] = useState(initValue) - console.log(props.onClear) - return setValue(value)} /> } diff --git a/src/Dropdowns/EnumDropdown/EnumDropdown.styled.ts b/src/Dropdowns/EnumDropdown/EnumDropdown.styled.ts index c916ba5..a7f24e3 100644 --- a/src/Dropdowns/EnumDropdown/EnumDropdown.styled.ts +++ b/src/Dropdowns/EnumDropdown/EnumDropdown.styled.ts @@ -12,7 +12,7 @@ const getSelectedBg = ({ $color }: IconStyledProps) => { &:hover { filter: brightness(1.1); } - .label, + .value-label, .icon { color: var(--md-sys-color-inverse-on-surface); } @@ -23,7 +23,7 @@ const getSelectedBg = ({ $color }: IconStyledProps) => { &:hover { background: var(--md-sys-color-primary-container-hover); } - .label, + .value-label, .icon { color: var(--md-sys-color-on-primary-container); } @@ -57,7 +57,7 @@ export const Option = styled.div` width: 100%; - .label, + .value-label, .icon { color: ${({ $color }) => ($color ? $color : `var(--md-sys-color-on-surface)`)}; } diff --git a/src/Dropdowns/EnumDropdown/EnumDropdown.tsx b/src/Dropdowns/EnumDropdown/EnumDropdown.tsx index ecab170..b08b9b7 100644 --- a/src/Dropdowns/EnumDropdown/EnumDropdown.tsx +++ b/src/Dropdowns/EnumDropdown/EnumDropdown.tsx @@ -14,7 +14,7 @@ const EnumTemplate = ({ option, isSelected }: EnumTemplateProps) => { return ( {icon && } - {label} + {label} ) } From e14743c8e8e510cf26e7e7c6eb06118ed45343e1 Mon Sep 17 00:00:00 2001 From: Innders <49156310+Innders@users.noreply.github.com> Date: Wed, 2 Oct 2024 09:28:43 +0100 Subject: [PATCH 6/6] fix(IconSelect): Icon width expand --- src/Dropdowns/IconSelect/IconSelect.stories.tsx | 1 + src/Dropdowns/IconSelect/IconSelect.tsx | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Dropdowns/IconSelect/IconSelect.stories.tsx b/src/Dropdowns/IconSelect/IconSelect.stories.tsx index f17d541..fa36d08 100644 --- a/src/Dropdowns/IconSelect/IconSelect.stories.tsx +++ b/src/Dropdowns/IconSelect/IconSelect.stories.tsx @@ -18,6 +18,7 @@ const Template = ({ value: initValue, featured, multiSelect, featuredOnly }: Ico setValue(value)} + widthExpand /> ) } diff --git a/src/Dropdowns/IconSelect/IconSelect.tsx b/src/Dropdowns/IconSelect/IconSelect.tsx index e6c3f13..1ae6301 100644 --- a/src/Dropdowns/IconSelect/IconSelect.tsx +++ b/src/Dropdowns/IconSelect/IconSelect.tsx @@ -30,7 +30,10 @@ export interface IconSelectProps } export const IconSelect = forwardRef( - ({ value, onChange, featured = [], multiSelect, featuredOnly, ...props }, ref) => { + ( + { value, onChange, featured = [], multiSelect, featuredOnly, widthExpand = false, ...props }, + ref, + ) => { const dropdownOptions = useMemo(() => { const dropdownOptions = [] @@ -73,7 +76,7 @@ export const IconSelect = forwardRef( {...props} maxOptionsShown={Math.max(props.maxOptionsShown || 25, featured.length)} minSelected={1} - widthExpand={false} + widthExpand={widthExpand} /> ) },