IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shared:Components:FieldContainer: rewrite to typescript

Browse Source
This commit is contained in:
Timofey Boyko 2023-12-20 17:00:10 +03:00
parent bae3a55b1b
commit 7c8b494314
14 changed files with 370 additions and 401 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/shared/components/combobox/Combobox.types.ts
View File

@ -5,7 +5,7 @@ import { ComboBoxDisplayType, ComboBoxSize } from "./Combobox.enums";
export type TCombobox = null | "badge";
export type TOption = {
key?: string | number;
key: string | number;
icon?: string;
label?: string;
color?: string;

66
packages/shared/components/field-container/FieldContainer.stories.tsx Normal file
View File

@ -0,0 +1,66 @@
import React, { useState } from "react";
import { Meta, StoryObj } from "@storybook/react";
import { InputSize, InputType, TextInput } from "../text-input";
import { FieldContainer } from "./FieldContainer";
import { FieldContainerProps } from "./FieldContainer.types";
const meta = {
title: "Components/FieldContainer",
component: FieldContainer,
argTypes: {
errorColor: { control: "color" },
},
parameters: {
docs: {
description: {
component: "Responsive form field container",
},
},
},
} satisfies Meta<typeof FieldContainer>;
type Story = StoryObj<typeof meta>;
export default meta;
const Template = (args: FieldContainerProps) => {
const [value, setValue] = useState("");
const { hasError } = args;
return (
<FieldContainer {...args}>
<TextInput
value={value}
hasError={hasError}
className="field-input"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
}}
type={InputType.text}
size={InputSize.base}
/>
</FieldContainer>
);
};
export const Default: Story = {
render: (args) => <Template {...args} />,
args: {
isVertical: false,
isRequired: false,
hasError: false,
labelVisible: true,
labelText: "Name:",
maxLabelWidth: "110px",
tooltipContent: "Paste you tooltip content here",
helpButtonHeaderContent: "Tooltip header",
place: "top",
errorMessage:
"Error text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit",
errorColor: "#C96C27",
errorMessageWidth: "293px",
removeMargin: false,
children: null,
},
};

98
packages/shared/components/field-container/FieldContainer.styled.ts Normal file
View File

