@@ -66,7 +70,8 @@ export function Default() {
min={0}
max={6}
step={1}
- defaultValue={0}
+ value={state}
+ onChange={onChange}
marks={[
{ value: 0, label: '0°C' },
{ value: 2, label: '2°C' },
@@ -116,7 +121,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 +151,7 @@ export function Flat() {
{ value: 6, label: '6°C' }
]}
/>
-
+
);
}
diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx
new file mode 100644
index 00000000..617b682a
--- /dev/null
+++ b/src/Slider/Slider.tsx
@@ -0,0 +1,615 @@
+// helper functions and event handling basically copied from Material UI (https://github.com/mui-org/material-ui) Slider component
+import React, {
+ forwardRef,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState
+} from 'react';
+import styled, { css } from 'styled-components';
+
+import {
+ createBorderStyles,
+ createBoxStyles,
+ createDisabledTextStyles,
+ createFlatBoxStyles,
+ createHatchedBackground
+} from '../common';
+import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';
+import useEventCallback from '../common/hooks/useEventCallback';
+import useForkRef from '../common/hooks/useForkRef';
+import { useIsFocusVisible } from '../common/hooks/useIsFocusVisible';
+import { clamp, getSize, roundValueToStep } from '../common/utils';
+import { StyledScrollView } from '../ScrollView/ScrollView';
+import { CommonStyledProps } from '../types';
+
+export type SliderOnChangeHandler = (value: number) => void;
+
+type SliderProps = {
+ defaultValue?: number;
+ disabled?: boolean;
+ marks?: boolean | { label?: string; value: number }[];
+ max?: number;
+ min?: number;
+ name?: string;
+ onChange?: SliderOnChangeHandler;
+ onChangeCommitted?: SliderOnChangeHandler;
+ onMouseDown?: (event: React.MouseEvent
) => void;
+ orientation?: 'horizontal' | 'vertical';
+ size?: string | number;
+ step?: number | null;
+ value?: number;
+ variant?: 'default' | 'flat';
+} & Omit<
+ React.HTMLAttributes,
+ 'defaultValue' | 'onChange' | 'onMouseDown'
+> &
+ CommonStyledProps;
+
+function percentToValue(percent: number, min: number, max: number) {
+ return (max - min) * percent + min;
+}
+
+function trackFinger(
+ event: MouseEvent | React.MouseEvent | TouchEvent,
+ touchId: number | undefined
+) {
+ if (touchId !== undefined && 'changedTouches' in event) {
+ for (let i = 0; i < event.changedTouches.length; i += 1) {
+ const touch = event.changedTouches[i];
+ if (touch.identifier === touchId) {
+ return {
+ x: touch.clientX,
+ y: touch.clientY
+ };
+ }
+ }
+
+ return false;
+ }
+
+ if ('clientX' in event) {
+ return {
+ x: event.clientX,
+ y: event.clientY
+ };
+ }
+
+ return false;
+}
+
+function ownerDocument(node?: Element) {
+ return (node && node.ownerDocument) || document;
+}
+
+function findClosest(values: number[], currentValue: number) {
+ const { index: closestIndex } =
+ values.reduce<{
+ distance: number;
+ index: number;
+ } | null>((acc, value, index) => {
+ const distance = Math.abs(currentValue - value);
+
+ if (
+ acc === null ||
+ distance < acc.distance ||
+ distance === acc.distance
+ ) {
+ return {
+ distance,
+ index
+ };
+ }
+
+ return acc;
+ }, null) ?? {};
+
+ return closestIndex ?? -1;
+}
+
+type StyledSliderProps = Pick<
+ SliderProps,
+ 'orientation' | 'size' | 'variant'
+> & {
+ $disabled?: boolean;
+ hasMarks?: boolean;
+ isFocused?: boolean;
+};
+
+const Wrapper = styled.div`
+ display: inline-block;
+ position: relative;
+ touch-action: none;
+ &:before {
+ content: '';
+ display: inline-block;
+ position: absolute;
+ top: -2px;
+ left: -15px;
+ width: calc(100% + 30px);
+ height: ${({ hasMarks }) => (hasMarks ? '41px' : '39px')};
+ ${({ isFocused, theme }) =>
+ isFocused &&
+ `
+ outline: 2px dotted ${theme.materialText};
+ `}
+ }
+
+ ${({ orientation, size }) =>
+ orientation === 'vertical'
+ ? css`
+ height: ${size};
+ margin-right: 1.5rem;
+ &:before {
+ left: -6px;
+ top: -15px;
+ height: calc(100% + 30px);
+ width: ${({ hasMarks }) => (hasMarks ? '41px' : '39px')};
+ }
+ `
+ : css`
+ width: ${size};
+ margin-bottom: 1.5rem;
+ &:before {
+ top: -2px;
+ left: -15px;
+ width: calc(100% + 30px);
+ height: ${({ hasMarks }) => (hasMarks ? '41px' : '39px')};
+ }
+ `}
+
+ pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')};
+`;
+const sharedGrooveStyles = () => css`
+ position: absolute;
+ ${({ orientation }) =>
+ orientation === 'vertical'
+ ? css`
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ height: 100%;
+ width: 8px;
+ `
+ : css`
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ height: 8px;
+ width: 100%;
+ `}
+`;
+const StyledGroove = styled(StyledScrollView)`
+ ${sharedGrooveStyles()}
+`;
+const StyledFlatGroove = styled(StyledScrollView)`
+ ${sharedGrooveStyles()}
+
+ border-left-color: ${({ theme }) => theme.flatLight};
+ border-top-color: ${({ theme }) => theme.flatLight};
+ border-right-color: ${({ theme }) => theme.canvas};
+ border-bottom-color: ${({ theme }) => theme.canvas};
+ &:before {
+ border-left-color: ${({ theme }) => theme.flatDark};
+ border-top-color: ${({ theme }) => theme.flatDark};
+ border-right-color: ${({ theme }) => theme.flatLight};
+ border-bottom-color: ${({ theme }) => theme.flatLight};
+ }
+`;
+const Thumb = styled.span`
+ position: relative;
+ ${({ orientation }) =>
+ orientation === 'vertical'
+ ? css`
+ width: 32px;
+ height: 18px;
+ right: 2px;
+ transform: translateY(-50%);
+ `
+ : css`
+ height: 32px;
+ width: 18px;
+ top: 2px;
+ transform: translateX(-50%);
+ `}
+ ${({ variant }) =>
+ variant === 'flat'
+ ? css`
+ ${createFlatBoxStyles()}
+ outline: 2px solid ${({ theme }) => theme.flatDark};
+ background: ${({ theme }) => theme.flatLight};
+ `
+ : css`
+ ${createBoxStyles()}
+ ${createBorderStyles()}
+ &:focus {
+ outline: none;
+ }
+ `}
+ ${({ $disabled, theme }) =>
+ $disabled &&
+ createHatchedBackground({
+ mainColor: theme.material,
+ secondaryColor: theme.borderLightest
+ })}
+`;
+
+const tickHeight = 6;
+const Tick = styled.span`
+ display: inline-block;
+ position: absolute;
+
+ ${({ orientation }) =>
+ orientation === 'vertical'
+ ? css`
+ right: ${-tickHeight - 2}px;
+ bottom: 0px;
+ transform: translateY(1px);
+ width: ${tickHeight}px;
+ border-bottom: 2px solid ${({ theme }) => theme.materialText};
+ `
+ : css`
+ bottom: ${-tickHeight}px;
+ height: ${tickHeight}px;
+ transform: translateX(-1px);
+ border-left: 1px solid ${({ theme }) => theme.materialText};
+ border-right: 1px solid ${({ theme }) => theme.materialText};
+ `}
+
+ color: ${({ theme }) => theme.materialText};
+ ${({ $disabled, theme }) =>
+ $disabled &&
+ css`
+ ${createDisabledTextStyles()}
+ box-shadow: 1px 1px 0px ${theme.materialTextDisabledShadow};
+ border-color: ${theme.materialTextDisabled};
+ `}
+`;
+const Mark = styled.div`
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ line-height: 1;
+ font-size: 0.875rem;
+
+ ${({ orientation }) =>
+ orientation === 'vertical'
+ ? css`
+ transform: translate(${tickHeight + 2}px, ${tickHeight + 1}px);
+ `
+ : css`
+ transform: translate(-0.5ch, calc(100% + 2px));
+ `}
+`;
+
+const Slider = forwardRef(
+ (
+ {
+ 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 = min, setValueState] = useControlledOrUncontrolled({
+ defaultValue,
+ onChange: onChange ?? onChangeCommitted,
+ value
+ });
+
+ 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 = useEventCallback(
+ (event: React.FocusEvent) => {
+ if (isFocusVisible(event)) {
+ setFocusVisible(true);
+ }
+ }
+ );
+
+ const handleBlur = useEventCallback(() => {
+ if (focusVisible !== false) {
+ setFocusVisible(false);
+ 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 = useEventCallback(
+ (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?.(newValue);
+ onChangeCommitted?.(newValue);
+ }
+ );
+
+ 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 = useEventCallback(
+ (event: MouseEvent | TouchEvent) => {
+ const finger = trackFinger(event, touchId.current);
+
+ if (!finger) {
+ return;
+ }
+ const newValue = getNewValue(finger);
+
+ thumbRef.current?.focus();
+ setValueState(newValue);
+ setFocusVisible(true);
+
+ onChange?.(newValue);
+ }
+ );
+
+ const handleTouchEnd = useEventCallback(
+ (event: MouseEvent | TouchEvent) => {
+ const finger = trackFinger(event, touchId.current);
+
+ if (!finger) {
+ return;
+ }
+
+ const newValue = getNewValue(finger);
+
+ onChangeCommitted?.(newValue);
+
+ touchId.current = undefined;
+
+ const doc = ownerDocument(sliderRef.current);
+ doc.removeEventListener('mousemove', handleTouchMove);
+ doc.removeEventListener('mouseup', handleTouchEnd);
+ doc.removeEventListener('touchmove', handleTouchMove);
+ doc.removeEventListener('touchend', handleTouchEnd);
+ }
+ );
+
+ const handleMouseDown = useEventCallback(
+ (event: React.MouseEvent) => {
+ // TODO should we also pass event together with new value to callbacks? (same thing with other input components)
+ onMouseDown?.(event);
+
+ event.preventDefault();
+ thumbRef.current?.focus();
+ setFocusVisible(true);
+
+ const finger = trackFinger(event, touchId.current);
+ if (finger) {
+ const newValue = getNewValue(finger);
+ setValueState(newValue);
+ onChange?.(newValue);
+ }
+
+ const doc = ownerDocument(sliderRef.current);
+ doc.addEventListener('mousemove', handleTouchMove);
+ doc.addEventListener('mouseup', handleTouchEnd);
+ }
+ );
+
+ const handleTouchStart = useEventCallback((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 finger = trackFinger(event, touchId.current);
+ if (finger) {
+ const newValue = getNewValue(finger);
+ setValueState(newValue);
+ onChange?.(newValue);
+ }
+
+ const doc = ownerDocument(sliderRef.current);
+ doc.addEventListener('touchmove', handleTouchMove);
+ doc.addEventListener('touchend', handleTouchEnd);
+ });
+
+ 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 ? */}
+
+ {m.label && (
+
+ {m.label}
+
+ )}
+
+ ))}
+
+ );
+ }
+);
+
+Slider.displayName = 'Slider';
+
+export { Slider, SliderProps };
diff --git a/src/TabBody/TabBody.js b/src/TabBody/TabBody.js
deleted file mode 100644
index caa87bf6..00000000
--- a/src/TabBody/TabBody.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import propTypes from 'prop-types';
-
-import styled from 'styled-components';
-import { createBorderStyles, createBoxStyles } from '../common';
-
-const StyledTabBody = styled.div`
- ${createBoxStyles()}
- ${createBorderStyles()}
- position: relative;
- display: block;
- height: 100%;
- padding: 16px;
- font-size: 1rem;
-`;
-const TabBody = React.forwardRef(function TabBody(props, ref) {
- const { children, ...otherProps } = props;
- return (
-
- {children}
-
- );
-});
-
-TabBody.defaultProps = {
- children: null
-};
-
-TabBody.propTypes = {
- children: propTypes.node
-};
-export default TabBody;
diff --git a/src/Table/Table.js b/src/Table/Table.js
deleted file mode 100644
index 18430a8c..00000000
--- a/src/Table/Table.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import propTypes from 'prop-types';
-
-import styled from 'styled-components';
-import { StyledCutout } from '../Cutout/Cutout';
-
-const StyledTable = styled.table`
- display: table;
- width: 100%;
- border-collapse: collapse;
- border-spacing: 0;
- font-size: 1rem;
-`;
-
-const Wrapper = styled(StyledCutout)`
- &:before {
- box-shadow: none;
- }
-`;
-
-const Table = React.forwardRef(function Table(props, ref) {
- const { children, ...otherProps } = props;
-
- return (
-
-
- {children}
-
-
- );
-});
-
-Table.defaultProps = {
- children: null
-};
-
-Table.propTypes = {
- children: propTypes.node
-};
-
-export default Table;
diff --git a/src/Table/Table.mdx b/src/Table/Table.mdx
deleted file mode 100644
index c66413ec..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
-
-{story()} ]
-};
-const Wrapper = styled.div`
- padding: 5rem;
- background: ${({ theme }) => theme.desktopBackground};
-`;
+} as ComponentMeta;
export function Default() {
return (
@@ -38,7 +39,7 @@ export function Default() {
-
+
Type
Name
Level
diff --git a/src/Table/Table.tsx b/src/Table/Table.tsx
new file mode 100644
index 00000000..9f82c79b
--- /dev/null
+++ b/src/Table/Table.tsx
@@ -0,0 +1,45 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { StyledScrollView } from '../ScrollView/ScrollView';
+import { CommonStyledProps } from '../types';
+
+type TableProps = {
+ children?: React.ReactNode;
+} & React.TableHTMLAttributes &
+ CommonStyledProps;
+
+const StyledTable = styled.table`
+ display: table;
+ width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 1rem;
+`;
+
+const Wrapper = styled(StyledScrollView)`
+ &:before {
+ box-shadow: none;
+ }
+`;
+
+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.js b/src/Table/TableBody.spec.tsx
similarity index 74%
rename from src/TableBody/TableBody.spec.js
rename to src/Table/TableBody.spec.tsx
index 10c424f0..53e67289 100644
--- a/src/TableBody/TableBody.spec.js
+++ b/src/Table/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(' &
+ 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}
+
+ );
+ }
+);
+
+TableBody.displayName = 'TableBody';
+
+export { TableBody, TableBodyProps };
diff --git a/src/TableDataCell/TableDataCell.spec.js b/src/Table/TableDataCell.spec.tsx
similarity index 75%
rename from src/TableDataCell/TableDataCell.spec.js
rename to src/Table/TableDataCell.spec.tsx
index fdd3ff19..df23704b 100644
--- a/src/TableDataCell/TableDataCell.spec.js
+++ b/src/Table/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('
@@ -14,14 +14,14 @@ describe('
);
return {
- td: container.querySelector('tr').firstChild,
+ td: container.querySelector('tr')?.firstElementChild,
getByText
};
}
it('renders TableDataCell', () => {
const { td } = mountInTable( &
+ CommonStyledProps;
+
+const StyledTd = styled.td`
+ padding: 0 8px;
+`;
+
+const TableDataCell = forwardRef(
+ function TableDataCell({ children, ...otherProps }, ref) {
+ return (
+
+ {children}
+
+ );
+ }
+);
+
+TableDataCell.displayName = 'TableDataCell';
+
+export { TableDataCell, TableDataCellProps };
diff --git a/src/TableHead/TableHead.spec.js b/src/Table/TableHead.spec.tsx
similarity index 74%
rename from src/TableHead/TableHead.spec.js
rename to src/Table/TableHead.spec.tsx
index f1e12827..a3b752d9 100644
--- a/src/TableHead/TableHead.spec.js
+++ b/src/Table/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(' &
+ CommonStyledProps;
+
+const StyledTableHead = styled.thead`
+ display: table-header-group;
+`;
+const TableHead = forwardRef(
+ function TableHead({ children, ...otherProps }, ref) {
+ return (
+
+ {children}
+
+ );
+ }
+);
+
+TableHead.displayName = 'TableHead';
+
+export { TableHead, TableHeadProps };
diff --git a/src/TableHeadCell/TableHeadCell.spec.js b/src/Table/TableHeadCell.spec.tsx
similarity index 87%
rename from src/TableHeadCell/TableHeadCell.spec.js
rename to src/Table/TableHeadCell.spec.tsx
index 6406d206..b159e7fe 100644
--- a/src/TableHeadCell/TableHeadCell.spec.js
+++ b/src/Table/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('
@@ -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( &
+ 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, style: 'window' })}
+ 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}
+
+ );
+ }
+);
+
+TableHeadCell.displayName = 'TableHeadCell';
+
+export { TableHeadCell, TableHeadCellProps };
diff --git a/src/TableRow/TableRow.spec.js b/src/Table/TableRow.spec.tsx
similarity index 75%
rename from src/TableRow/TableRow.spec.js
rename to src/Table/TableRow.spec.tsx
index 22ccb239..a870e863 100644
--- a/src/TableRow/TableRow.spec.js
+++ b/src/Table/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(';
+
const StyledTr = styled.tr`
color: inherit;
display: table-row;
@@ -19,21 +21,16 @@ const StyledTr = styled.tr`
}
`;
-const TableRow = React.forwardRef(function TableRow(props, ref) {
- const { children, ...otherProps } = props;
- return (
-
- {children}
-
- );
-});
-
-TableRow.defaultProps = {
- children: null
-};
+const TableRow = forwardRef(
+ function TableRow({ children, ...otherProps }, ref) {
+ return (
+
+ {children}
+
+ );
+ }
+);
-TableRow.propTypes = {
- children: propTypes.node
-};
+TableRow.displayName = 'TableRow';
-export default TableRow;
+export { TableRow, TableRowProps };
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/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/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/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/Tab/Tab.spec.js b/src/Tabs/Tab.spec.tsx
similarity index 96%
rename from src/Tab/Tab.spec.js
rename to src/Tabs/Tab.spec.tsx
index e66bfc34..0b2fb15c 100644
--- a/src/Tab/Tab.spec.js
+++ b/src/Tabs/Tab.spec.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { renderWithTheme } from '../../test/utils';
-import Tab from './Tab';
+import { Tab } from './Tab';
describe(') => void;
+ selected?: boolean;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ value?: any;
+} & Omit, 'onClick' | 'value'> &
+ CommonStyledProps;
-const StyledTab = styled.button`
+const StyledTab = styled.button`
${createBoxStyles()}
${createBorderStyles()}
position: relative;
@@ -59,34 +69,25 @@ const StyledTab = styled.button`
}
`;
-const Tab = React.forwardRef(function Tab(props, ref) {
- const { value, onClick, selected, children, ...otherProps } = props;
-
- return (
- onClick(e, value)}
- role='tab'
- ref={ref}
- {...otherProps}
- >
- {children}
-
- );
-});
+const Tab = forwardRef(
+ ({ value, onClick, selected = false, children, ...otherProps }, ref) => {
+ return (
+ ) =>
+ onClick?.(value, e)
+ }
+ ref={ref}
+ role='tab'
+ {...otherProps}
+ >
+ {children}
+
+ );
+ }
+);
-Tab.defaultProps = {
- onClick: () => {},
- selected: false,
- children: null
-};
+Tab.displayName = 'Tab';
-Tab.propTypes = {
- // eslint-disable-next-line react/require-default-props, react/forbid-prop-types
- value: propTypes.any,
- onClick: propTypes.func,
- selected: propTypes.bool,
- children: propTypes.node
-};
-export default Tab;
+export { Tab, TabProps };
diff --git a/src/TabBody/TabBody.spec.js b/src/Tabs/TabBody.spec.tsx
similarity index 90%
rename from src/TabBody/TabBody.spec.js
rename to src/Tabs/TabBody.spec.tsx
index 523b0dd7..9515b1b0 100644
--- a/src/TabBody/TabBody.spec.js
+++ b/src/Tabs/TabBody.spec.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { renderWithTheme } from '../../test/utils';
-import TabBody from './TabBody';
+import { TabBody } from './TabBody';
describe(' &
+ CommonStyledProps;
+
+const StyledTabBody = styled.div`
+ ${createBoxStyles()}
+ ${createBorderStyles()}
+ position: relative;
+ display: block;
+ height: 100%;
+ padding: 16px;
+ font-size: 1rem;
+`;
+const TabBody = forwardRef(
+ ({ children, ...otherProps }, ref) => {
+ return (
+
+ {children}
+
+ );
+ }
+);
+
+TabBody.displayName = 'TabBody';
+
+export { TabBody, TabBodyProps };
diff --git a/src/Tabs/Tabs.js b/src/Tabs/Tabs.js
deleted file mode 100644
index bae5fc15..00000000
--- a/src/Tabs/Tabs.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react';
-import propTypes from 'prop-types';
-
-import styled from 'styled-components';
-
-const StyledTabs = styled.div`
- position: relative;
- ${({ isMultiRow, theme }) =>
- isMultiRow &&
- `
- button {
- flex-grow: 1;
- }
- button:last-child:before {
- border-right: 2px solid ${theme.borderDark};
- }
- `}
-`;
-
-const Row = styled.div.attrs(() => ({
- 'data-testid': 'tab-row'
-}))`
- position: relative;
- display: flex;
- flex-wrap: no-wrap;
- text-align: left;
- left: 8px;
- width: calc(100% - 8px);
-
- &:not(:first-child):before {
- content: '';
- position: absolute;
- right: 0;
- left: 0;
- height: 100%;
- border-right: 2px solid ${({ theme }) => theme.borderDarkest};
- border-left: 2px solid ${({ theme }) => theme.borderLightest};
- }
-`;
-
-function splitToChunks(array, parts) {
- const result = [];
- for (let i = parts; i > 0; i -= 1) {
- result.push(array.splice(0, Math.ceil(array.length / i)));
- }
- return result;
-}
-
-const Tabs = React.forwardRef(function Tabs(props, ref) {
- const { value, onChange, children, rows, ...otherProps } = props;
-
- 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);
- });
-
- // split tabs into equal rows and assign key to each row
- 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)
- );
- tabRows.push(tabRows.splice(currentlySelectedRowIndex, 1)[0]);
-
- return (
- 1} role='tablist' ref={ref}>
- {tabRows.map(row => (
- {row.tabs}
- ))}
-
- );
-});
-
-Tabs.defaultProps = {
- onChange: () => {},
- children: null,
- rows: 1
-};
-
-Tabs.propTypes = {
- // eslint-disable-next-line react/require-default-props, react/forbid-prop-types
- value: propTypes.any,
- onChange: propTypes.func,
- children: propTypes.node,
- rows: propTypes.number
-};
-export default Tabs;
diff --git a/src/Tabs/Tabs.mdx b/src/Tabs/Tabs.mdx
deleted file mode 100644
index 9df9a189..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 NumberField from '../NumberField/NumberField'
-import Checkbox from '../Checkbox/Checkbox'
-import WindowContent from '../WindowContent/WindowContent'
-
-# Tabs
-
-## Usage
-
-
- {() => {
- const [activeTab, setActiveTab] = React.useState(0)
- const handleChange = value => {
- setActiveTab(value)
- }
- const a11yProps = (index) => ({
- id: `tab-${index}`,
- 'aria-controls': `tabpanel-${index}`
- });
- const TabPanel = ({ children, value, activeTab, ...other }) => {
- return (
-
- {value === activeTab &&
{children}
}
-
-
-
- 👗
-
- store.exe
-
-
-
-
- Shoes
-
-
- Accesories
-
-
- Clothing
-
-
-
-
-
- Amount:
- null}
- />
- null}
- defaultChecked
- />
-
-
-
- Accesories stuff here
-
-
- Clothing stuff here
-
-
-
-
- );
- }}
-
-
-## API
-
-### Import
-
-```
-import { Tabs } from 'react95'
-```
-
-### Props
-
-{story()} ]
-};
const Wrapper = styled.div`
padding: 5rem;
background: ${({ theme }) => theme.desktopBackground};
`;
+
+export default {
+ title: 'Controls/Tabs',
+ component: Tabs,
+ subcomponents: { Tab, TabBody },
+ decorators: [story => {story()} ]
+} as ComponentMeta;
+
export function Default() {
const [state, setState] = useState({
activeTab: 0
});
- const handleChange = (e, value) => setState({ activeTab: value });
+ const handleChange = (
+ value: number,
+ event: React.MouseEvent
+ ) => {
+ console.log({ value, event });
+ setState({ activeTab: value });
+ };
const { activeTab } = state;
return (
@@ -44,9 +52,9 @@ export function Default() {
{activeTab === 0 && (
-
+
Amount:
- null}
defaultChecked
/>
-
+
, 'onChange' | 'value'> &
+ CommonStyledProps;
+
+const StyledTabs = styled.div<{ isMultiRow: boolean }>`
+ position: relative;
+ ${({ isMultiRow, theme }) =>
+ isMultiRow &&
+ `
+ button {
+ flex-grow: 1;
+ }
+ button:last-child:before {
+ border-right: 2px solid ${theme.borderDark};
+ }
+ `}
+`;
+
+const Row = styled.div.attrs(() => ({
+ 'data-testid': 'tab-row'
+}))`
+ position: relative;
+ display: flex;
+ flex-wrap: no-wrap;
+ text-align: left;
+ left: 8px;
+ width: calc(100% - 8px);
+
+ &:not(:first-child):before {
+ content: '';
+ position: absolute;
+ right: 0;
+ left: 0;
+ height: 100%;
+ border-right: 2px solid ${({ theme }) => theme.borderDarkest};
+ border-left: 2px solid ${({ theme }) => theme.borderLightest};
+ }
+`;
+
+function splitToChunks(array: T[], parts: number) {
+ const result = [];
+ for (let i = parts; i > 0; i -= 1) {
+ result.push(array.splice(0, Math.ceil(array.length / i)));
+ }
+ return result;
+}
+
+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
+ }));
+
+ // 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}
+ ))}
+
+ );
+ }
+);
+
+Tabs.displayName = 'Tabs';
+
+export * from './Tab';
+
+export * from './TabBody';
+
+export { Tabs, TabsProps };
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
deleted file mode 100644
index fedc0119..00000000
--- a/src/TextField/TextField.mdx
+++ /dev/null
@@ -1,112 +0,0 @@
----
-name: TextField
-menu: Components
----
-
-import TextField from './TextField';
-import Cutout from '../Cutout/Cutout';
-
-# TextField
-
-## Usage
-
-#### Default
-
-
- 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:
-
-
-
- Name:
-
- 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:
-
-
-
- Name:
-
- console.log(e.target.value)}
- disabled
- />
-
-
-
-
-## API
-
-### Import
-
-```
-import { TextField } from 'react95'
-```
-
-### Props
-
-();
+ const { getByRole } = renderWithTheme(
+) => console.log(e.target.value);
const Wrapper = styled.div`
background: ${({ theme }) => theme.material};
@@ -18,23 +19,24 @@ const Wrapper = styled.div`
`;
export default {
- title: 'TextField',
- component: TextField,
+ title: 'Controls/TextInput',
+ component: TextInput,
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 (
-
-
+
-
+
-
+
When you want to add input field on a light background (like scrollable
content), just use the flat variant:
);
}
diff --git a/src/TextInput/TextInput.tsx b/src/TextInput/TextInput.tsx
new file mode 100644
index 00000000..11f92999
--- /dev/null
+++ b/src/TextInput/TextInput.tsx
@@ -0,0 +1,158 @@
+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 { StyledScrollView } from '../ScrollView/ScrollView';
+import { CommonStyledProps, CommonThemeProps } from '../types';
+
+type TextInputInputProps = {
+ multiline?: false | undefined;
+ onChange?: React.ChangeEventHandler;
+ /** @default text */
+ type?: React.HTMLInputTypeAttribute;
+} & Omit<
+ React.InputHTMLAttributes,
+ 'className' | 'disabled' | 'style' | 'type'
+>;
+
+type TextInputTextAreaProps = {
+ multiline: true;
+ onChange?: React.ChangeEventHandler;
+} & Omit<
+ React.TextareaHTMLAttributes,
+ 'className' | 'disabled' | 'style' | 'type'
+>;
+
+type TextInputProps = {
+ className?: string;
+ disabled?: boolean;
+ fullWidth?: boolean;
+ multiline?: boolean;
+ shadow?: boolean;
+ style?: React.CSSProperties;
+ variant?: 'default' | 'flat';
+} & (TextInputInputProps | TextInputTextAreaProps) &
+ 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(StyledScrollView).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 TextInput = forwardRef<
+ HTMLInputElement | HTMLTextAreaElement,
+ 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 ? (
+
+ {field}
+
+ );
+ }
+);
+
+TextInput.displayName = 'TextInput';
+
+export { TextInput, TextInputProps };
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 95%
rename from src/Toolbar/Toolbar.spec.js
rename to src/Toolbar/Toolbar.spec.tsx
index 2bc2f68d..dfe060a4 100644
--- a/src/Toolbar/Toolbar.spec.js
+++ b/src/Toolbar/Toolbar.spec.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
import { render } from '@testing-library/react';
+import React from 'react';
-import Toolbar from './Toolbar';
+import { Toolbar } from './Toolbar';
describe(';
+
+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}
+
+ );
+});
+
+Toolbar.displayName = 'Toolbar';
+
+export { Toolbar };
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
deleted file mode 100644
index b809b0df..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
-
-
-
- Whad do I do?
-
-
-
-## API
-
-### Import
-
-```
-import { Tooltip } from 'react95'
-```
-
-### Props
-
- = {}
+): Omit => ({
className: props.className,
disableFocusListener: props.disableFocusListener,
disableMouseListener: props.disableMouseListener,
@@ -19,7 +21,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 75%
rename from src/Tooltip/Tooltip.stories.js
rename to src/Tooltip/Tooltip.stories.tsx
index c2f5b0fc..186af133 100644
--- a/src/Tooltip/Tooltip.stories.js
+++ b/src/Tooltip/Tooltip.stories.tsx
@@ -1,18 +1,19 @@
+import { ComponentMeta } from '@storybook/react';
import React from 'react';
+import { Button, Tooltip } from 'react95';
import styled from 'styled-components';
-import { Tooltip, Button } from 'react95';
-
-export default {
- title: 'Tooltip',
- component: Tooltip,
- decorators: [story => {story()} ]
-};
const Wrapper = styled.div`
padding: 5rem;
background: ${({ theme }) => theme.desktopBackground};
`;
+export default {
+ title: 'Controls/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..60cf5558
--- /dev/null
+++ b/src/Tooltip/Tooltip.tsx
@@ -0,0 +1,197 @@
+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