Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Tony Lepmets committed Jan 14, 2020
0 parents commit 8f66721
Show file tree
Hide file tree
Showing 213 changed files with 27,231 additions and 0 deletions.
33 changes: 33 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build
/dist

# misc
.DS_Store
.env*
.serverless_nextjs

# moovweb xdn
.moov

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# IDEs
.idea/*
6 changes: 6 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/src
/test
/coverage
yarn-error.log
yarn.lock
.prettierrc
6 changes: 6 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"singleQuote": true,
"semi": false,
"trailingComma": "all",
"printWidth": 100
}
3 changes: 3 additions & 0 deletions .storybook/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { configure } from '@storybook/react'

configure(require.context('./stories', true, /\.stories\.js$/), module)
17 changes: 17 additions & 0 deletions .storybook/stories/ExpandableSection.stories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from 'react'
import ExpandableSection from '../../src/ExpandableSection'
import { Typography } from '@material-ui/core'

export default { title: 'ExpandableSection' }

export const collapsed = () => (
<ExpandableSection title="Help" caption="Click here for more info">
<Typography>This is a help section</Typography>
</ExpandableSection>
)

export const expanded = () => (
<ExpandableSection title="Help" caption="Click here for more info" expanded={true}>
<Typography>This is a help section</Typography>
</ExpandableSection>
)
53 changes: 53 additions & 0 deletions .storybook/stories/ProductOptionSelector.stories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React, { useState } from 'react'
import ProductOptionSelector from '../../src/option/ProductOptionSelector'

export default { title: 'ProductOptionSelector' }

const colors = [
{
text: 'Red',
id: 'red',
image: {
src: 'https://via.placeholder.com/48x48/f44336?text=%20',
alt: 'red',
},
},
{
text: 'Green',
id: 'green',
image: {
src: 'https://via.placeholder.com/48x48/4caf50?text=%20',
alt: 'green',
},
},
{
text: 'Blue',
id: 'blue',
image: {
src: 'https://via.placeholder.com/48x48/2196f3?text=%20',
alt: 'blue',
},
},
{
text: 'Grey',
id: 'grey',
image: {
src: 'https://via.placeholder.com/48x48/e0e0e0?text=%20',
alt: 'grey',
},
},
]

export const basic = () => {
const [color, setColor] = useState(colors[0])

return (
<ProductOptionSelector
options={colors}
optionProps={{
selectedOption: color,
onSelectedOptionChange: color => setColor(color),
}}
/>
)
}
181 changes: 181 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
# React Storefront - the fastest, headless eCommerce PWA

<img src="https://divante.com/github/react-storefront/RSF.png" width="430px" ></img>

![version](https://img.shields.io/badge/node-v8.x-blue.svg)
![Branch stable](https://img.shields.io/badge/stable%20branch-master-blue.svg)
![Branch Develop](https://img.shields.io/badge/dev%20branch-develop-blue.svg)
<a href="https://slack.reactstorefront.io">![Branch Develop](https://img.shields.io/badge/community%20chat-slack-FF1493.svg)</a>

React Storefront a standalone PWA storefront for your eCommerce websites that works with any eCommerce platform or backend system.

Crafted with ❤️ by <a href="https://www.moovweb.com">Moovweb</a>. Developed with <a href="https://divante.com">Divante</a> team and the Community.
Our goal is to build a vibrant open source community around the project and solid PWA framework React developers will love :)

## Ludicrous Speed

React Storefront goes the extra mile to squeeze speed out of every possible real and user perceived performance optimization including:

- Server Side Rendering
- Automatic AMP creation
- Predictive prefetching
- Code splitting
- Cache optimization
- Client data reuse
- Skeletons
- and more

Bottom Line: sub-second page loads that are unmatched in the industry!

<a href="https://demo.reactstorefront.io"><img src="https://divante.com/github/react-storefront/rsf-github.png" alt="Subsecond PWA now available for React devs"/></a>

## A Different Approach

React Storefront takes a bold new approach that values developer productivity so you can get more done in less time:

- No config -- download and start coding
- Opinionated framework that does the heavy lifting for you
- Unified code base that uses isomorphic JavaScript across the server, client, and CDN
- Generate AMP and PWA from a single code base
- Automatically guides developers into performance best practices
- Supports source maps for Chrome Debugger and Visual Studio Code

React Storefront is and always will be open source. Anyone can use and support the project, we want it to be a tool to improve the online shopping experience for everyone.

The project is in the **production ready** phase. Already supporting live retailer sites with 10M$ + to 1B$+ in annual eCommerce revenue!

**We are looking for Contributors and Designers willing to help us in the solution development.**

## See it in action

<table>
<tbody>
<tr>
<td align="center" valign="middle">
<a href="https://demo.reactstorefront.io">
<img
src="https://divante.com/github/react-storefront/rsf-github-try-demo.png"
alt="B2C Theme demo"
style="width: 100px;">
</a>
</td>
<td align="left" valign="top">
Try out our open demo and if you like it <strong>first give us some stars on GitHub ★</strong> and then contact with us on <a href="https://slack.reactstorefront.io">Slack</a> or via [email protected]. <br /><br /> This demo site is connected to a BigCommerce demo instance. <br /><br />If You like to integrate your custom 3rd-party backend please <a href="https://reactstorefront.io">do contact us</a>.
</td>
</tr>
</tbody>
</table>

## Integrations

React Storefront can be easily integrated with any eCommerce platform by [implementing the synthetic API](https://pwa.moovweb.com/guides/calling_apis). To make life easier we're preparing some out-of-the-box integrations. Currently we support **BigCommerce** out of the box. More platforms to come soon!

<a href="https://github.com/moovweb/BigCommerce"><img src="https://divante.com/github/react-storefront/rsf-github-bc-supported.png" alt="BigCommerce is officialy supported"/></a>

## How to get started?

You can create a local copy of the demo site using `create-react-storefront` to use as a starting point for your own site:

```
npm install -g create-react-storefront
create-react-storefront my-site
npm run start:express
```

<a href="https://pwa.moovweb.com">Read the Tutorial.</a>
Check out [the source code of the demo site](https://github.com/react-storefront-community/react-storefront-boilerplate).

## Development

If you like to contribute please feel free to **Raise an issue** with a bug or feature request report, or just open a **Pull Request** with the proposed changes. In any case [read the CONTRIBUTING.md first](./CONTRIBUTING.md)

Please feel invited to join our React Storefront Community!

## Local development

Publish to local yalc store:
`yalc publish`

Run `yarn watch` to push updated builds to yalc store on changes.

In project:
`yalc add react-storefront`

## Join the community on Slack

If you have any questions or ideas feel free to join our slack: [invitation link](https://slack.reactstorefront.io)

## Roadmap

[Here](https://github.com/react-storefront-community/react-storefront/milestones) you can find the roadmap for current milestone and what you can expect with the next release.

Our short and mid-term plans include:

- adding alternative production build and deployment options,
- optimize the UI layer,
- long term plan - to port <a href="https://storefrontui.io">Storefront UI</a> to React and use it in the project.

## Documentation

The documentation is always THE HARDEST PART of each open source project! But we're trying hard :-)
[Full Guides, API Documentation, and Examples](https://pwa.moovweb.com/)

## The business challenges

React Storefront was created to solve a set of key business challenges from the world of the shopping experience. Our goal is to provide the following solutions:

- An ultrafast front-end for the store- with the PWA approach we can now render the catalog of products within milliseconds;
- Endurance for traffic overloads on the store;
- Off-line shopping capabilities;
- A smooth shopping experience, similar to that of a native mobile application;
- An all-in-one front-end for desktop and mobile devices with no necessity for maintaining 3 or more applications for different touchpoints (web browser, Android, iOS etc.).
- Rapid development without architecture limitations.

## Support us!

**React Storefront is and always will be Open Source, released under Apache2 Licence.**

Most of the core team members, React Storefront contributors and contributors in the ecosystem do this open source work in their free time. If you use React Storefront for a serious task, and you'd like us to invest more time on it, you can donate to the project! You can support us in various ways:

- **Contribute** - this is how the Core Team is supporting the project!
- **Evangelize** - tweet about us, take some speaking slot at tech conference etc.

**If you would like to support us please just let us know: [email protected]**

## Works best on Moovweb CDN

React Storefront runs best on <a href="https://www.moovweb.com">the Moovweb XDN</a>.
Moovweb provides a serverless platform-as-a-service called the XDN (Experience Delivery Network) that is available for purchase. The XDN helps developers optimize speed across the entire stack to deliver dynamic websites that load in a blink of the eye. Features that are available for purchase are listed are tagged with "XDN" in the table of contents.

## React Storefront and Vue Storefront

This project has been created by Moovweb. Divante has recently joined and we decided to open it and develop towards general purpose PWA framework. Divante folks created <a href="https://vuestorefront.io">Vue Storefront</a> - the most popular PWA framework for eCommerce and Vue.js.

The products, despite the common name are totally different at this point.

Our goal joining the forces is to build a vibrant community. We started the cooperation with the natural step of adding BigCommerce support to the framework. Both React and BigCommerce were not available in the frameworks we used yet! The next steps are to work on providing the different deployment options, to optimize the UI and to hear your feedback and improve the product!

PS: Check [StorefrontUI](https://github.com/DivanteLtd/storefront-ui/) - our UI library for eCommerce. We plan to port it from Vue.js to React in the nearest future

## Partners

Crafted with ❤️ by <a href="https://www.moovweb.com">Moovweb</a> and developed with <a href="https://divante.com">Divante</a> team. <a href="">Read the full story.</a>

React Storefront is a Community effort brought to You by our great Core Team and supported by the following companies.

<a href="https://www.moovweb.com"><img alt="Moovweb logo" height="50px" src="https://divante.com/github/react-storefront/partner_logo_moovweb.png"/></a>
<a href="https://divante.com"><img alt="Divante logo" height="50px" src="https://divante.com/github/react-storefront/divante_partner_logo.png"/></a>
<a href="https://vuestorefront.io"><img alt="Vue Storefront logo" height="50px" src="https://divante.com/github/react-storefront/vuestorefront.png"/></a>
<a href="https://bigcommerce.com"><img alt="BigCommerce logo" height="50px" src="https://divante.com/github/react-storefront/big_commerce_logo.png"/></a>

Partners are encouraged to support the project in various ways - mostly by contributing to the source code, marketing activities, evangelizing and of course - implementing the production projects. We do support our partners by dedicated contact channels, workshops and by sharing the leads from merchants interested in implementations.

If you like to become our Partner just let us know via [email protected].

## The license

React Storefront source code is completely free and released under the [Apache2 License](https://github.com/react-storefront-community/react-storefront/blob/master/LICENSE).

## Changelog

With any new Pull Request please make sure you've updated the [CHANGELOG file](CHANGELOG.md).
Loading

0 comments on commit 8f66721

Please sign in to comment.