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

package/src/foundation/colors/types.ts

@@ -0,0 +1,85 @@
+type CSSPropertyColor = React.CSSProperties["color"];
+
+export interface ColorToken {
+  core: {
+    bg_01: CSSPropertyColor;
+    bg_02: CSSPropertyColor;
+    bg_03: CSSPropertyColor;
+    text_primary: CSSPropertyColor;
+    text_normal: CSSPropertyColor;
+    text_medium: CSSPropertyColor;
+    text_light: CSSPropertyColor;
+    text_error: CSSPropertyColor;
+    text_success: CSSPropertyColor;
+    text_warning: CSSPropertyColor;
+    text_info: CSSPropertyColor;
+    link_primary: CSSPropertyColor;
+    link_hover: CSSPropertyColor;
+    link_visited: CSSPropertyColor;
+    icon_error_02: CSSPropertyColor;
+    icon_success_02: CSSPropertyColor;
+    icon_warning_02: CSSPropertyColor;
+    icon_info_02: CSSPropertyColor;
+    hover: CSSPropertyColor;
+    focused: CSSPropertyColor;
+    shadow_01: CSSPropertyColor;
+    shadow_02: CSSPropertyColor;
+    shadow_03: CSSPropertyColor;
+    shadow_04: CSSPropertyColor;
+  };
+  component: {
+    btn_contained_primary_bg: CSSPropertyColor;
+    btn_contained_primary_text: CSSPropertyColor;
+    btn_contained_secondary_bg: CSSPropertyColor;
+    btn_contained_secondary_text: CSSPropertyColor;
+    btn_contained_error_bg: CSSPropertyColor;
+    btn_contained_error_text: CSSPropertyColor;
+    btn_outlined_primary_border: CSSPropertyColor;
+    btn_outlined_primary_text: CSSPropertyColor;
+    btn_ghost_primary_text: CSSPropertyColor;
+    btn_ghost_secondary_text: CSSPropertyColor;
+    btn_ghost_error_text: CSSPropertyColor;
+    btn_selected_primary_bg: CSSPropertyColor;
+    btn_selected_primary_text: CSSPropertyColor;
+    btn_selected_secondary_bg: CSSPropertyColor;
+    btn_selected_secondary_text: CSSPropertyColor;
+    selectcontrol_on: CSSPropertyColor;
+    selectcontrol_off: CSSPropertyColor;
+    selectcontrol_handler: CSSPropertyColor;
+    selectcontrol_handler_shadow: CSSPropertyColor;
+    textfield_bg: CSSPropertyColor;
+    textfield_border_error: CSSPropertyColor;
+    dropdown_option_selected: CSSPropertyColor;
+    dropdown_divider_border: CSSPropertyColor;
+    dropdown_option_activatied: CSSPropertyColor;
+    datatable_cell_selected: CSSPropertyColor;
+    datatable_border_01: CSSPropertyColor;
+    datatable_border_02: CSSPropertyColor;
+    datatable_zebra: CSSPropertyColor;
+    scrollbars_bg: CSSPropertyColor;
+    scrollbars_hover: CSSPropertyColor;
+    scrollbars_pressed: CSSPropertyColor;
+    modal_overlay: CSSPropertyColor;
+    tooltip_bg: CSSPropertyColor;
+    tooltip_text_normal: CSSPropertyColor;
+    tooltip_text_medium: CSSPropertyColor;
+    alert_error_bg: CSSPropertyColor;
+    alert_error_border: CSSPropertyColor;
+    alert_success_bg: CSSPropertyColor;
+    alert_success_border: CSSPropertyColor;
+    alert_info_bg: CSSPropertyColor;
+    alert_info_border: CSSPropertyColor;
+    alert_warning_bg: CSSPropertyColor;
+    alert_warning_border: CSSPropertyColor;
+    chip_primary_bg: CSSPropertyColor;
+    chip_primary_text: CSSPropertyColor;
+    chip_secondary_bg: CSSPropertyColor;
+    chip_secondary_text: CSSPropertyColor;
+    chip_error_bg: CSSPropertyColor;
+    chip_error_text: CSSPropertyColor;
+    chip_warning_bg: CSSPropertyColor;
+    chip_warning_text: CSSPropertyColor;
+    chip_success_bg: CSSPropertyColor;
+    chip_success_text: CSSPropertyColor;
+  };
+}

package/src/foundation/index.ts

