BREAKING: Remove unused components, menu design tokens, internal refa…

…ctoring (#754)

* BREAKING: Remove usePrevious hook
* Remove DeprecatedNotification
* Move components to reside directly under src/
* Move utility modules into src/utils/
* Move design token definitions to CSS file under src/styles/
* Remove menu component dependency on legacy design tokens
* Prepare new v20.0.0 release

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# v20.0.0
+
+-   [BREAKING] Remove `usePrevious` hook
+-   [BREAKING] Remove `DeprecatedNotification` component
+-   [BREAKING] The `Menu` component now uses Reactist CSS variables to style itself
+
 # v19.1.1
 
 -   [Fix] Export new `Banner` component.

docs/iframe.html

@@ -476,4 +476,4 @@
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(tsx|mdx))$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];</script><script src="runtime~main.8b1ed5da.iframe.bundle.js"></script><script src="vendors~main.f0057794.iframe.bundle.js"></script><script src="main.84649a4e.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(tsx|mdx))$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];</script><script src="runtime~main.8b1ed5da.iframe.bundle.js"></script><script src="vendors~main.02391c1e.iframe.bundle.js"></script><script src="main.fb90f99a.iframe.bundle.js"></script></body></html>

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1675087190417,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.15.0"},"typescriptOptions":{"check":true,"checkOptions":{},"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true}},"features":{"interactionsDebugger":true},"storybookVersion":"^6.5.3","language":"typescript","storybookPackages":{"@storybook/addon-knobs":{"version":"6.3.1"},"@storybook/addon-links":{"version":"6.5.3"},"@storybook/addons":{"version":"6.5.3"},"@storybook/jest":{"version":"0.0.10"},"@storybook/react":{"version":"6.5.3"},"@storybook/testing-library":{"version":"0.0.13"}},"framework":{"name":"react"},"addons":{"@storybook/addon-postcss":{"version":"2.0.0"},"@storybook/addon-actions":{"version":"6.5.3"},"@storybook/addon-docs":{"options":{"configureJSX":true},"version":"6.5.3"},"@storybook/addon-controls":{"version":"6.5.3"},"@geometricpanda/storybook-addon-badges":{"version":"0.2.2"},"@storybook/addon-interactions":{"version":"6.5.15"}}}
+{"generatedAt":1676045322579,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.19.2"},"typescriptOptions":{"check":true,"checkOptions":{},"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true}},"features":{"interactionsDebugger":true},"storybookVersion":"^6.5.3","language":"typescript","storybookPackages":{"@storybook/addon-knobs":{"version":"6.3.1"},"@storybook/addon-links":{"version":"6.5.3"},"@storybook/addons":{"version":"6.5.3"},"@storybook/jest":{"version":"0.0.10"},"@storybook/react":{"version":"6.5.3"},"@storybook/testing-library":{"version":"0.0.13"}},"framework":{"name":"react"},"addons":{"@storybook/addon-postcss":{"version":"2.0.0"},"@storybook/addon-actions":{"version":"6.5.3"},"@storybook/addon-docs":{"options":{"configureJSX":true},"version":"6.5.3"},"@storybook/addon-controls":{"version":"6.5.3"},"@geometricpanda/storybook-addon-badges":{"version":"0.2.2"},"@storybook/addon-interactions":{"version":"6.5.15"}}}

package.json

@@ -6,7 +6,7 @@
         "email": "[email protected]",
         "url": "http://doist.com"
     },
-    "version": "19.1.1",
+    "version": "20.0.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

plopfile.mjs

