Skip to content

Commit

Permalink
Restructured as monorepo, made some room for native version
Browse files Browse the repository at this point in the history
  • Loading branch information
mohitk05 committed Oct 19, 2019
1 parent 75f91a9 commit d92d7a0
Show file tree
Hide file tree
Showing 62 changed files with 7,139 additions and 118 deletions.
4 changes: 4 additions & 0 deletions lerna.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"packages": ["packages/*"],
"version": "independent"
}
52 changes: 5 additions & 47 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,49 +1,7 @@
{
"name": "react-insta-stories",
"version": "2.0.1",
"description": "A React component for Instagram like stories",
"main": "dist/index.js",
"scripts": {
"build": "rm -rf ./dist && webpack --mode production",
"build:dev": "rm -rf ./dist && webpack --mode development",
"prestart": "rm -rf ./dist && webpack --mode development",
"start": "webpack-dev-server --open",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/mohitk05/react-insta-stories.git"
},
"keywords": [
"stories",
"react",
"instagram"
],
"author": "mohitk05",
"license": "MIT",
"bugs": {
"url": "https://github.com/mohitk05/react-insta-stories/issues"
},
"homepage": "https://github.com/mohitk05/react-insta-stories#readme",
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@types/react": "^16.9.2",
"@types/react-dom": "^16.8.5",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"react": "^16.10.2",
"source-map-loader": "^0.2.4",
"style-loader": "^1.0.0",
"ts-loader": "^6.0.4",
"typescript": "^3.5.3",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1"
},
"peerDependencies": {
"react": "^16.8.2"
},
"dependencies": {}
"name": "root",
"private": true,
"devDependencies": {
"lerna": "^3.18.1"
}
}
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
113 changes: 58 additions & 55 deletions README.md → packages/react-insta-stories/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,14 @@

