@blockle/blocks 0.1.0 → 0.2.1

package/package.json

@@ -1,88 +1,68 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.1.0",
-  "description": "Blockle building Blocks",
-  "scripts": {
-    "start": "npm run build:ts -- -w | npm run build:types -- -w",
-    "build": "npm run blocks && rm -rf ./dist/ && npm run build:ts && npm run build:types",
-    "build:ts": "rollup -c",
-    "build:types": "tsc -d --emitDeclarationOnly",
-    "test": "jest",
-    "lint": "eslint",
-    "format": "prettier --write \"**/*\"",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "blocks": "ts-node-script ./scripts/build-styles.ts"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged"
-    }
+  "version": "0.2.1",
+  "description": "Blocks design system",
+  "repository": "git@github.com:Blockle/blocks.git",
+  "license": "MIT",
+  "author": "Niek Saarberg <n.saarberg@gmail.com>",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./reset.css": {
+      "types": "./dist/reset.css.d.ts",
+      "import": "./dist/reset.css.mjs",
+      "require": "./dist/reset.css.cjs"
+    },
+    "./themes/momotaro": {
+      "types": "./dist/themes/momotaro.d.ts",
+      "import": "./dist/themes/momotaro.mjs",
+      "require": "./dist/themes/momotaro.cjs"
+    },
+    "./package.json": "./package.json"
   },
-  "main": "dist/blockle-blocks.js",
-  "module": "dist/blockle-blocks.esm.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "README.md"
+    "reset.css",
+    "themes/momotaro"
   ],
-  "repository": "git@github.com:Blockle/blockle-blocks.git",
-  "author": "Niek Saarberg",
-  "license": "MIT",
-  "devDependencies": {
-    "@babel/core": "^7.13.10",
-    "@blockle/blocks-builder": "^1.1.0",
-    "@blockle/form": "^1.0.0",
-    "@storybook/addon-actions": "^6.1.21",
-    "@storybook/addon-info": "^5.2.8",
-    "@storybook/addon-links": "^6.1.21",
-    "@storybook/addons": "^6.1.21",
-    "@storybook/react": "^6.1.21",
-    "@svgr/rollup": "^5.1.0",
-    "@testing-library/jest-dom": "^5.3.0",
-    "@testing-library/react": "^11.2.5",
-    "@types/history": "^4.7.3",
-    "@types/jest": "^26.0.20",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "awesome-typescript-loader": "^5.2.1",
-    "babel-loader": "^8.0.6",
-    "core-js": "^3.9.1",
-    "eslint": "^7.22.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^4.2.3",
-    "jest": "^26.6.3",
-    "postcss": "^8.2.8",
-    "postcss-import": "12.0.1",
-    "postcss-preset-env": "^6.7.0",
-    "postcss-reporter": "^7.0.2",
-    "prettier": "^2.0.2",
-    "pretty-quick": "^3.1.0",
-    "react": "^17.0.1",
-    "react-docgen-typescript-loader": "^3.6.0",
-    "react-dom": "^17.0.1",
-    "react-svg-loader": "^3.0.3",
-    "rollup": "^2.41.2",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-postcss": "^4.0.0",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "stylelint": "^13.12.0",
-    "stylelint-config-standard": "^21.0.0",
-    "stylelint-scss": "^3.13.0",
-    "ts-jest": "^26.5.3",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.2.3"
+  "scripts": {
+    "build": "crackle package",
+    "fix": "crackle fix",
+    "ts": "tsc --noemit --project ./tsconfig.json"
   },
-  "peerDependencies": {
-    "@blockle/form": "^1.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+  "dependencies": {
+    "@radix-ui/react-polymorphic": "^0.0.14",
+    "@vanilla-extract/css": "^1.11.1",
+    "@vanilla-extract/css-utils": "^0.1.3",
+    "@vanilla-extract/sprinkles": "^1.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@crackle/cli": "^0.12.0",
+    "@crackle/core": "^0.25.0",
+    "@types/react": "^18.2.13",
+    "@types/react-dom": "^18.2.6",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.43.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-jest": "^27.2.2",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-unicorn": "^47.0.0",
+    "prettier": "^2.8.8",
+    "typescript": "^5.1.3",
+    "vitest": "^0.32.2"
   },
-  "dependencies": {}
+  "packageManager": "yarn@1.22.19"
 }

package/reset.css/index.d.ts

@@ -0,0 +1 @@
+export * from "../dist/reset.css";

package/reset.css/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/reset.css.cjs",
+  "module": "../dist/reset.css.mjs",
+  "types": "./index.d.ts"
+}

