",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "dependencies": {
15 | "@duik/core": "^0.6.0"
16 | },
17 | "peerDependencies": {
18 | "classnames": "^2.2.6",
19 | "react": "^16.8.0",
20 | "react-dom": "^16.8.0"
21 | },
22 | "gitHead": "7eed8237276864892b18bf2999daaf73ffc04739"
23 | }
24 |
--------------------------------------------------------------------------------
/packages/Divider/styles.scss:
--------------------------------------------------------------------------------
1 | @import '@duik/core/_vars.scss';
2 |
3 | .divider-horizontal {
4 | height: 1px;
5 | width: 100%;
6 | background: $border-color-base;
7 |
8 | &.divider-margin {
9 | margin-top: 24px;
10 | margin-bottom: 24px;
11 | }
12 | }
13 |
14 | .divider-vertical {
15 | width: 1px;
16 | height: 100%;
17 | background: $border-color-base;
18 |
19 | &.divider-margin {
20 | margin-left: 24px;
21 | margin-right: 24px;
22 | }
23 | }
--------------------------------------------------------------------------------
/packages/Dropdown/DropdownButton.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import classnames from 'classnames';
3 | import { Button, ButtonPropsBase, ButtonRefObject } from '@duik/button';
4 |
5 | import { OpenStateControls } from '@duik/use-open-state';
6 | import cls from './styles.scss';
7 |
8 | export type DropdownButtonProps = OpenStateControls &
9 | ButtonPropsBase &
10 | JSX.IntrinsicElements['button'] &
11 | P & {
12 | hideArrows?: boolean;
13 | };
14 |
15 | export const DropdownButton = (props: DropdownButtonProps) => {
16 | const {
17 | // remove this from ...rest
18 | handleClose,
19 | handleOpen,
20 | setOpenState,
21 | // using
22 | handleToggle,
23 | isOpen,
24 | children,
25 | className,
26 | hideArrows = false,
27 | ...rest
28 | } = props;
29 | return (
30 |
40 | {children}
41 |
42 | );
43 | };
44 |
45 | DropdownButton.defaultProps = {
46 | children: 'Action'
47 | };
48 |
49 | DropdownButton.displayName = 'DropdownButton';
50 |
51 | export default DropdownButton;
52 |
--------------------------------------------------------------------------------
/packages/Dropdown/DropdownItem.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { AnyTag } from "@duik/core";
3 | import classnames from "classnames";
4 | import { Button, ButtonProps } from "@duik/button";
5 | import cls from "./styles.scss";
6 |
7 | export const DropdownItem: typeof Button = (
8 | props: ButtonProps
9 | ) => {
10 | const { className, ...rest } = props;
11 |
12 | return (
13 | ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/button": "^0.6.0",
21 | "@duik/core": "^0.6.0",
22 | "@duik/outer-events-handler": "^0.6.0",
23 | "@duik/use-open-state": "^0.6.0"
24 | },
25 | "gitHead": "aac1068af093da764b29262df63f965ec26083d5"
26 | }
27 |
--------------------------------------------------------------------------------
/packages/FormGroup/index.tsx:
--------------------------------------------------------------------------------
1 | import createSimpleComponent from "@duik/create-simple-component";
2 | import cls from "./styles.scss";
3 |
4 | export const FormGroup = createSimpleComponent({
5 | displayName: "FormGroup",
6 | className: cls["form-group"],
7 | Component: "div"
8 | });
9 |
10 | export default FormGroup;
11 |
--------------------------------------------------------------------------------
/packages/FormGroup/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/form-group",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Form Group",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0",
21 | "@duik/create-simple-component": "^0.6.0"
22 | },
23 | "gitHead": "7eed8237276864892b18bf2999daaf73ffc04739"
24 | }
25 |
--------------------------------------------------------------------------------
/packages/FormGroup/styles.scss:
--------------------------------------------------------------------------------
1 | @import '@duik/core/_vars.scss';
2 |
3 | *:not(.form-group-container-horizontal) {
4 | &>.form-group {
5 | margin-bottom: 0;
6 |
7 | &+* {
8 | margin-top: 1rem;
9 | }
10 | }
11 | }
--------------------------------------------------------------------------------
/packages/FormGroupContainer/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import classnames from "classnames";
3 |
4 | import cls from "./styles.scss";
5 |
6 | export type FormGroupContainerProps = JSX.IntrinsicElements["div"] & {
7 | horizontal?: boolean;
8 | };
9 |
10 | export const FormGroupContainer = ({
11 | children,
12 | className,
13 | horizontal,
14 | ...rest
15 | }: FormGroupContainerProps) => (
16 |
25 | {children}
26 |
27 | );
28 |
29 | FormGroupContainer.defaultProps = {
30 | className: null,
31 | children: null,
32 | horizontal: false
33 | };
34 |
35 | FormGroupContainer.displayName = "FormGroupContainer";
36 |
37 | export default FormGroupContainer;
38 |
--------------------------------------------------------------------------------
/packages/FormGroupContainer/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/form-group-container",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Form Group Container",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "gitHead": "7eed8237276864892b18bf2999daaf73ffc04739"
20 | }
21 |
--------------------------------------------------------------------------------
/packages/FormGroupContainer/styles.scss:
--------------------------------------------------------------------------------
1 | .form-group-container {
2 | display: flex;
3 | flex-direction: column;
4 | margin-top: -0.5rem;
5 | margin-bottom: -0.5rem;
6 |
7 | &>*:not(.form-group-container-horizontal) {
8 | margin-top: 0.5rem;
9 | margin-bottom: 0.5rem;
10 | }
11 |
12 | &>.form-group-container-horizontal {
13 | margin-top: 0;
14 | margin-bottom: 0;
15 | }
16 | }
17 |
18 | .form-group-container-horizontal {
19 | display: flex;
20 | flex-wrap: wrap;
21 | flex-direction: row;
22 | margin: -0.5rem;
23 |
24 | &>* {
25 | margin: 0.5rem 0.5rem;
26 | flex-shrink: 1;
27 | flex-grow: 1;
28 | flex-basis: 1px;
29 | min-width: 130px;
30 | }
31 |
32 | &>.form-group-container {
33 | margin-top: 0;
34 | margin-bottom: 0;
35 | }
36 | }
--------------------------------------------------------------------------------
/packages/Icon/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/icon",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Icon",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/create-simple-component": "^0.6.0"
21 | },
22 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
23 | }
24 |
--------------------------------------------------------------------------------
/packages/Icon/uikon.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/Icon/uikon.eot
--------------------------------------------------------------------------------
/packages/Icon/uikon.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/Icon/uikon.ttf
--------------------------------------------------------------------------------
/packages/Icon/uikon.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/Icon/uikon.woff
--------------------------------------------------------------------------------
/packages/LoaderDots/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classnames from 'classnames';
3 | import cls from './styles.scss';
4 |
5 | export type LoaderDotsProps = JSX.IntrinsicElements['span'];
6 |
7 | export const LoaderDots = (props: LoaderDotsProps) => {
8 | const { className, ...rest } = props;
9 | return (
10 |
11 |
15 | );
16 | };
17 |
18 | LoaderDots.displayName = 'LoaderDots';
19 |
20 | export default LoaderDots;
21 |
--------------------------------------------------------------------------------
/packages/LoaderDots/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/loader-dots",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Loader Dots",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@types/react": "^16.8.16"
21 | },
22 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
23 | }
24 |
--------------------------------------------------------------------------------
/packages/LoaderDots/styles.scss:
--------------------------------------------------------------------------------
1 | .loader-dot {
2 | display: inline-block;
3 | width: 70px;
4 | text-align: center;
5 |
6 | &>span {
7 | width: 7px;
8 | height: 7px;
9 | background-color: white;
10 | border-radius: 100%;
11 | vertical-align: middle;
12 | display: inline-block;
13 | animation: bouncedelay 1s infinite ease-in-out both;
14 | }
15 |
16 | .loader-dot-1 {
17 | -webkit-animation-delay: -0.32s;
18 | animation-delay: -0.32s;
19 | margin-right: 2px;
20 | }
21 |
22 | .loader-dot-2 {
23 | -webkit-animation-delay: -0.16s;
24 | animation-delay: -0.16s;
25 | margin-right: 2px;
26 | }
27 | }
28 |
29 | @keyframes bouncedelay {
30 |
31 | 0%,
32 | 80%,
33 | 100% {
34 | -webkit-transform: scale(0);
35 | transform: scale(0);
36 | }
37 |
38 | 40% {
39 | -webkit-transform: scale(1);
40 | transform: scale(1);
41 | }
42 | }
--------------------------------------------------------------------------------
/packages/LoaderDots/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 |
4 |
5 | "@types/prop-types@*":
6 | version "15.7.1"
7 | resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
8 | integrity sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==
9 |
10 | "@types/react@^16.8.16":
11 | version "16.8.17"
12 | resolved "https://registry.npmjs.org/@types/react/-/react-16.8.17.tgz#f287b76a5badb93bc9aa3f54521a3eb53d6c2374"
13 | integrity sha512-pln3mgc6VfkNg92WXODul/ONo140huK9OMsx62GlBlZ2lvjNK86PQJhYMPLO1i66aF5O9OPyZefogvNltBIszA==
14 | dependencies:
15 | "@types/prop-types" "*"
16 | csstype "^2.2.0"
17 |
18 | csstype@^2.2.0:
19 | version "2.6.4"
20 | resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.4.tgz#d585a6062096e324e7187f80e04f92bd0f00e37f"
21 | integrity sha512-lAJUJP3M6HxFXbqtGRc0iZrdyeN+WzOWeY0q/VnFzI+kqVrYIzC7bWlKqCW7oCIdzoPkvfp82EVvrTlQ8zsWQg==
22 |
--------------------------------------------------------------------------------
/packages/Modal/ModalBody.tsx:
--------------------------------------------------------------------------------
1 | import { createSimpleComponent } from '@duik/create-simple-component';
2 |
3 | import cls from './styles.scss';
4 | export const ModalBody = createSimpleComponent({
5 | Component: 'div',
6 | className: cls['modal-body'],
7 | displayName: 'ModalBody',
8 | });
9 |
--------------------------------------------------------------------------------
/packages/Modal/ModalBodySecondary.tsx:
--------------------------------------------------------------------------------
1 | import { createSimpleComponent } from '@duik/create-simple-component';
2 | import classnames from 'classnames';
3 | import cls from './styles.scss';
4 | export const ModalBodySecondary = createSimpleComponent({
5 | Component: 'div',
6 | className: classnames(cls['modal-body'], cls['modal-body-secondary']),
7 | displayName: 'ModalBodySecondary',
8 | });
9 |
--------------------------------------------------------------------------------
/packages/Modal/ModalFooter.tsx:
--------------------------------------------------------------------------------
1 | import { createSimpleComponent } from '@duik/create-simple-component';
2 |
3 | import cls from './styles.scss';
4 | export const ModalFooter = createSimpleComponent({
5 | Component: 'div',
6 | className: cls['modal-footer'],
7 | displayName: 'ModalFooter',
8 | });
9 |
--------------------------------------------------------------------------------
/packages/Modal/ModalHeader.tsx:
--------------------------------------------------------------------------------
1 | import { createSimpleComponent } from '@duik/create-simple-component';
2 |
3 | import cls from './styles.scss';
4 | export const ModalHeader = createSimpleComponent({
5 | Component: 'div',
6 | className: cls['modal-header'],
7 | displayName: 'ModalHeader',
8 | });
9 |
--------------------------------------------------------------------------------
/packages/Modal/ModalTitle.tsx:
--------------------------------------------------------------------------------
1 | import { createSimpleComponent } from '@duik/create-simple-component';
2 |
3 | export const ModalTitle = createSimpleComponent({
4 | Component: 'h2',
5 | displayName: 'ModalTitle',
6 | });
7 |
--------------------------------------------------------------------------------
/packages/Modal/Overlay.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { CSSTransition } from 'react-transition-group';
4 |
5 | import cls from './styles.scss';
6 |
7 | export type OverlayControlProps = {
8 | isOpen?: boolean;
9 | portalEl?: HTMLElement;
10 | };
11 |
12 | export type OverlayProps = OverlayControlProps & {
13 | children?: React.ReactNode;
14 | };
15 |
16 | export const Overlay = (props: OverlayProps) => {
17 | const { isOpen, children, portalEl = document?.body } = props;
18 |
19 | if (portalEl) {
20 | return ReactDOM.createPortal(
21 |
22 | {children}
23 | ,
24 | portalEl
25 | );
26 | }
27 | return null;
28 | };
29 |
30 | export default Overlay;
31 |
--------------------------------------------------------------------------------
/packages/Modal/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/modal",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Modal",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "dependencies": {
15 | "@duik/button": "^0.6.0",
16 | "@duik/core": "^0.6.0",
17 | "@duik/create-simple-component": "^0.6.0",
18 | "@duik/outer-events-handler": "^0.6.0"
19 | },
20 | "peerDependencies": {
21 | "classnames": "^2.2.6",
22 | "react": "^16.8.0",
23 | "react-dom": "^16.8.0"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/NavLink/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/nav-link",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Nav Link",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0"
21 | },
22 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
23 | }
24 |
--------------------------------------------------------------------------------
/packages/NavPanel/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import classnames from "classnames";
3 |
4 | import cls from "./styles.scss";
5 |
6 | export type NavPanelProps = JSX.IntrinsicElements["nav"] & {
7 | positionRight?: boolean;
8 | onRight?: boolean;
9 | dark?: boolean;
10 | };
11 |
12 | export const NavPanel = (props: NavPanelProps) => {
13 | const { children, className, positionRight, onRight, dark, ...rest } = props;
14 |
15 | return (
16 |
26 | {children}
27 |
28 | );
29 | };
30 |
31 | NavPanel.defaultProps = {
32 | className: null,
33 | children: null,
34 | positionRight: false,
35 | onRight: false,
36 | dark: false
37 | };
38 |
39 | NavPanel.displayName = "NavPanel";
40 |
41 | export default NavPanel;
42 |
--------------------------------------------------------------------------------
/packages/NavPanel/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/nav-panel",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Nav Panel",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0"
21 | },
22 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
23 | }
24 |
--------------------------------------------------------------------------------
/packages/NavPanel/styles.scss:
--------------------------------------------------------------------------------
1 | @import '@duik/core/_vars.scss';
2 |
3 | .nav-panel {
4 | /* Menu Base: */
5 | background-color: $bg-main;
6 | height: 100%;
7 | flex-grow: 0;
8 | flex-shrink: 0;
9 | flex-basis: 270px;
10 | width: 270px;
11 | overflow-y: auto;
12 | -webkit-overflow-scrolling: touch;
13 |
14 | &:not(.nav-panel-right) {
15 | border-right: $border-default-base;
16 |
17 | &.nav-panel-dark {
18 | border-right: $border-default-adverse;
19 | }
20 | }
21 |
22 | &.nav-panel-right {
23 | border-left: $border-default-base;
24 |
25 | &.nav-panel-dark {
26 | border-left: $border-default-adverse;
27 | }
28 | }
29 | }
30 |
31 | .nav-panel-dark {
32 | @extend .nav-panel;
33 | background-color: $bg-adverse-main;
34 | color: $text-base;
35 |
36 | --text-main: #fff;
37 | --text-base: #fbfbfd;
38 | --text-adverse-main: #3e3f42;
39 | --text-adverse-base: #6b6c6f;
40 | --text-adverse-secondary: #9ea0a5;
41 | --text-adverse-tertiary: #cecfd2;
42 | --border-color-base: #2e2e33;
43 |
44 | .nav-link.active .nav-link-text {
45 | color: $text-main;
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/packages/NavSection/index.tsx:
--------------------------------------------------------------------------------
1 | import createSimpleComponent from "@duik/create-simple-component";
2 | import cls from "./styles.scss";
3 |
4 | export const NavSection = createSimpleComponent({
5 | displayName: "NavSection",
6 | className: cls["nav-section"],
7 | Component: "div"
8 | });
9 |
10 | export default NavSection;
11 |
--------------------------------------------------------------------------------
/packages/NavSection/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/nav-section",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Nav Section",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/create-simple-component": "^0.6.0"
21 | },
22 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
23 | }
24 |
--------------------------------------------------------------------------------
/packages/NavSection/styles.scss:
--------------------------------------------------------------------------------
1 | .nav-section {
2 | &+& {
3 | margin-top: 20px;
4 | }
5 |
6 | &:last-child {
7 | margin-bottom: 20px;
8 | }
9 |
10 | &:first-child {
11 | margin-top: 15px;
12 | }
13 | }
--------------------------------------------------------------------------------
/packages/NavSectionTitle/index.tsx:
--------------------------------------------------------------------------------
1 | import createSimpleComponent from "@duik/create-simple-component";
2 | import cls from "./styles.scss";
3 |
4 | export const NavSectionTitle = createSimpleComponent({
5 | displayName: "NavSectionTitle",
6 | className: cls["nav-section-title"],
7 | Component: "span"
8 | });
9 |
10 | export default NavSectionTitle;
11 |
--------------------------------------------------------------------------------
/packages/NavSectionTitle/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/nav-section-title",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Nav Section Title",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0",
21 | "@duik/create-simple-component": "^0.6.0"
22 | },
23 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
24 | }
25 |
--------------------------------------------------------------------------------
/packages/NavSectionTitle/styles.scss:
--------------------------------------------------------------------------------
1 | @import '@duik/core/_vars.scss';
2 |
3 | .nav-section-title {
4 | text-transform: uppercase;
5 | font-weight: 500;
6 | font-size: 0.75rem;
7 | color: $text-secondary;
8 | line-height: 1.5;
9 | display: block;
10 | padding: 10px 30px;
11 | }
--------------------------------------------------------------------------------
/packages/NavTitle/index.tsx:
--------------------------------------------------------------------------------
1 | import createSimpleComponent from "@duik/create-simple-component";
2 | import cls from "./styles.scss";
3 |
4 | export const NavTitle = createSimpleComponent({
5 | displayName: "NavTitle",
6 | className: cls["nav-title"],
7 | Component: "span"
8 | });
9 |
10 | export default NavTitle;
11 |
--------------------------------------------------------------------------------
/packages/NavTitle/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/nav-title",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Nav Title",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0",
21 | "@duik/create-simple-component": "^0.6.0"
22 | },
23 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
24 | }
25 |
--------------------------------------------------------------------------------
/packages/NavTitle/styles.scss:
--------------------------------------------------------------------------------
1 | @import '@duik/core/_vars.scss';
2 |
3 | .nav-title {
4 | padding: 25px 30px 20px;
5 | font-size: 1.125rem;
6 | color: var(--nav-text-main, #{$text-main});
7 | display: block;
8 | font-weight: 500;
9 | line-height: 1;
10 | }
--------------------------------------------------------------------------------
/packages/OuterEventsHandler/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/outer-events-handler",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Outer Events Handler",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0"
21 | },
22 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
23 | }
24 |
--------------------------------------------------------------------------------
/packages/OuterEventsHandler/styles.scss:
--------------------------------------------------------------------------------
1 | .outer-events-handler {
2 | display: inline-block;
3 | }
--------------------------------------------------------------------------------
/packages/Progress/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import classnames from "classnames";
3 |
4 | import "./styles.scss";
5 |
6 | export type ProgressProps = JSX.IntrinsicElements["div"] & {
7 | fill?: number;
8 | fills?: number[];
9 | lg?: boolean;
10 | };
11 |
12 | const getDecValue = (val: number) => Math.min(Math.ceil(val * 100), 100);
13 |
14 | export const Progress = ({
15 | className,
16 | fill = 0,
17 | fills,
18 | lg,
19 | ...rest
20 | }: ProgressProps) => (
21 |
25 | {fills && fills.length > 0 ? (
26 | fills.map((item, index) => (
27 |
38 | ))
39 | ) : (
40 |
50 | )}
51 |
",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0"
21 | },
22 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
23 | }
24 |
--------------------------------------------------------------------------------
/packages/Progress/styles.scss:
--------------------------------------------------------------------------------
1 | @import '@duik/core/_vars.scss';
2 |
3 | .progress {
4 | width: 100%;
5 | display: flex;
6 | border-radius: 4px;
7 | height: 4px;
8 | background: $border-color-base;
9 | }
10 |
11 | .progress-lg {
12 | height: 8px;
13 | }
14 |
15 | .progress-bar {
16 | background: $color-primary;
17 | flex-grow: 0;
18 | flex-shrink: 0;
19 | border-radius: 4px;
20 | display: block;
21 | height: 100%;
22 |
23 | &:nth-child(2n) {
24 | background: $color-secondary;
25 | }
26 | }
--------------------------------------------------------------------------------
/packages/README.md:
--------------------------------------------------------------------------------
1 | # WIP
--------------------------------------------------------------------------------
/packages/Radio/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { BaseInput, InputBaseProps } from "@duik/base-input";
3 |
4 | export const Radio = (props: InputBaseProps) => {
5 | return ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/base-input": "^0.6.0"
21 | },
22 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
23 | }
24 |
--------------------------------------------------------------------------------
/packages/ScrollArea/index.tsx:
--------------------------------------------------------------------------------
1 | import createSimpleComponent from '@duik/create-simple-component';
2 | import classnames from 'classnames';
3 | import cls from './styles.scss';
4 |
5 | export const ScrollArea = createSimpleComponent({
6 | displayName: 'ScrollArea',
7 | className: cls['scroll-area'],
8 | Component: 'div'
9 | });
10 |
11 | export const ScrollAreaXOverflow = createSimpleComponent({
12 | displayName: 'ScrollArea',
13 | className: classnames(cls['scroll-area'], cls['scroll-area-x-overflow-hack']),
14 | Component: 'div'
15 | });
16 |
17 | export default ScrollArea;
18 |
--------------------------------------------------------------------------------
/packages/ScrollArea/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/scroll-area",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit ScrollArea",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0",
21 | "@duik/create-simple-component": "^0.6.0"
22 | },
23 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
24 | }
25 |
--------------------------------------------------------------------------------
/packages/ScrollArea/styles.scss:
--------------------------------------------------------------------------------
1 | @import '@duik/core/_vars.scss';
2 |
3 | .scroll-area {
4 | min-height: 1px;
5 | max-height: 100%;
6 | flex-grow: 1;
7 | flex-shrink: 1;
8 | overflow-y: auto;
9 | -webkit-overflow-scrolling: touch;
10 | }
11 |
12 | .scroll-area-x-overflow-hack {
13 | padding-left: 100vw;
14 | padding-right: 100vw;
15 | margin-left: -100vw;
16 | margin-right: -100vw;
17 | }
18 |
--------------------------------------------------------------------------------
/packages/Select/SelectButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { DropdownButton } from '@duik/dropdown';
3 | import { SelectOptionProps } from './types';
4 | import { getDisplayValue } from './utils';
5 |
6 | export type SelectButtonProps<
7 | V extends number | string,
8 | M extends boolean = false
9 | > = React.ComponentProps &
10 | SelectOptionProps & {
11 | placeholder?: React.ReactNode;
12 | };
13 |
14 | export const SelectButton = (
15 | props: SelectButtonProps
16 | ) => {
17 | const { children, placeholder, activeOption, options, ...rest } = props;
18 | return (
19 |
20 | {children || getDisplayValue(activeOption) || placeholder}
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/packages/Select/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/select",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Select",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/content-title": "^0.6.0",
21 | "@duik/core": "^0.6.0",
22 | "@duik/dropdown": "^0.6.0",
23 | "@duik/form-group": "^0.6.0",
24 | "@duik/text-field": "^0.6.0"
25 | },
26 | "gitHead": "aac1068af093da764b29262df63f965ec26083d5"
27 | }
28 |
--------------------------------------------------------------------------------
/packages/Select/types.ts:
--------------------------------------------------------------------------------
1 | import { DropdownItem } from '@duik/dropdown';
2 |
3 | export type SelectActiveOption<
4 | V extends number | string,
5 | M extends boolean = false
6 | > = M extends true ? SelectOption[] : SelectOption | null;
7 |
8 | export type SelectOption = {
9 | label?: React.ReactNode;
10 | value: V;
11 | props?: React.ComponentProps;
12 | };
13 |
14 | export type SelectOnOptionFn = (
15 | option: SelectOption,
16 | name?: string
17 | ) => void;
18 |
19 | export type SelectOptionProps<
20 | Value extends number | string,
21 | Multiple extends boolean = false
22 | > = {
23 | options: SelectOption[];
24 | activeOption?: SelectActiveOption;
25 | multiple?: Multiple;
26 | defaultOption?: SelectActiveOption;
27 | };
28 |
--------------------------------------------------------------------------------
/packages/Select/utils.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { SelectOption } from "./types";
3 | import cls from "./styles.scss";
4 |
5 | export const getOptionLabel = (option?: SelectOption | null) => {
6 | if (option) {
7 | return option.label || option.value;
8 | }
9 | return null;
10 | };
11 |
12 | export const getDisplayValue = (
13 | option?: SelectOption | SelectOption[] | null
14 | ) => {
15 | if (Array.isArray(option)) {
16 | if (option.length > 1) {
17 | return (
18 | <>
19 | {getOptionLabel(option[0])}{" "}
20 |
21 | +{option.length - 1}
22 |
23 |
24 | );
25 | }
26 | return getOptionLabel(option[0]);
27 | }
28 |
29 | return getOptionLabel(option);
30 | };
31 |
--------------------------------------------------------------------------------
/packages/SelectDate/defaultRenders.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { DatepickerValue, DatepickerRangeValue } from "../Datepicker";
3 |
4 | export const defaultRenderValue = (
5 | value?: DatepickerValue,
6 | isRange?: M,
7 | placeholder?: React.ReactNode
8 | ) => {
9 | if (!value) {
10 | return placeholder;
11 | }
12 |
13 | if (isRange) {
14 | const dateRange = value as DatepickerRangeValue;
15 | if (!dateRange.to && !dateRange.from) {
16 | return placeholder;
17 | }
18 | return (
19 | <>
20 | {(dateRange.from && (
21 | {dateRange.from.toLocaleDateString()}
22 | )) ||
23 | placeholder}
24 | ═
25 | {(dateRange.to && (
26 | {dateRange.to.toLocaleDateString()}
27 | )) ||
28 | placeholder}{" "}
29 |
30 | );
31 | }
32 |
33 | return {(value as Date).toLocaleDateString() || "-"} ;
34 | };
35 |
--------------------------------------------------------------------------------
/packages/SelectDate/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/select-date",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Select Date",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/content-title": "^0.6.0",
21 | "@duik/core": "^0.6.0",
22 | "@duik/datepicker": "^0.6.0",
23 | "@duik/dropdown": "^0.6.0",
24 | "@duik/form-group": "^0.6.0",
25 | "@duik/text-field": "^0.6.0",
26 | "@duik/use-open-state": "^0.6.0"
27 | },
28 | "gitHead": "aac1068af093da764b29262df63f965ec26083d5"
29 | }
30 |
--------------------------------------------------------------------------------
/packages/SelectDate/styles.scss:
--------------------------------------------------------------------------------
1 | .select-date {
2 | display: block;
3 | }
4 |
5 | .select-date-dropdown {
6 | padding: .5rem;
7 | max-height: none;
8 | }
--------------------------------------------------------------------------------
/packages/SelectDate/types.ts:
--------------------------------------------------------------------------------
1 | import { DatepickerValue } from "../Datepicker";
2 |
3 | export type SelectDateRenderValue = (
4 | value?: DatepickerValue,
5 | isRange?: M,
6 | placeholder?: React.ReactNode
7 | ) => React.ReactNode;
8 |
--------------------------------------------------------------------------------
/packages/Tabs/TabItem.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import classnames from "classnames";
3 | import { AnyTag, PropsWithTagProps } from "@duik/core";
4 |
5 | import cls from "./styles.scss";
6 |
7 | export type TabItemPropsBase = {
8 | rightEl?: React.ReactNode;
9 | leftEl?: React.ReactNode;
10 | active?: Boolean;
11 | text?: React.ReactNode
12 | };
13 |
14 | export type TabItemProps = PropsWithTagProps<
15 | T,
16 | TabItemPropsBase & { Component?: T }
17 | >;
18 |
19 | export const TabItem = (props: TabItemProps) => {
20 | const {
21 | className,
22 | Component = "a",
23 | children,
24 | rightEl,
25 | leftEl,
26 | active,
27 | text,
28 | ...rest
29 | } = props;
30 | return (
31 |
38 | {leftEl && {leftEl} }
39 | {children || text}
40 | {rightEl && {rightEl} }
41 |
42 | );
43 | };
44 |
45 | TabItem.displayName = "TabItem";
46 |
47 | export default TabItem;
48 |
--------------------------------------------------------------------------------
/packages/Tabs/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import classnames from "classnames";
3 | import cls from "./styles.scss";
4 |
5 | export * from "./TabItem";
6 |
7 | export type TabsProps = JSX.IntrinsicElements["nav"] & {
8 | xs?: boolean;
9 | sm?: boolean;
10 | };
11 |
12 | export const Tabs = (props: TabsProps) => {
13 | const { xs, sm, children, className, ...rest } = props;
14 |
15 | return (
16 |
23 | {children}
24 |
25 | );
26 | };
27 |
28 | export const Tab = Tabs;
29 | export const TabContainer = Tabs;
30 | export default Tabs;
31 |
--------------------------------------------------------------------------------
/packages/Tabs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/tabs",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Tab Navigation",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0"
21 | },
22 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
23 | }
24 |
--------------------------------------------------------------------------------
/packages/TextArea/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import classnames from "classnames";
3 | import { FormGroup } from "@duik/form-group";
4 |
5 | import "./styles.scss";
6 |
7 | export type TextAreaProps = JSX.IntrinsicElements["textarea"] & {
8 | label?: React.ReactNode;
9 | clear?: boolean;
10 | errorMessage?: React.ReactNode;
11 | successMessage?: React.ReactNode;
12 | leftEl?: React.ReactNode;
13 | rightEl?: React.ReactNode;
14 | noWrap?: boolean;
15 | };
16 |
17 | export const TextArea = (props: TextAreaProps) => {
18 | const {
19 | className,
20 | label,
21 | clear,
22 | errorMessage,
23 | successMessage,
24 | leftEl,
25 | rightEl,
26 | id,
27 | noWrap,
28 | ...rest
29 | } = props;
30 |
31 | const el = (
32 | <>
33 | {label && {label} }
34 |
42 | {errorMessage ? (
43 | {errorMessage}
44 | ) : null}
45 | {successMessage ? (
46 | {successMessage}
47 | ) : null}
48 |
49 | );
50 |
51 | return noWrap ? el : {el} ;
52 | };
53 |
54 | TextArea.displayName = "TextArea";
55 |
56 | export default TextArea;
57 |
--------------------------------------------------------------------------------
/packages/TextArea/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/text-area",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit TextArea",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0",
21 | "@duik/form-group": "^0.6.0"
22 | },
23 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
24 | }
25 |
--------------------------------------------------------------------------------
/packages/TextArea/styles.scss:
--------------------------------------------------------------------------------
1 | @import "@duik/core/_vars.scss";
2 |
3 | textarea.form-control {
4 | position: relative;
5 | background: $bg-main;
6 | border: $border-default-base;
7 | border-radius: 4px;
8 | display: flex;
9 | outline: none;
10 | box-shadow: none;
11 | resize: none;
12 | width: 100%;
13 |
14 | &:not(:disabled),
15 | &:not(:read-only) {
16 |
17 | &:focus,
18 | &:active {
19 | border-color: $color-primary;
20 | box-shadow: none;
21 | }
22 | }
23 |
24 | &.is-valid {
25 | border-color: $color-success;
26 | }
27 |
28 | &.is-invalid {
29 | border-color: $color-danger;
30 | }
31 |
32 | font-size: 0.875rem;
33 |
34 | &.clear {
35 | background: transparent;
36 | padding: 0;
37 | border: none;
38 | }
39 | }
40 |
41 |
42 | .valid-feedback,
43 | .invalid-feedback {
44 | font-size: .875rem;
45 | line-height: 1.375rem;
46 | display: block;
47 | }
48 |
49 | .valid-feedback {
50 | color: $color-success;
51 | }
52 |
53 | .invalid-feedback {
54 | color: $color-danger;
55 | }
56 |
57 |
58 | textarea:-webkit-autofill,
59 | textarea:-webkit-autofill:hover,
60 | textarea:-webkit-autofill:focus,
61 | textarea:-webkit-autofill:active {
62 | transition: background-color 5500s ease-in-out 0s !important;
63 | color: $text-base !important;
64 | -webkit-text-fill-color: $text-base !important;
65 | }
--------------------------------------------------------------------------------
/packages/TextField/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/text-field",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Text Field",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0",
21 | "@duik/form-group": "^0.6.0"
22 | },
23 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
24 | }
25 |
--------------------------------------------------------------------------------
/packages/Toggle/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { BaseInput, InputBaseProps } from "@duik/base-input";
3 |
4 | export const Toggle = (props: InputBaseProps) => {
5 | return ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/base-input": "^0.6.0"
21 | },
22 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
23 | }
24 |
--------------------------------------------------------------------------------
/packages/TopBar/index.tsx:
--------------------------------------------------------------------------------
1 | import createSimpleComponent from "@duik/create-simple-component";
2 | import cls from "./styles.scss";
3 |
4 | export const TopBar = createSimpleComponent({
5 | displayName: "TopBar",
6 | className: cls["top-bar"],
7 | Component: "section"
8 | });
9 |
10 | export default TopBar;
11 |
--------------------------------------------------------------------------------
/packages/TopBar/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/top-bar",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit TopBar",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0",
21 | "@duik/create-simple-component": "^0.6.0"
22 | },
23 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
24 | }
25 |
--------------------------------------------------------------------------------
/packages/TopBar/styles.scss:
--------------------------------------------------------------------------------
1 | @import '@duik/core/_vars.scss';
2 |
3 | .top-bar {
4 | display: flex;
5 | justify-content: space-between;
6 | align-items: center;
7 | height: 70px;
8 | background: $bg-main;
9 | flex-shrink: 0;
10 | flex-grow: 0;
11 | z-index: 100;
12 | border-bottom: $border-default-base;
13 | padding-left: 15px;
14 | padding-right: 15px;
15 |
16 | &.top-bar-center {
17 | justify-content: center;
18 | }
19 | }
--------------------------------------------------------------------------------
/packages/TopBarLink/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import classnames from "classnames";
3 | import { AnyTag, PropsWithTagProps } from "@duik/core";
4 |
5 | import "./styles.scss";
6 |
7 | export type TopBarLinkBaseProps = {};
8 |
9 | export type TopBarLinkProps = PropsWithTagProps<
10 | T,
11 | TopBarLinkBaseProps & { Component?: T }
12 | >;
13 |
14 | export const TopBarLink = (
15 | props: TopBarLinkProps
16 | ) => {
17 | const { children, className, Component, ...rest } = props;
18 |
19 | return (
20 |
21 | {children}
22 |
23 | );
24 | };
25 |
26 | TopBarLink.defaultProps = {
27 | className: null,
28 | Component: "a"
29 | };
30 |
31 | TopBarLink.displayName = "TopBarLink";
32 |
33 | export default TopBarLink;
34 |
--------------------------------------------------------------------------------
/packages/TopBarLink/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/top-bar-link",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit TopBarLink",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0",
21 | "@duik/create-simple-component": "^0.6.0"
22 | },
23 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
24 | }
25 |
--------------------------------------------------------------------------------
/packages/TopBarLink/styles.scss:
--------------------------------------------------------------------------------
1 | @import '@duik/core/_vars.scss';
2 |
3 | .top-bar-link {
4 | height: 38px;
5 | line-height: 38px;
6 | padding: 0 15px;
7 | display: block;
8 | cursor: pointer;
9 | font-size: .875rem;
10 | color: $text-main;
11 |
12 | &:hover,
13 | &.active {
14 | color: $color-primary;
15 | }
16 | }
--------------------------------------------------------------------------------
/packages/TopBarLinkContainer/index.tsx:
--------------------------------------------------------------------------------
1 | import createSimpleComponent from "@duik/create-simple-component";
2 | import cls from "./styles.scss";
3 |
4 | export const TopBarLinkContainer = createSimpleComponent({
5 | displayName: "TopBarLinkContainer",
6 | className: cls["top-bar-link-container"],
7 | Component: "nav"
8 | });
9 |
10 | export default TopBarLinkContainer;
11 |
--------------------------------------------------------------------------------
/packages/TopBarLinkContainer/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/top-bar-link-container",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit TopBarLinkContainer",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0",
21 | "@duik/create-simple-component": "^0.6.0"
22 | },
23 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
24 | }
25 |
--------------------------------------------------------------------------------
/packages/TopBarLinkContainer/styles.scss:
--------------------------------------------------------------------------------
1 | .top-bar-link-container {
2 | margin: 0 -15px;
3 | display: flex;
4 | align-items: center;
5 |
6 | &>* {
7 | flex-shrink: 0;
8 | }
9 | }
--------------------------------------------------------------------------------
/packages/TopBarMenuDivider/index.tsx:
--------------------------------------------------------------------------------
1 | import createSimpleComponent from "@duik/create-simple-component";
2 | import cls from "./styles.scss";
3 |
4 | export const TopBarMenuDivider = createSimpleComponent({
5 | displayName: "TopBarMenuDivider",
6 | className: cls["top-bar-menu-divider"],
7 | Component: "div"
8 | });
9 |
10 | export default TopBarMenuDivider;
11 |
--------------------------------------------------------------------------------
/packages/TopBarMenuDivider/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/top-bar-menu-divider",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit TopBarMenuDivider",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0",
21 | "@duik/create-simple-component": "^0.6.0"
22 | },
23 | "gitHead": "efe4e90b5b41da75ba32d08b41f180519daca614"
24 | }
25 |
--------------------------------------------------------------------------------
/packages/TopBarMenuDivider/styles.scss:
--------------------------------------------------------------------------------
1 | @import '@duik/core/_vars.scss';
2 |
3 | .top-bar-menu-divider {
4 | background: $border-color-base;
5 | height: 38px;
6 | width: 1px;
7 | margin: 0 30px;
8 | flex-basis: 1px;
9 | flex-shrink: 0;
10 | }
--------------------------------------------------------------------------------
/packages/TopBarSection/index.tsx:
--------------------------------------------------------------------------------
1 | import createSimpleComponent from "@duik/create-simple-component";
2 | import cls from "./styles.scss";
3 |
4 | export const TopBarSection = createSimpleComponent({
5 | displayName: "TopBarSection",
6 | className: cls["top-bar-section"],
7 | Component: "div"
8 | });
9 |
10 | export default TopBarSection;
11 |
--------------------------------------------------------------------------------
/packages/TopBarSection/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/top-bar-section",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit TopBarSection",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0",
21 | "@duik/create-simple-component": "^0.6.0"
22 | },
23 | "gitHead": "7eed8237276864892b18bf2999daaf73ffc04739"
24 | }
25 |
--------------------------------------------------------------------------------
/packages/TopBarSection/styles.scss:
--------------------------------------------------------------------------------
1 | .top-bar-section {
2 | display: flex;
3 | align-items: center;
4 | padding: 0 15px;
5 |
6 | &>* {
7 | flex-shrink: 0;
8 | }
9 |
10 | &>.top-bar-section:first-child {
11 | padding-left: 0;
12 | }
13 |
14 | &>.top-bar-section:last-child {
15 | padding-right: 0;
16 | }
17 | }
--------------------------------------------------------------------------------
/packages/TopBarTitle/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import classnames from "classnames";
3 |
4 | import "./styles.scss";
5 |
6 | export type TopBarTitleProps = JSX.IntrinsicElements["h2"] & {
7 | large?: Boolean;
8 | };
9 |
10 | export const TopBarTitle = ({
11 | children,
12 | className,
13 | large,
14 | ...rest
15 | }: TopBarTitleProps) => (
16 |
22 | {children}
23 |
24 | );
25 |
26 | TopBarTitle.displayName = "TopBarTitle";
27 |
28 | TopBarTitle.defaultProps = {
29 | className: null,
30 | children: null,
31 | large: false
32 | };
33 |
34 | export default TopBarTitle;
35 |
--------------------------------------------------------------------------------
/packages/TopBarTitle/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/top-bar-title",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit TopBarTitle",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0",
21 | "@duik/create-simple-component": "^0.6.0"
22 | },
23 | "gitHead": "7eed8237276864892b18bf2999daaf73ffc04739"
24 | }
25 |
--------------------------------------------------------------------------------
/packages/TopBarTitle/styles.scss:
--------------------------------------------------------------------------------
1 | @import '@duik/core/_vars.scss';
2 |
3 | .top-bar-title,
4 | .top-bar.top-bar-title {
5 | font-weight: 500;
6 | font-size: 1rem;
7 | color: $text-main;
8 | line-height: 1.75;
9 | display: flex;
10 | align-items: center;
11 |
12 | &.top-bar-title-lg {
13 | font-size: 1.125rem;
14 | }
15 |
16 | i {
17 | margin-right: 14px;
18 | color: $text-secondary;
19 | }
20 | }
--------------------------------------------------------------------------------
/packages/Widget/Widget.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import classnames from "classnames";
3 |
4 | import cls from "./styles.scss";
5 | import WidgetContainer from "./WidgetContainer";
6 | import WidgetContent from "./WidgetContent";
7 | import WidgetHeader from "./WidgetHeader";
8 | import WidgetTable from "./WidgetTable";
9 |
10 | export type WidgetProps = JSX.IntrinsicElements["div"] & {
11 | padding?: boolean;
12 | margin?: boolean;
13 | };
14 |
15 | export const Widget = ({
16 | children,
17 | className,
18 | padding,
19 | margin,
20 | ...rest
21 | }: WidgetProps) => (
22 |
29 | {children}
30 |
31 | );
32 |
33 | Widget.defaultProps = {
34 | className: null,
35 | children: null,
36 | padding: false,
37 | margin: false
38 | };
39 |
40 | Widget.displayName = "Widget";
41 | Widget.Container = WidgetContainer
42 | Widget.Content = WidgetContent
43 | Widget.Header = WidgetHeader
44 | Widget.Table = WidgetTable
45 |
46 | export const Card = Widget
47 |
48 | export default Widget;
49 |
--------------------------------------------------------------------------------
/packages/Widget/WidgetContainer.tsx:
--------------------------------------------------------------------------------
1 | import createSimpleComponent from "@duik/create-simple-component";
2 | import cls from "./styles.scss";
3 |
4 | export const WidgetContainer = createSimpleComponent({
5 | displayName: "WidgetContainer",
6 | className: cls["card-container"],
7 | Component: "div"
8 | });
9 |
10 | export default WidgetContainer;
11 |
--------------------------------------------------------------------------------
/packages/Widget/WidgetContent.tsx:
--------------------------------------------------------------------------------
1 | import createSimpleComponent from "@duik/create-simple-component";
2 | import cls from "./styles.scss";
3 |
4 | export const WidgetContent = createSimpleComponent({
5 | displayName: "WidgetContent",
6 | className: cls["card-body"],
7 | Component: "div"
8 | });
9 |
10 | export default WidgetContent;
11 |
--------------------------------------------------------------------------------
/packages/Widget/WidgetHeader.tsx:
--------------------------------------------------------------------------------
1 | import createSimpleComponent from "@duik/create-simple-component";
2 | import cls from "./styles.scss";
3 |
4 | export const WidgetHeader = createSimpleComponent({
5 | displayName: "WidgetHeader",
6 | className: cls["card-header"],
7 | Component: "div"
8 | });
9 |
10 | export default WidgetHeader;
11 |
--------------------------------------------------------------------------------
/packages/Widget/WidgetTable.tsx:
--------------------------------------------------------------------------------
1 | import createSimpleComponent from "@duik/create-simple-component";
2 | import cls from "./styles.scss";
3 |
4 | export const WidgetTable = createSimpleComponent<"table">({
5 | displayName: "WidgetTable",
6 | className: cls["card-table"],
7 | Component: "table"
8 | });
9 |
10 | export default WidgetTable;
11 |
--------------------------------------------------------------------------------
/packages/Widget/index.tsx:
--------------------------------------------------------------------------------
1 | import Widget from "./Widget";
2 |
3 | export * from "./Widget";
4 | export * from "./WidgetContent";
5 | export * from "./WidgetHeader";
6 | export * from "./WidgetTable";
7 | export * from "./WidgetContainer";
8 | export default Widget;
9 |
--------------------------------------------------------------------------------
/packages/Widget/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/widget",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Widget",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0",
21 | "@duik/create-simple-component": "^0.6.0"
22 | },
23 | "gitHead": "aac1068af093da764b29262df63f965ec26083d5"
24 | }
25 |
--------------------------------------------------------------------------------
/packages/copyTypes.script.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 |
4 | const typesPath = path.resolve(__dirname, '__generated_types');
5 | const directories = fs.readdirSync(
6 | path.resolve(__dirname, '__generated_types')
7 | );
8 |
9 | directories.forEach(dir => {
10 | const files = fs.readdirSync(path.resolve(typesPath, dir));
11 | try {
12 | fs.mkdirSync(path.resolve(__dirname, dir, 'dist'));
13 | } catch (e) {
14 | // console.log(e)
15 | }
16 | files.forEach(file => {
17 | const pathSource = path.resolve(typesPath, dir, file);
18 | const content = fs.readFileSync(pathSource);
19 | const contentString = content.toString();
20 |
21 | // frikin fix for ts declaration gen
22 | const replaced = contentString.replace(
23 | new RegExp('"../core"', 'g'),
24 | '"@duik/core"'
25 | );
26 | fs.writeFileSync(path.resolve(__dirname, dir, 'dist', file), replaced);
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/packages/core/index.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import "./styles.scss";
3 |
4 | /**
5 | * string or react component
6 | */
7 | export type AnyTag =
8 | | keyof JSX.IntrinsicElements
9 | | React.JSXElementConstructor;
10 |
11 | /**
12 | * Get props of string or react component
13 | */
14 | export type TagProps = React.ComponentProps;
15 |
16 | /**
17 | * Merge props with tag props
18 | */
19 | export type PropsWithTagProps<
20 | T extends AnyTag,
21 | Props = {}
22 | > = React.ComponentProps & Props;
23 |
24 | export type Omit = Pick>;
25 |
26 | export default () => {
27 | console.log("hello");
28 | };
29 |
--------------------------------------------------------------------------------
/packages/core/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/core",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Core",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@types/react": "^16.8.16",
21 | "@types/react-dom": "^16.8.4"
22 | },
23 | "gitHead": "7eed8237276864892b18bf2999daaf73ffc04739"
24 | }
25 |
--------------------------------------------------------------------------------
/packages/createSimpleComponent/index.tsx:
--------------------------------------------------------------------------------
1 | // for components that just needs styling
2 |
3 | import * as React from "react";
4 | import classnames from "classnames";
5 |
6 | import { AnyTag, PropsWithTagProps } from "@duik/core";
7 |
8 | export type CreateSimpleComponentDefaultProps = {
9 | displayName: string;
10 | className?: string;
11 | };
12 |
13 | export type CreateSimpleComponentProps = {
14 | defaultProps?: CreateSimpleComponentDefaultProps;
15 | } & CreateSimpleComponentDefaultProps;
16 |
17 | export type ComponentProps = React.PropsWithChildren<{
18 | className?: string;
19 | }>;
20 |
21 | export const createSimpleComponent = (
22 | options: { Component?: T } & PropsWithTagProps
23 | ) => {
24 | const {
25 | displayName,
26 | className: defaultClassName,
27 | Component,
28 | defaultProps
29 | } = options;
30 |
31 | function SimpleComponent(
32 | props: PropsWithTagProps
33 | ): JSX.Element {
34 | const { className, children, ...rest } = props;
35 | return (
36 |
37 | {children}
38 |
39 | );
40 | }
41 |
42 | SimpleComponent.defaultProps = {
43 | className: null,
44 | children: null,
45 | ...defaultProps
46 | };
47 |
48 | SimpleComponent.displayName = displayName;
49 |
50 | return SimpleComponent;
51 | };
52 |
53 | export default createSimpleComponent;
54 |
--------------------------------------------------------------------------------
/packages/createSimpleComponent/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/create-simple-component",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit createSimpleComponent",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/core": "^0.6.0",
21 | "@types/react": "^16.8.16",
22 | "@types/react-dom": "^16.8.4"
23 | },
24 | "gitHead": "7eed8237276864892b18bf2999daaf73ffc04739"
25 | }
26 |
--------------------------------------------------------------------------------
/packages/createSimpleComponent/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 |
4 |
5 | "@types/prop-types@*":
6 | version "15.7.1"
7 | resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
8 | integrity sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==
9 |
10 | "@types/react-dom@^16.8.4":
11 | version "16.8.4"
12 | resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.8.4.tgz#7fb7ba368857c7aa0f4e4511c4710ca2c5a12a88"
13 | integrity sha512-eIRpEW73DCzPIMaNBDP5pPIpK1KXyZwNgfxiVagb5iGiz6da+9A5hslSX6GAQKdO7SayVCS/Fr2kjqprgAvkfA==
14 | dependencies:
15 | "@types/react" "*"
16 |
17 | "@types/react@*", "@types/react@^16.8.16":
18 | version "16.8.16"
19 | resolved "https://registry.npmjs.org/@types/react/-/react-16.8.16.tgz#2bf980b4fb29cceeb01b2c139b3e185e57d3e08e"
20 | integrity sha512-A0+6kS6zwPtvubOLiCJmZ8li5bm3wKIkoKV0h3RdMDOnCj9cYkUnj3bWbE03/lcICdQmwBmUfoFiHeNhbFiyHQ==
21 | dependencies:
22 | "@types/prop-types" "*"
23 | csstype "^2.2.0"
24 |
25 | csstype@^2.2.0:
26 | version "2.6.4"
27 | resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.4.tgz#d585a6062096e324e7187f80e04f92bd0f00e37f"
28 | integrity sha512-lAJUJP3M6HxFXbqtGRc0iZrdyeN+WzOWeY0q/VnFzI+kqVrYIzC7bWlKqCW7oCIdzoPkvfp82EVvrTlQ8zsWQg==
29 |
--------------------------------------------------------------------------------
/packages/docs/.env:
--------------------------------------------------------------------------------
1 | SKIP_PREFLIGHT_CHECK=true
2 | # NODE_PATH=src
--------------------------------------------------------------------------------
/packages/docs/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
25 | .now
--------------------------------------------------------------------------------
/packages/docs/now.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 2,
3 | "name": "developer",
4 | "alias": ["developer.dashboard-ui.com"],
5 | "builds": [
6 | {
7 | "src": "build/**/*",
8 | "use": "@now/static"
9 | }
10 | ],
11 | "routes": [
12 | {
13 | "src": "/static/(.*)",
14 | "headers": {
15 | "cache-control": "s-maxage=31536000,immutable"
16 | },
17 | "dest": "/build/static/$1"
18 | },
19 | {
20 | "src": "/favicon.ico",
21 | "dest": "/build/favicon.ico"
22 | },
23 | {
24 | "src": "/asset-manifest.json",
25 | "dest": "/build/asset-manifest.json"
26 | },
27 | {
28 | "src": "/manifest.json",
29 | "dest": "/build/manifest.json"
30 | },
31 | {
32 | "src": "/precache-manifest.(.*)",
33 | "dest": "/build/precache-manifest.$1"
34 | },
35 | {
36 | "src": "/service-worker.js",
37 | "headers": {
38 | "cache-control": "s-maxage=0"
39 | },
40 | "dest": "/build/service-worker.js"
41 | },
42 | {
43 | "src": "/(.*)",
44 | "headers": {
45 | "cache-control": "s-maxage=0"
46 | },
47 | "dest": "/build/$1"
48 | }
49 | ]
50 | }
51 |
--------------------------------------------------------------------------------
/packages/docs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/docs",
3 | "version": "0.6.0",
4 | "private": true,
5 | "dependencies": {
6 | "@duik/core": "^0.6.0",
7 | "@duik/create-simple-component": "^0.6.0",
8 | "@duik/icon": "^0.6.0",
9 | "@duik/it": "^0.6.0",
10 | "@duik/utils": "^0.6.0",
11 | "react-helmet": "^5.2.1"
12 | },
13 | "scripts": {
14 | "start": "../../node_modules/.bin/react-scripts start",
15 | "build": "../../node_modules/.bin/react-scripts build",
16 | "test": "../../node_modules/.bin/react-scripts test",
17 | "eject": "../../node_modules/.bin/react-scripts eject",
18 | "predeploy": "yarn build",
19 | "postbuild": "react-snap",
20 | "deploy": "yarn build && now --prod"
21 | },
22 | "eslintConfig": {
23 | "extends": "react-app"
24 | },
25 | "browserslist": [
26 | ">0.2%",
27 | "not dead",
28 | "not ie <= 11",
29 | "not op_mini all"
30 | ],
31 | "homepage": "https://developer.dashboard-ui.com",
32 | "devDependencies": {
33 | "react-snap": "^1.23.0"
34 | },
35 | "reactSnap": {
36 | "asyncScriptTags": true
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/docs/public/OGDocumentation.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/public/OGDocumentation.jpg
--------------------------------------------------------------------------------
/packages/docs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/public/favicon.ico
--------------------------------------------------------------------------------
/packages/docs/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/packages/docs/src/App.test.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./App";
4 |
5 | it("renders without crashing", () => {
6 | const div = document.createElement("div");
7 | ReactDOM.render(
14 |
19 |
22 |
23 | );
24 | };
25 |
26 | export default App;
27 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/Alert/PropTable.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { PropTable, properties } from '../../components';
4 |
5 | const itemProps = [
6 | properties.children(),
7 | properties.className(),
8 | properties.bool({
9 | prop: 'primary',
10 | desc: 'Has blue color',
11 | }),
12 | properties.bool({
13 | prop: 'danger',
14 | desc: 'Has red color',
15 | }),
16 | properties.bool({
17 | prop: 'success',
18 | desc: 'Has green color',
19 | }),
20 | properties.bool({
21 | prop: 'warning',
22 | desc: 'Has orange color',
23 | }),
24 | properties.children({
25 | prop: 'leftEl',
26 | desc: 'Renders node on the left side e.g. some icon',
27 | }),
28 | properties.children({
29 | prop: 'rightEl',
30 | desc: 'Renders node on the right side, e.g. close button',
31 | }),
32 | properties.rest(),
33 | ];
34 |
35 | export const ReactDocsButton = () => {
36 | return (
37 | <>
38 | Prop table
39 | Prop table
41 | Prop table
27 | Prop table
30 |
16 | Checkbox
23 | Who doesn't like customized checkboxes?
25 |
26 | Basic Usage
27 |
28 |
52 | );
53 | };
54 |
55 | export default ReactDocsButton;
56 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/ContainerHorizontal/PropTable.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export const ReactDocsButton = () => {
4 | return (
5 | <>
6 | Prop table
7 |
8 | Any props you would pass to div.
9 |
10 |
11 | );
12 | };
13 |
14 | export default ReactDocsButton;
15 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/ContainerVertical/PropTable.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export const ReactDocsButton = () => {
4 | return (
5 | <>
6 | Prop table
7 |
8 | Any props you would pass to div.
9 |
10 |
11 | );
12 | };
13 |
14 | export default ReactDocsButton;
15 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/Icon/PropTable.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { PropTable, properties } from '../../components';
4 |
5 | const itemProps = [
6 | properties.className(),
7 | {
8 | prop: 'children',
9 | propType: 'string',
10 | required: false,
11 | defaultValue: null,
12 | desc: 'Icon name, see list below',
13 | },
14 | {
15 | prop: 'mr',
16 | propType: 'boolean',
17 | required: false,
18 | defaultValue: null,
19 | desc:
20 | 'Adds right margin, useful when icon is next to the text, e.g. in button',
21 | },
22 | {
23 | prop: 'ml',
24 | propType: 'boolean',
25 | required: false,
26 | defaultValue: null,
27 | desc: 'Adds left margin',
28 | },
29 | properties.rest({
30 | desc: 'Other properties are passed to the i element',
31 | }),
32 | ];
33 |
34 | export const ReactDocsButton = () => {
35 | return (
36 | <>
37 | Prop table
38 | NavLink Props
55 | NavPanel Props
28 | Prop table
7 |
8 | Any props you would pass to div.
9 |
10 |
11 | );
12 | };
13 |
14 | export default ReactDocsButton;
15 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/NavSectionTitle/PropTable.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export const ReactDocsNavSectionTitle = () => {
4 | return (
5 | <>
6 | Prop table
7 |
8 | Any props you would pass to span.
9 |
10 |
11 | );
12 | };
13 |
14 | export default ReactDocsNavSectionTitle;
15 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/NavTitle/PropTable.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export const ReactDocsNavTitle = () => {
4 | return (
5 | <>
6 | Prop table
7 |
8 | Any props you would pass to span.
9 |
10 |
11 | );
12 | };
13 |
14 | export default ReactDocsNavTitle;
15 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/OuterEventsHandler/PropTable.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { PropTable, properties } from '../../components';
4 |
5 | const itemProps = [
6 | properties.className(),
7 | properties.children(),
8 | {
9 | prop: 'onOuterEvent',
10 | propType: '(e: Event) => void',
11 | desc: 'Function which will be triggered when event occurs.',
12 | },
13 | properties.bool({
14 | prop: 'triggerOnOuterScroll',
15 | desc: 'If true, onOuterEvent will be triggered on window scroll event.',
16 | }),
17 | properties.bool({
18 | prop: 'triggerOnWindowResize',
19 | desc: 'If true, onOuterEvent will be triggered on window resize event.',
20 | }),
21 | properties.bool({
22 | prop: 'triggerOnOuterClick',
23 | desc: 'If true, onOuterEvent will be triggered on document click event.',
24 | defaultValue: 'true',
25 | }),
26 | properties.bool({
27 | prop: 'triggerOnOuterFocus',
28 | desc: 'If true, onOuterEvent will be triggered on document focus event.',
29 | defaultValue: 'true',
30 | }),
31 | properties.bool({
32 | prop: 'triggerOnEsc',
33 | desc: 'If true, onOuterEvent will be triggered on document keydown event.',
34 | defaultValue: 'true',
35 | }),
36 | properties.rest({
37 | desc: <>Other properties are passed down to the wrapping div element,
38 | }),
39 | ];
40 |
41 | export const ReactDocsButton = () => {
42 | return (
43 | <>
44 | Prop table
45 |
8 | Dashboard UI Kit
17 | Overview
18 | Key Features
19 | Design
20 | Composability
21 | Developer Experience
22 | Easy to modify
23 | Design Patters
24 |
25 | );
26 | };
27 |
28 | export default ReactDocsOuterEventsHandler;
29 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/Progress/PropTable.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { PropTable, properties } from '../../components';
4 |
5 | // highlighted,
6 | // leftEl,
7 | // pill,
8 | // secondary,
9 |
10 | const itemProps = [
11 | properties.children(),
12 | properties.className(),
13 | {
14 | prop: 'fill',
15 | propType: 'number',
16 | desc: 'Range from 0 to 1',
17 | },
18 | {
19 | prop: 'fills',
20 | propType: 'number[]',
21 | desc:
22 | 'Array of numbers with range from 0 to 1. Fills are rendered with priority over "fill" property.',
23 | },
24 | properties.bool({
25 | prop: 'lg',
26 | desc: 'Renders thicker bar (8px instead of 4px)',
27 | }),
28 | properties.rest({}),
29 | ];
30 |
31 | export const PropTableProgress = () => {
32 | return (
33 | <>
34 | NavLink Props
35 |
16 | Progress
23 | Simple usage of progress bars! Input values from 0 to 1
26 |
27 | Basic Usage
28 |
38 | );
39 | };
40 |
41 | export default ReactDocsNavLink;
42 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/Radio/PropTable.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { PropTable, properties } from '../../components';
4 |
5 | const itemProps = [
6 | properties.className(),
7 | {
8 | prop: 'label',
9 | propType: 'React.ReactNode',
10 | required: false,
11 | defaultValue: null,
12 | desc: 'Label text or node',
13 | },
14 | {
15 | prop: 'description',
16 | propType: 'React.ReactNode',
17 | required: false,
18 | defaultValue: null,
19 | desc: 'Label text or node',
20 | },
21 | properties.rest({
22 | desc: 'Other properties are passed to the input element',
23 | }),
24 | ];
25 |
26 | export const ReactDocsButton = () => {
27 | return (
28 | <>
29 | Prop table
30 | Prop table
7 |
8 | Any props you would pass to div.
9 |
10 |
11 | );
12 | };
13 |
14 | export default ReactDocsButton;
15 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/ScrollArea/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Link } from "react-router-dom";
3 | import { ScrollArea } from "@duik/it";
4 | import { H1 } from "components";
5 | import { DocsContentPage, ExampleTable, ImportPath } from "../../components";
6 |
7 | import PropTable from "./PropTable";
8 |
9 | export const ReactDocsScrollArea = () => {
10 | return (
11 |
12 | ScrollArea
13 |
16 | A shorthand for overflow-y: auto with some extra properties
17 | to make sure that your scroll area will work inside flexboxes. You can
18 | check example usage on the{" "}
19 |
24 |
25 |
30 |
31 |
32 |
33 |
34 |
35 | )
36 | }
37 | ]}
38 | />
39 |
40 |
42 | );
43 | };
44 |
45 | export default ReactDocsScrollArea;
46 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/Select/ExampleSelectBasic.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Select } from '@duik/it';
3 |
4 | export const ExampleSelectBasic = () => {
5 | return (
6 | Highlighted Option, value: 3 },
12 | { label: Highlighted Long Long Option , value: 4 },
13 | ]}
14 | />
15 | );
16 | };
17 |
18 | export const ExampleSelectBasicCode = `import React from 'react'
19 | import { Select } from '@duik/it'
20 |
21 | export const ExampleSelectBasic = () => {
22 | const [activeOption, setActiveOption] = React.useState()
23 |
24 | /*
25 | * we don't need the "name", but it cannot be passed to
26 | * the useState setter, thus the setter cannot be used directly
27 | */
28 | const handleOptionClick = (option, name ) => {
29 | setActiveOption(option)
30 | }
31 | return (
32 | Highlighted Option, value: 3 },
39 | { label: Highlighted Long Long Option , value: 4 },
40 | ]}
41 | />
42 | )
43 | }`;
44 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/Select/ExampleSelectItemProps.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Select } from '@duik/it';
3 |
4 | export const ExampleSelectItemProps = () => {
5 | return (
6 | ,
11 | // onDateChange?: DatepickerOnChangeRange,
12 | // minDate?: Date,
13 | // maxDate?: Date,
14 | // initialVisibleDate?: Date,
15 | // weekdayOffset?: number,
16 |
17 | const itemProps = [
18 | {
19 | prop: 'placeholder',
20 | propType: 'React.ReactNode',
21 | required: false,
22 | },
23 | {
24 | prop: 'label',
25 | propType: 'React.ReactNode',
26 | required: false,
27 | desc: 'Label to be displayed above the select.',
28 | },
29 | {
30 | prop: Props
49 |
23 |
50 |
51 | {name}
52 |
53 |
54 | {color}
55 |
56 |
20 | {children}
21 |
22 | )
23 |
24 | ComponentTitle.defaultProps = {
25 | className: null,
26 | }
27 |
28 | export default ComponentTitle
29 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/Styleguide/components/Content.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import classnames from 'classnames'
3 |
4 | import cls from './styleguide.module.scss'
5 |
6 | type StyleguideContentType = {
7 | className?: string,
8 | Component?: React.ComponentType,
9 | children: React.ReactNode
10 | }
11 |
12 | const StyleguideContent = ({
13 | className,
14 | Component,
15 | children,
16 | ...rest
17 | }: StyleguideContentType) => (
18 |
22 | {children}
23 |
24 | )
25 |
26 | StyleguideContent.defaultProps = {
27 | className: null,
28 | }
29 |
30 | export default StyleguideContent
31 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/Styleguide/components/TopBar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import classnames from 'classnames'
3 |
4 | import cls from './styleguide.module.scss'
5 |
6 | import Content from './Content'
7 |
8 | type StyleguideTopBarType = {
9 | className?: string,
10 | children: React.ReactNode
11 | }
12 |
13 | const StyleguideTopBar = ({
14 | className,
15 | children,
16 | ...rest
17 | }: StyleguideTopBarType) => (
18 |
22 |
23 | {children}
24 |
25 |
26 | )
27 |
28 | StyleguideTopBar.defaultProps = {
29 | className: null,
30 | }
31 |
32 | export default StyleguideTopBar
33 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/Styleguide/components/TopBarTitle.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import {camelToSnake} from 'utils/camelToSnake'
4 |
5 | import cls from './styleguide.module.scss'
6 |
7 | const StyleguideTopBarTitle = ({
8 | to,
9 | children,
10 | name,
11 | ...rest
12 | }: {
13 | to: string,
14 | children?: React.ReactNode,
15 | name?: string
16 | }) => (to ? (
17 |
18 |
26 | {children}
27 | {
28 | name && (
29 |
30 | {`<${name} />`}
31 |
32 | )
33 | }
34 |
35 |
36 | ) : (
37 |
38 |
42 | {children}
43 | {
44 | name && (
45 |
46 | {`<${name} />`}
47 |
48 | )
49 | }
50 |
51 | )
52 | )
53 |
54 | StyleguideTopBarTitle.defaultProps = {
55 | to: null,
56 | children: null,
57 | name: null,
58 | }
59 |
60 | export default StyleguideTopBarTitle
61 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/Styleguide/components/base.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import classnames from 'classnames'
3 |
4 | import cls from './styleguide.module.scss'
5 |
6 | type StyleguideTopBarType = {
7 | className?: string,
8 | children: React.ReactNode
9 | }
10 |
11 | const StyleguideTopBar = ({
12 | className,
13 | children,
14 | ...rest
15 | }: StyleguideTopBarType) => (
16 |
20 | {children}
21 |
22 | )
23 |
24 | StyleguideTopBar.defaultProps = {
25 | className: null,
26 | }
27 |
28 | export default StyleguideTopBar
29 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/Styleguide/sections/styleguide-buttons.module.scss:
--------------------------------------------------------------------------------
1 | .btnGroup {
2 | display: flex;
3 | margin: -8px;
4 | & > * {
5 | margin: 8px;
6 | flex-grow: 1;
7 | }
8 | }
9 |
10 | .groupDivider,
11 | .inputGrid {
12 | display: flex;
13 | margin: -15px;
14 | flex-wrap: wrap;
15 | & > * {
16 | margin: 15px;
17 | }
18 | }
19 |
20 | .inputGrid {
21 | & > * {
22 | min-width: 240px;
23 | }
24 | }
25 |
26 | .avatarGroup {
27 | display: flex;
28 | align-items: flex-end;
29 | justify-content: flex-start;
30 | margin: 0 -15px;
31 | padding-top: 14px;
32 | & > * {
33 | margin: 0 15px;
34 | }
35 | }
36 |
37 | .avatarWrapper {
38 | display: flex;
39 | flex-direction: column;
40 | align-items: center;
41 | p {
42 | margin-top: 16px;
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/Styleguide/sections/styleguide-checkboxes.module.scss:
--------------------------------------------------------------------------------
1 | .grid {
2 | display: grid;
3 | grid-template-columns: auto auto auto;
4 | grid-column-gap: 30px;
5 | grid-row-gap: 20px;
6 | }
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/Styleguide/styleguide.module.scss:
--------------------------------------------------------------------------------
1 | .colorSchemeGrid,
2 | .colorSchemeGridSmall {
3 | display: flex;
4 | flex-wrap: wrap;
5 | margin: 0 -15px;
6 | & > * {
7 | flex-basis: calc(33% - 30px);
8 | margin: 10px 15px;
9 | }
10 | }
11 | .colorSchemeGridSmall {
12 | & > * {
13 | flex-basis: calc(20% - 30px);
14 | margin: 10px 15px;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/TabItem/PropTable.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Link } from 'react-router-dom';
3 |
4 | import { PropTable, properties } from '../../components';
5 |
6 | // leftEl,
7 | // rightEl,
8 |
9 | const itemProps = [
10 | properties.className(),
11 | properties.children({
12 | desc: (
13 | <>
14 | Children nodes, e.g. Prop table
38 | Prop table
45 | Prop table
42 | Prop table
30 |
16 | Toggle
23 |
25 | Toggles work the same way as checkboxes, e.g. you can group them with
26 | "name" property in your forms.
27 |
28 |
29 | Basic Usage
30 |
31 |
47 | );
48 | };
49 |
50 | export default ReactDocsButton;
51 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/TopBar/PropTable.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export const ReactDocsTopBar = () => {
4 | return (
5 | <>
6 | Props
7 |
8 | Any props you would pass to {`.
9 |
10 |
11 | );
12 | };
13 |
14 | export default ReactDocsTopBar;
15 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/TopBar/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Link } from "react-router-dom";
3 | import { H1 } from "components";
4 | import { TopBar, TopBarSection, TopBarTitle } from "@duik/it";
5 | import {
6 | DocsContentPage,
7 | ExampleTable,
8 | ImportPath,
9 | PageContent
10 | } from "../../components";
11 |
12 | import PropTable from "./PropTable";
13 |
14 | export const ReactDocsTopBar = () => {
15 | return (
16 |
17 | TopBar
24 |
27 | Prestyled component for your apps top bar. Check the full usage on{" "}
28 |
30 |
31 |
36 |
37 | Title
38 |
39 |
40 | )
41 | }
42 | ]}
43 | />
44 |
45 |
47 | );
48 | };
49 |
50 | export default ReactDocsTopBar;
51 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/TopBarLink/PropTable.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { PropTable, properties } from '../../components';
4 |
5 | const itemProps = [
6 | properties.children(),
7 | properties.className(),
8 | properties.Component({
9 | defaultValue: '"a"',
10 | }),
11 | properties.rest({
12 | desc: (
13 | <>
14 | Any props you would pass to {``} or a "Component" prop.
15 |
16 | ),
17 | }),
18 | ];
19 |
20 | export const ReactDocsTopBarLink = () => {
21 | return (
22 | <>
23 | Prop table
24 | Props
7 |
8 | Any props you would pass to {``} .
9 |
10 |
11 | );
12 | };
13 |
14 | export default ReactDocsTopBar;
15 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/TopBarSection/PropTable.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export const ReactDocsTopBar = () => {
4 | return (
5 | <>
6 | Props
7 |
8 | Any props you would pass to div.
9 |
10 |
11 | );
12 | };
13 |
14 | export default ReactDocsTopBar;
15 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/TopBarTitle/PropTable.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export const ReactDocsTopBar = () => {
4 | return (
5 | <>
6 | Props
7 |
8 | Any props you would pass to {``} .
9 |
10 |
11 | );
12 | };
13 |
14 | export default ReactDocsTopBar;
15 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/TopBarTitle/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Link } from "react-router-dom";
3 | import { H1 } from "components";
4 | import { TopBar, TopBarSection, TopBarTitle } from "@duik/it";
5 | import {
6 | DocsContentPage,
7 | ExampleTable,
8 | ImportPath,
9 | PageContent
10 | } from "../../components";
11 |
12 | import PropTable from "./PropTable";
13 |
14 | export const ReactDocsTopBarTitle = () => {
15 | return (
16 |
17 | TopBarTitle
24 |
27 | Prestyled title for top bar. Check the full usage on{" "}
28 |
32 |
33 |
38 |
39 | Title
40 |
41 |
42 | )
43 | }
44 | ]}
45 | />
46 |
47 |
49 | );
50 | };
51 |
52 | export default ReactDocsTopBarTitle;
53 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/React/UseInCreateReactApp/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { DocsContentPage, PageContent } from "../../components";
3 |
4 | import { H1 } from "components";
5 |
6 | export const UseInCreateReactApp = () => {
7 | return (
8 |
9 | Using @duik with create-react-app
16 |
17 | );
18 | };
19 |
20 | export default UseInCreateReactApp;
21 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/TopBar/topbar.module.scss:
--------------------------------------------------------------------------------
1 | @import '@duik/core/_vars.scss';
2 | .docsTopBar {
3 | --bg-main: #252529;
4 | --bg-base: #2c2c31;
5 | --border-color-base: #34343a;
6 | --border-color-main: #44444e;
7 | --text-base: #ccc;
8 | --text-main: #ddd;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/components/DocsContentPage.tsx:
--------------------------------------------------------------------------------
1 | import { createSimpleComponent } from "@duik/it";
2 |
3 | import cls from "./docspage.module.scss";
4 |
5 | export const DocsContentPage = createSimpleComponent({
6 | displayName: "DocsContentPage",
7 | Component: "div",
8 | className: cls.content
9 | });
10 |
11 | export const DocsSection = createSimpleComponent({
12 | displayName: "DocsSection",
13 | Component: "div",
14 | className: cls.section
15 | });
16 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/components/ImportPath.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { camelToSnake, combineText } from "utils";
3 |
4 | export type ImportPathProps = {
5 | name: string;
6 | isIncludedInKit?: boolean;
7 | subComponents?: string[];
8 | };
9 |
10 | export const ImportPath = (props: ImportPathProps) => {
11 | const { name, subComponents, isIncludedInKit = true } = props;
12 |
13 | return (
14 |
15 | {isIncludedInKit ? (
16 | <>
17 | {`import { ${name}${
18 | subComponents ? `, ${combineText(subComponents, ", ")}` : ""
19 | } } from '@duik/it'`}
20 | {`import ${name}${
24 | subComponents ? `, { ${combineText(subComponents, ", ")} } ` : ""
25 | } from '@duik/${camelToSnake(name)}'`}
26 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/components/PageContent.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Link } from "react-router-dom";
3 | import cls from "./docspage.module.scss";
4 |
5 | type PageContentProps = {
6 | data: {
7 | id: string;
8 | label: React.ReactNode;
9 | }[];
10 | };
11 |
12 | export const PageContent = (props: PageContentProps) => {
13 | const { data } = props;
14 |
15 | return (
16 |
17 |
18 | Table of contents
19 | {data.map(item => (
20 |
21 |
23 | ))}
24 |
25 |
19 | );
20 | };
21 |
22 | PageMock.displayName = 'PageMock';
23 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/components/Table.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import cls from './docspage.module.scss';
3 | import { Widget, WidgetTable } from '@duik/it/index';
4 |
5 | export type DocsTableProps = {
6 | children: React.ReactNode;
7 | fixed?: boolean;
8 | };
9 |
10 | export const DocsTable = (props: DocsTableProps) => {
11 | const { children } = props;
12 |
13 | return (
14 |
15 |
16 | {children}
17 |
18 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./PropTable";
2 | export * from "./properties";
3 | export * from "./DocsContentPage";
4 | export * from "./ExampleTable";
5 | export * from "./PageContent";
6 | export * from "./ImportPath";
7 | export * from "./PageMock";
8 | export * from "./Table";
9 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/components/types.ts:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export type ReactDocsProperty = {
4 | prop: React.ReactNode;
5 | propType?: React.ReactNode;
6 | required?: boolean;
7 | defaultValue?: any;
8 | desc?: React.ReactNode;
9 | };
10 |
--------------------------------------------------------------------------------
/packages/docs/src/Docs/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { RouteComponentProps, Switch, Route, Redirect } from 'react-router-dom';
3 | import { Helmet } from 'react-helmet';
4 | import { ContainerVertical } from '@duik/it';
5 |
6 | import { DocsTopBar } from './TopBar';
7 |
8 | import DocsReact from './React';
9 |
10 | export const Docs = (props: RouteComponentProps) => {
11 | const { match } = props;
12 |
13 | return (
14 | <>
15 |
20 |
22 |
25 |
26 |
27 | );
28 | };
29 |
30 | export default Docs;
31 |
--------------------------------------------------------------------------------
/packages/docs/src/assets/a01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a01.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a02.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a03.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a04.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a05.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a06.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a07.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a07.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a08.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a08.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a09.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a09.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a10.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a11.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a12.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a13.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a14.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a15.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a16.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a17.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a17.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a18.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a18.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a19.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a19.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a20.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a20.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a21.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a21.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a22.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a22.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a23.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a23.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a24.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a24.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a25.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a25.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a26.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a26.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a27.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a27.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a28.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a28.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a29.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a29.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a30.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a30.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a31.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a31.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/a32.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/a32.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b01.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b02.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b03.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b04.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b05.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b06.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b07.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b07.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b08.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b08.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b09.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b09.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b10.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b100.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b100.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b101.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b101.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b102.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b102.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b103.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b103.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b104.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b104.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b105.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b105.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b11.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b12.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b13.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b14.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b15.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b16.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b17.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b17.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b18.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b18.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b19.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b19.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b20.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b20.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b21.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b21.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b22.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b22.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b23.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b23.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b24.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b24.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b25.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b25.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/b26.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/b26.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/buildings/map.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/buildings/map.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/flag01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/flag01.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/flags/Czechia.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/flags/Czechia.png
--------------------------------------------------------------------------------
/packages/docs/src/assets/flags/France.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/flags/France.png
--------------------------------------------------------------------------------
/packages/docs/src/assets/flags/Ireland.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/flags/Ireland.png
--------------------------------------------------------------------------------
/packages/docs/src/assets/flags/Norway.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/flags/Norway.png
--------------------------------------------------------------------------------
/packages/docs/src/assets/flags/Tuvalu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/flags/Tuvalu.png
--------------------------------------------------------------------------------
/packages/docs/src/assets/flags/Uk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/flags/Uk.png
--------------------------------------------------------------------------------
/packages/docs/src/assets/pl01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/pl01.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/jpegs/s01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/jpegs/s01.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/jpegs/s02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/jpegs/s02.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/jpegs/s03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/jpegs/s03.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/jpegs/s04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/jpegs/s04.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/jpegs/s05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/jpegs/s05.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/jpegs/s06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/jpegs/s06.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/jpegs/s07.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/jpegs/s07.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/jpegs/s08.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/jpegs/s08.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/jpegs/s09.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/jpegs/s09.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/original/4a075a428e564d7a47e3a41525d455a7495f847f.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/original/4a075a428e564d7a47e3a41525d455a7495f847f.png
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/original/s01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/original/s01.png
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/original/s02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/original/s02.png
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/original/s03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/original/s03.png
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/original/s04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/original/s04.png
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/original/s05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/original/s05.png
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/original/s06.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/original/s06.png
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/original/s07.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/original/s07.png
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/original/s08.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/original/s08.png
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/original/s09.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/original/s09.png
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/s01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/s01.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/s02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/s02.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/s03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/s03.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/s04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/s04.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/s05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/s05.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/s06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/s06.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/s07.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/s07.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/s08.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/s08.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/social/s09.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/social/s09.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/t01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/t01.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/t02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/t02.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/t03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/t03.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/t04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/t04.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/t05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/t05.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/t06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/t06.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/ua01.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Comment
5 | Created with Sketch.
6 |
7 |
8 |
11 |
12 |
13 |
19 |
20 |
--------------------------------------------------------------------------------
/packages/docs/src/assets/ua02.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Like
5 | Created with Sketch.
6 |
7 |
8 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/packages/docs/src/assets/vt01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/vt01.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/vt02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/vt02.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/vt03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/vt03.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/vt04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/vt04.jpg
--------------------------------------------------------------------------------
/packages/docs/src/assets/vt05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/march08/dashboard-ui-kit/f69f2c5047f25f084ea27f99f8a55e6e03ef9ecf/packages/docs/src/assets/vt05.jpg
--------------------------------------------------------------------------------
/packages/docs/src/components/Code/code.module.scss:
--------------------------------------------------------------------------------
1 | .code-wrapper {
2 | position: relative;
3 | }
4 |
5 | .button-copy {
6 | position: absolute;
7 | top: 0;
8 | right: 0;
9 | color: rgb(128, 128, 128) !important;
10 | opacity: .3;
11 |
12 | &:hover {
13 | opacity: 7;
14 | }
15 | }
--------------------------------------------------------------------------------
/packages/docs/src/components/CodeExample/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import classnames from "classnames";
3 | import cls from "./styles.module.scss";
4 | import { Button } from "@duik/it";
5 | import { jsxToString } from "utils";
6 |
7 | import { Code } from "components";
8 |
9 | type CodeExampleProps = {
10 | children: React.ReactNode;
11 | code?: string;
12 | bgLight?: boolean;
13 | };
14 |
15 | export const CodeExample = (props: CodeExampleProps) => {
16 | const { bgLight } = props;
17 | const [visible, setVisible] = React.useState(false);
18 |
19 | return (
20 |
21 |
26 | {props.children}
27 |
28 |
29 |
30 | setVisible(!visible)} xs transparent>
31 | {visible ? "Hide" : "Show code"}
32 |
33 |
34 | {visible &&
{props.code || jsxToString(props.children)}}
35 |
36 |
9 | {children}
10 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/packages/docs/src/components/H1.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 |
4 | export const H1 = (
5 | props: JSX.IntrinsicElements['h1'] & { metaTitle?: string },
6 | ) => {
7 | const { children, metaTitle, ...rest } = props;
8 | return (
9 | <>
10 | {(typeof children === 'string' || metaTitle) && (
11 |
12 | {typeof children === 'string' ? children : metaTitle}
13 |
14 | )}
15 | {children}
16 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/packages/docs/src/components/PageScroll/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { withRouter, RouteComponentProps } from 'react-router-dom';
3 | import classnames from 'classnames';
4 |
5 | import cls from './page-scroll.module.scss';
6 |
7 | export type PageScroll = JSX.IntrinsicElements['div'];
8 |
9 | const PageScrollBase = (props: PageScroll & RouteComponentProps) => {
10 | const { history, staticContext, match, location, className, ...rest } = props;
11 |
12 | const ref = React.createRef();
13 | React.useEffect(() => {
14 | if (location.hash) {
15 | const targetEl = document.getElementById(location.hash.replace('#', ''));
16 |
17 | if (targetEl && ref.current) {
18 | const targetRect = targetEl.getBoundingClientRect();
19 | ref.current.scrollTo(0, ref.current.scrollTop + targetRect.top - 50);
20 | }
21 | }
22 | }, [location.key, location.hash, ref]);
23 |
24 | return (
25 |
30 | );
31 | };
32 |
33 | export const PageScroll = withRouter(PageScrollBase);
34 |
--------------------------------------------------------------------------------
/packages/docs/src/components/PageScroll/page-scroll.module.scss:
--------------------------------------------------------------------------------
1 | .pagescroll {
2 | flex-grow: 1;
3 | overflow-y: auto;
4 | -webkit-overflow-scrolling: touch;
5 | scroll-behavior: smooth;
6 | padding-left: 100vw;
7 | padding-right: 100vw;
8 | margin-left: -100vw;
9 | margin-right: -100vw;
10 | width: 100%;
11 | }
12 |
--------------------------------------------------------------------------------
/packages/docs/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './PageScroll';
2 | export * from './Code';
3 | export * from './CodeRH';
4 | export * from './H1';
5 | export * from './CodeExample';
6 | export * from './ExtLink';
7 |
--------------------------------------------------------------------------------
/packages/docs/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import App from "./App";
3 | import * as serviceWorker from "./serviceWorker";
4 |
5 | import { hydrate, render } from "react-dom";
6 |
7 | const rootElement = document.getElementById("root");
8 | if (rootElement!.hasChildNodes()) {
9 | hydrate((objectKey: keyof O) => (a: O, b: O) =>
8 | sortString(`${a[objectKey]}`, `${b[objectKey]}`);
9 |
--------------------------------------------------------------------------------
/packages/docs/src/utils/useInputControls.ts:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | export const useInputControls = (defaultValue: string = "") => {
4 | const [value, setVaue] = useState(defaultValue);
5 |
6 | const onChange = (e: React.FocusEvent) => {
7 | setVaue(e.target.value);
8 | };
9 |
10 | const resetValue = () => {
11 | setVaue("");
12 | };
13 | return {
14 | onChange,
15 | resetValue,
16 | value,
17 | setVaue
18 | };
19 | };
20 |
21 | export default useInputControls;
22 |
--------------------------------------------------------------------------------
/packages/docs/src/utils/useLocalStorage.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const useLocalStorage = (key: string, initialValue: V) => {
4 | // State to store our value
5 | // Pass initial state function to useState so logic is only executed once
6 | const [storedValue, setStoredValue] = React.useState(() => {
7 | try {
8 | // Get from local storage by key
9 | const item = window.localStorage.getItem(key);
10 | // Parse stored json or if none return initialValue
11 | return item ? JSON.parse(item) : initialValue;
12 | } catch (error) {
13 | // If error also return initialValue
14 | console.log(error);
15 | return initialValue;
16 | }
17 | });
18 |
19 | // Return a wrapped version of useState's setter function that ...
20 | // ... persists the new value to localStorage.
21 | const setValue = (value: V) => {
22 | try {
23 | // Allow value to be a function so we have same API as useState
24 | const valueToStore =
25 | value instanceof Function ? value(storedValue) : value;
26 | // Save state
27 | setStoredValue(valueToStore);
28 | // Save to local storage
29 | window.localStorage.setItem(key, JSON.stringify(valueToStore));
30 | } catch (error) {
31 | // A more advanced implementation would handle the error case
32 | console.log(error);
33 | }
34 | };
35 |
36 | return [storedValue, setValue];
37 | };
38 |
--------------------------------------------------------------------------------
/packages/docs/tsconfig-paths.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "./src", // This must be specified if "paths" is.
4 | "paths": {
5 | "components": [
6 | "components"
7 | ],
8 | "components/*": [
9 | "components/*"
10 | ],
11 | "Docs/*": [
12 | "Docs/*"
13 | ],
14 | "helpers/*": [
15 | "helpers/*"
16 | ],
17 | "helpers": [
18 | "helpers"
19 | ],
20 | "composed/*": [
21 | "composed/*"
22 | ],
23 | "composed": [
24 | "composed"
25 | ],
26 | "hooks/*": [
27 | "hooks/*"
28 | ],
29 | "hooks": [
30 | "hooks"
31 | ],
32 | "assets": [
33 | "assets"
34 | ]
35 | }
36 | }
37 | }
--------------------------------------------------------------------------------
/packages/docs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig-paths.json",
3 | "compilerOptions": {
4 | "baseUrl": "./src",
5 | "target": "es5",
6 | "lib": [
7 | "dom",
8 | "dom.iterable",
9 | "esnext"
10 | ],
11 | "allowJs": true,
12 | "skipLibCheck": true,
13 | "esModuleInterop": true,
14 | "allowSyntheticDefaultImports": true,
15 | "strict": true,
16 | "forceConsistentCasingInFileNames": true,
17 | "module": "esnext",
18 | "moduleResolution": "node",
19 | "resolveJsonModule": true,
20 | "isolatedModules": true,
21 | "noEmit": true,
22 | "jsx": "preserve"
23 | },
24 | "include": [
25 | "src"
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------
/packages/kit/cssbundle.js:
--------------------------------------------------------------------------------
1 | import './styles.scss';
2 |
--------------------------------------------------------------------------------
/packages/module.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.module.css';
2 |
3 | declare module '*.module.scss';
4 |
5 | declare module '*.module.sass';
6 |
7 | declare module '*.css';
8 |
9 | declare module '*.scss';
10 |
11 | declare module '*.sass';
--------------------------------------------------------------------------------
/packages/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "skipLibCheck": true,
10 | "allowSyntheticDefaultImports": true,
11 | "module": "esnext",
12 | "noImplicitAny": true,
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "strictNullChecks": true,
16 | "declaration": true,
17 | "noEmit": false,
18 | "jsx": "react",
19 | "typeRoots": [
20 | "src/index.d.ts",
21 | "node_modules/@types"
22 | ]
23 | },
24 | "exclude": [
25 | "node_modules",
26 | "./docs/*"
27 | ]
28 | }
--------------------------------------------------------------------------------
/packages/useOpenState/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export type OpenStateControls = {
4 | isOpen: boolean;
5 | handleClose: () => void;
6 | handleOpen: () => void;
7 | handleToggle: () => void;
8 | setOpenState: React.Dispatch>;
9 | };
10 |
11 | export const useOpenState = (
12 | isOpenDefaultState: boolean = false
13 | ): OpenStateControls => {
14 | const [isOpen, setOpenState] = React.useState(isOpenDefaultState);
15 |
16 | const handleClose = () => setOpenState(false);
17 | const handleOpen = () => setOpenState(true);
18 | const handleToggle = () => setOpenState(!isOpen);
19 |
20 | return {
21 | isOpen,
22 | setOpenState,
23 | handleClose,
24 | handleOpen,
25 | handleToggle
26 | };
27 | };
28 |
--------------------------------------------------------------------------------
/packages/useOpenState/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/use-open-state",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Open State Hook",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "gitHead": "7eed8237276864892b18bf2999daaf73ffc04739"
20 | }
21 |
--------------------------------------------------------------------------------
/packages/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from "@duik/use-open-state";
2 |
--------------------------------------------------------------------------------
/packages/utils/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@duik/utils",
3 | "version": "0.6.0",
4 | "description": "Dashboard UI Kit Utilities",
5 | "main": "dist/index.js",
6 | "repository": "https://github.com/march08/duik",
7 | "homepage": "https://developer.dashboard-ui.com",
8 | "author": "Roman Nguyen ",
9 | "license": "MIT",
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "private": false,
14 | "peerDependencies": {
15 | "classnames": "^2.2.6",
16 | "react": "^16.8.0",
17 | "react-dom": "^16.8.0"
18 | },
19 | "dependencies": {
20 | "@duik/use-open-state": "^0.6.0"
21 | },
22 | "gitHead": "7eed8237276864892b18bf2999daaf73ffc04739"
23 | }
24 |
--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | trailingComma: 'es5',
3 | // semi: false,
4 | singleQuote: true,
5 | }
6 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "./lib",
4 | "target": "es5",
5 | "module": "commonjs",
6 | "noImplicitAny": true,
7 | "strictNullChecks": true,
8 | "removeComments": true,
9 | "declaration": true,
10 | "jsx": "react",
11 | "typeRoots": [
12 | "src/index.d.ts",
13 | "node_modules/@types"
14 | ]
15 | },
16 | "include": [
17 | "./packages/*/src/**/*.tsx",
18 | "./packages/*/src/**/*.ts"
19 | ],
20 | "exclude": [
21 | "node_modules"
22 | ]
23 | }
24 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["tslint-config-airbnb", "tslint-react"],
3 | "rules": {
4 | "jsx-no-multiline-js": false,
5 | "no-any": true,
6 | "import-name": false,
7 | "variable-name": false,
8 | "jsx-boolean-value": false,
9 | "function-name": false,
10 | "semicolon": [false]
11 | }
12 | }
13 |
--------------------------------------------------------------------------------