From b1ea0b33426628865a58242aac8ec7e96449b7bb Mon Sep 17 00:00:00 2001 From: Wes Souza Date: Thu, 28 Jul 2022 16:59:28 -0400 Subject: [PATCH] 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"