@ -0,0 +1,98 @@
import styled, { css } from "styled-components";
import { tablet } from "../../utils";
import { Base } from "../../themes";
const getHorizontalCss = css<{ removeMargin?: boolean; labelWidth?: string }>`
display: flex;
flex-direction: row;
align-items: start;
margin: ${(props) =>
props.removeMargin ? 0 : props.theme.fieldContainer.horizontal.margin};
.field-label {
line-height: ${(props) =>
props.theme.fieldContainer.horizontal.label.lineHeight};
margin: ${(props) => props.theme.fieldContainer.horizontal.label.margin};
position: relative;
}
.field-label-icon {
display: inline-flex;
min-width: ${(props) => props.labelWidth};
width: ${(props) => props.labelWidth};
}
.field-body {
flex-grow: ${(props) =>
props.theme.fieldContainer.horizontal.body.flexGrow};
}
.icon-button {
position: relative;
margin-top: ${(props) =>
props.theme.fieldContainer.horizontal.iconButton.marginTop};
margin-left: ${(props) =>
props.theme.fieldContainer.horizontal.iconButton.marginLeft};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-left: 0;
margin-right: ${props.theme.fieldContainer.horizontal.iconButton
.marginLeft};
`}
}
`;
const getVerticalCss = css<{ removeMargin?: boolean }>`
display: flex;
flex-direction: column;
align-items: start;
margin: ${(props) =>
props.removeMargin ? 0 : props.theme.fieldContainer.vertical.margin};
.field-label {
line-height: ${(props) =>
props.theme.fieldContainer.vertical.label.lineHeight};
height: ${(props) => props.theme.fieldContainer.vertical.label.height};
display: inline-block;
}
.field-label-icon {
display: inline-flex;
width: ${(props) => props.theme.fieldContainer.vertical.labelIcon.width};
margin: ${(props) => props.theme.fieldContainer.vertical.labelIcon.margin};
}
.field-body {
width: ${(props) => props.theme.fieldContainer.vertical.body.width};
}
.icon-button {
position: relative;
margin: ${(props) => props.theme.fieldContainer.vertical.iconButton.margin};
padding: ${(props) =>
props.theme.fieldContainer.vertical.iconButton.padding};
display: flex;
align-items: center;
height: 100%;
}
`;
const Container = styled.div<{
maxwidth?: string;
color?: string;
vertical?: boolean;
removeMargin?: boolean;
labelWidth?: string;
}>`
.error-label {
max-width: ${(props) => (props.maxwidth ? props.maxwidth : "293px")};
color: ${(props) =>
props.color ? props.color : props.theme.fieldContainer.errorLabel.color};
padding-top: 4px;
}
${(props) => (props.vertical ? getVerticalCss : getHorizontalCss)}
@media ${tablet} {
${getVerticalCss}
}
`;
Container.defaultProps = { theme: Base };
export default Container;

45
packages/shared/components/field-container/FieldContainer.test.tsx Normal file
View File

@ -0,0 +1,45 @@
import React from "react";
import { screen, render } from "@testing-library/react";
import "@testing-library/jest-dom";
import { FieldContainer } from "./FieldContainer";
import { InputSize, InputType, TextInput } from "../text-input";
describe("<FieldContainer />", () => {
it("renders without error", () => {
render(
<FieldContainer labelText="Name:">
<TextInput
value=""
onChange={() => {}}
type={InputType.text}
size={InputSize.base}
/>
</FieldContainer>,
);
expect(screen.getByTestId("field-container")).toBeInTheDocument();
});
// it("accepts id", () => {
// // @ts-expect-error TS(2322): Type '{ id: string; }' is not assignable to type '... Remove this comment to see the full error message
// const wrapper = mount(<FieldContainer id="testId" />);
// expect(wrapper.prop("id")).toEqual("testId");
// });
// it("accepts className", () => {
// // @ts-expect-error TS(2322): Type '{ className: string; }' is not assignable to... Remove this comment to see the full error message
// const wrapper = mount(<FieldContainer className="test" />);
// expect(wrapper.prop("className")).toEqual("test");
// });
// it("accepts style", () => {
// // @ts-expect-error TS(2322): Type '{ style: { color: string; }; }' is not assig... Remove this comment to see the full error message
// const wrapper = mount(<FieldContainer style={{ color: "red" }} />);
// expect(wrapper.getDOMNode().style).toHaveProperty("color", "red");
// });
});

102
packages/shared/components/field-container/FieldContainer.tsx Normal file
View File

@ -0,0 +1,102 @@
import React from "react";
import { Label } from "../label";
import { HelpButton } from "../help-button";
import { Text } from "../text";
import Container from "./FieldContainer.styled";
import { FieldContainerProps } from "./FieldContainer.types";
const displayInlineBlock = { display: "inline-block" };
const FieldContainer = ({
isVertical,
maxLabelWidth = "110px",
className,
id,
style,
errorMessageWidth = "293px",
removeMargin = false,
labelVisible = true,
inlineHelpButton,
isRequired,
labelText,
tooltipMaxWidth,
tooltipContent,
tooltipClass,
// helpButtonHeaderContent,
place = "bottom",
hasError,
children,
errorMessage,
errorColor,
}: FieldContainerProps) => {
return (
<Container
vertical={isVertical}
labelWidth={maxLabelWidth}
className={className}
id={id}
style={style}
maxwidth={errorMessageWidth}
removeMargin={removeMargin}
data-testid="field-container"
>
{labelVisible &&
(!inlineHelpButton ? (
<div className="field-label-icon">
<Label
isRequired={isRequired}
// error={hasError}
text={labelText}
truncate
className="field-label"
tooltipMaxWidth={tooltipMaxWidth}
htmlFor=""
/>
{tooltipContent && (
<HelpButton
className={tooltipClass}
tooltipContent={tooltipContent}
place={place}
// helpButtonHeaderContent={helpButtonHeaderContent}
/>
)}
</div>
) : (
<div className="field-label-icon">
<Label
isRequired={isRequired}
htmlFor=""
// error={hasError}
text={labelText}
truncate
className="field-label"
>
{tooltipContent && (
<HelpButton
className={tooltipClass}
tooltipContent={tooltipContent}
place={place}
// helpButtonHeaderContent={helpButtonHeaderContent}
style={displayInlineBlock}
offsetRight={0}
/>
)}
</Label>
</div>
))}
<div className="field-body">
{children}
{hasError ? (
<Text className="error-label" fontSize="12px" color={errorColor}>
{errorMessage}
</Text>
) : null}
</div>
</Container>
);
};
export { FieldContainer };

47
packages/shared/components/field-container/FieldContainer.types.tsx Normal file
View File

@ -0,0 +1,47 @@
import { TTooltipPlace } from "../tooltip";
export interface FieldContainerProps {
/** Vertical or horizontal alignment */
isVertical?: boolean;
/** Remove default margin property */
removeMargin?: boolean;
/** Accepts class */
className?: string;
/** Indicates that the field is required to fill */
isRequired?: boolean;
/** Indicates that the field is incorrect */
hasError?: boolean;
/** Sets visibility of the field label section */
labelVisible?: boolean;
/** Field label text or element */
labelText?: string | React.ReactNode;
/** Icon source */
icon?: string;
/** Renders the help button inline instead of the separate div */
inlineHelpButton?: boolean;
/** Children elements */
children: React.ReactNode;
/** Tooltip content */
tooltipContent?: string | React.ReactNode;
/** Sets the global position of the tooltip */
place?: TTooltipPlace;
/** Tooltip header content (tooltip opened in aside) */
helpButtonHeaderContent?: string;
/** Max label width in horizontal alignment */
maxLabelWidth?: string;
/** Error message text */
errorMessage?: string;
/** Error text color */
errorColor?: string;
/** Error text width */
errorMessageWidth?: string;
/** Accepts id */
id?: string;
/** Accepts css style */
style?: React.CSSProperties;
/** Specifies the offset */
offsetRight?: number;
/** Sets the maximum width of the tooltip */
tooltipMaxWidth?: string;
tooltipClass?: string;
}

2
packages/shared/components/field-container/README.md
View File

@ -5,7 +5,7 @@ Responsive form field container
### Usage
```js
import FieldContainer from "@docspace/components/field-container";
import { FieldContainer } from "@docspace/shared/components";
```
```jsx

