@economic/taco 0.0.1-alpha.0

package/dist/types.d.ts

@@ -0,0 +1,5 @@
+export declare type Appearance = 'default' | 'primary' | 'danger' | 'ghost' | 'discrete';
+export declare type State = 'default' | 'success' | 'error' | 'warning' | 'information';
+export declare type Locale = 'en-GB' | 'da-DK' | 'sv-SE' | 'no-NO';
+export declare type Orientation = 'horizontal' | 'vertical';
+export declare type Placement = 'right' | 'left' | 'top' | 'bottom';

package/dist/utils/date.d.ts

@@ -0,0 +1,3 @@
+export declare const format: (date: Date | undefined, mask?: string) => string | undefined;
+export declare const parseFromCustomString: (date?: string, mask?: string) => Date | undefined;
+export declare const parseFromISOString: (date: string) => Date | undefined;

package/dist/utils/hooks/useBoundingClientRectListener.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const useBoundingClientRectListener: (ref: React.RefObject<HTMLElement>) => DOMRectReadOnly | undefined;

package/dist/utils/hooks/useDraggable.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useDraggable: (ref: React.MutableRefObject<HTMLDivElement | null>) => any;

package/dist/utils/hooks/useDropTarget.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type useDropTarget = [boolean, (undefined | {
+    onDragEnter: React.DragEventHandler;
+    onDragLeave: React.DragEventHandler;
+    onDragOver: React.DragEventHandler;
+    onDrop: React.DragEventHandler;
+})];
+export declare const useDropTarget: (onDrop: React.DragEventHandler | undefined) => useDropTarget;

package/dist/utils/hooks/useListKeyboardNavigation.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Orientation } from '../../types';
+export declare const getNextIndexFromKeycode: (keyCode: number, length: number, index: number | undefined, direction?: Orientation) => number | undefined;
+export declare type useListKeyboardNavigationOptions = {
+    direction?: Orientation;
+    initialIndex?: number;
+};
+export declare const useListKeyboardNavigation: (length?: number, options?: useListKeyboardNavigationOptions) => [number | undefined, (index: number | undefined) => void, (event: React.KeyboardEvent<HTMLElement>) => number | undefined];

package/dist/utils/hooks/useListScrollTo.d.ts

@@ -0,0 +1 @@
+export declare const useListScrollTo: (internalRef: any, itemRefs: any[]) => any;

package/dist/utils/hooks/useOnClickOutside.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useOnClickOutside: (ref: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[], callback: (event: MouseEvent | TouchEvent) => void) => void;

package/dist/utils/hooks/useProxiedRef.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const useProxiedRef: <T extends HTMLElement>(ref: React.Ref<HTMLElement>) => React.RefObject<T>;

package/dist/utils/hooks/useRefState.d.ts

@@ -0,0 +1 @@
+export declare const useRefState: <T>(initialValue: T) => [T, (value: T) => void];

package/dist/utils/hooks/useTimer.d.ts

@@ -0,0 +1,7 @@
+export interface Timer {
+    running: boolean;
+    start: () => void;
+    pause: () => void;
+    resume: () => void;
+}
+export default function useTimer(duration: number | undefined, callback: () => void): Timer;

package/dist/utils/input.d.ts

@@ -0,0 +1,3 @@
+export declare const createCustomEvent: (eventType: string) => any;
+export declare const createCustomKeyboardEvent: (event: React.KeyboardEvent<HTMLInputElement>) => any;
+export declare const setInputValueByRef: (input: HTMLInputElement | null, value: string | undefined, event?: string) => void;

package/dist/utils/mergeRefs.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T>;

package/dist/utils/storyutils.d.ts

@@ -0,0 +1,7 @@
+import sort from 'fast-sort';
+export declare const createFakeData: (creator: any, ...length: any[]) => any[];
+export declare const getRandomNumber: (max: any, min?: number) => number;
+export declare const iconNames: string[];
+export declare const generateId: () => string;
+export declare const sleep: (ms: number) => Promise<unknown>;
+export { sort };

