LP Styling with v1-alpha1 (#52)

* Add changelog

* crazy storybook

* remove babel config

* delete changel id

* add babel config

* success build

* add trigger id

* fix lint

* success linaria build

* ignore linaria cache

* Reset CSS

* add center component

* add center tag

* Add style

* add button story

* typing onclick

* fix cyan color

* add unsafe color

* add minheight

* remove storybook

.github/workflows/dev.yml

@@ -39,4 +39,4 @@ jobs:
           repoToken: "${{ secrets.GITHUB_TOKEN }}"
           firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_RE_GEO }}"
           projectId: re-geo
-          channelId: "pr-${{ github.event.number }}-${{ github.event.pull_request.head.ref }}"
+          channelId: "pr-${{ github.ref }}-${{ github.sha }}"

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist
 storybook-static
-.firebase
+.firebase
+.linaria-cache

packages/lib/CHANGELOG.md

@@ -0,0 +1,44 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/)
+and this project adheres to [Semantic Versioning](http://semver.org/).
+
+## [Unreleased]
+
+### Removed
+
+- Alerts component
+- badge component
+- gradation text component
+- outline text component
+- pager component
+- pill component
+
+### Changed
+
+- Improve performance
+  - Remove CSS in JS library
+  - update all package version
+- Improve readability
+
+## [0.0.37]
+
+### Added
+
+- alerts component
+- background component
+- badge component
+- blink component
+- button component
+- center component
+- gradation text component
+- outline text component
+- pager component
+- pill component
+- progress bar component
+- rotator component
+- typography component
+- zoom component
+- image component

packages/lib/src/components/button/index.stories.tsx

@@ -0,0 +1,41 @@
+import { Story } from "@storybook/react";
+import { ComponentProps } from "react";
+
+import { Button as Component } from "./index";
+
+export default {
+  title: "Button",
+  component: Component,
+};
+
+const Template: Story<ComponentProps<typeof Component>> = (args) => (
+  <Component {...args}>hello world!!</Component>
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  type: "primary",
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  type: "warning",
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  type: "info",
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: "large",
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: "small",
+};

packages/lib/src/components/button/index.tsx

@@ -0,0 +1,127 @@
+import { FC } from "react";
+
+import { Rainbow } from "../..";
+import {
+  BLACK,
+  CYAN,
+  GRAY,
+  GREEN,
+  RED,
+  WHITE,
+  YELLOW,
+} from "../../const/internal/color";
+import { assertNever } from "../../util/internal/assert-never";
+
+type Props = {
+  type?:
+    | "default"
+    | "primary"
+    | "info"
+    | "success"
+    | "warning"
+    | "danger"
+    | "inverse";
+  size?: "normal" | "large" | "small";
+  isDisable?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  __unsafe__style?: React.CSSProperties;
+};
+
+const DEFAULT_DISABLE = false;
+
+export const Button: FC<Props> = ({
+  children,
+  type,
+  size,
+  isDisable,
+  onClick,
+  __unsafe__style,
+}) => {
+  let skinStyle: React.CSSProperties = {};
+  switch (type) {
+    case "default":
+    case undefined:
+      skinStyle = {
+        color: GRAY,
+      };
+      break;
+    case "primary":
+      skinStyle = {
+        color: WHITE,
+        background: `#000 url(${Rainbow}) top left`,
+      };
+      break;
+    case "info":
+      skinStyle = {
+        color: WHITE,
+        backgroundColor: CYAN,
+      };
+      break;
+    case "success":
+      skinStyle = {
+        color: WHITE,
+        backgroundColor: GREEN,
+      };
+      break;
+    case "warning":
+      skinStyle = {
+        color: BLACK,
+        backgroundColor: YELLOW,
+      };
+      break;
+    case "danger":
+      skinStyle = {
+        color: WHITE,
+        backgroundColor: RED,
+      };
+      break;
+    case "inverse":
+      skinStyle = {
+        color: WHITE,
+        backgroundColor: BLACK,
+      };
+      break;
+    default:
+      assertNever(type);
+  }
+
+  let sizeStyle: React.CSSProperties = {};
+  switch (size) {
+    case "normal":
+    case undefined:
+      sizeStyle = {
+        padding: "4px 12px",
+        fontSize: 16,
+      };
+      break;
+    case "small":
+      sizeStyle = {
+        padding: "2px 8px",
+        fontSize: 12,
+      };
+      break;
+    case "large":
+      sizeStyle = {
+        padding: "12px 20px",
+        fontSize: 20,
+      };
+      break;
+    default:
+      assertNever(size);
+  }
+  return (
+    <button
+      disabled={isDisable === undefined ? DEFAULT_DISABLE : isDisable}
+      style={{
+        ...sizeStyle,
+        ...skinStyle,
+        ...__unsafe__style,
+        border: "6px ridge #bbb",
+        cursor: "pointer",
+      }}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};

packages/lib/src/components/center/index.stories.tsx

@@ -0,0 +1,32 @@
+import { Story } from "@storybook/react";
+import { ComponentProps } from "react";
+
+import { Center as Component } from "./index";
+
+export default {
+  title: "Center",
+  component: Component,
+};
+
+const Template: Story<ComponentProps<typeof Component>> = (args) => (
+  <Component {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  children: <p>hello world!!</p>,
+  isHorizontal: true,
+  isVertical: true,
+};
+
+export const OnlyHorizontal = Template.bind({});
+OnlyHorizontal.args = {
+  children: <p>hello world!!</p>,
+  isHorizontal: true,
+};
+
+export const OnlyVertical = Template.bind({});
+OnlyVertical.args = {
+  children: <p>hello world!!</p>,
+  isVertical: true,
+};

packages/lib/src/components/center/index.tsx

@@ -0,0 +1,20 @@
+import { FC } from "react";
+
+type Props = {
+  isVertical?: boolean;
+  isHorizontal?: boolean;
+  __unsafe__style?: React.CSSProperties;
+};
+
+export const Center: FC<Props> = (props) => (
+  <div
+    style={{
+      display: "flex",
+      alignItems: props.isVertical ? "center" : "inherit",
+      justifyContent: props.isHorizontal ? "center" : "inherit",
+      ...props.__unsafe__style,
+    }}
+  >
+    {props.children}
+  </div>
+);

packages/lib/src/components/index.ts

@@ -5,3 +5,5 @@ export { ProgressBar } from "./progress-bar";
 export { Rotator } from "./rotator";
 export { Headline, Text } from "./typography";
 export { Zoom } from "./zoom";
+export { Center } from "./center";
+export { Button } from "./button";

packages/lib/src/components/marquee/modern.tsx

@@ -1,23 +1,9 @@
-import { css, keyframes } from "@stitches/react";
 import { FC } from "react";
 
 type Props = {
   duration: number;
 };
 
-const Style = (
-  <style>
-    {`@keyframes toLeft {
-0% {
-    transform: translateX(100%);
-  }
-  100% {
-    transform: translateX(-100%);
-  }
-}`}
-  </style>
-);
-
 export const ModernMarquee: FC<Props> = (props) => {
   return (
     <div
@@ -27,7 +13,16 @@ export const ModernMarquee: FC<Props> = (props) => {
         position: "relative",
       }}
     >
-      {Style}
+      <style>
+        {`@keyframes toLeft {
+          0% {
+            transform: translateX(100%);
+          }
+          100% {
+            transform: translateX(-100%);
+          }
+        }`}
+      </style>
       <div
         style={{
           transform: "translateX(100%)",