Skip to content
This repository was archived by the owner on Jan 13, 2026. It is now read-only.

Add: storybook + seo component + gutneberg style package #65

Open
bilouStrike wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Add: storybook + seo component + gutneberg style package #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a79860f
Add: storybook + seo component + gutneberg style package
bilouStrike Jan 21, 2021
ef03eac
Add storybook viewport + Props types
bilouStrike Jan 25, 2021
12daa8a
Merge branch 'master' into setup-packages
bilouStrike Jan 25, 2021
c6ce203
import gutenberg style package
bilouStrike Jan 26, 2021
d40c991
Merge branch 'setup-packages' of https://github.com/rtCamp/wp-decoupl…
bilouStrike Jan 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials"
]
}
9 changes: 9 additions & 0 deletions .storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@

import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';

export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
viewport: {
viewports: MINIMAL_VIEWPORTS,
},
}
24,406 changes: 17,970 additions & 6,436 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

156 changes: 83 additions & 73 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,84 @@
{
"name": "wp-decoupled",
"version": "1.0.0",
"description": "A decoupled WordPress application in React built with Next.js",
"main": "server.js",
"scripts": {
"dev": "next dev",
"dev:inspect": "NODE_OPTIONS='--inspect' next",
"build": "next build",
"start": "next start",
"cypress:open": "cypress open",
"cypress:run": "cypress run",
"lint": "eslint --fix .",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
},
"repository": {
"type": "git",
"url": "git+https://github.com/rtCamp/wp-decoupled.git"
},
"keywords": [
"decoupled",
"react",
"next.js"
],
"author": "Imran Sayed, Sayed Taqui, Divyaraj Masani, Muhammad Muhsin",
"license": "MIT",
"bugs": {
"url": "https://github.com/rtCamp/wp-decoupled/issues"
},
"engine": {
"node": "v8.12.0",
"npm": "6.4.1"
},
"homepage": "https://github.com/rtCamp/wp-decoupled#readme",
"dependencies": {
"@apollo/client": "^3.3.6",
"@zeit/next-css": "^1.0.1",
"cookie-parser": "^1.4.5",
"dompurify": "^2.2.6",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"graphql": "^14.7.0",
"graphql-tag": "^2.11.0",
"idb-keyval": "^3.2.0",
"isomorphic-unfetch": "^3.1.0",
"next": "^10.0.5",
"next-offline": "^4.0.6",
"node-fetch": "^2.6.1",
"nprogress": "^0.2.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-bootstrap": "^1.4.3",
"react-dom": "^17.0.1",
"url-loader": "^2.3.0",
"validator": "^11.1.0",
"woocommerce-api": "^1.5.0"
},
"devDependencies": {
"@zeit/next-sass": "^1.0.1",
"cypress": "^6.3.0",
"eslint": "^7.17.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"next-compose-plugins": "^2.2.1",
"node-sass": "^4.14.1",
"prettier": "^2.2.1",
"serialize-javascript": "^2.1.2"
}
}
"name": "wp-decoupled",
Copy link
Contributor

@NicestRudeGuy NicestRudeGuy Jan 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dont format the package.json

