Feature/storybook

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app"
+  ]
+}

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme: theme,
+});

.storybook/preview.js

@@ -0,0 +1,11 @@
+import '../src/style.css'
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

package.json

@@ -20,12 +20,24 @@
     "watch": "npx tailwindcss -i tailwind.css -o ./src/style.css --watch",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
       "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
     ]
   },
   "browserslist": {
@@ -41,6 +53,12 @@
     ]
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^6.3.7",
+    "@storybook/addon-essentials": "^6.3.7",
+    "@storybook/addon-links": "^6.3.7",
+    "@storybook/node-logger": "^6.3.7",
+    "@storybook/preset-create-react-app": "^3.2.0",
+    "@storybook/react": "^6.3.7",
     "autoprefixer": "^10.3.3",
     "postcss": "^8.3.6",
     "tailwindcss": "^2.2.7"

src/components/ui/CardItem.js

@@ -1,3 +1,11 @@
+import PropTypes from 'prop-types';
+
+
+/**
+ * ### CardItem
+ * @param {*} card: Object `{title: String, image: String, description: String}` 
+ * @returns JSX Element
+ */
 function CardItem({card: {title, image, description}}) {
 	return (
 		<div className="bg-white flex flex-col gap-y-2 text-center items-center rounded-lg px-6 py-10">
@@ -10,4 +18,8 @@ function CardItem({card: {title, image, description}}) {
 	)
 }
 
-export default CardItem
+export default CardItem;
+
+CardItem.propTypes = {
+	card: PropTypes.object.isRequired
+}

src/components/ui/CategoryItem.js

@@ -1,10 +1,21 @@
+import PropTypes from 'prop-types';
+
+/**
+ * ### CategoryItem
+ * @param {*} card: Object `{url: String | null, image: String, title: String}` 
+ * @returns JSX Element
+ */
 function CategoryItem({ category }) {
 	return (
-        <a href="#" className="flex group justify-center items-center rounded transition-colors hover:bg-purple-50 flex-col p-4">
+        <a href={ category.url ?? "#" } className="flex group justify-center items-center rounded transition-colors hover:bg-purple-50 flex-col p-4">
             <img src={category.image} className="w-12 h-12 rounded-lg border border-gray-200 object-cover" />
             <span className="font-semibold transition-colors group-hover:text-purple-700 whitespace-nowrap block mt-2 text-sm">{category.title}</span>
         </a>
 	)
 }
 
-export default CategoryItem
+export default CategoryItem;
+
+CategoryItem.propTypes = {
+    category: PropTypes.object
+}

src/components/ui/ProductItem.js

@@ -1,6 +1,11 @@
-import {useState} from 'react'
 import {AiOutlinePlus} from 'react-icons/ai'
+import PropTypes from 'prop-types';
 
+/**
+ * ### ProductItem
+ * @param {*} product: Object `{image: String, title: String, alt: String, price: Number | Float- }` 
+ * @returns JSX Element
+ */
 function ProductItem({product}) {
 	return (
 		<div className="p-3 bg-white">
@@ -19,4 +24,8 @@ function ProductItem({product}) {
 	)
 }
 
-export default ProductItem
+export default ProductItem;
+
+ProductItem.propTypes = {
+	product: PropTypes.object
+}

src/stories/Introduction.stories.mdx

@@ -0,0 +1,15 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Start / Introduction" />
+
+
+# Getir.com React + Tailwind Front-end
+
+Merhaba, bu dokümantasyon <a href="https://github.com/tayfunerbilen/getir.com-react-tailwind">Getir.com React + Tailwind Front-end</a> reposunda bulunan component dosyalarının daha yakından incelenebilmesi için hazırlanmıştır.
+
+Karşılaşılan herhangi bir sıkıntı için;
+
+<ul>
+  <li> <a href="https://github.com/tayfunerbilen/getir.com-react-tailwind/issues">Issue</a> açabilir </li>
+  <li> Bu dokümanı oluşturan <a target="_blank" href="https://twitter.com/SevimliSleyman"> kişiye </a> ulaşabilirsiniz. </li>
+</ul>

src/stories/ui/CardItem/CardItem.stories.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CardItem from '../../../components/ui/CardItem';
+
+export default {
+  title: "Components/UI",
+  component: CardItem,
+}
+
+export const CardItemStory = (args) => (
+    <CardItem {...args}/>
+);
+
+CardItemStory.propTypes = {
+    card: PropTypes.object.isRequired
+};
+
+CardItemStory.args = {
+  card:{
+    title: 'Her siparişinize bir kampanya',
+    description: 'Getir\'de vereceğiniz her siparişe uygun bir kampanya bulabilirsiniz.',
+    image: 'https://getir.com/_next/static/images/intro-in-minutes-a7a9238a73013642a6597c4db06653c1.svg'
+  }
+};

src/stories/ui/CategoryItem/CategoryItem.stories.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CategoryItem from '../../../components/ui/CategoryItem';
+
+export default {
+  title: "Components/UI",
+  component: CategoryItem,
+}
+
+export const CategoryItemStory = (args) => (
+    <CategoryItem {...args}/>
+);
+
+CategoryItemStory.propTypes = {
+    category: PropTypes.object.isRequired
+};
+
+CategoryItemStory.args = {
+    category: {
+        url: null,
+        image: "http://cdn.getir.com/cat/5697c78dc181490f00c99fea_f7ef7ccb-f3a4-4388-b787-232967c16320.jpeg",
+        title: 'Yeni'
+    }
+};

src/stories/ui/ProductItem/ProductItem.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ProductItem from '../../../components/ui/ProductItem';
+
+export default {
+  title: "Components/UI",
+  component: ProductItem,
+}
+
+// FIXME: ProductItem component'inin aslında max height'e ve max width değerlerine sahip olması gerekiyor. @suleymansevimli
+export const ProductItemStory = (args) => (
+    <div style={{maxHeight:'25%', maxWidth:'25%'}}>
+        <ProductItem {...args}/>
+    </div>
+);
+
+ProductItemStory.propTypes = {
+    product: PropTypes.object.isRequired
+};
+
+ProductItemStory.args = {
+    product: {
+        "id": 1,
+        "title": "Lay's Mevsim Yeşillikli",
+        "image": "https://cdn.getir.com/product/5bc97aabb137fb001d751ac7_tr_1609123518121.jpeg",
+        "alt": "96 g",
+        "price": 6.36
+      }
+};