package/dist/utils/taillwind.d.ts

@@ -0,0 +1,4 @@
+import { State, Appearance } from '../types';
+export declare const getAppearanceClasses: (value: Appearance | undefined) => string;
+export declare const getStateClasses: (value: State | undefined) => string;
+export declare const getOutlineClasses: (state: Appearance | State | undefined) => string;

package/dist/utils/tailwind.d.ts

@@ -0,0 +1 @@
+export declare const getInputStateClasses: (state?: string | undefined) => string | false;

package/package.json

@@ -0,0 +1,120 @@
+{
+    "name": "@economic/taco",
+    "version": "0.0.1-alpha.0",
+    "description": "> TODO: description",
+    "author": "Matt Daly <matthew.daly@visma.com>",
+    "homepage": "https://github.com/e-conomic/taco#readme",
+    "license": "MIT",
+    "main": "dist/index.js",
+    "module": "dist/esm/index.js",
+    "sideEffects": false,
+    "types": "dist/index.d.ts",
+    "directories": {
+        "dist": "dist",
+        "test": "__tests__"
+    },
+    "files": [
+        "dist",
+        "plugins",
+        "tailwind.config.js"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/e-conomic/taco.git"
+    },
+    "scripts": {
+        "prewatch": "npm run generate-typedoc",
+        "watch": "tsdx watch",
+        "build": "tsdx build",
+        "postbuild": "npm run generate-typedoc",
+        "lint": "eslint src",
+        "test": "tsdx test",
+        "test:watch": "tsdx test --watch",
+        "generate-typedoc": "node scripts/generate-typedoc",
+        "generate-icons": "node scripts/generate-icons",
+        "storybook-build": "build-storybook -o build-storybook --quiet",
+        "storybook": "start-storybook -p 6006"
+    },
+    "bugs": {
+        "url": "https://github.com/e-conomic/taco/issues"
+    },
+    "dependencies": {
+        "@radix-ui/react-accordion": "^0.1.5",
+        "@radix-ui/react-checkbox": "^0.1.4",
+        "@radix-ui/react-dialog": "^0.1.4",
+        "@radix-ui/react-dropdown-menu": "^0.1.4",
+        "@radix-ui/react-popover": "^0.1.4",
+        "@radix-ui/react-radio-group": "^0.1.4",
+        "@radix-ui/react-switch": "^0.1.4",
+        "@radix-ui/react-tabs": "^0.1.4",
+        "@radix-ui/react-tooltip": "^0.1.6",
+        "@react-aria/focus": "^3.2.3",
+        "@react-aria/interactions": "^3.3.2",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.14.0",
+        "framer-motion": "^5.5.6",
+        "keycode": "^2.2.0",
+        "lodash-es": "4.17.21",
+        "react-day-picker": "^7.4.8",
+        "react-intersection-observer": "^8.31.1",
+        "react-joyride": "^2.1.1",
+        "react-table": "^7.5.0",
+        "react-window": "^1.8.5",
+        "react-window-infinite-loader": "^1.0.7",
+        "reakit": "^1.0.2",
+        "typeface-open-sans": "^0.0.75",
+        "uuid": "^8.1.0"
+    },
+    "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17",
+        "tailwindcss": ">=3"
+    },
+    "devDependencies": {
+        "@storybook/addon-a11y": "^6.4.8",
+        "@storybook/addon-docs": "^6.4.8",
+        "@storybook/addon-essentials": "^6.4.8",
+        "@storybook/addon-links": "^6.4.8",
+        "@storybook/addon-postcss": "^2.0.0",
+        "@storybook/react": "^6.4.8",
+        "@svgr/cli": "^5.5.0",
+        "@testing-library/dom": "^7.31.0",
+        "@testing-library/jest-dom": "^5.11.4",
+        "@testing-library/react": "^11.1.0",
+        "@testing-library/user-event": "^12.1.10",
+        "@types/classnames": "^2.2.9",
+        "@types/lodash": "^4.14.168",
+        "@types/react": "^17.0.35",
+        "@types/react-dom": "^17.0.11",
+        "@types/react-table": "^7.0.19",
+        "@types/react-window": "^1.8.2",
+        "@types/react-window-infinite-loader": "^1.0.3",
+        "@types/uuid": "^7.0.3",
+        "autoprefixer": "^10.4.0",
+        "identity-obj-proxy": "^3.0.0",
+        "lodash.flatten": "^4.4.0",
+        "mutationobserver-shim": "^0.3.7",
+        "postcss": "^8.3.11",
+        "postcss-nested": "^4.2.3",
+        "react-dom": "^17.0.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "rimraf": "^3.0.2",
+        "rollup-plugin-commonjs": "^10.1.0",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-postcss": "^4.0.1",
+        "svgo": "^1.3.2",
+        "tailwindcss": "^3.0.1",
+        "tsdx": "^0.13.2",
+        "typedoc": "^0.22.10",
+        "typescript": "^4.4.4"
+    },
+    "jest": {
+        "moduleNameMapper": {
+            "\\.css$": "identity-obj-proxy"
+        }
+    },
+    "gitHead": "21451e110bc1a1cad89719df4fcd7d4048c09a82"
+}