[![Backers on Open Collective](https://opencollective.com/react-insta-stories/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/react-insta-stories/sponsors/badge.svg)](#sponsors) [![NPM](https://img.shields.io/npm/v/react-insta-stories.svg)](https://www.npmjs.com/package/react-insta-stories) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[Get a sneak peek of what's cooking in v2 🍲](http://react-insta-stories-v2.surge.sh/)

Version 2 - Recent updates 🚀

- TypeScript 🎉
- Updated for easier feature additions
- Create multiple instances to recreate stories by multiple users
- Render JSX into your stories

![Demo screenshot](https://i.imgur.com/Twvjxp5.png)

Expand All @@ -32,64 +35,64 @@ import React, { Component } from 'react';
import Stories from 'react-insta-stories';

class App extends Component {
render() {
return (
<Stories
stories={stories}
defaultInterval={1500}
width={432}
height={768}
/>
);
}
render() {
return (
<Stories
stories={stories}
defaultInterval={1500}
width={432}
height={768}
/>
);
}
}

const stories = [
{
url: 'https://picsum.photos/1080/1920',
seeMore: <SeeMore />,
header: {
heading: 'Mohit Karekar',
subheading: 'Posted 5h ago',
profileImage: 'https://picsum.photos/1000/1000'
}
},
{
url:
'https://fsa.zobj.net/crop.php?r=dyJ08vhfPsUL3UkJ2aFaLo1LK5lhjA_5o6qEmWe7CW6P4bdk5Se2tYqxc8M3tcgYCwKp0IAyf0cmw9yCmOviFYb5JteeZgYClrug_bvSGgQxKGEUjH9H3s7PS9fQa3rpK3DN3nx-qA-mf6XN',
header: {
heading: 'Mohit Karekar',
subheading: 'Posted 32m ago',
profileImage: 'https://picsum.photos/1080/1920'
}
},
{
url:
'https://media.idownloadblog.com/wp-content/uploads/2016/04/iPhone-wallpaper-abstract-portrait-stars-macinmac.jpg',
header: {
heading: 'mohitk05/react-insta-stories',
subheading: 'Posted 32m ago',
profileImage:
'https://avatars0.githubusercontent.com/u/24852829?s=400&v=4'
}
},
{
url: 'https://storage.googleapis.com/coverr-main/mp4/Footboys.mp4',
type: 'video',
duration: 1000
},
{
url:
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4',
type: 'video',
seeMore: <SeeMore />
},
{
url:
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
type: 'video'
},
'https://images.unsplash.com/photo-1534856966153-c86d43d53fe0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=564&q=80'
{
url: 'https://picsum.photos/1080/1920',
seeMore: <SeeMore />,
header: {
heading: 'Mohit Karekar',
subheading: 'Posted 5h ago',
profileImage: 'https://picsum.photos/1000/1000'
}
},
{
url:
'https://fsa.zobj.net/crop.php?r=dyJ08vhfPsUL3UkJ2aFaLo1LK5lhjA_5o6qEmWe7CW6P4bdk5Se2tYqxc8M3tcgYCwKp0IAyf0cmw9yCmOviFYb5JteeZgYClrug_bvSGgQxKGEUjH9H3s7PS9fQa3rpK3DN3nx-qA-mf6XN',
header: {
heading: 'Mohit Karekar',
subheading: 'Posted 32m ago',
profileImage: 'https://picsum.photos/1080/1920'
}
},
{
url:
'https://media.idownloadblog.com/wp-content/uploads/2016/04/iPhone-wallpaper-abstract-portrait-stars-macinmac.jpg',
header: {
heading: 'mohitk05/react-insta-stories',
subheading: 'Posted 32m ago',
profileImage:
'https://avatars0.githubusercontent.com/u/24852829?s=400&v=4'
}
},
{
url: 'https://storage.googleapis.com/coverr-main/mp4/Footboys.mp4',
type: 'video',
duration: 1000
},
{
url:
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4',
type: 'video',
seeMore: <SeeMore />
},
{
url:
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
type: 'video'
},
'https://images.unsplash.com/photo-1534856966153-c86d43d53fe0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=564&q=80'
];
```

Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes
File renamed without changes.
File renamed without changes.
7 changes: 7 additions & 0 deletions packages/react-insta-stories/example/src/App.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.App {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
filter: drop-shadow(0 2px 15px #eee);
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect } from 'react';
import './App.css';
import Stories from 'react-insta-stories'

Expand All @@ -17,27 +17,71 @@ class App extends React.Component {
render() {
return (
<div className="App">
<Stories stories={stories2} loop />
<Stories defaultInterval={10000} stories={stories2} />
</div>
);
}
}

const stories2 = ['https://images.unsplash.com/photo-1499202189329-5d76e29aa2b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1482&q=80', {
const Story2 = ({ action, isPaused }) => {
useEffect(() => {
setTimeout(() => {
action('pause')
setTimeout(() => {
action('play')
}, 2000)
}, 2000)
}, [])
return <div style={{ ...contentStyle, background: 'Aquamarine', color: '#16161d' }}>
<h1>You get the control of the story.</h1>
<p>Render your custom JSX by passing just a <code style={{ fontStyle: 'italic' }}>content</code> property inside your story object.</p>
<p>You get a <code style={{ fontStyle: 'italic' }}>action</code> prop as an input to your content function, that can be used to play or pause the story.</p>
<h1>{isPaused ? 'Paused' : 'Playing'}</h1>
<h4>Excited to launch v2!! Expect it around October endish. Cheers! 🎉</h4>
<p>react-insta-stories v2 coming soon.</p>
<p>And so is the React Native version 💫</p>
</div>
}

const stories2 = [{
content: (action) => {
return <div style={contentStyle}>
<h1 style={{ color: 'white' }}>Helloooo!</h1>
<h1>The new version is here.</h1>
<p>This is the new story.</p>
<p>Now render React components right into your stories.</p>
<p>Possibilities are endless, like here - here's a code block!</p>
<pre>
<code style={code}>
console.log('Hello, world!')
</code>
</pre>
<p>Or here, an image!</p>
<img style={image} src="https://images.unsplash.com/photo-1565506737357-af89222625ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"></img>
<h3>Pefect. But there's more! →</h3>
</div>
}
}, {
content: Story2
}]

const image = {
display: 'block',
maxHeight: 200,
borderRadius: 4,
}

const code = {
background: '#eee',
padding: '5px 10px',
borderRadius: '4px',
color: '#333'
}

const contentStyle = {
background: 'coral',
background: 'salmon',
width: '100%',
padding: 10,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
padding: 20,
color: 'white'
}

const stories = [{ url: 'https://picsum.photos/1080/1920', header: { heading: 'Mohit Karekar', subheading: 'Posted 5h ago', profileImage: 'https://picsum.photos/1000/1000' }, seeMore: <div>Hello</div> }, { url: 'https://fsa.zobj.net/crop.php?r=dyJ08vhfPsUL3UkJ2aFaLo1LK5lhjA_5o6qEmWe7CW6P4bdk5Se2tYqxc8M3tcgYCwKp0IAyf0cmw9yCmOviFYb5JteeZgYClrug_bvSGgQxKGEUjH9H3s7PS9fQa3rpK3DN3nx-qA-mf6XN', header: { heading: 'Mohit Karekar', subheading: 'Posted 32m ago', profileImage: 'https://picsum.photos/1080/1920' } }, { url: 'https://media.idownloadblog.com/wp-content/uploads/2016/04/iPhone-wallpaper-abstract-portrait-stars-macinmac.jpg', header: { heading: 'mohitk05/react-insta-stories', subheading: 'Posted 32m ago', profileImage: 'https://avatars0.githubusercontent.com/u/24852829?s=400&v=4' } }, { url: 'https://storage.googleapis.com/coverr-main/mp4/Footboys.mp4', type: 'video', duration: 1000 }, { url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4', type: 'video' }, { url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4', type: 'video' }, 'https://images.unsplash.com/photo-1534856966153-c86d43d53fe0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=564&q=80', 'https://images.unsplash.com/photo-1508186225823-0963cf9ab0de?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80', 'https://images.unsplash.com/photo-1499202189329-5d76e29aa2b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1482&q=80'].map((s, i) => {
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes.
File renamed without changes.
50 changes: 50 additions & 0 deletions packages/react-insta-stories/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
{
"name": "react-insta-stories",
"version": "2.0.1",
"description": "A React component for Instagram like stories",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"build": "rm -rf ./dist && webpack --mode production",
"build:dev": "rm -rf ./dist && webpack --mode development",
"prestart": "rm -rf ./dist && webpack --mode development",
"start": "webpack-dev-server --open",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/mohitk05/react-insta-stories.git"
},
"keywords": [
"stories",
"react",
"instagram"
],
"author": "mohitk05",
"license": "MIT",
"bugs": {
"url": "https://github.com/mohitk05/react-insta-stories/issues"
},
"homepage": "https://github.com/mohitk05/react-insta-stories#readme",
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@types/react": "^16.9.2",
"@types/react-dom": "^16.8.5",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"react": "^16.10.2",
"source-map-loader": "^0.2.4",
"style-loader": "^1.0.0",
"ts-loader": "^6.0.4",
"typescript": "^3.5.3",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1"
},
"peerDependencies": {
"react": "^16.8.2"
},
"dependencies": {}
}
File renamed without changes.
2 changes: 2 additions & 0 deletions packages/react-insta-stories/src/components/Container.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
/// <reference types="react" />
export default function (): JSX.Element;
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,6 @@ export default function () {
<div style={{ width: '50%', zIndex: 999 }} onTouchStart={debouncePause} onTouchEnd={e => mouseUp(e, 'previous')} onMouseDown={debouncePause} onMouseUp={(e) => mouseUp(e, 'previous')} />
<div style={{ width: '50%', zIndex: 999 }} onTouchStart={debouncePause} onTouchEnd={e => mouseUp(e, 'next')} onMouseDown={debouncePause} onMouseUp={(e) => mouseUp(e, 'next')} />
</div>
<p style={{ position: 'absolute', top: 640 }}>{count}</p>
</div>
)
}
Expand Down
4 changes: 4 additions & 0 deletions packages/react-insta-stories/src/components/Header.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/// <reference types="react" />
import { HeaderProps } from './../interfaces';
declare const Header: ({ profileImage, heading, subheading }: HeaderProps) => JSX.Element;
export default Header;
File renamed without changes.
4 changes: 4 additions & 0 deletions packages/react-insta-stories/src/components/Progress.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/// <reference types="react" />
import { ProgressProps } from './../interfaces';
declare const _default: (props: ProgressProps) => JSX.Element;
export default _default;
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
/// <reference types="react" />
declare const _default: () => JSX.Element;
export default _default;
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/// <reference types="react" />
import { ProgressWrapperProps } from './../interfaces';
declare const ProgressWrapper: (props: ProgressWrapperProps) => JSX.Element;
export default ProgressWrapper;
File renamed without changes.
3 changes: 3 additions & 0 deletions packages/react-insta-stories/src/components/SeeMore.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
/// <reference types="react" />
import { SeeMoreProps } from './../interfaces';
export default function seeMore(props: SeeMoreProps): JSX.Element;
File renamed without changes.
4 changes: 4 additions & 0 deletions packages/react-insta-stories/src/components/Story.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/// <reference types="react" />
import { StoryProps } from "./../interfaces";
declare const Story: (props: StoryProps) => JSX.Element;
export default Story;
Original file line number Diff line number Diff line change
Expand Up @@ -76,9 +76,9 @@ const Story = (props: StoryProps) => {
};

const getStoryContent = () => {
let innerContent = typeof props.story === "object" && props.story.content
if (innerContent) {
return innerContent(props.action)
let InnerContent = typeof props.story === "object" && props.story.content
if (InnerContent) {
return <InnerContent action={props.action} isPaused={props.playState} />
} else {
let source =
typeof props.story === "object" ? props.story.url : props.story;
Expand Down
4 changes: 4 additions & 0 deletions packages/react-insta-stories/src/context/Global.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import React from 'react';
import { GlobalCtx } from '../interfaces';
declare const GlobalContext: React.Context<GlobalCtx>;
export default GlobalContext;
File renamed without changes.
Loading

0 comments on commit d92d7a0

Please sign in to comment.