"version": "1.0.0",
"description": "A decoupled WordPress application in React built with Next.js",
"main": "server.js",
"scripts": {
"dev": "next dev",
"dev:inspect": "NODE_OPTIONS='--inspect' next",
"build": "next build",
"start": "next start",
"lint": "eslint --fix .",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"repository": {
"type": "git",
"url": "git+https://github.com/rtCamp/wp-decoupled.git"
},
"keywords": [
"decoupled",
"react",
"next.js"
],
"author": "Imran Sayed, Sayed Taqui, Divyaraj Masani, Muhammad Muhsin",
"license": "MIT",
"bugs": {
"url": "https://github.com/rtCamp/wp-decoupled/issues"
},
"engine": {
"node": "v8.12.0",
"npm": "6.4.1"
},
"homepage": "https://github.com/rtCamp/wp-decoupled#readme",
"dependencies": {
"@apollo/client": "^3.3.6",
"@wordpress/block-library": "^2.27.2",
"@zeit/next-css": "^1.0.1",
"cookie-parser": "^1.4.5",
"dompurify": "^2.2.6",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"graphql": "^14.7.0",
"graphql-tag": "^2.11.0",
"idb-keyval": "^3.2.0",
"isomorphic-unfetch": "^3.1.0",
"next": "^10.0.5",
"next-offline": "^4.0.6",
"next-seo": "^4.17.0",
"node-fetch": "^2.6.1",
"nprogress": "^0.2.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-bootstrap": "^1.4.3",
"react-dom": "^17.0.1",
"url-loader": "^2.3.0",
"validator": "^11.1.0",
"woocommerce-api": "^1.5.0"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@storybook/addon-actions": "^6.1.14",
"@storybook/addon-essentials": "^6.1.14",
"@storybook/addon-links": "^6.1.14",
"@storybook/react": "^6.1.14",
"@wordpress/base-styles": "^3.3.0",
Copy link
Contributor

@imranhsayed imranhsayed Jan 25, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where are we using this package?
@wordpress/base-styles, we need to import it in sass file

"@zeit/next-sass": "^1.0.1",
"babel-loader": "^8.2.2",
"core-js": "^3.8.3",
"eslint": "^7.17.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"next-compose-plugins": "^2.2.1",
"node-sass": "^4.14.1",
"prettier": "^2.2.1",
"serialize-javascript": "^2.1.2"
}
}

91 changes: 58 additions & 33 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,46 +5,71 @@ import AddToCartButton from '../src/components/cart/AddToCartButton';
import Hero from '../src/components/home/Hero';
import Image from '../src/components/Image';
import { PRODUCTS_QUERY } from '../src/queries';
import { NextSeo } from 'next-seo';
import PropTypes from 'prop-types';

const NewProducts = ({ products }) => {

return (
Copy link
Contributor

@imranhsayed imranhsayed Jan 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add Prop types for products, using prop-types npm package

<div className="container mt-5">
<h2 className="text-center mb-5">Products</h2>
{products.length ? (
<div className="mt-2">
<div className="products-wrapper row">
{products.map((item) =>
// @TODO Need to add support for Group product.
undefined !== item && 'GroupProduct' !== item.__typename ? (
<div className="product-container col-md-3 mb-5" key={item.id}>
{/* @TODO need to get rid of using databseId here. */}
<Link href={`/product/${item.slug}`}>
<a>
<span className="product-link">
<Image
src={item?.image?.sourceUrl}
alt={item?.image?.altText || item?.name}
/>
<h5 className="product-name">{item.name}</h5>
<p className="product-price">{item.price}</p>
</span>
</a>
</Link>
<AddToCartButton product={item} />
</div>
) : (
''
)
)}
<>
<NextSeo
Copy link
Contributor

@imranhsayed imranhsayed Jan 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add a todo to make the seo data dynamic, that would later come from WordPress

title="wp-decoupled seo title"
description="wp-decoupled products description here."
// @TODO The SEO data are dynamic, should later come from WordPress.
/>
<div className="container mt-5">
<h2 className="text-center mb-5">Products</h2>
{products.length ? (
<div className="mt-2">
<div className="products-wrapper row">
{products.map((item) =>
// @TODO Need to add support for Group product.
undefined !== item && 'GroupProduct' !== item.__typename ? (
<div className="product-container col-md-3 mb-5" key={item.id}>
{/* @TODO need to get rid of using databseId here. */}
<Link href={`/product/${item?.slug}`}>
<a>
<span className="product-link">
<Image
src={item?.image?.sourceUrl}
alt={item?.image?.altText || item?.name}
/>
<h5 className="product-name">{item?.name}</h5>
<p className="product-price">{item?.price}</p>
</span>
</a>
</Link>
<AddToCartButton product={item} />
</div>
) : (
null
)
)}
</div>
</div>
</div>
) : (
''
)}
</div>
) : (
null
)}
</div>
</>
);
};

NewProducts.propTypes = {
products: PropTypes.arrayOf(
PropTypes.shape({
databaseId: PropTypes.integer,
averageRating: PropTypes.integer,
description: PropTypes.integer,
id: PropTypes.string,
image: PropTypes.object,
name: PropTypes.integer,
price: PropTypes.integer,
slug: PropTypes.integer,
})
),
}

const Index = (props) => {
const { products } = props;

Expand Down
1 change: 1 addition & 0 deletions src/stories/assets/code-brackets.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/stories/assets/colors.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading