gov-ui-core 0.2.4 → 0.2.6-beta.1

package/build/modules.d.ts

@@ -0,0 +1,25 @@
+import Button from './components/Button';
+import Carousel from './components/Carousel';
+import ContentHeader from './components/Header/ContentHeader';
+import Directory from './components/Directory';
+import DropdownButton from './components/Button/DropdownButton';
+import EmptyBox from './components/EmptyBox';
+import Form from './components/Form';
+import Icons from './components/Icons';
+import Input from './components/Input';
+import ErrorMessage from './components/Input/ErrorMessage';
+import AutoTooltip from './components/Table/AutoTooltip';
+import OverlayLoading from './components/Loading/OverlayLoading';
+import SwitchButton from './components/Button/SwitchButton';
+import Table from './components/Table';
+import TableBase from './components/Table/TableBase';
+import Calendar from './components/Calendar';
+import IntlText from './components/IntlText';
+import AppendTable from './components/Table/AppendTable';
+import TailwindTest from './components/TailwindTest';
+import ThemeProvider from './components/ThemeProvider';
+import { Methods } from './components/Form';
+import defaultTheme from './theme';
+import './css/globals.css';
+export { AppendTable, Button, Calendar, Carousel, ContentHeader, Directory, DropdownButton, EmptyBox, Form, Icons, Input, ErrorMessage, OverlayLoading, SwitchButton, Table, TableBase, ThemeProvider, AutoTooltip, IntlText, TailwindTest, defaultTheme, };
+export type { Methods };

package/build/pages/ButtonSample.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+interface IButtonSampleProps {
+    children?: ReactNode;
+}
+declare const ButtonSample: React.FC<IButtonSampleProps>;
+export default ButtonSample;

package/build/{src/pages → pages}/CreateTable.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 interface ICreateTableProps {
 }