package/themes/momotaro/index.d.ts

@@ -0,0 +1 @@
+export * from "../../dist/themes/momotaro";

package/themes/momotaro/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/themes/momotaro.cjs",
+  "module": "../../dist/themes/momotaro.mjs",
+  "types": "./index.d.ts"
+}

package/dist/Badge/Badge.d.ts

@@ -1,7 +0,0 @@
-import { FC, ReactNode } from 'react';
-import './badge.css';
-interface Props {
-    children: ReactNode;
-}
-declare const Badge: FC<Props>;
-export default Badge;

package/dist/Badge/Badge.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';

package/dist/Badge/Badge.stories.d.ts

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

package/dist/Badge/index.d.ts

@@ -1 +0,0 @@
-export { default as Badge } from './Badge';

package/dist/Box/Box.d.ts

@@ -1,10 +0,0 @@
-import { AllHTMLAttributes, ElementType, ReactNode } from 'react';
-import { StyleProps } from '../useStyles';
-interface Props extends StyleProps, Omit<AllHTMLAttributes<HTMLElement>, 'color' | 'width' | 'height'> {
-    className?: string;
-    children?: ReactNode;
-    component?: ElementType;
-    htmlFor?: string;
-}
-declare const Box: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLElement>>;
-export default Box;

package/dist/Box/index.d.ts

@@ -1 +0,0 @@
-export { default as Box } from './Box';

package/dist/Button/Button.d.ts

@@ -1,13 +0,0 @@
-import { FC, MouseEvent, ReactNode } from 'react';
-import { PickStyleProps } from '../useStyles';
-import './button.css';
-interface Props extends PickStyleProps<'width'> {
-    children: ReactNode;
-    disabled?: boolean;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    type?: 'button' | 'submit';
-    className?: string;
-    secondary?: boolean;
-}
-declare const Button: FC<Props>;
-export default Button;

package/dist/Button/Button.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';

package/dist/Button/Button.stories.d.ts

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

package/dist/Button/index.d.ts

@@ -1 +0,0 @@
-export { default as Button } from './Button';

package/dist/Card/Card.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { PickStyleProps } from '../useStyles';
-import './card.css';
-interface Props extends PickStyleProps<'backgroundColor' | 'color' | 'padding' | 'display' | 'flexDirection' | 'alignItems' | 'justifyContent'> {
-    children: React.ReactNode;
-    className?: string;
-    onClick?: () => void;
-    shadow?: 1 | 2 | 3;
-}
-declare const Card: React.FC<Props>;
-export default Card;

package/dist/Card/Card.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';

package/dist/Card/Card.stories.d.ts

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

package/dist/Card/index.d.ts

@@ -1 +0,0 @@
-export { default as Card } from './Card';

package/dist/Dialog/Dialog.d.ts

@@ -1,13 +0,0 @@
-import { FC } from 'react';
-import './dialog.css';
-interface Props {
-    actions?: React.ReactNode;
-    full?: boolean;
-    onRequestClose: () => void;
-    open?: boolean;
-    render: () => JSX.Element | string;
-    title?: React.ReactNode;
-    minHeight?: number;
-}
-export declare const Dialog: FC<Props>;
-export {};

package/dist/Dialog/index.d.ts

@@ -1 +0,0 @@
-export { Dialog } from './Dialog';

package/dist/Divider/Divider.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-import './divider.css';
-declare const Divider: FC;
-export default Divider;

package/dist/Divider/index.d.ts

@@ -1 +0,0 @@
-export { default as Divider } from './Divider';

package/dist/Drawer/Drawer.d.ts

@@ -1,10 +0,0 @@
-import { FC, ReactNode } from 'react';
-import './drawer.css';
-interface Props {
-    children: ReactNode;
-    onRequestClose: () => void;
-    open: boolean;
-    position?: 'left' | 'right';
-}
-declare const Drawer: FC<Props>;
-export default Drawer;

package/dist/Drawer/index.d.ts

@@ -1 +0,0 @@
-export { default as Drawer } from './Drawer';

package/dist/Dropdown/Dropdown.d.ts

@@ -1,17 +0,0 @@
-import { FieldProps } from '@blockle/form';
-import { FC, ReactNode } from 'react';
-import './dropdown.css';
-interface Props extends FieldProps<string>, ValidationOptions {
-    children: ReactNode;
-    placeholder?: string;
-    onChange?: (value: string) => void;
-    errorMessages?: {
-        [key in ErrorCodes]?: React.ReactNode;
-    };
-}
-declare type ErrorCodes = 'required' | 'patternMismatch' | 'minLength' | 'maxLength';
-interface ValidationOptions {
-    required?: boolean;
-}
-declare const Dropdown: FC<Props>;
-export default Dropdown;

