@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/Button/Button.tsx

@@ -1,225 +0,0 @@
-import * as React from "react";
-import { classNames } from "../../lib/classNames";
-import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
-import Tappable, { TappableProps } from "../Tappable/Tappable";
-import Title from "../Typography/Title/Title";
-import Text from "../Typography/Text/Text";
-import Subhead from "../Typography/Subhead/Subhead";
-import Caption from "../Typography/Caption/Caption";
-import { HasAlign, HasComponent } from "../../types";
-import { usePlatform } from "../../hooks/usePlatform";
-import {
-  AdaptivityProps,
-  SizeType,
-  withAdaptivity,
-} from "../../hoc/withAdaptivity";
-import { PlatformType, IOS, VKCOM, ANDROID } from "../../lib/platform";
-import Spinner from "../Spinner/Spinner";
-import Headline from "../Typography/Headline/Headline";
-import "./Button.css";
-
-export interface VKUIButtonProps extends HasAlign {
-  /**
-   Значения `commerce`, `destructive`, `overlay_...` будут упразднены в 5.0.0
-   */
-  mode?:
-    | "primary"
-    | "secondary"
-    | "tertiary"
-    | "outline"
-    | "commerce"
-    | "destructive"
-    | "overlay_primary"
-    | "overlay_secondary"
-    | "overlay_outline";
-  appearance?: "accent" | "positive" | "negative" | "neutral" | "overlay";
-  size?: "s" | "m" | "l";
-  stretched?: boolean;
-  before?: React.ReactNode;
-  after?: React.ReactNode;
-  loading?: boolean;
-}
-
-export interface ButtonProps
-  extends Omit<TappableProps, "size">,
-    VKUIButtonProps {}
-
-interface ButtonTypographyProps extends HasComponent {
-  size: ButtonProps["size"];
-  platform: PlatformType | undefined;
-  sizeY: AdaptivityProps["sizeY"];
-  children?: ButtonProps["children"];
-}
-
-const ButtonTypography: React.FC<ButtonTypographyProps> = (
-  props: ButtonTypographyProps
-) => {
-  const { size, sizeY, platform, ...restProps } = props;
-  const isCompact = sizeY === SizeType.COMPACT;
-
-  switch (size) {
-    case "l":
-      if (isCompact) {
-        return <Text weight="medium" {...restProps} />;
-      }
-      if (platform === ANDROID) {
-        return <Headline weight="medium" {...restProps} />;
-      }
-      return <Title level="3" weight="2" {...restProps} />;
-    case "m":
-      if (isCompact) {
-        return (
-          <Subhead weight={platform === VKCOM ? "3" : "2"} {...restProps} />
-        );
-      }
-
-      return <Text weight="medium" {...restProps} />;
-    case "s":
-    default:
-      if (platform === IOS) {
-        return <Subhead weight="2" {...restProps} />;
-      }
-
-      if (platform === VKCOM) {
-        return <Caption level="1" weight="regular" {...restProps} />;
-      }
-
-      if (isCompact) {
-        return <Caption level="1" weight="medium" {...restProps} />;
-      }
-
-      return <Subhead weight="2" {...restProps} />;
-  }
-};
-
-interface ResolvedButtonAppearance {
-  resolvedAppearance: ButtonProps["appearance"];
-  resolvedMode: ButtonProps["mode"];
-}
-
-function resolveButtonAppearance(
-  appearance: ButtonProps["appearance"],
-  mode: ButtonProps["mode"]
-): ResolvedButtonAppearance {
-  let resolvedAppearance: ButtonProps["appearance"] = appearance;
-  let resolvedMode: ButtonProps["mode"] = mode;
-
-  if (appearance === undefined) {
-    switch (mode) {
-      case "tertiary":
-      case "secondary":
-      case "primary":
-      case "outline":
-        resolvedAppearance = "accent";
-        break;
-      case "commerce":
-        resolvedMode = "primary";
-        resolvedAppearance = "positive";
-        break;
-      case "destructive":
-        resolvedMode = "primary";
-        resolvedAppearance = "negative";
-        break;
-      case "overlay_primary":
-        resolvedMode = "primary";
-        resolvedAppearance = "overlay";
-        break;
-      case "overlay_secondary":
-        resolvedMode = "secondary";
-        resolvedAppearance = "overlay";
-        break;
-      case "overlay_outline":
-        resolvedMode = "outline";
-        resolvedAppearance = "overlay";
-        break;
-    }
-  }
-
-  return {
-    resolvedAppearance,
-    resolvedMode,
-  };
-}
-
-const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
-  const platform = usePlatform();
-  const {
-    size,
-    mode,
-    appearance,
-    stretched,
-    align,
-    children,
-    before,
-    after,
-    getRootRef,
-    sizeY,
-    Component = "button",
-    loading,
-    onClick,
-    ...restProps
-  } = props;
-  const hasIcons = Boolean(before || after);
-  const { resolvedMode, resolvedAppearance } = resolveButtonAppearance(
-    appearance,
-    mode
-  );
-  const hasNewTokens = React.useContext(ConfigProviderContext).hasNewTokens;
-
-  return (
-    <Tappable
-      {...restProps}
-      Component={restProps.href ? "a" : Component}
-      onClick={loading ? undefined : onClick}
-      focusVisibleMode="outside"
-      vkuiClass={classNames(
-        "Button",
-        `Button--sz-${size}`,
-        `Button--lvl-${resolvedMode}`,
-        `Button--clr-${resolvedAppearance}`,
-        `Button--aln-${align}`,
-        `Button--sizeY-${sizeY}`,
-        {
-          ["Button--stretched"]: stretched,
-          ["Button--with-icon"]: hasIcons,
-          ["Button--singleIcon"]: Boolean(
-            (!children && !after && before) || (!children && after && !before)
-          ),
-        }
-      )}
-      getRootRef={getRootRef}
-      hoverMode={hasNewTokens ? "Button--hover" : "background"}
-      activeMode={hasNewTokens ? "Button--active" : "opacity"}
-    >
-      {loading && <Spinner size="small" vkuiClass="Button__spinner" />}
-      <span vkuiClass="Button__in">
-        {before && <span vkuiClass="Button__before">{before}</span>}
-        {children && (
-          <ButtonTypography
-            size={size}
-            sizeY={sizeY}
-            platform={platform}
-            vkuiClass="Button__content"
-            Component="span"
-          >
-            {children}
-          </ButtonTypography>
-        )}
-        {after && <span vkuiClass="Button__after">{after}</span>}
-      </span>
-    </Tappable>
-  );
-};
-
-Button.defaultProps = {
-  mode: "primary",
-  align: "center",
-  size: "s",
-  stretched: false,
-  stopPropagation: true,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(Button, {
-  sizeY: true,
-});

package/src/components/Button/Readme.md

@@ -1,186 +0,0 @@
-```jsx { "props": { "layout": false, "iframe": false } }
-const containerStyles = {
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  width: "100%",
-};
-
-const Example = () => {
-  const [appearance, setAppearance] = useState("accent");
-  const [sizeY, setSizeY] = useState("compact");
-  const [stretched, setStretched] = useState(false);
-  const [disabled, setDisabled] = useState(false);
-  const [size, setSize] = useState("s");
-  const [loading, setLoading] = useState(false);
-  const [addBefore, setAddBefore] = useState(false);
-  const [addAfter, setAddAfter] = useState(false);
-  const [addText, setAddText] = useState(true);
-  const [hasLink, setHasLink] = useState(false);
-
-  const buttonBefore =
-    addBefore &&
-    (size === "s" ? (
-      <Icon12Add />
-    ) : size === "m" ? (
-      <Icon16Add />
-    ) : (
-      <Icon24Add />
-    ));
-  const buttonAfter =
-    addAfter &&
-    (size === "s" ? (
-      <Icon12Tag />
-    ) : size === "m" ? (
-      <Icon24ChevronCompactRight />
-    ) : (
-      <Counter>16</Counter>
-    ));
-  const buttonLink = hasLink ? "#" : undefined;
-  const buttonText = addText ? "Button" : undefined;
-
-  return (
-    <div style={{ display: "flex", flexDirection: "row-reverse" }}>
-      <AdaptivityProvider sizeY={sizeY}>
-        <div
-          style={{
-            background: appearance === "overlay" ? "#232323" : "unset",
-            ...containerStyles,
-          }}
-        >
-          <Div>
-            <Button
-              href={buttonLink}
-              before={buttonBefore}
-              after={buttonAfter}
-              appearance={appearance}
-              stretched={stretched}
-              disabled={disabled}
-              size={size}
-              loading={loading}
-            >
-              {buttonText}
-            </Button>
-          </Div>
-          <Div>
-            <Button
-              href={buttonLink}
-              before={buttonBefore}
-              after={buttonAfter}
-              appearance={appearance}
-              stretched={stretched}
-              mode="secondary"
-              disabled={disabled}
-              size={size}
-              loading={loading}
-            >
-              {buttonText}
-            </Button>
-          </Div>
-          <Div>
-            <Button
-              href={buttonLink}
-              before={buttonBefore}
-              after={buttonAfter}
-              appearance={appearance}
-              stretched={stretched}
-              mode="tertiary"
-              disabled={disabled}
-              size={size}
-              loading={loading}
-            >
-              {buttonText}
-            </Button>
-          </Div>
-          <Div>
-            <Button
-              href={buttonLink}
-              before={buttonBefore}
-              after={buttonAfter}
-              appearance={appearance}
-              stretched={stretched}
-              mode="outline"
-              disabled={disabled}
-              size={size}
-              loading={loading}
-            >
-              {buttonText}
-            </Button>
-          </Div>
-        </div>
-      </AdaptivityProvider>
-      <div style={{ minWidth: 200 }}>
-        <FormItem top="appearance">
-          <Select
-            value={appearance}
-            onChange={(e) => setAppearance(e.target.value)}
-            options={[
-              { label: "accent", value: "accent" },
-              { label: "positive", value: "positive" },
-              { label: "negative", value: "negative" },
-              { label: "neutral", value: "neutral" },
-              { label: "overlay", value: "overlay" },
-            ]}
-          />
-        </FormItem>
-        <FormItem top="size">
-          <Select
-            value={size}
-            onChange={(e) => setSize(e.target.value)}
-            options={[
-              { label: "s", value: "s" },
-              { label: "m", value: "m" },
-              { label: "l", value: "l" },
-            ]}
-          />
-        </FormItem>
-        <FormItem top="sizeY">
-          <Select
-            value={sizeY}
-            onChange={(e) => setSizeY(e.target.value)}
-            options={[
-              { label: "compact", value: "compact" },
-              { label: "regular", value: "regular" },
-            ]}
-          />
-        </FormItem>
-        <FormItem top="props">
-          <Checkbox onChange={(e) => setStretched(e.target.checked)}>
-            stretched
-          </Checkbox>
-          <Checkbox onChange={(e) => setLoading(e.target.checked)}>
-            loading
-          </Checkbox>
-          <Checkbox onChange={(e) => setDisabled(e.target.checked)}>
-            disabled
-          </Checkbox>
-          <Checkbox
-            disabled={!(addBefore || addAfter)}
-            onChange={(e) => setAddText(e.target.checked)}
-            checked={addText}
-          >
-            add text
-          </Checkbox>
-          <Checkbox
-            disabled={!(addText || addAfter)}
-            onChange={(e) => setAddBefore(e.target.checked)}
-          >
-            add before
-          </Checkbox>
-          <Checkbox
-            disabled={!(addText || addBefore)}
-            onChange={(e) => setAddAfter(e.target.checked)}
-          >
-            add after
-          </Checkbox>
-          <Checkbox onChange={(e) => setHasLink(e.target.checked)}>
-            add href
-          </Checkbox>
-        </FormItem>
-      </div>
-    </div>
-  );
-};
-
-<Example />;
-```

package/src/components/Card/Card.css

@@ -1,83 +0,0 @@
-.Card {
-  position: relative;
-  background: var(
-    --content_tint_background,
-    var(--vkui--color_background_secondary)
-  );
-  border-radius: var(--vkui--size_card_border_radius--regular);
-}
-
-.Card__in {
-  position: relative;
-  z-index: 2;
-  border-radius: inherit;
-}
-
-.Card--md-shadow {
-  box-shadow: var(
-    --vkui--elevation3,
-    0 2px 24px 0 rgba(0, 0, 0, 0.08),
-    0 0 2px 0 rgba(0, 0, 0, 0.08)
-  );
-  background: var(--modal_card_background, var(--vkui--color_background_modal));
-}
-
-.Card--md-outline {
-  background: var(--modal_card_background, var(--vkui--color_background_modal));
-}
-
-.Card--md-outline::before {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  content: "";
-  display: block;
-  border: var(--thin-border) solid
-    var(--input_border, var(--vkui--color_image_border_alpha));
-  z-index: 1;
-  box-sizing: border-box;
-  border-radius: inherit;
-}
-
-/**
- * CMP:
- * CardScroll
- */
-.CardScroll .Card {
-  margin-right: var(--vkui--size_cardgrid_padding--regular);
-  flex-shrink: 0;
-}
-
-.CardScroll .Card:last-of-type {
-  margin-right: 0;
-}
-
-.CardScroll--s .Card {
-  width: 40%;
-}
-
-.CardScroll--m .Card {
-  width: 62%;
-}
-
-.CardScroll--l .Card {
-  width: 100%;
-}
-
-/**
- * CMP:
- * Group
- * SplitCol
- */
-.Group--card .CardScroll--l .Card,
-.SplitCol--spaced .CardScroll--l .Card {
-  width: calc(100% - 32px);
-  margin-right: 16px;
-}
-
-.Group--card .CardScroll--l .Card:last-of-type,
-.SplitCol--spaced .CardScroll--l .Card:last-of-type {
-  margin-right: 0;
-}

package/src/components/Card/Card.tsx

@@ -1,31 +0,0 @@
-import * as React from "react";
-import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import { HasRootRef } from "../../types";
-import "./Card.css";
-
-export interface CardProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    HasRootRef<HTMLDivElement> {
-  mode?: "tint" | "shadow" | "outline";
-}
-
-export const Card: React.FC<CardProps> = ({
-  mode = "tint",
-  children,
-  getRootRef,
-  ...restProps
-}: CardProps) => {
-  const platform = usePlatform();
-
-  return (
-    <div
-      {...restProps}
-      ref={getRootRef}
-      vkuiClass={classNames(getClassName("Card", platform), `Card--md-${mode}`)}
-    >
-      <div vkuiClass="Card__in">{children}</div>
-    </div>
-  );
-};

package/src/components/Card/Readme.md

@@ -1,39 +0,0 @@
-```jsx
-<View activePanel="card">
-  <Panel id="card">
-    <PanelHeader>Card</PanelHeader>
-    <Group>
-      <Group
-        mode="plain"
-        header={<Header mode="secondary">Дефолтный стиль</Header>}
-      >
-        <CardGrid size="l">
-          <Card>
-            <div style={{ height: 96 }} />
-          </Card>
-        </CardGrid>
-      </Group>
-      <Group
-        mode="plain"
-        header={<Header mode="secondary">С внутренней обводкой</Header>}
-      >
-        <CardGrid size="l">
-          <Card mode="outline">
-            <div style={{ height: 96 }} />
-          </Card>
-        </CardGrid>
-      </Group>
-      <Group
-        mode="plain"
-        header={<Header mode="secondary">С внешней тенью</Header>}
-      >
-        <CardGrid size="l">
-          <Card mode="shadow">
-            <div style={{ height: 96 }} />
-          </Card>
-        </CardGrid>
-      </Group>
-    </Group>
-  </Panel>
-</View>
-```

package/src/components/CardGrid/CardGrid.css

@@ -1,82 +0,0 @@
-.CardGrid {
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-}
-
-.CardGrid + .CardGrid {
-  margin-top: 16px;
-}
-
-.CardGrid .Card {
-  margin-right: 8px;
-}
-
-.CardGrid--l .Card {
-  width: 100%;
-  margin-right: 0;
-}
-
-.CardGrid--l .Card:not(:first-child) {
-  margin-top: 8px;
-}
-
-.CardGrid--m .Card {
-  width: calc((100% - 8px) / 2);
-}
-
-.CardGrid--m .Card:nth-child(n + 3) {
-  margin-top: 8px;
-}
-
-.CardGrid--m .Card:nth-child(2n) {
-  margin-right: 0;
-}
-
-.CardGrid--s .Card {
-  width: calc((100% - 2 * 8px) / 3);
-}
-
-.CardGrid--s .Card:nth-child(n + 4) {
-  margin-top: 8px;
-}
-
-.CardGrid--s .Card:nth-child(3n) {
-  margin-right: 0;
-}
-
-/**
- * iOS
- */
-
-.CardGrid--ios.CardGrid--sizeX-compact {
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-/**
- * Android & VKCOM
- */
-
-.CardGrid--android.CardGrid--sizeX-compact {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-/**
- * Group
- */
-
-.Group--card .CardGrid {
-  padding-left: 8px;
-  padding-right: 8px;
-}
-
-.Group .CardGrid:first-child {
-  margin-top: 8px;
-}
-
-.Group .CardGrid:last-child {
-  margin-bottom: 8px;
-}

package/src/components/CardGrid/CardGrid.tsx

@@ -1,41 +0,0 @@
-import * as React from "react";
-import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
-import "./CardGrid.css";
-
-export interface CardGridProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    AdaptivityProps {
-  size: "s" | "m" | "l";
-}
-
-const CardGrid: React.FunctionComponent<CardGridProps> = ({
-  children,
-  size,
-  sizeX,
-  ...restProps
-}: CardGridProps) => {
-  const platform = usePlatform();
-
-  return (
-    <div
-      {...restProps}
-      vkuiClass={classNames(
-        getClassName("CardGrid", platform),
-        `CardGrid--${size}`,
-        `CardGrid--sizeX-${sizeX}`
-      )}
-    >
-      {children}
-    </div>
-  );
-};
-
-CardGrid.defaultProps = {
-  size: "s",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(CardGrid, { sizeX: true });