From cc6ca3e2a935f5c423609f28b2ad02ce9c3b66cc Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Wed, 20 Jul 2022 19:15:38 -0400 Subject: [PATCH 001/100] chore: install and configure TypeScript This commit: - Adds .editorconfig file - Installs TypeScript and necessary dependencies - Configures TypeScript tsconfig.json - Configures Rollup to use esbuild and export .d.ts - Converts entry files to TypeScript - Configures Storybook to generate docs based on types - Configures TypeScript on ESLint - Configures Jest and ts-jest for TypeScript - Fixes no-use-before-define problems on stories - Ignores @typescript-eslint/no-unused-vars on mapFromWindowsTheme - Fixes test failure on CSS check --- .editorconfig | 9 + .eslintrc.js | 46 ++- .storybook/main.js | 13 +- jest.config.js | 11 +- package.json | 23 +- rollup.config.js | 79 +++-- src/AppBar/AppBar.stories.js | 9 +- src/Bar/Bar.stories.js | 9 +- src/Desktop/Desktop.stories.js | 9 +- src/Divider/Divider.stories.js | 9 +- src/Fieldset/Fieldset.stories.js | 9 +- src/Hourglass/Hourglass.stories.js | 9 +- src/Progress/Progress.spec.js | 2 +- src/Table/Table.stories.js | 9 +- src/Tabs/Tabs.stories.js | 10 +- src/Tooltip/Tooltip.stories.js | 9 +- src/Window/Window.stories.js | 14 +- src/common/themes/{index.js => index.ts} | 0 src/common/utils/index.js | 4 +- src/{index.js => index.ts} | 0 src/types.tsx | 82 +++++ test/setup-test.js | 2 - test/setup-test.ts | 2 + test/{utils.js => utils.tsx} | 8 +- tsconfig.json | 51 +++ types/global.d.ts | 9 + types/themes.d.ts | 8 + yarn.lock | 424 +++++++++++++++++++++-- 28 files changed, 748 insertions(+), 121 deletions(-) create mode 100644 .editorconfig rename src/common/themes/{index.js => index.ts} (100%) rename src/{index.js => index.ts} (100%) create mode 100644 src/types.tsx delete mode 100644 test/setup-test.js create mode 100644 test/setup-test.ts rename test/{utils.js => utils.tsx} (84%) create mode 100644 tsconfig.json create mode 100644 types/global.d.ts create mode 100644 types/themes.d.ts diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..20908cd1 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = yes +insert_final_newline = yes diff --git a/.eslintrc.js b/.eslintrc.js index ebc3adc9..5e4f683b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,6 +1,10 @@ module.exports = { - extends: ['airbnb', 'plugin:prettier/recommended'], - parser: '@babel/eslint-parser', + extends: [ + 'plugin:@typescript-eslint/recommended', + 'airbnb', + 'plugin:prettier/recommended' + ], + parser: '@typescript-eslint/parser', plugins: ['react', 'prettier'], env: { browser: true, @@ -8,23 +12,53 @@ module.exports = { jest: true }, rules: { - 'import/no-unresolved': ['error', { ignore: ['react95'] }], + '@typescript-eslint/explicit-module-boundary-types': 'off', + '@typescript-eslint/no-empty-function': 'off', + '@typescript-eslint/no-empty-interface': 'off', + '@typescript-eslint/no-use-before-define': 'off', + '@typescript-eslint/no-unused-vars': [ + 'error', + { + argsIgnorePattern: '^_\\d*$' + } + ], + 'import/extensions': ['error', { js: 'never', ts: 'never', tsx: 'never' }], + 'import/no-unresolved': [ + 'error', + // TODO: Remove ../../test/utils when TypeScript migration is complete + { ignore: ['react95', '../../test/utils'] } + ], 'import/no-extraneous-dependencies': ['error', { devDependencies: true }], + 'import/prefer-default-export': 'off', 'jsx-a11y/label-has-associated-control': ['error', { assert: 'either' }], 'jsx-a11y/label-has-for': 'off', 'prettier/prettier': 'error', 'react/forbid-prop-types': 'off', - 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }], + 'react/jsx-filename-extension': [ + 'warn', + { extensions: ['.js', '.jsx', '.tsx'] } + ], 'react/jsx-props-no-spreading': 'off', 'react/no-array-index-key': 'off', + 'react/prop-types': 'off', + 'react/react-in-jsx-scope': 'off', + 'react/require-default-props': 'off', 'react/static-property-placement': ['error', 'static public field'] }, overrides: [ { - files: ['*.spec.@(js|jsx)', '*.stories.@(js|jsx)'], + files: ['*.spec.@(js|jsx|ts|tsx)', '*.stories.@(js|jsx|ts|tsx)'], rules: { 'no-console': 'off' } } - ] + ], + settings: { + 'import/parsers': { + '@typescript-eslint/parser': ['.ts', '.tsx'] + }, + 'import/resolver': { + typescript: {} + } + } }; diff --git a/.storybook/main.js b/.storybook/main.js index e0510c61..9e84067c 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,5 +1,6 @@ +/** @type import('@storybook/react/types').StorybookConfig */ module.exports = { - stories: ['../src/**/*.stories.@(js|mdx)'], + stories: ['../src/**/*.stories.@(js|jsx|tsx|mdx)'], addons: [ { name: '@storybook/addon-docs', @@ -14,5 +15,15 @@ module.exports = { ], features: { postcss: false + }, + typescript: { + check: false, + checkOptions: {}, + reactDocgen: 'react-docgen-typescript', + reactDocgenTypescriptOptions: { + shouldExtractLiteralValuesFromEnum: true, + propFilter: prop => + prop.parent ? !/node_modules/.test(prop.parent.fileName) : true + } } }; diff --git a/jest.config.js b/jest.config.js index 9ea69f2f..03a26233 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,4 +1,13 @@ module.exports = { - setupFilesAfterEnv: ['/test/setup-test'], + globals: { + extensionsToTreatAsEsm: ['.js'], + 'ts-jest': { + diagnostics: false, + isolatedModules: true, + useESM: true + } + }, + preset: 'ts-jest/presets/js-with-ts-esm', + setupFilesAfterEnv: ['/test/setup-test.ts'], testEnvironment: 'jsdom' }; diff --git a/package.json b/package.json index 48f1176f..1d031a2a 100644 --- a/package.json +++ b/package.json @@ -23,8 +23,9 @@ "license": "MIT", "repository": "git@github.com:arturbien/React95.git", "homepage": "https://react95.io", - "main": "./dist/cjs/index.js", - "module": "./dist/esm/index.js", + "main": "./dist/index.js", + "module": "./dist/index.mjs", + "types": "./dist/index.d.ts", "files": [ "/dist" ], @@ -41,7 +42,7 @@ "test:ci": "jest ./src --maxWorkers=2", "test:watch": "jest ./src --watch", "test:coverage": "jest ./src --coverage", - "lint": "eslint src --ext .js", + "lint": "eslint --ext .js,.ts,.tsx src", "lint:fix": "yarn run lint --fix", "semantic-release": "semantic-release", "install:codesandbox": "yarn --ignore-engines", @@ -66,14 +67,21 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^12.1.5", "@types/jest": "^28.1.6", + "@types/react": "^17.0.39", + "@types/react-dom": "^17.0.11", + "@types/styled-components": "^5.1.25", + "@typescript-eslint/eslint-plugin": "^5.30.7", + "@typescript-eslint/parser": "^5.30.7", "babel-loader": "^8.2.5", "babel-plugin-styled-components": "^2.0.7", "commitizen": "^4.2.5", "cross-env": "^7.0.3", "cz-conventional-changelog": "^3.3.0", + "esbuild": "^0.14.49", "eslint": "^8.20.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-prettier": "^8.5.0", + "eslint-import-resolver-typescript": "^3.3.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jsx-a11y": "^6.6.0", "eslint-plugin-prettier": "^4.2.1", @@ -87,17 +95,22 @@ "prettier": "^2.7.1", "prop-types": "^15.8.1", "react": "^17.0.2", + "react-docgen-typescript": "^2.2.2", "react-dom": "^17.0.2", "rimraf": "^3.0.2", "rollup": "^2.77.0", "rollup-plugin-babel": "^4.4.0", "rollup-plugin-commonjs": "^9.3.4", "rollup-plugin-copy": "^3.4.0", + "rollup-plugin-dts": "^4.2.2", + "rollup-plugin-esbuild": "^4.9.1", "rollup-plugin-node-resolve": "^4.2.4", "rollup-plugin-replace": "^2.2.0", "semantic-release": "^19.0.3", "storybook-addon-styled-component-theme": "^2.0.0", - "styled-components": "^5.3.5" + "styled-components": "^5.3.5", + "ts-jest": "^28.0.7", + "typescript": "^4.7.4" }, "dependencies": {}, "husky": { @@ -117,4 +130,4 @@ "path": "./node_modules/cz-conventional-changelog" } } -} \ No newline at end of file +} diff --git a/rollup.config.js b/rollup.config.js index 66520ee5..7c55ed1e 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,15 +1,45 @@ -import babel from 'rollup-plugin-babel'; -import commonjs from 'rollup-plugin-commonjs'; -import resolve from 'rollup-plugin-node-resolve'; -import replace from 'rollup-plugin-replace'; +import esbuild from 'rollup-plugin-esbuild'; import copy from 'rollup-plugin-copy'; +import dts from 'rollup-plugin-dts'; +import replace from 'rollup-plugin-replace'; import packageJson from './package.json'; const NODE_ENV = process.env.NODE_ENV || 'development'; -export default [ +const bundle = config => [ + { + ...config, + external: id => !/^[./]/.test(id), + plugins: [ + ...config.plugins, + replace({ + 'process.env.NODE_ENV': JSON.stringify(NODE_ENV) + }), + esbuild({ loaders: { '.js': 'jsx' } }) + ] + }, { - input: './src/index.js', + ...config, + output: config.output.dir + ? config.output + : { + file: packageJson.types, + format: 'es' + }, + external: id => !/^[./]/.test(id), + plugins: [ + ...config.plugins, + replace({ + 'process.env.NODE_ENV': JSON.stringify(NODE_ENV) + }), + dts() + ] + } +]; + +export default [ + ...bundle({ + input: './src/index.ts', output: [ { file: packageJson.main, @@ -18,25 +48,14 @@ export default [ }, { file: packageJson.module, - format: 'esm', + format: 'es', sourcemap: true } ], - plugins: [ - replace({ - 'process.env.NODE_ENV': JSON.stringify(NODE_ENV) - }), - babel({ - exclude: 'node_modules/**', - runtimeHelpers: true - }), - resolve(), - commonjs() - ], - external: id => /^react|react-dom|styled-components/.test(id) - }, - { - input: './src/common/themes/index.js', + plugins: [] + }), + ...bundle({ + input: './src/common/themes/index.ts', output: { dir: 'dist/themes', exports: 'default', @@ -49,17 +68,7 @@ export default [ { src: './src/assets/fonts/dist/*', dest: './dist/fonts' }, { src: './src/assets/images/*', dest: './dist/images' } ] - }), - replace({ - 'process.env.NODE_ENV': JSON.stringify(NODE_ENV) - }), - babel({ - exclude: 'node_modules/**', - runtimeHelpers: true - }), - resolve(), - commonjs() - ], - external: id => /^react|react-dom|styled-components/.test(id) - } + }) + ] + }) ]; diff --git a/src/AppBar/AppBar.stories.js b/src/AppBar/AppBar.stories.js index e1376567..02ab60f2 100644 --- a/src/AppBar/AppBar.stories.js +++ b/src/AppBar/AppBar.stories.js @@ -11,15 +11,16 @@ import { } from 'react95'; import logoIMG from '../assets/images/logo.png'; +const Wrapper = styled.div` + padding: 5rem; + background: ${({ theme }) => theme.desktopBackground}; +`; + export default { title: 'AppBar', component: AppBar, decorators: [story => {story()}] }; -const Wrapper = styled.div` - padding: 5rem; - background: ${({ theme }) => theme.desktopBackground}; -`; export function Default() { const [open, setOpen] = React.useState(false); diff --git a/src/Bar/Bar.stories.js b/src/Bar/Bar.stories.js index 0379406c..2fc879f9 100644 --- a/src/Bar/Bar.stories.js +++ b/src/Bar/Bar.stories.js @@ -3,15 +3,16 @@ import styled from 'styled-components'; import { Bar, AppBar, Toolbar, Button } from 'react95'; +const Wrapper = styled.div` + padding: 5rem; + background: ${({ theme }) => theme.desktopBackground}; +`; + export default { title: 'Bar', component: Bar, decorators: [story => {story()}] }; -const Wrapper = styled.div` - padding: 5rem; - background: ${({ theme }) => theme.desktopBackground}; -`; export function Default() { return ( diff --git a/src/Desktop/Desktop.stories.js b/src/Desktop/Desktop.stories.js index c5ec5863..542a8ab3 100644 --- a/src/Desktop/Desktop.stories.js +++ b/src/Desktop/Desktop.stories.js @@ -3,15 +3,16 @@ import styled from 'styled-components'; import { Desktop } from 'react95'; +const Wrapper = styled.div` + padding: 5rem; + background: ${({ theme }) => theme.desktopBackground}; +`; + export default { title: 'Desktop', component: Desktop, decorators: [story => {story()}] }; -const Wrapper = styled.div` - padding: 5rem; - background: ${({ theme }) => theme.desktopBackground}; -`; export function Default() { return ; diff --git a/src/Divider/Divider.stories.js b/src/Divider/Divider.stories.js index f726fbf8..fd59fbe8 100644 --- a/src/Divider/Divider.stories.js +++ b/src/Divider/Divider.stories.js @@ -3,15 +3,16 @@ import styled from 'styled-components'; import { Divider, List, ListItem } from 'react95'; +const Wrapper = styled.div` + padding: 5rem; + background: ${({ theme }) => theme.desktopBackground}; +`; + export default { title: 'Divider', component: Divider, decorators: [story => {story()}] }; -const Wrapper = styled.div` - padding: 5rem; - background: ${({ theme }) => theme.desktopBackground}; -`; export function Default() { return ( diff --git a/src/Fieldset/Fieldset.stories.js b/src/Fieldset/Fieldset.stories.js index 5589ce18..1b6b1333 100644 --- a/src/Fieldset/Fieldset.stories.js +++ b/src/Fieldset/Fieldset.stories.js @@ -3,15 +3,16 @@ import styled from 'styled-components'; import { Checkbox, Cutout, Fieldset, Window, WindowContent } from 'react95'; +const Wrapper = styled.div` + padding: 5rem; + background: ${({ theme }) => theme.desktopBackground}; +`; + export default { title: 'Fieldset', component: Fieldset, decorators: [story => {story()}] }; -const Wrapper = styled.div` - padding: 5rem; - background: ${({ theme }) => theme.desktopBackground}; -`; export function Default() { return ( diff --git a/src/Hourglass/Hourglass.stories.js b/src/Hourglass/Hourglass.stories.js index ef87013e..db7dbd30 100644 --- a/src/Hourglass/Hourglass.stories.js +++ b/src/Hourglass/Hourglass.stories.js @@ -3,15 +3,16 @@ import styled from 'styled-components'; import { Hourglass } from 'react95'; +const Wrapper = styled.div` + padding: 5rem; + background: ${({ theme }) => theme.desktopBackground}; +`; + export default { title: 'Hourglass', component: Hourglass, decorators: [story => {story()}] }; -const Wrapper = styled.div` - padding: 5rem; - background: ${({ theme }) => theme.desktopBackground}; -`; export function Default() { return ; diff --git a/src/Progress/Progress.spec.js b/src/Progress/Progress.spec.js index 54038307..ba43fb3d 100644 --- a/src/Progress/Progress.spec.js +++ b/src/Progress/Progress.spec.js @@ -25,7 +25,7 @@ describe('', () => { expect(queryByTestId('defaultProgress2')).toHaveStyleRule( 'clip-path', - `polygon( 0 0,${value}% 0,${value}% 100%,0 100% )` + `polygon( 0 0, ${value}% 0, ${value}% 100%, 0 100% )` ); expect(queryByTestId('indeterminateProgress')).not.toBeInTheDocument(); diff --git a/src/Table/Table.stories.js b/src/Table/Table.stories.js index b79c9d2e..aa757aa1 100644 --- a/src/Table/Table.stories.js +++ b/src/Table/Table.stories.js @@ -13,6 +13,11 @@ import { WindowContent } from 'react95'; +const Wrapper = styled.div` + padding: 5rem; + background: ${({ theme }) => theme.desktopBackground}; +`; + export default { title: 'Table', component: Table, @@ -26,10 +31,6 @@ export default { }, decorators: [story => {story()}] }; -const Wrapper = styled.div` - padding: 5rem; - background: ${({ theme }) => theme.desktopBackground}; -`; export function Default() { return ( diff --git a/src/Tabs/Tabs.stories.js b/src/Tabs/Tabs.stories.js index bf52be01..93550603 100644 --- a/src/Tabs/Tabs.stories.js +++ b/src/Tabs/Tabs.stories.js @@ -14,16 +14,18 @@ import { Anchor } from 'react95'; +const Wrapper = styled.div` + padding: 5rem; + background: ${({ theme }) => theme.desktopBackground}; +`; + export default { title: 'Tabs', component: Tabs, subcomponents: { Tab, TabBody }, decorators: [story => {story()}] }; -const Wrapper = styled.div` - padding: 5rem; - background: ${({ theme }) => theme.desktopBackground}; -`; + export function Default() { const [state, setState] = useState({ activeTab: 0 diff --git a/src/Tooltip/Tooltip.stories.js b/src/Tooltip/Tooltip.stories.js index c2f5b0fc..f39947aa 100644 --- a/src/Tooltip/Tooltip.stories.js +++ b/src/Tooltip/Tooltip.stories.js @@ -3,15 +3,16 @@ import styled from 'styled-components'; import { Tooltip, Button } from 'react95'; +const Wrapper = styled.div` + padding: 5rem; + background: ${({ theme }) => theme.desktopBackground}; +`; + export default { title: 'Tooltip', component: Tooltip, decorators: [story => {story()}] }; -const Wrapper = styled.div` - padding: 5rem; - background: ${({ theme }) => theme.desktopBackground}; -`; export function Default() { return ( diff --git a/src/Window/Window.stories.js b/src/Window/Window.stories.js index 6c172714..3b6ccbb7 100644 --- a/src/Window/Window.stories.js +++ b/src/Window/Window.stories.js @@ -9,12 +9,6 @@ import { Panel } from 'react95'; -export default { - title: 'Window', - component: Window, - subcomponents: { WindowHeader, WindowContent }, - decorators: [story => {story()}] -}; const Wrapper = styled.div` padding: 5rem; background: ${({ theme }) => theme.desktopBackground}; @@ -66,6 +60,14 @@ const Wrapper = styled.div` padding-left: 0.25rem; } `; + +export default { + title: 'Window', + component: Window, + subcomponents: { WindowHeader, WindowContent }, + decorators: [story => {story()}] +}; + export function Default() { return ( <> diff --git a/src/common/themes/index.js b/src/common/themes/index.ts similarity index 100% rename from src/common/themes/index.js rename to src/common/themes/index.ts diff --git a/src/common/utils/index.js b/src/common/utils/index.js index 7deaad9c..1ea27923 100644 --- a/src/common/utils/index.js +++ b/src/common/utils/index.js @@ -15,7 +15,7 @@ function linearGradient(left, right) { } export function mapFromWindowsTheme(name, windowsTheme, useGradients) { - /* eslint-disable no-unused-vars */ + /* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */ const { ButtonAlternateFace, ButtonDkShadow, @@ -49,7 +49,7 @@ export function mapFromWindowsTheme(name, windowsTheme, useGradients) { InfoText, InfoWindow } = windowsTheme; - /* eslint-enable no-unused-vars */ + /* eslint-enable no-unused-vars, @typescript-eslint/no-unused-vars */ return { name, diff --git a/src/index.js b/src/index.ts similarity index 100% rename from src/index.js rename to src/index.ts diff --git a/src/types.tsx b/src/types.tsx new file mode 100644 index 00000000..8ddc5772 --- /dev/null +++ b/src/types.tsx @@ -0,0 +1,82 @@ +export type Color = string; + +export type Sizes = 'sm' | 'md' | 'lg'; + +export type Orientation = 'horizontal' | 'vertical'; + +export type Direction = 'up' | 'down' | 'left' | 'right'; + +export type DimensionValue = undefined | number | string; + +export type CommonThemeProps = { + // TODO: Rename to base `disabled` + isDisabled?: boolean; + shadow?: boolean; +}; + +export type Theme = { + name: string; + anchor: Color; + anchorVisited: Color; + borderDark: Color; + borderDarkest: Color; + borderLight: Color; + borderLightest: Color; + canvas: Color; + canvasText: Color; + canvasTextDisabled: Color; + canvasTextDisabledShadow: Color; + canvasTextInvert: Color; + checkmark: Color; + checkmarkDisabled: Color; + flatDark: Color; + flatLight: Color; + focusSecondary: Color; + headerBackground: Color; + headerNotActiveBackground: Color; + headerNotActiveText: Color; + headerText: Color; + hoverBackground: Color; + material: Color; + materialDark: Color; + materialText: Color; + materialTextDisabled: Color; + materialTextDisabledShadow: Color; + materialTextInvert: Color; + progress: Color; + tooltip: Color; +}; + +export type WindowsTheme = { + ActiveBorder: Color; + ActiveTitle: Color; + AppWorkspace: Color; + Background: Color; + ButtonAlternateFace: Color; + ButtonDkShadow: Color; + ButtonFace: Color; + ButtonHilight: Color; + ButtonLight: Color; + ButtonShadow: Color; + ButtonText: Color; + GradientActiveTitle: Color; + GradientInactiveTitle: Color; + GrayText: Color; + Hilight: Color; + HilightText: Color; + HotTrackingColor: Color; + InactiveBorder: Color; + InactiveTitle: Color; + InactiveTitleText: Color; + InfoText: Color; + InfoWindow: Color; + Menu: Color; + MenuBar: Color; + MenuHilight: Color; + MenuText: Color; + Scrollbar: Color; + TitleText: Color; + Window: Color; + WindowFrame: Color; + WindowText: Color; +}; diff --git a/test/setup-test.js b/test/setup-test.js deleted file mode 100644 index 05eb7841..00000000 --- a/test/setup-test.js +++ /dev/null @@ -1,2 +0,0 @@ -import '@testing-library/jest-dom/extend-expect'; -import 'jest-styled-components'; diff --git a/test/setup-test.ts b/test/setup-test.ts new file mode 100644 index 00000000..c488bddf --- /dev/null +++ b/test/setup-test.ts @@ -0,0 +1,2 @@ +import '@testing-library/jest-dom'; +import 'jest-styled-components'; diff --git a/test/utils.js b/test/utils.tsx similarity index 84% rename from test/utils.js rename to test/utils.tsx index fce3a6fa..cbfb19f6 100644 --- a/test/utils.js +++ b/test/utils.tsx @@ -1,16 +1,18 @@ +import { render } from '@testing-library/react'; import React from 'react'; import { ThemeProvider } from 'styled-components'; -import { render } from '@testing-library/react'; import themes from '../src/common/themes'; export const theme = themes.original; -export const renderWithTheme = component => +export const renderWithTheme = (component: React.ReactNode) => render({component}); export class Touch { - constructor(instance) { + instance: any; + + constructor(instance: any) { this.instance = instance; } diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 00000000..bdcc9605 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,51 @@ +{ + "compilerOptions": { + "allowJs": true, + "alwaysStrict": true, + "baseUrl": "./", + "declaration": true, + "declarationMap": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "importHelpers": true, + "jsx": "react-jsx", + "lib": [ + "ESNext", + "DOM" + ], + "module": "ESNext", + "moduleResolution": "Node", + "noEmitOnError": true, + "noFallthroughCasesInSwitch": true, + "noImplicitAny": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "outDir": "./lib", + "paths": { + "react95": [ + "./src" + ] + }, + "resolveJsonModule": true, + "rootDir": "./", + "skipLibCheck": true, + "sourceMap": true, + "strict": true, + "strictFunctionTypes": true, + "strictNullChecks": true, + "strictPropertyInitialization": true, + "target": "ESNext", + }, + "include": [ + "**/*.ts", + "**/*.tsx" + ], + "exclude": [ + "coverage", + "dist", + "node_modules", + "storybook" + ] +} diff --git a/types/global.d.ts b/types/global.d.ts new file mode 100644 index 00000000..a7285ff5 --- /dev/null +++ b/types/global.d.ts @@ -0,0 +1,9 @@ +declare module '*.png' { + const value: string; + export = value; +} + +declare module '*.woff2' { + const value: string; + export = value; +} diff --git a/types/themes.d.ts b/types/themes.d.ts new file mode 100644 index 00000000..4a9e693a --- /dev/null +++ b/types/themes.d.ts @@ -0,0 +1,8 @@ +// import original module declarations +import { Theme } from '../src/types'; +import 'styled-components'; + +// and extend them! +declare module 'styled-components' { + export interface DefaultTheme extends Theme {} +} diff --git a/yarn.lock b/yarn.lock index 421feeb5..9ad5e7da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -36,7 +36,7 @@ "@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents.3" chokidar "^3.4.0" -"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3": +"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a" integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q== @@ -2049,6 +2049,18 @@ resolved "https://registry.yarnpkg.com/@opentelemetry/semantic-conventions/-/semantic-conventions-1.3.1.tgz#ba07b864a3c955f061aa30ea3ef7f4ae4449794a" integrity sha512-wU5J8rUoo32oSef/rFpOT1HIjLjAv3qIDHkw1QIhODV3OpAVHi5oVzlouozg9obUmZKtbZ0qUe/m7FP0y0yBzA== +"@pkgr/utils@^2.3.0": + version "2.3.0" + resolved "https://registry.yarnpkg.com/@pkgr/utils/-/utils-2.3.0.tgz#3b8491f112a80839450498816767eb03b7db6139" + integrity sha512-7dIJ9CRVzBnqyEl7diUHPUFJf/oty2SeoVzcMocc5PeOUDK9KGzvgIBjGRRzzlRDaOjh3ADwH0WeibQvi3ls2Q== + dependencies: + cross-spawn "^7.0.3" + is-glob "^4.0.3" + open "^8.4.0" + picocolors "^1.0.0" + tiny-glob "^0.2.9" + tslib "^2.4.0" + "@pmmmwh/react-refresh-webpack-plugin@^0.5.3": version "0.5.7" resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.7.tgz#58f8217ba70069cc6a73f5d7e05e85b458c150e2" @@ -2117,6 +2129,14 @@ resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570" integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw== +"@rollup/pluginutils@^4.1.1": + version "4.2.1" + resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d" + integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ== + dependencies: + estree-walker "^2.0.1" + picomatch "^2.2.2" + "@semantic-release/commit-analyzer@^9.0.2": version "9.0.2" resolved "https://registry.yarnpkg.com/@semantic-release/commit-analyzer/-/commit-analyzer-9.0.2.tgz#a78e54f9834193b55f1073fa6258eecc9a545e03" @@ -3069,6 +3089,14 @@ dependencies: "@types/unist" "*" +"@types/hoist-non-react-statics@*": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/html-minifier-terser@^5.0.0": version "5.1.2" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz#693b316ad323ea97eed6b38ed1a3cc02b1672b57" @@ -3115,7 +3143,7 @@ "@types/parse5" "*" "@types/tough-cookie" "*" -"@types/json-schema@*", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6", "@types/json-schema@^7.0.8": +"@types/json-schema@*", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9": version "7.0.11" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3" integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ== @@ -3215,7 +3243,7 @@ resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb" integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw== -"@types/react-dom@<18.0.0": +"@types/react-dom@<18.0.0", "@types/react-dom@^17.0.11": version "17.0.17" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.17.tgz#2e3743277a793a96a99f1bf87614598289da68a1" integrity sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg== @@ -3238,7 +3266,7 @@ "@types/scheduler" "*" csstype "^3.0.2" -"@types/react@^17": +"@types/react@^17", "@types/react@^17.0.39": version "17.0.47" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.47.tgz#4ee71aaf4c5a9e290e03aa4d0d313c5d666b3b78" integrity sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA== @@ -3274,6 +3302,15 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c" integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw== +"@types/styled-components@^5.1.25": + version "5.1.25" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.25.tgz#0177c4ab5fa7c6ed0565d36f597393dae3f380ad" + integrity sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ== + dependencies: + "@types/hoist-non-react-statics" "*" + "@types/react" "*" + csstype "^3.0.2" + "@types/tapable@^1", "@types/tapable@^1.0.5": version "1.0.8" resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.8.tgz#b94a4391c85666c7b73299fd3ad79d4faa435310" @@ -3348,6 +3385,86 @@ dependencies: "@types/yargs-parser" "*" +"@typescript-eslint/eslint-plugin@^5.30.7": + version "5.30.7" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.7.tgz#1621dabc1ae4084310e19e9efc80dfdbb97e7493" + integrity sha512-l4L6Do+tfeM2OK0GJsU7TUcM/1oN/N25xHm3Jb4z3OiDU4Lj8dIuxX9LpVMS9riSXQs42D1ieX7b85/r16H9Fw== + dependencies: + "@typescript-eslint/scope-manager" "5.30.7" + "@typescript-eslint/type-utils" "5.30.7" + "@typescript-eslint/utils" "5.30.7" + debug "^4.3.4" + functional-red-black-tree "^1.0.1" + ignore "^5.2.0" + regexpp "^3.2.0" + semver "^7.3.7" + tsutils "^3.21.0" + +"@typescript-eslint/parser@^5.30.7": + version "5.30.7" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.30.7.tgz#99d09729392aec9e64b1de45cd63cb81a4ddd980" + integrity sha512-Rg5xwznHWWSy7v2o0cdho6n+xLhK2gntImp0rJroVVFkcYFYQ8C8UJTSuTw/3CnExBmPjycjmUJkxVmjXsld6A== + dependencies: + "@typescript-eslint/scope-manager" "5.30.7" + "@typescript-eslint/types" "5.30.7" + "@typescript-eslint/typescript-estree" "5.30.7" + debug "^4.3.4" + +"@typescript-eslint/scope-manager@5.30.7": + version "5.30.7" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.30.7.tgz#8269a931ef1e5ae68b5eb80743cc515c4ffe3dd7" + integrity sha512-7BM1bwvdF1UUvt+b9smhqdc/eniOnCKxQT/kj3oXtj3LqnTWCAM0qHRHfyzCzhEfWX0zrW7KqXXeE4DlchZBKw== + dependencies: + "@typescript-eslint/types" "5.30.7" + "@typescript-eslint/visitor-keys" "5.30.7" + +"@typescript-eslint/type-utils@5.30.7": + version "5.30.7" + resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.30.7.tgz#5693dc3db6f313f302764282d614cfdbc8a9fcfd" + integrity sha512-nD5qAE2aJX/YLyKMvOU5jvJyku4QN5XBVsoTynFrjQZaDgDV6i7QHFiYCx10wvn7hFvfuqIRNBtsgaLe0DbWhw== + dependencies: + "@typescript-eslint/utils" "5.30.7" + debug "^4.3.4" + tsutils "^3.21.0" + +"@typescript-eslint/types@5.30.7": + version "5.30.7" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.30.7.tgz#18331487cc92d0f1fb1a6f580c8ec832528079d0" + integrity sha512-ocVkETUs82+U+HowkovV6uxf1AnVRKCmDRNUBUUo46/5SQv1owC/EBFkiu4MOHeZqhKz2ktZ3kvJJ1uFqQ8QPg== + +"@typescript-eslint/typescript-estree@5.30.7": + version "5.30.7" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.7.tgz#05da9f1b281985bfedcf62349847f8d168eecc07" + integrity sha512-tNslqXI1ZdmXXrHER83TJ8OTYl4epUzJC0aj2i4DMDT4iU+UqLT3EJeGQvJ17BMbm31x5scSwo3hPM0nqQ1AEA== + dependencies: + "@typescript-eslint/types" "5.30.7" + "@typescript-eslint/visitor-keys" "5.30.7" + debug "^4.3.4" + globby "^11.1.0" + is-glob "^4.0.3" + semver "^7.3.7" + tsutils "^3.21.0" + +"@typescript-eslint/utils@5.30.7": + version "5.30.7" + resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.30.7.tgz#7135be070349e9f7caa262b0ca59dc96123351bb" + integrity sha512-Z3pHdbFw+ftZiGUnm1GZhkJgVqsDL5CYW2yj+TB2mfXDFOMqtbzQi2dNJIyPqPbx9mv2kUxS1gU+r2gKlKi1rQ== + dependencies: + "@types/json-schema" "^7.0.9" + "@typescript-eslint/scope-manager" "5.30.7" + "@typescript-eslint/types" "5.30.7" + "@typescript-eslint/typescript-estree" "5.30.7" + eslint-scope "^5.1.1" + eslint-utils "^3.0.0" + +"@typescript-eslint/visitor-keys@5.30.7": + version "5.30.7" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.7.tgz#c093abae75b4fd822bfbad9fc337f38a7a14909a" + integrity sha512-KrRXf8nnjvcpxDFOKej4xkD7657+PClJs5cJVSG7NNoCNnjEdc46juNAQt7AyuWctuCgs6mVRc1xGctEqrjxWw== + dependencies: + "@typescript-eslint/types" "5.30.7" + eslint-visitor-keys "^3.3.0" + "@webassemblyjs/ast@1.11.1": version "1.11.1" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7" @@ -4739,6 +4856,13 @@ browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.20.2, browserslist@^ node-releases "^2.0.6" update-browserslist-db "^1.0.4" +bs-logger@0.x: + version "0.2.6" + resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8" + integrity sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog== + dependencies: + fast-json-stable-stringify "2.x" + bser@2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05" @@ -6596,7 +6720,7 @@ enhanced-resolve@^4.5.0: memory-fs "^0.5.0" tapable "^1.0.0" -enhanced-resolve@^5.9.3: +enhanced-resolve@^5.10.0, enhanced-resolve@^5.9.3: version "5.10.0" resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6" integrity sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ== @@ -6697,7 +6821,7 @@ es-get-iterator@^1.0.2: is-string "^1.0.5" isarray "^2.0.5" -es-module-lexer@^0.9.0: +es-module-lexer@^0.9.0, es-module-lexer@^0.9.3: version "0.9.3" resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19" integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ== @@ -6764,6 +6888,132 @@ es6-weak-map@^2.0.3: es6-iterator "^2.0.3" es6-symbol "^3.1.1" +esbuild-android-64@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.49.tgz#9e4682c36dcf6e7b71b73d2a3723a96e0fdc5054" + integrity sha512-vYsdOTD+yi+kquhBiFWl3tyxnj2qZJsl4tAqwhT90ktUdnyTizgle7TjNx6Ar1bN7wcwWqZ9QInfdk2WVagSww== + +esbuild-android-arm64@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.49.tgz#9861b1f7e57d1dd1f23eeef6198561c5f34b51f6" + integrity sha512-g2HGr/hjOXCgSsvQZ1nK4nW/ei8JUx04Li74qub9qWrStlysaVmadRyTVuW32FGIpLQyc5sUjjZopj49eGGM2g== + +esbuild-darwin-64@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.49.tgz#fd30a5ebe28704a3a117126c60f98096c067c8d1" + integrity sha512-3rvqnBCtX9ywso5fCHixt2GBCUsogNp9DjGmvbBohh31Ces34BVzFltMSxJpacNki96+WIcX5s/vum+ckXiLYg== + +esbuild-darwin-arm64@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.49.tgz#c04a3a57dad94a972c66a697a68a25aa25947f41" + integrity sha512-XMaqDxO846srnGlUSJnwbijV29MTKUATmOLyQSfswbK/2X5Uv28M9tTLUJcKKxzoo9lnkYPsx2o8EJcTYwCs/A== + +esbuild-freebsd-64@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.49.tgz#c404dbd66c98451395b1eef0fa38b73030a7be82" + integrity sha512-NJ5Q6AjV879mOHFri+5lZLTp5XsO2hQ+KSJYLbfY9DgCu8s6/Zl2prWXVANYTeCDLlrIlNNYw8y34xqyLDKOmQ== + +esbuild-freebsd-arm64@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.49.tgz#b62cec96138ebc5937240ce3e1b97902963ea74a" + integrity sha512-lFLtgXnAc3eXYqj5koPlBZvEbBSOSUbWO3gyY/0+4lBdRqELyz4bAuamHvmvHW5swJYL7kngzIZw6kdu25KGOA== + +esbuild-linux-32@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.49.tgz#495b1cc011b8c64d8bbaf65509c1e7135eb9ddbf" + integrity sha512-zTTH4gr2Kb8u4QcOpTDVn7Z8q7QEIvFl/+vHrI3cF6XOJS7iEI1FWslTo3uofB2+mn6sIJEQD9PrNZKoAAMDiA== + +esbuild-linux-64@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.49.tgz#3f28dd8f986e6ff42f38888ee435a9b1fb916a56" + integrity sha512-hYmzRIDzFfLrB5c1SknkxzM8LdEUOusp6M2TnuQZJLRtxTgyPnZZVtyMeCLki0wKgYPXkFsAVhi8vzo2mBNeTg== + +esbuild-linux-arm64@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.49.tgz#a52e99ae30246566dc5f33e835aa6ca98ef70e33" + integrity sha512-KLQ+WpeuY+7bxukxLz5VgkAAVQxUv67Ft4DmHIPIW+2w3ObBPQhqNoeQUHxopoW/aiOn3m99NSmSV+bs4BSsdA== + +esbuild-linux-arm@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.49.tgz#7c33d05a64ec540cf7474834adaa57b3167bbe97" + integrity sha512-iE3e+ZVv1Qz1Sy0gifIsarJMQ89Rpm9mtLSRtG3AH0FPgAzQ5Z5oU6vYzhc/3gSPi2UxdCOfRhw2onXuFw/0lg== + +esbuild-linux-mips64le@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.49.tgz#ed062bd844b587be649443831eb84ba304685f25" + integrity sha512-n+rGODfm8RSum5pFIqFQVQpYBw+AztL8s6o9kfx7tjfK0yIGF6tm5HlG6aRjodiiKkH2xAiIM+U4xtQVZYU4rA== + +esbuild-linux-ppc64le@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.49.tgz#c0786fb5bddffd90c10a2078181513cbaf077958" + integrity sha512-WP9zR4HX6iCBmMFH+XHHng2LmdoIeUmBpL4aL2TR8ruzXyT4dWrJ5BSbT8iNo6THN8lod6GOmYDLq/dgZLalGw== + +esbuild-linux-riscv64@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.49.tgz#579b0e7cc6fce4bfc698e991a52503bb616bec49" + integrity sha512-h66ORBz+Dg+1KgLvzTVQEA1LX4XBd1SK0Fgbhhw4akpG/YkN8pS6OzYI/7SGENiN6ao5hETRDSkVcvU9NRtkMQ== + +esbuild-linux-s390x@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.49.tgz#09eb15c753e249a500b4e28d07c5eef7524a9740" + integrity sha512-DhrUoFVWD+XmKO1y7e4kNCqQHPs6twz6VV6Uezl/XHYGzM60rBewBF5jlZjG0nCk5W/Xy6y1xWeopkrhFFM0sQ== + +esbuild-netbsd-64@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.49.tgz#f7337cd2bddb7cc9d100d19156f36c9ca117b58d" + integrity sha512-BXaUwFOfCy2T+hABtiPUIpWjAeWK9P8O41gR4Pg73hpzoygVGnj0nI3YK4SJhe52ELgtdgWP/ckIkbn2XaTxjQ== + +esbuild-openbsd-64@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.49.tgz#1f8bdc49f8a44396e73950a3fb6b39828563631d" + integrity sha512-lP06UQeLDGmVPw9Rg437Btu6J9/BmyhdoefnQ4gDEJTtJvKtQaUcOQrhjTq455ouZN4EHFH1h28WOJVANK41kA== + +esbuild-sunos-64@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.49.tgz#47d042739365b61aa8ca642adb69534a8eef9f7a" + integrity sha512-4c8Zowp+V3zIWje329BeLbGh6XI9c/rqARNaj5yPHdC61pHI9UNdDxT3rePPJeWcEZVKjkiAS6AP6kiITp7FSw== + +esbuild-windows-32@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.49.tgz#79198c88ec9bde163c18a6b430c34eab098ec21a" + integrity sha512-q7Rb+J9yHTeKr9QTPDYkqfkEj8/kcKz9lOabDuvEXpXuIcosWCJgo5Z7h/L4r7rbtTH4a8U2FGKb6s1eeOHmJA== + +esbuild-windows-64@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.49.tgz#b36b230d18d1ee54008e08814c4799c7806e8c79" + integrity sha512-+Cme7Ongv0UIUTniPqfTX6mJ8Deo7VXw9xN0yJEN1lQMHDppTNmKwAM3oGbD/Vqff+07K2gN0WfNkMohmG+dVw== + +esbuild-windows-arm64@0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.49.tgz#d83c03ff6436caf3262347cfa7e16b0a8049fae7" + integrity sha512-v+HYNAXzuANrCbbLFJ5nmO3m5y2PGZWLe3uloAkLt87aXiO2mZr3BTmacZdjwNkNEHuH3bNtN8cak+mzVjVPfA== + +esbuild@^0.14.49: + version "0.14.49" + resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.49.tgz#b82834760eba2ddc17b44f05cfcc0aaca2bae492" + integrity sha512-/TlVHhOaq7Yz8N1OJrjqM3Auzo5wjvHFLk+T8pIue+fhnhIMpfAzsG6PLVMbFveVxqD2WOp3QHei+52IMUNmCw== + optionalDependencies: + esbuild-android-64 "0.14.49" + esbuild-android-arm64 "0.14.49" + esbuild-darwin-64 "0.14.49" + esbuild-darwin-arm64 "0.14.49" + esbuild-freebsd-64 "0.14.49" + esbuild-freebsd-arm64 "0.14.49" + esbuild-linux-32 "0.14.49" + esbuild-linux-64 "0.14.49" + esbuild-linux-arm "0.14.49" + esbuild-linux-arm64 "0.14.49" + esbuild-linux-mips64le "0.14.49" + esbuild-linux-ppc64le "0.14.49" + esbuild-linux-riscv64 "0.14.49" + esbuild-linux-s390x "0.14.49" + esbuild-netbsd-64 "0.14.49" + esbuild-openbsd-64 "0.14.49" + esbuild-sunos-64 "0.14.49" + esbuild-windows-32 "0.14.49" + esbuild-windows-64 "0.14.49" + esbuild-windows-arm64 "0.14.49" + escalade@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40" @@ -6850,6 +7100,19 @@ eslint-import-resolver-node@^0.3.6: debug "^3.2.7" resolve "^1.20.0" +eslint-import-resolver-typescript@^3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.3.0.tgz#c2b9f420563bdcb4b84d550d81e579f8dc867d5b" + integrity sha512-vlooCGKfDX59rH5TbtluOekinPlIS5Ab+dyQUoCCJoE1IV11R/kn6J+RoMBuBkJhzJEIKJ4myQJhw6lGIXfkRA== + dependencies: + debug "^4.3.4" + enhanced-resolve "^5.10.0" + get-tsconfig "^4.2.0" + globby "^13.1.2" + is-core-module "^2.9.0" + is-glob "^4.0.3" + synckit "^0.8.1" + eslint-module-utils@^2.7.3: version "2.7.3" resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz#ad7e3a10552fdd0642e1e55292781bd6e34876ee" @@ -7057,6 +7320,11 @@ estree-walker@^0.6.0, estree-walker@^0.6.1: resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362" integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w== +estree-walker@^2.0.1: + version "2.0.2" + resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac" + integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w== + esutils@^2.0.2: version "2.0.3" resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64" @@ -7331,7 +7599,7 @@ fast-glob@^2.2.6: merge2 "^1.2.3" micromatch "^3.1.10" -fast-glob@^3.0.3, fast-glob@^3.2.9: +fast-glob@^3.0.3, fast-glob@^3.2.11, fast-glob@^3.2.9: version "3.2.11" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9" integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew== @@ -7347,7 +7615,7 @@ fast-json-parse@^1.0.3: resolved "https://registry.yarnpkg.com/fast-json-parse/-/fast-json-parse-1.0.3.tgz#43e5c61ee4efa9265633046b770fb682a7577c4d" integrity sha512-FRWsaZRWEJ1ESVNbDWmsAlqDk96gPQezzLghafp5J4GUKjbCz3OkAHuZs5TuPEtkbVQERysLp9xv6c24fBm8Aw== -fast-json-stable-stringify@^2.0.0: +fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633" integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw== @@ -8060,6 +8328,11 @@ get-symbol-description@^1.0.0: call-bind "^1.0.2" get-intrinsic "^1.1.1" +get-tsconfig@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.2.0.tgz#ff368dd7104dab47bf923404eb93838245c66543" + integrity sha512-X8u8fREiYOE6S8hLbq99PeykTDoLVnxvF4DjWKJmz9xy2nNRdUcV8ZN9tniJFeKyTU3qnC9lL8n4Chd6LmVKHg== + get-uri@3: version "3.0.2" resolved "https://registry.yarnpkg.com/get-uri/-/get-uri-3.0.2.tgz#f0ef1356faabc70e1f9404fa3b66b2ba9bfc725c" @@ -8245,6 +8518,11 @@ globalthis@^1.0.0: dependencies: define-properties "^1.1.3" +globalyzer@0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/globalyzer/-/globalyzer-0.1.0.tgz#cb76da79555669a1519d5a8edf093afaa0bf1465" + integrity sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q== + globby@10.0.1: version "10.0.1" resolved "https://registry.yarnpkg.com/globby/-/globby-10.0.1.tgz#4782c34cb75dd683351335c5829cc3420e606b22" @@ -8259,7 +8537,7 @@ globby@10.0.1: merge2 "^1.2.3" slash "^3.0.0" -globby@^11.0.0, globby@^11.0.1, globby@^11.0.2: +globby@^11.0.0, globby@^11.0.1, globby@^11.0.2, globby@^11.1.0: version "11.1.0" resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b" integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g== @@ -8271,6 +8549,17 @@ globby@^11.0.0, globby@^11.0.1, globby@^11.0.2: merge2 "^1.4.1" slash "^3.0.0" +globby@^13.1.2: + version "13.1.2" + resolved "https://registry.yarnpkg.com/globby/-/globby-13.1.2.tgz#29047105582427ab6eca4f905200667b056da515" + integrity sha512-LKSDZXToac40u8Q1PQtZihbNdTYSNMuWe+K5l+oa6KgDzSvVrHXlJy40hUP522RjAIoNLJYBJi7ow+rbFpIhHQ== + dependencies: + dir-glob "^3.0.1" + fast-glob "^3.2.11" + ignore "^5.2.0" + merge2 "^1.4.1" + slash "^4.0.0" + globby@^9.2.0: version "9.2.0" resolved "https://registry.yarnpkg.com/globby/-/globby-9.2.0.tgz#fd029a706c703d29bdd170f4b6db3a3f7a7cb63d" @@ -8285,6 +8574,11 @@ globby@^9.2.0: pify "^4.0.1" slash "^2.0.0" +globrex@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098" + integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg== + google-auth-library@^7.11.0: version "7.14.1" resolved "https://registry.yarnpkg.com/google-auth-library/-/google-auth-library-7.14.1.tgz#e3483034162f24cc71b95c8a55a210008826213c" @@ -8623,7 +8917,7 @@ hoist-non-react-statics@^2.3.1: resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== -hoist-non-react-statics@^3.0.0: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -10007,7 +10301,7 @@ jest-util@^26.6.2: is-ci "^2.0.0" micromatch "^4.0.2" -jest-util@^28.1.3: +jest-util@^28.0.0, jest-util@^28.1.3: version "28.1.3" resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-28.1.3.tgz#f4f932aa0074f0679943220ff9cbba7e497028b0" integrity sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ== @@ -10096,6 +10390,11 @@ join-path@^1.1.1: url-join "0.0.1" valid-url "^1" +joycon@^3.0.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/joycon/-/joycon-3.1.1.tgz#bce8596d6ae808f8b68168f5fc69280996894f03" + integrity sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw== + js-string-escape@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef" @@ -10795,6 +11094,11 @@ lodash.map@^4.5.1: resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3" integrity sha512-worNHGKLDetmcEYDvh2stPCrrQRkP20E4l0iIS7F8EvzMqBBi7ltvFN5m1HvTf1P7Jk1txKhvFcmYsCr8O2F1Q== +lodash.memoize@4.x: + version "4.1.2" + resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" + integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag== + lodash.merge@^4.6.2: version "4.6.2" resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" @@ -10947,6 +11251,13 @@ magic-string@^0.25.2: dependencies: sourcemap-codec "^1.4.8" +magic-string@^0.26.1: + version "0.26.2" + resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.2.tgz#5331700e4158cd6befda738bb6b0c7b93c0d4432" + integrity sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A== + dependencies: + sourcemap-codec "^1.4.8" + make-dir@^2.0.0, make-dir@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5" @@ -10962,7 +11273,7 @@ make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0: dependencies: semver "^6.0.0" -make-error@^1.1.1: +make-error@1.x, make-error@^1.1.1: version "1.3.6" resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2" integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw== @@ -12611,7 +12922,7 @@ picocolors@^1.0.0: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== -picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1: +picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== @@ -13194,7 +13505,7 @@ re2@^1.15.8: nan "^2.16.0" node-gyp "^9.0.0" -react-docgen-typescript@^2.1.1: +react-docgen-typescript@^2.1.1, react-docgen-typescript@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c" integrity sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg== @@ -13842,6 +14153,26 @@ rollup-plugin-copy@^3.4.0: globby "10.0.1" is-plain-object "^3.0.0" +rollup-plugin-dts@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/rollup-plugin-dts/-/rollup-plugin-dts-4.2.2.tgz#82876b8784213af29b02cf260b45e404ff835ce1" + integrity sha512-A3g6Rogyko/PXeKoUlkjxkP++8UDVpgA7C+Tdl77Xj4fgEaIjPSnxRmR53EzvoYy97VMVwLAOcWJudaVAuxneQ== + dependencies: + magic-string "^0.26.1" + optionalDependencies: + "@babel/code-frame" "^7.16.7" + +rollup-plugin-esbuild@^4.9.1: + version "4.9.1" + resolved "https://registry.yarnpkg.com/rollup-plugin-esbuild/-/rollup-plugin-esbuild-4.9.1.tgz#369d137e2b1542c8ee459495fd4f10de812666aa" + integrity sha512-qn/x7Wz9p3Xnva99qcb+nopH0d2VJwVnsxJTGEg+Sh2Z3tqQl33MhOwzekVo1YTKgv+yAmosjcBRJygMfGrtLw== + dependencies: + "@rollup/pluginutils" "^4.1.1" + debug "^4.3.3" + es-module-lexer "^0.9.3" + joycon "^3.0.1" + jsonc-parser "^3.0.0" + rollup-plugin-node-resolve@^4.2.4: version "4.2.4" resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-4.2.4.tgz#7d370f8d6fd3031006a0032c38262dd9be3c6250" @@ -14072,18 +14403,18 @@ semver@7.0.0: resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e" integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A== -semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0: - version "6.3.0" - resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" - integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== - -semver@^7.0.0, semver@^7.1.1, semver@^7.1.2, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7: +semver@7.x, semver@^7.0.0, semver@^7.1.1, semver@^7.1.2, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7: version "7.3.7" resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f" integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g== dependencies: lru-cache "^6.0.0" +semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0: + version "6.3.0" + resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" + integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== + send@0.18.0: version "0.18.0" resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be" @@ -14259,6 +14590,11 @@ slash@^3.0.0: resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634" integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q== +slash@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7" + integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew== + slice-ansi@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-3.0.0.tgz#31ddc10930a1b7e0b67b08c96c2f49b77a789787" @@ -14934,6 +15270,14 @@ synchronous-promise@^2.0.15: resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.15.tgz#07ca1822b9de0001f5ff73595f3d08c4f720eb8e" integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg== +synckit@^0.8.1: + version "0.8.1" + resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.1.tgz#697111240114a15a393fcb92786a4218bfead47f" + integrity sha512-rJEeygO5PNmcZICmrgnbOd2usi5zWE1ESc0Gn5tTmJlongoU8zCTwMFQtar2UgMSiR68vK9afPQ+uVs2lURSIA== + dependencies: + "@pkgr/utils" "^2.3.0" + tslib "^2.4.0" + tapable@^1.0.0, tapable@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2" @@ -15137,6 +15481,14 @@ timers-ext@^0.1.7: es5-ext "~0.10.46" next-tick "1" +tiny-glob@^0.2.9: + version "0.2.9" + resolved "https://registry.yarnpkg.com/tiny-glob/-/tiny-glob-0.2.9.tgz#2212d441ac17928033b110f8b3640683129d31e2" + integrity sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg== + dependencies: + globalyzer "0.1.0" + globrex "^0.1.2" + tiny-relative-date@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz#fa08aad501ed730f31cc043181d995c39a935e07" @@ -15299,6 +15651,20 @@ ts-dedent@^2.0.0: resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5" integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ== +ts-jest@^28.0.7: + version "28.0.7" + resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-28.0.7.tgz#e18757a9e44693da9980a79127e5df5a98b37ac6" + integrity sha512-wWXCSmTwBVmdvWrOpYhal79bDpioDy4rTT+0vyUnE3ZzM7LOAAGG9NXwzkEL/a516rQEgnMmS/WKP9jBPCVJyA== + dependencies: + bs-logger "0.x" + fast-json-stable-stringify "2.x" + jest-util "^28.0.0" + json5 "^2.2.1" + lodash.memoize "4.x" + make-error "1.x" + semver "7.x" + yargs-parser "^21.0.1" + ts-node@^10.8.1: version "10.9.1" resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.1.tgz#e73de9102958af9e1f0b168a6ff320e25adcff4b" @@ -15333,11 +15699,23 @@ tsconfig-paths@^3.14.1: minimist "^1.2.6" strip-bom "^3.0.0" -tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.1: +tslib@^1.8.1: + version "1.14.1" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" + integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== + +tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.1, tslib@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3" integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ== +tsutils@^3.21.0: + version "3.21.0" + resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623" + integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA== + dependencies: + tslib "^1.8.1" + tty-browserify@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6" @@ -15439,7 +15817,7 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA== -typescript@^4.6.4: +typescript@^4.6.4, typescript@^4.7.4: version "4.7.4" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235" integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ== @@ -16333,7 +16711,7 @@ yargs-parser@^20.2.2, yargs-parser@^20.2.3, yargs-parser@^20.2.9: resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee" integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w== -yargs-parser@^21.0.0: +yargs-parser@^21.0.0, yargs-parser@^21.0.1: version "21.0.1" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.0.1.tgz#0267f286c877a4f0f728fceb6f8a3e4cb95c6e35" integrity sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg== From 659d10279c894c89826b3d87087be4ce7237bc5c Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Wed, 20 Jul 2022 20:18:32 -0400 Subject: [PATCH 002/100] feat(anchor): convert to TypeScript and export types --- .../{Anchor.spec.js => Anchor.spec.tsx} | 3 +-- .../{Anchor.stories.js => Anchor.stories.tsx} | 6 +++--- src/Anchor/{Anchor.js => Anchor.tsx} | 20 +++++++++---------- src/index.ts | 2 +- 4 files changed, 14 insertions(+), 17 deletions(-) rename src/Anchor/{Anchor.spec.js => Anchor.spec.tsx} (95%) rename src/Anchor/{Anchor.stories.js => Anchor.stories.tsx} (80%) rename src/Anchor/{Anchor.js => Anchor.tsx} (52%) diff --git a/src/Anchor/Anchor.spec.js b/src/Anchor/Anchor.spec.tsx similarity index 95% rename from src/Anchor/Anchor.spec.js rename to src/Anchor/Anchor.spec.tsx index f6242811..49d86659 100644 --- a/src/Anchor/Anchor.spec.js +++ b/src/Anchor/Anchor.spec.tsx @@ -1,7 +1,6 @@ -import React from 'react'; import { render } from '@testing-library/react'; -import Anchor from './Anchor'; +import { Anchor } from './Anchor'; const defaultProps = { children: '', diff --git a/src/Anchor/Anchor.stories.js b/src/Anchor/Anchor.stories.tsx similarity index 80% rename from src/Anchor/Anchor.stories.js rename to src/Anchor/Anchor.stories.tsx index 3ed5d6e9..23c11b62 100644 --- a/src/Anchor/Anchor.stories.js +++ b/src/Anchor/Anchor.stories.tsx @@ -1,7 +1,7 @@ -import React from 'react'; +import { ComponentMeta } from '@storybook/react'; import styled from 'styled-components'; -import { Anchor } from 'react95'; +import { Anchor } from './Anchor'; const Wrapper = styled.div` padding: 5rem; @@ -12,7 +12,7 @@ export default { title: 'Anchor', component: Anchor, decorators: [story => {story()}] -}; +} as ComponentMeta; export function Default() { return ( diff --git a/src/Anchor/Anchor.js b/src/Anchor/Anchor.tsx similarity index 52% rename from src/Anchor/Anchor.js rename to src/Anchor/Anchor.tsx index 8f582c55..e01b0eeb 100644 --- a/src/Anchor/Anchor.js +++ b/src/Anchor/Anchor.tsx @@ -1,5 +1,4 @@ -import React from 'react'; -import propTypes from 'prop-types'; +import React, { forwardRef } from 'react'; import styled from 'styled-components'; @@ -12,9 +11,14 @@ const StyledAnchor = styled.a` } `; -const Anchor = React.forwardRef(function Anchor(props, ref) { - const { children, ...otherProps } = props; +interface AnchorProps extends React.AnchorHTMLAttributes { + children: React.ReactNode; +} +const Anchor = forwardRef(function Anchor( + { children, ...otherProps }: AnchorProps, + ref +) { return ( {children} @@ -22,10 +26,4 @@ const Anchor = React.forwardRef(function Anchor(props, ref) { ); }); -Anchor.defaultProps = {}; - -Anchor.propTypes = { - children: propTypes.node.isRequired -}; - -export default Anchor; +export { Anchor, AnchorProps }; diff --git a/src/index.ts b/src/index.ts index 2106d032..92dbe8bd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,7 +3,7 @@ export { default as styleReset } from './common/styleReset'; export { createScrollbars } from './common/index'; /* components */ -export { default as Anchor } from './Anchor/Anchor'; +export * from './Anchor/Anchor'; export { default as AppBar } from './AppBar/AppBar'; export { default as Avatar } from './Avatar/Avatar'; export { default as Bar } from './Bar/Bar'; From fc7c8a93d9e5b3155979d276edbc89eb8bb61271 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 09:37:23 -0400 Subject: [PATCH 003/100] chore(deps): upgrade @types/react and @types/react-dom to 18 --- package.json | 4 ++-- yarn.lock | 13 ++++++++++--- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 1d031a2a..df09e524 100644 --- a/package.json +++ b/package.json @@ -67,8 +67,8 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^12.1.5", "@types/jest": "^28.1.6", - "@types/react": "^17.0.39", - "@types/react-dom": "^17.0.11", + "@types/react": "^18.0.15", + "@types/react-dom": "^18.0.6", "@types/styled-components": "^5.1.25", "@typescript-eslint/eslint-plugin": "^5.30.7", "@typescript-eslint/parser": "^5.30.7", diff --git a/yarn.lock b/yarn.lock index 9ad5e7da..ffdb081a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3243,13 +3243,20 @@ resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb" integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw== -"@types/react-dom@<18.0.0", "@types/react-dom@^17.0.11": +"@types/react-dom@<18.0.0": version "17.0.17" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.17.tgz#2e3743277a793a96a99f1bf87614598289da68a1" integrity sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg== dependencies: "@types/react" "^17" +"@types/react-dom@^18.0.6": + version "18.0.6" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1" + integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA== + dependencies: + "@types/react" "*" + "@types/react-syntax-highlighter@11.0.5": version "11.0.5" resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz#0d546261b4021e1f9d85b50401c0a42acb106087" @@ -3257,7 +3264,7 @@ dependencies: "@types/react" "*" -"@types/react@*": +"@types/react@*", "@types/react@^18.0.15": version "18.0.15" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe" integrity sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow== @@ -3266,7 +3273,7 @@ "@types/scheduler" "*" csstype "^3.0.2" -"@types/react@^17", "@types/react@^17.0.39": +"@types/react@^17": version "17.0.47" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.47.tgz#4ee71aaf4c5a9e290e03aa4d0d313c5d666b3b78" integrity sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA== From f63cbe566d5c39da17803fc2a1e49393cbe411ca Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 09:37:48 -0400 Subject: [PATCH 004/100] chore(types): add helper type CommonStyledProps --- src/types.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/types.tsx b/src/types.tsx index 8ddc5772..ea4b7e15 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + export type Color = string; export type Sizes = 'sm' | 'md' | 'lg'; @@ -8,6 +10,14 @@ export type Direction = 'up' | 'down' | 'left' | 'right'; export type DimensionValue = undefined | number | string; +export type CommonStyledProps = { + /** + * "as" polymorphic prop allows to render a different HTML element or React component + * @see {@link https://styled-components.com/docs/api#as-polymorphic-prop} + */ + as?: string | React.ComponentType; // eslint-disable-line @typescript-eslint/no-explicit-any +}; + export type CommonThemeProps = { // TODO: Rename to base `disabled` isDisabled?: boolean; From 1f3b5f16fbc90365144636e10488889188992d76 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 09:38:34 -0400 Subject: [PATCH 005/100] chore(anchor): compose type with CommonStyledProps This exposes the `as` property so users can swap the element as allowed by styled-components. --- src/Anchor/Anchor.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Anchor/Anchor.tsx b/src/Anchor/Anchor.tsx index e01b0eeb..646ba769 100644 --- a/src/Anchor/Anchor.tsx +++ b/src/Anchor/Anchor.tsx @@ -1,4 +1,5 @@ import React, { forwardRef } from 'react'; +import { CommonStyledProps } from 'src/types'; import styled from 'styled-components'; @@ -11,9 +12,10 @@ const StyledAnchor = styled.a` } `; -interface AnchorProps extends React.AnchorHTMLAttributes { +type AnchorProps = { children: React.ReactNode; -} +} & React.AnchorHTMLAttributes & + CommonStyledProps; const Anchor = forwardRef(function Anchor( { children, ...otherProps }: AnchorProps, From dcd27b0bfadf3a750284a045de2db98654384893 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 09:50:56 -0400 Subject: [PATCH 006/100] chore(anchor): fix import path --- src/Anchor/Anchor.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Anchor/Anchor.tsx b/src/Anchor/Anchor.tsx index 646ba769..5e27e141 100644 --- a/src/Anchor/Anchor.tsx +++ b/src/Anchor/Anchor.tsx @@ -1,8 +1,8 @@ import React, { forwardRef } from 'react'; -import { CommonStyledProps } from 'src/types'; - import styled from 'styled-components'; +import { CommonStyledProps } from '../types'; + const StyledAnchor = styled.a` color: ${({ theme }) => theme.anchor}; font-size: inherit; From 105c6c69724520a5c1db778450e802b241cc67f3 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 09:58:34 -0400 Subject: [PATCH 007/100] chore(types): remove baseUrl from tsconfig.json That causes import path issues on VSCode. --- tsconfig.json | 1 - 1 file changed, 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index bdcc9605..f70eb2f2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,7 +2,6 @@ "compilerOptions": { "allowJs": true, "alwaysStrict": true, - "baseUrl": "./", "declaration": true, "declarationMap": true, "esModuleInterop": true, From 334cf5e005a0d447655c1128f6be2630f16dc591 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 24 Jul 2022 09:39:14 -0400 Subject: [PATCH 008/100] feat(appbar): convert to TypeScript and export types --- src/AppBar/AppBar.js | 38 ------------------- .../{AppBar.spec.js => AppBar.spec.tsx} | 13 +++---- .../{AppBar.stories.js => AppBar.stories.tsx} | 3 +- src/AppBar/AppBar.tsx | 36 ++++++++++++++++++ 4 files changed, 44 insertions(+), 46 deletions(-) delete mode 100644 src/AppBar/AppBar.js rename src/AppBar/{AppBar.spec.js => AppBar.spec.tsx} (80%) rename src/AppBar/{AppBar.stories.js => AppBar.stories.tsx} (95%) create mode 100644 src/AppBar/AppBar.tsx diff --git a/src/AppBar/AppBar.js b/src/AppBar/AppBar.js deleted file mode 100644 index 35944ca7..00000000 --- a/src/AppBar/AppBar.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import propTypes from 'prop-types'; -import styled from 'styled-components'; -import { createBorderStyles, createBoxStyles } from '../common'; - -const StyledAppBar = styled.header` - ${createBorderStyles()}; - ${createBoxStyles()}; - - position: ${props => (props.fixed ? 'fixed' : 'absolute')}; - top: 0; - right: 0; - left: auto; - display: flex; - flex-direction: column; - width: 100%; -`; - -const AppBar = React.forwardRef(function AppBar(props, ref) { - const { children, ...otherProps } = props; - return ( - - {children} - - ); -}); - -AppBar.defaultProps = { - children: null, - fixed: true -}; - -AppBar.propTypes = { - children: propTypes.node, - fixed: propTypes.bool -}; - -export default AppBar; diff --git a/src/AppBar/AppBar.spec.js b/src/AppBar/AppBar.spec.tsx similarity index 80% rename from src/AppBar/AppBar.spec.js rename to src/AppBar/AppBar.spec.tsx index fcc5b459..6efb2bfc 100644 --- a/src/AppBar/AppBar.spec.js +++ b/src/AppBar/AppBar.spec.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import AppBar from './AppBar'; @@ -8,21 +7,21 @@ const defaultProps = { children: '' }; describe('', () => { it('should render header', () => { const { container } = render(); - const headerEl = container.firstChild; + const headerEl = container.firstElementChild; - expect(headerEl.tagName).toBe('HEADER'); + expect(headerEl && headerEl.tagName).toBe('HEADER'); }); it('should render children', () => { const { container } = render(A nice app bar); - const headerEl = container.firstChild; + const headerEl = container.firstElementChild; expect(headerEl).toHaveTextContent('A nice app bar'); }); it('should render fixed prop properly', () => { const { container, rerender } = render(); - const headerEl = container.firstChild; + const headerEl = container.firstElementChild; expect(headerEl).toHaveStyleRule('position', 'fixed'); @@ -35,7 +34,7 @@ describe('', () => { const { container } = render( ); - const headerEl = container.firstChild; + const headerEl = container.firstElementChild; expect(headerEl).toHaveAttribute('style', 'background-color: papayawhip;'); }); @@ -43,7 +42,7 @@ describe('', () => { it('should render custom props', () => { const customProps = { title: 'cool-header' }; const { container } = render(); - const headerEl = container.firstChild; + const headerEl = container.firstElementChild; expect(headerEl).toHaveAttribute('title', 'cool-header'); }); diff --git a/src/AppBar/AppBar.stories.js b/src/AppBar/AppBar.stories.tsx similarity index 95% rename from src/AppBar/AppBar.stories.js rename to src/AppBar/AppBar.stories.tsx index 02ab60f2..09b518b8 100644 --- a/src/AppBar/AppBar.stories.js +++ b/src/AppBar/AppBar.stories.tsx @@ -9,6 +9,7 @@ import { ListItem, Divider } from 'react95'; +import { ComponentMeta } from '@storybook/react'; import logoIMG from '../assets/images/logo.png'; const Wrapper = styled.div` @@ -20,7 +21,7 @@ export default { title: 'AppBar', component: AppBar, decorators: [story => {story()}] -}; +} as ComponentMeta; export function Default() { const [open, setOpen] = React.useState(false); diff --git a/src/AppBar/AppBar.tsx b/src/AppBar/AppBar.tsx new file mode 100644 index 00000000..29d9f5b5 --- /dev/null +++ b/src/AppBar/AppBar.tsx @@ -0,0 +1,36 @@ +import React, { forwardRef } from 'react'; +import styled from 'styled-components'; +import { CommonStyledProps } from '../types'; +import { createBorderStyles, createBoxStyles } from '../common'; + +export type AppBarProps = { + children: React.ReactNode; + fixed?: boolean; +} & React.HTMLAttributes & + CommonStyledProps; + +const StyledAppBar = styled.header` + ${createBorderStyles()}; + ${createBoxStyles()}; + + position: ${props => (props.fixed ? 'fixed' : 'absolute')}; + top: 0; + right: 0; + left: auto; + display: flex; + flex-direction: column; + width: 100%; +`; + +const AppBar = forwardRef(function AppBar( + { children, fixed = true, ...otherProps }, + ref +) { + return ( + + {children} + + ); +}); + +export default AppBar; From b41b51e2ea6b69d9e531dd59eda99ef51ec17fd8 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 24 Jul 2022 12:01:26 -0400 Subject: [PATCH 009/100] feat(common): convert to TypeScript and export types --- ...lled.js => useControlledOrUncontrolled.ts} | 0 ...useForkRef.spec.js => useForkRef.spec.tsx} | 81 ++++++++++--------- .../hooks/{useForkRef.js => useForkRef.ts} | 10 ++- ...IsFocusVisible.js => useIsFocusVisible.ts} | 0 src/common/{index.js => index.ts} | 24 ++++-- src/common/{styleReset.js => styleReset.ts} | 0 src/common/system.js | 8 -- src/common/system.ts | 9 +++ src/common/themes/{aiee.js => aiee.ts} | 4 +- src/common/themes/{ash.js => ash.ts} | 4 +- .../themes/{azureOrange.js => azureOrange.ts} | 4 +- src/common/themes/{bee.js => bee.ts} | 4 +- .../{blackAndWhite.js => blackAndWhite.ts} | 4 +- src/common/themes/{blue.js => blue.ts} | 4 +- src/common/themes/{brick.js => brick.ts} | 4 +- src/common/themes/{candy.js => candy.ts} | 4 +- src/common/themes/{cherry.js => cherry.ts} | 4 +- .../themes/{coldGray.js => coldGray.ts} | 4 +- .../{counterStrike.js => counterStrike.ts} | 4 +- .../themes/{darkTeal.js => darkTeal.ts} | 4 +- src/common/themes/{denim.js => denim.ts} | 4 +- .../themes/{eggplant.js => eggplant.ts} | 4 +- src/common/themes/{fxDev.js => fxDev.ts} | 4 +- .../{highContrast.js => highContrast.ts} | 4 +- src/common/themes/{honey.js => honey.ts} | 4 +- .../{hotChocolate.js => hotChocolate.ts} | 4 +- .../themes/{hotdogStand.js => hotdogStand.ts} | 4 +- src/common/themes/{lilac.js => lilac.ts} | 4 +- .../{lilacRoseDark.js => lilacRoseDark.ts} | 4 +- src/common/themes/{maple.js => maple.ts} | 4 +- src/common/themes/{marine.js => marine.ts} | 4 +- src/common/themes/{matrix.js => matrix.ts} | 4 +- .../themes/{millenium.js => millenium.ts} | 4 +- .../themes/{modernDark.js => modernDark.ts} | 4 +- .../themes/{molecule.js => molecule.ts} | 4 +- .../themes/{monochrome.js => monochrome.ts} | 0 .../{ninjaTurtles.js => ninjaTurtles.ts} | 4 +- src/common/themes/{olive.js => olive.ts} | 4 +- .../themes/{original.js => original.ts} | 4 +- .../{pamelaAnderson.js => pamelaAnderson.ts} | 4 +- .../{peggysPastels.js => peggysPastels.ts} | 4 +- src/common/themes/{plum.js => plum.ts} | 4 +- .../themes/{polarized.js => polarized.ts} | 4 +- .../themes/{powerShell.js => powerShell.ts} | 4 +- .../themes/{rainyDay.js => rainyDay.ts} | 4 +- .../themes/{raspberry.js => raspberry.ts} | 4 +- src/common/themes/{redWine.js => redWine.ts} | 4 +- src/common/themes/{rose.js => rose.ts} | 4 +- .../themes/{seawater.js => seawater.ts} | 4 +- .../themes/{shelbiTeal.js => shelbiTeal.ts} | 4 +- src/common/themes/{slate.js => slate.ts} | 4 +- .../{solarizedDark.js => solarizedDark.ts} | 4 +- .../{solarizedLight.js => solarizedLight.ts} | 4 +- src/common/themes/{spruce.js => spruce.ts} | 4 +- .../themes/{stormClouds.js => stormClouds.ts} | 4 +- .../{theSixtiesUSA.js => theSixtiesUSA.ts} | 4 +- .../themes/{tokyoDark.js => tokyoDark.ts} | 4 +- src/common/themes/{toner.js => toner.ts} | 4 +- src/common/themes/{tooSexy.js => tooSexy.ts} | 4 +- src/common/themes/{travel.js => travel.ts} | 4 +- .../themes/{vaporTeal.js => vaporTeal.ts} | 4 +- .../themes/{vermillion.js => vermillion.ts} | 4 +- .../themes/{violetDark.js => violetDark.ts} | 4 +- ...esqueMidnight.js => vistaesqueMidnight.ts} | 4 +- src/common/themes/{water.js => water.ts} | 4 +- src/common/themes/{white.js => white.ts} | 4 +- .../themes/{windows1.js => windows1.ts} | 4 +- src/common/themes/{wmii.js => wmii.ts} | 4 +- .../utils/{index.spec.js => index.spec.ts} | 0 src/common/utils/{index.js => index.ts} | 29 +++---- 70 files changed, 265 insertions(+), 132 deletions(-) rename src/common/hooks/{useControlledOrUncontrolled.js => useControlledOrUncontrolled.ts} (100%) rename src/common/hooks/{useForkRef.spec.js => useForkRef.spec.tsx} (57%) rename src/common/hooks/{useForkRef.js => useForkRef.ts} (70%) rename src/common/hooks/{useIsFocusVisible.js => useIsFocusVisible.ts} (100%) rename src/common/{index.js => index.ts} (90%) rename src/common/{styleReset.js => styleReset.ts} (100%) delete mode 100644 src/common/system.js create mode 100644 src/common/system.ts rename src/common/themes/{aiee.js => aiee.ts} (96%) rename src/common/themes/{ash.js => ash.ts} (96%) rename src/common/themes/{azureOrange.js => azureOrange.ts} (94%) rename src/common/themes/{bee.js => bee.ts} (94%) rename src/common/themes/{blackAndWhite.js => blackAndWhite.ts} (94%) rename src/common/themes/{blue.js => blue.ts} (96%) rename src/common/themes/{brick.js => brick.ts} (94%) rename src/common/themes/{candy.js => candy.ts} (94%) rename src/common/themes/{cherry.js => cherry.ts} (96%) rename src/common/themes/{coldGray.js => coldGray.ts} (94%) rename src/common/themes/{counterStrike.js => counterStrike.ts} (94%) rename src/common/themes/{darkTeal.js => darkTeal.ts} (96%) rename src/common/themes/{denim.js => denim.ts} (96%) rename src/common/themes/{eggplant.js => eggplant.ts} (94%) rename src/common/themes/{fxDev.js => fxDev.ts} (96%) rename src/common/themes/{highContrast.js => highContrast.ts} (94%) rename src/common/themes/{honey.js => honey.ts} (96%) rename src/common/themes/{hotChocolate.js => hotChocolate.ts} (96%) rename src/common/themes/{hotdogStand.js => hotdogStand.ts} (96%) rename src/common/themes/{lilac.js => lilac.ts} (94%) rename src/common/themes/{lilacRoseDark.js => lilacRoseDark.ts} (94%) rename src/common/themes/{maple.js => maple.ts} (94%) rename src/common/themes/{marine.js => marine.ts} (94%) rename src/common/themes/{matrix.js => matrix.ts} (94%) rename src/common/themes/{millenium.js => millenium.ts} (94%) rename src/common/themes/{modernDark.js => modernDark.ts} (94%) rename src/common/themes/{molecule.js => molecule.ts} (94%) rename src/common/themes/{monochrome.js => monochrome.ts} (100%) rename src/common/themes/{ninjaTurtles.js => ninjaTurtles.ts} (94%) rename src/common/themes/{olive.js => olive.ts} (94%) rename src/common/themes/{original.js => original.ts} (94%) rename src/common/themes/{pamelaAnderson.js => pamelaAnderson.ts} (94%) rename src/common/themes/{peggysPastels.js => peggysPastels.ts} (96%) rename src/common/themes/{plum.js => plum.ts} (94%) rename src/common/themes/{polarized.js => polarized.ts} (96%) rename src/common/themes/{powerShell.js => powerShell.ts} (96%) rename src/common/themes/{rainyDay.js => rainyDay.ts} (94%) rename src/common/themes/{raspberry.js => raspberry.ts} (96%) rename src/common/themes/{redWine.js => redWine.ts} (96%) rename src/common/themes/{rose.js => rose.ts} (94%) rename src/common/themes/{seawater.js => seawater.ts} (96%) rename src/common/themes/{shelbiTeal.js => shelbiTeal.ts} (96%) rename src/common/themes/{slate.js => slate.ts} (94%) rename src/common/themes/{solarizedDark.js => solarizedDark.ts} (96%) rename src/common/themes/{solarizedLight.js => solarizedLight.ts} (96%) rename src/common/themes/{spruce.js => spruce.ts} (94%) rename src/common/themes/{stormClouds.js => stormClouds.ts} (96%) rename src/common/themes/{theSixtiesUSA.js => theSixtiesUSA.ts} (94%) rename src/common/themes/{tokyoDark.js => tokyoDark.ts} (94%) rename src/common/themes/{toner.js => toner.ts} (96%) rename src/common/themes/{tooSexy.js => tooSexy.ts} (94%) rename src/common/themes/{travel.js => travel.ts} (94%) rename src/common/themes/{vaporTeal.js => vaporTeal.ts} (94%) rename src/common/themes/{vermillion.js => vermillion.ts} (94%) rename src/common/themes/{violetDark.js => violetDark.ts} (94%) rename src/common/themes/{vistaesqueMidnight.js => vistaesqueMidnight.ts} (96%) rename src/common/themes/{water.js => water.ts} (94%) rename src/common/themes/{white.js => white.ts} (96%) rename src/common/themes/{windows1.js => windows1.ts} (96%) rename src/common/themes/{wmii.js => wmii.ts} (96%) rename src/common/utils/{index.spec.js => index.spec.ts} (100%) rename src/common/utils/{index.js => index.ts} (80%) diff --git a/src/common/hooks/useControlledOrUncontrolled.js b/src/common/hooks/useControlledOrUncontrolled.ts similarity index 100% rename from src/common/hooks/useControlledOrUncontrolled.js rename to src/common/hooks/useControlledOrUncontrolled.ts diff --git a/src/common/hooks/useForkRef.spec.js b/src/common/hooks/useForkRef.spec.tsx similarity index 57% rename from src/common/hooks/useForkRef.spec.js rename to src/common/hooks/useForkRef.spec.tsx index 855d9e5f..d4b4cb8c 100644 --- a/src/common/hooks/useForkRef.spec.js +++ b/src/common/hooks/useForkRef.spec.tsx @@ -1,8 +1,5 @@ -/* eslint-disable react/require-default-props */ -/* eslint-disable react/forbid-prop-types */ -import React from 'react'; import { render } from '@testing-library/react'; -import propTypes from 'prop-types'; +import React from 'react'; import useForkRef from './useForkRef'; @@ -18,10 +15,10 @@ afterEach(() => { describe('useForkRef', () => { it('returns a single ref-setter function that forks the ref to its inputs', () => { - function Component(props) { + function Component(props: { innerRef: React.RefObject }) { const { innerRef } = props; - const ownRef = React.useRef(null); - const [, forceUpdate] = React.useState(0); + const ownRef = React.useRef(); + const [, forceUpdate] = React.useState(true); React.useEffect(() => forceUpdate(n => !n), []); const handleRef = useForkRef(innerRef, ownRef); @@ -31,19 +28,18 @@ describe('useForkRef', () => { ); } - Component.propTypes = { - innerRef: propTypes.any - }; - - const outerRef = React.createRef(); + const outerRef = React.createRef(); render(); - expect(outerRef.current.textContent).toBe('has a ref'); + expect(outerRef.current?.textContent).toBe('has a ref'); expect(console.error).not.toHaveBeenCalled(); }); it('forks if only one of the branches requires a ref', () => { - const Component = React.forwardRef(function Component(props, ref) { + const Component = React.forwardRef(function Component( + _, + ref + ) { const [hasRef, setHasRef] = React.useState(false); const handleOwnRef = React.useCallback(() => setHasRef(true), []); const handleRef = useForkRef(handleOwnRef, ref); @@ -58,16 +54,26 @@ describe('useForkRef', () => { }); it('does nothing if none of the forked branches requires a ref', () => { - const Outer = React.forwardRef(function Outer(props, ref) { + const setRef = jest.fn(); + + type OuterProps = { + children: React.ReactElement; + }; + + const Outer = React.forwardRef(function Outer( + props, + ref + ) { const { children } = props; - const handleRef = useForkRef(children.ref, ref); - return React.cloneElement(children, { ref: handleRef }); - }); + // TODO: Fix this test as reading ref from children is not allowed so not available on React types + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + const handleRef = useForkRef(children?.ref, ref); + setRef(handleRef); - // TODO: Figure out how to make react/no-unused-prop-types happy with the children - // eslint-disable-next-line react/no-unused-prop-types - Outer.propTypes = { children: propTypes.element.isRequired }; + return children ? React.cloneElement(children, { ref: handleRef }) : null; + }); function Inner() { return
; @@ -79,37 +85,38 @@ describe('useForkRef', () => { ); expect(console.error).not.toHaveBeenCalled(); + expect(setRef).toHaveBeenCalledWith(null); }); describe('changing refs', () => { - function Div(props) { - const { leftRef, rightRef, ...other } = props; + function Div( + props: { + leftRef?: React.Ref; + rightRef?: React.Ref; + } & React.HTMLAttributes + ) { + const { leftRef = null, rightRef = null, ...other } = props; const handleRef = useForkRef(leftRef, rightRef); return
; } - Div.propTypes = { - leftRef: propTypes.oneOfType([propTypes.func, propTypes.object]), - rightRef: propTypes.oneOfType([propTypes.func, propTypes.object]) - }; - it('handles changing from no ref to some ref', () => { const { rerender } = render(
); expect(console.error).not.toHaveBeenCalled(); - const ref = React.createRef(); + const ref = React.createRef(); rerender(
); - expect(ref.current.id).toBe('test'); + expect(ref.current?.id).toBe('test'); expect(console.error).not.toHaveBeenCalled(); }); it('cleans up detached refs', () => { - const firstLeftRef = React.createRef(); - const firstRightRef = React.createRef(); - const secondRightRef = React.createRef(); + const firstLeftRef = React.createRef(); + const firstRightRef = React.createRef(); + const secondRightRef = React.createRef(); const { rerender } = render(
@@ -117,17 +124,17 @@ describe('useForkRef', () => { expect(console.error).not.toHaveBeenCalled(); - expect(firstLeftRef.current.id).toBe('test'); - expect(firstRightRef.current.id).toBe('test'); + expect(firstLeftRef.current?.id).toBe('test'); + expect(firstRightRef.current?.id).toBe('test'); expect(secondRightRef.current).toBe(null); rerender(
); - expect(firstLeftRef.current.id).toBe('test'); + expect(firstLeftRef.current?.id).toBe('test'); expect(firstRightRef.current).toBe(null); - expect(secondRightRef.current.id).toBe('test'); + expect(secondRightRef.current?.id).toBe('test'); }); }); }); diff --git a/src/common/hooks/useForkRef.js b/src/common/hooks/useForkRef.ts similarity index 70% rename from src/common/hooks/useForkRef.js rename to src/common/hooks/useForkRef.ts index 41c77065..78c4abf6 100644 --- a/src/common/hooks/useForkRef.js +++ b/src/common/hooks/useForkRef.ts @@ -1,7 +1,10 @@ // Straight out copied from https://github.com/mui-org/material-ui 😂 import * as React from 'react'; -function setRef(ref, value) { +function setRef( + ref: React.RefCallback | React.MutableRefObject | null, + value: T +) { if (typeof ref === 'function') { ref(value); } else if (ref) { @@ -10,7 +13,10 @@ function setRef(ref, value) { } } -export default function useForkRef(refA, refB) { +export default function useForkRef( + refA: React.RefCallback | React.MutableRefObject | null, + refB: React.RefCallback | React.MutableRefObject | null +): React.RefCallback | null { /** * This will create a new function if the ref props change and are defined. * This means react will call the old forkRef with `null` and the new forkRef diff --git a/src/common/hooks/useIsFocusVisible.js b/src/common/hooks/useIsFocusVisible.ts similarity index 100% rename from src/common/hooks/useIsFocusVisible.js rename to src/common/hooks/useIsFocusVisible.ts diff --git a/src/common/index.js b/src/common/index.ts similarity index 90% rename from src/common/index.js rename to src/common/index.ts index 1ab65ee1..644a7870 100644 --- a/src/common/index.js +++ b/src/common/index.ts @@ -1,4 +1,7 @@ -import { css } from 'styled-components'; +import { css, ThemedStyledProps } from 'styled-components'; +import { Color, CommonThemeProps, Theme } from '../types'; + +type CSSProps = ThemedStyledProps; export const shadow = '4px 4px 10px 0 rgba(0, 0, 0, 0.35)'; export const insetShadow = 'inset 2px 2px 3px rgba(0,0,0,0.2)'; @@ -9,12 +12,14 @@ export const createDisabledTextStyles = () => css` text-shadow: 1px 1px ${({ theme }) => theme.materialTextDisabledShadow}; /* filter: grayscale(100%); */ `; + export const createBoxStyles = () => css` box-sizing: border-box; display: inline-block; background: ${({ theme }) => theme.material}; color: ${({ theme }) => theme.materialText}; `; + // TODO for flat box styles add checkered background when disabled (not solid color) export const createHatchedBackground = ({ mainColor = 'black', @@ -41,17 +46,19 @@ export const createHatchedBackground = ({ background-size: ${`${pixelSize * 2}px ${pixelSize * 2}px`}; background-position: 0 0, ${`${pixelSize}px ${pixelSize}px`}; `; + export const createFlatBoxStyles = () => css` position: relative; box-sizing: border-box; display: inline-block; color: ${({ theme }) => theme.materialText}; - background: ${({ theme, isDisabled }) => + background: ${({ theme, isDisabled }: CSSProps) => isDisabled ? theme.flatLight : theme.canvas}; border: 2px solid ${({ theme }) => theme.canvas}; outline: 2px solid ${({ theme }) => theme.flatDark}; outline-offset: -4px; `; + export const createBorderStyles = ({ invert = false, windowBorders = false @@ -64,8 +71,8 @@ export const createBorderStyles = ({ border-top-color: ${({ theme }) => theme.borderDarkest}; border-right-color: ${({ theme }) => theme.borderLightest}; border-bottom-color: ${({ theme }) => theme.borderLightest}; - box-shadow: ${props => props.shadow && `${shadow}, `} inset 1px 1px 0px - 1px ${({ theme }) => theme.borderDark}, + box-shadow: ${(props: CSSProps) => props.shadow && `${shadow}, `} inset + 1px 1px 0px 1px ${({ theme }) => theme.borderDark}, inset -1px -1px 0 1px ${({ theme }) => theme.borderLight}; ` : css` @@ -77,12 +84,13 @@ export const createBorderStyles = ({ windowBorders ? theme.borderLight : theme.borderLightest}; border-right-color: ${({ theme }) => theme.borderDarkest}; border-bottom-color: ${({ theme }) => theme.borderDarkest}; - box-shadow: ${props => props.shadow && `${shadow}, `} inset 1px 1px 0px - 1px + box-shadow: ${(props: CSSProps) => props.shadow && `${shadow}, `} inset + 1px 1px 0px 1px ${({ theme }) => windowBorders ? theme.borderLightest : theme.borderLight}, inset -1px -1px 0 1px ${({ theme }) => theme.borderDark}; `; + export const createWellBorderStyles = (invert = false) => invert ? css` @@ -106,10 +114,10 @@ export const focusOutline = () => css` outline: 2px dotted ${({ theme }) => theme.materialText}; `; -const nodeBtoa = b => Buffer.from(b).toString('base64'); +const nodeBtoa = (string: string) => Buffer.from(string).toString('base64'); const base64encode = typeof btoa !== 'undefined' ? btoa : nodeBtoa; -const createTriangleSVG = (color, angle = 0) => { +const createTriangleSVG = (color: Color, angle = 0) => { const svg = ` diff --git a/src/common/styleReset.js b/src/common/styleReset.ts similarity index 100% rename from src/common/styleReset.js rename to src/common/styleReset.ts diff --git a/src/common/system.js b/src/common/system.js deleted file mode 100644 index db488abb..00000000 --- a/src/common/system.js +++ /dev/null @@ -1,8 +0,0 @@ -// TODO - implement styled-system - -// eslint-disable-next-line import/prefer-default-export -export const blockSizes = { - sm: '28px', - md: '36px', - lg: '44px' -}; diff --git a/src/common/system.ts b/src/common/system.ts new file mode 100644 index 00000000..deba781b --- /dev/null +++ b/src/common/system.ts @@ -0,0 +1,9 @@ +// TODO - implement styled-system + +import { Sizes } from '../types'; + +export const blockSizes: Record = { + sm: '28px', + md: '36px', + lg: '44px' +}; diff --git a/src/common/themes/aiee.js b/src/common/themes/aiee.ts similarity index 96% rename from src/common/themes/aiee.js rename to src/common/themes/aiee.ts index b01661a7..80ac9f1e 100644 --- a/src/common/themes/aiee.js +++ b/src/common/themes/aiee.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Aiee-668092636 */ +import { Theme } from '../../types'; + export default { name: 'aiee', anchor: 'rgb(0,0,128)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(0,62,109)', progress: 'rgb(251,211,61)', tooltip: 'rgb(255,243,185)' -}; +} as Theme; diff --git a/src/common/themes/ash.js b/src/common/themes/ash.ts similarity index 96% rename from src/common/themes/ash.js rename to src/common/themes/ash.ts index 1173fb5e..c402b4b4 100644 --- a/src/common/themes/ash.js +++ b/src/common/themes/ash.ts @@ -1,6 +1,8 @@ /* "Ash" by tPenguinLTG * https://www.deviantart.com/tpenguinltg/art/Ash-575566643 */ +import { Theme } from '../../types'; + export default { name: 'ash', anchor: 'rgb(192, 192, 192)', @@ -34,4 +36,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(0, 0, 0)', tooltip: 'rgb(0, 0, 0)' -}; +} as Theme; diff --git a/src/common/themes/azureOrange.js b/src/common/themes/azureOrange.ts similarity index 94% rename from src/common/themes/azureOrange.js rename to src/common/themes/azureOrange.ts index a197f436..26b6ef48 100644 --- a/src/common/themes/azureOrange.js +++ b/src/common/themes/azureOrange.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'azureOrange', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#000000', progress: '#F46036', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/bee.js b/src/common/themes/bee.ts similarity index 94% rename from src/common/themes/bee.js rename to src/common/themes/bee.ts index 22e2d339..405fa8f8 100644 --- a/src/common/themes/bee.js +++ b/src/common/themes/bee.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'bee', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#ffffff', progress: '#0C1618', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/blackAndWhite.js b/src/common/themes/blackAndWhite.ts similarity index 94% rename from src/common/themes/blackAndWhite.js rename to src/common/themes/blackAndWhite.ts index f212234a..a5c67967 100644 --- a/src/common/themes/blackAndWhite.js +++ b/src/common/themes/blackAndWhite.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'blackAndWhite', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#ffffff', progress: '#000000', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/blue.js b/src/common/themes/blue.ts similarity index 96% rename from src/common/themes/blue.js rename to src/common/themes/blue.ts index fac0c68b..f835873c 100644 --- a/src/common/themes/blue.js +++ b/src/common/themes/blue.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Blue-525167751 */ +import { Theme } from '../../types'; + export default { name: 'blue', anchor: 'rgb(0, 0, 128)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(51, 153, 255)', tooltip: 'rgb(225, 225, 255)' -}; +} as Theme; diff --git a/src/common/themes/brick.js b/src/common/themes/brick.ts similarity index 94% rename from src/common/themes/brick.js rename to src/common/themes/brick.ts index 4aa02950..326246aa 100644 --- a/src/common/themes/brick.js +++ b/src/common/themes/brick.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'brick', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#ffffff', progress: '#8e0101', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/candy.js b/src/common/themes/candy.ts similarity index 94% rename from src/common/themes/candy.js rename to src/common/themes/candy.ts index 7f18fab5..e224dfe6 100644 --- a/src/common/themes/candy.js +++ b/src/common/themes/candy.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'candy', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#EFF1F3', progress: '#256EFF', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/cherry.js b/src/common/themes/cherry.ts similarity index 96% rename from src/common/themes/cherry.js rename to src/common/themes/cherry.ts index 1ef0a8c2..c28042c8 100644 --- a/src/common/themes/cherry.js +++ b/src/common/themes/cherry.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Cherry-747961418 */ +import { Theme } from '../../types'; + export default { name: 'cherry', anchor: 'rgb(128, 0, 1)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(106, 10, 36)', tooltip: 'rgb(225, 254, 255)' -}; +} as Theme; diff --git a/src/common/themes/coldGray.js b/src/common/themes/coldGray.ts similarity index 94% rename from src/common/themes/coldGray.js rename to src/common/themes/coldGray.ts index 70955785..62aca455 100644 --- a/src/common/themes/coldGray.js +++ b/src/common/themes/coldGray.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'coldGray', @@ -32,4 +34,4 @@ export default { materialTextInvert: '#c7c7df', progress: '#8d88c2', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/counterStrike.js b/src/common/themes/counterStrike.ts similarity index 94% rename from src/common/themes/counterStrike.js rename to src/common/themes/counterStrike.ts index 24a1f863..b1556b35 100644 --- a/src/common/themes/counterStrike.js +++ b/src/common/themes/counterStrike.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'counterStrike', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#fefefe', progress: '#978830', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/darkTeal.js b/src/common/themes/darkTeal.ts similarity index 96% rename from src/common/themes/darkTeal.js rename to src/common/themes/darkTeal.ts index 3e6aaef7..486f3734 100644 --- a/src/common/themes/darkTeal.js +++ b/src/common/themes/darkTeal.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Teal-for-Shelbi-Dark-631177772 */ +import { Theme } from '../../types'; + export default { name: 'darkTeal', anchor: 'rgb(0, 132, 132)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(0, 128, 128)', tooltip: 'rgb(0, 32, 32)' -}; +} as Theme; diff --git a/src/common/themes/denim.js b/src/common/themes/denim.ts similarity index 96% rename from src/common/themes/denim.js rename to src/common/themes/denim.ts index b2782a0f..6910bcf2 100644 --- a/src/common/themes/denim.js +++ b/src/common/themes/denim.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Denim-870494744 */ +import { Theme } from '../../types'; + export default { name: 'denim', anchor: 'rgb(0, 0, 128)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(10, 36, 106)', tooltip: 'rgb(255, 255, 225)' -}; +} as Theme; diff --git a/src/common/themes/eggplant.js b/src/common/themes/eggplant.ts similarity index 94% rename from src/common/themes/eggplant.js rename to src/common/themes/eggplant.ts index 739d5dd6..02456b02 100644 --- a/src/common/themes/eggplant.js +++ b/src/common/themes/eggplant.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'eggplant', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#ffffff', progress: '#4b8178', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/fxDev.js b/src/common/themes/fxDev.ts similarity index 96% rename from src/common/themes/fxDev.js rename to src/common/themes/fxDev.ts index 205eea4b..67e3a635 100644 --- a/src/common/themes/fxDev.js +++ b/src/common/themes/fxDev.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/FxDev-701274128 */ +import { Theme } from '../../types'; + export default { name: 'fxDev', anchor: 'rgb(47, 138, 202)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(7, 77, 117)', tooltip: 'rgb(243, 242, 219)' -}; +} as Theme; diff --git a/src/common/themes/highContrast.js b/src/common/themes/highContrast.ts similarity index 94% rename from src/common/themes/highContrast.js rename to src/common/themes/highContrast.ts index de7dd0a2..6319990c 100644 --- a/src/common/themes/highContrast.js +++ b/src/common/themes/highContrast.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'highContrast', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#ffffff', progress: '#8e0284', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/honey.js b/src/common/themes/honey.ts similarity index 96% rename from src/common/themes/honey.js rename to src/common/themes/honey.ts index 2f4a1d35..47aa9c7b 100644 --- a/src/common/themes/honey.js +++ b/src/common/themes/honey.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Honey-632126512 */ +import { Theme } from '../../types'; + export default { name: 'honey', anchor: 'rgb(128, 128, 0)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(255, 255, 0)', progress: 'rgb(170, 123, 0)', tooltip: 'rgb(255, 220, 128)' -}; +} as Theme; diff --git a/src/common/themes/hotChocolate.js b/src/common/themes/hotChocolate.ts similarity index 96% rename from src/common/themes/hotChocolate.js rename to src/common/themes/hotChocolate.ts index 8f1d0509..670a4f55 100644 --- a/src/common/themes/hotChocolate.js +++ b/src/common/themes/hotChocolate.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Hot-Chocolate-654380979 */ +import { Theme } from '../../types'; + export default { name: 'hotChocolate', anchor: 'rgb(128, 96, 64)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(128, 96, 64)', tooltip: 'rgb(219, 200, 181)' -}; +} as Theme; diff --git a/src/common/themes/hotdogStand.js b/src/common/themes/hotdogStand.ts similarity index 96% rename from src/common/themes/hotdogStand.js rename to src/common/themes/hotdogStand.ts index 0ce38537..9bcc152e 100644 --- a/src/common/themes/hotdogStand.js +++ b/src/common/themes/hotdogStand.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Hotdog-Stand-525606846 */ +import { Theme } from '../../types'; + export default { name: 'hotdogStand', anchor: 'rgb(255, 255, 0)', @@ -35,4 +37,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(0, 0, 0)', tooltip: 'rgb(255, 255, 225)' -}; +} as Theme; diff --git a/src/common/themes/lilac.js b/src/common/themes/lilac.ts similarity index 94% rename from src/common/themes/lilac.js rename to src/common/themes/lilac.ts index 8a88080e..07a6722d 100644 --- a/src/common/themes/lilac.js +++ b/src/common/themes/lilac.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'lilac', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#ffffff', progress: '#5e4dba', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/lilacRoseDark.js b/src/common/themes/lilacRoseDark.ts similarity index 94% rename from src/common/themes/lilacRoseDark.js rename to src/common/themes/lilacRoseDark.ts index 3474744c..3b90b2a9 100644 --- a/src/common/themes/lilacRoseDark.js +++ b/src/common/themes/lilacRoseDark.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'lilacRoseDark', @@ -32,4 +34,4 @@ export default { materialTextInvert: '#ecbfe3', progress: '#713259', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/maple.js b/src/common/themes/maple.ts similarity index 94% rename from src/common/themes/maple.js rename to src/common/themes/maple.ts index 7974825c..ea8fce75 100644 --- a/src/common/themes/maple.js +++ b/src/common/themes/maple.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'maple', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#ffffff', progress: '#8e0101', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/marine.js b/src/common/themes/marine.ts similarity index 94% rename from src/common/themes/marine.js rename to src/common/themes/marine.ts index 5d33055a..e00979c8 100644 --- a/src/common/themes/marine.js +++ b/src/common/themes/marine.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'marine', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#ffffff', progress: '#000080', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/matrix.js b/src/common/themes/matrix.ts similarity index 94% rename from src/common/themes/matrix.js rename to src/common/themes/matrix.ts index 476b3de0..52d0e2e5 100644 --- a/src/common/themes/matrix.js +++ b/src/common/themes/matrix.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'matrix', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#ffffff', progress: '#000000', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/millenium.js b/src/common/themes/millenium.ts similarity index 94% rename from src/common/themes/millenium.js rename to src/common/themes/millenium.ts index ad3d6e58..e455031c 100644 --- a/src/common/themes/millenium.js +++ b/src/common/themes/millenium.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'millenium', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#ffffff', progress: '#00256e', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/modernDark.js b/src/common/themes/modernDark.ts similarity index 94% rename from src/common/themes/modernDark.js rename to src/common/themes/modernDark.ts index 58633087..e49b85ad 100644 --- a/src/common/themes/modernDark.js +++ b/src/common/themes/modernDark.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'modernDark', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#202127', progress: '#f88702', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/molecule.js b/src/common/themes/molecule.ts similarity index 94% rename from src/common/themes/molecule.js rename to src/common/themes/molecule.ts index 7ae8da55..cc6ad0c3 100644 --- a/src/common/themes/molecule.js +++ b/src/common/themes/molecule.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'molecule', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#f1f5f6', progress: '#a03d49', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/monochrome.js b/src/common/themes/monochrome.ts similarity index 100% rename from src/common/themes/monochrome.js rename to src/common/themes/monochrome.ts diff --git a/src/common/themes/ninjaTurtles.js b/src/common/themes/ninjaTurtles.ts similarity index 94% rename from src/common/themes/ninjaTurtles.js rename to src/common/themes/ninjaTurtles.ts index 0fd91616..88277a69 100644 --- a/src/common/themes/ninjaTurtles.js +++ b/src/common/themes/ninjaTurtles.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'ninjaTurtles', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#000000', progress: '#FF1D15', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/olive.js b/src/common/themes/olive.ts similarity index 94% rename from src/common/themes/olive.js rename to src/common/themes/olive.ts index b5d79a43..70a58fae 100644 --- a/src/common/themes/olive.js +++ b/src/common/themes/olive.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'olive', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#000000', progress: '#F3DE2C', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/original.js b/src/common/themes/original.ts similarity index 94% rename from src/common/themes/original.js rename to src/common/themes/original.ts index f52352fa..f8c9dc30 100644 --- a/src/common/themes/original.js +++ b/src/common/themes/original.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'original', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#fefefe', progress: '#060084', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/pamelaAnderson.js b/src/common/themes/pamelaAnderson.ts similarity index 94% rename from src/common/themes/pamelaAnderson.js rename to src/common/themes/pamelaAnderson.ts index 0e7667c3..406ccbb8 100644 --- a/src/common/themes/pamelaAnderson.js +++ b/src/common/themes/pamelaAnderson.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'pamelaAnderson', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#F1E4E8', progress: '#004FFF', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/peggysPastels.js b/src/common/themes/peggysPastels.ts similarity index 96% rename from src/common/themes/peggysPastels.js rename to src/common/themes/peggysPastels.ts index 567d6af4..fdde7824 100644 --- a/src/common/themes/peggysPastels.js +++ b/src/common/themes/peggysPastels.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Peggy-s-Pastels-505540096 */ +import { Theme } from '../../types'; + export default { name: 'peggysPastels', anchor: 'rgb(0, 128, 128)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(0, 0, 0)', progress: 'rgb(162, 219, 210)', tooltip: 'rgb(204, 255, 255)' -}; +} as Theme; diff --git a/src/common/themes/plum.js b/src/common/themes/plum.ts similarity index 94% rename from src/common/themes/plum.js rename to src/common/themes/plum.ts index 2d95ddea..5afdca30 100644 --- a/src/common/themes/plum.js +++ b/src/common/themes/plum.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'plum', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#ffffff', progress: '#483f63', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/polarized.js b/src/common/themes/polarized.ts similarity index 96% rename from src/common/themes/polarized.js rename to src/common/themes/polarized.ts index 6361bee6..823881ce 100644 --- a/src/common/themes/polarized.js +++ b/src/common/themes/polarized.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Polarized-557712217 */ +import { Theme } from '../../types'; + export default { name: 'polarized', anchor: 'rgb(160, 160, 128)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(0, 0, 255)', progress: 'rgb(192, 192, 64)', tooltip: 'rgb(16, 16, 240)' -}; +} as Theme; diff --git a/src/common/themes/powerShell.js b/src/common/themes/powerShell.ts similarity index 96% rename from src/common/themes/powerShell.js rename to src/common/themes/powerShell.ts index 461d3d38..936c35ce 100644 --- a/src/common/themes/powerShell.js +++ b/src/common/themes/powerShell.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/PowerShell-646065752 */ +import { Theme } from '../../types'; + export default { name: 'powerShell', anchor: 'rgb(0, 192, 0)', @@ -35,4 +37,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(0, 128, 128)', tooltip: 'rgb(255, 255, 225)' -}; +} as Theme; diff --git a/src/common/themes/rainyDay.js b/src/common/themes/rainyDay.ts similarity index 94% rename from src/common/themes/rainyDay.js rename to src/common/themes/rainyDay.ts index b61581ae..b6a74ca8 100644 --- a/src/common/themes/rainyDay.js +++ b/src/common/themes/rainyDay.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'rainyDay', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#ffffff', progress: '#4b6480', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/raspberry.js b/src/common/themes/raspberry.ts similarity index 96% rename from src/common/themes/raspberry.js rename to src/common/themes/raspberry.ts index cef186cb..be64cc6f 100644 --- a/src/common/themes/raspberry.js +++ b/src/common/themes/raspberry.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Raspberry-539289720 */ +import { Theme } from '../../types'; + export default { name: 'raspberry', anchor: 'rgb(10, 36, 106)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(10, 36, 106)', tooltip: 'rgb(255, 255, 225)' -}; +} as Theme; diff --git a/src/common/themes/redWine.js b/src/common/themes/redWine.ts similarity index 96% rename from src/common/themes/redWine.js rename to src/common/themes/redWine.ts index be4f46f2..083c2ce7 100644 --- a/src/common/themes/redWine.js +++ b/src/common/themes/redWine.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Red-Wine-545729607 */ +import { Theme } from '../../types'; + export default { name: 'redWine', anchor: 'rgb(255, 0, 0)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(192, 0, 0)', tooltip: 'rgb(64, 0, 0)' -}; +} as Theme; diff --git a/src/common/themes/rose.js b/src/common/themes/rose.ts similarity index 94% rename from src/common/themes/rose.js rename to src/common/themes/rose.ts index b51de610..dfd31bea 100644 --- a/src/common/themes/rose.js +++ b/src/common/themes/rose.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'rose', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#ffffff', progress: '#ab5a71', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/seawater.js b/src/common/themes/seawater.ts similarity index 96% rename from src/common/themes/seawater.js rename to src/common/themes/seawater.ts index 37c351b1..24aa747b 100644 --- a/src/common/themes/seawater.js +++ b/src/common/themes/seawater.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Seawater-736002425 */ +import { Theme } from '../../types'; + export default { name: 'seawater', anchor: 'rgb(0, 0, 128)', @@ -35,4 +37,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(0, 128, 128)', tooltip: 'rgb(255, 255, 225)' -}; +} as Theme; diff --git a/src/common/themes/shelbiTeal.js b/src/common/themes/shelbiTeal.ts similarity index 96% rename from src/common/themes/shelbiTeal.js rename to src/common/themes/shelbiTeal.ts index 88d88729..32e58d0a 100644 --- a/src/common/themes/shelbiTeal.js +++ b/src/common/themes/shelbiTeal.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Teal-for-Shelbi-506118460 */ +import { Theme } from '../../types'; + export default { name: 'shelbiTeal', anchor: 'rgb(0, 128, 128)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(0, 128, 128)', tooltip: 'rgb(224, 255, 255)' -}; +} as Theme; diff --git a/src/common/themes/slate.js b/src/common/themes/slate.ts similarity index 94% rename from src/common/themes/slate.js rename to src/common/themes/slate.ts index d40bd159..85013719 100644 --- a/src/common/themes/slate.js +++ b/src/common/themes/slate.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'slate', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#f2ffff', progress: '#448199', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/solarizedDark.js b/src/common/themes/solarizedDark.ts similarity index 96% rename from src/common/themes/solarizedDark.js rename to src/common/themes/solarizedDark.ts index 46c08f17..913d0f12 100644 --- a/src/common/themes/solarizedDark.js +++ b/src/common/themes/solarizedDark.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Solarized-Dark-592122068 */ +import { Theme } from '../../types'; + export default { name: 'solarizedDark', anchor: 'rgb(38, 139, 210)', @@ -35,4 +37,4 @@ export default { materialTextInvert: 'rgb(238, 232, 213)', progress: 'rgb(211, 54, 130)', tooltip: 'rgb(253, 246, 227)' -}; +} as Theme; diff --git a/src/common/themes/solarizedLight.js b/src/common/themes/solarizedLight.ts similarity index 96% rename from src/common/themes/solarizedLight.js rename to src/common/themes/solarizedLight.ts index 3b4e8c82..19e26cac 100644 --- a/src/common/themes/solarizedLight.js +++ b/src/common/themes/solarizedLight.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Solarized-Light-592124935 */ +import { Theme } from '../../types'; + export default { name: 'solarizedLight', anchor: 'rgb(38, 139, 210)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(238, 232, 213)', progress: 'rgb(211, 54, 130)', tooltip: 'rgb(253, 246, 227)' -}; +} as Theme; diff --git a/src/common/themes/spruce.js b/src/common/themes/spruce.ts similarity index 94% rename from src/common/themes/spruce.js rename to src/common/themes/spruce.ts index 6f61807a..dcae06e3 100644 --- a/src/common/themes/spruce.js +++ b/src/common/themes/spruce.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'spruce', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#fcfff6', progress: '#3d9961', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/stormClouds.js b/src/common/themes/stormClouds.ts similarity index 96% rename from src/common/themes/stormClouds.js rename to src/common/themes/stormClouds.ts index 990db4e6..087510a0 100644 --- a/src/common/themes/stormClouds.js +++ b/src/common/themes/stormClouds.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Storm-Clouds-613198674 */ +import { Theme } from '../../types'; + export default { name: 'stormClouds', anchor: 'rgb(64, 64, 255)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(128, 128, 0)', tooltip: 'rgb(48, 64, 80)' -}; +} as Theme; diff --git a/src/common/themes/theSixtiesUSA.js b/src/common/themes/theSixtiesUSA.ts similarity index 94% rename from src/common/themes/theSixtiesUSA.js rename to src/common/themes/theSixtiesUSA.ts index 5709372c..bb1605d4 100644 --- a/src/common/themes/theSixtiesUSA.js +++ b/src/common/themes/theSixtiesUSA.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'theSixtiesUSA', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#010001', progress: '#0f0', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/tokyoDark.js b/src/common/themes/tokyoDark.ts similarity index 94% rename from src/common/themes/tokyoDark.js rename to src/common/themes/tokyoDark.ts index 9bf6a0d4..2bd0b1a4 100644 --- a/src/common/themes/tokyoDark.js +++ b/src/common/themes/tokyoDark.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'tokyoDark', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#ffffff', progress: '#F61067', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/toner.js b/src/common/themes/toner.ts similarity index 96% rename from src/common/themes/toner.js rename to src/common/themes/toner.ts index 873fa68e..97d6f7f7 100644 --- a/src/common/themes/toner.js +++ b/src/common/themes/toner.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Toner-871968986 */ +import { Theme } from '../../types'; + export default { name: 'toner', anchor: 'rgb(0, 0, 128)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(0, 0, 0)', progress: 'rgb(255, 255, 255)', tooltip: 'rgb(128, 128, 128)' -}; +} as Theme; diff --git a/src/common/themes/tooSexy.js b/src/common/themes/tooSexy.ts similarity index 94% rename from src/common/themes/tooSexy.js rename to src/common/themes/tooSexy.ts index 31982aa7..b8f74deb 100644 --- a/src/common/themes/tooSexy.js +++ b/src/common/themes/tooSexy.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'tooSexy', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#ffffff', progress: '#474973', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/travel.js b/src/common/themes/travel.ts similarity index 94% rename from src/common/themes/travel.js rename to src/common/themes/travel.ts index 3f15f05a..aa670ab3 100644 --- a/src/common/themes/travel.js +++ b/src/common/themes/travel.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'travel', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#ffffff', progress: '#48604f', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/vaporTeal.js b/src/common/themes/vaporTeal.ts similarity index 94% rename from src/common/themes/vaporTeal.js rename to src/common/themes/vaporTeal.ts index c173bd9f..e1fe32f4 100644 --- a/src/common/themes/vaporTeal.js +++ b/src/common/themes/vaporTeal.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'vaporTeal', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#000000', progress: '#FF99C8', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/vermillion.js b/src/common/themes/vermillion.ts similarity index 94% rename from src/common/themes/vermillion.js rename to src/common/themes/vermillion.ts index e94f949e..cd256cc9 100644 --- a/src/common/themes/vermillion.js +++ b/src/common/themes/vermillion.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'vermillion', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#EFE9F4', progress: '#000103', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/violetDark.js b/src/common/themes/violetDark.ts similarity index 94% rename from src/common/themes/violetDark.js rename to src/common/themes/violetDark.ts index 921a7d86..13a614c9 100644 --- a/src/common/themes/violetDark.js +++ b/src/common/themes/violetDark.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'violetDark', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#c47bcc', progress: '#000080', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/vistaesqueMidnight.js b/src/common/themes/vistaesqueMidnight.ts similarity index 96% rename from src/common/themes/vistaesqueMidnight.js rename to src/common/themes/vistaesqueMidnight.ts index 514146fe..3af93809 100644 --- a/src/common/themes/vistaesqueMidnight.js +++ b/src/common/themes/vistaesqueMidnight.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Vista-esque-Midnight-557498234 */ +import { Theme } from '../../types'; + export default { name: 'vistaesqueMidnight', anchor: 'rgb(64, 64, 192)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(49, 106, 197)', tooltip: 'rgb(0, 0, 30)' -}; +} as Theme; diff --git a/src/common/themes/water.js b/src/common/themes/water.ts similarity index 94% rename from src/common/themes/water.js rename to src/common/themes/water.ts index 429711c2..83e902b3 100644 --- a/src/common/themes/water.js +++ b/src/common/themes/water.ts @@ -1,3 +1,5 @@ +import { Theme } from '../../types'; + export default { name: 'water', @@ -31,4 +33,4 @@ export default { materialTextInvert: '#ffffff', progress: '#72b3b4', tooltip: '#fefbcc' -}; +} as Theme; diff --git a/src/common/themes/white.js b/src/common/themes/white.ts similarity index 96% rename from src/common/themes/white.js rename to src/common/themes/white.ts index e885b85e..6655e25f 100644 --- a/src/common/themes/white.js +++ b/src/common/themes/white.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/White-870495714 */ +import { Theme } from '../../types'; + export default { name: 'white', anchor: 'rgb(0, 0, 128)', @@ -35,4 +37,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(0, 0, 128)', tooltip: 'rgb(255, 255, 128)' -}; +} as Theme; diff --git a/src/common/themes/windows1.js b/src/common/themes/windows1.ts similarity index 96% rename from src/common/themes/windows1.js rename to src/common/themes/windows1.ts index ffe617ce..ba0acf68 100644 --- a/src/common/themes/windows1.js +++ b/src/common/themes/windows1.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/Windows-1-573195578 */ +import { Theme } from '../../types'; + export default { name: 'windows1', anchor: 'rgb(0, 0, 85)', @@ -35,4 +37,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(0, 0, 0)', tooltip: 'rgb(255, 255, 85)' -}; +} as Theme; diff --git a/src/common/themes/wmii.js b/src/common/themes/wmii.ts similarity index 96% rename from src/common/themes/wmii.js rename to src/common/themes/wmii.ts index 7e7c5eab..5eee2e77 100644 --- a/src/common/themes/wmii.js +++ b/src/common/themes/wmii.ts @@ -2,6 +2,8 @@ * https://www.deviantart.com/tpenguinltg/art/wmii-683233676 */ +import { Theme } from '../../types'; + export default { name: 'wmii', anchor: 'rgb(129, 101, 79)', @@ -36,4 +38,4 @@ export default { materialTextInvert: 'rgb(255, 255, 255)', progress: 'rgb(0, 0, 0)', tooltip: 'rgb(255, 255, 225)' -}; +} as Theme; diff --git a/src/common/utils/index.spec.js b/src/common/utils/index.spec.ts similarity index 100% rename from src/common/utils/index.spec.js rename to src/common/utils/index.spec.ts diff --git a/src/common/utils/index.js b/src/common/utils/index.ts similarity index 80% rename from src/common/utils/index.js rename to src/common/utils/index.ts index 1ea27923..7b8b6d6c 100644 --- a/src/common/utils/index.js +++ b/src/common/utils/index.ts @@ -1,6 +1,8 @@ +import { WindowsTheme } from '../../types'; + export const noOp = () => {}; -export function clamp(value, min, max) { +export function clamp(value: number, min: number | null, max: number | null) { if (max !== null && value > max) { return max; } @@ -10,27 +12,24 @@ export function clamp(value, min, max) { return value; } -function linearGradient(left, right) { +function linearGradient(left: string, right: string) { return `linear-gradient(to right, ${left}, ${right})`; } -export function mapFromWindowsTheme(name, windowsTheme, useGradients) { - /* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */ +export function mapFromWindowsTheme( + name: string, + windowsTheme: WindowsTheme, + useGradients: boolean +) { const { - ButtonAlternateFace, ButtonDkShadow, ButtonFace, ButtonHilight, ButtonLight, ButtonShadow, ButtonText, - ActiveBorder, - AppWorkspace, Background, - InactiveBorder, - Scrollbar, Window, - WindowFrame, WindowText, ActiveTitle, GradientActiveTitle, @@ -38,18 +37,12 @@ export function mapFromWindowsTheme(name, windowsTheme, useGradients) { InactiveTitle, InactiveTitleText, TitleText, - Menu, - MenuBar, - MenuHilight, - MenuText, GrayText, Hilight, HilightText, HotTrackingColor, - InfoText, InfoWindow } = windowsTheme; - /* eslint-enable no-unused-vars, @typescript-eslint/no-unused-vars */ return { name, @@ -92,7 +85,7 @@ export function mapFromWindowsTheme(name, windowsTheme, useGradients) { } // helper functions below are from Material UI (https://github.com/mui-org/material-ui) -export function getDecimalPrecision(num) { +export function getDecimalPrecision(num: number) { if (Math.abs(num) < 1) { const parts = num.toExponential().split('e-'); const matissaDecimalPart = parts[0].split('.')[1]; @@ -106,7 +99,7 @@ export function getDecimalPrecision(num) { return decimalPart ? decimalPart.length : 0; } -export function roundValueToStep(value, step, min) { +export function roundValueToStep(value: number, step: number, min: number) { const nearest = Math.round((value - min) / step) * step + min; return Number(nearest.toFixed(getDecimalPrecision(step))); } From e1ed2777b8894433d77bc1d517607e46bd3fa966 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 12:14:10 -0400 Subject: [PATCH 010/100] chore(types): add missing desktopBackground theme property --- src/types.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/types.tsx b/src/types.tsx index ea4b7e15..5b384720 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -39,6 +39,7 @@ export type Theme = { canvasTextInvert: Color; checkmark: Color; checkmarkDisabled: Color; + desktopBackground: Color; flatDark: Color; flatLight: Color; focusSecondary: Color; From c419365a46706c0d9afe1adb5ec92350439219b9 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 12:14:24 -0400 Subject: [PATCH 011/100] feat(bar): convert to TypeScript and export types --- src/Bar/{Bar.spec.js => Bar.spec.tsx} | 1 - src/Bar/{Bar.stories.js => Bar.stories.tsx} | 7 +++--- src/Bar/{Bar.js => Bar.tsx} | 25 +++++++++++---------- 3 files changed, 16 insertions(+), 17 deletions(-) rename src/Bar/{Bar.spec.js => Bar.spec.tsx} (97%) rename src/Bar/{Bar.stories.js => Bar.stories.tsx} (80%) rename src/Bar/{Bar.js => Bar.tsx} (65%) diff --git a/src/Bar/Bar.spec.js b/src/Bar/Bar.spec.tsx similarity index 97% rename from src/Bar/Bar.spec.js rename to src/Bar/Bar.spec.tsx index 91f08fb9..aacf574a 100644 --- a/src/Bar/Bar.spec.js +++ b/src/Bar/Bar.spec.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { renderWithTheme } from '../../test/utils'; import Bar from './Bar'; diff --git a/src/Bar/Bar.stories.js b/src/Bar/Bar.stories.tsx similarity index 80% rename from src/Bar/Bar.stories.js rename to src/Bar/Bar.stories.tsx index 2fc879f9..569e343d 100644 --- a/src/Bar/Bar.stories.js +++ b/src/Bar/Bar.stories.tsx @@ -1,8 +1,7 @@ -import React from 'react'; +import { ComponentMeta } from '@storybook/react'; +import { AppBar, Bar, Button, Toolbar } from 'react95'; import styled from 'styled-components'; -import { Bar, AppBar, Toolbar, Button } from 'react95'; - const Wrapper = styled.div` padding: 5rem; background: ${({ theme }) => theme.desktopBackground}; @@ -12,7 +11,7 @@ export default { title: 'Bar', component: Bar, decorators: [story => {story()}] -}; +} as ComponentMeta; export function Default() { return ( diff --git a/src/Bar/Bar.js b/src/Bar/Bar.tsx similarity index 65% rename from src/Bar/Bar.js rename to src/Bar/Bar.tsx index c8e925bf..6b4db196 100644 --- a/src/Bar/Bar.js +++ b/src/Bar/Bar.tsx @@ -1,8 +1,13 @@ -import React from 'react'; -import propTypes from 'prop-types'; +import React, { forwardRef } from 'react'; import styled from 'styled-components'; +import { CommonStyledProps } from '../types'; -const StyledBar = styled.div` +type BarProps = { + size?: string | number; +} & React.HTMLAttributes & + CommonStyledProps; + +const StyledBar = styled.div` display: inline-block; box-sizing: border-box; height: ${({ size }) => size}; @@ -13,20 +18,16 @@ const StyledBar = styled.div` border-right: 2px solid ${({ theme }) => theme.borderDark}; background: ${({ theme }) => theme.material}; `; + // TODO: add horizontal variant // TODO: allow user to specify number of bars (like 3 horizontal bars for drag handle) -const Bar = React.forwardRef(function Bar(props, ref) { - const { size: sizeProp, ...otherProps } = props; +const Bar = forwardRef(function Bar( + { size: sizeProp = '100%', ...otherProps }, + ref +) { const size = typeof sizeProp === 'number' ? `${sizeProp}px` : sizeProp; return ; }); -Bar.defaultProps = { - size: '100%' -}; -Bar.propTypes = { - size: propTypes.oneOfType([propTypes.string, propTypes.number]) -}; - export default Bar; From 25bcc7cd113605242b8c955b5d0321ae14d7f4b3 Mon Sep 17 00:00:00 2001 From: arturbien Date: Mon, 25 Jul 2022 20:41:31 +0200 Subject: [PATCH 012/100] feat(divider): convert to TypeScript and export types --- src/ColorInput/ColorInput.js | 2 +- src/Divider/Divider.js | 38 ------------------- src/Divider/Divider.mdx | 2 +- .../{Divider.spec.js => Divider.spec.tsx} | 20 +++++----- ...Divider.stories.js => Divider.stories.tsx} | 4 +- src/Divider/Divider.tsx | 28 ++++++++++++++ src/index.ts | 4 +- 7 files changed, 43 insertions(+), 55 deletions(-) delete mode 100644 src/Divider/Divider.js rename src/Divider/{Divider.spec.js => Divider.spec.tsx} (80%) rename src/Divider/{Divider.stories.js => Divider.stories.tsx} (90%) create mode 100644 src/Divider/Divider.tsx diff --git a/src/ColorInput/ColorInput.js b/src/ColorInput/ColorInput.js index d23ae1c0..cebfd701 100644 --- a/src/ColorInput/ColorInput.js +++ b/src/ColorInput/ColorInput.js @@ -5,7 +5,7 @@ import styled, { css } from 'styled-components'; import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled'; import { focusOutline } from '../common'; import { StyledButton } from '../Button/Button'; -import Divider from '../Divider/Divider'; +import { Divider } from '../Divider/Divider'; const Trigger = styled(StyledButton)` padding-left: 8px; diff --git a/src/Divider/Divider.js b/src/Divider/Divider.js deleted file mode 100644 index a116aa3e..00000000 --- a/src/Divider/Divider.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import propTypes from 'prop-types'; -import styled from 'styled-components'; - -const StyledDivider = styled.hr` - ${({ orientation, theme, size }) => - orientation === 'vertical' - ? ` - height: ${size}; - border-left: 2px solid ${theme.borderDark}; - border-right: 2px solid ${theme.borderLightest}; - margin: 0; - ` - : ` - width: ${size}; - border-bottom: 2px solid ${theme.borderLightest}; - border-top: 2px solid ${theme.borderDark}; - margin: 0; - `} -`; - -const Divider = React.forwardRef(function Divider(props, ref) { - const { size: sizeProp, ...otherProps } = props; - const size = typeof sizeProp === 'number' ? `${sizeProp}px` : sizeProp; - return ; -}); - -Divider.defaultProps = { - size: '100%', - orientation: 'horizontal' -}; - -Divider.propTypes = { - size: propTypes.oneOfType([propTypes.string, propTypes.number]), - orientation: propTypes.oneOf(['horizontal', 'vertical']) -}; - -export default Divider; diff --git a/src/Divider/Divider.mdx b/src/Divider/Divider.mdx index debc9b46..d3c29adb 100644 --- a/src/Divider/Divider.mdx +++ b/src/Divider/Divider.mdx @@ -2,7 +2,7 @@ name: Divider menu: Components ----import Divider from './Divider' +import { Divider } from './Divider' import List from '../List/List' import ListItem from '../ListItem/ListItem' diff --git a/src/Divider/Divider.spec.js b/src/Divider/Divider.spec.tsx similarity index 80% rename from src/Divider/Divider.spec.js rename to src/Divider/Divider.spec.tsx index 472007c9..a2e8d8e4 100644 --- a/src/Divider/Divider.spec.js +++ b/src/Divider/Divider.spec.tsx @@ -1,13 +1,11 @@ -import React from 'react'; - import { renderWithTheme } from '../../test/utils'; -import Divider from './Divider'; +import { Divider } from './Divider'; describe('', () => { it('should render Divider', () => { const { container } = renderWithTheme(); - const divider = container.firstChild; + const divider = container.firstElementChild; expect(divider).toBeInTheDocument(); }); @@ -15,13 +13,13 @@ describe('', () => { describe('prop: size', () => { it('defaults to 100%', () => { const { container } = renderWithTheme(); - const divider = container.firstChild; + const divider = container.firstElementChild; expect(divider).toHaveStyleRule('width', '100%'); }); it('sets size passed correctly', () => { const size = '53px'; const { container } = renderWithTheme(); - const divider = container.firstChild; + const divider = container.firstElementChild; expect(divider).toHaveStyleRule('width', size); }); @@ -31,7 +29,7 @@ describe('', () => { it('renders horizontal line by default', () => { const size = '53px'; const { container } = renderWithTheme(); - const divider = container.firstChild; + const divider = container.firstElementChild; expect(divider).toHaveStyleRule('width', size); }); @@ -41,7 +39,7 @@ describe('', () => { const { container } = renderWithTheme( ); - const divider = container.firstChild; + const divider = container.firstElementChild; expect(divider).toHaveStyleRule('height', size); }); @@ -49,14 +47,14 @@ describe('', () => { describe('prop: size', () => { it('should set proper size', () => { const { container } = renderWithTheme(); - const avatarEl = container.firstChild; + const avatarEl = container.firstElementChild; expect(avatarEl).toHaveStyleRule('width', '85%'); }); it('when passed a number, sets size in px', () => { const { container } = renderWithTheme(); - const avatarEl = container.firstChild; + const avatarEl = container.firstElementChild; expect(avatarEl).toHaveStyleRule('width', '25px'); }); @@ -65,7 +63,7 @@ describe('', () => { const { container } = renderWithTheme( ); - const avatarEl = container.firstChild; + const avatarEl = container.firstElementChild; expect(avatarEl).toHaveStyleRule('height', '25px'); }); diff --git a/src/Divider/Divider.stories.js b/src/Divider/Divider.stories.tsx similarity index 90% rename from src/Divider/Divider.stories.js rename to src/Divider/Divider.stories.tsx index fd59fbe8..59c99560 100644 --- a/src/Divider/Divider.stories.js +++ b/src/Divider/Divider.stories.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { ComponentMeta } from '@storybook/react'; import styled from 'styled-components'; import { Divider, List, ListItem } from 'react95'; @@ -12,7 +12,7 @@ export default { title: 'Divider', component: Divider, decorators: [story => {story()}] -}; +} as ComponentMeta; export function Default() { return ( diff --git a/src/Divider/Divider.tsx b/src/Divider/Divider.tsx new file mode 100644 index 00000000..7e3fd922 --- /dev/null +++ b/src/Divider/Divider.tsx @@ -0,0 +1,28 @@ +import styled from 'styled-components'; +import { Orientation } from '../types'; + +function getSize(value: string | number) { + return typeof value === 'number' ? `${value}px` : value; +} +interface DividerProps { + size?: string | number; + orientation?: Orientation; +} +const Divider = styled.div` + ${({ orientation, theme, size = '100%' }) => + orientation === 'vertical' + ? ` + height: ${getSize(size)}; + border-left: 2px solid ${theme.borderDark}; + border-right: 2px solid ${theme.borderLightest}; + margin: 0; + ` + : ` + width: ${getSize(size)}; + border-bottom: 2px solid ${theme.borderLightest}; + border-top: 2px solid ${theme.borderDark}; + margin: 0; + `} +`; + +export { Divider, DividerProps }; diff --git a/src/index.ts b/src/index.ts index 92dbe8bd..cffa1636 100644 --- a/src/index.ts +++ b/src/index.ts @@ -6,14 +6,14 @@ export { createScrollbars } from './common/index'; export * from './Anchor/Anchor'; export { default as AppBar } from './AppBar/AppBar'; export { default as Avatar } from './Avatar/Avatar'; -export { default as Bar } from './Bar/Bar'; +export * from './Bar/Bar'; export { default as Button } from './Button/Button'; export { default as Checkbox } from './Checkbox/Checkbox'; export { default as ColorInput } from './ColorInput/ColorInput'; export { default as Counter } from './Counter/Counter'; export { default as Cutout } from './Cutout/Cutout'; export { default as Desktop } from './Desktop/Desktop'; -export { default as Divider } from './Divider/Divider'; +export * from './Divider/Divider'; export { default as Fieldset } from './Fieldset/Fieldset'; export { default as Hourglass } from './Hourglass/Hourglass'; export { default as List } from './List/List'; From 5a69d1dcfb0ae36d6a1aa9761d1882923048aa0d Mon Sep 17 00:00:00 2001 From: arturbien Date: Mon, 25 Jul 2022 21:04:05 +0200 Subject: [PATCH 013/100] refactor(getsize): create 'getSize' util --- src/Avatar/Avatar.js | 14 +++----------- src/Bar/Bar.spec.tsx | 2 +- src/Bar/Bar.tsx | 34 ++++++++++++++-------------------- src/Divider/Divider.tsx | 8 +++----- src/Slider/Slider.js | 7 +++---- src/common/utils/index.ts | 4 ++++ 6 files changed, 28 insertions(+), 41 deletions(-) diff --git a/src/Avatar/Avatar.js b/src/Avatar/Avatar.js index e57071e9..8a68da18 100644 --- a/src/Avatar/Avatar.js +++ b/src/Avatar/Avatar.js @@ -1,6 +1,7 @@ import React from 'react'; import propTypes from 'prop-types'; import styled from 'styled-components'; +import { getSize } from '../common/utils'; const StyledAvatar = styled.div` display: inline-block; @@ -41,22 +42,13 @@ const SlyledAvatarIMG = styled.img` `; const Avatar = React.forwardRef(function Avatar(props, ref) { - const { - alt, - children, - noBorder, - size: sizeProp, - square, - src, - ...otherProps - } = props; + const { alt, children, noBorder, size, square, src, ...otherProps } = props; - const size = typeof sizeProp === 'number' ? `${sizeProp}px` : sizeProp; return ( diff --git a/src/Bar/Bar.spec.tsx b/src/Bar/Bar.spec.tsx index aacf574a..a8964a4b 100644 --- a/src/Bar/Bar.spec.tsx +++ b/src/Bar/Bar.spec.tsx @@ -1,6 +1,6 @@ import { renderWithTheme } from '../../test/utils'; -import Bar from './Bar'; +import { Bar } from './Bar'; describe('', () => { it('should render bar', () => { diff --git a/src/Bar/Bar.tsx b/src/Bar/Bar.tsx index 6b4db196..1adb0c32 100644 --- a/src/Bar/Bar.tsx +++ b/src/Bar/Bar.tsx @@ -1,33 +1,27 @@ -import React, { forwardRef } from 'react'; +import React from 'react'; import styled from 'styled-components'; import { CommonStyledProps } from '../types'; +import { getSize } from '../common/utils'; type BarProps = { size?: string | number; } & React.HTMLAttributes & CommonStyledProps; -const StyledBar = styled.div` +// TODO: add horizontal variant +// TODO: allow user to specify number of bars (like 3 horizontal bars for drag handle) +const Bar = styled.div` + ${({ theme, size = '100%' }) => ` display: inline-block; box-sizing: border-box; - height: ${({ size }) => size}; + height: ${getSize(size)}; width: 5px; - border-top: 2px solid ${({ theme }) => theme.borderLightest}; - border-left: 2px solid ${({ theme }) => theme.borderLightest}; - border-bottom: 2px solid ${({ theme }) => theme.borderDark}; - border-right: 2px solid ${({ theme }) => theme.borderDark}; - background: ${({ theme }) => theme.material}; + border-top: 2px solid ${theme.borderLightest}; + border-left: 2px solid ${theme.borderLightest}; + border-bottom: 2px solid ${theme.borderDark}; + border-right: 2px solid ${theme.borderDark}; + background: ${theme.material}; +`} `; -// TODO: add horizontal variant -// TODO: allow user to specify number of bars (like 3 horizontal bars for drag handle) -const Bar = forwardRef(function Bar( - { size: sizeProp = '100%', ...otherProps }, - ref -) { - const size = typeof sizeProp === 'number' ? `${sizeProp}px` : sizeProp; - - return ; -}); - -export default Bar; +export { Bar, BarProps }; diff --git a/src/Divider/Divider.tsx b/src/Divider/Divider.tsx index 7e3fd922..788a8213 100644 --- a/src/Divider/Divider.tsx +++ b/src/Divider/Divider.tsx @@ -1,13 +1,11 @@ import styled from 'styled-components'; +import { getSize } from '../common/utils'; import { Orientation } from '../types'; -function getSize(value: string | number) { - return typeof value === 'number' ? `${value}px` : value; -} -interface DividerProps { +type DividerProps = { size?: string | number; orientation?: Orientation; -} +}; const Divider = styled.div` ${({ orientation, theme, size = '100%' }) => orientation === 'vertical' diff --git a/src/Slider/Slider.js b/src/Slider/Slider.js index 59ae75c6..6b4db6a0 100644 --- a/src/Slider/Slider.js +++ b/src/Slider/Slider.js @@ -10,7 +10,7 @@ import { createDisabledTextStyles, createHatchedBackground } from '../common'; -import { clamp, roundValueToStep } from '../common/utils'; +import { clamp, getSize, roundValueToStep } from '../common/utils'; import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled'; import useForkRef from '../common/hooks/useForkRef'; import { useIsFocusVisible } from '../common/hooks/useIsFocusVisible'; @@ -242,7 +242,7 @@ const Slider = React.forwardRef(function Slider(props, ref) { step, min, max, - size: sizeProp, + size, marks: marksProp, onChange, onChangeCommitted, @@ -475,13 +475,12 @@ const Slider = React.forwardRef(function Slider(props, ref) { }; }, [handleTouchEnd, handleTouchMove, handleTouchStart]); - const size = typeof sizeProp === 'number' ? `${sizeProp}px` : sizeProp; return ( Date: Mon, 25 Jul 2022 12:01:39 -0400 Subject: [PATCH 014/100] feat(avatar): convert to TypeScript and export types --- src/Avatar/Avatar.mdx | 9 +-- .../{Avatar.spec.js => Avatar.spec.tsx} | 19 +++--- .../{Avatar.stories.js => Avatar.stories.tsx} | 13 ++--- src/Avatar/{Avatar.js => Avatar.tsx} | 58 ++++++++++--------- src/index.ts | 2 +- 5 files changed, 49 insertions(+), 52 deletions(-) rename src/Avatar/{Avatar.spec.js => Avatar.spec.tsx} (81%) rename src/Avatar/{Avatar.stories.js => Avatar.stories.tsx} (75%) rename src/Avatar/{Avatar.js => Avatar.tsx} (57%) diff --git a/src/Avatar/Avatar.mdx b/src/Avatar/Avatar.mdx index 888fbceb..b2788b41 100644 --- a/src/Avatar/Avatar.mdx +++ b/src/Avatar/Avatar.mdx @@ -3,7 +3,7 @@ name: Avatar menu: Components --- -import Avatar from './Avatar'; +import { Avatar } from './Avatar'; # Avatar @@ -12,16 +12,13 @@ import Avatar from './Avatar'; #### Default - + #### No border - + #### Lettered diff --git a/src/Avatar/Avatar.spec.js b/src/Avatar/Avatar.spec.tsx similarity index 81% rename from src/Avatar/Avatar.spec.js rename to src/Avatar/Avatar.spec.tsx index 1e7235dd..9ef8de45 100644 --- a/src/Avatar/Avatar.spec.js +++ b/src/Avatar/Avatar.spec.tsx @@ -1,9 +1,8 @@ -import React from 'react'; import { render } from '@testing-library/react'; import { renderWithTheme, theme } from '../../test/utils'; -import Avatar from './Avatar'; +import { Avatar } from './Avatar'; describe('', () => { it('should render component', () => { @@ -14,16 +13,16 @@ describe('', () => { it('should render children', () => { const { container } = render(Avatar children); - const avatarEl = container.firstChild; + const avatarEl = container.firstElementChild; - expect(avatarEl.innerHTML).toBe('Avatar children'); + expect(avatarEl && avatarEl.innerHTML).toBe('Avatar children'); }); it('should handle border properly', () => { const { container, rerender } = renderWithTheme( ); - const avatarEl = container.firstChild; + const avatarEl = container.firstElementChild; expect(avatarEl).toHaveStyleRule( 'border-top', @@ -37,7 +36,7 @@ describe('', () => { it('should handle square properly', () => { const { container, rerender } = render(); - const avatarEl = container.firstChild; + const avatarEl = container.firstElementChild; expect(avatarEl).toHaveStyleRule('border-radius', '0'); @@ -49,9 +48,9 @@ describe('', () => { it('should render with source', async () => { const catGif = 'https://cdn2.thecatapi.com/images/1ac.gif'; const { findByAltText } = render(); - const imageEl = await findByAltText('cat avatar'); + const imageEl = (await findByAltText('cat avatar')) as HTMLImageElement; - expect(imageEl.src).toBe(catGif); + expect(imageEl && imageEl.src).toBe(catGif); }); it('should render source with priority over children', async () => { @@ -69,7 +68,7 @@ describe('', () => { describe('prop: size', () => { it('should set proper size', () => { const { container } = renderWithTheme(); - const avatarEl = container.firstChild; + const avatarEl = container.firstElementChild; expect(avatarEl).toHaveStyleRule('width', '85%'); expect(avatarEl).toHaveStyleRule('height', '85%'); @@ -77,7 +76,7 @@ describe('', () => { it('when passed a number, sets size in px', () => { const { container } = renderWithTheme(); - const avatarEl = container.firstChild; + const avatarEl = container.firstElementChild; expect(avatarEl).toHaveStyleRule('width', '25px'); expect(avatarEl).toHaveStyleRule('height', '25px'); diff --git a/src/Avatar/Avatar.stories.js b/src/Avatar/Avatar.stories.tsx similarity index 75% rename from src/Avatar/Avatar.stories.js rename to src/Avatar/Avatar.stories.tsx index 9fee4e03..b3707267 100644 --- a/src/Avatar/Avatar.stories.js +++ b/src/Avatar/Avatar.stories.tsx @@ -1,6 +1,6 @@ -import React from 'react'; -import styled from 'styled-components'; +import { ComponentMeta } from '@storybook/react'; import { Avatar } from 'react95'; +import styled from 'styled-components'; const Wrapper = styled.div` padding: 5rem; @@ -14,16 +14,13 @@ export default { title: 'Avatar', component: Avatar, decorators: [story => {story()}] -}; - -const imageSrc = - 'https://sphoto.nasza-klasa.pl/33278012/1/square/2658174fbd.jpeg?v=1'; +} as ComponentMeta; export function Default() { return (
- - + + AK diff --git a/src/Avatar/Avatar.js b/src/Avatar/Avatar.tsx similarity index 57% rename from src/Avatar/Avatar.js rename to src/Avatar/Avatar.tsx index 8a68da18..62f3b791 100644 --- a/src/Avatar/Avatar.js +++ b/src/Avatar/Avatar.tsx @@ -1,9 +1,21 @@ -import React from 'react'; -import propTypes from 'prop-types'; +import React, { forwardRef } from 'react'; import styled from 'styled-components'; import { getSize } from '../common/utils'; +import { CommonStyledProps } from '../types'; -const StyledAvatar = styled.div` +type AvatarProps = { + alt?: string; + children?: React.ReactNode; + noBorder?: boolean; + size?: string | number; + square?: boolean; + src?: string; +} & React.HTMLAttributes & + CommonStyledProps; + +const StyledAvatar = styled.div< + Pick & { size?: string } +>` display: inline-block; box-sizing: border-box; object-fit: contain; @@ -34,45 +46,37 @@ const StyledAvatar = styled.div` `} `; -const SlyledAvatarIMG = styled.img` +const StyledAvatarImg = styled.img` display: block; object-fit: contain; width: 100%; height: 100%; `; -const Avatar = React.forwardRef(function Avatar(props, ref) { - const { alt, children, noBorder, size, square, src, ...otherProps } = props; - +const Avatar = forwardRef(function Avatar( + { + alt = '', + children, + noBorder = false, + size = 35, + square = false, + src, + ...otherProps + }, + ref +) { return ( - {src ? : children} + {src ? : children} ); }); -Avatar.defaultProps = { - alt: '', - children: null, - noBorder: false, - size: 35, - square: false, - src: undefined -}; - -Avatar.propTypes = { - alt: propTypes.string, - children: propTypes.node, - noBorder: propTypes.bool, - size: propTypes.oneOfType([propTypes.string, propTypes.number]), - square: propTypes.bool, - src: propTypes.string -}; - -export default Avatar; +export { Avatar, AvatarProps }; diff --git a/src/index.ts b/src/index.ts index cffa1636..24616357 100644 --- a/src/index.ts +++ b/src/index.ts @@ -5,7 +5,7 @@ export { createScrollbars } from './common/index'; /* components */ export * from './Anchor/Anchor'; export { default as AppBar } from './AppBar/AppBar'; -export { default as Avatar } from './Avatar/Avatar'; +export * from './Avatar/Avatar'; export * from './Bar/Bar'; export { default as Button } from './Button/Button'; export { default as Checkbox } from './Checkbox/Checkbox'; From cd40930d46209f2616e716137acf3f997ae36bc2 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 15:46:18 -0400 Subject: [PATCH 015/100] refactor(appbar): change to named exports --- src/AppBar/AppBar.mdx | 19 +++++++++---------- src/AppBar/AppBar.spec.tsx | 2 +- src/AppBar/AppBar.tsx | 4 ++-- src/Bar/Bar.mdx | 8 ++++---- src/index.ts | 2 +- 5 files changed, 17 insertions(+), 18 deletions(-) diff --git a/src/AppBar/AppBar.mdx b/src/AppBar/AppBar.mdx index d38d9e8c..d28ffac9 100644 --- a/src/AppBar/AppBar.mdx +++ b/src/AppBar/AppBar.mdx @@ -3,13 +3,13 @@ name: AppBar menu: Components --- -import AppBar from './AppBar' -import Toolbar from '../Toolbar/Toolbar' -import Button from '../Button/Button' -import TextField from '../TextField/TextField' -import List from '../List/List' -import ListItem from '../ListItem/ListItem' -import Divider from '../Divider/Divider' +import { AppBar } from './AppBar'; +import Toolbar from '../Toolbar/Toolbar'; +import Button from '../Button/Button'; +import TextField from '../TextField/TextField'; +import List from '../List/List'; +import ListItem from '../ListItem/ListItem'; +import Divider from '../Divider/Divider'; # AppBar @@ -17,7 +17,6 @@ import Divider from '../Divider/Divider' #### Default - {() => { const [open, setOpen] = React.useState(false); @@ -62,7 +61,7 @@ import Divider from '../Divider/Divider'
); - } + }; return ( @@ -74,7 +73,7 @@ import Divider from '../Divider/Divider' /> - ) + ); }} diff --git a/src/AppBar/AppBar.spec.tsx b/src/AppBar/AppBar.spec.tsx index 6efb2bfc..402323c2 100644 --- a/src/AppBar/AppBar.spec.tsx +++ b/src/AppBar/AppBar.spec.tsx @@ -1,6 +1,6 @@ import { render } from '@testing-library/react'; -import AppBar from './AppBar'; +import { AppBar } from './AppBar'; const defaultProps = { children: '' }; diff --git a/src/AppBar/AppBar.tsx b/src/AppBar/AppBar.tsx index 29d9f5b5..8fa4cca9 100644 --- a/src/AppBar/AppBar.tsx +++ b/src/AppBar/AppBar.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { CommonStyledProps } from '../types'; import { createBorderStyles, createBoxStyles } from '../common'; -export type AppBarProps = { +type AppBarProps = { children: React.ReactNode; fixed?: boolean; } & React.HTMLAttributes & @@ -33,4 +33,4 @@ const AppBar = forwardRef(function AppBar( ); }); -export default AppBar; +export { AppBar, AppBarProps }; diff --git a/src/Bar/Bar.mdx b/src/Bar/Bar.mdx index 6c8b06eb..b316a35f 100644 --- a/src/Bar/Bar.mdx +++ b/src/Bar/Bar.mdx @@ -3,10 +3,10 @@ name: Bar menu: Components --- -import Bar from '../Bar/Bar' -import AppBar from '../AppBar/AppBar.js' -import Toolbar from '../Toolbar/Toolbar.js' -import Button from '../Button/Button.js' +import { Bar } from '../Bar/Bar'; +import { AppBar } from '../AppBar/AppBar.js'; +import Toolbar from '../Toolbar/Toolbar.js'; +import Button from '../Button/Button.js'; # Bar diff --git a/src/index.ts b/src/index.ts index 24616357..13d7819b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,7 +4,7 @@ export { createScrollbars } from './common/index'; /* components */ export * from './Anchor/Anchor'; -export { default as AppBar } from './AppBar/AppBar'; +export * from './AppBar/AppBar'; export * from './Avatar/Avatar'; export * from './Bar/Bar'; export { default as Button } from './Button/Button'; From 4ba305d8aed968873787dae56659a32027404a09 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 16:03:49 -0400 Subject: [PATCH 016/100] feat(counter): convert to TypeScript and export types --- src/Counter/Counter.js | 51 ------------------- src/Counter/Counter.mdx | 2 +- .../{Counter.spec.js => Counter.spec.tsx} | 20 ++++---- ...Counter.stories.js => Counter.stories.tsx} | 8 +-- src/Counter/Counter.tsx | 45 ++++++++++++++++ src/Counter/{Digit.js => Digit.tsx} | 26 ++++------ src/index.ts | 2 +- 7 files changed, 73 insertions(+), 81 deletions(-) delete mode 100644 src/Counter/Counter.js rename src/Counter/{Counter.spec.js => Counter.spec.tsx} (67%) rename src/Counter/{Counter.stories.js => Counter.stories.tsx} (83%) create mode 100644 src/Counter/Counter.tsx rename src/Counter/{Digit.js => Digit.tsx} (90%) diff --git a/src/Counter/Counter.js b/src/Counter/Counter.js deleted file mode 100644 index cb7f0e6c..00000000 --- a/src/Counter/Counter.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import propTypes from 'prop-types'; -import styled from 'styled-components'; - -import { createWellBorderStyles } from '../common'; -import Digit from './Digit'; - -const CounterWrapper = styled.div` - ${createWellBorderStyles(true)} - display: inline-flex; - background: #000000; -`; - -const pixelSizes = { - sm: 1, - md: 2, - lg: 3, - xl: 4 -}; - -const Counter = React.forwardRef(function Counter(props, ref) { - const { value, minLength, size, ...otherProps } = props; - let stringValue = value.toString(); - if (minLength && minLength > stringValue.length) { - stringValue = - Array(minLength - stringValue.length) - .fill('0') - .join('') + stringValue; - } - return ( - - {stringValue.split('').map((digit, i) => ( - - ))} - - ); -}); - -Counter.defaultProps = { - minLength: 3, - size: 'md', - value: 0 -}; - -Counter.propTypes = { - minLength: propTypes.number, - size: propTypes.oneOf(['sm', 'md', 'lg']), - value: propTypes.number -}; - -export default Counter; diff --git a/src/Counter/Counter.mdx b/src/Counter/Counter.mdx index e748310c..0d8428b2 100644 --- a/src/Counter/Counter.mdx +++ b/src/Counter/Counter.mdx @@ -3,7 +3,7 @@ name: Bar menu: Components --- -import Counter from '../Counter/Counter'; +import { Counter } from '../Counter/Counter'; # Counter diff --git a/src/Counter/Counter.spec.js b/src/Counter/Counter.spec.tsx similarity index 67% rename from src/Counter/Counter.spec.js rename to src/Counter/Counter.spec.tsx index fa69b1d4..83fab8e5 100644 --- a/src/Counter/Counter.spec.js +++ b/src/Counter/Counter.spec.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { renderWithTheme } from '../../test/utils'; -import Counter from './Counter'; +import { Counter } from './Counter'; describe('', () => { it('should render', () => { const { container } = renderWithTheme(); - const counter = container.firstChild; + const counter = container.firstElementChild; expect(counter).toBeInTheDocument(); }); @@ -15,15 +15,17 @@ describe('', () => { const { container } = renderWithTheme( ); - const counter = container.firstChild; + const counter = container.firstElementChild; expect(counter).toHaveAttribute('style', 'background-color: papayawhip;'); }); it('should handle custom props', () => { - const customProps = { title: 'potatoe' }; + const customProps: React.HTMLAttributes = { + title: 'potatoe' + }; const { container } = renderWithTheme(); - const counter = container.firstChild; + const counter = container.firstElementChild; expect(counter).toHaveAttribute('title', 'potatoe'); }); @@ -33,18 +35,18 @@ describe('', () => { const { container } = renderWithTheme( ); - const counter = container.firstChild; + const counter = container.firstElementChild; - expect(counter.childElementCount).toBe(7); + expect(counter && counter.childElementCount).toBe(7); }); it('value length takes priority if bigger than minLength', () => { const { container } = renderWithTheme( ); - const counter = container.firstChild; + const counter = container.firstElementChild; - expect(counter.childElementCount).toBe(4); + expect(counter && counter.childElementCount).toBe(4); }); }); }); diff --git a/src/Counter/Counter.stories.js b/src/Counter/Counter.stories.tsx similarity index 83% rename from src/Counter/Counter.stories.js rename to src/Counter/Counter.stories.tsx index 3d7d2436..eee43d3a 100644 --- a/src/Counter/Counter.stories.js +++ b/src/Counter/Counter.stories.tsx @@ -1,8 +1,8 @@ -import React, { useState } from 'react'; +import { ComponentMeta } from '@storybook/react'; +import { useState } from 'react'; +import { Button, Counter, Panel } from 'react95'; import styled from 'styled-components'; -import { Counter, Panel, Button } from 'react95'; - const Wrapper = styled.div` padding: 5rem; background: ${({ theme }) => theme.desktopBackground}; @@ -23,7 +23,7 @@ export default { title: 'Counter', component: Counter, decorators: [story => {story()}] -}; +} as ComponentMeta; export function Default() { const [count, setCount] = useState(13); diff --git a/src/Counter/Counter.tsx b/src/Counter/Counter.tsx new file mode 100644 index 00000000..9e468b2f --- /dev/null +++ b/src/Counter/Counter.tsx @@ -0,0 +1,45 @@ +import React, { forwardRef, useMemo } from 'react'; +import styled from 'styled-components'; + +import { createWellBorderStyles } from '../common'; +import { CommonStyledProps, Sizes } from '../types'; +import { Digit } from './Digit'; + +type CounterProps = { + minLength?: number; + size?: Sizes | 'xl'; + value?: number; +} & React.HTMLAttributes & + CommonStyledProps; + +const CounterWrapper = styled.div` + ${createWellBorderStyles(true)} + display: inline-flex; + background: #000000; +`; + +const pixelSizes = { + sm: 1, + md: 2, + lg: 3, + xl: 4 +}; + +const Counter = forwardRef(function Counter( + { value = 0, minLength = 3, size = 'md', ...otherProps }, + ref +) { + const digits = useMemo( + () => value.toString().padStart(minLength, '0').split(''), + [minLength, value] + ); + return ( + + {digits.map((digit, i) => ( + + ))} + + ); +}); + +export { Counter, CounterProps }; diff --git a/src/Counter/Digit.js b/src/Counter/Digit.tsx similarity index 90% rename from src/Counter/Digit.js rename to src/Counter/Digit.tsx index c66b3207..b5358263 100644 --- a/src/Counter/Digit.js +++ b/src/Counter/Digit.tsx @@ -1,10 +1,16 @@ import React from 'react'; -import propTypes from 'prop-types'; import styled, { css } from 'styled-components'; import { createHatchedBackground } from '../common'; +import { CommonStyledProps } from '../types'; -const DigitWrapper = styled.div` +type DigitProps = { + pixelSize?: number; + digit?: number | string; +} & React.HTMLAttributes & + CommonStyledProps; + +const DigitWrapper = styled.div>>` position: relative; --react95-digit-primary-color: #ff0102; --react95-digit-secondary-color: #740201; @@ -167,8 +173,8 @@ const digitActiveSegments = [ [1, 1, 1, 1, 1, 0, 1] // 9 ]; -function Digit({ digit, pixelSize, ...otherProps }) { - const segmentClasses = digitActiveSegments[digit].map((isActive, i) => +function Digit({ digit = 0, pixelSize = 2, ...otherProps }: DigitProps) { + const segmentClasses = digitActiveSegments[Number(digit)].map((isActive, i) => isActive ? `${segments[i]} active` : segments[i] ); return ( @@ -180,14 +186,4 @@ function Digit({ digit, pixelSize, ...otherProps }) { ); } -Digit.defaultProps = { - pixelSize: 2, - digit: 0 -}; - -Digit.propTypes = { - pixelSize: propTypes.number, - digit: propTypes.oneOfType([propTypes.number, propTypes.string]) -}; - -export default Digit; +export { Digit, DigitProps }; diff --git a/src/index.ts b/src/index.ts index 13d7819b..d558b918 100644 --- a/src/index.ts +++ b/src/index.ts @@ -10,7 +10,7 @@ export * from './Bar/Bar'; export { default as Button } from './Button/Button'; export { default as Checkbox } from './Checkbox/Checkbox'; export { default as ColorInput } from './ColorInput/ColorInput'; -export { default as Counter } from './Counter/Counter'; +export * from './Counter/Counter'; export { default as Cutout } from './Cutout/Cutout'; export { default as Desktop } from './Desktop/Desktop'; export * from './Divider/Divider'; From 878a07e8169cd3d11027b6b37d2813180b14b613 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 16:50:26 -0400 Subject: [PATCH 017/100] feat(desktop): convert to TypeScript and export types --- src/Desktop/Desktop.mdx | 2 +- .../{Desktop.spec.js => Desktop.spec.tsx} | 10 ++++--- ...Desktop.stories.js => Desktop.stories.tsx} | 4 +-- src/Desktop/{Desktop.js => Desktop.tsx} | 27 ++++++++----------- src/index.ts | 2 +- 5 files changed, 21 insertions(+), 24 deletions(-) rename src/Desktop/{Desktop.spec.js => Desktop.spec.tsx} (82%) rename src/Desktop/{Desktop.stories.js => Desktop.stories.tsx} (83%) rename src/Desktop/{Desktop.js => Desktop.tsx} (87%) diff --git a/src/Desktop/Desktop.mdx b/src/Desktop/Desktop.mdx index 2c51f8e4..a34d2aad 100644 --- a/src/Desktop/Desktop.mdx +++ b/src/Desktop/Desktop.mdx @@ -3,7 +3,7 @@ name: Desktop menu: Components --- -import Desktop from '../Desktop/Desktop'; +import { Desktop } from '../Desktop/Desktop'; # Desktop diff --git a/src/Desktop/Desktop.spec.js b/src/Desktop/Desktop.spec.tsx similarity index 82% rename from src/Desktop/Desktop.spec.js rename to src/Desktop/Desktop.spec.tsx index 397cf297..996a97f6 100644 --- a/src/Desktop/Desktop.spec.js +++ b/src/Desktop/Desktop.spec.tsx @@ -1,20 +1,22 @@ import React from 'react'; import { renderWithTheme } from '../../test/utils'; -import Desktop from './Desktop'; +import { Desktop } from './Desktop'; describe('', () => { it('should render', () => { const { container } = renderWithTheme(); - const desktopElement = container.firstChild; + const desktopElement = container.firstElementChild; expect(desktopElement).toBeInTheDocument(); }); it('should handle custom props', () => { - const customProps = { title: 'potatoe' }; + const customProps: React.HTMLAttributes = { + title: 'potatoe' + }; const { container } = renderWithTheme(); - const desktopElement = container.firstChild; + const desktopElement = container.firstElementChild; expect(desktopElement).toHaveAttribute('title', 'potatoe'); }); diff --git a/src/Desktop/Desktop.stories.js b/src/Desktop/Desktop.stories.tsx similarity index 83% rename from src/Desktop/Desktop.stories.js rename to src/Desktop/Desktop.stories.tsx index 542a8ab3..faf9734f 100644 --- a/src/Desktop/Desktop.stories.js +++ b/src/Desktop/Desktop.stories.tsx @@ -1,7 +1,7 @@ -import React from 'react'; import styled from 'styled-components'; import { Desktop } from 'react95'; +import { ComponentMeta } from '@storybook/react'; const Wrapper = styled.div` padding: 5rem; @@ -12,7 +12,7 @@ export default { title: 'Desktop', component: Desktop, decorators: [story => {story()}] -}; +} as ComponentMeta; export function Default() { return ; diff --git a/src/Desktop/Desktop.js b/src/Desktop/Desktop.tsx similarity index 87% rename from src/Desktop/Desktop.js rename to src/Desktop/Desktop.tsx index ecc00a54..22541bb0 100644 --- a/src/Desktop/Desktop.js +++ b/src/Desktop/Desktop.tsx @@ -1,9 +1,13 @@ -import React from 'react'; -import propTypes from 'prop-types'; +import React, { forwardRef } from 'react'; import styled from 'styled-components'; import { StyledCutout } from '../Cutout/Cutout'; +type DesktopProps = { + backgroundStyles?: React.CSSProperties; + children?: React.ReactNode; +}; + const Wrapper = styled.div` position: relative; display: inline-block; @@ -102,9 +106,10 @@ const Stand = styled.div` } `; -const Desktop = React.forwardRef(function Desktop(props, ref) { - const { backgroundStyles, children, ...otherProps } = props; - +const Desktop = forwardRef(function Desktop( + { backgroundStyles, children, ...otherProps }, + ref +) { return ( @@ -117,14 +122,4 @@ const Desktop = React.forwardRef(function Desktop(props, ref) { ); }); -Desktop.defaultProps = { - backgroundStyles: null -}; - -Desktop.propTypes = { - backgroundStyles: propTypes.object, - // eslint-disable-next-line react/require-default-props - children: propTypes.node -}; - -export default Desktop; +export { Desktop, DesktopProps }; diff --git a/src/index.ts b/src/index.ts index d558b918..05595aef 100644 --- a/src/index.ts +++ b/src/index.ts @@ -12,7 +12,7 @@ export { default as Checkbox } from './Checkbox/Checkbox'; export { default as ColorInput } from './ColorInput/ColorInput'; export * from './Counter/Counter'; export { default as Cutout } from './Cutout/Cutout'; -export { default as Desktop } from './Desktop/Desktop'; +export * from './Desktop/Desktop'; export * from './Divider/Divider'; export { default as Fieldset } from './Fieldset/Fieldset'; export { default as Hourglass } from './Hourglass/Hourglass'; From 42c02b251c6fe77405e9446401872d997317b140 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 19:33:19 -0400 Subject: [PATCH 018/100] feat(panel): convert to TypeScript and export types --- src/Panel/{Panel.spec.js => Panel.spec.tsx} | 9 ++++--- .../{Panel.stories.js => Panel.stories.tsx} | 7 +++--- src/Panel/{Panel.js => Panel.tsx} | 24 +++++++++++++------ src/index.ts | 2 +- 4 files changed, 25 insertions(+), 17 deletions(-) rename src/Panel/{Panel.spec.js => Panel.spec.tsx} (83%) rename src/Panel/{Panel.stories.js => Panel.stories.tsx} (94%) rename src/Panel/{Panel.js => Panel.tsx} (56%) diff --git a/src/Panel/Panel.spec.js b/src/Panel/Panel.spec.tsx similarity index 83% rename from src/Panel/Panel.spec.js rename to src/Panel/Panel.spec.tsx index 7d35a1f4..8f85f5f9 100644 --- a/src/Panel/Panel.spec.js +++ b/src/Panel/Panel.spec.tsx @@ -1,12 +1,11 @@ -import React from 'react'; import { render } from '@testing-library/react'; -import Panel from './Panel'; +import { Panel } from './Panel'; describe('', () => { it('should render panel', () => { const { container } = render(); - const panel = container.firstChild; + const panel = container.firstElementChild; expect(panel).toBeInTheDocument(); }); @@ -15,7 +14,7 @@ describe('', () => { const { container } = render( ); - const panel = container.firstChild; + const panel = container.firstElementChild; expect(panel).toHaveAttribute('style', 'background-color: papayawhip;'); }); @@ -34,7 +33,7 @@ describe('', () => { it('should render custom props', () => { const customProps = { title: 'panel' }; const { container } = render(); - const panel = container.firstChild; + const panel = container.firstElementChild; expect(panel).toHaveAttribute('title', 'panel'); }); diff --git a/src/Panel/Panel.stories.js b/src/Panel/Panel.stories.tsx similarity index 94% rename from src/Panel/Panel.stories.js rename to src/Panel/Panel.stories.tsx index 47ed286c..460f4326 100644 --- a/src/Panel/Panel.stories.js +++ b/src/Panel/Panel.stories.tsx @@ -1,7 +1,6 @@ -import React from 'react'; -import styled from 'styled-components'; - +import { ComponentMeta } from '@storybook/react'; import { Panel } from 'react95'; +import styled from 'styled-components'; const Wrapper = styled.div` padding: 5rem; @@ -22,7 +21,7 @@ export default { title: 'Panel', component: Panel, decorators: [story => {story()}] -}; +} as ComponentMeta; export function Default() { return ( diff --git a/src/Panel/Panel.js b/src/Panel/Panel.tsx similarity index 56% rename from src/Panel/Panel.js rename to src/Panel/Panel.tsx index e3cacf47..1c84bb07 100644 --- a/src/Panel/Panel.js +++ b/src/Panel/Panel.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { forwardRef } from 'react'; import propTypes from 'prop-types'; import styled, { css } from 'styled-components'; import { @@ -6,8 +6,16 @@ import { createBoxStyles, createWellBorderStyles } from '../common'; +import { CommonStyledProps } from '../types'; -const createPanelStyles = (variant = 'default') => { +type PanelProps = { + children?: React.ReactNode; + shadow?: boolean; + variant?: 'outside' | 'inside' | 'well'; +} & React.HTMLAttributes & + CommonStyledProps; + +const createPanelStyles = (variant: PanelProps['variant']) => { switch (variant) { case 'well': return css` @@ -24,17 +32,19 @@ const createPanelStyles = (variant = 'default') => { } }; -const StyledPanel = styled.div` +const StyledPanel = styled.div>>` position: relative; font-size: 1rem; ${({ variant }) => createPanelStyles(variant)} ${createBoxStyles()} `; -const Panel = React.forwardRef(function Panel(props, ref) { - const { children, variant, ...otherProps } = props; +const Panel = forwardRef(function Panel( + { children, shadow = false, variant = 'outside', ...otherProps }, + ref +) { return ( - + {children} ); @@ -52,4 +62,4 @@ Panel.propTypes = { shadow: propTypes.bool }; -export default Panel; +export { Panel, PanelProps }; diff --git a/src/index.ts b/src/index.ts index 05595aef..1f30d80a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -20,7 +20,7 @@ export { default as List } from './List/List'; export { default as ListItem } from './ListItem/ListItem'; export { default as LoadingIndicator } from './LoadingIndicator/LoadingIndicator'; export { default as NumberField } from './NumberField/NumberField'; -export { default as Panel } from './Panel/Panel'; +export * from './Panel/Panel'; export { default as Progress } from './Progress/Progress'; export { default as Radio } from './Radio/Radio'; export { default as Select } from './Select/Select'; From ff380b9da7f5bde110b794bafc8a48556a0738e3 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 14:49:41 -0400 Subject: [PATCH 019/100] chore(lint): disable no-undef on TypeScript files --- .eslintrc.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/.eslintrc.js b/.eslintrc.js index 5e4f683b..1404e9f5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -51,6 +51,13 @@ module.exports = { rules: { 'no-console': 'off' } + }, + { + files: ['*.@(ts|tsx)'], + rules: { + // This is handled by @typescript-eslint/no-unused-vars + 'no-undef': 'off' + } } ], settings: { From 0c9d7c40d33ab2c5a063a20fd6e516791d1ce931 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 14:50:42 -0400 Subject: [PATCH 020/100] chore(switchbase): convert to TypeScript and export types --- src/SwitchBase/{SwitchBase.js => SwitchBase.ts} | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) rename src/SwitchBase/{SwitchBase.js => SwitchBase.ts} (80%) diff --git a/src/SwitchBase/SwitchBase.js b/src/SwitchBase/SwitchBase.ts similarity index 80% rename from src/SwitchBase/SwitchBase.js rename to src/SwitchBase/SwitchBase.ts index 2ac7a35d..9c7b7de9 100644 --- a/src/SwitchBase/SwitchBase.js +++ b/src/SwitchBase/SwitchBase.ts @@ -15,24 +15,24 @@ export const StyledInput = styled.input` z-index: -1; `; -export const StyledLabel = styled.label` +export const StyledLabel = styled.label<{ $disabled: boolean }>` display: inline-flex; align-items: center; position: relative; margin: 8px 0; - cursor: ${({ isDisabled }) => (!isDisabled ? 'pointer' : 'auto')}; + cursor: ${({ $disabled }) => (!$disabled ? 'pointer' : 'auto')}; user-select: none; font-size: 1rem; color: ${({ theme }) => theme.materialText}; - ${props => props.isDisabled && createDisabledTextStyles()} + ${props => props.$disabled && createDisabledTextStyles()} ${StyledListItem} & { margin: 0; height: 100%; } ${StyledListItem}:hover & { - ${({ theme, isDisabled }) => - !isDisabled && + ${({ $disabled, theme }) => + !$disabled && css` color: ${theme.materialTextInvert}; `}; From d42af74e6b66717f394813719f6496fda7ff770e Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 20:55:01 -0400 Subject: [PATCH 021/100] refactor(common): change isDisabled common prop to $disabled --- src/common/index.ts | 24 +++++++++++------------- src/types.tsx | 3 +-- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/src/common/index.ts b/src/common/index.ts index 644a7870..9f90ae7b 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -1,7 +1,5 @@ -import { css, ThemedStyledProps } from 'styled-components'; -import { Color, CommonThemeProps, Theme } from '../types'; - -type CSSProps = ThemedStyledProps; +import { css } from 'styled-components'; +import { Color, CommonThemeProps } from '../types'; export const shadow = '4px 4px 10px 0 rgba(0, 0, 0, 0.35)'; export const insetShadow = 'inset 2px 2px 3px rgba(0,0,0,0.2)'; @@ -47,13 +45,13 @@ export const createHatchedBackground = ({ background-position: 0 0, ${`${pixelSize}px ${pixelSize}px`}; `; -export const createFlatBoxStyles = () => css` +export const createFlatBoxStyles = () => css` position: relative; box-sizing: border-box; display: inline-block; color: ${({ theme }) => theme.materialText}; - background: ${({ theme, isDisabled }: CSSProps) => - isDisabled ? theme.flatLight : theme.canvas}; + background: ${({ $disabled, theme }) => + $disabled ? theme.flatLight : theme.canvas}; border: 2px solid ${({ theme }) => theme.canvas}; outline: 2px solid ${({ theme }) => theme.flatDark}; outline-offset: -4px; @@ -64,18 +62,18 @@ export const createBorderStyles = ({ windowBorders = false } = {}) => invert - ? css` + ? css` border-style: solid; border-width: 2px; border-left-color: ${({ theme }) => theme.borderDarkest}; border-top-color: ${({ theme }) => theme.borderDarkest}; border-right-color: ${({ theme }) => theme.borderLightest}; border-bottom-color: ${({ theme }) => theme.borderLightest}; - box-shadow: ${(props: CSSProps) => props.shadow && `${shadow}, `} inset - 1px 1px 0px 1px ${({ theme }) => theme.borderDark}, + box-shadow: ${props => props.shadow && `${shadow}, `} inset 1px 1px 0px + 1px ${({ theme }) => theme.borderDark}, inset -1px -1px 0 1px ${({ theme }) => theme.borderLight}; ` - : css` + : css` border-style: solid; border-width: 2px; border-left-color: ${({ theme }) => @@ -84,8 +82,8 @@ export const createBorderStyles = ({ windowBorders ? theme.borderLight : theme.borderLightest}; border-right-color: ${({ theme }) => theme.borderDarkest}; border-bottom-color: ${({ theme }) => theme.borderDarkest}; - box-shadow: ${(props: CSSProps) => props.shadow && `${shadow}, `} inset - 1px 1px 0px 1px + box-shadow: ${props => props.shadow && `${shadow}, `} inset 1px 1px 0px + 1px ${({ theme }) => windowBorders ? theme.borderLightest : theme.borderLight}, inset -1px -1px 0 1px ${({ theme }) => theme.borderDark}; diff --git a/src/types.tsx b/src/types.tsx index 5b384720..57d0c631 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -19,8 +19,7 @@ export type CommonStyledProps = { }; export type CommonThemeProps = { - // TODO: Rename to base `disabled` - isDisabled?: boolean; + $disabled?: boolean; shadow?: boolean; }; From 1c160254c329c7ed7d61b6ba9e43159aef3f9828 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 14:50:51 -0400 Subject: [PATCH 022/100] feat(checkbox): convert to TypeScript and export types --- src/Checkbox/Checkbox.mdx | 50 +++--- .../{Checkbox.spec.js => Checkbox.spec.tsx} | 9 +- ...eckbox.stories.js => Checkbox.stories.tsx} | 19 +- src/Checkbox/{Checkbox.js => Checkbox.tsx} | 169 ++++++++---------- src/index.ts | 2 +- 5 files changed, 118 insertions(+), 131 deletions(-) rename src/Checkbox/{Checkbox.spec.js => Checkbox.spec.tsx} (94%) rename src/Checkbox/{Checkbox.stories.js => Checkbox.stories.tsx} (92%) rename src/Checkbox/{Checkbox.js => Checkbox.tsx} (58%) diff --git a/src/Checkbox/Checkbox.mdx b/src/Checkbox/Checkbox.mdx index d010ace9..af820a72 100644 --- a/src/Checkbox/Checkbox.mdx +++ b/src/Checkbox/Checkbox.mdx @@ -3,13 +3,13 @@ name: Checkbox menu: Components --- -import Checkbox from './Checkbox' -import Fieldset from '../Fieldset/Fieldset' -import Button from '../Button/Button' -import Cutout from '../Cutout/Cutout' -import List from '../List/List' -import ListItem from '../ListItem/ListItem' -import Divider from '../Divider/Divider' +import { Checkbox } from './Checkbox'; +import Fieldset from '../Fieldset/Fieldset'; +import Button from '../Button/Button'; +import Cutout from '../Cutout/Cutout'; +import List from '../List/List'; +import ListItem from '../ListItem/ListItem'; +import Divider from '../Divider/Divider'; # Checkbox @@ -19,29 +19,31 @@ import Divider from '../Divider/Divider' {() => { - const [steak, setSteak] = React.useState(true) - const [tortilla, setTortilla] = React.useState(false) - const [pizza, setPizza] = React.useState(false) + const [steak, setSteak] = React.useState(true); + const [tortilla, setTortilla] = React.useState(false); + const [pizza, setPizza] = React.useState(false); const handleChange = event => { - const { target: { value } } = event; + const { + target: { value } + } = event; if (value === 'steak') { - setSteak(!steak) - return + setSteak(!steak); + return; } if (value === 'tortilla') { - setTortilla(!tortilla) - return + setTortilla(!tortilla); + return; } if (value === 'pizza') { - setPizza(!pizza) - return + setPizza(!pizza); + return; } }; const reset = () => { - setSteak(false) - setTortilla(false) - setPizza(false) - } + setSteak(false); + setTortilla(false); + setPizza(false); + }; return (
@@ -94,11 +96,12 @@ import Divider from '../Divider/Divider' #### Flat +

- When you want to add input field on a light background (like - scrollable content), just use the flat variant: + When you want to add input field on a light background (like scrollable + content), just use the flat variant:

#### Menu + diff --git a/src/Checkbox/Checkbox.spec.js b/src/Checkbox/Checkbox.spec.tsx similarity index 94% rename from src/Checkbox/Checkbox.spec.js rename to src/Checkbox/Checkbox.spec.tsx index e2c77ed7..40f5d452 100644 --- a/src/Checkbox/Checkbox.spec.js +++ b/src/Checkbox/Checkbox.spec.tsx @@ -1,6 +1,5 @@ -import React from 'react'; import { renderWithTheme } from '../../test/utils'; -import Checkbox from './Checkbox'; +import { Checkbox } from './Checkbox'; describe('', () => { describe('label', () => { @@ -106,7 +105,7 @@ describe('', () => { ); rerender(); - const checkbox = getByRole('checkbox'); + const checkbox = getByRole('checkbox') as HTMLInputElement; expect(checkbox.checked).toBe(true); expect(getByRole('checkbox')).toHaveAttribute('checked'); @@ -119,7 +118,7 @@ describe('', () => { it('should uncheck the checkbox', () => { const { getByRole, rerender } = renderWithTheme(); rerender(); - const checkbox = getByRole('checkbox'); + const checkbox = getByRole('checkbox') as HTMLInputElement; expect(checkbox.checked).toBe(false); expect(getByRole('checkbox')).not.toHaveAttribute('checked'); @@ -131,7 +130,7 @@ describe('', () => { describe('uncontrolled', () => { it('can change checked state uncontrolled starting from defaultChecked', () => { const { getByRole } = renderWithTheme(); - const checkbox = getByRole('checkbox'); + const checkbox = getByRole('checkbox') as HTMLInputElement; expect(checkbox.checked).toBe(true); diff --git a/src/Checkbox/Checkbox.stories.js b/src/Checkbox/Checkbox.stories.tsx similarity index 92% rename from src/Checkbox/Checkbox.stories.js rename to src/Checkbox/Checkbox.stories.tsx index 7b8d0fcf..cfee5b07 100644 --- a/src/Checkbox/Checkbox.stories.js +++ b/src/Checkbox/Checkbox.stories.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import { Checkbox, Fieldset, Cutout, List, ListItem, Divider } from 'react95'; +import { ComponentMeta } from '@storybook/react'; const Wrapper = styled.div` background: ${({ theme }) => theme.material}; @@ -21,7 +22,7 @@ export default { title: 'Checkbox', component: Checkbox, decorators: [story => {story()}] -}; +} as ComponentMeta; export function Default() { const [state, setState] = useState({ @@ -33,7 +34,7 @@ export function Default() { const { cheese, bacon, broccoli } = state; const ingredientsArr = Object.values(state).map(val => (val ? 1 : 0)); const possibleIngredients = Object.keys(state).length; - const chosenIngredients = ingredientsArr.reduce((a, b) => a + b, 0); + const chosenIngredients = ingredientsArr.reduce((a, b) => a + b, 0); const isIndeterminate = ![0, possibleIngredients].includes(chosenIngredients); @@ -60,10 +61,8 @@ export function Default() { } }; - const toggleIngredient = e => { - const { - target: { value } - } = e; + const toggleIngredient = (e: React.ChangeEvent) => { + const value = e.target.value as 'cheese' | 'bacon' | 'broccoli'; setState({ ...state, [value]: !state[value] @@ -135,7 +134,7 @@ export function Flat() { const { cheese, bacon, broccoli } = state; const ingredientsArr = Object.values(state).map(val => (val ? 1 : 0)); const possibleIngredients = Object.keys(state).length; - const chosenIngredients = ingredientsArr.reduce((a, b) => a + b, 0); + const chosenIngredients = ingredientsArr.reduce((a, b) => a + b, 0); const isIndeterminate = ![0, possibleIngredients].includes(chosenIngredients); @@ -162,10 +161,8 @@ export function Flat() { } }; - const toggleIngredient = e => { - const { - target: { value } - } = e; + const toggleIngredient = (e: React.ChangeEvent) => { + const value = e.target.value as 'cheese' | 'bacon' | 'broccoli'; setState({ ...state, [value]: !state[value] diff --git a/src/Checkbox/Checkbox.js b/src/Checkbox/Checkbox.tsx similarity index 58% rename from src/Checkbox/Checkbox.js rename to src/Checkbox/Checkbox.tsx index 8fc54371..4e37d4d1 100644 --- a/src/Checkbox/Checkbox.js +++ b/src/Checkbox/Checkbox.tsx @@ -1,18 +1,37 @@ -import React from 'react'; -import propTypes from 'prop-types'; - +import React, { forwardRef, useCallback } from 'react'; import styled, { css } from 'styled-components'; -import { createHatchedBackground } from '../common'; +import { createHatchedBackground } from '../common'; import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled'; +import { noOp } from '../common/utils'; import { StyledCutout } from '../Cutout/Cutout'; import { StyledListItem } from '../ListItem/ListItem'; import { + LabelText, size, StyledInput, - StyledLabel, - LabelText + StyledLabel } from '../SwitchBase/SwitchBase'; +import { CommonThemeProps } from '../types'; + +type CheckboxProps = { + checked?: boolean; + className?: string; + defaultChecked?: boolean; + disabled?: boolean; + indeterminate?: boolean; + label?: number | string; + name?: string; + onChange?: React.InputHTMLAttributes['onChange']; + style?: React.CSSProperties; + value?: number | string; + variant?: 'default' | 'flat' | 'menu'; +} & React.InputHTMLAttributes; + +type CheckmarkProps = { + $disabled: boolean; + variant: 'default' | 'flat' | 'menu'; +}; const sharedCheckboxStyles = css` width: ${size}px; @@ -22,37 +41,37 @@ const sharedCheckboxStyles = css` justify-content: space-around; margin-right: 0.5rem; `; -const StyledCheckbox = styled(StyledCutout)` +const StyledCheckbox = styled(StyledCutout)` ${sharedCheckboxStyles} width: ${size}px; height: ${size}px; - background: ${({ theme, isDisabled }) => - isDisabled ? theme.material : theme.canvas}; + background: ${({ $disabled, theme }) => + $disabled ? theme.material : theme.canvas}; &:before { box-shadow: none; } `; -const StyledFlatCheckbox = styled.div` +const StyledFlatCheckbox = styled.div` position: relative; box-sizing: border-box; display: inline-block; - background: ${({ theme, isDisabled }) => - isDisabled ? theme.flatLight : theme.canvas}; + background: ${({ $disabled, theme }) => + $disabled ? theme.flatLight : theme.canvas}; ${sharedCheckboxStyles} width: ${size - 4}px; height: ${size - 4}px; outline: none; border: 2px solid ${({ theme }) => theme.flatDark}; - background: ${({ theme, isDisabled }) => - isDisabled ? theme.flatLight : theme.canvas}; + background: ${({ $disabled, theme }) => + $disabled ? theme.flatLight : theme.canvas}; `; -const StyledMenuCheckbox = styled.div` +const StyledMenuCheckbox = styled.div` position: relative; box-sizing: border-box; display: inline-block; - background: ${({ theme, isDisabled }) => - isDisabled ? theme.flatLight : theme.canvas}; + background: ${({ $disabled, theme }) => + $disabled ? theme.flatLight : theme.canvas}; ${sharedCheckboxStyles} width: ${size - 4}px; height: ${size - 4}px; @@ -63,7 +82,7 @@ const StyledMenuCheckbox = styled.div` const CheckmarkIcon = styled.span.attrs(() => ({ 'data-testid': 'checkmarkIcon' -}))` +}))` display: inline-block; position: relative; width: 100%; @@ -78,30 +97,30 @@ const CheckmarkIcon = styled.span.attrs(() => ({ height: 7px; border: solid - ${({ theme, isDisabled }) => - isDisabled ? theme.checkmarkDisabled : theme.checkmark}; + ${({ $disabled, theme }) => + $disabled ? theme.checkmarkDisabled : theme.checkmark}; border-width: 0 3px 3px 0; transform: translate(-50%, -50%) rotate(45deg); - ${({ variant, theme, isDisabled }) => + ${({ $disabled, theme, variant }) => variant === 'menu' ? css` - border-color: ${isDisabled + border-color: ${$disabled ? theme.materialTextDisabled : theme.materialText}; filter: drop-shadow( 1px 1px 0px - ${isDisabled ? theme.materialTextDisabledShadow : 'transparent'} + ${$disabled ? theme.materialTextDisabledShadow : 'transparent'} ); ` : css` - border-color: ${isDisabled + border-color: ${$disabled ? theme.checkmarkDisabled : theme.checkmark}; `} ${StyledListItem}:hover & { - ${({ theme, isDisabled, variant }) => - !isDisabled && + ${({ $disabled, theme, variant }) => + !$disabled && variant === 'menu' && css` border-color: ${theme.materialTextInvert}; @@ -110,7 +129,7 @@ const CheckmarkIcon = styled.span.attrs(() => ({ `; const IndeterminateIcon = styled.span.attrs(() => ({ 'data-testid': 'indeterminateIcon' -}))` +}))` display: inline-block; position: relative; @@ -131,13 +150,13 @@ const IndeterminateIcon = styled.span.attrs(() => ({ width: 100%; height: 100%; - ${({ theme, isDisabled }) => + ${({ $disabled, theme }) => createHatchedBackground({ - mainColor: isDisabled ? theme.checkmarkDisabled : theme.checkmark + mainColor: $disabled ? theme.checkmarkDisabled : theme.checkmark })} background-position: 0px 0px, 2px 2px; - ${({ variant, isDisabled, theme }) => + ${({ $disabled, theme, variant }) => variant === 'menu' && css` ${StyledListItem}:hover & { @@ -147,7 +166,7 @@ const IndeterminateIcon = styled.span.attrs(() => ({ } filter: drop-shadow( 1px 1px 0px - ${isDisabled ? theme.materialTextDisabledShadow : 'transparent'} + ${$disabled ? theme.materialTextDisabledShadow : 'transparent'} ); `}; } @@ -159,30 +178,35 @@ const CheckboxComponents = { menu: StyledMenuCheckbox }; -const Checkbox = React.forwardRef(function Checkbox(props, ref) { - const { - onChange, - label, - disabled, - variant, - value, +const Checkbox = forwardRef(function Checkbox( + { checked, - defaultChecked, - indeterminate, - name, - className, - style, + className = '', + defaultChecked = false, + disabled = false, + indeterminate = false, + label = '', + onChange = noOp, + style = {}, + value, + variant = 'default', ...otherProps - } = props; + }, + ref +) { const [state, setState] = useControlledOrUncontrolled({ value: checked, defaultValue: defaultChecked }); - const handleChange = e => { - const newState = e.target.checked; - setState(newState); - if (onChange) onChange(e); - }; + + const handleChange = useCallback( + (e: React.ChangeEvent) => { + const newState = e.target.checked; + setState(newState); + onChange(e); + }, + [onChange] + ); const CheckboxComponent = CheckboxComponents[variant]; @@ -192,8 +216,9 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) { } else if (state) { Icon = CheckmarkIcon; } + return ( - + - - {Icon && } + + {Icon && } {label && {label}} ); }); -Checkbox.defaultProps = { - label: '', - disabled: false, - variant: 'default', - onChange: () => {}, - checked: undefined, - style: {}, - defaultChecked: false, - className: '', - indeterminate: false, - value: undefined, - name: null -}; - -Checkbox.propTypes = { - onChange: propTypes.func, - name: propTypes.string, - value: propTypes.oneOfType([ - propTypes.string, - propTypes.number, - propTypes.bool - ]), - label: propTypes.oneOfType([propTypes.string, propTypes.number]), - checked: propTypes.bool, - disabled: propTypes.bool, - variant: propTypes.oneOf(['default', 'flat', 'menu']), - style: propTypes.object, - defaultChecked: propTypes.bool, - indeterminate: propTypes.bool, - className: propTypes.string -}; - -export default Checkbox; +export { Checkbox, CheckboxProps }; diff --git a/src/index.ts b/src/index.ts index 1f30d80a..097c044a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,7 +8,7 @@ export * from './AppBar/AppBar'; export * from './Avatar/Avatar'; export * from './Bar/Bar'; export { default as Button } from './Button/Button'; -export { default as Checkbox } from './Checkbox/Checkbox'; +export * from './Checkbox/Checkbox'; export { default as ColorInput } from './ColorInput/ColorInput'; export * from './Counter/Counter'; export { default as Cutout } from './Cutout/Cutout'; From 8d37b0cc0a4d1127f36a63b83ac731ea04adc6c0 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 12:48:49 -0400 Subject: [PATCH 023/100] feat(button): convert to TypeScript and export types --- src/AppBar/AppBar.mdx | 2 +- src/Bar/Bar.mdx | 2 +- src/Button/Button.mdx | 32 ++--- .../{Button.spec.js => Button.spec.tsx} | 3 +- .../{Button.stories.js => Button.stories.tsx} | 22 +-- src/Button/{Button.js => Button.tsx} | 127 ++++++++++-------- src/Checkbox/Checkbox.mdx | 2 +- src/DatePicker/DatePicker.js | 2 +- src/NumberField/NumberField.js | 2 +- src/Tooltip/Tooltip.mdx | 2 +- src/Tree/Tree.stories.js | 2 +- src/Window/Window.mdx | 10 +- src/index.ts | 2 +- 13 files changed, 108 insertions(+), 102 deletions(-) rename src/Button/{Button.spec.js => Button.spec.tsx} (98%) rename src/Button/{Button.stories.js => Button.stories.tsx} (95%) rename src/Button/{Button.js => Button.tsx} (59%) diff --git a/src/AppBar/AppBar.mdx b/src/AppBar/AppBar.mdx index d28ffac9..d15d8bbd 100644 --- a/src/AppBar/AppBar.mdx +++ b/src/AppBar/AppBar.mdx @@ -5,7 +5,7 @@ menu: Components import { AppBar } from './AppBar'; import Toolbar from '../Toolbar/Toolbar'; -import Button from '../Button/Button'; +import { Button } from '../Button/Button'; import TextField from '../TextField/TextField'; import List from '../List/List'; import ListItem from '../ListItem/ListItem'; diff --git a/src/Bar/Bar.mdx b/src/Bar/Bar.mdx index b316a35f..5cdcfb9c 100644 --- a/src/Bar/Bar.mdx +++ b/src/Bar/Bar.mdx @@ -6,7 +6,7 @@ menu: Components import { Bar } from '../Bar/Bar'; import { AppBar } from '../AppBar/AppBar.js'; import Toolbar from '../Toolbar/Toolbar.js'; -import Button from '../Button/Button.js'; +import { Button } from '../Button/Button.js'; # Bar diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx index 5cdffc97..db5d0b04 100644 --- a/src/Button/Button.mdx +++ b/src/Button/Button.mdx @@ -3,11 +3,11 @@ name: Button menu: Components --- -import Button from './Button' -import Window from '../Window/Window' -import WindowContent from '../WindowContent/WindowContent' -import Cutout from '../Cutout/Cutout' -import Toolbar from '../Toolbar/Toolbar' +import { Button } from './Button'; +import Window from '../Window/Window'; +import WindowContent from '../WindowContent/WindowContent'; +import Cutout from '../Cutout/Cutout'; +import Toolbar from '../Toolbar/Toolbar'; # Button @@ -16,7 +16,7 @@ import Toolbar from '../Toolbar/Toolbar' #### Default - + #### Disabled @@ -58,15 +58,9 @@ import Toolbar from '../Toolbar/Toolbar' justifyContent: 'space-between' }} > - - - + + +
@@ -90,14 +84,10 @@ import Toolbar from '../Toolbar/Toolbar' > Primary - - diff --git a/src/Button/Button.spec.js b/src/Button/Button.spec.tsx similarity index 98% rename from src/Button/Button.spec.js rename to src/Button/Button.spec.tsx index 741f1c8b..f79ad1e4 100644 --- a/src/Button/Button.spec.js +++ b/src/Button/Button.spec.tsx @@ -1,10 +1,9 @@ -import React from 'react'; import { render, fireEvent } from '@testing-library/react'; import { renderWithTheme, theme } from '../../test/utils'; import { blockSizes } from '../common/system'; -import Button from './Button'; +import { Button } from './Button'; const defaultProps = { children: 'click me' diff --git a/src/Button/Button.stories.js b/src/Button/Button.stories.tsx similarity index 95% rename from src/Button/Button.stories.js rename to src/Button/Button.stories.tsx index 8ca66f0f..12792fe3 100644 --- a/src/Button/Button.stories.js +++ b/src/Button/Button.stories.tsx @@ -1,17 +1,17 @@ -import React from 'react'; -import styled from 'styled-components'; - +import { ComponentMeta } from '@storybook/react'; +import { useState } from 'react'; import { Button, - Window, - WindowHeader, - WindowContent, + Cutout, + Divider, List, ListItem, - Divider, - Cutout, - Toolbar + Toolbar, + Window, + WindowContent, + WindowHeader } from 'react95'; +import styled from 'styled-components'; const Wrapper = styled.div` padding: 5rem; @@ -32,7 +32,7 @@ export default { title: 'Button', component: Button, decorators: [story => {story()}] -}; +} as ComponentMeta; export function Default() { return ( @@ -66,7 +66,7 @@ Default.story = { const imageSrc = 'https://image.freepik.com/foto-gratuito/la-frutta-fresca-del-kiwi-tagliata-a-meta-con-la-decorazione-completa-del-pezzo-e-bella-sulla-tavola-di-legno_47436-1.jpg'; export function Menu() { - const [open, setOpen] = React.useState(false); + const [open, setOpen] = useState(false); return ( diff --git a/src/Button/Button.js b/src/Button/Button.tsx similarity index 59% rename from src/Button/Button.js rename to src/Button/Button.tsx index d28153b9..84fb1df0 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.tsx @@ -1,36 +1,61 @@ /* eslint-disable no-nested-ternary */ -import React from 'react'; -import propTypes from 'prop-types'; - +import React, { forwardRef } from 'react'; import styled, { css } from 'styled-components'; import { createBorderStyles, - createWellBorderStyles, createBoxStyles, - createFlatBoxStyles, createDisabledTextStyles, + createFlatBoxStyles, createHatchedBackground, + createWellBorderStyles, focusOutline } from '../common'; -import { noOp } from '../common/utils'; import { blockSizes } from '../common/system'; +import { noOp } from '../common/utils'; +import { CommonStyledProps, Sizes } from '../types'; -const commonButtonStyles = css` +type ButtonProps = { + active?: boolean; + children?: React.ReactNode; + disabled?: boolean; + fullWidth?: boolean; + onClick?: React.ButtonHTMLAttributes['onClick']; + onTouchStart?: React.ButtonHTMLAttributes['onTouchStart']; + primary?: boolean; + size?: Sizes; + square?: boolean; + type?: string; + variant?: 'default' | 'menu' | 'flat'; +} & React.ButtonHTMLAttributes & + CommonStyledProps; + +type StyledButtonProps = Pick< + ButtonProps, + | 'active' + | 'disabled' + | 'fullWidth' + | 'primary' + | 'size' + | 'square' + | 'variant' +>; + +const commonButtonStyles = css` position: relative; display: inline-flex; align-items: center; justify-content: center; - height: ${({ size }) => blockSizes[size]}; - width: ${({ fullWidth, square, size }) => + height: ${({ size = 'md' }) => blockSizes[size]}; + width: ${({ fullWidth, size = 'md', square }) => fullWidth ? '100%' : square ? blockSizes[size] : 'auto'}; padding: ${({ square }) => (square ? 0 : `0 10px`)}; font-size: 1rem; user-select: none; &:active { - padding-top: ${({ isDisabled }) => !isDisabled && '2px'}; + padding-top: ${({ disabled }) => !disabled && '2px'}; } - padding-top: ${({ active, isDisabled }) => active && !isDisabled && '2px'}; + padding-top: ${({ active, disabled }) => active && !disabled && '2px'}; &:after { content: ''; position: absolute; @@ -46,8 +71,8 @@ const commonButtonStyles = css` font-family: inherit; `; -export const StyledButton = styled.button` - ${({ variant, theme, active, isDisabled, primary }) => +export const StyledButton = styled.button` + ${({ active, disabled, primary, theme, variant }) => variant === 'flat' ? css` ${createFlatBoxStyles()} @@ -63,7 +88,7 @@ export const StyledButton = styled.button` outline-offset: -4px; `} &:focus:after, &:active:after { - ${!active && !isDisabled && focusOutline} + ${!active && !disabled && focusOutline} outline-offset: -4px; } ` @@ -73,18 +98,18 @@ export const StyledButton = styled.button` border: 2px solid transparent; &:hover, &:focus { - ${!isDisabled && !active && createWellBorderStyles(false)} + ${!disabled && !active && createWellBorderStyles(false)} } &:active { - ${!isDisabled && createWellBorderStyles(true)} + ${!disabled && createWellBorderStyles(true)} } ${active && createWellBorderStyles(true)} - ${isDisabled && createDisabledTextStyles()} + ${disabled && createDisabledTextStyles()} ` : css` ${createBoxStyles()}; border: none; - ${isDisabled && createDisabledTextStyles()} + ${disabled && createDisabledTextStyles()} ${active ? createHatchedBackground({ mainColor: theme.material, @@ -115,11 +140,11 @@ export const StyledButton = styled.button` : createBorderStyles({ invert: false })} } &:active:before { - ${!isDisabled && createBorderStyles({ invert: true })} + ${!disabled && createBorderStyles({ invert: true })} } &:focus:after, &:active:after { - ${!active && !isDisabled && focusOutline} + ${!active && !disabled && focusOutline} outline-offset: -8px; } &:active:focus:after, @@ -130,15 +155,36 @@ export const StyledButton = styled.button` ${commonButtonStyles} `; -const Button = React.forwardRef(function Button(props, ref) { - const { onClick, disabled, children, ...otherProps } = props; - +const Button = forwardRef(function Button( + { + onClick, + disabled = false, + children, + type = 'button', + fullWidth = false, + size = 'md', + square = false, + active = false, + onTouchStart = noOp, + primary = false, + variant = 'default', + ...otherProps + }, + ref +) { return ( {children} @@ -146,33 +192,4 @@ const Button = React.forwardRef(function Button(props, ref) { ); }); -Button.defaultProps = { - type: 'button', - onClick: null, - disabled: false, - fullWidth: false, - size: 'md', - square: false, - active: false, - // onTouchStart below to enable button :active style on iOS - onTouchStart: noOp, - primary: false, - variant: 'default' -}; - -Button.propTypes = { - type: propTypes.string, - onClick: propTypes.func, - disabled: propTypes.bool, - fullWidth: propTypes.bool, - size: propTypes.oneOf(['sm', 'md', 'lg']), - square: propTypes.bool, - active: propTypes.bool, - onTouchStart: propTypes.func, - primary: propTypes.bool, - variant: propTypes.oneOf(['default', 'menu', 'flat']), - // eslint-disable-next-line react/require-default-props - children: propTypes.node -}; - -export default Button; +export { Button, ButtonProps }; diff --git a/src/Checkbox/Checkbox.mdx b/src/Checkbox/Checkbox.mdx index af820a72..137aca20 100644 --- a/src/Checkbox/Checkbox.mdx +++ b/src/Checkbox/Checkbox.mdx @@ -5,7 +5,7 @@ menu: Components import { Checkbox } from './Checkbox'; import Fieldset from '../Fieldset/Fieldset'; -import Button from '../Button/Button'; +import { Button } from '../Button/Button'; import Cutout from '../Cutout/Cutout'; import List from '../List/List'; import ListItem from '../ListItem/ListItem'; diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js index 3cb11fa7..b79c496f 100644 --- a/src/DatePicker/DatePicker.js +++ b/src/DatePicker/DatePicker.js @@ -9,7 +9,7 @@ import WindowContent from '../WindowContent/WindowContent'; import Select from '../Select/Select'; import NumberField from '../NumberField/NumberField'; import Cutout from '../Cutout/Cutout'; -import Button from '../Button/Button'; +import { Button } from '../Button/Button'; import Toolbar from '../Toolbar/Toolbar'; const Calendar = styled(Cutout)` diff --git a/src/NumberField/NumberField.js b/src/NumberField/NumberField.js index 140c7bbd..2f747a9a 100644 --- a/src/NumberField/NumberField.js +++ b/src/NumberField/NumberField.js @@ -5,7 +5,7 @@ import styled, { css } from 'styled-components'; import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled'; import { clamp } from '../common/utils'; -import Button from '../Button/Button'; +import { Button } from '../Button/Button'; import { blockSizes } from '../common/system'; import TextField from '../TextField/TextField'; diff --git a/src/Tooltip/Tooltip.mdx b/src/Tooltip/Tooltip.mdx index b809b0df..bb18dfc7 100644 --- a/src/Tooltip/Tooltip.mdx +++ b/src/Tooltip/Tooltip.mdx @@ -4,7 +4,7 @@ menu: Components --- import Tooltip from './Tooltip'; -import Button from '../Button/Button'; +import { Button } from '../Button/Button'; # Tooltip diff --git a/src/Tree/Tree.stories.js b/src/Tree/Tree.stories.js index 1ce132e0..32561e72 100644 --- a/src/Tree/Tree.stories.js +++ b/src/Tree/Tree.stories.js @@ -2,7 +2,7 @@ import React, { useState, useCallback } from 'react'; import styled from 'styled-components'; import { Tree, Fieldset } from 'react95'; -import Button from '../Button/Button'; +import { Button } from '../Button/Button'; const Wrapper = styled.div` background: ${({ theme }) => theme.material}; diff --git a/src/Window/Window.mdx b/src/Window/Window.mdx index fe9f650d..740f6e01 100644 --- a/src/Window/Window.mdx +++ b/src/Window/Window.mdx @@ -3,11 +3,11 @@ name: Window menu: Components --- -import Window from './Window' -import WindowContent from '../WindowContent/WindowContent' -import WindowHeader from '../WindowHeader/WindowHeader' -import Button from '../Button/Button' -import Toolbar from '../Toolbar/Toolbar' +import Window from './Window'; +import WindowContent from '../WindowContent/WindowContent'; +import WindowHeader from '../WindowHeader/WindowHeader'; +import { Button } from '../Button/Button'; +import Toolbar from '../Toolbar/Toolbar'; # Window diff --git a/src/index.ts b/src/index.ts index 097c044a..ee3a0431 100644 --- a/src/index.ts +++ b/src/index.ts @@ -7,7 +7,7 @@ export * from './Anchor/Anchor'; export * from './AppBar/AppBar'; export * from './Avatar/Avatar'; export * from './Bar/Bar'; -export { default as Button } from './Button/Button'; +export * from './Button/Button'; export * from './Checkbox/Checkbox'; export { default as ColorInput } from './ColorInput/ColorInput'; export * from './Counter/Counter'; From 0b29e5ffecc72f3561446d57f1f50987623296d4 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 17:01:44 -0400 Subject: [PATCH 024/100] feat(hourglass): convert to TypeScript and export types --- src/Hourglass/Hourglass.js | 45 ------------------- src/Hourglass/Hourglass.mdx | 2 +- src/Hourglass/Hourglass.spec.js | 30 ------------- src/Hourglass/Hourglass.spec.tsx | 34 ++++++++++++++ ...glass.stories.js => Hourglass.stories.tsx} | 4 +- src/Hourglass/Hourglass.tsx | 34 ++++++++++++++ ...base64hourglass.js => base64hourglass.tsx} | 0 src/index.ts | 2 +- 8 files changed, 72 insertions(+), 79 deletions(-) delete mode 100644 src/Hourglass/Hourglass.js delete mode 100644 src/Hourglass/Hourglass.spec.js create mode 100644 src/Hourglass/Hourglass.spec.tsx rename src/Hourglass/{Hourglass.stories.js => Hourglass.stories.tsx} (82%) create mode 100644 src/Hourglass/Hourglass.tsx rename src/Hourglass/{base64hourglass.js => base64hourglass.tsx} (100%) diff --git a/src/Hourglass/Hourglass.js b/src/Hourglass/Hourglass.js deleted file mode 100644 index 3adc5250..00000000 --- a/src/Hourglass/Hourglass.js +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import propTypes from 'prop-types'; -import styled from 'styled-components'; -import base64hourglass from './base64hourglass'; - -const StyledContainer = styled.span` - display: inline-block; -`; - -const StyledHourglass = styled.span` - display: block; - background: ${base64hourglass}; - background-size: cover; - width: 100%; - height: 100%; -`; - -const Hourglass = React.forwardRef(function HourGlass(props, ref) { - const { size, style, ...otherProps } = props; - return ( - - - - ); -}); - -Hourglass.defaultProps = { - size: '30px', - style: {} -}; - -Hourglass.propTypes = { - size: propTypes.oneOfType([propTypes.string, propTypes.number]), - // eslint-disable-next-line react/forbid-prop-types - style: propTypes.object -}; -export default Hourglass; diff --git a/src/Hourglass/Hourglass.mdx b/src/Hourglass/Hourglass.mdx index 0d4b8b8e..e4ca81be 100644 --- a/src/Hourglass/Hourglass.mdx +++ b/src/Hourglass/Hourglass.mdx @@ -3,7 +3,7 @@ name: Hourglass menu: Components --- -import Hourglass from './Hourglass'; +import { Hourglass } from './Hourglass'; # Hourglass diff --git a/src/Hourglass/Hourglass.spec.js b/src/Hourglass/Hourglass.spec.js deleted file mode 100644 index 198b80df..00000000 --- a/src/Hourglass/Hourglass.spec.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; - -import Hourglass from './Hourglass'; - -describe('', () => { - it('should render hourglass', () => { - const { container } = render(); - const barEl = container.firstChild; - - expect(barEl).toBeInTheDocument(); - }); - - it('should render correct size', () => { - const { container } = render(); - const hourglass = container.firstChild; - - const computedStyles = window.getComputedStyle(hourglass); - expect(computedStyles.width).toBe('66px'); - expect(computedStyles.height).toBe('66px'); - }); - - it('should handle custom props', () => { - const customProps = { alt: 'hourglass' }; - const { container } = render(); - const hourglass = container.firstChild; - - expect(hourglass).toHaveAttribute('alt', 'hourglass'); - }); -}); diff --git a/src/Hourglass/Hourglass.spec.tsx b/src/Hourglass/Hourglass.spec.tsx new file mode 100644 index 00000000..46cdab07 --- /dev/null +++ b/src/Hourglass/Hourglass.spec.tsx @@ -0,0 +1,34 @@ +import { render } from '@testing-library/react'; +import React from 'react'; + +import { Hourglass } from './Hourglass'; + +describe('', () => { + it('should render hourglass', () => { + const { container } = render(); + const hourglass = container.firstElementChild; + + expect(hourglass).toBeInTheDocument(); + }); + + it('should render correct size', () => { + const { container } = render(); + const hourglass = container.firstElementChild; + + const computedStyles = hourglass + ? window.getComputedStyle(hourglass) + : null; + expect(computedStyles?.width).toBe('66px'); + expect(computedStyles?.height).toBe('66px'); + }); + + it('should handle custom props', () => { + const customProps: React.HTMLAttributes = { + title: 'hourglass' + }; + const { container } = render(); + const hourglass = container.firstElementChild; + + expect(hourglass).toHaveAttribute('title', 'hourglass'); + }); +}); diff --git a/src/Hourglass/Hourglass.stories.js b/src/Hourglass/Hourglass.stories.tsx similarity index 82% rename from src/Hourglass/Hourglass.stories.js rename to src/Hourglass/Hourglass.stories.tsx index db7dbd30..e0980e60 100644 --- a/src/Hourglass/Hourglass.stories.js +++ b/src/Hourglass/Hourglass.stories.tsx @@ -1,7 +1,7 @@ -import React from 'react'; import styled from 'styled-components'; import { Hourglass } from 'react95'; +import { ComponentMeta } from '@storybook/react'; const Wrapper = styled.div` padding: 5rem; @@ -12,7 +12,7 @@ export default { title: 'Hourglass', component: Hourglass, decorators: [story => {story()}] -}; +} as ComponentMeta; export function Default() { return ; diff --git a/src/Hourglass/Hourglass.tsx b/src/Hourglass/Hourglass.tsx new file mode 100644 index 00000000..e64ebd7b --- /dev/null +++ b/src/Hourglass/Hourglass.tsx @@ -0,0 +1,34 @@ +import { forwardRef } from 'react'; +import styled from 'styled-components'; +import { getSize } from '../common/utils'; +import base64hourglass from './base64hourglass'; + +type HourglassProps = { + size?: string | number; +}; + +const StyledContainer = styled.span>>` + display: inline-block; + height: ${({ size }) => getSize(size)}; + width: ${({ size }) => getSize(size)}; +`; + +const StyledHourglass = styled.span` + display: block; + background: ${base64hourglass}; + background-size: cover; + width: 100%; + height: 100%; +`; + +const Hourglass = forwardRef( + function Hourglass({ size = 30, ...otherProps }, ref) { + return ( + + + + ); + } +); + +export { Hourglass, HourglassProps }; diff --git a/src/Hourglass/base64hourglass.js b/src/Hourglass/base64hourglass.tsx similarity index 100% rename from src/Hourglass/base64hourglass.js rename to src/Hourglass/base64hourglass.tsx diff --git a/src/index.ts b/src/index.ts index ee3a0431..476a9447 100644 --- a/src/index.ts +++ b/src/index.ts @@ -15,7 +15,7 @@ export { default as Cutout } from './Cutout/Cutout'; export * from './Desktop/Desktop'; export * from './Divider/Divider'; export { default as Fieldset } from './Fieldset/Fieldset'; -export { default as Hourglass } from './Hourglass/Hourglass'; +export * from './Hourglass/Hourglass'; export { default as List } from './List/List'; export { default as ListItem } from './ListItem/ListItem'; export { default as LoadingIndicator } from './LoadingIndicator/LoadingIndicator'; From c4bb62834f8cfc15bb70c0f6106e45f412db4334 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 20:38:29 -0400 Subject: [PATCH 025/100] feat(radio): convert to TypeScript and export types --- src/Radio/Radio.mdx | 2 +- src/Radio/{Radio.spec.js => Radio.spec.tsx} | 7 +- .../{Radio.stories.js => Radio.stories.tsx} | 15 ++- src/Radio/{Radio.js => Radio.tsx} | 127 +++++++++--------- src/index.ts | 2 +- 5 files changed, 73 insertions(+), 80 deletions(-) rename src/Radio/{Radio.spec.js => Radio.spec.tsx} (93%) rename src/Radio/{Radio.stories.js => Radio.stories.tsx} (96%) rename src/Radio/{Radio.js => Radio.tsx} (55%) diff --git a/src/Radio/Radio.mdx b/src/Radio/Radio.mdx index ec593a84..a576344b 100644 --- a/src/Radio/Radio.mdx +++ b/src/Radio/Radio.mdx @@ -3,7 +3,7 @@ name: Radio menu: Components --- -import Radio from './Radio'; +import { Radio } from './Radio'; import Fieldset from '../Fieldset/Fieldset'; import Window from '../Window/Window'; import WindowContent from '../WindowContent/WindowContent'; diff --git a/src/Radio/Radio.spec.js b/src/Radio/Radio.spec.tsx similarity index 93% rename from src/Radio/Radio.spec.js rename to src/Radio/Radio.spec.tsx index dbf62624..4fc5ae45 100644 --- a/src/Radio/Radio.spec.js +++ b/src/Radio/Radio.spec.tsx @@ -1,6 +1,5 @@ -import React from 'react'; import { renderWithTheme } from '../../test/utils'; -import Radio from './Radio'; +import { Radio } from './Radio'; describe('', () => { describe('label', () => { @@ -51,7 +50,7 @@ describe('', () => { ); rerender(); - const checkbox = getByRole('radio'); + const checkbox = getByRole('radio') as HTMLInputElement; expect(checkbox.checked).toBe(true); expect(getByRole('radio')).toHaveAttribute('checked'); @@ -66,7 +65,7 @@ describe('', () => { ); rerender(); - const checkbox = getByRole('radio'); + const checkbox = getByRole('radio') as HTMLInputElement; expect(checkbox.checked).toBe(false); expect(getByRole('radio')).not.toHaveAttribute('checked'); diff --git a/src/Radio/Radio.stories.js b/src/Radio/Radio.stories.tsx similarity index 96% rename from src/Radio/Radio.stories.js rename to src/Radio/Radio.stories.tsx index a64d4152..fca7f588 100644 --- a/src/Radio/Radio.stories.js +++ b/src/Radio/Radio.stories.tsx @@ -1,15 +1,16 @@ -import React, { useState } from 'react'; -import styled from 'styled-components'; +import { ComponentMeta } from '@storybook/react'; +import { useState } from 'react'; import { - Radio, Cutout, + Divider, Fieldset, - Window, - WindowContent, List, ListItem, - Divider + Radio, + Window, + WindowContent } from 'react95'; +import styled from 'styled-components'; const Wrapper = styled.div` padding: 5rem; @@ -28,7 +29,7 @@ export default { title: 'Radio', component: Radio, decorators: [story => {story()}] -}; +} as ComponentMeta; export function Default() { const [state, setState] = useState('Pear'); diff --git a/src/Radio/Radio.js b/src/Radio/Radio.tsx similarity index 55% rename from src/Radio/Radio.js rename to src/Radio/Radio.tsx index 5c024d60..a15ae428 100644 --- a/src/Radio/Radio.js +++ b/src/Radio/Radio.tsx @@ -1,17 +1,31 @@ -import React from 'react'; -import propTypes from 'prop-types'; +import React, { forwardRef } from 'react'; +import styled, { css, CSSProperties } from 'styled-components'; -import styled, { css } from 'styled-components'; import { createFlatBoxStyles } from '../common'; import { StyledCutout } from '../Cutout/Cutout'; import { StyledListItem } from '../ListItem/ListItem'; - import { + LabelText, size, StyledInput, - StyledLabel, - LabelText + StyledLabel } from '../SwitchBase/SwitchBase'; +import { CommonStyledProps } from '../types'; + +type RadioVariant = 'default' | 'flat' | 'menu'; + +type RadioProps = { + checked?: boolean; + className?: string; + disabled?: boolean; + label?: string | number; + name?: string; + onChange?: React.ChangeEventHandler; + style?: CSSProperties; + value?: string | number | boolean; + variant?: RadioVariant; +} & React.InputHTMLAttributes & + CommonStyledProps; const sharedCheckboxStyles = css` width: ${size}px; @@ -22,11 +36,15 @@ const sharedCheckboxStyles = css` justify-content: space-around; margin-right: 0.5rem; `; -// had to overwrite box-shadow for StyledCheckbox since the default made checkbox too dark -const StyledCheckbox = styled(StyledCutout)` + +type StyledCheckboxProps = { + $disabled: boolean; +}; + +const StyledCheckbox = styled(StyledCutout)` ${sharedCheckboxStyles} - background: ${({ theme, isDisabled }) => - isDisabled ? theme.material : theme.canvas}; + background: ${({ $disabled, theme }) => + $disabled ? theme.material : theme.canvas}; &:before { content: ''; @@ -39,12 +57,12 @@ const StyledCheckbox = styled(StyledCutout)` box-shadow: none; } `; -const StyledFlatCheckbox = styled.div` +const StyledFlatCheckbox = styled.div` ${createFlatBoxStyles()} ${sharedCheckboxStyles} outline: none; - background: ${({ theme, isDisabled }) => - isDisabled ? theme.flatLight : theme.canvas}; + background: ${({ $disabled, theme }) => + $disabled ? theme.flatLight : theme.canvas}; &:before { content: ''; display: inline-block; @@ -66,9 +84,16 @@ const StyledMenuCheckbox = styled.div` outline: none; background: none; `; + +type IconProps = { + 'data-testid': 'checkmarkIcon'; + $disabled: boolean; + variant: RadioVariant; +}; + const Icon = styled.span.attrs(() => ({ 'data-testid': 'checkmarkIcon' -}))` +}))` position: absolute; content: ''; display: inline-block; @@ -78,23 +103,23 @@ const Icon = styled.span.attrs(() => ({ height: 6px; transform: translate(-50%, -50%); border-radius: 50%; - ${({ variant, theme, isDisabled }) => + ${({ $disabled, theme, variant }) => variant === 'menu' ? css` - background: ${isDisabled + background: ${$disabled ? theme.materialTextDisabled : theme.materialText}; filter: drop-shadow( 1px 1px 0px - ${isDisabled ? theme.materialTextDisabledShadow : 'transparent'} + ${$disabled ? theme.materialTextDisabledShadow : 'transparent'} ); ` : css` - background: ${isDisabled ? theme.checkmarkDisabled : theme.checkmark}; + background: ${$disabled ? theme.checkmarkDisabled : theme.checkmark}; `} ${StyledListItem}:hover & { - ${({ theme, isDisabled, variant }) => - !isDisabled && + ${({ $disabled, theme, variant }) => + !$disabled && variant === 'menu' && css` background: ${theme.materialTextInvert}; @@ -108,28 +133,25 @@ const CheckboxComponents = { menu: StyledMenuCheckbox }; -const Radio = React.forwardRef(function Radio(props, ref) { - const { - onChange, - label, - disabled, - variant, +const Radio = forwardRef(function Radio( + { checked, - className, - style, + className = '', + disabled = false, + label = '', + onChange, + style = {}, + variant = 'default', ...otherProps - } = props; - + }, + ref +) { const CheckboxComponent = CheckboxComponents[variant]; return ( - - - {checked && } + + + {checked && } Date: Mon, 25 Jul 2022 16:38:16 -0400 Subject: [PATCH 026/100] feat(cutout): convert to TypeScript and export types --- src/Button/Button.mdx | 2 +- src/Checkbox/Checkbox.mdx | 2 +- src/Cutout/Cutout.mdx | 6 ++-- .../{Cutout.spec.js => Cutout.spec.tsx} | 9 +++--- .../{Cutout.stories.js => Cutout.stories.tsx} | 14 +++++--- src/Cutout/{Cutout.js => Cutout.tsx} | 32 +++++++++---------- src/DatePicker/DatePicker.js | 15 ++++----- src/Fieldset/Fieldset.mdx | 2 +- src/NumberField/NumberField.mdx | 2 +- src/Select/Select.mdx | 2 +- src/TextField/TextField.mdx | 2 +- src/index.ts | 2 +- 12 files changed, 46 insertions(+), 44 deletions(-) rename src/Cutout/{Cutout.spec.js => Cutout.spec.tsx} (83%) rename src/Cutout/{Cutout.stories.js => Cutout.stories.tsx} (76%) rename src/Cutout/{Cutout.js => Cutout.tsx} (70%) diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx index db5d0b04..ae3c4a56 100644 --- a/src/Button/Button.mdx +++ b/src/Button/Button.mdx @@ -6,7 +6,7 @@ menu: Components import { Button } from './Button'; import Window from '../Window/Window'; import WindowContent from '../WindowContent/WindowContent'; -import Cutout from '../Cutout/Cutout'; +import { Cutout } from '../Cutout/Cutout'; import Toolbar from '../Toolbar/Toolbar'; # Button diff --git a/src/Checkbox/Checkbox.mdx b/src/Checkbox/Checkbox.mdx index 137aca20..7c84413f 100644 --- a/src/Checkbox/Checkbox.mdx +++ b/src/Checkbox/Checkbox.mdx @@ -6,7 +6,7 @@ menu: Components import { Checkbox } from './Checkbox'; import Fieldset from '../Fieldset/Fieldset'; import { Button } from '../Button/Button'; -import Cutout from '../Cutout/Cutout'; +import { Cutout } from '../Cutout/Cutout'; import List from '../List/List'; import ListItem from '../ListItem/ListItem'; import Divider from '../Divider/Divider'; diff --git a/src/Cutout/Cutout.mdx b/src/Cutout/Cutout.mdx index f1fb6a8a..a29422ee 100644 --- a/src/Cutout/Cutout.mdx +++ b/src/Cutout/Cutout.mdx @@ -3,9 +3,9 @@ name: Cutout menu: Components --- -import Cutout from './Cutout' -import Window from '../Window/Window' -import WindowContent from '../WindowContent/WindowContent' +import { Cutout } from './Cutout'; +import Window from '../Window/Window'; +import WindowContent from '../WindowContent/WindowContent'; # Cutout diff --git a/src/Cutout/Cutout.spec.js b/src/Cutout/Cutout.spec.tsx similarity index 83% rename from src/Cutout/Cutout.spec.js rename to src/Cutout/Cutout.spec.tsx index 605e1e53..7a793271 100644 --- a/src/Cutout/Cutout.spec.js +++ b/src/Cutout/Cutout.spec.tsx @@ -1,12 +1,11 @@ -import React from 'react'; import { render } from '@testing-library/react'; -import Cutout from './Cutout'; +import { Cutout } from './Cutout'; describe('', () => { it('should render cutout', () => { const { container } = render(); - const cutout = container.firstChild; + const cutout = container.firstElementChild; expect(cutout).toBeInTheDocument(); }); @@ -15,7 +14,7 @@ describe('', () => { const { container } = render( ); - const cutout = container.firstChild; + const cutout = container.firstElementChild; expect(cutout).toHaveAttribute('style', 'background-color: papayawhip;'); }); @@ -34,7 +33,7 @@ describe('', () => { it('should render custom props', () => { const customProps = { title: 'cutout' }; const { container } = render(); - const cutout = container.firstChild; + const cutout = container.firstElementChild; expect(cutout).toHaveAttribute('title', 'cutout'); }); diff --git a/src/Cutout/Cutout.stories.js b/src/Cutout/Cutout.stories.tsx similarity index 76% rename from src/Cutout/Cutout.stories.js rename to src/Cutout/Cutout.stories.tsx index 845cdf3e..41f807fa 100644 --- a/src/Cutout/Cutout.stories.js +++ b/src/Cutout/Cutout.stories.tsx @@ -1,11 +1,17 @@ -import React from 'react'; - +import { ComponentMeta } from '@storybook/react'; import { Cutout, Window, WindowContent } from 'react95'; +import styled from 'styled-components'; + +const Wrapper = styled.div` + padding: 5rem; + background: ${({ theme }) => theme.desktopBackground}; +`; export default { title: 'Cutout', - component: Cutout -}; + component: Cutout, + decorators: [story => {story()}] +} as ComponentMeta; export function Default() { return ( diff --git a/src/Cutout/Cutout.js b/src/Cutout/Cutout.tsx similarity index 70% rename from src/Cutout/Cutout.js rename to src/Cutout/Cutout.tsx index eaa18b87..94c0ab7c 100644 --- a/src/Cutout/Cutout.js +++ b/src/Cutout/Cutout.tsx @@ -1,9 +1,15 @@ -import React from 'react'; -import propTypes from 'prop-types'; +import React, { forwardRef } from 'react'; import styled from 'styled-components'; import { insetShadow, createScrollbars } from '../common'; +import { CommonStyledProps } from '../types'; -export const StyledCutout = styled.div` +type CutoutProps = { + children?: React.ReactNode; + shadow?: boolean; +} & React.HTMLAttributes & + CommonStyledProps; + +export const StyledCutout = styled.div>` position: relative; box-sizing: border-box; padding: 2px; @@ -44,23 +50,15 @@ const Content = styled.div` ${createScrollbars()} `; -const Cutout = React.forwardRef(function Cutout(props, ref) { - const { children, ...otherProps } = props; +const Cutout = forwardRef(function Cutout( + { children, shadow = true, ...otherProps }, + ref +) { return ( - + {children} ); }); -Cutout.defaultProps = { - children: null, - shadow: true -}; - -Cutout.propTypes = { - children: propTypes.node, - shadow: propTypes.bool -}; - -export default Cutout; +export { Cutout, CutoutProps }; diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js index b79c496f..40801ffb 100644 --- a/src/DatePicker/DatePicker.js +++ b/src/DatePicker/DatePicker.js @@ -1,16 +1,15 @@ -import React, { Component } from 'react'; import propTypes from 'prop-types'; - +import React, { Component } from 'react'; import styled from 'styled-components'; -import Window from '../Window/Window'; -import WindowHeader from '../WindowHeader/WindowHeader'; -import WindowContent from '../WindowContent/WindowContent'; -import Select from '../Select/Select'; -import NumberField from '../NumberField/NumberField'; -import Cutout from '../Cutout/Cutout'; import { Button } from '../Button/Button'; +import { Cutout } from '../Cutout/Cutout'; +import NumberField from '../NumberField/NumberField'; +import Select from '../Select/Select'; import Toolbar from '../Toolbar/Toolbar'; +import Window from '../Window/Window'; +import WindowContent from '../WindowContent/WindowContent'; +import WindowHeader from '../WindowHeader/WindowHeader'; const Calendar = styled(Cutout)` width: 234px; diff --git a/src/Fieldset/Fieldset.mdx b/src/Fieldset/Fieldset.mdx index 3aeeb9b8..2880426c 100644 --- a/src/Fieldset/Fieldset.mdx +++ b/src/Fieldset/Fieldset.mdx @@ -6,8 +6,8 @@ menu: Components import Fieldset from './Fieldset' import Window from '../Window/Window' import WindowContent from '../WindowContent/WindowContent' -import Cutout from '../Cutout/Cutout' import Checkbox from '../Checkbox/Checkbox' +import { Cutout } from '../Cutout/Cutout'; # Fieldset diff --git a/src/NumberField/NumberField.mdx b/src/NumberField/NumberField.mdx index f1960bb7..befaa2d9 100644 --- a/src/NumberField/NumberField.mdx +++ b/src/NumberField/NumberField.mdx @@ -4,7 +4,7 @@ menu: Components --- import NumberField from './NumberField'; -import Cutout from '../Cutout/Cutout' +import { Cutout } from '../Cutout/Cutout'; # NumberField diff --git a/src/Select/Select.mdx b/src/Select/Select.mdx index 85dc4325..168142c1 100644 --- a/src/Select/Select.mdx +++ b/src/Select/Select.mdx @@ -6,7 +6,7 @@ menu: Components import Select from './Select' import Window from '../Window/Window' import WindowContent from '../WindowContent/WindowContent' -import Cutout from '../Cutout/Cutout' +import { Cutout } from '../Cutout/Cutout'; # Select diff --git a/src/TextField/TextField.mdx b/src/TextField/TextField.mdx index fedc0119..6c3073e7 100644 --- a/src/TextField/TextField.mdx +++ b/src/TextField/TextField.mdx @@ -4,7 +4,7 @@ menu: Components --- import TextField from './TextField'; -import Cutout from '../Cutout/Cutout'; +import { Cutout } from '../Cutout/Cutout'; # TextField diff --git a/src/index.ts b/src/index.ts index a75b8154..95298db0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,7 +11,7 @@ export * from './Button/Button'; export * from './Checkbox/Checkbox'; export { default as ColorInput } from './ColorInput/ColorInput'; export * from './Counter/Counter'; -export { default as Cutout } from './Cutout/Cutout'; +export * from './Cutout/Cutout'; export * from './Desktop/Desktop'; export * from './Divider/Divider'; export { default as Fieldset } from './Fieldset/Fieldset'; From 0f3c9ff1b7197abbe4cd70bb5cb36755be684e95 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Tue, 26 Jul 2022 06:33:02 -0400 Subject: [PATCH 027/100] chore(lint): add eslint-plugin-react-hooks This also disables no-undef for TypeScript files and removes no-nested-ternary. --- .eslintrc.js | 4 +++- package.json | 1 + src/Button/Button.tsx | 2 -- yarn.lock | 5 +++++ 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 1404e9f5..adf07ec4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -2,7 +2,8 @@ module.exports = { extends: [ 'plugin:@typescript-eslint/recommended', 'airbnb', - 'plugin:prettier/recommended' + 'plugin:prettier/recommended', + 'plugin:react-hooks/recommended' ], parser: '@typescript-eslint/parser', plugins: ['react', 'prettier'], @@ -32,6 +33,7 @@ module.exports = { 'import/prefer-default-export': 'off', 'jsx-a11y/label-has-associated-control': ['error', { assert: 'either' }], 'jsx-a11y/label-has-for': 'off', + 'no-nested-ternary': 'off', 'prettier/prettier': 'error', 'react/forbid-prop-types': 'off', 'react/jsx-filename-extension': [ diff --git a/package.json b/package.json index df09e524..d800976a 100644 --- a/package.json +++ b/package.json @@ -86,6 +86,7 @@ "eslint-plugin-jsx-a11y": "^6.6.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.30.1", + "eslint-plugin-react-hooks": "^4.6.0", "firebase-tools": "^11.3.0", "husky": "^8.0.1", "jest": "^28.1.3", diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx index 84fb1df0..552f113f 100644 --- a/src/Button/Button.tsx +++ b/src/Button/Button.tsx @@ -1,5 +1,3 @@ -/* eslint-disable no-nested-ternary */ - import React, { forwardRef } from 'react'; import styled, { css } from 'styled-components'; import { diff --git a/yarn.lock b/yarn.lock index ffdb081a..527005e8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7173,6 +7173,11 @@ eslint-plugin-prettier@^4.2.1: dependencies: prettier-linter-helpers "^1.0.0" +eslint-plugin-react-hooks@^4.6.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3" + integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g== + eslint-plugin-react@^7.30.1: version "7.30.1" resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.30.1.tgz#2be4ab23ce09b5949c6631413ba64b2810fd3e22" From 3c8729a60fa794d5edd92ec66a33468671bf2e00 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Tue, 26 Jul 2022 06:33:12 -0400 Subject: [PATCH 028/100] feat(select): convert to TypeScript and export types --- src/Select/Select.js | 518 ---------------- src/Select/Select.mdx | 6 +- .../{Select.spec.js => Select.spec.tsx} | 46 +- .../{Select.stories.js => Select.stories.tsx} | 16 +- .../{Select.styles.js => Select.styles.tsx} | 61 +- src/Select/Select.tsx | 585 ++++++++++++++++++ src/Select/Select.types.ts | 22 + src/index.ts | 2 +- src/types.tsx | 1 + 9 files changed, 686 insertions(+), 571 deletions(-) delete mode 100644 src/Select/Select.js rename src/Select/{Select.spec.js => Select.spec.tsx} (92%) rename src/Select/{Select.stories.js => Select.stories.tsx} (89%) rename src/Select/{Select.styles.js => Select.styles.tsx} (73%) create mode 100644 src/Select/Select.tsx create mode 100644 src/Select/Select.types.ts diff --git a/src/Select/Select.js b/src/Select/Select.js deleted file mode 100644 index 0fc47248..00000000 --- a/src/Select/Select.js +++ /dev/null @@ -1,518 +0,0 @@ -import React from 'react'; -import propTypes from 'prop-types'; - -import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled'; -import useForkRef from '../common/hooks/useForkRef'; - -import { clamp } from '../common/utils'; - -import { - StyledDropdownButton, - StyledDropdownIcon, - StyledDropdownMenu, - StyledDropdownMenuItem, - StyledFlatSelectWrapper, - StyledInner, - StyledNativeOption, - StyledNativeSelect, - StyledSelectContent, - StyledSelectWrapper -} from './Select.styles'; - -const KEYS = { - ARROW_DOWN: 'ArrowDown', - ARROW_LEFT: 'ArrowLeft', - ARROW_RIGHT: 'ArrowRight', - ARROW_UP: 'ArrowUp', - ENTER: 'Enter', - ESC: 'Escape', - SPACE: ' ', - TAB: 'Tab' -}; - -function areEqualValues(a, b) { - if (typeof b === 'object' && b !== null) { - return a === b; - } - return String(a) === String(b); -} - -const getWrapper = variant => - variant === 'flat' ? StyledFlatSelectWrapper : StyledSelectWrapper; - -const getDisplayLabel = (selectedOption, formatDisplay) => { - if (selectedOption) { - if (formatDisplay) { - return formatDisplay(selectedOption); - } - return selectedOption.label; - } - return ''; -}; - -const getDefaultValue = (defaultValue, options) => { - if (defaultValue) { - return defaultValue; - } - if (options && options[0]) { - return options[0].value; - } - return undefined; -}; - -const Select = React.forwardRef(function Select(props, ref) { - const { - 'aria-label': ariaLabel, - className, - defaultValue, - disabled, - formatDisplay, - inputRef: inputRefProp, - labelId, - menuMaxHeight, - name, - native, - onBlur, - onChange, - onClose, - onFocus, - onOpen, - open: openProp, - options: optionsProp, - readOnly, - SelectDisplayProps, - shadow, - style, - value: valueProp, - variant, - width, - ...otherProps - } = props; - const wrapperRef = React.useRef(); - const displayNode = React.useRef(); - const inputRef = React.useRef(); - const dropdownRef = React.useRef(); - const options = optionsProp.filter(Boolean); - const [value, setValueState] = useControlledOrUncontrolled({ - value: valueProp, - defaultValue: getDefaultValue(defaultValue, options) - }); - - const { current: isOpenControlled } = React.useRef(openProp != null); - const [openState, setOpenState] = React.useState(false); - const open = - displayNode !== null && (isOpenControlled ? openProp : openState); - const handleRef = useForkRef(ref, inputRefProp); - - // to hijack native focus. when somebody passes ref - // and triggers focus, we focus displayNode instead of input - React.useImperativeHandle( - handleRef, - () => ({ - focus: () => { - displayNode.current.focus(); - }, - node: inputRef.current, - value - }), - [displayNode, value] - ); - - const getSelectedOption = selectedValue => - options.find(opt => { - if (selectedValue) { - return ( - opt.value === selectedValue || - opt.value === parseInt(selectedValue, 10) - ); - } - return opt.value === value; - }); - - const getFocusedNodeIndex = () => { - let focusedIndex = -1; - - if (dropdownRef && dropdownRef.current) { - const optionNodes = Array.from(dropdownRef.current.childNodes); - focusedIndex = optionNodes.findIndex( - node => node === document.activeElement - ); - } - return focusedIndex; - }; - - const update = (opens, e) => { - if (opens) { - if (onOpen) { - onOpen(e); - } - } else if (onClose) { - onClose(e); - } - - if (!isOpenControlled) { - setOpenState(opens); - } - }; - - const handleOpen = e => { - update(true, e); - }; - - const handleClose = e => { - update(false, e); - }; - - const toggleOpen = e => { - update(!open, e); - }; - - React.useEffect(() => { - const handleClick = e => { - if (openState) { - if (!wrapperRef.current.contains(e.target)) { - e.preventDefault(); - handleClose(e); - displayNode.current.focus(); - } - } - }; - document.addEventListener('mousedown', handleClick); - return () => { - document.removeEventListener('mousedown', handleClick); - }; - }); - - const handleMouseDown = e => { - // ignore everything but left-click - if (e.button !== 0) { - return; - } - // hijack the default focus behavior. - e.preventDefault(); - displayNode.current.focus(); - - if (open) { - handleClose(e); - } else { - handleOpen(e); - } - }; - - const handleOptionClick = opt => e => { - const newValue = opt.value; - setValueState(newValue); - - if (onChange) { - e.persist(); - Object.defineProperty(e, 'target', { - writable: true, - value: { value: newValue, name } - }); - onChange(e, opt); - } - handleClose(e); - displayNode.current.focus(); - }; - - const handleKeyDown = e => { - const { key } = e; - // the native select doesn't respond to enter on mac, but it's recommended by - // https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html - const { ARROW_DOWN, ARROW_UP, ENTER, SPACE, TAB } = KEYS; - - if (key === TAB) { - if (open) { - // if dropdown is open- close it - // prevent default behaviour (focusing on next element) - // and focus select instead - e.preventDefault(); - toggleOpen(e); - displayNode.current.focus(); - } - } else { - e.preventDefault(); - if (key === SPACE) { - // space toggles the dropdown (open/closed) while keeping focus - toggleOpen(e); - displayNode.current.focus(); - } else if ([ARROW_DOWN, ARROW_UP, ENTER].includes(key)) { - if (!open) { - handleOpen(e); - } - const currentFocusIndex = getFocusedNodeIndex(); - if ([ARROW_UP, ARROW_DOWN].includes(key)) { - const change = key === ARROW_UP ? -1 : 1; - const nextOptionIndex = clamp( - currentFocusIndex + change, - 0, - options.length - 1 - ); - if (dropdownRef.current) { - const nextOption = dropdownRef.current.childNodes[nextOptionIndex]; - nextOption.focus(); - } - } else if ( - key === ENTER && - currentFocusIndex > -1 && - dropdownRef.current - ) { - setValueState(options[currentFocusIndex].value); - handleClose(e); - displayNode.current.focus(); - if (onChange) { - const option = options[currentFocusIndex]; - e.persist(); - Object.defineProperty(e, 'target', { - writable: true, - value: { value: option.value, name } - }); - onChange(e, option); - } - } - } - } - }; - - const handleBlur = e => { - // trigger onBlur only when dropdown is closesd - // otherwise onBlur would be triggered when switching focus - // from display node to - if (!open && onBlur) { - e.persist(); - // Preact support, target is read only property on a native event. - Object.defineProperty(e, 'target', { - writable: true, - value: { value, name } - }); - onBlur(e); - } - }; - - const handleOptionKeyUp = e => { - if (e.key === KEYS.SPACE) { - // otherwise our MenuItems dispatches a click event - // it's not behavior of the native ## API diff --git a/src/NumberField/NumberField.spec.js b/src/NumberField/NumberField.spec.tsx similarity index 77% rename from src/NumberField/NumberField.spec.js rename to src/NumberField/NumberField.spec.tsx index e72dbb99..4faefcfc 100644 --- a/src/NumberField/NumberField.spec.js +++ b/src/NumberField/NumberField.spec.tsx @@ -1,8 +1,7 @@ -import React from 'react'; import { fireEvent } from '@testing-library/react'; import { renderWithTheme } from '../../test/utils'; -import NumberField from './NumberField'; +import { NumberField } from './NumberField'; // TODO: should we pass number or string to callbacks? describe('', () => { @@ -15,7 +14,7 @@ describe('', () => { const spinButton = getByTestId('increment'); spinButton.click(); expect(handleChange).toHaveBeenCalledTimes(1); - expect(handleChange).toHaveBeenCalledWith('3'); + expect(handleChange).toHaveBeenCalledWith(3); }); it('should call onChange on blur after keyboard input', () => { @@ -23,15 +22,15 @@ describe('', () => { const { container } = renderWithTheme( ); - const input = container.querySelector('input'); + const input = container.querySelector('input') as HTMLInputElement; input.focus(); - fireEvent.change(input, { target: { value: 777 } }); + fireEvent.change(input, { target: { value: '777' } }); expect(handleChange).toHaveBeenCalledTimes(0); input.blur(); expect(handleChange).toHaveBeenCalledTimes(1); - expect(handleChange).toHaveBeenCalledWith('777'); + expect(handleChange).toHaveBeenCalledWith(777); }); // TODO: this test passes even tho it fails in real-life @@ -41,11 +40,11 @@ describe('', () => { const { getByTestId, container } = renderWithTheme( ); - const input = container.querySelector('input'); + const input = container.querySelector('input') as HTMLInputElement; const incrementButton = getByTestId('increment'); input.focus(); - fireEvent.keyDown(document.activeElement, { + fireEvent.keyDown(document.activeElement as HTMLInputElement, { key: '2' }); incrementButton.click(); @@ -57,20 +56,20 @@ describe('', () => { const { container, getByTestId } = renderWithTheme( ); - const input = container.querySelector('input'); + const input = container.querySelector('input') as HTMLInputElement; const incrementButton = getByTestId('increment'); - fireEvent.change(input, { target: { value: 2 } }); + fireEvent.change(input, { target: { value: '2' } }); incrementButton.click(); - expect(handleChange).toHaveBeenCalledWith('3'); + expect(handleChange).toHaveBeenCalledWith(3); }); it('should reach max value', () => { const { getByTestId, container } = renderWithTheme( ); - const input = container.querySelector('input'); + const input = container.querySelector('input') as HTMLInputElement; const incrementButton = getByTestId('increment'); incrementButton.click(); @@ -81,7 +80,7 @@ describe('', () => { const { getByTestId, container } = renderWithTheme( ); - const input = container.querySelector('input'); + const input = container.querySelector('input') as HTMLInputElement; const decrementButton = getByTestId('decrement'); decrementButton.click(); @@ -93,7 +92,7 @@ describe('', () => { const { getByTestId, container } = renderWithTheme( ); - const input = container.querySelector('input'); + const input = container.querySelector('input') as HTMLInputElement; const incrementButton = getByTestId('increment'); incrementButton.click(); @@ -104,7 +103,7 @@ describe('', () => { const { getByTestId, container } = renderWithTheme( ); - const input = container.querySelector('input'); + const input = container.querySelector('input') as HTMLInputElement; const decrementButton = getByTestId('decrement'); decrementButton.click(); @@ -115,7 +114,7 @@ describe('', () => { const { getByTestId, container } = renderWithTheme( ); - const input = container.querySelector('input'); + const input = container.querySelector('input') as HTMLInputElement; const decrementButton = getByTestId('decrement'); decrementButton.click(); @@ -128,7 +127,7 @@ describe('', () => { const { getByTestId, container } = renderWithTheme( ); - const input = container.querySelector('input'); + const input = container.querySelector('input') as HTMLInputElement; const incrementButton = getByTestId('increment'); const decrementButton = getByTestId('decrement'); @@ -141,7 +140,7 @@ describe('', () => { const { getByTestId, container } = renderWithTheme( ); - const input = container.querySelector('input'); + const input = container.querySelector('input') as HTMLInputElement; const incrementButton = getByTestId('increment'); const decrementButton = getByTestId('decrement'); @@ -158,14 +157,18 @@ describe('', () => { const { container } = renderWithTheme( ); - expect(getComputedStyle(container.firstChild).width).toBe('93px'); + expect( + getComputedStyle(container.firstElementChild as HTMLInputElement).width + ).toBe('93px'); }); it('should handle %', () => { const { container } = renderWithTheme( ); - expect(getComputedStyle(container.firstChild).width).toBe('93%'); + expect( + getComputedStyle(container.firstElementChild as HTMLInputElement).width + ).toBe('93%'); }); }); }); diff --git a/src/NumberField/NumberField.stories.js b/src/NumberField/NumberField.stories.tsx similarity index 90% rename from src/NumberField/NumberField.stories.js rename to src/NumberField/NumberField.stories.tsx index 889618fa..6064caea 100644 --- a/src/NumberField/NumberField.stories.js +++ b/src/NumberField/NumberField.stories.tsx @@ -1,8 +1,7 @@ -import React from 'react'; +import { ComponentMeta } from '@storybook/react'; +import { Cutout, NumberField } from 'react95'; import styled from 'styled-components'; -import { NumberField, Cutout } from 'react95'; - const Wrapper = styled.div` background: ${({ theme }) => theme.material}; padding: 5rem; @@ -24,7 +23,7 @@ export default { title: 'NumberField', component: NumberField, decorators: [story => {story()}] -}; +} as ComponentMeta; export function Default() { return ( diff --git a/src/NumberField/NumberField.tsx b/src/NumberField/NumberField.tsx new file mode 100644 index 00000000..76931564 --- /dev/null +++ b/src/NumberField/NumberField.tsx @@ -0,0 +1,200 @@ +import React, { forwardRef, useCallback } from 'react'; +import styled, { css } from 'styled-components'; + +import { Button } from '../Button/Button'; +import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled'; +import { blockSizes } from '../common/system'; +import { clamp, getSize } from '../common/utils'; +import { TextField } from '../TextField/TextField'; +import { CommonStyledProps } from '../types'; + +type NumberFieldProps = { + className?: string; + defaultValue?: number; + disabled?: boolean; + max?: number; + min?: number; + step?: number; + onChange?: (newValue: number) => void; + style?: React.CSSProperties; + value?: number; + variant?: 'default' | 'flat'; + width?: string | number; +} & CommonStyledProps; + +const StyledNumberFieldWrapper = styled.div` + display: inline-flex; + align-items: center; +`; + +const StyledButton = styled(Button)>` + width: 30px; + padding: 0; + flex-shrink: 0; + + ${({ variant }) => + variant === 'flat' + ? css` + height: calc(50% - 1px); + ` + : css` + height: 50%; + &:before { + border-left-color: ${({ theme }) => theme.borderLight}; + border-top-color: ${({ theme }) => theme.borderLight}; + box-shadow: inset 1px 1px 0px 1px + ${({ theme }) => theme.borderLightest}, + inset -1px -1px 0 1px ${({ theme }) => theme.borderDark}; + } + `} +`; + +const StyledButtonWrapper = styled.div>` + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: space-between; + + ${({ variant }) => + variant === 'flat' + ? css` + height: calc(${blockSizes.md} - 4px); + ` + : css` + height: ${blockSizes.md}; + margin-left: 2px; + `} +`; + +const StyledButtonIcon = styled.span<{ invert?: boolean }>` + width: 0px; + height: 0px; + display: inline-block; + ${({ invert }) => + invert + ? css` + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-bottom: 4px solid ${({ theme }) => theme.materialText}; + ` + : css` + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid ${({ theme }) => theme.materialText}; + `} + ${StyledButton}:disabled & { + filter: drop-shadow( + 1px 1px 0px ${({ theme }) => theme.materialTextDisabledShadow} + ); + ${({ invert }) => + invert + ? css` + border-bottom-color: ${({ theme }) => theme.materialTextDisabled}; + ` + : css` + border-top-color: ${({ theme }) => theme.materialTextDisabled}; + `} + } +`; + +const NumberField = forwardRef( + function NumberField( + { + className, + defaultValue, + disabled = false, + max, + min, + onChange, + step = 1, + style, + value, + variant = 'default', + width + }, + ref + ) { + const [valueDerived, setValueState] = useControlledOrUncontrolled({ + value, + defaultValue + }); + + const handleInputChange = useCallback( + (e: React.ChangeEvent) => { + const newValue = parseFloat(e.target.value); + setValueState(newValue); + }, + [setValueState] + ); + + const handleClick = useCallback( + (delta: number) => { + const newValue = clamp( + parseFloat(((valueDerived ?? 0) + delta).toFixed(2)), + min ?? null, + max ?? null + ); + + setValueState(newValue); + + onChange?.(newValue); + }, + [max, min, onChange, setValueState, valueDerived] + ); + + const onBlur = useCallback(() => { + if (valueDerived !== undefined) { + onChange?.(valueDerived); + } + }, [onChange, valueDerived]); + + const stepUp = useCallback(() => { + handleClick(step); + }, [handleClick, step]); + + const stepDown = useCallback(() => { + handleClick(-step); + }, [handleClick, step]); + + return ( + + + + + + + + + + + + ); + } +); + +export { NumberField, NumberFieldProps }; diff --git a/src/Tabs/Tabs.mdx b/src/Tabs/Tabs.mdx index 70d392dc..c39489aa 100644 --- a/src/Tabs/Tabs.mdx +++ b/src/Tabs/Tabs.mdx @@ -9,7 +9,7 @@ import { TabBody } from '../TabBody/TabBody'; import Fieldset from '../Fieldset/Fieldset'; import Window from '../Window/Window'; import WindowHeader from '../WindowHeader/WindowHeader'; -import NumberField from '../NumberField/NumberField'; +import { NumberField } from '../NumberField/NumberField'; import Checkbox from '../Checkbox/Checkbox'; import WindowContent from '../WindowContent/WindowContent'; diff --git a/src/TextField/TextField.js b/src/TextField/TextField.js deleted file mode 100644 index f7250457..00000000 --- a/src/TextField/TextField.js +++ /dev/null @@ -1,122 +0,0 @@ -import React from 'react'; -import propTypes from 'prop-types'; - -import styled, { css } from 'styled-components'; -import { - createDisabledTextStyles, - createFlatBoxStyles, - createScrollbars -} from '../common'; -import { blockSizes } from '../common/system'; -import { StyledCutout } from '../Cutout/Cutout'; - -const sharedWrapperStyles = css` - display: flex; - align-items: center; - width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')}; - min-height: ${blockSizes.md}; -`; - -const Wrapper = styled(StyledCutout).attrs({ - 'data-testid': 'variant-default' -})` - ${sharedWrapperStyles} - background: ${({ theme, isDisabled }) => - isDisabled ? theme.material : theme.canvas}; -`; - -const FlatWrapper = styled.div.attrs({ - 'data-testid': 'variant-flat' -})` - ${createFlatBoxStyles()} - ${sharedWrapperStyles} - position: relative; -`; - -const sharedInputStyles = css` - display: block; - box-sizing: border-box; - width: 100%; - height: 100%; - outline: none; - border: none; - background: none; - font-size: 1rem; - min-height: 27px; - font-family: inherit; - color: ${({ theme }) => theme.canvasText}; - ${({ disabled, variant }) => - variant !== 'flat' && disabled && createDisabledTextStyles()} -`; - -const StyledTextInput = styled.input` - ${sharedInputStyles} - padding: 0 8px; -`; - -const StyledTextArea = styled.textarea` - ${sharedInputStyles} - padding: 8px; - resize: none; - ${({ variant }) => createScrollbars(variant)} -`; - -const TextField = React.forwardRef(function TextField(props, ref) { - const { - className, - disabled, - fullWidth, - multiline, - onChange, - shadow, - style, - type, - variant, - ...otherProps - } = props; - const WrapperComponent = variant === 'flat' ? FlatWrapper : Wrapper; - const Input = multiline ? StyledTextArea : StyledTextInput; - return ( - - - - ); -}); -TextField.defaultProps = { - className: '', - disabled: false, - fullWidth: null, - multiline: false, - onChange: () => {}, - shadow: true, - style: {}, - type: 'text', - variant: 'default' -}; - -TextField.propTypes = { - className: propTypes.string, - disabled: propTypes.bool, - fullWidth: propTypes.bool, - multiline: propTypes.bool, - onChange: propTypes.func, - shadow: propTypes.bool, - style: propTypes.object, - type: propTypes.string, - variant: propTypes.oneOf(['default', 'flat']) -}; -export default TextField; diff --git a/src/TextField/TextField.mdx b/src/TextField/TextField.mdx index 6c3073e7..0ea168dd 100644 --- a/src/TextField/TextField.mdx +++ b/src/TextField/TextField.mdx @@ -3,7 +3,7 @@ name: TextField menu: Components --- -import TextField from './TextField'; +import { TextField } from './TextField'; import { Cutout } from '../Cutout/Cutout'; # TextField diff --git a/src/TextField/TextField.spec.js b/src/TextField/TextField.spec.tsx similarity index 90% rename from src/TextField/TextField.spec.js rename to src/TextField/TextField.spec.tsx index 68d43346..be6cf9ab 100644 --- a/src/TextField/TextField.spec.js +++ b/src/TextField/TextField.spec.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { fireEvent } from '@testing-library/react'; import { renderWithTheme } from '../../test/utils'; -import TextField from './TextField'; +import { TextField } from './TextField'; describe('', () => { it('should render an inside the div', () => { @@ -36,13 +36,13 @@ describe('', () => { input.focus(); expect(handleFocus).toHaveBeenCalledTimes(1); - fireEvent.keyDown(document.activeElement, { key: 'a' }); + fireEvent.keyDown(document.activeElement as HTMLInputElement, { key: 'a' }); expect(handleKeyDown).toHaveBeenCalledTimes(1); fireEvent.change(input, { target: { value: 'a' } }); expect(handleChange).toHaveBeenCalledTimes(1); - fireEvent.keyUp(document.activeElement, { key: 'a' }); + fireEvent.keyUp(document.activeElement as HTMLInputElement, { key: 'a' }); expect(handleKeyUp).toHaveBeenCalledTimes(1); input.blur(); @@ -59,7 +59,7 @@ describe('', () => { }); it('should forwardRef to native input', () => { - const inputRef = React.createRef(); + const inputRef = React.createRef(); const { getByRole } = renderWithTheme(); const input = getByRole('textbox'); expect(inputRef.current).toBe(input); @@ -107,7 +107,9 @@ describe('', () => { describe('prop: fullWidth', () => { it('should make component take 100% width', () => { const { container } = renderWithTheme(); - expect(window.getComputedStyle(container.firstChild).width).toBe('100%'); + expect( + window.getComputedStyle(container.firstChild as HTMLInputElement).width + ).toBe('100%'); }); }); }); diff --git a/src/TextField/TextField.stories.js b/src/TextField/TextField.stories.tsx similarity index 87% rename from src/TextField/TextField.stories.js rename to src/TextField/TextField.stories.tsx index 2a06b4d9..83ba88c1 100644 --- a/src/TextField/TextField.stories.js +++ b/src/TextField/TextField.stories.tsx @@ -1,11 +1,12 @@ -import React, { useState } from 'react'; - +import { ComponentMeta } from '@storybook/react'; +import { useState } from 'react'; +import { Button, Cutout, TextField } from 'react95'; import styled from 'styled-components'; -import { TextField, Button, Cutout } from 'react95'; - const loremIpsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin, ante vel porttitor posuere, tellus nisi interdum ipsum, non bibendum ante risus ut purus. Curabitur vel posuere odio. Vivamus rutrum, nunc et ullamcorper sagittis, tellus ligula maximus quam, id dapibus sapien metus lobortis diam. Proin luctus, dolor in finibus feugiat, lacus enim gravida sem, quis aliquet tellus leo nec enim. Morbi varius bibendum augue quis venenatis. Curabitur ut elit augue. Pellentesque posuere enim a mattis interdum. Donec sodales convallis turpis, a vulputate elit. Suspendisse potenti.`; -const onChange = e => console.log(e.target.value); +const onChange = ( + e: React.ChangeEvent +) => console.log(e.target.value); const Wrapper = styled.div` background: ${({ theme }) => theme.material}; @@ -21,14 +22,15 @@ export default { title: 'TextField', component: TextField, decorators: [story => {story()}] -}; +} as ComponentMeta; export function Default() { const [state, setState] = useState({ value: '' }); - const handleChange = e => setState({ value: e.target.value }); + const handleChange = (e: React.ChangeEvent) => + setState({ value: e.target.value }); const reset = () => setState({ value: '' }); return ( diff --git a/src/TextField/TextField.tsx b/src/TextField/TextField.tsx new file mode 100644 index 00000000..8014c57f --- /dev/null +++ b/src/TextField/TextField.tsx @@ -0,0 +1,154 @@ +import React, { forwardRef, useMemo } from 'react'; +import styled, { css } from 'styled-components'; +import { + createDisabledTextStyles, + createFlatBoxStyles, + createScrollbars +} from '../common'; +import { blockSizes } from '../common/system'; +import { noOp } from '../common/utils'; +import { StyledCutout } from '../Cutout/Cutout'; +import { CommonStyledProps, CommonThemeProps } from '../types'; + +type TextFieldInputProps = { + multiline?: false | undefined; + onChange?: React.ChangeEventHandler; + /** @default text */ + type?: React.HTMLInputTypeAttribute; +} & Omit< + React.InputHTMLAttributes, + 'className' | 'disabled' | 'style' | 'type' +>; + +type TextFieldTextAreaProps = { + multiline: true; + onChange?: React.ChangeEventHandler; +} & Omit< + React.TextareaHTMLAttributes, + 'className' | 'disabled' | 'style' | 'type' +>; + +type TextFieldProps = { + className?: string; + disabled?: boolean; + fullWidth?: boolean; + multiline?: boolean; + shadow?: boolean; + style?: React.CSSProperties; + variant?: 'default' | 'flat'; +} & (TextFieldInputProps | TextFieldTextAreaProps) & + CommonStyledProps; + +type WrapperProps = Pick & + CommonThemeProps; + +const sharedWrapperStyles = css` + display: flex; + align-items: center; + width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')}; + min-height: ${blockSizes.md}; +`; + +const Wrapper = styled(StyledCutout).attrs({ + 'data-testid': 'variant-default' +})` + ${sharedWrapperStyles} + background: ${({ $disabled, theme }) => + $disabled ? theme.material : theme.canvas}; +`; + +const FlatWrapper = styled.div.attrs({ + 'data-testid': 'variant-flat' +})` + ${createFlatBoxStyles()} + ${sharedWrapperStyles} + position: relative; +`; + +type InputProps = Pick; + +const sharedInputStyles = css` + display: block; + box-sizing: border-box; + width: 100%; + height: 100%; + outline: none; + border: none; + background: none; + font-size: 1rem; + min-height: 27px; + font-family: inherit; + color: ${({ theme }) => theme.canvasText}; + ${({ disabled, variant }) => + variant !== 'flat' && disabled && createDisabledTextStyles()} +`; + +const StyledTextInput = styled.input` + ${sharedInputStyles} + padding: 0 8px; +`; + +const StyledTextArea = styled.textarea` + ${sharedInputStyles} + padding: 8px; + resize: none; + ${({ variant }) => createScrollbars(variant)} +`; + +const TextField = forwardRef< + HTMLInputElement | HTMLTextAreaElement, + TextFieldProps +>(function TextField( + { + className, + disabled = false, + fullWidth, + onChange = noOp, + shadow = true, + style, + variant = 'default', + ...otherProps + }, + ref +) { + const WrapperComponent = variant === 'flat' ? FlatWrapper : Wrapper; + + const field = useMemo( + () => + otherProps.multiline ? ( + + ) : ( + + ), + [disabled, onChange, otherProps, ref, variant] + ); + + return ( + + {field} + + ); +}); + +export { TextField, TextFieldProps }; diff --git a/src/index.ts b/src/index.ts index 0c6c925b..a3e99a10 100644 --- a/src/index.ts +++ b/src/index.ts @@ -19,7 +19,7 @@ export * from './Hourglass/Hourglass'; export * from './List/List'; export * from './ListItem/ListItem'; export * from './LoadingIndicator/LoadingIndicator'; -export { default as NumberField } from './NumberField/NumberField'; +export * from './NumberField/NumberField'; export * from './Panel/Panel'; export * from './Progress/Progress'; export * from './Radio/Radio'; @@ -34,7 +34,7 @@ export { default as TableHead } from './TableHead/TableHead'; export { default as TableHeadCell } from './TableHeadCell/TableHeadCell'; export { default as TableRow } from './TableRow/TableRow'; export * from './Tabs/Tabs'; -export { default as TextField } from './TextField/TextField'; +export * from './TextField/TextField'; export { default as Toolbar } from './Toolbar/Toolbar'; export { default as Tooltip } from './Tooltip/Tooltip'; export { default as Tree } from './Tree/Tree'; From 33f52e934aa8a5980c6bc043a7e5019e5f35afd3 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Tue, 26 Jul 2022 15:21:47 -0400 Subject: [PATCH 037/100] feat(table,tablebody,tabledatacell,tablehead,tableheadcell,tablerow): convert to TypeScript and export types --- src/Table/Table.mdx | 20 ++-- src/Table/{Table.spec.js => Table.spec.tsx} | 8 +- .../{Table.stories.js => Table.stories.tsx} | 17 ++-- src/Table/{Table.js => Table.tsx} | 27 +++--- src/TableBody/TableBody.js | 32 ------- .../{TableBody.spec.js => TableBody.spec.tsx} | 8 +- src/TableBody/TableBody.tsx | 28 ++++++ src/TableDataCell/TableDataCell.js | 26 ------ ...ataCell.spec.js => TableDataCell.spec.tsx} | 8 +- src/TableDataCell/TableDataCell.tsx | 24 +++++ src/TableHead/TableHead.js | 25 ----- .../{TableHead.spec.js => TableHead.spec.tsx} | 8 +- src/TableHead/TableHead.tsx | 23 +++++ src/TableHeadCell/TableHeadCell.js | 92 ------------------- ...eadCell.spec.js => TableHeadCell.spec.tsx} | 10 +- src/TableHeadCell/TableHeadCell.tsx | 91 ++++++++++++++++++ .../{TableRow.spec.js => TableRow.spec.tsx} | 9 +- src/TableRow/{TableRow.js => TableRow.tsx} | 35 +++---- src/index.ts | 12 +-- 19 files changed, 241 insertions(+), 262 deletions(-) rename src/Table/{Table.spec.js => Table.spec.tsx} (80%) rename src/Table/{Table.stories.js => Table.stories.tsx} (93%) rename src/Table/{Table.js => Table.tsx} (56%) delete mode 100644 src/TableBody/TableBody.js rename src/TableBody/{TableBody.spec.js => TableBody.spec.tsx} (74%) create mode 100644 src/TableBody/TableBody.tsx delete mode 100644 src/TableDataCell/TableDataCell.js rename src/TableDataCell/{TableDataCell.spec.js => TableDataCell.spec.tsx} (75%) create mode 100644 src/TableDataCell/TableDataCell.tsx delete mode 100644 src/TableHead/TableHead.js rename src/TableHead/{TableHead.spec.js => TableHead.spec.tsx} (74%) create mode 100644 src/TableHead/TableHead.tsx delete mode 100644 src/TableHeadCell/TableHeadCell.js rename src/TableHeadCell/{TableHeadCell.spec.js => TableHeadCell.spec.tsx} (87%) create mode 100644 src/TableHeadCell/TableHeadCell.tsx rename src/TableRow/{TableRow.spec.js => TableRow.spec.tsx} (75%) rename src/TableRow/{TableRow.js => TableRow.tsx} (53%) diff --git a/src/Table/Table.mdx b/src/Table/Table.mdx index c66413ec..66276c24 100644 --- a/src/Table/Table.mdx +++ b/src/Table/Table.mdx @@ -3,22 +3,22 @@ name: Table menu: Components --- -import Table from './Table' -import TableBody from '../TableBody/TableBody' -import TableHead from '../TableHead/TableHead' -import TableRow from '../TableRow/TableRow' -import TableHeadCell from '../TableHeadCell/TableHeadCell' -import TableDataCell from '../TableDataCell/TableDataCell' -import Window from '../Window/Window' -import WindowHeader from '../WindowHeader/WindowHeader' -import WindowContent from '../WindowContent/WindowContent' +import { Table } from './Table'; +import { TableBody } from '../TableBody/TableBody'; +import { TableHead } from '../TableHead/TableHead'; +import { TableRow } from '../TableRow/TableRow'; +import { TableHeadCell } from '../TableHeadCell/TableHeadCell'; +import { TableDataCell } from '../TableDataCell/TableDataCell'; +import Window from '../Window/Window'; +import WindowHeader from '../WindowHeader/WindowHeader'; +import WindowContent from '../WindowContent/WindowContent'; # Table ## Usage - + Pokedex.exe diff --git a/src/Table/Table.spec.js b/src/Table/Table.spec.tsx similarity index 80% rename from src/Table/Table.spec.js rename to src/Table/Table.spec.tsx index de6dcdf9..3a0badd8 100644 --- a/src/Table/Table.spec.js +++ b/src/Table/Table.spec.tsx @@ -1,15 +1,13 @@ -import React from 'react'; - import { renderWithTheme } from '../../test/utils'; -import Table from './Table'; +import { Table } from './Table'; describe('
', () => { it('renders Table', () => { const { container } = renderWithTheme(
); - const list = container.firstChild; + const table = container.firstElementChild; - expect(list).toBeInTheDocument(); + expect(table).toBeInTheDocument(); }); it('renders table element', () => { const { getByRole } = renderWithTheme(
); diff --git a/src/Table/Table.stories.js b/src/Table/Table.stories.tsx similarity index 93% rename from src/Table/Table.stories.js rename to src/Table/Table.stories.tsx index aa757aa1..988193e3 100644 --- a/src/Table/Table.stories.js +++ b/src/Table/Table.stories.tsx @@ -1,17 +1,16 @@ -import React from 'react'; -import styled from 'styled-components'; - +import { ComponentMeta } from '@storybook/react'; import { Table, TableBody, + TableDataCell, TableHead, - TableRow, TableHeadCell, - TableDataCell, + TableRow, Window, - WindowHeader, - WindowContent + WindowContent, + WindowHeader } from 'react95'; +import styled from 'styled-components'; const Wrapper = styled.div` padding: 5rem; @@ -30,7 +29,7 @@ export default { TableDataCell }, decorators: [story => {story()}] -}; +} as ComponentMeta; export function Default() { return ( @@ -39,7 +38,7 @@ export function Default() {
- + Type Name Level diff --git a/src/Table/Table.js b/src/Table/Table.tsx similarity index 56% rename from src/Table/Table.js rename to src/Table/Table.tsx index 18430a8c..304cb0e2 100644 --- a/src/Table/Table.js +++ b/src/Table/Table.tsx @@ -1,8 +1,12 @@ -import React from 'react'; -import propTypes from 'prop-types'; - +import React, { forwardRef } from 'react'; import styled from 'styled-components'; import { StyledCutout } from '../Cutout/Cutout'; +import { CommonStyledProps } from '../types'; + +type TableProps = { + children?: React.ReactNode; +} & React.TableHTMLAttributes & + CommonStyledProps; const StyledTable = styled.table` display: table; @@ -18,9 +22,10 @@ const Wrapper = styled(StyledCutout)` } `; -const Table = React.forwardRef(function Table(props, ref) { - const { children, ...otherProps } = props; - +const Table = forwardRef(function Table( + { children, ...otherProps }, + ref +) { return ( @@ -30,12 +35,4 @@ const Table = React.forwardRef(function Table(props, ref) { ); }); -Table.defaultProps = { - children: null -}; - -Table.propTypes = { - children: propTypes.node -}; - -export default Table; +export { Table, TableProps }; diff --git a/src/TableBody/TableBody.js b/src/TableBody/TableBody.js deleted file mode 100644 index 6307f206..00000000 --- a/src/TableBody/TableBody.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import propTypes from 'prop-types'; - -import styled from 'styled-components'; -import { insetShadow } from '../common'; - -const StyledTableBody = styled.tbody` - background: ${({ theme }) => theme.canvas}; - display: table-row-group; - box-shadow: ${insetShadow}; - overflow-y: auto; -`; - -const TableBody = React.forwardRef(function TableBody(props, ref) { - const { children, ...otherProps } = props; - - return ( - - {children} - - ); -}); - -TableBody.defaultProps = { - children: null -}; - -TableBody.propTypes = { - children: propTypes.node -}; - -export default TableBody; diff --git a/src/TableBody/TableBody.spec.js b/src/TableBody/TableBody.spec.tsx similarity index 74% rename from src/TableBody/TableBody.spec.js rename to src/TableBody/TableBody.spec.tsx index 10c424f0..53e67289 100644 --- a/src/TableBody/TableBody.spec.js +++ b/src/TableBody/TableBody.spec.tsx @@ -2,13 +2,13 @@ import React from 'react'; import { renderWithTheme } from '../../test/utils'; -import TableBody from './TableBody'; +import { TableBody } from './TableBody'; describe('', () => { - function mountInTable(node) { + function mountInTable(node: React.ReactNode) { const { container, getByTestId } = renderWithTheme(
{node}
); return { - tbody: container.querySelector('table').firstChild, + tbody: container.querySelector('table')?.firstElementChild, getByTestId }; } @@ -17,7 +17,7 @@ describe('', () => { const { tbody } = mountInTable(); expect(tbody).toBeInTheDocument(); - expect(tbody.tagName).toBe('TBODY'); + expect(tbody?.tagName).toBe('TBODY'); }); it('renders children', () => { diff --git a/src/TableBody/TableBody.tsx b/src/TableBody/TableBody.tsx new file mode 100644 index 00000000..0c5ef687 --- /dev/null +++ b/src/TableBody/TableBody.tsx @@ -0,0 +1,28 @@ +import React, { forwardRef } from 'react'; +import styled from 'styled-components'; +import { insetShadow } from '../common'; +import { CommonStyledProps } from '../types'; + +type TableBodyProps = { + children?: React.ReactNode; +} & React.HTMLAttributes & + CommonStyledProps; + +const StyledTableBody = styled.tbody` + background: ${({ theme }) => theme.canvas}; + display: table-row-group; + box-shadow: ${insetShadow}; + overflow-y: auto; +`; + +const TableBody = forwardRef( + function TableBody({ children, ...otherProps }, ref) { + return ( + + {children} + + ); + } +); + +export { TableBody, TableBodyProps }; diff --git a/src/TableDataCell/TableDataCell.js b/src/TableDataCell/TableDataCell.js deleted file mode 100644 index 8c6c9745..00000000 --- a/src/TableDataCell/TableDataCell.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import propTypes from 'prop-types'; - -import styled from 'styled-components'; - -const StyledTd = styled.td` - padding: 0 8px; -`; -const TableDataCell = React.forwardRef(function TableDataCell(props, ref) { - const { children, ...otherProps } = props; - return ( - - {children} - - ); -}); - -TableDataCell.defaultProps = { - children: null -}; - -TableDataCell.propTypes = { - children: propTypes.node -}; - -export default TableDataCell; diff --git a/src/TableDataCell/TableDataCell.spec.js b/src/TableDataCell/TableDataCell.spec.tsx similarity index 75% rename from src/TableDataCell/TableDataCell.spec.js rename to src/TableDataCell/TableDataCell.spec.tsx index fdd3ff19..df23704b 100644 --- a/src/TableDataCell/TableDataCell.spec.js +++ b/src/TableDataCell/TableDataCell.spec.tsx @@ -2,10 +2,10 @@ import React from 'react'; import { renderWithTheme } from '../../test/utils'; -import TableDataCell from './TableDataCell'; +import { TableDataCell } from './TableDataCell'; describe('', () => { - function mountInTable(node) { + function mountInTable(node: React.ReactNode) { const { container, getByText } = renderWithTheme( @@ -14,14 +14,14 @@ describe('', () => {
); return { - td: container.querySelector('tr').firstChild, + td: container.querySelector('tr')?.firstElementChild, getByText }; } it('renders TableDataCell', () => { const { td } = mountInTable(); - expect(td.tagName).toBe('TD'); + expect(td?.tagName).toBe('TD'); }); it('renders children', () => { diff --git a/src/TableDataCell/TableDataCell.tsx b/src/TableDataCell/TableDataCell.tsx new file mode 100644 index 00000000..764445fe --- /dev/null +++ b/src/TableDataCell/TableDataCell.tsx @@ -0,0 +1,24 @@ +import React, { forwardRef } from 'react'; +import styled from 'styled-components'; +import { CommonStyledProps } from '../types'; + +type TableDataCellProps = { + children?: React.ReactNode; +} & React.HTMLAttributes & + CommonStyledProps; + +const StyledTd = styled.td` + padding: 0 8px; +`; + +const TableDataCell = forwardRef( + function TableDataCell({ children, ...otherProps }, ref) { + return ( + + {children} + + ); + } +); + +export { TableDataCell, TableDataCellProps }; diff --git a/src/TableHead/TableHead.js b/src/TableHead/TableHead.js deleted file mode 100644 index d1184ae2..00000000 --- a/src/TableHead/TableHead.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import propTypes from 'prop-types'; -import styled from 'styled-components'; - -const StyledTableHead = styled.thead` - display: table-header-group; -`; -const TableHead = React.forwardRef(function TableHead(props, ref) { - const { children, ...otherProps } = props; - return ( - - {children} - - ); -}); - -TableHead.defaultProps = { - children: null -}; - -TableHead.propTypes = { - children: propTypes.node -}; - -export default TableHead; diff --git a/src/TableHead/TableHead.spec.js b/src/TableHead/TableHead.spec.tsx similarity index 74% rename from src/TableHead/TableHead.spec.js rename to src/TableHead/TableHead.spec.tsx index f1e12827..a3b752d9 100644 --- a/src/TableHead/TableHead.spec.js +++ b/src/TableHead/TableHead.spec.tsx @@ -2,13 +2,13 @@ import React from 'react'; import { renderWithTheme } from '../../test/utils'; -import TableHead from './TableHead'; +import { TableHead } from './TableHead'; describe('', () => { - function mountInTable(node) { + function mountInTable(node: React.ReactNode) { const { container, getByTestId } = renderWithTheme({node}
); return { - tbody: container.querySelector('table').firstChild, + tbody: container.querySelector('table')?.firstElementChild, getByTestId }; } @@ -17,7 +17,7 @@ describe('', () => { const { tbody } = mountInTable(); expect(tbody).toBeInTheDocument(); - expect(tbody.tagName).toBe('THEAD'); + expect(tbody?.tagName).toBe('THEAD'); }); it('renders children', () => { diff --git a/src/TableHead/TableHead.tsx b/src/TableHead/TableHead.tsx new file mode 100644 index 00000000..14afd6e3 --- /dev/null +++ b/src/TableHead/TableHead.tsx @@ -0,0 +1,23 @@ +import React, { forwardRef } from 'react'; +import styled from 'styled-components'; +import { CommonStyledProps } from '../types'; + +type TableHeadProps = { + children?: React.ReactNode; +} & React.HTMLAttributes & + CommonStyledProps; + +const StyledTableHead = styled.thead` + display: table-header-group; +`; +const TableHead = forwardRef( + function TableHead({ children, ...otherProps }, ref) { + return ( + + {children} + + ); + } +); + +export { TableHead, TableHeadProps }; diff --git a/src/TableHeadCell/TableHeadCell.js b/src/TableHeadCell/TableHeadCell.js deleted file mode 100644 index 213b66d5..00000000 --- a/src/TableHeadCell/TableHeadCell.js +++ /dev/null @@ -1,92 +0,0 @@ -import React from 'react'; -import propTypes from 'prop-types'; - -import styled, { css } from 'styled-components'; -import { createBorderStyles, createDisabledTextStyles } from '../common'; -import { noOp } from '../common/utils'; - -const StyledHeadCell = styled.th` - position: relative; - padding: 0 8px; - display: table-cell; - vertical-align: inherit; - background: ${({ theme }) => theme.material}; - cursor: default; - user-select: none; - &:before { - box-sizing: border-box; - content: ''; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - ${createBorderStyles()} - - border-left: none; - border-top: none; - } - ${({ isDisabled }) => - !isDisabled && - css` - &:active { - &:before { - ${createBorderStyles({ invert: true, windowBorders: true })} - border-left: none; - border-top: none; - padding-top: 2px; - } - - & > div { - position: relative; - top: 2px; - } - } - `} - - color: ${({ theme }) => theme.materialText}; - ${({ isDisabled }) => isDisabled && createDisabledTextStyles()} - &:hover { - color: ${({ theme }) => theme.materialText}; - ${({ isDisabled }) => isDisabled && createDisabledTextStyles()} - } -`; - -const TableHeadCell = React.forwardRef(function TableHeadCell(props, ref) { - const { disabled, children, onClick, sort, ...otherProps } = props; - let sortDirection = null; - if (sort) { - sortDirection = sort === 'asc' ? 'ascending' : 'descending'; - } - return ( - -
{children}
- - ); -}); - -TableHeadCell.defaultProps = { - children: null, - disabled: false, - onClick: null, - // onTouchStart below to enable :active style on iOS - onTouchStart: noOp, - sort: null -}; - -TableHeadCell.propTypes = { - children: propTypes.node, - disabled: propTypes.bool, - onClick: propTypes.func, - onTouchStart: propTypes.func, - sort: propTypes.oneOf(['asc', 'desc', null]) -}; - -export default TableHeadCell; diff --git a/src/TableHeadCell/TableHeadCell.spec.js b/src/TableHeadCell/TableHeadCell.spec.tsx similarity index 87% rename from src/TableHeadCell/TableHeadCell.spec.js rename to src/TableHeadCell/TableHeadCell.spec.tsx index 6406d206..b159e7fe 100644 --- a/src/TableHeadCell/TableHeadCell.spec.js +++ b/src/TableHeadCell/TableHeadCell.spec.tsx @@ -2,10 +2,10 @@ import React from 'react'; import { renderWithTheme } from '../../test/utils'; -import TableHeadCell from './TableHeadCell'; +import { TableHeadCell } from './TableHeadCell'; describe('', () => { - function mountInTable(node) { + function mountInTable(node: React.ReactNode) { const { container, getByText } = renderWithTheme( @@ -14,14 +14,14 @@ describe('', () => {
); return { - th: container.querySelector('tr').firstChild, + th: container.querySelector('tr')?.firstElementChild as HTMLElement, getByText }; } it('renders TableHeadCell', () => { const { th } = mountInTable(); - expect(th.tagName).toBe('TH'); + expect(th?.tagName).toBe('TH'); }); it('renders children', () => { @@ -55,7 +55,7 @@ describe('', () => { ); expect(th).toHaveAttribute('aria-disabled', 'true'); - th.click(); + th?.click?.(); expect(handleChange).not.toHaveBeenCalled(); }); }); diff --git a/src/TableHeadCell/TableHeadCell.tsx b/src/TableHeadCell/TableHeadCell.tsx new file mode 100644 index 00000000..dd4c359d --- /dev/null +++ b/src/TableHeadCell/TableHeadCell.tsx @@ -0,0 +1,91 @@ +import React, { forwardRef } from 'react'; +import styled, { css } from 'styled-components'; +import { createBorderStyles, createDisabledTextStyles } from '../common'; +import { noOp } from '../common/utils'; +import { CommonStyledProps } from '../types'; + +type TableHeadCellProps = { + children?: React.ReactNode; + disabled?: boolean; + sort?: 'asc' | 'desc' | null; +} & React.TdHTMLAttributes & + CommonStyledProps; + +const StyledHeadCell = styled.th<{ $disabled: boolean }>` + position: relative; + padding: 0 8px; + display: table-cell; + vertical-align: inherit; + background: ${({ theme }) => theme.material}; + cursor: default; + user-select: none; + &:before { + box-sizing: border-box; + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + ${createBorderStyles()} + + border-left: none; + border-top: none; + } + ${({ $disabled }) => + !$disabled && + css` + &:active { + &:before { + ${createBorderStyles({ invert: true, windowBorders: true })} + border-left: none; + border-top: none; + padding-top: 2px; + } + + & > div { + position: relative; + top: 2px; + } + } + `} + + color: ${({ theme }) => theme.materialText}; + ${({ $disabled }) => $disabled && createDisabledTextStyles()} + &:hover { + color: ${({ theme }) => theme.materialText}; + ${({ $disabled }) => $disabled && createDisabledTextStyles()} + } +`; + +const TableHeadCell = forwardRef( + function TableHeadCell( + { + disabled = false, + children, + onClick, + onTouchStart = noOp, + sort, + ...otherProps + }, + ref + ) { + const ariaSort = + sort === 'asc' ? 'ascending' : sort === 'desc' ? 'descending' : undefined; + return ( + +
{children}
+ + ); + } +); + +export { TableHeadCell, TableHeadCellProps }; diff --git a/src/TableRow/TableRow.spec.js b/src/TableRow/TableRow.spec.tsx similarity index 75% rename from src/TableRow/TableRow.spec.js rename to src/TableRow/TableRow.spec.tsx index 22ccb239..a870e863 100644 --- a/src/TableRow/TableRow.spec.js +++ b/src/TableRow/TableRow.spec.tsx @@ -1,25 +1,24 @@ import React from 'react'; - import { renderWithTheme } from '../../test/utils'; -import TableRow from './TableRow'; +import { TableRow } from './TableRow'; describe('', () => { - function mountInTable(node) { + function mountInTable(node: React.ReactNode) { const { container, getByTestId } = renderWithTheme( {node}
); return { - tr: container.querySelector('tbody').firstChild, + tr: container.querySelector('tbody')?.firstElementChild, getByTestId }; } it('renders TableRow', () => { const { tr } = mountInTable(); - expect(tr.tagName).toBe('TR'); + expect(tr?.tagName).toBe('TR'); }); it('renders children', () => { diff --git a/src/TableRow/TableRow.js b/src/TableRow/TableRow.tsx similarity index 53% rename from src/TableRow/TableRow.js rename to src/TableRow/TableRow.tsx index 479c00e0..3c30d8ca 100644 --- a/src/TableRow/TableRow.js +++ b/src/TableRow/TableRow.tsx @@ -1,9 +1,11 @@ -import React from 'react'; -import propTypes from 'prop-types'; - +import React, { forwardRef } from 'react'; import styled from 'styled-components'; import { blockSizes } from '../common/system'; +type TableRowProps = { + children?: React.ReactNode; +} & React.HTMLAttributes; + const StyledTr = styled.tr` color: inherit; display: table-row; @@ -19,21 +21,14 @@ const StyledTr = styled.tr` } `; -const TableRow = React.forwardRef(function TableRow(props, ref) { - const { children, ...otherProps } = props; - return ( - - {children} - - ); -}); - -TableRow.defaultProps = { - children: null -}; - -TableRow.propTypes = { - children: propTypes.node -}; +const TableRow = forwardRef( + function TableRow({ children, ...otherProps }, ref) { + return ( + + {children} + + ); + } +); -export default TableRow; +export { TableRow, TableRowProps }; diff --git a/src/index.ts b/src/index.ts index a3e99a10..b4bcbed6 100644 --- a/src/index.ts +++ b/src/index.ts @@ -27,12 +27,12 @@ export * from './Select/Select'; export * from './Slider/Slider'; export * from './Tab/Tab'; export * from './TabBody/TabBody'; -export { default as Table } from './Table/Table'; -export { default as TableBody } from './TableBody/TableBody'; -export { default as TableDataCell } from './TableDataCell/TableDataCell'; -export { default as TableHead } from './TableHead/TableHead'; -export { default as TableHeadCell } from './TableHeadCell/TableHeadCell'; -export { default as TableRow } from './TableRow/TableRow'; +export * from './Table/Table'; +export * from './TableBody/TableBody'; +export * from './TableDataCell/TableDataCell'; +export * from './TableHead/TableHead'; +export * from './TableHeadCell/TableHeadCell'; +export * from './TableRow/TableRow'; export * from './Tabs/Tabs'; export * from './TextField/TextField'; export { default as Toolbar } from './Toolbar/Toolbar'; From 6c727af872c9155980721a164be9e4efd196488d Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Tue, 26 Jul 2022 21:02:46 -0400 Subject: [PATCH 038/100] feat(tooltip): convert to TypeScript and export types This also adds utils to help identify React events for TypeScript. --- src/Tooltip/Tooltip.js | 191 ----------------- src/Tooltip/Tooltip.mdx | 2 +- .../{Tooltip.spec.js => Tooltip.spec.tsx} | 9 +- ...Tooltip.stories.js => Tooltip.stories.tsx} | 7 +- src/Tooltip/Tooltip.tsx | 193 ++++++++++++++++++ src/common/utils/events.spec.tsx | 147 +++++++++++++ src/common/utils/events.ts | 44 ++++ src/index.ts | 2 +- 8 files changed, 394 insertions(+), 201 deletions(-) delete mode 100644 src/Tooltip/Tooltip.js rename src/Tooltip/{Tooltip.spec.js => Tooltip.spec.tsx} (96%) rename src/Tooltip/{Tooltip.stories.js => Tooltip.stories.tsx} (78%) create mode 100644 src/Tooltip/Tooltip.tsx create mode 100644 src/common/utils/events.spec.tsx create mode 100644 src/common/utils/events.ts diff --git a/src/Tooltip/Tooltip.js b/src/Tooltip/Tooltip.js deleted file mode 100644 index 3a190c3c..00000000 --- a/src/Tooltip/Tooltip.js +++ /dev/null @@ -1,191 +0,0 @@ -import React, { useState } from 'react'; -import propTypes from 'prop-types'; -import styled from 'styled-components'; - -import { shadow } from '../common'; - -const positioningStyles = { - top: `top: -4px; - left: 50%; - transform: translate(-50%, -100%);`, - bottom: `bottom: -4px; - left: 50%; - transform: translate(-50%, 100%);`, - left: `left: -4px; - top: 50%; - transform: translate(-100%, -50%);`, - right: `right: -4px; - top: 50%; - transform: translate(100%, -50%);` -}; - -const Tip = styled.span` - position: absolute; - - z-index: 1; - display: ${props => (props.show ? 'block' : 'none')}; - padding: 4px; - border: 2px solid ${({ theme }) => theme.borderDarkest}; - background: ${({ theme }) => theme.tooltip}; - box-shadow: ${shadow}; - text-align: center; - font-size: 1rem; - ${props => positioningStyles[props.position]} -`; - -const Wrapper = styled.div` - position: relative; - display: inline-block; - white-space: nowrap; -`; - -const Tooltip = React.forwardRef(function Tooltip(props, ref) { - const { - children, - className, - disableFocusListener, - disableMouseListener, - enterDelay, - leaveDelay, - onBlur, - onClose, - onFocus, - onMouseEnter, - onMouseLeave, - onOpen, - style, - text, - ...otherProps - } = props; - - const [show, setShow] = useState(false); - const [openTimer, setOpenTimer] = useState(null); - const [closeTimer, setCloseTimer] = useState(null); - - const isUsingFocus = !disableFocusListener; - const isUsingMouse = !disableMouseListener; - - const handleOpen = evt => { - clearTimeout(openTimer); - clearTimeout(closeTimer); - - const timer = setTimeout(() => { - setShow(true); - - if (onOpen) { - onOpen(evt); - } - }, enterDelay); - - setOpenTimer(timer); - }; - - const handleEnter = evt => { - evt.persist(); - - if (evt.type === 'focus' && onFocus) { - onFocus(evt); - } else if (evt.type === 'mouseenter' && onMouseEnter) { - onMouseEnter(evt); - } - - handleOpen(evt); - }; - - const handleClose = evt => { - clearTimeout(openTimer); - clearTimeout(closeTimer); - - const timer = setTimeout(() => { - setShow(false); - - if (onClose) { - onClose(evt); - } - }, leaveDelay); - - setCloseTimer(timer); - }; - - const handleLeave = evt => { - evt.persist(); - - if (evt.type === 'blur' && onBlur) { - onBlur(evt); - } else if (evt.type === 'mouseleave' && onMouseLeave) { - onMouseLeave(evt); - } - - handleClose(evt); - }; - - // set callbacks for onBlur and onFocus, unless disableFocusListener is true - const blurCb = isUsingFocus ? handleLeave : undefined; - const focusCb = isUsingFocus ? handleEnter : undefined; - - // set callbacks for onMouseEnter and onMouseLeave, unless disableMouseListener is true - const mouseEnterCb = isUsingMouse ? handleEnter : undefined; - const mouseLeaveCb = isUsingMouse ? handleLeave : undefined; - - // set the wrapper's tabIndex for focus events, unless disableFocusListener is true - const tabIndex = isUsingFocus ? '0' : undefined; - - return ( - - - {text} - - {children} - - ); -}); - -Tooltip.defaultProps = { - className: '', - disableFocusListener: false, - disableMouseListener: false, - enterDelay: 1000, - leaveDelay: 0, - onBlur: undefined, - onClose: undefined, - onFocus: undefined, - onMouseEnter: undefined, - onMouseLeave: undefined, - onOpen: undefined, - style: {}, - position: 'top' -}; - -Tooltip.propTypes = { - children: propTypes.node.isRequired, - className: propTypes.string, - disableFocusListener: propTypes.bool, - disableMouseListener: propTypes.bool, - enterDelay: propTypes.number, - leaveDelay: propTypes.number, - onBlur: propTypes.func, - onClose: propTypes.func, - onFocus: propTypes.func, - onMouseEnter: propTypes.func, - onMouseLeave: propTypes.func, - onOpen: propTypes.func, - style: propTypes.shape({}), - text: propTypes.string.isRequired, - position: propTypes.oneOf(['top', 'bottom', 'left', 'right']) -}; - -export default Tooltip; diff --git a/src/Tooltip/Tooltip.mdx b/src/Tooltip/Tooltip.mdx index bb18dfc7..2f18c020 100644 --- a/src/Tooltip/Tooltip.mdx +++ b/src/Tooltip/Tooltip.mdx @@ -3,7 +3,7 @@ name: Tooltip menu: Components --- -import Tooltip from './Tooltip'; +import { Tooltip } from './Tooltip'; import { Button } from '../Button/Button'; # Tooltip diff --git a/src/Tooltip/Tooltip.spec.js b/src/Tooltip/Tooltip.spec.tsx similarity index 96% rename from src/Tooltip/Tooltip.spec.js rename to src/Tooltip/Tooltip.spec.tsx index 7f1c0745..b0a7f574 100644 --- a/src/Tooltip/Tooltip.spec.js +++ b/src/Tooltip/Tooltip.spec.tsx @@ -1,9 +1,10 @@ -import React from 'react'; import { fireEvent, render, waitFor } from '@testing-library/react'; -import Tooltip from './Tooltip'; +import { Tooltip, TooltipProps } from './Tooltip'; -const getProps = (props = {}) => ({ +const getProps = ( + props: Partial = {} +): Omit => ({ className: props.className, disableFocusListener: props.disableFocusListener, disableMouseListener: props.disableMouseListener, @@ -19,7 +20,7 @@ const getProps = (props = {}) => ({ text: 'I am the tooltip' }); -const renderTooltip = props => ( +const renderTooltip = (props: Omit) => (
Kid
 diff --git a/src/Tooltip/Tooltip.stories.js b/src/Tooltip/Tooltip.stories.tsx similarity index 78% rename from src/Tooltip/Tooltip.stories.js rename to src/Tooltip/Tooltip.stories.tsx index f39947aa..9d4b9803 100644 --- a/src/Tooltip/Tooltip.stories.js +++ b/src/Tooltip/Tooltip.stories.tsx @@ -1,8 +1,7 @@ -import React from 'react'; +import { ComponentMeta } from '@storybook/react'; +import { Button, Tooltip } from 'react95'; import styled from 'styled-components'; -import { Tooltip, Button } from 'react95'; - const Wrapper = styled.div` padding: 5rem; background: ${({ theme }) => theme.desktopBackground}; @@ -12,7 +11,7 @@ export default { title: 'Tooltip', component: Tooltip, decorators: [story => {story()}] -}; +} as ComponentMeta; export function Default() { return ( diff --git a/src/Tooltip/Tooltip.tsx b/src/Tooltip/Tooltip.tsx new file mode 100644 index 00000000..a71d894d --- /dev/null +++ b/src/Tooltip/Tooltip.tsx @@ -0,0 +1,193 @@ +import React, { forwardRef, useState } from 'react'; +import styled from 'styled-components'; + +import { shadow } from '../common'; +import { isReactFocusEvent, isReactMouseEvent } from '../common/utils/events'; +import { CommonStyledProps } from '../types'; + +type TooltipPosition = 'top' | 'bottom' | 'left' | 'right'; + +type TooltipProps = { + children: React.ReactNode; + className?: string; + disableFocusListener?: boolean; + disableMouseListener?: boolean; + enterDelay?: number; + leaveDelay?: number; + onBlur?: React.FocusEventHandler; + onClose?: ( + event: React.FocusEvent | React.MouseEvent + ) => void; + onFocus?: React.FocusEventHandler; + onMouseEnter?: React.MouseEventHandler; + onMouseLeave?: React.MouseEventHandler; + onOpen?: ( + event: React.FocusEvent | React.MouseEvent + ) => void; + style?: React.CSSProperties; + text: string; + position?: TooltipPosition; +} & Omit< + React.HTMLAttributes, + 'onBlur' | 'onClose' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'onOpen' +> & + CommonStyledProps; + +const positioningStyles: Record = { + top: `top: -4px; + left: 50%; + transform: translate(-50%, -100%);`, + bottom: `bottom: -4px; + left: 50%; + transform: translate(-50%, 100%);`, + left: `left: -4px; + top: 50%; + transform: translate(-100%, -50%);`, + right: `right: -4px; + top: 50%; + transform: translate(100%, -50%);` +}; + +const Tip = styled.span<{ position: TooltipPosition; show: boolean }>` + position: absolute; + + z-index: 1; + display: ${props => (props.show ? 'block' : 'none')}; + padding: 4px; + border: 2px solid ${({ theme }) => theme.borderDarkest}; + background: ${({ theme }) => theme.tooltip}; + box-shadow: ${shadow}; + text-align: center; + font-size: 1rem; + ${props => positioningStyles[props.position]} +`; + +const Wrapper = styled.div` + position: relative; + display: inline-block; + white-space: nowrap; +`; + +const Tooltip = forwardRef(function Tooltip( + { + className, + children, + disableFocusListener = false, + disableMouseListener = false, + enterDelay = 1000, + leaveDelay = 0, + onBlur, + onClose, + onFocus, + onMouseEnter, + onMouseLeave, + onOpen, + style, + text, + position = 'top', + ...otherProps + }, + ref +) { + const [show, setShow] = useState(false); + const [openTimer, setOpenTimer] = useState(); + const [closeTimer, setCloseTimer] = useState(); + + const isUsingFocus = !disableFocusListener; + const isUsingMouse = !disableMouseListener; + + const handleOpen = ( + event: React.FocusEvent | React.MouseEvent + ) => { + window.clearTimeout(openTimer); + window.clearTimeout(closeTimer); + + const timer = window.setTimeout(() => { + setShow(true); + + onOpen?.(event); + }, enterDelay); + + setOpenTimer(timer); + }; + + const handleEnter = ( + event: React.FocusEvent | React.MouseEvent + ) => { + event.persist(); + + if (isReactFocusEvent(event)) { + onFocus?.(event); + } else if (isReactMouseEvent(event)) { + onMouseEnter?.(event); + } + + handleOpen(event); + }; + + const handleClose = ( + event: React.FocusEvent | React.MouseEvent + ) => { + window.clearTimeout(openTimer); + window.clearTimeout(closeTimer); + + const timer = window.setTimeout(() => { + setShow(false); + + onClose?.(event); + }, leaveDelay); + + setCloseTimer(timer); + }; + + const handleLeave = ( + event: React.FocusEvent | React.MouseEvent + ) => { + event.persist(); + + if (isReactFocusEvent(event)) { + onBlur?.(event); + } else if (isReactMouseEvent(event)) { + onMouseLeave?.(event); + } + + handleClose(event); + }; + + // set callbacks for onBlur and onFocus, unless disableFocusListener is true + const blurCb = isUsingFocus ? handleLeave : undefined; + const focusCb = isUsingFocus ? handleEnter : undefined; + + // set callbacks for onMouseEnter and onMouseLeave, unless disableMouseListener is true + const mouseEnterCb = isUsingMouse ? handleEnter : undefined; + const mouseLeaveCb = isUsingMouse ? handleLeave : undefined; + + // set the wrapper's tabIndex for focus events, unless disableFocusListener is true + const tabIndex = isUsingFocus ? 0 : undefined; + + return ( + + + {text} + + {children} + + ); +}); + +export { Tooltip, TooltipProps }; diff --git a/src/common/utils/events.spec.tsx b/src/common/utils/events.spec.tsx new file mode 100644 index 00000000..85104412 --- /dev/null +++ b/src/common/utils/events.spec.tsx @@ -0,0 +1,147 @@ +import { EventType, fireEvent, render, screen } from '@testing-library/react'; +import React, { forwardRef } from 'react'; +import { + isReactFocusEvent, + isReactKeyboardEvent, + isReactMouseEvent +} from './events'; + +type FireEventMap = Record; + +const focusEventTypesMap: FireEventMap = { blur: 'blur', focus: 'focus' }; + +const keyboardEventTypesMap: FireEventMap = { + keydown: 'keyDown', + keypress: 'keyPress', + keyup: 'keyUp' +}; + +const mouseEventTypesMap: FireEventMap = { + click: 'click', + contextmenu: 'contextMenu', + doubleclick: 'doubleClick', + drag: 'drag', + dragend: 'dragEnd', + dragenter: 'dragEnter', + dragexit: 'dragExit', + dragleave: 'dragLeave', + dragover: 'dragOver', + dragstart: 'dragStart', + drop: 'drop', + mousedown: 'mouseDown', + mouseenter: 'mouseEnter', + mouseleave: 'mouseLeave', + mousemove: 'mouseMove', + mouseout: 'mouseOut', + mouseover: 'mouseOver', + mouseup: 'mouseUp' +}; + +const OnEverything = forwardRef< + HTMLInputElement, + { + callback: (event: React.SyntheticEvent) => void; + } +>(({ callback }, ref) => { + return ( + + ); +}); + +const renderEventTester = async () => { + const callback = jest.fn]>(); + render(); + const input = await screen.findByRole('textbox'); + + return { + callback, + emit: (fireEventFunctionName: keyof typeof fireEvent, init?: EventInit) => { + fireEvent[fireEventFunctionName](input, init); + const callbackCall = + callback.mock.calls[callback.mock.calls.length - 1]?.[0]; + return callbackCall; + } + }; +}; + +describe(isReactFocusEvent, () => { + let emit: ( + fireEventFunctionName: keyof typeof fireEvent, + init?: EventInit + ) => React.SyntheticEvent; + beforeAll(async () => { + ({ emit } = await renderEventTester()); + }); + + it.each(Object.keys(focusEventTypesMap))( + 'returns correct results for %s', + focusEventType => { + expect(isReactFocusEvent(new Event(focusEventType))).toBeFalsy(); + const event = emit(focusEventTypesMap[focusEventType]); + expect(isReactFocusEvent(event)).toBeTruthy(); + } + ); +}); + +describe(isReactKeyboardEvent, () => { + let emit: ( + fireEventFunctionName: keyof typeof fireEvent, + init?: EventInit + ) => React.SyntheticEvent; + beforeAll(async () => { + ({ emit } = await renderEventTester()); + }); + + it.each(Object.keys(keyboardEventTypesMap))( + 'returns correct results for %s', + focusEventType => { + expect(isReactKeyboardEvent(new Event(focusEventType))).toBeFalsy(); + const event = emit(keyboardEventTypesMap[focusEventType]); + expect(isReactKeyboardEvent(event)).toBeTruthy(); + } + ); +}); + +describe(isReactMouseEvent, () => { + let emit: ( + fireEventFunctionName: keyof typeof fireEvent, + init?: EventInit + ) => React.SyntheticEvent; + beforeAll(async () => { + ({ emit } = await renderEventTester()); + }); + + it.each(Object.keys(mouseEventTypesMap))( + 'returns correct results for %s', + focusEventType => { + expect(isReactMouseEvent(new Event(focusEventType))).toBeFalsy(); + const event = emit(mouseEventTypesMap[focusEventType]); + expect(isReactMouseEvent(event)).toBeTruthy(); + } + ); +}); diff --git a/src/common/utils/events.ts b/src/common/utils/events.ts new file mode 100644 index 00000000..ccdd0cfd --- /dev/null +++ b/src/common/utils/events.ts @@ -0,0 +1,44 @@ +import React from 'react'; + +export const focusEventTypes = ['blur', 'focus']; + +export const keyboardEventTypes = ['keydown', 'keypress', 'keyup']; + +export const mouseEventTypes = [ + 'click', + 'contextmenu', + 'doubleclick', + 'drag', + 'dragend', + 'dragenter', + 'dragexit', + 'dragleave', + 'dragover', + 'dragstart', + 'drop', + 'mousedown', + 'mouseenter', + 'mouseleave', + 'mousemove', + 'mouseout', + 'mouseover', + 'mouseup' +]; + +export function isReactFocusEvent( + event: React.SyntheticEvent | Event +): event is React.FocusEvent { + return 'nativeEvent' in event && focusEventTypes.includes(event.type); +} + +export function isReactKeyboardEvent( + event: React.SyntheticEvent | Event +): event is React.KeyboardEvent { + return 'nativeEvent' in event && keyboardEventTypes.includes(event.type); +} + +export function isReactMouseEvent( + event: React.SyntheticEvent | Event +): event is React.MouseEvent { + return 'nativeEvent' in event && mouseEventTypes.includes(event.type); +} diff --git a/src/index.ts b/src/index.ts index b4bcbed6..5c17c394 100644 --- a/src/index.ts +++ b/src/index.ts @@ -36,7 +36,7 @@ export * from './TableRow/TableRow'; export * from './Tabs/Tabs'; export * from './TextField/TextField'; export { default as Toolbar } from './Toolbar/Toolbar'; -export { default as Tooltip } from './Tooltip/Tooltip'; +export * from './Tooltip/Tooltip'; export { default as Tree } from './Tree/Tree'; export { default as Window } from './Window/Window'; export { default as WindowContent } from './WindowContent/WindowContent'; From ac438b55397be5ebb438a6622794e799a94e7fe7 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Wed, 27 Jul 2022 11:43:46 -0400 Subject: [PATCH 039/100] feat(window): convert to TypeScript and export types --- .../{Window.spec.js => Window.spec.tsx} | 15 ++++- .../{Window.stories.js => Window.stories.tsx} | 16 +++--- src/Window/{Window.js => Window.tsx} | 39 ++++++------- src/WindowContent/WindowContent.js | 28 --------- ...Content.spec.js => WindowContent.spec.tsx} | 4 +- src/WindowContent/WindowContent.tsx | 24 ++++++++ src/WindowHeader/WindowHeader.js | 54 ------------------ src/WindowHeader/WindowHeader.spec.js | 40 ------------- src/WindowHeader/WindowHeader.spec.tsx | 57 +++++++++++++++++++ src/WindowHeader/WindowHeader.tsx | 49 ++++++++++++++++ src/index.ts | 6 +- 11 files changed, 172 insertions(+), 160 deletions(-) rename src/Window/{Window.spec.js => Window.spec.tsx} (73%) rename src/Window/{Window.stories.js => Window.stories.tsx} (94%) rename src/Window/{Window.js => Window.tsx} (63%) delete mode 100644 src/WindowContent/WindowContent.js rename src/WindowContent/{WindowContent.spec.js => WindowContent.spec.tsx} (88%) create mode 100644 src/WindowContent/WindowContent.tsx delete mode 100644 src/WindowHeader/WindowHeader.js delete mode 100644 src/WindowHeader/WindowHeader.spec.js create mode 100644 src/WindowHeader/WindowHeader.spec.tsx create mode 100644 src/WindowHeader/WindowHeader.tsx diff --git a/src/Window/Window.spec.js b/src/Window/Window.spec.tsx similarity index 73% rename from src/Window/Window.spec.js rename to src/Window/Window.spec.tsx index c02df214..24580ebf 100644 --- a/src/Window/Window.spec.js +++ b/src/Window/Window.spec.tsx @@ -1,8 +1,7 @@ -import React from 'react'; - +import { createRef } from 'react'; import { renderWithTheme } from '../../test/utils'; -import Window from './Window'; +import { Window } from './Window'; describe('', () => { it('renders Window', () => { @@ -28,10 +27,20 @@ describe('', () => { expect(queryByTestId('resizeHandle')).not.toBeInTheDocument(); }); + it('renders resize handle when set to true', () => { const { queryByTestId } = renderWithTheme(); expect(queryByTestId('resizeHandle')).toBeInTheDocument(); }); + + it('passes resizeRef to the resizable element', () => { + const ref = createRef(); + const { queryByTestId } = renderWithTheme( + + ); + + expect(queryByTestId('resizeHandle')).toBe(ref.current); + }); }); }); diff --git a/src/Window/Window.stories.js b/src/Window/Window.stories.tsx similarity index 94% rename from src/Window/Window.stories.js rename to src/Window/Window.stories.tsx index 3b6ccbb7..1cdad064 100644 --- a/src/Window/Window.stories.js +++ b/src/Window/Window.stories.tsx @@ -1,13 +1,13 @@ -import React from 'react'; -import styled from 'styled-components'; +import { ComponentMeta } from '@storybook/react'; import { - Window, - WindowContent, - WindowHeader, Button, + Panel, Toolbar, - Panel + Window, + WindowContent, + WindowHeader } from 'react95'; +import styled from 'styled-components'; const Wrapper = styled.div` padding: 5rem; @@ -66,7 +66,7 @@ export default { component: Window, subcomponents: { WindowHeader, WindowContent }, decorators: [story => {story()}] -}; +} as ComponentMeta; export function Default() { return ( @@ -97,7 +97,7 @@ export function Default() {

- Put some useful informations here + Put some useful information here diff --git a/src/Window/Window.js b/src/Window/Window.tsx similarity index 63% rename from src/Window/Window.js rename to src/Window/Window.tsx index 687815d5..a8b10eab 100644 --- a/src/Window/Window.js +++ b/src/Window/Window.tsx @@ -1,8 +1,15 @@ -import React from 'react'; -import propTypes from 'prop-types'; - +import React, { forwardRef } from 'react'; import styled, { css } from 'styled-components'; import { createBorderStyles, createBoxStyles } from '../common'; +import { CommonStyledProps } from '../types'; + +type WindowProps = { + children?: React.ReactNode; + resizable?: boolean; + resizeRef?: React.Ref; + shadow?: boolean; +} & React.HTMLAttributes & + CommonStyledProps; const StyledWindow = styled.div` position: relative; @@ -11,6 +18,7 @@ const StyledWindow = styled.div` ${createBorderStyles({ windowBorders: true })} ${createBoxStyles()} `; + const ResizeHandle = styled.span` ${({ theme }) => css` display: inline-block; @@ -39,27 +47,16 @@ const ResizeHandle = styled.span` `} `; -const Window = React.forwardRef(function Window(props, ref) { - const { resizable, children, ...otherProps } = props; - +const Window = forwardRef(function Window( + { children, resizable = false, resizeRef, shadow = true, ...otherProps }, + ref +) { return ( - + {children} - {resizable && } + {resizable && } ); }); -Window.defaultProps = { - resizable: false, - shadow: true, - children: null -}; - -Window.propTypes = { - shadow: propTypes.bool, - resizable: propTypes.bool, - children: propTypes.node -}; - -export default Window; +export { Window, WindowProps }; diff --git a/src/WindowContent/WindowContent.js b/src/WindowContent/WindowContent.js deleted file mode 100644 index a7a67b96..00000000 --- a/src/WindowContent/WindowContent.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import propTypes from 'prop-types'; - -import styled from 'styled-components'; - -const StyledWindowContent = styled.div` - padding: 16px; -`; - -const WindowContent = React.forwardRef(function WindowContent(props, ref) { - const { children, ...otherProps } = props; - - return ( - - {children} - - ); -}); - -WindowContent.defaultProps = { - children: null -}; - -WindowContent.propTypes = { - children: propTypes.node -}; - -export default WindowContent; diff --git a/src/WindowContent/WindowContent.spec.js b/src/WindowContent/WindowContent.spec.tsx similarity index 88% rename from src/WindowContent/WindowContent.spec.js rename to src/WindowContent/WindowContent.spec.tsx index 108fef30..cddb5ed9 100644 --- a/src/WindowContent/WindowContent.spec.js +++ b/src/WindowContent/WindowContent.spec.tsx @@ -1,8 +1,6 @@ -import React from 'react'; - import { renderWithTheme } from '../../test/utils'; -import WindowContent from './WindowContent'; +import { WindowContent } from './WindowContent'; describe('', () => { it('renders WindowContent', () => { diff --git a/src/WindowContent/WindowContent.tsx b/src/WindowContent/WindowContent.tsx new file mode 100644 index 00000000..96123ef1 --- /dev/null +++ b/src/WindowContent/WindowContent.tsx @@ -0,0 +1,24 @@ +import React, { forwardRef } from 'react'; +import styled from 'styled-components'; +import { CommonStyledProps } from '../types'; + +type WindowContentProps = { + children?: React.ReactNode; +} & React.HTMLAttributes & + CommonStyledProps; + +const StyledWindowContent = styled.div` + padding: 16px; +`; + +const WindowContent = forwardRef( + function WindowContent({ children, ...otherProps }, ref) { + return ( + + {children} + + ); + } +); + +export { WindowContent, WindowContentProps }; diff --git a/src/WindowHeader/WindowHeader.js b/src/WindowHeader/WindowHeader.js deleted file mode 100644 index b6b26805..00000000 --- a/src/WindowHeader/WindowHeader.js +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import propTypes from 'prop-types'; - -import styled from 'styled-components'; -import { StyledButton } from '../Button/Button'; - -const SlyledWindowHeader = styled.div` - height: 33px; - line-height: 33px; - padding-left: 0.25rem; - padding-right: 3px; - font-weight: bold; - border: 2px solid ${({ theme }) => theme.material}; - &[data-active='false'] { - background: ${({ theme }) => theme.headerNotActiveBackground}; - color: ${({ theme }) => theme.headerNotActiveText}; - } - &[data-active='true'] { - background: ${({ theme }) => theme.headerBackground}; - color: ${({ theme }) => theme.headerText}; - } - ${StyledButton} { - padding-left: 0; - padding-right: 0; - height: 27px; - width: 31px; - } -`; -// TODO - should we add some aria label indicating if window is currently active? -const WindowHeader = React.forwardRef(function WindowHeader(props, ref) { - const { active, children, ...otherProps } = props; - - return ( - - {children} - - ); -}); - -WindowHeader.defaultProps = { - children: null, - active: true -}; - -WindowHeader.propTypes = { - children: propTypes.node, - active: propTypes.bool -}; - -export default WindowHeader; diff --git a/src/WindowHeader/WindowHeader.spec.js b/src/WindowHeader/WindowHeader.spec.js deleted file mode 100644 index f81638b2..00000000 --- a/src/WindowHeader/WindowHeader.spec.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; - -import { renderWithTheme } from '../../test/utils'; - -import WindowHeader from './WindowHeader'; - -describe('', () => { - it('renders WindowHeader', () => { - const { container } = renderWithTheme(); - const windowHeader = container.firstChild; - - expect(windowHeader).toBeInTheDocument(); - }); - - it('renders children', () => { - const textContent = 'Hi there!'; - const { getByText } = renderWithTheme( - - {textContent} - - ); - expect(getByText(textContent)).toBeInTheDocument(); - }); - - describe('prop: isActive', () => { - it('displays active header by default', () => { - const { container } = renderWithTheme(); - const windowHeader = container.firstChild; - - expect(windowHeader).toHaveAttribute('data-active', 'true'); - }); - - it('renders non-active header when set to false', () => { - const { container } = renderWithTheme(); - const windowHeader = container.firstChild; - - expect(windowHeader).toHaveAttribute('data-active', 'false'); - }); - }); -}); diff --git a/src/WindowHeader/WindowHeader.spec.tsx b/src/WindowHeader/WindowHeader.spec.tsx new file mode 100644 index 00000000..d47c0ac1 --- /dev/null +++ b/src/WindowHeader/WindowHeader.spec.tsx @@ -0,0 +1,57 @@ +import { renderWithTheme, theme } from '../../test/utils'; + +import { WindowHeader } from './WindowHeader'; + +describe('', () => { + it('renders WindowHeader', () => { + const { container } = renderWithTheme(); + const windowHeader = container.firstChild; + + expect(windowHeader).toBeInTheDocument(); + }); + + it('renders children', () => { + const textContent = 'Hi there!'; + const { getByText } = renderWithTheme( + + {textContent} + + ); + expect(getByText(textContent)).toBeInTheDocument(); + }); + + describe('prop: active', () => { + it('displays active header by default', () => { + const { container } = renderWithTheme(); + const windowHeader = container.firstChild as HTMLDivElement; + + expect(windowHeader).toHaveStyleRule('color', theme.headerText); + expect(windowHeader).toHaveStyleRule( + 'background', + theme.headerBackground + ); + }); + + it('displays active header when set to true', () => { + const { container } = renderWithTheme(); + const windowHeader = container.firstChild as HTMLDivElement; + + expect(windowHeader).toHaveStyleRule('color', theme.headerText); + expect(windowHeader).toHaveStyleRule( + 'background', + theme.headerBackground + ); + }); + + it('renders non-active header when set to false', () => { + const { container } = renderWithTheme(); + const windowHeader = container.firstChild; + + expect(windowHeader).toHaveStyleRule('color', theme.headerNotActiveText); + expect(windowHeader).toHaveStyleRule( + 'background', + theme.headerNotActiveBackground + ); + }); + }); +}); diff --git a/src/WindowHeader/WindowHeader.tsx b/src/WindowHeader/WindowHeader.tsx new file mode 100644 index 00000000..3cac885d --- /dev/null +++ b/src/WindowHeader/WindowHeader.tsx @@ -0,0 +1,49 @@ +import React, { forwardRef } from 'react'; +import styled, { css } from 'styled-components'; +import { StyledButton } from '../Button/Button'; +import { CommonStyledProps } from '../types'; + +type WindowHeaderProps = { + children?: React.ReactNode; + active?: boolean; +} & React.HTMLAttributes & + CommonStyledProps; + +const StyledWindowHeader = styled.div>` + height: 33px; + line-height: 33px; + padding-left: 0.25rem; + padding-right: 3px; + font-weight: bold; + border: 2px solid ${({ theme }) => theme.material}; + ${({ active }) => + active === false + ? css` + background: ${({ theme }) => theme.headerNotActiveBackground}; + color: ${({ theme }) => theme.headerNotActiveText}; + ` + : css` + background: ${({ theme }) => theme.headerBackground}; + color: ${({ theme }) => theme.headerText}; + `} + + ${StyledButton} { + padding-left: 0; + padding-right: 0; + height: 27px; + width: 31px; + } +`; + +// TODO - should we add some aria label indicating if window is currently active? +const WindowHeader = forwardRef( + function WindowHeader({ active = true, children, ...otherProps }, ref) { + return ( + + {children} + + ); + } +); + +export { WindowHeader, WindowHeaderProps }; diff --git a/src/index.ts b/src/index.ts index 5c17c394..d150e164 100644 --- a/src/index.ts +++ b/src/index.ts @@ -38,6 +38,6 @@ export * from './TextField/TextField'; export { default as Toolbar } from './Toolbar/Toolbar'; export * from './Tooltip/Tooltip'; export { default as Tree } from './Tree/Tree'; -export { default as Window } from './Window/Window'; -export { default as WindowContent } from './WindowContent/WindowContent'; -export { default as WindowHeader } from './WindowHeader/WindowHeader'; +export * from './Window/Window'; +export * from './WindowContent/WindowContent'; +export * from './WindowHeader/WindowHeader'; From 895279d3c5b45642311884e9e64168934fd672cd Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Tue, 26 Jul 2022 19:20:38 -0400 Subject: [PATCH 040/100] feat(toolbar): convert to TypeScript and export types --- src/AppBar/AppBar.mdx | 2 +- src/Bar/Bar.mdx | 2 +- src/Button/Button.mdx | 2 +- src/DatePicker/DatePicker.js | 2 +- src/Toolbar/Toolbar.js | 31 ------------------- .../{Toolbar.spec.js => Toolbar.spec.tsx} | 3 +- src/Toolbar/Toolbar.tsx | 27 ++++++++++++++++ src/Window/Window.mdx | 2 +- src/index.ts | 2 +- 9 files changed, 34 insertions(+), 39 deletions(-) delete mode 100644 src/Toolbar/Toolbar.js rename src/Toolbar/{Toolbar.spec.js => Toolbar.spec.tsx} (92%) create mode 100644 src/Toolbar/Toolbar.tsx diff --git a/src/AppBar/AppBar.mdx b/src/AppBar/AppBar.mdx index b9a944ed..85a2325e 100644 --- a/src/AppBar/AppBar.mdx +++ b/src/AppBar/AppBar.mdx @@ -4,7 +4,7 @@ menu: Components --- import { AppBar } from './AppBar'; -import Toolbar from '../Toolbar/Toolbar'; +import { Toolbar } from '../Toolbar/Toolbar'; import { Button } from '../Button/Button'; import { TextField } from '../TextField/TextField'; import List from '../List/List'; diff --git a/src/Bar/Bar.mdx b/src/Bar/Bar.mdx index 5cdcfb9c..d0f2f026 100644 --- a/src/Bar/Bar.mdx +++ b/src/Bar/Bar.mdx @@ -5,7 +5,7 @@ menu: Components import { Bar } from '../Bar/Bar'; import { AppBar } from '../AppBar/AppBar.js'; -import Toolbar from '../Toolbar/Toolbar.js'; +import { Toolbar } from '../Toolbar/Toolbar.js'; import { Button } from '../Button/Button.js'; # Bar diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx index ae3c4a56..ba6c19a2 100644 --- a/src/Button/Button.mdx +++ b/src/Button/Button.mdx @@ -7,7 +7,7 @@ import { Button } from './Button'; import Window from '../Window/Window'; import WindowContent from '../WindowContent/WindowContent'; import { Cutout } from '../Cutout/Cutout'; -import Toolbar from '../Toolbar/Toolbar'; +import { Toolbar } from '../Toolbar/Toolbar'; # Button diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js index 4560872e..2ab53195 100644 --- a/src/DatePicker/DatePicker.js +++ b/src/DatePicker/DatePicker.js @@ -6,7 +6,7 @@ import { Button } from '../Button/Button'; import { Cutout } from '../Cutout/Cutout'; import { NumberField } from '../NumberField/NumberField'; import Select from '../Select/Select'; -import Toolbar from '../Toolbar/Toolbar'; +import { Toolbar } from '../Toolbar/Toolbar'; import Window from '../Window/Window'; import WindowContent from '../WindowContent/WindowContent'; import WindowHeader from '../WindowHeader/WindowHeader'; diff --git a/src/Toolbar/Toolbar.js b/src/Toolbar/Toolbar.js deleted file mode 100644 index b9099f2a..00000000 --- a/src/Toolbar/Toolbar.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import propTypes from 'prop-types'; -import styled from 'styled-components'; - -const StyledToolbar = styled.div` - position: relative; - display: flex; - align-items: center; - padding: ${props => (props.noPadding ? '0' : '4px')}; -`; - -const Toolbar = React.forwardRef(function Toolbar(props, ref) { - const { children, noPadding, ...otherProps } = props; - return ( - - {children} - - ); -}); - -Toolbar.defaultProps = { - children: null, - noPadding: false -}; - -Toolbar.propTypes = { - children: propTypes.node, - noPadding: propTypes.bool -}; - -export default Toolbar; diff --git a/src/Toolbar/Toolbar.spec.js b/src/Toolbar/Toolbar.spec.tsx similarity index 92% rename from src/Toolbar/Toolbar.spec.js rename to src/Toolbar/Toolbar.spec.tsx index 2bc2f68d..8d45e371 100644 --- a/src/Toolbar/Toolbar.spec.js +++ b/src/Toolbar/Toolbar.spec.tsx @@ -1,7 +1,6 @@ -import React from 'react'; import { render } from '@testing-library/react'; -import Toolbar from './Toolbar'; +import { Toolbar } from './Toolbar'; describe('', () => { it('should render', () => { diff --git a/src/Toolbar/Toolbar.tsx b/src/Toolbar/Toolbar.tsx new file mode 100644 index 00000000..1991bafe --- /dev/null +++ b/src/Toolbar/Toolbar.tsx @@ -0,0 +1,27 @@ +import React, { forwardRef } from 'react'; +import styled from 'styled-components'; + +type ToolbarProps = { + children?: React.ReactNode; + noPadding?: boolean; +} & React.HTMLAttributes; + +const StyledToolbar = styled.div` + position: relative; + display: flex; + align-items: center; + padding: ${props => (props.noPadding ? '0' : '4px')}; +`; + +const Toolbar = forwardRef(function Toolbar( + { children, noPadding = false, ...otherProps }, + ref +) { + return ( + + {children} + + ); +}); + +export { Toolbar }; diff --git a/src/Window/Window.mdx b/src/Window/Window.mdx index 740f6e01..70c88c0c 100644 --- a/src/Window/Window.mdx +++ b/src/Window/Window.mdx @@ -7,7 +7,7 @@ import Window from './Window'; import WindowContent from '../WindowContent/WindowContent'; import WindowHeader from '../WindowHeader/WindowHeader'; import { Button } from '../Button/Button'; -import Toolbar from '../Toolbar/Toolbar'; +import { Toolbar } from '../Toolbar/Toolbar'; # Window diff --git a/src/index.ts b/src/index.ts index d150e164..11dffeaf 100644 --- a/src/index.ts +++ b/src/index.ts @@ -35,7 +35,7 @@ export * from './TableHeadCell/TableHeadCell'; export * from './TableRow/TableRow'; export * from './Tabs/Tabs'; export * from './TextField/TextField'; -export { default as Toolbar } from './Toolbar/Toolbar'; +export * from './Toolbar/Toolbar'; export * from './Tooltip/Tooltip'; export { default as Tree } from './Tree/Tree'; export * from './Window/Window'; From a96f8016fcf79f07291c3e3c8d39b2a37c30aa41 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Wed, 27 Jul 2022 11:04:07 -0400 Subject: [PATCH 041/100] feat(fieldset): convert to TypeScript and export types --- .../{Fieldset.spec.js => Fieldset.spec.tsx} | 14 ++--- ...eldset.stories.js => Fieldset.stories.tsx} | 8 +-- src/Fieldset/{Fieldset.js => Fieldset.tsx} | 57 ++++++++++++------- src/index.ts | 2 +- 4 files changed, 47 insertions(+), 34 deletions(-) rename src/Fieldset/{Fieldset.spec.js => Fieldset.spec.tsx} (79%) rename src/Fieldset/{Fieldset.stories.js => Fieldset.stories.tsx} (94%) rename src/Fieldset/{Fieldset.js => Fieldset.tsx} (50%) diff --git a/src/Fieldset/Fieldset.spec.js b/src/Fieldset/Fieldset.spec.tsx similarity index 79% rename from src/Fieldset/Fieldset.spec.js rename to src/Fieldset/Fieldset.spec.tsx index c8ff087d..76c84274 100644 --- a/src/Fieldset/Fieldset.spec.js +++ b/src/Fieldset/Fieldset.spec.tsx @@ -1,13 +1,11 @@ -import React from 'react'; - import { renderWithTheme, theme } from '../../test/utils'; -import Fieldset from './Fieldset'; +import { Fieldset } from './Fieldset'; describe('
', () => { it('renders Fieldset', () => { const { container } = renderWithTheme(
); - const fieldset = container.firstChild; + const fieldset = container.firstChild as HTMLFieldSetElement; expect(fieldset).toBeInTheDocument(); }); @@ -25,13 +23,13 @@ describe('
', () => { it('renders Label', () => { const labelText = 'Name:'; const { container } = renderWithTheme(
); - const fieldset = container.firstChild; + const fieldset = container.firstChild as HTMLFieldSetElement; const legend = fieldset.querySelector('legend'); - expect(legend.textContent).toBe(labelText); + expect(legend?.textContent).toBe(labelText); }); it('when not provided, element is not rendered', () => { const { container } = renderWithTheme(
); - const fieldset = container.firstChild; + const fieldset = container.firstChild as HTMLFieldSetElement; const legend = fieldset.querySelector('legend'); expect(legend).not.toBeInTheDocument(); }); @@ -39,7 +37,7 @@ describe('
', () => { describe('prop: disabled', () => { it('renders with disabled text content', () => { const { container } = renderWithTheme(
); - const fieldset = container.firstChild; + const fieldset = container.firstChild as HTMLFieldSetElement; expect(fieldset).toHaveAttribute('aria-disabled', 'true'); diff --git a/src/Fieldset/Fieldset.stories.js b/src/Fieldset/Fieldset.stories.tsx similarity index 94% rename from src/Fieldset/Fieldset.stories.js rename to src/Fieldset/Fieldset.stories.tsx index 1b6b1333..70d208ee 100644 --- a/src/Fieldset/Fieldset.stories.js +++ b/src/Fieldset/Fieldset.stories.tsx @@ -1,7 +1,7 @@ -import React, { useState } from 'react'; -import styled from 'styled-components'; - +import { ComponentMeta } from '@storybook/react'; +import { useState } from 'react'; import { Checkbox, Cutout, Fieldset, Window, WindowContent } from 'react95'; +import styled from 'styled-components'; const Wrapper = styled.div` padding: 5rem; @@ -12,7 +12,7 @@ export default { title: 'Fieldset', component: Fieldset, decorators: [story => {story()}] -}; +} as ComponentMeta; export function Default() { return ( diff --git a/src/Fieldset/Fieldset.js b/src/Fieldset/Fieldset.tsx similarity index 50% rename from src/Fieldset/Fieldset.js rename to src/Fieldset/Fieldset.tsx index dd11b078..3c3255d6 100644 --- a/src/Fieldset/Fieldset.js +++ b/src/Fieldset/Fieldset.tsx @@ -1,10 +1,20 @@ -import React from 'react'; import propTypes from 'prop-types'; - +import React, { forwardRef } from 'react'; import styled, { css } from 'styled-components'; import { createDisabledTextStyles } from '../common'; +import { CommonStyledProps } from '../types'; + +type FieldsetProps = { + label?: React.ReactNode; + children?: React.ReactNode; + disabled?: boolean; + variant?: 'default' | 'flat'; +} & React.FieldsetHTMLAttributes & + CommonStyledProps; -const StyledFieldset = styled.fieldset` +const StyledFieldset = styled.fieldset< + Pick & { $disabled: boolean } +>` position: relative; border: 2px solid ${({ theme, variant }) => @@ -19,9 +29,10 @@ const StyledFieldset = styled.fieldset` box-shadow: -1px -1px 0 1px ${({ theme }) => theme.borderDark}, inset -1px -1px 0 1px ${({ theme }) => theme.borderDark}; `} - ${props => props.isDisabled && createDisabledTextStyles()} + ${props => props.$disabled && createDisabledTextStyles()} `; -const StyledLegend = styled.legend` + +const StyledLegend = styled.legend>` display: flex; position: absolute; top: 0; @@ -34,21 +45,25 @@ const StyledLegend = styled.legend` variant === 'flat' ? theme.canvas : theme.material}; `; -const Fieldset = React.forwardRef(function Fieldset(props, ref) { - const { label, disabled, variant, children, ...otherProps } = props; - return ( - - {label && {label}} - {children} - - ); -}); +const Fieldset = forwardRef( + function Fieldset( + { label, disabled = false, variant = 'default', children, ...otherProps }, + ref + ) { + return ( + + {label && {label}} + {children} + + ); + } +); Fieldset.defaultProps = { disabled: false, @@ -64,4 +79,4 @@ Fieldset.propTypes = { variant: propTypes.oneOf(['default', 'flat']) }; -export default Fieldset; +export { Fieldset, FieldsetProps }; diff --git a/src/index.ts b/src/index.ts index 11dffeaf..a64d190f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -14,7 +14,7 @@ export * from './Counter/Counter'; export * from './Cutout/Cutout'; export * from './Desktop/Desktop'; export * from './Divider/Divider'; -export { default as Fieldset } from './Fieldset/Fieldset'; +export * from './Fieldset/Fieldset'; export * from './Hourglass/Hourglass'; export * from './List/List'; export * from './ListItem/ListItem'; From cfa6f6e82266a8cfa5382152ff66e4841e7ed973 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Wed, 27 Jul 2022 08:10:38 -0400 Subject: [PATCH 042/100] feat(tree): convert to TypeScript and export types --- src/Tree/Tree.js | 337 --------------- src/Tree/{Tree.spec.js => Tree.spec.tsx} | 19 +- .../{Tree.stories.js => Tree.stories.tsx} | 29 +- src/Tree/Tree.tsx | 389 ++++++++++++++++++ src/index.ts | 2 +- 5 files changed, 416 insertions(+), 360 deletions(-) delete mode 100644 src/Tree/Tree.js rename src/Tree/{Tree.spec.js => Tree.spec.tsx} (89%) rename src/Tree/{Tree.stories.js => Tree.stories.tsx} (84%) create mode 100644 src/Tree/Tree.tsx diff --git a/src/Tree/Tree.js b/src/Tree/Tree.js deleted file mode 100644 index 52d94289..00000000 --- a/src/Tree/Tree.js +++ /dev/null @@ -1,337 +0,0 @@ -import React from 'react'; -import propTypes from 'prop-types'; -import styled, { css } from 'styled-components'; - -import { StyledLabel, LabelText } from '../SwitchBase/SwitchBase'; -import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled'; - -const Text = styled(LabelText)` - white-space: nowrap; -`; - -const focusedElementStyles = css` - :focus { - outline: none; - } - - &:not([disabled]) { - cursor: pointer; - - :focus { - ${Text} { - background: ${({ theme }) => theme.hoverBackground}; - color: ${({ theme }) => theme.materialTextInvert}; - outline: 2px dotted ${({ theme }) => theme.focusSecondary}; - } - } - } -`; - -const TreeView = styled.ul` - position: relative; - isolation: isolate; - - ${({ isRootLevel }) => - isRootLevel && - css` - &:before { - content: ''; - position: absolute; - top: 20px; - bottom: 0; - left: 5.5px; - width: 1px; - border-left: 2px dashed ${({ theme }) => theme.borderDark}; - } - `} - - ul { - padding-left: 19.5px; - } - - li { - position: relative; - - &:before { - content: ''; - position: absolute; - top: 17.5px; - left: 5.5px; - width: 22px; - border-top: 2px dashed ${({ theme }) => theme.borderDark}; - font-size: 12px; - } - } -`; - -const TreeItem = styled.li` - position: relative; - padding-left: ${({ hasItems }) => (!hasItems ? '13px' : '0')}; - - ${({ isRootLevel }) => - !isRootLevel - ? css` - &:last-child { - &:after { - content: ''; - position: absolute; - z-index: 1; - top: 19.5px; - bottom: 0; - left: 1.5px; - width: 10px; - background: ${({ theme }) => theme.material}; - } - } - ` - : css` - &:last-child { - &:after { - content: ''; - position: absolute; - top: 19.5px; - left: 1px; - bottom: 0; - width: 10px; - background: ${({ theme }) => theme.material}; - } - } - `} - - & > details > ul { - &:after { - content: ''; - position: absolute; - top: -18px; - bottom: 0; - left: 25px; - border-left: 2px dashed ${({ theme }) => theme.borderDark}; - } - } -`; - -const Details = styled.details` - position: relative; - z-index: 2; - - &[open] > summary:before { - content: '-'; - } -`; - -const Summary = styled.summary` - position: relative; - z-index: 1; - display: inline-flex; - align-items: center; - color: ${({ theme }) => theme.materialText}; - user-select: none; - padding-left: 18px; - ${focusedElementStyles}; - - &::-webkit-details-marker { - display: none; - } - - &:before { - content: '+'; - position: absolute; - left: 0; - display: block; - width: 8px; - height: 9px; - border: 2px solid #808080; - padding-left: 1px; - background-color: #fff; - line-height: 8px; - text-align: center; - } -`; - -const TitleWithIcon = styled(StyledLabel)` - position: relative; - z-index: 1; - background: none; - border: 0; - font-family: inherit; - padding-top: 8px; - padding-bottom: 8px; - margin: 0; - ${focusedElementStyles}; -`; - -const Icon = styled.span` - display: flex; - align-items: center; - justify-content: center; - width: 16px; - height: 16px; - margin-right: 6px; -`; - -function toggleItem(state, id) { - return state.includes(id) - ? state.filter(item => item !== id) - : [...state, id]; -} - -const Tree = React.forwardRef(function Tree( - { - disabled, - className, - style, - tree, - defaultSelected, - defaultExpanded, - selected, - expanded, - onNodeSelect, - onNodeToggle - }, - ref -) { - const [expandedInternal, setExpandedInternal] = useControlledOrUncontrolled({ - value: expanded, - defaultValue: defaultExpanded - }); - - const [selectedInternal, setSelectedInternal] = useControlledOrUncontrolled({ - value: selected, - defaultValue: defaultSelected - }); - - function toggleMenu(event, id) { - if (onNodeToggle) { - const newState = toggleItem(expandedInternal, id); - onNodeToggle(event, newState); - } - - setExpandedInternal(previouslyExpandedIds => - toggleItem(previouslyExpandedIds, id) - ); - } - - function select(event, id) { - setSelectedInternal(id); - - if (onNodeSelect) { - onNodeSelect(event, id); - } - } - - function handleLeafClick(event, id) { - event.preventDefault(); - select(event, id); - } - - function handleSummaryClick(event, id) { - event.preventDefault(); - select(event, id); - toggleMenu(event, id); - } - - function renderTree(items, level = 0) { - const isRootLevel = level === 0; - - return ( - - {items.map(item => { - const hasItems = item.items && item.items.length > 0; - const isMenuShown = expandedInternal.includes(item.id); - const isNodeDisabled = disabled || item.disabled; - const onClickSummary = !isNodeDisabled - ? event => handleSummaryClick(event, item.id) - : undefined; - const onClickLeaf = !isNodeDisabled - ? event => handleLeafClick(event, item.id) - : undefined; - const isSelected = selectedInternal === item.id; - const icon = {item.icon}; - - return ( - - {!hasItems ? ( - - {icon} - {item.label} - - ) : ( -
- - - {icon} - {item.label} - - - - {isMenuShown && renderTree(item.items, level + 1)} -
- )} - - ); - })} - - ); - } - - return renderTree(tree); -}); - -Tree.defaultProps = { - disabled: false, - style: {}, - className: '', - tree: [], - defaultSelected: undefined, - defaultExpanded: [], - selected: undefined, - expanded: undefined, - onNodeToggle: undefined, - onNodeSelect: undefined -}; - -const idType = propTypes.oneOfType([propTypes.string, propTypes.number]); - -const treeDataShape = { - id: idType.isRequired, - label: propTypes.string.isRequired, - icon: propTypes.object.isRequired, - disabled: propTypes.bool -}; - -treeDataShape.items = propTypes.arrayOf(propTypes.shape(treeDataShape)); - -Tree.propTypes = { - // TODO: Figure out how to make react/no-unused-prop-types happy with this component - /* eslint-disable react/no-unused-prop-types */ - style: propTypes.object, - className: propTypes.string, - tree: propTypes.arrayOf(propTypes.shape(treeDataShape)), - defaultSelected: idType, - defaultExpanded: propTypes.arrayOf(idType), - selected: idType, - expanded: propTypes.arrayOf(idType), - onNodeSelect: propTypes.func, - onNodeToggle: propTypes.func, - disabled: propTypes.bool - /* eslint-enable react/no-unused-prop-types */ -}; - -export default Tree; diff --git a/src/Tree/Tree.spec.js b/src/Tree/Tree.spec.tsx similarity index 89% rename from src/Tree/Tree.spec.js rename to src/Tree/Tree.spec.tsx index df31ec9c..262e5825 100644 --- a/src/Tree/Tree.spec.js +++ b/src/Tree/Tree.spec.tsx @@ -1,6 +1,5 @@ -import React from 'react'; import { renderWithTheme } from '../../test/utils'; -import Tree from './Tree'; +import { Tree } from './Tree'; const categories = [ { @@ -61,7 +60,7 @@ const categories = [ describe('', () => { describe('prop: onNodeSelect', () => { it('should call onNodeSelect when uncontrolled', () => { - const onNodeSelect = jest.fn((event, id) => id); + const onNodeSelect = jest.fn((_, id) => id); const { getByText } = renderWithTheme( @@ -74,7 +73,7 @@ describe('', () => { }); it('should call onNodeSelect when controlled', () => { - const onNodeSelect = jest.fn((event, id) => id); + const onNodeSelect = jest.fn((_, id) => id); const { getByText } = renderWithTheme( @@ -89,7 +88,7 @@ describe('', () => { describe('prop: onNodeToggle', () => { it('should call onNodeToggle when uncontrolled', () => { - const onNodeToggle = jest.fn((event, ids) => ids); + const onNodeToggle = jest.fn((_, ids) => ids); const { getByText } = renderWithTheme( @@ -102,7 +101,7 @@ describe('', () => { }); it('should call onNodeToggle when controlled', () => { - const onNodeToggle = jest.fn((event, ids) => ids); + const onNodeToggle = jest.fn((_, ids) => ids); const { getByText } = renderWithTheme( ', () => { describe('prop: disabled', () => { it('should disable the whole tree', () => { - const onNodeSelect = jest.fn((event, id) => id); - const onNodeToggle = jest.fn((event, ids) => ids); + const onNodeSelect = jest.fn((_, id) => id); + const onNodeToggle = jest.fn((_, ids) => ids); const { getByText } = renderWithTheme( ', () => { }); it('should disable a tree item', () => { - const onNodeSelect = jest.fn((event, id) => id); - const onNodeToggle = jest.fn((event, ids) => ids); + const onNodeSelect = jest.fn((_, id) => id); + const onNodeToggle = jest.fn((_, ids) => ids); const modifiedTree = categories.map((item, index) => index !== 0 ? item : { ...item, disabled: true } ); diff --git a/src/Tree/Tree.stories.js b/src/Tree/Tree.stories.tsx similarity index 84% rename from src/Tree/Tree.stories.js rename to src/Tree/Tree.stories.tsx index 32561e72..5d9781c0 100644 --- a/src/Tree/Tree.stories.js +++ b/src/Tree/Tree.stories.tsx @@ -1,7 +1,7 @@ -import React, { useState, useCallback } from 'react'; +import { ComponentMeta } from '@storybook/react'; +import { useCallback, useState } from 'react'; +import { Fieldset, Tree, TreeLeaf } from 'react95'; import styled from 'styled-components'; - -import { Tree, Fieldset } from 'react95'; import { Button } from '../Button/Button'; const Wrapper = styled.div` @@ -26,7 +26,7 @@ export default { title: 'Tree', component: Tree, decorators: [story => {story()}] -}; +} as ComponentMeta; const categories = [ { @@ -84,9 +84,9 @@ const categories = [ } ]; -const allIds = []; +const allIds: string[] = []; -function getIds(item) { +function getIds(item: TreeLeaf) { allIds.push(item.id); // eslint-disable-next-line no-unused-expressions item.items?.forEach(getIds); @@ -114,7 +114,7 @@ export function Controlled() { const handleExpandClick = useCallback(() => { setExpanded(oldExpanded => (oldExpanded.length === 0 ? allIds : [])); - }); + }, []); return (
@@ -127,8 +127,8 @@ export function Controlled() {
setSelected(id)} - onNodeToggle={(event, ids) => setExpanded(ids)} + onNodeSelect={(_, id) => setSelected(id)} + onNodeToggle={(_, ids) => setExpanded(ids)} expanded={expanded} selected={selected} /> @@ -156,9 +156,14 @@ Disabled.story = { }; export function DisabledTreeItems() { - const modifiedTree = categories.map((item, index) => - index !== 1 ? item : { ...item, disabled: true } - ); + function disableSecondItem(items: TreeLeaf[]): TreeLeaf[] { + return items.map((item, index) => ({ + ...item, + items: item.items ? disableSecondItem(item.items) : undefined, + disabled: index === 1 + })); + } + const modifiedTree = disableSecondItem(categories); return (
diff --git a/src/Tree/Tree.tsx b/src/Tree/Tree.tsx new file mode 100644 index 00000000..2b321c5b --- /dev/null +++ b/src/Tree/Tree.tsx @@ -0,0 +1,389 @@ +import React, { forwardRef, useCallback } from 'react'; +import styled, { css } from 'styled-components'; + +import { StyledLabel, LabelText } from '../SwitchBase/SwitchBase'; +import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled'; +import { CommonStyledProps } from '../types'; + +type TreeLeaf = { + disabled?: boolean; + icon?: React.ReactNode; + id: T; + items?: TreeLeaf[]; + label?: string; +}; + +type TreeProps = { + className?: string; + defaultExpanded?: T[]; + defaultSelected?: T; + disabled?: boolean; + expanded?: T[]; + onNodeSelect?: (event: React.MouseEvent, id: T) => void; + onNodeToggle?: ( + event: React.MouseEvent, + expandedIds: T[] + ) => void; + selected?: T; + style?: React.CSSProperties; + tree: TreeLeaf[]; +} & CommonStyledProps; + +type TreeBranchProps = { + className: string | undefined; + disabled: boolean; + expanded: T[]; + innerRef?: React.Ref; + level: number; + select: (event: React.MouseEvent, item: TreeLeaf) => void; + selected: T | undefined; + style: React.CSSProperties | undefined; + tree: TreeLeaf[]; +} & CommonStyledProps; + +const Text = styled(LabelText)` + white-space: nowrap; +`; + +const focusedElementStyles = css<{ $disabled: boolean }>` + :focus { + outline: none; + } + + ${({ $disabled }) => + !$disabled + ? css` + cursor: pointer; + + :focus { + ${Text} { + background: ${({ theme }) => theme.hoverBackground}; + color: ${({ theme }) => theme.materialTextInvert}; + outline: 2px dotted ${({ theme }) => theme.focusSecondary}; + } + } + ` + : `cursor: default;`} +`; + +const TreeView = styled.ul<{ isRootLevel: boolean }>` + position: relative; + isolation: isolate; + + ${({ isRootLevel }) => + isRootLevel && + css` + &:before { + content: ''; + position: absolute; + top: 20px; + bottom: 0; + left: 5.5px; + width: 1px; + border-left: 2px dashed ${({ theme }) => theme.borderDark}; + } + `} + + ul { + padding-left: 19.5px; + } + + li { + position: relative; + + &:before { + content: ''; + position: absolute; + top: 17.5px; + left: 5.5px; + width: 22px; + border-top: 2px dashed ${({ theme }) => theme.borderDark}; + font-size: 12px; + } + } +`; + +const TreeItem = styled.li<{ hasItems: boolean; isRootLevel: boolean }>` + position: relative; + padding-left: ${({ hasItems }) => (!hasItems ? '13px' : '0')}; + + ${({ isRootLevel }) => + !isRootLevel + ? css` + &:last-child { + &:after { + content: ''; + position: absolute; + z-index: 1; + top: 19.5px; + bottom: 0; + left: 1.5px; + width: 10px; + background: ${({ theme }) => theme.material}; + } + } + ` + : css` + &:last-child { + &:after { + content: ''; + position: absolute; + top: 19.5px; + left: 1px; + bottom: 0; + width: 10px; + background: ${({ theme }) => theme.material}; + } + } + `} + + & > details > ul { + &:after { + content: ''; + position: absolute; + top: -18px; + bottom: 0; + left: 25px; + border-left: 2px dashed ${({ theme }) => theme.borderDark}; + } + } +`; + +const Details = styled.details` + position: relative; + z-index: 2; + + &[open] > summary:before { + content: '-'; + } +`; + +const Summary = styled.summary` + position: relative; + z-index: 1; + display: inline-flex; + align-items: center; + color: ${({ theme }) => theme.materialText}; + user-select: none; + padding-left: 18px; + ${focusedElementStyles}; + + &::-webkit-details-marker { + display: none; + } + + &:before { + content: '+'; + position: absolute; + left: 0; + display: block; + width: 8px; + height: 9px; + border: 2px solid #808080; + padding-left: 1px; + background-color: #fff; + line-height: 8px; + text-align: center; + } +`; + +const TitleWithIcon = styled(StyledLabel)` + position: relative; + z-index: 1; + background: none; + border: 0; + font-family: inherit; + padding-top: 8px; + padding-bottom: 8px; + margin: 0; + ${focusedElementStyles}; +`; + +const Icon = styled.span` + display: flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + margin-right: 6px; +`; + +function toggleItem(state: T[], id: T) { + return state.includes(id) + ? state.filter(item => item !== id) + : [...state, id]; +} + +function preventDefault(event: React.SyntheticEvent) { + event.preventDefault(); +} + +function TreeBranch({ + className, + disabled, + expanded, + innerRef, + level, + select, + selected, + style, + tree = [] +}: TreeBranchProps) { + const isRootLevel = level === 0; + + const renderLeaf = useCallback( + (item: TreeLeaf) => { + const hasItems = Boolean(item.items && item.items.length > 0); + const isMenuShown = expanded.includes(item.id); + const isNodeDisabled = (disabled || item.disabled) ?? false; + const onClickSummary = !isNodeDisabled + ? (event: React.MouseEvent) => select(event, item) + : preventDefault; + const onClickLeaf = !isNodeDisabled + ? (event: React.MouseEvent) => select(event, item) + : preventDefault; + const isSelected = selected === item.id; + const icon = {item.icon}; + + return ( + + {!hasItems ? ( + + {icon} + {item.label} + + ) : ( +
+ + + {icon} + {item.label} + + + + {isMenuShown && ( + + )} +
+ )} + + ); + }, + [className, disabled, expanded, isRootLevel, level, select, selected, style] + ); + + return ( + + {tree.map(renderLeaf)} + + ); +} + +function TreeInner( + { + className, + defaultExpanded = [], + defaultSelected, + disabled = false, + expanded, + onNodeSelect, + onNodeToggle, + selected, + style, + tree = [] + }: TreeProps, + ref: React.ForwardedRef +) { + const [expandedInternal, setExpandedInternal] = useControlledOrUncontrolled({ + value: expanded, + defaultValue: defaultExpanded + }); + + const [selectedInternal, setSelectedInternal] = useControlledOrUncontrolled({ + value: selected, + defaultValue: defaultSelected + }); + + const toggleMenu = useCallback( + (event: React.MouseEvent, id: T) => { + if (onNodeToggle) { + const newState = toggleItem(expandedInternal, id); + onNodeToggle(event, newState); + } + + setExpandedInternal(previouslyExpandedIds => + toggleItem(previouslyExpandedIds, id) + ); + }, + [expandedInternal, onNodeToggle, setExpandedInternal] + ); + + const select = useCallback( + (event: React.MouseEvent, id: T) => { + setSelectedInternal(id); + + if (onNodeSelect) { + onNodeSelect(event, id); + } + }, + [onNodeSelect, setSelectedInternal] + ); + + const handleSelect = useCallback( + (event: React.MouseEvent, item: TreeLeaf) => { + event.preventDefault(); + select(event, item.id); + if (item.items && item.items.length) { + toggleMenu(event, item.id); + } + }, + [select, toggleMenu] + ); + + return ( + + ); +} + +const Tree = forwardRef(TreeInner) as ( + // eslint-disable-next-line no-use-before-define + props: TreeProps & { ref?: React.ForwardedRef } +) => ReturnType; + +export { Tree, TreeLeaf, TreeProps }; diff --git a/src/index.ts b/src/index.ts index a64d190f..cacfee34 100644 --- a/src/index.ts +++ b/src/index.ts @@ -37,7 +37,7 @@ export * from './Tabs/Tabs'; export * from './TextField/TextField'; export * from './Toolbar/Toolbar'; export * from './Tooltip/Tooltip'; -export { default as Tree } from './Tree/Tree'; +export * from './Tree/Tree'; export * from './Window/Window'; export * from './WindowContent/WindowContent'; export * from './WindowHeader/WindowHeader'; From 7cef5d91e1fc38d70c1bfc252fe1689957323c39 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Wed, 27 Jul 2022 12:56:57 -0400 Subject: [PATCH 043/100] fix(types): fix multiple TypeScript issues Including: - Omitting default React props that we are redefining - Making Select value type generic - Etc. --- src/Button/Button.stories.tsx | 1 - src/Button/Button.tsx | 5 ++- src/Checkbox/Checkbox.tsx | 13 ++++++- src/Fieldset/Fieldset.stories.tsx | 1 - src/List/List.stories.tsx | 9 ++++- src/ListItem/ListItem.tsx | 12 +++---- src/Radio/Radio.stories.tsx | 14 +++++--- src/Radio/Radio.tsx | 5 ++- src/Select/Select.spec.tsx | 12 +++---- src/Select/Select.stories.tsx | 6 ++-- src/Select/Select.tsx | 60 +++++++++++++++++-------------- src/Select/Select.types.ts | 10 +++--- src/Tabs/Tabs.stories.tsx | 2 +- 13 files changed, 91 insertions(+), 59 deletions(-) diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 12792fe3..97980a13 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -106,7 +106,6 @@ export function Menu() { top: '100%', zIndex: '9999' }} - open={open} onClick={() => setOpen(false)} > Copy link diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx index 552f113f..e74a2547 100644 --- a/src/Button/Button.tsx +++ b/src/Button/Button.tsx @@ -25,7 +25,10 @@ type ButtonProps = { square?: boolean; type?: string; variant?: 'default' | 'menu' | 'flat'; -} & React.ButtonHTMLAttributes & +} & Omit< + React.ButtonHTMLAttributes, + 'disabled' | 'onClick' | 'onTouchStart' | 'type' +> & CommonStyledProps; type StyledButtonProps = Pick< diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx index 4e37d4d1..7cd47f4e 100644 --- a/src/Checkbox/Checkbox.tsx +++ b/src/Checkbox/Checkbox.tsx @@ -26,7 +26,18 @@ type CheckboxProps = { style?: React.CSSProperties; value?: number | string; variant?: 'default' | 'flat' | 'menu'; -} & React.InputHTMLAttributes; +} & Omit< + React.InputHTMLAttributes, + | 'checked' + | 'className' + | 'defaultChecked' + | 'disabled' + | 'label' + | 'name' + | 'onChange' + | 'style' + | 'value' +>; type CheckmarkProps = { $disabled: boolean; diff --git a/src/Fieldset/Fieldset.stories.tsx b/src/Fieldset/Fieldset.stories.tsx index 70d208ee..93d3e9fc 100644 --- a/src/Fieldset/Fieldset.stories.tsx +++ b/src/Fieldset/Fieldset.stories.tsx @@ -82,7 +82,6 @@ export function ToggleExample() { style={{ margin: 0 }} label='Enable' checked={!state} - value={!state} onChange={() => setState(!state)} /> } diff --git a/src/List/List.stories.tsx b/src/List/List.stories.tsx index 52074277..547cebd6 100644 --- a/src/List/List.stories.tsx +++ b/src/List/List.stories.tsx @@ -25,7 +25,14 @@ export function Default() { <> Photos - + Link Other diff --git a/src/ListItem/ListItem.tsx b/src/ListItem/ListItem.tsx index 675e4223..31c47890 100644 --- a/src/ListItem/ListItem.tsx +++ b/src/ListItem/ListItem.tsx @@ -14,7 +14,7 @@ type ListItemProps = { CommonStyledProps; export const StyledListItem = styled.li<{ - disabled?: boolean; + $disabled?: boolean; square?: boolean; primary?: boolean; size: Sizes; @@ -34,11 +34,11 @@ export const StyledListItem = styled.li<{ text-align: center; line-height: ${props => blockSizes[props.size]}; color: ${({ theme }) => theme.materialText}; - pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')}; + pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')}; font-weight: ${({ primary }) => (primary ? 'bold' : 'normal')}; &:hover { - ${({ theme, disabled }) => - !disabled && + ${({ theme, $disabled }) => + !$disabled && ` color: ${theme.materialTextInvert}; background: ${theme.hoverBackground}; @@ -46,7 +46,7 @@ export const StyledListItem = styled.li<{ cursor: default; } - ${props => props.disabled && createDisabledTextStyles()} + ${props => props.$disabled && createDisabledTextStyles()} `; const ListItem = forwardRef(function ListItem( @@ -69,8 +69,8 @@ const ListItem = forwardRef(function ListItem( return ( setState(e.target.value); + const handleChange = (e: React.ChangeEvent) => + setState(e.target.value); return ( @@ -83,7 +84,8 @@ Default.story = { export function Flat() { const [state, setState] = useState('Pear'); - const handleChange = e => setState(e.target.value); + const handleChange = (e: React.ChangeEvent) => + setState(e.target.value); return ( @@ -147,8 +149,10 @@ export function Menu() { tool: 'Brush', color: 'Black' }); - const handleToolChange = e => setState({ ...state, tool: e.target.value }); - const handleColorChange = e => setState({ ...state, color: e.target.value }); + const handleToolChange = (e: React.ChangeEvent) => + setState({ ...state, tool: e.target.value }); + const handleColorChange = (e: React.ChangeEvent) => + setState({ ...state, color: e.target.value }); const { tool, color } = state; diff --git a/src/Radio/Radio.tsx b/src/Radio/Radio.tsx index a15ae428..b1bee405 100644 --- a/src/Radio/Radio.tsx +++ b/src/Radio/Radio.tsx @@ -24,7 +24,10 @@ type RadioProps = { style?: CSSProperties; value?: string | number | boolean; variant?: RadioVariant; -} & React.InputHTMLAttributes & +} & Omit< + React.InputHTMLAttributes, + 'checked' | 'className' | 'disabled' | 'name' | 'onChange' | 'style' | 'value' +> & CommonStyledProps; const sharedCheckboxStyles = css` diff --git a/src/Select/Select.spec.tsx b/src/Select/Select.spec.tsx index e6b5058d..6a77559c 100644 --- a/src/Select/Select.spec.tsx +++ b/src/Select/Select.spec.tsx @@ -6,7 +6,7 @@ import { renderWithTheme } from '../../test/utils'; import { Select } from './Select'; import { SelectOption, SelectRef } from './Select.types'; -const options: SelectOption[] = [ +const options: SelectOption[] = [ { label: 'ten', value: 10 }, { label: 'twenty', value: 20 }, { label: 'thirty', value: 30 } @@ -65,7 +65,7 @@ describe('', () => { it('should get selected option from arguments', () => { const onChange = jest.fn(); const { getAllByRole, getByRole } = renderWithTheme( - ); fireEvent.mouseDown(getByRole('button')); getAllByRole('option')[1].click(); @@ -331,7 +331,7 @@ describe(' + ', () => { const { getByRole } = renderWithTheme( ', () => { describe('prop: renderValue', () => { it('should use the prop to render the value', () => { - const formatDisplay = (x: SelectOption) => + const formatDisplay = (x: SelectOption) => `0b${Number(x.value).toString(2)}`; const { getByRole } = renderWithTheme( ) => - `${opt.label.toUpperCase()} 👍 👍` - } + formatDisplay={opt => `${opt.label.toUpperCase()} 👍 👍`} onChange={onChange} options={options} width={220} diff --git a/src/Select/Select.tsx b/src/Select/Select.tsx index 7f20e388..16a0b65d 100644 --- a/src/Select/Select.tsx +++ b/src/Select/Select.tsx @@ -55,14 +55,13 @@ type SelectNativeProps = { native: true; } & Omit, OmittedNativeProps>; -type SelectProps = { +type SelectProps = { 'aria-label'?: string; className?: string; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - defaultValue?: any; + defaultValue?: T; disabled?: boolean; - formatDisplay?: SelectFormatDisplayCallback; - inputRef?: React.RefObject; + formatDisplay?: SelectFormatDisplayCallback; + inputRef?: React.RefObject | null; menuMaxHeight?: string | number; name?: string; /** @@ -70,20 +69,19 @@ type SelectProps = { */ native?: boolean; onBlur?: React.FocusEventHandler; - onChange?: (event: SelectChangeEvent, option: SelectOption) => void; + onChange?: (event: SelectChangeEvent, option: SelectOption) => void; onClose?: (event: AnyEvent) => void; onFocus?: React.FocusEventHandler; onOpen?: (event: AnyEvent) => void; labelId?: string; open?: boolean; - options?: (SelectOption | null)[]; + options?: (SelectOption | null)[]; readOnly?: boolean; // eslint-disable-next-line @typescript-eslint/no-explicit-any SelectDisplayProps?: Record; shadow?: boolean; style?: React.CSSProperties; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - value?: any; + value?: T | string; variant?: SelectVariants; width?: string | number; } & (SelectCustomProps | SelectNativeProps) & @@ -100,7 +98,7 @@ const KEYS = { TAB: 'Tab' }; -function areEqualValues(a: unknown, b: unknown) { +function areEqualValues(a: T, b: T) { if (typeof b === 'object' && b !== null) { return a === b; } @@ -110,9 +108,9 @@ function areEqualValues(a: unknown, b: unknown) { const getWrapper = (variant: SelectVariants) => variant === 'flat' ? StyledFlatSelectWrapper : StyledSelectWrapper; -const getDisplayLabel = ( - selectedOption: SelectOption | undefined, - formatDisplay: SelectFormatDisplayCallback | undefined +const getDisplayLabel = ( + selectedOption: SelectOption | undefined, + formatDisplay: SelectFormatDisplayCallback | undefined ) => { if (!selectedOption) { return ''; @@ -124,7 +122,7 @@ const getDisplayLabel = ( }; // eslint-disable-next-line @typescript-eslint/no-explicit-any -const getDefaultValue = (defaultValue: any, options: SelectOption[]) => { +const getDefaultValue = (defaultValue: any, options: SelectOption[]) => { if (defaultValue) { return defaultValue; } @@ -141,7 +139,7 @@ const getFocusedNodeIndex = (dropdownElement: HTMLUListElement) => ) : -1; -const getOptionWithValue = (value: unknown, options: SelectOption[]) => { +const getOptionWithValue = (value: T, options: SelectOption[]) => { const isValueString = typeof value === 'string'; return options.find( option => @@ -152,7 +150,7 @@ const getOptionWithValue = (value: unknown, options: SelectOption[]) => { ); }; -const Select = forwardRef(function Select( +function SelectInner( { 'aria-label': ariaLabel, className, @@ -168,7 +166,7 @@ const Select = forwardRef(function Select( onClose, onFocus, onOpen, - open: openProp = null, + open: openProp, options: optionsProp = [], readOnly, SelectDisplayProps, @@ -178,8 +176,8 @@ const Select = forwardRef(function Select( variant = 'default', width = 'auto', ...otherProps - }, - ref + }: SelectProps, + ref: React.ForwardedRef ) { const { native } = otherProps; @@ -190,7 +188,7 @@ const Select = forwardRef(function Select( const handleRef = useForkRef(ref, inputRefProp); const options = useMemo( - () => optionsProp.filter(Boolean) as SelectOption[], + () => optionsProp.filter(Boolean) as SelectOption[], [optionsProp] ); const [value, setValueState] = useControlledOrUncontrolled({ @@ -199,7 +197,7 @@ const Select = forwardRef(function Select( }); const [openState, setOpenState] = useState(false); - const isOpenControlled = openProp !== null; + const isOpenControlled = openProp !== undefined; const open = isOpenControlled ? openProp : openState; // to hijack native focus. when somebody passes ref @@ -299,7 +297,7 @@ const Select = forwardRef(function Select( ); const handleOptionClick = useCallback( - (option: SelectOption) => (event: AnyEvent) => { + (option: SelectOption) => (event: AnyEvent) => { const newValue = option.value; setValueState(newValue); @@ -312,7 +310,7 @@ const Select = forwardRef(function Select( value: { value: newValue, name } }); // TODO: Unweirdify this event argument - onChange(event as unknown as SelectChangeEvent, option); + onChange(event as unknown as SelectChangeEvent, option); } handleClose(event); @@ -374,7 +372,7 @@ const Select = forwardRef(function Select( writable: true, value: { value: option.value, name } }); - onChange(event as unknown as SelectChangeEvent, option); + onChange(event as unknown as SelectChangeEvent, option); } } } @@ -428,12 +426,15 @@ const Select = forwardRef(function Select( (event: React.ChangeEvent) => { event.stopPropagation(); - const nextSelection = getOptionWithValue(event.target.value, options); + const nextSelection = getOptionWithValue( + event.target.value, + options as unknown as SelectOption[] + ); if (!nextSelection) { return; } - onChange?.(event, nextSelection); + onChange?.(event, nextSelection as unknown as SelectOption); setValueState(nextSelection.value); displayNode.current?.focus(); }, @@ -584,6 +585,11 @@ const Select = forwardRef(function Select( )} ); -}); +} + +const Select = forwardRef(SelectInner) as ( + // eslint-disable-next-line no-use-before-define + props: SelectProps & { ref?: React.ForwardedRef } +) => ReturnType; export { Select, SelectProps }; diff --git a/src/Select/Select.types.ts b/src/Select/Select.types.ts index 89c3cc22..029d73b7 100644 --- a/src/Select/Select.types.ts +++ b/src/Select/Select.types.ts @@ -1,14 +1,14 @@ import React from 'react'; -export type SelectChangeEvent = +export type SelectChangeEvent = | (React.MouseEvent & { target: { - value: { value: unknown; name: string | undefined }; + value: { value: T; name: string | undefined }; }; }) | React.ChangeEvent; -export type SelectOption = { +export type SelectOption = { label: string; value: T; }; @@ -19,4 +19,6 @@ export type SelectRef = Pick & { export type SelectVariants = 'default' | 'flat'; -export type SelectFormatDisplayCallback = (option: SelectOption) => string; +export type SelectFormatDisplayCallback = ( + option: SelectOption +) => string; diff --git a/src/Tabs/Tabs.stories.tsx b/src/Tabs/Tabs.stories.tsx index 36606825..0905fd03 100644 --- a/src/Tabs/Tabs.stories.tsx +++ b/src/Tabs/Tabs.stories.tsx @@ -90,7 +90,7 @@ export function MultiRow() { const handleChange = ( _: React.MouseEvent, - value: number + value: string ) => setState({ activeTab: value }); const { activeTab } = state; From 38f7cf6a7e75113582f697f7b9956d01fa857275 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Wed, 27 Jul 2022 19:21:08 -0400 Subject: [PATCH 044/100] fix(select): fix type issues with onChange --- src/Select/Select.tsx | 5 ++++- src/Select/Select.types.ts | 17 ++++++++++++----- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/Select/Select.tsx b/src/Select/Select.tsx index 16a0b65d..fae7c642 100644 --- a/src/Select/Select.tsx +++ b/src/Select/Select.tsx @@ -434,7 +434,10 @@ function SelectInner( return; } - onChange?.(event, nextSelection as unknown as SelectOption); + onChange?.( + event as unknown as SelectChangeEvent, + nextSelection as unknown as SelectOption + ); setValueState(nextSelection.value); displayNode.current?.focus(); }, diff --git a/src/Select/Select.types.ts b/src/Select/Select.types.ts index 029d73b7..934a27a3 100644 --- a/src/Select/Select.types.ts +++ b/src/Select/Select.types.ts @@ -1,12 +1,19 @@ import React from 'react'; +type SelectChangeEventTargetValue = { value: T; name: string | undefined }; + export type SelectChangeEvent = - | (React.MouseEvent & { - target: { - value: { value: T; name: string | undefined }; - }; + | (Omit, 'target'> & { + target: Omit< + React.ChangeEvent['target'], + 'name' | 'value' + > & + SelectChangeEventTargetValue; }) - | React.ChangeEvent; + | (Omit & { + target: Omit & + SelectChangeEventTargetValue; + }); export type SelectOption = { label: string; From 49ab26bcb811c229354360d4b2720a72e439b94d Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Mon, 25 Jul 2022 16:42:04 -0400 Subject: [PATCH 045/100] feat(datepicker): convert to TypeScript and export types --- .storybook/manager.css | 7 + .storybook/manager.js | 1 + src/DatePicker/DatePicker.js | 217 -------------------------- src/DatePicker/DatePicker.mdx | 2 +- src/DatePicker/DatePicker.stories.js | 23 --- src/DatePicker/DatePicker.stories.tsx | 23 +++ src/DatePicker/DatePicker.tsx | 211 +++++++++++++++++++++++++ src/index.ts | 1 + 8 files changed, 244 insertions(+), 241 deletions(-) create mode 100644 .storybook/manager.css create mode 100644 .storybook/manager.js delete mode 100644 src/DatePicker/DatePicker.js delete mode 100644 src/DatePicker/DatePicker.stories.js create mode 100644 src/DatePicker/DatePicker.stories.tsx create mode 100644 src/DatePicker/DatePicker.tsx diff --git a/.storybook/manager.css b/.storybook/manager.css new file mode 100644 index 00000000..0f4d9564 --- /dev/null +++ b/.storybook/manager.css @@ -0,0 +1,7 @@ +/* Remove from the sidebar menu stories that contains "unstable" */ +a[data-item-id$='-unstable'].sidebar-item, +a[data-item-id*='-unstable-'].sidebar-item, +button[data-item-id$='-unstable'].sidebar-item, +button[data-item-id$='-unstable-'].sidebar-item { + display: none !important; +} diff --git a/.storybook/manager.js b/.storybook/manager.js new file mode 100644 index 00000000..9cf8c40f --- /dev/null +++ b/.storybook/manager.js @@ -0,0 +1 @@ +import './manager.css'; diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js deleted file mode 100644 index 2ab53195..00000000 --- a/src/DatePicker/DatePicker.js +++ /dev/null @@ -1,217 +0,0 @@ -import propTypes from 'prop-types'; -import React, { Component } from 'react'; -import styled from 'styled-components'; - -import { Button } from '../Button/Button'; -import { Cutout } from '../Cutout/Cutout'; -import { NumberField } from '../NumberField/NumberField'; -import Select from '../Select/Select'; -import { Toolbar } from '../Toolbar/Toolbar'; -import Window from '../Window/Window'; -import WindowContent from '../WindowContent/WindowContent'; -import WindowHeader from '../WindowHeader/WindowHeader'; - -const Calendar = styled(Cutout)` - width: 234px; - margin: 1rem 0; - background: ${({ theme }) => theme.canvas}; -`; - -const WeekDays = styled.div` - display: flex; - background: ${({ theme }) => theme.materialDark}; - color: #dfe0e3; -`; - -const Dates = styled.div` - display: flex; - flex-wrap: wrap; -`; - -const DateItem = styled.div` - text-align: center; - height: 1.5em; - line-height: 1.5em; - width: 14.28%; -`; - -const DateItemContent = styled.span` - cursor: pointer; - - background: ${({ active, theme }) => - active ? theme.hoverBackground : 'transparent'}; - color: ${({ active, theme }) => - active ? theme.canvasTextInvert : theme.canvasText}; - - &:hover { - border: 2px dashed - ${({ theme, active }) => (active ? 'none' : theme.materialDark)}; - } -`; - -function daysInMonth(year, month) { - return new Date(year, month + 1, 0).getDate(); -} - -function dayIndex(year, month, day) { - return new Date(year, month, day).getDay(); -} - -class DatePicker extends Component { - static propTypes = { - className: propTypes.string, - shadow: propTypes.bool, - onAccept: propTypes.func, - onCancel: propTypes.func, - date: propTypes.instanceOf(Date) - }; - - static defaultProps = { - shadow: true, - className: '', - onAccept: null, - onCancel: null, - date: null - }; - - static convertDateToState(date) { - const day = date.getDate(); - const month = date.getMonth(); - const year = date.getFullYear(); - - return { day, month, year }; - } - - constructor(props) { - super(props); - - const initialDate = DatePicker.convertDateToState(props.date || new Date()); - this.state = initialDate; - } - - handleMonthSelect = e => this.setState({ month: e.target.value }); - - handleYearSelect = year => this.setState({ year }); - - handleDaySelect = day => this.setState({ day }); - - handleAccept = () => { - const { year, month, day } = this.state; - const { onAccept } = this.props; - const date = new Date(year, month, day); - - onAccept(date); - }; - - render() { - let { day } = this.state; - const { month, year } = this.state; - const { shadow, className, onAccept, onCancel } = this.props; - - const months = [ - { value: 0, label: 'January' }, - { value: 1, label: 'February' }, - { value: 2, label: 'March' }, - { value: 3, label: 'April' }, - { value: 4, label: 'May' }, - { value: 5, label: 'June' }, - { value: 6, label: 'July' }, - { value: 7, label: 'August' }, - { value: 8, label: 'September' }, - { value: 9, label: 'October' }, - { value: 10, label: 'November' }, - { value: 11, label: 'December' } - ]; - - // eslint-disable-next-line - const dayPickerItems = Array.apply(null, { length: 42 }); - const firstDayIndex = dayIndex(year, month, 1); - - const daysNumber = daysInMonth(year, month); - day = day < daysNumber ? day : daysNumber; - dayPickerItems.forEach((item, i) => { - if (i >= firstDayIndex && i < daysNumber + firstDayIndex) { - const dayNumber = i - firstDayIndex + 1; - - dayPickerItems[i] = ( - { - this.handleDaySelect(dayNumber); - }} - > - - {dayNumber} - - - ); - } else { - dayPickerItems[i] = ( - - ); - } - }); - - return ( - - - - 📆 - - Date - - - - + + + + + S + M + T + W + T + F + S + + {dayPickerItems} + + + + + + + + ); + } +); + +// eslint-disable-next-line camelcase +export { DatePicker as DatePicker__UNSTABLE, DatePickerProps }; diff --git a/src/index.ts b/src/index.ts index cacfee34..54e30e3c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -12,6 +12,7 @@ export * from './Checkbox/Checkbox'; export * from './ColorInput/ColorInput'; export * from './Counter/Counter'; export * from './Cutout/Cutout'; +export * from './DatePicker/DatePicker'; export * from './Desktop/Desktop'; export * from './Divider/Divider'; export * from './Fieldset/Fieldset'; From 5abcb3ed4895d9706e08e1d6fa8dbbb57c8f40bd Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Wed, 3 Aug 2022 19:49:36 -0400 Subject: [PATCH 046/100] fix(slider): fix thumb rendering off the slider when value was not set --- src/Slider/Slider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx index fe1cb608..7e10ec1f 100644 --- a/src/Slider/Slider.tsx +++ b/src/Slider/Slider.tsx @@ -314,7 +314,7 @@ const Slider = forwardRef(function Slider( const vertical = orientation === 'vertical'; const [valueDerived, setValueState] = useControlledOrUncontrolled({ value, - defaultValue: defaultValue ?? 0 + defaultValue: defaultValue ?? min }); const { From 71a964e83f5557bece4368a818b58457f9e5372c Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Wed, 27 Jul 2022 13:49:32 -0400 Subject: [PATCH 047/100] ci: add lint and type checking This also fixes some remaining lint issues. --- .github/workflows/ci.yml | 52 +++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/Checkbox/Checkbox.tsx | 2 +- 3 files changed, 54 insertions(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 2dff49f6..a2672467 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -4,6 +4,58 @@ on: pull_request: jobs: + lint: + runs-on: ubuntu-latest + steps: + - name: Git Checkout + uses: actions/checkout@v2 + + - name: Setup node + uses: actions/setup-node@v3 + with: + node-version: 16 + + - name: Cache packages + uses: actions/cache@v3 + with: + key: node_modules-v4-${{ hashFiles('yarn.lock') }} + path: |- + node_modules + */node_modules + restore-keys: 'node_modules-v4-' + + - name: Yarn install + run: yarn install --ignore-optional --frozen-lockfile + + - name: Lint + run: yarn run lint + + type-check: + runs-on: ubuntu-latest + steps: + - name: Git Checkout + uses: actions/checkout@v2 + + - name: Setup node + uses: actions/setup-node@v3 + with: + node-version: 16 + + - name: Cache packages + uses: actions/cache@v3 + with: + key: node_modules-v4-${{ hashFiles('yarn.lock') }} + path: |- + node_modules + */node_modules + restore-keys: 'node_modules-v4-' + + - name: Yarn install + run: yarn install --ignore-optional --frozen-lockfile + + - name: Type Check + run: yarn run typescript + test: runs-on: ubuntu-latest steps: diff --git a/package.json b/package.json index d800976a..879ced05 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "test:ci": "jest ./src --maxWorkers=2", "test:watch": "jest ./src --watch", "test:coverage": "jest ./src --coverage", + "typescript": "tsc --noEmit", "lint": "eslint --ext .js,.ts,.tsx src", "lint:fix": "yarn run lint --fix", "semantic-release": "semantic-release", diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx index 7cd47f4e..777d10d0 100644 --- a/src/Checkbox/Checkbox.tsx +++ b/src/Checkbox/Checkbox.tsx @@ -216,7 +216,7 @@ const Checkbox = forwardRef(function Checkbox( setState(newState); onChange(e); }, - [onChange] + [onChange, setState] ); const CheckboxComponent = CheckboxComponents[variant]; From 2eac4e8aa595f7b55d711f5480d3a5333e35e193 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Thu, 4 Aug 2022 08:46:18 -0400 Subject: [PATCH 048/100] feat(storybook): Reimplement "Themes" add on with React95 style This also upgrades many dependencies, removes storybook-addon-styled-component-theme and configures babel in preparation for Storybook v7. --- .babelrc | 73 +- .../{globalStyle.js => withGlobalStyle.tsx} | 8 +- .storybook/main.js | 29 - .storybook/main.ts | 52 + .storybook/{manager.js => manager.ts} | 0 .storybook/preview.js | 40 - .storybook/preview.ts | 9 + .storybook/theme-picker/ThemeButton.tsx | 26 + .storybook/theme-picker/ThemeList.tsx | 77 + .storybook/theme-picker/ThemeProvider.tsx | 17 + .storybook/theme-picker/constants.ts | 1 + .storybook/theme-picker/register.ts | 17 + .storybook/webpack.config.js | 12 - doczrc.js | 8 - package.json | 63 +- src/Fieldset/Fieldset.tsx | 15 - src/Panel/Panel.tsx | 13 - tsconfig.json | 4 +- types/{global.d.ts => globals.d.ts} | 0 yarn.lock | 2204 +++++++++-------- 20 files changed, 1524 insertions(+), 1144 deletions(-) rename .storybook/decorators/{globalStyle.js => withGlobalStyle.tsx} (85%) delete mode 100644 .storybook/main.js create mode 100644 .storybook/main.ts rename .storybook/{manager.js => manager.ts} (100%) delete mode 100644 .storybook/preview.js create mode 100644 .storybook/preview.ts create mode 100644 .storybook/theme-picker/ThemeButton.tsx create mode 100644 .storybook/theme-picker/ThemeList.tsx create mode 100644 .storybook/theme-picker/ThemeProvider.tsx create mode 100644 .storybook/theme-picker/constants.ts create mode 100644 .storybook/theme-picker/register.ts delete mode 100644 .storybook/webpack.config.js delete mode 100644 doczrc.js rename types/{global.d.ts => globals.d.ts} (100%) diff --git a/.babelrc b/.babelrc index 76a102e0..2d721c3d 100644 --- a/.babelrc +++ b/.babelrc @@ -1,24 +1,67 @@ { + "sourceType": "unambiguous", "presets": [ [ "@babel/preset-env", { - "modules": false + "shippedProposals": true, + "loose": true } ], - "@babel/preset-react" + "@babel/preset-typescript" ], "plugins": [ - "babel-plugin-styled-components", - "@babel/plugin-proposal-class-properties", - "@babel/plugin-transform-runtime" - ], - "env": { - "test": { - "presets": ["@babel/preset-env"], - "plugins": [ - ["babel-plugin-styled-components", { "ssr": false, "displayName": false }] - ] - } - } -} + "@babel/plugin-transform-shorthand-properties", + "@babel/plugin-transform-block-scoping", + [ + "@babel/plugin-proposal-decorators", + { + "legacy": true + } + ], + [ + "@babel/plugin-proposal-class-properties", + { + "loose": true + } + ], + [ + "@babel/plugin-proposal-private-property-in-object", + { + "loose": true + } + ], + [ + "@babel/plugin-proposal-private-methods", + { + "loose": true + } + ], + "@babel/plugin-proposal-export-default-from", + "@babel/plugin-syntax-dynamic-import", + [ + "@babel/plugin-proposal-object-rest-spread", + { + "loose": true, + "useBuiltIns": true + } + ], + "@babel/plugin-transform-classes", + "@babel/plugin-transform-arrow-functions", + "@babel/plugin-transform-parameters", + "@babel/plugin-transform-destructuring", + "@babel/plugin-transform-spread", + "@babel/plugin-transform-for-of", + "babel-plugin-macros", + "@babel/plugin-proposal-optional-chaining", + "@babel/plugin-proposal-nullish-coalescing-operator", + [ + "babel-plugin-polyfill-corejs3", + { + "method": "usage-global", + "absoluteImports": "core-js", + "version": "3.24.1" + } + ] + ] +} \ No newline at end of file diff --git a/.storybook/decorators/globalStyle.js b/.storybook/decorators/withGlobalStyle.tsx similarity index 85% rename from .storybook/decorators/globalStyle.js rename to .storybook/decorators/withGlobalStyle.tsx index bfd13662..9e7504c9 100644 --- a/.storybook/decorators/globalStyle.js +++ b/.storybook/decorators/withGlobalStyle.tsx @@ -1,10 +1,10 @@ +import { DecoratorFn } from '@storybook/react'; import React from 'react'; import { createGlobalStyle } from 'styled-components'; -import styleReset from '../../src/common/styleReset'; -// TODO is there a way to keep import paths consistent with what end user will get? import ms_sans_serif from '../../src/assets/fonts/dist/ms_sans_serif.woff2'; import ms_sans_serif_bold from '../../src/assets/fonts/dist/ms_sans_serif_bold.woff2'; +import styleReset from '../../src/common/styleReset'; const GlobalStyle = createGlobalStyle` ${styleReset} @@ -25,9 +25,9 @@ const GlobalStyle = createGlobalStyle` } `; -export default storyFn => ( +export const withGlobalStyle: DecoratorFn = story => ( <> - {storyFn()} + {story()} ); diff --git a/.storybook/main.js b/.storybook/main.js deleted file mode 100644 index 9e84067c..00000000 --- a/.storybook/main.js +++ /dev/null @@ -1,29 +0,0 @@ -/** @type import('@storybook/react/types').StorybookConfig */ -module.exports = { - stories: ['../src/**/*.stories.@(js|jsx|tsx|mdx)'], - addons: [ - { - name: '@storybook/addon-docs', - options: { - sourceLoaderOptions: { - injectStoryParameters: false - } - } - }, - '@storybook/addon-storysource', - 'storybook-addon-styled-component-theme/dist/register' - ], - features: { - postcss: false - }, - typescript: { - check: false, - checkOptions: {}, - reactDocgen: 'react-docgen-typescript', - reactDocgenTypescriptOptions: { - shouldExtractLiteralValuesFromEnum: true, - propFilter: prop => - prop.parent ? !/node_modules/.test(prop.parent.fileName) : true - } - } -}; diff --git a/.storybook/main.ts b/.storybook/main.ts new file mode 100644 index 00000000..b51c1606 --- /dev/null +++ b/.storybook/main.ts @@ -0,0 +1,52 @@ +import type { StorybookConfig } from '@storybook/react/types'; +import type { PropItem } from 'react-docgen-typescript'; + +const path = require('path'); + +const storybookConfig: StorybookConfig = { + stories: ['../src/**/*.stories.@(tsx|mdx)'], + addons: [ + { + name: '@storybook/addon-docs', + options: { + sourceLoaderOptions: { + injectStoryParameters: false + } + } + }, + '@storybook/addon-storysource', + './theme-picker/register.ts' + ], + core: { + builder: 'webpack5' + }, + features: { + babelModeV7: true, + storyStoreV7: true, + modernInlineRender: true, + postcss: false + }, + typescript: { + check: false, + checkOptions: {}, + reactDocgen: 'react-docgen-typescript', + reactDocgenTypescriptOptions: { + shouldExtractLiteralValuesFromEnum: true, + propFilter: (prop: PropItem) => + prop.parent ? !/node_modules/.test(prop.parent.fileName) : true + } + }, + webpackFinal: config => { + config.resolve = { + ...config.resolve, + alias: { + ...config.resolve?.alias, + react95: path.resolve(__dirname, '../src/index') + } + }; + + return config; + } +}; + +module.exports = storybookConfig; diff --git a/.storybook/manager.js b/.storybook/manager.ts similarity index 100% rename from .storybook/manager.js rename to .storybook/manager.ts diff --git a/.storybook/preview.js b/.storybook/preview.js deleted file mode 100644 index 1660f33b..00000000 --- a/.storybook/preview.js +++ /dev/null @@ -1,40 +0,0 @@ -import { withThemesProvider } from 'storybook-addon-styled-component-theme'; -import themes from '../src/common/themes'; -import GlobalStyle from './decorators/globalStyle'; - -const { - original, - rainyDay, - vaporTeal, - theSixtiesUSA, - olive, - tokyoDark, - rose, - plum, - matrix, - travel, - ...otherThemes -} = themes; - -const reorderedThemes = { - original, - rainyDay, - vaporTeal, - theSixtiesUSA, - olive, - tokyoDark, - rose, - plum, - matrix, - travel, - ...otherThemes -}; - -export const decorators = [ - GlobalStyle, - withThemesProvider(Object.values(reorderedThemes)) -]; - -export const parameters = { - layout: 'fullscreen' -}; diff --git a/.storybook/preview.ts b/.storybook/preview.ts new file mode 100644 index 00000000..45fa5788 --- /dev/null +++ b/.storybook/preview.ts @@ -0,0 +1,9 @@ +import { DecoratorFn, Parameters } from '@storybook/react'; +import { withGlobalStyle } from './decorators/withGlobalStyle'; +import { withThemesProvider } from './theme-picker/ThemeProvider'; + +export const decorators: DecoratorFn[] = [withGlobalStyle, withThemesProvider]; + +export const parameters: Parameters = { + layout: 'fullscreen' +}; diff --git a/.storybook/theme-picker/ThemeButton.tsx b/.storybook/theme-picker/ThemeButton.tsx new file mode 100644 index 00000000..87c57329 --- /dev/null +++ b/.storybook/theme-picker/ThemeButton.tsx @@ -0,0 +1,26 @@ +import React, { useCallback } from 'react'; +import { ThemeProvider } from 'styled-components'; +import { Button } from '../../src/Button/Button'; +import { Theme } from '../../src/types'; + +export function ThemeButton({ + active, + onChoose, + theme +}: { + active: boolean; + onChoose: (themeName: string) => void; + theme: Theme; +}) { + const handleClick = useCallback(() => { + onChoose(theme.name); + }, []); + + return ( + + + + ); +} diff --git a/.storybook/theme-picker/ThemeList.tsx b/.storybook/theme-picker/ThemeList.tsx new file mode 100644 index 00000000..87e111b7 --- /dev/null +++ b/.storybook/theme-picker/ThemeList.tsx @@ -0,0 +1,77 @@ +import { useAddonState } from '@storybook/api'; +import React, { useCallback } from 'react'; +import styled from 'styled-components'; + +import themes from '../../src/common/themes'; +import { Theme } from '../../src/types'; +import { THEMES_ID } from './constants'; +import { ThemeButton } from './ThemeButton'; + +const { + original, + rainyDay, + vaporTeal, + theSixtiesUSA, + olive, + tokyoDark, + rose, + plum, + matrix, + travel, + ...otherThemes +} = themes; + +const themeList = [ + original, + rainyDay, + vaporTeal, + theSixtiesUSA, + olive, + tokyoDark, + rose, + plum, + matrix, + travel, + ...Object.values(otherThemes) +]; + +type ThemesProps = { + active?: boolean; +}; + +const Wrapper = styled.div<{ theme: Theme }>` + display: grid; + padding: 1em; + gap: 1em; + grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); + grid-template-rows: repeat(auto-fill, 40px); + background-color: ${({ theme }) => theme.material}; +`; + +export function ThemeList({ active }: ThemesProps) { + const [themeName, setThemeName] = useAddonState(THEMES_ID, 'original'); + + const handleChoose = useCallback( + (newThemeName: string) => { + setThemeName(newThemeName); + }, + [setThemeName] + ); + + if (!active) { + return <>; + } + + return ( + + {themeList.map(theme => ( + + ))} + + ); +} diff --git a/.storybook/theme-picker/ThemeProvider.tsx b/.storybook/theme-picker/ThemeProvider.tsx new file mode 100644 index 00000000..e8dd4e2a --- /dev/null +++ b/.storybook/theme-picker/ThemeProvider.tsx @@ -0,0 +1,17 @@ +import { useAddonState } from '@storybook/client-api'; +import { DecoratorFn } from '@storybook/react'; +import React from 'react'; +import { ThemeProvider } from 'styled-components'; + +import themes from '../../src/common/themes/index'; +import { THEMES_ID } from './constants'; + +export const withThemesProvider: DecoratorFn = story => { + const [themeName] = useAddonState(THEMES_ID, 'original'); + + return ( + + {story()} + + ); +}; diff --git a/.storybook/theme-picker/constants.ts b/.storybook/theme-picker/constants.ts new file mode 100644 index 00000000..29654471 --- /dev/null +++ b/.storybook/theme-picker/constants.ts @@ -0,0 +1 @@ +export const THEMES_ID = 'storybook/themes'; diff --git a/.storybook/theme-picker/register.ts b/.storybook/theme-picker/register.ts new file mode 100644 index 00000000..6c5d1834 --- /dev/null +++ b/.storybook/theme-picker/register.ts @@ -0,0 +1,17 @@ +import addons, { makeDecorator, types } from '@storybook/addons'; +import { THEMES_ID } from './constants'; +import { ThemeList } from './ThemeList'; + +addons.register(THEMES_ID, () => { + addons.addPanel(`${THEMES_ID}/panel`, { + title: 'Themes', + type: types.PANEL, + render: ThemeList + }); +}); + +export default makeDecorator({ + name: 'withThemesProvider', + parameterName: 'theme', + wrapper: (getStory, context) => getStory(context) +}); diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js deleted file mode 100644 index bb31abf6..00000000 --- a/.storybook/webpack.config.js +++ /dev/null @@ -1,12 +0,0 @@ -const path = require('path'); - -module.exports = ({ config }) => { - config.resolve = Object.assign(config.resolve, { - alias: { - ...config.resolve.alias, - react95: path.resolve(__dirname, '../src/index') - } - }); - - return config; -}; diff --git a/doczrc.js b/doczrc.js deleted file mode 100644 index 7641d2ce..00000000 --- a/doczrc.js +++ /dev/null @@ -1,8 +0,0 @@ -export default { - typescript: false, - menu: ['Welcome', 'Getting Started', 'Contributing', 'Submit your project'], - themeConfig: { - initialColorMode: 'light' - }, - dest: './docs/build' -}; diff --git a/package.json b/package.json index 879ced05..2a29589d 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,8 @@ "access": "public" }, "scripts": { - "start": "start-storybook -p 9009", - "build:storybook": "build-storybook -o ./storybook", + "start": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9009", + "build:storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -o ./storybook", "build": "rm -rf dist && yarn run build:prod", "build:dev": "cross-env NODE_ENV=development rollup -c", "build:prod": "cross-env NODE_ENV=production rollup -c", @@ -55,64 +55,75 @@ "styled-components": ">= 5.3.3" }, "devDependencies": { - "@babel/cli": "^7.18.9", "@babel/core": "^7.18.9", - "@babel/eslint-parser": "^7.18.9", "@babel/plugin-proposal-class-properties": "^7.18.6", - "@babel/plugin-transform-runtime": "^7.18.9", - "@babel/preset-env": "^7.18.9", - "@babel/preset-react": "^7.18.6", - "@storybook/addon-docs": "^6.5.9", - "@storybook/addon-storysource": "^6.5.9", - "@storybook/react": "^6.5.9", + "@babel/plugin-proposal-decorators": "^7.18.10", + "@babel/plugin-proposal-export-default-from": "^7.18.10", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", + "@babel/plugin-proposal-object-rest-spread": "^7.18.9", + "@babel/plugin-proposal-optional-chaining": "^7.18.9", + "@babel/plugin-proposal-private-methods": "^7.18.6", + "@babel/plugin-proposal-private-property-in-object": "^7.18.6", + "@babel/plugin-syntax-dynamic-import": "^7.8.3", + "@babel/plugin-transform-arrow-functions": "^7.18.6", + "@babel/plugin-transform-block-scoping": "^7.18.9", + "@babel/plugin-transform-classes": "^7.18.9", + "@babel/plugin-transform-destructuring": "^7.18.9", + "@babel/plugin-transform-for-of": "^7.18.8", + "@babel/plugin-transform-parameters": "^7.18.8", + "@babel/plugin-transform-shorthand-properties": "^7.18.6", + "@babel/plugin-transform-spread": "^7.18.9", + "@babel/preset-env": "^7.18.10", + "@babel/preset-typescript": "^7.18.6", + "@storybook/addon-docs": "6.5.10", + "@storybook/addon-storysource": "6.5.10", + "@storybook/builder-webpack5": "^6.5.10", + "@storybook/manager-webpack5": "^6.5.10", + "@storybook/react": "6.5.10", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^12.1.5", "@types/jest": "^28.1.6", "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", "@types/styled-components": "^5.1.25", - "@typescript-eslint/eslint-plugin": "^5.30.7", - "@typescript-eslint/parser": "^5.30.7", - "babel-loader": "^8.2.5", - "babel-plugin-styled-components": "^2.0.7", + "@typescript-eslint/eslint-plugin": "^5.32.0", + "@typescript-eslint/parser": "^5.32.0", + "babel-plugin-macros": "^3.1.0", + "babel-plugin-polyfill-corejs3": "^0.5.3", "commitizen": "^4.2.5", "cross-env": "^7.0.3", "cz-conventional-changelog": "^3.3.0", - "esbuild": "^0.14.49", - "eslint": "^8.20.0", + "esbuild": "^0.14.53", + "eslint": "^8.21.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-prettier": "^8.5.0", - "eslint-import-resolver-typescript": "^3.3.0", + "eslint-import-resolver-typescript": "^3.4.0", "eslint-plugin-import": "^2.26.0", - "eslint-plugin-jsx-a11y": "^6.6.0", + "eslint-plugin-jsx-a11y": "^6.6.1", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", - "firebase-tools": "^11.3.0", + "firebase-tools": "^11.4.2", "husky": "^8.0.1", "jest": "^28.1.3", "jest-environment-jsdom": "^28.1.3", "jest-styled-components": "^7.0.8", "lint-staged": "^13.0.3", "prettier": "^2.7.1", - "prop-types": "^15.8.1", "react": "^17.0.2", "react-docgen-typescript": "^2.2.2", "react-dom": "^17.0.2", "rimraf": "^3.0.2", - "rollup": "^2.77.0", - "rollup-plugin-babel": "^4.4.0", - "rollup-plugin-commonjs": "^9.3.4", + "rollup": "^2.77.2", "rollup-plugin-copy": "^3.4.0", "rollup-plugin-dts": "^4.2.2", "rollup-plugin-esbuild": "^4.9.1", - "rollup-plugin-node-resolve": "^4.2.4", "rollup-plugin-replace": "^2.2.0", "semantic-release": "^19.0.3", - "storybook-addon-styled-component-theme": "^2.0.0", "styled-components": "^5.3.5", "ts-jest": "^28.0.7", - "typescript": "^4.7.4" + "typescript": "^4.7.4", + "webpack": "5" }, "dependencies": {}, "husky": { diff --git a/src/Fieldset/Fieldset.tsx b/src/Fieldset/Fieldset.tsx index 3c3255d6..05ff72b4 100644 --- a/src/Fieldset/Fieldset.tsx +++ b/src/Fieldset/Fieldset.tsx @@ -1,4 +1,3 @@ -import propTypes from 'prop-types'; import React, { forwardRef } from 'react'; import styled, { css } from 'styled-components'; import { createDisabledTextStyles } from '../common'; @@ -65,18 +64,4 @@ const Fieldset = forwardRef( } ); -Fieldset.defaultProps = { - disabled: false, - variant: 'default', - label: null, - children: null -}; - -Fieldset.propTypes = { - label: propTypes.node, - children: propTypes.node, - disabled: propTypes.bool, - variant: propTypes.oneOf(['default', 'flat']) -}; - export { Fieldset, FieldsetProps }; diff --git a/src/Panel/Panel.tsx b/src/Panel/Panel.tsx index 1c84bb07..58af24de 100644 --- a/src/Panel/Panel.tsx +++ b/src/Panel/Panel.tsx @@ -1,5 +1,4 @@ import React, { forwardRef } from 'react'; -import propTypes from 'prop-types'; import styled, { css } from 'styled-components'; import { createBorderStyles, @@ -50,16 +49,4 @@ const Panel = forwardRef(function Panel( ); }); -Panel.defaultProps = { - children: null, - shadow: false, - variant: 'outside' -}; - -Panel.propTypes = { - variant: propTypes.oneOf(['outside', 'inside', 'well']), - children: propTypes.node, - shadow: propTypes.bool -}; - export { Panel, PanelProps }; diff --git a/tsconfig.json b/tsconfig.json index f70eb2f2..19ce027d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,7 +12,7 @@ "ESNext", "DOM" ], - "module": "ESNext", + "module": "Node16", "moduleResolution": "Node", "noEmitOnError": true, "noFallthroughCasesInSwitch": true, @@ -35,7 +35,7 @@ "strictFunctionTypes": true, "strictNullChecks": true, "strictPropertyInitialization": true, - "target": "ESNext", + "target": "ES2018" }, "include": [ "**/*.ts", diff --git a/types/global.d.ts b/types/globals.d.ts similarity index 100% rename from types/global.d.ts rename to types/globals.d.ts diff --git a/yarn.lock b/yarn.lock index 527005e8..b48cb1c3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -20,22 +20,6 @@ call-me-maybe "^1.0.1" js-yaml "^4.1.0" -"@babel/cli@^7.18.9": - version "7.18.9" - resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.18.9.tgz#1fbc8424e5f74ae08bc61ec71609af29287d82d2" - integrity sha512-e7TOtHVrAXBJGNgoROVxqx0mathd01oJGXIDekRfxdrISnRqfM795APwkDtse9GdyPYivjg3iXiko3sF3W7f5Q== - dependencies: - "@jridgewell/trace-mapping" "^0.3.8" - commander "^4.0.1" - convert-source-map "^1.1.0" - fs-readdir-recursive "^1.1.0" - glob "^7.0.0" - make-dir "^2.1.0" - slash "^2.0.0" - optionalDependencies: - "@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents.3" - chokidar "^3.4.0" - "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a" @@ -43,7 +27,7 @@ dependencies: "@babel/highlight" "^7.18.6" -"@babel/compat-data@^7.13.11", "@babel/compat-data@^7.18.8": +"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.18.8": version "7.18.8" resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.8.tgz#2483f565faca607b8535590e84e7de323f27764d" integrity sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ== @@ -71,41 +55,32 @@ source-map "^0.5.0" "@babel/core@^7.1.0", "@babel/core@^7.11.6", "@babel/core@^7.12.10", "@babel/core@^7.12.3", "@babel/core@^7.18.9", "@babel/core@^7.7.5": - version "7.18.9" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.9.tgz#805461f967c77ff46c74ca0460ccf4fe933ddd59" - integrity sha512-1LIb1eL8APMy91/IMW+31ckrfBM4yCoLaVzoDhZUKSM4cu1L1nIidyxkCgzPAgrC5WEz36IPEr/eSeSF9pIn+g== + version "7.18.10" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.10.tgz#39ad504991d77f1f3da91be0b8b949a5bc466fb8" + integrity sha512-JQM6k6ENcBFKVtWvLavlvi/mPcpYZ3+R+2EySDEMSMbp7Mn4FexlbbJVrx2R7Ijhr01T8gyqrOaABWIOgxeUyw== dependencies: "@ampproject/remapping" "^2.1.0" "@babel/code-frame" "^7.18.6" - "@babel/generator" "^7.18.9" + "@babel/generator" "^7.18.10" "@babel/helper-compilation-targets" "^7.18.9" "@babel/helper-module-transforms" "^7.18.9" "@babel/helpers" "^7.18.9" - "@babel/parser" "^7.18.9" - "@babel/template" "^7.18.6" - "@babel/traverse" "^7.18.9" - "@babel/types" "^7.18.9" + "@babel/parser" "^7.18.10" + "@babel/template" "^7.18.10" + "@babel/traverse" "^7.18.10" + "@babel/types" "^7.18.10" convert-source-map "^1.7.0" debug "^4.1.0" gensync "^1.0.0-beta.2" json5 "^2.2.1" semver "^6.3.0" -"@babel/eslint-parser@^7.18.9": - version "7.18.9" - resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.18.9.tgz#255a63796819a97b7578751bb08ab9f2a375a031" - integrity sha512-KzSGpMBggz4fKbRbWLNyPVTuQr6cmCcBhOyXTw/fieOVaw5oYAwcAj4a7UKcDYCPxQq+CG1NCDZH9e2JTXquiQ== +"@babel/generator@^7.12.11", "@babel/generator@^7.12.5", "@babel/generator@^7.18.10", "@babel/generator@^7.7.2": + version "7.18.10" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.10.tgz#794f328bfabdcbaf0ebf9bf91b5b57b61fa77a2a" + integrity sha512-0+sW7e3HjQbiHbj1NeU/vN8ornohYlacAfZIaXhdoGweQqgcNy69COVciYYqEXJ/v+9OBA7Frxm4CVAuNqKeNA== dependencies: - eslint-scope "^5.1.1" - eslint-visitor-keys "^2.1.0" - semver "^6.3.0" - -"@babel/generator@^7.12.11", "@babel/generator@^7.12.5", "@babel/generator@^7.18.9", "@babel/generator@^7.7.2": - version "7.18.9" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.9.tgz#68337e9ea8044d6ddc690fb29acae39359cca0a5" - integrity sha512-wt5Naw6lJrL1/SGkipMiFxJjtyczUWTP38deiP1PO60HsBjDeKk08CGC3S8iVuvf0FmTdgKwU1KIXzSKL1G0Ug== - dependencies: - "@babel/types" "^7.18.9" + "@babel/types" "^7.18.10" "@jridgewell/gen-mapping" "^0.3.2" jsesc "^2.5.1" @@ -124,7 +99,7 @@ "@babel/helper-explode-assignable-expression" "^7.18.6" "@babel/types" "^7.18.9" -"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.18.9": +"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.9.tgz#69e64f57b524cde3e5ff6cc5a9f4a387ee5563bf" integrity sha512-tzLCyVmqUiFlcFoAPLA/gL9TeYrF61VLNtb+hvkuVaB5SUjW7jcfrglBIX1vUIoT7CLP3bBlIMeyEsIl2eFQNg== @@ -169,21 +144,19 @@ resolve "^1.14.2" semver "^6.1.2" -"@babel/helper-define-polyfill-provider@^0.3.1": - version "0.3.1" - resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz#52411b445bdb2e676869e5a74960d2d3826d2665" - integrity sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA== +"@babel/helper-define-polyfill-provider@^0.3.2": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.2.tgz#bd10d0aca18e8ce012755395b05a79f45eca5073" + integrity sha512-r9QJJ+uDWrd+94BSPcP6/de67ygLtvVy6cK4luE6MOuDsZIdoaPBnfSpbO/+LTifjPckbKXRuI9BB/Z2/y3iTg== dependencies: - "@babel/helper-compilation-targets" "^7.13.0" - "@babel/helper-module-imports" "^7.12.13" - "@babel/helper-plugin-utils" "^7.13.0" - "@babel/traverse" "^7.13.0" + "@babel/helper-compilation-targets" "^7.17.7" + "@babel/helper-plugin-utils" "^7.16.7" debug "^4.1.1" lodash.debounce "^4.0.8" resolve "^1.14.2" semver "^6.1.2" -"@babel/helper-environment-visitor@^7.18.6", "@babel/helper-environment-visitor@^7.18.9": +"@babel/helper-environment-visitor@^7.18.9": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be" integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg== @@ -250,12 +223,12 @@ resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375" integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg== -"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3": +"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz#4b8aea3b069d8cb8a72cdfe28ddf5ceca695ef2f" integrity sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w== -"@babel/helper-remap-async-to-generator@^7.18.6": +"@babel/helper-remap-async-to-generator@^7.18.6", "@babel/helper-remap-async-to-generator@^7.18.9": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519" integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA== @@ -297,6 +270,11 @@ dependencies: "@babel/types" "^7.18.6" +"@babel/helper-string-parser@^7.18.10": + version "7.18.10" + resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56" + integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw== + "@babel/helper-validator-identifier@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076" @@ -308,14 +286,14 @@ integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw== "@babel/helper-wrap-function@^7.18.9": - version "7.18.9" - resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.18.9.tgz#ae1feddc6ebbaa2fd79346b77821c3bd73a39646" - integrity sha512-cG2ru3TRAL6a60tfQflpEfs4ldiPwF6YW3zfJiRgmoFVIaC1vGnBBgatfec+ZUziPHkHSaXAuEck3Cdkf3eRpQ== + version "7.18.11" + resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.18.11.tgz#bff23ace436e3f6aefb61f85ffae2291c80ed1fb" + integrity sha512-oBUlbv+rjZLh2Ks9SKi4aL7eKaAXBWleHzU89mP0G6BMUlRxSckk9tSIkgDGydhgFxHuGSlBQZfnaD47oBEB7w== dependencies: "@babel/helper-function-name" "^7.18.9" - "@babel/template" "^7.18.6" - "@babel/traverse" "^7.18.9" - "@babel/types" "^7.18.9" + "@babel/template" "^7.18.10" + "@babel/traverse" "^7.18.11" + "@babel/types" "^7.18.10" "@babel/helpers@^7.12.5", "@babel/helpers@^7.18.9": version "7.18.9" @@ -335,10 +313,10 @@ chalk "^2.0.0" js-tokens "^4.0.0" -"@babel/parser@^7.1.0", "@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.18.6", "@babel/parser@^7.18.9": - version "7.18.9" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.9.tgz#f2dde0c682ccc264a9a8595efd030a5cc8fd2539" - integrity sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg== +"@babel/parser@^7.1.0", "@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.18.10", "@babel/parser@^7.18.11", "@babel/parser@^7.9.4": + version "7.18.11" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.11.tgz#68bb07ab3d380affa9a3f96728df07969645d2d9" + integrity sha512-9JKn5vN+hDt0Hdqn1PiJ2guflwP+B6Ga8qbDuoF0PzzVhrzsKIJo8yGqVk6CmMHiMei9w1C1Bp9IMJSIK+HPIQ== "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6": version "7.18.6" @@ -356,14 +334,14 @@ "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9" "@babel/plugin-proposal-optional-chaining" "^7.18.9" -"@babel/plugin-proposal-async-generator-functions@^7.18.6": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.18.6.tgz#aedac81e6fc12bb643374656dd5f2605bf743d17" - integrity sha512-WAz4R9bvozx4qwf74M+sfqPMKfSqwM0phxPTR6iJIi8robgzXwkEgmeJG1gEKhm6sDqT/U9aV3lfcqybIpev8w== +"@babel/plugin-proposal-async-generator-functions@^7.18.10": + version "7.18.10" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.18.10.tgz#85ea478c98b0095c3e4102bff3b67d306ed24952" + integrity sha512-1mFuY2TOsR1hxbjCo4QL+qlIjV07p4H4EUYw2J/WCqsvFV6V9X9z9YhXbWndc/4fw+hYGlDT7egYxliMp5O6Ew== dependencies: - "@babel/helper-environment-visitor" "^7.18.6" - "@babel/helper-plugin-utils" "^7.18.6" - "@babel/helper-remap-async-to-generator" "^7.18.6" + "@babel/helper-environment-visitor" "^7.18.9" + "@babel/helper-plugin-utils" "^7.18.9" + "@babel/helper-remap-async-to-generator" "^7.18.9" "@babel/plugin-syntax-async-generators" "^7.8.4" "@babel/plugin-proposal-class-properties@^7.12.1", "@babel/plugin-proposal-class-properties@^7.18.6": @@ -383,10 +361,10 @@ "@babel/helper-plugin-utils" "^7.18.6" "@babel/plugin-syntax-class-static-block" "^7.14.5" -"@babel/plugin-proposal-decorators@^7.12.12": - version "7.18.9" - resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.18.9.tgz#d09d41ffc74af8499d2ac706ed0dbd5474711665" - integrity sha512-KD7zDNaD14CRpjQjVbV4EnH9lsKYlcpUrhZH37ei2IY+AlXrfAPy5pTmRUE4X6X1k8EsKXPraykxeaogqQvSGA== +"@babel/plugin-proposal-decorators@^7.12.12", "@babel/plugin-proposal-decorators@^7.18.10": + version "7.18.10" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.18.10.tgz#788650d01e518a8a722eb8b3055dd9d73ecb7a35" + integrity sha512-wdGTwWF5QtpTY/gbBtQLAiCnoxfD4qMbN87NYZle1dOZ9Os8Y6zXcKrIaOU8W+TIvFUWVGG9tUgNww3CjXRVVw== dependencies: "@babel/helper-create-class-features-plugin" "^7.18.9" "@babel/helper-plugin-utils" "^7.18.9" @@ -402,10 +380,10 @@ "@babel/helper-plugin-utils" "^7.18.6" "@babel/plugin-syntax-dynamic-import" "^7.8.3" -"@babel/plugin-proposal-export-default-from@^7.12.1": - version "7.18.9" - resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.18.9.tgz#9dfad26452e53cae8f045c6153e82dc50e9bee89" - integrity sha512-1qtsLNCDm5awHLIt+2qAFDi31XC94r4QepMQcOosC7FpY6O+Bgay5f2IyAQt2wvm1TARumpFprnQt5pTIJ9nUg== +"@babel/plugin-proposal-export-default-from@^7.12.1", "@babel/plugin-proposal-export-default-from@^7.18.10": + version "7.18.10" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.18.10.tgz#091f4794dbce4027c03cf4ebc64d3fb96b75c206" + integrity sha512-5H2N3R2aQFxkV4PIBUR/i7PUSwgTZjouJKzI8eKswfIjT0PhvzkPn0t0wIS5zn6maQuvtT0t1oHtMUz61LOuow== dependencies: "@babel/helper-plugin-utils" "^7.18.9" "@babel/plugin-syntax-export-default-from" "^7.18.6" @@ -883,15 +861,15 @@ "@babel/plugin-transform-react-jsx" "^7.18.6" "@babel/plugin-transform-react-jsx@^7.12.12", "@babel/plugin-transform-react-jsx@^7.18.6": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.18.6.tgz#2721e96d31df96e3b7ad48ff446995d26bc028ff" - integrity sha512-Mz7xMPxoy9kPS/JScj6fJs03TZ/fZ1dJPlMjRAgTaxaS0fUBk8FV/A2rRgfPsVCZqALNwMexD+0Uaf5zlcKPpw== + version "7.18.10" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.18.10.tgz#ea47b2c4197102c196cbd10db9b3bb20daa820f1" + integrity sha512-gCy7Iikrpu3IZjYZolFE4M1Sm+nrh1/6za2Ewj77Z+XirT4TsbJcvOFOyF+fRPwU6AKKK136CZxx6L8AbSFG6A== dependencies: "@babel/helper-annotate-as-pure" "^7.18.6" "@babel/helper-module-imports" "^7.18.6" - "@babel/helper-plugin-utils" "^7.18.6" + "@babel/helper-plugin-utils" "^7.18.9" "@babel/plugin-syntax-jsx" "^7.18.6" - "@babel/types" "^7.18.6" + "@babel/types" "^7.18.10" "@babel/plugin-transform-react-pure-annotations@^7.18.6": version "7.18.6" @@ -916,18 +894,6 @@ dependencies: "@babel/helper-plugin-utils" "^7.18.6" -"@babel/plugin-transform-runtime@^7.18.9": - version "7.18.9" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.18.9.tgz#d9e4b1b25719307bfafbf43065ed7fb3a83adb8f" - integrity sha512-wS8uJwBt7/b/mzE13ktsJdmS4JP/j7PQSaADtnb4I2wL0zK51MQ0pmF8/Jy0wUIS96fr+fXT6S/ifiPXnvrlSg== - dependencies: - "@babel/helper-module-imports" "^7.18.6" - "@babel/helper-plugin-utils" "^7.18.9" - babel-plugin-polyfill-corejs2 "^0.3.1" - babel-plugin-polyfill-corejs3 "^0.5.2" - babel-plugin-polyfill-regenerator "^0.3.1" - semver "^6.3.0" - "@babel/plugin-transform-shorthand-properties@^7.12.1", "@babel/plugin-transform-shorthand-properties@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz#6d6df7983d67b195289be24909e3f12a8f664dc9" @@ -965,20 +931,20 @@ "@babel/helper-plugin-utils" "^7.18.9" "@babel/plugin-transform-typescript@^7.18.6": - version "7.18.8" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.18.8.tgz#303feb7a920e650f2213ef37b36bbf327e6fa5a0" - integrity sha512-p2xM8HI83UObjsZGofMV/EdYjamsDm6MoN3hXPYIT0+gxIoopE+B7rPYKAxfrz9K9PK7JafTTjqYC6qipLExYA== + version "7.18.10" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.18.10.tgz#b23401b32f1f079396bcaed01667a54ebe4f9f85" + integrity sha512-j2HQCJuMbi88QftIb5zlRu3c7PU+sXNnscqsrjqegoGiCgXR569pEdben9vly5QHKL2ilYkfnSwu64zsZo/VYQ== dependencies: - "@babel/helper-create-class-features-plugin" "^7.18.6" - "@babel/helper-plugin-utils" "^7.18.6" + "@babel/helper-create-class-features-plugin" "^7.18.9" + "@babel/helper-plugin-utils" "^7.18.9" "@babel/plugin-syntax-typescript" "^7.18.6" -"@babel/plugin-transform-unicode-escapes@^7.18.6": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.6.tgz#0d01fb7fb2243ae1c033f65f6e3b4be78db75f27" - integrity sha512-XNRwQUXYMP7VLuy54cr/KS/WeL3AZeORhrmeZ7iewgu+X2eBqmpaLI/hzqr9ZxCeUoq0ASK4GUzSM0BDhZkLFw== +"@babel/plugin-transform-unicode-escapes@^7.18.10": + version "7.18.10" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz#1ecfb0eda83d09bbcb77c09970c2dd55832aa246" + integrity sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ== dependencies: - "@babel/helper-plugin-utils" "^7.18.6" + "@babel/helper-plugin-utils" "^7.18.9" "@babel/plugin-transform-unicode-regex@^7.18.6": version "7.18.6" @@ -988,10 +954,10 @@ "@babel/helper-create-regexp-features-plugin" "^7.18.6" "@babel/helper-plugin-utils" "^7.18.6" -"@babel/preset-env@^7.12.11", "@babel/preset-env@^7.18.9": - version "7.18.9" - resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.18.9.tgz#9b3425140d724fbe590322017466580844c7eaff" - integrity sha512-75pt/q95cMIHWssYtyfjVlvI+QEZQThQbKvR9xH+F/Agtw/s4Wfc2V9Bwd/P39VtixB7oWxGdH4GteTTwYJWMg== +"@babel/preset-env@^7.12.11", "@babel/preset-env@^7.18.10": + version "7.18.10" + resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.18.10.tgz#83b8dfe70d7eea1aae5a10635ab0a5fe60dfc0f4" + integrity sha512-wVxs1yjFdW3Z/XkNfXKoblxoHgbtUF7/l3PvvP4m02Qz9TZ6uZGxRVYjSQeR87oQmHco9zWitW5J82DJ7sCjvA== dependencies: "@babel/compat-data" "^7.18.8" "@babel/helper-compilation-targets" "^7.18.9" @@ -999,7 +965,7 @@ "@babel/helper-validator-option" "^7.18.6" "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6" "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.18.9" - "@babel/plugin-proposal-async-generator-functions" "^7.18.6" + "@babel/plugin-proposal-async-generator-functions" "^7.18.10" "@babel/plugin-proposal-class-properties" "^7.18.6" "@babel/plugin-proposal-class-static-block" "^7.18.6" "@babel/plugin-proposal-dynamic-import" "^7.18.6" @@ -1059,13 +1025,13 @@ "@babel/plugin-transform-sticky-regex" "^7.18.6" "@babel/plugin-transform-template-literals" "^7.18.9" "@babel/plugin-transform-typeof-symbol" "^7.18.9" - "@babel/plugin-transform-unicode-escapes" "^7.18.6" + "@babel/plugin-transform-unicode-escapes" "^7.18.10" "@babel/plugin-transform-unicode-regex" "^7.18.6" "@babel/preset-modules" "^0.1.5" - "@babel/types" "^7.18.9" - babel-plugin-polyfill-corejs2 "^0.3.1" - babel-plugin-polyfill-corejs3 "^0.5.2" - babel-plugin-polyfill-regenerator "^0.3.1" + "@babel/types" "^7.18.10" + babel-plugin-polyfill-corejs2 "^0.3.2" + babel-plugin-polyfill-corejs3 "^0.5.3" + babel-plugin-polyfill-regenerator "^0.4.0" core-js-compat "^3.22.1" semver "^6.3.0" @@ -1089,7 +1055,7 @@ "@babel/types" "^7.4.4" esutils "^2.0.2" -"@babel/preset-react@^7.12.10", "@babel/preset-react@^7.18.6": +"@babel/preset-react@^7.12.10": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.18.6.tgz#979f76d6277048dc19094c217b507f3ad517dd2d" integrity sha512-zXr6atUmyYdiWRVLOZahakYmOBHtWc2WGCkP8PYTgZi0iJXDY2CN180TdrIW4OGOAdLc7TifzDIvtx6izaRIzg== @@ -1101,7 +1067,7 @@ "@babel/plugin-transform-react-jsx-development" "^7.18.6" "@babel/plugin-transform-react-pure-annotations" "^7.18.6" -"@babel/preset-typescript@^7.12.7": +"@babel/preset-typescript@^7.12.7", "@babel/preset-typescript@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz#ce64be3e63eddc44240c6358daefac17b3186399" integrity sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ== @@ -1129,43 +1095,44 @@ core-js-pure "^3.20.2" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.9", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a" integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw== dependencies: regenerator-runtime "^0.13.4" -"@babel/template@^7.12.7", "@babel/template@^7.18.6", "@babel/template@^7.3.3": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.6.tgz#1283f4993e00b929d6e2d3c72fdc9168a2977a31" - integrity sha512-JoDWzPe+wgBsTTgdnIma3iHNFC7YVJoPssVBDjiHfNlyt4YcunDtcDOUmfVDfCK5MfdsaIoX9PkijPhjH3nYUw== +"@babel/template@^7.12.7", "@babel/template@^7.18.10", "@babel/template@^7.18.6", "@babel/template@^7.3.3": + version "7.18.10" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71" + integrity sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA== dependencies: "@babel/code-frame" "^7.18.6" - "@babel/parser" "^7.18.6" - "@babel/types" "^7.18.6" + "@babel/parser" "^7.18.10" + "@babel/types" "^7.18.10" -"@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.18.9", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.2": - version "7.18.9" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.9.tgz#deeff3e8f1bad9786874cb2feda7a2d77a904f98" - integrity sha512-LcPAnujXGwBgv3/WHv01pHtb2tihcyW1XuL9wd7jqh1Z8AQkTd+QVjMrMijrln0T7ED3UXLIy36P9Ao7W75rYg== +"@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.18.10", "@babel/traverse@^7.18.11", "@babel/traverse@^7.18.9", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.2": + version "7.18.11" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.11.tgz#3d51f2afbd83ecf9912bcbb5c4d94e3d2ddaa16f" + integrity sha512-TG9PiM2R/cWCAy6BPJKeHzNbu4lPzOSZpeMfeNErskGpTJx6trEvFaVCbDvpcxwy49BKWmEPwiW8mrysNiDvIQ== dependencies: "@babel/code-frame" "^7.18.6" - "@babel/generator" "^7.18.9" + "@babel/generator" "^7.18.10" "@babel/helper-environment-visitor" "^7.18.9" "@babel/helper-function-name" "^7.18.9" "@babel/helper-hoist-variables" "^7.18.6" "@babel/helper-split-export-declaration" "^7.18.6" - "@babel/parser" "^7.18.9" - "@babel/types" "^7.18.9" + "@babel/parser" "^7.18.11" + "@babel/types" "^7.18.10" debug "^4.1.0" globals "^11.1.0" -"@babel/types@^7.0.0", "@babel/types@^7.12.11", "@babel/types@^7.12.7", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4": - version "7.18.9" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.9.tgz#7148d64ba133d8d73a41b3172ac4b83a1452205f" - integrity sha512-WwMLAg2MvJmt/rKEVQBBhIVffMmnilX4oe0sRe7iPOHIGsqpruFHHdrfj4O1CMMtgMtCU4oPafZjDPCRgO57Wg== +"@babel/types@^7.0.0", "@babel/types@^7.12.11", "@babel/types@^7.12.7", "@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4": + version "7.18.10" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.10.tgz#4908e81b6b339ca7c6b7a555a5fc29446f26dde6" + integrity sha512-MJvnbEiiNkpjo+LknnmRrqbY1GPUUggjv+wQVjetM/AONoupqRALB7I6jGqNUAZsKcRIEu2J6FRFvsczljjsaQ== dependencies: + "@babel/helper-string-parser" "^7.18.10" "@babel/helper-validator-identifier" "^7.18.6" to-fast-properties "^2.0.0" @@ -1263,16 +1230,16 @@ integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw== "@emotion/is-prop-valid@^1.1.0": - version "1.1.3" - resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz#f0907a416368cf8df9e410117068e20fe87c0a3a" - integrity sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA== + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83" + integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg== dependencies: - "@emotion/memoize" "^0.7.4" + "@emotion/memoize" "^0.8.0" -"@emotion/memoize@^0.7.4": - version "0.7.5" - resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50" - integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ== +"@emotion/memoize@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" + integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== "@emotion/stylis@^0.8.4": version "0.8.5" @@ -1284,6 +1251,11 @@ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== +"@esbuild/linux-loong64@0.14.53": + version "0.14.53" + resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.14.53.tgz#251b4cd6760fadb4d68a05815e6dc5e432d69cd6" + integrity sha512-W2dAL6Bnyn4xa/QRSU3ilIK4EzD5wgYXKXJiS1HDF5vU3675qc2bvFyLwbUcdmssDveyndy7FbitrCoiV/eMLg== + "@eslint/eslintrc@^1.3.0": version "1.3.0" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.0.tgz#29f92c30bb3e771e4a2048c95fa6855392dfac4f" @@ -1349,33 +1321,38 @@ p-defer "^3.0.0" "@grpc/grpc-js@~1.6.0": - version "1.6.7" - resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.6.7.tgz#4c4fa998ff719fe859ac19fe977fdef097bb99aa" - integrity sha512-eBM03pu9hd3VqDQG+kHahiG1x80RGkkqqRb1Pchcwqej/KkAH95gAvKs6laqaHCycYaPK+TKuNQnOz9UXYA8qw== + version "1.6.8" + resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.6.8.tgz#77cc8b2d841c34dea8b105d45ff1732caefae4f2" + integrity sha512-Nt5tufF/O5Q310kP0cDzxznWMZW58GCTZhUUiAQ9B0K0ANKNQ4Lj/K9XK0vZg+UBKq5/7z7+8mXHHfrcwoeFJQ== dependencies: - "@grpc/proto-loader" "^0.6.4" + "@grpc/proto-loader" "^0.7.0" "@types/node" ">=12.12.47" -"@grpc/proto-loader@^0.6.12", "@grpc/proto-loader@^0.6.4": - version "0.6.13" - resolved "https://registry.yarnpkg.com/@grpc/proto-loader/-/proto-loader-0.6.13.tgz#008f989b72a40c60c96cd4088522f09b05ac66bc" - integrity sha512-FjxPYDRTn6Ec3V0arm1FtSpmP6V50wuph2yILpyvTKzjc76oDdoihXqM1DzOW5ubvCC8GivfCnNtfaRE8myJ7g== +"@grpc/proto-loader@^0.7.0": + version "0.7.0" + resolved "https://registry.yarnpkg.com/@grpc/proto-loader/-/proto-loader-0.7.0.tgz#743cc8a941cc251620c66ebe0d330e1411a33535" + integrity sha512-SGPZtVmqOvNfPFOA/nNPn+0Weqa5wubBgQ56+JgTbeLY2VezwtMjwPPFzh0kvQccwWT3a2TXT0ZGK/pJoOTk1A== dependencies: "@types/long" "^4.0.1" lodash.camelcase "^4.3.0" long "^4.0.0" - protobufjs "^6.11.3" + protobufjs "^7.0.0" yargs "^16.2.0" -"@humanwhocodes/config-array@^0.9.2": - version "0.9.5" - resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7" - integrity sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw== +"@humanwhocodes/config-array@^0.10.4": + version "0.10.4" + resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.10.4.tgz#01e7366e57d2ad104feea63e72248f22015c520c" + integrity sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw== dependencies: "@humanwhocodes/object-schema" "^1.2.1" debug "^4.1.1" minimatch "^3.0.4" +"@humanwhocodes/gitignore-to-minimatch@^1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz#316b0a63b91c10e53f242efb4ace5c3b34e8728d" + integrity sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA== + "@humanwhocodes/object-schema@^1.2.1": version "1.2.1" resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" @@ -1675,7 +1652,7 @@ "@jridgewell/resolve-uri" "^3.0.3" "@jridgewell/sourcemap-codec" "^1.4.10" -"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.13", "@jridgewell/trace-mapping@^0.3.7", "@jridgewell/trace-mapping@^0.3.8", "@jridgewell/trace-mapping@^0.3.9": +"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.13", "@jridgewell/trace-mapping@^0.3.7", "@jridgewell/trace-mapping@^0.3.9": version "0.3.14" resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz#b231a081d8f66796e475ad588a1ef473112701ed" integrity sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ== @@ -1731,11 +1708,6 @@ call-me-maybe "^1.0.1" glob-to-regexp "^0.3.0" -"@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3": - version "2.1.8-no-fsevents.3" - resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b" - integrity sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ== - "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5" @@ -1763,9 +1735,9 @@ fastq "^1.6.0" "@npmcli/arborist@^5.0.0", "@npmcli/arborist@^5.0.4": - version "5.3.0" - resolved "https://registry.yarnpkg.com/@npmcli/arborist/-/arborist-5.3.0.tgz#321d9424677bfc08569e98a5ac445ee781f32053" - integrity sha512-+rZ9zgL1lnbl8Xbb1NQdMjveOMwj4lIYfcDtyJHHi5x4X8jtR6m8SXooJMZy5vmFVZ8w7A2Bnd/oX9eTuU8w5A== + version "5.4.0" + resolved "https://registry.yarnpkg.com/@npmcli/arborist/-/arborist-5.4.0.tgz#beef01e0b47c682b74cae4c9266f5720bf1cdf0a" + integrity sha512-gWDDQjoRndukgV9DLDXLqgzY2sIbUJ0D7JNgNlLuMFbei4Gm7EWYulpOyIjYxdYXM9b0L3sAniOOlOVMkMNMXA== dependencies: "@isaacs/string-locale-compare" "^1.1.0" "@npmcli/installed-package-contents" "^1.0.7" @@ -1775,12 +1747,14 @@ "@npmcli/name-from-folder" "^1.0.1" "@npmcli/node-gyp" "^2.0.0" "@npmcli/package-json" "^2.0.0" + "@npmcli/query" "^1.1.1" "@npmcli/run-script" "^4.1.3" bin-links "^3.0.0" cacache "^16.0.6" common-ancestor-path "^1.0.1" json-parse-even-better-errors "^2.3.1" json-stringify-nice "^1.1.4" + minimatch "^5.1.0" mkdirp "^1.0.4" mkdirp-infer-owner "^2.0.0" nopt "^5.0.0" @@ -1807,7 +1781,7 @@ resolved "https://registry.yarnpkg.com/@npmcli/ci-detect/-/ci-detect-2.0.0.tgz#e63c91bcd4185ac1e85720a34fc48e164ece5b89" integrity sha512-8yQtQ9ArHh/TzdUDKQwEvwCgpDuhSWTDAbiKMl3854PcT+Dk4UmWaiawuFTLy9n5twzXOBXVflWe+90/ffXQrA== -"@npmcli/config@^4.1.0": +"@npmcli/config@^4.2.0": version "4.2.0" resolved "https://registry.yarnpkg.com/@npmcli/config/-/config-4.2.0.tgz#62b5d2b9cbf93fb2bc9f7cc947f25d7659ef849f" integrity sha512-imWNz5dNWb2u+y41jyxL2WB389tkhu3a01Rchn16O/ur6GrnKySgOqdNG3N/9Z+mqxdISMEGKXI/POCauzz0dA== @@ -1836,10 +1810,10 @@ "@gar/promisify" "^1.0.1" semver "^7.3.5" -"@npmcli/fs@^2.1.0": - version "2.1.0" - resolved "https://registry.yarnpkg.com/@npmcli/fs/-/fs-2.1.0.tgz#f2a21c28386e299d1a9fae8051d35ad180e33109" - integrity sha512-DmfBvNXGaetMxj9LTp8NAN9vEidXURrf5ZTslQzEAi/6GbW+4yjaLFQc6Tue5cpZ9Frlk4OBo/Snf1Bh/S7qTQ== +"@npmcli/fs@^2.1.0", "@npmcli/fs@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@npmcli/fs/-/fs-2.1.1.tgz#c0c480b03450d8b9fc086816a50cb682668a48bf" + integrity sha512-1Q0uzx6c/NVNGszePbr5Gc2riSU1zLpNlo/1YWntH+eaPmMgBssAW0qXofCVkpdj3ce4swZtlDYQu+NKiYcptg== dependencies: "@gar/promisify" "^1.1.3" semver "^7.3.5" @@ -1868,9 +1842,9 @@ npm-normalize-package-bin "^1.0.1" "@npmcli/map-workspaces@^2.0.2", "@npmcli/map-workspaces@^2.0.3": - version "2.0.3" - resolved "https://registry.yarnpkg.com/@npmcli/map-workspaces/-/map-workspaces-2.0.3.tgz#2d3c75119ee53246e9aa75bc469a55281cd5f08f" - integrity sha512-X6suAun5QyupNM8iHkNPh0AHdRC2rb1W+MTdMvvA/2ixgmqZwlq5cGUBgmKHUHT2LgrkKJMAXbfAoTxOigpK8Q== + version "2.0.4" + resolved "https://registry.yarnpkg.com/@npmcli/map-workspaces/-/map-workspaces-2.0.4.tgz#9e5e8ab655215a262aefabf139782b894e0504fc" + integrity sha512-bMo0aAfwhVwqoVM5UzX1DJnlvVvzDCHae821jv48L1EsrYwfOZChlqWYXEtto/+BkBXetPbEWgau++/brh4oVg== dependencies: "@npmcli/name-from-folder" "^1.0.1" glob "^8.0.1" @@ -1927,10 +1901,19 @@ dependencies: infer-owner "^1.0.4" -"@npmcli/run-script@^4.1.0", "@npmcli/run-script@^4.1.3", "@npmcli/run-script@^4.1.7": - version "4.1.7" - resolved "https://registry.yarnpkg.com/@npmcli/run-script/-/run-script-4.1.7.tgz#b1a2f57568eb738e45e9ea3123fb054b400a86f7" - integrity sha512-WXr/MyM4tpKA4BotB81NccGAv8B48lNH0gRoILucbcAhTQXLCoi6HflMV3KdXubIqvP9SuLsFn68Z7r4jl+ppw== +"@npmcli/query@^1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@npmcli/query/-/query-1.1.1.tgz#462c4268473ae39e89d5fefbad94d9af7e1217c4" + integrity sha512-UF3I0fD94wzQ84vojMO2jDB8ibjRSTqhi8oz2mzVKiJ9gZHbeGlu9kzPvgHuGDK0Hf2cARhWtTfCDHNEwlL9hg== + dependencies: + npm-package-arg "^9.1.0" + postcss-selector-parser "^6.0.10" + semver "^7.3.7" + +"@npmcli/run-script@^4.1.0", "@npmcli/run-script@^4.1.3", "@npmcli/run-script@^4.2.0": + version "4.2.0" + resolved "https://registry.yarnpkg.com/@npmcli/run-script/-/run-script-4.2.0.tgz#2c25758f80831ba138afe25225d456e89acedac3" + integrity sha512-e/QgLg7j2wSJp1/7JRl0GC8c7PMX+uYlA/1Tb+IDOLdSM4T7K1VQ9mm9IGU3WRtY5vEIObpqCLb3aCNCug18DA== dependencies: "@npmcli/node-gyp" "^2.0.0" "@npmcli/promise-spawn" "^3.0.0" @@ -1976,17 +1959,17 @@ "@octokit/types" "^6.0.3" universal-user-agent "^6.0.0" -"@octokit/openapi-types@^12.10.0": - version "12.10.1" - resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-12.10.1.tgz#57b5cc6c7b4e55d8642c93d06401fb1af4839899" - integrity sha512-P+SukKanjFY0ZhsK6wSVnQmxTP2eVPPE8OPSNuxaMYtgVzwJZgfGdwlYjf4RlRU4vLEw4ts2fsE2icG4nZ5ddQ== +"@octokit/openapi-types@^12.11.0": + version "12.11.0" + resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-12.11.0.tgz#da5638d64f2b919bca89ce6602d059f1b52d3ef0" + integrity sha512-VsXyi8peyRq9PqIz/tpqiL2w3w80OgVMwBHltTml3LmVvXiphgeqmY9mvBw9Wu7e0QWk/fqD37ux8yP5uVekyQ== "@octokit/plugin-paginate-rest@^3.0.0": - version "3.0.0" - resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-3.0.0.tgz#df779de686aeb21b5e776e4318defc33b0418566" - integrity sha512-fvw0Q5IXnn60D32sKeLIxgXCEZ7BTSAjJd8cFAE6QU5qUp0xo7LjFUjjX1J5D7HgN355CN4EXE4+Q1/96JaNUA== + version "3.1.0" + resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-3.1.0.tgz#86f8be759ce2d6d7c879a31490fd2f7410b731f0" + integrity sha512-+cfc40pMzWcLkoDcLb1KXqjX0jTGYXjKuQdFQDc6UAknISJHnZTiBqld6HDwRJvD4DsouDKrWXNbNV0lE/3AXA== dependencies: - "@octokit/types" "^6.39.0" + "@octokit/types" "^6.41.0" "@octokit/plugin-request-log@^1.0.4": version "1.0.4" @@ -1994,11 +1977,11 @@ integrity sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA== "@octokit/plugin-rest-endpoint-methods@^6.0.0": - version "6.1.2" - resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-6.1.2.tgz#bbf55cfc43acf177514441ecd1d26031006f73ed" - integrity sha512-sAfSKtLHNq0UQ2iFuI41I6m5SK6bnKFRJ5kUjDRVbmQXiRVi4aQiIcgG4cM7bt+bhSiWL4HwnTxDkWFlKeKClA== + version "6.2.0" + resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-6.2.0.tgz#c06359d2f94436f8c67d345093cb02dedd31d974" + integrity sha512-PZ+yfkbZAuRUtqu6Y191/V3eM0KBPx+Yq7nh+ONPdpm3EX4pd5UnK2y2XgO/0AtNum5a4aJCDjqsDuUZ2hWRXw== dependencies: - "@octokit/types" "^6.40.0" + "@octokit/types" "^6.41.0" deprecation "^2.3.1" "@octokit/request-error@^3.0.0": @@ -2032,12 +2015,12 @@ "@octokit/plugin-request-log" "^1.0.4" "@octokit/plugin-rest-endpoint-methods" "^6.0.0" -"@octokit/types@^6.0.3", "@octokit/types@^6.16.1", "@octokit/types@^6.39.0", "@octokit/types@^6.40.0": - version "6.40.0" - resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.40.0.tgz#f2e665196d419e19bb4265603cf904a820505d0e" - integrity sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw== +"@octokit/types@^6.0.3", "@octokit/types@^6.16.1", "@octokit/types@^6.41.0": + version "6.41.0" + resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.41.0.tgz#e58ef78d78596d2fb7df9c6259802464b5f84a04" + integrity sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg== dependencies: - "@octokit/openapi-types" "^12.10.0" + "@octokit/openapi-types" "^12.11.0" "@opentelemetry/api@^1.0.0": version "1.1.0" @@ -2218,9 +2201,9 @@ read-pkg-up "^7.0.0" "@sinclair/typebox@^0.24.1": - version "0.24.20" - resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.20.tgz#11a657875de6008622d53f56e063a6347c51a6dd" - integrity sha512-kVaO5aEFZb33nPMTZBxiPEkY+slxiPtqC7QX8f9B3eGOMBvEfuMfxp9DSTTCsRJPumPKjrge4yagyssO4q6qzQ== + version "0.24.27" + resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.27.tgz#d55643516a1546174e10da681a8aaa81e757452d" + integrity sha512-K7C7IlQ3zLePEZleUN21ceBA2aLcMnLHTLph8QWk1JK37L90obdpY+QGY8bXMKxf1ht1Z0MNewvXxWv0oGDYFg== "@sindresorhus/is@^0.14.0": version "0.14.0" @@ -2241,29 +2224,29 @@ dependencies: "@sinonjs/commons" "^1.7.0" -"@storybook/addon-docs@^6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.5.9.tgz#32b27fb298624afd738c1371a764d7ff4831fe6d" - integrity sha512-9lwOZyiOJFUgGd9ADVfcgpels5o0XOXqGMeVLuzT1160nopbZjNjo/3+YLJ0pyHRPpMJ4rmq2+vxRQR6PVRgPg== +"@storybook/addon-docs@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.5.10.tgz#dde18b5659e8033651e139a231a7f69306433b92" + integrity sha512-1kgjo3f0vL6GN8fTwLL05M/q/kDdzvuqwhxPY/v5hubFb3aQZGr2yk9pRBaLAbs4bez0yG0ASXcwhYnrEZUppg== dependencies: "@babel/plugin-transform-react-jsx" "^7.12.12" "@babel/preset-env" "^7.12.11" "@jest/transform" "^26.6.2" "@mdx-js/react" "^1.6.22" - "@storybook/addons" "6.5.9" - "@storybook/api" "6.5.9" - "@storybook/components" "6.5.9" - "@storybook/core-common" "6.5.9" - "@storybook/core-events" "6.5.9" + "@storybook/addons" "6.5.10" + "@storybook/api" "6.5.10" + "@storybook/components" "6.5.10" + "@storybook/core-common" "6.5.10" + "@storybook/core-events" "6.5.10" "@storybook/csf" "0.0.2--canary.4566f4d.1" - "@storybook/docs-tools" "6.5.9" + "@storybook/docs-tools" "6.5.10" "@storybook/mdx1-csf" "^0.0.1" - "@storybook/node-logger" "6.5.9" - "@storybook/postinstall" "6.5.9" - "@storybook/preview-web" "6.5.9" - "@storybook/source-loader" "6.5.9" - "@storybook/store" "6.5.9" - "@storybook/theming" "6.5.9" + "@storybook/node-logger" "6.5.10" + "@storybook/postinstall" "6.5.10" + "@storybook/preview-web" "6.5.10" + "@storybook/source-loader" "6.5.10" + "@storybook/store" "6.5.10" + "@storybook/theming" "6.5.10" babel-loader "^8.0.0" core-js "^3.8.2" fast-deep-equal "^3.1.3" @@ -2275,18 +2258,18 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/addon-storysource@^6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/addon-storysource/-/addon-storysource-6.5.9.tgz#8e5fb76b9314a69831a3b5e08e8570407c39de75" - integrity sha512-7KLw03mE1JJSJQrqNDftoVVp2BBq8wltd0qo7WHkpRVfir9dMO3g7Wy6S6UPsrb9th47ZjonwBJEc28GwAq0yg== - dependencies: - "@storybook/addons" "6.5.9" - "@storybook/api" "6.5.9" - "@storybook/client-logger" "6.5.9" - "@storybook/components" "6.5.9" - "@storybook/router" "6.5.9" - "@storybook/source-loader" "6.5.9" - "@storybook/theming" "6.5.9" +"@storybook/addon-storysource@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/addon-storysource/-/addon-storysource-6.5.10.tgz#620619088657f247023d454dbaff3a2e1ccd7537" + integrity sha512-DM3UcbdqPfTBcpXr1AuzAs0DDTBnXMpXvOEkdoTTtGpbPIyA+J5KWeW1pAWqZlzI4k0UemJrAm2G6n/gGGBUiQ== + dependencies: + "@storybook/addons" "6.5.10" + "@storybook/api" "6.5.10" + "@storybook/client-logger" "6.5.10" + "@storybook/components" "6.5.10" + "@storybook/router" "6.5.10" + "@storybook/source-loader" "6.5.10" + "@storybook/theming" "6.5.10" core-js "^3.8.2" estraverse "^5.2.0" loader-utils "^2.0.0" @@ -2294,35 +2277,35 @@ react-syntax-highlighter "^15.4.5" regenerator-runtime "^0.13.7" -"@storybook/addons@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.9.tgz#5a9d7395c579a9cbc44dfc122362fb3c95dfb9d5" - integrity sha512-adwdiXg+mntfPocLc1KXjZXyLgGk7Aac699Fwe+OUYPEC5tW347Rm/kFatcE556d42o5czcRiq3ZSIGWnm9ieQ== +"@storybook/addons@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.10.tgz#bff2f8fb8453e9df04fa6dbc41341fd05f4cdeba" + integrity sha512-VD4tBCQ23PkSeDoxuHcKy0RfhIs3oMYjBacOZx7d0bvOzK9WjPyvE2ysDAh7r/ceqnwmWHAScIpE+I1RU7gl+g== dependencies: - "@storybook/api" "6.5.9" - "@storybook/channels" "6.5.9" - "@storybook/client-logger" "6.5.9" - "@storybook/core-events" "6.5.9" + "@storybook/api" "6.5.10" + "@storybook/channels" "6.5.10" + "@storybook/client-logger" "6.5.10" + "@storybook/core-events" "6.5.10" "@storybook/csf" "0.0.2--canary.4566f4d.1" - "@storybook/router" "6.5.9" - "@storybook/theming" "6.5.9" + "@storybook/router" "6.5.10" + "@storybook/theming" "6.5.10" "@types/webpack-env" "^1.16.0" core-js "^3.8.2" global "^4.4.0" regenerator-runtime "^0.13.7" -"@storybook/api@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.9.tgz#303733214c9de0422d162f7c54ae05d088b89bf9" - integrity sha512-9ylztnty4Y+ALU/ehW3BML9czjCAFsWvrwuCi6UgcwNjswwjSX3VRLhfD1KT3pl16ho//95LgZ0LnSwROCcPOA== +"@storybook/api@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.10.tgz#215623844648f0da2ac646fdcdd1345c2e1a8490" + integrity sha512-AkmgSPNEGdKp4oZA4KQ+RJsacw7GwfvjsVDnCkcXqS9zmSr/RNL0fhpcd60KKkmx/hGKPTDFpK3ZayxDrJ/h4A== dependencies: - "@storybook/channels" "6.5.9" - "@storybook/client-logger" "6.5.9" - "@storybook/core-events" "6.5.9" + "@storybook/channels" "6.5.10" + "@storybook/client-logger" "6.5.10" + "@storybook/core-events" "6.5.10" "@storybook/csf" "0.0.2--canary.4566f4d.1" - "@storybook/router" "6.5.9" + "@storybook/router" "6.5.10" "@storybook/semver" "^7.3.2" - "@storybook/theming" "6.5.9" + "@storybook/theming" "6.5.10" core-js "^3.8.2" fast-deep-equal "^3.1.3" global "^4.4.0" @@ -2334,28 +2317,28 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/builder-webpack4@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.5.9.tgz#4b37e1fa23a25aa4bfeaba640e5d318fcd511f95" - integrity sha512-YOeA4++9uRZ8Hog1wC60yjaxBOiI1FRQNtax7b9E7g+kP8UlSCPCGcv4gls9hFmzbzTOPfQTWnToA9Oa6jzRVw== +"@storybook/builder-webpack4@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.5.10.tgz#79e95323577a37349ab3c81193fa249ac5c50173" + integrity sha512-AoKjsCNoQQoZXYwBDxO8s+yVEd5FjBJAaysEuUTHq2fb81jwLrGcEOo6hjw4jqfugZQIzYUEjPazlvubS78zpw== dependencies: "@babel/core" "^7.12.10" - "@storybook/addons" "6.5.9" - "@storybook/api" "6.5.9" - "@storybook/channel-postmessage" "6.5.9" - "@storybook/channels" "6.5.9" - "@storybook/client-api" "6.5.9" - "@storybook/client-logger" "6.5.9" - "@storybook/components" "6.5.9" - "@storybook/core-common" "6.5.9" - "@storybook/core-events" "6.5.9" - "@storybook/node-logger" "6.5.9" - "@storybook/preview-web" "6.5.9" - "@storybook/router" "6.5.9" + "@storybook/addons" "6.5.10" + "@storybook/api" "6.5.10" + "@storybook/channel-postmessage" "6.5.10" + "@storybook/channels" "6.5.10" + "@storybook/client-api" "6.5.10" + "@storybook/client-logger" "6.5.10" + "@storybook/components" "6.5.10" + "@storybook/core-common" "6.5.10" + "@storybook/core-events" "6.5.10" + "@storybook/node-logger" "6.5.10" + "@storybook/preview-web" "6.5.10" + "@storybook/router" "6.5.10" "@storybook/semver" "^7.3.2" - "@storybook/store" "6.5.9" - "@storybook/theming" "6.5.9" - "@storybook/ui" "6.5.9" + "@storybook/store" "6.5.10" + "@storybook/theming" "6.5.10" + "@storybook/ui" "6.5.10" "@types/node" "^14.0.10 || ^16.0.0" "@types/webpack" "^4.41.26" autoprefixer "^9.8.6" @@ -2387,51 +2370,95 @@ webpack-hot-middleware "^2.25.1" webpack-virtual-modules "^0.2.2" -"@storybook/channel-postmessage@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.5.9.tgz#9cf4530f0364cee0d5e58f92d6fb5ce98e10257b" - integrity sha512-pX/0R8UW7ezBhCrafRaL20OvMRcmESYvQQCDgjqSzJyHkcG51GOhsd6Ge93eJ6QvRMm9+w0Zs93N2VKjVtz0Qw== +"@storybook/builder-webpack5@^6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-6.5.10.tgz#de78a8a262410bbe65eecc62f2beaed1fe44dd5d" + integrity sha512-Hcsm/TzGRXHndgQCftt+pzI7GQJRqAv8A8ie5b3aFcodhJfK0qzZsQD4Y4ZWxXh1I/xe5t74Kl2qUJ40PX+geA== + dependencies: + "@babel/core" "^7.12.10" + "@storybook/addons" "6.5.10" + "@storybook/api" "6.5.10" + "@storybook/channel-postmessage" "6.5.10" + "@storybook/channels" "6.5.10" + "@storybook/client-api" "6.5.10" + "@storybook/client-logger" "6.5.10" + "@storybook/components" "6.5.10" + "@storybook/core-common" "6.5.10" + "@storybook/core-events" "6.5.10" + "@storybook/node-logger" "6.5.10" + "@storybook/preview-web" "6.5.10" + "@storybook/router" "6.5.10" + "@storybook/semver" "^7.3.2" + "@storybook/store" "6.5.10" + "@storybook/theming" "6.5.10" + "@types/node" "^14.0.10 || ^16.0.0" + babel-loader "^8.0.0" + babel-plugin-named-exports-order "^0.0.2" + browser-assert "^1.2.1" + case-sensitive-paths-webpack-plugin "^2.3.0" + core-js "^3.8.2" + css-loader "^5.0.1" + fork-ts-checker-webpack-plugin "^6.0.4" + glob "^7.1.6" + glob-promise "^3.4.0" + html-webpack-plugin "^5.0.0" + path-browserify "^1.0.1" + process "^0.11.10" + stable "^0.1.8" + style-loader "^2.0.0" + terser-webpack-plugin "^5.0.3" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + webpack "^5.9.0" + webpack-dev-middleware "^4.1.0" + webpack-hot-middleware "^2.25.1" + webpack-virtual-modules "^0.4.1" + +"@storybook/channel-postmessage@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.5.10.tgz#be8971b4b7f91b664bb2c6965fdfb073d541a03e" + integrity sha512-t9PTA0UzFvYa3IlOfpBOolfrRMPTjUMIeCQ6FNyM0aj5GqLKSvoQzP8NeoRpIrvyf6ljFKKdaMaZ3fiCvh45ag== dependencies: - "@storybook/channels" "6.5.9" - "@storybook/client-logger" "6.5.9" - "@storybook/core-events" "6.5.9" + "@storybook/channels" "6.5.10" + "@storybook/client-logger" "6.5.10" + "@storybook/core-events" "6.5.10" core-js "^3.8.2" global "^4.4.0" qs "^6.10.0" telejson "^6.0.8" -"@storybook/channel-websocket@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/channel-websocket/-/channel-websocket-6.5.9.tgz#6b7a0127fec58ee5be4f6aebcf460adc564f2f34" - integrity sha512-xtHvSNwuOhkgALwVshKWsoFhDmuvcosdYfxcfFGEiYKXIu46tRS5ZXmpmgEC/0JAVkVoFj5nL8bV7IY5np6oaA== +"@storybook/channel-websocket@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/channel-websocket/-/channel-websocket-6.5.10.tgz#bd1316a9b555229b215e5054a76b57c503dd8adc" + integrity sha512-RTXMZbMWCS3xU+4GVIdfnUXsKcwg/WTozy88/5OxaKjGw6KgRedqLAQJKJ6Y5XlnwIcWelirkHj/COwTTXhbPg== dependencies: - "@storybook/channels" "6.5.9" - "@storybook/client-logger" "6.5.9" + "@storybook/channels" "6.5.10" + "@storybook/client-logger" "6.5.10" core-js "^3.8.2" global "^4.4.0" telejson "^6.0.8" -"@storybook/channels@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.9.tgz#abfab89a6587a2688e9926d4aafeb11c9d8b2e79" - integrity sha512-FvGA35nV38UPXWOl9ERapFTJaxwSTamQ339s2Ev7E9riyRG+GRkgTWzf5kECJgS1PAYKd/7m/RqKJT9BVv6A5g== +"@storybook/channels@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.10.tgz#fca5b0d1ea8d30b022e805301ed436407c867ac4" + integrity sha512-lo26YZ6kWpHXLhuHJF4P/bICY7jD/rXEZqReKtGOSk1Lv99/xvG6pqmcy3hWLf3v3Dy/8otjRPSR7izFVIIZgQ== dependencies: core-js "^3.8.2" ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/client-api@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.5.9.tgz#3e4a8ec1d277fd81325c5d959c553161a85fa182" - integrity sha512-pc7JKJoWLesixUKvG2nV36HukUuYoGRyAgD3PpIV7qSBS4JixqZ3VAHFUtqV1UzfOSQTovLSl4a0rIRnpie6gA== +"@storybook/client-api@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.5.10.tgz#0bc3f68ce014ce1ffd560472a893ba04be370f09" + integrity sha512-3wBWZl3NvMFgMovgEh+euiARAT2FXzpvTF4Q1gerGMNNDlrGxHnFvSuy4FHg/irtOGLa4yLz43ULFbYtpKw0Lg== dependencies: - "@storybook/addons" "6.5.9" - "@storybook/channel-postmessage" "6.5.9" - "@storybook/channels" "6.5.9" - "@storybook/client-logger" "6.5.9" - "@storybook/core-events" "6.5.9" + "@storybook/addons" "6.5.10" + "@storybook/channel-postmessage" "6.5.10" + "@storybook/channels" "6.5.10" + "@storybook/client-logger" "6.5.10" + "@storybook/core-events" "6.5.10" "@storybook/csf" "0.0.2--canary.4566f4d.1" - "@storybook/store" "6.5.9" + "@storybook/store" "6.5.10" "@types/qs" "^6.9.5" "@types/webpack-env" "^1.16.0" core-js "^3.8.2" @@ -2446,45 +2473,43 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/client-logger@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.9.tgz#dc1669abe8c45af1cc38f74c6f4b15ff33e63014" - integrity sha512-DOHL6p0uiDd3gV/Sb2FR+Vh6OiPrrf8BrA06uvXWsMRIIvEEvnparxv9EvPg7FlmUX0T3nq7d3juwjx4F8Wbcg== +"@storybook/client-logger@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.10.tgz#cfea823a5b8444409daa74f854c5d05367986b34" + integrity sha512-/xA0MHOevXev68hyLMQw8Qo8KczSIdXOxliAgrycMTkDmw5eKeA8TP7B8zP3wGuq/e3MrdD9/8MWhb/IQBNC3w== dependencies: core-js "^3.8.2" global "^4.4.0" -"@storybook/components@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.9.tgz#97e07ffe11ab76c01ccee380888991bd161f75b2" - integrity sha512-BhfX980O9zn/1J4FNMeDo8ZvL1m5Ml3T4HRpfYmEBnf8oW5b5BeF6S2K2cwFStZRjWqm1feUcwNpZxCBVMkQnQ== +"@storybook/components@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.10.tgz#268e1269bc3d262f7dcec13f96c3b844919687b8" + integrity sha512-9OhgB8YQfGwOKjo/N96N5mrtJ6qDVVoEM1zuhea32tJUd2eYf0aSWpryA9VnOM0V1q/8DAoCg5rPBMYWMBU5uw== dependencies: - "@storybook/client-logger" "6.5.9" + "@storybook/client-logger" "6.5.10" "@storybook/csf" "0.0.2--canary.4566f4d.1" - "@storybook/theming" "6.5.9" - "@types/react-syntax-highlighter" "11.0.5" + "@storybook/theming" "6.5.10" core-js "^3.8.2" memoizerific "^1.11.3" qs "^6.10.0" - react-syntax-highlighter "^15.4.5" regenerator-runtime "^0.13.7" util-deprecate "^1.0.2" -"@storybook/core-client@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.5.9.tgz#ea6035d1c90d2c68e860e3cf629979491856cd88" - integrity sha512-LY0QbhShowO+PQx3gao3wdVjpKMH1AaSLmuI95FrcjoMmSXGf96jVLKQp9mJRGeHIsAa93EQBYuCihZycM3Kbg== - dependencies: - "@storybook/addons" "6.5.9" - "@storybook/channel-postmessage" "6.5.9" - "@storybook/channel-websocket" "6.5.9" - "@storybook/client-api" "6.5.9" - "@storybook/client-logger" "6.5.9" - "@storybook/core-events" "6.5.9" +"@storybook/core-client@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.5.10.tgz#90c86923236c8efff33d454a0dc552f6df4346b1" + integrity sha512-THsIjNrOrampTl0Lgfjvfjk1JnktKb4CQLOM80KpQb4cjDqorBjJmErzUkUQ2y3fXvrDmQ/kUREkShET4XEdtA== + dependencies: + "@storybook/addons" "6.5.10" + "@storybook/channel-postmessage" "6.5.10" + "@storybook/channel-websocket" "6.5.10" + "@storybook/client-api" "6.5.10" + "@storybook/client-logger" "6.5.10" + "@storybook/core-events" "6.5.10" "@storybook/csf" "0.0.2--canary.4566f4d.1" - "@storybook/preview-web" "6.5.9" - "@storybook/store" "6.5.9" - "@storybook/ui" "6.5.9" + "@storybook/preview-web" "6.5.10" + "@storybook/store" "6.5.10" + "@storybook/ui" "6.5.10" airbnb-js-shims "^2.2.1" ansi-to-html "^0.6.11" core-js "^3.8.2" @@ -2496,10 +2521,10 @@ unfetch "^4.2.0" util-deprecate "^1.0.2" -"@storybook/core-common@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.5.9.tgz#7ca8258ea2634b1d64695c1e4262f71cc7457989" - integrity sha512-NxOK0mrOCo0TWZ7Npc5HU66EKoRHlrtg18/ZixblLDWQMIqY9XCck8K1kJ8QYpYCHla+aHIsYUArFe2vhlEfZA== +"@storybook/core-common@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.5.10.tgz#6b93449548b0890f5c68d89f0ca78e092026182c" + integrity sha512-Bx+VKkfWdrAmD8T51Sjq/mMhRaiapBHcpG4cU5bc3DMbg+LF2/yrgqv/cjVu+m5gHAzYCac5D7gqzBgvG7Myww== dependencies: "@babel/core" "^7.12.10" "@babel/plugin-proposal-class-properties" "^7.12.1" @@ -2523,7 +2548,7 @@ "@babel/preset-react" "^7.12.10" "@babel/preset-typescript" "^7.12.7" "@babel/register" "^7.12.1" - "@storybook/node-logger" "6.5.9" + "@storybook/node-logger" "6.5.10" "@storybook/semver" "^7.3.2" "@types/node" "^14.0.10 || ^16.0.0" "@types/pretty-hrtime" "^1.0.0" @@ -2552,30 +2577,30 @@ util-deprecate "^1.0.2" webpack "4" -"@storybook/core-events@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.9.tgz#5b0783c7d22a586c0f5e927a61fe1b1223e19637" - integrity sha512-tXt7a3ZvJOCeEKpNa/B5rQM5VI7UJLlOh3IHOImWn4HqoBRrZvbourmac+PRZAtXpos0h3c6554Hjapj/Sny5Q== +"@storybook/core-events@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.10.tgz#66d87c8ea18db8e448018a16a3d0198ddbcbc683" + integrity sha512-EVb1gO1172klVIAABLOoigFMx0V88uctY0K/qVCO8n6v+wd2+0Ccn63kl+gTxsAC3WZ8XhXh9q2w5ImHklVECw== dependencies: core-js "^3.8.2" -"@storybook/core-server@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.5.9.tgz#749a881c1a81d7cf1a69f3782c06a7f0c39a505c" - integrity sha512-YeePGUrd5fQPvGzMhowh124KrcZURFpFXg1VB0Op3ESqCIsInoMZeObci4Gc+binMXC7vcv7aw3EwSLU37qJzQ== +"@storybook/core-server@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.5.10.tgz#ada3d647833c02cb8c742281c1f314ff866f96f8" + integrity sha512-jqwpA0ccA8X5ck4esWBid04+cEIVqirdAcqJeNb9IZAD+bRreO4Im8ilzr7jc5AmQ9fkqHs2NByFKh9TITp8NQ== dependencies: "@discoveryjs/json-ext" "^0.5.3" - "@storybook/builder-webpack4" "6.5.9" - "@storybook/core-client" "6.5.9" - "@storybook/core-common" "6.5.9" - "@storybook/core-events" "6.5.9" + "@storybook/builder-webpack4" "6.5.10" + "@storybook/core-client" "6.5.10" + "@storybook/core-common" "6.5.10" + "@storybook/core-events" "6.5.10" "@storybook/csf" "0.0.2--canary.4566f4d.1" - "@storybook/csf-tools" "6.5.9" - "@storybook/manager-webpack4" "6.5.9" - "@storybook/node-logger" "6.5.9" + "@storybook/csf-tools" "6.5.10" + "@storybook/manager-webpack4" "6.5.10" + "@storybook/node-logger" "6.5.10" "@storybook/semver" "^7.3.2" - "@storybook/store" "6.5.9" - "@storybook/telemetry" "6.5.9" + "@storybook/store" "6.5.10" + "@storybook/telemetry" "6.5.10" "@types/node" "^14.0.10 || ^16.0.0" "@types/node-fetch" "^2.5.7" "@types/pretty-hrtime" "^1.0.0" @@ -2610,18 +2635,18 @@ ws "^8.2.3" x-default-browser "^0.4.0" -"@storybook/core@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.5.9.tgz#da4f237391d99aed1228323f24b335cafbdf3499" - integrity sha512-Mt3TTQnjQt2/pa60A+bqDsAOrYpohapdtt4DDZEbS8h0V6u11KyYYh3w7FCySlL+sPEyogj63l5Ec76Jah3l2w== +"@storybook/core@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.5.10.tgz#15ec8be85943251e25c2c24e80e20dcacc4fed65" + integrity sha512-K86yYa0tYlMxADlwQTculYvPROokQau09SCVqpsLg3wJCTvYFL4+SIqcYoyBSbFmHOdnYbJgPydjN33MYLiOZQ== dependencies: - "@storybook/core-client" "6.5.9" - "@storybook/core-server" "6.5.9" + "@storybook/core-client" "6.5.10" + "@storybook/core-server" "6.5.10" -"@storybook/csf-tools@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-6.5.9.tgz#8e01df2305b53e228229f0b45ada3720e6e42a1c" - integrity sha512-RAdhsO2XmEDyWy0qNQvdKMLeIZAuyfD+tYlUwBHRU6DbByDucvwgMOGy5dF97YNJFmyo93EUYJzXjUrJs3U1LQ== +"@storybook/csf-tools@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-6.5.10.tgz#ae6f1ebd4951e8978c8fe3e08ddd2bd269bf922b" + integrity sha512-H77kZQEisu7+skzeIbNZwmE09OqLjwJTeFhLN1pcjxKVa30LEI3pBHcNBxVKqgxl+Yg3KkB7W/ArLO2N+i2ohw== dependencies: "@babel/core" "^7.12.10" "@babel/generator" "^7.12.11" @@ -2645,33 +2670,33 @@ dependencies: lodash "^4.17.15" -"@storybook/docs-tools@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-6.5.9.tgz#5ff304f881e972ce14923a5ffcfed3f052094889" - integrity sha512-UoTaXLvec8x+q+4oYIk/t8DBju9C3ZTGklqOxDIt+0kS3TFAqEgI3JhKXqQOXgN5zDcvLVSxi8dbVAeSxk2ktA== +"@storybook/docs-tools@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-6.5.10.tgz#30baa62c1ca3a18b13625b6b305e23e39f404416" + integrity sha512-/bvYgOO+CxMEcHifkjJg0A60OTGOhcjGxnsB1h0gJuxMrqA/7Qwc108bFmPiX0eiD1BovFkZLJV4O6OY7zP5Vw== dependencies: "@babel/core" "^7.12.10" "@storybook/csf" "0.0.2--canary.4566f4d.1" - "@storybook/store" "6.5.9" + "@storybook/store" "6.5.10" core-js "^3.8.2" doctrine "^3.0.0" lodash "^4.17.21" regenerator-runtime "^0.13.7" -"@storybook/manager-webpack4@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.5.9.tgz#c75d2cced4550c8a786f00b0e57b203d613e706c" - integrity sha512-49LZlHqWc7zj9tQfOOANixPYmLxqWTTZceA6DSXnKd9xDiO2Gl23Y+l/CSPXNZGDB8QFAwpimwqyKJj/NLH45A== +"@storybook/manager-webpack4@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.5.10.tgz#41bae252b863484f293954ef2d2dc80bf3e028f1" + integrity sha512-N/TlNDhuhARuFipR/ZJ/xEVESz23iIbCsZ4VNehLHm8PpiGlQUehk+jMjWmz5XV0bJItwjRclY+CU3GjZKblfQ== dependencies: "@babel/core" "^7.12.10" "@babel/plugin-transform-template-literals" "^7.12.1" "@babel/preset-react" "^7.12.10" - "@storybook/addons" "6.5.9" - "@storybook/core-client" "6.5.9" - "@storybook/core-common" "6.5.9" - "@storybook/node-logger" "6.5.9" - "@storybook/theming" "6.5.9" - "@storybook/ui" "6.5.9" + "@storybook/addons" "6.5.10" + "@storybook/core-client" "6.5.10" + "@storybook/core-common" "6.5.10" + "@storybook/node-logger" "6.5.10" + "@storybook/theming" "6.5.10" + "@storybook/ui" "6.5.10" "@types/node" "^14.0.10 || ^16.0.0" "@types/webpack" "^4.41.26" babel-loader "^8.0.0" @@ -2699,6 +2724,44 @@ webpack-dev-middleware "^3.7.3" webpack-virtual-modules "^0.2.2" +"@storybook/manager-webpack5@^6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/manager-webpack5/-/manager-webpack5-6.5.10.tgz#dff8e53615906284b68df013935e8a6234ddaafe" + integrity sha512-uRo+6e5MiVOtyFVMYIKVqvpDveCjHyzXBfetSYR7rKEZoaDMEnLLiuF7DIH12lzxwmzCJ1gIc4lf5HFiTMNkgw== + dependencies: + "@babel/core" "^7.12.10" + "@babel/plugin-transform-template-literals" "^7.12.1" + "@babel/preset-react" "^7.12.10" + "@storybook/addons" "6.5.10" + "@storybook/core-client" "6.5.10" + "@storybook/core-common" "6.5.10" + "@storybook/node-logger" "6.5.10" + "@storybook/theming" "6.5.10" + "@storybook/ui" "6.5.10" + "@types/node" "^14.0.10 || ^16.0.0" + babel-loader "^8.0.0" + case-sensitive-paths-webpack-plugin "^2.3.0" + chalk "^4.1.0" + core-js "^3.8.2" + css-loader "^5.0.1" + express "^4.17.1" + find-up "^5.0.0" + fs-extra "^9.0.1" + html-webpack-plugin "^5.0.0" + node-fetch "^2.6.7" + process "^0.11.10" + read-pkg-up "^7.0.1" + regenerator-runtime "^0.13.7" + resolve-from "^5.0.0" + style-loader "^2.0.0" + telejson "^6.0.8" + terser-webpack-plugin "^5.0.3" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + webpack "^5.9.0" + webpack-dev-middleware "^4.1.0" + webpack-virtual-modules "^0.4.1" + "@storybook/mdx1-csf@^0.0.1": version "0.0.1" resolved "https://registry.yarnpkg.com/@storybook/mdx1-csf/-/mdx1-csf-0.0.1.tgz#d4184e3f6486fade9f7a6bfaf934d9bc07718d5b" @@ -2716,10 +2779,10 @@ prettier ">=2.2.1 <=2.3.0" ts-dedent "^2.0.0" -"@storybook/node-logger@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.9.tgz#129cfe0d0f79cab4f6a2ba194d39516680b1626f" - integrity sha512-nZZNZG2Wtwv6Trxi3FrnIqUmB55xO+X/WQGPT5iKlqNjdRIu/T72mE7addcp4rbuWCQfZUhcDDGpBOwKtBxaGg== +"@storybook/node-logger@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.10.tgz#bce4c04009c4b62d6d2fb617176d7ef0084e9e89" + integrity sha512-bYswXIKV7Stru8vYfkjUMNN8UhF7Qg7NRsUvG5Djt5lLIae1XmUIgnH40mU/nW4X4BSfcR9MKxsSsngvn2WmQg== dependencies: "@types/npmlog" "^4.1.2" chalk "^4.1.0" @@ -2727,24 +2790,24 @@ npmlog "^5.0.1" pretty-hrtime "^1.0.3" -"@storybook/postinstall@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.5.9.tgz#a5a2565808e9d7bc310e78c279b09ce337fe3457" - integrity sha512-KQBupK+FMRrtSt8IL0MzCZ/w9qbd25Yxxp/+ajfWgZTRgsWgVFOqcDyMhS16eNbBp5qKIBCBDXfEF+/mK8HwQQ== +"@storybook/postinstall@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.5.10.tgz#b25378da036bce7b318c6732733aa5ad43449f37" + integrity sha512-xqUdpnFHYkn8MgtV+QztvIsRWa6jQUk7QT1Mu17Y0S7PbslNGsuskRPHenHhACXBJF+TM86R+4BaAhnVYTmElw== dependencies: core-js "^3.8.2" -"@storybook/preview-web@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/preview-web/-/preview-web-6.5.9.tgz#557d919e6df50d66259521aa36ebf4055bbd236e" - integrity sha512-4eMrO2HJyZUYyL/j+gUaDvry6iGedshwT5MQqe7J9FaA+Q2pNARQRB1X53f410w7S4sObRmYIAIluWPYdWym9w== +"@storybook/preview-web@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/preview-web/-/preview-web-6.5.10.tgz#81bf5d3f5fca9e26099c057206bd8e684225989b" + integrity sha512-sTC/o5gkvALOtcNgtApGKGN9EavvSxRHBeBh+5BQjV2qQ8ap+26RsfUizNBECAa2Jrn4osaDYn9HRhJLFL69WA== dependencies: - "@storybook/addons" "6.5.9" - "@storybook/channel-postmessage" "6.5.9" - "@storybook/client-logger" "6.5.9" - "@storybook/core-events" "6.5.9" + "@storybook/addons" "6.5.10" + "@storybook/channel-postmessage" "6.5.10" + "@storybook/client-logger" "6.5.10" + "@storybook/core-events" "6.5.10" "@storybook/csf" "0.0.2--canary.4566f4d.1" - "@storybook/store" "6.5.9" + "@storybook/store" "6.5.10" ansi-to-html "^0.6.11" core-js "^3.8.2" global "^4.4.0" @@ -2769,24 +2832,24 @@ react-docgen-typescript "^2.1.1" tslib "^2.0.0" -"@storybook/react@^6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.5.9.tgz#687ec1f6b785822a392b7ac115b61800f69fb7cd" - integrity sha512-Rp+QaTQAzxJhwuzJXVd49mnIBLQRlF8llTxPT2YoGHdrGkku/zl/HblQ6H2yzEf15367VyzaAv/BpLsO9Jlfxg== +"@storybook/react@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.5.10.tgz#6e9f5cf5e4c81d966774c08c87fb2414052db454" + integrity sha512-m8S1qQrwA7pDGwdKEvL6LV3YKvSzVUY297Fq+xcTU3irnAy4sHDuFoLqV6Mi1510mErK1r8+rf+0R5rEXB219g== dependencies: "@babel/preset-flow" "^7.12.1" "@babel/preset-react" "^7.12.10" "@pmmmwh/react-refresh-webpack-plugin" "^0.5.3" - "@storybook/addons" "6.5.9" - "@storybook/client-logger" "6.5.9" - "@storybook/core" "6.5.9" - "@storybook/core-common" "6.5.9" + "@storybook/addons" "6.5.10" + "@storybook/client-logger" "6.5.10" + "@storybook/core" "6.5.10" + "@storybook/core-common" "6.5.10" "@storybook/csf" "0.0.2--canary.4566f4d.1" - "@storybook/docs-tools" "6.5.9" - "@storybook/node-logger" "6.5.9" + "@storybook/docs-tools" "6.5.10" + "@storybook/node-logger" "6.5.10" "@storybook/react-docgen-typescript-plugin" "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0" "@storybook/semver" "^7.3.2" - "@storybook/store" "6.5.9" + "@storybook/store" "6.5.10" "@types/estree" "^0.0.51" "@types/node" "^14.14.20 || ^16.0.0" "@types/webpack-env" "^1.16.0" @@ -2810,12 +2873,12 @@ util-deprecate "^1.0.2" webpack ">=4.43.0 <6.0.0" -"@storybook/router@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.9.tgz#4740248f8517425b2056273fb366ace8a17c65e8" - integrity sha512-G2Xp/2r8vU2O34eelE+G5VbEEVFDeHcCURrVJEROh6dq2asFJAPbzslVXSeCqgOTNLSpRDJ2NcN5BckkNqmqJg== +"@storybook/router@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.10.tgz#b0c342e080c1d2b5344603bc43a6c75734a4a879" + integrity sha512-O+vNW/eEpYFF8eCg5jZjNQ6q2DKQVxqDRPCy9pJdEbvavMDZn6AFYgVK+VJe5F4211WW2yncOu922xObCxXJYg== dependencies: - "@storybook/client-logger" "6.5.9" + "@storybook/client-logger" "6.5.10" core-js "^3.8.2" memoizerific "^1.11.3" qs "^6.10.0" @@ -2829,13 +2892,13 @@ core-js "^3.6.5" find-up "^4.1.0" -"@storybook/source-loader@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.5.9.tgz#7b6f065c6a6108c4b4ca7e45bfd78707373d84ac" - integrity sha512-H03nFKaP6borfWMTTa9igBA+Jm2ph+FoVJImWC/X+LAmLSJYYSXuqSgmiZ/DZvbjxS4k8vccE2HXogne1IvaRA== +"@storybook/source-loader@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.5.10.tgz#f62b4c7b1933976a20913ddc149d55026ef4c872" + integrity sha512-1RxxRumpjs8VUUwES9LId+cuNQnixhZAcwCxd6jaKkTZbjiQCtAhXX6DBTjJGV1u/JnCsqEp5b1wB8j/EioNHw== dependencies: - "@storybook/addons" "6.5.9" - "@storybook/client-logger" "6.5.9" + "@storybook/addons" "6.5.10" + "@storybook/client-logger" "6.5.10" "@storybook/csf" "0.0.2--canary.4566f4d.1" core-js "^3.8.2" estraverse "^5.2.0" @@ -2845,14 +2908,14 @@ prettier ">=2.2.1 <=2.3.0" regenerator-runtime "^0.13.7" -"@storybook/store@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/store/-/store-6.5.9.tgz#dc9963fc013636569082bd8f7200804866373735" - integrity sha512-80pcDTcCwK6wUA63aWOp13urI77jfipIVee9mpVvbNyfrNN8kGv1BS0z/JHDxuV6rC4g7LG1fb+BurR0yki7BA== +"@storybook/store@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/store/-/store-6.5.10.tgz#85df17a8d57af0cba3934b3c6046537e2bca9abd" + integrity sha512-RswrSYh2IiKkytFPxP9AvP+hekjrvHK2ILvyDk2ZgduCN4n5ivsekOb+N3M2t+dq1eLuW9or5n2T4OWwAwjxxQ== dependencies: - "@storybook/addons" "6.5.9" - "@storybook/client-logger" "6.5.9" - "@storybook/core-events" "6.5.9" + "@storybook/addons" "6.5.10" + "@storybook/client-logger" "6.5.10" + "@storybook/core-events" "6.5.10" "@storybook/csf" "0.0.2--canary.4566f4d.1" core-js "^3.8.2" fast-deep-equal "^3.1.3" @@ -2866,13 +2929,13 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/telemetry@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-6.5.9.tgz#8e1e0d4a89fc2387620045e5ea96c109d16a7247" - integrity sha512-JluoHCRhHAr4X0eUNVBSBi1JIBA92404Tu1TPdbN7x6gCZxHXXPTSUTAnspXp/21cTdMhY2x+kfZQ8fmlGK4MQ== +"@storybook/telemetry@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-6.5.10.tgz#742b05a55dfe8470ce4cb371f3f3f2c02f96e816" + integrity sha512-+M5HILDFS8nDumLxeSeAwi1MTzIuV6UWzV4yB2wcsEXOBTdplcl9oYqFKtlst78oOIdGtpPYxYfivDlqxC2K4g== dependencies: - "@storybook/client-logger" "6.5.9" - "@storybook/core-common" "6.5.9" + "@storybook/client-logger" "6.5.10" + "@storybook/core-common" "6.5.10" chalk "^4.1.0" core-js "^3.8.2" detect-package-manager "^2.0.1" @@ -2884,30 +2947,30 @@ read-pkg-up "^7.0.1" regenerator-runtime "^0.13.7" -"@storybook/theming@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.9.tgz#13f60a3a3cd73ceb5caf9f188e1627e79f1891aa" - integrity sha512-KM0AMP5jMQPAdaO8tlbFCYqx9uYM/hZXGSVUhznhLYu7bhNAIK7ZVmXxyE/z/khM++8eUHzRoZGiO/cwCkg9Xw== +"@storybook/theming@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.10.tgz#052100979c1270fc8f60653c1a13a6f047318109" + integrity sha512-BvTQBBcSEwKKcsVmF+Ol6v0RIQUr+bxP7gb10wtfBd23mZTEFA0C1N5FnZr/dDeiBKG1pvf1UKvoYA731y0BsA== dependencies: - "@storybook/client-logger" "6.5.9" + "@storybook/client-logger" "6.5.10" core-js "^3.8.2" memoizerific "^1.11.3" regenerator-runtime "^0.13.7" -"@storybook/ui@6.5.9": - version "6.5.9" - resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.5.9.tgz#41e59279323cccc0d613974ec9782d797220c8a7" - integrity sha512-ryuPxJgtbb0gPXKGgGAUC+Z185xGAd1IvQ0jM5fJ0SisHXI8jteG3RaWhntOehi9qCg+64Vv6eH/cj9QYNHt1Q== - dependencies: - "@storybook/addons" "6.5.9" - "@storybook/api" "6.5.9" - "@storybook/channels" "6.5.9" - "@storybook/client-logger" "6.5.9" - "@storybook/components" "6.5.9" - "@storybook/core-events" "6.5.9" - "@storybook/router" "6.5.9" +"@storybook/ui@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.5.10.tgz#f56095a1a39ae5a203f2ac7f3dba86341a5927d5" + integrity sha512-6iaoaRAiTqB1inTw35vao+5hjcDE0Qa0A3a9ZIeNa6yHvpB1k0lO/N/0PMrRdVvySYpXVD1iry4z4QYdo1rU+w== + dependencies: + "@storybook/addons" "6.5.10" + "@storybook/api" "6.5.10" + "@storybook/channels" "6.5.10" + "@storybook/client-logger" "6.5.10" + "@storybook/components" "6.5.10" + "@storybook/core-events" "6.5.10" + "@storybook/router" "6.5.10" "@storybook/semver" "^7.3.2" - "@storybook/theming" "6.5.9" + "@storybook/theming" "6.5.10" core-js "^3.8.2" memoizerific "^1.11.3" qs "^6.10.0" @@ -3102,6 +3165,11 @@ resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz#693b316ad323ea97eed6b38ed1a3cc02b1672b57" integrity sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w== +"@types/html-minifier-terser@^6.0.0": + version "6.1.0" + resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35" + integrity sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg== + "@types/is-function@^1.0.0": version "1.0.1" resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.1.tgz#2d024eace950c836d9e3335a66b97960ae41d022" @@ -3135,12 +3203,12 @@ pretty-format "^28.0.0" "@types/jsdom@^16.2.4": - version "16.2.14" - resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-16.2.14.tgz#26fe9da6a8870715b154bb84cd3b2e53433d8720" - integrity sha512-6BAy1xXEmMuHeAJ4Fv4yXKwBDTGTOseExKE3OaHiNycdHdZw59KfYzrt0DkDluvwmik1HRt6QS7bImxUmpSy+w== + version "16.2.15" + resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-16.2.15.tgz#6c09990ec43b054e49636cba4d11d54367fc90d6" + integrity sha512-nwF87yjBKuX/roqGYerZZM0Nv1pZDMAT5YhOHYeM/72Fic+VEqJh4nyoqoapzJnW3pUlfxPY5FhgsJtM+dRnQQ== dependencies: "@types/node" "*" - "@types/parse5" "*" + "@types/parse5" "^6.0.3" "@types/tough-cookie" "*" "@types/json-schema@*", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9": @@ -3153,6 +3221,11 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== +"@types/linkify-it@*": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9" + integrity sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA== + "@types/lodash@^4.14.167": version "4.14.182" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2" @@ -3163,6 +3236,14 @@ resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.2.tgz#b74129719fc8d11c01868010082d483b7545591a" integrity sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA== +"@types/markdown-it@^12.2.3": + version "12.2.3" + resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-12.2.3.tgz#0d6f6e5e413f8daaa26522904597be3d6cd93b51" + integrity sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ== + dependencies: + "@types/linkify-it" "*" + "@types/mdurl" "*" + "@types/mdast@^3.0.0": version "3.0.10" resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af" @@ -3170,6 +3251,11 @@ dependencies: "@types/unist" "*" +"@types/mdurl@*": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9" + integrity sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA== + "@types/minimatch@*": version "3.0.5" resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40" @@ -3189,14 +3275,14 @@ form-data "^3.0.0" "@types/node@*", "@types/node@>=12", "@types/node@>=12.12.47", "@types/node@>=13.7.0": - version "18.0.6" - resolved "https://registry.yarnpkg.com/@types/node/-/node-18.0.6.tgz#0ba49ac517ad69abe7a1508bc9b3a5483df9d5d7" - integrity sha512-/xUq6H2aQm261exT6iZTMifUySEt4GR5KX8eYyY+C4MSNPqSh9oNIP7tz2GLKTlFaiBbgZNxffoR3CVRG+cljw== + version "18.6.3" + resolved "https://registry.yarnpkg.com/@types/node/-/node-18.6.3.tgz#4e4a95b6fe44014563ceb514b2598b3e623d1c98" + integrity sha512-6qKpDtoaYLM+5+AFChLhHermMQxc3TOEFIDzrZLPRGHPrLEwqFkkT5Kx3ju05g6X7uDPazz3jHbKPX0KzCjntg== "@types/node@^14.0.10 || ^16.0.0", "@types/node@^14.14.20 || ^16.0.0": - version "16.11.45" - resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.45.tgz#155b13a33c665ef2b136f7f245fa525da419e810" - integrity sha512-3rKg/L5x0rofKuuUt5zlXzOnKyIHXmIu5R8A0TuNDMF2062/AOIDBciFIjToLEJ/9F9DzkHNot+BpNsMI1OLdQ== + version "16.11.47" + resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.47.tgz#efa9e3e0f72e7aa6a138055dace7437a83d9f91c" + integrity sha512-fpP+jk2zJ4VW66+wAMFoBJlx1bxmBKx4DUFf68UHgdGCOuyUTDlLWqsaNPJh7xhNDykyJ9eIzAygilP/4WoN8g== "@types/normalize-package-data@^2.4.0": version "2.4.1" @@ -3213,20 +3299,20 @@ resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0" integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA== -"@types/parse5@*": - version "6.0.3" - resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb" - integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g== - "@types/parse5@^5.0.0": version "5.0.3" resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109" integrity sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw== +"@types/parse5@^6.0.3": + version "6.0.3" + resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb" + integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g== + "@types/prettier@^2.1.5": - version "2.6.3" - resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.6.3.tgz#68ada76827b0010d0db071f739314fa429943d0a" - integrity sha512-ymZk3LEC/fsut+/Q5qejp6R9O1rMxz3XaRHDV6kX8MrGAhOSPqVARbDi+EZvInBpw+BnCX3TD240byVkOfQsHg== + version "2.6.4" + resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.6.4.tgz#ad899dad022bab6b5a9f0a0fe67c2f7a4a8950ed" + integrity sha512-fOwvpvQYStpb/zHMx0Cauwywu9yLDmzWiiQBC7gJyq5tYLUXFZvDG7VK1B7WBxxjBJNKFOZ0zLoOQn8vmATbhw== "@types/pretty-hrtime@^1.0.0": version "1.0.1" @@ -3257,13 +3343,6 @@ dependencies: "@types/react" "*" -"@types/react-syntax-highlighter@11.0.5": - version "11.0.5" - resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz#0d546261b4021e1f9d85b50401c0a42acb106087" - integrity sha512-VIOi9i2Oj5XsmWWoB72p3KlZoEbdRAcechJa8Ztebw7bDl2YmR+odxIqhtJGp1q2EozHs02US+gzxJ9nuf56qg== - dependencies: - "@types/react" "*" - "@types/react@*", "@types/react@^18.0.15": version "18.0.15" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe" @@ -3274,21 +3353,14 @@ csstype "^3.0.2" "@types/react@^17": - version "17.0.47" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.47.tgz#4ee71aaf4c5a9e290e03aa4d0d313c5d666b3b78" - integrity sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA== + version "17.0.48" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.48.tgz#a4532a8b91d7b27b8768b6fc0c3bccb760d15a6c" + integrity sha512-zJ6IYlJ8cYYxiJfUaZOQee4lh99mFihBoqkOSEGV+dFi9leROW6+PgstzQ+w3gWTnUfskALtQPGHK6dYmPj+2A== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" csstype "^3.0.2" -"@types/resolve@0.0.8": - version "0.0.8" - resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194" - integrity sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ== - dependencies: - "@types/node" "*" - "@types/retry@0.12.0": version "0.12.0" resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d" @@ -3392,14 +3464,14 @@ dependencies: "@types/yargs-parser" "*" -"@typescript-eslint/eslint-plugin@^5.30.7": - version "5.30.7" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.7.tgz#1621dabc1ae4084310e19e9efc80dfdbb97e7493" - integrity sha512-l4L6Do+tfeM2OK0GJsU7TUcM/1oN/N25xHm3Jb4z3OiDU4Lj8dIuxX9LpVMS9riSXQs42D1ieX7b85/r16H9Fw== +"@typescript-eslint/eslint-plugin@^5.32.0": + version "5.32.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.32.0.tgz#e27e38cffa4a61226327c874a7be965e9a861624" + integrity sha512-CHLuz5Uz7bHP2WgVlvoZGhf0BvFakBJKAD/43Ty0emn4wXWv5k01ND0C0fHcl/Im8Td2y/7h44E9pca9qAu2ew== dependencies: - "@typescript-eslint/scope-manager" "5.30.7" - "@typescript-eslint/type-utils" "5.30.7" - "@typescript-eslint/utils" "5.30.7" + "@typescript-eslint/scope-manager" "5.32.0" + "@typescript-eslint/type-utils" "5.32.0" + "@typescript-eslint/utils" "5.32.0" debug "^4.3.4" functional-red-black-tree "^1.0.1" ignore "^5.2.0" @@ -3407,69 +3479,69 @@ semver "^7.3.7" tsutils "^3.21.0" -"@typescript-eslint/parser@^5.30.7": - version "5.30.7" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.30.7.tgz#99d09729392aec9e64b1de45cd63cb81a4ddd980" - integrity sha512-Rg5xwznHWWSy7v2o0cdho6n+xLhK2gntImp0rJroVVFkcYFYQ8C8UJTSuTw/3CnExBmPjycjmUJkxVmjXsld6A== +"@typescript-eslint/parser@^5.32.0": + version "5.32.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.32.0.tgz#1de243443bc6186fb153b9e395b842e46877ca5d" + integrity sha512-IxRtsehdGV9GFQ35IGm5oKKR2OGcazUoiNBxhRV160iF9FoyuXxjY+rIqs1gfnd+4eL98OjeGnMpE7RF/NBb3A== dependencies: - "@typescript-eslint/scope-manager" "5.30.7" - "@typescript-eslint/types" "5.30.7" - "@typescript-eslint/typescript-estree" "5.30.7" + "@typescript-eslint/scope-manager" "5.32.0" + "@typescript-eslint/types" "5.32.0" + "@typescript-eslint/typescript-estree" "5.32.0" debug "^4.3.4" -"@typescript-eslint/scope-manager@5.30.7": - version "5.30.7" - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.30.7.tgz#8269a931ef1e5ae68b5eb80743cc515c4ffe3dd7" - integrity sha512-7BM1bwvdF1UUvt+b9smhqdc/eniOnCKxQT/kj3oXtj3LqnTWCAM0qHRHfyzCzhEfWX0zrW7KqXXeE4DlchZBKw== +"@typescript-eslint/scope-manager@5.32.0": + version "5.32.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.32.0.tgz#763386e963a8def470580cc36cf9228864190b95" + integrity sha512-KyAE+tUON0D7tNz92p1uetRqVJiiAkeluvwvZOqBmW9z2XApmk5WSMV9FrzOroAcVxJZB3GfUwVKr98Dr/OjOg== dependencies: - "@typescript-eslint/types" "5.30.7" - "@typescript-eslint/visitor-keys" "5.30.7" + "@typescript-eslint/types" "5.32.0" + "@typescript-eslint/visitor-keys" "5.32.0" -"@typescript-eslint/type-utils@5.30.7": - version "5.30.7" - resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.30.7.tgz#5693dc3db6f313f302764282d614cfdbc8a9fcfd" - integrity sha512-nD5qAE2aJX/YLyKMvOU5jvJyku4QN5XBVsoTynFrjQZaDgDV6i7QHFiYCx10wvn7hFvfuqIRNBtsgaLe0DbWhw== +"@typescript-eslint/type-utils@5.32.0": + version "5.32.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.32.0.tgz#45a14506fe3fb908600b4cef2f70778f7b5cdc79" + integrity sha512-0gSsIhFDduBz3QcHJIp3qRCvVYbqzHg8D6bHFsDMrm0rURYDj+skBK2zmYebdCp+4nrd9VWd13egvhYFJj/wZg== dependencies: - "@typescript-eslint/utils" "5.30.7" + "@typescript-eslint/utils" "5.32.0" debug "^4.3.4" tsutils "^3.21.0" -"@typescript-eslint/types@5.30.7": - version "5.30.7" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.30.7.tgz#18331487cc92d0f1fb1a6f580c8ec832528079d0" - integrity sha512-ocVkETUs82+U+HowkovV6uxf1AnVRKCmDRNUBUUo46/5SQv1owC/EBFkiu4MOHeZqhKz2ktZ3kvJJ1uFqQ8QPg== +"@typescript-eslint/types@5.32.0": + version "5.32.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.32.0.tgz#484273021eeeae87ddb288f39586ef5efeb6dcd8" + integrity sha512-EBUKs68DOcT/EjGfzywp+f8wG9Zw6gj6BjWu7KV/IYllqKJFPlZlLSYw/PTvVyiRw50t6wVbgv4p9uE2h6sZrQ== -"@typescript-eslint/typescript-estree@5.30.7": - version "5.30.7" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.7.tgz#05da9f1b281985bfedcf62349847f8d168eecc07" - integrity sha512-tNslqXI1ZdmXXrHER83TJ8OTYl4epUzJC0aj2i4DMDT4iU+UqLT3EJeGQvJ17BMbm31x5scSwo3hPM0nqQ1AEA== +"@typescript-eslint/typescript-estree@5.32.0": + version "5.32.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.32.0.tgz#282943f34babf07a4afa7b0ff347a8e7b6030d12" + integrity sha512-ZVAUkvPk3ITGtCLU5J4atCw9RTxK+SRc6hXqLtllC2sGSeMFWN+YwbiJR9CFrSFJ3w4SJfcWtDwNb/DmUIHdhg== dependencies: - "@typescript-eslint/types" "5.30.7" - "@typescript-eslint/visitor-keys" "5.30.7" + "@typescript-eslint/types" "5.32.0" + "@typescript-eslint/visitor-keys" "5.32.0" debug "^4.3.4" globby "^11.1.0" is-glob "^4.0.3" semver "^7.3.7" tsutils "^3.21.0" -"@typescript-eslint/utils@5.30.7": - version "5.30.7" - resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.30.7.tgz#7135be070349e9f7caa262b0ca59dc96123351bb" - integrity sha512-Z3pHdbFw+ftZiGUnm1GZhkJgVqsDL5CYW2yj+TB2mfXDFOMqtbzQi2dNJIyPqPbx9mv2kUxS1gU+r2gKlKi1rQ== +"@typescript-eslint/utils@5.32.0": + version "5.32.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.32.0.tgz#eccb6b672b94516f1afc6508d05173c45924840c" + integrity sha512-W7lYIAI5Zlc5K082dGR27Fczjb3Q57ECcXefKU/f0ajM5ToM0P+N9NmJWip8GmGu/g6QISNT+K6KYB+iSHjXCQ== dependencies: "@types/json-schema" "^7.0.9" - "@typescript-eslint/scope-manager" "5.30.7" - "@typescript-eslint/types" "5.30.7" - "@typescript-eslint/typescript-estree" "5.30.7" + "@typescript-eslint/scope-manager" "5.32.0" + "@typescript-eslint/types" "5.32.0" + "@typescript-eslint/typescript-estree" "5.32.0" eslint-scope "^5.1.1" eslint-utils "^3.0.0" -"@typescript-eslint/visitor-keys@5.30.7": - version "5.30.7" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.7.tgz#c093abae75b4fd822bfbad9fc337f38a7a14909a" - integrity sha512-KrRXf8nnjvcpxDFOKej4xkD7657+PClJs5cJVSG7NNoCNnjEdc46juNAQt7AyuWctuCgs6mVRc1xGctEqrjxWw== +"@typescript-eslint/visitor-keys@5.32.0": + version "5.32.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.32.0.tgz#b9715d0b11fdb5dd10fd0c42ff13987470525394" + integrity sha512-S54xOHZgfThiZ38/ZGTgB2rqx51CMJ5MCfVT2IplK4Q7hgzGfe0nLzLCcenDnc/cSjP568hdeKfeDcBgqNHD/g== dependencies: - "@typescript-eslint/types" "5.30.7" + "@typescript-eslint/types" "5.32.0" eslint-visitor-keys "^3.3.0" "@webassemblyjs/ast@1.11.1": @@ -3819,10 +3891,10 @@ acorn@^7.1.1, acorn@^7.4.1: resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa" integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A== -acorn@^8.4.1, acorn@^8.5.0, acorn@^8.7.0, acorn@^8.7.1: - version "8.7.1" - resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.1.tgz#0197122c843d1bf6d0a5e83220a788f278f63c30" - integrity sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A== +acorn@^8.4.1, acorn@^8.5.0, acorn@^8.7.0, acorn@^8.7.1, acorn@^8.8.0: + version "8.8.0" + resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8" + integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w== address@^1.0.1: version "1.2.0" @@ -4074,9 +4146,9 @@ are-we-there-yet@^2.0.0: readable-stream "^3.6.0" are-we-there-yet@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-3.0.0.tgz#ba20bd6b553e31d62fc8c31bd23d22b95734390d" - integrity sha512-0GWpv50YSOcLXaN6/FAKY3vfRbllXWV2xvfA/oKJF8pzFhWXPV+yjhJXDBbjscDYowv7Yw1A3uigpzn5iEGTyw== + version "3.0.1" + resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-3.0.1.tgz#679df222b278c64f2cdba1175cdc00b0d96164bd" + integrity sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg== dependencies: delegates "^1.0.0" readable-stream "^3.6.0" @@ -4241,7 +4313,7 @@ as-array@^2.0.0: resolved "https://registry.yarnpkg.com/as-array/-/as-array-2.0.0.tgz#4f04805d87f8fce8e511bc2108f8e5e3a287d547" integrity sha512-1Sd1LrodN0XYxYeZcN1J4xYZvmvTwD5tDWaPUGPIzH1mFsmzsPnVtd2exWhecMjtZk/wYWjNZJiD3b1SLCeJqg== -asap@^2.0.0, asap@~2.0.3: +asap@^2.0.0: version "2.0.6" resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA== @@ -4360,7 +4432,7 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59" integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA== -axe-core@^4.4.2: +axe-core@^4.4.3: version "4.4.3" resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.3.tgz#11c74d23d5013c0fa5d183796729bc3482bd2f6f" integrity sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w== @@ -4383,7 +4455,7 @@ babel-jest@^28.1.3: graceful-fs "^4.2.9" slash "^3.0.0" -babel-loader@^8.0.0, babel-loader@^8.2.5: +babel-loader@^8.0.0: version "8.2.5" resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e" integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ== @@ -4441,7 +4513,7 @@ babel-plugin-jest-hoist@^28.1.3: "@types/babel__core" "^7.1.14" "@types/babel__traverse" "^7.0.6" -babel-plugin-macros@^3.0.1: +babel-plugin-macros@^3.0.1, babel-plugin-macros@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1" integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg== @@ -4450,13 +4522,18 @@ babel-plugin-macros@^3.0.1: cosmiconfig "^7.0.0" resolve "^1.19.0" -babel-plugin-polyfill-corejs2@^0.3.1: - version "0.3.1" - resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz#440f1b70ccfaabc6b676d196239b138f8a2cfba5" - integrity sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w== +babel-plugin-named-exports-order@^0.0.2: + version "0.0.2" + resolved "https://registry.yarnpkg.com/babel-plugin-named-exports-order/-/babel-plugin-named-exports-order-0.0.2.tgz#ae14909521cf9606094a2048239d69847540cb09" + integrity sha512-OgOYHOLoRK+/mvXU9imKHlG6GkPLYrUCvFXG/CM93R/aNNO8pOOF4aS+S8CCHMDQoNSeiOYEZb/G6RwL95Jktw== + +babel-plugin-polyfill-corejs2@^0.3.2: + version "0.3.2" + resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.2.tgz#e4c31d4c89b56f3cf85b92558954c66b54bd972d" + integrity sha512-LPnodUl3lS0/4wN3Rb+m+UK8s7lj2jcLRrjho4gLw+OJs+I4bvGXshINesY5xx/apM+biTnQ9reDI8yj+0M5+Q== dependencies: - "@babel/compat-data" "^7.13.11" - "@babel/helper-define-polyfill-provider" "^0.3.1" + "@babel/compat-data" "^7.17.7" + "@babel/helper-define-polyfill-provider" "^0.3.2" semver "^6.1.1" babel-plugin-polyfill-corejs3@^0.1.0: @@ -4467,20 +4544,20 @@ babel-plugin-polyfill-corejs3@^0.1.0: "@babel/helper-define-polyfill-provider" "^0.1.5" core-js-compat "^3.8.1" -babel-plugin-polyfill-corejs3@^0.5.2: - version "0.5.2" - resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.2.tgz#aabe4b2fa04a6e038b688c5e55d44e78cd3a5f72" - integrity sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ== +babel-plugin-polyfill-corejs3@^0.5.3: + version "0.5.3" + resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.3.tgz#d7e09c9a899079d71a8b670c6181af56ec19c5c7" + integrity sha512-zKsXDh0XjnrUEW0mxIHLfjBfnXSMr5Q/goMe/fxpQnLm07mcOZiIZHBNWCMx60HmdvjxfXcalac0tfFg0wqxyw== dependencies: - "@babel/helper-define-polyfill-provider" "^0.3.1" + "@babel/helper-define-polyfill-provider" "^0.3.2" core-js-compat "^3.21.0" -babel-plugin-polyfill-regenerator@^0.3.1: - version "0.3.1" - resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz#2c0678ea47c75c8cc2fbb1852278d8fb68233990" - integrity sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A== +babel-plugin-polyfill-regenerator@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.0.tgz#8f51809b6d5883e07e71548d75966ff7635527fe" + integrity sha512-RW1cnryiADFeHmfLS+WW/G431p1PsW5qdRdz0SDRi7TKcUgc7Oh/uXkT7MZ/+tGsT1BkczEAmD5XjUyJ5SWDTw== dependencies: - "@babel/helper-define-polyfill-provider" "^0.3.1" + "@babel/helper-define-polyfill-provider" "^0.3.2" babel-plugin-react-docgen@^4.2.1: version "4.2.1" @@ -4491,7 +4568,7 @@ babel-plugin-react-docgen@^4.2.1: lodash "^4.17.15" react-docgen "^5.0.0" -"babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^2.0.7: +"babel-plugin-styled-components@>= 1.12.0": version "2.0.7" resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086" integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA== @@ -4533,14 +4610,6 @@ babel-preset-jest@^28.1.3: babel-plugin-jest-hoist "^28.1.3" babel-preset-current-node-syntax "^1.0.0" -babel-runtime@^6.26.0: - version "6.26.0" - resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" - integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g== - dependencies: - core-js "^2.4.0" - regenerator-runtime "^0.11.0" - bail@^1.0.0: version "1.0.5" resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776" @@ -4661,7 +4730,7 @@ bl@^4.0.3, bl@^4.1.0: inherits "^2.0.4" readable-stream "^3.4.0" -bluebird@^3.5.5: +bluebird@^3.5.5, bluebird@^3.7.2: version "3.7.2" resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f" integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg== @@ -4787,6 +4856,11 @@ brorand@^1.0.1, brorand@^1.1.0: resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f" integrity sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w== +browser-assert@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/browser-assert/-/browser-assert-1.2.1.tgz#9aaa5a2a8c74685c2ae05bfe46efd606f068c200" + integrity sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ== + browser-process-hrtime@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626" @@ -4853,15 +4927,15 @@ browserify-zlib@^0.2.0: dependencies: pako "~1.0.5" -browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.20.2, browserslist@^4.21.2: - version "4.21.2" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.2.tgz#59a400757465535954946a400b841ed37e2b4ecf" - integrity sha512-MonuOgAtUB46uP5CezYbRaYKBNt2LxP0yX+Pmj4LkcDFGkn9Cbpi83d9sCjwQDErXsIJSzY5oKGDbgOlF/LPAA== +browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.20.2, browserslist@^4.21.3: + version "4.21.3" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.3.tgz#5df277694eb3c48bc5c4b05af3e8b7e09c5a6d1a" + integrity sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ== dependencies: - caniuse-lite "^1.0.30001366" - electron-to-chromium "^1.4.188" + caniuse-lite "^1.0.30001370" + electron-to-chromium "^1.4.202" node-releases "^2.0.6" - update-browserslist-db "^1.0.4" + update-browserslist-db "^1.0.5" bs-logger@0.x: version "0.2.6" @@ -4924,11 +4998,6 @@ buffers@~0.1.1: resolved "https://registry.yarnpkg.com/buffers/-/buffers-0.1.1.tgz#b24579c3bed4d6d396aeee6d9a8ae7f5482ab7bb" integrity sha512-9q/rDEGSb/Qsvv2qvzIzdluL5k7AaJOTrw23z9reQthrbF7is4CtlT0DXyO1oei2DCp4uojjzQ7igaSHp1kAEQ== -builtin-modules@^3.1.0: - version "3.3.0" - resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6" - integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw== - builtin-status-codes@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8" @@ -5089,7 +5158,7 @@ callsites@^3.0.0: resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== -camel-case@^4.1.1: +camel-case@^4.1.1, camel-case@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a" integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw== @@ -5139,10 +5208,10 @@ camelize@^1.0.0: resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" integrity sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg== -caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001366: - version "1.0.30001367" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001367.tgz#2b97fe472e8fa29c78c5970615d7cd2ee414108a" - integrity sha512-XDgbeOHfifWV3GEES2B8rtsrADx4Jf+juKX2SICJcaUhjYBO3bR96kvEIHa15VU6ohtOhBZuPGGYGbXMRn0NCw== +caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001370: + version "1.0.30001374" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001374.tgz#3dab138e3f5485ba2e74bd13eca7fe1037ce6f57" + integrity sha512-mWvzatRx3w+j5wx/mpFN5v5twlPrabG8NqX2c6e45LCpymdoGqNvRkRutFUqpRTXKFQFNQJasvK0YT7suW6/Hw== capture-exit@^2.0.0: version "2.0.0" @@ -5169,6 +5238,13 @@ caseless@~0.12.0: resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw== +catharsis@^0.9.0: + version "0.9.0" + resolved "https://registry.yarnpkg.com/catharsis/-/catharsis-0.9.0.tgz#40382a168be0e6da308c277d3a2b3eb40c7d2121" + integrity sha512-prMTQVpcns/tzFgFVkVp6ak6RykZyWb3gu8ckUpd6YkTlacOd3DXGJjIpD4Q6zJirizvaiAjSSHlOsA+6sNh2A== + dependencies: + lodash "^4.17.15" + ccount@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.1.0.tgz#246687debb6014735131be8abab2d93898f8d043" @@ -5222,11 +5298,6 @@ chalk@^5.0.0: resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.0.1.tgz#ca57d71e82bb534a296df63bbacc4a1c22b2a4b6" integrity sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w== -change-emitter@^0.1.2: - version "0.1.6" - resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515" - integrity sha512-YXzt1cQ4a2jqazhcuSWEOc1K2q8g9H6eWNsyZgi640LDzRWVQ2eDe+Y/kVdftH+vYdPF2rgDb3dLdpxE1jvAxw== - char-regex@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf" @@ -5271,7 +5342,7 @@ chokidar@^2.1.8: optionalDependencies: fsevents "^1.2.7" -chokidar@^3.0.2, chokidar@^3.4.0, chokidar@^3.4.1, chokidar@^3.4.2: +chokidar@^3.0.2, chokidar@^3.4.1, chokidar@^3.4.2: version "3.5.3" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== @@ -5355,6 +5426,13 @@ clean-css@^4.2.3: dependencies: source-map "~0.6.0" +clean-css@^5.2.2: + version "5.3.1" + resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.1.tgz#d0610b0b90d125196a2894d35366f734e5d7aa32" + integrity sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg== + dependencies: + source-map "~0.6.0" + clean-stack@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b" @@ -5365,13 +5443,13 @@ cli-boxes@^2.2.0, cli-boxes@^2.2.1: resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f" integrity sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw== -cli-color@^2.0.2: - version "2.0.3" - resolved "https://registry.yarnpkg.com/cli-color/-/cli-color-2.0.3.tgz#73769ba969080629670f3f2ef69a4bf4e7cc1879" - integrity sha512-OkoZnxyC4ERN3zLzZaY9Emb7f/MhBOIpePv0Ycok0fJYT+Ouo00UBEIwsVsr0yoow++n5YWlSUgST9GKhNHiRQ== +cli-color@2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/cli-color/-/cli-color-2.0.1.tgz#93e3491308691f1e46beb78b63d0fb2585e42ba6" + integrity sha512-eBbxZF6fqPUNnf7CLAFOersUnyYzv83tHFLSlts+OAHsNendaqv2tHCq+/MO+b3Y+9JeoUlIvobyxG/Z8GNeOg== dependencies: d "^1.0.1" - es5-ext "^0.10.61" + es5-ext "^0.10.53" es6-iterator "^2.0.3" memoizee "^0.4.15" timers-ext "^0.1.7" @@ -5392,9 +5470,9 @@ cli-cursor@^3.1.0: restore-cursor "^3.1.0" cli-spinners@^2.5.0: - version "2.6.1" - resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.6.1.tgz#adc954ebe281c37a6319bfa401e6dd2488ffb70d" - integrity sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g== + version "2.7.0" + resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.7.0.tgz#f815fd30b5f9eaac02db604c7a231ed7cb2f797a" + integrity sha512-qu3pN8Y3qHNgE2AFweciB1IfMnmZ/fsNTEE+NOFjmGB2F/7rLhnhzppvpCnN4FovtP26k8lHyy9ptEbNwWFLzw== cli-table3@^0.6.1, cli-table3@^0.6.2: version "0.6.2" @@ -5538,7 +5616,7 @@ color@^3.1.3: color-convert "^1.9.3" color-string "^1.6.0" -colorette@^1.1.0: +colorette@^1.1.0, colorette@^1.2.2: version "1.4.0" resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40" integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g== @@ -5596,6 +5674,11 @@ commander@^6.2.1: resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c" integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA== +commander@^8.3.0: + version "8.3.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66" + integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww== + commander@^9.2.0, commander@^9.3.0: version "9.4.0" resolved "https://registry.yarnpkg.com/commander/-/commander-9.4.0.tgz#bc4a40918fefe52e22450c111ecd6b7acce6f11c" @@ -5803,7 +5886,7 @@ conventional-commits-parser@^3.2.3: split2 "^3.0.0" through2 "^4.0.0" -convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0: +convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0: version "1.8.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369" integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA== @@ -5838,32 +5921,22 @@ copy-descriptor@^0.1.0: integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw== core-js-compat@^3.21.0, core-js-compat@^3.22.1, core-js-compat@^3.8.1: - version "3.23.5" - resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.23.5.tgz#11edce2f1c4f69a96d30ce77c805ce118909cd5b" - integrity sha512-fHYozIFIxd+91IIbXJgWd/igXIc8Mf9is0fusswjnGIWVG96y2cwyUdlCkGOw6rMLHKAxg7xtCIVaHsyOUnJIg== + version "3.24.1" + resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.24.1.tgz#d1af84a17e18dfdd401ee39da9996f9a7ba887de" + integrity sha512-XhdNAGeRnTpp8xbD+sR/HFDK9CbeeeqXT6TuofXh3urqEevzkWmLRgrVoykodsw8okqo2pu1BOmuCKrHx63zdw== dependencies: - browserslist "^4.21.2" + browserslist "^4.21.3" semver "7.0.0" core-js-pure@^3.20.2, core-js-pure@^3.8.1: - version "3.23.5" - resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.23.5.tgz#23daaa9af9230e50f10b0fa4b8e6b87402be4c33" - integrity sha512-8t78LdpKSuCq4pJYCYk8hl7XEkAX+BP16yRIwL3AanTksxuEf7CM83vRyctmiEL8NDZ3jpUcv56fk9/zG3aIuw== - -core-js@^1.0.0: - version "1.2.7" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" - integrity sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA== - -core-js@^2.4.0: - version "2.6.12" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec" - integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ== + version "3.24.1" + resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.24.1.tgz#8839dde5da545521bf282feb7dc6d0b425f39fd3" + integrity sha512-r1nJk41QLLPyozHUUPmILCEMtMw24NG4oWK6RbsDdjzQgg9ZvrUsPBj1MnG0wXXp1DCDU6j+wUvEmBSrtRbLXg== core-js@^3.0.4, core-js@^3.6.5, core-js@^3.8.2: - version "3.23.5" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.23.5.tgz#1f82b0de5eece800827a2f59d597509c67650475" - integrity sha512-7Vh11tujtAZy82da4duVreQysIoO2EvVrur7y6IzZkH1IHPSekuDi8Vuw1+YKjkbfWLRD7Nc9ICQ/sIUDutcyg== + version "3.24.1" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.24.1.tgz#cf7724d41724154010a6576b7b57d94c5d66e64f" + integrity sha512-0QTBSYSUZ6Gq21utGzkfITDylE8jWC9Ne1D2MrhvlsZBI1x39OdDIVbzSqtgMndIy6BlHxBXpMGqzZmnztg2rg== core-util-is@1.0.2: version "1.0.2" @@ -6067,6 +6140,22 @@ css-loader@^3.6.0: schema-utils "^2.7.0" semver "^6.3.0" +css-loader@^5.0.1: + version "5.2.7" + resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.7.tgz#9b9f111edf6fb2be5dc62525644cbc9c232064ae" + integrity sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg== + dependencies: + icss-utils "^5.1.0" + loader-utils "^2.0.0" + postcss "^8.2.15" + postcss-modules-extract-imports "^3.0.0" + postcss-modules-local-by-default "^4.0.0" + postcss-modules-scope "^3.0.0" + postcss-modules-values "^4.0.0" + postcss-value-parser "^4.1.0" + schema-utils "^3.0.0" + semver "^7.3.5" + css-select@^4.1.3: version "4.3.0" resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b" @@ -6647,10 +6736,10 @@ ee-first@1.1.1: resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow== -electron-to-chromium@^1.4.188: - version "1.4.194" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.194.tgz#2f83fcec5067907044a3d502ac7c3efb1fe6430b" - integrity sha512-ola5UH0xAP1oYY0FFUsPvwtucEzCQHucXnT7PQ1zjHJMccZhCDktEugI++JUR3YuIs7Ff7afz+OVEhVAIMhLAQ== +electron-to-chromium@^1.4.202: + version "1.4.211" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.211.tgz#afaa8b58313807501312d598d99b953568d60f91" + integrity sha512-BZSbMpyFQU0KBJ1JG26XGeFI3i4op+qOYGxftmZXFZoHkhLgsSv4DHDJfl8ogII3hIuzGt51PaZ195OVu0yJ9A== elliptic@^6.5.3: version "6.5.4" @@ -6695,7 +6784,7 @@ encodeurl@~1.0.2: resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59" integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w== -encoding@^0.1.11, encoding@^0.1.13: +encoding@^0.1.13: version "0.1.13" resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9" integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A== @@ -6727,7 +6816,7 @@ enhanced-resolve@^4.5.0: memory-fs "^0.5.0" tapable "^1.0.0" -enhanced-resolve@^5.10.0, enhanced-resolve@^5.9.3: +enhanced-resolve@^5.10.0: version "5.10.0" resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6" integrity sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ== @@ -6740,6 +6829,11 @@ entities@^2.0.0: resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55" integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A== +entities@~2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5" + integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w== + env-ci@^5.0.0: version "5.5.0" resolved "https://registry.yarnpkg.com/env-ci/-/env-ci-5.5.0.tgz#43364e3554d261a586dec707bc32be81112b545f" @@ -6849,10 +6943,19 @@ es-to-primitive@^1.2.1: is-date-object "^1.0.1" is-symbol "^1.0.2" -es5-ext@^0.10.35, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@^0.10.53, es5-ext@^0.10.61, es5-ext@~0.10.14, es5-ext@~0.10.2, es5-ext@~0.10.46: - version "0.10.61" - resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.61.tgz#311de37949ef86b6b0dcea894d1ffedb909d3269" - integrity sha512-yFhIqQAzu2Ca2I4SE2Au3rxVfmohU9Y7wqGR+s7+H7krk26NXhIRAZDgqd6xqjCEFUomDEA3/Bo/7fKmIkW1kA== +es5-ext@0.10.53: + version "0.10.53" + resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.53.tgz#93c5a3acfdbef275220ad72644ad02ee18368de1" + integrity sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q== + dependencies: + es6-iterator "~2.0.3" + es6-symbol "~3.1.3" + next-tick "~1.0.0" + +es5-ext@^0.10.35, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@^0.10.53, es5-ext@~0.10.14, es5-ext@~0.10.2, es5-ext@~0.10.46: + version "0.10.62" + resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.62.tgz#5e6adc19a6da524bf3d1e02bbc8960e5eb49a9a5" + integrity sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA== dependencies: es6-iterator "^2.0.3" es6-symbol "^3.1.3" @@ -6863,7 +6966,7 @@ es5-shim@^4.5.13: resolved "https://registry.yarnpkg.com/es5-shim/-/es5-shim-4.6.7.tgz#bc67ae0fc3dd520636e0a1601cc73b450ad3e955" integrity sha512-jg21/dmlrNQI7JyyA2w7n+yifSxBng0ZralnSfVZjoCawgNTCnS+yBCyVM9DL5itm7SUnDGgv7hcq2XCZX4iRQ== -es6-iterator@^2.0.3: +es6-iterator@^2.0.3, es6-iterator@~2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7" integrity sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g== @@ -6877,7 +6980,7 @@ es6-shim@^0.35.5: resolved "https://registry.yarnpkg.com/es6-shim/-/es6-shim-0.35.6.tgz#d10578301a83af2de58b9eadb7c2c9945f7388a0" integrity sha512-EmTr31wppcaIAgblChZiuN/l9Y7DPyw8Xtbg7fIVngn6zMW+IEBJDJngeKC3x6wr0V/vcA2wqeFnaw1bFJbDdA== -es6-symbol@^3.1.1, es6-symbol@^3.1.3: +es6-symbol@^3.1.1, es6-symbol@^3.1.3, es6-symbol@~3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18" integrity sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA== @@ -6895,131 +6998,132 @@ es6-weak-map@^2.0.3: es6-iterator "^2.0.3" es6-symbol "^3.1.1" -esbuild-android-64@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.49.tgz#9e4682c36dcf6e7b71b73d2a3723a96e0fdc5054" - integrity sha512-vYsdOTD+yi+kquhBiFWl3tyxnj2qZJsl4tAqwhT90ktUdnyTizgle7TjNx6Ar1bN7wcwWqZ9QInfdk2WVagSww== - -esbuild-android-arm64@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.49.tgz#9861b1f7e57d1dd1f23eeef6198561c5f34b51f6" - integrity sha512-g2HGr/hjOXCgSsvQZ1nK4nW/ei8JUx04Li74qub9qWrStlysaVmadRyTVuW32FGIpLQyc5sUjjZopj49eGGM2g== - -esbuild-darwin-64@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.49.tgz#fd30a5ebe28704a3a117126c60f98096c067c8d1" - integrity sha512-3rvqnBCtX9ywso5fCHixt2GBCUsogNp9DjGmvbBohh31Ces34BVzFltMSxJpacNki96+WIcX5s/vum+ckXiLYg== - -esbuild-darwin-arm64@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.49.tgz#c04a3a57dad94a972c66a697a68a25aa25947f41" - integrity sha512-XMaqDxO846srnGlUSJnwbijV29MTKUATmOLyQSfswbK/2X5Uv28M9tTLUJcKKxzoo9lnkYPsx2o8EJcTYwCs/A== - -esbuild-freebsd-64@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.49.tgz#c404dbd66c98451395b1eef0fa38b73030a7be82" - integrity sha512-NJ5Q6AjV879mOHFri+5lZLTp5XsO2hQ+KSJYLbfY9DgCu8s6/Zl2prWXVANYTeCDLlrIlNNYw8y34xqyLDKOmQ== - -esbuild-freebsd-arm64@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.49.tgz#b62cec96138ebc5937240ce3e1b97902963ea74a" - integrity sha512-lFLtgXnAc3eXYqj5koPlBZvEbBSOSUbWO3gyY/0+4lBdRqELyz4bAuamHvmvHW5swJYL7kngzIZw6kdu25KGOA== - -esbuild-linux-32@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.49.tgz#495b1cc011b8c64d8bbaf65509c1e7135eb9ddbf" - integrity sha512-zTTH4gr2Kb8u4QcOpTDVn7Z8q7QEIvFl/+vHrI3cF6XOJS7iEI1FWslTo3uofB2+mn6sIJEQD9PrNZKoAAMDiA== - -esbuild-linux-64@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.49.tgz#3f28dd8f986e6ff42f38888ee435a9b1fb916a56" - integrity sha512-hYmzRIDzFfLrB5c1SknkxzM8LdEUOusp6M2TnuQZJLRtxTgyPnZZVtyMeCLki0wKgYPXkFsAVhi8vzo2mBNeTg== - -esbuild-linux-arm64@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.49.tgz#a52e99ae30246566dc5f33e835aa6ca98ef70e33" - integrity sha512-KLQ+WpeuY+7bxukxLz5VgkAAVQxUv67Ft4DmHIPIW+2w3ObBPQhqNoeQUHxopoW/aiOn3m99NSmSV+bs4BSsdA== - -esbuild-linux-arm@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.49.tgz#7c33d05a64ec540cf7474834adaa57b3167bbe97" - integrity sha512-iE3e+ZVv1Qz1Sy0gifIsarJMQ89Rpm9mtLSRtG3AH0FPgAzQ5Z5oU6vYzhc/3gSPi2UxdCOfRhw2onXuFw/0lg== - -esbuild-linux-mips64le@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.49.tgz#ed062bd844b587be649443831eb84ba304685f25" - integrity sha512-n+rGODfm8RSum5pFIqFQVQpYBw+AztL8s6o9kfx7tjfK0yIGF6tm5HlG6aRjodiiKkH2xAiIM+U4xtQVZYU4rA== - -esbuild-linux-ppc64le@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.49.tgz#c0786fb5bddffd90c10a2078181513cbaf077958" - integrity sha512-WP9zR4HX6iCBmMFH+XHHng2LmdoIeUmBpL4aL2TR8ruzXyT4dWrJ5BSbT8iNo6THN8lod6GOmYDLq/dgZLalGw== - -esbuild-linux-riscv64@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.49.tgz#579b0e7cc6fce4bfc698e991a52503bb616bec49" - integrity sha512-h66ORBz+Dg+1KgLvzTVQEA1LX4XBd1SK0Fgbhhw4akpG/YkN8pS6OzYI/7SGENiN6ao5hETRDSkVcvU9NRtkMQ== - -esbuild-linux-s390x@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.49.tgz#09eb15c753e249a500b4e28d07c5eef7524a9740" - integrity sha512-DhrUoFVWD+XmKO1y7e4kNCqQHPs6twz6VV6Uezl/XHYGzM60rBewBF5jlZjG0nCk5W/Xy6y1xWeopkrhFFM0sQ== - -esbuild-netbsd-64@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.49.tgz#f7337cd2bddb7cc9d100d19156f36c9ca117b58d" - integrity sha512-BXaUwFOfCy2T+hABtiPUIpWjAeWK9P8O41gR4Pg73hpzoygVGnj0nI3YK4SJhe52ELgtdgWP/ckIkbn2XaTxjQ== - -esbuild-openbsd-64@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.49.tgz#1f8bdc49f8a44396e73950a3fb6b39828563631d" - integrity sha512-lP06UQeLDGmVPw9Rg437Btu6J9/BmyhdoefnQ4gDEJTtJvKtQaUcOQrhjTq455ouZN4EHFH1h28WOJVANK41kA== - -esbuild-sunos-64@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.49.tgz#47d042739365b61aa8ca642adb69534a8eef9f7a" - integrity sha512-4c8Zowp+V3zIWje329BeLbGh6XI9c/rqARNaj5yPHdC61pHI9UNdDxT3rePPJeWcEZVKjkiAS6AP6kiITp7FSw== - -esbuild-windows-32@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.49.tgz#79198c88ec9bde163c18a6b430c34eab098ec21a" - integrity sha512-q7Rb+J9yHTeKr9QTPDYkqfkEj8/kcKz9lOabDuvEXpXuIcosWCJgo5Z7h/L4r7rbtTH4a8U2FGKb6s1eeOHmJA== - -esbuild-windows-64@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.49.tgz#b36b230d18d1ee54008e08814c4799c7806e8c79" - integrity sha512-+Cme7Ongv0UIUTniPqfTX6mJ8Deo7VXw9xN0yJEN1lQMHDppTNmKwAM3oGbD/Vqff+07K2gN0WfNkMohmG+dVw== - -esbuild-windows-arm64@0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.49.tgz#d83c03ff6436caf3262347cfa7e16b0a8049fae7" - integrity sha512-v+HYNAXzuANrCbbLFJ5nmO3m5y2PGZWLe3uloAkLt87aXiO2mZr3BTmacZdjwNkNEHuH3bNtN8cak+mzVjVPfA== - -esbuild@^0.14.49: - version "0.14.49" - resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.49.tgz#b82834760eba2ddc17b44f05cfcc0aaca2bae492" - integrity sha512-/TlVHhOaq7Yz8N1OJrjqM3Auzo5wjvHFLk+T8pIue+fhnhIMpfAzsG6PLVMbFveVxqD2WOp3QHei+52IMUNmCw== +esbuild-android-64@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.53.tgz#259bc3ef1399a3cad8f4f67c40ee20779c4de675" + integrity sha512-fIL93sOTnEU+NrTAVMIKiAw0YH22HWCAgg4N4Z6zov2t0kY9RAJ50zY9ZMCQ+RT6bnOfDt8gCTnt/RaSNA2yRA== + +esbuild-android-arm64@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.53.tgz#2158253d4e8f9fdd2a081bbb4f73b8806178841e" + integrity sha512-PC7KaF1v0h/nWpvlU1UMN7dzB54cBH8qSsm7S9mkwFA1BXpaEOufCg8hdoEI1jep0KeO/rjZVWrsH8+q28T77A== + +esbuild-darwin-64@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.53.tgz#b4681831fd8f8d06feb5048acbe90d742074cc2a" + integrity sha512-gE7P5wlnkX4d4PKvLBUgmhZXvL7lzGRLri17/+CmmCzfncIgq8lOBvxGMiQ4xazplhxq+72TEohyFMZLFxuWvg== + +esbuild-darwin-arm64@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.53.tgz#d267d957852d121b261b3f76ead86e5b5463acc9" + integrity sha512-otJwDU3hnI15Q98PX4MJbknSZ/WSR1I45il7gcxcECXzfN4Mrpft5hBDHXNRnCh+5858uPXBXA1Vaz2jVWLaIA== + +esbuild-freebsd-64@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.53.tgz#aca2af6d72b537fe66a38eb8f374fb66d4c98ca0" + integrity sha512-WkdJa8iyrGHyKiPF4lk0MiOF87Q2SkE+i+8D4Cazq3/iqmGPJ6u49je300MFi5I2eUsQCkaOWhpCVQMTKGww2w== + +esbuild-freebsd-arm64@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.53.tgz#76282e19312d914c34343c8a7da6cc5f051580b9" + integrity sha512-9T7WwCuV30NAx0SyQpw8edbKvbKELnnm1FHg7gbSYaatH+c8WJW10g/OdM7JYnv7qkimw2ZTtSA+NokOLd2ydQ== + +esbuild-linux-32@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.53.tgz#1045d34cf7c5faaf2af3b29cc1573b06580c37e5" + integrity sha512-VGanLBg5en2LfGDgLEUxQko2lqsOS7MTEWUi8x91YmsHNyzJVT/WApbFFx3MQGhkf+XdimVhpyo5/G0PBY91zg== + +esbuild-linux-64@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.53.tgz#ab3f2ee2ebb5a6930c72d9539cb34b428808cbe4" + integrity sha512-pP/FA55j/fzAV7N9DF31meAyjOH6Bjuo3aSKPh26+RW85ZEtbJv9nhoxmGTd9FOqjx59Tc1ZbrJabuiXlMwuZQ== + +esbuild-linux-arm64@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.53.tgz#1f5530412f6690949e78297122350488d3266cfe" + integrity sha512-GDmWITT+PMsjCA6/lByYk7NyFssW4Q6in32iPkpjZ/ytSyH+xeEx8q7HG3AhWH6heemEYEWpTll/eui3jwlSnw== + +esbuild-linux-arm@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.53.tgz#a44ec9b5b42007ab6c0d65a224ccc6bbd97c54cf" + integrity sha512-/u81NGAVZMopbmzd21Nu/wvnKQK3pT4CrvQ8BTje1STXcQAGnfyKgQlj3m0j2BzYbvQxSy+TMck4TNV2onvoPA== + +esbuild-linux-mips64le@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.53.tgz#a4d0b6b17cfdeea4e41b0b085a5f73d99311be9f" + integrity sha512-d6/XHIQW714gSSp6tOOX2UscedVobELvQlPMkInhx1NPz4ThZI9uNLQ4qQJHGBGKGfu+rtJsxM4NVHLhnNRdWQ== + +esbuild-linux-ppc64le@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.53.tgz#8c331822c85465434e086e3e6065863770c38139" + integrity sha512-ndnJmniKPCB52m+r6BtHHLAOXw+xBCWIxNnedbIpuREOcbSU/AlyM/2dA3BmUQhsHdb4w3amD5U2s91TJ3MzzA== + +esbuild-linux-riscv64@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.53.tgz#36fd75543401304bea8a2d63bf8ea18aaa508e00" + integrity sha512-yG2sVH+QSix6ct4lIzJj329iJF3MhloLE6/vKMQAAd26UVPVkhMFqFopY+9kCgYsdeWvXdPgmyOuKa48Y7+/EQ== + +esbuild-linux-s390x@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.53.tgz#1622677ab6824123f48f75d3afc031cd41936129" + integrity sha512-OCJlgdkB+XPYndHmw6uZT7jcYgzmx9K+28PVdOa/eLjdoYkeAFvH5hTwX4AXGLZLH09tpl4bVsEtvuyUldaNCg== + +esbuild-netbsd-64@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.53.tgz#e86d0efd0116658be335492ed12e66b26b4baf52" + integrity sha512-gp2SB+Efc7MhMdWV2+pmIs/Ja/Mi5rjw+wlDmmbIn68VGXBleNgiEZG+eV2SRS0kJEUyHNedDtwRIMzaohWedQ== + +esbuild-openbsd-64@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.53.tgz#9bcbbe6f86304872c6e91f64c8eb73fc29c3588b" + integrity sha512-eKQ30ZWe+WTZmteDYg8S+YjHV5s4iTxeSGhJKJajFfQx9TLZJvsJX0/paqwP51GicOUruFpSUAs2NCc0a4ivQQ== + +esbuild-sunos-64@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.53.tgz#f7a872f7460bfb7b131f7188a95fbce3d1c577e8" + integrity sha512-OWLpS7a2FrIRukQqcgQqR1XKn0jSJoOdT+RlhAxUoEQM/IpytS3FXzCJM6xjUYtpO5GMY0EdZJp+ur2pYdm39g== + +esbuild-windows-32@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.53.tgz#c5e3ca50e2d1439cc2c9fe4defa63bcd474ce709" + integrity sha512-m14XyWQP5rwGW0tbEfp95U6A0wY0DYPInWBB7D69FAXUpBpBObRoGTKRv36lf2RWOdE4YO3TNvj37zhXjVL5xg== + +esbuild-windows-64@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.53.tgz#ec2ab4a60c5215f092ffe1eab6d01319e88238af" + integrity sha512-s9skQFF0I7zqnQ2K8S1xdLSfZFsPLuOGmSx57h2btSEswv0N0YodYvqLcJMrNMXh6EynOmWD7rz+0rWWbFpIHQ== + +esbuild-windows-arm64@0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.53.tgz#f71d403806bdf9f4a1f9d097db9aec949bd675c8" + integrity sha512-E+5Gvb+ZWts+00T9II6wp2L3KG2r3iGxByqd/a1RmLmYWVsSVUjkvIxZuJ3hYTIbhLkH5PRwpldGTKYqVz0nzQ== + +esbuild@^0.14.53: + version "0.14.53" + resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.53.tgz#20b1007f686e8584f2a01a1bec5a37aac9498ce4" + integrity sha512-ohO33pUBQ64q6mmheX1mZ8mIXj8ivQY/L4oVuAshr+aJI+zLl+amrp3EodrUNDNYVrKJXGPfIHFGhO8slGRjuw== optionalDependencies: - esbuild-android-64 "0.14.49" - esbuild-android-arm64 "0.14.49" - esbuild-darwin-64 "0.14.49" - esbuild-darwin-arm64 "0.14.49" - esbuild-freebsd-64 "0.14.49" - esbuild-freebsd-arm64 "0.14.49" - esbuild-linux-32 "0.14.49" - esbuild-linux-64 "0.14.49" - esbuild-linux-arm "0.14.49" - esbuild-linux-arm64 "0.14.49" - esbuild-linux-mips64le "0.14.49" - esbuild-linux-ppc64le "0.14.49" - esbuild-linux-riscv64 "0.14.49" - esbuild-linux-s390x "0.14.49" - esbuild-netbsd-64 "0.14.49" - esbuild-openbsd-64 "0.14.49" - esbuild-sunos-64 "0.14.49" - esbuild-windows-32 "0.14.49" - esbuild-windows-64 "0.14.49" - esbuild-windows-arm64 "0.14.49" + "@esbuild/linux-loong64" "0.14.53" + esbuild-android-64 "0.14.53" + esbuild-android-arm64 "0.14.53" + esbuild-darwin-64 "0.14.53" + esbuild-darwin-arm64 "0.14.53" + esbuild-freebsd-64 "0.14.53" + esbuild-freebsd-arm64 "0.14.53" + esbuild-linux-32 "0.14.53" + esbuild-linux-64 "0.14.53" + esbuild-linux-arm "0.14.53" + esbuild-linux-arm64 "0.14.53" + esbuild-linux-mips64le "0.14.53" + esbuild-linux-ppc64le "0.14.53" + esbuild-linux-riscv64 "0.14.53" + esbuild-linux-s390x "0.14.53" + esbuild-netbsd-64 "0.14.53" + esbuild-openbsd-64 "0.14.53" + esbuild-sunos-64 "0.14.53" + esbuild-windows-32 "0.14.53" + esbuild-windows-64 "0.14.53" + esbuild-windows-arm64 "0.14.53" escalade@^3.1.1: version "3.1.1" @@ -7051,7 +7155,7 @@ escape-string-regexp@^4.0.0: resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34" integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA== -escodegen@^1.8.1: +escodegen@^1.13.0, escodegen@^1.8.1: version "1.14.3" resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503" integrity sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw== @@ -7107,10 +7211,10 @@ eslint-import-resolver-node@^0.3.6: debug "^3.2.7" resolve "^1.20.0" -eslint-import-resolver-typescript@^3.3.0: - version "3.3.0" - resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.3.0.tgz#c2b9f420563bdcb4b84d550d81e579f8dc867d5b" - integrity sha512-vlooCGKfDX59rH5TbtluOekinPlIS5Ab+dyQUoCCJoE1IV11R/kn6J+RoMBuBkJhzJEIKJ4myQJhw6lGIXfkRA== +eslint-import-resolver-typescript@^3.4.0: + version "3.4.0" + resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.4.0.tgz#a7e334b86d638f49956f2b0dfbde29daa9c32dcd" + integrity sha512-rBCgiEovwX/HQ8ESWV+XIWZaFiRtDeAXNZdcTATB8UbMuadc9qfGOlIP+vy+c7nsgfEBN4NTwy5qunGNptDP0Q== dependencies: debug "^4.3.4" enhanced-resolve "^5.10.0" @@ -7147,21 +7251,21 @@ eslint-plugin-import@^2.26.0: resolve "^1.22.0" tsconfig-paths "^3.14.1" -eslint-plugin-jsx-a11y@^6.6.0: - version "6.6.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.0.tgz#2c5ac12e013eb98337b9aa261c3b355275cc6415" - integrity sha512-kTeLuIzpNhXL2CwLlc8AHI0aFRwWHcg483yepO9VQiHzM9bZwJdzTkzBszbuPrbgGmq2rlX/FaT2fJQsjUSHsw== +eslint-plugin-jsx-a11y@^6.6.1: + version "6.6.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz#93736fc91b83fdc38cc8d115deedfc3091aef1ff" + integrity sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q== dependencies: - "@babel/runtime" "^7.18.3" + "@babel/runtime" "^7.18.9" aria-query "^4.2.2" array-includes "^3.1.5" ast-types-flow "^0.0.7" - axe-core "^4.4.2" + axe-core "^4.4.3" axobject-query "^2.2.0" damerau-levenshtein "^1.0.8" emoji-regex "^9.2.2" has "^1.0.3" - jsx-ast-utils "^3.3.1" + jsx-ast-utils "^3.3.2" language-tags "^1.0.5" minimatch "^3.1.2" semver "^6.3.0" @@ -7229,7 +7333,7 @@ eslint-utils@^3.0.0: dependencies: eslint-visitor-keys "^2.0.0" -eslint-visitor-keys@^2.0.0, eslint-visitor-keys@^2.1.0: +eslint-visitor-keys@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303" integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw== @@ -7239,13 +7343,14 @@ eslint-visitor-keys@^3.3.0: resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826" integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA== -eslint@^8.20.0: - version "8.20.0" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.20.0.tgz#048ac56aa18529967da8354a478be4ec0a2bc81b" - integrity sha512-d4ixhz5SKCa1D6SCPrivP7yYVi7nyD6A4vs6HIAul9ujBzcEmZVM3/0NN/yu5nKhmO1wjp5xQ46iRfmDGlOviA== +eslint@^8.21.0: + version "8.21.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.21.0.tgz#1940a68d7e0573cef6f50037addee295ff9be9ef" + integrity sha512-/XJ1+Qurf1T9G2M5IHrsjp+xrGT73RZf23xA1z5wB1ZzzEAWSZKvRwhWxTFp1rvkvCfwcvAUNAP31bhKTTGfDA== dependencies: "@eslint/eslintrc" "^1.3.0" - "@humanwhocodes/config-array" "^0.9.2" + "@humanwhocodes/config-array" "^0.10.4" + "@humanwhocodes/gitignore-to-minimatch" "^1.0.2" ajv "^6.10.0" chalk "^4.0.0" cross-spawn "^7.0.2" @@ -7255,14 +7360,17 @@ eslint@^8.20.0: eslint-scope "^7.1.1" eslint-utils "^3.0.0" eslint-visitor-keys "^3.3.0" - espree "^9.3.2" + espree "^9.3.3" esquery "^1.4.0" esutils "^2.0.2" fast-deep-equal "^3.1.3" file-entry-cache "^6.0.1" + find-up "^5.0.0" functional-red-black-tree "^1.0.1" glob-parent "^6.0.1" globals "^13.15.0" + globby "^11.1.0" + grapheme-splitter "^1.0.4" ignore "^5.2.0" import-fresh "^3.0.0" imurmurhash "^0.1.4" @@ -7280,12 +7388,12 @@ eslint@^8.20.0: text-table "^0.2.0" v8-compile-cache "^2.0.3" -espree@^9.3.2: - version "9.3.2" - resolved "https://registry.yarnpkg.com/espree/-/espree-9.3.2.tgz#f58f77bd334731182801ced3380a8cc859091596" - integrity sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA== +espree@^9.0.0, espree@^9.3.2, espree@^9.3.3: + version "9.3.3" + resolved "https://registry.yarnpkg.com/espree/-/espree-9.3.3.tgz#2dd37c4162bb05f433ad3c1a52ddf8a49dc08e9d" + integrity sha512-ORs1Rt/uQTqUKjDdGCyrtYxbazf5umATSf/K4qxjmZHORR6HJk+2s/2Pqe+Kk49HHINC/xNIrGfgh8sZcll0ng== dependencies: - acorn "^8.7.1" + acorn "^8.8.0" acorn-jsx "^5.3.2" eslint-visitor-keys "^3.3.0" @@ -7327,7 +7435,7 @@ estree-to-babel@^3.1.0: "@babel/types" "^7.2.0" c8 "^7.6.0" -estree-walker@^0.6.0, estree-walker@^0.6.1: +estree-walker@^0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362" integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w== @@ -7650,9 +7758,9 @@ fast-url-parser@^1.1.3: punycode "^1.3.2" fastest-levenshtein@^1.0.12: - version "1.0.14" - resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.14.tgz#9054384e4b7a78c88d01a4432dc18871af0ac859" - integrity sha512-tFfWHjnuUfKE186Tfgr+jtaFc0mZTApEgKDOeyN+FwOqRkO/zK/3h1AiRd8u8CY53owL3CUmGr/oI9p/RdyLTA== + version "1.0.16" + resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5" + integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg== fastq@^1.6.0: version "1.13.0" @@ -7675,19 +7783,6 @@ fb-watchman@^2.0.0: dependencies: bser "2.1.1" -fbjs@^0.8.1: - version "0.8.18" - resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.18.tgz#9835e0addb9aca2eff53295cd79ca1cfc7c9662a" - integrity sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA== - dependencies: - core-js "^1.0.0" - isomorphic-fetch "^2.1.1" - loose-envify "^1.0.0" - object-assign "^4.1.0" - promise "^7.1.1" - setimmediate "^1.0.5" - ua-parser-js "^0.7.30" - fecha@^4.2.0: version "4.2.3" resolved "https://registry.yarnpkg.com/fecha/-/fecha-4.2.3.tgz#4d9ccdbc61e8629b259fdca67e65891448d569fd" @@ -7894,10 +7989,10 @@ firebase-frameworks@^0.4.2: semver "^7.3.7" tslib "^2.3.1" -firebase-tools@^11.3.0: - version "11.3.0" - resolved "https://registry.yarnpkg.com/firebase-tools/-/firebase-tools-11.3.0.tgz#1f0a7cd2553efdaaa23a0964fe173fe34adfc1ba" - integrity sha512-wg02bDKJCQIym1PGfuE+5RzBY6LTpi0+T3QGcig0QbfEFtqvcigllnbFqGFzzYk8cJgOxCwpY/AU8vCb2iKRjg== +firebase-tools@^11.4.2: + version "11.4.2" + resolved "https://registry.yarnpkg.com/firebase-tools/-/firebase-tools-11.4.2.tgz#8770dd563039227715f592925bb89cde1711e993" + integrity sha512-qNFFDwyzRe8kwJwYIOjfV1OIa2+DbJ6jXfAXEhmEx2fgQZ0EwVjkJB5kWo+K4Mt+Qc0SItLyFvz8GSYWSg+mpQ== dependencies: "@google-cloud/pubsub" "^3.0.1" abort-controller "^3.0.0" @@ -7906,7 +8001,7 @@ firebase-tools@^11.3.0: body-parser "^1.19.0" chokidar "^3.0.2" cjson "^0.3.1" - cli-color "^2.0.2" + cli-color "2.0.1" cli-table "0.3.11" commander "^4.0.1" configstore "^5.0.1" @@ -7914,6 +8009,7 @@ firebase-tools@^11.3.0: cross-env "^5.1.3" cross-spawn "^7.0.1" csv-parse "^5.0.4" + es5-ext "0.10.53" exegesis "^4.1.0" exegesis-express "^4.0.0" express "^4.16.4" @@ -8142,11 +8238,6 @@ fs-monkey@^1.0.3: resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.3.tgz#ae3ac92d53bb328efe0e9a1d9541f6ad8d48e2d3" integrity sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q== -fs-readdir-recursive@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27" - integrity sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA== - fs-write-stream-atomic@^1.0.8: version "1.0.10" resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9" @@ -8439,7 +8530,7 @@ glob-to-regexp@^0.4.1: resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e" integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw== -glob@7.2.3, glob@^7.0.0, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: +glob@7.2.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: version "7.2.3" resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b" integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q== @@ -8451,7 +8542,7 @@ glob@7.2.3, glob@^7.0.0, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: once "^1.3.0" path-is-absolute "^1.0.0" -glob@^8.0.1: +glob@^8.0.0, glob@^8.0.1: version "8.0.3" resolved "https://registry.yarnpkg.com/glob/-/glob-8.0.3.tgz#415c6eb2deed9e502c68fa44a272e6da6eeca42e" integrity sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ== @@ -8517,9 +8608,9 @@ globals@^11.1.0: integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== globals@^13.15.0: - version "13.16.0" - resolved "https://registry.yarnpkg.com/globals/-/globals-13.16.0.tgz#9be4aca28f311aaeb974ea54978ebbb5e35ce46a" - integrity sha512-A1lrQfpNF+McdPOnnFqY3kSN0AFTy485bTi1bkLk4mVPODIUEcSfhHgRqA+QdXPksrSTTztYXx37NFV+GpGk3Q== + version "13.17.0" + resolved "https://registry.yarnpkg.com/globals/-/globals-13.17.0.tgz#902eb1e680a41da93945adbdcb5a9f361ba69bd4" + integrity sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw== dependencies: type-fest "^0.20.2" @@ -8622,12 +8713,12 @@ google-auth-library@^8.0.2: lru-cache "^6.0.0" google-gax@^3.0.1: - version "3.1.3" - resolved "https://registry.yarnpkg.com/google-gax/-/google-gax-3.1.3.tgz#2380b5a39e55475cff2f5526909815479c50d712" - integrity sha512-hWF2WbfD3o1Fnfq3qf0Wnr3DuQczC/5ebGYGB5swUZXl8sT5y5mhDbxOKAg+xUzhiPgnQADNyFk0uIsA+NKRIw== + version "3.1.4" + resolved "https://registry.yarnpkg.com/google-gax/-/google-gax-3.1.4.tgz#a277bda7461d7d3cc19340e239f7db03210f1016" + integrity sha512-+EOIVCSpFVabuqSBQHEy5kE8rGapc5sS47wbShJLzRnxIBWXs9+2vCnnmBP3pPZSsRQU08rp5C26j7spk+liUQ== dependencies: "@grpc/grpc-js" "~1.6.0" - "@grpc/proto-loader" "^0.6.12" + "@grpc/proto-loader" "^0.7.0" "@types/long" "^4.0.0" abort-controller "^3.0.0" duplexify "^4.0.0" @@ -8637,7 +8728,8 @@ google-gax@^3.0.1: node-fetch "^2.6.1" object-hash "^3.0.0" proto3-json-serializer "^1.0.0" - protobufjs "6.11.3" + protobufjs "7.0.0" + protobufjs-cli "1.0.0" retry-request "^5.0.0" google-p12-pem@^3.1.3: @@ -8671,11 +8763,16 @@ got@^9.6.0: to-readable-stream "^1.0.0" url-parse-lax "^3.0.0" -graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.10, graceful-fs@^4.2.2, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9: +graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.10, graceful-fs@^4.2.2, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9: version "4.2.10" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c" integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA== +grapheme-splitter@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e" + integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ== + gtoken@^5.0.4: version "5.3.2" resolved "https://registry.yarnpkg.com/gtoken/-/gtoken-5.3.2.tgz#deb7dc876abe002178e0515e383382ea9446d58f" @@ -8924,11 +9021,6 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^2.3.1: - version "2.5.5" - resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" - integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== - hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" @@ -8997,6 +9089,19 @@ html-minifier-terser@^5.0.1: relateurl "^0.2.7" terser "^4.6.3" +html-minifier-terser@^6.0.2: + version "6.1.0" + resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#bfc818934cc07918f6b3669f5774ecdfd48f32ab" + integrity sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw== + dependencies: + camel-case "^4.1.2" + clean-css "^5.2.2" + commander "^8.3.0" + he "^1.2.0" + param-case "^3.0.4" + relateurl "^0.2.7" + terser "^5.10.0" + html-tags@^3.1.0: version "3.2.0" resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.2.0.tgz#dbb3518d20b726524e4dd43de397eb0a95726961" @@ -9022,6 +9127,17 @@ html-webpack-plugin@^4.0.0: tapable "^1.1.3" util.promisify "1.0.0" +html-webpack-plugin@^5.0.0: + version "5.5.0" + resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz#c3911936f57681c1f9f4d8b68c158cd9dfe52f50" + integrity sha512-sy88PC2cRTVxvETRgUHFrL4No3UxvcH8G1NepGhqaTT+GXN2kTamqasot0inS5hXeg1cMbFDt27zzo9p35lZVw== + dependencies: + "@types/html-minifier-terser" "^6.0.0" + html-minifier-terser "^6.0.2" + lodash "^4.17.21" + pretty-error "^4.0.0" + tapable "^2.0.0" + htmlparser2@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7" @@ -9131,6 +9247,11 @@ icss-utils@^4.0.0, icss-utils@^4.1.1: dependencies: postcss "^7.0.14" +icss-utils@^5.0.0, icss-utils@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae" + integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA== + ieee754@^1.1.13, ieee754@^1.1.4: version "1.2.1" resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352" @@ -9158,11 +9279,6 @@ ignore@^5.1.1, ignore@^5.2.0: resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a" integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ== -immutable@^3.8.2: - version "3.8.2" - resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3" - integrity sha512-15gZoQ38eYjEjxkorfbcgBKBL6R7T459OuK+CpcWt7O3KF4uPCx2tD0uFETlUDIyo+1789crbMhTvQBSR5yBMg== - import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1: version "3.3.0" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" @@ -9449,9 +9565,9 @@ is-cidr@^4.0.2: cidr-regex "^3.1.1" is-core-module@^2.5.0, is-core-module@^2.8.1, is-core-module@^2.9.0: - version "2.9.0" - resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69" - integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A== + version "2.10.0" + resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed" + integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg== dependencies: has "^1.0.3" @@ -9596,11 +9712,6 @@ is-map@^2.0.2: resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127" integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg== -is-module@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591" - integrity sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g== - is-negative-zero@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150" @@ -9712,7 +9823,7 @@ is-stream-ended@^0.1.4: resolved "https://registry.yarnpkg.com/is-stream-ended/-/is-stream-ended-0.1.4.tgz#f50224e95e06bce0e356d440a4827cd35b267eda" integrity sha512-xj0XPvmr7bQFTvirqnFr50o0hQIh6ZItDqloxt5aJrR4NQsYeSsyFQERYGCAzfindAcnKjINnwEEgLx4IqVzQw== -is-stream@^1.0.1, is-stream@^1.1.0: +is-stream@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" integrity sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ== @@ -9853,14 +9964,6 @@ isobject@^4.0.0: resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0" integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA== -isomorphic-fetch@^2.1.1: - version "2.2.1" - resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9" - integrity sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA== - dependencies: - node-fetch "^1.0.1" - whatwg-fetch ">=0.10.0" - isomorphic-unfetch@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz#87341d5f4f7b63843d468438128cb087b7c3e98f" @@ -10432,11 +10535,39 @@ js-yaml@^4.1.0: dependencies: argparse "^2.0.1" +js2xmlparser@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/js2xmlparser/-/js2xmlparser-4.0.2.tgz#2a1fdf01e90585ef2ae872a01bc169c6a8d5e60a" + integrity sha512-6n4D8gLlLf1n5mNLQPRfViYzu9RATblzPEtm1SthMX1Pjao0r9YI9nw7ZIfRxQMERS87mcswrg+r/OYrPRX6jA== + dependencies: + xmlcreate "^2.0.4" + jsbn@~0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513" integrity sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg== +jsdoc@^3.6.3: + version "3.6.11" + resolved "https://registry.yarnpkg.com/jsdoc/-/jsdoc-3.6.11.tgz#8bbb5747e6f579f141a5238cbad4e95e004458ce" + integrity sha512-8UCU0TYeIYD9KeLzEcAu2q8N/mx9O3phAGl32nmHlE0LpaJL71mMkP4d+QE5zWfNt50qheHtOZ0qoxVrsX5TUg== + dependencies: + "@babel/parser" "^7.9.4" + "@types/markdown-it" "^12.2.3" + bluebird "^3.7.2" + catharsis "^0.9.0" + escape-string-regexp "^2.0.0" + js2xmlparser "^4.0.2" + klaw "^3.0.0" + markdown-it "^12.3.2" + markdown-it-anchor "^8.4.1" + marked "^4.0.10" + mkdirp "^1.0.4" + requizzle "^0.2.3" + strip-json-comments "^3.1.0" + taffydb "2.6.2" + underscore "~1.13.2" + jsdom@^19.0.0: version "19.0.0" resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-19.0.0.tgz#93e67c149fe26816d38a849ea30ac93677e16b6a" @@ -10608,7 +10739,7 @@ jsprim@^1.2.2: json-schema "0.4.0" verror "1.10.0" -"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.1: +"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.2.tgz#afe5efe4332cd3515c065072bd4d6b0aa22152bd" integrity sha512-4ZCADZHRkno244xlNnn4AOG6sRQ7iBZ5BbgZ4vW4y5IZw7cVUD1PPeblm1xx/nfmMxPdt/LHsXZW8z/j58+l9Q== @@ -10696,6 +10827,13 @@ kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3: resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd" integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw== +klaw@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/klaw/-/klaw-3.0.0.tgz#b11bec9cf2492f06756d6e809ab73a2910259146" + integrity sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g== + dependencies: + graceful-fs "^4.1.9" + kleur@^3.0.3: version "3.0.3" resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e" @@ -10794,13 +10932,14 @@ libnpmdiff@^4.0.2: tar "^6.1.0" libnpmexec@^4.0.2: - version "4.0.8" - resolved "https://registry.yarnpkg.com/libnpmexec/-/libnpmexec-4.0.8.tgz#27be33278dec1c7cfce52e28f8814b19e31129fe" - integrity sha512-SKO6JCt/rL6r+ilbq315zEj2sDdZRniCJ2AvmzqMyIKW4IMuuLsOjjkcWKBV2l1Vle54ud7Tkv9IEPR2cE0mJg== + version "4.0.9" + resolved "https://registry.yarnpkg.com/libnpmexec/-/libnpmexec-4.0.9.tgz#6bfff09cc05bc60eea023e1c818fa6159ade3954" + integrity sha512-w+m/ximjFJQ1ndGu8dTR3K/sZcmSuetOCflFBkwVFXvf2JPd1BT8ETBrmYISMYBo2kuHn8HzvwZZtAeZBvrZbQ== dependencies: "@npmcli/arborist" "^5.0.0" "@npmcli/ci-detect" "^2.0.0" - "@npmcli/run-script" "^4.1.3" + "@npmcli/fs" "^2.1.1" + "@npmcli/run-script" "^4.2.0" chalk "^4.1.0" mkdirp-infer-owner "^2.0.0" npm-package-arg "^9.0.1" @@ -10809,6 +10948,7 @@ libnpmexec@^4.0.2: proc-log "^2.0.0" read "^1.0.7" read-package-json-fast "^2.0.2" + semver "^7.3.7" walk-up-path "^1.0.0" libnpmfund@^3.0.1: @@ -10902,6 +11042,13 @@ lines-and-columns@^1.1.6: resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg== +linkify-it@^3.0.1: + version "3.0.3" + resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.3.tgz#a98baf44ce45a550efb4d49c769d07524cc2fa2e" + integrity sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ== + dependencies: + uc.micro "^1.0.1" + lint-staged@^13.0.3: version "13.0.3" resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-13.0.3.tgz#d7cdf03a3830b327a2b63c6aec953d71d9dc48c6" @@ -11180,12 +11327,17 @@ long@^4.0.0: resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28" integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA== +long@^5.0.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/long/-/long-5.2.0.tgz#2696dadf4b4da2ce3f6f6b89186085d94d52fd61" + integrity sha512-9RTUNjK60eJbx3uz+TEGF7fUr29ZDxR5QzXcyDpeSfeH28S9ycINflOgOlppit5U+4kNTe83KQnMEerw7GmE8w== + longest@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/longest/-/longest-2.0.1.tgz#781e183296aa94f6d4d916dc335d0d17aefa23f8" integrity sha512-Ajzxb8CM6WAnFjgiloPsI3bF+WCxcvhdIG3KNA2KN962+tdBsHcuQ4k4qX/EcS/2CRkcc0iAkR956Nib6aXU/Q== -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: +loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -11240,9 +11392,9 @@ lru-cache@^6.0.0: yallist "^4.0.0" lru-cache@^7.4.4, lru-cache@^7.5.1, lru-cache@^7.7.1: - version "7.13.1" - resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.13.1.tgz#267a81fbd0881327c46a81c5922606a2cfe336c4" - integrity sha512-CHqbAq7NFlW3RSnoWXLJBxCWaZVBrfa9UEHId2M3AW8iEBurbqduNexEUCGc3SHc6iCYXNJCDi903LajSVAEPQ== + version "7.13.2" + resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.13.2.tgz#bb5d3f1deea3f3a7a35c1c44345566a612e09cd0" + integrity sha512-VJL3nIpA79TodY/ctmZEfhASgqekbT574/c4j3jn4bKXbSCnTTCH/KltZyvL2GlV+tGSMtsWyem8DCX7qKTMBA== lru-queue@^0.1.0: version "0.1.0" @@ -11290,7 +11442,7 @@ make-error@1.x, make-error@^1.1.1: resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2" integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw== -make-fetch-happen@^10.0.3, make-fetch-happen@^10.0.6, make-fetch-happen@^10.1.8: +make-fetch-happen@^10.0.3, make-fetch-happen@^10.0.6, make-fetch-happen@^10.2.0: version "10.2.0" resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-10.2.0.tgz#0bde3914f2f82750b5d48c6d2294d2c74f985e5b" integrity sha512-OnEfCLofQVJ5zgKwGk55GaqosqKjaR6khQlJY3dBAA+hM25Bc5CmX5rKUfVut+rYA3uidA7zb7AvcglU87rPRg== @@ -11319,6 +11471,13 @@ makeerror@1.0.12: dependencies: tmpl "1.0.5" +map-age-cleaner@^0.1.3: + version "0.1.3" + resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a" + integrity sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w== + dependencies: + p-defer "^1.0.0" + map-cache@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf" @@ -11351,6 +11510,22 @@ markdown-escapes@^1.0.0: resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535" integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg== +markdown-it-anchor@^8.4.1: + version "8.6.4" + resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-8.6.4.tgz#affb8aa0910a504c114e9fcad53ac3a5b907b0e6" + integrity sha512-Ul4YVYZNxMJYALpKtu+ZRdrryYt/GlQ5CK+4l1bp/gWXOG2QWElt6AqF3Mih/wfUKdZbNAZVXGR73/n6U/8img== + +markdown-it@^12.3.2: + version "12.3.2" + resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.3.2.tgz#bf92ac92283fe983fe4de8ff8abfb5ad72cd0c90" + integrity sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg== + dependencies: + argparse "^2.0.1" + entities "~2.1.0" + linkify-it "^3.0.1" + mdurl "^1.0.1" + uc.micro "^1.0.5" + marked-terminal@^5.0.0, marked-terminal@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/marked-terminal/-/marked-terminal-5.1.1.tgz#d2edc2991841d893ee943b44b40b2ee9518b4d9f" @@ -11410,7 +11585,7 @@ mdast-util-to-string@^1.0.0: resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527" integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A== -mdurl@^1.0.0: +mdurl@^1.0.0, mdurl@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e" integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g== @@ -11420,7 +11595,15 @@ media-typer@0.3.0: resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ== -memfs@^3.1.2: +mem@^8.1.1: + version "8.1.1" + resolved "https://registry.yarnpkg.com/mem/-/mem-8.1.1.tgz#cf118b357c65ab7b7e0817bdf00c8062297c0122" + integrity sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA== + dependencies: + map-age-cleaner "^0.1.3" + mimic-fn "^3.1.0" + +memfs@^3.1.2, memfs@^3.2.2: version "3.4.7" resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.4.7.tgz#e5252ad2242a724f938cb937e3c4f7ceb1f70e5a" integrity sha512-ygaiUSNalBX85388uskeCyhSAoOSgzBbtVCr9jA2RROssFL9Q19/ZXFqS+2Th2sr1ewNIWgFdLzLC3Yl1Zv+lw== @@ -11567,7 +11750,7 @@ mime-db@1.52.0, "mime-db@>= 1.43.0 < 2": resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg== -mime-types@^2.1.12, mime-types@^2.1.16, mime-types@^2.1.27, mime-types@~2.1.19, mime-types@~2.1.24, mime-types@~2.1.34: +mime-types@^2.1.12, mime-types@^2.1.16, mime-types@^2.1.27, mime-types@^2.1.30, mime-types@~2.1.19, mime-types@~2.1.24, mime-types@~2.1.34: version "2.1.35" resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a" integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== @@ -11594,6 +11777,11 @@ mimic-fn@^2.1.0: resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b" integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg== +mimic-fn@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-3.1.0.tgz#65755145bbf3e36954b949c16450427451d5ca74" + integrity sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ== + mimic-fn@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc" @@ -11819,7 +12007,7 @@ nan@^2.12.1, nan@^2.16.0: resolved "https://registry.yarnpkg.com/nan/-/nan-2.16.0.tgz#664f43e45460fb98faf00edca0bb0d7b8dce7916" integrity sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA== -nanoid@^3.3.1: +nanoid@^3.3.1, nanoid@^3.3.4: version "3.3.4" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab" integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw== @@ -11876,6 +12064,11 @@ next-tick@1, next-tick@^1.1.0: resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb" integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ== +next-tick@~1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c" + integrity sha512-mc/caHeUcdjnC/boPWJefDr4KUIWQNv+tlnFnJd38QMou86QtxQzBJfxgGRzvx8jazYRqrVlaHarfO72uNxPOg== + nice-try@^1.0.4: version "1.0.5" resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366" @@ -11903,14 +12096,6 @@ node-emoji@^1.11.0: dependencies: lodash "^4.17.21" -node-fetch@^1.0.1: - version "1.7.3" - resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef" - integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ== - dependencies: - encoding "^0.1.11" - is-stream "^1.0.1" - node-fetch@^2.6.1, node-fetch@^2.6.7: version "2.6.7" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad" @@ -12099,14 +12284,14 @@ npm-pick-manifest@^7.0.0, npm-pick-manifest@^7.0.1: semver "^7.3.5" npm-profile@^6.2.0: - version "6.2.0" - resolved "https://registry.yarnpkg.com/npm-profile/-/npm-profile-6.2.0.tgz#e2d62b184815a97575702319b5f32ac59e4458bb" - integrity sha512-wG7ZAsLvhqDc2b9COAuGUJgPRUfvCnQI8NEYeifSHZpSYXAgTsHu5812kkcwZeX/5WPd/ARX/MJRWTBFjlUxvg== + version "6.2.1" + resolved "https://registry.yarnpkg.com/npm-profile/-/npm-profile-6.2.1.tgz#975c31ec75a6ae029ab5b8820ffdcbae3a1e3d5e" + integrity sha512-Tlu13duByHyDd4Xy0PgroxzxnBYWbGGL5aZifNp8cx2DxUrHSoETXtPKg38aRPsBWMRfDtvcvVfJNasj7oImQQ== dependencies: npm-registry-fetch "^13.0.1" proc-log "^2.0.0" -npm-registry-fetch@^13.0.0, npm-registry-fetch@^13.0.1, npm-registry-fetch@^13.2.0: +npm-registry-fetch@^13.0.0, npm-registry-fetch@^13.0.1, npm-registry-fetch@^13.3.0: version "13.3.0" resolved "https://registry.yarnpkg.com/npm-registry-fetch/-/npm-registry-fetch-13.3.0.tgz#0ce10fa4a699a1e70685ecf41bbfb4150d74231b" integrity sha512-10LJQ/1+VhKrZjIuY9I/+gQTvumqqlgnsCufoXETHAPFTS3+M+Z5CFhZRDHGavmJ6rOye3UvNga88vl8n1r6gg== @@ -12146,18 +12331,18 @@ npm-user-validate@^1.0.1: integrity sha512-uQwcd/tY+h1jnEaze6cdX/LrhWhoBxfSknxentoqmIuStxUExxjWd3ULMLFPiFUrZKbOVMowH6Jq2FRWfmhcEw== npm@^8.3.0: - version "8.14.0" - resolved "https://registry.yarnpkg.com/npm/-/npm-8.14.0.tgz#4ffc167187b390e55492516bdf4a378d6b4f5b1e" - integrity sha512-wjDSM1GBwFUyqryw0jrWzFCFRlaiCZ9omNcnV3fLERqEYR4UsdRwR/SQCJNmri24yVvD+A/Ozr5p0V2WZVt6BQ== + version "8.16.0" + resolved "https://registry.yarnpkg.com/npm/-/npm-8.16.0.tgz#d385060093f3af10fabe6d8205d41bbf2a34ff9d" + integrity sha512-UfLT/hCbcpV9uiTEBthyrOlQxwk8LG5tAGn283g7f7pRx41KcwFiHV7HYgYm2y2GabfnPtf897ptrXRQwxJWzQ== dependencies: "@isaacs/string-locale-compare" "^1.1.0" "@npmcli/arborist" "^5.0.4" "@npmcli/ci-detect" "^2.0.0" - "@npmcli/config" "^4.1.0" + "@npmcli/config" "^4.2.0" "@npmcli/fs" "^2.1.0" "@npmcli/map-workspaces" "^2.0.3" "@npmcli/package-json" "^2.0.0" - "@npmcli/run-script" "^4.1.7" + "@npmcli/run-script" "^4.2.0" abbrev "~1.1.1" archy "~1.0.0" cacache "^16.1.1" @@ -12185,7 +12370,7 @@ npm@^8.3.0: libnpmsearch "^5.0.2" libnpmteam "^4.0.2" libnpmversion "^3.0.1" - make-fetch-happen "^10.1.8" + make-fetch-happen "^10.2.0" minipass "^3.1.6" minipass-pipeline "^1.2.4" mkdirp "^1.0.4" @@ -12198,7 +12383,7 @@ npm@^8.3.0: npm-package-arg "^9.1.0" npm-pick-manifest "^7.0.1" npm-profile "^6.2.0" - npm-registry-fetch "^13.2.0" + npm-registry-fetch "^13.3.0" npm-user-validate "^1.0.1" npmlog "^6.0.2" opener "^1.5.2" @@ -12264,7 +12449,7 @@ oauth-sign@~0.9.0: resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455" integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ== -object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: +object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg== @@ -12516,6 +12701,11 @@ p-cancelable@^1.0.0: resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-1.1.0.tgz#d078d15a3af409220c886f1d9a0ca2e441ab26cc" integrity sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw== +p-defer@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c" + integrity sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw== + p-defer@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-3.0.0.tgz#d1dceb4ee9b2b604b1d94ffec83760175d4e6f83" @@ -12723,7 +12913,7 @@ parallel-transform@^1.1.0: inherits "^2.0.3" readable-stream "^2.1.5" -param-case@^3.0.3: +param-case@^3.0.3, param-case@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5" integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A== @@ -12828,6 +13018,11 @@ path-browserify@0.0.1: resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a" integrity sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ== +path-browserify@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd" + integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g== + path-dirname@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0" @@ -13051,6 +13246,11 @@ postcss-modules-extract-imports@^2.0.0: dependencies: postcss "^7.0.5" +postcss-modules-extract-imports@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d" + integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw== + postcss-modules-local-by-default@^3.0.2: version "3.0.3" resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz#bb14e0cc78279d504dbdcbfd7e0ca28993ffbbb0" @@ -13061,6 +13261,15 @@ postcss-modules-local-by-default@^3.0.2: postcss-selector-parser "^6.0.2" postcss-value-parser "^4.1.0" +postcss-modules-local-by-default@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c" + integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ== + dependencies: + icss-utils "^5.0.0" + postcss-selector-parser "^6.0.2" + postcss-value-parser "^4.1.0" + postcss-modules-scope@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz#385cae013cc7743f5a7d7602d1073a89eaae62ee" @@ -13069,6 +13278,13 @@ postcss-modules-scope@^2.2.0: postcss "^7.0.6" postcss-selector-parser "^6.0.0" +postcss-modules-scope@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06" + integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg== + dependencies: + postcss-selector-parser "^6.0.4" + postcss-modules-values@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz#5b5000d6ebae29b4255301b4a3a54574423e7f10" @@ -13077,7 +13293,14 @@ postcss-modules-values@^3.0.0: icss-utils "^4.0.0" postcss "^7.0.6" -postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2: +postcss-modules-values@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c" + integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ== + dependencies: + icss-utils "^5.0.0" + +postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4: version "6.0.10" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d" integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w== @@ -13098,6 +13321,15 @@ postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0 picocolors "^0.2.1" source-map "^0.6.1" +postcss@^8.2.15: + version "8.4.14" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf" + integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig== + dependencies: + nanoid "^3.3.4" + picocolors "^1.0.0" + source-map-js "^1.0.2" + prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" @@ -13138,6 +13370,14 @@ pretty-error@^2.1.1: lodash "^4.17.20" renderkid "^2.0.4" +pretty-error@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-4.0.0.tgz#90a703f46dd7234adb46d0f84823e9d1cb8f10d6" + integrity sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw== + dependencies: + lodash "^4.17.20" + renderkid "^3.0.0" + pretty-format@^27.0.2: version "27.5.1" resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e" @@ -13241,13 +13481,6 @@ promise.prototype.finally@^3.1.0: define-properties "^1.1.3" es-abstract "^1.19.1" -promise@^7.1.1: - version "7.3.1" - resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf" - integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg== - dependencies: - asap "~2.0.3" - prompts@^2.0.1, prompts@^2.4.0: version "2.4.2" resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069" @@ -13280,16 +13513,32 @@ property-information@^5.0.0, property-information@^5.3.0: xtend "^4.0.0" proto3-json-serializer@^1.0.0: - version "1.0.2" - resolved "https://registry.yarnpkg.com/proto3-json-serializer/-/proto3-json-serializer-1.0.2.tgz#bb5fe808a60f43bf96d2ce6d5063d8552ae69f06" - integrity sha512-wHxf8jYZ/LUP3M7XmULDKnbxBn+Bvk6SM+tDCPVTp9vraIzUi9hHsOBb1n2Y0VV0ukx4zBN/2vzMQYs4KWwRpg== + version "1.0.3" + resolved "https://registry.yarnpkg.com/proto3-json-serializer/-/proto3-json-serializer-1.0.3.tgz#c23a037eb7c3c7d963a0976fa8b09e942ac83fbe" + integrity sha512-4Xo7uzbTfc8ur9R8VgI0pJpI6aHix76cc7DHJEfZKrZ6vOUbOddxBrsMzAGG2s6b3iHknl4Gn50dA2Y3AoCdow== dependencies: - protobufjs "^6.11.3" + protobufjs "^7.0.0" -protobufjs@6.11.3, protobufjs@^6.11.3: - version "6.11.3" - resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-6.11.3.tgz#637a527205a35caa4f3e2a9a4a13ddffe0e7af74" - integrity sha512-xL96WDdCZYdU7Slin569tFX712BxsxslWwAfAhCYjQKGTq7dAU91Lomy6nLLhh/dyGhk/YH4TwTSRxTzhuHyZg== +protobufjs-cli@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/protobufjs-cli/-/protobufjs-cli-1.0.0.tgz#62f99de142118f34c7b4ee53c2dc122612d2711c" + integrity sha512-7NZEBrFuuU2ZdzlhmAmvh8fdU7A4OFhzYX9AB7a5vXjopAeiks6ZgUSjOlOO7ItCDJQm3y9RWjk7spUbHc4X0w== + dependencies: + chalk "^4.0.0" + escodegen "^1.13.0" + espree "^9.0.0" + estraverse "^5.1.0" + glob "^8.0.0" + jsdoc "^3.6.3" + minimist "^1.2.0" + semver "^7.1.2" + tmp "^0.2.1" + uglify-js "^3.7.7" + +protobufjs@7.0.0, protobufjs@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.0.0.tgz#8c678e1351fd926178fce5a4213913e8d990974f" + integrity sha512-ffNIEm+quOcYtQvHdW406v1NQmZSuqVklxsXk076BtuFnlYZfigLU+JOMrTD8TUOyqHYbRI/fSVNvgd25YeN3w== dependencies: "@protobufjs/aspromise" "^1.1.2" "@protobufjs/base64" "^1.1.2" @@ -13303,7 +13552,7 @@ protobufjs@6.11.3, protobufjs@^6.11.3: "@protobufjs/utf8" "^1.1.0" "@types/long" "^4.0.1" "@types/node" ">=13.7.0" - long "^4.0.0" + long "^5.0.0" proxy-addr@~2.0.7: version "2.0.7" @@ -13571,11 +13820,6 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== -react-lifecycles-compat@^3.0.2: - version "3.0.4" - resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" - integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== - react-refresh@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" @@ -13731,18 +13975,6 @@ readdirp@~3.6.0: dependencies: picomatch "^2.2.1" -recompose@^0.27.1: - version "0.27.1" - resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.27.1.tgz#1a49e931f183634516633bbb4f4edbfd3f38a7ba" - integrity sha512-p7xsyi/rfNjHfdP7vPU02uSFa+Q1eHhjKrvO+3+kRP4Ortj+MxEmpmd+UQtBGM2D2iNAjzNI5rCyBKp9Ob5McA== - dependencies: - babel-runtime "^6.26.0" - change-emitter "^0.1.2" - fbjs "^0.8.1" - hoist-non-react-statics "^2.3.1" - react-lifecycles-compat "^3.0.2" - symbol-observable "^1.0.4" - redent@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde" @@ -13787,11 +14019,6 @@ regenerate@^1.4.2: resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a" integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A== -regenerator-runtime@^0.11.0: - version "0.11.1" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" - integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== - regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7: version "0.13.9" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52" @@ -13953,6 +14180,17 @@ renderkid@^2.0.4: lodash "^4.17.21" strip-ansi "^3.0.1" +renderkid@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-3.0.0.tgz#5fd823e4d6951d37358ecc9a58b1f06836b6268a" + integrity sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg== + dependencies: + css-select "^4.1.3" + dom-converter "^0.2.0" + htmlparser2 "^6.1.0" + lodash "^4.17.21" + strip-ansi "^6.0.1" + repeat-element@^1.1.2: version "1.1.4" resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9" @@ -14006,6 +14244,13 @@ require-from-string@^2.0.2: resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909" integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw== +requizzle@^0.2.3: + version "0.2.3" + resolved "https://registry.yarnpkg.com/requizzle/-/requizzle-0.2.3.tgz#4675c90aacafb2c036bd39ba2daa4a1cb777fded" + integrity sha512-YanoyJjykPxGHii0fZP0uUPEXpvqfBDxWV7s6GKAiiOsiqhX6vHNyW3Qzdmqp/iq/ExbhaGbVrjB4ruEVSM4GQ== + dependencies: + lodash "^4.17.14" + resolve-cwd@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d" @@ -14136,24 +14381,6 @@ ripemd160@^2.0.0, ripemd160@^2.0.1: hash-base "^3.0.0" inherits "^2.0.1" -rollup-plugin-babel@^4.4.0: - version "4.4.0" - resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-4.4.0.tgz#d15bd259466a9d1accbdb2fe2fff17c52d030acb" - integrity sha512-Lek/TYp1+7g7I+uMfJnnSJ7YWoD58ajo6Oarhlex7lvUce+RCKRuGRSgztDO3/MF/PuGKmUL5iTHKf208UNszw== - dependencies: - "@babel/helper-module-imports" "^7.0.0" - rollup-pluginutils "^2.8.1" - -rollup-plugin-commonjs@^9.3.4: - version "9.3.4" - resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-9.3.4.tgz#2b3dddbbbded83d45c36ff101cdd29e924fd23bc" - integrity sha512-DTZOvRoiVIHHLFBCL4pFxOaJt8pagxsVldEXBOn6wl3/V21wVaj17HFfyzTsQUuou3sZL3lEJZVWKPFblJfI6w== - dependencies: - estree-walker "^0.6.0" - magic-string "^0.25.2" - resolve "^1.10.0" - rollup-pluginutils "^2.6.0" - rollup-plugin-copy@^3.4.0: version "3.4.0" resolved "https://registry.yarnpkg.com/rollup-plugin-copy/-/rollup-plugin-copy-3.4.0.tgz#f1228a3ffb66ffad8606e2f3fb7ff23141ed3286" @@ -14185,16 +14412,6 @@ rollup-plugin-esbuild@^4.9.1: joycon "^3.0.1" jsonc-parser "^3.0.0" -rollup-plugin-node-resolve@^4.2.4: - version "4.2.4" - resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-4.2.4.tgz#7d370f8d6fd3031006a0032c38262dd9be3c6250" - integrity sha512-t/64I6l7fZ9BxqD3XlX4ZeO6+5RLKyfpwE2CiPNUKa+GocPlQhf/C208ou8y3AwtNsc6bjSk/8/6y/YAyxCIvw== - dependencies: - "@types/resolve" "0.0.8" - builtin-modules "^3.1.0" - is-module "^1.0.0" - resolve "^1.10.0" - rollup-plugin-replace@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/rollup-plugin-replace/-/rollup-plugin-replace-2.2.0.tgz#f41ae5372e11e7a217cde349c8b5d5fd115e70e3" @@ -14203,17 +14420,17 @@ rollup-plugin-replace@^2.2.0: magic-string "^0.25.2" rollup-pluginutils "^2.6.0" -rollup-pluginutils@^2.6.0, rollup-pluginutils@^2.8.1: +rollup-pluginutils@^2.6.0: version "2.8.2" resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e" integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ== dependencies: estree-walker "^0.6.1" -rollup@^2.77.0: - version "2.77.0" - resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.77.0.tgz#749eaa5ac09b6baa52acc076bc46613eddfd53f4" - integrity sha512-vL8xjY4yOQEw79DvyXLijhnhh+R/O9zpF/LEgkCebZFtb6ELeN9H3/2T0r8+mp+fFTBHZ5qGpOpW2ela2zRt3g== +rollup@^2.77.2: + version "2.77.2" + resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.77.2.tgz#6b6075c55f9cc2040a5912e6e062151e42e2c4e3" + integrity sha512-m/4YzYgLcpMQbxX3NmAqDvwLATZzxt8bIegO78FZLl+lAgKJBd1DRAOeEiZcKOIOPjxE6ewHWHNgGEalFXuz1g== optionalDependencies: fsevents "~2.3.2" @@ -14503,7 +14720,7 @@ set-value@^2.0.0, set-value@^2.0.1: is-plain-object "^2.0.3" split-string "^3.0.1" -setimmediate@^1.0.4, setimmediate@^1.0.5, setimmediate@~1.0.4: +setimmediate@^1.0.4, setimmediate@~1.0.4: version "1.0.5" resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA== @@ -14699,6 +14916,11 @@ source-list-map@^2.0.0: resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34" integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw== +source-map-js@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" + integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== + source-map-resolve@^0.5.0: version "0.5.3" resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a" @@ -14914,14 +15136,6 @@ store2@^2.12.0: resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.2.tgz#56138d200f9fe5f582ad63bc2704dbc0e4a45068" integrity sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w== -storybook-addon-styled-component-theme@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/storybook-addon-styled-component-theme/-/storybook-addon-styled-component-theme-2.0.0.tgz#59a038e0da59c91aba1d9cc8aeb9ff207b5238d1" - integrity sha512-y+KPFCxjIgRt/vNgKrpR0OK8jDDYFa1npU2hU57qcuRXpkvtojlTnyRSkIw1pnr/tMUJ1g//x45bDIt4KYj9/A== - dependencies: - immutable "^3.8.2" - recompose "^0.27.1" - stream-browserify@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b" @@ -15166,6 +15380,14 @@ style-loader@^1.3.0: loader-utils "^2.0.0" schema-utils "^2.7.0" +style-loader@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-2.0.0.tgz#9669602fd4690740eaaec137799a03addbbc393c" + integrity sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ== + dependencies: + loader-utils "^2.0.0" + schema-utils "^3.0.0" + style-to-object@0.3.0, style-to-object@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46" @@ -15257,11 +15479,6 @@ supports-preserve-symlinks-flag@^1.0.0: resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== -symbol-observable@^1.0.4: - version "1.2.0" - resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" - integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== - symbol-tree@^3.2.4: version "3.2.4" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" @@ -15290,12 +15507,17 @@ synckit@^0.8.1: "@pkgr/utils" "^2.3.0" tslib "^2.4.0" +taffydb@2.6.2: + version "2.6.2" + resolved "https://registry.yarnpkg.com/taffydb/-/taffydb-2.6.2.tgz#7cbcb64b5a141b6a2efc2c5d2c67b4e150b2a268" + integrity sha512-y3JaeRSplks6NYQuCOj3ZFMO3j60rTwbuKCvZxsAraGYH2epusatvZ0baZYA01WsGqJBq/Dl6vOrMUJqyMj8kA== + tapable@^1.0.0, tapable@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2" integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA== -tapable@^2.1.1, tapable@^2.2.0: +tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0: version "2.2.1" resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0" integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ== @@ -15404,7 +15626,7 @@ terser-webpack-plugin@^4.2.3: terser "^5.3.4" webpack-sources "^1.4.3" -terser-webpack-plugin@^5.1.3: +terser-webpack-plugin@^5.0.3, terser-webpack-plugin@^5.1.3: version "5.3.3" resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.3.tgz#8033db876dd5875487213e87c627bca323e5ed90" integrity sha512-Fx60G5HNYknNTNQnzQ1VePRuu89ZVYWfjRAeT5rITuCY/1b08s49e5kSQwHDirKZWuoKOBRFS98EUUoZ9kLEwQ== @@ -15424,7 +15646,7 @@ terser@^4.1.2, terser@^4.6.3: source-map "~0.6.1" source-map-support "~0.5.12" -terser@^5.3.4, terser@^5.7.2: +terser@^5.10.0, terser@^5.3.4, terser@^5.7.2: version "5.14.2" resolved "https://registry.yarnpkg.com/terser/-/terser-5.14.2.tgz#9ac9f22b06994d736174f4091aa368db896f1c10" integrity sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA== @@ -15813,9 +16035,9 @@ type@^1.0.1: integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg== type@^2.5.0: - version "2.6.0" - resolved "https://registry.yarnpkg.com/type/-/type-2.6.0.tgz#3ca6099af5981d36ca86b78442973694278a219f" - integrity sha512-eiDBDOmkih5pMbo9OqsqPRGMljLodLcwd5XD5JbtNB0o89xZAwynY9EdCDsJU7LtcVCClu9DvM7/0Ep1hYX3EQ== + version "2.7.0" + resolved "https://registry.yarnpkg.com/type/-/type-2.7.0.tgz#aaff4ac90514e0dc1095b54af70505ef16cf00a2" + integrity sha512-NybX0NBIssNEj1efLf1mqKAtO4Q/Np5mqpa57be81ud7/tNHIXn48FDVXiyGMBF90FfXc5o7RPsuRQrPzgMOMA== typedarray-to-buffer@^3.1.5: version "3.1.5" @@ -15834,15 +16056,15 @@ typescript@^4.6.4, typescript@^4.7.4: resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235" integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ== -ua-parser-js@^0.7.30: - version "0.7.31" - resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6" - integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ== +uc.micro@^1.0.1, uc.micro@^1.0.5: + version "1.0.6" + resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac" + integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA== -uglify-js@^3.1.4: - version "3.16.2" - resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.16.2.tgz#0481e1dbeed343ad1c2ddf3c6d42e89b7a6d4def" - integrity sha512-AaQNokTNgExWrkEYA24BTNMSjyqEXPSfhqoS0AxmHkCJ4U+Dyy5AvbGV/sqxuxficEfGGoX3zWw9R7QpLFfEsg== +uglify-js@^3.1.4, uglify-js@^3.7.7: + version "3.16.3" + resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.16.3.tgz#94c7a63337ee31227a18d03b8a3041c210fd1f1d" + integrity sha512-uVbFqx9vvLhQg0iBaau9Z75AxWJ8tqM9AV890dIZCLApF4rTcyHwmAvLeEdYRs+BzYWu8Iw81F79ah0EfTXbaw== unbox-primitive@^1.0.2: version "1.0.2" @@ -15854,6 +16076,11 @@ unbox-primitive@^1.0.2: has-symbols "^1.0.3" which-boxed-primitive "^1.0.2" +underscore@~1.13.2: + version "1.13.4" + resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.13.4.tgz#7886b46bbdf07f768e0052f1828e1dcab40c0dee" + integrity sha512-BQFnUDuAQ4Yf/cYY5LNrK9NCJFKriaRbD9uR1fTeXnBeoa97W0i41qkZfGO9pSo8I5KzjAcSY2XYtdf0oKd7KQ== + unfetch@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.2.0.tgz#7e21b0ef7d363d8d9af0fb929a5555f6ef97a3be" @@ -16055,7 +16282,7 @@ upath@^1.1.1: resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894" integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg== -update-browserslist-db@^1.0.4: +update-browserslist-db@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz#be06a5eedd62f107b7c19eb5bcefb194411abf38" integrity sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q== @@ -16333,7 +16560,7 @@ watchpack@^1.7.4: chokidar "^3.4.1" watchpack-chokidar2 "^2.0.1" -watchpack@^2.2.0, watchpack@^2.3.1: +watchpack@^2.2.0, watchpack@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d" integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg== @@ -16374,6 +16601,18 @@ webpack-dev-middleware@^3.7.3: range-parser "^1.2.1" webpack-log "^2.0.0" +webpack-dev-middleware@^4.1.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-4.3.0.tgz#179cc40795882cae510b1aa7f3710cbe93c9333e" + integrity sha512-PjwyVY95/bhBh6VUqt6z4THplYcsvQ8YNNBTBM873xLVmw8FLeALn0qurHbs9EmcfhzQis/eoqypSnZeuUz26w== + dependencies: + colorette "^1.2.2" + mem "^8.1.1" + memfs "^3.2.2" + mime-types "^2.1.30" + range-parser "^1.2.1" + schema-utils "^3.0.0" + webpack-filter-warnings-plugin@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/webpack-filter-warnings-plugin/-/webpack-filter-warnings-plugin-1.2.1.tgz#dc61521cf4f9b4a336fbc89108a75ae1da951cdb" @@ -16417,6 +16656,11 @@ webpack-virtual-modules@^0.2.2: dependencies: debug "^3.0.0" +webpack-virtual-modules@^0.4.1: + version "0.4.4" + resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.4.4.tgz#a19fcf371923c59c4712d63d7d194b1e4d8262cc" + integrity sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA== + webpack@4: version "4.46.0" resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.46.0.tgz#bf9b4404ea20a073605e0a011d188d77cb6ad542" @@ -16446,21 +16690,21 @@ webpack@4: watchpack "^1.7.4" webpack-sources "^1.4.1" -"webpack@>=4.43.0 <6.0.0": - version "5.73.0" - resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.73.0.tgz#bbd17738f8a53ee5760ea2f59dce7f3431d35d38" - integrity sha512-svjudQRPPa0YiOYa2lM/Gacw0r6PvxptHj4FuEKQ2kX05ZLkjbVc5MnPs6its5j7IZljnIqSVo/OsY2X0IpHGA== +webpack@5, "webpack@>=4.43.0 <6.0.0", webpack@^5.9.0: + version "5.74.0" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.74.0.tgz#02a5dac19a17e0bb47093f2be67c695102a55980" + integrity sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA== dependencies: "@types/eslint-scope" "^3.7.3" "@types/estree" "^0.0.51" "@webassemblyjs/ast" "1.11.1" "@webassemblyjs/wasm-edit" "1.11.1" "@webassemblyjs/wasm-parser" "1.11.1" - acorn "^8.4.1" + acorn "^8.7.1" acorn-import-assertions "^1.7.6" browserslist "^4.14.5" chrome-trace-event "^1.0.2" - enhanced-resolve "^5.9.3" + enhanced-resolve "^5.10.0" es-module-lexer "^0.9.0" eslint-scope "5.1.1" events "^3.2.0" @@ -16473,7 +16717,7 @@ webpack@4: schema-utils "^3.1.0" tapable "^2.1.1" terser-webpack-plugin "^5.1.3" - watchpack "^2.3.1" + watchpack "^2.4.0" webpack-sources "^3.2.3" whatwg-encoding@^2.0.0: @@ -16483,11 +16727,6 @@ whatwg-encoding@^2.0.0: dependencies: iconv-lite "0.6.3" -whatwg-fetch@>=0.10.0: - version "3.6.2" - resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c" - integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA== - whatwg-mimetype@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz#5fa1a7623867ff1af6ca3dc72ad6b8a4208beba7" @@ -16678,6 +16917,11 @@ xmlchars@^2.2.0: resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb" integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw== +xmlcreate@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/xmlcreate/-/xmlcreate-2.0.4.tgz#0c5ab0f99cdd02a81065fa9cd8f8ae87624889be" + integrity sha512-nquOebG4sngPmGPICTS5EnxqhKbCmz5Ox5hsszI2T6U5qdrJizBc+0ilYSEjTSzU0yZcmvppztXe/5Al5fUwdg== + xregexp@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-2.0.0.tgz#52a63e56ca0b84a7f3a5f3d61872f126ad7a5943" @@ -16724,9 +16968,9 @@ yargs-parser@^20.2.2, yargs-parser@^20.2.3, yargs-parser@^20.2.9: integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w== yargs-parser@^21.0.0, yargs-parser@^21.0.1: - version "21.0.1" - resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.0.1.tgz#0267f286c877a4f0f728fceb6f8a3e4cb95c6e35" - integrity sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg== + version "21.1.0" + resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.0.tgz#a11d06a3bf57f064e951aa3ef55fcf3a5705f876" + integrity sha512-xzm2t63xTV/f7+bGMSRzLhUNk1ajv/tDoaD5OeGyC3cFo2fl7My9Z4hS3q2VdQ7JaLvTxErO8Jp5pRIFGMD/zg== yargs@^16.2.0: version "16.2.0" From 64aee8b45a96d0d71cc37ccd67525610786e099a Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Thu, 28 Jul 2022 16:59:28 -0400 Subject: [PATCH 049/100] chore: restore React 16 support This restores importing React and the ESLint rule react/react-in-jsx-scope to preserve React 16 compatibility. This also moves some types around so themes can be exported as a standalone with its own TypeScript config. --- .codesandbox/ci.json | 6 +- .eslintrc.js | 1 - package.json | 1 - src/Anchor/Anchor.spec.tsx | 2 + src/Anchor/Anchor.stories.tsx | 1 + src/AppBar/AppBar.spec.tsx | 1 + src/AppBar/AppBar.stories.tsx | 14 ++-- src/Avatar/Avatar.spec.tsx | 1 + src/Avatar/Avatar.stories.tsx | 1 + src/Bar/Bar.spec.tsx | 2 + src/Bar/Bar.stories.tsx | 1 + src/Button/Button.spec.tsx | 3 +- src/Button/Button.stories.tsx | 2 +- src/Checkbox/Checkbox.spec.tsx | 2 + src/ColorInput/ColorInput.spec.tsx | 1 + src/ColorInput/ColorInput.stories.tsx | 1 + src/Counter/Counter.spec.tsx | 1 + src/Counter/Counter.stories.tsx | 2 +- src/Cutout/Cutout.spec.tsx | 1 + src/Cutout/Cutout.stories.tsx | 1 + src/DatePicker/DatePicker.stories.tsx | 1 + src/DatePicker/DatePicker.tsx | 2 +- src/Desktop/Desktop.spec.tsx | 1 + src/Desktop/Desktop.stories.tsx | 6 +- src/Divider/Divider.spec.tsx | 2 + src/Divider/Divider.stories.tsx | 1 + src/Fieldset/Fieldset.spec.tsx | 2 + src/Fieldset/Fieldset.stories.tsx | 2 +- src/Hourglass/Hourglass.stories.tsx | 6 +- src/Hourglass/Hourglass.tsx | 2 +- src/List/List.spec.tsx | 2 + src/List/List.stories.tsx | 3 +- src/ListItem/ListItem.spec.tsx | 2 + .../LoadingIndicator.spec.tsx | 2 + .../LoadingIndicator.stories.tsx | 1 + src/NumberField/NumberField.spec.tsx | 1 + src/NumberField/NumberField.stories.tsx | 1 + src/Panel/Panel.spec.tsx | 1 + src/Panel/Panel.stories.tsx | 1 + src/Progress/Progress.spec.tsx | 2 + src/Progress/Progress.stories.tsx | 2 +- src/Radio/Radio.spec.tsx | 2 + src/Select/Select.stories.tsx | 1 + src/Slider/Slider.spec.tsx | 2 +- src/Slider/Slider.stories.tsx | 1 + src/Slider/Slider.tsx | 4 +- src/Tab/Tab.spec.tsx | 2 + src/TabBody/TabBody.spec.tsx | 2 + src/Table/Table.spec.tsx | 2 + src/Table/Table.stories.tsx | 1 + src/Tabs/Tabs.spec.tsx | 3 +- src/Tabs/Tabs.stories.tsx | 2 +- src/TextField/TextField.stories.tsx | 2 +- src/Toolbar/Toolbar.spec.tsx | 1 + src/Tooltip/Tooltip.spec.tsx | 1 + src/Tooltip/Tooltip.stories.tsx | 1 + src/Tree/Tree.spec.tsx | 2 + src/Tree/Tree.stories.tsx | 2 +- src/Window/Window.spec.tsx | 3 +- src/Window/Window.stories.tsx | 1 + src/WindowContent/WindowContent.spec.tsx | 2 + src/WindowHeader/WindowHeader.spec.tsx | 2 + .../hooks/useControlledOrUncontrolled.ts | 2 +- src/common/hooks/useForkRef.spec.tsx | 12 ++-- src/common/hooks/useForkRef.ts | 5 +- src/common/hooks/useIsFocusVisible.ts | 9 +-- src/common/themes/aiee.ts | 2 +- src/common/themes/ash.ts | 2 +- src/common/themes/azureOrange.ts | 2 +- src/common/themes/bee.ts | 2 +- src/common/themes/blackAndWhite.ts | 2 +- src/common/themes/blue.ts | 2 +- src/common/themes/brick.ts | 2 +- src/common/themes/candy.ts | 2 +- src/common/themes/cherry.ts | 2 +- src/common/themes/coldGray.ts | 2 +- src/common/themes/counterStrike.ts | 2 +- src/common/themes/darkTeal.ts | 2 +- src/common/themes/denim.ts | 2 +- src/common/themes/eggplant.ts | 2 +- src/common/themes/fxDev.ts | 2 +- src/common/themes/highContrast.ts | 2 +- src/common/themes/honey.ts | 2 +- src/common/themes/hotChocolate.ts | 2 +- src/common/themes/hotdogStand.ts | 2 +- src/common/themes/lilac.ts | 2 +- src/common/themes/lilacRoseDark.ts | 2 +- src/common/themes/maple.ts | 2 +- src/common/themes/marine.ts | 2 +- src/common/themes/matrix.ts | 2 +- src/common/themes/millenium.ts | 2 +- src/common/themes/modernDark.ts | 2 +- src/common/themes/molecule.ts | 2 +- src/common/themes/ninjaTurtles.ts | 2 +- src/common/themes/olive.ts | 2 +- src/common/themes/original.ts | 2 +- src/common/themes/pamelaAnderson.ts | 2 +- src/common/themes/peggysPastels.ts | 2 +- src/common/themes/plum.ts | 2 +- src/common/themes/polarized.ts | 2 +- src/common/themes/powerShell.ts | 2 +- src/common/themes/rainyDay.ts | 2 +- src/common/themes/raspberry.ts | 2 +- src/common/themes/redWine.ts | 2 +- src/common/themes/rose.ts | 2 +- src/common/themes/seawater.ts | 2 +- src/common/themes/shelbiTeal.ts | 2 +- src/common/themes/slate.ts | 2 +- src/common/themes/solarizedDark.ts | 2 +- src/common/themes/solarizedLight.ts | 2 +- src/common/themes/spruce.ts | 2 +- src/common/themes/stormClouds.ts | 2 +- src/common/themes/theSixtiesUSA.ts | 2 +- src/common/themes/tokyoDark.ts | 2 +- src/common/themes/toner.ts | 2 +- src/common/themes/tooSexy.ts | 2 +- src/common/themes/travel.ts | 2 +- src/common/themes/types.ts | 69 ++++++++++++++++++ src/common/themes/vaporTeal.ts | 2 +- src/common/themes/vermillion.ts | 2 +- src/common/themes/violetDark.ts | 2 +- src/common/themes/vistaesqueMidnight.ts | 2 +- src/common/themes/water.ts | 2 +- src/common/themes/white.ts | 2 +- src/common/themes/windows1.ts | 2 +- src/common/themes/wmii.ts | 2 +- src/types.tsx | 70 +------------------ tsconfig.json | 2 +- 128 files changed, 240 insertions(+), 174 deletions(-) create mode 100644 src/common/themes/types.ts diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 696148de..75f1dc74 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -1,5 +1,7 @@ { - "installCommand": "install:codesandbox", "buildCommand": "build:prod", - "sandboxes": ["react95-template-xkfj0"] + "node": "16", + "sandboxes": [ + "react95-template-xkfj0" + ] } diff --git a/.eslintrc.js b/.eslintrc.js index adf07ec4..fa7520aa 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -43,7 +43,6 @@ module.exports = { 'react/jsx-props-no-spreading': 'off', 'react/no-array-index-key': 'off', 'react/prop-types': 'off', - 'react/react-in-jsx-scope': 'off', 'react/require-default-props': 'off', 'react/static-property-placement': ['error', 'static public field'] }, diff --git a/package.json b/package.json index 2a29589d..540a717d 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,6 @@ "lint": "eslint --ext .js,.ts,.tsx src", "lint:fix": "yarn run lint --fix", "semantic-release": "semantic-release", - "install:codesandbox": "yarn --ignore-engines", "cz": "git-cz" }, "peerDependencies": { diff --git a/src/Anchor/Anchor.spec.tsx b/src/Anchor/Anchor.spec.tsx index 49d86659..ac539864 100644 --- a/src/Anchor/Anchor.spec.tsx +++ b/src/Anchor/Anchor.spec.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { render } from '@testing-library/react'; import { Anchor } from './Anchor'; diff --git a/src/Anchor/Anchor.stories.tsx b/src/Anchor/Anchor.stories.tsx index 23c11b62..f2fb21c7 100644 --- a/src/Anchor/Anchor.stories.tsx +++ b/src/Anchor/Anchor.stories.tsx @@ -1,4 +1,5 @@ import { ComponentMeta } from '@storybook/react'; +import React from 'react'; import styled from 'styled-components'; import { Anchor } from './Anchor'; diff --git a/src/AppBar/AppBar.spec.tsx b/src/AppBar/AppBar.spec.tsx index 402323c2..94824cdd 100644 --- a/src/AppBar/AppBar.spec.tsx +++ b/src/AppBar/AppBar.spec.tsx @@ -1,4 +1,5 @@ import { render } from '@testing-library/react'; +import React from 'react'; import { AppBar } from './AppBar'; diff --git a/src/AppBar/AppBar.stories.tsx b/src/AppBar/AppBar.stories.tsx index 09b518b8..bb12aa22 100644 --- a/src/AppBar/AppBar.stories.tsx +++ b/src/AppBar/AppBar.stories.tsx @@ -1,15 +1,15 @@ -import React from 'react'; -import styled from 'styled-components'; +import { ComponentMeta } from '@storybook/react'; +import React, { useState } from 'react'; import { AppBar, - Toolbar, - TextField, Button, + Divider, List, ListItem, - Divider + TextField, + Toolbar } from 'react95'; -import { ComponentMeta } from '@storybook/react'; +import styled from 'styled-components'; import logoIMG from '../assets/images/logo.png'; const Wrapper = styled.div` @@ -24,7 +24,7 @@ export default { } as ComponentMeta; export function Default() { - const [open, setOpen] = React.useState(false); + const [open, setOpen] = useState(false); return ( diff --git a/src/Avatar/Avatar.spec.tsx b/src/Avatar/Avatar.spec.tsx index 9ef8de45..12ed72cb 100644 --- a/src/Avatar/Avatar.spec.tsx +++ b/src/Avatar/Avatar.spec.tsx @@ -1,4 +1,5 @@ import { render } from '@testing-library/react'; +import React from 'react'; import { renderWithTheme, theme } from '../../test/utils'; diff --git a/src/Avatar/Avatar.stories.tsx b/src/Avatar/Avatar.stories.tsx index b3707267..f1cdd4e3 100644 --- a/src/Avatar/Avatar.stories.tsx +++ b/src/Avatar/Avatar.stories.tsx @@ -1,4 +1,5 @@ import { ComponentMeta } from '@storybook/react'; +import React from 'react'; import { Avatar } from 'react95'; import styled from 'styled-components'; diff --git a/src/Bar/Bar.spec.tsx b/src/Bar/Bar.spec.tsx index a8964a4b..de79c49c 100644 --- a/src/Bar/Bar.spec.tsx +++ b/src/Bar/Bar.spec.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { renderWithTheme } from '../../test/utils'; import { Bar } from './Bar'; diff --git a/src/Bar/Bar.stories.tsx b/src/Bar/Bar.stories.tsx index 569e343d..2e018b0b 100644 --- a/src/Bar/Bar.stories.tsx +++ b/src/Bar/Bar.stories.tsx @@ -1,4 +1,5 @@ import { ComponentMeta } from '@storybook/react'; +import React from 'react'; import { AppBar, Bar, Button, Toolbar } from 'react95'; import styled from 'styled-components'; diff --git a/src/Button/Button.spec.tsx b/src/Button/Button.spec.tsx index f79ad1e4..a0f496f3 100644 --- a/src/Button/Button.spec.tsx +++ b/src/Button/Button.spec.tsx @@ -1,4 +1,5 @@ -import { render, fireEvent } from '@testing-library/react'; +import { fireEvent, render } from '@testing-library/react'; +import React from 'react'; import { renderWithTheme, theme } from '../../test/utils'; import { blockSizes } from '../common/system'; diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 97980a13..3e6237a1 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta } from '@storybook/react'; -import { useState } from 'react'; +import React, { useState } from 'react'; import { Button, Cutout, diff --git a/src/Checkbox/Checkbox.spec.tsx b/src/Checkbox/Checkbox.spec.tsx index 40f5d452..edb02060 100644 --- a/src/Checkbox/Checkbox.spec.tsx +++ b/src/Checkbox/Checkbox.spec.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { renderWithTheme } from '../../test/utils'; import { Checkbox } from './Checkbox'; diff --git a/src/ColorInput/ColorInput.spec.tsx b/src/ColorInput/ColorInput.spec.tsx index 40e019cb..8e2dc4c6 100644 --- a/src/ColorInput/ColorInput.spec.tsx +++ b/src/ColorInput/ColorInput.spec.tsx @@ -1,4 +1,5 @@ import { fireEvent } from '@testing-library/react'; +import React from 'react'; import { renderWithTheme } from '../../test/utils'; import { ColorInput } from './ColorInput'; diff --git a/src/ColorInput/ColorInput.stories.tsx b/src/ColorInput/ColorInput.stories.tsx index 92bf0a33..93ce49dd 100644 --- a/src/ColorInput/ColorInput.stories.tsx +++ b/src/ColorInput/ColorInput.stories.tsx @@ -1,4 +1,5 @@ import { ComponentMeta } from '@storybook/react'; +import React from 'react'; import styled from 'styled-components'; import { ColorInput, Cutout } from 'react95'; diff --git a/src/Counter/Counter.spec.tsx b/src/Counter/Counter.spec.tsx index 83fab8e5..74b1de70 100644 --- a/src/Counter/Counter.spec.tsx +++ b/src/Counter/Counter.spec.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { renderWithTheme } from '../../test/utils'; import { Counter } from './Counter'; diff --git a/src/Counter/Counter.stories.tsx b/src/Counter/Counter.stories.tsx index eee43d3a..63ed01dc 100644 --- a/src/Counter/Counter.stories.tsx +++ b/src/Counter/Counter.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta } from '@storybook/react'; -import { useState } from 'react'; +import React, { useState } from 'react'; import { Button, Counter, Panel } from 'react95'; import styled from 'styled-components'; diff --git a/src/Cutout/Cutout.spec.tsx b/src/Cutout/Cutout.spec.tsx index 7a793271..08681f7e 100644 --- a/src/Cutout/Cutout.spec.tsx +++ b/src/Cutout/Cutout.spec.tsx @@ -1,4 +1,5 @@ import { render } from '@testing-library/react'; +import React from 'react'; import { Cutout } from './Cutout'; diff --git a/src/Cutout/Cutout.stories.tsx b/src/Cutout/Cutout.stories.tsx index 41f807fa..5dc2b909 100644 --- a/src/Cutout/Cutout.stories.tsx +++ b/src/Cutout/Cutout.stories.tsx @@ -1,4 +1,5 @@ import { ComponentMeta } from '@storybook/react'; +import React from 'react'; import { Cutout, Window, WindowContent } from 'react95'; import styled from 'styled-components'; diff --git a/src/DatePicker/DatePicker.stories.tsx b/src/DatePicker/DatePicker.stories.tsx index 9413bc6f..9591d210 100644 --- a/src/DatePicker/DatePicker.stories.tsx +++ b/src/DatePicker/DatePicker.stories.tsx @@ -1,5 +1,6 @@ /* eslint-disable camelcase, react/jsx-pascal-case */ import { ComponentMeta } from '@storybook/react'; +import React from 'react'; import { DatePicker__UNSTABLE } from 'react95'; import styled from 'styled-components'; diff --git a/src/DatePicker/DatePicker.tsx b/src/DatePicker/DatePicker.tsx index ca7121fa..4b4521c2 100644 --- a/src/DatePicker/DatePicker.tsx +++ b/src/DatePicker/DatePicker.tsx @@ -1,4 +1,4 @@ -import { forwardRef, useCallback, useMemo, useState } from 'react'; +import React, { forwardRef, useCallback, useMemo, useState } from 'react'; import styled from 'styled-components'; import { Button } from '../Button/Button'; diff --git a/src/Desktop/Desktop.spec.tsx b/src/Desktop/Desktop.spec.tsx index 996a97f6..c7e239e0 100644 --- a/src/Desktop/Desktop.spec.tsx +++ b/src/Desktop/Desktop.spec.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { renderWithTheme } from '../../test/utils'; import { Desktop } from './Desktop'; diff --git a/src/Desktop/Desktop.stories.tsx b/src/Desktop/Desktop.stories.tsx index faf9734f..dfaa324f 100644 --- a/src/Desktop/Desktop.stories.tsx +++ b/src/Desktop/Desktop.stories.tsx @@ -1,7 +1,7 @@ -import styled from 'styled-components'; - -import { Desktop } from 'react95'; import { ComponentMeta } from '@storybook/react'; +import React from 'react'; +import { Desktop } from 'react95'; +import styled from 'styled-components'; const Wrapper = styled.div` padding: 5rem; diff --git a/src/Divider/Divider.spec.tsx b/src/Divider/Divider.spec.tsx index a2e8d8e4..7054c79e 100644 --- a/src/Divider/Divider.spec.tsx +++ b/src/Divider/Divider.spec.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { renderWithTheme } from '../../test/utils'; import { Divider } from './Divider'; diff --git a/src/Divider/Divider.stories.tsx b/src/Divider/Divider.stories.tsx index 59c99560..4f697e29 100644 --- a/src/Divider/Divider.stories.tsx +++ b/src/Divider/Divider.stories.tsx @@ -1,4 +1,5 @@ import { ComponentMeta } from '@storybook/react'; +import React from 'react'; import styled from 'styled-components'; import { Divider, List, ListItem } from 'react95'; diff --git a/src/Fieldset/Fieldset.spec.tsx b/src/Fieldset/Fieldset.spec.tsx index 76c84274..da7a64e7 100644 --- a/src/Fieldset/Fieldset.spec.tsx +++ b/src/Fieldset/Fieldset.spec.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { renderWithTheme, theme } from '../../test/utils'; import { Fieldset } from './Fieldset'; diff --git a/src/Fieldset/Fieldset.stories.tsx b/src/Fieldset/Fieldset.stories.tsx index 93d3e9fc..819fcafa 100644 --- a/src/Fieldset/Fieldset.stories.tsx +++ b/src/Fieldset/Fieldset.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta } from '@storybook/react'; -import { useState } from 'react'; +import React, { useState } from 'react'; import { Checkbox, Cutout, Fieldset, Window, WindowContent } from 'react95'; import styled from 'styled-components'; diff --git a/src/Hourglass/Hourglass.stories.tsx b/src/Hourglass/Hourglass.stories.tsx index e0980e60..8657f775 100644 --- a/src/Hourglass/Hourglass.stories.tsx +++ b/src/Hourglass/Hourglass.stories.tsx @@ -1,7 +1,7 @@ -import styled from 'styled-components'; - -import { Hourglass } from 'react95'; import { ComponentMeta } from '@storybook/react'; +import React from 'react'; +import { Hourglass } from 'react95'; +import styled from 'styled-components'; const Wrapper = styled.div` padding: 5rem; diff --git a/src/Hourglass/Hourglass.tsx b/src/Hourglass/Hourglass.tsx index e64ebd7b..d20ae4f7 100644 --- a/src/Hourglass/Hourglass.tsx +++ b/src/Hourglass/Hourglass.tsx @@ -1,4 +1,4 @@ -import { forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import styled from 'styled-components'; import { getSize } from '../common/utils'; import base64hourglass from './base64hourglass'; diff --git a/src/List/List.spec.tsx b/src/List/List.spec.tsx index 16e6dff3..48943d95 100644 --- a/src/List/List.spec.tsx +++ b/src/List/List.spec.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { renderWithTheme } from '../../test/utils'; import { List } from './List'; diff --git a/src/List/List.stories.tsx b/src/List/List.stories.tsx index 547cebd6..b365fcb6 100644 --- a/src/List/List.stories.tsx +++ b/src/List/List.stories.tsx @@ -1,7 +1,8 @@ import { ComponentMeta } from '@storybook/react'; +import React from 'react'; import styled from 'styled-components'; -import { List, ListItem, Bar, Divider } from 'react95'; +import { Bar, Divider, List, ListItem } from 'react95'; const Wrapper = styled.div` padding: 5rem; diff --git a/src/ListItem/ListItem.spec.tsx b/src/ListItem/ListItem.spec.tsx index 60a8700c..6adb7734 100644 --- a/src/ListItem/ListItem.spec.tsx +++ b/src/ListItem/ListItem.spec.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { renderWithTheme, theme } from '../../test/utils'; import { blockSizes } from '../common/system'; import { ListItem } from './ListItem'; diff --git a/src/LoadingIndicator/LoadingIndicator.spec.tsx b/src/LoadingIndicator/LoadingIndicator.spec.tsx index b3a9c1f1..929ec4d4 100644 --- a/src/LoadingIndicator/LoadingIndicator.spec.tsx +++ b/src/LoadingIndicator/LoadingIndicator.spec.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { renderWithTheme } from '../../test/utils'; import { LoadingIndicator } from './LoadingIndicator'; diff --git a/src/LoadingIndicator/LoadingIndicator.stories.tsx b/src/LoadingIndicator/LoadingIndicator.stories.tsx index c3f9e186..f200813a 100644 --- a/src/LoadingIndicator/LoadingIndicator.stories.tsx +++ b/src/LoadingIndicator/LoadingIndicator.stories.tsx @@ -1,4 +1,5 @@ import { ComponentMeta } from '@storybook/react'; +import React from 'react'; import styled from 'styled-components'; import { LoadingIndicator } from 'react95'; diff --git a/src/NumberField/NumberField.spec.tsx b/src/NumberField/NumberField.spec.tsx index 4faefcfc..ee3ee61a 100644 --- a/src/NumberField/NumberField.spec.tsx +++ b/src/NumberField/NumberField.spec.tsx @@ -1,4 +1,5 @@ import { fireEvent } from '@testing-library/react'; +import React from 'react'; import { renderWithTheme } from '../../test/utils'; import { NumberField } from './NumberField'; diff --git a/src/NumberField/NumberField.stories.tsx b/src/NumberField/NumberField.stories.tsx index 6064caea..84f5b93e 100644 --- a/src/NumberField/NumberField.stories.tsx +++ b/src/NumberField/NumberField.stories.tsx @@ -1,4 +1,5 @@ import { ComponentMeta } from '@storybook/react'; +import React from 'react'; import { Cutout, NumberField } from 'react95'; import styled from 'styled-components'; diff --git a/src/Panel/Panel.spec.tsx b/src/Panel/Panel.spec.tsx index 8f85f5f9..90d7e4a9 100644 --- a/src/Panel/Panel.spec.tsx +++ b/src/Panel/Panel.spec.tsx @@ -1,4 +1,5 @@ import { render } from '@testing-library/react'; +import React from 'react'; import { Panel } from './Panel'; diff --git a/src/Panel/Panel.stories.tsx b/src/Panel/Panel.stories.tsx index 460f4326..930fb96c 100644 --- a/src/Panel/Panel.stories.tsx +++ b/src/Panel/Panel.stories.tsx @@ -1,4 +1,5 @@ import { ComponentMeta } from '@storybook/react'; +import React from 'react'; import { Panel } from 'react95'; import styled from 'styled-components'; diff --git a/src/Progress/Progress.spec.tsx b/src/Progress/Progress.spec.tsx index 9caec9a1..3288e7a0 100644 --- a/src/Progress/Progress.spec.tsx +++ b/src/Progress/Progress.spec.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { renderWithTheme } from '../../test/utils'; import { Progress } from './Progress'; diff --git a/src/Progress/Progress.stories.tsx b/src/Progress/Progress.stories.tsx index 5565ee26..87e6a4b9 100644 --- a/src/Progress/Progress.stories.tsx +++ b/src/Progress/Progress.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta } from '@storybook/react'; -import { useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { Progress } from 'react95'; import styled from 'styled-components'; diff --git a/src/Radio/Radio.spec.tsx b/src/Radio/Radio.spec.tsx index 4fc5ae45..fab02340 100644 --- a/src/Radio/Radio.spec.tsx +++ b/src/Radio/Radio.spec.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { renderWithTheme } from '../../test/utils'; import { Radio } from './Radio'; diff --git a/src/Select/Select.stories.tsx b/src/Select/Select.stories.tsx index b4cca63f..3184100a 100644 --- a/src/Select/Select.stories.tsx +++ b/src/Select/Select.stories.tsx @@ -1,6 +1,7 @@ /* eslint-disable no-console */ import { ComponentMeta } from '@storybook/react'; +import React from 'react'; import { Cutout, Fieldset, Select, Window, WindowContent } from 'react95'; import styled from 'styled-components'; import { SelectChangeEvent, SelectOption } from './Select.types'; diff --git a/src/Slider/Slider.spec.tsx b/src/Slider/Slider.spec.tsx index e377e47b..2576d2ed 100644 --- a/src/Slider/Slider.spec.tsx +++ b/src/Slider/Slider.spec.tsx @@ -1,6 +1,6 @@ // Pretty much straight out copied from https://github.com/mui-org/material-ui 😂 - import { fireEvent } from '@testing-library/react'; +import React from 'react'; import { renderWithTheme, Touch } from '../../test/utils'; import { Slider } from './Slider'; diff --git a/src/Slider/Slider.stories.tsx b/src/Slider/Slider.stories.tsx index caec2332..6f1f453d 100644 --- a/src/Slider/Slider.stories.tsx +++ b/src/Slider/Slider.stories.tsx @@ -1,4 +1,5 @@ import { ComponentMeta } from '@storybook/react'; +import React from 'react'; import { Cutout, Slider } from 'react95'; import styled from 'styled-components'; diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx index 7e10ec1f..1f37168c 100644 --- a/src/Slider/Slider.tsx +++ b/src/Slider/Slider.tsx @@ -187,10 +187,10 @@ const sharedGrooveStyles = () => css` width: 100%; `} `; -const StyledGroove = styled(StyledCutout)` +const StyledGroove = styled(StyledCutout)` ${sharedGrooveStyles()} `; -const StyledFlatGroove = styled(StyledCutout)` +const StyledFlatGroove = styled(StyledCutout)` ${sharedGrooveStyles()} border-left-color: ${({ theme }) => theme.flatLight}; diff --git a/src/Tab/Tab.spec.tsx b/src/Tab/Tab.spec.tsx index 909bb0ce..0b2fb15c 100644 --- a/src/Tab/Tab.spec.tsx +++ b/src/Tab/Tab.spec.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { renderWithTheme } from '../../test/utils'; import { Tab } from './Tab'; diff --git a/src/TabBody/TabBody.spec.tsx b/src/TabBody/TabBody.spec.tsx index 31f7d014..9515b1b0 100644 --- a/src/TabBody/TabBody.spec.tsx +++ b/src/TabBody/TabBody.spec.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { renderWithTheme } from '../../test/utils'; import { TabBody } from './TabBody'; diff --git a/src/Table/Table.spec.tsx b/src/Table/Table.spec.tsx index 3a0badd8..7552c5be 100644 --- a/src/Table/Table.spec.tsx +++ b/src/Table/Table.spec.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { renderWithTheme } from '../../test/utils'; import { Table } from './Table'; diff --git a/src/Table/Table.stories.tsx b/src/Table/Table.stories.tsx index 988193e3..98713dfc 100644 --- a/src/Table/Table.stories.tsx +++ b/src/Table/Table.stories.tsx @@ -1,4 +1,5 @@ import { ComponentMeta } from '@storybook/react'; +import React from 'react'; import { Table, TableBody, diff --git a/src/Tabs/Tabs.spec.tsx b/src/Tabs/Tabs.spec.tsx index 1e27ed20..8306c1bf 100644 --- a/src/Tabs/Tabs.spec.tsx +++ b/src/Tabs/Tabs.spec.tsx @@ -1,7 +1,8 @@ import { fireEvent } from '@testing-library/react'; +import React from 'react'; -import { renderWithTheme } from '../../test/utils'; import { Tab } from '..'; +import { renderWithTheme } from '../../test/utils'; import { Tabs } from './Tabs'; describe('', () => { diff --git a/src/Tabs/Tabs.stories.tsx b/src/Tabs/Tabs.stories.tsx index 0905fd03..5ba196d3 100644 --- a/src/Tabs/Tabs.stories.tsx +++ b/src/Tabs/Tabs.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta } from '@storybook/react'; -import { useState } from 'react'; +import React, { useState } from 'react'; import { Anchor, Checkbox, diff --git a/src/TextField/TextField.stories.tsx b/src/TextField/TextField.stories.tsx index 83ba88c1..f9134231 100644 --- a/src/TextField/TextField.stories.tsx +++ b/src/TextField/TextField.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta } from '@storybook/react'; -import { useState } from 'react'; +import React, { useState } from 'react'; import { Button, Cutout, TextField } from 'react95'; import styled from 'styled-components'; diff --git a/src/Toolbar/Toolbar.spec.tsx b/src/Toolbar/Toolbar.spec.tsx index 8d45e371..dfe060a4 100644 --- a/src/Toolbar/Toolbar.spec.tsx +++ b/src/Toolbar/Toolbar.spec.tsx @@ -1,4 +1,5 @@ import { render } from '@testing-library/react'; +import React from 'react'; import { Toolbar } from './Toolbar'; diff --git a/src/Tooltip/Tooltip.spec.tsx b/src/Tooltip/Tooltip.spec.tsx index b0a7f574..d8602526 100644 --- a/src/Tooltip/Tooltip.spec.tsx +++ b/src/Tooltip/Tooltip.spec.tsx @@ -1,4 +1,5 @@ import { fireEvent, render, waitFor } from '@testing-library/react'; +import React from 'react'; import { Tooltip, TooltipProps } from './Tooltip'; diff --git a/src/Tooltip/Tooltip.stories.tsx b/src/Tooltip/Tooltip.stories.tsx index 9d4b9803..2ad6f141 100644 --- a/src/Tooltip/Tooltip.stories.tsx +++ b/src/Tooltip/Tooltip.stories.tsx @@ -1,4 +1,5 @@ import { ComponentMeta } from '@storybook/react'; +import React from 'react'; import { Button, Tooltip } from 'react95'; import styled from 'styled-components'; diff --git a/src/Tree/Tree.spec.tsx b/src/Tree/Tree.spec.tsx index 262e5825..17ea298b 100644 --- a/src/Tree/Tree.spec.tsx +++ b/src/Tree/Tree.spec.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { renderWithTheme } from '../../test/utils'; import { Tree } from './Tree'; diff --git a/src/Tree/Tree.stories.tsx b/src/Tree/Tree.stories.tsx index 5d9781c0..011214b5 100644 --- a/src/Tree/Tree.stories.tsx +++ b/src/Tree/Tree.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta } from '@storybook/react'; -import { useCallback, useState } from 'react'; +import React, { useCallback, useState } from 'react'; import { Fieldset, Tree, TreeLeaf } from 'react95'; import styled from 'styled-components'; import { Button } from '../Button/Button'; diff --git a/src/Window/Window.spec.tsx b/src/Window/Window.spec.tsx index 24580ebf..0d2d3d6e 100644 --- a/src/Window/Window.spec.tsx +++ b/src/Window/Window.spec.tsx @@ -1,4 +1,5 @@ -import { createRef } from 'react'; +import React, { createRef } from 'react'; + import { renderWithTheme } from '../../test/utils'; import { Window } from './Window'; diff --git a/src/Window/Window.stories.tsx b/src/Window/Window.stories.tsx index 1cdad064..050a044e 100644 --- a/src/Window/Window.stories.tsx +++ b/src/Window/Window.stories.tsx @@ -1,4 +1,5 @@ import { ComponentMeta } from '@storybook/react'; +import React from 'react'; import { Button, Panel, diff --git a/src/WindowContent/WindowContent.spec.tsx b/src/WindowContent/WindowContent.spec.tsx index cddb5ed9..c5c26542 100644 --- a/src/WindowContent/WindowContent.spec.tsx +++ b/src/WindowContent/WindowContent.spec.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { renderWithTheme } from '../../test/utils'; import { WindowContent } from './WindowContent'; diff --git a/src/WindowHeader/WindowHeader.spec.tsx b/src/WindowHeader/WindowHeader.spec.tsx index d47c0ac1..9f109866 100644 --- a/src/WindowHeader/WindowHeader.spec.tsx +++ b/src/WindowHeader/WindowHeader.spec.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { renderWithTheme, theme } from '../../test/utils'; import { WindowHeader } from './WindowHeader'; diff --git a/src/common/hooks/useControlledOrUncontrolled.ts b/src/common/hooks/useControlledOrUncontrolled.ts index b7847bfe..8404d3e9 100644 --- a/src/common/hooks/useControlledOrUncontrolled.ts +++ b/src/common/hooks/useControlledOrUncontrolled.ts @@ -1,4 +1,4 @@ -import { useState, useCallback } from 'react'; +import React, { useState, useCallback } from 'react'; export default function useControlledOrUncontrolled({ value, diff --git a/src/common/hooks/useForkRef.spec.tsx b/src/common/hooks/useForkRef.spec.tsx index d4b4cb8c..2e3395ee 100644 --- a/src/common/hooks/useForkRef.spec.tsx +++ b/src/common/hooks/useForkRef.spec.tsx @@ -1,5 +1,5 @@ import { render } from '@testing-library/react'; -import React from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; import useForkRef from './useForkRef'; @@ -17,9 +17,9 @@ describe('useForkRef', () => { it('returns a single ref-setter function that forks the ref to its inputs', () => { function Component(props: { innerRef: React.RefObject }) { const { innerRef } = props; - const ownRef = React.useRef(); - const [, forceUpdate] = React.useState(true); - React.useEffect(() => forceUpdate(n => !n), []); + const ownRef = useRef(); + const [, forceUpdate] = useState(true); + useEffect(() => forceUpdate(n => !n), []); const handleRef = useForkRef(innerRef, ownRef); @@ -40,8 +40,8 @@ describe('useForkRef', () => { _, ref ) { - const [hasRef, setHasRef] = React.useState(false); - const handleOwnRef = React.useCallback(() => setHasRef(true), []); + const [hasRef, setHasRef] = useState(false); + const handleOwnRef = useCallback(() => setHasRef(true), []); const handleRef = useForkRef(handleOwnRef, ref); return
{String(hasRef)}
; diff --git a/src/common/hooks/useForkRef.ts b/src/common/hooks/useForkRef.ts index 78c4abf6..7256ff59 100644 --- a/src/common/hooks/useForkRef.ts +++ b/src/common/hooks/useForkRef.ts @@ -1,5 +1,6 @@ // Straight out copied from https://github.com/mui-org/material-ui 😂 -import * as React from 'react'; + +import { useMemo } from 'react'; function setRef( ref: React.RefCallback | React.MutableRefObject | null, @@ -22,7 +23,7 @@ export default function useForkRef( * This means react will call the old forkRef with `null` and the new forkRef * with the ref. Cleanup naturally emerges from this behavior */ - return React.useMemo(() => { + return useMemo(() => { if (refA == null && refB == null) { return null; } diff --git a/src/common/hooks/useIsFocusVisible.ts b/src/common/hooks/useIsFocusVisible.ts index f4192ade..215a9127 100644 --- a/src/common/hooks/useIsFocusVisible.ts +++ b/src/common/hooks/useIsFocusVisible.ts @@ -1,7 +1,8 @@ // Straight out copied from https://github.com/mui-org/material-ui 😂 // based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; + +import { useCallback } from 'react'; +import { findDOMNode } from 'react-dom'; let hadKeyboardEvent = true; let hadFocusVisibleRecently = false; @@ -137,9 +138,9 @@ function handleBlurVisible() { } export function useIsFocusVisible() { - const ref = React.useCallback((instance: T) => { + const ref = useCallback((instance: T) => { // eslint-disable-next-line react/no-find-dom-node - const node = ReactDOM.findDOMNode(instance); + const node = findDOMNode(instance); if (node != null) { prepare(node.ownerDocument); } diff --git a/src/common/themes/aiee.ts b/src/common/themes/aiee.ts index 80ac9f1e..2bf3c2f0 100644 --- a/src/common/themes/aiee.ts +++ b/src/common/themes/aiee.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Aiee-668092636 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'aiee', diff --git a/src/common/themes/ash.ts b/src/common/themes/ash.ts index c402b4b4..5158a37b 100644 --- a/src/common/themes/ash.ts +++ b/src/common/themes/ash.ts @@ -1,7 +1,7 @@ /* "Ash" by tPenguinLTG * https://www.deviantart.com/tpenguinltg/art/Ash-575566643 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'ash', diff --git a/src/common/themes/azureOrange.ts b/src/common/themes/azureOrange.ts index 26b6ef48..2c650ea5 100644 --- a/src/common/themes/azureOrange.ts +++ b/src/common/themes/azureOrange.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'azureOrange', diff --git a/src/common/themes/bee.ts b/src/common/themes/bee.ts index 405fa8f8..c8d51775 100644 --- a/src/common/themes/bee.ts +++ b/src/common/themes/bee.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'bee', diff --git a/src/common/themes/blackAndWhite.ts b/src/common/themes/blackAndWhite.ts index a5c67967..0af5dbd8 100644 --- a/src/common/themes/blackAndWhite.ts +++ b/src/common/themes/blackAndWhite.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'blackAndWhite', diff --git a/src/common/themes/blue.ts b/src/common/themes/blue.ts index f835873c..6cd4ef4a 100644 --- a/src/common/themes/blue.ts +++ b/src/common/themes/blue.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Blue-525167751 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'blue', diff --git a/src/common/themes/brick.ts b/src/common/themes/brick.ts index 326246aa..8a629c26 100644 --- a/src/common/themes/brick.ts +++ b/src/common/themes/brick.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'brick', diff --git a/src/common/themes/candy.ts b/src/common/themes/candy.ts index e224dfe6..8202d44d 100644 --- a/src/common/themes/candy.ts +++ b/src/common/themes/candy.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'candy', diff --git a/src/common/themes/cherry.ts b/src/common/themes/cherry.ts index c28042c8..5557c70e 100644 --- a/src/common/themes/cherry.ts +++ b/src/common/themes/cherry.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Cherry-747961418 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'cherry', diff --git a/src/common/themes/coldGray.ts b/src/common/themes/coldGray.ts index 62aca455..dad0b4d7 100644 --- a/src/common/themes/coldGray.ts +++ b/src/common/themes/coldGray.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'coldGray', diff --git a/src/common/themes/counterStrike.ts b/src/common/themes/counterStrike.ts index b1556b35..b3586626 100644 --- a/src/common/themes/counterStrike.ts +++ b/src/common/themes/counterStrike.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'counterStrike', diff --git a/src/common/themes/darkTeal.ts b/src/common/themes/darkTeal.ts index 486f3734..f71ffbbd 100644 --- a/src/common/themes/darkTeal.ts +++ b/src/common/themes/darkTeal.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Teal-for-Shelbi-Dark-631177772 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'darkTeal', diff --git a/src/common/themes/denim.ts b/src/common/themes/denim.ts index 6910bcf2..2275debc 100644 --- a/src/common/themes/denim.ts +++ b/src/common/themes/denim.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Denim-870494744 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'denim', diff --git a/src/common/themes/eggplant.ts b/src/common/themes/eggplant.ts index 02456b02..62cf04f9 100644 --- a/src/common/themes/eggplant.ts +++ b/src/common/themes/eggplant.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'eggplant', diff --git a/src/common/themes/fxDev.ts b/src/common/themes/fxDev.ts index 67e3a635..80e970ba 100644 --- a/src/common/themes/fxDev.ts +++ b/src/common/themes/fxDev.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/FxDev-701274128 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'fxDev', diff --git a/src/common/themes/highContrast.ts b/src/common/themes/highContrast.ts index 6319990c..dd6f401d 100644 --- a/src/common/themes/highContrast.ts +++ b/src/common/themes/highContrast.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'highContrast', diff --git a/src/common/themes/honey.ts b/src/common/themes/honey.ts index 47aa9c7b..7384de3f 100644 --- a/src/common/themes/honey.ts +++ b/src/common/themes/honey.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Honey-632126512 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'honey', diff --git a/src/common/themes/hotChocolate.ts b/src/common/themes/hotChocolate.ts index 670a4f55..1c70379f 100644 --- a/src/common/themes/hotChocolate.ts +++ b/src/common/themes/hotChocolate.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Hot-Chocolate-654380979 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'hotChocolate', diff --git a/src/common/themes/hotdogStand.ts b/src/common/themes/hotdogStand.ts index 9bcc152e..95da5767 100644 --- a/src/common/themes/hotdogStand.ts +++ b/src/common/themes/hotdogStand.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Hotdog-Stand-525606846 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'hotdogStand', diff --git a/src/common/themes/lilac.ts b/src/common/themes/lilac.ts index 07a6722d..2839d60c 100644 --- a/src/common/themes/lilac.ts +++ b/src/common/themes/lilac.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'lilac', diff --git a/src/common/themes/lilacRoseDark.ts b/src/common/themes/lilacRoseDark.ts index 3b90b2a9..25c848b1 100644 --- a/src/common/themes/lilacRoseDark.ts +++ b/src/common/themes/lilacRoseDark.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'lilacRoseDark', diff --git a/src/common/themes/maple.ts b/src/common/themes/maple.ts index ea8fce75..3ce68c59 100644 --- a/src/common/themes/maple.ts +++ b/src/common/themes/maple.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'maple', diff --git a/src/common/themes/marine.ts b/src/common/themes/marine.ts index e00979c8..a30b4ec5 100644 --- a/src/common/themes/marine.ts +++ b/src/common/themes/marine.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'marine', diff --git a/src/common/themes/matrix.ts b/src/common/themes/matrix.ts index 52d0e2e5..929cb830 100644 --- a/src/common/themes/matrix.ts +++ b/src/common/themes/matrix.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'matrix', diff --git a/src/common/themes/millenium.ts b/src/common/themes/millenium.ts index e455031c..499f979d 100644 --- a/src/common/themes/millenium.ts +++ b/src/common/themes/millenium.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'millenium', diff --git a/src/common/themes/modernDark.ts b/src/common/themes/modernDark.ts index e49b85ad..88949925 100644 --- a/src/common/themes/modernDark.ts +++ b/src/common/themes/modernDark.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'modernDark', diff --git a/src/common/themes/molecule.ts b/src/common/themes/molecule.ts index cc6ad0c3..7752c297 100644 --- a/src/common/themes/molecule.ts +++ b/src/common/themes/molecule.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'molecule', diff --git a/src/common/themes/ninjaTurtles.ts b/src/common/themes/ninjaTurtles.ts index 88277a69..8b1fdbed 100644 --- a/src/common/themes/ninjaTurtles.ts +++ b/src/common/themes/ninjaTurtles.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'ninjaTurtles', diff --git a/src/common/themes/olive.ts b/src/common/themes/olive.ts index 70a58fae..4b33f700 100644 --- a/src/common/themes/olive.ts +++ b/src/common/themes/olive.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'olive', diff --git a/src/common/themes/original.ts b/src/common/themes/original.ts index f8c9dc30..86d63974 100644 --- a/src/common/themes/original.ts +++ b/src/common/themes/original.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'original', diff --git a/src/common/themes/pamelaAnderson.ts b/src/common/themes/pamelaAnderson.ts index 406ccbb8..3b8c8049 100644 --- a/src/common/themes/pamelaAnderson.ts +++ b/src/common/themes/pamelaAnderson.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'pamelaAnderson', diff --git a/src/common/themes/peggysPastels.ts b/src/common/themes/peggysPastels.ts index fdde7824..3f2bdf98 100644 --- a/src/common/themes/peggysPastels.ts +++ b/src/common/themes/peggysPastels.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Peggy-s-Pastels-505540096 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'peggysPastels', diff --git a/src/common/themes/plum.ts b/src/common/themes/plum.ts index 5afdca30..4bd1937e 100644 --- a/src/common/themes/plum.ts +++ b/src/common/themes/plum.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'plum', diff --git a/src/common/themes/polarized.ts b/src/common/themes/polarized.ts index 823881ce..dc439dff 100644 --- a/src/common/themes/polarized.ts +++ b/src/common/themes/polarized.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Polarized-557712217 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'polarized', diff --git a/src/common/themes/powerShell.ts b/src/common/themes/powerShell.ts index 936c35ce..3515ec80 100644 --- a/src/common/themes/powerShell.ts +++ b/src/common/themes/powerShell.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/PowerShell-646065752 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'powerShell', diff --git a/src/common/themes/rainyDay.ts b/src/common/themes/rainyDay.ts index b6a74ca8..cc89213c 100644 --- a/src/common/themes/rainyDay.ts +++ b/src/common/themes/rainyDay.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'rainyDay', diff --git a/src/common/themes/raspberry.ts b/src/common/themes/raspberry.ts index be64cc6f..6898381f 100644 --- a/src/common/themes/raspberry.ts +++ b/src/common/themes/raspberry.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Raspberry-539289720 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'raspberry', diff --git a/src/common/themes/redWine.ts b/src/common/themes/redWine.ts index 083c2ce7..a2bf371c 100644 --- a/src/common/themes/redWine.ts +++ b/src/common/themes/redWine.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Red-Wine-545729607 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'redWine', diff --git a/src/common/themes/rose.ts b/src/common/themes/rose.ts index dfd31bea..d6bb92c6 100644 --- a/src/common/themes/rose.ts +++ b/src/common/themes/rose.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'rose', diff --git a/src/common/themes/seawater.ts b/src/common/themes/seawater.ts index 24aa747b..1e6bf847 100644 --- a/src/common/themes/seawater.ts +++ b/src/common/themes/seawater.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Seawater-736002425 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'seawater', diff --git a/src/common/themes/shelbiTeal.ts b/src/common/themes/shelbiTeal.ts index 32e58d0a..ca6a473d 100644 --- a/src/common/themes/shelbiTeal.ts +++ b/src/common/themes/shelbiTeal.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Teal-for-Shelbi-506118460 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'shelbiTeal', diff --git a/src/common/themes/slate.ts b/src/common/themes/slate.ts index 85013719..0b1246ec 100644 --- a/src/common/themes/slate.ts +++ b/src/common/themes/slate.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'slate', diff --git a/src/common/themes/solarizedDark.ts b/src/common/themes/solarizedDark.ts index 913d0f12..aa3adf4f 100644 --- a/src/common/themes/solarizedDark.ts +++ b/src/common/themes/solarizedDark.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Solarized-Dark-592122068 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'solarizedDark', diff --git a/src/common/themes/solarizedLight.ts b/src/common/themes/solarizedLight.ts index 19e26cac..368d877e 100644 --- a/src/common/themes/solarizedLight.ts +++ b/src/common/themes/solarizedLight.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Solarized-Light-592124935 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'solarizedLight', diff --git a/src/common/themes/spruce.ts b/src/common/themes/spruce.ts index dcae06e3..4cb63366 100644 --- a/src/common/themes/spruce.ts +++ b/src/common/themes/spruce.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'spruce', diff --git a/src/common/themes/stormClouds.ts b/src/common/themes/stormClouds.ts index 087510a0..f9fa0929 100644 --- a/src/common/themes/stormClouds.ts +++ b/src/common/themes/stormClouds.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Storm-Clouds-613198674 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'stormClouds', diff --git a/src/common/themes/theSixtiesUSA.ts b/src/common/themes/theSixtiesUSA.ts index bb1605d4..079b7e68 100644 --- a/src/common/themes/theSixtiesUSA.ts +++ b/src/common/themes/theSixtiesUSA.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'theSixtiesUSA', diff --git a/src/common/themes/tokyoDark.ts b/src/common/themes/tokyoDark.ts index 2bd0b1a4..71444bd4 100644 --- a/src/common/themes/tokyoDark.ts +++ b/src/common/themes/tokyoDark.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'tokyoDark', diff --git a/src/common/themes/toner.ts b/src/common/themes/toner.ts index 97d6f7f7..d39096f5 100644 --- a/src/common/themes/toner.ts +++ b/src/common/themes/toner.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Toner-871968986 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'toner', diff --git a/src/common/themes/tooSexy.ts b/src/common/themes/tooSexy.ts index b8f74deb..d30bde63 100644 --- a/src/common/themes/tooSexy.ts +++ b/src/common/themes/tooSexy.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'tooSexy', diff --git a/src/common/themes/travel.ts b/src/common/themes/travel.ts index aa670ab3..83fe5a43 100644 --- a/src/common/themes/travel.ts +++ b/src/common/themes/travel.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'travel', diff --git a/src/common/themes/types.ts b/src/common/themes/types.ts new file mode 100644 index 00000000..90260edc --- /dev/null +++ b/src/common/themes/types.ts @@ -0,0 +1,69 @@ +export type Color = string; + +export type Theme = { + name: string; + anchor: Color; + anchorVisited: Color; + borderDark: Color; + borderDarkest: Color; + borderLight: Color; + borderLightest: Color; + canvas: Color; + canvasText: Color; + canvasTextDisabled: Color; + canvasTextDisabledShadow: Color; + canvasTextInvert: Color; + checkmark: Color; + checkmarkDisabled: Color; + desktopBackground: Color; + flatDark: Color; + flatLight: Color; + focusSecondary: Color; + headerBackground: Color; + headerNotActiveBackground: Color; + headerNotActiveText: Color; + headerText: Color; + hoverBackground: Color; + material: Color; + materialDark: Color; + materialText: Color; + materialTextDisabled: Color; + materialTextDisabledShadow: Color; + materialTextInvert: Color; + progress: Color; + tooltip: Color; +}; + +export type WindowsTheme = { + ActiveBorder: Color; + ActiveTitle: Color; + AppWorkspace: Color; + Background: Color; + ButtonAlternateFace: Color; + ButtonDkShadow: Color; + ButtonFace: Color; + ButtonHilight: Color; + ButtonLight: Color; + ButtonShadow: Color; + ButtonText: Color; + GradientActiveTitle: Color; + GradientInactiveTitle: Color; + GrayText: Color; + Hilight: Color; + HilightText: Color; + HotTrackingColor: Color; + InactiveBorder: Color; + InactiveTitle: Color; + InactiveTitleText: Color; + InfoText: Color; + InfoWindow: Color; + Menu: Color; + MenuBar: Color; + MenuHilight: Color; + MenuText: Color; + Scrollbar: Color; + TitleText: Color; + Window: Color; + WindowFrame: Color; + WindowText: Color; +}; diff --git a/src/common/themes/vaporTeal.ts b/src/common/themes/vaporTeal.ts index e1fe32f4..297cde97 100644 --- a/src/common/themes/vaporTeal.ts +++ b/src/common/themes/vaporTeal.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'vaporTeal', diff --git a/src/common/themes/vermillion.ts b/src/common/themes/vermillion.ts index cd256cc9..acf486c3 100644 --- a/src/common/themes/vermillion.ts +++ b/src/common/themes/vermillion.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'vermillion', diff --git a/src/common/themes/violetDark.ts b/src/common/themes/violetDark.ts index 13a614c9..42bb148f 100644 --- a/src/common/themes/violetDark.ts +++ b/src/common/themes/violetDark.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'violetDark', diff --git a/src/common/themes/vistaesqueMidnight.ts b/src/common/themes/vistaesqueMidnight.ts index 3af93809..252af0a1 100644 --- a/src/common/themes/vistaesqueMidnight.ts +++ b/src/common/themes/vistaesqueMidnight.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Vista-esque-Midnight-557498234 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'vistaesqueMidnight', diff --git a/src/common/themes/water.ts b/src/common/themes/water.ts index 83e902b3..3eb1fcfb 100644 --- a/src/common/themes/water.ts +++ b/src/common/themes/water.ts @@ -1,4 +1,4 @@ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'water', diff --git a/src/common/themes/white.ts b/src/common/themes/white.ts index 6655e25f..5da6405e 100644 --- a/src/common/themes/white.ts +++ b/src/common/themes/white.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/White-870495714 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'white', diff --git a/src/common/themes/windows1.ts b/src/common/themes/windows1.ts index ba0acf68..d9a82b74 100644 --- a/src/common/themes/windows1.ts +++ b/src/common/themes/windows1.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/Windows-1-573195578 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'windows1', diff --git a/src/common/themes/wmii.ts b/src/common/themes/wmii.ts index 5eee2e77..bca9ceb6 100644 --- a/src/common/themes/wmii.ts +++ b/src/common/themes/wmii.ts @@ -2,7 +2,7 @@ * https://www.deviantart.com/tpenguinltg/art/wmii-683233676 */ -import { Theme } from '../../types'; +import { Theme } from './types'; export default { name: 'wmii', diff --git a/src/types.tsx b/src/types.tsx index bd6cefbe..632b865b 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -1,6 +1,6 @@ import React from 'react'; -export type Color = string; +import { Color, Theme, WindowsTheme } from './common/themes/types'; export type Sizes = 'sm' | 'md' | 'lg'; @@ -24,70 +24,4 @@ export type CommonThemeProps = { shadow?: boolean; }; -export type Theme = { - name: string; - anchor: Color; - anchorVisited: Color; - borderDark: Color; - borderDarkest: Color; - borderLight: Color; - borderLightest: Color; - canvas: Color; - canvasText: Color; - canvasTextDisabled: Color; - canvasTextDisabledShadow: Color; - canvasTextInvert: Color; - checkmark: Color; - checkmarkDisabled: Color; - desktopBackground: Color; - flatDark: Color; - flatLight: Color; - focusSecondary: Color; - headerBackground: Color; - headerNotActiveBackground: Color; - headerNotActiveText: Color; - headerText: Color; - hoverBackground: Color; - material: Color; - materialDark: Color; - materialText: Color; - materialTextDisabled: Color; - materialTextDisabledShadow: Color; - materialTextInvert: Color; - progress: Color; - tooltip: Color; -}; - -export type WindowsTheme = { - ActiveBorder: Color; - ActiveTitle: Color; - AppWorkspace: Color; - Background: Color; - ButtonAlternateFace: Color; - ButtonDkShadow: Color; - ButtonFace: Color; - ButtonHilight: Color; - ButtonLight: Color; - ButtonShadow: Color; - ButtonText: Color; - GradientActiveTitle: Color; - GradientInactiveTitle: Color; - GrayText: Color; - Hilight: Color; - HilightText: Color; - HotTrackingColor: Color; - InactiveBorder: Color; - InactiveTitle: Color; - InactiveTitleText: Color; - InfoText: Color; - InfoWindow: Color; - Menu: Color; - MenuBar: Color; - MenuHilight: Color; - MenuText: Color; - Scrollbar: Color; - TitleText: Color; - Window: Color; - WindowFrame: Color; - WindowText: Color; -}; +export { Color, Theme, WindowsTheme }; diff --git a/tsconfig.json b/tsconfig.json index 19ce027d..4ab99ac6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,7 +7,7 @@ "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "importHelpers": true, - "jsx": "react-jsx", + "jsx": "react", "lib": [ "ESNext", "DOM" From dcb7382d7735d230d027c64e7e0184a27e6c24f1 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 31 Jul 2022 21:22:45 -0400 Subject: [PATCH 050/100] docs: improve Storybook, add docs pages as stories --- .storybook/logo.png | Bin 0 -> 12990 bytes .storybook/main.ts | 2 +- .storybook/manager.ts | 7 +++ .storybook/preview.ts | 20 ++++++- .storybook/theme.js | 36 +++++++++++ README.md | 4 +- docs/Contributing.stories.mdx | 17 ++++++ ...lation.mdx => Getting-Started.stories.mdx} | 26 ++++---- ...ct.mdx => Submit-your-Project.stories.mdx} | 9 ++- docs/{index.mdx => Welcome.stories.mdx} | 56 ++++++++---------- docs/component_template.mdx | 26 -------- docs/contributing.mdx | 10 ---- 12 files changed, 126 insertions(+), 87 deletions(-) create mode 100644 .storybook/logo.png create mode 100644 .storybook/theme.js create mode 100644 docs/Contributing.stories.mdx rename docs/{installation.mdx => Getting-Started.stories.mdx} (72%) rename docs/{submit-project.mdx => Submit-your-Project.stories.mdx} (66%) rename docs/{index.mdx => Welcome.stories.mdx} (51%) delete mode 100644 docs/component_template.mdx delete mode 100644 docs/contributing.mdx diff --git a/.storybook/logo.png b/.storybook/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..cbcb9d484a9d328c5f9d943a35a03a36477a3c2f GIT binary patch literal 12990 zcmeHu^;29=^yR||5S-vH!GgO52<|SyEkJM!F2QAR_W)rCg9QkKI}Gk_!6CQ>2)^_A zR&CY(vVXyDPt9~sPxb3pJ-5%j=iGiV8fx;dF~~3g0C=saAfpAZ_x^jMBf>w`(4CLr z6|$|AsuTd!CSpEXpuoS=SSe_!0)QVA0EC1Cz&*Sx-^uD9T9b_$;5~`{tSGrk^eR ze!%jE_)=-5`!XaUE27INCXo_O>UHV)N*Fm_&-|)cnSbWH54b6N5O00&w6gXK`t4jo zT^5<>7?l<|fn9jcXo#*blo5%BI! z8q0qF52(zL8r!^OhQe>{odK1yBzwGSX_l1hQ=iW#Z(Jf7&n&|)+w|94`{ryqRLb}o zWtHdGE(qP(O=nVWX-qwGugEYCeDLSqyj`-t7U_=*?Ns_b(&XpW|52kn^#>Gv=#9>% zHCg`s7>Xd9ueXLPh(ALAkjR+@lCM^$T`|TsGsGZT^@Z^aI~EIZ2Lv;2e^a$Q9cZZZ zwN|lT#HxhNmpG|L?F{qwt+eDIpHWs3r>LeY2CW*O-+GIeej^mSOp62%+6O?~$X)d` zfEY0U`sSdN6`$3N|KI`Zm5iK(5t5`-7T0lcLU3fe}-2dj|4SGqm z$0>g;%E^&TGP5>?(l{m&?c4O0+qw~nwg6#%)llwz3ZXKP8>~r#bwAGoX0V5{Z|QYG zM{imaihvvPkL3bSnjqUDD(N&k+&tEI{%*Oxb!z-A!n2qd-Qz)r zx_>m1Ky4-GYQKUSl4Z|If@%LLNb9fz43g5T6RWUvOF6~d$U~A333p|b2&b1sr*)%j z50ym^tI(k}4%d;L5_-Ab8#8+t={#0u&|C8&79xyB1R=nH)E@%%6&H;CuRAY;Fo;4Y zE$6{na$k{3)3{+@Jp`PcO=ym&Xu?++xBiB!7MzUGWK$K%o;4737PAAMkNiv_A-IS@ zuAs}^USo$BxV56AVa?4Ezy={m6X@h_V-boz=CErY4=1>FB`J}Ec*YSl^pYvuuz_gX zQ$h>?iQ)8tLTIb2Kdz_MjS^+3RFPH?JN^ZCPwz1yyrK)iZCtmQEb@A;Ca|IPhyo!E zIyR-F^oOaQsK^BLmeR*&-LUU`vSkYXo0-#@0L&DCJG?;d8nn_Vo<7Wcx4yhM{R`h-KaJCJ)JGw0(shIbnPBMxLR0M-qsU zvGnmVnBiN2(#qGJz8_rHuc=5X97GAhr$b$;iu;SOjm0Z)T6n4QXh3%nic1&%0|J4t zB1X#$V~xPQ#(2aKLCY{p@=&$0Yp(W}xCuddC2#8-pNP-a1 z%&7>D0=eBz9v5VZsXv`mJfv!Vk-Ddk@eK2hQ8>+?h+^m=Gv$I^N^p(1swRXtYVC_4W>7&7!HJZz$SgsM;LL@aiw9}EC59p-x%q>8#fc|1I%n)CW1!{qPc!4(nQrw0d$OsUm|y8uba9_&+b66udORupml za&mGq&l>F3dHNapI(oXp?vYE#Ulj&zYm@{AQMjZUxK#U3Jlzayw2xbmol7wzN#7du z3-IYaOqjjgj|r~NdWn0`kgaU;dIgu9M>Ys=Z$ov21KPY>s#-IyC6rhuduYoX&mumQ!9UP1M0PvS#BCz0f^(x+d?hX zg~EY*^6wuvCpW%Xr88`})esP@**1mF#aq8niullED+mY(1YOP)#tsl9z5APYqI^g7 zNv>ow#oztH&1gi)L|>B-szd!Z!LR9;Tj&4IuO(Jh3mn*8WvxC$6WD->at`q?s7W&UnHK)_H z+X^*6p={>m--!!(q!jwyWR%3;VpMNa$21F&rO|1Tt;DF*_VT!yM!y7|s-}EZ z57^|7kPUA{E>)OkOhsbb)R4u#IbN!d!lo4Ya-5|gg9l*zWLKHjV@^mFO&Wk-VB!cJ z;F9FYUTyZU?T)ts37yB@X!IV&_Jw>^JQc$!-s*1TeMTz%+pu6t0Ct;$=t3ZGf(Ing z%OOhTGb=0pH^!i ziEL0gj+3{s5L+y+`HQ4Y%1Y_#_HunW`~4Kv?ouf1vG@02rni?KzU&D}jzY#p|CO2f zc>(X!)$0Z0cIzR0&;?-!&-nD*+}y%SpJ4odSH;~$J;hB1Q-H>nORk!o0M-vXbaZ8wfC~y4^f)}57YXeZ6}9* zfHTu^-Cj~Yn3=O-Ge3NXO76x%`54xJ}NQ#9s|UU`27bfkOf|X z-^kotgZG59IPPk*)xL@M`gJ$C01Bei3iOH->iRA+D$4tKvH3c^%IU=Eto1MuY(L(@ z2Ex@MjL>RvS%0oFYCK)Lx>@MF5Nv2@I2#o5sza=1$u6>1_QHZKus)9gU7HDhPYI}$ zgq}X2XUO^&ikw$R768UI8(Z~rMd|3LJcRn}e0N+9#y@(i+zvTkE_a4F12&Zd#n;f; z!g0SdgJKr9e5QUnFAceaedifRNc<1?)x|FdOTv(z07*iV5!BDW5ilAGCk(eTu&h~x^G=&9GC&5I zBEJUbgaHC!%wbg+h0=g}c&sY-XPyD;S=OQeZ_B*u9}T~sdnM?d%!^rLLvf4KVo9hk zyM)Wq+{f|cVvA`iJ->J!uQVoloT?f{yAC+4m>vl&NfE{~ll5RoFFHYau9Np~BeJ-K z$??`pXUZlXPrYjlGDPJ)q*Mk$OBgHeJSU2{b*aBPSjGH!HVx85+ba3LXR?fLYCEMM z!F+a!GIQ<2aHl61|16FZO5^F*)-;~&zYqTG=qWSj34BY7lrD0pG3<1mD!#mQSK$JL zpdQsn$MgD)*Phn~5C{W#Bene|4<<37x|en*qzwp2l}S}U=&US_7#E!6_zpLXT2nDDVsIxpf~KnV%> z(m6RfDl>U>9&GN857@_N$H&Ow5rOeCbcOeS%beSH!Qj0N4QA%pK*|A9a!QlhfPSmQ zr}goK)UO&OLh=Snoxv|L+i%Ip$@@`XY09{=lVH(_J#VsMOnI3Y(+mu~PK_bND&?Dr zdFxSw4EjkjYXzblumJ6|VOUi%Z;RrS;~h3S$p>tQbr|-#{|tBj3k%WR!v!1IWX{PVmtVg5xr48zPD2BXWu zjzCwa&AI z65NBX6t*8nrqI3BVmyc$RP^m9;Zpmuev%!s{&pHeCjj{k{&Vl@d!R{n0z9Y|8BZ| zORGN_`5`f-&5&#u2rzpk}+9#2G9iA2qSvpuA#^~j0OHnP=lF^1hDwxY| zvOY*ECg$j^>UoCpV*%*&qNlDvvBk=uvGRDc#rM~}xTf~p-XgYQJ;Mk9fu#`>j3@`( z9D@{|WS_I?`Y*?!dI^r4y-^7=ba*P~gOeNQgVBrm#mp;EC;yB7G0$o`$_!Y@zL%~7SXFeA1g*J1JPQ3SE_<*Uk039jsv!92dLKT9UASy zVMTQc43GVsfty`l!)guS7mVdBn-nblYu53==|{7%cyp**ady`yUc9}lB91%}=n1P= z`vhGcl|U+h+?4Qw*54VZ&)E_eF z5}VuFuz09wdq@g}+_o}1ALpXZ9$js0N~@1@zzD8N+1o;3djWp_pu6AzU+e$K3BaXV z(a?YbFqgtZL9wNa={QbAfC(Z*e9>?q|ZeuWq6mw#oQK{pFi zwRn=ql1<*(INe;YXLzDe(GsY{p)TuR(Ij4)ja-_C{LjOa;D)&__7VV%#>ikdbiWy0 z8ldtI7`R#B6DMJ*;8Nu!i(?IcJl$QFD=7gC=J+l?U7#%9AF^%fD=mrN20mJ1fN6+z z>yq49fjUZ$SKXX{!Da`7#c%S<(oOWM0JN~))V00tO$LPLyIkUzgFtHazU`ju?SkJ0 za9?Tfls_|Vx%9=#YI`2dRJiFbFIE>{GG1Q~VauR*AjpGbK9@nn0($_RcU*}FhmNJe zvfqY?h^Y5N7{Ce>B86Llt@`PDuJ4CDTU6{5{}M1-uYTK%+#*W-RLq3{nTG)UsOMKXG`UupIeFD({1F%IlD$waXbDe4C zCag&abP;$gpwmiXxMFm@qRo`{NRNAGc)mI>1wsYvpg6@O!V%2W@r;hcP9bUbF{WxH z+ZxO}*DvAnc7{+pD>CwUq>wR3UMCi*P+U8UekIW~o*c4H{S3Yk+)$%7pDC|}z>Ou_ zU{w}fLfN_5+S)(R_0Id7l?T)36Bo8&wvYS2#&ZR|r;24gJ{pa%4Tp7q10N+gi6$V0 z^!Z@Y_L0QN^u(*GZv9>BL)aIih)I*Bi?m2fm-RHU1(oOcnZJB33wrhxNuNY2@)R*K zH4S>8Y&7#9vK5#6ZbXkzb|!2fk#hZd{?zws&o`AAfo~Jm10@19)-=-{uC(zh(e?K&BHTTyWiw^!`CkY~ z&~a^kRaRC)p?Y@Sr)|vxq6zw_5D2|)3FWJCLvsahO7QUTFx<;o^DIqHZcH9T8J|wY z-sir5-g)ci=fA#K`(bsRUlnOGWvK6>gdX_mU884csQEvo*>0+bU%%QA>S(B}>>)$} zWgnqbFwF2;^P)ERWrqjccLzTX7`dFlSD`OUz`5=8x4(pQR%9`=lha9t4We|JdZAjG z_FRJ()FxN%b8n=>``hLT=&xVVC3Tek&!N5p3Hd?+|6HNktY<=VLzlc2c8|tzsv*1$ z_x78oiL1K$`Xj=Esves?5jM$#3!TrnFuU~*r1hu$GYok>Lc!o`2eYb*ng*w`76_Sb zes&x?IVZ7EU3iiXYlHR0Ruq-rAoRqX`5(^9{)$V-9TOn7=HN)}MY3O{u=DH^#Ad81 z%TiTS!TXLE7v1yAm*<+7yD^m)!*On=T7$n(QRm=|E1Vw+iVOsWkF#aYolgmM3Ol#0 zP>H9Lw^+Sc;SHX%gb!=K>}TG-e`4w7($T$A`;-61P2B))pZgNG!sDA=&w=IE(n0|( z)nV00A=^Uq^j81vS=WE(n@%gHxx8i9k>oCmzwE87tmwynaeV;QW@OC6?T8*!5Oiqo zBKNJK!KN2YAS?0}5NUy4(&Tr27}fDC2qzEu`T1oc>TB*tW2&mEB_$=6A*Ia2bvDZS zRUf@}2J!GJ5X0r<6CLlW5N+aojPPu;`IP!l~(H(wLVeKD;!<&_ZpV3FKnTWvxh+UDit za^z!fF2w*|g1ICPL+a3nDC}Lws``2)dMtFu5!0XM2p^;2hKGIpez7q)ygPjIla==N zL$zO_JqhSShgBDn|I-QX`E-M?_04<_O2=xPRwRUkghWI>8My&~3ZE_}DiVNz*L-|* za(Z+k42SoV_s0(|h0Vctmo~-Am;hEUuD^F?)5w6_0KDm@XMwk}yu7>*Ez>?QV9!us zfRj3v87$PWV&xC4`D7FnTXxc)-=(Xd-|gWX%3`1b^Ty44kcw)RvY8%Uw^YI@JDu>8 zHvZDQD+4|OGEy&!D08|?ruvcNe{~5?xslx@C7@Lf~tB@I<#N>^HfszoL*3{Q4n~@AY zetyU0Ul->^y{%tPPXGMjddG&RE>~ie0Y}hcI|wAjJj+8uK;UKzbAlXvkzVsC>+jz> z86}kexRHbYFRm%Kb&^lDs1pW*nKRpE>xoe*Go-}G(22Y`IXDsj8T@kNv_ebHiwX$% z&VTe_^5bf=?2nbC$x>ljoAi;xh^3R*$)n9Mz^*^R0Z~s>9_yxIa>EFv&;Lo%Ug-}b z5NwSth5RT2t0>HmQTtgXo$3yt$6+A5%ppi;?Ksu@$gD(K^N?ak=~uN_!U2|C(3ygi z^5p19Jn(RIsziPw|0s6ADlF{7kc^6^7pS)S2pVq|xI0J0rWdfsd&?F}=X{%r#_#)F z2!}mF8y}zVXXa;vg9_g2-nRSYyk!%f-nZXp4rJ&wrzyiU%i1cz9Ua)}wHTbAr`UN! zQ;6=2U|HKjj$#X;cyf6>T{1hR#%!2$INy^-|9%*MMVnz`A?D0!_=N~tg;tUU7qQyx z?TyU}lo`tUtkK^XYOS3Es`Xsf&~0cgZ7yxF8A|Ctng?r_d-A;zh4b$fmoxwEctN!S zA$!9N2qXtwsvT2RYJf6h`?f2_P_N zmro^6)&3y?azq=~UQb(q!iqEueSNL8dsmxJ92QKydS6oq{7sfO3%u5a$D1sW-&1aN z+tvfcvT=1@Ei=j)9%_V)`AROo+wN@DC46uG3eWHedkpCQsBEi)>qjjupUusGmX)E! zb~vCResyJVzu>$_*(ol=7t-f<^7LscDe2`K)8OLc;-Yybw6k9zHzM8M)Hoj#cgds{ zmS%Ct=Phe!m~+dktE+2pSg;wk6UGHuT`W%Tjzkd6dOdA?MM6S)>UKqGocLW=JIyzy zAhXuyH3}65@`OF^)7RTm)Jp$`1kLF>yc=N!PbcEK|NT=-@Ky~A8~f(=+PgqRSKH)D z5a-E@nQ&N)H`HSVD*Mfpu(i_Up<^mJxi<>u_V)VdYX}5#pi|shCU4ChYj4fO3gLov zu0v1!*B_oYB;WVM7Bho34|8(nGxp&7C}TdOR5_EwtmF8gEchao`h_qyqmntad64+2 z$Gw(OnWYLV;{(07iSA0Waj`)!JA^6G1oi zg-@vyO!zSw^Yfh#51ref=84845L&3zrj?GKp2S5TfssJxH`LEmO@f#0F8sjxGMU#D zY^N&;1u$xKe(L?*e&JJG-fVxB@$SIW?_*~M_Zuu!v*5si?L={o958vLrnbq<++4fo z0e<5zK+K&R>%&6Byl|DS?%Y#gyYqr(FJDpGyiyMM`WEML?~WK1?LMq1`uuYShlx8p zl7Y)H)g2wCe5BPselW9nqz?6O>U*2#8UC!Z)Y8<~_a1JSvO)xebilI>0Ac~?_Vr&Q zdU^mit{9lg=3*As2U~$wJ{p9p8my7A7)Py>9mpt?^w<- zF`?`NAWC!=j82zn-Lzw@!>*F@y1NXxUDCLWjCkxL9gh8%H_a!23}HH=^u+s@o@x_+ zPZNE@h>MGujl3&YA$Z0B>iiUFW>yG64PU{kPmyo33~*dbhn1xeu7{Eg)j!OPo3n~iSGP* zfKizC46B~jP(q?411YVhox}a)9bY;i&C{?%A} zgfy;4xKsxRIe}XI{tx|oNy$`}=c_2Avu6KO^THDQ?4wMz+KGTl4BBdk!B3jBhA#Us zOF45$@$Z0FL(ZVg@lr!sW25)e+|kO)^51V9U=P`WVz|7#-0JN@S3vmn zZBg^}(Ly5>DgqTu9B$W51GxBvkh?~Phw)=%*xyvt)YLF@;zaaXl~~305b2(s9tLd+ za>AYX{K5i~B;T7gsMpHN!-YC38d|&Bov%0P_J6{Ey*iCd-c|BuvTPhNIHla0M=`n> zGJFiVDOS?^PRFmRt-v%E2KBtmxg2n8f$_|jFWn@$;O5VBM7OI~7u1g% z$(|zbz*sclel30lcXPbL_qYpMn!L8QWC#54NN<3$F-n>?8ARlwt=j;G3V4X2(}u(K z>8r389~m4}t(e*2^h|hc`R>GHWe?i;WZ{ELYqI#TU*OM?tu$UJNDaU?_y-BbCA<(EUXV6)-N^)^?y+S*o)cS^UFH`@OwA@U%~>JwQg`1Z@C(Osk z@ICl&_8>WV3JU%Cp!+v(kuMSd4T|L0*w{$MJO8Wr{5*nW*5HHEcSg`Q70Qb8=Ihhe zQ;Jt#)nbiLyVF5T3){GcYMR4&!x^1{R#M=? zX5>GClbVUc+Qw%0>2}@B$mnHd{pseUJ=oQeoG9lk=K!V8(8+17;cVR%KElMUe>cxV zZlI?2M~q>k^GW2b%Odo8E{|m!v<%+@8N0Y3m)58GsoL7N!8g`o0&;|}>rle;JT~}9 zFlstKJ;CREn%*0OBWCF0pk(kFJSNNHBH*#_ zVrtVOubnh@#M)4g?@f)1o$J_GrE78}JE9~y4)*JK5C|^Re%g=TvXA_bmwL(iqf+W? zQg&?N(ebZ(>WnO~GeboNyPYjOgG(_?Ib8O9NskPw-5yAcGmDCfjL}N7-4jximAwOsXF)z16l z`S1xu{ckGmzthTEOk}>FH_W{VhcaA%JwAX}Wy*d}~$#A&Zv7 z1!*609SUKi0!l2~Ge5q}T<4~g&%(9#FP@$^x3|1XY!#5Si51F-#J<-jZlgfp)G z3ezruoQo8F$~uo!kq~R5_3~hAUIbB^MqV#yx_;>Hdk`?;g@+gA4;(dsV1!DtIpy8Hy;C+ZbxMo>{Ij#u3*TbgaI1jJd); zaphP<6QSpTSo6krdQ6ah&2r5ZeL|uKjg6PoE|^Lpdx#V@M=!!+wD)4P!C<qG@!lxSWO!GZamp)0XWv$%&B5AKCzS#tJ@X@JZ8=xw@IOVHE(-PQhr zAYa@4;e6D@qXQqAEYMr?xUiU8^N9-Qz)-%@HW51pMKwMio+1iMYJUaaP{Si;KARE$ zVTH(Yp_u4nuD(@9uLmR(59r|%I*#sHHs|^`SMzjzKKQdZ=@4>Q?(eS1!S}n`Vf(d@ zlI17845a-vU>9T}3y*`~e@N{yjvLG=Xf~RP7b;-!c%bf^h5jN0m z_TIs^Uk!fIA|yiD)DVIn-BVzI!(GadwW4@4!x_3Wn!!YqSC4{l@CFvZXke%=D3*1I zfTm5&prt#6{e0f_6{)~B-Bop}<6l3gPDbX8V_FE$M_rSX zd;R*XHzt|MXHTF=}^fXndC} zHL#7yyWc{rxhgageM;@|$nsPXPgUmlu4iP_YCj`4Zt%VBxOxBi2tKLlODgj)ES{X4 zjO<5Q9P$L})!NA-bZvDNj?!CX{z~?6((CDXykuK=U5N&8xjeTSIk%1}l=f{Cmzvr} zJeFA#;+Foba$fcX-gdT=}$Vw(6!(Er>&l!Jsf^g!Cyr zBU6AZ(^9nm19ADrUPcDFOUqOpyR4>+Q}wnGCNU>CO{v{fy6L82gD88`DpRxQ?CbvT zfFLwbpU#=+S=-f~k+WN_R5Z;;27H#H$DS*bIw$|#UAFzPTr{d?-tpeepIF$&h)wi# z7rYbHgKcpWv)oyZ9_R?tO=*+I-)*~my;N1zPN?@+ok)bjUPpe|jJ+JryCO0X9=~;E z+*j<7^9WcfSLFoKC^E;KG3om_lKNQc)_hIGm`3|hDA*R|;L z${ak8%sZ@c1BDBJbcd_oYttof?p)#O?eb_7K!Llz6cZGoQrU{Uy=svib)faCKqynA zObLDf!~zsz1g(O!oD*YHi(~T~vSg!654utZCrpM9teGPVpRyC~z9S^gycR-j0VB`? zA>2iyw4m6>Aoe$5-sbF#zQi;#10->8@zH6M^JGqS(jLDq>_{0hH^U^uZ}Fso*kT#F z*lILx=`LCljPAa>G5nYiq-YU_6`pJJXawLJD4i(Ot%0pC_QE=WUB$(Qbi{Ea5CH(- zyvOd_3vuVabPI#6i_l;ne`-SRz0`u!R-#j;5~*@?U30xwv>)J*a(-S;V4VjasrMycc3rlX)aip&RIr+o*`==SJ#AkFNMw$FY`}Cc? zWQ)(L!<);kNPJ^kD%$1+@r){!VxCWmdHWlCnx63p`+3|NX+C1l@bvC@B9$*Pz$a^k z6046vs+|P;+umpGNAB`-1Yuj{obNq?fQ5GHxYBu_ofGU^+v7#Mzi0wwn1f)F#^9#P z-${hQgz43D#QmiVGOVm0VMI8_<3U3lU4PAo98*O(32iifoaow78F?&5YG_G#l%C7#|9QjVN>|N^XC*QZhSKy zLzavR=`%{RM}q4IVJRdR9`={FfJ))hcE=6;7u(ox4^F`44vU`0a6dWl$bJ)e_2Mv zFwK}K{~=*Y_yxFUD*q1L5lRYuRO$%`6UnxDXYHV@z^LN0*?zVkz`Oe1*Bd6>6k)4X zcV>C1T`9Z={T35pd5ys+gLO&lm!F;|m36eYhg?6&U?TZFI&j$fjnEJ~noK~%i3)Q@EElnwO&My$Q@nDd{quymE=$~JiGpI?eTv=_}ju%YVyB=0Ee72EXjfzbnVaH zbh4tTcNgVD8C^T;vA!=#gTOBSACf_rz{@sF)ulf(H!8n@3jo-A-4CGAL!wBsmO26#(pH^#Fe)&^H zG5X%}YAYHy$ + +# Contributing + +Any help from UI/UX designers would be EXTREMELY appreciated. The challenge is +to come up with new component designs/layouts that are broadly used in modern +UIs, that weren't present back in 95. + +If you want to help with the project, feel free to [open pull requests][1], +[submit issues or component proposals][2] and join our [Slack channels][3]! +Let's bring this UI back to life ♥️ + +[1]: https://github.com/arturbien/react95/pulls +[2]: https://github.com/arturbien/React95/issues +[3]: https://join.slack.com/t/react95/shared_invite/enQtOTA1NzEyNjAyNTc4LWYxZjU3NWRiMWJlMGJiMjhkNzE2MDA3ZmZjZDc1YmY0ODdlZjMwZDA1NWJiYWExYmY1NTJmNmE4OWVjNWFhMTE diff --git a/docs/installation.mdx b/docs/Getting-Started.stories.mdx similarity index 72% rename from docs/installation.mdx rename to docs/Getting-Started.stories.mdx index 2f887e7d..71947108 100644 --- a/docs/installation.mdx +++ b/docs/Getting-Started.stories.mdx @@ -1,9 +1,8 @@ ---- -name: Getting Started -route: /installation ---- +import { Meta } from '@storybook/addon-docs'; -## Installation + + +# Installation React95 is available as an [npm package](https://www.npmjs.com/package/react95). @@ -12,23 +11,26 @@ React95 is available as an [npm package](https://www.npmjs.com/package/react95). To install and save your `package.json` dependencies, run: ```sh -// yarn +# yarn yarn add react95 styled-components -// npm -npm i -S react95 styled-components +# npm +npm install -S react95 styled-components ``` -In order to have `react95` working properly, you'll also need [`styled-components`](https://github.com/styled-components/styled-components), this way you can use custom themes and get the best of the library 🙂 +In order to have `react95` working properly, you'll also need +[styled-components 💅](https://github.com/styled-components/styled-components), +this way you can use custom themes and get the best of the library 🙂 ## Usage -Apply style reset, wrap your app content with ThemeProvider with theme of your choice... and you are ready to go! 🚀 +Apply style reset, wrap your app content with ThemeProvider with theme of your +choice... and you are ready to go! 🚀 ```jsx import React from 'react'; +import { Divider, List, ListItem, styleReset } from 'react95'; import { createGlobalStyle, ThemeProvider } from 'styled-components'; -import { styleReset, List, ListItem, Divider } from 'react95'; /* Pick a theme of your choice */ import original from 'react95/dist/themes/original'; @@ -50,7 +52,7 @@ const GlobalStyles = createGlobalStyle` font-weight: bold; font-style: normal } - body { + body, input, select, textarea { font-family: 'ms_sans_serif'; } ${styleReset} diff --git a/docs/submit-project.mdx b/docs/Submit-your-Project.stories.mdx similarity index 66% rename from docs/submit-project.mdx rename to docs/Submit-your-Project.stories.mdx index 131f93a2..ea280569 100644 --- a/docs/submit-project.mdx +++ b/docs/Submit-your-Project.stories.mdx @@ -1,9 +1,8 @@ ---- -name: Submit your project -route: /submit-project ---- +import { Meta } from '@storybook/addon-docs'; -### Submit your project + + +# Submit your Project Apps built with React95 will be featured on the official React95 [website](https://react95.io) 🤟🏻 diff --git a/docs/index.mdx b/docs/Welcome.stories.mdx similarity index 51% rename from docs/index.mdx rename to docs/Welcome.stories.mdx index 2c9b1452..1e96e430 100644 --- a/docs/index.mdx +++ b/docs/Welcome.stories.mdx @@ -1,21 +1,26 @@ ---- -name: Welcome -route: / ---- - -## Welcome to React95 - -

- NPM - React95 version - React95 license - -

- -

- - Components - +import { Meta } from '@storybook/addon-docs'; + + + +# Welcome to React95 + + + NPM + +  + + React95 version + +  + + React95 license + + +

+ Components  -  Demo app  -  @@ -28,23 +33,14 @@ route: / PayPal donation 💰

-

- Refreshed Windows95 UI components for your modern React apps. Built - with{' '} - - styled-components - {' '} - 💅 -

+**Refreshed** Windows 95 UI components for your modern React apps. Built with +[styled-components](https://github.com/styled-components/styled-components) 💅. ![hero](https://user-images.githubusercontent.com/28541613/81947711-28b05580-9601-11ea-964a-c3a6de998496.png) ### Getting Started -Check out our [getting started](/installation) docs! +Check out our [getting started](?path=/story/docs-getting-started--page) docs! ### Motivation diff --git a/docs/component_template.mdx b/docs/component_template.mdx deleted file mode 100644 index 84ec5ecd..00000000 --- a/docs/component_template.mdx +++ /dev/null @@ -1,26 +0,0 @@ ---- -name: __component -menu: Components ---- - -import { __component } from 'react95'; - -# __component - -## Usage - - - __component - - -## API - -### Import - -``` -import { __component } from 'react95' -``` - -### Props - - diff --git a/docs/contributing.mdx b/docs/contributing.mdx deleted file mode 100644 index e3960d3f..00000000 --- a/docs/contributing.mdx +++ /dev/null @@ -1,10 +0,0 @@ ---- -name: Contributing -route: /contributing ---- - -### Contributing - -Any help from UI / UX designers would be EXTREMELY appreciated. The challenge is to come up with new component designs / layouts that are broadly used in modern UIs, that weren't present back in 95. - -If you want to help with the project, feel free to open pull requests and submit issues or component proposals. Let's bring this UI back to life ♥️ From aeca001a6565cccbca46407aba02dcb7c8b4b68c Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sat, 30 Jul 2022 19:26:18 -0400 Subject: [PATCH 051/100] docs(anchor): categorize under Typography --- src/Anchor/Anchor.mdx | 28 ---------------------------- src/Anchor/Anchor.stories.tsx | 8 +++----- src/Anchor/Anchor.tsx | 31 ++++++++++++++++--------------- 3 files changed, 19 insertions(+), 48 deletions(-) delete mode 100644 src/Anchor/Anchor.mdx diff --git a/src/Anchor/Anchor.mdx b/src/Anchor/Anchor.mdx deleted file mode 100644 index 7c0c3409..00000000 --- a/src/Anchor/Anchor.mdx +++ /dev/null @@ -1,28 +0,0 @@ ---- -name: Anchor -menu: Components ---- - -import Anchor from './Anchor'; - -# Anchor - -## Usage - - - - Expensive Toys - - - -## API - -### Props - - - -### Import - -``` -import { Anchor } from 'react95' -``` diff --git a/src/Anchor/Anchor.stories.tsx b/src/Anchor/Anchor.stories.tsx index f2fb21c7..7bb6c7c2 100644 --- a/src/Anchor/Anchor.stories.tsx +++ b/src/Anchor/Anchor.stories.tsx @@ -1,16 +1,15 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; +import { Anchor } from 'react95'; import styled from 'styled-components'; -import { Anchor } from './Anchor'; - const Wrapper = styled.div` padding: 5rem; background: ${({ theme }) => theme.material}; `; export default { - title: 'Anchor', + title: 'Typography/Anchor', component: Anchor, decorators: [story => {story()}] } as ComponentMeta; @@ -18,9 +17,8 @@ export default { export function Default() { return (

- Everybody likes + Everybody likes{' '} - {' '} https://expensive.toys

diff --git a/src/Anchor/Anchor.tsx b/src/Anchor/Anchor.tsx index 5e27e141..20170fea 100644 --- a/src/Anchor/Anchor.tsx +++ b/src/Anchor/Anchor.tsx @@ -3,7 +3,12 @@ import styled from 'styled-components'; import { CommonStyledProps } from '../types'; -const StyledAnchor = styled.a` +type AnchorProps = { + children: React.ReactNode; +} & React.AnchorHTMLAttributes & + CommonStyledProps; + +const StyledAnchor = styled.a<{ underline: boolean }>` color: ${({ theme }) => theme.anchor}; font-size: inherit; text-decoration: underline; @@ -12,20 +17,16 @@ const StyledAnchor = styled.a` } `; -type AnchorProps = { - children: React.ReactNode; -} & React.AnchorHTMLAttributes & - CommonStyledProps; +const Anchor = forwardRef( + ({ children, ...otherProps }: AnchorProps, ref) => { + return ( + + {children} + + ); + } +); -const Anchor = forwardRef(function Anchor( - { children, ...otherProps }: AnchorProps, - ref -) { - return ( - - {children} - - ); -}); +Anchor.displayName = 'Anchor'; export { Anchor, AnchorProps }; From 51df0388d0d06f6ac60b2f2da48e6089c9a22c10 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sat, 30 Jul 2022 20:12:26 -0400 Subject: [PATCH 052/100] chore(appbar): categorize under Environment --- src/AppBar/AppBar.mdx | 90 ----------------------------------- src/AppBar/AppBar.stories.tsx | 2 +- src/AppBar/AppBar.tsx | 24 +++++----- 3 files changed, 14 insertions(+), 102 deletions(-) delete mode 100644 src/AppBar/AppBar.mdx diff --git a/src/AppBar/AppBar.mdx b/src/AppBar/AppBar.mdx deleted file mode 100644 index 85a2325e..00000000 --- a/src/AppBar/AppBar.mdx +++ /dev/null @@ -1,90 +0,0 @@ ---- -name: AppBar -menu: Components ---- - -import { AppBar } from './AppBar'; -import { Toolbar } from '../Toolbar/Toolbar'; -import { Button } from '../Button/Button'; -import { TextField } from '../TextField/TextField'; -import List from '../List/List'; -import ListItem from '../ListItem/ListItem'; -import Divider from '../Divider/Divider'; - -# AppBar - -## Usage - -#### Default - - - {() => { - const [open, setOpen] = React.useState(false); - function handleClick() { - setOpen(!open); - } - function handleClose() { - setOpen(false); - } - const renderMenu = () => { - return ( -
- {open && ( - - - - 👨‍💻 - - Profile - - - - 📁 - - My account - - - - - 🔙 - - Logout - - - )} - -
- ); - }; - return ( - - - {renderMenu()} - - - - ); - }} - - -## API - -### Import - -``` -import { AppBar } from 'react95' -``` - -### Props - - diff --git a/src/AppBar/AppBar.stories.tsx b/src/AppBar/AppBar.stories.tsx index bb12aa22..69b0e848 100644 --- a/src/AppBar/AppBar.stories.tsx +++ b/src/AppBar/AppBar.stories.tsx @@ -18,7 +18,7 @@ const Wrapper = styled.div` `; export default { - title: 'AppBar', + title: 'Environment/AppBar', component: AppBar, decorators: [story => {story()}] } as ComponentMeta; diff --git a/src/AppBar/AppBar.tsx b/src/AppBar/AppBar.tsx index 8fa4cca9..416ae5a2 100644 --- a/src/AppBar/AppBar.tsx +++ b/src/AppBar/AppBar.tsx @@ -1,7 +1,8 @@ import React, { forwardRef } from 'react'; import styled from 'styled-components'; -import { CommonStyledProps } from '../types'; + import { createBorderStyles, createBoxStyles } from '../common'; +import { CommonStyledProps } from '../types'; type AppBarProps = { children: React.ReactNode; @@ -22,15 +23,16 @@ const StyledAppBar = styled.header` width: 100%; `; -const AppBar = forwardRef(function AppBar( - { children, fixed = true, ...otherProps }, - ref -) { - return ( - - {children} - - ); -}); +const AppBar = forwardRef( + ({ children, fixed = true, ...otherProps }, ref) => { + return ( + + {children} + + ); + } +); + +AppBar.displayName = 'AppBar'; export { AppBar, AppBarProps }; From d83eb88b53f11a25198e2596f3a20b775b3fd7f8 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sat, 30 Jul 2022 20:14:28 -0400 Subject: [PATCH 053/100] docs(avatar): categorize under Other --- src/Avatar/Avatar.mdx | 50 -------------------------------- src/Avatar/Avatar.stories.tsx | 2 +- src/Avatar/Avatar.tsx | 54 +++++++++++++++++++---------------- 3 files changed, 30 insertions(+), 76 deletions(-) delete mode 100644 src/Avatar/Avatar.mdx diff --git a/src/Avatar/Avatar.mdx b/src/Avatar/Avatar.mdx deleted file mode 100644 index b2788b41..00000000 --- a/src/Avatar/Avatar.mdx +++ /dev/null @@ -1,50 +0,0 @@ ---- -name: Avatar -menu: Components ---- - -import { Avatar } from './Avatar'; - -# Avatar - -## Usage - -#### Default - - - - - -#### No border - - - - - -#### Lettered - - - AK - - -#### Squared - - - - - 🚀 - - - - -## API - -### Import - -``` -import { Avatar } from 'react95' -``` - -### Props - - diff --git a/src/Avatar/Avatar.stories.tsx b/src/Avatar/Avatar.stories.tsx index f1cdd4e3..55bb1f00 100644 --- a/src/Avatar/Avatar.stories.tsx +++ b/src/Avatar/Avatar.stories.tsx @@ -12,7 +12,7 @@ const Wrapper = styled.div` `; export default { - title: 'Avatar', + title: 'Other/Avatar', component: Avatar, decorators: [story => {story()}] } as ComponentMeta; diff --git a/src/Avatar/Avatar.tsx b/src/Avatar/Avatar.tsx index 62f3b791..89990fd4 100644 --- a/src/Avatar/Avatar.tsx +++ b/src/Avatar/Avatar.tsx @@ -53,30 +53,34 @@ const StyledAvatarImg = styled.img` height: 100%; `; -const Avatar = forwardRef(function Avatar( - { - alt = '', - children, - noBorder = false, - size = 35, - square = false, - src, - ...otherProps - }, - ref -) { - return ( - - {src ? : children} - - ); -}); +const Avatar = forwardRef( + ( + { + alt = '', + children, + noBorder = false, + size = 35, + square = false, + src, + ...otherProps + }, + ref + ) => { + return ( + + {src ? : children} + + ); + } +); + +Avatar.displayName = 'Avatar'; export { Avatar, AvatarProps }; From bfd4f45798be61e7d71ea9980ea6c985a80dbd54 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sat, 30 Jul 2022 20:23:27 -0400 Subject: [PATCH 054/100] refactor(handle): categorize under Controls, rename Bar to Handle --- src/Bar/Bar.mdx | 34 ------------------- .../Bar.spec.tsx => Handle/Handle.spec.tsx} | 14 ++++---- .../Handle.stories.tsx} | 12 +++---- src/{Bar/Bar.tsx => Handle/Handle.tsx} | 8 +++-- src/List/List.stories.tsx | 4 +-- src/index.ts | 5 ++- src/legacy/Bar.tsx | 7 ++++ 7 files changed, 31 insertions(+), 53 deletions(-) delete mode 100644 src/Bar/Bar.mdx rename src/{Bar/Bar.spec.tsx => Handle/Handle.spec.tsx} (71%) rename src/{Bar/Bar.stories.tsx => Handle/Handle.stories.tsx} (73%) rename src/{Bar/Bar.tsx => Handle/Handle.tsx} (85%) create mode 100644 src/legacy/Bar.tsx diff --git a/src/Bar/Bar.mdx b/src/Bar/Bar.mdx deleted file mode 100644 index d0f2f026..00000000 --- a/src/Bar/Bar.mdx +++ /dev/null @@ -1,34 +0,0 @@ ---- -name: Bar -menu: Components ---- - -import { Bar } from '../Bar/Bar'; -import { AppBar } from '../AppBar/AppBar.js'; -import { Toolbar } from '../Toolbar/Toolbar.js'; -import { Button } from '../Button/Button.js'; - -# Bar - -## Usage - - - - - - - - - - - - -## API - -### Import - -### Props - - diff --git a/src/Bar/Bar.spec.tsx b/src/Handle/Handle.spec.tsx similarity index 71% rename from src/Bar/Bar.spec.tsx rename to src/Handle/Handle.spec.tsx index de79c49c..4455413b 100644 --- a/src/Bar/Bar.spec.tsx +++ b/src/Handle/Handle.spec.tsx @@ -2,11 +2,11 @@ import React from 'react'; import { renderWithTheme } from '../../test/utils'; -import { Bar } from './Bar'; +import { Handle } from './Handle'; -describe('', () => { +describe('', () => { it('should render bar', () => { - const { container } = renderWithTheme(); + const { container } = renderWithTheme(); const barEl = container.firstChild; expect(barEl).toBeInTheDocument(); @@ -14,7 +14,7 @@ describe('', () => { it('should handle custom style', () => { const { container } = renderWithTheme( - + ); const barEl = container.firstChild; @@ -23,7 +23,7 @@ describe('', () => { it('should handle custom props', () => { const customProps = { title: 'potatoe' }; - const { container } = renderWithTheme(); + const { container } = renderWithTheme(); const barEl = container.firstChild; expect(barEl).toHaveAttribute('title', 'potatoe'); @@ -31,14 +31,14 @@ describe('', () => { describe('prop: size', () => { it('should set proper size', () => { - const { container } = renderWithTheme(); + const { container } = renderWithTheme(); const barEl = container.firstChild; expect(barEl).toHaveStyleRule('height', '85%'); }); it('when passed a number, sets size in px', () => { - const { container } = renderWithTheme(); + const { container } = renderWithTheme(); const barEl = container.firstChild; expect(barEl).toHaveStyleRule('height', '25px'); diff --git a/src/Bar/Bar.stories.tsx b/src/Handle/Handle.stories.tsx similarity index 73% rename from src/Bar/Bar.stories.tsx rename to src/Handle/Handle.stories.tsx index 2e018b0b..a6a9fe04 100644 --- a/src/Bar/Bar.stories.tsx +++ b/src/Handle/Handle.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; -import { AppBar, Bar, Button, Toolbar } from 'react95'; +import { AppBar, Button, Handle, Toolbar } from 'react95'; import styled from 'styled-components'; const Wrapper = styled.div` @@ -9,21 +9,21 @@ const Wrapper = styled.div` `; export default { - title: 'Bar', - component: Bar, + title: 'Controls/Handle', + component: Handle, decorators: [story => {story()}] -} as ComponentMeta; +} as ComponentMeta; export function Default() { return ( - + - + ); diff --git a/src/Bar/Bar.tsx b/src/Handle/Handle.tsx similarity index 85% rename from src/Bar/Bar.tsx rename to src/Handle/Handle.tsx index 1adb0c32..fc8fd851 100644 --- a/src/Bar/Bar.tsx +++ b/src/Handle/Handle.tsx @@ -3,14 +3,14 @@ import styled from 'styled-components'; import { CommonStyledProps } from '../types'; import { getSize } from '../common/utils'; -type BarProps = { +type HandleProps = { size?: string | number; } & React.HTMLAttributes & CommonStyledProps; // TODO: add horizontal variant // TODO: allow user to specify number of bars (like 3 horizontal bars for drag handle) -const Bar = styled.div` +const Handle = styled.div` ${({ theme, size = '100%' }) => ` display: inline-block; box-sizing: border-box; @@ -24,4 +24,6 @@ const Bar = styled.div` `} `; -export { Bar, BarProps }; +Handle.displayName = 'Handle'; + +export { Handle, HandleProps }; diff --git a/src/List/List.stories.tsx b/src/List/List.stories.tsx index b365fcb6..bfd0d34c 100644 --- a/src/List/List.stories.tsx +++ b/src/List/List.stories.tsx @@ -2,7 +2,7 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; import styled from 'styled-components'; -import { Bar, Divider, List, ListItem } from 'react95'; +import { Divider, List, ListItem, Handle } from 'react95'; const Wrapper = styled.div` padding: 5rem; @@ -44,7 +44,7 @@ export function Default() { 🌿 - + Tackle Growl Razor Leaf diff --git a/src/index.ts b/src/index.ts index 54e30e3c..a3908d89 100644 --- a/src/index.ts +++ b/src/index.ts @@ -6,7 +6,6 @@ export { createScrollbars } from './common/index'; export * from './Anchor/Anchor'; export * from './AppBar/AppBar'; export * from './Avatar/Avatar'; -export * from './Bar/Bar'; export * from './Button/Button'; export * from './Checkbox/Checkbox'; export * from './ColorInput/ColorInput'; @@ -16,6 +15,7 @@ export * from './DatePicker/DatePicker'; export * from './Desktop/Desktop'; export * from './Divider/Divider'; export * from './Fieldset/Fieldset'; +export * from './Handle/Handle'; export * from './Hourglass/Hourglass'; export * from './List/List'; export * from './ListItem/ListItem'; @@ -42,3 +42,6 @@ export * from './Tree/Tree'; export * from './Window/Window'; export * from './WindowContent/WindowContent'; export * from './WindowHeader/WindowHeader'; + +/* deprecated components */ +export * from './legacy/Bar'; diff --git a/src/legacy/Bar.tsx b/src/legacy/Bar.tsx new file mode 100644 index 00000000..98562f2a --- /dev/null +++ b/src/legacy/Bar.tsx @@ -0,0 +1,7 @@ +import { Handle, HandleProps } from '../Handle/Handle'; + +/** @deprecated Use `HandleProps` */ +export type BarProps = HandleProps; + +/** @deprecated Use `Handle` */ +export const Bar = Handle; From 6e6b9bda8a029c3ef5d2d3fcd309e2d5d941e86a Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sat, 30 Jul 2022 20:39:40 -0400 Subject: [PATCH 055/100] docs(button): categorize under Controls This also renames the menu variant to thin. --- src/Button/Button.mdx | 110 ---------------------------------- src/Button/Button.spec.tsx | 4 ++ src/Button/Button.stories.tsx | 86 +++++++++++++------------- src/Button/Button.tsx | 97 +++++++++++++++++------------- 4 files changed, 102 insertions(+), 195 deletions(-) delete mode 100644 src/Button/Button.mdx diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx deleted file mode 100644 index ba6c19a2..00000000 --- a/src/Button/Button.mdx +++ /dev/null @@ -1,110 +0,0 @@ ---- -name: Button -menu: Components ---- - -import { Button } from './Button'; -import Window from '../Window/Window'; -import WindowContent from '../WindowContent/WindowContent'; -import { Cutout } from '../Cutout/Cutout'; -import { Toolbar } from '../Toolbar/Toolbar'; - -# Button - -## Usage - -#### Default - - - - - -#### Disabled - - - - - -#### Full Width - - - - - -#### Square - - - - - -#### Active - - - - - -#### Different sizes - - -
- - - -
- - -#### Flat - - - - - -

- When you want to use Buttons on a light background (like scrollable - content), just use the flat variant: -

-
- - - - - -
- - - - - -## API - -### Import - -``` -import { Button } from 'react95' -``` - -### Props - - diff --git a/src/Button/Button.spec.tsx b/src/Button/Button.spec.tsx index a0f496f3..a980b3c1 100644 --- a/src/Button/Button.spec.tsx +++ b/src/Button/Button.spec.tsx @@ -55,6 +55,10 @@ describe(' + + + +
+ + + + ); +} + +Flat.story = { + name: 'flat' +}; + const imageSrc = 'https://image.freepik.com/foto-gratuito/la-frutta-fresca-del-kiwi-tagliata-a-meta-con-la-decorazione-completa-del-pezzo-e-bella-sulla-tavola-di-legno_47436-1.jpg'; -export function Menu() { +export function Thin() { const [open, setOpen] = useState(false); return ( @@ -77,10 +113,10 @@ export function Menu() { Kiwi.app - -
- - - -
- - - - ); -} - -Flat.story = { - name: 'flat' +Thin.story = { + name: 'thin' }; diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx index e74a2547..df0a9186 100644 --- a/src/Button/Button.tsx +++ b/src/Button/Button.tsx @@ -24,11 +24,19 @@ type ButtonProps = { size?: Sizes; square?: boolean; type?: string; - variant?: 'default' | 'menu' | 'flat'; -} & Omit< - React.ButtonHTMLAttributes, - 'disabled' | 'onClick' | 'onTouchStart' | 'type' -> & +} & ( + | { + variant?: 'default' | 'flat' | 'thin'; + } + | { + /** @deprecated Use `thin` */ + variant?: 'menu'; + } +) & + Omit< + React.ButtonHTMLAttributes, + 'disabled' | 'onClick' | 'onTouchStart' | 'type' + > & CommonStyledProps; type StyledButtonProps = Pick< @@ -93,7 +101,7 @@ export const StyledButton = styled.button` outline-offset: -4px; } ` - : variant === 'menu' + : variant === 'menu' || variant === 'thin' ? css` ${createBoxStyles()}; border: 2px solid transparent; @@ -156,41 +164,46 @@ export const StyledButton = styled.button` ${commonButtonStyles} `; -const Button = forwardRef(function Button( - { - onClick, - disabled = false, - children, - type = 'button', - fullWidth = false, - size = 'md', - square = false, - active = false, - onTouchStart = noOp, - primary = false, - variant = 'default', - ...otherProps - }, - ref -) { - return ( - - {children} - - ); -}); +const Button = forwardRef( + ( + { + onClick, + disabled = false, + children, + type = 'button', + fullWidth = false, + size = 'md', + square = false, + active = false, + onTouchStart = noOp, + primary = false, + variant = 'default', + ...otherProps + }, + ref + ) => { + return ( + + {children} + + ); + } +); + +Button.displayName = 'Button'; export { Button, ButtonProps }; From 201d1c0695ec019c9adba6a693c14147ffdd2906 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sat, 30 Jul 2022 20:42:21 -0400 Subject: [PATCH 056/100] docs(checkbox): categorize under Controls --- src/Checkbox/Checkbox.mdx | 180 ------------------------------ src/Checkbox/Checkbox.stories.tsx | 2 +- src/Checkbox/Checkbox.tsx | 112 ++++++++++--------- 3 files changed, 59 insertions(+), 235 deletions(-) delete mode 100644 src/Checkbox/Checkbox.mdx diff --git a/src/Checkbox/Checkbox.mdx b/src/Checkbox/Checkbox.mdx deleted file mode 100644 index 7c84413f..00000000 --- a/src/Checkbox/Checkbox.mdx +++ /dev/null @@ -1,180 +0,0 @@ ---- -name: Checkbox -menu: Components ---- - -import { Checkbox } from './Checkbox'; -import Fieldset from '../Fieldset/Fieldset'; -import { Button } from '../Button/Button'; -import { Cutout } from '../Cutout/Cutout'; -import List from '../List/List'; -import ListItem from '../ListItem/ListItem'; -import Divider from '../Divider/Divider'; - -# Checkbox - -## Usage - -#### Controlled group - - - {() => { - const [steak, setSteak] = React.useState(true); - const [tortilla, setTortilla] = React.useState(false); - const [pizza, setPizza] = React.useState(false); - const handleChange = event => { - const { - target: { value } - } = event; - if (value === 'steak') { - setSteak(!steak); - return; - } - if (value === 'tortilla') { - setTortilla(!tortilla); - return; - } - if (value === 'pizza') { - setPizza(!pizza); - return; - } - }; - const reset = () => { - setSteak(false); - setTortilla(false); - setPizza(false); - }; - return ( -
-
- -
- -
- -
- -
- ); - }} - - -#### Uncontrolled - - - <> - -
- - - - -#### Flat - - - -

- When you want to add input field on a light background (like scrollable - content), just use the flat variant: -

-
- - - -
- - - -#### Menu - - - - - - - - - - - - - - - - -## API - -### Import - -``` -import { Checkbox } from 'react95' -``` - -### Props - - diff --git a/src/Checkbox/Checkbox.stories.tsx b/src/Checkbox/Checkbox.stories.tsx index cfee5b07..437a71ff 100644 --- a/src/Checkbox/Checkbox.stories.tsx +++ b/src/Checkbox/Checkbox.stories.tsx @@ -19,7 +19,7 @@ const Wrapper = styled.div` `; export default { - title: 'Checkbox', + title: 'Controls/Checkbox', component: Checkbox, decorators: [story => {story()}] } as ComponentMeta; diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx index 777d10d0..3047d233 100644 --- a/src/Checkbox/Checkbox.tsx +++ b/src/Checkbox/Checkbox.tsx @@ -189,64 +189,68 @@ const CheckboxComponents = { menu: StyledMenuCheckbox }; -const Checkbox = forwardRef(function Checkbox( - { - checked, - className = '', - defaultChecked = false, - disabled = false, - indeterminate = false, - label = '', - onChange = noOp, - style = {}, - value, - variant = 'default', - ...otherProps - }, - ref -) { - const [state, setState] = useControlledOrUncontrolled({ - value: checked, - defaultValue: defaultChecked - }); - - const handleChange = useCallback( - (e: React.ChangeEvent) => { - const newState = e.target.checked; - setState(newState); - onChange(e); +const Checkbox = forwardRef( + ( + { + checked, + className = '', + defaultChecked = false, + disabled = false, + indeterminate = false, + label = '', + onChange = noOp, + style = {}, + value, + variant = 'default', + ...otherProps }, - [onChange, setState] - ); + ref + ) => { + const [state, setState] = useControlledOrUncontrolled({ + value: checked, + defaultValue: defaultChecked + }); - const CheckboxComponent = CheckboxComponents[variant]; + const handleChange = useCallback( + (e: React.ChangeEvent) => { + const newState = e.target.checked; + setState(newState); + onChange(e); + }, + [onChange, setState] + ); - let Icon = null; - if (indeterminate) { - Icon = IndeterminateIcon; - } else if (state) { - Icon = CheckmarkIcon; + const CheckboxComponent = CheckboxComponents[variant]; + + let Icon = null; + if (indeterminate) { + Icon = IndeterminateIcon; + } else if (state) { + Icon = CheckmarkIcon; + } + + return ( + + + + {Icon && } + + {label && {label}} + + ); } +); - return ( - - - - {Icon && } - - {label && {label}} - - ); -}); +Checkbox.displayName = 'Checkbox'; export { Checkbox, CheckboxProps }; From d2d1022151a740746593a6512a0aef4d9891a7e3 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sat, 30 Jul 2022 20:46:47 -0400 Subject: [PATCH 057/100] docs(colorinput): categorize under Controls --- src/ColorInput/ColorInput.stories.tsx | 2 +- src/ColorInput/ColorInput.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/ColorInput/ColorInput.stories.tsx b/src/ColorInput/ColorInput.stories.tsx index 93ce49dd..5dc9aab8 100644 --- a/src/ColorInput/ColorInput.stories.tsx +++ b/src/ColorInput/ColorInput.stories.tsx @@ -28,7 +28,7 @@ const Wrapper = styled.div` `; export default { - title: 'ColorInput', + title: 'Controls/ColorInput', component: ColorInput, decorators: [story => {story()}] } as ComponentMeta; diff --git a/src/ColorInput/ColorInput.tsx b/src/ColorInput/ColorInput.tsx index bd98b407..c7234406 100644 --- a/src/ColorInput/ColorInput.tsx +++ b/src/ColorInput/ColorInput.tsx @@ -116,7 +116,7 @@ const ChevronIcon = styled.span< // TODO make sure all aria and role attributes are in place const ColorInput = forwardRef( - function ColorInput( + ( { value, defaultValue, @@ -126,7 +126,7 @@ const ColorInput = forwardRef( ...otherProps }, ref - ) { + ) => { const [valueDerived, setValueState] = useControlledOrUncontrolled({ value, defaultValue @@ -163,4 +163,6 @@ const ColorInput = forwardRef( } ); +ColorInput.displayName = 'ColorInput'; + export { ColorInput, ColorInputProps }; From b25a9e8445c583f29b94a525111111acca8ce0e6 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sat, 30 Jul 2022 20:48:45 -0400 Subject: [PATCH 058/100] docs(counter): categorize under Other --- src/Counter/Counter.mdx | 22 ---------------------- src/Counter/Counter.stories.tsx | 2 +- src/Counter/Counter.tsx | 33 +++++++++++++++++---------------- 3 files changed, 18 insertions(+), 39 deletions(-) delete mode 100644 src/Counter/Counter.mdx diff --git a/src/Counter/Counter.mdx b/src/Counter/Counter.mdx deleted file mode 100644 index 0d8428b2..00000000 --- a/src/Counter/Counter.mdx +++ /dev/null @@ -1,22 +0,0 @@ ---- -name: Bar -menu: Components ---- - -import { Counter } from '../Counter/Counter'; - -# Counter - -## Usage - - - - - -## API - -### Import - -### Props - - diff --git a/src/Counter/Counter.stories.tsx b/src/Counter/Counter.stories.tsx index 63ed01dc..7890db93 100644 --- a/src/Counter/Counter.stories.tsx +++ b/src/Counter/Counter.stories.tsx @@ -20,7 +20,7 @@ const Wrapper = styled.div` `; export default { - title: 'Counter', + title: 'Other/Counter', component: Counter, decorators: [story => {story()}] } as ComponentMeta; diff --git a/src/Counter/Counter.tsx b/src/Counter/Counter.tsx index 9e468b2f..55dfec81 100644 --- a/src/Counter/Counter.tsx +++ b/src/Counter/Counter.tsx @@ -25,21 +25,22 @@ const pixelSizes = { xl: 4 }; -const Counter = forwardRef(function Counter( - { value = 0, minLength = 3, size = 'md', ...otherProps }, - ref -) { - const digits = useMemo( - () => value.toString().padStart(minLength, '0').split(''), - [minLength, value] - ); - return ( - - {digits.map((digit, i) => ( - - ))} - - ); -}); +const Counter = forwardRef( + ({ value = 0, minLength = 3, size = 'md', ...otherProps }, ref) => { + const digits = useMemo( + () => value.toString().padStart(minLength, '0').split(''), + [minLength, value] + ); + return ( + + {digits.map((digit, i) => ( + + ))} + + ); + } +); + +Counter.displayName = 'Counter'; export { Counter, CounterProps }; From 7c32d166d307403c9ed8e6fc30e7a7d973f433ad Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 31 Jul 2022 21:14:25 -0400 Subject: [PATCH 059/100] refactor(separator): categorize under Layout, rename Divider to Separator --- README.md | 4 +- docs/Getting-Started.stories.mdx | 4 +- src/AppBar/AppBar.stories.tsx | 4 +- src/Button/Button.stories.tsx | 6 +- src/Checkbox/Checkbox.stories.tsx | 4 +- src/ColorInput/ColorInput.tsx | 6 +- src/Divider/Divider.mdx | 47 ------------ src/Divider/Divider.spec.tsx | 73 ------------------ src/List/List.stories.tsx | 6 +- src/Radio/Radio.stories.tsx | 4 +- src/Separator/Separator.spec.tsx | 74 +++++++++++++++++++ .../Separator.stories.tsx} | 16 ++-- .../Divider.tsx => Separator/Separator.tsx} | 9 ++- src/index.ts | 3 +- src/legacy/Divider.tsx | 7 ++ 15 files changed, 116 insertions(+), 151 deletions(-) delete mode 100644 src/Divider/Divider.mdx delete mode 100644 src/Divider/Divider.spec.tsx create mode 100644 src/Separator/Separator.spec.tsx rename src/{Divider/Divider.stories.tsx => Separator/Separator.stories.tsx} (69%) rename src/{Divider/Divider.tsx => Separator/Separator.tsx} (80%) create mode 100644 src/legacy/Divider.tsx diff --git a/README.md b/README.md index 68fdc7d2..18821cb9 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ Apply style reset, wrap your app with ThemeProvider with theme of your choice... import React from 'react'; import { createGlobalStyle, ThemeProvider } from 'styled-components'; -import { Divider, List, ListItem, styleReset } from 'react95'; +import { List, ListItem, Separator, styleReset } from 'react95'; // pick a theme of your choice import original from 'react95/dist/themes/original'; // original Windows95 font (optionally) @@ -75,7 +75,7 @@ const App = () => ( 🎤 Sing 💃🏻 Dance - + 😴 Sleep diff --git a/docs/Getting-Started.stories.mdx b/docs/Getting-Started.stories.mdx index 71947108..bc243bd1 100644 --- a/docs/Getting-Started.stories.mdx +++ b/docs/Getting-Started.stories.mdx @@ -29,7 +29,7 @@ choice... and you are ready to go! 🚀 ```jsx import React from 'react'; -import { Divider, List, ListItem, styleReset } from 'react95'; +import { List, ListItem, Separator, styleReset } from 'react95'; import { createGlobalStyle, ThemeProvider } from 'styled-components'; /* Pick a theme of your choice */ @@ -65,7 +65,7 @@ const App = () => ( 🎤 Sing 💃🏻 Dance - + 😴 Sleep diff --git a/src/AppBar/AppBar.stories.tsx b/src/AppBar/AppBar.stories.tsx index 69b0e848..ecc73757 100644 --- a/src/AppBar/AppBar.stories.tsx +++ b/src/AppBar/AppBar.stories.tsx @@ -3,9 +3,9 @@ import React, { useState } from 'react'; import { AppBar, Button, - Divider, List, ListItem, + Separator, TextField, Toolbar } from 'react95'; @@ -63,7 +63,7 @@ export function Default() { My account - + 🔙 diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index f28c609c..66cd9880 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -3,9 +3,9 @@ import React, { useState } from 'react'; import { Button, Cutout, - Divider, List, ListItem, + Separator, Toolbar, Window, WindowContent, @@ -145,11 +145,11 @@ export function Thin() { onClick={() => setOpen(false)} > Copy link - + Facebook Twitter Instagram - + MySpace diff --git a/src/Checkbox/Checkbox.stories.tsx b/src/Checkbox/Checkbox.stories.tsx index 437a71ff..2d7d92ae 100644 --- a/src/Checkbox/Checkbox.stories.tsx +++ b/src/Checkbox/Checkbox.stories.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import styled from 'styled-components'; -import { Checkbox, Fieldset, Cutout, List, ListItem, Divider } from 'react95'; +import { Checkbox, Fieldset, Cutout, List, ListItem, Separator } from 'react95'; import { ComponentMeta } from '@storybook/react'; const Wrapper = styled.div` @@ -253,7 +253,7 @@ export function Menu() { indeterminate /> - + ( color={valueDerived ?? '#008080'} role='presentation' /> - {variant === 'default' && } + {variant === 'default' && } ); diff --git a/src/Divider/Divider.mdx b/src/Divider/Divider.mdx deleted file mode 100644 index d3c29adb..00000000 --- a/src/Divider/Divider.mdx +++ /dev/null @@ -1,47 +0,0 @@ ---- - -name: Divider -menu: Components -import { Divider } from './Divider' -import List from '../List/List' -import ListItem from '../ListItem/ListItem' - -# Divider - -## Usage - -#### Default - - - - Item 1 - - Item 2 - - Item 3 - - - -#### vertical - - - - Item 1 - - Item 2 - - Item 3 - - - -## API - -### Import - -``` -import { Divider } from 'react95' -``` - -### Props - - diff --git a/src/Divider/Divider.spec.tsx b/src/Divider/Divider.spec.tsx deleted file mode 100644 index 7054c79e..00000000 --- a/src/Divider/Divider.spec.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; - -import { renderWithTheme } from '../../test/utils'; - -import { Divider } from './Divider'; - -describe('', () => { - it('should render Divider', () => { - const { container } = renderWithTheme(); - const divider = container.firstElementChild; - - expect(divider).toBeInTheDocument(); - }); - - describe('prop: size', () => { - it('defaults to 100%', () => { - const { container } = renderWithTheme(); - const divider = container.firstElementChild; - expect(divider).toHaveStyleRule('width', '100%'); - }); - it('sets size passed correctly', () => { - const size = '53px'; - const { container } = renderWithTheme(); - const divider = container.firstElementChild; - - expect(divider).toHaveStyleRule('width', size); - }); - }); - - describe('prop: orientation', () => { - it('renders horizontal line by default', () => { - const size = '53px'; - const { container } = renderWithTheme(); - const divider = container.firstElementChild; - - expect(divider).toHaveStyleRule('width', size); - }); - - it('renders vertical line when orientation="vertical"', () => { - const size = '53px'; - const { container } = renderWithTheme( - - ); - const divider = container.firstElementChild; - - expect(divider).toHaveStyleRule('height', size); - }); - }); - describe('prop: size', () => { - it('should set proper size', () => { - const { container } = renderWithTheme(); - const avatarEl = container.firstElementChild; - - expect(avatarEl).toHaveStyleRule('width', '85%'); - }); - - it('when passed a number, sets size in px', () => { - const { container } = renderWithTheme(); - const avatarEl = container.firstElementChild; - - expect(avatarEl).toHaveStyleRule('width', '25px'); - }); - - it('should set height when vertical', () => { - const { container } = renderWithTheme( - - ); - const avatarEl = container.firstElementChild; - - expect(avatarEl).toHaveStyleRule('height', '25px'); - }); - }); -}); diff --git a/src/List/List.stories.tsx b/src/List/List.stories.tsx index bfd0d34c..0bd48e94 100644 --- a/src/List/List.stories.tsx +++ b/src/List/List.stories.tsx @@ -2,7 +2,7 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; import styled from 'styled-components'; -import { Divider, List, ListItem, Handle } from 'react95'; +import { Handle, List, ListItem, Separator } from 'react95'; const Wrapper = styled.div` padding: 5rem; @@ -53,11 +53,11 @@ export function Default() { View - + Paste Paste Shortcut Undo Copy - + Properties diff --git a/src/Radio/Radio.stories.tsx b/src/Radio/Radio.stories.tsx index 0abd89ae..a48ac2ef 100644 --- a/src/Radio/Radio.stories.tsx +++ b/src/Radio/Radio.stories.tsx @@ -2,11 +2,11 @@ import { ComponentMeta } from '@storybook/react'; import React, { useState } from 'react'; import { Cutout, - Divider, Fieldset, List, ListItem, Radio, + Separator, Window, WindowContent } from 'react95'; @@ -178,7 +178,7 @@ export function Menu() { name='tool' /> - + ', () => { + it('should render Separator', () => { + const { container } = renderWithTheme(); + const separator = container.firstElementChild; + + expect(separator).toBeInTheDocument(); + }); + + describe('prop: size', () => { + it('defaults to 100%', () => { + const { container } = renderWithTheme(); + const separator = container.firstElementChild; + expect(separator).toHaveStyleRule('width', '100%'); + }); + it('sets size passed correctly', () => { + const size = '53px'; + const { container } = renderWithTheme(); + const separator = container.firstElementChild; + + expect(separator).toHaveStyleRule('width', size); + }); + }); + + describe('prop: orientation', () => { + it('renders horizontal line by default', () => { + const size = '53px'; + const { container } = renderWithTheme(); + const separator = container.firstElementChild; + + expect(separator).toHaveStyleRule('width', size); + }); + + it('renders vertical line when orientation="vertical"', () => { + const size = '53px'; + const { container } = renderWithTheme( + + ); + const separator = container.firstElementChild; + + expect(separator).toHaveStyleRule('height', size); + }); + }); + + describe('prop: size', () => { + it('should set proper size', () => { + const { container } = renderWithTheme(); + const separator = container.firstElementChild; + + expect(separator).toHaveStyleRule('width', '85%'); + }); + + it('when passed a number, sets size in px', () => { + const { container } = renderWithTheme(); + const separator = container.firstElementChild; + + expect(separator).toHaveStyleRule('width', '25px'); + }); + + it('should set height when vertical', () => { + const { container } = renderWithTheme( + + ); + const separator = container.firstElementChild; + + expect(separator).toHaveStyleRule('height', '25px'); + }); + }); +}); diff --git a/src/Divider/Divider.stories.tsx b/src/Separator/Separator.stories.tsx similarity index 69% rename from src/Divider/Divider.stories.tsx rename to src/Separator/Separator.stories.tsx index 4f697e29..bb3178b2 100644 --- a/src/Divider/Divider.stories.tsx +++ b/src/Separator/Separator.stories.tsx @@ -2,7 +2,7 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; import styled from 'styled-components'; -import { Divider, List, ListItem } from 'react95'; +import { Separator, List, ListItem } from 'react95'; const Wrapper = styled.div` padding: 5rem; @@ -10,26 +10,26 @@ const Wrapper = styled.div` `; export default { - title: 'Divider', - component: Divider, + title: 'Layout/Separator', + component: Separator, decorators: [story => {story()}] -} as ComponentMeta; +} as ComponentMeta; export function Default() { return ( <> Item 1 - + Item 2 - + Item 3 Item 1 - + Item 2 - + Item 3 diff --git a/src/Divider/Divider.tsx b/src/Separator/Separator.tsx similarity index 80% rename from src/Divider/Divider.tsx rename to src/Separator/Separator.tsx index 788a8213..1956a098 100644 --- a/src/Divider/Divider.tsx +++ b/src/Separator/Separator.tsx @@ -2,11 +2,12 @@ import styled from 'styled-components'; import { getSize } from '../common/utils'; import { Orientation } from '../types'; -type DividerProps = { +type SeparatorProps = { size?: string | number; orientation?: Orientation; }; -const Divider = styled.div` + +const Separator = styled.div` ${({ orientation, theme, size = '100%' }) => orientation === 'vertical' ? ` @@ -23,4 +24,6 @@ const Divider = styled.div` `} `; -export { Divider, DividerProps }; +Separator.displayName = 'Separator'; + +export { Separator, SeparatorProps }; diff --git a/src/index.ts b/src/index.ts index a3908d89..61da4ffb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -13,7 +13,6 @@ export * from './Counter/Counter'; export * from './Cutout/Cutout'; export * from './DatePicker/DatePicker'; export * from './Desktop/Desktop'; -export * from './Divider/Divider'; export * from './Fieldset/Fieldset'; export * from './Handle/Handle'; export * from './Hourglass/Hourglass'; @@ -25,6 +24,7 @@ export * from './Panel/Panel'; export * from './Progress/Progress'; export * from './Radio/Radio'; export * from './Select/Select'; +export * from './Separator/Separator'; export * from './Slider/Slider'; export * from './Tab/Tab'; export * from './TabBody/TabBody'; @@ -45,3 +45,4 @@ export * from './WindowHeader/WindowHeader'; /* deprecated components */ export * from './legacy/Bar'; +export * from './legacy/Separator'; diff --git a/src/legacy/Divider.tsx b/src/legacy/Divider.tsx new file mode 100644 index 00000000..d883663a --- /dev/null +++ b/src/legacy/Divider.tsx @@ -0,0 +1,7 @@ +import { Separator, SeparatorProps } from '../Separator/Separator'; + +/** @deprecated Use `SeparatorProps` */ +export type DividerProps = SeparatorProps; + +/** @deprecated Use `Separator` */ +export const Divider = Separator; From 3f09b493f097175466f08335e3f1901c32d8e35c Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sat, 30 Jul 2022 21:05:33 -0400 Subject: [PATCH 060/100] refactor(scrollview): categorize under Layout, rename Cutout to ScrollView --- src/Button/Button.stories.tsx | 10 ++--- src/Checkbox/Checkbox.stories.tsx | 13 ++++-- src/Checkbox/Checkbox.tsx | 4 +- src/ColorInput/ColorInput.stories.tsx | 6 +-- src/Cutout/Cutout.mdx | 43 ------------------ src/Cutout/Cutout.spec.tsx | 41 ----------------- src/DatePicker/DatePicker.tsx | 4 +- src/Desktop/Desktop.tsx | 4 +- src/Fieldset/Fieldset.stories.tsx | 6 +-- src/LoadingIndicator/LoadingIndicator.tsx | 4 +- src/NumberField/NumberField.mdx | 6 +-- src/NumberField/NumberField.stories.tsx | 6 +-- src/Progress/Progress.tsx | 4 +- src/Radio/Radio.stories.tsx | 6 +-- src/Radio/Radio.tsx | 4 +- src/ScrollView/ScrollView.spec.tsx | 44 +++++++++++++++++++ .../ScrollView.stories.tsx} | 12 ++--- .../Cutout.tsx => ScrollView/ScrollView.tsx} | 27 ++++++------ src/Select/Select.mdx | 10 ++--- src/Select/Select.stories.tsx | 6 +-- src/Select/Select.styles.tsx | 6 ++- src/Slider/Slider.stories.tsx | 6 +-- src/Slider/Slider.tsx | 6 +-- src/Table/Table.tsx | 4 +- src/TextField/TextField.mdx | 10 ++--- src/TextField/TextField.stories.tsx | 6 +-- src/TextField/TextField.tsx | 4 +- src/index.ts | 5 ++- src/legacy/Cutout.tsx | 7 +++ 29 files changed, 146 insertions(+), 168 deletions(-) delete mode 100644 src/Cutout/Cutout.mdx delete mode 100644 src/Cutout/Cutout.spec.tsx create mode 100644 src/ScrollView/ScrollView.spec.tsx rename src/{Cutout/Cutout.stories.tsx => ScrollView/ScrollView.stories.tsx} (82%) rename src/{Cutout/Cutout.tsx => ScrollView/ScrollView.tsx} (74%) create mode 100644 src/legacy/Cutout.tsx diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 66cd9880..8d299d79 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -2,9 +2,9 @@ import { ComponentMeta } from '@storybook/react'; import React, { useState } from 'react'; import { Button, - Cutout, List, ListItem, + ScrollView, Separator, Toolbar, Window, @@ -67,7 +67,7 @@ export function Flat() { return ( - +

When you want to use Buttons on a light background (like scrollable content), just use the flat variant: @@ -89,7 +89,7 @@ export function Flat() {

- + ); @@ -158,13 +158,13 @@ export function Thin() {
- + kiwi - + ); diff --git a/src/Checkbox/Checkbox.stories.tsx b/src/Checkbox/Checkbox.stories.tsx index 2d7d92ae..a594fba5 100644 --- a/src/Checkbox/Checkbox.stories.tsx +++ b/src/Checkbox/Checkbox.stories.tsx @@ -1,8 +1,15 @@ import React, { useState } from 'react'; import styled from 'styled-components'; -import { Checkbox, Fieldset, Cutout, List, ListItem, Separator } from 'react95'; import { ComponentMeta } from '@storybook/react'; +import { + Checkbox, + Fieldset, + List, + ListItem, + ScrollView, + Separator +} from 'react95'; const Wrapper = styled.div` background: ${({ theme }) => theme.material}; @@ -170,7 +177,7 @@ export function Flat() { }; return ( - +
- + ); } diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx index 3047d233..0fd52f9f 100644 --- a/src/Checkbox/Checkbox.tsx +++ b/src/Checkbox/Checkbox.tsx @@ -4,7 +4,7 @@ import styled, { css } from 'styled-components'; import { createHatchedBackground } from '../common'; import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled'; import { noOp } from '../common/utils'; -import { StyledCutout } from '../Cutout/Cutout'; +import { StyledScrollView } from '../ScrollView/ScrollView'; import { StyledListItem } from '../ListItem/ListItem'; import { LabelText, @@ -52,7 +52,7 @@ const sharedCheckboxStyles = css` justify-content: space-around; margin-right: 0.5rem; `; -const StyledCheckbox = styled(StyledCutout)` +const StyledCheckbox = styled(StyledScrollView)` ${sharedCheckboxStyles} width: ${size}px; height: ${size}px; diff --git a/src/ColorInput/ColorInput.stories.tsx b/src/ColorInput/ColorInput.stories.tsx index 5dc9aab8..5ec6a981 100644 --- a/src/ColorInput/ColorInput.stories.tsx +++ b/src/ColorInput/ColorInput.stories.tsx @@ -2,7 +2,7 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; import styled from 'styled-components'; -import { ColorInput, Cutout } from 'react95'; +import { ColorInput, ScrollView } from 'react95'; const Wrapper = styled.div` background: ${({ theme }) => theme.material}; @@ -50,7 +50,7 @@ Default.story = { export function Flat() { return ( - +
enabled: @@ -61,7 +61,7 @@ export function Flat() {
- + ); } diff --git a/src/Cutout/Cutout.mdx b/src/Cutout/Cutout.mdx deleted file mode 100644 index a29422ee..00000000 --- a/src/Cutout/Cutout.mdx +++ /dev/null @@ -1,43 +0,0 @@ ---- -name: Cutout -menu: Components ---- - -import { Cutout } from './Cutout'; -import Window from '../Window/Window'; -import WindowContent from '../WindowContent/WindowContent'; - -# Cutout - -## Usage - - - - - -

- React95 -

- - - - - -## API - -### Import - -``` -import { Cutout } from 'react95' -``` - -### Props - - diff --git a/src/Cutout/Cutout.spec.tsx b/src/Cutout/Cutout.spec.tsx deleted file mode 100644 index 08681f7e..00000000 --- a/src/Cutout/Cutout.spec.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { render } from '@testing-library/react'; -import React from 'react'; - -import { Cutout } from './Cutout'; - -describe('', () => { - it('should render cutout', () => { - const { container } = render(); - const cutout = container.firstElementChild; - - expect(cutout).toBeInTheDocument(); - }); - - it('should render custom styles', () => { - const { container } = render( - - ); - const cutout = container.firstElementChild; - - expect(cutout).toHaveAttribute('style', 'background-color: papayawhip;'); - }); - - it('should render children', async () => { - const { findByText } = render( - - Cool cutout - - ); - const content = await findByText(/cool cutout/i); - - expect(content).toBeInTheDocument(); - }); - - it('should render custom props', () => { - const customProps = { title: 'cutout' }; - const { container } = render(); - const cutout = container.firstElementChild; - - expect(cutout).toHaveAttribute('title', 'cutout'); - }); -}); diff --git a/src/DatePicker/DatePicker.tsx b/src/DatePicker/DatePicker.tsx index 4b4521c2..a49dcbc8 100644 --- a/src/DatePicker/DatePicker.tsx +++ b/src/DatePicker/DatePicker.tsx @@ -2,8 +2,8 @@ import React, { forwardRef, useCallback, useMemo, useState } from 'react'; import styled from 'styled-components'; import { Button } from '../Button/Button'; -import { Cutout } from '../Cutout/Cutout'; import { NumberField } from '../NumberField/NumberField'; +import { ScrollView } from '../ScrollView/ScrollView'; import { Select } from '../Select/Select'; import { SelectChangeEvent } from '../Select/Select.types'; import { Toolbar } from '../Toolbar/Toolbar'; @@ -19,7 +19,7 @@ type DatePickerProps = { shadow?: boolean; }; -const Calendar = styled(Cutout)` +const Calendar = styled(ScrollView)` width: 234px; margin: 1rem 0; background: ${({ theme }) => theme.canvas}; diff --git a/src/Desktop/Desktop.tsx b/src/Desktop/Desktop.tsx index 22541bb0..80d38465 100644 --- a/src/Desktop/Desktop.tsx +++ b/src/Desktop/Desktop.tsx @@ -1,7 +1,7 @@ import React, { forwardRef } from 'react'; import styled from 'styled-components'; -import { StyledCutout } from '../Cutout/Cutout'; +import { StyledScrollView } from '../ScrollView/ScrollView'; type DesktopProps = { backgroundStyles?: React.CSSProperties; @@ -56,7 +56,7 @@ const Monitor = styled.div` } `; -const Background = styled(StyledCutout).attrs(() => ({ +const Background = styled(StyledScrollView).attrs(() => ({ 'data-testid': 'background' }))` width: 100%; diff --git a/src/Fieldset/Fieldset.stories.tsx b/src/Fieldset/Fieldset.stories.tsx index 819fcafa..04a264c1 100644 --- a/src/Fieldset/Fieldset.stories.tsx +++ b/src/Fieldset/Fieldset.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta } from '@storybook/react'; import React, { useState } from 'react'; -import { Checkbox, Cutout, Fieldset, Window, WindowContent } from 'react95'; +import { Checkbox, Fieldset, ScrollView, Window, WindowContent } from 'react95'; import styled from 'styled-components'; const Wrapper = styled.div` @@ -44,7 +44,7 @@ export function Flat() { return ( -
@@ -60,7 +60,7 @@ export function Flat() { 😍
- + ); diff --git a/src/LoadingIndicator/LoadingIndicator.tsx b/src/LoadingIndicator/LoadingIndicator.tsx index 78457d71..d280f012 100644 --- a/src/LoadingIndicator/LoadingIndicator.tsx +++ b/src/LoadingIndicator/LoadingIndicator.tsx @@ -1,6 +1,6 @@ import React, { forwardRef } from 'react'; import styled, { css, keyframes } from 'styled-components'; -import { StyledCutout } from '../Cutout/Cutout'; +import { StyledScrollView } from '../ScrollView/ScrollView'; import { CommonStyledProps } from '../types'; type LoadingIndicatorProps = { @@ -14,7 +14,7 @@ const Wrapper = styled.div` height: 15px; width: 100%; `; -const ProgressCutout = styled(StyledCutout)` +const ProgressCutout = styled(StyledScrollView)` width: 100%; height: 100%; width: 100%; diff --git a/src/NumberField/NumberField.mdx b/src/NumberField/NumberField.mdx index eeba5ce1..5f1659be 100644 --- a/src/NumberField/NumberField.mdx +++ b/src/NumberField/NumberField.mdx @@ -4,7 +4,7 @@ menu: Components --- import { NumberField } from './NumberField'; -import { Cutout } from '../Cutout/Cutout'; +import { ScrollView } from '../ScrollView/ScrollView'; # NumberField @@ -51,7 +51,7 @@ import { Cutout } from '../Cutout/Cutout'; #### Flat - +

When you want to use NumberField on a light background (like scrollable content), just use the flat variant: @@ -62,7 +62,7 @@ import { Cutout } from '../Cutout/Cutout'; value={1991} onChange={value => console.log(value)} /> - + ## API diff --git a/src/NumberField/NumberField.stories.tsx b/src/NumberField/NumberField.stories.tsx index 84f5b93e..e3678880 100644 --- a/src/NumberField/NumberField.stories.tsx +++ b/src/NumberField/NumberField.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; -import { Cutout, NumberField } from 'react95'; +import { NumberField, ScrollView } from 'react95'; import styled from 'styled-components'; const Wrapper = styled.div` @@ -44,7 +44,7 @@ Default.story = { export function Flat() { return ( - +

When you want to use NumberField on a light background (like scrollable content), just use the flat variant: @@ -60,7 +60,7 @@ export function Flat() {
- + ); } diff --git a/src/Progress/Progress.tsx b/src/Progress/Progress.tsx index 79ea5cd7..323c9532 100644 --- a/src/Progress/Progress.tsx +++ b/src/Progress/Progress.tsx @@ -8,7 +8,7 @@ import React, { import styled, { css } from 'styled-components'; import { blockSizes } from '../common/system'; -import { StyledCutout } from '../Cutout/Cutout'; +import { StyledScrollView } from '../ScrollView/ScrollView'; import { CommonStyledProps } from '../types'; type ProgressProps = { @@ -24,7 +24,7 @@ const Wrapper = styled.div` height: ${blockSizes.md}; width: 100%; `; -const ProgressCutout = styled(StyledCutout)` +const ProgressCutout = styled(StyledScrollView)` width: 100%; height: 100%; width: 100%; diff --git a/src/Radio/Radio.stories.tsx b/src/Radio/Radio.stories.tsx index a48ac2ef..91ffec38 100644 --- a/src/Radio/Radio.stories.tsx +++ b/src/Radio/Radio.stories.tsx @@ -1,11 +1,11 @@ import { ComponentMeta } from '@storybook/react'; import React, { useState } from 'react'; import { - Cutout, Fieldset, List, ListItem, Radio, + ScrollView, Separator, Window, WindowContent @@ -90,7 +90,7 @@ export function Flat() { return ( - +

When you want to use radio buttons on a light background (like scrollable content), just use the flat variant: @@ -134,7 +134,7 @@ export function Flat() { disabled /> - + ); diff --git a/src/Radio/Radio.tsx b/src/Radio/Radio.tsx index b1bee405..9ff3ee0a 100644 --- a/src/Radio/Radio.tsx +++ b/src/Radio/Radio.tsx @@ -2,8 +2,8 @@ import React, { forwardRef } from 'react'; import styled, { css, CSSProperties } from 'styled-components'; import { createFlatBoxStyles } from '../common'; -import { StyledCutout } from '../Cutout/Cutout'; import { StyledListItem } from '../ListItem/ListItem'; +import { StyledScrollView } from '../ScrollView/ScrollView'; import { LabelText, size, @@ -44,7 +44,7 @@ type StyledCheckboxProps = { $disabled: boolean; }; -const StyledCheckbox = styled(StyledCutout)` +const StyledCheckbox = styled(StyledScrollView)` ${sharedCheckboxStyles} background: ${({ $disabled, theme }) => $disabled ? theme.material : theme.canvas}; diff --git a/src/ScrollView/ScrollView.spec.tsx b/src/ScrollView/ScrollView.spec.tsx new file mode 100644 index 00000000..71593cde --- /dev/null +++ b/src/ScrollView/ScrollView.spec.tsx @@ -0,0 +1,44 @@ +import { render } from '@testing-library/react'; +import React from 'react'; + +import { ScrollView } from './ScrollView'; + +describe('', () => { + it('should render scrollview', () => { + const { container } = render(); + const scrollView = container.firstElementChild; + + expect(scrollView).toBeInTheDocument(); + }); + + it('should render custom styles', () => { + const { container } = render( + + ); + const scrollView = container.firstElementChild; + + expect(scrollView).toHaveAttribute( + 'style', + 'background-color: papayawhip;' + ); + }); + + it('should render children', async () => { + const { findByText } = render( + + Cool ScrollView + + ); + const content = await findByText(/cool scrollview/i); + + expect(content).toBeInTheDocument(); + }); + + it('should render custom props', () => { + const customProps = { title: 'scrollview' }; + const { container } = render(); + const scrollView = container.firstElementChild; + + expect(scrollView).toHaveAttribute('title', 'scrollview'); + }); +}); diff --git a/src/Cutout/Cutout.stories.tsx b/src/ScrollView/ScrollView.stories.tsx similarity index 82% rename from src/Cutout/Cutout.stories.tsx rename to src/ScrollView/ScrollView.stories.tsx index 5dc2b909..4d7964b5 100644 --- a/src/Cutout/Cutout.stories.tsx +++ b/src/ScrollView/ScrollView.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; -import { Cutout, Window, WindowContent } from 'react95'; +import { ScrollView, Window, WindowContent } from 'react95'; import styled from 'styled-components'; const Wrapper = styled.div` @@ -9,16 +9,16 @@ const Wrapper = styled.div` `; export default { - title: 'Cutout', - component: Cutout, + title: 'Layout/ScrollView', + component: ScrollView, decorators: [story => {story()}] -} as ComponentMeta; +} as ComponentMeta; export function Default() { return ( - +

React95 is the best UI library ever created @@ -32,7 +32,7 @@ export function Default() {

React95 is the best UI library ever created

React95 is the best UI library ever created

- + ); diff --git a/src/Cutout/Cutout.tsx b/src/ScrollView/ScrollView.tsx similarity index 74% rename from src/Cutout/Cutout.tsx rename to src/ScrollView/ScrollView.tsx index 94c0ab7c..632ae1e3 100644 --- a/src/Cutout/Cutout.tsx +++ b/src/ScrollView/ScrollView.tsx @@ -3,13 +3,13 @@ import styled from 'styled-components'; import { insetShadow, createScrollbars } from '../common'; import { CommonStyledProps } from '../types'; -type CutoutProps = { +type ScrollViewProps = { children?: React.ReactNode; shadow?: boolean; } & React.HTMLAttributes & CommonStyledProps; -export const StyledCutout = styled.div>` +export const StyledScrollView = styled.div>` position: relative; box-sizing: border-box; padding: 2px; @@ -50,15 +50,16 @@ const Content = styled.div` ${createScrollbars()} `; -const Cutout = forwardRef(function Cutout( - { children, shadow = true, ...otherProps }, - ref -) { - return ( - - {children} - - ); -}); +const ScrollView = forwardRef( + ({ children, shadow = true, ...otherProps }, ref) => { + return ( + + {children} + + ); + } +); + +ScrollView.displayName = 'ScrollView'; -export { Cutout, CutoutProps }; +export { ScrollView, ScrollViewProps }; diff --git a/src/Select/Select.mdx b/src/Select/Select.mdx index 41086103..b4465bf9 100644 --- a/src/Select/Select.mdx +++ b/src/Select/Select.mdx @@ -4,9 +4,9 @@ menu: Components --- import { Select } from './Select'; -import Window from '../Window/Window'; -import WindowContent from '../WindowContent/WindowContent'; -import { Cutout } from '../Cutout/Cutout'; +import { ScrollView } from '../ScrollView/ScrollView'; +import { Window } from '../Window/Window'; +import { WindowContent } from '../WindowContent/WindowContent'; # Select @@ -98,7 +98,7 @@ import { Cutout } from '../Cutout/Cutout'; return ( -
- + ); diff --git a/src/Select/Select.stories.tsx b/src/Select/Select.stories.tsx index 3184100a..20e8381a 100644 --- a/src/Select/Select.stories.tsx +++ b/src/Select/Select.stories.tsx @@ -2,7 +2,7 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; -import { Cutout, Fieldset, Select, Window, WindowContent } from 'react95'; +import { Fieldset, ScrollView, Select, Window, WindowContent } from 'react95'; import styled from 'styled-components'; import { SelectChangeEvent, SelectOption } from './Select.types'; @@ -106,7 +106,7 @@ export function Flat() { return ( - +

When you want to use Select on a light background (like scrollable content), just use the flat variant: @@ -144,7 +144,7 @@ export function Flat() { options={options} /> - + ); diff --git a/src/Select/Select.styles.tsx b/src/Select/Select.styles.tsx index 6855df2f..c3e679ea 100644 --- a/src/Select/Select.styles.tsx +++ b/src/Select/Select.styles.tsx @@ -8,7 +8,7 @@ import { shadow as commonShadow } from '../common'; import { blockSizes } from '../common/system'; -import { StyledCutout } from '../Cutout/Cutout'; +import { StyledScrollView } from '../ScrollView/ScrollView'; import { CommonThemeProps } from '../types'; import { SelectVariants } from './Select.types'; @@ -66,7 +66,9 @@ const sharedWrapperStyles = css` cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')}; `; -export const StyledSelectWrapper = styled(StyledCutout)` +export const StyledSelectWrapper = styled( + StyledScrollView +)` ${sharedWrapperStyles} background: ${({ $disabled = false, theme }) => $disabled ? theme.material : theme.canvas}; diff --git a/src/Slider/Slider.stories.tsx b/src/Slider/Slider.stories.tsx index 6f1f453d..dd3fc8eb 100644 --- a/src/Slider/Slider.stories.tsx +++ b/src/Slider/Slider.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; -import { Cutout, Slider } from 'react95'; +import { ScrollView, Slider } from 'react95'; import styled from 'styled-components'; const Wrapper = styled.div` @@ -116,7 +116,7 @@ Default.story = { export function Flat() { return ( - +

When you want to add input field on a light background (like scrollable content), just use the flat variant: @@ -146,7 +146,7 @@ export function Flat() { { value: 6, label: '6°C' } ]} /> - + ); } diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx index 1f37168c..f1c6196a 100644 --- a/src/Slider/Slider.tsx +++ b/src/Slider/Slider.tsx @@ -20,7 +20,7 @@ import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontro import useForkRef from '../common/hooks/useForkRef'; import { useIsFocusVisible } from '../common/hooks/useIsFocusVisible'; import { clamp, getSize, roundValueToStep } from '../common/utils'; -import { StyledCutout } from '../Cutout/Cutout'; +import { StyledScrollView } from '../ScrollView/ScrollView'; import { CommonStyledProps } from '../types'; type SliderProps = { @@ -187,10 +187,10 @@ const sharedGrooveStyles = () => css` width: 100%; `} `; -const StyledGroove = styled(StyledCutout)` +const StyledGroove = styled(StyledScrollView)` ${sharedGrooveStyles()} `; -const StyledFlatGroove = styled(StyledCutout)` +const StyledFlatGroove = styled(StyledScrollView)` ${sharedGrooveStyles()} border-left-color: ${({ theme }) => theme.flatLight}; diff --git a/src/Table/Table.tsx b/src/Table/Table.tsx index 304cb0e2..b6ab5c9d 100644 --- a/src/Table/Table.tsx +++ b/src/Table/Table.tsx @@ -1,6 +1,6 @@ import React, { forwardRef } from 'react'; import styled from 'styled-components'; -import { StyledCutout } from '../Cutout/Cutout'; +import { StyledScrollView } from '../ScrollView/ScrollView'; import { CommonStyledProps } from '../types'; type TableProps = { @@ -16,7 +16,7 @@ const StyledTable = styled.table` font-size: 1rem; `; -const Wrapper = styled(StyledCutout)` +const Wrapper = styled(StyledScrollView)` &:before { box-shadow: none; } diff --git a/src/TextField/TextField.mdx b/src/TextField/TextField.mdx index 0ea168dd..b0a281bd 100644 --- a/src/TextField/TextField.mdx +++ b/src/TextField/TextField.mdx @@ -3,8 +3,8 @@ name: TextField menu: Components --- +import { ScrollView } from '../ScrollView/ScrollView'; import { TextField } from './TextField'; -import { Cutout } from '../Cutout/Cutout'; # TextField @@ -49,7 +49,7 @@ import { Cutout } from '../Cutout/Cutout'; #### Flat - +

When you want to add input field on a light background (like scrollable content), just use the flat variant: @@ -69,13 +69,13 @@ import { Cutout } from '../Cutout/Cutout'; onChange={e => console.log(e.target.value)} />

- + #### Flat disabled - +

When you want to add input field on a light background (like scrollable content), just use the flat variant: @@ -96,7 +96,7 @@ import { Cutout } from '../Cutout/Cutout'; disabled />

- + ## API diff --git a/src/TextField/TextField.stories.tsx b/src/TextField/TextField.stories.tsx index f9134231..6a715117 100644 --- a/src/TextField/TextField.stories.tsx +++ b/src/TextField/TextField.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta } from '@storybook/react'; import React, { useState } from 'react'; -import { Button, Cutout, TextField } from 'react95'; +import { Button, ScrollView, TextField } from 'react95'; import styled from 'styled-components'; const loremIpsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin, ante vel porttitor posuere, tellus nisi interdum ipsum, non bibendum ante risus ut purus. Curabitur vel posuere odio. Vivamus rutrum, nunc et ullamcorper sagittis, tellus ligula maximus quam, id dapibus sapien metus lobortis diam. Proin luctus, dolor in finibus feugiat, lacus enim gravida sem, quis aliquet tellus leo nec enim. Morbi varius bibendum augue quis venenatis. Curabitur ut elit augue. Pellentesque posuere enim a mattis interdum. Donec sodales convallis turpis, a vulputate elit. Suspendisse potenti.`; @@ -68,7 +68,7 @@ Default.story = { export function Flat() { return ( - +

When you want to add input field on a light background (like scrollable content), just use the flat variant: @@ -110,7 +110,7 @@ export function Flat() { onChange={onChange} fullWidth /> - + ); } diff --git a/src/TextField/TextField.tsx b/src/TextField/TextField.tsx index 8014c57f..37ee1511 100644 --- a/src/TextField/TextField.tsx +++ b/src/TextField/TextField.tsx @@ -7,7 +7,7 @@ import { } from '../common'; import { blockSizes } from '../common/system'; import { noOp } from '../common/utils'; -import { StyledCutout } from '../Cutout/Cutout'; +import { StyledScrollView } from '../ScrollView/ScrollView'; import { CommonStyledProps, CommonThemeProps } from '../types'; type TextFieldInputProps = { @@ -49,7 +49,7 @@ const sharedWrapperStyles = css` min-height: ${blockSizes.md}; `; -const Wrapper = styled(StyledCutout).attrs({ +const Wrapper = styled(StyledScrollView).attrs({ 'data-testid': 'variant-default' })` ${sharedWrapperStyles} diff --git a/src/index.ts b/src/index.ts index 61da4ffb..662d8d20 100644 --- a/src/index.ts +++ b/src/index.ts @@ -10,7 +10,6 @@ export * from './Button/Button'; export * from './Checkbox/Checkbox'; export * from './ColorInput/ColorInput'; export * from './Counter/Counter'; -export * from './Cutout/Cutout'; export * from './DatePicker/DatePicker'; export * from './Desktop/Desktop'; export * from './Fieldset/Fieldset'; @@ -23,6 +22,7 @@ export * from './NumberField/NumberField'; export * from './Panel/Panel'; export * from './Progress/Progress'; export * from './Radio/Radio'; +export * from './ScrollView/ScrollView'; export * from './Select/Select'; export * from './Separator/Separator'; export * from './Slider/Slider'; @@ -45,4 +45,5 @@ export * from './WindowHeader/WindowHeader'; /* deprecated components */ export * from './legacy/Bar'; -export * from './legacy/Separator'; +export * from './legacy/Cutout'; +export * from './legacy/Divider'; diff --git a/src/legacy/Cutout.tsx b/src/legacy/Cutout.tsx new file mode 100644 index 00000000..a7d9aaf2 --- /dev/null +++ b/src/legacy/Cutout.tsx @@ -0,0 +1,7 @@ +import { ScrollView, ScrollViewProps } from '../ScrollView/ScrollView'; + +/** @deprecated Use `ScrollViewProps` */ +export type CutoutProps = ScrollViewProps; + +/** @deprecated Use `ScrollView` */ +export const Cutout = ScrollView; From e06e60191b23bedbb08491986be156f49e4d7154 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 31 Jul 2022 07:59:32 -0400 Subject: [PATCH 061/100] refactor(monitor): categorize under Other, rename Desktop to Monitor --- src/Desktop/Desktop.mdx | 22 ----------- .../Monitor.spec.tsx} | 20 +++++----- .../Monitor.stories.tsx} | 10 ++--- .../Desktop.tsx => Monitor/Monitor.tsx} | 37 ++++++++++--------- src/index.ts | 3 +- src/legacy/Desktop.tsx | 7 ++++ 6 files changed, 43 insertions(+), 56 deletions(-) delete mode 100644 src/Desktop/Desktop.mdx rename src/{Desktop/Desktop.spec.tsx => Monitor/Monitor.spec.tsx} (61%) rename src/{Desktop/Desktop.stories.tsx => Monitor/Monitor.stories.tsx} (66%) rename src/{Desktop/Desktop.tsx => Monitor/Monitor.tsx} (84%) create mode 100644 src/legacy/Desktop.tsx diff --git a/src/Desktop/Desktop.mdx b/src/Desktop/Desktop.mdx deleted file mode 100644 index a34d2aad..00000000 --- a/src/Desktop/Desktop.mdx +++ /dev/null @@ -1,22 +0,0 @@ ---- -name: Desktop -menu: Components ---- - -import { Desktop } from '../Desktop/Desktop'; - -# Desktop - -## Usage - - - - - -## API - -### Import - -### Props - - diff --git a/src/Desktop/Desktop.spec.tsx b/src/Monitor/Monitor.spec.tsx similarity index 61% rename from src/Desktop/Desktop.spec.tsx rename to src/Monitor/Monitor.spec.tsx index c7e239e0..43f01b08 100644 --- a/src/Desktop/Desktop.spec.tsx +++ b/src/Monitor/Monitor.spec.tsx @@ -2,30 +2,30 @@ import React from 'react'; import { renderWithTheme } from '../../test/utils'; -import { Desktop } from './Desktop'; +import { Monitor } from './Monitor'; -describe('', () => { +describe('', () => { it('should render', () => { - const { container } = renderWithTheme(); - const desktopElement = container.firstElementChild; + const { container } = renderWithTheme(); + const monitorElement = container.firstElementChild; - expect(desktopElement).toBeInTheDocument(); + expect(monitorElement).toBeInTheDocument(); }); it('should handle custom props', () => { const customProps: React.HTMLAttributes = { title: 'potatoe' }; - const { container } = renderWithTheme(); - const desktopElement = container.firstElementChild; + const { container } = renderWithTheme(); + const monitorElement = container.firstElementChild; - expect(desktopElement).toHaveAttribute('title', 'potatoe'); + expect(monitorElement).toHaveAttribute('title', 'potatoe'); }); describe('prop: backgroundStyles', () => { it('should forward styles to background element', () => { const { getByTestId } = renderWithTheme( - + ); const backgroundElement = getByTestId('background'); @@ -38,7 +38,7 @@ describe('', () => { describe('prop: children', () => { it('children should be rendered in background element', () => { - const { getByTestId } = renderWithTheme(Hi!); + const { getByTestId } = renderWithTheme(Hi!); const backgroundElement = getByTestId('background'); expect(backgroundElement.innerHTML).toBe('Hi!'); diff --git a/src/Desktop/Desktop.stories.tsx b/src/Monitor/Monitor.stories.tsx similarity index 66% rename from src/Desktop/Desktop.stories.tsx rename to src/Monitor/Monitor.stories.tsx index dfaa324f..2e3394fd 100644 --- a/src/Desktop/Desktop.stories.tsx +++ b/src/Monitor/Monitor.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; -import { Desktop } from 'react95'; +import { Monitor } from 'react95'; import styled from 'styled-components'; const Wrapper = styled.div` @@ -9,13 +9,13 @@ const Wrapper = styled.div` `; export default { - title: 'Desktop', - component: Desktop, + title: 'Other/Monitor', + component: Monitor, decorators: [story => {story()}] -} as ComponentMeta; +} as ComponentMeta; export function Default() { - return ; + return ; } Default.story = { diff --git a/src/Desktop/Desktop.tsx b/src/Monitor/Monitor.tsx similarity index 84% rename from src/Desktop/Desktop.tsx rename to src/Monitor/Monitor.tsx index 80d38465..8abfa45e 100644 --- a/src/Desktop/Desktop.tsx +++ b/src/Monitor/Monitor.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { StyledScrollView } from '../ScrollView/ScrollView'; -type DesktopProps = { +type MonitorProps = { backgroundStyles?: React.CSSProperties; children?: React.ReactNode; }; @@ -18,7 +18,7 @@ const Inner = styled.div` position: relative; `; -const Monitor = styled.div` +const MonitorBody = styled.div` position: relative; z-index: 1; box-sizing: border-box; @@ -106,20 +106,21 @@ const Stand = styled.div` } `; -const Desktop = forwardRef(function Desktop( - { backgroundStyles, children, ...otherProps }, - ref -) { - return ( - - - - {children} - - - - - ); -}); +const Monitor = forwardRef( + ({ backgroundStyles, children, ...otherProps }, ref) => { + return ( + + + + {children} + + + + + ); + } +); + +Monitor.displayName = 'Monitor'; -export { Desktop, DesktopProps }; +export { Monitor, MonitorProps }; diff --git a/src/index.ts b/src/index.ts index 662d8d20..50d66285 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,13 +11,13 @@ export * from './Checkbox/Checkbox'; export * from './ColorInput/ColorInput'; export * from './Counter/Counter'; export * from './DatePicker/DatePicker'; -export * from './Desktop/Desktop'; export * from './Fieldset/Fieldset'; export * from './Handle/Handle'; export * from './Hourglass/Hourglass'; export * from './List/List'; export * from './ListItem/ListItem'; export * from './LoadingIndicator/LoadingIndicator'; +export * from './Monitor/Monitor'; export * from './NumberField/NumberField'; export * from './Panel/Panel'; export * from './Progress/Progress'; @@ -46,4 +46,5 @@ export * from './WindowHeader/WindowHeader'; /* deprecated components */ export * from './legacy/Bar'; export * from './legacy/Cutout'; +export * from './legacy/Desktop'; export * from './legacy/Divider'; diff --git a/src/legacy/Desktop.tsx b/src/legacy/Desktop.tsx new file mode 100644 index 00000000..83069def --- /dev/null +++ b/src/legacy/Desktop.tsx @@ -0,0 +1,7 @@ +import { Monitor, MonitorProps } from '../Monitor/Monitor'; + +/** @deprecated Use `MonitorProps` */ +export type DesktopProps = MonitorProps; + +/** @deprecated Use `Monitor` */ +export const Desktop = Monitor; From 276bdd48e418501c7526bec10aa132e058399b72 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 31 Jul 2022 08:01:26 -0400 Subject: [PATCH 062/100] refactor(groupbox): categorize under Controls, rename Fieldset to GroupBox --- src/Checkbox/Checkbox.stories.tsx | 10 +- src/Fieldset/Fieldset.mdx | 103 ------------------ src/Fieldset/Fieldset.spec.tsx | 53 --------- src/GroupBox/GroupBox.spec.tsx | 53 +++++++++ .../GroupBox.stories.tsx} | 28 ++--- .../Fieldset.tsx => GroupBox/GroupBox.tsx} | 16 +-- src/Radio/Radio.stories.tsx | 10 +- src/Select/Select.stories.tsx | 18 +-- src/Tabs/Tabs.stories.tsx | 6 +- src/Tree/Tree.stories.tsx | 18 +-- src/index.ts | 3 +- src/legacy/Fieldset.tsx | 7 ++ 12 files changed, 116 insertions(+), 209 deletions(-) delete mode 100644 src/Fieldset/Fieldset.mdx delete mode 100644 src/Fieldset/Fieldset.spec.tsx create mode 100644 src/GroupBox/GroupBox.spec.tsx rename src/{Fieldset/Fieldset.stories.tsx => GroupBox/GroupBox.stories.tsx} (79%) rename src/{Fieldset/Fieldset.tsx => GroupBox/GroupBox.tsx} (84%) create mode 100644 src/legacy/Fieldset.tsx diff --git a/src/Checkbox/Checkbox.stories.tsx b/src/Checkbox/Checkbox.stories.tsx index a594fba5..75fb1734 100644 --- a/src/Checkbox/Checkbox.stories.tsx +++ b/src/Checkbox/Checkbox.stories.tsx @@ -4,7 +4,7 @@ import styled from 'styled-components'; import { ComponentMeta } from '@storybook/react'; import { Checkbox, - Fieldset, + GroupBox, List, ListItem, ScrollView, @@ -78,7 +78,7 @@ export function Default() { return (

-
+
- +
-
+
- + - - -
- Some content here - - 😍 - -
- - - - -#### With label - - - - -
- Some content here - - 😍 - -
- - - - -#### Flat - - - {() => { - const [enabled, setEnabled] = React.useState(false) - return ( - - - - <> -

- When you want to use Fieldset on a light background (like scrollable - content), just use the flat variant: -

-
-
setEnabled(!enabled)} - /> - } - disabled={!enabled} - > - <> - Some content here - - 😍 - - -
-
- - - - - ); - }} - - -## API - -### Import - -``` -import { Fieldset } from 'react95' -``` - -### Props - - diff --git a/src/Fieldset/Fieldset.spec.tsx b/src/Fieldset/Fieldset.spec.tsx deleted file mode 100644 index da7a64e7..00000000 --- a/src/Fieldset/Fieldset.spec.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; - -import { renderWithTheme, theme } from '../../test/utils'; - -import { Fieldset } from './Fieldset'; - -describe('
', () => { - it('renders Fieldset', () => { - const { container } = renderWithTheme(
); - const fieldset = container.firstChild as HTMLFieldSetElement; - - expect(fieldset).toBeInTheDocument(); - }); - it('renders children', () => { - const textContent = 'Hi there!'; - const { getByText } = renderWithTheme( -
- {textContent} -
- ); - expect(getByText(textContent)).toBeInTheDocument(); - }); - - describe('prop: label', () => { - it('renders Label', () => { - const labelText = 'Name:'; - const { container } = renderWithTheme(
); - const fieldset = container.firstChild as HTMLFieldSetElement; - const legend = fieldset.querySelector('legend'); - expect(legend?.textContent).toBe(labelText); - }); - it('when not provided, element is not rendered', () => { - const { container } = renderWithTheme(
); - const fieldset = container.firstChild as HTMLFieldSetElement; - const legend = fieldset.querySelector('legend'); - expect(legend).not.toBeInTheDocument(); - }); - }); - describe('prop: disabled', () => { - it('renders with disabled text content', () => { - const { container } = renderWithTheme(
); - const fieldset = container.firstChild as HTMLFieldSetElement; - - expect(fieldset).toHaveAttribute('aria-disabled', 'true'); - - expect(fieldset).toHaveStyleRule('color', theme.materialTextDisabled); - expect(fieldset).toHaveStyleRule( - 'text-shadow', - `1px 1px ${theme.materialTextDisabledShadow}` - ); - }); - }); -}); diff --git a/src/GroupBox/GroupBox.spec.tsx b/src/GroupBox/GroupBox.spec.tsx new file mode 100644 index 00000000..168c58ad --- /dev/null +++ b/src/GroupBox/GroupBox.spec.tsx @@ -0,0 +1,53 @@ +import React from 'react'; + +import { renderWithTheme, theme } from '../../test/utils'; + +import { GroupBox } from './GroupBox'; + +describe('', () => { + it('renders GroupBox', () => { + const { container } = renderWithTheme(); + const groupBox = container.firstChild as HTMLFieldSetElement; + + expect(groupBox).toBeInTheDocument(); + }); + it('renders children', () => { + const textContent = 'Hi there!'; + const { getByText } = renderWithTheme( + + {textContent} + + ); + expect(getByText(textContent)).toBeInTheDocument(); + }); + + describe('prop: label', () => { + it('renders Label', () => { + const labelText = 'Name:'; + const { container } = renderWithTheme(); + const groupBox = container.firstChild as HTMLFieldSetElement; + const legend = groupBox.querySelector('legend'); + expect(legend?.textContent).toBe(labelText); + }); + it('when not provided, element is not rendered', () => { + const { container } = renderWithTheme(); + const groupBox = container.firstChild as HTMLFieldSetElement; + const legend = groupBox.querySelector('legend'); + expect(legend).not.toBeInTheDocument(); + }); + }); + describe('prop: disabled', () => { + it('renders with disabled text content', () => { + const { container } = renderWithTheme(); + const groupBox = container.firstChild as HTMLFieldSetElement; + + expect(groupBox).toHaveAttribute('aria-disabled', 'true'); + + expect(groupBox).toHaveStyleRule('color', theme.materialTextDisabled); + expect(groupBox).toHaveStyleRule( + 'text-shadow', + `1px 1px ${theme.materialTextDisabledShadow}` + ); + }); + }); +}); diff --git a/src/Fieldset/Fieldset.stories.tsx b/src/GroupBox/GroupBox.stories.tsx similarity index 79% rename from src/Fieldset/Fieldset.stories.tsx rename to src/GroupBox/GroupBox.stories.tsx index 04a264c1..0cba694b 100644 --- a/src/Fieldset/Fieldset.stories.tsx +++ b/src/GroupBox/GroupBox.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta } from '@storybook/react'; import React, { useState } from 'react'; -import { Checkbox, Fieldset, ScrollView, Window, WindowContent } from 'react95'; +import { Checkbox, GroupBox, ScrollView, Window, WindowContent } from 'react95'; import styled from 'styled-components'; const Wrapper = styled.div` @@ -9,28 +9,28 @@ const Wrapper = styled.div` `; export default { - title: 'Fieldset', - component: Fieldset, + title: 'Controls/GroupBox', + component: GroupBox, decorators: [story => {story()}] -} as ComponentMeta; +} as ComponentMeta; export function Default() { return ( -
+ Some content here 😍 -
+
-
+ Some content here 😍 -
+ ); @@ -47,19 +47,19 @@ export function Flat() { -
+ Some content here 😍 -
+
-
+ Some content here 😍 -
+ @@ -75,7 +75,7 @@ export function ToggleExample() { return ( -
😍 -
+ ); diff --git a/src/Fieldset/Fieldset.tsx b/src/GroupBox/GroupBox.tsx similarity index 84% rename from src/Fieldset/Fieldset.tsx rename to src/GroupBox/GroupBox.tsx index 05ff72b4..a2d381c5 100644 --- a/src/Fieldset/Fieldset.tsx +++ b/src/GroupBox/GroupBox.tsx @@ -3,7 +3,7 @@ import styled, { css } from 'styled-components'; import { createDisabledTextStyles } from '../common'; import { CommonStyledProps } from '../types'; -type FieldsetProps = { +type GroupBoxProps = { label?: React.ReactNode; children?: React.ReactNode; disabled?: boolean; @@ -12,7 +12,7 @@ type FieldsetProps = { CommonStyledProps; const StyledFieldset = styled.fieldset< - Pick & { $disabled: boolean } + Pick & { $disabled: boolean } >` position: relative; border: 2px solid @@ -31,7 +31,7 @@ const StyledFieldset = styled.fieldset< ${props => props.$disabled && createDisabledTextStyles()} `; -const StyledLegend = styled.legend>` +const StyledLegend = styled.legend>` display: flex; position: absolute; top: 0; @@ -44,11 +44,11 @@ const StyledLegend = styled.legend>` variant === 'flat' ? theme.canvas : theme.material}; `; -const Fieldset = forwardRef( - function Fieldset( +const GroupBox = forwardRef( + ( { label, disabled = false, variant = 'default', children, ...otherProps }, ref - ) { + ) => { return ( ( } ); -export { Fieldset, FieldsetProps }; +GroupBox.displayName = 'GroupBox'; + +export { GroupBox, GroupBoxProps }; diff --git a/src/Radio/Radio.stories.tsx b/src/Radio/Radio.stories.tsx index 91ffec38..25c4e36b 100644 --- a/src/Radio/Radio.stories.tsx +++ b/src/Radio/Radio.stories.tsx @@ -1,7 +1,7 @@ import { ComponentMeta } from '@storybook/react'; import React, { useState } from 'react'; import { - Fieldset, + GroupBox, List, ListItem, Radio, @@ -39,7 +39,7 @@ export function Default() { return ( -
+ -
+ ); @@ -96,7 +96,7 @@ export function Flat() { scrollable content), just use the flat variant:

-
+ -
+ diff --git a/src/Select/Select.stories.tsx b/src/Select/Select.stories.tsx index 20e8381a..29946074 100644 --- a/src/Select/Select.stories.tsx +++ b/src/Select/Select.stories.tsx @@ -2,7 +2,7 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; -import { Fieldset, ScrollView, Select, Window, WindowContent } from 'react95'; +import { GroupBox, ScrollView, Select, Window, WindowContent } from 'react95'; import styled from 'styled-components'; import { SelectChangeEvent, SelectOption } from './Select.types'; @@ -51,7 +51,7 @@ export default { export function Default() { return (
-
+ -
+
); } @@ -111,7 +111,7 @@ export function Flat() { When you want to use Select on a light background (like scrollable content), just use the flat variant:

-
+ -
+ diff --git a/src/Tabs/Tabs.stories.tsx b/src/Tabs/Tabs.stories.tsx index 5ba196d3..a910639e 100644 --- a/src/Tabs/Tabs.stories.tsx +++ b/src/Tabs/Tabs.stories.tsx @@ -3,7 +3,7 @@ import React, { useState } from 'react'; import { Anchor, Checkbox, - Fieldset, + GroupBox, NumberField, Tab, TabBody, @@ -49,7 +49,7 @@ export function Default() { {activeTab === 0 && (
-
+
Amount:

@@ -60,7 +60,7 @@ export function Default() { onChange={() => null} defaultChecked /> -
+
)} {activeTab === 1 && ( diff --git a/src/Tree/Tree.stories.tsx b/src/Tree/Tree.stories.tsx index 011214b5..c5e64250 100644 --- a/src/Tree/Tree.stories.tsx +++ b/src/Tree/Tree.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta } from '@storybook/react'; import React, { useCallback, useState } from 'react'; -import { Fieldset, Tree, TreeLeaf } from 'react95'; +import { GroupBox, Tree, TreeLeaf } from 'react95'; import styled from 'styled-components'; import { Button } from '../Button/Button'; @@ -97,9 +97,9 @@ categories.forEach(getIds); export function Basic() { return (
-
+ -
+
); } @@ -124,7 +124,7 @@ export function Controlled() { -
+ setSelected(id)} @@ -132,7 +132,7 @@ export function Controlled() { expanded={expanded} selected={selected} /> -
+
); } @@ -144,9 +144,9 @@ Controlled.story = { export function Disabled() { return (
-
+ -
+
); } @@ -167,9 +167,9 @@ export function DisabledTreeItems() { return (
-
+ -
+
); } diff --git a/src/index.ts b/src/index.ts index 50d66285..13c523ac 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,7 +11,7 @@ export * from './Checkbox/Checkbox'; export * from './ColorInput/ColorInput'; export * from './Counter/Counter'; export * from './DatePicker/DatePicker'; -export * from './Fieldset/Fieldset'; +export * from './GroupBox/GroupBox'; export * from './Handle/Handle'; export * from './Hourglass/Hourglass'; export * from './List/List'; @@ -48,3 +48,4 @@ export * from './legacy/Bar'; export * from './legacy/Cutout'; export * from './legacy/Desktop'; export * from './legacy/Divider'; +export * from './legacy/Fieldset'; diff --git a/src/legacy/Fieldset.tsx b/src/legacy/Fieldset.tsx new file mode 100644 index 00000000..68a025f9 --- /dev/null +++ b/src/legacy/Fieldset.tsx @@ -0,0 +1,7 @@ +import { GroupBox, GroupBoxProps } from '../GroupBox/GroupBox'; + +/** @deprecated Use `GroupBoxProps` */ +export type FieldsetProps = GroupBoxProps; + +/** @deprecated Use `GroupBox` */ +export const Fieldset = GroupBox; From ce0b2cd4a7ccb4c1d9440b279a62ef5977a42c7f Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 31 Jul 2022 08:03:46 -0400 Subject: [PATCH 063/100] docs(hourglass): categorize under Other --- src/Hourglass/Hourglass.mdx | 26 -------------------------- src/Hourglass/Hourglass.stories.tsx | 2 +- src/Hourglass/Hourglass.tsx | 4 +++- 3 files changed, 4 insertions(+), 28 deletions(-) delete mode 100644 src/Hourglass/Hourglass.mdx diff --git a/src/Hourglass/Hourglass.mdx b/src/Hourglass/Hourglass.mdx deleted file mode 100644 index e4ca81be..00000000 --- a/src/Hourglass/Hourglass.mdx +++ /dev/null @@ -1,26 +0,0 @@ ---- -name: Hourglass -menu: Components ---- - -import { Hourglass } from './Hourglass'; - -# Hourglass - -## Usage - - - - - -## API - -### Import - -``` -import { Hourglass } from 'react95' -``` - -### Props - - diff --git a/src/Hourglass/Hourglass.stories.tsx b/src/Hourglass/Hourglass.stories.tsx index 8657f775..14c73c31 100644 --- a/src/Hourglass/Hourglass.stories.tsx +++ b/src/Hourglass/Hourglass.stories.tsx @@ -9,7 +9,7 @@ const Wrapper = styled.div` `; export default { - title: 'Hourglass', + title: 'Other/Hourglass', component: Hourglass, decorators: [story => {story()}] } as ComponentMeta; diff --git a/src/Hourglass/Hourglass.tsx b/src/Hourglass/Hourglass.tsx index d20ae4f7..807bc28d 100644 --- a/src/Hourglass/Hourglass.tsx +++ b/src/Hourglass/Hourglass.tsx @@ -22,7 +22,7 @@ const StyledHourglass = styled.span` `; const Hourglass = forwardRef( - function Hourglass({ size = 30, ...otherProps }, ref) { + ({ size = 30, ...otherProps }, ref) => { return ( @@ -31,4 +31,6 @@ const Hourglass = forwardRef( } ); +Hourglass.displayName = 'Hourglass'; + export { Hourglass, HourglassProps }; From e2e0d227fc6a77bd49127b084c3a0710eca2792b Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 31 Jul 2022 08:11:22 -0400 Subject: [PATCH 064/100] refactor(menulist): categorize under Controls, rename List to MenuList --- README.md | 12 +- docs/Getting-Started.stories.mdx | 12 +- src/AppBar/AppBar.stories.tsx | 20 ++-- src/Button/Button.stories.tsx | 20 ++-- src/Checkbox/Checkbox.stories.tsx | 20 ++-- src/Checkbox/Checkbox.tsx | 6 +- src/List/List.mdx | 69 ------------ src/List/List.spec.tsx | 47 -------- src/ListItem/ListItem.mdx | 104 ------------------ src/ListItem/ListItem.spec.tsx | 92 ---------------- src/MenuList/MenuList.spec.tsx | 47 ++++++++ .../MenuList.stories.tsx} | 69 ++++++------ src/{List/List.tsx => MenuList/MenuList.tsx} | 12 +- src/MenuList/MenuListItem.spec.tsx | 92 ++++++++++++++++ .../MenuListItem.tsx} | 78 ++++++------- src/Radio/Radio.stories.tsx | 24 ++-- src/Radio/Radio.tsx | 4 +- src/Separator/Separator.stories.tsx | 22 ++-- src/SwitchBase/SwitchBase.ts | 8 +- src/index.ts | 5 +- src/legacy/List.tsx | 7 ++ src/legacy/ListItem.tsx | 14 +++ 22 files changed, 320 insertions(+), 464 deletions(-) delete mode 100644 src/List/List.mdx delete mode 100644 src/List/List.spec.tsx delete mode 100644 src/ListItem/ListItem.mdx delete mode 100644 src/ListItem/ListItem.spec.tsx create mode 100644 src/MenuList/MenuList.spec.tsx rename src/{List/List.stories.tsx => MenuList/MenuList.stories.tsx} (50%) rename src/{List/List.tsx => MenuList/MenuList.tsx} (72%) create mode 100644 src/MenuList/MenuListItem.spec.tsx rename src/{ListItem/ListItem.tsx => MenuList/MenuListItem.tsx} (59%) create mode 100644 src/legacy/List.tsx create mode 100644 src/legacy/ListItem.tsx diff --git a/README.md b/README.md index 18821cb9..ebb747d9 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ Apply style reset, wrap your app with ThemeProvider with theme of your choice... import React from 'react'; import { createGlobalStyle, ThemeProvider } from 'styled-components'; -import { List, ListItem, Separator, styleReset } from 'react95'; +import { MenuList, MenuListItem, Separator, styleReset } from 'react95'; // pick a theme of your choice import original from 'react95/dist/themes/original'; // original Windows95 font (optionally) @@ -72,12 +72,12 @@ const App = () => (
- - 🎤 Sing - 💃🏻 Dance + + 🎤 Sing + 💃🏻 Dance - 😴 Sleep - + 😴 Sleep +
); diff --git a/docs/Getting-Started.stories.mdx b/docs/Getting-Started.stories.mdx index bc243bd1..56cd9d8b 100644 --- a/docs/Getting-Started.stories.mdx +++ b/docs/Getting-Started.stories.mdx @@ -29,7 +29,7 @@ choice... and you are ready to go! 🚀 ```jsx import React from 'react'; -import { List, ListItem, Separator, styleReset } from 'react95'; +import { MenuList, MenuListItem, Separator, styleReset } from 'react95'; import { createGlobalStyle, ThemeProvider } from 'styled-components'; /* Pick a theme of your choice */ @@ -62,12 +62,12 @@ const App = () => (
- - 🎤 Sing - 💃🏻 Dance + + 🎤 Sing + 💃🏻 Dance - 😴 Sleep - + 😴 Sleep +
); diff --git a/src/AppBar/AppBar.stories.tsx b/src/AppBar/AppBar.stories.tsx index ecc73757..6e75a732 100644 --- a/src/AppBar/AppBar.stories.tsx +++ b/src/AppBar/AppBar.stories.tsx @@ -3,8 +3,8 @@ import React, { useState } from 'react'; import { AppBar, Button, - List, - ListItem, + MenuList, + MenuListItem, Separator, TextField, Toolbar @@ -43,7 +43,7 @@ export function Default() { Start {open && ( - setOpen(false)} > - + 👨‍💻 Profile - - + + 📁 My account - + - + 🔙 Logout - - + + )}
diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 8d299d79..a952fc24 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -2,8 +2,8 @@ import { ComponentMeta } from '@storybook/react'; import React, { useState } from 'react'; import { Button, - List, - ListItem, + MenuList, + MenuListItem, ScrollView, Separator, Toolbar, @@ -135,7 +135,7 @@ export function Thin() { Share {open && ( - setOpen(false)} > - Copy link + Copy link - Facebook - Twitter - Instagram + Facebook + Twitter + Instagram - + MySpace - - + + )}
diff --git a/src/Checkbox/Checkbox.stories.tsx b/src/Checkbox/Checkbox.stories.tsx index 75fb1734..b03326dc 100644 --- a/src/Checkbox/Checkbox.stories.tsx +++ b/src/Checkbox/Checkbox.stories.tsx @@ -5,8 +5,8 @@ import { ComponentMeta } from '@storybook/react'; import { Checkbox, GroupBox, - List, - ListItem, + MenuList, + MenuListItem, ScrollView, Separator } from 'react95'; @@ -240,8 +240,8 @@ Flat.story = { export function Menu() { return ( - - + + - - + + - + - + - - + + ); } diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx index 0fd52f9f..c630dc9d 100644 --- a/src/Checkbox/Checkbox.tsx +++ b/src/Checkbox/Checkbox.tsx @@ -4,8 +4,8 @@ import styled, { css } from 'styled-components'; import { createHatchedBackground } from '../common'; import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled'; import { noOp } from '../common/utils'; +import { StyledMenuListItem } from '../MenuList/MenuList'; import { StyledScrollView } from '../ScrollView/ScrollView'; -import { StyledListItem } from '../ListItem/ListItem'; import { LabelText, size, @@ -129,7 +129,7 @@ const CheckmarkIcon = styled.span.attrs(() => ({ ? theme.checkmarkDisabled : theme.checkmark}; `} - ${StyledListItem}:hover & { + ${StyledMenuListItem}:hover & { ${({ $disabled, theme, variant }) => !$disabled && variant === 'menu' && @@ -170,7 +170,7 @@ const IndeterminateIcon = styled.span.attrs(() => ({ ${({ $disabled, theme, variant }) => variant === 'menu' && css` - ${StyledListItem}:hover & { + ${StyledMenuListItem}:hover & { ${createHatchedBackground({ mainColor: theme.materialTextInvert })} diff --git a/src/List/List.mdx b/src/List/List.mdx deleted file mode 100644 index b3d8546a..00000000 --- a/src/List/List.mdx +++ /dev/null @@ -1,69 +0,0 @@ ---- -name: List -menu: Components ---- - -import { List } from './List'; -import { ListItem } from '../ListItem/ListItem'; - -# List - -## Usage - -#### Default - - - - Photos - Videos - Other - - - -#### Inline - - - - - - 🌿 - - - - Tackle - Growl - Razor Leaf - - - -#### No shadow - - - - Photos - Videos - Other - - - -#### Full width - - - - Photos - Videos - Other - - - -## API - -### Import - -``` -import { List } from 'react95' -``` - -### Props - - diff --git a/src/List/List.spec.tsx b/src/List/List.spec.tsx deleted file mode 100644 index 48943d95..00000000 --- a/src/List/List.spec.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; - -import { renderWithTheme } from '../../test/utils'; - -import { List } from './List'; - -describe('', () => { - it('renders List', () => { - const { container } = renderWithTheme(); - const list = container.firstElementChild; - - expect(list).toBeInTheDocument(); - }); - it('is an ul', () => { - const { container } = renderWithTheme(); - const list = container.firstElementChild; - - expect(list?.tagName).toBe('UL'); - }); - it('renders children', () => { - const textContent = 'Hi there!'; - const { getByText } = renderWithTheme( - - {textContent} - - ); - expect(getByText(textContent)).toBeInTheDocument(); - }); - - describe('prop: inline', () => { - it('renders inline', () => { - const { container } = renderWithTheme(); - const list = container.firstElementChild; - - expect(list).toHaveStyleRule('display', 'inline-flex'); - expect(list).toHaveStyleRule('align-items', 'center'); - }); - }); - describe('prop: fullWidth', () => { - it('has 100% width', () => { - const { container } = renderWithTheme(); - const list = container.firstElementChild; - - expect(list).toHaveStyleRule('width', '100%'); - }); - }); -}); diff --git a/src/ListItem/ListItem.mdx b/src/ListItem/ListItem.mdx deleted file mode 100644 index 7f398f56..00000000 --- a/src/ListItem/ListItem.mdx +++ /dev/null @@ -1,104 +0,0 @@ ---- -name: ListItem -menu: Components ---- - -import ListItem from './ListItem'; -import List from '../List/List'; -import Divider from '../Divider/Divider'; - -# ListItem - -## Usage - -#### Default - - - - Item 1 - Item 2 - Item 3 - - - -#### Disabled - - - - disabled - disabled - disabled - - - -#### Square - - - - - - 😎 - - - - - 🤖 - - - - - 🎁 - - - - - -#### Small size - - - - View - - Paste - Paste Shortcut - Undo Copy - - Properties - - - -#### Render as link - - - - Normal item - - - 🔗 - - Link! - - - - -#### Primary - - - - Item 1 - Item 2 - Item 3 - - - -## API - -### Import - -``` -import { ListItem } from 'react95' -``` - -### Props - - diff --git a/src/ListItem/ListItem.spec.tsx b/src/ListItem/ListItem.spec.tsx deleted file mode 100644 index 6adb7734..00000000 --- a/src/ListItem/ListItem.spec.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import React from 'react'; - -import { renderWithTheme, theme } from '../../test/utils'; -import { blockSizes } from '../common/system'; -import { ListItem } from './ListItem'; - -const defaultSize = 'lg'; -describe('', () => { - it('renders ListItem', () => { - const { getByRole } = renderWithTheme(); - const listItem = getByRole('menuitem'); - expect(listItem).toBeInTheDocument(); - expect(listItem).not.toHaveAttribute('aria-disabled'); - }); - it('renders children', () => { - const textContent = 'Hi there!'; - const { getByText } = renderWithTheme( - - {textContent} - - ); - expect(getByText(textContent)).toBeInTheDocument(); - }); - it('should have a default role of menuitem', () => { - const { getByRole } = renderWithTheme(); - const listItem = getByRole('menuitem'); - expect(listItem).toHaveAttribute('role', 'menuitem'); - }); - - it('should render with custom role', () => { - const { getByRole } = renderWithTheme(); - const listItem = getByRole('option'); - expect(listItem).toHaveAttribute('role', 'option'); - }); - - // it('should have a tabIndex of -1 by default', () => { - // const { getByRole } = renderWithTheme(); - // const listItem = getByRole('menuitem'); - // expect(listItem).toHaveAttribute('tabIndex', '-1'); - // }); - describe('prop: disabled', () => { - it('should not trigger onClick callback', () => { - const clickHandler = jest.fn(); - const { getByRole } = renderWithTheme( - - ); - const listItem = getByRole('menuitem') as HTMLElement; - listItem.click(); - expect(clickHandler).not.toBeCalled(); - expect(listItem).toHaveAttribute('aria-disabled', 'true'); - }); - it('renders with disabled styles ', () => { - const { getByRole } = renderWithTheme(); - const listItem = getByRole('menuitem'); - expect(listItem).toHaveStyleRule('pointer-events', 'none'); - expect(listItem).toHaveStyleRule('color', theme.materialTextDisabled); - expect(listItem).toHaveStyleRule( - 'text-shadow', - `1px 1px ${theme.materialTextDisabledShadow}` - ); - }); - }); - describe('prop: onClick', () => { - it('should be called when clicked', () => { - const clickHandler = jest.fn(); - const { getByRole } = renderWithTheme( - - ); - const listItem = getByRole('menuitem') as HTMLElement; - listItem.click(); - expect(clickHandler).toHaveBeenCalledTimes(1); - }); - }); - describe('prop: square', () => { - it('should render square ListItem', () => { - const { getByRole } = renderWithTheme(); - const listItem = getByRole('menuitem'); - - expect(listItem).toHaveStyleRule('width', blockSizes[defaultSize]); - expect(listItem).toHaveStyleRule('height', blockSizes[defaultSize]); - }); - }); - describe('prop: size', () => { - it('should define ListItem height', () => { - const size = 'sm'; - const { getByRole } = renderWithTheme(); - const listItem = getByRole('menuitem'); - - expect(listItem).toHaveStyleRule('height', blockSizes[size]); - }); - }); -}); diff --git a/src/MenuList/MenuList.spec.tsx b/src/MenuList/MenuList.spec.tsx new file mode 100644 index 00000000..4bbae381 --- /dev/null +++ b/src/MenuList/MenuList.spec.tsx @@ -0,0 +1,47 @@ +import React from 'react'; + +import { renderWithTheme } from '../../test/utils'; + +import { MenuList } from './MenuList'; + +describe('', () => { + it('renders MenuList', () => { + const { container } = renderWithTheme(); + const menuList = container.firstElementChild; + + expect(menuList).toBeInTheDocument(); + }); + it('is an ul', () => { + const { container } = renderWithTheme(); + const menuList = container.firstElementChild; + + expect(menuList?.tagName).toBe('UL'); + }); + it('renders children', () => { + const textContent = 'Hi there!'; + const { getByText } = renderWithTheme( + + {textContent} + + ); + expect(getByText(textContent)).toBeInTheDocument(); + }); + + describe('prop: inline', () => { + it('renders inline', () => { + const { container } = renderWithTheme(); + const menuList = container.firstElementChild; + + expect(menuList).toHaveStyleRule('display', 'inline-flex'); + expect(menuList).toHaveStyleRule('align-items', 'center'); + }); + }); + describe('prop: fullWidth', () => { + it('has 100% width', () => { + const { container } = renderWithTheme(); + const menuList = container.firstElementChild; + + expect(menuList).toHaveStyleRule('width', '100%'); + }); + }); +}); diff --git a/src/List/List.stories.tsx b/src/MenuList/MenuList.stories.tsx similarity index 50% rename from src/List/List.stories.tsx rename to src/MenuList/MenuList.stories.tsx index 0bd48e94..05633a91 100644 --- a/src/List/List.stories.tsx +++ b/src/MenuList/MenuList.stories.tsx @@ -1,9 +1,8 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; +import { Handle, MenuList, MenuListItem, Separator } from 'react95'; import styled from 'styled-components'; -import { Handle, List, ListItem, Separator } from 'react95'; - const Wrapper = styled.div` padding: 5rem; background: ${({ theme }) => theme.desktopBackground}; @@ -15,18 +14,18 @@ const Wrapper = styled.div` `; export default { - title: 'List', - component: List, - subcomponents: { ListItem }, + title: 'Controls/MenuList', + component: MenuList, + subcomponents: { MenuListItem }, decorators: [story => {story()}] -} as ComponentMeta; +} as ComponentMeta; export function Default() { return ( <> - - Photos - + Photos + Link - - Other - - - + + Other + + + 🌿 - + - Tackle - Growl - Razor Leaf - - - + Tackle + Growl + Razor Leaf + + + View - + - Paste - Paste Shortcut - Undo Copy + Paste + Paste Shortcut + Undo Copy - Properties - - - + Properties + + + 😎 - - + + 🤖 - - + + 🎁 - - + + ); } diff --git a/src/List/List.tsx b/src/MenuList/MenuList.tsx similarity index 72% rename from src/List/List.tsx rename to src/MenuList/MenuList.tsx index 2a175c3f..9304c6e7 100644 --- a/src/List/List.tsx +++ b/src/MenuList/MenuList.tsx @@ -4,16 +4,16 @@ import styled from 'styled-components'; import { createBorderStyles, createBoxStyles } from '../common'; import { CommonStyledProps } from '../types'; -type ListProps = React.HTMLAttributes & { +type MenuListProps = React.HTMLAttributes & { fullWidth?: boolean; shadow?: boolean; inline?: boolean; } & CommonStyledProps; // TODO keyboard controls -const List = styled.ul.attrs(() => ({ +const MenuList = styled.ul.attrs(() => ({ role: 'menu' -}))` +}))` box-sizing: border-box; width: ${props => (props.fullWidth ? '100%' : 'auto')}; padding: 4px; @@ -29,4 +29,8 @@ const List = styled.ul.attrs(() => ({ position: relative; `; -export { List, ListProps }; +MenuList.displayName = 'MenuList'; + +export * from './MenuListItem'; + +export { MenuList, MenuListProps }; diff --git a/src/MenuList/MenuListItem.spec.tsx b/src/MenuList/MenuListItem.spec.tsx new file mode 100644 index 00000000..734d31d2 --- /dev/null +++ b/src/MenuList/MenuListItem.spec.tsx @@ -0,0 +1,92 @@ +import React from 'react'; + +import { renderWithTheme, theme } from '../../test/utils'; +import { blockSizes } from '../common/system'; +import { MenuListItem } from './MenuListItem'; + +const defaultSize = 'lg'; +describe('', () => { + it('renders MenuListItem', () => { + const { getByRole } = renderWithTheme(); + const menuListItem = getByRole('menuitem'); + expect(menuListItem).toBeInTheDocument(); + expect(menuListItem).not.toHaveAttribute('aria-disabled'); + }); + it('renders children', () => { + const textContent = 'Hi there!'; + const { getByText } = renderWithTheme( + + {textContent} + + ); + expect(getByText(textContent)).toBeInTheDocument(); + }); + it('should have a default role of menuitem', () => { + const { getByRole } = renderWithTheme(); + const menuListItem = getByRole('menuitem'); + expect(menuListItem).toHaveAttribute('role', 'menuitem'); + }); + + it('should render with custom role', () => { + const { getByRole } = renderWithTheme(); + const menuListItem = getByRole('option'); + expect(menuListItem).toHaveAttribute('role', 'option'); + }); + + // it('should have a tabIndex of -1 by default', () => { + // const { getByRole } = renderWithTheme(); + // const menuListItem = getByRole('menuitem'); + // expect(menuListItem).toHaveAttribute('tabIndex', '-1'); + // }); + describe('prop: disabled', () => { + it('should not trigger onClick callback', () => { + const clickHandler = jest.fn(); + const { getByRole } = renderWithTheme( + + ); + const menuListItem = getByRole('menuitem') as HTMLElement; + menuListItem.click(); + expect(clickHandler).not.toBeCalled(); + expect(menuListItem).toHaveAttribute('aria-disabled', 'true'); + }); + it('renders with disabled styles ', () => { + const { getByRole } = renderWithTheme(); + const menuListItem = getByRole('menuitem'); + expect(menuListItem).toHaveStyleRule('pointer-events', 'none'); + expect(menuListItem).toHaveStyleRule('color', theme.materialTextDisabled); + expect(menuListItem).toHaveStyleRule( + 'text-shadow', + `1px 1px ${theme.materialTextDisabledShadow}` + ); + }); + }); + describe('prop: onClick', () => { + it('should be called when clicked', () => { + const clickHandler = jest.fn(); + const { getByRole } = renderWithTheme( + + ); + const menuListItem = getByRole('menuitem') as HTMLElement; + menuListItem.click(); + expect(clickHandler).toHaveBeenCalledTimes(1); + }); + }); + describe('prop: square', () => { + it('should render square MenuListItem', () => { + const { getByRole } = renderWithTheme(); + const menuListItem = getByRole('menuitem'); + + expect(menuListItem).toHaveStyleRule('width', blockSizes[defaultSize]); + expect(menuListItem).toHaveStyleRule('height', blockSizes[defaultSize]); + }); + }); + describe('prop: size', () => { + it('should define MenuListItem height', () => { + const size = 'sm'; + const { getByRole } = renderWithTheme(); + const menuListItem = getByRole('menuitem'); + + expect(menuListItem).toHaveStyleRule('height', blockSizes[size]); + }); + }); +}); diff --git a/src/ListItem/ListItem.tsx b/src/MenuList/MenuListItem.tsx similarity index 59% rename from src/ListItem/ListItem.tsx rename to src/MenuList/MenuListItem.tsx index 31c47890..45c7e1f2 100644 --- a/src/ListItem/ListItem.tsx +++ b/src/MenuList/MenuListItem.tsx @@ -5,7 +5,7 @@ import { createDisabledTextStyles } from '../common'; import { blockSizes } from '../common/system'; import { CommonStyledProps, Sizes } from '../types'; -type ListItemProps = { +type MenuListItemProps = { disabled?: boolean; square?: boolean; primary?: boolean; @@ -13,7 +13,7 @@ type ListItemProps = { } & React.HTMLAttributes & CommonStyledProps; -export const StyledListItem = styled.li<{ +export const StyledMenuListItem = styled.li<{ $disabled?: boolean; square?: boolean; primary?: boolean; @@ -49,40 +49,44 @@ export const StyledListItem = styled.li<{ ${props => props.$disabled && createDisabledTextStyles()} `; -const ListItem = forwardRef(function ListItem( - { - size = 'lg', - disabled, - // tabIndex: tabIndexProp, - square, - children, - onClick, - primary, - ...otherProps - }, - ref -) { - // let tabIndex; - // if (!disabled) { - // tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1; - // } +const MenuListItem = forwardRef( + ( + { + size = 'lg', + disabled, + // tabIndex: tabIndexProp, + square, + children, + onClick, + primary, + ...otherProps + }, + ref + ) => { + // let tabIndex; + // if (!disabled) { + // tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1; + // } - return ( - - {children} - - ); -}); + return ( + + {children} + + ); + } +); + +MenuListItem.displayName = 'MenuListItem'; -export { ListItem, ListItemProps }; +export { MenuListItem, MenuListItemProps }; diff --git a/src/Radio/Radio.stories.tsx b/src/Radio/Radio.stories.tsx index 25c4e36b..e4b37d08 100644 --- a/src/Radio/Radio.stories.tsx +++ b/src/Radio/Radio.stories.tsx @@ -2,8 +2,8 @@ import { ComponentMeta } from '@storybook/react'; import React, { useState } from 'react'; import { GroupBox, - List, - ListItem, + MenuList, + MenuListItem, Radio, ScrollView, Separator, @@ -157,8 +157,8 @@ export function Menu() { const { tool, color } = state; return ( - - + + - - + + - + - + - - + + - - + + ); } Menu.story = { diff --git a/src/Radio/Radio.tsx b/src/Radio/Radio.tsx index 9ff3ee0a..92ab2459 100644 --- a/src/Radio/Radio.tsx +++ b/src/Radio/Radio.tsx @@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'; import styled, { css, CSSProperties } from 'styled-components'; import { createFlatBoxStyles } from '../common'; -import { StyledListItem } from '../ListItem/ListItem'; +import { StyledMenuListItem } from '../MenuList/MenuList'; import { StyledScrollView } from '../ScrollView/ScrollView'; import { LabelText, @@ -120,7 +120,7 @@ const Icon = styled.span.attrs(() => ({ : css` background: ${$disabled ? theme.checkmarkDisabled : theme.checkmark}; `} - ${StyledListItem}:hover & { + ${StyledMenuListItem}:hover & { ${({ $disabled, theme, variant }) => !$disabled && variant === 'menu' && diff --git a/src/Separator/Separator.stories.tsx b/src/Separator/Separator.stories.tsx index bb3178b2..030e95f9 100644 --- a/src/Separator/Separator.stories.tsx +++ b/src/Separator/Separator.stories.tsx @@ -2,7 +2,7 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; import styled from 'styled-components'; -import { Separator, List, ListItem } from 'react95'; +import { MenuList, MenuListItem, Separator } from 'react95'; const Wrapper = styled.div` padding: 5rem; @@ -18,20 +18,20 @@ export default { export function Default() { return ( <> - - Item 1 + + Item 1 - Item 2 + Item 2 - Item 3 - - - Item 1 + Item 3 + + + Item 1 - Item 2 + Item 2 - Item 3 - + Item 3 + ); } diff --git a/src/SwitchBase/SwitchBase.ts b/src/SwitchBase/SwitchBase.ts index 9c7b7de9..885cdb72 100644 --- a/src/SwitchBase/SwitchBase.ts +++ b/src/SwitchBase/SwitchBase.ts @@ -1,7 +1,7 @@ import styled, { css } from 'styled-components'; -import { createDisabledTextStyles, focusOutline } from '../common'; -import { StyledListItem } from '../ListItem/ListItem'; +import { createDisabledTextStyles, focusOutline } from '../common'; +import { StyledMenuListItem } from '../MenuList/MenuList'; export const size = 20; @@ -26,11 +26,11 @@ export const StyledLabel = styled.label<{ $disabled: boolean }>` color: ${({ theme }) => theme.materialText}; ${props => props.$disabled && createDisabledTextStyles()} - ${StyledListItem} & { + ${StyledMenuListItem} & { margin: 0; height: 100%; } - ${StyledListItem}:hover & { + ${StyledMenuListItem}:hover & { ${({ $disabled, theme }) => !$disabled && css` diff --git a/src/index.ts b/src/index.ts index 13c523ac..300079ec 100644 --- a/src/index.ts +++ b/src/index.ts @@ -14,9 +14,8 @@ export * from './DatePicker/DatePicker'; export * from './GroupBox/GroupBox'; export * from './Handle/Handle'; export * from './Hourglass/Hourglass'; -export * from './List/List'; -export * from './ListItem/ListItem'; export * from './LoadingIndicator/LoadingIndicator'; +export * from './MenuList/MenuList'; export * from './Monitor/Monitor'; export * from './NumberField/NumberField'; export * from './Panel/Panel'; @@ -49,3 +48,5 @@ export * from './legacy/Cutout'; export * from './legacy/Desktop'; export * from './legacy/Divider'; export * from './legacy/Fieldset'; +export * from './legacy/List'; +export * from './legacy/ListItem'; diff --git a/src/legacy/List.tsx b/src/legacy/List.tsx new file mode 100644 index 00000000..55f863db --- /dev/null +++ b/src/legacy/List.tsx @@ -0,0 +1,7 @@ +import { MenuList, MenuListProps } from '../MenuList/MenuList'; + +/** @deprecated Use `MenuListProps` */ +export type ListProps = MenuListProps; + +/** @deprecated Use `MenuList` */ +export const List = MenuList; diff --git a/src/legacy/ListItem.tsx b/src/legacy/ListItem.tsx new file mode 100644 index 00000000..2eb6179f --- /dev/null +++ b/src/legacy/ListItem.tsx @@ -0,0 +1,14 @@ +import { + MenuListItem, + MenuListItemProps, + StyledMenuListItem +} from '../MenuList/MenuList'; + +/** @deprecated Use `MenuListItemProps` */ +export type ListItemProps = MenuListItemProps; + +/** @deprecated Use `MenuListItem` */ +export const ListItem = MenuListItem; + +/** @deprecated Use `StyledMenuListItem` */ +export const StyledListItem = StyledMenuListItem; From 17146e9543c54f018f513d038f1d4b0c58a61931 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 31 Jul 2022 09:11:03 -0400 Subject: [PATCH 065/100] docs(progressbar): categorize under Controls --- src/Progress/Progress.mdx | 49 ------ src/Progress/Progress.tsx | 156 ----------------- .../ProgressBar.spec.tsx} | 24 +-- .../ProgressBar.stories.tsx} | 14 +- src/ProgressBar/ProgressBar.tsx | 164 ++++++++++++++++++ src/index.ts | 3 +- src/legacy/Progress.tsx | 7 + 7 files changed, 194 insertions(+), 223 deletions(-) delete mode 100644 src/Progress/Progress.mdx delete mode 100644 src/Progress/Progress.tsx rename src/{Progress/Progress.spec.tsx => ProgressBar/ProgressBar.spec.tsx} (78%) rename src/{Progress/Progress.stories.tsx => ProgressBar/ProgressBar.stories.tsx} (83%) create mode 100644 src/ProgressBar/ProgressBar.tsx create mode 100644 src/legacy/Progress.tsx diff --git a/src/Progress/Progress.mdx b/src/Progress/Progress.mdx deleted file mode 100644 index 8965b107..00000000 --- a/src/Progress/Progress.mdx +++ /dev/null @@ -1,49 +0,0 @@ ---- -name: Progress -menu: Components ---- - -import { Progress } from './Progress'; - -# Progress - -## Usage - -#### Default - - - {() => { - { - /* - @toDo - for some reason the value isn't being updated, check this later - */ - } - const [percent, setPercent] = React.useState(0); - React.useEffect(() => { - const timer = setInterval(() => { - setPercent(previousPercent => { - if (previousPercent === 100) { - return 0; - } - const diff = Math.random() * 10; - return Math.min(previousPercent + diff, 100); - }); - }, 1000); - return () => clearInterval(timer); - }, []); - return ; - }} - - -## API - -### Import - -``` -import { Progress } from 'react95' -``` - -### Props - - diff --git a/src/Progress/Progress.tsx b/src/Progress/Progress.tsx deleted file mode 100644 index 323c9532..00000000 --- a/src/Progress/Progress.tsx +++ /dev/null @@ -1,156 +0,0 @@ -import React, { - forwardRef, - useCallback, - useEffect, - useRef, - useState -} from 'react'; -import styled, { css } from 'styled-components'; - -import { blockSizes } from '../common/system'; -import { StyledScrollView } from '../ScrollView/ScrollView'; -import { CommonStyledProps } from '../types'; - -type ProgressProps = { - hideValue?: boolean; - shadow?: boolean; - value?: number; - variant?: 'default' | 'tile'; -} & React.HTMLAttributes & - CommonStyledProps; - -const Wrapper = styled.div` - display: inline-block; - height: ${blockSizes.md}; - width: 100%; -`; -const ProgressCutout = styled(StyledScrollView)` - width: 100%; - height: 100%; - width: 100%; - position: relative; - text-align: center; - padding: 0; - overflow: hidden; - &:before { - z-index: 1; - } -`; -const commonBarStyles = css` - width: calc(100% - 4px); - height: calc(100% - 4px); - - display: flex; - align-items: center; - justify-content: space-around; -`; -const WhiteBar = styled.div` - position: relative; - top: 4px; - ${commonBarStyles} - background: ${({ theme }) => theme.canvas}; - color: #000; - margin-left: 2px; - margin-top: -2px; - color: ${({ theme }) => theme.materialText}; -`; - -const BlueBar = styled.div>>` - position: absolute; - top: 2px; - left: 2px; - ${commonBarStyles} - color: ${({ theme }) => theme.materialTextInvert}; - background: ${({ theme }) => theme.progress}; - clip-path: polygon( - 0 0, - ${({ value }) => value}% 0, - ${({ value }) => value}% 100%, - 0 100% - ); - transition: 0.4s linear clip-path; -`; - -const TilesWrapper = styled.div` - width: calc(100% - 6px); - height: calc(100% - 8px); - position: absolute; - left: 3px; - top: 4px; - box-sizing: border-box; - display: inline-flex; -`; -const tileWidth = 17; -const Tile = styled.span` - display: inline-block; - width: ${tileWidth}px; - box-sizing: border-box; - height: 100%; - background: ${({ theme }) => theme.progress}; - border-color: ${({ theme }) => theme.material}; - border-width: 0px 1px; - border-style: solid; -`; - -const Progress = forwardRef(function Progress( - { - hideValue = false, - shadow = true, - value = 0, - variant = 'default', - ...otherProps - }, - ref -) { - const displayValue = hideValue ? null : `${value}%`; - - const tilesWrapperRef = useRef(null); - const [tiles, setTiles] = useState([]); - - // TODO debounce this function - const updateTilesNumber = useCallback(() => { - if (!tilesWrapperRef.current) { - return; - } - const progressWidth = tilesWrapperRef.current.getBoundingClientRect().width; - const newTilesNumber = Math.round( - ((value / 100) * progressWidth) / tileWidth - ); - setTiles(Array.from({ length: newTilesNumber })); - }, [value]); - - useEffect(() => { - updateTilesNumber(); - - window.addEventListener('resize', updateTilesNumber); - return () => window.removeEventListener('resize', updateTilesNumber); - }, [updateTilesNumber]); - - return ( - - - {variant === 'default' ? ( - <> - {displayValue} - - {displayValue} - - - ) : ( - - {tiles.map((_, index) => ( - - ))} - - )} - - - ); -}); - -export { Progress, ProgressProps }; diff --git a/src/Progress/Progress.spec.tsx b/src/ProgressBar/ProgressBar.spec.tsx similarity index 78% rename from src/Progress/Progress.spec.tsx rename to src/ProgressBar/ProgressBar.spec.tsx index 3288e7a0..fb2c053d 100644 --- a/src/Progress/Progress.spec.tsx +++ b/src/ProgressBar/ProgressBar.spec.tsx @@ -1,24 +1,26 @@ import React from 'react'; import { renderWithTheme } from '../../test/utils'; -import { Progress } from './Progress'; +import { ProgressBar } from './ProgressBar'; -describe('', () => { - it('renders Progress', () => { +describe('', () => { + it('renders ProgressBar', () => { const value = 32; - const { getByRole } = renderWithTheme(); + const { getByRole } = renderWithTheme(); - const progress = getByRole('progressbar'); + const progressBar = getByRole('progressbar'); - expect(progress).toBeInTheDocument(); - expect(progress).toHaveAttribute('aria-valuenow', value.toString()); + expect(progressBar).toBeInTheDocument(); + expect(progressBar).toHaveAttribute('aria-valuenow', value.toString()); }); describe('prop: variant', () => { describe('variant: "default"', () => { it('displays current percentage value', () => { const value = 32; - const { queryByTestId } = renderWithTheme(); + const { queryByTestId } = renderWithTheme( + + ); expect(queryByTestId('defaultProgress1')?.textContent).toBe( `${value}%` @@ -38,7 +40,9 @@ describe('', () => { describe('variant: "tile"', () => { it('Renders "tile" progress', () => { - const { queryByTestId } = renderWithTheme(); + const { queryByTestId } = renderWithTheme( + + ); expect(queryByTestId('defaultProgress1')).not.toBeInTheDocument(); expect(queryByTestId('defaultProgress2')).not.toBeInTheDocument(); expect(queryByTestId('tileProgress')).toBeInTheDocument(); @@ -66,7 +70,7 @@ describe('', () => { it('renders progress bars, but does not show value', () => { const value = 32; const { queryByTestId } = renderWithTheme( - + ); expect(queryByTestId('defaultProgress1')).toBeInTheDocument(); expect(queryByTestId('defaultProgress2')).toBeInTheDocument(); diff --git a/src/Progress/Progress.stories.tsx b/src/ProgressBar/ProgressBar.stories.tsx similarity index 83% rename from src/Progress/Progress.stories.tsx rename to src/ProgressBar/ProgressBar.stories.tsx index 87e6a4b9..458cae26 100644 --- a/src/Progress/Progress.stories.tsx +++ b/src/ProgressBar/ProgressBar.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta } from '@storybook/react'; import React, { useEffect, useState } from 'react'; -import { Progress } from 'react95'; +import { ProgressBar } from 'react95'; import styled from 'styled-components'; const Wrapper = styled.div` @@ -9,10 +9,10 @@ const Wrapper = styled.div` `; export default { - title: 'Progress', - component: Progress, + title: 'Controls/ProgressBar', + component: ProgressBar, decorators: [story => {story()}] -} as ComponentMeta; +} as ComponentMeta; export function Default() { const [percent, setPercent] = useState(0); @@ -32,7 +32,7 @@ export function Default() { }; }, []); - return ; + return ; } Default.story = { @@ -57,7 +57,7 @@ export function Tile() { }; }, []); - return ; + return ; } Tile.story = { @@ -82,7 +82,7 @@ export function HideValue() { }; }, []); - return ; + return ; } HideValue.story = { diff --git a/src/ProgressBar/ProgressBar.tsx b/src/ProgressBar/ProgressBar.tsx new file mode 100644 index 00000000..349f8079 --- /dev/null +++ b/src/ProgressBar/ProgressBar.tsx @@ -0,0 +1,164 @@ +import React, { + forwardRef, + useCallback, + useEffect, + useRef, + useState +} from 'react'; +import styled, { css } from 'styled-components'; + +import { blockSizes } from '../common/system'; +import { StyledScrollView } from '../ScrollView/ScrollView'; +import { CommonStyledProps } from '../types'; + +type ProgressBarProps = { + hideValue?: boolean; + shadow?: boolean; + value?: number; + variant?: 'default' | 'tile'; +} & React.HTMLAttributes & + CommonStyledProps; + +const Wrapper = styled.div>>` + display: inline-block; + height: ${blockSizes.md}; + width: 100%; +`; + +const ProgressCutout = styled(StyledScrollView)< + Required> +>` + width: 100%; + height: 100%; + position: relative; + text-align: center; + padding: 0; + overflow: hidden; + &:before { + z-index: 1; + } +`; +const commonBarStyles = css` + width: calc(100% - 4px); + height: calc(100% - 4px); + + display: flex; + align-items: center; + justify-content: space-around; +`; +const WhiteBar = styled.div` + position: relative; + top: 4px; + ${commonBarStyles} + background: ${({ theme }) => theme.canvas}; + color: #000; + margin-left: 2px; + margin-top: -2px; + color: ${({ theme }) => theme.materialText}; +`; + +const BlueBar = styled.div>` + position: absolute; + top: 2px; + left: 2px; + ${commonBarStyles} + color: ${({ theme }) => theme.materialTextInvert}; + background: ${({ theme }) => theme.progress}; + clip-path: polygon( + 0 0, + ${({ value = 0 }) => value}% 0, + ${({ value = 0 }) => value}% 100%, + 0 100% + ); + transition: 0.4s linear clip-path; +`; + +const TilesWrapper = styled.div` + width: calc(100% - 6px); + height: calc(100% - 8px); + position: absolute; + left: 3px; + top: 4px; + box-sizing: border-box; + display: inline-flex; +`; +const tileWidth = 17; +const Tile = styled.span` + display: inline-block; + width: ${tileWidth}px; + box-sizing: border-box; + height: 100%; + background: ${({ theme }) => theme.progress}; + border-color: ${({ theme }) => theme.material}; + border-width: 0px 1px; + border-style: solid; +`; + +const ProgressBar = forwardRef( + ( + { + hideValue = false, + shadow = true, + value, + variant = 'default', + ...otherProps + }, + ref + ) => { + const displayValue = hideValue ? null : `${value}%`; + + const tilesWrapperRef = useRef(null); + const [tiles, setTiles] = useState([]); + + // TODO debounce this function + const updateTilesNumber = useCallback(() => { + if (!tilesWrapperRef.current || value === undefined) { + return; + } + const progressWidth = + tilesWrapperRef.current.getBoundingClientRect().width; + const newTilesNumber = Math.round( + ((value / 100) * progressWidth) / tileWidth + ); + setTiles(Array.from({ length: newTilesNumber })); + }, [value]); + + useEffect(() => { + updateTilesNumber(); + + window.addEventListener('resize', updateTilesNumber); + return () => window.removeEventListener('resize', updateTilesNumber); + }, [updateTilesNumber]); + + return ( + + + {variant === 'default' ? ( + <> + {displayValue} + + {displayValue} + + + ) : ( + + {tiles.map((_, index) => ( + + ))} + + )} + + + ); + } +); + +ProgressBar.displayName = 'ProgressBar'; + +export { ProgressBar, ProgressBarProps }; diff --git a/src/index.ts b/src/index.ts index 300079ec..7fbf45fa 100644 --- a/src/index.ts +++ b/src/index.ts @@ -19,7 +19,7 @@ export * from './MenuList/MenuList'; export * from './Monitor/Monitor'; export * from './NumberField/NumberField'; export * from './Panel/Panel'; -export * from './Progress/Progress'; +export * from './ProgressBar/ProgressBar'; export * from './Radio/Radio'; export * from './ScrollView/ScrollView'; export * from './Select/Select'; @@ -50,3 +50,4 @@ export * from './legacy/Divider'; export * from './legacy/Fieldset'; export * from './legacy/List'; export * from './legacy/ListItem'; +export * from './legacy/Progress'; diff --git a/src/legacy/Progress.tsx b/src/legacy/Progress.tsx new file mode 100644 index 00000000..f72dc277 --- /dev/null +++ b/src/legacy/Progress.tsx @@ -0,0 +1,7 @@ +import { ProgressBar, ProgressBarProps } from '../ProgressBar/ProgressBar'; + +/** @deprecated Use `ProgressBarProps` */ +export type ProgressProps = ProgressBarProps; + +/** @deprecated Use `ProgressBar` */ +export const Progress = ProgressBar; From 38ce6cd3fd8e18a518b82ddabb25e5ec7a9a0365 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Thu, 4 Aug 2022 17:35:21 -0400 Subject: [PATCH 066/100] chore(loadingindicator): remove LoadingIndicator BREAKING CHANGE: LoadingIndicator was removed from the library. --- .../LoadingIndicator.spec.tsx | 26 --- .../LoadingIndicator.stories.tsx | 29 ---- src/LoadingIndicator/LoadingIndicator.tsx | 158 ------------------ src/index.ts | 1 - 4 files changed, 214 deletions(-) delete mode 100644 src/LoadingIndicator/LoadingIndicator.spec.tsx delete mode 100644 src/LoadingIndicator/LoadingIndicator.stories.tsx delete mode 100644 src/LoadingIndicator/LoadingIndicator.tsx diff --git a/src/LoadingIndicator/LoadingIndicator.spec.tsx b/src/LoadingIndicator/LoadingIndicator.spec.tsx deleted file mode 100644 index 929ec4d4..00000000 --- a/src/LoadingIndicator/LoadingIndicator.spec.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -import { renderWithTheme } from '../../test/utils'; -import { LoadingIndicator } from './LoadingIndicator'; - -describe('', () => { - it('renders LoadingIndicator', () => { - const { getByRole } = renderWithTheme(); - - const progress = getByRole('progressbar'); - - expect(progress).toBeInTheDocument(); - }); - - describe('prop: isLoading', () => { - it('when set to false, does not display progress bars', () => { - const { rerender, queryByTestId } = renderWithTheme(); - - expect(queryByTestId('loading-wrapper')).not.toBeNull(); - - rerender(); - - expect(queryByTestId('loading-wrapper')).toBeNull(); - }); - }); -}); diff --git a/src/LoadingIndicator/LoadingIndicator.stories.tsx b/src/LoadingIndicator/LoadingIndicator.stories.tsx deleted file mode 100644 index f200813a..00000000 --- a/src/LoadingIndicator/LoadingIndicator.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import React from 'react'; -import styled from 'styled-components'; - -import { LoadingIndicator } from 'react95'; - -const Wrapper = styled.div` - background: ${({ theme }) => theme.material}; - padding: 5rem; -`; - -export default { - title: 'LoadingIndicator', - component: LoadingIndicator, - decorators: [story => {story()}] -} as ComponentMeta; - -export function Default() { - return ( - <> -

Loading...

- - - ); -} - -Default.story = { - name: 'default' -}; diff --git a/src/LoadingIndicator/LoadingIndicator.tsx b/src/LoadingIndicator/LoadingIndicator.tsx deleted file mode 100644 index d280f012..00000000 --- a/src/LoadingIndicator/LoadingIndicator.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import React, { forwardRef } from 'react'; -import styled, { css, keyframes } from 'styled-components'; -import { StyledScrollView } from '../ScrollView/ScrollView'; -import { CommonStyledProps } from '../types'; - -type LoadingIndicatorProps = { - isLoading?: boolean; - shadow?: boolean; -} & React.HTMLAttributes & - CommonStyledProps; - -const Wrapper = styled.div` - display: inline-block; - height: 15px; - width: 100%; -`; -const ProgressCutout = styled(StyledScrollView)` - width: 100%; - height: 100%; - width: 100%; - position: relative; - padding: 0; - overflow: hidden; -`; - -// animations taken from https://material.io/develop/web/ Linear Progress -const primaryTranslate = keyframes` - 0% { - transform: translateX(0); - } - 20% { - animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819); - transform: translateX(0); - } - 59.15% { - animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352); - transform: translateX(83.67142%); - } - 100% { - transform: translateX(200.611057%); - } -`; -const primaryScale = keyframes` -0% { - transform: scaleX(0.08); - } - 36.65% { - animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1); - transform: scaleX(0.08); - } - 69.15% { - animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1); - transform: scaleX(0.661479); - } - 100% { - transform: scaleX(0.08); - } -`; -const secondaryTranslate = keyframes` - 0% { - animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685); - transform: translateX(0); - } - 25% { - animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712); - transform: translateX(37.651913%); - } - 48.35% { - animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026); - transform: translateX(84.386165%); - } - 100% { - transform: translateX(160.277782%); - } -`; -const secondaryScale = keyframes` - 0% { - animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971); - transform: scaleX(0.08); - } - 19.15% { - animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315); - transform: scaleX(0.457104); - } - 44.15% { - animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179); - transform: scaleX(0.72796); - } - 100% { - transform: scaleX(0.08); - } -`; -const sharedIndeterminateStyles = css` - height: 100%; - width: 100%; - position: absolute; - transform-origin: top left; - transform: scaleX(0); -`; -const sharedIndeterminateInnerStyles = css` - height: 100%; - width: 100%; - display: inline-block; - background: ${({ theme }) => theme.progress}; - position: absolute; -`; -const IndeterminateWrapper = styled.div` - position: relative; - top: 2px; - left: 2px; - width: calc(100% - 4px); - height: calc(100% - 4px); - overflow: hidden; -`; -const IndeterminatePrimary = styled.div` - ${sharedIndeterminateStyles} - left: -145.166611%; - animation: ${primaryTranslate} 2s infinite linear; -`; -const IndeterminatePrimaryInner = styled.span` - ${sharedIndeterminateInnerStyles} - animation: ${primaryScale} 2s infinite linear; -`; -const IndeterminateSecondary = styled.div` - ${sharedIndeterminateStyles} - left: -54.888891%; - animation: ${secondaryTranslate} 2s infinite linear; -`; -const IndeterminateSecondaryInner = styled.span` - ${sharedIndeterminateInnerStyles} - animation: ${secondaryScale} 2s infinite linear; -`; - -const LoadingIndicator = forwardRef( - function LoadingIndicator( - { isLoading = true, shadow = false, ...otherProps }, - ref - ) { - return ( - - - {isLoading && ( - - - - - - - - - )} - - - ); - } -); - -export { LoadingIndicator, LoadingIndicatorProps }; diff --git a/src/index.ts b/src/index.ts index 7fbf45fa..83beff48 100644 --- a/src/index.ts +++ b/src/index.ts @@ -14,7 +14,6 @@ export * from './DatePicker/DatePicker'; export * from './GroupBox/GroupBox'; export * from './Handle/Handle'; export * from './Hourglass/Hourglass'; -export * from './LoadingIndicator/LoadingIndicator'; export * from './MenuList/MenuList'; export * from './Monitor/Monitor'; export * from './NumberField/NumberField'; From 24630c887cb33c75221a10f1d75961214a3da861 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 31 Jul 2022 09:36:08 -0400 Subject: [PATCH 067/100] refactor(numberinput): categorize under Controls, rename from NumberField to NumberInput --- src/DatePicker/DatePicker.tsx | 4 +- src/NumberField/NumberField.mdx | 78 ------------------- .../NumberInput.spec.tsx} | 30 +++---- .../NumberInput.stories.tsx} | 22 +++--- .../NumberInput.tsx} | 23 +++--- src/Tabs/Tabs.mdx | 4 +- src/Tabs/Tabs.stories.tsx | 4 +- src/index.ts | 3 +- src/legacy/NumberField.tsx | 7 ++ 9 files changed, 53 insertions(+), 122 deletions(-) delete mode 100644 src/NumberField/NumberField.mdx rename src/{NumberField/NumberField.spec.tsx => NumberInput/NumberInput.spec.tsx} (86%) rename src/{NumberField/NumberField.stories.tsx => NumberInput/NumberInput.stories.tsx} (64%) rename src/{NumberField/NumberField.tsx => NumberInput/NumberInput.tsx} (91%) create mode 100644 src/legacy/NumberField.tsx diff --git a/src/DatePicker/DatePicker.tsx b/src/DatePicker/DatePicker.tsx index a49dcbc8..b7ec857b 100644 --- a/src/DatePicker/DatePicker.tsx +++ b/src/DatePicker/DatePicker.tsx @@ -2,7 +2,7 @@ import React, { forwardRef, useCallback, useMemo, useState } from 'react'; import styled from 'styled-components'; import { Button } from '../Button/Button'; -import { NumberField } from '../NumberField/NumberField'; +import { NumberInput } from '../NumberInput/NumberInput'; import { ScrollView } from '../ScrollView/ScrollView'; import { Select } from '../Select/Select'; import { SelectChangeEvent } from '../Select/Select.types'; @@ -175,7 +175,7 @@ const DatePicker = forwardRef( width={128} menuMaxHeight={200} /> - + diff --git a/src/NumberField/NumberField.mdx b/src/NumberField/NumberField.mdx deleted file mode 100644 index 5f1659be..00000000 --- a/src/NumberField/NumberField.mdx +++ /dev/null @@ -1,78 +0,0 @@ ---- -name: NumberField -menu: Components ---- - -import { NumberField } from './NumberField'; -import { ScrollView } from '../ScrollView/ScrollView'; - -# NumberField - -## Usage - -#### Default - - - console.log(value)} /> - - -#### Fixed width - - - console.log(value)} /> - - -#### Disabled - - - console.log(value)} /> - - -#### Disabled keyboard input - - - console.log(value)} - /> - - -#### No shadow - - - console.log(value)} - /> - - -#### Flat - - - -

- When you want to use NumberField on a light background (like scrollable - content), just use the flat variant: -

- console.log(value)} - /> - - - -## API - -### Import - -``` -import { NumberField } from 'react95' -``` - -### Props - - diff --git a/src/NumberField/NumberField.spec.tsx b/src/NumberInput/NumberInput.spec.tsx similarity index 86% rename from src/NumberField/NumberField.spec.tsx rename to src/NumberInput/NumberInput.spec.tsx index ee3ee61a..486d193f 100644 --- a/src/NumberField/NumberField.spec.tsx +++ b/src/NumberInput/NumberInput.spec.tsx @@ -2,15 +2,15 @@ import { fireEvent } from '@testing-library/react'; import React from 'react'; import { renderWithTheme } from '../../test/utils'; -import { NumberField } from './NumberField'; +import { NumberInput } from './NumberInput'; // TODO: should we pass number or string to callbacks? -describe('', () => { +describe('', () => { it('should call onChange on spin buttons click', () => { const handleChange = jest.fn(); const { getByTestId } = renderWithTheme( - + ); const spinButton = getByTestId('increment'); spinButton.click(); @@ -21,7 +21,7 @@ describe('', () => { it('should call onChange on blur after keyboard input', () => { const handleChange = jest.fn(); const { container } = renderWithTheme( - + ); const input = container.querySelector('input') as HTMLInputElement; input.focus(); @@ -39,7 +39,7 @@ describe('', () => { const handleChange = jest.fn(); const { getByTestId, container } = renderWithTheme( - + ); const input = container.querySelector('input') as HTMLInputElement; const incrementButton = getByTestId('increment'); @@ -55,7 +55,7 @@ describe('', () => { it('should give correct result after user changes input value and then clicks increment button', () => { const handleChange = jest.fn(); const { container, getByTestId } = renderWithTheme( - + ); const input = container.querySelector('input') as HTMLInputElement; const incrementButton = getByTestId('increment'); @@ -68,7 +68,7 @@ describe('', () => { it('should reach max value', () => { const { getByTestId, container } = renderWithTheme( - + ); const input = container.querySelector('input') as HTMLInputElement; const incrementButton = getByTestId('increment'); @@ -79,7 +79,7 @@ describe('', () => { it('should reach min value', () => { const { getByTestId, container } = renderWithTheme( - + ); const input = container.querySelector('input') as HTMLInputElement; const decrementButton = getByTestId('decrement'); @@ -91,7 +91,7 @@ describe('', () => { describe('prop: step', () => { it('should be 1 by default', () => { const { getByTestId, container } = renderWithTheme( - + ); const input = container.querySelector('input') as HTMLInputElement; const incrementButton = getByTestId('increment'); @@ -102,7 +102,7 @@ describe('', () => { it('should change value by specified step', () => { const { getByTestId, container } = renderWithTheme( - + ); const input = container.querySelector('input') as HTMLInputElement; const decrementButton = getByTestId('decrement'); @@ -113,7 +113,7 @@ describe('', () => { it('should handle decimal step', () => { const { getByTestId, container } = renderWithTheme( - + ); const input = container.querySelector('input') as HTMLInputElement; const decrementButton = getByTestId('decrement'); @@ -126,7 +126,7 @@ describe('', () => { describe('prop: disabled', () => { it('should render disabled', () => { const { getByTestId, container } = renderWithTheme( - + ); const input = container.querySelector('input') as HTMLInputElement; const incrementButton = getByTestId('increment'); @@ -139,7 +139,7 @@ describe('', () => { it('should not react to button clicks', () => { const { getByTestId, container } = renderWithTheme( - + ); const input = container.querySelector('input') as HTMLInputElement; const incrementButton = getByTestId('increment'); @@ -156,7 +156,7 @@ describe('', () => { describe('prop: width', () => { it('should render component of specified width', () => { const { container } = renderWithTheme( - + ); expect( getComputedStyle(container.firstElementChild as HTMLInputElement).width @@ -165,7 +165,7 @@ describe('', () => { it('should handle %', () => { const { container } = renderWithTheme( - + ); expect( getComputedStyle(container.firstElementChild as HTMLInputElement).width diff --git a/src/NumberField/NumberField.stories.tsx b/src/NumberInput/NumberInput.stories.tsx similarity index 64% rename from src/NumberField/NumberField.stories.tsx rename to src/NumberInput/NumberInput.stories.tsx index e3678880..d9f089c6 100644 --- a/src/NumberField/NumberField.stories.tsx +++ b/src/NumberInput/NumberInput.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; -import { NumberField, ScrollView } from 'react95'; +import { ScrollView, NumberInput } from 'react95'; import styled from 'styled-components'; const Wrapper = styled.div` @@ -21,19 +21,19 @@ const Wrapper = styled.div` `; export default { - title: 'NumberField', - component: NumberField, + title: 'Controls/NumberInput', + component: NumberInput, decorators: [story => {story()}] -} as ComponentMeta; +} as ComponentMeta; export function Default() { return ( <> - +
- +
- + ); } @@ -46,10 +46,10 @@ export function Flat() { return (

- When you want to use NumberField on a light background (like scrollable + When you want to use NumberInput on a light background (like scrollable content), just use the flat variant:

-
- +
- + ); } diff --git a/src/NumberField/NumberField.tsx b/src/NumberInput/NumberInput.tsx similarity index 91% rename from src/NumberField/NumberField.tsx rename to src/NumberInput/NumberInput.tsx index 76931564..3e85b8a6 100644 --- a/src/NumberField/NumberField.tsx +++ b/src/NumberInput/NumberInput.tsx @@ -8,7 +8,7 @@ import { clamp, getSize } from '../common/utils'; import { TextField } from '../TextField/TextField'; import { CommonStyledProps } from '../types'; -type NumberFieldProps = { +type NumberInputProps = { className?: string; defaultValue?: number; disabled?: boolean; @@ -22,12 +22,12 @@ type NumberFieldProps = { width?: string | number; } & CommonStyledProps; -const StyledNumberFieldWrapper = styled.div` +const StyledNumberInputWrapper = styled.div` display: inline-flex; align-items: center; `; -const StyledButton = styled(Button)>` +const StyledButton = styled(Button)>` width: 30px; padding: 0; flex-shrink: 0; @@ -49,7 +49,7 @@ const StyledButton = styled(Button)>` `} `; -const StyledButtonWrapper = styled.div>` +const StyledButtonWrapper = styled.div>` display: flex; flex-direction: column; flex-wrap: nowrap; @@ -96,9 +96,8 @@ const StyledButtonIcon = styled.span<{ invert?: boolean }>` `} } `; - -const NumberField = forwardRef( - function NumberField( +const NumberInput = forwardRef( + ( { className, defaultValue, @@ -113,7 +112,7 @@ const NumberField = forwardRef( width }, ref - ) { + ) => { const [valueDerived, setValueState] = useControlledOrUncontrolled({ value, defaultValue @@ -157,7 +156,7 @@ const NumberField = forwardRef( }, [handleClick, step]); return ( - ( - + ); } ); -export { NumberField, NumberFieldProps }; +NumberInput.displayName = 'NumberInput'; + +export { NumberInput, NumberInputProps }; diff --git a/src/Tabs/Tabs.mdx b/src/Tabs/Tabs.mdx index c39489aa..40e00141 100644 --- a/src/Tabs/Tabs.mdx +++ b/src/Tabs/Tabs.mdx @@ -9,7 +9,7 @@ import { TabBody } from '../TabBody/TabBody'; import Fieldset from '../Fieldset/Fieldset'; import Window from '../Window/Window'; import WindowHeader from '../WindowHeader/WindowHeader'; -import { NumberField } from '../NumberField/NumberField'; +import { NumberInput } from '../NumberInput/NumberInput'; import Checkbox from '../Checkbox/Checkbox'; import WindowContent from '../WindowContent/WindowContent'; @@ -64,7 +64,7 @@ import WindowContent from '../WindowContent/WindowContent';
Amount:
-
Amount:
- +
Date: Sun, 31 Jul 2022 09:45:38 -0400 Subject: [PATCH 068/100] docs(tabs): categorize under Controls This also moves TabBody and Tab inside Tabs --- src/{Tab => Tabs}/Tab.spec.tsx | 0 src/{Tab => Tabs}/Tab.tsx | 37 +++++---- src/{TabBody => Tabs}/TabBody.spec.tsx | 0 src/{TabBody => Tabs}/TabBody.tsx | 21 ++--- src/Tabs/Tabs.mdx | 106 ------------------------- src/Tabs/Tabs.stories.tsx | 2 +- src/Tabs/Tabs.tsx | 82 ++++++++++--------- src/index.ts | 2 - 8 files changed, 78 insertions(+), 172 deletions(-) rename src/{Tab => Tabs}/Tab.spec.tsx (100%) rename src/{Tab => Tabs}/Tab.tsx (79%) rename src/{TabBody => Tabs}/TabBody.spec.tsx (100%) rename src/{TabBody => Tabs}/TabBody.tsx (67%) delete mode 100644 src/Tabs/Tabs.mdx diff --git a/src/Tab/Tab.spec.tsx b/src/Tabs/Tab.spec.tsx similarity index 100% rename from src/Tab/Tab.spec.tsx rename to src/Tabs/Tab.spec.tsx diff --git a/src/Tab/Tab.tsx b/src/Tabs/Tab.tsx similarity index 79% rename from src/Tab/Tab.tsx rename to src/Tabs/Tab.tsx index 935d7232..17f0666f 100644 --- a/src/Tab/Tab.tsx +++ b/src/Tabs/Tab.tsx @@ -69,22 +69,25 @@ const StyledTab = styled.button` } `; -const Tab = forwardRef(function Tab( - { value, onClick, selected = false, children, ...otherProps }, - ref -) { - return ( - ) => onClick?.(e, value)} - ref={ref} - role='tab' - {...otherProps} - > - {children} - - ); -}); +const Tab = forwardRef( + ({ value, onClick, selected = false, children, ...otherProps }, ref) => { + return ( + ) => + onClick?.(e, value) + } + ref={ref} + role='tab' + {...otherProps} + > + {children} + + ); + } +); + +Tab.displayName = 'Tab'; export { Tab, TabProps }; diff --git a/src/TabBody/TabBody.spec.tsx b/src/Tabs/TabBody.spec.tsx similarity index 100% rename from src/TabBody/TabBody.spec.tsx rename to src/Tabs/TabBody.spec.tsx diff --git a/src/TabBody/TabBody.tsx b/src/Tabs/TabBody.tsx similarity index 67% rename from src/TabBody/TabBody.tsx rename to src/Tabs/TabBody.tsx index c27da639..1afb4f54 100644 --- a/src/TabBody/TabBody.tsx +++ b/src/Tabs/TabBody.tsx @@ -18,15 +18,16 @@ const StyledTabBody = styled.div` padding: 16px; font-size: 1rem; `; -const TabBody = forwardRef(function TabBody( - { children, ...otherProps }, - ref -) { - return ( - - {children} - - ); -}); +const TabBody = forwardRef( + ({ children, ...otherProps }, ref) => { + return ( + + {children} + + ); + } +); + +TabBody.displayName = 'TabBody'; export { TabBody, TabBodyProps }; diff --git a/src/Tabs/Tabs.mdx b/src/Tabs/Tabs.mdx deleted file mode 100644 index 40e00141..00000000 --- a/src/Tabs/Tabs.mdx +++ /dev/null @@ -1,106 +0,0 @@ ---- -name: Tabs -menu: Components ---- - -import { Tabs } from './Tabs'; -import { Tab } from '../Tab/Tab'; -import { TabBody } from '../TabBody/TabBody'; -import Fieldset from '../Fieldset/Fieldset'; -import Window from '../Window/Window'; -import WindowHeader from '../WindowHeader/WindowHeader'; -import { NumberInput } from '../NumberInput/NumberInput'; -import Checkbox from '../Checkbox/Checkbox'; -import WindowContent from '../WindowContent/WindowContent'; - -# Tabs - -## Usage - - - {() => { - const [activeTab, setActiveTab] = React.useState(0); - const handleChange = (event, value) => { - setActiveTab(value); - }; - const a11yProps = index => ({ - id: `tab-${index}`, - 'aria-controls': `tabpanel-${index}` - }); - const TabPanel = ({ children, value, activeTab, ...other }) => { - return ( - - ); - }; - return ( - - - - 👗 - - store.exe - - - - - Shoes - - - Accesories - - - Clothing - - - - -
-
Amount:
- null} - /> - null} - defaultChecked - /> -
- - -
Accesories stuff here
- - -
Clothing stuff here
- - - - - ); - }} - - -## API - -### Import - -``` -import { Tabs } from 'react95' -``` - -### Props - - diff --git a/src/Tabs/Tabs.stories.tsx b/src/Tabs/Tabs.stories.tsx index 5c7d68f9..26a47afb 100644 --- a/src/Tabs/Tabs.stories.tsx +++ b/src/Tabs/Tabs.stories.tsx @@ -20,7 +20,7 @@ const Wrapper = styled.div` `; export default { - title: 'Tabs', + title: 'Controls/Tabs', component: Tabs, subcomponents: { Tab, TabBody }, decorators: [story => {story()}] diff --git a/src/Tabs/Tabs.tsx b/src/Tabs/Tabs.tsx index bc69f111..b0c95582 100644 --- a/src/Tabs/Tabs.tsx +++ b/src/Tabs/Tabs.tsx @@ -2,8 +2,8 @@ import React, { forwardRef, useMemo } from 'react'; import styled from 'styled-components'; import { noOp } from '../common/utils'; -import { TabProps } from '../Tab/Tab'; import { CommonStyledProps } from '../types'; +import { TabProps } from './Tab'; type TabsProps = { value?: TabProps['value']; @@ -56,45 +56,55 @@ function splitToChunks(array: T[], parts: number) { return result; } -const Tabs = forwardRef(function Tabs( - { value, onChange = noOp, children, rows = 1, ...otherProps }, - ref -) { - // split tabs into equal rows and assign key to each row - const tabRowsToRender = useMemo(() => { - const childrenWithProps = - React.Children.map(children, child => { - if (!React.isValidElement(child)) { - return null; - } - const tabProps = { - selected: child.props.value === value, - onClick: onChange - }; - return React.cloneElement(child, tabProps); - }) ?? []; +const Tabs = forwardRef( + ({ value, onChange = noOp, children, rows = 1, ...otherProps }, ref) => { + // split tabs into equal rows and assign key to each row + const tabRowsToRender = useMemo(() => { + const childrenWithProps = + React.Children.map(children, child => { + if (!React.isValidElement(child)) { + return null; + } + const tabProps = { + selected: child.props.value === value, + onClick: onChange + }; + return React.cloneElement(child, tabProps); + }) ?? []; - const tabRows = splitToChunks(childrenWithProps, rows).map((tabs, i) => ({ - key: i, - tabs - })); + const tabRows = splitToChunks(childrenWithProps, rows).map((tabs, i) => ({ + key: i, + tabs + })); - // move row containing currently selected tab to the bottom - const currentlySelectedRowIndex = tabRows.findIndex(tabRow => - tabRow.tabs.some(tab => tab.props.selected) + // move row containing currently selected tab to the bottom + const currentlySelectedRowIndex = tabRows.findIndex(tabRow => + tabRow.tabs.some(tab => tab.props.selected) + ); + tabRows.push(tabRows.splice(currentlySelectedRowIndex, 1)[0]); + + return tabRows; + }, [children, onChange, rows, value]); + + return ( + 1} + role='tablist' + ref={ref} + > + {tabRowsToRender.map(row => ( + {row.tabs} + ))} + ); - tabRows.push(tabRows.splice(currentlySelectedRowIndex, 1)[0]); + } +); + +Tabs.displayName = 'Tabs'; - return tabRows; - }, [children, onChange, rows, value]); +export * from './Tab'; - return ( - 1} role='tablist' ref={ref}> - {tabRowsToRender.map(row => ( - {row.tabs} - ))} - - ); -}); +export * from './TabBody'; export { Tabs, TabsProps }; diff --git a/src/index.ts b/src/index.ts index 10c2d56e..93e0ea68 100644 --- a/src/index.ts +++ b/src/index.ts @@ -24,8 +24,6 @@ export * from './ScrollView/ScrollView'; export * from './Select/Select'; export * from './Separator/Separator'; export * from './Slider/Slider'; -export * from './Tab/Tab'; -export * from './TabBody/TabBody'; export * from './Table/Table'; export * from './TableBody/TableBody'; export * from './TableDataCell/TableDataCell'; From bde588c1f39cf02cf5cfb9d79f64fc28b02449fb Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 31 Jul 2022 14:02:25 -0400 Subject: [PATCH 069/100] refactor(frame): categorize under Layout, rename Panel to Frame This also adds the field variant and refactors createBorderStyles to implement all border styles. --- src/Button/Button.tsx | 9 +- src/Counter/Counter.stories.tsx | 6 +- src/Counter/Counter.tsx | 4 +- src/Frame/Frame.spec.tsx | 41 ++++ .../Frame.stories.tsx} | 42 ++-- src/Frame/Frame.tsx | 58 ++++++ src/MenuList/MenuList.tsx | 2 +- src/Panel/Panel.spec.tsx | 41 ---- src/Panel/Panel.tsx | 52 ----- src/TableHeadCell/TableHeadCell.tsx | 2 +- src/Window/Window.stories.tsx | 6 +- src/Window/Window.tsx | 2 +- src/common/index.ts | 193 +++++++++++++----- src/index.ts | 3 +- src/legacy/Panel.tsx | 7 + 15 files changed, 286 insertions(+), 182 deletions(-) create mode 100644 src/Frame/Frame.spec.tsx rename src/{Panel/Panel.stories.tsx => Frame/Frame.stories.tsx} (54%) create mode 100644 src/Frame/Frame.tsx delete mode 100644 src/Panel/Panel.spec.tsx delete mode 100644 src/Panel/Panel.tsx create mode 100644 src/legacy/Panel.tsx diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx index df0a9186..6cbf6aa0 100644 --- a/src/Button/Button.tsx +++ b/src/Button/Button.tsx @@ -6,7 +6,6 @@ import { createDisabledTextStyles, createFlatBoxStyles, createHatchedBackground, - createWellBorderStyles, focusOutline } from '../common'; import { blockSizes } from '../common/system'; @@ -107,12 +106,14 @@ export const StyledButton = styled.button` border: 2px solid transparent; &:hover, &:focus { - ${!disabled && !active && createWellBorderStyles(false)} + ${!disabled && + !active && + createBorderStyles({ style: 'buttonThin' })} } &:active { - ${!disabled && createWellBorderStyles(true)} + ${!disabled && createBorderStyles({ style: 'buttonThinPressed' })} } - ${active && createWellBorderStyles(true)} + ${active && createBorderStyles({ style: 'buttonThinPressed' })} ${disabled && createDisabledTextStyles()} ` : css` diff --git a/src/Counter/Counter.stories.tsx b/src/Counter/Counter.stories.tsx index 7890db93..a7553247 100644 --- a/src/Counter/Counter.stories.tsx +++ b/src/Counter/Counter.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta } from '@storybook/react'; import React, { useState } from 'react'; -import { Button, Counter, Panel } from 'react95'; +import { Button, Counter, Frame } from 'react95'; import styled from 'styled-components'; const Wrapper = styled.div` @@ -29,14 +29,14 @@ export function Default() { const [count, setCount] = useState(13); const handleClick = () => setCount(count + 1); return ( - +
- + ); } diff --git a/src/Counter/Counter.tsx b/src/Counter/Counter.tsx index 55dfec81..7c2b5c2f 100644 --- a/src/Counter/Counter.tsx +++ b/src/Counter/Counter.tsx @@ -1,7 +1,7 @@ import React, { forwardRef, useMemo } from 'react'; import styled from 'styled-components'; -import { createWellBorderStyles } from '../common'; +import { createBorderStyles } from '../common'; import { CommonStyledProps, Sizes } from '../types'; import { Digit } from './Digit'; @@ -13,7 +13,7 @@ type CounterProps = { CommonStyledProps; const CounterWrapper = styled.div` - ${createWellBorderStyles(true)} + ${createBorderStyles({ style: 'status' })} display: inline-flex; background: #000000; `; diff --git a/src/Frame/Frame.spec.tsx b/src/Frame/Frame.spec.tsx new file mode 100644 index 00000000..2cabe125 --- /dev/null +++ b/src/Frame/Frame.spec.tsx @@ -0,0 +1,41 @@ +import { render } from '@testing-library/react'; +import React from 'react'; + +import { Frame } from './Frame'; + +describe('', () => { + it('should render frame', () => { + const { container } = render(); + const frame = container.firstElementChild; + + expect(frame).toBeInTheDocument(); + }); + + it('should render custom styles', () => { + const { container } = render( + + ); + const frame = container.firstElementChild; + + expect(frame).toHaveAttribute('style', 'background-color: papayawhip;'); + }); + + it('should render children', async () => { + const { findByText } = render( + + Cool frame + + ); + const content = await findByText(/cool frame/i); + + expect(content).toBeInTheDocument(); + }); + + it('should render custom props', () => { + const customProps = { title: 'frame' }; + const { container } = render(); + const frame = container.firstElementChild; + + expect(frame).toHaveAttribute('title', 'frame'); + }); +}); diff --git a/src/Panel/Panel.stories.tsx b/src/Frame/Frame.stories.tsx similarity index 54% rename from src/Panel/Panel.stories.tsx rename to src/Frame/Frame.stories.tsx index 930fb96c..dd19c232 100644 --- a/src/Panel/Panel.stories.tsx +++ b/src/Frame/Frame.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; -import { Panel } from 'react95'; +import { Frame } from 'react95'; import styled from 'styled-components'; const Wrapper = styled.div` @@ -19,28 +19,30 @@ const Wrapper = styled.div` `; export default { - title: 'Panel', - component: Panel, + title: 'Layout/Frame', + component: Frame, decorators: [story => {story()}] -} as ComponentMeta; +} as ComponentMeta; export function Default() { return ( -

- Notice the subtle difference in borders. The lightest border is not on - the edge of this panel. + This is a frame of the 'window' variant, the default. Notice + the subtle difference in borders. The lightest border is not on the edge + of this frame.

- - This panel on the other hand has the lightest border on the edge. Use - this panel inside 'outside' panels. + + This frame of the 'button' variant on the other hand has the + lightest border on the edge. Use this frame inside 'window' + frames.
- - Put some content here - - - + + - The 'well' variant of a panel is often used as a window - footer. - - + The 'status' variant of a frame is often used as a status bar + at the end of the window. + + ); } diff --git a/src/Frame/Frame.tsx b/src/Frame/Frame.tsx new file mode 100644 index 00000000..440eddd9 --- /dev/null +++ b/src/Frame/Frame.tsx @@ -0,0 +1,58 @@ +import React, { forwardRef } from 'react'; +import styled, { css } from 'styled-components'; +import { createBorderStyles, createBoxStyles } from '../common'; +import { CommonStyledProps } from '../types'; + +type FrameProps = { + children?: React.ReactNode; + shadow?: boolean; + variant?: 'outside' | 'field' | 'inside' | 'well'; +} & React.HTMLAttributes & + CommonStyledProps; + +const createFrameStyles = (variant: FrameProps['variant']) => { + switch (variant) { + case 'well': + return css` + ${createBorderStyles({ style: 'status' })} + `; + case 'outside': + return css` + ${createBorderStyles({ style: 'window' })} + `; + case 'field': + return css` + ${createBorderStyles({ style: 'field' })} + `; + default: + return css` + ${createBorderStyles()} + `; + } +}; + +const StyledFrame = styled.div>>` + position: relative; + font-size: 1rem; + ${({ variant }) => createFrameStyles(variant)} + ${({ variant }) => + createBoxStyles( + variant === 'field' + ? { background: 'canvas', color: 'canvasText' } + : undefined + )} +`; + +const Frame = forwardRef( + ({ children, shadow = false, variant = 'window', ...otherProps }, ref) => { + return ( + + {children} + + ); + } +); + +Frame.displayName = 'Frame'; + +export { Frame, FrameProps }; diff --git a/src/MenuList/MenuList.tsx b/src/MenuList/MenuList.tsx index 9304c6e7..57b57848 100644 --- a/src/MenuList/MenuList.tsx +++ b/src/MenuList/MenuList.tsx @@ -17,7 +17,7 @@ const MenuList = styled.ul.attrs(() => ({ box-sizing: border-box; width: ${props => (props.fullWidth ? '100%' : 'auto')}; padding: 4px; - ${createBorderStyles({ windowBorders: true })} + ${createBorderStyles({ style: 'window' })} ${createBoxStyles()} ${props => props.inline && diff --git a/src/Panel/Panel.spec.tsx b/src/Panel/Panel.spec.tsx deleted file mode 100644 index 90d7e4a9..00000000 --- a/src/Panel/Panel.spec.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { render } from '@testing-library/react'; -import React from 'react'; - -import { Panel } from './Panel'; - -describe('', () => { - it('should render panel', () => { - const { container } = render(); - const panel = container.firstElementChild; - - expect(panel).toBeInTheDocument(); - }); - - it('should render custom styles', () => { - const { container } = render( - - ); - const panel = container.firstElementChild; - - expect(panel).toHaveAttribute('style', 'background-color: papayawhip;'); - }); - - it('should render children', async () => { - const { findByText } = render( - - Cool panel - - ); - const content = await findByText(/cool panel/i); - - expect(content).toBeInTheDocument(); - }); - - it('should render custom props', () => { - const customProps = { title: 'panel' }; - const { container } = render(); - const panel = container.firstElementChild; - - expect(panel).toHaveAttribute('title', 'panel'); - }); -}); diff --git a/src/Panel/Panel.tsx b/src/Panel/Panel.tsx deleted file mode 100644 index 58af24de..00000000 --- a/src/Panel/Panel.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React, { forwardRef } from 'react'; -import styled, { css } from 'styled-components'; -import { - createBorderStyles, - createBoxStyles, - createWellBorderStyles -} from '../common'; -import { CommonStyledProps } from '../types'; - -type PanelProps = { - children?: React.ReactNode; - shadow?: boolean; - variant?: 'outside' | 'inside' | 'well'; -} & React.HTMLAttributes & - CommonStyledProps; - -const createPanelStyles = (variant: PanelProps['variant']) => { - switch (variant) { - case 'well': - return css` - ${createWellBorderStyles(true)} - `; - case 'outside': - return css` - ${createBorderStyles({ windowBorders: true })} - `; - default: - return css` - ${createBorderStyles()} - `; - } -}; - -const StyledPanel = styled.div>>` - position: relative; - font-size: 1rem; - ${({ variant }) => createPanelStyles(variant)} - ${createBoxStyles()} -`; - -const Panel = forwardRef(function Panel( - { children, shadow = false, variant = 'outside', ...otherProps }, - ref -) { - return ( - - {children} - - ); -}); - -export { Panel, PanelProps }; diff --git a/src/TableHeadCell/TableHeadCell.tsx b/src/TableHeadCell/TableHeadCell.tsx index dd4c359d..81daf51f 100644 --- a/src/TableHeadCell/TableHeadCell.tsx +++ b/src/TableHeadCell/TableHeadCell.tsx @@ -37,7 +37,7 @@ const StyledHeadCell = styled.th<{ $disabled: boolean }>` css` &:active { &:before { - ${createBorderStyles({ invert: true, windowBorders: true })} + ${createBorderStyles({ invert: true, style: 'window' })} border-left: none; border-top: none; padding-top: 2px; diff --git a/src/Window/Window.stories.tsx b/src/Window/Window.stories.tsx index 050a044e..e27b4c62 100644 --- a/src/Window/Window.stories.tsx +++ b/src/Window/Window.stories.tsx @@ -2,7 +2,7 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; import { Button, - Panel, + Frame, Toolbar, Window, WindowContent, @@ -97,9 +97,9 @@ export function Default() { you tho!)

- + Put some useful information here - + diff --git a/src/Window/Window.tsx b/src/Window/Window.tsx index a8b10eab..a1c2d6b0 100644 --- a/src/Window/Window.tsx +++ b/src/Window/Window.tsx @@ -15,7 +15,7 @@ const StyledWindow = styled.div` position: relative; padding: 4px; font-size: 1rem; - ${createBorderStyles({ windowBorders: true })} + ${createBorderStyles({ style: 'window' })} ${createBoxStyles()} `; diff --git a/src/common/index.ts b/src/common/index.ts index 9f90ae7b..6789ed15 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -1,5 +1,5 @@ import { css } from 'styled-components'; -import { Color, CommonThemeProps } from '../types'; +import { Color, CommonThemeProps, Theme } from '../types'; export const shadow = '4px 4px 10px 0 rgba(0, 0, 0, 0.35)'; export const insetShadow = 'inset 2px 2px 3px rgba(0,0,0,0.2)'; @@ -11,11 +11,17 @@ export const createDisabledTextStyles = () => css` /* filter: grayscale(100%); */ `; -export const createBoxStyles = () => css` +export const createBoxStyles = ({ + background = 'material', + color = 'materialText' +}: { + background?: keyof Theme; + color?: keyof Theme; +} = {}) => css` box-sizing: border-box; display: inline-block; - background: ${({ theme }) => theme.material}; - color: ${({ theme }) => theme.materialText}; + background: ${({ theme }) => theme[background]}; + color: ${({ theme }) => theme[color]}; `; // TODO for flat box styles add checkered background when disabled (not solid color) @@ -57,56 +63,137 @@ export const createFlatBoxStyles = () => css` outline-offset: -4px; `; +export type BorderStyles = + | 'button' + | 'buttonPressed' + | 'buttonThin' + | 'buttonThinPressed' + | 'field' + | 'grouping' + | 'status' + | 'window'; + +type BorderStyle = { + topLeftOuter: keyof Theme; + topLeftInner: keyof Theme | null; + bottomRightInner: keyof Theme | null; + bottomRightOuter: keyof Theme; +}; + +const borderStyles: Record = { + button: { + topLeftOuter: 'borderLightest', + topLeftInner: 'borderLight', + bottomRightInner: 'borderDark', + bottomRightOuter: 'borderDarkest' + }, + buttonPressed: { + topLeftOuter: 'borderDarkest', + topLeftInner: 'borderDark', + bottomRightInner: 'borderLight', + bottomRightOuter: 'borderLightest' + }, + buttonThin: { + topLeftOuter: 'borderLightest', + topLeftInner: null, + bottomRightInner: null, + bottomRightOuter: 'borderDark' + }, + buttonThinPressed: { + topLeftOuter: 'borderDark', + topLeftInner: null, + bottomRightInner: null, + bottomRightOuter: 'borderLightest' + }, + field: { + topLeftOuter: 'borderDark', + topLeftInner: 'borderDarkest', + bottomRightInner: 'borderLight', + bottomRightOuter: 'borderLightest' + }, + grouping: { + topLeftOuter: 'borderDark', + topLeftInner: 'borderLightest', + bottomRightInner: 'borderDark', + bottomRightOuter: 'borderLightest' + }, + status: { + topLeftOuter: 'borderDark', + topLeftInner: null, + bottomRightInner: null, + bottomRightOuter: 'borderLightest' + }, + window: { + topLeftOuter: 'borderLight', + topLeftInner: 'borderLightest', + bottomRightInner: 'borderDark', + bottomRightOuter: 'borderDarkest' + } +}; + +export const createInnerBorderWithShadow = ({ + theme, + topLeftInner, + bottomRightInner, + hasShadow = false, + hasInsetShadow = false +}: { + theme: Theme; + topLeftInner: keyof Theme | null; + bottomRightInner: keyof Theme | null; + hasShadow?: boolean; + hasInsetShadow?: boolean; +}) => + [ + hasShadow ? shadow : false, + hasInsetShadow ? insetShadow : false, + topLeftInner !== null + ? `inset 1px 1px 0px 1px ${theme[topLeftInner]}` + : false, + bottomRightInner !== null + ? `inset -1px -1px 0 1px ${theme[bottomRightInner]}` + : false + ] + .filter(Boolean) + .join(', '); + export const createBorderStyles = ({ invert = false, - windowBorders = false -} = {}) => - invert - ? css` - border-style: solid; - border-width: 2px; - border-left-color: ${({ theme }) => theme.borderDarkest}; - border-top-color: ${({ theme }) => theme.borderDarkest}; - border-right-color: ${({ theme }) => theme.borderLightest}; - border-bottom-color: ${({ theme }) => theme.borderLightest}; - box-shadow: ${props => props.shadow && `${shadow}, `} inset 1px 1px 0px - 1px ${({ theme }) => theme.borderDark}, - inset -1px -1px 0 1px ${({ theme }) => theme.borderLight}; - ` - : css` - border-style: solid; - border-width: 2px; - border-left-color: ${({ theme }) => - windowBorders ? theme.borderLight : theme.borderLightest}; - border-top-color: ${({ theme }) => - windowBorders ? theme.borderLight : theme.borderLightest}; - border-right-color: ${({ theme }) => theme.borderDarkest}; - border-bottom-color: ${({ theme }) => theme.borderDarkest}; - box-shadow: ${props => props.shadow && `${shadow}, `} inset 1px 1px 0px - 1px - ${({ theme }) => - windowBorders ? theme.borderLightest : theme.borderLight}, - inset -1px -1px 0 1px ${({ theme }) => theme.borderDark}; - `; + style = 'button' +}: { invert?: boolean; style?: BorderStyles } = {}) => { + const borders = { + topLeftOuter: invert ? 'bottomRightOuter' : 'topLeftOuter', + topLeftInner: invert ? 'bottomRightInner' : 'topLeftInner', + bottomRightInner: invert ? 'topLeftInner' : 'bottomRightInner', + bottomRightOuter: invert ? 'topLeftOuter' : 'bottomRightOuter' + } as const; + return css` + border-style: solid; + border-width: 2px; + border-left-color: ${({ theme }) => + theme[borderStyles[style][borders.topLeftOuter]]}; + border-top-color: ${({ theme }) => + theme[borderStyles[style][borders.topLeftOuter]]}; + border-right-color: ${({ theme }) => + theme[borderStyles[style][borders.bottomRightOuter]]}; + border-bottom-color: ${({ theme }) => + theme[borderStyles[style][borders.bottomRightOuter]]}; + box-shadow: ${({ theme, shadow: hasShadow }) => + createInnerBorderWithShadow({ + theme, + topLeftInner: borderStyles[style][borders.topLeftInner], + bottomRightInner: borderStyles[style][borders.bottomRightInner], + hasShadow + })}; + `; +}; +/** @deprecated Use `createBorderStyles` instead */ export const createWellBorderStyles = (invert = false) => - invert - ? css` - border-style: solid; - border-width: 2px; - border-left-color: ${({ theme }) => theme.borderDark}; - border-top-color: ${({ theme }) => theme.borderDark}; - border-right-color: ${({ theme }) => theme.borderLightest}; - border-bottom-color: ${({ theme }) => theme.borderLightest}; - ` - : css` - border-style: solid; - border-width: 2px; - border-left-color: ${({ theme }) => theme.borderLightest}; - border-top-color: ${({ theme }) => theme.borderLightest}; - border-right-color: ${({ theme }) => theme.borderDark}; - border-bottom-color: ${({ theme }) => theme.borderDark}; - `; + createBorderStyles({ + invert: !invert, + style: 'status' + }); export const focusOutline = () => css` outline: 2px dotted ${({ theme }) => theme.materialText}; @@ -141,7 +228,7 @@ export const createScrollbars = (variant = 'default') => css` ${createBoxStyles()} ${variant === 'flat' ? createFlatBoxStyles() - : createBorderStyles({ windowBorders: true })} + : createBorderStyles({ style: 'window' })} outline-offset: -2px; } @@ -152,7 +239,7 @@ export const createScrollbars = (variant = 'default') => css` ${createBoxStyles()} ${variant === 'flat' ? createFlatBoxStyles() - : createBorderStyles({ windowBorders: true })} + : createBorderStyles({ style: 'window' })} display: block; outline-offset: -2px; height: 26px; @@ -165,7 +252,7 @@ export const createScrollbars = (variant = 'default') => css` ::-webkit-scrollbar-button:active { background-position: 0 1px; ${variant === 'default' - ? createBorderStyles({ windowBorders: true, invert: true }) + ? createBorderStyles({ style: 'window', invert: true }) : ''} } diff --git a/src/index.ts b/src/index.ts index 93e0ea68..04e603e2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,13 +11,13 @@ export * from './Checkbox/Checkbox'; export * from './ColorInput/ColorInput'; export * from './Counter/Counter'; export * from './DatePicker/DatePicker'; +export * from './Frame/Frame'; export * from './GroupBox/GroupBox'; export * from './Handle/Handle'; export * from './Hourglass/Hourglass'; export * from './MenuList/MenuList'; export * from './Monitor/Monitor'; export * from './NumberInput/NumberInput'; -export * from './Panel/Panel'; export * from './ProgressBar/ProgressBar'; export * from './Radio/Radio'; export * from './ScrollView/ScrollView'; @@ -48,4 +48,5 @@ export * from './legacy/Fieldset'; export * from './legacy/List'; export * from './legacy/ListItem'; export * from './legacy/NumberField'; +export * from './legacy/Panel'; export * from './legacy/Progress'; diff --git a/src/legacy/Panel.tsx b/src/legacy/Panel.tsx new file mode 100644 index 00000000..b317f56f --- /dev/null +++ b/src/legacy/Panel.tsx @@ -0,0 +1,7 @@ +import { Frame, FrameProps } from '../Frame/Frame'; + +/** @deprecated Use `FrameProps` */ +export type PanelProps = FrameProps; + +/** @deprecated Use `Frame` */ +export const Panel = Frame; From b19e15b2f4e8f42b380adbad4f3aca66ab79f2a2 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 31 Jul 2022 18:45:12 -0400 Subject: [PATCH 070/100] docs(radio): categorize under Controls --- src/Radio/Radio.mdx | 33 ------------------ src/Radio/Radio.stories.tsx | 2 +- src/Radio/Radio.tsx | 68 ++++++++++++++++++++----------------- 3 files changed, 37 insertions(+), 66 deletions(-) delete mode 100644 src/Radio/Radio.mdx diff --git a/src/Radio/Radio.mdx b/src/Radio/Radio.mdx deleted file mode 100644 index a576344b..00000000 --- a/src/Radio/Radio.mdx +++ /dev/null @@ -1,33 +0,0 @@ ---- -name: Radio -menu: Components ---- - -import { Radio } from './Radio'; -import Fieldset from '../Fieldset/Fieldset'; -import Window from '../Window/Window'; -import WindowContent from '../WindowContent/WindowContent'; - -# Radio - -## Usage - - - - - - - - - -## API - -### Import - -``` -import { Radio } from 'react95' -``` - -### Props - - diff --git a/src/Radio/Radio.stories.tsx b/src/Radio/Radio.stories.tsx index e4b37d08..a36b1543 100644 --- a/src/Radio/Radio.stories.tsx +++ b/src/Radio/Radio.stories.tsx @@ -26,7 +26,7 @@ const Wrapper = styled.div` } `; export default { - title: 'Radio', + title: 'Controls/Radio', component: Radio, decorators: [story => {story()}] } as ComponentMeta; diff --git a/src/Radio/Radio.tsx b/src/Radio/Radio.tsx index 92ab2459..bfcbdda4 100644 --- a/src/Radio/Radio.tsx +++ b/src/Radio/Radio.tsx @@ -136,38 +136,42 @@ const CheckboxComponents = { menu: StyledMenuCheckbox }; -const Radio = forwardRef(function Radio( - { - checked, - className = '', - disabled = false, - label = '', - onChange, - style = {}, - variant = 'default', - ...otherProps - }, - ref -) { - const CheckboxComponent = CheckboxComponents[variant]; +const Radio = forwardRef( + ( + { + checked, + className = '', + disabled = false, + label = '', + onChange, + style = {}, + variant = 'default', + ...otherProps + }, + ref + ) => { + const CheckboxComponent = CheckboxComponents[variant]; - return ( - - - {checked && } - - - {label && {label}} - - ); -}); + return ( + + + {checked && } + + + {label && {label}} + + ); + } +); + +Radio.displayName = 'Radio'; export { Radio, RadioProps }; From ce592abc81e4facf8afd58a60c03f8e09b17cc2e Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 31 Jul 2022 19:36:00 -0400 Subject: [PATCH 071/100] docs(select): categorize under Controls --- src/Select/Select.mdx | 143 ---------------------------------- src/Select/Select.stories.tsx | 2 +- 2 files changed, 1 insertion(+), 144 deletions(-) delete mode 100644 src/Select/Select.mdx diff --git a/src/Select/Select.mdx b/src/Select/Select.mdx deleted file mode 100644 index b4465bf9..00000000 --- a/src/Select/Select.mdx +++ /dev/null @@ -1,143 +0,0 @@ ---- -name: Select -menu: Components ---- - -import { Select } from './Select'; -import { ScrollView } from '../ScrollView/ScrollView'; -import { Window } from '../Window/Window'; -import { WindowContent } from '../WindowContent/WindowContent'; - -# Select - -## Usage - -#### Fixed Width - - - {() => { - const items = [ - { value: 1, label: '⚡ Pikachu' }, - { value: 2, label: '🌿 Bulbasaur' }, - { value: 3, label: '💦 Squirtle' }, - { value: 4, label: '🔥 Charizard' }, - { value: 5, label: '🎤 Jigglypuff' }, - { value: 6, label: '🛌🏻 Snorlax' }, - { value: 7, label: '⛰ Geodude' } - ]; - return ( - console.log(value)} - height={100} - width={150} - /> - ); - }} - - -#### No shadow - - - {() => { - const items = [ - { value: 1, label: '⚡ Pikachu' }, - { value: 2, label: '🌿 Bulbasaur' }, - { value: 3, label: '💦 Squirtle' }, - { value: 4, label: '🔥 Charizard' }, - { value: 5, label: '🎤 Jigglypuff' }, - { value: 6, label: '🛌🏻 Snorlax' }, - { value: 7, label: '⛰ Geodude' } - ]; - return ( - console.log(value)} - height={100} - width={150} - /> - - - - - ); - }} - - -## API - -### Import - -``` -import { Select } from 'react95' -``` - -### Props - - diff --git a/src/Select/Select.stories.tsx b/src/Select/Select.stories.tsx index 29946074..a0621276 100644 --- a/src/Select/Select.stories.tsx +++ b/src/Select/Select.stories.tsx @@ -43,7 +43,7 @@ const onChange = (event: SelectChangeEvent, option: SelectOption) => console.log(event, option); export default { - title: 'Select', + title: 'Controls/Select', component: Select, decorators: [story => {story()}] } as ComponentMeta; From c1d84d4ac43f42912557cc984bb11aa23ad2cadf Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 31 Jul 2022 19:49:39 -0400 Subject: [PATCH 072/100] docs(slider): categorize under Controls --- src/Slider/Slider.stories.tsx | 2 +- src/Slider/Slider.tsx | 658 +++++++++++++++++----------------- 2 files changed, 332 insertions(+), 328 deletions(-) diff --git a/src/Slider/Slider.stories.tsx b/src/Slider/Slider.stories.tsx index dd3fc8eb..b7b96466 100644 --- a/src/Slider/Slider.stories.tsx +++ b/src/Slider/Slider.stories.tsx @@ -35,7 +35,7 @@ const Wrapper = styled.div` `; export default { - title: 'Slider', + title: 'Controls/Slider', component: Slider, decorators: [story => {story()}] } as ComponentMeta; diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx index f1c6196a..574229ad 100644 --- a/src/Slider/Slider.tsx +++ b/src/Slider/Slider.tsx @@ -290,352 +290,356 @@ const Mark = styled.div` `} `; -const Slider = forwardRef(function Slider( - { - defaultValue, - disabled = false, - marks: marksProp = false, - max = 100, - min = 0, - name, - onChange, - onChangeCommitted, - onMouseDown, - orientation = 'horizontal', - size = '100%', - step = 1, - value, - variant = 'default', - ...otherProps - }, - ref -) { - const Groove = variant === 'flat' ? StyledFlatGroove : StyledGroove; - const vertical = orientation === 'vertical'; - const [valueDerived, setValueState] = useControlledOrUncontrolled({ - value, - defaultValue: defaultValue ?? min - }); - - const { - isFocusVisible, - onBlurVisible, - ref: focusVisibleRef - } = useIsFocusVisible(); - const [focusVisible, setFocusVisible] = useState(false); - const sliderRef = useRef(); - const thumbRef = useRef(null); - const handleFocusRef = useForkRef(focusVisibleRef, sliderRef); - const handleRef = useForkRef(ref, handleFocusRef); - - const handleFocus = useCallback( - (event: React.FocusEvent) => { - if (isFocusVisible(event)) { - setFocusVisible(true); - } - }, - [isFocusVisible] - ); - - const handleBlur = useCallback(() => { - if (focusVisible !== false) { - setFocusVisible(false); - onBlurVisible(); - } - }, [focusVisible, onBlurVisible]); - - const touchId = useRef(); - - const marks = useMemo( - () => - marksProp === true && Number.isFinite(step) - ? [...Array(Math.round((max - min) / (step as number)) + 1)].map( - (_, index) => ({ - label: undefined, - value: min + (step as number) * index - }) - ) - : Array.isArray(marksProp) - ? marksProp - : [], - [marksProp, max, min, step] - ); - - const handleKeyDown = useCallback( - (event: React.KeyboardEvent) => { - const tenPercents = (max - min) / 10; - const marksValues = marks.map(mark => mark.value); - const marksIndex = marksValues.indexOf(valueDerived); - let newValue = 0; - - switch (event.key) { - case 'Home': - newValue = min; - break; - case 'End': - newValue = max; - break; - case 'PageUp': - if (step) { - newValue = valueDerived + tenPercents; - } - break; - case 'PageDown': - if (step) { - newValue = valueDerived - tenPercents; - } - break; - case 'ArrowRight': - case 'ArrowUp': - if (step) { - newValue = valueDerived + step; - } else { - newValue = - marksValues[marksIndex + 1] || - marksValues[marksValues.length - 1]; - } - break; - case 'ArrowLeft': - case 'ArrowDown': - if (step) { - newValue = valueDerived - step; - } else { - newValue = marksValues[marksIndex - 1] || marksValues[0]; - } - break; - default: - return; - } - - // Prevent scroll of the page - event.preventDefault(); - if (step) { - newValue = roundValueToStep(newValue, step, min); - } - - newValue = clamp(newValue, min, max); - - setValueState(newValue); - setFocusVisible(true); - - onChange?.(event, newValue); - onChangeCommitted?.(event, newValue); - }, - [ - marks, - max, - min, +const Slider = forwardRef( + ( + { + defaultValue, + disabled = false, + marks: marksProp = false, + max = 100, + min = 0, + name, onChange, onChangeCommitted, - setValueState, - step, - valueDerived - ] - ); - - const getNewValue = useCallback( - (finger: { x: number; y: number }) => { - if (!sliderRef.current) { - return 0; - } - const rect = sliderRef.current.getBoundingClientRect(); - - let percent; - if (vertical) { - percent = (rect.bottom - finger.y) / rect.height; - } else { - percent = (finger.x - rect.left) / rect.width; - } - let newValue; - - newValue = percentToValue(percent, min, max); - if (step) { - newValue = roundValueToStep(newValue, step, min); - } else { - const marksValues = marks.map(mark => mark.value); - const closestIndex = findClosest(marksValues, newValue); - newValue = marksValues[closestIndex]; - } - newValue = clamp(newValue, min, max); - return newValue; + onMouseDown, + orientation = 'horizontal', + size = '100%', + step = 1, + value, + variant = 'default', + ...otherProps }, - [marks, max, min, step, vertical] - ); - - const handleTouchMove = useCallback( - (event: MouseEvent | TouchEvent) => { - const finger = trackFinger(event, touchId.current); - - if (!finger) { - return; + ref + ) => { + const Groove = variant === 'flat' ? StyledFlatGroove : StyledGroove; + const vertical = orientation === 'vertical'; + const [valueDerived, setValueState] = useControlledOrUncontrolled({ + value, + defaultValue: defaultValue ?? min + }); + + const { + isFocusVisible, + onBlurVisible, + ref: focusVisibleRef + } = useIsFocusVisible(); + const [focusVisible, setFocusVisible] = useState(false); + const sliderRef = useRef(); + const thumbRef = useRef(null); + const handleFocusRef = useForkRef(focusVisibleRef, sliderRef); + const handleRef = useForkRef(ref, handleFocusRef); + + const handleFocus = useCallback( + (event: React.FocusEvent) => { + if (isFocusVisible(event)) { + setFocusVisible(true); + } + }, + [isFocusVisible] + ); + + const handleBlur = useCallback(() => { + if (focusVisible !== false) { + setFocusVisible(false); + onBlurVisible(); } - const newValue = getNewValue(finger); - - thumbRef.current?.focus(); - setValueState(newValue); - setFocusVisible(true); + }, [focusVisible, onBlurVisible]); + + const touchId = useRef(); + + const marks = useMemo( + () => + marksProp === true && Number.isFinite(step) + ? [...Array(Math.round((max - min) / (step as number)) + 1)].map( + (_, index) => ({ + label: undefined, + value: min + (step as number) * index + }) + ) + : Array.isArray(marksProp) + ? marksProp + : [], + [marksProp, max, min, step] + ); + + const handleKeyDown = useCallback( + (event: React.KeyboardEvent) => { + const tenPercents = (max - min) / 10; + const marksValues = marks.map(mark => mark.value); + const marksIndex = marksValues.indexOf(valueDerived); + let newValue = 0; + + switch (event.key) { + case 'Home': + newValue = min; + break; + case 'End': + newValue = max; + break; + case 'PageUp': + if (step) { + newValue = valueDerived + tenPercents; + } + break; + case 'PageDown': + if (step) { + newValue = valueDerived - tenPercents; + } + break; + case 'ArrowRight': + case 'ArrowUp': + if (step) { + newValue = valueDerived + step; + } else { + newValue = + marksValues[marksIndex + 1] || + marksValues[marksValues.length - 1]; + } + break; + case 'ArrowLeft': + case 'ArrowDown': + if (step) { + newValue = valueDerived - step; + } else { + newValue = marksValues[marksIndex - 1] || marksValues[0]; + } + break; + default: + return; + } + + // Prevent scroll of the page + event.preventDefault(); + if (step) { + newValue = roundValueToStep(newValue, step, min); + } + + newValue = clamp(newValue, min, max); - onChange?.(event, newValue); - }, - [getNewValue, onChange, setValueState] - ); + setValueState(newValue); + setFocusVisible(true); - const handleTouchEnd = useCallback( - (event: MouseEvent | TouchEvent) => { - const finger = trackFinger(event, touchId.current); + onChange?.(event, newValue); + onChangeCommitted?.(event, newValue); + }, + [ + marks, + max, + min, + onChange, + onChangeCommitted, + setValueState, + step, + valueDerived + ] + ); + + const getNewValue = useCallback( + (finger: { x: number; y: number }) => { + if (!sliderRef.current) { + return 0; + } + const rect = sliderRef.current.getBoundingClientRect(); + + let percent; + if (vertical) { + percent = (rect.bottom - finger.y) / rect.height; + } else { + percent = (finger.x - rect.left) / rect.width; + } + let newValue; + + newValue = percentToValue(percent, min, max); + if (step) { + newValue = roundValueToStep(newValue, step, min); + } else { + const marksValues = marks.map(mark => mark.value); + const closestIndex = findClosest(marksValues, newValue); + newValue = marksValues[closestIndex]; + } + newValue = clamp(newValue, min, max); + return newValue; + }, + [marks, max, min, step, vertical] + ); + + const handleTouchMove = useCallback( + (event: MouseEvent | TouchEvent) => { + const finger = trackFinger(event, touchId.current); + + if (!finger) { + return; + } + const newValue = getNewValue(finger); - if (!finger) { - return; - } + thumbRef.current?.focus(); + setValueState(newValue); + setFocusVisible(true); - const newValue = getNewValue(finger); + onChange?.(event, newValue); + }, + [getNewValue, onChange, setValueState] + ); - onChangeCommitted?.(event, newValue); + const handleTouchEnd = useCallback( + (event: MouseEvent | TouchEvent) => { + const finger = trackFinger(event, touchId.current); - touchId.current = undefined; + if (!finger) { + return; + } - const doc = ownerDocument(sliderRef.current); - doc.removeEventListener('mousemove', handleTouchMove); - doc.removeEventListener('mouseup', handleTouchEnd); - doc.removeEventListener('touchmove', handleTouchMove); - doc.removeEventListener('touchend', handleTouchEnd); - }, - [getNewValue, handleTouchMove, onChangeCommitted] - ); + const newValue = getNewValue(finger); - const handleMouseDown = useCallback( - (event: React.MouseEvent) => { - // TODO should we also pass event together with new value to callbacks? (same thing with other input components) - onMouseDown?.(event); + onChangeCommitted?.(event, newValue); - event.preventDefault(); - thumbRef.current?.focus(); - setFocusVisible(true); + touchId.current = undefined; - const finger = trackFinger(event, touchId.current); - if (finger) { - const newValue = getNewValue(finger); - setValueState(newValue); - onChange?.(event, newValue); - } + const doc = ownerDocument(sliderRef.current); + doc.removeEventListener('mousemove', handleTouchMove); + doc.removeEventListener('mouseup', handleTouchEnd); + doc.removeEventListener('touchmove', handleTouchMove); + doc.removeEventListener('touchend', handleTouchEnd); + }, + [getNewValue, handleTouchMove, onChangeCommitted] + ); - const doc = ownerDocument(sliderRef.current); - doc.addEventListener('mousemove', handleTouchMove); - doc.addEventListener('mouseup', handleTouchEnd); - }, - [ - getNewValue, - handleTouchEnd, - handleTouchMove, - onChange, - onMouseDown, - setValueState - ] - ); - - const handleTouchStart = useCallback( - (event: TouchEvent) => { - // Workaround as Safari has partial support for touchAction: 'none'. - event.preventDefault(); - const touch = event.changedTouches[0]; - if (touch != null) { - // A number that uniquely identifies the current finger in the touch session. - touchId.current = touch.identifier; - } + const handleMouseDown = useCallback( + (event: React.MouseEvent) => { + // TODO should we also pass event together with new value to callbacks? (same thing with other input components) + onMouseDown?.(event); - thumbRef.current?.focus(); - setFocusVisible(true); + event.preventDefault(); + thumbRef.current?.focus(); + setFocusVisible(true); - const finger = trackFinger(event, touchId.current); - if (finger) { - const newValue = getNewValue(finger); - setValueState(newValue); - onChange?.(event, newValue); - } + const finger = trackFinger(event, touchId.current); + if (finger) { + const newValue = getNewValue(finger); + setValueState(newValue); + onChange?.(event, newValue); + } + + const doc = ownerDocument(sliderRef.current); + doc.addEventListener('mousemove', handleTouchMove); + doc.addEventListener('mouseup', handleTouchEnd); + }, + [ + getNewValue, + handleTouchEnd, + handleTouchMove, + onChange, + onMouseDown, + setValueState + ] + ); + + const handleTouchStart = useCallback( + (event: TouchEvent) => { + // Workaround as Safari has partial support for touchAction: 'none'. + event.preventDefault(); + const touch = event.changedTouches[0]; + if (touch != null) { + // A number that uniquely identifies the current finger in the touch session. + touchId.current = touch.identifier; + } + + thumbRef.current?.focus(); + setFocusVisible(true); - const doc = ownerDocument(sliderRef.current); - doc.addEventListener('touchmove', handleTouchMove); - doc.addEventListener('touchend', handleTouchEnd); - }, - [getNewValue, handleTouchEnd, handleTouchMove, onChange, setValueState] - ); - - useEffect(() => { - const { current: slider } = sliderRef; - slider?.addEventListener('touchstart', handleTouchStart); - const doc = ownerDocument(slider); - - return () => { - slider?.removeEventListener('touchstart', handleTouchStart); - doc.removeEventListener('mousemove', handleTouchMove); - doc.removeEventListener('mouseup', handleTouchEnd); - doc.removeEventListener('touchmove', handleTouchMove); - doc.removeEventListener('touchend', handleTouchEnd); - }; - }, [handleTouchEnd, handleTouchMove, handleTouchStart]); - - return ( - - {/* should we keep the hidden input ? */} - - {marks && - marks.map(m => ( - - {m.label && ( - - {m.label} - - )} - - ))} - - { + const { current: slider } = sliderRef; + slider?.addEventListener('touchstart', handleTouchStart); + const doc = ownerDocument(slider); + + return () => { + slider?.removeEventListener('touchstart', handleTouchStart); + doc.removeEventListener('mousemove', handleTouchMove); + doc.removeEventListener('mouseup', handleTouchEnd); + doc.removeEventListener('touchmove', handleTouchMove); + doc.removeEventListener('touchend', handleTouchEnd); + }; + }, [handleTouchEnd, handleTouchMove, handleTouchStart]); + + return ( + - - ); -}); + ref={handleRef} + size={getSize(size)} + {...otherProps} + > + {/* should we keep the hidden input ? */} + + {marks && + marks.map(m => ( + + {m.label && ( + + {m.label} + + )} + + ))} + + + + ); + } +); + +Slider.displayName = 'Slider'; export { Slider, SliderProps }; From b2b2230b117bb5d4739ee4bda23d34d944ac409a Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 31 Jul 2022 19:55:56 -0400 Subject: [PATCH 073/100] docs(table): categorize under Controls This also moves the Table* subcomponents into the Table folder. --- src/Table/Table.mdx | 76 ------------------- src/Table/Table.stories.tsx | 2 +- src/Table/Table.tsx | 31 +++++--- src/{TableBody => Table}/TableBody.spec.tsx | 0 src/{TableBody => Table}/TableBody.tsx | 2 + .../TableDataCell.spec.tsx | 0 .../TableDataCell.tsx | 2 + src/{TableHead => Table}/TableHead.spec.tsx | 0 src/{TableHead => Table}/TableHead.tsx | 2 + .../TableHeadCell.spec.tsx | 0 .../TableHeadCell.tsx | 2 + src/{TableRow => Table}/TableRow.spec.tsx | 0 src/{TableRow => Table}/TableRow.tsx | 2 + src/index.ts | 5 -- 14 files changed, 30 insertions(+), 94 deletions(-) delete mode 100644 src/Table/Table.mdx rename src/{TableBody => Table}/TableBody.spec.tsx (100%) rename src/{TableBody => Table}/TableBody.tsx (95%) rename src/{TableDataCell => Table}/TableDataCell.spec.tsx (100%) rename src/{TableDataCell => Table}/TableDataCell.tsx (92%) rename src/{TableHead => Table}/TableHead.spec.tsx (100%) rename src/{TableHead => Table}/TableHead.tsx (94%) rename src/{TableHeadCell => Table}/TableHeadCell.spec.tsx (100%) rename src/{TableHeadCell => Table}/TableHeadCell.tsx (97%) rename src/{TableRow => Table}/TableRow.spec.tsx (100%) rename src/{TableRow => Table}/TableRow.tsx (96%) diff --git a/src/Table/Table.mdx b/src/Table/Table.mdx deleted file mode 100644 index 66276c24..00000000 --- a/src/Table/Table.mdx +++ /dev/null @@ -1,76 +0,0 @@ ---- -name: Table -menu: Components ---- - -import { Table } from './Table'; -import { TableBody } from '../TableBody/TableBody'; -import { TableHead } from '../TableHead/TableHead'; -import { TableRow } from '../TableRow/TableRow'; -import { TableHeadCell } from '../TableHeadCell/TableHeadCell'; -import { TableDataCell } from '../TableDataCell/TableDataCell'; -import Window from '../Window/Window'; -import WindowHeader from '../WindowHeader/WindowHeader'; -import WindowContent from '../WindowContent/WindowContent'; - -# Table - -## Usage - - - - Pokedex.exe - - - - - Type - Name - Level - - - - - - - 🌿 - - - Bulbasaur - 64 - - - - - 🔥 - - - Charizard - 209 - - - - - ⚡ - - - Pikachu - 82 - - -
- - - - -## API - -### Import - -``` -import { Table } from 'react95' -``` - -### Props - - diff --git a/src/Table/Table.stories.tsx b/src/Table/Table.stories.tsx index 98713dfc..0b524b50 100644 --- a/src/Table/Table.stories.tsx +++ b/src/Table/Table.stories.tsx @@ -19,7 +19,7 @@ const Wrapper = styled.div` `; export default { - title: 'Table', + title: 'Controls/Table', component: Table, subcomponents: { Table, diff --git a/src/Table/Table.tsx b/src/Table/Table.tsx index b6ab5c9d..9f82c79b 100644 --- a/src/Table/Table.tsx +++ b/src/Table/Table.tsx @@ -22,17 +22,24 @@ const Wrapper = styled(StyledScrollView)` } `; -const Table = forwardRef(function Table( - { children, ...otherProps }, - ref -) { - return ( - - - {children} - - - ); -}); +const Table = forwardRef( + ({ children, ...otherProps }, ref) => { + return ( + + + {children} + + + ); + } +); + +Table.displayName = 'Table'; + +export * from './TableBody'; +export * from './TableDataCell'; +export * from './TableHead'; +export * from './TableHeadCell'; +export * from './TableRow'; export { Table, TableProps }; diff --git a/src/TableBody/TableBody.spec.tsx b/src/Table/TableBody.spec.tsx similarity index 100% rename from src/TableBody/TableBody.spec.tsx rename to src/Table/TableBody.spec.tsx diff --git a/src/TableBody/TableBody.tsx b/src/Table/TableBody.tsx similarity index 95% rename from src/TableBody/TableBody.tsx rename to src/Table/TableBody.tsx index 0c5ef687..542de3a0 100644 --- a/src/TableBody/TableBody.tsx +++ b/src/Table/TableBody.tsx @@ -25,4 +25,6 @@ const TableBody = forwardRef( } ); +TableBody.displayName = 'TableBody'; + export { TableBody, TableBodyProps }; diff --git a/src/TableDataCell/TableDataCell.spec.tsx b/src/Table/TableDataCell.spec.tsx similarity index 100% rename from src/TableDataCell/TableDataCell.spec.tsx rename to src/Table/TableDataCell.spec.tsx diff --git a/src/TableDataCell/TableDataCell.tsx b/src/Table/TableDataCell.tsx similarity index 92% rename from src/TableDataCell/TableDataCell.tsx rename to src/Table/TableDataCell.tsx index 764445fe..f97f8b76 100644 --- a/src/TableDataCell/TableDataCell.tsx +++ b/src/Table/TableDataCell.tsx @@ -21,4 +21,6 @@ const TableDataCell = forwardRef( } ); +TableDataCell.displayName = 'TableDataCell'; + export { TableDataCell, TableDataCellProps }; diff --git a/src/TableHead/TableHead.spec.tsx b/src/Table/TableHead.spec.tsx similarity index 100% rename from src/TableHead/TableHead.spec.tsx rename to src/Table/TableHead.spec.tsx diff --git a/src/TableHead/TableHead.tsx b/src/Table/TableHead.tsx similarity index 94% rename from src/TableHead/TableHead.tsx rename to src/Table/TableHead.tsx index 14afd6e3..368c4da5 100644 --- a/src/TableHead/TableHead.tsx +++ b/src/Table/TableHead.tsx @@ -20,4 +20,6 @@ const TableHead = forwardRef( } ); +TableHead.displayName = 'TableHead'; + export { TableHead, TableHeadProps }; diff --git a/src/TableHeadCell/TableHeadCell.spec.tsx b/src/Table/TableHeadCell.spec.tsx similarity index 100% rename from src/TableHeadCell/TableHeadCell.spec.tsx rename to src/Table/TableHeadCell.spec.tsx diff --git a/src/TableHeadCell/TableHeadCell.tsx b/src/Table/TableHeadCell.tsx similarity index 97% rename from src/TableHeadCell/TableHeadCell.tsx rename to src/Table/TableHeadCell.tsx index 81daf51f..e653d6b6 100644 --- a/src/TableHeadCell/TableHeadCell.tsx +++ b/src/Table/TableHeadCell.tsx @@ -88,4 +88,6 @@ const TableHeadCell = forwardRef( } ); +TableHeadCell.displayName = 'TableHeadCell'; + export { TableHeadCell, TableHeadCellProps }; diff --git a/src/TableRow/TableRow.spec.tsx b/src/Table/TableRow.spec.tsx similarity index 100% rename from src/TableRow/TableRow.spec.tsx rename to src/Table/TableRow.spec.tsx diff --git a/src/TableRow/TableRow.tsx b/src/Table/TableRow.tsx similarity index 96% rename from src/TableRow/TableRow.tsx rename to src/Table/TableRow.tsx index 3c30d8ca..b601c093 100644 --- a/src/TableRow/TableRow.tsx +++ b/src/Table/TableRow.tsx @@ -31,4 +31,6 @@ const TableRow = forwardRef( } ); +TableRow.displayName = 'TableRow'; + export { TableRow, TableRowProps }; diff --git a/src/index.ts b/src/index.ts index 04e603e2..7ad043b8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -25,11 +25,6 @@ export * from './Select/Select'; export * from './Separator/Separator'; export * from './Slider/Slider'; export * from './Table/Table'; -export * from './TableBody/TableBody'; -export * from './TableDataCell/TableDataCell'; -export * from './TableHead/TableHead'; -export * from './TableHeadCell/TableHeadCell'; -export * from './TableRow/TableRow'; export * from './Tabs/Tabs'; export * from './TextField/TextField'; export * from './Toolbar/Toolbar'; From f10e7fea7f924f3ddc345cdc770f030f0dd3f7bf Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 31 Jul 2022 20:01:54 -0400 Subject: [PATCH 074/100] refactor(textinput): categorize under Controls, rename TextField to TextInput --- src/AppBar/AppBar.stories.tsx | 4 +- src/NumberInput/NumberInput.tsx | 4 +- src/TextField/TextField.mdx | 112 --------------- .../TextInout.stories.tsx} | 24 ++-- .../TextInput.spec.tsx} | 28 ++-- .../TextField.tsx => TextInput/TextInput.tsx} | 128 +++++++++--------- src/index.ts | 3 +- src/legacy/TextField.tsx | 7 + 8 files changed, 105 insertions(+), 205 deletions(-) delete mode 100644 src/TextField/TextField.mdx rename src/{TextField/TextField.stories.tsx => TextInput/TextInout.stories.tsx} (88%) rename src/{TextField/TextField.spec.tsx => TextInput/TextInput.spec.tsx} (81%) rename src/{TextField/TextField.tsx => TextInput/TextInput.tsx} (59%) create mode 100644 src/legacy/TextField.tsx diff --git a/src/AppBar/AppBar.stories.tsx b/src/AppBar/AppBar.stories.tsx index 6e75a732..c8fc80e9 100644 --- a/src/AppBar/AppBar.stories.tsx +++ b/src/AppBar/AppBar.stories.tsx @@ -6,7 +6,7 @@ import { MenuList, MenuListItem, Separator, - TextField, + TextInput, Toolbar } from 'react95'; import styled from 'styled-components'; @@ -74,7 +74,7 @@ export function Default() { )} - + ); diff --git a/src/NumberInput/NumberInput.tsx b/src/NumberInput/NumberInput.tsx index 3e85b8a6..7ef5d3f4 100644 --- a/src/NumberInput/NumberInput.tsx +++ b/src/NumberInput/NumberInput.tsx @@ -5,7 +5,7 @@ import { Button } from '../Button/Button'; import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled'; import { blockSizes } from '../common/system'; import { clamp, getSize } from '../common/utils'; -import { TextField } from '../TextField/TextField'; +import { TextInput } from '../TextInput/TextInput'; import { CommonStyledProps } from '../types'; type NumberInputProps = { @@ -163,7 +163,7 @@ const NumberInput = forwardRef( width: width !== undefined ? getSize(width) : 'auto' }} > - - console.log(e.target.value)} /> - - -#### No shadow - - - console.log(e.target.value)} - /> - - -#### Disabled - - - console.log(e.target.value)} - disabled - /> - - -#### Custom width - - - console.log(e.target.value)} - /> - - -#### Flat - - - -

- When you want to add input field on a light background (like scrollable - content), just use the flat variant: -

-
- - console.log(e.target.value)} - /> -
- - - -#### Flat disabled - - - -

- When you want to add input field on a light background (like scrollable - content), just use the flat variant: -

-
- - console.log(e.target.value)} - disabled - /> -
- - - -## API - -### Import - -``` -import { TextField } from 'react95' -``` - -### Props - - diff --git a/src/TextField/TextField.stories.tsx b/src/TextInput/TextInout.stories.tsx similarity index 88% rename from src/TextField/TextField.stories.tsx rename to src/TextInput/TextInout.stories.tsx index 6a715117..c7638eb1 100644 --- a/src/TextField/TextField.stories.tsx +++ b/src/TextInput/TextInout.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta } from '@storybook/react'; import React, { useState } from 'react'; -import { Button, ScrollView, TextField } from 'react95'; +import { Button, ScrollView, TextInput } from 'react95'; import styled from 'styled-components'; const loremIpsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin, ante vel porttitor posuere, tellus nisi interdum ipsum, non bibendum ante risus ut purus. Curabitur vel posuere odio. Vivamus rutrum, nunc et ullamcorper sagittis, tellus ligula maximus quam, id dapibus sapien metus lobortis diam. Proin luctus, dolor in finibus feugiat, lacus enim gravida sem, quis aliquet tellus leo nec enim. Morbi varius bibendum augue quis venenatis. Curabitur ut elit augue. Pellentesque posuere enim a mattis interdum. Donec sodales convallis turpis, a vulputate elit. Suspendisse potenti.`; @@ -19,10 +19,10 @@ const Wrapper = styled.div` `; export default { - title: 'TextField', - component: TextField, + title: 'Controls/TextInput', + component: TextInput, decorators: [story => {story()}] -} as ComponentMeta; +} as ComponentMeta; export function Default() { const [state, setState] = useState({ @@ -36,7 +36,7 @@ export function Default() { return (
-

- +
- +
-
-
-
-
- ', () => { +describe('', () => { it('should render an inside the div', () => { - const { container } = renderWithTheme(); + const { container } = renderWithTheme(); const input = container.querySelector('input'); expect(input).toHaveAttribute('type', 'text'); expect(input).not.toHaveAttribute('required'); @@ -21,7 +21,7 @@ describe('', () => { const handleKeyUp = jest.fn(); const handleKeyDown = jest.fn(); const { getByRole } = renderWithTheme( - ', () => { }); it('should considered [] as controlled', () => { - const { getByRole } = renderWithTheme(); + const { getByRole } = renderWithTheme(); const input = getByRole('textbox'); expect(input).toHaveProperty('value', ''); @@ -60,20 +60,20 @@ describe('', () => { it('should forwardRef to native input', () => { const inputRef = React.createRef(); - const { getByRole } = renderWithTheme(); + const { getByRole } = renderWithTheme(); const input = getByRole('textbox'); expect(inputRef.current).toBe(input); }); describe('multiline', () => { it('should render textarea when passed the multiline prop', () => { - const { container } = renderWithTheme(); + const { container } = renderWithTheme(); const textarea = container.querySelector('textarea'); expect(textarea).not.toBe(null); }); it('should forward rows prop', () => { - const { container } = renderWithTheme(); + const { container } = renderWithTheme(); const textarea = container.querySelector('textarea'); expect(textarea).toHaveAttribute('rows', '3'); }); @@ -81,13 +81,13 @@ describe('', () => { describe('prop: disabled', () => { it('should render a disabled ', () => { - const { container } = renderWithTheme(); + const { container } = renderWithTheme(); const input = container.querySelector('input'); expect(input).toHaveAttribute('disabled'); }); it('should be overridden by props', () => { - const { getByRole, rerender } = renderWithTheme(); - rerender(); + const { getByRole, rerender } = renderWithTheme(); + rerender(); const input = getByRole('textbox'); expect(input).not.toHaveAttribute('disabled'); }); @@ -95,18 +95,18 @@ describe('', () => { describe('prop: variant', () => { it('should be "default" by default', () => { - const { getByTestId } = renderWithTheme(); + const { getByTestId } = renderWithTheme(); expect(getByTestId('variant-default')).toBeInTheDocument(); }); it('should handle "flat" variant', () => { - const { getByTestId } = renderWithTheme(); + const { getByTestId } = renderWithTheme(); expect(getByTestId('variant-flat')).toBeInTheDocument(); }); }); describe('prop: fullWidth', () => { it('should make component take 100% width', () => { - const { container } = renderWithTheme(); + const { container } = renderWithTheme(); expect( window.getComputedStyle(container.firstChild as HTMLInputElement).width ).toBe('100%'); diff --git a/src/TextField/TextField.tsx b/src/TextInput/TextInput.tsx similarity index 59% rename from src/TextField/TextField.tsx rename to src/TextInput/TextInput.tsx index 37ee1511..11f92999 100644 --- a/src/TextField/TextField.tsx +++ b/src/TextInput/TextInput.tsx @@ -10,7 +10,7 @@ import { noOp } from '../common/utils'; import { StyledScrollView } from '../ScrollView/ScrollView'; import { CommonStyledProps, CommonThemeProps } from '../types'; -type TextFieldInputProps = { +type TextInputInputProps = { multiline?: false | undefined; onChange?: React.ChangeEventHandler; /** @default text */ @@ -20,7 +20,7 @@ type TextFieldInputProps = { 'className' | 'disabled' | 'style' | 'type' >; -type TextFieldTextAreaProps = { +type TextInputTextAreaProps = { multiline: true; onChange?: React.ChangeEventHandler; } & Omit< @@ -28,7 +28,7 @@ type TextFieldTextAreaProps = { 'className' | 'disabled' | 'style' | 'type' >; -type TextFieldProps = { +type TextInputProps = { className?: string; disabled?: boolean; fullWidth?: boolean; @@ -36,10 +36,10 @@ type TextFieldProps = { shadow?: boolean; style?: React.CSSProperties; variant?: 'default' | 'flat'; -} & (TextFieldInputProps | TextFieldTextAreaProps) & +} & (TextInputInputProps | TextInputTextAreaProps) & CommonStyledProps; -type WrapperProps = Pick & +type WrapperProps = Pick & CommonThemeProps; const sharedWrapperStyles = css` @@ -65,7 +65,7 @@ const FlatWrapper = styled.div.attrs({ position: relative; `; -type InputProps = Pick; +type InputProps = Pick; const sharedInputStyles = css` display: block; @@ -95,60 +95,64 @@ const StyledTextArea = styled.textarea` ${({ variant }) => createScrollbars(variant)} `; -const TextField = forwardRef< +const TextInput = forwardRef< HTMLInputElement | HTMLTextAreaElement, - TextFieldProps ->(function TextField( - { - className, - disabled = false, - fullWidth, - onChange = noOp, - shadow = true, - style, - variant = 'default', - ...otherProps - }, - ref -) { - const WrapperComponent = variant === 'flat' ? FlatWrapper : Wrapper; - - const field = useMemo( - () => - otherProps.multiline ? ( - - ) : ( - - ), - [disabled, onChange, otherProps, ref, variant] - ); - - return ( - - {field} - - ); -}); - -export { TextField, TextFieldProps }; + TextInputProps +>( + ( + { + className, + disabled = false, + fullWidth, + onChange = noOp, + shadow = true, + style, + variant = 'default', + ...otherProps + }, + ref + ) => { + const WrapperComponent = variant === 'flat' ? FlatWrapper : Wrapper; + + const field = useMemo( + () => + otherProps.multiline ? ( + + ) : ( + + ), + [disabled, onChange, otherProps, ref, variant] + ); + + return ( + + {field} + + ); + } +); + +TextInput.displayName = 'TextInput'; + +export { TextInput, TextInputProps }; diff --git a/src/index.ts b/src/index.ts index 7ad043b8..ff4f7b92 100644 --- a/src/index.ts +++ b/src/index.ts @@ -26,7 +26,7 @@ export * from './Separator/Separator'; export * from './Slider/Slider'; export * from './Table/Table'; export * from './Tabs/Tabs'; -export * from './TextField/TextField'; +export * from './TextInput/TextInput'; export * from './Toolbar/Toolbar'; export * from './Tooltip/Tooltip'; export * from './Tree/Tree'; @@ -45,3 +45,4 @@ export * from './legacy/ListItem'; export * from './legacy/NumberField'; export * from './legacy/Panel'; export * from './legacy/Progress'; +export * from './legacy/TextField'; diff --git a/src/legacy/TextField.tsx b/src/legacy/TextField.tsx new file mode 100644 index 00000000..9a97a941 --- /dev/null +++ b/src/legacy/TextField.tsx @@ -0,0 +1,7 @@ +import { TextInput, TextInputProps } from '../TextInput/TextInput'; + +/** @deprecated Use `TextInputProps` */ +export type TextFieldProps = TextInputProps; + +/** @deprecated Use `TextInput` */ +export const TextField = TextInput; From c42c3b410f5122c1d7e7e3fd7b2de39ecb77c0dd Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 31 Jul 2022 20:04:09 -0400 Subject: [PATCH 075/100] docs(tooltip): categorize under Controls --- src/Tooltip/Tooltip.mdx | 29 ---- src/Tooltip/Tooltip.stories.tsx | 2 +- src/Tooltip/Tooltip.tsx | 242 ++++++++++++++++---------------- 3 files changed, 124 insertions(+), 149 deletions(-) delete mode 100644 src/Tooltip/Tooltip.mdx diff --git a/src/Tooltip/Tooltip.mdx b/src/Tooltip/Tooltip.mdx deleted file mode 100644 index 2f18c020..00000000 --- a/src/Tooltip/Tooltip.mdx +++ /dev/null @@ -1,29 +0,0 @@ ---- -name: Tooltip -menu: Components ---- - -import { Tooltip } from './Tooltip'; -import { Button } from '../Button/Button'; - -# Tooltip - -## Usage - - - - - - - -## API - -### Import - -``` -import { Tooltip } from 'react95' -``` - -### Props - - diff --git a/src/Tooltip/Tooltip.stories.tsx b/src/Tooltip/Tooltip.stories.tsx index 2ad6f141..186af133 100644 --- a/src/Tooltip/Tooltip.stories.tsx +++ b/src/Tooltip/Tooltip.stories.tsx @@ -9,7 +9,7 @@ const Wrapper = styled.div` `; export default { - title: 'Tooltip', + title: 'Controls/Tooltip', component: Tooltip, decorators: [story => {story()}] } as ComponentMeta; diff --git a/src/Tooltip/Tooltip.tsx b/src/Tooltip/Tooltip.tsx index a71d894d..60cf5558 100644 --- a/src/Tooltip/Tooltip.tsx +++ b/src/Tooltip/Tooltip.tsx @@ -68,126 +68,130 @@ const Wrapper = styled.div` white-space: nowrap; `; -const Tooltip = forwardRef(function Tooltip( - { - className, - children, - disableFocusListener = false, - disableMouseListener = false, - enterDelay = 1000, - leaveDelay = 0, - onBlur, - onClose, - onFocus, - onMouseEnter, - onMouseLeave, - onOpen, - style, - text, - position = 'top', - ...otherProps - }, - ref -) { - const [show, setShow] = useState(false); - const [openTimer, setOpenTimer] = useState(); - const [closeTimer, setCloseTimer] = useState(); - - const isUsingFocus = !disableFocusListener; - const isUsingMouse = !disableMouseListener; - - const handleOpen = ( - event: React.FocusEvent | React.MouseEvent - ) => { - window.clearTimeout(openTimer); - window.clearTimeout(closeTimer); - - const timer = window.setTimeout(() => { - setShow(true); - - onOpen?.(event); - }, enterDelay); - - setOpenTimer(timer); - }; - - const handleEnter = ( - event: React.FocusEvent | React.MouseEvent - ) => { - event.persist(); - - if (isReactFocusEvent(event)) { - onFocus?.(event); - } else if (isReactMouseEvent(event)) { - onMouseEnter?.(event); - } - - handleOpen(event); - }; - - const handleClose = ( - event: React.FocusEvent | React.MouseEvent - ) => { - window.clearTimeout(openTimer); - window.clearTimeout(closeTimer); - - const timer = window.setTimeout(() => { - setShow(false); - - onClose?.(event); - }, leaveDelay); - - setCloseTimer(timer); - }; - - const handleLeave = ( - event: React.FocusEvent | React.MouseEvent +const Tooltip = forwardRef( + ( + { + className, + children, + disableFocusListener = false, + disableMouseListener = false, + enterDelay = 1000, + leaveDelay = 0, + onBlur, + onClose, + onFocus, + onMouseEnter, + onMouseLeave, + onOpen, + style, + text, + position = 'top', + ...otherProps + }, + ref ) => { - event.persist(); - - if (isReactFocusEvent(event)) { - onBlur?.(event); - } else if (isReactMouseEvent(event)) { - onMouseLeave?.(event); - } - - handleClose(event); - }; - - // set callbacks for onBlur and onFocus, unless disableFocusListener is true - const blurCb = isUsingFocus ? handleLeave : undefined; - const focusCb = isUsingFocus ? handleEnter : undefined; - - // set callbacks for onMouseEnter and onMouseLeave, unless disableMouseListener is true - const mouseEnterCb = isUsingMouse ? handleEnter : undefined; - const mouseLeaveCb = isUsingMouse ? handleLeave : undefined; - - // set the wrapper's tabIndex for focus events, unless disableFocusListener is true - const tabIndex = isUsingFocus ? 0 : undefined; - - return ( - - (); + const [closeTimer, setCloseTimer] = useState(); + + const isUsingFocus = !disableFocusListener; + const isUsingMouse = !disableMouseListener; + + const handleOpen = ( + event: React.FocusEvent | React.MouseEvent + ) => { + window.clearTimeout(openTimer); + window.clearTimeout(closeTimer); + + const timer = window.setTimeout(() => { + setShow(true); + + onOpen?.(event); + }, enterDelay); + + setOpenTimer(timer); + }; + + const handleEnter = ( + event: React.FocusEvent | React.MouseEvent + ) => { + event.persist(); + + if (isReactFocusEvent(event)) { + onFocus?.(event); + } else if (isReactMouseEvent(event)) { + onMouseEnter?.(event); + } + + handleOpen(event); + }; + + const handleClose = ( + event: React.FocusEvent | React.MouseEvent + ) => { + window.clearTimeout(openTimer); + window.clearTimeout(closeTimer); + + const timer = window.setTimeout(() => { + setShow(false); + + onClose?.(event); + }, leaveDelay); + + setCloseTimer(timer); + }; + + const handleLeave = ( + event: React.FocusEvent | React.MouseEvent + ) => { + event.persist(); + + if (isReactFocusEvent(event)) { + onBlur?.(event); + } else if (isReactMouseEvent(event)) { + onMouseLeave?.(event); + } + + handleClose(event); + }; + + // set callbacks for onBlur and onFocus, unless disableFocusListener is true + const blurCb = isUsingFocus ? handleLeave : undefined; + const focusCb = isUsingFocus ? handleEnter : undefined; + + // set callbacks for onMouseEnter and onMouseLeave, unless disableMouseListener is true + const mouseEnterCb = isUsingMouse ? handleEnter : undefined; + const mouseLeaveCb = isUsingMouse ? handleLeave : undefined; + + // set the wrapper's tabIndex for focus events, unless disableFocusListener is true + const tabIndex = isUsingFocus ? 0 : undefined; + + return ( + - {text} - - {children} - - ); -}); + + {text} + + {children} + + ); + } +); + +Tooltip.displayName = 'Tooltip'; export { Tooltip, TooltipProps }; From 918d1ebee8c9e554780e571581624071d9418860 Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 31 Jul 2022 20:09:40 -0400 Subject: [PATCH 076/100] refactor(treeview): categorize under Controls, rename Tree to TreeView --- .../TreeView.spec.tsx} | 20 ++++++++++------- .../TreeView.stories.tsx} | 16 +++++++------- src/{Tree/Tree.tsx => TreeView/TreeView.tsx} | 22 +++++++++++-------- src/index.ts | 3 ++- src/legacy/Tree.tsx | 7 ++++++ 5 files changed, 42 insertions(+), 26 deletions(-) rename src/{Tree/Tree.spec.tsx => TreeView/TreeView.spec.tsx} (91%) rename src/{Tree/Tree.stories.tsx => TreeView/TreeView.stories.tsx} (93%) rename src/{Tree/Tree.tsx => TreeView/TreeView.tsx} (94%) create mode 100644 src/legacy/Tree.tsx diff --git a/src/Tree/Tree.spec.tsx b/src/TreeView/TreeView.spec.tsx similarity index 91% rename from src/Tree/Tree.spec.tsx rename to src/TreeView/TreeView.spec.tsx index 17ea298b..97600c11 100644 --- a/src/Tree/Tree.spec.tsx +++ b/src/TreeView/TreeView.spec.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { renderWithTheme } from '../../test/utils'; -import { Tree } from './Tree'; +import { TreeView } from './TreeView'; const categories = [ { @@ -59,13 +59,13 @@ const categories = [ } ]; -describe('', () => { +describe('', () => { describe('prop: onNodeSelect', () => { it('should call onNodeSelect when uncontrolled', () => { const onNodeSelect = jest.fn((_, id) => id); const { getByText } = renderWithTheme( - + ); getByText('Beverages').click(); @@ -78,7 +78,11 @@ describe('', () => { const onNodeSelect = jest.fn((_, id) => id); const { getByText } = renderWithTheme( - + ); getByText('Beverages').click(); @@ -93,7 +97,7 @@ describe('', () => { const onNodeToggle = jest.fn((_, ids) => ids); const { getByText } = renderWithTheme( - + ); getByText('Beverages').click(); @@ -106,7 +110,7 @@ describe('', () => { const onNodeToggle = jest.fn((_, ids) => ids); const { getByText } = renderWithTheme( - ', () => { const onNodeToggle = jest.fn((_, ids) => ids); const { getByText } = renderWithTheme( - ', () => { ); const { getByText } = renderWithTheme( - {story()}] -} as ComponentMeta; +} as ComponentMeta; const categories = [ { @@ -98,7 +98,7 @@ export function Basic() { return (
- +
); @@ -125,7 +125,7 @@ export function Controlled() { - setSelected(id)} onNodeToggle={(_, ids) => setExpanded(ids)} @@ -145,7 +145,7 @@ export function Disabled() { return (
- +
); @@ -168,7 +168,7 @@ export function DisabledTreeItems() { return (
- +
); diff --git a/src/Tree/Tree.tsx b/src/TreeView/TreeView.tsx similarity index 94% rename from src/Tree/Tree.tsx rename to src/TreeView/TreeView.tsx index 2b321c5b..60d3f43d 100644 --- a/src/Tree/Tree.tsx +++ b/src/TreeView/TreeView.tsx @@ -1,8 +1,8 @@ import React, { forwardRef, useCallback } from 'react'; import styled, { css } from 'styled-components'; -import { StyledLabel, LabelText } from '../SwitchBase/SwitchBase'; import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled'; +import { LabelText, StyledLabel } from '../common/SwitchBase'; import { CommonStyledProps } from '../types'; type TreeLeaf = { @@ -13,7 +13,7 @@ type TreeLeaf = { label?: string; }; -type TreeProps = { +type TreeViewProps = { className?: string; defaultExpanded?: T[]; defaultSelected?: T; @@ -66,7 +66,7 @@ const focusedElementStyles = css<{ $disabled: boolean }>` : `cursor: default;`} `; -const TreeView = styled.ul<{ isRootLevel: boolean }>` +const TreeWrapper = styled.ul<{ isRootLevel: boolean }>` position: relative; isolation: isolate; @@ -293,7 +293,7 @@ function TreeBranch({ ); return ( - ({ isRootLevel={isRootLevel} > {tree.map(renderLeaf)} - + ); } @@ -317,7 +317,7 @@ function TreeInner( selected, style, tree = [] - }: TreeProps, + }: TreeViewProps, ref: React.ForwardedRef ) { const [expandedInternal, setExpandedInternal] = useControlledOrUncontrolled({ @@ -381,9 +381,13 @@ function TreeInner( ); } -const Tree = forwardRef(TreeInner) as ( +const TreeView = forwardRef(TreeInner) as ( // eslint-disable-next-line no-use-before-define - props: TreeProps & { ref?: React.ForwardedRef } + props: TreeViewProps & { ref?: React.ForwardedRef } ) => ReturnType; -export { Tree, TreeLeaf, TreeProps }; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +TreeView.displayProps = 'TreeView'; + +export { TreeView, TreeViewProps, TreeLeaf }; diff --git a/src/index.ts b/src/index.ts index ff4f7b92..81b67e7c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -29,7 +29,7 @@ export * from './Tabs/Tabs'; export * from './TextInput/TextInput'; export * from './Toolbar/Toolbar'; export * from './Tooltip/Tooltip'; -export * from './Tree/Tree'; +export * from './TreeView/TreeView'; export * from './Window/Window'; export * from './WindowContent/WindowContent'; export * from './WindowHeader/WindowHeader'; @@ -46,3 +46,4 @@ export * from './legacy/NumberField'; export * from './legacy/Panel'; export * from './legacy/Progress'; export * from './legacy/TextField'; +export * from './legacy/Tree'; diff --git a/src/legacy/Tree.tsx b/src/legacy/Tree.tsx new file mode 100644 index 00000000..31178be2 --- /dev/null +++ b/src/legacy/Tree.tsx @@ -0,0 +1,7 @@ +import { TreeView, TreeViewProps } from '../TreeView/TreeView'; + +/** @deprecated Use `TreeViewProps` */ +export type TreeProps = TreeViewProps; + +/** @deprecated Use `TreeView` */ +export const Tree = TreeView; From f106bd408521d2cdf334f3b1774755e86b05387b Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Sun, 31 Jul 2022 20:23:13 -0400 Subject: [PATCH 077/100] docs(window): categorize under Environment This also moves Windows* subcomponents to the Windows folder. --- src/DatePicker/DatePicker.tsx | 4 +- src/Window/Window.mdx | 86 ------------------- src/Window/Window.stories.tsx | 8 +- src/Window/Window.tsx | 32 ++++--- .../WindowContent.spec.tsx | 0 .../WindowContent.tsx | 2 + .../WindowHeader.spec.tsx | 0 src/{WindowHeader => Window}/WindowHeader.tsx | 0 src/index.ts | 2 - 9 files changed, 28 insertions(+), 106 deletions(-) delete mode 100644 src/Window/Window.mdx rename src/{WindowContent => Window}/WindowContent.spec.tsx (100%) rename src/{WindowContent => Window}/WindowContent.tsx (93%) rename src/{WindowHeader => Window}/WindowHeader.spec.tsx (100%) rename src/{WindowHeader => Window}/WindowHeader.tsx (100%) diff --git a/src/DatePicker/DatePicker.tsx b/src/DatePicker/DatePicker.tsx index b7ec857b..54853c37 100644 --- a/src/DatePicker/DatePicker.tsx +++ b/src/DatePicker/DatePicker.tsx @@ -7,9 +7,7 @@ import { ScrollView } from '../ScrollView/ScrollView'; import { Select } from '../Select/Select'; import { SelectChangeEvent } from '../Select/Select.types'; import { Toolbar } from '../Toolbar/Toolbar'; -import { Window } from '../Window/Window'; -import { WindowContent } from '../WindowContent/WindowContent'; -import { WindowHeader } from '../WindowHeader/WindowHeader'; +import { Window, WindowContent, WindowHeader } from '../Window/Window'; type DatePickerProps = { className?: string; diff --git a/src/Window/Window.mdx b/src/Window/Window.mdx deleted file mode 100644 index 70c88c0c..00000000 --- a/src/Window/Window.mdx +++ /dev/null @@ -1,86 +0,0 @@ ---- -name: Window -menu: Components ---- - -import Window from './Window'; -import WindowContent from '../WindowContent/WindowContent'; -import WindowHeader from '../WindowHeader/WindowHeader'; -import { Button } from '../Button/Button'; -import { Toolbar } from '../Toolbar/Toolbar'; - -# Window - -## Usage - -#### Default - - - - - react95.exe - - - - - - - - -
    -
  • something here
    • -
  • something here
    • -
  • something here
    • -
  • something here
    • -
- - - - -#### Resizable - - - - react95.exe - - Resizable Window displays resize handle in bottom right corner - - - - -#### Not active - - - - react95.exe - I am not active - - - -## API - -### Import - -``` -import { Window } from 'react95' -``` - -### Props - - diff --git a/src/Window/Window.stories.tsx b/src/Window/Window.stories.tsx index e27b4c62..06c88960 100644 --- a/src/Window/Window.stories.tsx +++ b/src/Window/Window.stories.tsx @@ -13,7 +13,7 @@ import styled from 'styled-components'; const Wrapper = styled.div` padding: 5rem; background: ${({ theme }) => theme.desktopBackground}; - .window-header { + .window-title { display: flex; align-items: center; justify-content: space-between; @@ -63,7 +63,7 @@ const Wrapper = styled.div` `; export default { - title: 'Window', + title: 'Environment/Window', component: Window, subcomponents: { WindowHeader, WindowContent }, decorators: [story => {story()}] @@ -73,7 +73,7 @@ export function Default() { return ( <> - + react95.exe
+ ); + const button = screen.getByRole('button'); + fireEvent.mouseDown(button); + + const listbox = screen.getByRole('listbox'); + + expect(screen.getByRole('option', { name: 'ten' })).toBeInTheDocument(); + + fireEvent.keyDown(listbox, { code: 'ArrowDown' }); + expect(screen.getByRole('option', { name: 'twenty' })).toHaveFocus(); + + fireEvent.keyDown(listbox, { code: keyCode }); + + await waitFor(() => { + expect(onClose).toHaveBeenCalled(); + }); + expect(listbox).not.toBeInTheDocument(); + + expect(button).toHaveFocus(); + expect(onKeyDown).toHaveBeenCalledWith( + expect.objectContaining({ defaultPrevented: true }) + ); + } + ); + + it('passes through Enter, Escape, Tab and Shift + Tab when closed', () => { + const onKeyDown = jest.fn(); + renderWithTheme( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions +
+ +
+ ); + + const button = screen.getByRole('button'); + button.focus(); + + const eventOptions = [ + { altKey: true }, + { ctrlKey: true }, + { metaKey: true }, + { shiftKey: true } + ]; + eventOptions.forEach(eventOption => { + fireEvent.keyDown(button, { ...eventOption, code: 'KeyT' }); + expect(button).toHaveTextContent('ten'); + expect(onKeyDown).toHaveBeenCalledWith( + expect.objectContaining({ defaultPrevented: false }) + ); + }); + }); + + it('moves options using ArrowUp, ArrowDown, Home and End', async () => { + renderWithTheme(); + const button = screen.getByRole('button'); + fireEvent.mouseDown(button); + + const listbox = screen.getByRole('listbox'); + + expect(screen.getByRole('option', { name: 'ten' })).toBeInTheDocument(); + + fireEvent.keyDown(listbox, { code: 'KeyT' }); + expect(screen.getByRole('option', { name: 'ten' })).toHaveFocus(); + + fireEvent.keyDown(listbox, { code: 'KeyT' }); + expect(screen.getByRole('option', { name: 'twenty' })).toHaveFocus(); + + fireEvent.keyDown(listbox, { code: 'KeyT' }); + expect(screen.getByRole('option', { name: 'thirty' })).toHaveFocus(); + + fireEvent.keyDown(listbox, { code: 'KeyT' }); + expect(screen.getByRole('option', { name: 'ten' })).toHaveFocus(); + }); + + it('cycles through options when pressing the same key (closed menu)', async () => { + renderWithTheme(); + const button = screen.getByRole('button'); + fireEvent.mouseDown(button); + + const listbox = screen.getByRole('listbox'); + + expect(screen.getByRole('option', { name: 'ten' })).toBeInTheDocument(); + + fireEvent.keyDown(listbox, { code: 'KeyT' }); + expect(screen.getByRole('option', { name: 'ten' })).toHaveFocus(); + + fireEvent.keyDown(listbox, { code: 'KeyT' }); + expect(screen.getByRole('option', { name: 'twenty' })).toHaveFocus(); + + fireEvent.keyDown(listbox, { code: 'KeyE' }); + expect(screen.getByRole('option', { name: 'ten' })).toHaveFocus(); + }); + + it('switches to cycling after search', async () => { + renderWithTheme(); + const button = screen.getByRole('button'); + fireEvent.mouseDown(button); + + const listbox = screen.getByRole('listbox'); + + expect(screen.getByRole('option', { name: 'ten' })).toBeInTheDocument(); + + fireEvent.keyDown(listbox, { code: 'KeyT' }); + expect(screen.getByRole('option', { name: 'ten' })).toHaveFocus(); + + fireEvent.keyDown(listbox, { code: 'KeyH' }); + fireEvent.keyDown(listbox, { code: 'KeyI' }); + fireEvent.keyDown(listbox, { code: 'KeyR' }); + expect(screen.getByRole('option', { name: 'thirty' })).toHaveFocus(); + }); + + it('resets typing after timeout', async () => { + jest.useFakeTimers(); + renderWithTheme(', () => { it('sets aria-expanded="true" when the listbox is displayed', () => { // since we make the rest of the UI inaccessible when open this doesn't // technically matter. This is only here in case we keep the rest accessible - const { getByRole } = renderWithTheme(); + expect(screen.getByRole('button', { hidden: true })).toHaveAttribute( 'aria-expanded', 'true' ); }); - it('aria-expanded is not present if the listbox isnt displayed', () => { - const { getByRole } = renderWithTheme(); + expect(screen.getByRole('button')).toHaveAttribute( + 'aria-expanded', + 'false' + ); }); + it('indicates that activating the button displays a listbox', () => { - const { getByRole } = renderWithTheme(); + expect(screen.getByRole('button')).toHaveAttribute( + 'aria-haspopup', + 'listbox' + ); }); + it('renders an element with listbox behavior', () => { - const { getByRole } = renderWithTheme(); + expect(screen.getByRole('listbox')).toBeVisible(); }); it('the listbox is focusable', () => { - const { getByRole } = renderWithTheme(); + const listbox = screen.getByRole('listbox'); listbox.focus(); expect(listbox).toHaveFocus(); }); + it('identifies each selectable element containing an option', () => { - const { getAllByRole } = renderWithTheme( - ); + const o = screen.getAllByRole('option'); expect(o[0]).toHaveTextContent('ten'); expect(o[1]).toHaveTextContent('twenty'); }); + it('indicates the selected option', () => { - const { getAllByRole } = renderWithTheme( - ); - expect(getAllByRole('option')[1]).toHaveAttribute( + expect(screen.getAllByRole('option')[1]).toHaveAttribute( 'aria-selected', 'true' ); }); + it('it will fallback to its content for the accessible name when it has no name', () => { - const { getByRole } = renderWithTheme(); - const button = getByRole('button'); - expect(button).toHaveAttribute( - 'aria-labelledby', - button.getAttribute('id') - ); + renderWithTheme( Chose second option: - - ); - expect(getByRole('button')).toHaveAttribute( - 'aria-labelledby', - `select-label ${getByRole('button').getAttribute('id')}` - ); - }); - it('the list of options is not labelled by default', () => { - const { getByRole } = renderWithTheme( - - ); - expect(getByRole('listbox')).toHaveAttribute( - 'aria-labelledby', - 'select-label' - ); - }); - }); - describe('prop: readOnly', () => { - it('should not trigger any event with readOnly', () => { - const { getByRole, queryByRole } = renderWithTheme( - - ); - expect(getByRole('button')).toHaveAttribute('data-test', 'SelectDisplay'); - }); - }); - - describe('prop: renderValue', () => { - it('should use the prop to render the value', () => { - const formatDisplay = (x: SelectOption) => - `0b${Number(x.value).toString(2)}`; - const { getByRole } = renderWithTheme( - - ); - expect(getByRole('listbox')).toBeInTheDocument(); - }); - it('open only with the left mouse button click', () => { - // Right/middle mouse click shouldn't open the Select - const { getByRole, queryByRole } = renderWithTheme( - ); - expect(ref.current?.node).toHaveProperty('tagName', 'INPUT'); - }); - - it('should be able focus the trigger imperatively', () => { - const ref = React.createRef(); - const { getByRole } = renderWithTheme(); - expect(getByRole('button')).not.toHaveAttribute('id'); - }); - it('should have select-`name` id when name is provided', () => { - const { getByRole } = renderWithTheme(', () => { - const { container } = renderWithTheme( - - ); - expect(getByLabelText('A select')).toHaveProperty('tagName', 'SELECT'); + const triggers = screen.getAllByRole('button'); + expect(triggers[0]).toHaveAttribute('aria-labelledby', 'select-1-label'); + expect(triggers[1]).toHaveAttribute('aria-labelledby', 'select-2-label'); }); }); }); diff --git a/src/Select/Select.stories.data.ts b/src/Select/Select.stories.data.ts new file mode 100644 index 00000000..000a7a19 --- /dev/null +++ b/src/Select/Select.stories.data.ts @@ -0,0 +1,153 @@ +export const PokemonOptions = [ + 'Bulbasaur', + 'Ivysaur', + 'Venusaur', + 'Charmander', + 'Charmeleon', + 'Charizard', + 'Squirtle', + 'Wartortle', + 'Blastoise', + 'Caterpie', + 'Metapod', + 'Butterfree', + 'Weedle', + 'Kakuna', + 'Beedrill', + 'Pidgey', + 'Pidgeotto', + 'Pidgeot', + 'Rattata', + 'Raticate', + 'Spearow', + 'Fearow', + 'Ekans', + 'Arbok', + 'Pikachu', + 'Raichu', + 'Sandshrew', + 'Sandslash', + 'Nidoran♀', + 'Nidorina', + 'Nidoqueen', + 'Nidoran♂', + 'Nidorino', + 'Nidoking', + 'Clefairy', + 'Clefable', + 'Vulpix', + 'Ninetales', + 'Jigglypuff', + 'Wigglytuff', + 'Zubat', + 'Golbat', + 'Oddish', + 'Gloom', + 'Vileplume', + 'Paras', + 'Parasect', + 'Venonat', + 'Venomoth', + 'Diglett', + 'Dugtrio', + 'Meowth', + 'Persian', + 'Psyduck', + 'Golduck', + 'Mankey', + 'Primeape', + 'Growlithe', + 'Arcanine', + 'Poliwag', + 'Poliwhirl', + 'Poliwrath', + 'Abra', + 'Kadabra', + 'Alakazam', + 'Machop', + 'Machoke', + 'Machamp', + 'Bellsprout', + 'Weepinbell', + 'Victreebel', + 'Tentacool', + 'Tentacruel', + 'Geodude', + 'Graveler', + 'Golem', + 'Ponyta', + 'Rapidash', + 'Slowpoke', + 'Slowbro', + 'Magnemite', + 'Magneton', + 'Farfetch’d', + 'Doduo', + 'Dodrio', + 'Seel', + 'Dewgong', + 'Grimer', + 'Muk', + 'Shellder', + 'Cloyster', + 'Gastly', + 'Haunter', + 'Gengar', + 'Onix', + 'Drowzee', + 'Hypno', + 'Krabby', + 'Kingler', + 'Voltorb', + 'Electrode', + 'Exeggcute', + 'Exeggutor', + 'Cubone', + 'Marowak', + 'Hitmonlee', + 'Hitmonchan', + 'Lickitung', + 'Koffing', + 'Weezing', + 'Rhyhorn', + 'Rhydon', + 'Chansey', + 'Tangela', + 'Kangaskhan', + 'Horsea', + 'Seadra', + 'Goldeen', + 'Seaking', + 'Staryu', + 'Starmie', + 'Mr. Mime', + 'Scyther', + 'Jynx', + 'Electabuzz', + 'Magmar', + 'Pinsir', + 'Tauros', + 'Magikarp', + 'Gyarados', + 'Lapras', + 'Ditto', + 'Eevee', + 'Vaporeon', + 'Jolteon', + 'Flareon', + 'Porygon', + 'Omanyte', + 'Omastar', + 'Kabuto', + 'Kabutops', + 'Aerodactyl', + 'Snorlax', + 'Articuno', + 'Zapdos', + 'Moltres', + 'Dratini', + 'Dragonair', + 'Dragonite', + 'Mewtwo', + 'Mew' +].map((label, index) => ({ value: index + 1, label })); diff --git a/src/Select/Select.stories.tsx b/src/Select/Select.stories.tsx index a0621276..b3aa769c 100644 --- a/src/Select/Select.stories.tsx +++ b/src/Select/Select.stories.tsx @@ -2,19 +2,24 @@ import { ComponentMeta } from '@storybook/react'; import React from 'react'; -import { GroupBox, ScrollView, Select, Window, WindowContent } from 'react95'; +import { + GroupBox, + ScrollView, + Select, + SelectNative, + Window, + WindowContent +} from 'react95'; import styled from 'styled-components'; -import { SelectChangeEvent, SelectOption } from './Select.types'; +import { PokemonOptions } from './Select.stories.data'; +import { SelectOption } from './Select.types'; -const options = [ - { value: 1, label: '⚡ Pikachu' }, - { value: 2, label: '🌿 Bulbasaur' }, - { value: 3, label: '💦 Squirtle' }, - { value: 4, label: '🔥 Mega Charizard Y' }, - { value: 5, label: '🎤 Jigglypuff' }, - { value: 6, label: '🛌🏻 Snorlax' }, - { value: 7, label: '⛰ Geodude' } -]; +const options = PokemonOptions; + +const nativeOptions = options.map(option => ({ + ...option, + value: String(option.value) +})); const Wrapper = styled.div` background: ${({ theme }) => theme.material}; @@ -39,8 +44,10 @@ const Wrapper = styled.div` } `; -const onChange = (event: SelectChangeEvent, option: SelectOption) => - console.log(event, option); +const onChange = ( + selectedOption: SelectOption, + changeOptions: { fromEvent: React.SyntheticEvent | Event } +) => console.log(selectedOption, changeOptions.fromEvent); export default { title: 'Controls/Select', @@ -73,25 +80,20 @@ export function Default() { /> - @@ -128,20 +130,18 @@ export function Flat() { /> - @@ -157,7 +157,7 @@ Flat.story = { export function CustomDisplayFormatting() { return ( ', () => { + const { container } = renderWithTheme(); + expect(container.querySelector('select')).toBeInTheDocument(); + }); + + it('renders uses values for labels', () => { + const optionsWithoutLabels = options.map(({ value }) => ({ value })); + renderWithTheme( + + ); + expect(screen.getByTestId('select')).toHaveTextContent('10'); + }); + + it('calls onChange if not disabled or readOnly', () => { + const handleChange = jest.fn(); + renderWithTheme( + <> + + + + + ); + fireEvent.change(screen.getByTestId('selectEnabled')); + fireEvent.change(screen.getByTestId('selectDisabled')); + fireEvent.change(screen.getByTestId('selectReadOnly')); + expect(handleChange).toHaveBeenCalledTimes(1); + expect(handleChange).toHaveBeenCalledWith(options[0], { + fromEvent: expect.objectContaining({ type: 'change' }) + }); + }); + + it('can be labelled with a