Changes/ Stable

This commit is contained in:
Belen Curcio 2020-10-01 18:26:33 -03:00
commit 1c833447ea
12 changed files with 268 additions and 6740 deletions

View File

@ -1,3 +1,3 @@
.root {
@apply flex flex-row px-2;
@apply w-full h-full flex flex-row px-2;
}

View File

@ -1,7 +1,7 @@
import cn from "classnames";
import s from "./ProductCard.module.css";
import React, { FunctionComponent } from "react";
import { Heart } from "@components/icon";
interface Props {
className?: string;
children?: any;
@ -12,13 +12,16 @@ const ProductCard: FunctionComponent<Props> = ({ className }) => {
return (
<div className={rootClassName}>
<div className="absolute">
<h1 className="px-8 py-2 bg-violet text-white font-bold text-3xl">
{/* {productData.title} */}
<h1 className="px-8 py-2 bg-white text-black font-bold text-3xl">
T-Shirt
</h1>
<div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block">
{/* {productData.price} */}
<div className="px-6 py-2 pb-4 bg-white text-black font-semibold inline-block">
$50
</div>
</div>
<div className="absolute flex items-center justify-center h-12 w-12 bg-white text-black">
<Heart />
</div>
<div className="flex-1 h-full p-24">
<div className="bg-violet h-full"></div>
</div>

View File

@ -1,7 +1,7 @@
import cn from "classnames";
import React, { FunctionComponent } from "react";
import s from "./ProductGrid.module.css";
import ProductCard from "@components/ProductCard";
interface Props {
className?: string;
children?: any;

View File

@ -1,9 +1,9 @@
import {
import type {
GetAllProductsQuery,
GetAllProductsQueryVariables,
} from "lib/bigcommerce/schema";
import type { RecursivePartial, RecursiveRequired } from "../types";
import { getConfig, Images, ProductImageVariables } from "..";
import { RecursivePartial } from "../types";
export const getAllProductsQuery = /* GraphQL */ `
query getAllProducts(
@ -104,42 +104,45 @@ export const getAllProductsQuery = /* GraphQL */ `
export interface GetAllProductsResult<T> {
products: T extends GetAllProductsQuery
? T["site"]["products"]["edges"]
? NonNullable<T["site"]["products"]["edges"]>
: unknown;
}
export type ProductVariables = Images &
Omit<GetAllProductsQueryVariables, keyof ProductImageVariables>;
async function getAllProducts<T, V = any>(opts: {
query: string;
variables?: V;
}): Promise<GetAllProductsResult<T>>;
async function getAllProducts(opts?: {
query?: string;
variables?: ProductVariables;
}): Promise<GetAllProductsResult<GetAllProductsQuery>>;
async function getAllProducts<T, V = any>(opts: {
query: string;
variables?: V;
}): Promise<GetAllProductsResult<T>>;
async function getAllProducts({
query = getAllProductsQuery,
variables: vars,
}: {
query?: string;
variables?: ProductVariables;
} = {}): Promise<GetAllProductsResult<RecursivePartial<GetAllProductsQuery>>> {
} = {}): Promise<GetAllProductsResult<GetAllProductsQuery>> {
const config = getConfig();
const variables: GetAllProductsQueryVariables = {
...config.imageVariables,
...vars,
};
// RecursivePartial forces the method to check for every prop in the data, which is
// required in case there's a custom `query`
const data = await config.fetch<RecursivePartial<GetAllProductsQuery>>(
query,
{ variables }
);
const products = data.site?.products?.edges;
return {
products: data?.site?.products?.edges,
products: (products as RecursiveRequired<typeof products>) ?? [],
};
}

View File

@ -0,0 +1,131 @@
import type {
GetProductQuery,
GetProductQueryVariables,
} from 'lib/bigcommerce/schema';
import type { RecursivePartial, RecursiveRequired } from '../types';
import { getConfig, Images, ProductImageVariables } from '..';
export const getProductQuery = /* GraphQL */ `
query getProduct(
$slug: String!
$imgSmallWidth: Int = 320
$imgSmallHeight: Int
$imgMediumWidth: Int = 640
$imgMediumHeight: Int
$imgLargeWidth: Int = 960
$imgLargeHeight: Int
$imgXLWidth: Int = 1280
$imgXLHeight: Int
) {
site {
route(path: $slug) {
node {
__typename
... on Product {
entityId
name
path
brand {
name
}
description
prices {
price {
currencyCode
value
}
salePrice {
currencyCode
value
}
}
images {
edges {
node {
urlSmall: url(width: $imgSmallWidth, height: $imgSmallHeight)
urlMedium: url(
width: $imgMediumWidth
height: $imgMediumHeight
)
urlLarge: url(width: $imgLargeWidth, height: $imgLargeHeight)
urlXL: url(width: $imgXLWidth, height: $imgXLHeight)
}
}
}
variants {
edges {
node {
entityId
}
}
}
options {
edges {
node {
entityId
displayName
isRequired
values {
edges {
node {
entityId
label
}
}
}
}
}
}
}
}
}
}
}
`;
export interface GetProductResult<T> {
product?: T extends GetProductQuery
? Extract<T['site']['route']['node'], { __typename: 'Product' }>
: unknown;
}
export type ProductVariables = Images &
Omit<GetProductQueryVariables, keyof ProductImageVariables>;
async function getProduct(opts: {
query?: string;
variables: ProductVariables;
}): Promise<GetProductResult<GetProductQuery>>;
async function getProduct<T, V = any>(opts: {
query: string;
variables: V;
}): Promise<GetProductResult<T>>;
async function getProduct({
query = getProductQuery,
variables: vars,
}: {
query?: string;
variables: ProductVariables;
}): Promise<GetProductResult<GetProductQuery>> {
const config = getConfig();
const variables: GetProductQueryVariables = {
...config.imageVariables,
...vars,
};
const data = await config.fetch<RecursivePartial<GetProductQuery>>(query, {
variables,
});
const product = data.site?.route?.node;
if (product?.__typename === 'Product') {
return {
product: product as RecursiveRequired<typeof product>,
};
}
return {};
}
export default getProduct;

View File

@ -1,3 +1,7 @@
export type RecursivePartial<T> = {
[P in keyof T]?: RecursivePartial<T[P]>;
};
export type RecursiveRequired<T> = {
[P in keyof T]-?: RecursiveRequired<T[P]>;
};

View File

@ -1736,3 +1736,80 @@ export type GetAllProductsQuery = (
) }
) }
);
export type GetProductQueryVariables = Exact<{
slug: Scalars['String'];
imgSmallWidth?: Maybe<Scalars['Int']>;
imgSmallHeight?: Maybe<Scalars['Int']>;
imgMediumWidth?: Maybe<Scalars['Int']>;
imgMediumHeight?: Maybe<Scalars['Int']>;
imgLargeWidth?: Maybe<Scalars['Int']>;
imgLargeHeight?: Maybe<Scalars['Int']>;
imgXLWidth?: Maybe<Scalars['Int']>;
imgXLHeight?: Maybe<Scalars['Int']>;
}>;
export type GetProductQuery = (
{ __typename?: 'Query' }
& { site: (
{ __typename?: 'Site' }
& { route: (
{ __typename?: 'Route' }
& { node?: Maybe<{ __typename: 'Brand' } | { __typename: 'Category' } | (
{ __typename: 'Product' }
& Pick<Product, 'entityId' | 'name' | 'path' | 'description'>
& { brand?: Maybe<(
{ __typename?: 'Brand' }
& Pick<Brand, 'name'>
)>, prices?: Maybe<(
{ __typename?: 'Prices' }
& { price: (
{ __typename?: 'Money' }
& Pick<Money, 'currencyCode' | 'value'>
), salePrice?: Maybe<(
{ __typename?: 'Money' }
& Pick<Money, 'currencyCode' | 'value'>
)> }
)>, images: (
{ __typename?: 'ImageConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'ImageEdge' }
& { node: (
{ __typename?: 'Image' }
& { urlSmall: Image['url'], urlMedium: Image['url'], urlLarge: Image['url'], urlXL: Image['url'] }
) }
)>>> }
), variants: (
{ __typename?: 'VariantConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'VariantEdge' }
& { node: (
{ __typename?: 'Variant' }
& Pick<Variant, 'entityId'>
) }
)>>> }
), options: (
{ __typename?: 'OptionConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'OptionEdge' }
& { node: (
{ __typename?: 'ProductOption' }
& Pick<ProductOption, 'entityId' | 'displayName' | 'isRequired'>
& { values: (
{ __typename?: 'OptionValueConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'OptionValueEdge' }
& { node: (
{ __typename?: 'ProductOptionValue' }
& Pick<ProductOptionValue, 'entityId' | 'label'>
) }
)>>> }
) }
) }
)>>> }
) }
) | { __typename: 'Variant' }> }
) }
) }
);