-export declare const FormItemBox: import("styled-components").StyledComponent<"div", any, {
+export declare const FormItemBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     width?: number | undefined;
     gap?: number | undefined;
     fullHeight?: boolean | undefined;

package/build/pages/InputSample.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+interface IInputSampleProps {
+    children?: ReactNode;
+}
+declare const InputSample: React.FC<IInputSampleProps>;
+export default InputSample;

package/build/pages/TailwindSample.d.ts

@@ -0,0 +1 @@
+export default function TailwindSample(): import("react/jsx-runtime").JSX.Element;

package/build/theme.d.ts

@@ -0,0 +1,3 @@
+import { DefaultTheme } from 'styled-components';
+declare const theme: DefaultTheme;
+export default theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gov-ui-core",
-  "version": "0.2.4",
+  "version": "0.2.6-beta.1",
   "main": "./build/index.js",
   "module": "./build/index.js",
   "types": "./build/modules.d.ts",
@@ -36,9 +36,6 @@
     "dotenv": "^10.0.0",
     "dotenv-expand": "^5.1.0",
     "dynamic-antd-theme": "^0.8.7",
-    "eslint": "^8.3.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-webpack-plugin": "^3.1.1",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
     "html-webpack-plugin": "^5.5.0",
@@ -61,9 +58,10 @@
     "react-app-polyfill": "^3.0.0",
     "react-date-range": "^1.4.0",
     "react-dev-utils": "^12.0.1",
-    "react-dom": "^18.2.0",
+    "react": "18.2",
+    "react-dom": "18.2",
     "react-hook-form": "^7.51.1",
-    "react-intl": "^6.6.2",
+    "react-intl": "^6.8.9",
     "react-refresh": "^0.11.0",
     "react-router-dom": "^6.22.3",
     "react-slick": "^0.30.2",
@@ -75,10 +73,10 @@
     "style-loader": "^3.3.1",
     "styled-components": "^5.3.11",
     "tailwindcss": "^3.0.2",
+    "tailwindcss-animate": "^1.0.7",
     "terser-webpack-plugin": "^5.2.5",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4",
-    "webpack": "^5.64.4",
     "webpack-dev-server": "^4.6.0",
     "webpack-manifest-plugin": "^4.0.2",
     "workbox-webpack-plugin": "^6.4.1"
@@ -90,7 +88,21 @@
     "test": "node node scripts/test.js",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "deploy-storybook": "gh-pages -d storybook-static -r https://github.com/nexr/neb-ui.git"
+    "deploy-storybook": "gh-pages -d storybook-static -r https://github.com/nexr/neb-ui.git",
+    "lint": "eslint ./src/**/*.{ts,tsx}",
+    "lint:css": "stylelint --ignore-path .gitignore '**/*.scss'",
+    "prepare": "husky install",
+    "precommit": "lint-staged"
+  },
+  "lint-staged": {
+    "**/*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "**/*.{scss,css}": [
+      "stylelint --fix",
+      "prettier --write"
+    ]
   },
   "eslintConfig": {
     "extends": [
@@ -138,6 +150,19 @@
     "@types/styled-components": "^5.1.34",
     "clean-webpack-plugin": "^4.0.0",
     "eslint-plugin-storybook": "^0.11.1",
+    "@typescript-eslint/eslint-plugin": "^5.47.1",
+    "@typescript-eslint/parser": "^5.47.1",
+    "eslint": "^8.3.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-webpack-plugin": "^3.1.1",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "prop-types": "^15.8.1",
     "sass": "^1.72.0",
     "sass-loader": "^16.0.3",
@@ -145,13 +170,21 @@
     "ts-loader": "^9.5.1",
     "tscpaths": "^0.0.9",
     "url-loader": "^4.1.1",
-    "webpack": "^5.94.0"
+    "webpack": "^5.94.0",
+    "husky": "^8.0.0",
+    "lint-staged": "^13.1.0",
+    "prettier": "^2.8.1",
+    "stylelint": "^14.16.0",
+    "stylelint-config-prettier-scss": "^0.0.1",
+    "stylelint-config-standard-scss": "^6.1.0"
   },
   "resolutions": {
-    "types-ramda": "0.29.4"
+    "types-ramda": "0.29.4",
+    "@formatjs/fast-memoize": "2.2.2"
   },
   "overrides": {
-    "types-ramda": "0.29.4"
+    "types-ramda": "0.29.4",
+    "@formatjs/fast-memoize": "2.2.2"
   },
   "jest": {
     "roots": [

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

package/tailwind.config.js

@@ -0,0 +1,184 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      screens: {
+        'sm': '640px',
+        'md': '768px',
+        'lg': '1024px',
+        'xl': '1280px',
+        '2xl': '1536px',
+      },
+      colors: {
+        'black': {
+          '100': '#000000',
+          '80': 'rgba(0, 0, 0, 0.8)',
+          '60': 'rgba(0, 0, 0, 0.6)',
+          '40': 'rgba(0, 0, 0, 0.4)',
+          '20': 'rgba(0, 0, 0, 0.2)',
+          '10': 'rgba(0, 0, 0, 0.1)',
+          '05': 'rgba(0, 0, 0, 0.05)',
+          '02': 'rgba(0, 0, 0, 0.02)',
+        },
+        'white': {
+          '100': '#FFFFFF',
+          '80': 'rgba(255, 255, 255, 0.8)',
+          '60': 'rgba(255, 255, 255, 0.6)',
+          '40': 'rgba(255, 255, 255, 0.4)',
+          '20': 'rgba(255, 255, 255, 0.2)',
+          '10': 'rgba(255, 255, 255, 0.1)',
+          '05': 'rgba(255, 255, 255, 0.05)',
+          '02': 'rgba(255, 255, 255, 0.02)',
+        },
+
+        'primary': {
+          '100': '#2CBBB6',
+          'hover': '#28ACA7',
+          'active': '#259F9B',
+          '40': 'rgba(44, 187, 182, 0.4)',
+          '30': 'rgba(44, 187, 182, 0.3)',
+          '20': 'rgba(44, 187, 182, 0.2)',
+          '10': 'rgba(44, 187, 182, 0.1)',
+        },
+
+        'chart': {
+          '01': '#f66',
+          '02': '#f93',
+          '03': '#ffdd29',
+          '04': '#b4e17a',
+          '05': '#23c6eb',
+          '06': '#49e3e6',
+          '07': '#27a3dd',
+          '08': '#ecb9f9',
+          '09': '#f150b6',
+          '10': '#f487da',
+        },
+
+        'line': '#CCCCCC',
+        'line-disable': '#E5E5E5',
+        'bg': '#F2F2F2',
+        'transparent': 'rgba(255, 255, 255, 0)',
+        'error': '#EE5353',
+        'error-05': 'rgba(238, 83, 83, 0.05)',
+        'warning': '#FFA82E',
+        'warning-05': 'rgba(255, 168, 46, 0.05)',
+        'success': '#33C986',
+        'success-05': 'rgba(51, 201, 134, 0.05)',
+        'info': '#5DAAF7',
+        'info-05': 'rgba(93, 170, 247, 0.05)',
+
+        'facebook': '#4080FF',
+        'naver': '#03C75A',
+        'primary-guide1': '#00FFE0',
+        'primary-guide2': '#FA00FF',
+
+        'gradation': {
+          'vertical': {
+            'bg': 'linear-gradient(180deg, #b464c8 0%, #906eff 100%)'
+          },
+          'horizon': {
+            'bg': 'linear-gradient(90deg, #b464c8 0%, #906eff 100%)'
+          },
+        }
+      },
+      fontFamily: {
+        sans: ['Graphik', 'sans-serif'],
+        serif: ['Merriweather', 'serif'],
+        NotoSans: ['NotoSans', 'sans-serif'],
+        NotoSansKR: ['NotoSansKR', 'sans-serif'],
+        NotoSansMono: ['NotoSansMono', 'sans-serif'],
+      }
+      /*dropShadow: {
+        'table': ['0px 0px 4px rgba(0,0,0,0.1)', '0px 5px 10px rgba(0,0,0,0.1)'],
+      },
+      boxShadow: {
+        'table': ['0px 0px 4px rgba(0,0,0,0.1)', '0px 5px 10px rgba(0,0,0,0.1)'],
+        'elevation-light-01': ['0px 1px 4px 0px rgba(0, 0, 0, 0.06)', '0px 3px 10px 0px rgba(0, 0, 0, 0.15)'],
+        'elevation-light-02': ['0px 2px 5px 0px rgba(0, 0, 0, 0.07)', '0px 6px 20px 0px rgba(0, 0, 0, 0.15)'],
+        'elevation-light-03': ['0px 3px 6px 0px rgba(0, 0, 0, 0.08)', '0px 9px 30px 0px rgba(0, 0, 0, 0.15)'],
+        'elevation-light-04': ['0px 4px 7px 0px rgba(0, 0, 0, 0.09)', '0px 12px 40px 0px rgba(0, 0, 0, 0.15)'],
+        'elevation-light-05': ['0px 5px 8px 0px rgba(0, 0, 0, 0.10)', '0px 15px 50px 0px rgba(0, 0, 0, 0.15)']
+      },
+      keyframes: {
+        'accordion-down': {
+          'from': {
+            'height': '0'
+          },
+          'to': {
+            'height': 'var(--radix-accordion-content-height)'
+          },
+        },
+        'accordion-up': {
+          'from': {
+            'height': 'var(--radix-accordion-content-height)'
+          },
+          'to': {
+            'height': '0'
+          },
+        },
+        'up-scales': {
+          'from': {
+            'transform': 'translateY(100vh)'
+          },
+          'to': {
+            'transform': 'translateY(0px)',
+            'transition': 'all 300ms ease 0s'
+          },
+        },
+        'down-scales': {
+          'from': {
+            'transform': 'translateY(0vh)'
+          },
+          'to': {
+            'transform': 'translateY(100px)',
+            'transition': 'all 300ms ease 0s'
+          },
+        },
+        'flip-up': {
+          '0%': {
+            'transform': 'rotateX(0)',
+            'transform-origin': 'top'
+          },
+          '100%': {
+            'transform': 'rotateX(-90deg)',
+            'transform-origin': 'top',
+            'visibility': 'hidden'
+          },
+        },
+        'flip-down': {
+          '0%': {
+            'transform': 'rotateX(-90deg)',
+            'transform-origin': 'top',
+            'visibility': 'visible'
+          },
+          '100%': {
+            'transform': 'rotateX(0)',
+            'transform-origin': 'top',
+          },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'up-scale': 'up-scales 0.3s ease',
+        'down-scale': '0.3s down-scales ease',
+        'flip-up': {
+          'animation': 'flipUp ease 0.4s both',
+          'animation-direction': 'normal'
+        },
+        'flip-down': {
+          'animation': 'flipDown ease 0.4s both',
+          'animation-direction': 'normal'
+        }
+      },*/
+    }
+  },
+  plugins: [
+    require("tailwindcss-animate")
+  ],
+}

