chore: set custom theme

.gitignore

@@ -102,3 +102,4 @@ dist
 
 # TernJS port file
 .tern-port
+.DS_Store

.storybook/index.js

@@ -0,0 +1,84 @@
+module.exports = {
+  '@primary-color': '#108de4',
+  '@success-color': '#39d2da',
+  '@body-background': '#0b0321',
+  '@component-background': '#190f2e',
+  '@icon-color-hover': 'fade(@white, 75%)',
+  '@heading-color': 'fade(@white, 85%)',
+  '@text-color': 'fade(@white, 65%)',
+  '@text-color-secondary': '#9ca6bd',
+  '@text-color-inverse': '#ffffff',
+  '@heading-color-dark': '#ffffff',
+  '@text-color-dark': '#9ca6bd',
+  '@text-color-secondary-dark': '#ffffff',
+  '@border-color-base': '#434343',
+  '@border-color-split': '@popover-background',
+  '@border-style-base': 'solid',
+  '@layout-body-background': '@body-background',
+  '@layout-header-background': '@component-background',
+  '@layout-sider-background': '@component-background',
+  '@layout-trigger-background': '@component-background',
+  '@font-family': 'Manrope, sans-serif',
+  '@font-feature-settings-base': 'tnum',
+  '@disabled-color': 'fade(@white, 30%)',
+  '@disabled-color-dark': 'fade(@white, 30%)',
+  '@link-hover-decoration': 'underline',
+  '@background-color-light': 'fade(@white, 4%)',
+  '@background-color-base': 'fade(@white, 8%)',
+  '@item-hover-bg': 'fade(@white, 8%)',
+  '@shadow-color': 'rgba(0, 0, 0, 0.45)',
+  '@shadow-1-up': '0 -6px 16px -8px rgba(0, 0, 0, 0.24), 0 -9px 28px 0 rgba(0, 0, 0, 0.15),
+  0 -12px 48px 16px rgba(0, 0, 0, 0.09)',
+  '@shadow-1-down': '0 6px 16px -8px rgba(0, 0, 0, 0.24), 0 9px 28px 0 rgba(0, 0, 0, 0.15),
+  0 12px 48px 16px rgba(0, 0, 0, 0.09)',
+  '@shadow-1-left': '-6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05),
+  -12px 0 48px 16px rgba(0, 0, 0, 0.03)',
+  '@shadow-1-right': '6px 0 16px -8px rgba(0, 0, 0, 0.24), 9px 0 28px 0 rgba(0, 0, 0, 0.15),
+  12px 0 48px 16px rgba(0, 0, 0, 0.09)',
+  '@shadow-2': '0 3px 6px -4px rgba(0, 0, 0, 0.36), 0 6px 16px 0 rgba(0, 0, 0, 0.24),
+  0 9px 28px 8px rgba(0, 0, 0, 0.15)',
+  '@btn-font-weight': '700',
+  '@btn-shadow': '0 4px 17px rgba(74,144,226,.5)',
+  '@btn-primary-shadow': '0 4px 17px rgba(74,144,226,.5)',
+  '@btn-primary-color': '#f5f8fb',
+  '@btn-default-bg': 'transparent',
+  '@checkbox-size': '18px',
+  '@radio-size': '18px',
+  '@screen-sm': '640px',
+  '@screen-lg': '1024px',
+  '@screen-xl': '1280px',
+  '@screen-xxl': '1536px',
+  '@input-placeholder-color': 'fade(@white, 30%)',
+  '@input-bg': 'transparent',
+  '@input-number-handler-active-bg': '@popover-background',
+  '@select-item-selected-font-weight': '600',
+  '@tooltip-bg': '#434343',
+  '@popover-bg': '@popover-background',
+  '@modal-header-bg': '@popover-background',
+  '@menu-popup-bg': '@popover-background',
+  '@menu-dark-submenu-bg': '@black',
+  '@table-header-bg': '#1d1d1d',
+  '@table-header-sort-bg': '#262626',
+  '@table-body-sort-bg': 'fade(@white, 1%)',
+  '@table-row-hover-bg': '#262626',
+  '@tag-font-size': '@font-size-base',
+  '@badge-text-color': '@white',
+  '@card-actions-background': 'fade(@white, 4%)',
+  '@card-shadow': '0 1px 2px -2px rgba(0, 0, 0, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36),
+  0 5px 12px 4px rgba(0, 0, 0, 0.27)',
+  '@avatar-bg': '#5a5a5a',
+  '@pagination-item-bg-active': 'transparent',
+  '@slider-rail-background-color': 'fade(@white, 20%)',
+  '@slider-rail-background-color-hover': '@slider-rail-background-color',
+  '@slider-track-background-color': '@primary-color',
+  '@slider-handle-color': '@primary-color',
+  '@skeleton-color': '#303030',
+  '@alert-success-border-color': '@green-3',
+  '@alert-success-bg-color': '@green-1',
+  '@alert-info-border-color': '@blue-3',
+  '@alert-info-bg-color': '@blue-1',
+  '@alert-warning-border-color': '@gold-3',
+  '@alert-warning-bg-color': '@gold-1',
+  '@alert-error-border-color': '@red-3',
+  '@alert-error-bg-color': '@red-1',
+};