53
packages/shared/components/field-container/field-container.stories.tsx
View File

@ -1,53 +0,0 @@
import React, { useState } from "react";
import FieldContainer from ".";
import TextInput from "../text-input";
export default {
title: "Components/FieldContainer",
component: FieldContainer,
argTypes: {
errorColor: { control: "color" },
},
parameters: {
docs: {
description: {
component: "Responsive form field container",
},
},
},
};
const Template = (args: any) => {
const [value, setValue] = useState("");
return (
<FieldContainer {...args}>
<TextInput
value={value}
hasError={args.hasError}
className="field-input"
onChange={(e: any) => {
setValue(e.target.value);
}}
/>
</FieldContainer>
);
};
export const Default = Template.bind({});
// @ts-expect-error TS(2339): Property 'args' does not exist on type '(args: any... Remove this comment to see the full error message
Default.args = {
isVertical: false,
isRequired: false,
hasError: false,
labelVisible: true,
labelText: "Name:",
maxLabelWidth: "110px",
tooltipContent: "Paste you tooltip content here",
helpButtonHeaderContent: "Tooltip header",
place: "top",
errorMessage:
"Error text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit",
errorColor: "#C96C27",
errorMessageWidth: "293px",
removeMargin: false,
};

48
packages/shared/components/field-container/field-container.test.tsx
View File

@ -1,48 +0,0 @@
import React from "react";
// @ts-expect-error TS(7016): Could not find a declaration file for module 'enzy... Remove this comment to see the full error message
import { mount } from "enzyme";
import FieldContainer from ".";
import TextInput from "../text-input";
// @ts-expect-error TS(2582): Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
describe("<FieldContainer />", () => {
// @ts-expect-error TS(2582): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
it("renders without error", () => {
const wrapper = mount(
// @ts-expect-error TS(2322): Type '{ children: Element; labelText: string; }' i... Remove this comment to see the full error message
<FieldContainer labelText="Name:">
<TextInput value="" onChange={(e: any) => console.log(e.target.value)} />
</FieldContainer>
);
// @ts-expect-error TS(2304): Cannot find name 'expect'.
expect(wrapper).toExist();
});
// @ts-expect-error TS(2582): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
it("accepts id", () => {
// @ts-expect-error TS(2322): Type '{ id: string; }' is not assignable to type '... Remove this comment to see the full error message
const wrapper = mount(<FieldContainer id="testId" />);
// @ts-expect-error TS(2304): Cannot find name 'expect'.
expect(wrapper.prop("id")).toEqual("testId");
});
// @ts-expect-error TS(2582): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
it("accepts className", () => {
// @ts-expect-error TS(2322): Type '{ className: string; }' is not assignable to... Remove this comment to see the full error message
const wrapper = mount(<FieldContainer className="test" />);
// @ts-expect-error TS(2304): Cannot find name 'expect'.
expect(wrapper.prop("className")).toEqual("test");
});
// @ts-expect-error TS(2582): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
it("accepts style", () => {
// @ts-expect-error TS(2322): Type '{ style: { color: string; }; }' is not assig... Remove this comment to see the full error message
const wrapper = mount(<FieldContainer style={{ color: "red" }} />);
// @ts-expect-error TS(2304): Cannot find name 'expect'.
expect(wrapper.getDOMNode().style).toHaveProperty("color", "red");
});
});

