Feat/global/husky lint

.eslintrc

@@ -2,7 +2,7 @@
  "extends": ["next/core-web-vitals", "prettier", "plugin:storybook/recommended"],
  "settings": {
  "next": {
- "rootDir": "packages/nextjs-craft-blog-kit/"
+ "rootDir": "packages/blog/"
  }
  }
 }

.github/temp/craft_raw.json

@@ -3965,4 +3965,4 @@
  "alignmentStyle": "left",
  "textStyle": "page"
  }
-}
+}

.gitignore

@@ -30,3 +30,5 @@ yarn-error.log*
 
 # Only dev module
 background-extract
+
+.eslintcache

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged

_contents/posts/41C3AD93-299C-4535-B94C-C772929265B1.json

@@ -509,11 +509,7 @@
  },
  {
  "color": "text",
- "columns": [
- {},
- {},
- {}
- ],
+ "columns": [{}, {}, {}],
  "documentId": "DB29A26D-2759-4258-B42E-5BCED3A1A8B2",
  "hasBlockDecoration": false,
  "hasFocusDecoration": false,
@@ -1998,4 +1994,4 @@
  ],
  "type": "textBlock"
  }
-}
+}

package.json

@@ -40,6 +40,8 @@
  "eslint-plugin-storybook": "^0.5.9--canary.acfda00.0",
  "husky": "^7.0.4",
  "is-ci": "^3.0.1",
+ "lint-staged": "^12.3.8",
+ "next": "^12.1.5",
  "prettier": "^2.6.2",
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
@@ -50,5 +52,9 @@
  },
  "dependencies": {
  "framer-motion": "^6.3.0"
+ },
+ "lint-staged": {
+ "*.{js,jsx,ts,tsx}": "eslint --cache --fix",
+ "*.{js,jsx,ts,tsx,css,sass,less,md,mdx}": "prettier --write"
  }
 }

packages/blog/.storybook/main.js

@@ -1,20 +1,20 @@
 module.exports = {
  stories: [
- "../stories/**/*.stories.mdx",
- "../stories/**/*.stories.@(js|jsx|ts|tsx)",
- "../components/**/*.stories.mdx",
- "../components/**/*.stories.@(js|jsx|ts|tsx)",
+ '../stories/**/*.stories.mdx',
+ '../stories/**/*.stories.@(js|jsx|ts|tsx)',
+ '../components/**/*.stories.mdx',
+ '../components/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
- "storybook-addon-swc",
- "@storybook/addon-a11y",
- "@storybook/addon-links",
- "@storybook/addon-essentials",
- "@storybook/addon-interactions",
- "storybook-addon-next-router",
+ 'storybook-addon-swc',
+ '@storybook/addon-a11y',
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ 'storybook-addon-next-router',
  ],
- framework: "@storybook/react",
+ framework: '@storybook/react',
  core: {
- builder: "@storybook/builder-webpack5",
+ builder: '@storybook/builder-webpack5',
  },
-};
+}

packages/blog/.storybook/preview.js

@@ -1,11 +1,11 @@
-import React from "react";
-import { RouterContext } from "next/dist/shared/lib/router-context"; // next 12
-import { ThemeProvider } from "styled-components";
-import { theme } from "../styles/theme";
-import GlobalStyle from "../styles/glolbal-style";
+import React from 'react'
+import { RouterContext } from 'next/dist/shared/lib/router-context' // next 12
+import { ThemeProvider } from 'styled-components'
+import { theme } from '../styles/theme'
+import GlobalStyle from '../styles/glolbal-style'
 
 export const parameters = {
- actions: { argTypesRegex: "^on[A-Z].*" },
+ actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
  matchers: {
  color: /(background|color)$/i,
@@ -15,7 +15,7 @@ export const parameters = {
  nextRouter: {
  Provider: RouterContext.Provider,
  },
-};
+}
 
 export const decorators = [
  (Story) => (
@@ -24,4 +24,4 @@ export const decorators = [
  <Story />
  </ThemeProvider>
  ),
-];
+]

packages/blog/components/Header/Header.stories.tsx

@@ -1,25 +1,25 @@
-import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import Header from "./Header";
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import Header from './Header'
 
 export default {
- title: "Components/Header",
+ title: 'Components/Header',
  component: Header,
  parameters: {
- layout: "fullscreen",
+ layout: 'fullscreen',
  },
-} as ComponentMeta<typeof Header>;
+} as ComponentMeta<typeof Header>
 
 const Template: ComponentStory<typeof Header> = (args) => (
  <div
  style={{
- boxSizing: "border-box",
- height: "200vh",
+ boxSizing: 'border-box',
+ height: '200vh',
  }}
  >
  <Header {...args} />
  </div>
-);
+)
 
