💄 add Blank component for generact

package.json

@@ -15,7 +15,8 @@
     "storybook:build": "NODE_PATH=src build-storybook",
     "modules:build": "webpack",
     "start": "concurrently \"yarn tailwind:start\" \"yarn storybook:start\"",
-    "build": "yarn tailwind:build && yarn run modules:build"
+    "build": "yarn tailwind:build && yarn run modules:build",
+    "generate": "npx generact"
   },
   "dependencies": {
     "autoprefixer": "^10.1.0",

src/components/atoms/Blank/Blank.css

@@ -0,0 +1,7 @@
+.blank {
+  @apply bg-gray-100;
+}
+
+.blank-active {
+  @apply bg-indigo-100;
+}

src/components/atoms/Blank/Blank.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Blank, { Props } from './Blank';
+
+export default {
+  title: 'Atoms/Blank',
+  component: Blank,
+};
+
+const Template = (args: Props) => <Blank {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  active: false,
+};

src/components/atoms/Blank/Blank.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export type Props = {
+  active: boolean;
+};
+
+const Blank = ({ active }: Props): JSX.Element => (
+  <span className={`blank ${active ? 'blank-active' : ''}`}>
+    Blank component
+  </span>
+);
+
+Blank.defaultProps = {};
+
+export default Blank;

src/components/atoms/Blank/index.ts

@@ -0,0 +1 @@
+export { default } from './Blank';

src/styles/base.css

@@ -3,6 +3,7 @@
 @import "tailwindcss/utilities";
 
 /* ATOMS */
+@import "../components/atoms/Blank/Blank.css";
 
 /* MOLECULES */
 

tsconfig.eslint.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "**/*.ts",
+    "**/*.js",
+    "**/*.tsx"
+  ],
+}