196
packages/shared/components/field-container/index.tsx
View File

@ -1,195 +1 @@
import React from "react";
import PropTypes from "prop-types";
import Label from "../label";
import HelpButton from "../help-button";
import Text from "../text";
import Container from "./styled-field-container";
const displayInlineBlock = { display: "inline-block" };
class FieldContainer extends React.Component {
constructor(props: any) {
super(props);
}
render() {
const {
// @ts-expect-error TS(2339): Property 'isVertical' does not exist on type 'Read... Remove this comment to see the full error message
isVertical,
// @ts-expect-error TS(2339): Property 'className' does not exist on type 'Reado... Remove this comment to see the full error message
className,
// @ts-expect-error TS(2339): Property 'id' does not exist on type 'Readonly<{}>... Remove this comment to see the full error message
id,
// @ts-expect-error TS(2339): Property 'style' does not exist on type 'Readonly<... Remove this comment to see the full error message
style,
// @ts-expect-error TS(2339): Property 'isRequired' does not exist on type 'Read... Remove this comment to see the full error message
isRequired,
// @ts-expect-error TS(2339): Property 'hasError' does not exist on type 'Readon... Remove this comment to see the full error message
hasError,
// @ts-expect-error TS(2339): Property 'labelVisible' does not exist on type 'Re... Remove this comment to see the full error message
labelVisible,
// @ts-expect-error TS(2339): Property 'labelText' does not exist on type 'Reado... Remove this comment to see the full error message
labelText,
// @ts-expect-error TS(2339): Property 'children' does not exist on type 'Readon... Remove this comment to see the full error message
children,
// @ts-expect-error TS(2339): Property 'tooltipContent' does not exist on type '... Remove this comment to see the full error message
tooltipContent,
// @ts-expect-error TS(2339): Property 'place' does not exist on type 'Readonly<... Remove this comment to see the full error message
place,
// @ts-expect-error TS(2339): Property 'helpButtonHeaderContent' does not exist ... Remove this comment to see the full error message
helpButtonHeaderContent,
// @ts-expect-error TS(2339): Property 'maxLabelWidth' does not exist on type 'R... Remove this comment to see the full error message
maxLabelWidth,
// @ts-expect-error TS(2339): Property 'errorMessage' does not exist on type 'Re... Remove this comment to see the full error message
errorMessage,
// @ts-expect-error TS(2339): Property 'errorColor' does not exist on type 'Read... Remove this comment to see the full error message
errorColor,
// @ts-expect-error TS(2339): Property 'errorMessageWidth' does not exist on typ... Remove this comment to see the full error message
errorMessageWidth,
// @ts-expect-error TS(2339): Property 'inlineHelpButton' does not exist on type... Remove this comment to see the full error message
inlineHelpButton,
// @ts-expect-error TS(2339): Property 'offsetRight' does not exist on type 'Rea... Remove this comment to see the full error message
offsetRight,
// @ts-expect-error TS(2339): Property 'tooltipMaxWidth' does not exist on type ... Remove this comment to see the full error message
tooltipMaxWidth,
// @ts-expect-error TS(2339): Property 'tooltipClass' does not exist on type 'Re... Remove this comment to see the full error message
tooltipClass,
// @ts-expect-error TS(2339): Property 'removeMargin' does not exist on type 'Re... Remove this comment to see the full error message
removeMargin,
} = this.props;
return (
<Container
// @ts-expect-error TS(2769): No overload matches this call.
vertical={isVertical}
maxLabelWidth={maxLabelWidth}
className={className}
id={id}
style={style}
maxwidth={errorMessageWidth}
removeMargin={removeMargin}
>
{labelVisible &&
(!inlineHelpButton ? (
<div className="field-label-icon">
<Label
isRequired={isRequired}
//error={hasError}
text={labelText}
truncate={true}
className="field-label"
// @ts-expect-error TS(2322): Type '{ isRequired: any; text: any; truncate: true... Remove this comment to see the full error message
tooltipMaxWidth={tooltipMaxWidth}
/>
{tooltipContent && (
<HelpButton
// @ts-expect-error TS(2322): Type '{ className: any; tooltipContent: any; place... Remove this comment to see the full error message
className={tooltipClass}
tooltipContent={tooltipContent}
place={place}
helpButtonHeaderContent={helpButtonHeaderContent}
/>
)}
</div>
) : (
<div className="field-label-icon">
<Label
isRequired={isRequired}
//error={hasError}
text={labelText}
truncate={true}
className="field-label"
>
{tooltipContent && (
<HelpButton
// @ts-expect-error TS(2322): Type '{ className: any; tooltipContent: any; place... Remove this comment to see the full error message
className={tooltipClass}
tooltipContent={tooltipContent}
place={place}
helpButtonHeaderContent={helpButtonHeaderContent}
style={displayInlineBlock}
offsetRight={0}
/>
)}
</Label>
</div>
))}
<div className="field-body">
{children}
{hasError ? (
// @ts-expect-error TS(2322): Type '{ children: any; className: string; fontSize... Remove this comment to see the full error message
<Text className="error-label" fontSize="12px" color={errorColor}>
{errorMessage}
</Text>
) : null}
</div>
</Container>
);
}
}
// @ts-expect-error TS(2339): Property 'displayName' does not exist on type 'typ... Remove this comment to see the full error message
FieldContainer.displayName = "FieldContainer";
// @ts-expect-error TS(2339): Property 'propTypes' does not exist on type 'typeo... Remove this comment to see the full error message
FieldContainer.propTypes = {
/** Vertical or horizontal alignment */
isVertical: PropTypes.bool,
/** Remove default margin property */
removeMargin: PropTypes.bool,
/** Accepts class */
className: PropTypes.string,
/** Indicates that the field is required to fill */
isRequired: PropTypes.bool,
/** Indicates that the field is incorrect */
hasError: PropTypes.bool,
/** Sets visibility of the field label section */
labelVisible: PropTypes.bool,
/** Field label text or element */
labelText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
/** Icon source */
icon: PropTypes.string,
/** Renders the help button inline instead of the separate div*/
inlineHelpButton: PropTypes.bool,
/** Children elements */
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]),
/** Tooltip content */
tooltipContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
/** Sets the global position of the tooltip */
place: PropTypes.string,
/** Tooltip header content (tooltip opened in aside) */
helpButtonHeaderContent: PropTypes.string,
/** Max label width in horizontal alignment */
maxLabelWidth: PropTypes.string,
/** Error message text */
errorMessage: PropTypes.string,
/** Error text color */
errorColor: PropTypes.string,
/** Error text width */
errorMessageWidth: PropTypes.string,
/** Accepts id */
id: PropTypes.string,
/** Accepts css style */
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
/** Specifies the offset */
offsetRight: PropTypes.number,
/** Sets the maximum width of the tooltip */
tooltipMaxWidth: PropTypes.string,
};
// @ts-expect-error TS(2339): Property 'defaultProps' does not exist on type 'ty... Remove this comment to see the full error message
FieldContainer.defaultProps = {
place: "bottom",
labelVisible: true,
maxLabelWidth: "110px",
errorMessageWidth: "293px",
offsetRight: 0,
removeMargin: false,
};
export default FieldContainer;
export { FieldContainer } from "./FieldContainer";

