From f6f024cbc662964cb80b23e4677290d1c0517e8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=BCleyman=20Sevimli?= Date: Sat, 28 Aug 2021 16:00:10 +0300 Subject: [PATCH 1/2] added storybook for component documentation --- .env | 1 + .storybook/main.js | 11 +++++++ .storybook/manager.js | 6 ++++ .storybook/preview.js | 11 +++++++ .storybook/theme.js | 8 +++++ package.json | 20 ++++++++++++- src/components/ui/CardItem.js | 14 ++++++++- src/components/ui/CategoryItem.js | 15 ++++++++-- src/components/ui/ProductItem.js | 13 +++++++-- src/stories/Introduction.stories.mdx | 15 ++++++++++ src/stories/ui/CardItem/CardItem.stories.js | 24 +++++++++++++++ .../ui/CategoryItem/CategoryItem.stories.js | 24 +++++++++++++++ .../ui/ProductItem/ProductItem.stories.js | 29 +++++++++++++++++++ 13 files changed, 185 insertions(+), 6 deletions(-) create mode 100644 .env create mode 100644 .storybook/main.js create mode 100644 .storybook/manager.js create mode 100644 .storybook/preview.js create mode 100644 .storybook/theme.js create mode 100644 src/stories/Introduction.stories.mdx create mode 100644 src/stories/ui/CardItem/CardItem.stories.js create mode 100644 src/stories/ui/CategoryItem/CategoryItem.stories.js create mode 100644 src/stories/ui/ProductItem/ProductItem.stories.js diff --git a/.env b/.env new file mode 100644 index 0000000..7d910f1 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +SKIP_PREFLIGHT_CHECK=true \ No newline at end of file diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..cd74759 --- /dev/null +++ b/.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" + ] +} \ No newline at end of file diff --git a/.storybook/manager.js b/.storybook/manager.js new file mode 100644 index 0000000..f46e88c --- /dev/null +++ b/.storybook/manager.js @@ -0,0 +1,6 @@ +import { addons } from '@storybook/addons'; +import theme from './theme'; + +addons.setConfig({ + theme: theme, +}); \ No newline at end of file diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000..a46701b --- /dev/null +++ b/.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$/, + }, + }, +} \ No newline at end of file diff --git a/.storybook/theme.js b/.storybook/theme.js new file mode 100644 index 0000000..b16cf3c --- /dev/null +++ b/.storybook/theme.js @@ -0,0 +1,8 @@ +import { create } from '@storybook/theming'; + +export default create({ + base: 'light', + brandTitle: 'Getir Tailwind', + brandUrl: 'https://getir-react-tailwind.netlify.app/', + brandImage: 'https://pbs.twimg.com/profile_images/1353420928596783104/-WsDVf6R_400x400.jpg', +}); \ No newline at end of file diff --git a/package.json b/package.json index 6ceb62e..f37572b 100644 --- a/package.json +++ b/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" diff --git a/src/components/ui/CardItem.js b/src/components/ui/CardItem.js index 4355b8b..05edada 100644 --- a/src/components/ui/CardItem.js +++ b/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 (
@@ -10,4 +18,8 @@ function CardItem({card: {title, image, description}}) { ) } -export default CardItem \ No newline at end of file +export default CardItem; + +CardItem.propTypes = { + card: PropTypes.object.isRequired +} \ No newline at end of file diff --git a/src/components/ui/CategoryItem.js b/src/components/ui/CategoryItem.js index 92b568a..aa534d1 100644 --- a/src/components/ui/CategoryItem.js +++ b/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 ( - + {category.title} ) } -export default CategoryItem \ No newline at end of file +export default CategoryItem; + +CategoryItem.propTypes = { + category: PropTypes.object +} \ No newline at end of file diff --git a/src/components/ui/ProductItem.js b/src/components/ui/ProductItem.js index dd66893..88cb343 100644 --- a/src/components/ui/ProductItem.js +++ b/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 (
@@ -19,4 +24,8 @@ function ProductItem({product}) { ) } -export default ProductItem \ No newline at end of file +export default ProductItem; + +ProductItem.propTypes = { + product: PropTypes.object +} \ No newline at end of file diff --git a/src/stories/Introduction.stories.mdx b/src/stories/Introduction.stories.mdx new file mode 100644 index 0000000..07d7121 --- /dev/null +++ b/src/stories/Introduction.stories.mdx @@ -0,0 +1,15 @@ +import { Meta } from '@storybook/addon-docs'; + + + + +# Getir.com React + Tailwind Front-end + +Merhaba, bu dokümantasyon Getir.com React + Tailwind Front-end 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; + +
    +
  • Issue açabilir
    • +
  • Bu dokümanı oluşturan kişiye ulaşabilirsiniz.
    • +