@@ -39,38 +39,38 @@ function componentGenerator(plop) {
             const actions = [
                 {
                     type: 'add',
-                    path: 'src/new-components/{{dashCase name}}/index.ts',
+                    path: 'src/{{dashCase name}}/index.ts',
                     templateFile: templateFile('component/index.ts'),
                 },
                 {
                     type: 'add',
-                    path: 'src/new-components/{{dashCase name}}/{{dashCase name}}.tsx',
+                    path: 'src/{{dashCase name}}/{{dashCase name}}.tsx',
                     templateFile: templateFile('component/component.tsx'),
                 },
                 {
                     type: 'add',
-                    path: 'src/new-components/{{dashCase name}}/{{dashCase name}}.module.css',
+                    path: 'src/{{dashCase name}}/{{dashCase name}}.module.css',
                     templateFile: templateFile('component/component.module.css'),
                 },
                 {
                     type: 'add',
-                    path: 'src/new-components/{{dashCase name}}/{{dashCase name}}.test.tsx',
+                    path: 'src/{{dashCase name}}/{{dashCase name}}.test.tsx',
                     templateFile: templateFile('component/component.test.tsx'),
                 },
             ]
 
             if (storyType === '.mdx' || storyType === 'both') {
                 actions.push({
                     type: 'add',
-                    path: 'src/new-components/{{dashCase name}}/{{dashCase name}}.stories.mdx',
+                    path: 'src/{{dashCase name}}/{{dashCase name}}.stories.mdx',
                     templateFile: templateFile('component/component.stories.mdx'),
                 })
             }
 
             if (storyType === '.tsx' || storyType === 'both') {
                 actions.push({
                     type: 'add',
-                    path: 'src/new-components/{{dashCase name}}/{{dashCase name}}.stories.tsx',
+                    path: 'src/{{dashCase name}}/{{dashCase name}}.stories.tsx',
                     templateFile: templateFile('component/component.stories.tsx'),
                 })
             }

src/new-components/alert/alert.tsx → src/alert/alert.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { getClassNames } from '../responsive-props'
+import { getClassNames } from '../utils/responsive-props'
 import { Box } from '../box'
 import { Button } from '../button'
 import { Columns, Column } from '../columns'
@@ -9,7 +9,7 @@ import { CloseIcon } from '../icons/close-icon'
 
 import styles from './alert.module.css'
 
-import type { AlertTone } from '../common-types'
+import type { AlertTone } from '../utils/common-types'
 
 type AllOrNone<T> = T | { [K in keyof T]?: never }
 

src/new-components/avatar/avatar.tsx → src/avatar/avatar.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import { getInitials, emailToIndex } from './utils'
 
-import { getClassNames, ResponsiveProp } from '../responsive-props'
+import { getClassNames, ResponsiveProp } from '../utils/responsive-props'
 import styles from './avatar.module.css'
 import { Box } from '../box'
 

src/new-components/banner/banner.tsx → src/banner/banner.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Box } from '../box'
 import { Columns, Column } from '../columns'
-import { useId } from '../common-helpers'
+import { useId } from '../utils/common-helpers'
 
 import styles from './banner.module.css'
 

src/new-components/base-button/base-button.tsx → src/base-button/base-button.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Tooltip, TooltipProps } from '../tooltip'
-import { polymorphicComponent } from '../../utils/polymorphism'
+import { polymorphicComponent } from '../utils/polymorphism'
 import { Box } from '../box'
 import { Spinner } from '../spinner'
 import styles from './base-button.module.css'

src/new-components/base-field/base-field.tsx → src/base-field/base-field.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react'
 import { Box, BoxProps } from '../box'
-import { useId } from '../common-helpers'
+import { useId } from '../utils/common-helpers'
 import { Text } from '../text'
 import styles from './base-field.module.css'
 import { Stack } from '../stack'
 
-import type { WithEnhancedClassName } from '../common-types'
+import type { WithEnhancedClassName } from '../utils/common-types'
 import { Spinner } from '../spinner'
 
 type FieldHintProps = {

src/new-components/box/box.stories.tsx → src/box/box.stories.tsx

@@ -9,7 +9,7 @@ import {
     Wrapper,
     PartialProps,
     selectSize,
-} from '../storybook-helper'
+} from '../utils/storybook-helper'
 
 import { Box, BoxBorderRadius } from './box'
 import { Inline } from '../inline'
@@ -28,7 +28,7 @@ import type {
     BoxTextAlign,
     BoxBackground,
 } from './'
