@broxus/react-uikit 0.1.0

package/dist/esm/styles/vars.scss

@@ -0,0 +1,122 @@
+// Name:            Vars
+// Description:     Define.scss variables via the `var()` CSS function
+//
+// ========================================================================
+
+@import 'variables.scss';
+
+:root, ::after, ::before {
+    // Breakpoints
+    // ========================================================================
+
+    --breakpoint-xsmall: #{$breakpoint-xsmall};
+    --breakpoint-small: #{$breakpoint-small};
+    --breakpoint-medium: #{$breakpoint-medium};
+    --breakpoint-large: #{$breakpoint-large};
+    --breakpoint-xlarge: #{$breakpoint-xlarge};
+    --breakpoint-xsmall-max: #{$breakpoint-small - 1};
+    --breakpoint-small-max: #{$breakpoint-medium - 1};
+    --breakpoint-medium-max: #{$breakpoint-large - 1};
+    --breakpoint-large-max: #{$breakpoint-xlarge - 1};
+
+
+    // Global variables
+    // ========================================================================
+
+    //
+    // Typography
+    //
+    --global-font-family: #{$global-font-family};
+    --global-font-size: #{$global-font-size};
+    --global-font-weight: #{$global-font-weight};
+    --global-bold-font-weight: #{$global-bold-font-weight};
+    --global-line-height: #{$global-line-height};
+    --global-2xlarge-font-size: #{$global-2xlarge-font-size};
+    --global-xlarge-font-size: #{$global-xlarge-font-size};
+    --global-large-font-size: #{$global-large-font-size};
+    --global-medium-font-size: #{$global-medium-font-size};
+    --global-small-font-size: #{$global-small-font-size};
+    --global-xsmall-font-size: #{$global-xsmall-font-size};
+    --global-2xsmall-font-size: #{$global-2xsmall-font-size};
+
+    //
+    // Colors
+    //
+
+    --global-color: #{$global-color};
+    --global-emphasis-color: #{$global-emphasis-color};
+    --global-muted-color: #{$global-muted-color};
+    --global-link-color: #{$global-link-color};
+    --global-link-hover-color: #{$global-link-hover-color};
+    --global-inverse-color: #{$global-inverse-color};
+
+    //
+    // Backgrounds
+    //
+
+    --global-background: #{$global-background};
+    --global-default-background: #{$global-default-background};
+    --global-muted-background: #{$global-muted-background};
+    --global-primary-background: #{$global-primary-background};
+    --global-secondary-background: #{$global-secondary-background};
+    --global-tertiary-background: #{$global-tertiary-background};
+    --global-success-background: #{$global-success-background};
+    --global-warning-background: #{$global-warning-background};
+    --global-danger-background: #{$global-danger-background};
+
+    //
+    // Borders
+    //
+
+    --global-border-width: #{$global-border-width};
+    --global-border-style: #{$global-border-style};
+    --global-border: #{$global-border};
+    --global-muted-border: #{$global-muted-border};
+    --global-primary-border: #{$global-primary-border};
+    --global-secondary-border: #{$global-secondary-border};
+    --global-tertiary-border: #{$global-tertiary-border};
+    --global-border-radius: #{$global-border-radius};
+
+    //
+    // Box-Shadows
+    //
+
+    --global-small-box-shadow: #{$global-small-box-shadow};
+    --global-medium-box-shadow: #{$global-medium-box-shadow};
+    --global-large-box-shadow: #{$global-large-box-shadow};
+    --global-xlarge-box-shadow: #{$global-xlarge-box-shadow};
+
+    //
+    // Spacings
+    //
+
+    --global-margin: #{$global-margin};
+    --global-xsmall-margin: #{$global-xsmall-margin};
+    --global-small-margin: #{$global-small-margin};
+    --global-medium-margin: #{$global-medium-margin};
+    --global-large-margin: #{$global-large-margin};
+    --global-xlarge-margin: #{$global-xlarge-margin};
+    --global-gutter: #{$global-gutter};
+    --global-xsmall-gutter: #{$global-xsmall-gutter};
+    --global-small-gutter: #{$global-small-gutter};
+    --global-medium-gutter: #{$global-medium-gutter};
+    --global-large-gutter: #{$global-large-gutter};
+    --global-xlarge-gutter: #{$global-xlarge-gutter};
+
+    //
+    // Controls
+    //
+
+    --global-control-height: #{$global-control-height};
+    --global-control-xsmall-height: #{$global-control-xsmall-height};
+    --global-control-small-height: #{$global-control-small-height};
+    --global-control-medium-height: #{$global-control-medium-height};
+    --global-control-large-height: #{$global-control-large-height};
+    --global-control-xlarge-height: #{$global-control-xlarge-height};
+
+    //
+    // Z-index
+    //
+
+    --global-z-index: #{$global-z-index};
+}

