Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: upgrade storybook and vite #651

Merged
merged 6 commits into from
Oct 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,22 @@
import { type StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
export default {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],

addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
],

core: {
builder: '@storybook/builder-vite',
},

framework: '@storybook/react-vite',
}

export default config
// TODO: Enable if we need autodocs. Causes a CJS warning in vite
// typescript: {
// reactDocgen: 'react-docgen-typescript',
// },
} as StorybookConfig
2 changes: 1 addition & 1 deletion .storybook/manager.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { addons } from '@storybook/addons'
import { addons } from '@storybook/manager-api'

import theme from './theme'

Expand Down
44 changes: 36 additions & 8 deletions .storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -1,45 +1,73 @@
import * as jest from 'jest-mock'

import { type Preview } from '@storybook/react'
import { fn } from '@storybook/test'
import { themes } from '@storybook/theming'

import { DEFAULT_COLOR_MODE } from '../src/theme'
import themeDecorator from '../src/ThemeDecorator'
import { COLOR_MODES, DEFAULT_COLOR_MODE } from '../src/theme'

// @ts-expect-error
window.jest = jest
// Copied from https://github.com/storybookjs/storybook/blob/v8.2.5/code/core/src/theming/utils.ts
const { window: globalWindow } = global

export const getPreferredColorScheme = () => {
if (!globalWindow || !globalWindow.matchMedia) return 'light'

const isDarkThemePreferred = globalWindow.matchMedia(
'(prefers-color-scheme: dark)'
).matches

if (isDarkThemePreferred) return 'dark'

return 'light'
}

const preview: Preview = {
parameters: {
layout: 'fullscreen',
actions: { argTypesRegex: '^on[A-Z].*' },
actions: { onClick: fn },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
docs: {
theme: themes.dark,
},
options: {
storySort: {
order: ['Semantic System', '*'],
},
},
},

globalTypes: {
theme: {
name: 'Toggle theme',
description: 'Global theme for components',
defaultValue: DEFAULT_COLOR_MODE,
toolbar: {
// The label to show for this toolbar item
title: 'Theme',
icon: 'circlehollow',
// Array of plain string values or MenuItem shape (see below)
items: COLOR_MODES,
items: [
{ value: 'light', icon: 'circlehollow', title: 'Light' },
{ value: 'dark', icon: 'circle', title: 'Dark' },
],
// Change title based on selected value
dynamicTitle: true,
showName: true,
},
},
},

initialGlobals: {
theme: DEFAULT_COLOR_MODE,
},

decorators: [themeDecorator],

// TODO: Enable if we need autodocs
// tags: ['autodocs'],
}

export default preview
8 changes: 4 additions & 4 deletions .storybook/theme.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { create } from '@storybook/theming/create'
import { create } from '@storybook/theming'