.storybook/index.less

@@ -0,0 +1,84 @@
+@import '~antd/lib/style/themes/default.less';
+
+@primary-color: #108de4;
+@success-color: #39d2da;
+@body-background: #0b0321;
+@component-background: #190f2e;
+@icon-color-hover: fade(@white, 75%);
+@heading-color: fade(@white, 85%);
+@text-color: fade(@white, 65%);
+@text-color-secondary: #9ca6bd;
+@text-color-inverse: #ffffff;
+@heading-color-dark: #ffffff;
+@text-color-dark: #9ca6bd;
+@text-color-secondary-dark: #ffffff;
+@border-color-base: #434343;
+@border-color-split: @popover-background;
+@border-style-base: solid;
+@layout-body-background: @body-background;
+@layout-header-background: @component-background;
+@layout-sider-background: @component-background;
+@layout-trigger-background: @component-background;
+@font-family: Manrope, sans-serif;
+@font-feature-settings-base: tnum;
+@disabled-color: fade(@white, 30%);
+@disabled-color-dark: fade(@white, 30%);
+@link-hover-decoration: underline;
+@background-color-light: fade(@white, 4%);
+@background-color-base: fade(@white, 8%);
+@item-hover-bg: fade(@white, 8%);
+@shadow-color: rgba(0, 0, 0, 0.45);
+@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.24), 0 -9px 28px 0 rgba(0, 0, 0, 0.15),
+  0 -12px 48px 16px rgba(0, 0, 0, 0.09);
+@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.24), 0 9px 28px 0 rgba(0, 0, 0, 0.15),
+  0 12px 48px 16px rgba(0, 0, 0, 0.09);
+@shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05),
+  -12px 0 48px 16px rgba(0, 0, 0, 0.03);
+@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.24), 9px 0 28px 0 rgba(0, 0, 0, 0.15),
+  12px 0 48px 16px rgba(0, 0, 0, 0.09);
+@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.36), 0 6px 16px 0 rgba(0, 0, 0, 0.24),
+  0 9px 28px 8px rgba(0, 0, 0, 0.15);
+@btn-font-weight: 700;
+@btn-shadow: 0 4px 17px rgba(74,144,226,.5);
+@btn-primary-shadow: 0 4px 17px rgba(74,144,226,.5);
+@btn-primary-color: #f5f8fb;
+@btn-default-bg: transparent;
+@checkbox-size: 18px;
+@radio-size: 18px;
+@screen-sm: 640px;
+@screen-lg: 1024px;
+@screen-xl: 1280px;
+@screen-xxl: 1536px;
+@input-placeholder-color: fade(@white, 30%);
+@input-bg: transparent;
+@input-number-handler-active-bg: @popover-background;
+@select-item-selected-font-weight: 600;
+@tooltip-bg: #434343;
+@popover-bg: @popover-background;
+@modal-header-bg: @popover-background;
+@menu-popup-bg: @popover-background;
+@menu-dark-submenu-bg: @black;
+@table-header-bg: #1d1d1d;
+@table-header-sort-bg: #262626;
+@table-body-sort-bg: fade(@white, 1%);
+@table-row-hover-bg: #262626;
+@tag-font-size: @font-size-base;
+@badge-text-color: @white;
+@card-actions-background: fade(@white, 4%);
+@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36),
+  0 5px 12px 4px rgba(0, 0, 0, 0.27);
+@avatar-bg: #5a5a5a;
+@pagination-item-bg-active: transparent;
+@slider-rail-background-color: fade(@white, 20%);
+@slider-rail-background-color-hover: @slider-rail-background-color;
+@slider-track-background-color: @primary-color;
+@slider-handle-color: @primary-color;
+@skeleton-color: #303030;
+@alert-success-border-color: @green-3;
+@alert-success-bg-color: @green-1;
+@alert-info-border-color: @blue-3;
+@alert-info-bg-color: @blue-1;
+@alert-warning-border-color: @gold-3;
+@alert-warning-bg-color: @gold-1;
+@alert-error-border-color: @red-3;
+@alert-error-bg-color: @red-1;