package/dist/esm/styles/visibility.scss

@@ -0,0 +1,184 @@
+// Name:            Visibility
+// Description:     Utilities to show or hide content on breakpoints, hover or touch
+//
+// Component:       `uk-hidden-*`
+//                  `uk-visible-*`
+//                  `uk-invisible`
+//                  `uk-visible-toggle`
+//                  `uk-hidden-hover`
+//                  `uk-invisible-hover`
+//                  `uk-hidden-touch`
+//                  `uk-hidden-notouch`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Visibility
+ ========================================================================== */
+
+/*
+ * Hidden
+ * `hidden` attribute also set here to make it stronger
+ */
+
+[hidden],
+.uk-hidden { display: none !important; }
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-hidden\@s { display: none !important; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-hidden\@m { display: none !important; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-hidden\@l { display: none !important; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-hidden\@xl { display: none !important; }
+
+}
+
+/*
+ * Visible
+ */
+
+/* Phone portrait and smaller */
+@media (max-width: $breakpoint-xsmall-max) {
+
+    .uk-visible\@s { display: none !important; }
+
+}
+
+/* Phone landscape and smaller */
+@media (max-width: $breakpoint-small-max) {
+
+    .uk-visible\@m { display: none !important; }
+
+}
+
+/* Tablet landscape and smaller */
+@media (max-width: $breakpoint-medium-max) {
+
+    .uk-visible\@l { display: none !important; }
+
+}
+
+/* Desktop and smaller */
+@media (max-width: $breakpoint-large-max) {
+
+    .uk-visible\@xl { display: none !important; }
+
+}
+
+
+/* Visibility
+ ========================================================================== */
+
+.uk-invisible { visibility: hidden !important; }
+
+
+/* Toggle (Hover + Focus)
+ ========================================================================== */
+
+/*
+ * Hidden
+ * 1. The toggle is triggered on touch devices using `:focus` and tabindex
+ * 2. The target stays visible if any element within receives focus through keyboard
+ *    Doesn't work in Edge, yet.
+ * 3. Can't use `display: none` nor `visibility: hidden` because both are not focusable.
+ *
+ */
+
+/* 1 + 2 */
+.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
+    height: 0 !important;
+    margin: 0 !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+
+    /* 3 */
+    position: absolute !important;
+    width: 0 !important;
+}
+
+/*
+ * Invisible
+ */
+
+/* 1 + 2 */
+.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) {
+    /* 3 */
+    opacity: 0 !important;
+}
+
+/*
+ * 1. Prevent tab highlighting on iOS.
+ */
+
+.uk-visible-toggle {
+    /* 1 */
+    -webkit-tap-highlight-color: transparent;
+}
+
+/*
+ * Remove outline for `tabindex`
+ */
+
+.uk-visible-toggle:focus { outline: none; }
+
+
+/* Touch
+ ========================================================================== */
+
+/*
+ * Hide if primary pointing device has limited accuracy, e.g. a touch screen.
+ * Works on mobile browsers: Safari, Chrome and Android browser
+ */
+
+@media (pointer: coarse) {
+    .uk-hidden-touch { display: none !important; }
+}
+
+/*
+ * Hide if primary pointing device is accurate, e.g. mouse.
+ * 1. Fallback for IE11 and Firefox, because `pointer` is not supported
+ * 2. Reset if supported
+ */
+
+/* 1 */
+.uk-hidden-notouch { display: none !important; }
+
+@media (pointer: coarse) {
+    .uk-hidden-notouch { display: block !important; }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-visibility-misc) {
+    @include hook-visibility-misc();
+}
+
+// @mixin hook-visibility-misc() {}