package/dist/Dropdown/index.d.ts

@@ -1 +0,0 @@
-export { default as Dropdown } from './Dropdown';

package/dist/FlatButton/FlatButton.d.ts

@@ -1,15 +0,0 @@
-import { FC } from 'react';
-import { PickStyleProps } from '../useStyles';
-import './flat-button.css';
-interface Props extends PickStyleProps<'width'> {
-    children: React.ReactNode;
-    className?: string;
-    disabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    secondary?: boolean;
-    type?: 'button' | 'submit';
-    id?: string;
-    role?: string;
-}
-declare const FlatButton: FC<Props>;
-export default FlatButton;

package/dist/FlatButton/index.d.ts

@@ -1 +0,0 @@
-export { default as FlatButton } from './FlatButton';

package/dist/Grid/Grid.d.ts

@@ -1,10 +0,0 @@
-import { FC } from 'react';
-import { StyleProps } from '../useStyles';
-interface Props {
-    children: React.ReactNode;
-    className?: string;
-    columns: 1 | 2 | 3 | 4 | 5 | 6;
-    spacing: StyleProps['gridGap'];
-}
-declare const Grid: FC<Props>;
-export default Grid;

package/dist/Grid/index.d.ts

@@ -1 +0,0 @@
-export { default as Grid } from './Grid';

package/dist/Icon/Icon.d.ts

@@ -1,26 +0,0 @@
-import { FC } from 'react';
-import { PickStyleProps } from '../useStyles';
-import './icon.css';
-declare const ICON_MAP: {
-    arrowBack: any;
-    arrowLeft: any;
-    arrowRight: any;
-    briefcase: any;
-    calendar: any;
-    check: any;
-    clipboard: any;
-    cog: any;
-    cross: any;
-    exclamation: any;
-    plus: any;
-    selector: any;
-};
-export declare type IconNames = keyof typeof ICON_MAP;
-export interface Props extends PickStyleProps<'color'> {
-    className?: string;
-    label: string;
-    name: IconNames;
-    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-}
-declare const Icon: FC<Props>;
-export default Icon;

package/dist/Icon/Icon.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';

package/dist/Icon/index.d.ts

@@ -1 +0,0 @@
-export { default as Icon, IconNames } from './Icon';

package/dist/IconButton/IconButton.d.ts

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { IconNames } from '../Icon';
-import './icon-button.css';
-interface Props {
-    disabled?: boolean;
-    label: string;
-    name: IconNames;
-    onClick?(): void;
-    secondary?: boolean;
-}
-declare const IconButton: FC<Props>;
-export default IconButton;

package/dist/IconButton/index.d.ts

@@ -1 +0,0 @@
-export { default as IconButton } from './IconButton';

package/dist/Inline/Inline.d.ts

@@ -1,8 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { StyleProps } from '../useStyles';
-interface Props {
-    children: ReactNode;
-    spacing: StyleProps['padding'];
-}
-declare const Inline: FC<Props>;
-export default Inline;

package/dist/Inline/index.d.ts

@@ -1 +0,0 @@
-export { default as Inline } from './Inline';

package/dist/Link/Link.d.ts

@@ -1,9 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { PickStyleProps } from '../useStyles';
-import './link.css';
-interface Props extends PickStyleProps<'fontSize'> {
-    children: ReactNode;
-    to: string;
-}
-declare const Link: FC<Props>;
-export default Link;

package/dist/Link/index.d.ts

@@ -1 +0,0 @@
-export { default as Link } from './Link';

package/dist/Loader/Loader.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-import './loader.css';
-declare const Loader: FC;
-export default Loader;

package/dist/Loader/index.d.ts

@@ -1 +0,0 @@
-export { default as Loader } from './Loader';

package/dist/OutlineButton/OutlineButton.d.ts

@@ -1,12 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { PickStyleProps } from '../useStyles';
-import './outline-button.css';
-interface Props extends PickStyleProps<'width'> {
-    children: ReactNode;
-    className?: string;
-    disabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    type?: 'button' | 'submit';
-}
-declare const OutlineButton: FC<Props>;
-export default OutlineButton;

package/dist/OutlineButton/index.d.ts

@@ -1 +0,0 @@
-export { default as OutlineButton } from './OutlineButton';

package/dist/Panel/Panel.d.ts