package/tsconfig.json

@@ -29,6 +29,6 @@
     "types": ["@types/jest"],
     "downlevelIteration": true
   },
-  "include": ["@types", "src/modules.ts", "src/index.tsx", "src/react-app-env.d.ts", ".storybook/*"],
+  "include": ["@types", "src/modules.ts", "src/index.tsx", "src/react-app-env.d.ts"],
   "exclude": ["node_modules"]
 }

package/build/.storybook/main.d.ts

@@ -1,3 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
-declare const config: StorybookConfig;
-export default config;

package/build/.storybook/preview.d.ts

@@ -1,3 +0,0 @@
-import type { Preview } from "@storybook/react";
-declare const preview: Preview;
-export default preview;

package/build/src/components/Calendar/styled.d.ts

@@ -1,2 +0,0 @@
-export declare const CalendarBox: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const NavigationBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/build/src/components/Carousel/styled.d.ts

@@ -1,2 +0,0 @@
-export declare const CarouselBox: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ArrowButtonArea: import("styled-components").StyledComponent<"div", any, {}, never>;

package/build/src/components/Input/index.d.ts

@@ -1,19 +0,0 @@
-import InputBase from '../../../components/Input/Input';
-import InputNumber from '../../../components/Input/InputNumber';
-import Search from '../../../components/Input/Search';
-import Select from '../../../components/Input/Select';
-import Checkbox from '../../../components/Input/Checkbox';
-import Radio from '../../../components/Input/Radio';
-import TextArea from '../../../components/Input/TextArea';
-type InputType = typeof InputBase;
-interface InputInterface extends InputType {
-    Checkbox: typeof Checkbox;
-    Number: typeof InputNumber;
-    Radio: typeof Radio;
-    Search: typeof Search;
-    Select: typeof Select;
-    TextArea: typeof TextArea;
-}
-declare const Input: InputInterface;
-export default Input;
-export { Checkbox, Input, InputNumber, Radio, Search, Select, TextArea };