100
packages/shared/components/field-container/styled-field-container.ts
View File

@ -1,100 +0,0 @@
import styled, { css } from "styled-components";
import { tablet } from "../utils/device";
import Base from "../themes/base";
function getHorizontalCss(labelWidth: any) {
return css`
display: flex;
flex-direction: row;
align-items: start;
margin: ${(props) =>
// @ts-expect-error TS(2339): Property 'removeMargin' does not exist on type 'Th... Remove this comment to see the full error message
props.removeMargin ? 0 : props.theme.fieldContainer.horizontal.margin};
.field-label {
line-height: ${(props) =>
props.theme.fieldContainer.horizontal.label.lineHeight};
margin: ${(props) => props.theme.fieldContainer.horizontal.label.margin};
position: relative;
}
.field-label-icon {
display: inline-flex;
min-width: ${labelWidth};
width: ${labelWidth};
}
.field-body {
flex-grow: ${(props) =>
props.theme.fieldContainer.horizontal.body.flexGrow};
}
.icon-button {
position: relative;
margin-top: ${(props) =>
props.theme.fieldContainer.horizontal.iconButton.marginTop};
margin-left: ${(props) =>
props.theme.fieldContainer.horizontal.iconButton.marginLeft};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-left: 0;
margin-right: ${(props) =>
props.theme.fieldContainer.horizontal.iconButton.marginLeft};
`}
}
`;
}
function getVerticalCss() {
return css`
display: flex;
flex-direction: column;
align-items: start;
margin: ${(props) =>
// @ts-expect-error TS(2339): Property 'removeMargin' does not exist on type 'Th... Remove this comment to see the full error message
props.removeMargin ? 0 : props.theme.fieldContainer.vertical.margin};
.field-label {
line-height: ${(props) =>
props.theme.fieldContainer.vertical.label.lineHeight};
height: ${(props) => props.theme.fieldContainer.vertical.label.height};
display: inline-block;
}
.field-label-icon {
display: inline-flex;
width: ${(props) => props.theme.fieldContainer.vertical.labelIcon.width};
margin: ${(props) =>
props.theme.fieldContainer.vertical.labelIcon.margin};
}
.field-body {
width: ${(props) => props.theme.fieldContainer.vertical.body.width};
}
.icon-button {
position: relative;
margin: ${(props) =>
props.theme.fieldContainer.vertical.iconButton.margin};
padding: ${(props) =>
props.theme.fieldContainer.vertical.iconButton.padding};
display: flex;
align-items: center;
height: 100%;
}
`;
}
const Container = styled.div`
.error-label {
// @ts-expect-error TS(2339): Property 'maxwidth' does not exist on type 'Themed... Remove this comment to see the full error message
max-width: ${(props) => (props.maxwidth ? props.maxwidth : "293px")};
color: ${(props) =>
props.color ? props.color : props.theme.fieldContainer.errorLabel.color};
padding-top: 4px;
}
${(props) =>
// @ts-expect-error TS(2339): Property 'vertical' does not exist on type 'Themed... Remove this comment to see the full error message
props.vertical ? getVerticalCss() : getHorizontalCss(props.maxLabelWidth)}
@media ${tablet} {
${getVerticalCss()}
}
`;
Container.defaultProps = { theme: Base };
export default Container;

4
packages/shared/components/index.ts
View File

@ -70,6 +70,8 @@ import {
TTableColumn,
TGroupMenuItem,
} from "./table";
import { Label } from "./label";
import { FieldContainer } from "./field-container";
export type {
TFallbackAxisSideDirection,
@ -81,6 +83,8 @@ export type {
};
export {
FieldContainer,
Label,
TableGroupMenu,
TableBody,
TableContainer,

4
packages/shared/components/table/TableGroupMenu.tsx
View File

@ -5,7 +5,7 @@ import TriangleNavigationDownReactSvgUrl from "PUBLIC_DIR/images/triangle.naviga
import PanelReactSvgUrl from "PUBLIC_DIR/images/panel.react.svg?url";
import { Checkbox } from "../checkbox";
import { ComboBox } from "../combobox";
import { ComboBox, TOption } from "../combobox";
import { IconButton } from "../icon-button";
import { ThemeId } from "../color-theme";
@ -59,7 +59,7 @@ const TableGroupMenu = (props: TableGroupMenuProps) => {
advancedOptions={checkboxOptions}
className="table-container_group-menu-combobox not-selectable"
options={[]}
selectedOption={{}}
selectedOption={{} as TOption}
manualY="42px"
manualX="-32px"
title={t("Common:TitleSelectFile")}

4
packages/shared/components/text/Text.types.ts
View File

@ -31,10 +31,12 @@ export interface TextProps {
className?: string;
/** Disables word wrapping */
truncate?: boolean;
id?: string;
style?: React.CSSProperties;
dir?: string;
children?: React.ReactNode;
onClick?: (e: React.MouseEvent<Element>) => void;
htmlFor?: string;
}
export interface StyledTextProps {