@@ -1,10 +0,0 @@
-import { FC } from 'react';
-import './panel.css';
-interface Props {
-    className?: string;
-    onRequestClose: () => void;
-    open?: boolean;
-    render: () => JSX.Element | string;
-}
-declare const Panel: FC<Props>;
-export default Panel;

package/dist/Panel/index.d.ts

@@ -1 +0,0 @@
-export { default as Panel } from './Panel';

package/dist/Paper/Paper.d.ts

@@ -1,14 +0,0 @@
-import { FC } from 'react';
-import './paper.css';
-export declare type Effects = 'fade' | 'slideUp';
-interface Props {
-    className?: string;
-    effect?: Effects;
-    fit?: boolean;
-    open?: boolean;
-    render: () => JSX.Element | string;
-    shadow?: boolean;
-    transparent?: boolean;
-}
-declare const Paper: FC<Props>;
-export default Paper;

package/dist/Paper/Paper.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';

package/dist/Paper/index.d.ts

@@ -1 +0,0 @@
-export { default as Paper, Effects as PaperEffects } from './Paper';

package/dist/RippleBox/RippleBox.d.ts

@@ -1,8 +0,0 @@
-import { AllHTMLAttributes, ElementType } from 'react';
-import { StyleProps } from '..';
-interface Props extends StyleProps, Omit<AllHTMLAttributes<HTMLElement>, 'color' | 'width' | 'height'> {
-    children: React.ReactNode;
-    component?: ElementType;
-}
-declare const RippleBox: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLElement>>;
-export default RippleBox;

package/dist/RippleBox/createRipple.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function createRipple(event: React.MouseEvent | React.TouchEvent): void;

package/dist/RippleBox/index.d.ts

@@ -1 +0,0 @@
-export { default as RippleBox } from './RippleBox';

package/dist/Stack/Stack.d.ts

@@ -1,13 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { PickStyleProps, ResponsiveStyleProp, StyleProps } from '../useStyles';
-import './Stack.css';
-interface Props extends PickStyleProps<'padding' | 'paddingX' | 'paddingY' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft'> {
-    align?: ResponsiveStyleProp<'flex-start' | 'center' | 'flex-end'>;
-    children: ReactNode;
-    component?: 'div' | 'ol' | 'ul';
-    horizontal?: boolean;
-    spacing: StyleProps['padding'];
-    className?: string;
-}
-declare const Stack: FC<Props>;
-export default Stack;

package/dist/Stack/index.d.ts

@@ -1 +0,0 @@
-export { default as Stack } from './Stack';

package/dist/Tag/Tag.d.ts

@@ -1,8 +0,0 @@
-import { FC, ReactNode } from 'react';
-import './tag.css';
-interface Props {
-    children: ReactNode;
-    onClick: () => void;
-}
-declare const Tag: FC<Props>;
-export default Tag;

package/dist/Tag/index.d.ts

@@ -1 +0,0 @@
-export { default as Tag } from './Tag';

package/dist/Text/Text.d.ts

@@ -1,10 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { PickStyleProps } from '../useStyles';
-import './text.css';
-interface Props extends PickStyleProps<'textAlign' | 'fontSize' | 'fontWeight' | 'color' | 'fontStyle'> {
-    component?: 'span' | 'p' | 'strong' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    children: ReactNode;
-    className?: string;
-}
-declare const Text: FC<Props>;
-export default Text;

package/dist/Text/Text.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';

package/dist/Text/index.d.ts

@@ -1 +0,0 @@
-export { default as Text } from './Text';

package/dist/TextField/TextField.d.ts

@@ -1,22 +0,0 @@
-import { FieldProps } from '@blockle/form';
-import { FC } from 'react';
-import './text-field.css';
-interface Props extends FieldProps<string>, ValidationOptions {
-    label: string;
-    placeholder?: string;
-    onChange?: (value: string) => void;
-    type?: 'text' | 'password' | 'email' | 'tel';
-    errorMessages?: {
-        [key in ErrorCodes]?: React.ReactNode;
-    };
-    disabled?: boolean;
-}
-declare type ErrorCodes = 'required' | 'patternMismatch' | 'minLength' | 'maxLength';
-declare type ValidationOptions = {
-    required?: boolean;
-    pattern?: RegExp;
-    minLength?: number;
-    maxLength?: number;
-};
-declare const TextField: FC<Props>;
-export default TextField;

package/dist/TextField/TextField.stories.d.ts

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

package/dist/TextField/index.d.ts

@@ -1 +0,0 @@
-export { default as TextField } from './TextField';