@lunit/design-system 1.0.0-a.1 → 1.0.0-a.3

package/src/theme.ts

@@ -0,0 +1,46 @@
+import { deepmerge } from "@mui/utils";
+import { ComponentsOverrides, createTheme } from "@mui/material";
+import {
+  foundationCssBaseline,
+  palette,
+  typography,
+  typographyDefaultProps,
+  spacing,
+} from "./foundation";
+import { componentsCssBaseline } from "./components";
+
+const theme = createTheme({
+  typography,
+  palette,
+  spacing,
+  components: {
+    MuiCssBaseline: deepmerge(foundationCssBaseline, componentsCssBaseline),
+    MuiPaper: {
+      styleOverrides: {
+        // css-in-js이기 때문에 MuiPaper-root class에만 추가해도
+        // Paper 컴포넌트를 쓰는 모든 스타일에서 명시도 역전이 발생하지 않음
+        root: {
+          boxShadow: "var(--elevation-shadow)",
+        },
+      },
+    },
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          boxShadow: "var(--elevation-shadow)",
+        },
+      },
+    },
+    MuiTypography: {
+      defaultProps: typographyDefaultProps,
+    },
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true, // No more ripple, on the whole application 💣!
+      },
+    },
+    // @todo add any MUI components theme exported from ./components/index.ts
+  },
+});
+
+export default theme;

package/src/types.d.ts

@@ -0,0 +1,4 @@
+declare module "*.mdx" {
+  const docs: any; // Add better type definitions here if desired.
+  export default docs;
+}

package/tsconfig.build.json

@@ -1,8 +1,10 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
+    "target": "esnext",
     "outDir": "./dist",
     "declaration": true,
+    "declarationDir": "./dist/types",
     "jsx": "react-jsx",
     "baseUrl": "./",
     "paths": {

package/dist/components/Alert/Alert.d.ts

@@ -1,2 +0,0 @@
-declare const Alert: () => JSX.Element;
-export default Alert;

package/dist/components/Button/Button.d.ts

@@ -1,3 +0,0 @@
-import type { ButtonProps } from "./Button.types";
-declare const Button: (props: Omit<ButtonProps, "hasIconOnly">) => JSX.Element;
-export default Button;

package/dist/components/Chip/Chip.styled.d.ts

@@ -1,41 +0,0 @@
-/// <reference types="react" />
-import type { Theme } from "@mui/material/styles";
-import type { OutlinedChipProps, BaseContainedChipProps } from "./Chip.types";
-export declare const StyledOutlinedChip: import("@emotion/styled").StyledComponent<{
-    avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    children?: null | undefined;
-    classes?: Partial<import("@mui/material").ChipClasses> | undefined;
-    clickable?: boolean | undefined;
-    color?: "default" | "primary" | "secondary" | "error" | "warning" | "success" | "info" | undefined;
-    deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    disabled?: boolean | undefined;
-    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    label?: import("react").ReactNode;
-    onDelete?: ((event: any) => void) | undefined;
-    size?: "small" | "medium" | undefined;
-    skipFocusWhenDisabled?: boolean | undefined;
-    sx?: import("@mui/material").SxProps<Theme> | undefined;
-    tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "color" | "label" | "children" | "sx" | "tabIndex" | "disabled" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "variant"> & import("@mui/system").MUIStyledCommonProps<Theme> & OutlinedChipProps, {}, {}>;
-export declare const StyledContainedChip: import("@emotion/styled").StyledComponent<{
-    avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    children?: null | undefined;
-    classes?: Partial<import("@mui/material").ChipClasses> | undefined;
-    clickable?: boolean | undefined;
-    color?: "default" | "primary" | "secondary" | "error" | "warning" | "success" | "info" | undefined;
-    deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    disabled?: boolean | undefined;
-    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    label?: import("react").ReactNode;
-    onDelete?: ((event: any) => void) | undefined;
-    size?: "small" | "medium" | undefined;
-    skipFocusWhenDisabled?: boolean | undefined;
-    sx?: import("@mui/material").SxProps<Theme> | undefined;
-    tabIndex?: number | undefined;
-    variant?: "outlined" | "filled" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "color" | "label" | "children" | "sx" | "tabIndex" | "disabled" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "variant"> & import("@mui/system").MUIStyledCommonProps<Theme> & BaseContainedChipProps, {}, {}>;

package/dist/components/HelloWorld/HelloWorld.d.ts

@@ -1,28 +0,0 @@
-import "./hello-world.css";
-interface HelloWorldProps {
-    /**
-     * Is this the principal call to action on the page?
-     */
-    primary?: boolean;
-    /**
-     * What background color to use
-     */
-    backgroundColor?: string;
-    /**
-     * How large should the button be?
-     */
-    size?: "small" | "medium" | "large";
-    /**
-     * Button contents
-     */
-    label: string;
-    /**
-     * Optional click handler
-     */
-    onClick?: () => void;
-}
-/**
- * Primary UI component for user interaction
- */
-export declare const HelloWorld: ({ primary, size, backgroundColor, label, ...props }: HelloWorldProps) => JSX.Element;
-export {};

package/dist/components/TextField/TextField.d.ts

@@ -1,2 +0,0 @@
-declare const TextField: () => JSX.Element;
-export default TextField;

package/dist/components/TextField/index.d.ts

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

package/webpack.config.js

@@ -1,51 +0,0 @@
-const glob = require("glob");
-const path = require("path");
-const nodeExternals = require("webpack-node-externals");
-const alias = require("./config/alias");
-
-console.log(path.resolve(__dirname, "src"));
-
-module.exports = {
-  mode: "production",
-  entry: "./src/index.ts",
-  entry: glob.sync("./src/components/*/index.ts").reduce(
-    function (obj, el) {
-      const name = el.substring(6 /* ./src/ */, el.lastIndexOf("/"));
-      obj[name] = el;
-      return obj;
-    },
-    { main: "./src/index.ts" }
-  ),
-  output: {
-    path: path.resolve(__dirname, "dist"),
-    filename: (pathData) => {
-      return pathData.chunk.name === "main" ? "index.js" : "[name]/index.js";
-    },
-    library: {
-      type: "commonjs-static",
-    },
-    clean: true,
-  },
-  devtool: "source-map",
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        loader: "ts-loader",
-        exclude: /node_modules/,
-        options: {
-          configFile: "tsconfig.build.json",
-        },
-      },
-    ],
-  },
-  resolve: {
-    alias,
-    extensions: [".tsx", ".ts", ".js"],
-  },
-  externals: [
-    nodeExternals({
-      modulesFromFile: true,
-    }),
-  ],
-};