6710
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -18,7 +18,7 @@
"classnames": "^2.2.6",
"lodash": "^4.17.20",
"next": "^9.5.4-canary.20",
"postcss-nested": "^5.0.0",
"postcss-nested": "^5.0.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"swr": "^0.3.3"

View File

@ -1,8 +1,16 @@
import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
import { useRouter } from "next/router";
import getProduct from "lib/bigcommerce/api/operations/get-product";
import { Layout } from "@components/core";
import { ProductView } from "@components/product";
export async function getStaticProps() {
export async function getStaticProps({
params,
}: GetStaticPropsContext<{ slug: string }>) {
const { product } = await getProduct({ variables: { slug: params!.slug } });
console.log("PRODUCT", product);
const productData = {
title: "T-Shirt",
description: `
@ -32,7 +40,9 @@ export async function getStaticPaths() {
};
}
export default function Home({ productData }) {
export default function Home({
productData,
}: InferGetStaticPropsType<typeof getStaticProps>) {
const router = useRouter();
return (
<Layout>

View File

@ -1,16 +1,16 @@
module.exports = {
plugins: [
'tailwindcss',
'postcss-flexbugs-fixes',
"tailwindcss",
"postcss-flexbugs-fixes",
[
'postcss-preset-env',
"postcss-preset-env",
{
autoprefixer: {
flexbox: 'no-2009',
flexbox: "no-2009",
},
stage: 3,
features: {
'custom-properties': false,
"custom-properties": false,
},
},
],

View File

@ -5712,12 +5712,12 @@ postcss-nested@^4.1.1:
postcss "^7.0.32"
postcss-selector-parser "^6.0.2"
postcss-nested@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.0.tgz#0d05bb93578ec42919bdbda7d4eb419d5f58fe07"
integrity sha512-jQVUwMOkDJPHyY1o3bxLErHnxIFsO3yDgdDsL/rjSkUHrWNdtNGhP50O0P+vUjEwPo+ekCRhLXTe8TziARoS0w==
postcss-nested@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.1.tgz#e7a77f7a806a09c8de0f2c163d8e3d09f00f3139"
integrity sha512-ZHNSAoHrMtbEzjq+Qs4R0gHijpXc6F1YUv4TGmGaz7rtfMvVJBbu5hMOH+CrhEaljQpEmx5N/P8i1pXTkbVAmg==
dependencies:
postcss-selector-parser "^6.0.2"
postcss-selector-parser "^6.0.4"
postcss-nesting@^7.0.0:
version "7.0.1"
@ -5848,6 +5848,16 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
uniq "^1.0.1"
util-deprecate "^1.0.2"
postcss-selector-parser@^6.0.4:
version "6.0.4"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
integrity sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==
dependencies:
cssesc "^3.0.0"
indexes-of "^1.0.1"
uniq "^1.0.1"
util-deprecate "^1.0.2"
postcss-value-parser@^3.3.0:
version "3.3.1"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"