@@ -0,0 +1,25 @@
+import { Components, Theme } from "@mui/material";
+import { deepmerge } from "@mui/utils";
+import paletteOptions, { createColorCssBaseline } from "./colors";
+import typographyOptions, {
+  createTypographyCssBaseline,
+  typographyDefaultProps,
+} from "./Typography";
+import { createElevationCssBaseline, elevationOptions } from "./Elevation";
+
+export const foundationCssBaseline: Components<Theme>["MuiCssBaseline"] = {
+  styleOverrides: deepmerge(
+    deepmerge(createTypographyCssBaseline(), createColorCssBaseline()),
+    createElevationCssBaseline()
+  ),
+};
+
+export const typography = typographyOptions;
+
+export { typographyDefaultProps };
+
+export const palette = paletteOptions;
+
+export const elevation = elevationOptions;
+
+export { spacing } from "./spacing";

package/src/foundation/spacing.ts

@@ -0,0 +1,3 @@
+import { SpacingOptions } from "@mui/system";
+
+export const spacing: SpacingOptions = 4;

package/src/index.ts

@@ -0,0 +1,17 @@
+export { default as theme } from "./theme";
+
+export { default as Alert } from "./components/Alert";
+export { default as Button } from "./components/Button";
+export { default as Chip } from "./components/Chip";
+export { default as DataTable } from "./components/DataTable";
+export { default as DatePicker } from "./components/DatePicker";
+export { default as Dropdown } from "./components/Dropdown";
+export { default as FormLabel } from "./components/FormLabel";
+export { default as Modal } from "./components/Modal";
+export { default as Radio } from "./components/Radio";
+export { default as RadioGroup } from "./components/RadioGroup";
+export { default as TextField } from "./components/TextField";
+export { default as Toggle } from "./components/Toggle";
+export { default as ToggleButton } from "./components/ToggleButton";
+export { default as ToggleButtonGroup } from "./components/ToggleButtonGroup";
+export { default as Tooltip } from "./components/Tooltip";

package/src/stories/components/Alert/Alert.stories.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Alert from "@/components/Alert";
+
+export default {
+  title: "Components/Alert",
+  component: Alert,
+} as ComponentMeta<typeof Alert>;
+
+const Template: ComponentStory<typeof Alert> = () => <Alert />;
+
+export const LunitAlert = Template.bind({});

package/src/stories/components/Button/BasicButton.stories.tsx