export default create({
base: 'dark',
Expand Down Expand Up @@ -27,9 +27,9 @@ export default create({
textMutedColor: 'grey',

// Toolbar default and active colors
barTextColor: 'white',
barSelectedColor: '#293EFF',
barBg: '#2A2E37',
barTextColor: '#73828C',
barSelectedColor: '#73828C',
barBg: '#1E2229',

// Form colors
inputBg: '#1E2229',
Expand Down
41 changes: 21 additions & 20 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@
"version": "0.1.0",
"description": "Pluralsh Design System",
"main": "dist/index.js",
"type": "module",
"files": [
"dist/**/*",
"src/**/*"
],
"scripts": {
"start": "storybook dev -p 6006 -s public",
"build:storybook": "yarn clean && storybook build -s public && yarn build:fix:storybook",
"start": "storybook dev -p 6006",
"build:storybook": "yarn clean && storybook build && yarn build:fix:storybook",
"build:fix:storybook": "perl -pi -w -e 's/%40/@/g;' storybook-static/index.html",
"storybook:serve-static": "yarn build:storybook && http-server storybook-static",
"build": "npx tsc --declaration",
Expand Down Expand Up @@ -75,17 +76,16 @@
"@emotion/styled": "11.11.0",
"@pluralsh/eslint-config-typescript": "2.5.147",
"@react-types/shared": "3.22.0",
"@storybook/addon-actions": "7.6.5",
"@storybook/addon-docs": "7.6.5",
"@storybook/addon-essentials": "7.6.5",
"@storybook/addon-interactions": "7.6.5",
"@storybook/addon-links": "7.6.5",
"@storybook/addons": "7.6.17",
"@storybook/builder-vite": "7.6.5",
"@storybook/node-logger": "7.6.5",
"@storybook/react": "7.6.5",
"@storybook/react-vite": "7.6.5",
"@storybook/testing-library": "0.2.2",
"@storybook/addon-actions": "8.3.5",
"@storybook/addon-docs": "8.3.5",
"@storybook/addon-essentials": "8.3.5",
"@storybook/addon-interactions": "8.3.5",
"@storybook/addon-links": "8.3.5",
"@storybook/builder-vite": "8.3.5",
"@storybook/node-logger": "8.3.5",
"@storybook/react": "8.3.5",
"@storybook/react-vite": "8.3.5",
"@storybook/theming": "8.3.5",
"@testing-library/jest-dom": "5.17.0",
"@types/chroma-js": "2.4.3",
"@types/lodash-es": "4.17.12",
Expand All @@ -94,6 +94,7 @@
"@types/react-transition-group": "4.4.10",
"@typescript-eslint/eslint-plugin": "6.14.0",
"@typescript-eslint/parser": "6.14.0",
"@vitejs/plugin-react": "4.3.2",
"@vitest/coverage-v8": "1.0.4",
"@vitest/ui": "1.0.4",
"babel-loader": "9.1.3",
Expand All @@ -103,7 +104,7 @@
"eslint-plugin-import": "2.29.1",
"eslint-plugin-import-newlines": "1.3.4",
"eslint-plugin-jsx-a11y": "6.8.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-prettier": "5.1.3",
"eslint-plugin-react": "7.33.2",
"eslint-plugin-react-hooks": "4.6.0",
"eslint-plugin-storybook": "0.6.15",
Expand All @@ -118,15 +119,15 @@
"lint-staged": "15.2.0",
"npm-run-all": "4.1.5",
"prettier": "3.0.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-transition-group": "4.4.5",
"rimraf": "5.0.5",
"storybook": "7.6.5",
"storybook": "8.3.5",
"styled-components": "6.1.13",
"typescript": "5.6.2",
"vite": "5.0.10",
"vitest": "1.0.4"
"vite": "5.4.8",
"vitest": "2.1.2"
},
"peerDependencies": {
"@emotion/react": ">=11.11.0",
Expand All @@ -136,7 +137,7 @@
"react": ">=18.3.1",
"react-dom": ">=18.3.1",
"react-transition-group": ">=4.4.5",
"styled-components": ">=5.3.11"
"styled-components": ">=6.1.13"
},
"packageManager": "[email protected]",
"resolutions": {
Expand Down
58 changes: 27 additions & 31 deletions src/components/TagMultiSelect.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { type ComponentProps, type Key, useMemo, useState } from 'react'

import styled, { useTheme } from 'styled-components'

import {
Expand All @@ -12,14 +11,8 @@ import {
SelectButton,
type SelectPropsSingle,
} from '..'

import { isNonNullable } from '../utils/isNonNullable'

export type MultiSelectTag = {
name: string
value: string
}

const matchOptions = [
{ label: 'All', value: 'AND' },
{ label: 'Any', value: 'OR' },
Expand All @@ -28,11 +21,11 @@ const matchOptions = [
type TagMultiSelectProps = {
options: string[]
loading: boolean
selectedTagKeys: Set<Key>
setSelectedTagKeys: (keys: Set<Key>) => void
inputValue: string
setInputValue: (value: string) => void
innerChips?: boolean
selectedTagKeys?: Set<Key>
setSelectedTagKeys?: (keys: Set<Key>) => void
inputValue?: string
setInputValue?: (value: string) => void
selectedMatchType?: 'AND' | 'OR'
onSelectedTagsChange?: (keys: Set<Key>) => void
onFilterChange?: (value: string) => void
Expand All @@ -41,7 +34,21 @@ type TagMultiSelectProps = {
selectProps?: Omit<SelectPropsSingle, 'children'>
}

function TagMultiSelect({
const MultiSelectMatchButtonContainer = styled.div`
> div {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none;
}
`

const TagMultiSelect = styled(TagMultiSelectUnstyled)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing.xsmall,
}))

function TagMultiSelectUnstyled({
options,
loading,
innerChips = true,
Expand All @@ -56,7 +63,10 @@ function TagMultiSelect({
...props
}: TagMultiSelectProps & ComponentProps<'div'>) {
const theme = useTheme()
const selectedTagArr = useMemo(() => [...selectedTagKeys], [selectedTagKeys])
const selectedTagArr = useMemo(
() => [...(selectedTagKeys ?? [])],
[selectedTagKeys]
)
const [isOpen, setIsOpen] = useState(false)
const [searchLogic, setSearchLogic] = useState<string>(
selectedMatchType || matchOptions[0].value
Expand All @@ -72,7 +82,7 @@ function TagMultiSelect({
}

return (
<TagMultiSelectWrapperSC {...props}>
<div {...props}>
<Flex>
<Select
label="Pick search logic"
Expand Down Expand Up @@ -114,7 +124,7 @@ function TagMultiSelect({
: undefined
}
onDeleteChip={(chipKey) => {
const newKeys = new Set(selectedTagKeys)
const newKeys = new Set(selectedTagKeys ?? [])

newKeys.delete(chipKey)
setSelectedTagKeys(newKeys)
Expand All @@ -141,7 +151,7 @@ function TagMultiSelect({
>
{options
.map((tagStr) => {
if (selectedTagKeys.has(tagStr)) {
if (selectedTagKeys?.has(tagStr) ?? false) {
return null
}

Expand Down Expand Up @@ -179,23 +189,9 @@ function TagMultiSelect({
}}
/>
)}
</TagMultiSelectWrapperSC>
</div>
)
}

export { TagMultiSelect }
export type { TagMultiSelectProps }

const TagMultiSelectWrapperSC = styled.div(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing.xsmall,
}))

const MultiSelectMatchButtonContainer = styled.div`
> div {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none;
}
`
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { forwardRef, useEffect, useMemo, useState } from 'react'
import { Switch } from 'honorable'

import { useTheme } from 'styled-components'

import Card, { type CardProps } from '../Card'

import {
Expand Down Expand Up @@ -39,6 +41,7 @@ const PricingCalculatorExtended = forwardRef<
},
ref
) => {
const theme = useTheme()
const [providerId, setProviderId] = useState(PROVIDERS[0].id)
const [clusters, setClusters] = useState(clustersDefault)
const [apps, setApps] = useState(appsDefault)
Expand Down Expand Up @@ -73,9 +76,11 @@ const PricingCalculatorExtended = forwardRef<

return (
<Card
padding="xlarge"
{...props}
css={{
padding: theme.spacing.xlarge,
}}
ref={ref}
{...props}
>
<PricingCalculatorContainerQuery>
<PricingCalculatorWrap>
Expand Down
Loading
Loading