\ No newline at end of file diff --git a/src/stories/ui/CardItem/CardItem.stories.js b/src/stories/ui/CardItem/CardItem.stories.js new file mode 100644 index 0000000..faa0cde --- /dev/null +++ b/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) => ( + +); + +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' + } +}; diff --git a/src/stories/ui/CategoryItem/CategoryItem.stories.js b/src/stories/ui/CategoryItem/CategoryItem.stories.js new file mode 100644 index 0000000..cb09d82 --- /dev/null +++ b/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) => ( + +); + +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' + } +}; diff --git a/src/stories/ui/ProductItem/ProductItem.stories.js b/src/stories/ui/ProductItem/ProductItem.stories.js new file mode 100644 index 0000000..73a5567 --- /dev/null +++ b/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) => ( +
+ +
+); + +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 + } +}; From 65c4f2f3f87e595aaf335cce3cd7b88c5c683c43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=BCleyman=20Sevimli?= Date: Sat, 28 Aug 2021 16:06:35 +0300 Subject: [PATCH 2/2] changed storybook brand image --- .storybook/theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/theme.js b/.storybook/theme.js index b16cf3c..04ab43b 100644 --- a/.storybook/theme.js +++ b/.storybook/theme.js @@ -4,5 +4,5 @@ export default create({ base: 'light', brandTitle: 'Getir Tailwind', brandUrl: 'https://getir-react-tailwind.netlify.app/', - brandImage: 'https://pbs.twimg.com/profile_images/1353420928596783104/-WsDVf6R_400x400.jpg', + brandImage: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTMiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA1MyAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI2LjAzODQgOS4yNDAxOUMyNi4wMzg0IDYuNDk5OTkgMjMuODAxMiA0LjcxMjg5IDIwLjUxODIgNC43MTI4OUMxNy40MDc0IDQuNzEyODkgMTQuMTUwOSA2Ljk1MDA3IDE0LjE1MDkgMTEuOTI3NUMxNC4xNTA5IDE1LjcyNjcgMTYuNDU0MiAxOC41MzMxIDIwLjQyNTYgMTguNTMzMUMyMi42NjI3IDE4LjUzMzEgMjUuMTI1IDE3LjI2MjMgMjUuNzQ3MSAxNi4zODg2QzI1Ljc0NzEgMTYuMzg4NiAyNS4zMjM1IDE0Ljc0NzEgMjQuMTU4NiAxNC43NDcxQzIzLjU0OTcgMTQuNzQ3MSAyMy4wOTk2IDE0Ljk4NTQgMjIuNTk2NSAxNS4xODM5QzIyLjA4MDMgMTUuMzk1NyAyMS40NTgxIDE1LjU5NDMgMjAuNjYzOCAxNS41OTQzQzE5LjU1MTkgMTUuNTk0MyAxNy42NDU2IDE1LjE1NzUgMTcuNjQ1NiAxMi43NjE0QzE3LjY0NTYgMTIuNzYxNCAxOC41NDU4IDEzLjAyNjIgMjAuNTg0NCAxMy4wMjYyQzI0Ljk3OTMgMTMuMDM5NCAyNi4wMzg0IDExLjE4NjEgMjYuMDM4NCA5LjI0MDE5Wk0yMC42NTA2IDcuNjc4MTRDMjIuMTU5NyA3LjY3ODE0IDIyLjg4NzggOC40OTg4OCAyMi44ODc4IDkuMjUzNDNDMjIuODg3OCAxMC4xNDA0IDIyLjA5MzUgMTAuNzA5NiAyMC42NTA2IDEwLjcwOTZDMTguNTQ1OCAxMC43MDk2IDE3Ljc1MTUgMTAuNDE4NCAxNy43NTE1IDEwLjQwNTFDMTcuNzM4MyA5LjE0NzUzIDE4Ljc0NDQgNy42NzgxNCAyMC42NTA2IDcuNjc4MTRaIiBmaWxsPSIjRkZEMzAwIi8+CjxwYXRoIGQ9Ik0zNC4yMDYgMTUuNjIwNkMzMi42OTY5IDE1LjYyMDYgMzEuOTE1OSAxNC4zNDk4IDMxLjc3MDMgMTMuNzkzOEMzMS42MjQ2IDEzLjI1MTEgMzEuNTMyIDEyLjQ3IDMxLjUzMiAxMS42NjI1TDMxLjU1ODUgNy41NTg4NUgzMi42NTcyQzMzLjU0NDEgNy41NTg4NSAzNC4yMTkyIDcuMjk0MSAzNC43MDkgNi43Nzc4M0MzNS4xODU2IDYuMjYxNTUgMzUuNDM3MSA1LjU1OTk1IDM1LjQzNzEgNC42OTk1SDMxLjU3MTdMMzEuNTQ1MiAyLjg4NTkzQzMxLjU0NTIgMi4zMDM0NyAzMS41NDUyIDEuODQwMTUgMzEuNTU4NSAxLjQ4MjczQzMxLjU3MTcgMS4xMjUzMiAzMS41ODQ5IDAuODQ3MzI1IDMxLjU5ODIgMC42MzU1MjFDMzEuNjExNCAwLjQxMDQ4IDMxLjYzNzkgMC4yMjUxNTEgMzEuNjUxMSAwLjA5Mjc3MzRDMzAuNDczIDAuMDkyNzczNCAyOS41ODYgMC4zNDQyOTIgMjguOTYzOSAwLjg0NzMyNkMyOC4zNDE3IDEuMzUwMzYgMjguMDM3MiAyLjE3MTEgMjguMDM3MiAzLjMzNjAyTDI4LjAxMDcgMTIuNDE3MUMyOC4wMTA3IDE2LjEzNjkgMjkuNzg0NiAxOC41NTk0IDMzLjE3MzUgMTguNTU5NEMzNC44NDE0IDE4LjU1OTQgMzYuMDU5MyAxNy42NTkyIDM2LjA1OTMgMTYuMjk1OEMzNi4wNTkzIDE1LjgxOTIgMzUuOTkzMSAxNS41Njc3IDM1Ljk1MzQgMTUuNDA4OEMzNS42NDg5IDE1LjQ4ODMgMzUuMTA2MiAxNS42MjA2IDM0LjIwNiAxNS42MjA2WiIgZmlsbD0iI0ZGRDMwMCIvPgo8cGF0aCBkPSJNNDIuNjkxNyAxNS43OTIyQzQxLjkzNzIgMTUuNzkyMiA0MS40NjA2IDE1LjI0OTQgNDEuNDYwNiAxNC4zNDkzVjcuNzk2NThDNDEuNDYwNiA3LjIxNDEyIDQxLjQ2MDYgNi43NTA4IDQxLjQ3MzggNi4zOTMzOEM0MS40ODcxIDYuMDM1OTYgNDEuNTAwMyA1Ljc1Nzk3IDQxLjUxMzYgNS41NDYxN0M0MS41MjY4IDUuMzIxMTIgNDEuNTUzMyA1LjEzNTggNDEuNTY2NSA1LjAwMzQyQzQwLjM3NTEgNS4wMDM0MiAzOS40NzQ5IDUuMjU0OTMgMzguODUyOCA1Ljc1Nzk3QzM4LjIzMDYgNi4yNjEgMzcuOTI2MSA3LjA4MTc0IDM3LjkyNjEgOC4yNDY2NkwzNy44OTk3IDE0LjkxODVDMzcuODk5NyAxNy4zMDEzIDM5LjQzNTIgMTguNjI1IDQxLjM2NzkgMTguNTQ1NkM0Mi41ODU4IDE4LjQ5MjcgNDMuNjQ0OCAxNy45MjM0IDQzLjY0NDggMTYuNjM5NEM0My42NDQ4IDE2LjEwOTkgNDMuNTUyMiAxNS42NzMgNDMuNTUyMiAxNS42NzNDNDMuMjg3NCAxNS43MzkyIDQzLjA4ODggMTUuNzkyMiA0Mi42OTE3IDE1Ljc5MjJaIiBmaWxsPSIjRkZEMzAwIi8+CjxwYXRoIGQ9Ik01MS4zNjI1IDUuMDMwMjdDNTAuNjM0NCA1LjAzMDI3IDQ5Ljg5MzEgNS4xMDk3IDQ5LjE1MTggNS4yODE3OUM0OC40MTA1IDUuNDQwNjUgNDcuNzM1MyA1Ljc1ODM1IDQ3LjEzOTYgNi4yMjE2N0M0Ni41NDM5IDYuNjg0OTkgNDYuMDU0MSA3LjMyMDQgNDUuNjgzNSA4LjE0MTE0QzQ1LjMxMjggOC45NjE4OCA0NS4xMTQzIDEwLjAwNzcgNDUuMTE0MyAxMS4zMDVWMTUuMDUxMkM0NS4xMTQzIDE2LjIwMjkgNDUuMjU5OSAxNy4yNzUyIDQ1Ljk2MTUgMTcuODA0N0M0Ni43MTYgMTguMzg3MSA0Ny42MDMgMTguNDEzNiA0OC43ODExIDE4LjQxMzZDNDguNzY3OSAxOC4yOTQ1IDQ4Ljc0MTQgMTcuOTYzNSA0OC43MjgyIDE3LjczODVDNDguNzE0OSAxNy41MjY3IDQ4LjY4ODQgMTcuMjQ4NyA0OC42ODg0IDE2Ljg5MTNDNDguNjc1MiAxNi41MzM5IDQ4LjY3NTIgMTYuMDcwNSA0OC42NzUyIDE1LjQ4ODFWMTAuNjgyOEM0OC42NzUyIDkuNTQ0MzQgNDguODYwNSA4LjA4ODE5IDUwLjg1OTQgNy45MTYxQzUxLjk4NDYgNy44MjM0NCA1Mi45Nzc1IDcuMzg2NTkgNTIuOTc3NSA2LjE2ODcyQzUyLjk3NzUgNS44OTA3MyA1Mi45MTEzIDUuMzQ3OTggNTIuNzY1NyA1LjAzMDI3SDUxLjM2MjVaIiBmaWxsPSIjRkZEMzAwIi8+CjxwYXRoIGQ9Ik02LjI0ODIxIDQuNzEyODlDMi4xNDQ1MSA0LjcxMjg5IDAgNy41ODU0OCAwIDExLjA4MDJDMCAxNC4zMTAyIDEuOTcyNDIgMTcuMzQxNyA1LjU1OTg1IDE3LjM0MTdDNy40MTMxMyAxNy4zNDE3IDguNDk4NjIgMTYuNTQ3NCA4Ljc2MzM4IDE2LjMyMjRWMTcuOTM3NEM4Ljc2MzM4IDE5Ljc5MDcgOC4wMzUzIDIxLjAzNSA2LjE2ODc4IDIxLjAzNUM1LjI2ODYyIDIxLjAzNSA0LjU5MzQ5IDIwLjc4MzUgMy45ODQ1NiAyMC40OTIzQzMuNDI4NTcgMjAuMjI3NSAzLjAxODIgMTkuOTIzIDIuNDc1NDYgMTkuOTIzQzEuMDg1NDkgMTkuOTIzIDAuNzAxNiAyMS42NDM5IDAuNzAxNiAyMS42NTcyQzEuNzQ3MzggMjMuMDA3NCA0LjE0MzQxIDI0LjAwMDMgNi4xNTU1NCAyNC4wMDAzQzEwLjExMzYgMjQuMDAwMyAxMi4yOTc4IDIxLjY5NjkgMTIuMjk3OCAxNy4xMTY2QzEyLjI5NzggMTcuMTE2NiAxMi4yOTc4IDEyLjUwOTkgMTIuMjk3OCAxMS43NTU0QzEyLjI4NDYgNy41NzIyNCAxMC40MzEzIDQuNzEyODkgNi4yNDgyMSA0LjcxMjg5Wk02LjIzNDk3IDE0LjIzMDhDNC42OTkzOSAxNC4yMzA4IDMuNTIxMjQgMTMuMjY0NSAzLjUyMTI0IDExLjEzMzJDMy41MjEyNCA4Ljg1NjMgNC43MjU4NyA3LjY3ODE0IDYuMjM0OTcgNy42NzgxNEM3LjcxNzYgNy42NzgxNCA4LjgwMzA5IDguNTc4MzEgOC44MDMwOSAxMC45NjExQzguODAzMDkgMTMuMzk2OCA3LjYyNDkzIDE0LjIzMDggNi4yMzQ5NyAxNC4yMzA4WiIgZmlsbD0iI0ZGRDMwMCIvPgo8cGF0aCBkPSJNMzguNzk5NyAzLjY5MzMzQzM5LjA3NzcgMy44MjU3MSAzOS4zNjg5IDMuOTA1MTMgMzkuNjg2NiAzLjkwNTEzQzQwLjQxNDcgMy45MDUxMyA0MC45ODM5IDMuNTYwOTUgNDEuNDA3NSAyLjg3MjU5QzQxLjU3OTYgMi41NTQ4OCA0MS42NzIzIDIuMjIzOTQgNDEuNjcyMyAxLjg2NjUyQzQxLjY3MjMgMS41MzU1OCA0MS41OTI5IDEuMjE3ODcgNDEuNDM0IDAuOTEzNDA2QzQxLjI3NTEgMC42MjIxNzYgNDEuMDM2OSAwLjM5NzEzNCA0MC43MTkyIDAuMjM4MjgyQzQwLjQ0MTIgMC4wNzk0Mjg4IDQwLjE2MzIgMCAzOS44NTg3IDBDMzkuNTI3OCAwIDM5LjE5NjggMC4wOTI2NjQ5IDM4Ljg3OTEgMC4yNzc5OTNDMzguNTYxNCAwLjQ2MzMyMSAzOC4zMjMxIDAuNzI4MDc1IDM4LjEzNzggMS4wNTkwMkMzNy45NjU3IDEuMzUwMjUgMzcuODczIDEuNjk0NDMgMzcuODczIDIuMDY1MDlDMzcuODczIDIuMzk2MDMgMzcuOTUyNSAyLjcxMzc0IDM4LjExMTMgMi45OTE3M0MzOC4yNzAyIDMuMjgyOTYgMzguNTA4NSAzLjUyMTI0IDM4Ljc5OTcgMy42OTMzM1oiIGZpbGw9IiNGRkQzMDAiLz4KPC9zdmc+Cg==', }); \ No newline at end of file