@team-monolith/cds 0.4.6 → 0.5.1

package/@types/emotion.d.ts

@@ -0,0 +1,70 @@
+import "@emotion/react";
+
+interface CodleColors {
+  background: {
+    neutralBase: string;
+    neutralAlt: string;
+    neutralAltActive: string;
+    neutralAltDisabled: string;
+    primary: string;
+    primaryActive: string;
+    primaryDisabled: string;
+    secondary: string;
+    secondaryActive: string;
+    secondaryDisabled: string;
+    danger: string;
+    dangerActive: string;
+    dangerDisabled: string;
+    success: string;
+    successActive: string;
+    successDisabled: string;
+    info: string;
+    infoActive: string;
+    infoDisabled: string;
+    warning: string;
+    warningActive: string;
+    warningDisabled: string;
+  };
+  foreground: {
+    neutralBase: string;
+    neutralBaseDisabled: string;
+    neutralAlt: string;
+    neutralAltDisabled: string;
+    primary: string;
+    primaryDisabled: string;
+    secondary: string;
+    secondaryDisabled: string;
+    danger: string;
+    dangerDisabled: string;
+    success: string;
+    successDisabled: string;
+    info: string;
+    infoDisabled: string;
+    warning: string;
+    warningDisabled: string;
+  };
+  container: {
+    primaryContainer: string;
+    primaryOnContainer: string;
+    secondaryContainer: string;
+    secondaryOnContainer: string;
+    dangerContainer: string;
+    dangerOnContainer: string;
+    successContainer: string;
+    successOnContainer: string;
+    infoContainer: string;
+    infoOnContainer: string;
+    warningContainer: string;
+    warningOnContainer: string;
+    obsidianContainer: string;
+    obsidianOnContainer: string;
+    marbleContainer: string;
+    marbleOnContainer: string;
+  };
+}
+
+declare module "@emotion/react" {
+  export interface Theme {
+    color: CodleColors;
+  }
+}

package/dist/foundation/breakpoints.d.ts

@@ -0,0 +1,3 @@
+import { CSSInterpolation } from "@emotion/serialize";
+export declare const TABLET: (style: CSSInterpolation) => import("@emotion/utils").SerializedStyles;
+export declare const MOBILE: (style: CSSInterpolation) => import("@emotion/utils").SerializedStyles;

package/dist/foundation/breakpoints.js

@@ -0,0 +1,8 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css } from "@emotion/react";
+export var TABLET = function (style) { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @media (max-width: 1279px) {\n    ", "\n  }\n"], ["\n  @media (max-width: 1279px) {\n    ", "\n  }\n"])), style); };
+export var MOBILE = function (style) { return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  @media (max-width: 719px) {\n    ", "\n  }\n"], ["\n  @media (max-width: 719px) {\n    ", "\n  }\n"])), style); };
+var templateObject_1, templateObject_2;

package/dist/icons/Media/index.d.ts

@@ -1,2 +1,7 @@
-export { default as playList2FillSvg } from "remixicon/icons/Media/play-list-2-fill.svg";
-export { ReactComponent as PlayList2FillIcon } from "remixicon/icons/Media/play-list-2-fill.svg";
+/// <reference types="react" />
+export declare const PlayList2Fill: {
+    svg: string;
+    icon: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string | undefined;
+    }>;
+};

package/dist/icons/Media/index.js

@@ -1,2 +1,3 @@
-export { default as playList2FillSvg } from "remixicon/icons/Media/play-list-2-fill.svg";
-export { ReactComponent as PlayList2FillIcon } from "remixicon/icons/Media/play-list-2-fill.svg";
+import playList2FillSvg from "remixicon/icons/Media/play-list-2-fill.svg";
+import { ReactComponent as PlayList2FillIcon } from "remixicon/icons/Media/play-list-2-fill.svg";
+export var PlayList2Fill = { svg: playList2FillSvg, icon: PlayList2FillIcon };

package/dist/icons/System/index.d.ts

@@ -1,2 +1,7 @@
-export { default as refreshLineSvg } from "remixicon/icons/System/refresh-line.svg";
-export { ReactComponent as RefreshLineIcon } from "remixicon/icons/System/refresh-line.svg";
+/// <reference types="react" />
+export declare const RefreshLine: {
+    svg: string;
+    icon: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string | undefined;
+    }>;
+};

package/dist/icons/System/index.js

@@ -1,2 +1,3 @@
-export { default as refreshLineSvg } from "remixicon/icons/System/refresh-line.svg";
-export { ReactComponent as RefreshLineIcon } from "remixicon/icons/System/refresh-line.svg";
+import refreshLineSvg from "remixicon/icons/System/refresh-line.svg";
+import { ReactComponent as RefreshLineIcon } from "remixicon/icons/System/refresh-line.svg";
+export var RefreshLine = { svg: refreshLineSvg, icon: RefreshLineIcon };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../@types/emotion.d.ts" />
 export * from "./components/AlertDialog";
 export { default as Banner } from "./components/Banner";
 export * from "./components/Banner";
@@ -23,6 +24,7 @@ export { default as Tooltip } from "./components/Tooltip";
 export * from "./components/Tooltip";
 export { default as color } from "./foundation/color";
 export { default as shadows } from "./foundation/shadows";
+export * from "./foundation/breakpoints";
 export * from "./icons/brand";
 export * from "./icons/map";
 export * from "./icons/system";

package/dist/index.js

@@ -1,3 +1,4 @@
+/// <reference path="../../@types/emotion.d.ts" />
 export * from "./components/AlertDialog";
 export { default as Banner } from "./components/Banner";
 export * from "./components/Banner";
@@ -23,6 +24,7 @@ export { default as Tooltip } from "./components/Tooltip";
 export * from "./components/Tooltip";
 export { default as color } from "./foundation/color";
 export { default as shadows } from "./foundation/shadows";
+export * from "./foundation/breakpoints";
 export * from "./icons/brand";
 export * from "./icons/map";
 export * from "./icons/system";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "0.4.6",
+  "version": "0.5.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -16,17 +16,21 @@
     "typescript": "^4.5.5"
   },
   "files": [
-    "dist/**/*"
+    "dist/**/*",
+    "@types/**/*"
   ],
   "scripts": {
     "clean": "rimraf dist",
     "compile": "npm run clean && mkdir dist && tsc && npm run postbundle",
-    "postbundle": "copyfiles -u 2 src/cds/**/*.{svg,jpg,png} dist/"
+    "postbundle": "copyfiles -u 2 src/cds/**/*.{svg,jpg,png} dist/",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
-      "react-app/jest"
+      "react-app/jest",
+      "plugin:storybook/recommended"
     ]
   },
   "browserslist": {
@@ -42,7 +46,21 @@
     ]
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.22.7",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@storybook/addon-essentials": "^7.0.26",
+    "@storybook/addon-interactions": "^7.0.26",
+    "@storybook/addon-links": "^7.0.26",
+    "@storybook/blocks": "^7.0.26",
+    "@storybook/react": "^7.0.26",
+    "@storybook/react-webpack5": "^7.0.26",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "@types/webpack-env": "^1.18.1",
     "copyfiles": "^2.4.1",
-    "rimraf": "^5.0.1"
+    "eslint-plugin-storybook": "^0.6.12",
+    "prop-types": "^15.8.1",
+    "rimraf": "^5.0.1",
+    "storybook": "^7.0.26"
   }
 }