Skip to content

Commit

Permalink
feat(plasma-rsc): Fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@shuga2704
shuga2704 committed Feb 15, 2024
1 parent 3c61d48 commit 2ea505e
Show file tree
Hide file tree
Showing 7 changed files with 225 additions and 631 deletions.
600 changes: 113 additions & 487 deletions packages/plasma-rsc/package-lock.json
View file

Large diffs are not rendered by default.

9 changes: 7 additions & 2 deletions packages/plasma-rsc/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
{
"name": "@salutejs/plasma-rsc",
"version": "0.1.0",
"main": "cjs/index.js",
"module": "es/index.js",
"types": "types/index.d.ts",
"repository": {
"type": "git",
"url": "ssh://[email protected]:salute-developers/plasma.git",
Expand All @@ -13,6 +16,8 @@
"lint": "next lint",
"build": "BABEL_ENV=esm rollup -c",
"prepare": "npm run build",
"prebuild": "rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map",
"postbuild": "npm run generate:typings",
"generate:typings": "tsc --outDir types --emitDeclarationOnly"
},
"dependencies": {
Expand All @@ -24,7 +29,6 @@
"devDependencies": {
"@ironkinoko/rollup-plugin-styles": "^4.0.3",
"@linaria/rollup": "5.0.4",
"@linaria/vite": "5.0.4",
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-commonjs": "^25.0.4",
"@rollup/plugin-node-resolve": "^15.1.0",
Expand All @@ -35,7 +39,8 @@
"react": "^18",
"react-dom": "^18",
"rollup": "^3.28.0",
"typescript": "^5"
"typescript": "4.2.4",
"vite": "4.5.1"
},
"publishConfig": {
"access": "public"
Expand Down
94 changes: 46 additions & 48 deletions packages/plasma-rsc/src/components/Button/Button.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { forwardRef } from 'react';
import React from 'react';
import type { CSSProperties } from 'react';

import type { RootProps } from '../../engines';
Expand All @@ -13,56 +13,54 @@ import type { ButtonProps } from './Button.types';
import { base, ButtonText, Loader, LoadWrap } from './Button.styles';
import { classes, tokens } from './Button.tokens';

export const buttonRoot = (Root: RootProps<HTMLButtonElement, ButtonProps>) =>
forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
const {
children,
view,
size,
text,
contentLeft,
contentRight,
isLoading,
loader,
stretch,
square,
pin,
disabled,
focused,
className,
style,
...rest
} = props;
export const buttonRoot = (Root: RootProps<HTMLButtonElement, ButtonProps>) => (props: ButtonProps) => {
const {
children,
view,
size,
text,
contentLeft,
contentRight,
isLoading,
loader,
stretch,
square,
pin,
disabled,
focused,
className,
style,
...rest
} = props;

const txt = typeof children === 'string' ? children : text;
const txt = typeof children === 'string' ? children : text;

const stretchClass = stretch ? classes.buttonStretch : undefined;
const squareClass = square ? classes.buttonSquare : undefined;
const buttonBorderRadius = pin
? convertRoundnessMatrix(pin, `var(${tokens.buttonRadius})`, `var(${tokens.buttonHeight})`)
: `var(${tokens.buttonRadius}, calc(var(${tokens.buttonHeight}) / 4))`;
const stretchClass = stretch ? classes.buttonStretch : undefined;
const squareClass = square ? classes.buttonSquare : undefined;
const buttonBorderRadius = pin
? convertRoundnessMatrix(pin, `var(${tokens.buttonRadius})`, `var(${tokens.buttonHeight})`)
: `var(${tokens.buttonRadius}, calc(var(${tokens.buttonHeight}) / 4))`;

return (
<Root
type="button"
ref={ref}
view={view}
size={size}
disabled={disabled}
focused={focused}
className={cx(squareClass, stretchClass, className)}
style={{ ...style, '--plasma_computed-btn-br': buttonBorderRadius } as CSSProperties}
{...rest}
>
<LoadWrap isLoading={isLoading}>
{contentLeft}
{txt ? <ButtonText>{txt}</ButtonText> : children}
{contentRight}
</LoadWrap>
{isLoading && <Loader>{loader || '♻️'}</Loader>}
</Root>
);
});
return (
<Root
type="button"
view={view}
size={size}
disabled={disabled}
focused={focused}
className={cx(squareClass, stretchClass, className)}
style={{ ...style, '--plasma_computed-btn-br': buttonBorderRadius } as CSSProperties}
{...rest}
>
<LoadWrap isLoading={isLoading}>
{contentLeft}
{txt ? <ButtonText>{txt}</ButtonText> : children}
{contentRight}
</LoadWrap>
{isLoading && <Loader>{loader || '♻️'}</Loader>}
</Root>
);
};

export const buttonConfig = {
name: 'Button',
Expand Down
139 changes: 54 additions & 85 deletions packages/plasma-rsc/src/components/Checkbox/Checkbox.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { forwardRef, useMemo } from 'react';
import React from 'react';
import { css } from '@linaria/core';
import { styled } from '@linaria/react';
// import type { InputHTMLAttributes } from '@salutejs/plasma-core';

import { applyNoUserSelect, applyEllipsis } from '../../mixins';
import type { Filter, RootProps } from '../../engines/types';
Expand Down Expand Up @@ -140,89 +139,59 @@ export interface BaseboxProps {

type CheckboxProps = Filter<any> & BaseboxProps;

export const checkboxRoot = (Root: RootProps<HTMLInputElement, CheckboxProps>) =>
forwardRef<HTMLInputElement, CheckboxProps>((props) => {
const {
size,
view,
focused,
disabled,
id,
label,
description,
indeterminate,
style,
className,
singleLine = false,
'aria-label': ariaLabelExternal,
...rest
} = props;

// const inputRef = useRef<HTMLInputElement | null>(null);
// const forkRef = useForkRef(inputRef, ref);

// useEffect(() => {
// if (inputRef.current) {
// inputRef.current.indeterminate = Boolean(indeterminate);
// }
// }, [inputRef, indeterminate]);

// const uniqId = safeUseId();
// const uniqLabelId = `label-${uniqId}`;
// const uniqDescriptionId = `description-${uniqId}`;
// const checkboxId = id || `input-${uniqId}`;

const ariaLabel = useMemo(() => ariaLabelExternal, [ariaLabelExternal, label]);
const isLabelAriaHidden = typeof label === 'string';
const canFocused = focused ? 0 : -1;
const hasContent = label || description;
const singleLineClass = singleLine ? 'single-line' : undefined;
const resetMargins = !hasContent ? 'reset-margins' : undefined;

return (
<Root
view={view}
size={size}
disabled={disabled}
focused={focused}
style={style}
className={cx(className, resetMargins)}
tabIndex={-1}
>
<StyledInput
{...rest}
// id={checkboxId}
// ref={forkRef}
type="checkbox"
disabled={disabled}
aria-label={ariaLabel}
// aria-describedby={uniqDescriptionId}
tabIndex={canFocused}
/>
<StyledContentWrapper>
<StyledTrigger className={cx('checkbox-trigger', resetMargins)}>
{indeterminate ? <Indeterminate /> : <Done />}
</StyledTrigger>
{hasContent && (
<StyledContent className={singleLineClass}>
{label && (
<StyledLabel
className={singleLineClass}
// id={uniqLabelId}
aria-hidden={isLabelAriaHidden}
>
{label}
</StyledLabel>
)}
{description && (
<StyledDescription className={singleLineClass}>{description}</StyledDescription>
)}
</StyledContent>
)}
</StyledContentWrapper>
</Root>
);
});
export const checkboxRoot = (Root: RootProps<HTMLInputElement, CheckboxProps>) => (
props: HTMLInputElement & CheckboxProps,
) => {
const {
size,
view,
focused,
disabled,
label,
description,
indeterminate,
style,
className,
singleLine = false,
} = props;

const isLabelAriaHidden = typeof label === 'string';
const canFocused = focused ? 0 : -1;
const hasContent = label || description;
const singleLineClass = singleLine ? 'single-line' : undefined;
const resetMargins = !hasContent ? 'reset-margins' : undefined;

return (
<Root
view={view}
size={size}
disabled={disabled}
focused={focused}
style={style}
className={cx(className, resetMargins)}
tabIndex={-1}
>
<StyledInput type="checkbox" disabled={disabled} tabIndex={canFocused} />
<StyledContentWrapper>
<StyledTrigger className={cx('checkbox-trigger', resetMargins)}>
{indeterminate ? <Indeterminate /> : <Done />}
</StyledTrigger>
{hasContent && (
<StyledContent className={singleLineClass}>
{label && (
<StyledLabel className={singleLineClass} aria-hidden={isLabelAriaHidden}>
{label}
</StyledLabel>
)}
{description && (
<StyledDescription className={singleLineClass}>{description}</StyledDescription>
)}
</StyledContent>
)}
</StyledContentWrapper>
</Root>
);
};

export const checkboxConfig = {
name: 'Checkbox',
Expand Down
2 changes: 1 addition & 1 deletion packages/plasma-rsc/src/components/Checkbox/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { checkboxConfig } from './Checkbox';

export type { BaseboxProps } from './Checkbox';

const mergedConfig = mergeConfig(checkboxConfig, config);
const mergedConfig = mergeConfig(checkboxConfig as any, config);
const CheckboxComponent = component(mergedConfig);

export type CheckboxProps = typeof CheckboxComponent;
Expand Down
4 changes: 1 addition & 3 deletions packages/plasma-rsc/src/engines/common.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,5 @@ export function component<
): React.FunctionComponent<VariantsProps & LayoutProps> {
const Comp = config.layout(_component((config as unknown) as ComponentConfig));

return React.forwardRef<VariantsProps & LayoutProps, any>((props, ref) => (
<Comp {...config?.defaults} {...props} ref={ref} />
));
return (props) => <Comp {...config?.defaults} {...props} />;
}
8 changes: 3 additions & 5 deletions packages/plasma-rsc/src/engines/linaria.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { forwardRef } from 'react';
import React from 'react';
import { cx } from '@linaria/core';

// TODO: #1008 Избавиться от импортов и переделать addFocus
Expand All @@ -13,7 +13,7 @@ export const _component = (componentConfig: ComponentConfig) => {
const dynamicVariants = getDynamicVariants(componentConfig);
const Root = tag as React.ElementType;

const component = forwardRef<HTMLElement, HTMLAnyAttributes>((props, ref) => {
const component = (props: HTMLAnyAttributes) => {
const { className, ...rest } = props;
const variants = dynamicVariants(rest);
const cls = cx(className, base, ...staticVariants, ...variants);
Expand All @@ -27,8 +27,6 @@ export const _component = (componentConfig: ComponentConfig) => {
}
}

baseProps.ref = ref;

// styled-components do it inside
// add props that should be attr( disabled for example)
const htmlAttrs: HTMLAnyAttributes = {};
Expand All @@ -44,7 +42,7 @@ export const _component = (componentConfig: ComponentConfig) => {
}

return <Root className={cls} {...htmlAttrs} {...baseProps} />;
});
};
if (name) {
component.displayName = name;
}
Expand Down

0 comments on commit 2ea505e

Please sign in to comment.