@broxus/react-uikit 0.1.0

package/dist/esm/components/Section/index.scss

@@ -0,0 +1,254 @@
+// Name:            Section
+// Description:     Component to create horizontal layout section
+//
+// Component:       `uk-section`
+//
+// Modifiers:       `uk-section-xsmall`
+//                  `uk-section-small`
+//                  `uk-section-large`
+//                  `uk-section-xlarge`
+//                  `uk-section-default`
+//                  `uk-section-muted`
+//                  `uk-section-primary`
+//                  `uk-section-secondary`
+//                  `uk-section-tertiary`
+//                  `uk-section-overlap`
+//
+// States:          `uk-preserve-color`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Section
+ ========================================================================== */
+
+/*
+ * 1. Make it work with `100vh` and height in general
+ */
+
+.uk-section {
+    box-sizing: border-box; /* 1 */
+    display: flow-root;
+    padding-bottom: var(--section-padding-vertical);
+    padding-top: var(--section-padding-vertical);
+    @if mixin-exists(hook-section) {
+        @include hook-section;
+    }
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    .uk-section {
+        padding-bottom: var(--section-padding-vertical-m);
+        padding-top: var(--section-padding-vertical-m);
+    }
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-section > :last-child {
+    margin-bottom: 0;
+}
+
+
+/* Size modifiers
+ ========================================================================== */
+
+/*
+ * XSmall
+ */
+
+.uk-section-xsmall {
+    padding-bottom: var(--section-xsmall-padding-vertical);
+    padding-top: var(--section-xsmall-padding-vertical);
+}
+
+/*
+ * Small
+ */
+
+.uk-section-small {
+    padding-bottom: var(--section-small-padding-vertical);
+    padding-top: var(--section-small-padding-vertical);
+}
+
+/*
+ * Large
+ */
+
+.uk-section-large {
+    padding-bottom: var(--section-large-padding-vertical);
+    padding-top: var(--section-large-padding-vertical);
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    .uk-section-large {
+        padding-bottom: var(--section-large-padding-vertical-m);
+        padding-top: var(--section-large-padding-vertical-m);
+    }
+}
+
+/*
+ * XLarge
+ */
+
+.uk-section-xlarge {
+    padding-bottom: var(--section-xlarge-padding-vertical);
+    padding-top: var(--section-xlarge-padding-vertical);
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    .uk-section-xlarge {
+        padding-bottom: var(--section-xlarge-padding-vertical-m);
+        padding-top: var(--section-xlarge-padding-vertical-m);
+    }
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+.uk-section-default {
+    background: var(--section-default-background);
+    @if mixin-exists(hook-section-default) {
+        @include hook-section-default;
+    }
+}
+
+/*
+ * Muted
+ */
+
+.uk-section-muted {
+    background: var(--section-muted-background);
+    @if mixin-exists(hook-section-muted) {
+        @include hook-section-muted;
+    }
+}
+
+/*
+ * Primary
+ */
+
+.uk-section-primary {
+    background: var(--section-primary-background);
+    @if mixin-exists(hook-section-primary) {
+        @include hook-section-primary;
+    }
+}
+
+@if $section-primary-color-mode == light {
+    .uk-section-primary:not(.uk-preserve-color) {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $section-primary-color-mode == dark {
+    .uk-section-primary:not(.uk-preserve-color) {
+        @extend .uk-dark !optional;
+    }
+}
+
+/*
+ * Secondary
+ */
+
+.uk-section-secondary {
+    background: var(--section-secondary-background);
+    @if mixin-exists(hook-section-secondary) {
+        @include hook-section-secondary;
+    }
+}
+
+@if $section-secondary-color-mode == light {
+    .uk-section-secondary:not(.uk-preserve-color) {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $section-secondary-color-mode == dark {
+    .uk-section-secondary:not(.uk-preserve-color) {
+        @extend .uk-dark !optional;
+    }
+}
+
+/*
+ * Tertiary
+ */
+
+.uk-section-tertiary {
+    background: var(--section-tertiary-background);
+    @if mixin-exists(hook-section-tertiary) {
+        @include hook-section-tertiary;
+    }
+}
+
+@if $section-tertiary-color-mode == light {
+    .uk-section-tertiary:not(.uk-preserve-color) {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $section-tertiary-color-mode == dark {
+    .uk-section-tertiary:not(.uk-preserve-color) {
+        @extend .uk-dark !optional;
+    }
+}
+
+
+/* Overlap modifier
+ ========================================================================== */
+
+/*
+ * Reserved modifier to make a section overlap another section with an border image
+ * Implemented by the theme
+ */
+
+.uk-section-overlap {
+    @if mixin-exists(hook-section-overlap) {
+        @include hook-section-overlap;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-section-misc) {
+    @include hook-section-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --section-padding-vertical: var(--global-medium-margin);
+    --section-padding-vertical-m: var(--global-large-margin);
+    --section-xsmall-padding-vertical: var(--global-margin);
+    --section-small-padding-vertical: var(--global-medium-margin);
+    --section-large-padding-vertical: var(--global-large-margin);
+    --section-large-padding-vertical-m: var(--global-xlarge-margin);
+    --section-xlarge-padding-vertical: var(--global-xlarge-margin);
+    --section-xlarge-padding-vertical-m: calc(var(--global-large-margin) + var(--global-xlarge-margin));
+    --section-default-background: var(--global-background);
+    --section-muted-background: var(--global-muted-background);
+    --section-primary-background: var(--global-primary-background);
+    --section-secondary-background: var(--global-secondary-background);
+    --section-tertiary-background: var(--global-tertiary-background);
+}

package/dist/esm/components/Spinner/index.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import './index.scss';
+interface Props extends React.HTMLAttributes<HTMLSpanElement> {
+    ratio?: number;
+}
+export declare function Spinner(props: Props): JSX.Element;
+export {};

package/dist/esm/components/Spinner/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { defaultProps, getSize } from '../Icon';
+import './index.scss';
+export function Spinner(props) {
+    const { className, ratio, ...restProps } = props;
+    return (React.createElement("span", { className: classNames([
+            'uk-spinner',
+            'uk-icon',
+        ], className), ...restProps },
+        React.createElement("svg", { ...defaultProps, ...getSize(20, 20, ratio), viewBox: "0 0 30 30" },
+            React.createElement("circle", { fill: "none", stroke: "currentColor", cx: "15", cy: "15", r: "14" }))));
+}

package/dist/esm/components/Spinner/index.scss

@@ -0,0 +1,87 @@
+// Name:            Spinner
+// Description:     Component to create a loading spinner
+//
+// Component:       `uk-spinner`
+//
+// ========================================================================
+
+@use 'sass:math';
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Spinner
+ ========================================================================== */
+
+/*
+ * Adopts `uk-icon`
+ */
+
+.uk-spinner {
+    @if mixin-exists(hook-spinner) {
+        @include hook-spinner;
+    }
+}
+
+
+/* SVG
+ ========================================================================== */
+
+.uk-spinner > * { animation: uk-spinner-rotate var(--spinner-duration) linear infinite; }
+
+@keyframes uk-spinner-rotate {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(270deg); }
+}
+
+/*
+ * Circle
+ */
+
+.uk-spinner > * > * {
+    animation: uk-spinner-dash var(--spinner-duration) var(--ease-in-out) infinite;
+    stroke-dasharray: var(--spinner-circumference);
+    stroke-dashoffset: 0;
+    stroke-linecap: round;
+    stroke-width: var(--spinner-stroke-width);
+    transform-origin: center;
+}
+
+@keyframes uk-spinner-dash {
+    0% { stroke-dashoffset: var(--spinner-circumference); }
+
+    50% {
+        stroke-dashoffset: calc(var(--spinner-circumference) / 4);
+        transform: rotate(135deg);
+    }
+
+    100% {
+        stroke-dashoffset: var(--spinner-circumference);
+        transform: rotate(450deg);
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-spinner-misc) {
+    @include hook-spinner-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --spinner-size: #{$spinner-size};
+    --spinner-stroke-width: #{$spinner-stroke-width};
+    --spinner-radius: #{floor(math.div(($spinner-size - $spinner-stroke-width), 2))}; // Minus stroke width to prevent overflow clipping
+    --spinner-circumference: #{round(2 * math.$pi * $spinner-radius)};
+    --spinner-duration: #{$spinner-duration};
+}

package/dist/esm/components/Tabs/index.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { TabPane } from 'rc-tabs';
+import type { TabPaneProps, TabsProps } from 'rc-tabs';
+import './index.scss';
+export type { TabPaneProps };
+export declare type TabType = 'line' | 'card' | 'editable-card';
+export declare type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
+export interface TabProps extends Exclude<TabsProps, 'editable'> {
+    addIcon?: React.ReactNode;
+    centered?: boolean;
+    hideAdd?: boolean;
+    prefixCls?: string;
+    size?: string;
+    type?: TabType;
+    onEdit?: (e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
+}
+export declare function Tabs(props: TabProps): JSX.Element;
+export declare namespace Tabs {
+    var Pane: typeof TabPane;
+}

package/dist/esm/components/Tabs/index.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import RcTabs, { TabPane } from 'rc-tabs';
+import { useConfig } from '../ConfrigProvider';
+import './index.scss';
+import { Icon } from '../Icon';
+export function Tabs(props) {
+    const config = useConfig();
+    const { addIcon, centered, className, direction, hideAdd, moreIcon = React.createElement(Icon, { icon: "more_horizontal" }), prefixCls = `${config.prefixCls}-tabs`, size, type, onEdit, ...restProps } = props;
+    let editable;
+    if (type === 'editable-card') {
+        editable = {
+            addIcon: addIcon || React.createElement(Icon, { icon: "add" }),
+            removeIcon: React.createElement(Icon, { icon: "close" }),
+            showAdd: hideAdd !== true,
+            // eslint-disable-next-line sort-keys
+            onEdit: (editType, { key, event }) => {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                onEdit?.(editType === 'add' ? event : key, editType);
+            },
+        };
+    }
+    return (React.createElement(RcTabs, { direction: direction, moreTransitionName: `${config.prefixCls}-motion-slide-up`, ...restProps, className: classNames({
+            [`${prefixCls}-${size}`]: size,
+            [`${prefixCls}-card`]: ['card', 'editable-card'].includes(type),
+            [`${prefixCls}-editable-card`]: type === 'editable-card',
+            [`${prefixCls}-centered`]: centered,
+        }, className), editable: editable, moreIcon: moreIcon, prefixCls: prefixCls }));
+}
+Tabs.Pane = TabPane;