.storybook/main.js

@@ -1,10 +1,32 @@
+const path = require('path');
+
 module.exports = {
   "stories": [
     "../src/**/*.stories.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
   "addons": [
     "@storybook/addon-links",
-    "@storybook/addon-essentials"
-  ]
-}
+    "@storybook/addon-essentials",
+    {
+      name: '@storybook/preset-ant-design',
+      options: {
+        lessOptions: {
+          modifyVars: {
+            'primary-color': '#1DA57A',
+            'border-radius-base': '2px',
+          }
+        }
+      }
+    }
+  ],
+  webpackFinal: async (config, { configType }) => {
+    config.module.rules.push({
+      test: /\.less$/,
+      use: ['style-loader', 'css-loader', { loader: 'less-loader', options: { lessOptions: { javascriptEnabled: true }}}],
+      include: path.resolve(__dirname, '../'),
+    });
+
+    return config;
+  },
+}

.storybook/preview.js

@@ -1,4 +1,5 @@
+import 'antd/dist/antd.css';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
-}
+}

.storybook/theme.js

@@ -0,0 +1,78 @@
+module.exports = {
+  '@primary-color': '#108de4',
+  '@success-color': '#39d2da',
+  '@body-background': '#0b0321',
+  '@component-background': '#190f2e',
+  '@icon-color-hover': 'fade(@white, 75%)',
+  '@heading-color': 'fade(@white, 85%)',
+  '@text-color': 'fade(@white, 65%)',
+  '@text-color-secondary': '#9ca6bd',
+  '@text-color-inverse': '#ffffff',
+  '@heading-color-dark': '#ffffff',
+  '@text-color-dark': '#9ca6bd',
+  '@text-color-secondary-dark': '#ffffff',
+  '@border-color-base': '#434343',
+  '@border-color-split': '@popover-background',
+  '@border-style-base': 'solid',
+  '@layout-body-background': '@body-background',
+  '@layout-header-background': '@component-background',
+  '@layout-sider-background': '@component-background',
+  '@layout-trigger-background': '@component-background',
+  '@font-family': 'Manrope, sans-serif',
+  '@font-feature-settings-base': 'tnum',
+  '@disabled-color': 'fade(@white, 30%)',
+  '@disabled-color-dark': 'fade(@white, 30%)',
+  '@link-hover-decoration': 'underline',
+  '@background-color-light': 'fade(@white, 4%)',
+  '@background-color-base': 'fade(@white, 8%)',
+  '@item-hover-bg': 'fade(@white, 8%)',
+  '@shadow-color': 'rgba(0, 0, 0, 0.45)',
+  '@shadow-1-up': '0 -6px 16px -8px rgba(0, 0, 0, 0.24), 0 -9px 28px 0 rgba(0, 0, 0, 0.15), 0 -12px 48px 16px rgba(0, 0, 0, 0.09)',
+  '@shadow-1-down': '0 6px 16px -8px rgba(0, 0, 0, 0.24), 0 9px 28px 0 rgba(0, 0, 0, 0.15), 0 12px 48px 16px rgba(0, 0, 0, 0.09)',
+  '@shadow-1-left': '-6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03)',
+  '@shadow-1-right': '6px 0 16px -8px rgba(0, 0, 0, 0.24), 9px 0 28px 0 rgba(0, 0, 0, 0.15), 12px 0 48px 16px rgba(0, 0, 0, 0.09)',
+  '@shadow-2': '0 3px 6px -4px rgba(0, 0, 0, 0.36), 0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 9px 28px 8px rgba(0, 0, 0, 0.15)',
+  '@btn-font-weight': '700',
+  '@btn-shadow': '0 4px 17px rgba(74,144,226,.5)',
+  '@btn-primary-shadow': '0 4px 17px rgba(74,144,226,.5)',
+  '@btn-primary-color': '#f5f8fb',
+  '@btn-default-bg': 'transparent',
+  '@checkbox-size': '18px',
+  '@radio-size': '18px',
+  '@screen-sm': '640px',
+  '@screen-lg': '1024px',
+  '@screen-xl': '1280px',
+  '@screen-xxl': '1536px',
+  '@input-placeholder-color': 'fade(@white, 30%)',
+  '@input-bg': 'transparent',
+  '@input-number-handler-active-bg': '@popover-background',
+  '@select-item-selected-font-weight': '600',
+  '@tooltip-bg': '#434343',
+  '@popover-bg': '@popover-background',
+  '@modal-header-bg': '@popover-background',
+  '@menu-popup-bg': '@popover-background',
+  '@menu-dark-submenu-bg': '@black',
+  '@table-header-bg': '#1d1d1d',
+  '@table-header-sort-bg': '#262626',
+  '@table-body-sort-bg': 'fade(@white, 1%)',
+  '@table-row-hover-bg': '#262626',
+  '@tag-font-size': '@font-size-base',
+  '@badge-text-color': '@white',
+  '@card-actions-background': 'fade(@white, 4%)',
+  '@card-shadow': '0 1px 2px -2px rgba(0, 0, 0, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36), 0 5px 12px 4px rgba(0, 0, 0, 0.27)',
+  '@avatar-bg': '#5a5a5a',
+  '@pagination-item-bg-active': 'transparent',
+  '@slider-rail-background-color': 'fade(@white, 20%)',
+  '@slider-rail-background-color-hover': '@slider-rail-background-color',
+  '@slider-track-background-color': '@primary-color',
+  '@slider-handle-color': '@primary-color',
+  '@skeleton-color': '#303030',
+  '@alert-success-border-color': '@green-3',
+  '@alert-success-bg-color': '@green-1',
+  '@alert-info-border-color': '@blue-3',
+  '@alert-info-bg-color': '@blue-1',
+  '@alert-warning-border-color': '@gold-3',
+  '@alert-warning-bg-color': '@gold-1',
+  '@alert-error-border-color': '@red-3',
+  '@alert-error-bg-color': '@red-1',
+};

