@databricks/design-system 0.2.1 → 1.2.0

package/dist/rollup-less-tilde-importer.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'rollup';
+export declare const lessTildeImporter: () => Plugin;

package/dist/theme/colorList.d.ts

@@ -1,7 +1,7 @@
 export declare type ColorName = 'blue' | 'green' | 'grey' | 'red' | 'yellow';
 export declare type ColorWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
 export declare type PrimaryColorToken = `${ColorName}${ColorWeight}` | 'primary' | 'white';
-export declare type SecondaryColorToken = 'brown' | 'coral' | 'indigo' | 'lemon' | 'lime' | 'pink' | 'purple' | 'teal' | 'turquoise';
+export declare type SecondaryColorToken = 'brown' | 'coral' | 'charcoal' | 'indigo' | 'lemon' | 'lime' | 'pink' | 'purple' | 'teal' | 'turquoise';
 export declare type TagColorToken = `tag${Capitalize<SecondaryColorToken>}` | 'tagDefault';
 declare type ColorPalettePrimary = Record<PrimaryColorToken, string>;
 declare type ColorPaletteSecondary = Record<SecondaryColorToken, string>;
@@ -57,6 +57,7 @@ export declare const lightColorList: {
     tagDefault: string;
     tagBrown: string;
     tagCoral: string;
+    tagCharcoal: string;
     tagIndigo: string;
     tagLemon: string;
     tagLime: string;

package/dist/theme/colors.d.ts

@@ -2,6 +2,7 @@ import { ThemeName } from './index';
 declare const lightColors: {
     brown: string;
     coral: string;
+    charcoal: string;
     indigo: string;
     lemon: string;
     lime: string;
@@ -100,6 +101,7 @@ declare const lightColors: {
     tagDefault: string;
     tagBrown: string;
     tagCoral: string;
+    tagCharcoal: string;
     tagIndigo: string;
     tagLemon: string;
     tagLime: string;
@@ -115,7 +117,7 @@ declare const lightColors: {
     tooltipBackgroundTooltip: string;
 };
 declare type DesignSystemColors = typeof lightColors;
-interface AntdColors {
+export interface AntdColors {
     bodyBackground: string;
     textColor: string;
     textColorSecondary: string;

package/dist/theme/generalVariables.d.ts

@@ -7,5 +7,6 @@ declare const antdGeneralVariables: {
     heightBase: number;
     iconSize: number;
     buttonHeight: number;
+    buttonInnerHeight: number;
 };
 export default antdGeneralVariables;

package/dist/theme/index.d.ts

@@ -5,6 +5,11 @@ import typography from './typography';
 import borders from './borders';
 export declare type ThemeName = 'default' | 'dark';
 export declare type ComponentTheme = ReturnType<typeof getTheme>;
+export interface ThemeOptions {
+    enableAnimation: boolean;
+    isCompact: boolean;
+    zIndexBase: number;
+}
 export interface Theme {
     colors: ReturnType<typeof getColors>;
     spacing: typeof spacing;
@@ -12,5 +17,6 @@ export interface Theme {
     typography: typeof typography;
     borders: typeof borders;
     themeName: ThemeName;
+    options: ThemeOptions;
 }
-export declare function getTheme(themeName: ThemeName): Theme;
+export declare function getTheme(themeName: ThemeName, options?: ThemeOptions): Theme;

package/dist/theme/spacing.d.ts

@@ -1,6 +1,10 @@
-export declare const defaultSpacing = 8;
-export declare const modalPadding = 40;
-export declare const modalLessPadding: number;
+export declare const MODAL_PADDING = 40;
+declare const spacing: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+};
 export declare const antdSpacing: {
     defaultPaddingLg: number;
     defaultPaddingMd: number;
@@ -15,48 +19,15 @@ export declare const antdSpacing: {
     marginSm: number;
     marginLg: number;
     btnPaddingHorizontalBase: number;
-    modalPadding: number;
-    modalLessPadding: number;
-    modalHeaderPadding: string;
-    modalHeaderCloseSize: number;
-    modalHeaderBorderWidth: number;
-    modalBodyPadding: string;
-    modalFooterPaddingVertical: string;
-    modalFooterPaddingHorizontal: number;
-    modalFooterBorderWidth: number;
-    switchPadding: number;
-    switchHeight: number;
-    switchMinWidth: number;
-    switchPinSize: number;
-};
-declare const _default: {
-    radioFillSize: number;
-    radioButtonSize: number;
-    radioEmphasisBorderWidth: number;
     btnPaddingHorizontalLg: number;
     btnPaddingHorizontalSm: number;
-    btnPaddingHorizontalBase: number;
-    alertIconHeight: number;
-    alertIconFontSize: number;
-    defaultPaddingLg: number;
-    defaultPaddingMd: number;
-    defaultPaddingSm: number;
-    defaultPaddingXs: number;
-    defaultPaddingXss: number;
-    paddingLg: number;
-    paddingMd: number;
-    paddingSm: number;
-    paddingXs: number;
-    paddingXss: number;
-    marginSm: number;
-    marginLg: number;
     modalPadding: number;
     modalLessPadding: number;
     modalHeaderPadding: string;
     modalHeaderCloseSize: number;
     modalHeaderBorderWidth: number;
     modalBodyPadding: string;
-    modalFooterPaddingVertical: string;
+    modalFooterPaddingVertical: number;
     modalFooterPaddingHorizontal: number;
     modalFooterBorderWidth: number;
     switchPadding: number;
@@ -64,4 +35,4 @@ declare const _default: {
     switchMinWidth: number;
     switchPinSize: number;
 };
-export default _default;
+export default spacing;

package/package.json

@@ -1,9 +1,6 @@
 {
   "name": "@databricks/design-system",
-  "version": "0.2.1",
-  "engines": {
-    "node": ">=11.8.0"
-  },
+  "version": "1.2.0",
   "description": "DuBois Design System",
   "keywords": [],
   "license": "ISC",
@@ -26,56 +23,61 @@
     "prepublish": "./scripts/prepublish",
     "postpublish": "./scripts/postpublish",
     "generate": "npm-run-all generate:icons generate:icons-story prettier",
-    "generate:icons": "svgr -d src/design-system/Icon/icons --typescript --template src/design-system/Icon/generator/iconTemplate.js --icon --replace-attr-values \\\"#EB4A32=currentColor\\\" src/assets/icons",
+    "generate:icons": "svgr -d src/design-system/Icon/__generated/icons --typescript --template src/design-system/Icon/generator/iconTemplate.js --icon --replace-attr-values \\\"#EB4A32=currentColor\\\" src/assets/icons",
     "generate:icons-story": "node ./src/design-system/Icon/generator/generateIconStory.js",
-    "clean:antd-types": "rm -rf dist/node_modules/antd/es dist/cjs/node_modules/antd/es",
-    "sync-antd-types": "npm-run-all --parallel sync-antd-types-es sync-antd-types-cjs",
-    "sync-antd-types-es": "mkdir -p dist/node_modules/antd/es/ && rsync -a --prune-empty-dirs --include '*/' --include '*.d.ts' --exclude '*' node_modules/antd/es/ dist/node_modules/antd/es/",
-    "sync-antd-types-cjs": "mkdir -p dist/cjs/node_modules/antd/es/ && rsync -a --prune-empty-dirs --include '*/' --include '*.d.ts' --exclude '*' node_modules/antd/es/ dist/cjs/node_modules/antd/es/",
-    "clean:non-pkgr": "npm-run-all --parallel clean:styles clean:antd-types",
-    "build": "yarn clean:non-pkgr && npm-run-all --parallel sync-antd-types build-styles build-js",
+    "build": "./yarnrun.sh clean-if-nx-enabled && mkdir -p dist && npm-run-all --parallel build:styles build:js",
     "build:deps": "yarn workspaces foreach -piR --topological-dev --from @databricks/design-system --exclude @databricks/design-system run build",
-    "build-js-base": "redash-pkgr build",
-    "build-js": "yarn build-js-base",
+    "build:js:base": "databricks-pkgr build --no-clean",
+    "build:js": "yarn build:js:base",
     "clean:styles": "rm -rf dist/index.css dist/index-dark.css styles.js",
-    "build-styles": "npm-run-all --parallel build-styles-default-theme build-styles-dark-theme",
-    "build-styles-default-theme": "rollup --configPlugin typescript -c ./src/rollup.styles.config.ts",
-    "build-styles-dark-theme": "BUILD_DARK_MODE=true rollup --configPlugin typescript -c ./src/rollup.styles.config.ts",
-    "watch": "yarn build-js-base -w --no-clean --preserve-modules",
+    "build:styles": "npm-run-all --parallel build:styles-default-theme build:styles-dark-theme",
+    "build:styles-default-theme": "rollup --configPlugin typescript -c ./src/rollup.styles.config.ts",
+    "build:styles-dark-theme": "BUILD_DARK_MODE=true rollup --configPlugin typescript -c ./src/rollup.styles.config.ts",
+    "watch": "yarn build:js:base -w --preserve-modules",
     "storybook-build": "yarn build && yarn storybook-cross-env build-storybook -c storybook",
     "storybook-cross-env": "cross-env TS_NODE_PROJECT=\".storybook/tsconfig.json\"",
     "storybook-runner": "./yarnrun.sh storybook",
-    "storybook": "yarn build-styles && yarn storybook-runner",
+    "storybook": "yarn build:styles && yarn storybook-runner",
     "indexes-regenerate": "./yarnrun.sh indexes:regenerate",
     "indexes-check": "./yarnrun.sh indexes:check",
     "snapshot": "percy storybook ./storybook-static -c .percy.storybook.yml --verbose -t750",
     "prettier-check": "./yarnrun.sh prettier:check",
     "prettier": "./yarnrun.sh prettier",
-    "lint": "eslint . --ext js,jsx,ts,tsx",
-    "test": "jest --ci --config=jest.config.ts",
-    "test:watch": "jest --watch --config=jest.config.ts",
+    "lint": "databricks-eslint .",
+    "lint:fix": "yarn lint --fix",
+    "test": "databricks-jest",
+    "test:watch": "yarn test --watch",
     "type-check": "tsc --noEmit --project ./tsconfig.json",
     "type-check:watch": "yarn type-check --watch",
     "check-all": "yarn type-check && yarn prettier-check && yarn lint",
-    "fix-all": "yarn generate && yarn prettier && yarn lint --fix && yarn indexes-regenerate"
+    "fix-all": "yarn generate && yarn prettier && yarn lint --fix && yarn indexes-regenerate",
+    "prep-deps": ": # magic task to allow yarn ensure-deps plugin prepare dependencies of this package"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
     "@babel/preset-env": "^7.16.5",
     "@babel/preset-react": "^7.16.5",
     "@babel/preset-typescript": "^7.16.5",
+    "@databricks/config-eslint": "1.0.0",
+    "@databricks/config-jest": "1.0.0",
+    "@databricks/pkgr": "1.0.0",
     "@emotion/babel-plugin": "^11.3.0",
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/react": "^11.4.0",
-    "@jest/types": "^27.2.5",
+    "@faker-js/faker": "^6.0.0-alpha.6",
+    "@jest/types": "^28.1.0",
     "@percy/cli": "1.0.0-beta.70",
     "@percy/storybook": "4.1.0",
-    "@redash/pkgr": "1.0.0",
+    "@radix-ui/react-popover": "^0.1.6",
+    "@radix-ui/react-switch": "^0.1.5",
     "@storybook/addon-actions": "^6.4.9",
     "@storybook/addon-docs": "^6.4.9",
     "@storybook/addon-essentials": "^6.4.9",
     "@storybook/addon-links": "^6.4.9",
     "@storybook/addons": "^6.4.9",
+    "@storybook/api": "^6.4.19",
+    "@storybook/components": "^6.4.19",
+    "@storybook/core-events": "^6.4.19",
     "@storybook/react": "^6.4.9",
     "@storybook/theming": "^6.4.9",
     "@svgr/cli": "^5.5.0",
@@ -83,36 +85,29 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.3.0",
     "@types/glob": "^7.2.0",
-    "@types/jest": "^26.0.23",
+    "@types/jest": "^27.4.1",
     "@types/jscodeshift": "^0.11.2",
-    "@types/node": "^14.18",
+    "@types/lodash": "^4.14.157",
+    "@types/node": "^16.0.0",
     "@types/react": "^17.0.15",
     "@types/react-dom": "^17.0.9",
-    "@typescript-eslint/eslint-plugin": "^4.31.0",
-    "@typescript-eslint/parser": "^4.31.0",
-    "babel-jest": "^27.0.2",
     "babel-loader": "^8.2.2",
     "babel-plugin-react-require": "^3.1.3",
     "cross-env": "^7.0.3",
     "css-loader": "^5.0.1",
     "dir-compare-cli": "^1.0.1",
-    "eslint": "^7.32.0",
-    "eslint-import-resolver-typescript": "^2.5.0",
-    "eslint-plugin-file-progress": "^1.2.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-react": "^7.25.1",
+    "glob": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.0.4",
-    "jest-cli": "^27.0.4",
     "jscodeshift": "^0.13.0",
     "less": "^3.0.0",
     "less-loader": "^7.2.1",
+    "magic-string": "^0.25.7",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.3.5",
     "postcss-filter-rules": "^0.6.1",
     "postcss-loader": "^4",
     "postcss-prefix-selector": "^1.9.0",
-    "prettier": "^2.4.1",
+    "prettier": "^2.6.2",
     "raw-loader": "^4.0.2",
     "rc-menu": "^9.0.14",
     "react": "^17.0.1",
@@ -124,11 +119,12 @@
     "style-loader": "^2.0.0",
     "ts-node": "^10.2.1",
     "tsconfig-paths": "^3.9.0",
-    "typescript": "^4.1.3",
+    "typescript": "4.5.4",
     "webpack": "^5.64.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.4.0",
+    "moment": "^2.25.3",
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0"
   },
@@ -136,6 +132,7 @@
     "@ant-design/icons": "^4.7.0",
     "@babel/runtime": "^7.16.5",
     "@emotion/unitless": "^0.7.5",
+    "@radix-ui/react-dropdown-menu": "^0.1.6",
     "@rollup/plugin-node-resolve": "^13.1.1",
     "@types/chroma-js": "^2.1.3",
     "antd": "4.16.8",