package/plugins/tailwindcss-aria-attributes.js

@@ -0,0 +1,73 @@
+// copied from this unpublished plugin https://github.com/thoughtbot/tailwindcss-aria-attributes#usage
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(({ addVariant, e }) => {
+    [
+        'atomic',
+        'busy',
+        'checked',
+        'current',
+        'disabled',
+        'expanded',
+        'grabbed',
+        'haspopup',
+        'hidden',
+        'invalid',
+        'live',
+        'modal',
+        'multiline',
+        'multiselectable',
+        'pressed',
+        'readonly',
+        'required',
+        'selected',
+    ].forEach(boolean => {
+        const selector = `aria-${boolean}`;
+        addVariant(selector, ({ modifySelectors, separator }) =>
+            modifySelectors(({ className }) => `[${selector}="true"].${e(`${selector}${separator}${className}`)}`)
+        );
+
+        const groupSelector = `group-aria-${boolean}`;
+        addVariant(groupSelector, ({ modifySelectors, separator }) =>
+            modifySelectors(({ className }) => `.group[aria-${boolean}="true"] .${e(`${groupSelector}${separator}${className}`)}`)
+        );
+
+        const peerSelector = `peer-aria-${boolean}`;
+        addVariant(peerSelector, ({ modifySelectors, separator }) =>
+            modifySelectors(({ className }) => `.peer[aria-${boolean}="true"] ~ .${e(`${peerSelector}${separator}${className}`)}`)
+        );
+    });
+
+    const enumerables = {
+        autocomplete: ['both', 'inline', 'list', 'none'],
+        current: ['date', 'location', 'page', 'step', 'time'],
+        dropeffect: ['copy', 'execute', 'link', 'move', 'none', 'popup'],
+        haspopup: ['dialog', 'grid', 'listbox', 'menu', 'tree'],
+        orientation: ['horizontal', 'undefined', 'vertial'],
+        relevant: ['additions', 'all', 'removals', 'text'],
+        sort: ['ascending', 'descending', 'none', 'other'],
+    };
+
+    for (const [attribute, values] of Object.entries(enumerables)) {
+        for (const value of values) {
+            const selector = `aria-${attribute}-${value}`;
+            addVariant(selector, ({ modifySelectors, separator }) =>
+                modifySelectors(({ className }) => `[aria-${attribute}="${value}"].${e(`${selector}${separator}${className}`)}`)
+            );
+
+            const groupSelector = `group-aria-${attribute}-${value}`;
+            addVariant(groupSelector, ({ modifySelectors, separator }) =>
+                modifySelectors(
+                    ({ className }) => `.group[aria-${attribute}="${value}"] .${e(`${groupSelector}${separator}${className}`)}`
+                )
+            );
+
+            const peerSelector = `peer-aria-${attribute}-${value}`;
+            addVariant(peerSelector, ({ modifySelectors, separator }) =>
+                modifySelectors(
+                    ({ className }) => `.peer[aria-${attribute}="${value}"] ~ .${e(`${peerSelector}${separator}${className}`)}`
+                )
+            );
+        }
+    }
+});