-import type { Space, SpaceWithNegatives } from '../common-types'
+import type { Space, SpaceWithNegatives } from '../utils/common-types'
 
 export default {
     title: 'Design system/Box',

src/new-components/box/box.tsx → src/box/box.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react'
 import classNames from 'classnames'
-import { polymorphicComponent } from '../../utils/polymorphism'
-import { getClassNames } from '../responsive-props'
+import { polymorphicComponent } from '../utils/polymorphism'
+import { getClassNames } from '../utils/responsive-props'
 
-import type { ResponsiveProp } from '../responsive-props'
+import type { ResponsiveProp } from '../utils/responsive-props'
 import type {
     DividerWeight,
     Space,
     SpaceWithNegatives,
     WithEnhancedClassName,
-} from '../common-types'
+} from '../utils/common-types'
 
 import styles from './box.module.css'
 import paddingStyles from './padding.module.css'

src/new-components/button-link/button-link.tsx → src/button-link/button-link.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
-import { polymorphicComponent } from '../../utils/polymorphism'
+import { polymorphicComponent } from '../utils/polymorphism'
 import { BaseButton } from '../base-button'
 import type { BaseButtonProps } from '../base-button'
-import type { OpenInNewTab } from '../common-types'
+import type { OpenInNewTab } from '../utils/common-types'
 
 type NativeLinkProps = Omit<
     JSX.IntrinsicElements['a'],

src/new-components/checkbox-field/checkbox-field.stories.mdx → src/checkbox-field/checkbox-field.stories.mdx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { Meta, Story, Canvas, ArgsTable, Description } from '@storybook/addon-docs'
 import { BADGE } from '@geometricpanda/storybook-addon-badges'
 
-import { PartialProps } from '../storybook-helper'
+import { PartialProps } from '../utils/storybook-helper'
 import { CheckboxField } from '.'
 import { Stack } from '../stack'
 import { Text } from '../text'

src/new-components/checkbox-field/checkbox-field.test.tsx → src/checkbox-field/checkbox-field.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react'
 import { CheckboxField } from '.'
 import userEvent from '@testing-library/user-event'
 import { axe } from 'jest-axe'
-import { TestIcon } from '../test-helpers'
+import { TestIcon } from '../utils/test-helpers'
 
 describe('CheckboxField', () => {
     function IndeterminateTestCase({ initialState }: { initialState: boolean[] }) {

src/new-components/columns/columns.stories.tsx → src/columns/columns.stories.tsx

@@ -9,7 +9,7 @@ import {
     selectWithNone,
     PartialProps,
     disableResponsiveProps,
-} from '../storybook-helper'
+} from '../utils/storybook-helper'
 import { Stack } from '../stack'
 import { Box } from '../box'
 import { Columns, Column } from './columns'

src/new-components/columns/columns.test.tsx → src/columns/columns.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render, screen } from '@testing-library/react'
-import { runSpaceTests } from '../test-helpers'
+import { runSpaceTests } from '../utils/test-helpers'
 import { Columns, Column, ColumnWidth } from './'
 import { axe } from 'jest-axe'
 

src/new-components/columns/columns.tsx → src/columns/columns.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
-import { polymorphicComponent } from '../../utils/polymorphism'
-import { getClassNames, mapResponsiveProp } from '../responsive-props'
+import { polymorphicComponent } from '../utils/polymorphism'
+import { getClassNames, mapResponsiveProp } from '../utils/responsive-props'
 import { Box } from '../box'
 
-import type { ResponsiveProp, ResponsiveBreakpoints } from '../responsive-props'
-import type { Space } from '../common-types'
+import type { ResponsiveProp, ResponsiveBreakpoints } from '../utils/responsive-props'
+import type { Space } from '../utils/common-types'
 import type { ReusableBoxProps } from '../box'
 
 import styles from './columns.module.css'

src/components/color-picker/color-picker.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import classnames from 'classnames'
 
 import DeprecatedDropdown from '../deprecated-dropdown'
-import { Tooltip } from '../../new-components/tooltip'
+import { Tooltip } from '../../tooltip'
 
 import './color-picker.less'
 

src/components/deprecated-button/deprecated-button.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import classNames from 'classnames'
 
-import { Tooltip } from '../../new-components/tooltip'
+import { Tooltip } from '../../tooltip'
 
 import './deprecated-button.less'