package/build/src/globalStyle.d.ts

@@ -1,5 +0,0 @@
-import type { ThemeType } from '../theme';
-declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{
-    theme: ThemeType;
-}, import("styled-components").DefaultTheme>;
-export default GlobalStyle;

package/build/src/index.d.ts

@@ -1 +0,0 @@
-export {};

package/build/src/modules.d.ts

@@ -1,23 +0,0 @@
-import Button from '../components/Button';
-import Carousel from '../components/Carousel';
-import ContentHeader from '../components/Header/ContentHeader';
-import Directory from '../components/Directory';
-import DropdownButton from '../components/Button/DropdownButton';
-import EmptyBox from '../components/EmptyBox';
-import Form from '../components/Form';
-import Icons from '../components/Icons';
-import Input from '../components/Input';
-import ErrorMessage from '../components/Input/ErrorMessage';
-import AutoTooltip from '../components/Table/AutoTooltip';
-import OverlayLoading from '../components/Loading/OverlayLoading';
-import SwitchButton from '../components/Button/SwitchButton';
-import Table from '../components/Table';
-import TableBase from '../components/Table/TableBase';
-import Calendar from '../components/Calendar';
-import IntlText from '../components/IntlText';
-import AppendTable from '../components/Table/AppendTable';
-import ThemeProvider from '../components/ThemeProvider';
-import { Methods } from '../components/Form';
-import defaultTheme from '../theme';
-export { AppendTable, Button, Calendar, Carousel, ContentHeader, Directory, DropdownButton, EmptyBox, Form, Icons, Input, ErrorMessage, OverlayLoading, SwitchButton, Table, TableBase, ThemeProvider, AutoTooltip, IntlText, defaultTheme, };
-export type { Methods, };

package/build/src/theme.d.ts

@@ -1,45 +0,0 @@
-export type ThemeType = {
-    info?: string;
-    info10?: string;
-    info20?: string;
-    success?: string;
-    warning?: string;
-    error?: string;
-    errortooltip?: string;
-    transparent?: string;
-    black100?: string;
-    black80?: string;
-    black70?: string;
-    black60?: string;
-    black50?: string;
-    black40?: string;
-    black30?: string;
-    black20?: string;
-    black15?: string;
-    black10?: string;
-    black05?: string;
-    black03?: string;
-    white?: string;
-    white90?: string;
-    white80?: string;
-    white70?: string;
-    white60?: string;
-    white50?: string;
-    white40?: string;
-    white30?: string;
-    white20?: string;
-    white10?: string;
-    line?: string;
-    primary?: string;
-    primary90?: string;
-    primary60?: string;
-    primary50?: string;
-    primary40?: string;
-    primary20?: string;
-    primary10?: string;
-    primarystop1?: string;
-    primarystop2?: string;
-    emptyLogo?: string;
-};
-declare const theme: ThemeType;
-export default theme;