package/dist/esm/styles/width.scss

@@ -0,0 +1 @@
+@import '../components/Width/index.scss';

package/dist/esm/types.d.ts

@@ -0,0 +1,10 @@
+export declare type BreakpointsConfig<T> = {
+    default?: T;
+    xs?: T;
+    s?: T;
+    m?: T;
+    l?: T;
+    xl?: T;
+};
+export declare type HeadingSize = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export declare type Direction = 'ltr' | 'rtl';

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/get-breakpoints-config-classes.d.ts

@@ -0,0 +1,2 @@
+import { BreakpointsConfig } from '../types';
+export declare function getBreakpointsConfigClasses<E>(prefixCls: string, coreCls: string, config?: BreakpointsConfig<E>): string[];

package/dist/esm/utils/get-breakpoints-config-classes.js

@@ -0,0 +1,3 @@
+export function getBreakpointsConfigClasses(prefixCls, coreCls, config = {}) {
+    return Object.entries(config).map(([key, value]) => (value ? `${prefixCls}-${coreCls}-${value}${key !== 'default' ? `@${key}` : ''}` : ''));
+}

package/dist/esm/utils/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useForceUpdate';

package/dist/esm/utils/hooks/index.js

@@ -0,0 +1 @@
+export * from './useForceUpdate';

package/dist/esm/utils/hooks/useForceUpdate.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function useForceUpdate(): React.DispatchWithoutAction;

package/dist/esm/utils/hooks/useForceUpdate.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export function useForceUpdate() {
+    const [, forceUpdate] = React.useReducer(x => x + 1, 0);
+    return forceUpdate;
+}

package/dist/esm/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './hooks';
+export * from './get-breakpoints-config-classes';
+export * from './modal';
+export * from './motion';

package/dist/esm/utils/index.js

@@ -0,0 +1,4 @@
+export * from './hooks';
+export * from './get-breakpoints-config-classes';
+export * from './modal';
+export * from './motion';

package/dist/esm/utils/modal.d.ts

@@ -0,0 +1,2 @@
+export declare function addModalMode(): void;
+export declare function removeModalMode(): void;

package/dist/esm/utils/modal.js

@@ -0,0 +1,7 @@
+import { addClass, removeClass } from '@broxus/js-utils';
+export function addModalMode() {
+    addClass(document?.documentElement, 'uk-modal-page');
+}
+export function removeModalMode() {
+    removeClass(document?.documentElement, 'uk-modal-page');
+}

package/dist/esm/utils/motion.d.ts

@@ -0,0 +1,3 @@
+import { CSSMotionProps } from 'rc-motion';
+export declare const collapseMotion: CSSMotionProps;
+export declare const getTransitionName: (rootPrefixCls: string, motion: string, transitionName?: string) => string;

package/dist/esm/utils/motion.js

