Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@tabula/ui-button

Package Overview
Dependencies
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tabula/ui-button - npm Package Compare versions

Comparing version 0.1.1 to 1.0.0

typings/common.css.d.ts

228

lib/index.js

@@ -9,18 +9,33 @@ import "./index.css";

// src/modifiers.css.ts
var hasIcon = "ui_button__1jte0sr0";
var isDisabled = "ui_button__1jte0sr1";
var isFrozen = "ui_button__1jte0sr2";
// src/common.css.ts
var hasIcon = "ui_button__djrgs31";
var icon = "ui_button__djrgs30";
var isDisabled = "ui_button__djrgs32";
var isFrozen = "ui_button__djrgs33";
// src/helpers.ts
import { uiLayers } from "@tabula/ui-theme";
function titleOf(title, children) {
if (title != null && title.length > 0) {
return title;
}
if (typeof children === "string" && children.length > 0) {
return children;
}
return;
}
// src/UiButton.tsx
import { jsx } from "react/jsx-runtime";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var UiButton = ({
children,
className,
hasIcon: hasIcon2,
iconClassName,
isDisabled: isDisabled2 = false,
isFrozen: isFrozen2 = false,
testId,
title,
trackId,
leftIcon: LeftIcon,
rightIcon: RightIcon,
role,
tabIndex: providedTabIndex = 0,
title: providedTitle,
variantClassName,

@@ -33,60 +48,74 @@ ...props

isDisabled2 && isDisabled,
hasIcon2 && hasIcon,
(LeftIcon != null || RightIcon != null) && hasIcon,
className
);
const tabIndex = isDisabled2 || isFrozen2 ? void 0 : 0;
switch (props.type) {
case "link": {
return (
// eslint-disable-next-line jsx-a11y/anchor-is-valid
/* @__PURE__ */ jsx(
"a",
{
"aria-disabled": isDisabled2 || isFrozen2 ? true : void 0,
className: finalClassName,
"data-testid": testId,
"data-track-id": trackId,
href: isDisabled2 || isFrozen2 ? void 0 : props.href,
onClick: props.onClick,
rel: props.rel,
tabIndex,
target: props.target,
title,
children
}
)
const [ariaDisabled, tabIndex] = isDisabled2 || isFrozen2 ? [true, -1] : [void 0, providedTabIndex];
const content = /* @__PURE__ */ jsxs(Fragment, { children: [
LeftIcon != null && /* @__PURE__ */ jsx(LeftIcon, { className: clsx(icon, iconClassName) }),
children,
RightIcon != null && /* @__PURE__ */ jsx(RightIcon, { className: clsx(icon, iconClassName) })
] });
const title = titleOf(providedTitle, children);
switch (props.as) {
case "a": {
const { as, href, ...rest } = props;
return /* @__PURE__ */ jsx(
"a",
{
"aria-disabled": ariaDisabled,
className: finalClassName,
href,
role: role ?? "link",
tabIndex,
title,
...rest,
children: content
}
);
}
case "visual": {
return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
/* @__PURE__ */ jsx(
"div",
{
"aria-disabled": isDisabled2 || isFrozen2 ? true : void 0,
className: finalClassName,
"data-testid": testId,
"data-track-id": trackId,
onClick: props.onClick,
role: "button",
tabIndex,
title,
children
}
)
case "div": {
const { as, ...rest } = props;
return /* @__PURE__ */ jsx(
"div",
{
"aria-disabled": ariaDisabled,
className: finalClassName,
role: role ?? "button",
tabIndex,
title,
...rest,
children: content
}
);
}
case "link": {
const { as, component: Link, to, ...rest } = props;
return /* @__PURE__ */ jsx(
Link,
{
"aria-disabled": ariaDisabled,
className: finalClassName,
role: role ?? "link",
tabIndex,
title,
to,
...rest,
children: content
}
);
}
default: {
const { as, type = "button", ...rest } = props;
return /* @__PURE__ */ jsx(
"button",
{
"aria-disabled": ariaDisabled,
className: finalClassName,
"data-testid": testId,
"data-track-id": trackId,
disabled: isDisabled2 || isFrozen2,
onClick: props.onClick,
role: role ?? "button",
tabIndex,
title,
type: "button",
children
type,
...rest,
children: content
}

@@ -98,29 +127,5 @@ );

// src/helpers.ts
import { uiLayers } from "@tabula/ui-theme";
function titleOf(title, children) {
if (title != null && title.length > 0) {
return title;
}
if (typeof children === "string" && children.length > 0) {
return children;
}
return;
}
// src/UiButton20.tsx
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var UiButton20 = ({ children, icon: Icon, title, variant, ...props }) => /* @__PURE__ */ jsxs(
UiButton,
{
hasIcon: Icon != null,
title: titleOf(title, children),
variantClassName: variants[variant],
...props,
children: [
Icon && /* @__PURE__ */ jsx2(Icon, {}),
children
]
}
);
import { jsx as jsx2 } from "react/jsx-runtime";
var UiButton20 = ({ children, icon: icon3, variant, ...props }) => /* @__PURE__ */ jsx2(UiButton, { leftIcon: icon3, variantClassName: variants[variant], ...props, children });

@@ -131,16 +136,4 @@ // src/UiButton24.css.ts

// src/UiButton24.tsx
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
var UiButton24 = ({ children, icon: Icon, title, variant, ...props }) => /* @__PURE__ */ jsxs2(
UiButton,
{
hasIcon: Icon != null,
title: titleOf(title, children),
variantClassName: variants2[variant],
...props,
children: [
Icon && /* @__PURE__ */ jsx3(Icon, {}),
children
]
}
);
import { jsx as jsx3 } from "react/jsx-runtime";
var UiButton24 = ({ children, icon: icon3, variant, ...props }) => /* @__PURE__ */ jsx3(UiButton, { leftIcon: icon3, variantClassName: variants2[variant], ...props, children });

@@ -151,16 +144,4 @@ // src/UiButton32.css.ts

// src/UiButton32.tsx
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
var UiButton32 = ({ children, icon: Icon, title, variant, ...props }) => /* @__PURE__ */ jsxs3(
UiButton,
{
hasIcon: Icon != null,
title: titleOf(title, children),
variantClassName: variants3[variant],
...props,
children: [
Icon && /* @__PURE__ */ jsx4(Icon, {}),
children
]
}
);
import { jsx as jsx4 } from "react/jsx-runtime";
var UiButton32 = ({ children, icon: icon3, variant, ...props }) => /* @__PURE__ */ jsx4(UiButton, { leftIcon: icon3, variantClassName: variants3[variant], ...props, children });

@@ -171,35 +152,20 @@ // src/UiButton40.css.ts

// src/UiButton40.tsx
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
var UiButton40 = ({ children, icon: Icon, title, variant, ...props }) => /* @__PURE__ */ jsxs4(
UiButton,
{
hasIcon: Icon != null,
title: titleOf(title, children),
variantClassName: variants4[variant],
...props,
children: [
Icon && /* @__PURE__ */ jsx5(Icon, {}),
children
]
}
);
import { jsx as jsx5 } from "react/jsx-runtime";
var UiButton40 = ({ children, icon: icon3, variant, ...props }) => /* @__PURE__ */ jsx5(UiButton, { leftIcon: icon3, variantClassName: variants4[variant], ...props, children });
// src/UiButton48.css.ts
var icon = "ui_button__4k24rm3";
var icon2 = "ui_button__4k24rm3";
var variants5 = { primary: "ui_button__4k24rm1 ui_button__174234z0 ui_button__4k24rm0 ui_theme__3ifh807", secondary: "ui_button__4k24rm2 ui_button__174234z0 ui_button__4k24rm0 ui_theme__3ifh80c" };
// src/UiButton48.tsx
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
var UiButton48 = ({ children, icon: Icon, title, variant, ...props }) => {
return /* @__PURE__ */ jsxs5(
import { jsx as jsx6 } from "react/jsx-runtime";
var UiButton48 = ({ children, icon: icon3, variant, ...props }) => {
return /* @__PURE__ */ jsx6(
UiButton,
{
hasIcon: Icon != null,
title: titleOf(title, children),
iconClassName: icon2,
rightIcon: icon3,
variantClassName: variants5[variant],
...props,
children: [
children,
Icon && /* @__PURE__ */ jsx6(Icon, { className: icon })
]
children
}

@@ -206,0 +172,0 @@ );

2

package.json
{
"name": "@tabula/ui-button",
"version": "0.1.1",
"version": "1.0.0",
"description": "Button components which are used to initialize an action",

@@ -5,0 +5,0 @@ "type": "module",

123

README.md

@@ -25,31 +25,69 @@ # @tabula/ui-button

### Type
Import required component and render it with one of supported variants:
Each button component can have one of three types:
```tsx
import { FC, MouseEventHandler, PropsWithChildren } from 'react';
- `button`: a button element will be rendered (it's default behaviour);
- `link`: an anchor element will be rendered (you should provide `href` too);
- `visual`: a div element will be rendered (it's useful when you can't to use button element for any reasons).
import { UiButton24 } from '@tabula/ui-button';
type Props = PropsWithChildren<{
onClick: MouseEventHandler<HTMLButtonElement>;
}>;
const Action: FC<Props> = ({ children, onClick }) => (
<UiButton24 onClick={onClick} variant='primary'>{children}</UiButton24>
)
```
## Types
The component supports four types: `button`, `a`, `div` and `link`. By default, the `button` type is used.
### Button
By default, the component renders generic button:
```tsx
import { UiButton24 } from '@tabula/ui-button';
<UiButton24 variant="primary">Default</UiButton24>
```
// A button will be rendered.
<UiButton24 variant='primary'>Default</UiButton24>
// A button will be rendered too.
<UiButton24 type='button' variant='primary'>Button</UiButton24>
You can provide `as="button"` explicitly:
// An anchor will be rendered.
<UiButton24 href='#' type='link' variant='primary'>Link</UiButton24>
// An anchor will be rendered too.
<UiButton24 href='#' rel='noreferrer noopener' target='_blank' type='link' variant='primary'>Link with target and rel</UiButton24>
```tsx
<UiButton24 as="button" variant="primary">Button</UiButton24>
```
// A div will be rendered.
<UiButton24 type='visual' variant='primary'>Visual</UiButton24>
### Anchor
You can render `a` element with providing `as="button"`:
```tsx
<UiButton24 as="a" href="#" target="_blank" variant="primary">Anchor</UiButton24>
```
### Variant
### Div
Each button component has its own variants list, which can be used:
In rare cases, you can render `div` element with providing `as="div"`:
```tsx
<UiButton24 as="div" variant="primary">Div</UiButton24>
```
### Link
You can use `as="link"` and provide `component` property to use `react-router`'s `Link` component:
```tsx
import { Link } from 'react-router-dom';
<UiButton24 as="link" component={Link} target="_blank" to="#" variant="contract">Link</UiButton24>
```
It can be useful, when you want to have `div` element with button appearance. For example, to render it inside
another `button` element.
## Variants
Each button component has its own appearance variants list, which you can use:
- `UiButton20`: `contract`;

@@ -61,35 +99,38 @@ - `UiButton24`: `primary`, `secondary`, `cancel`, `cancelFilled`, `edit`, `test` and `ai`;

### Disabled
## Options
All buttons supports `isDisabled` property:
The component supports a few options.
### `isDisabled`
This property allows to disable button:
```tsx
<UiButton24 isDisabled type='button' variant='primary'>Button</UiButton24>
<UiButton24 href='#' isDisabled type='link' variant='primary'>Link</UiButton24>
<UiButton24 isDisabled type='visual' variant='primary'>Visual</UiButton24>
<UiButton24 isDisabled variant="primary">Button</UiButton24>
```
### Frozen
### `isFrozen`
Along with `isDisabled` option, the component supports `isFrozen` option. In that case, button will have enabled visual
style, but will not react on user interactions.
This property allows to disable button, but keep enabled look and feel:
```tsx
<UiButton24 isFrozen type='button' variant='primary'>Button</UiButton24>
<UiButton24 href='#' isFrozen type='link' variant='primary'>Link</UiButton24>
<UiButton24 isFrozen type='visual' variant='primary'>Visual</UiButton24>
<UiButton24 isFrozen variant="primary">Button</UiButton24>
```
### Disabled and frozen
### `isDisabled` and `isFrozen`
The `isDisabled` has priority when you use `isDisabled` and `isFrozen` together.
The `isDisabled` styles has priority over `isFrozen` when they're used together.
### Icon
```tsx
<UiButton24 isDisabled isFrozen variant="primary">Button</UiButton24>
```
You can provide an `icon` component:
### `icon`
You can provide an icon component:
```tsx
const Icon: FC<{ className?: string }> = () => // ...
import { UiDateIcon } from '@tabula/ui-data-type-icon';
<UiButton24 icon={Icon} variant='primary'>Button</UiButton24>
<UiButton24 icon={UiDateIcon} variant="primary">Open calendar</UiButton24>
```

@@ -101,9 +142,13 @@

### Analytics
## Attributes
Also, the component supports the `trackId` property. It's adds `data-track-id` attribute to component for analytics
purposes.
All component types supports relevant HTML attributes, excluding `aria-disabled` and `disabled`. This attributes are
controlled by the component itself.
Also `href` attribute is restricted `link` type.
For example, you can provide `data-*` attribute for analytics purposes:
```tsx
<UiButton24 trackId='my-track-id' type='button' variant='primary'>Tracked</UiButton24>
<UiButton24 data-track-id="button" variant="primary">Button</UiButton24>
```

@@ -110,0 +155,0 @@

2

typings/index.d.ts

@@ -6,3 +6,3 @@ export { UiButton20 } from './UiButton20';

export { UiButton48 } from './UiButton48';
export type { Type as UiButtonType } from './types';
export type { Element as UiButtonElement, IconComponentProps as UiButtonIconComponentProps, IconComponentType as UiButtonIconComponentType, LinkComponentProps as UiButtonLinkComponentProps, LinkComponentType as UiButtonLinkComponentType, } from './types';
export type { Props as UiButton20Props, Variant as UiButton20Variant } from './UiButton20';

@@ -9,0 +9,0 @@ export type { Props as UiButton24Props, Variant as UiButton24Variant } from './UiButton24';

118

typings/types.d.ts

@@ -1,70 +0,102 @@

import { ComponentType, MouseEventHandler, PropsWithChildren } from 'react';
export type Type = 'button' | 'link' | 'visual';
type CommonProps = PropsWithChildren<{
import { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentType, HTMLAttributes, PropsWithChildren } from 'react';
export type Element = 'button' | 'a' | 'div' | 'link';
type RestrictedProps = 'aria-disabled' | 'disabled';
export type IconComponentProps = {
className?: string;
};
export type IconComponentType = ComponentType<IconComponentProps>;
type RouterLinkPath = {
/**
* Whether the button is disabled.
* A URL pathname, beginning with a /.
*/
pathname?: string;
/**
* A URL search string, beginning with a ?.
*/
search?: string;
/**
* A URL fragment identifier, beginning with a #.
*/
hash?: string;
};
type LinkProps = {
/**
* See [React Router docs](https://reactrouter.com/en/main/components/link#preventscrollreset).
*
* @default false
* Available only if `as` equals to `link`.
*/
isDisabled?: boolean;
preventScrollReset?: boolean;
/**
* Whether the button is frozen.
* See [React Router docs](https://reactrouter.com/en/main/components/link#relative).
*
* @default false
* Available only if `as` equals to `link`.
*/
isFrozen?: boolean;
onClick?: MouseEventHandler;
testId?: string;
title?: string;
relative?: 'route' | 'path';
/**
* If provided, will be added as `data-track-id` attribute for analytics purposes.
* See [React Router docs](https://reactrouter.com/en/main/components/link#reloaddocument).
*
* Available only if `as` equals to `link`.
*/
trackId?: string;
reloadDocument?: boolean;
/**
* The type of button to use. Supported `"button"`, `"link"` and `"visual"` values.
* See [React Router docs](https://reactrouter.com/en/main/components/link#replace).
*
* @default button
* Available only if `as` equals to `link`.
*/
type?: Type;
}>;
type ButtonProps = {
type?: 'button';
};
type LinkProps = {
type: 'link';
replace?: boolean;
/**
* A URL to link to.
* See [React Router docs](https://reactrouter.com/en/main/components/link#state).
*
* Available only when `type` property is `"link"`.
* Available only if `as` equals to `link`.
*/
href: string;
state?: unknown;
/**
* The relationship between the linked resource and the current page.
* See [React Router docs](https://reactrouter.com/en/main/components/link).
*
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
* Available only if `as` equals to `link`.
*/
to: string | RouterLinkPath;
};
export type LinkComponentProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & LinkProps;
export type LinkComponentType = ComponentType<LinkComponentProps>;
type CommonProps = PropsWithChildren<{
/**
* The HTML element which will be used for button rendering. Supported `button`, `a` and `div`.
*
* Available only when `type` property is `"link"`.
* @default button
*/
rel?: string;
as?: Element;
/**
* The target window for the link.
* Whether the button is disabled.
*
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/target).
* @default false
*/
isDisabled?: boolean;
/**
* Whether the button is frozen.
*
* Available only when `type` property is `"link"`.
* @default false
*/
target?: string;
isFrozen?: boolean;
}>;
type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, RestrictedProps> & {
as?: 'button';
};
type VisualProps = {
type: 'visual';
type AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, RestrictedProps> & {
as: 'a';
};
type DivProps = Omit<HTMLAttributes<HTMLDivElement>, RestrictedProps> & {
as: 'div';
};
type RouterLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, RestrictedProps | 'href'> & LinkProps & {
as: 'link';
component: LinkComponentType;
};
type InnerBaseProps = CommonProps & {
hasIcon?: boolean;
iconClassName?: string;
leftIcon?: IconComponentType;
rightIcon?: IconComponentType;
variantClassName: string;
};
export type InnerProps = (InnerBaseProps & ButtonProps) | (InnerBaseProps & LinkProps) | (InnerBaseProps & VisualProps);
type Icon = ComponentType<{
className?: string;
}>;
export type InnerProps = (InnerBaseProps & ButtonProps) | (InnerBaseProps & AnchorProps) | (InnerBaseProps & DivProps) | (InnerBaseProps & RouterLinkProps);
type VariantBaseProps<Variant extends string> = CommonProps & {

@@ -78,3 +110,3 @@ /**

*/
icon?: Icon;
icon?: IconComponentType;
/**

@@ -85,3 +117,3 @@ * The visual style of the button.

};
export type VariantProps<Variant extends string> = (VariantBaseProps<Variant> & ButtonProps) | (VariantBaseProps<Variant> & LinkProps) | (VariantBaseProps<Variant> & VisualProps);
export type VariantProps<Variant extends string> = (VariantBaseProps<Variant> & ButtonProps) | (VariantBaseProps<Variant> & AnchorProps) | (VariantBaseProps<Variant> & DivProps) | (VariantBaseProps<Variant> & RouterLinkProps);
export {};
typings/modifiers.css.d.ts
lib/index.css

Sorry, the diff of this file is not supported yet

lib/index.css.map

Sorry, the diff of this file is not supported yet

lib/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc