@semcore/button 3.2.0 → 3.3.2

package/src/Button.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import createComponent, { Component, sstyled, Root } from '@semcore/core';
+import { Box } from '@semcore/flex-box';
+import { neighborLocationEnhance } from '@semcore/neighbor-location';
+import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
+import SpinButton from './SpinButton';
+
+import style from './style/button.shadow.css';
+
+export const MAP_USE_DEFAULT_THEME = {
+  primary: 'info',
+  secondary: 'muted',
+  tertiary: 'info',
+};
+
+class RootButton extends Component {
+  static displayName = 'Button';
+  static enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];
+  static style = style;
+  static defaultProps = {
+    use: 'secondary',
+    size: 'm',
+  };
+
+  getTextProps() {
+    const { size } = this.asProps;
+    return {
+      size,
+    };
+  }
+
+  getAddonProps() {
+    const { size } = this.asProps;
+    return {
+      size,
+    };
+  }
+
+  render() {
+    const SButton = Root;
+    const SInner = Box;
+    const SSpin = Box;
+    const {
+      Children,
+      styles,
+      use,
+      theme = typeof use === 'string' && MAP_USE_DEFAULT_THEME[use],
+      loading,
+      disabled = loading,
+      size,
+      addonLeft,
+      addonRight,
+    } = this.asProps;
+
+    const useTheme = use && theme ? `${use}-${theme}` : false;
+    return sstyled(styles)(
+      <SButton render={Box} type="button" tag="button" disabled={disabled} use:theme={useTheme}>
+        <SInner tag="span" loading={loading}>
+          {addonLeft ? <Button.Addon tag={addonLeft} /> : null}
+          {addonTextChildren(Children, Button.Text, Button.Addon)}
+          {addonRight ? <Button.Addon tag={addonRight} /> : null}
+        </SInner>
+        {loading && (
+          <SSpin tag="span">
+            <SpinButton centered size={size} theme={useTheme} />
+          </SSpin>
+        )}
+      </SButton>,
+    );
+  }
+}
+
+function Text(props) {
+  const SText = Root;
+  return sstyled(props.styles)(<SText render={Box} tag="span" />);
+}
+
+function Addon(props) {
+  const SAddon = Root;
+  return sstyled(props.styles)(<SAddon render={Box} tag="span" />);
+}
+
+const Button = createComponent(RootButton, {
+  Text,
+  Addon,
+});
+
+export default Button;

package/src/SpinButton.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Spin from '@semcore/spin';
+
+export const SPIN_SIZE_MAP = {
+  xl: 'm',
+  l: 's',
+  m: 'xs',
+  s: 'xxs',
+};
+
+export const SPIN_THEME_MAP = {
+  'primary-info': 'invert',
+  'primary-success': 'invert',
+  'primary-warning': 'invert',
+  'primary-danger': 'invert',
+  'secondary-invert': 'invert',
+  'secondary-muted': 'gray40',
+  'secondary-info': 'light-blue',
+  'tertiary-invert': 'invert',
+  'tertiary-info': 'light-blue',
+};
+
+export default function SpinButton({ theme, size, ...others }) {
+  return (
+    <Spin
+      size={typeof size == 'string' ? SPIN_SIZE_MAP[size] : size}
+      theme={typeof theme === 'string' ? SPIN_THEME_MAP[theme] || 'dark' : theme}
+      {...others}
+    />
+  );
+}

package/src/index.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
+import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import { IBoxProps } from '@semcore/flex-box';
+import { INeighborItemProps } from '@semcore/neighbor-location';
+
+export type ButtonSize = 'xl' | 'l' | 'm' | 's';
+
+export interface IButtonProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
+  /**
+   *  Button type
+   * @default secondary
+   */
+  use?: 'primary' | 'secondary' | 'tertiary';
+  /** Button theme */
+  theme?: 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'invert';
+  /** Button activity state */
+  active?: boolean;
+  /**
+   *  Button size
+   * @default m
+   */
+  size?: ButtonSize;
+  /** Disabled button state */
+  disabled?: boolean;
+  /** Loading button state */
+  loading?: boolean;
+  /** Tag for the left Addon */
+  addonLeft?: React.ElementType;
+  /** Tag for the right Addon */
+  addonRight?: React.ElementType;
+}
+
+export interface IButtonTextProps extends IBoxProps {
+  size?: ButtonSize;
+}
+
+export interface IButtonAddonProps extends IBoxProps {
+  size?: ButtonSize;
+}
+
+export interface IButtonContext {
+  getTextProps: PropGetterFn;
+  getAddonProps: PropGetterFn;
+}
+
+declare const Button: (<T>(props: CProps<IButtonProps & T, IButtonContext>) => ReturnEl) & {
+  Text: <T>(props: IButtonTextProps & T) => ReturnEl;
+  Addon: <T>(props: IButtonAddonProps & T) => ReturnEl;
+};
+
+export default Button;

package/src/style/button.shadow.css

@@ -50,31 +50,31 @@ SButton[keyboardFocused] {
 }
 
 SButton[size='s'] {
-  height: media(18px);
-  min-width: media(18px);
+  height: 18px;
+  min-width: 18px;
   border-radius: 2px;
-  font-size: media(10px);
+  font-size: 10px;
 }
 
 SButton[size='m'] {
-  height: media(26px);
-  min-width: media(26px);
+  height: 26px;
+  min-width: 26px;
   border-radius: 3px;
-  font-size: media(12px);
+  font-size: 12px;
 }
 
 SButton[size='l'] {
-  height: media(32px);
-  min-width: media(32px);
+  height: 32px;
+  min-width: 32px;
   border-radius: 4px;
-  font-size: media(14px);
+  font-size: 14px;
 }
 
 SButton[size='xl'] {
-  height: media(42px);
-  min-width: media(42px);
+  height: 42px;
+  min-width: 42px;
   border-radius: 5px;
-  font-size: media(16px);
+  font-size: 16px;
 }
 
 SButton[theme='primary-info'] {
@@ -295,27 +295,27 @@ SInner[loading] {
 
 SText {
   display: inline-flex;
-  line-height: 1;
+  line-height: 1.1;
 }
 
 SText[size='s'] {
-  margin-left: media(4px);
-  margin-right: media(4px);
+  margin-left: 4px;
+  margin-right: 4px;
 }
 
 SText[size='m'] {
-  margin-left: media(8px);
-  margin-right: media(8px);
+  margin-left: 8px;
+  margin-right: 8px;
 }
 
 SText[size='l'] {
-  margin-left: media(8px);
-  margin-right: media(8px);
+  margin-left: 8px;
+  margin-right: 8px;
 }
 
 SText[size='xl'] {
-  margin-left: media(12px);
-  margin-right: media(12px);
+  margin-left: 12px;
+  margin-right: 12px;
 }
 
 SAddon {
@@ -326,60 +326,60 @@ SAddon {
 
 SAddon[size='s'] {
   &:not(:only-child):first-child {
-    margin-left: media(4px);
+    margin-left: 4px;
   }
 
   &:not(:only-child):last-child {
-    margin-right: media(4px);
+    margin-right: 4px;
   }
 
   &:only-child {
-    margin-left: media(-2px);
-    margin-right: media(-2px);
+    margin-left: -2px;
+    margin-right: -2px;
   }
 }
 
 SAddon[size='m'] {
   &:not(:only-child):first-child {
-    margin-left: media(8px);
+    margin-left: 8px;
   }
 
   &:not(:only-child):last-child {
-    margin-right: media(8px);
+    margin-right: 8px;
   }
 
   &:only-child {
-    margin-left: media(-4px);
-    margin-right: media(-4px);
+    margin-left: -4px;
+    margin-right: -4px;
   }
 }
 
 SAddon[size='l'] {
   &:not(:only-child):first-child {
-    margin-left: media(8px);
+    margin-left: 8px;
   }
 
   &:not(:only-child):last-child {
-    margin-right: media(8px);
+    margin-right: 8px;
   }
 
   &:only-child {
-    margin-left: media(-4px);
-    margin-right: media(-4px);
+    margin-left: -4px;
+    margin-right: -4px;
   }
 }
 
 SAddon[size='xl'] {
   &:not(:only-child):first-child {
-    margin-left: media(12px);
+    margin-left: 12px;
   }
 
   &:not(:only-child):last-child {
-    margin-right: media(12px);
+    margin-right: 12px;
   }
 
   &:only-child {
-    margin-left: media(-6px);
-    margin-right: media(-6px);
+    margin-left: -6px;
+    margin-right: -6px;
   }
 }

package/lib/types/Button.d.ts

@@ -1,68 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import { IBoxProps } from '@semcore/flex-box';
-import { Component, Merge, PropGetter } from '@semcore/core';
-import { INeighborItemProps } from '@semcore/neighbor-location';
-import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-export declare type ButtonSize = 'xl' | 'l' | 'm' | 's';
-export interface IButtonProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
-    /**
-     *  Button type
-     * @default secondary
-     */
-    use?: 'primary' | 'secondary' | 'tertiary';
-    /** Button theme */
-    theme?: 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'invert';
-    /** Button activity state */
-    active?: boolean;
-    /**
-     *  Button size
-     * @default m
-     */
-    size?: ButtonSize;
-    /** Disabled button state */
-    disabled?: boolean;
-    /** Loading button state */
-    loading?: boolean;
-    /** Tag for the left Addon */
-    addonLeft?: React.ElementType;
-    /** Tag for the right Addon */
-    addonRight?: React.ElementType;
-}
-export interface IButtonTextProps extends IBoxProps {
-    size?: ButtonSize;
-}
-export interface IButtonAddonProps extends IBoxProps {
-    size?: ButtonSize;
-}
-export interface IButtonContext extends IButtonProps {
-    getTextProps: PropGetter<RootButton['getTextProps']>;
-    getAddonProps: PropGetter<RootButton['getAddonProps']>;
-}
-export declare const MAP_USE_DEFAULT_THEME: {
-    primary: string;
-    secondary: string;
-    tertiary: string;
-};
-declare class RootButton extends Component<IButtonProps> {
-    static displayName: string;
-    static enhance: ((props: any) => any)[];
-    static style: any;
-    static defaultProps: {
-        use: string;
-        size: string;
-    };
-    getTextProps(): {
-        size: "m" | "s" | "xl" | "l";
-    };
-    getAddonProps(): {
-        size: "m" | "s" | "xl" | "l";
-    };
-    render(): any;
-}
-declare const Button: import("@semcore/core").ComponentType<Merge<IButtonProps, React.HTMLAttributes<HTMLButtonElement>>, {
-    Addon: Merge<IButtonAddonProps, HTMLAttributes<HTMLSpanElement>>;
-    Text: Merge<IButtonTextProps, HTMLAttributes<HTMLSpanElement>>;
-}, IButtonContext, {
-    [key: string]: (arg: unknown) => void;
-}, null>;
-export default Button;

package/lib/types/SpinButton.d.ts

@@ -1,25 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { Merge } from '@semcore/core';
-export declare const SPIN_SIZE_MAP: {
-    xl: string;
-    l: string;
-    m: string;
-    s: string;
-};
-export declare enum SPIN_THEME_MAP {
-    'primary-info' = "invert",
-    'primary-success' = "invert",
-    'primary-warning' = "invert",
-    'primary-danger' = "invert",
-    'secondary-invert' = "invert",
-    'secondary-muted' = "gray40",
-    'secondary-info' = "light-blue",
-    'tertiary-invert' = "invert",
-    'tertiary-info' = "light-blue"
-}
-export interface ISpinButtonProps {
-    size?: 'xl' | 'l' | 'm' | 's' | false;
-    theme?: string | false;
-    centered?: boolean;
-}
-export default function SpinButton(props: Merge<ISpinButtonProps, HTMLAttributes<HTMLSpanElement>>): JSX.Element;

package/src/Button.tsx

@@ -1,157 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import { Box, IBoxProps } from '@semcore/flex-box';
-import createComponent, {
-  Component,
-  IFunctionProps,
-  Merge,
-  PropGetter,
-  styled,
-} from '@semcore/core';
-import { INeighborItemProps, neighborLocationEnhance } from '@semcore/neighbor-location';
-import keyboardFocusEnhance, {
-  IKeyboardFocusProps,
-} from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
-import SpinButton from './SpinButton';
-
-import style from './style/button.shadow.css';
-
-export type ButtonSize = 'xl' | 'l' | 'm' | 's';
-
-export interface IButtonProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
-  /**
-   *  Button type
-   * @default secondary
-   */
-  use?: 'primary' | 'secondary' | 'tertiary';
-  /** Button theme */
-  theme?: 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'invert';
-  /** Button activity state */
-  active?: boolean;
-  /**
-   *  Button size
-   * @default m
-   */
-  size?: ButtonSize;
-  /** Disabled button state */
-  disabled?: boolean;
-  /** Loading button state */
-  loading?: boolean;
-  /** Tag for the left Addon */
-  addonLeft?: React.ElementType;
-  /** Tag for the right Addon */
-  addonRight?: React.ElementType;
-}
-
-export interface IButtonTextProps extends IBoxProps {
-  size?: ButtonSize;
-}
-
-export interface IButtonAddonProps extends IBoxProps {
-  size?: ButtonSize;
-}
-
-export interface IButtonContext extends IButtonProps {
-  getTextProps: PropGetter<RootButton['getTextProps']>;
-  getAddonProps: PropGetter<RootButton['getAddonProps']>;
-}
-
-export const MAP_USE_DEFAULT_THEME = {
-  primary: 'info',
-  secondary: 'muted',
-  tertiary: 'info',
-};
-
-class RootButton extends Component<IButtonProps> {
-  static displayName = 'Button';
-  static enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];
-  static style = style;
-  static defaultProps = {
-    use: 'secondary',
-    size: 'm',
-  };
-
-  getTextProps() {
-    const { size } = this.asProps;
-    return {
-      size,
-    };
-  }
-
-  getAddonProps() {
-    const { size } = this.asProps;
-    return {
-      size,
-    };
-  }
-
-  render() {
-    const { Root: SButton } = this;
-    const SInner = Box;
-    const SSpin = Box;
-    const {
-      Children,
-      styles,
-      use,
-      theme = typeof use === 'string' && MAP_USE_DEFAULT_THEME[use],
-      loading,
-      disabled = loading,
-      active,
-      size,
-      addonLeft,
-      addonRight,
-      keyboardFocused,
-      neighborLocation,
-    } = this.asProps;
-
-    const useTheme = use && theme ? `${use}-${theme}` : false;
-    return styled(styles)(
-      <SButton
-        render={Box}
-        type="button"
-        tag="button"
-        disabled={disabled}
-        theme={useTheme}
-        size={size}
-        active={active}
-        neighborLocation={neighborLocation}
-        keyboardFocused={keyboardFocused}
-      >
-        <SInner tag="span" loading={loading}>
-          {addonLeft ? <Button.Addon tag={addonLeft} /> : null}
-          {addonTextChildren(Children, Button.Text, Button.Addon)}
-          {addonRight ? <Button.Addon tag={addonRight} /> : null}
-        </SInner>
-        {loading && (
-          <SSpin tag="span">
-            <SpinButton centered size={size} theme={useTheme} />
-          </SSpin>
-        )}
-      </SButton>,
-    );
-  }
-}
-
-function Text(props: IFunctionProps<IButtonTextProps>) {
-  const { Root: SText, size, styles } = props;
-  return styled(styles)(<SText render={Box} tag="span" size={size} />);
-}
-
-function Addon(props: IFunctionProps<IButtonAddonProps>) {
-  const { Root: SAddon, size, styles } = props;
-  return styled(styles)(<SAddon render={Box} tag="span" size={size} />);
-}
-
-const Button = createComponent<
-  Merge<IButtonProps, HTMLAttributes<HTMLButtonElement>>,
-  {
-    Addon: Merge<IButtonAddonProps, HTMLAttributes<HTMLSpanElement>>;
-    Text: Merge<IButtonTextProps, HTMLAttributes<HTMLSpanElement>>;
-  },
-  IButtonContext
->(RootButton, {
-  Text,
-  Addon,
-});
-
-export default Button;

package/src/SpinButton.tsx

@@ -1,41 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import { Merge } from '@semcore/core';
-import Spin, { ISpinProps } from '@semcore/spin';
-
-export const SPIN_SIZE_MAP = {
-  xl: 'm',
-  l: 's',
-  m: 'xs',
-  s: 'xxs',
-};
-
-export enum SPIN_THEME_MAP {
-  'primary-info' = 'invert',
-  'primary-success' = 'invert',
-  'primary-warning' = 'invert',
-  'primary-danger' = 'invert',
-  'secondary-invert' = 'invert',
-  'secondary-muted' = 'gray40',
-  'secondary-info' = 'light-blue',
-  'tertiary-invert' = 'invert',
-  'tertiary-info' = 'light-blue',
-}
-
-export interface ISpinButtonProps {
-  size?: 'xl' | 'l' | 'm' | 's' | false;
-  theme?: string | false;
-  centered?: boolean;
-}
-
-export default function SpinButton(
-  props: Merge<ISpinButtonProps, HTMLAttributes<HTMLSpanElement>>,
-) {
-  const { theme, size, ...others } = props;
-  return (
-    <Spin
-      size={(typeof size == 'string' ? SPIN_SIZE_MAP[size] : size) as ISpinProps['size']}
-      theme={typeof theme === 'string' ? SPIN_THEME_MAP[theme] || 'dark' : theme}
-      {...others}
-    />
-  );
-}

package/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "../../tsconfig"
-}