package.json

@@ -21,16 +21,21 @@
     "@storybook/addon-actions": "^6.1.10",
     "@storybook/addon-essentials": "^6.1.10",
     "@storybook/addon-links": "^6.1.10",
+    "@storybook/preset-ant-design": "^0.0.1",
+    "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.1.10",
     "@types/react": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.9.1",
     "@typescript-eslint/parser": "^4.9.1",
     "babel-loader": "^8.2.2",
+    "css-loader": "^5.0.1",
     "eslint": "^7.15.0",
     "eslint-config-prettier": "^7.0.0",
     "eslint-plugin-eslint-plugin": "^2.3.0",
     "eslint-plugin-prettier": "^3.2.0",
     "prettier": "^2.2.1",
+    "sass-loader": "^10.1.0",
+    "style-loader": "^2.0.0",
     "typescript": "^4.1.2"
   }
 }

src/components/Button.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import { Button } from './Button';
+
+export default {
+  title: 'DX/Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+
+export const Primary: React.VFC = () => <Button type="primary">Primary Button</Button>;
+
+export const Default: React.VFC = () => <Button>Default Button</Button>;
+
+export const Dashed: React.VFC = () => <Button type="dashed">Dashed Button</Button>;
+
+export const Text: React.VFC = () => <Button type="text">Text Button</Button>;
+
+export const Link: React.VFC = () => <Button type="link">Link Button</Button>;
+
+export const PrimaryDanger: React.VFC = () => <Button type="primary" danger>PrimaryDanger Button</Button>;
+
+export const Danger: React.VFC = () => <Button danger>Danger Button</Button>;
+
+// const Template: Story<ButtonProps> = (args) => <Button {...args} />;
+
+// export const Primary = Template.bind({});
+// Primary.args = {
+//   typpe: "primary",
+//   label: 'Button',
+// };
+
+// export const Secondary = Template.bind({});
+// Secondary.args = {
+//   label: 'Button',
+// };
+
+// export const Large = Template.bind({});
+// Large.args = {
+//   size: 'large',
+//   label: 'Button',
+// };
+
+// export const Small = Template.bind({});
+// Small.args = {
+//   size: 'small',
+//   label: 'Button',
+// };

src/components/Button.tsx

@@ -6,3 +6,6 @@ import React from "react"
 //     <AntButton {...props}></AntButton>
 //   )
 // }
+
+// export const Button = AntButton;
+export { Button } from "antd";

src/components/index.ts

@@ -0,0 +1 @@
+export * from "./Button"

src/index.ts

@@ -0,0 +1 @@
+export * from "./components"