@@ -0,0 +1,25 @@
+const getCollapsedHeight = () => ({ height: 0, opacity: 0 });
+const getRealHeight = node => ({ height: node.scrollHeight, opacity: 1 });
+const getCurrentHeight = node => ({ height: node ? node.offsetHeight : 0 });
+const skipOpacityTransition = (_, event) => (event?.deadline === true
+    || event.propertyName === 'height');
+export const collapseMotion = {
+    leavedClassName: 'uk-hidden',
+    motionDeadline: 300,
+    motionName: 'uk-motion-collapse',
+    onAppearActive: getRealHeight,
+    onAppearEnd: skipOpacityTransition,
+    onAppearStart: getCollapsedHeight,
+    onEnterActive: getRealHeight,
+    onEnterEnd: skipOpacityTransition,
+    onEnterStart: getCollapsedHeight,
+    onLeaveActive: getCollapsedHeight,
+    onLeaveEnd: skipOpacityTransition,
+    onLeaveStart: getCurrentHeight,
+};
+export const getTransitionName = (rootPrefixCls, motion, transitionName) => {
+    if (transitionName !== undefined) {
+        return transitionName;
+    }
+    return `${rootPrefixCls}-${motion}`;
+};

package/package.json

@@ -0,0 +1,77 @@
+{
+    "name": "@broxus/react-uikit",
+    "version": "0.1.0",
+    "description": "Broxus React UIkit library",
+    "license": "GNU GPL v3.0",
+    "author": {
+        "name": "Denis Klimov",
+        "url": "https://github.com/JeremiahGeronimo"
+    },
+    "contributors": [
+        {
+            "name": "Denis Klimov",
+            "url": "https://github.com/JeremiahGeronimo"
+        }
+    ],
+    "exports": {
+        ".": {
+            "import": "./dist/esm/index.js",
+            "require": "./dist/cjs/index.js"
+        },
+        "./styles": "./src/styles",
+        "./package.json": "./package.json"
+    },
+    "files": [
+        "dist",
+        "LICENSE",
+        "README.md"
+    ],
+    "main": "dist/cjs/index.js",
+    "module": "dist/esm/index.js",
+    "types": "dist/esm/index.d.ts",
+    "engines": {
+        "node": ">=16",
+        "npm": ">=8"
+    },
+    "scripts": {
+        "build": "npx yarn build:cjs & npx yarn build:esm & npx yarn styles:cjs:copy & npx yarn styles:esm:copy",
+        "build:cjs": "tsc --project tsconfig.json --module CommonJS --outDir dist/cjs",
+        "build:esm": "tsc --project tsconfig.json --module ES2015 --outDir dist/esm",
+        "build:watch": "npx yarn build:esm -w --preserveWatchOutput",
+        "styles:cjs:copy": "copyfiles \"src/**/*.{scss,less}\" -u 1 dist/cjs",
+        "styles:esm:copy": "copyfiles \"src/**/*.{scss,less}\" -u 1 dist/esm",
+        "styles:watch": "chokidar \"src/**/*.{scss,less}\" -c \"npx yarn styles:esm:copy\"",
+        "dev": "npx yarn build:watch & npx yarn styles:watch",
+        "cleanup": "rimraf dist",
+        "preinstall": "npx yarn cleanup",
+        "postinstall": "npx yarn build"
+    },
+    "dependencies": {
+        "@broxus/js-utils": "^1.0.0",
+        "classnames": "^2.3.0",
+        "rc-checkbox": "^2.3.2",
+        "rc-collapse": "^3.3.1",
+        "rc-dialog": "^8.9.0",
+        "rc-drawer": "^4.4.3",
+        "rc-dropdown": "^4.0.1",
+        "rc-input-number": "^7.3.6",
+        "rc-motion": "^2.6.2",
+        "rc-overflow": "^1.2.6",
+        "rc-select": "^14.1.9",
+        "rc-tabs": "^11.16.1",
+        "rc-textarea": "^0.3.7",
+        "rc-trigger": "^5.3.1",
+        "rc-util": "^5.23.0",
+        "shallowequal": "^1.1.0",
+        "uikit": "^3.15.1"
+    },
+    "devDependencies": {
+        "chokidar-cli": "^3.0.0",
+        "copyfiles": "^2.4.1",
+        "rimraf": "^3.0.2"
+    },
+    "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "typescript": ">= 4.7.0"
+    }
+}