-export const Primary = Template.bind({});
-Primary.args = {};
+export const Primary = Template.bind({})
+Primary.args = {}

packages/blog/components/Header/Header.styled.tsx

@@ -1,5 +1,5 @@
-import { motion } from "framer-motion";
-import styled from "styled-components";
+import { motion } from 'framer-motion'
+import styled from 'styled-components'
 
 const Styled = {
  rootContainer: styled(motion.header)`
@@ -47,6 +47,6 @@ const Styled = {
  display: flex;
  `,
  search: styled(motion.div)``,
-};
+}
 
-export default Styled;
+export default Styled

packages/blog/components/Header/Header.tsx

@@ -1,40 +1,40 @@
-import React, { useState } from "react";
-import { useViewportScroll, MotionConfig } from "framer-motion";
-import Styled from "./Header.styled";
+import React, { useState } from 'react'
+import { useViewportScroll, MotionConfig } from 'framer-motion'
+import Styled from './Header.styled'
 
-export type HeaderProps = {};
+export type HeaderProps = {}
 
 const Header: React.FC<HeaderProps> = ({}) => {
- const { scrollY } = useViewportScroll();
- const [isHero, setIsHero] = useState(scrollY.get() < 200);
+ const { scrollY } = useViewportScroll()
+ const [isHero, setIsHero] = useState(scrollY.get() < 200)
 
  scrollY.onChange((value) => {
  if (value < 200) {
- setIsHero(true);
+ setIsHero(true)
  } else {
- setIsHero(false);
+ setIsHero(false)
  }
- });
+ })
 
  return (
  <MotionConfig
  reducedMotion="user"
  transition={{
- type: "tween",
+ type: 'tween',
  }}
  >
  <Styled.rootContainer
- initial={scrollY.get() < 200 ? "hero" : "header"}
- animate={isHero ? "hero" : "header"}
+ initial={scrollY.get() < 200 ? 'hero' : 'header'}
+ animate={isHero ? 'hero' : 'header'}
  variants={{
  hero: {
- paddingTop: "64px",
- backgroundColor: "#ffffff",
+ paddingTop: '64px',
+ backgroundColor: '#ffffff',
  boxShadow: `0px`,
  },
  header: {
- paddingTop: "0px",
- backgroundColor: "#F5F5F7",
+ paddingTop: '0px',
+ backgroundColor: '#F5F5F7',
  boxShadow: `0px 1px 2px rgba(0, 0, 0, 0.25)`,
  },
  }}
@@ -46,23 +46,23 @@ const Header: React.FC<HeaderProps> = ({}) => {
  alt="JaeSeoKim's avatar"
  variants={{
  hero: {
- width: "200px",
- height: "200px",
+ width: '200px',
+ height: '200px',
  },
  header: {
- width: "36px",
- height: "36px",
+ width: '36px',
+ height: '36px',
  },
  }}
  />
  <Styled.infoContainer>
  <Styled.title
  variants={{
  hero: {
- fontSize: "36px",
+ fontSize: '36px',
  },
  header: {
- fontSize: "24px",
+ fontSize: '24px',
  },
  }}
  >
@@ -71,15 +71,15 @@ const Header: React.FC<HeaderProps> = ({}) => {
  <Styled.subtitle
  variants={{
  hero: {
- fontSize: "24px",
+ fontSize: '24px',
  opacity: 1,
  scale: 1,
- display: "flex",
+ display: 'flex',
  },
  header: {
  opacity: 0,
  scale: 0,
- display: "none",
+ display: 'none',
  },
  }}
  >
@@ -91,7 +91,7 @@ const Header: React.FC<HeaderProps> = ({}) => {
  </Styled.mainContainer>
  </Styled.rootContainer>
  </MotionConfig>
- );
-};
+ )
+}
 
-export default Header;
+export default Header

packages/blog/components/Header/index.tsx

@@ -1,2 +1,2 @@
-export { default } from "./Header";
-export type { HeaderProps } from "./Header";
+export { default } from './Header'
+export type { HeaderProps } from './Header'

packages/blog/stories/Introduction.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from '@storybook/addon-docs'
 
 <Meta title="Introduction" />
 

packages/components/package.json

@@ -28,7 +28,7 @@
  "@types/react-dom": "*",
  "@types/react-syntax-highlighter": "^13.5.2",
  "@types/styled-components": "*",
- "next": "^12.1.5"
+ "next": "*"
  },
  "dependencies": {
  "@matejmazur/react-katex": "^3.1.3",

packages/components/src/Introduction.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from '@storybook/addon-docs'
 
 <Meta title="Introduction" />