package/tailwind.config.js

@@ -0,0 +1,297 @@
+const plugin = require('tailwindcss/plugin');
+
+module.exports = {
+    theme: {
+        colors: {
+            transparent: 'transparent',
+            current: 'currentColor',
+            white: '#fff',
+            black: '#1c1c1c',
+            grey: {
+                lightest: '#fafafa',
+                light: '#efefef',
+                DEFAULT: '#ebebeb',
+                dark: '#ddd',
+                darker: '#acacac',
+                darkest: '#595959',
+            },
+            purple: {
+                lightest: '#585c74',
+                light: '#4b4f64',
+                DEFAULT: '#3d4153',
+                dark: '#353a48',
+            },
+            blue: {
+                lightest: '#e5efff',
+                light: '#6ba4ff',
+                DEFAULT: '#0063ff',
+                dark: '#0158e2',
+            },
+            red: {
+                lightest: '#f3cfc5',
+                light: '#e67355',
+                DEFAULT: '#cf3c16',
+                dark: '#b12d0b',
+            },
+            green: {
+                lightest: '#c4e1d7',
+                light: '#5caf93',
+                DEFAULT: '#138760',
+                dark: '#0c5f43',
+            },
+            yellow: {
+                lightest: '#fff1c3',
+                light: '#fddd70',
+                DEFAULT: '#ffc810',
+                dark: '#e89c2e',
+            },
+        },
+        fontFamily: {
+            display: ['Helvetica, Arial, sans-serif'],
+            mono: ['Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'],
+        },
+        extend: {
+            cursor: {
+                grab: 'grab',
+                grabbing: 'grabbing',
+            },
+            listStyleType: {
+                circle: 'circle',
+            },
+            spacing: {
+                18: '4.5rem',
+                72: '18rem',
+                80: '20rem',
+                88: '22rem',
+                96: '24rem',
+                104: '26rem',
+                112: '28rem',
+                120: '30rem',
+                128: '32rem',
+                xs: '32rem',
+                sm: '48rem',
+                md: '64rem',
+                lg: '80rem',
+            },
+        },
+    },
+    plugins: [
+        require('./plugins/tailwindcss-aria-attributes'),
+        plugin(function ({ addUtilities, theme }) {
+            // ideally we would do this using the @layer utilities directive, but
+            // that causes issues in tools like tailwind where the typescript is loaded before the css
+            // resulting in "yt-focus class does not exist" errors
+            addUtilities({
+                '.fixed-center': {
+                    position: 'fixed',
+                    left: '50%',
+                    top: '50%',
+                    transform: 'translateX(-50%) translateY(-50%)',
+                },
+                '.absolute-center': {
+                    position: 'absolute',
+                    left: '50%',
+                    top: '50%',
+                    transform: 'translateX(-50%) translateY(-50%)',
+                },
+                '.absolute-center-x': {
+                    position: 'absolute',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                },
+                '.absolute-center-y': {
+                    position: 'absolute',
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                }, // WCAG contrast combinations
+                '.wcag-black': {
+                    background: theme('colors.black'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-white': {
+                    background: theme('colors.white'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-lightest': {
+                    background: theme('colors.grey.lightest'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-light': {
+                    background: theme('colors.grey.light'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey': {
+                    background: theme('colors.grey.DEFAULT'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-dark': {
+                    background: theme('colors.grey.dark'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-darker': {
+                    background: theme('colors.grey.darker'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-grey-darkest': {
+                    background: theme('colors.grey.darkest'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple-lightest': {
+                    background: theme('colors.purple.lightest'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple-light': {
+                    background: theme('colors.purple.light'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple': {
+                    background: theme('colors.purple.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple-dark': {
+                    background: theme('colors.purple.dark'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-blue-lightest': {
+                    background: theme('colors.blue.lightest'),
+                    color: theme('colors.blue.dark'),
+                },
+                '.wcag-blue-light': {
+                    background: theme('colors.blue.light'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-blue': {
+                    background: theme('colors.blue.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-blue-dark': {
+                    background: theme('colors.blue.dark'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-red-lightest': {
+                    background: theme('colors.red.lightest'),
+                    color: theme('colors.red.dark'),
+                },
+                '.wcag-red-light': {
+                    background: theme('colors.red.light'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-red': {
+                    background: theme('colors.red.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-red-dark': {
+                    background: theme('colors.red.dark'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-green-lightest': {
+                    background: theme('colors.green.lightest'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-green-light': {
+                    background: theme('colors.green.light'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-green': {
+                    background: theme('colors.green.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-green-dark': {
+                    background: theme('colors.green.dark'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-yellow-lightest': {
+                    background: theme('colors.yellow.lightest'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-yellow-light': {
+                    background: theme('colors.yellow.light'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-yellow': {
+                    background: theme('colors.yellow.DEFAULT'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-yellow-dark': {
+                    background: theme('colors.yellow.dark'),
+                    color: theme('colors.white'),
+                },
+                // Legacy
+                '.yt-transparent': {
+                    background: theme('colors.transparent'),
+                    color: theme('colors.blue.DEFAULT'),
+                },
+                '.yt-focus': {
+                    'box-shadow': '0 0 0 0.15rem rgba(0, 143, 255, 0.25)',
+                    outline: 'none',
+                },
+                '.yt-focus-green': {
+                    'box-shadow': '0 0 0 0.15rem rgba(0, 213, 165, 0.25)',
+                    outline: 'none',
+                },
+                '.yt-focus-yellow': {
+                    'box-shadow': '0 0 0 0.15rem rgba(239, 125, 0, 0.25)',
+                    outline: 'none',
+                },
+                '.yt-focus-red': {
+                    'box-shadow': '0 0 0 0.15rem rgba(253, 99, 97, 0.25)',
+                    outline: 'none',
+                },
+                '.yt-blue-solid': {
+                    background: theme('colors.blue.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.yt-blue-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.blue.DEFAULT')}`,
+                    color: theme('colors.blue.DEFAULT'),
+                },
+                '.yt-yellow-solid': {
+                    background: theme('colors.yellow.DEFAULT'),
+                    color: theme('colors.black'),
+                },
+                '.yt-yellow-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.yellow.DEFAULT')}`,
+                    color: theme('colors.yellow.DEFAULT'),
+                },
+                '.yt-red-solid': {
+                    background: theme('colors.red.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.yt-red-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.red.DEFAULT')}`,
+                    color: theme('colors.red.DEFAULT'),
+                },
+                '.yt-green-solid': {
+                    background: theme('colors.green.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.yt-green-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.green.DEFAULT')}`,
+                    color: theme('colors.green.DEFAULT'),
+                },
+                '.yt-grey-solid': {
+                    background: theme('colors.grey.DEFAULT'),
+                    color: theme('colors.black'),
+                },
+                '.yt-grey-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.grey.darkest')}`,
+                    color: theme('colors.grey.darkest'),
+                },
+                '.yt-shadow': {
+                    'box-shadow': '0px 1px 3px 0px rgba(89, 85, 98, 0.35), 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
+                },
+                '.yt-shadow-inset': {
+                    'box-shadow': 'inset 0px 1px 4px 0px rgba(89, 85, 98, 0.3), inset 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
+                },
+                '.pointer-events-all': {
+                    'pointer-events': 'all',
+                },
+            });
+        }),
+    ],
+};