Merge pull request #5 from titicacadev/feature/triple-image-carousel

 💫triple-image-carousel 패키지 추가

Author: yceffort

docs/package.json

@@ -8,7 +8,7 @@
     "build": "build-storybook -s ./public"
   },
   "dependencies": {
-    "@titicaca/triple-author": "^1.0.0-alpha.1",
+    "@titicaca/triple-author": "^1.0.0-alpha.2",
     "@titicaca/triple-design-system": "^1.0.0-alpha.0",
     "@titicaca/triple-document": "^1.0.0-alpha.0",
     "@titicaca/triple-poi": "^1.0.0-alpha.0"

lerna.json

@@ -4,5 +4,5 @@
     "docs",
     "tests"
   ],
-  "version": "1.0.0-alpha.1"
+  "version": "1.0.0-alpha.2"
 }

packages/triple-author/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titicaca/triple-author",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "Triple Author UI elements",
   "homepage": "https://github.com/titicacadev/triple-frontend#readme",
   "main": "lib/index.js",
@@ -15,6 +15,6 @@
     "url": "https://github.com/titicacadev/triple-frontend/issues"
   },
   "dependencies": {
-    "@titicaca/triple-design-system": "^1.0.0-alpha.1"
+    "@titicaca/triple-design-system": "^1.0.0-alpha.2"
   }
 }

packages/triple-design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titicaca/triple-design-system",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "Triple Design System Library",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/titicacadev/triple-design-system#readme",
   "dependencies": {
-    "@titicaca/triple-view-utilities": "^1.0.0-alpha.1",
+    "@titicaca/triple-view-utilities": "^1.0.0-alpha.2",
     "nuka-carousel": "4.4.1",
     "react-addons-css-transition-group": "^15.6.2",
     "react-input-mask": "^2.0.4"

packages/triple-document/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titicaca/triple-document",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "TripleDocument: Formatted Content System",
   "main": "lib/index.js",
   "files": [
@@ -15,7 +15,7 @@
   },
   "homepage": "https://github.com/titicacadev/triple-frontend#readme",
   "dependencies": {
-    "@titicaca/triple-design-system": "^1.0.0-alpha.1",
-    "@titicaca/triple-poi": "^1.0.0-alpha.1"
+    "@titicaca/triple-design-system": "^1.0.0-alpha.2",
+    "@titicaca/triple-poi": "^1.0.0-alpha.2"
   }
 }

packages/triple-image-carousel/README.md

@@ -0,0 +1,3 @@
+# `triple-image-carousel`
+
+[nuka-carousel](https://github.com/FormidableLabs/nuka-carousel)을 기반으로 제작된 이미지 캐러셀입니다.

packages/triple-image-carousel/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@titicaca/triple-image-carousel",
+  "version": "1.0.0-alpha.2",
+  "description": "Triple Image Carousel",
+  "main": "lib/index.js",
+  "files": [
+    "lib/"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/titicacadev/triple-frontend.git"
+  },
+  "bugs": {
+    "url": "https://github.com/titicacadev/triple-frontend/issues"
+  },
+  "homepage": "https://github.com/titicacadev/triple-frontend#readme",
+  "dependencies": {
+    "@titicaca/triple-design-system": "^1.0.0-alpha.2",
+    "nuka-carousel": "4.4.1"
+  }
+}

packages/triple-document/src/image.tsx …ages/triple-image-carousel/src/index.tsxpackages/triple-document/src/image.tsx renamed to packages/triple-image-carousel/src/index.tsx packages/triple-document/src/image.tsx renamed to packages/triple-image-carousel/src/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styled from 'styled-components'
+import Pager from './pager'
 import {
-  Pager,
   Image,
   MarginPadding,
   GlobalSizes,

packages/triple-image-carousel/src/pager.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import PagerCarousel from 'nuka-carousel'
+import { Container, MarginPadding } from '@titicaca/triple-design-system'
+
+const Pager = ({
+  margin,
+  borderRadius,
+  currentPage,
+  onPageChange,
+  pageLabelComponent,
+  children,
+}: {
+  margin?: MarginPadding
+  borderRadius?: number
+  currentPage?: number
+  onPageChange?: (e?: React.SyntheticEvent) => any
+  pageLabelComponent?: React.ReactNode
+  children?: React.ReactNode
+}) => (
+  <Container margin={margin} borderRadius={borderRadius}>
+    <PagerCarousel
+      slideIndex={currentPage}
+      afterSlide={onPageChange}
+      speed={100}
+      renderTopRightControls={pageLabelComponent}
+      renderBottomCenterControls={null}
+      renderCenterLeftControls={null}
+      renderCenterRightControls={null}
+    >
+      {children}
+    </PagerCarousel>
+  </Container>
+)
+
+export default Pager

packages/triple-image-carousel/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "baseUrl": ".",
+    "rootDir": "src",
+    "emitDeclarationOnly": true,
+  },
+  "include": ["./src"],
+  "exclude": ["node_modules", "lib"]
+}