@@ -0,0 +1,177 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableCell,
+} from "@mui/material";
+import { Bell } from "@lunit/design-system-icons";
+
+import Button from "@/components/Button";
+
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { ButtonProps } from "@/components/Button/Button.types";
+
+type Size = Pick<ButtonProps, "size">;
+type SizeValues = Size[keyof Size];
+const sizeList: SizeValues[] = ["small", "medium", "large"];
+
+export default {
+  title: "Components/Button",
+  component: Button,
+  argTypes: {
+    icon: {
+      control: false,
+      description: `Use this prop when you want to add icon.
+        \n It is added to the left of the text criteria,
+        \n and only Icon can be checked when used with hasIconOnly.`,
+      table: {
+        defaultValue: { summary: "undefined" },
+        type: { summary: "React.ReactNode" },
+      },
+    },
+    hasIconOnly: {
+      control: {
+        type: "boolean",
+      },
+      description: `Option to handle so that only icons can be inserted
+          \n If set to false, you can add Text.`,
+      defaultValue: false,
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    children: {
+      type: "string",
+      defaultValue: "Text",
+    },
+    kind: {
+      control: {
+        type: "radio",
+      },
+      options: ["contained", "outlined", "ghost"],
+      description: "Button has three Kinds Contained, Outlined, Ghost",
+      defaultValue: "contained",
+      table: {
+        defaultValue: { summary: "contained" },
+      },
+    },
+    color: {
+      control: {
+        type: "radio",
+      },
+      options: ["primary", "secondary", "error"],
+      defaultValue: "primary",
+      table: {
+        defaultValue: { summary: "primary" },
+      },
+    },
+    disabled: {
+      control: {
+        type: "boolean",
+      },
+      defaultValue: false,
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    size: {
+      control: {
+        type: "radio",
+      },
+      options: ["small", "medium", "large"],
+      defaultValue: "small",
+      table: {
+        defaultValue: { summary: "small" },
+      },
+    },
+    onClick: {
+      type: "function",
+      control: {
+        type: "radio",
+      },
+      options: ["function", undefined],
+      mapping: {
+        function: action("onClick"),
+        undefined: undefined,
+      },
+      defaultValue: "function",
+      description:
+        "It is a callback function that is called when the button is clicked.",
+    },
+  },
+  parameters: {
+    controls: {
+      include: [
+        "onClick",
+        "children",
+        "disabled",
+        "size",
+        "kind",
+        "color",
+        "icon",
+        "hasIconOnly",
+      ],
+    },
+    docs: {
+      description: {
+        component: `It is a Clickable default Button. For more details, please
+				see [Material-UI Button](https://mui.com/material-ui/react-button/).`,
+      },
+    },
+  },
+} as ComponentMeta<typeof Button>;
+
+export const BasicButton: ComponentStory<typeof Button> = (args) => (
+  <Button {...args}>{args.children}</Button>
+);
+
+const SizeButtonTemplate: ComponentStory<typeof Button> = (args) => {
+  return (
+    <Table sx={{ width: 900 }}>
+      <TableHead>
+        <TableRow>
+          <TableCell
+            colSpan={3}
+            sx={{
+              typography: "body1_16_semibold",
+              color: "inherit",
+            }}
+          >
+            Size
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Small
+          </TableCell>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Medium
+          </TableCell>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Large
+          </TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          {sizeList.map((size) => (
+            <TableCell key={size} sx={{ "& button": { marginRight: "10px" } }}>
+              <Button {...args} icon={<Bell />} size={size} />
+              <Button {...args} size={size}>
+                {args.children}
+              </Button>
+              <Button {...args} icon={<Bell />} size={size}>
+                {args.children}
+              </Button>
+            </TableCell>
+          ))}
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+
+export const Size = SizeButtonTemplate.bind({});

package/src/stories/components/Button/IconButton.stories.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import { Bell } from "@lunit/design-system-icons";
+import { action } from "@storybook/addon-actions";
+
+import Button from "@/components/Button";
+
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+
+export default {
+  title: "Components/Button",
+  component: Button,
+  argTypes: {
+    icon: {
+      control: false,
+      description: `Use this prop when you want to add icon.
+        \n It is added to the left of the text criteria,
+        \n and only Icon can be checked when used with hasIconOnly.`,
+      table: {
+        defaultValue: { summary: "undefined" },
+        type: { summary: "React.ReactNode" },
+      },
+    },
+    kind: {
+      control: {
+        type: "radio",
+      },
+      options: ["contained", "outlined", "ghost"],
+      description: "Button has three Kinds Contained, Outlined, Ghost",
+      defaultValue: "contained",
+      table: {
+        defaultValue: { summary: "contained" },
+      },
+    },
+    color: {
+      control: {
+        type: "radio",
+      },
+      options: ["primary", "secondary", "error"],
+      defaultValue: "primary",
+      table: {
+        defaultValue: { summary: "primary" },
+      },
+    },
+    disabled: {
+      control: {
+        type: "boolean",
+      },
+      defaultValue: false,
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    size: {
+      control: {
+        type: "radio",
+      },
+      options: ["small", "medium", "large"],
+      defaultValue: "small",
+      table: {
+        defaultValue: { summary: "small" },
+      },
+    },
+    onClick: {
+      type: "function",
+      control: {
+        type: "radio",
+      },
+      options: ["function", undefined],
+      mapping: {
+        function: action("onClick"),
+        undefined: undefined,
+      },
+      defaultValue: "function",
+      description:
+        "It is a callback function that is called when the button is clicked.",
+    },
+  },
+  parameters: {
+    controls: {
+      include: [
+        "children",
+        "icon",
+        "onClick",
+        "hasIconOnly",
+        "disabled",
+        "size",
+        "kind",
+        "color",
+      ],
+    },
+    docs: {
+      description: {
+        component: `It is a Clickable Icon Button. For more details, please
+				see [Material-UI Button](https://mui.com/material-ui/react-button/).`,
+      },
+    },
+  },
+} as ComponentMeta<typeof Button>;
+
+const IconButtonTemplate: ComponentStory<typeof Button> = (args) => (
+  <Button icon={<Bell />} {...args}>
+    {args.children}
+  </Button>
+);
+
+export const IconOnlyButton = IconButtonTemplate.bind({});
+IconOnlyButton.argTypes = {
+  children: {
+    control: false,
+    type: "string",
+    table: {
+      defaultValue: { summary: "undefined" },
+    },
+  },
+};
+IconOnlyButton.storyName = "Icon only";
+
+export const IconWithTextButton = IconButtonTemplate.bind({});
+IconWithTextButton.argTypes = {
+  children: {
+    type: "string",
+    defaultValue: "Text",
+    table: {
+      defaultValue: { summary: "undefined" },
+    },
+  },
+};
+IconWithTextButton.storyName = "Icon";