Add first components

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

.gitignore

@@ -0,0 +1,105 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+tmp

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "bojagi-example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "[email protected]:Bojagi/bojagi-example.git",
+  "author": "Simon Jentsch <[email protected]>",
+  "license": "BSD-3",
+  "private": true,
+  "scripts": {
+    "start": "webpack-dev-server --open --mode development"
+  },
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "styled-components": "^5.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-react": "^7.9.4",
+    "@bojagi/cli": "^0.8.0",
+    "babel-loader": "^8.1.0",
+    "html-loader": "^1.1.0",
+    "html-webpack-plugin": "^4.3.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.0"
+  }
+}

src/App.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled, { createGlobalStyle, css } from 'styled-components';
+import { Button } from './components/Button.jsx';
+import { Slider } from './components/Slider.jsx';
+
+const GlobalStyle = createGlobalStyle(css`
+  html, body {
+    margin: 0;
+    padding: 8px;
+  }
+`);
+
+const CompWrapper = styled.div`
+  margin: 12px;
+`;
+
+export function App() {
+  return (
+    <>
+      <GlobalStyle />
+      <CompWrapper>
+        <Button>Hello</Button>
+      </CompWrapper>
+      <CompWrapper>
+        <Button variant="outline">Hello</Button>
+      </CompWrapper>
+      <CompWrapper>
+        <Button variant="dotted">Hello</Button>
+      </CompWrapper>
+      <CompWrapper>
+        <Slider />
+      </CompWrapper>
+
+    </>
+  );
+}

src/components/Button.bojagi.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Button } from './Button.jsx';
+import styled, { css } from 'styled-components';
+
+export default {
+  title: 'Button',
+};
+
+export const Normal = () => 
+  <Button>Hello</Button>
+
+export const Outline = () => 
+  <Button variant="outline">Goodbye</Button>
+
+export const Dotted = () => 
+  <Button variant="dotted">Ob-la-di Ob-la-da</Button>

src/components/Button.jsx

@@ -0,0 +1,37 @@
+// @bojagi
+
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+const outlinedStyle = css`
+color: #ed2186;
+background-color: transparent;
+&:hover {
+  background-color: #af1e6630;
+}
+`;
+
+export const Button = styled.button`
+  cursor: pointer;
+  padding: 8px 16px;
+  font-size: 1em;
+  background-color: #ed2186;
+  color: #fff;
+  border: 1px solid #af1e66;
+
+  &:hover {
+    background-color: #af1e66;
+  }
+
+  ${props => props.variant === 'outline' && outlinedStyle}
+  ${props => props.variant === 'dotted' && css`
+    ${outlinedStyle}
+    border-style: dotted;
+  `}
+
+  outline: 0;
+  border-radius: 6px;
+  transition: background-color 0.5s;
+
+
+`;

src/components/Slider.bojagi.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Slider } from './Slider.jsx';
+import styled, { css } from 'styled-components';
+
+export default {
+  title: 'Slider',
+};
+
+const Wrapper = styled.div`
+  width: 80vw;
+  max-width: 500px;
+`;
+
+export const base = () => <Slider />;
+
+base.decorators = [(story) => <Wrapper>{story()}</Wrapper>];

src/components/Slider.jsx

@@ -0,0 +1,93 @@
+// @bojagi
+
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+const HANDLE_SIZE = 24;
+
+const Bar = styled.div`
+  margin: 16px 0;
+  height: 6px; 
+  width: 100%;
+  border-radius: 4px;
+  background-color: #eeeeee;
+  border: 1px solid #ddd;
+  position: relative;
+`;
+
+const ActiveBar = styled.div`
+  height: 6px;
+  width: calc(${props => props.position}% - ${HANDLE_SIZE * 0.5}px);
+  border-radius: 4px;
+  background-color: #af1e66;
+  border: 1px solid #af1e66;
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+
+const Handle = styled.div`
+  height: ${HANDLE_SIZE}px; 
+  width: ${HANDLE_SIZE}px; 
+  border-radius: 50%;
+  transform: translateY(-50%);
+  position: relative;
+  top: 4px;
+  margin-left: calc(${props => props.position}% - ${HANDLE_SIZE * 0.5}px);
+  /* left: ${props => props.position}px; */
+  border: 1px solid #00000030;
+  background-color: #fff;
+  box-shadow: 0 2px 6px #00000030;
+  cursor: pointer;
+
+  &:after {
+    display: block;
+    content: '';
+    height: 60%; 
+    width: 60%; 
+    border-radius: 50%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    background: linear-gradient(0deg, #af1e66 0%, #ed2186 100%);
+    transform: translateX(-50%) translateY(-50%);
+  }
+`;
+
+export const Slider = () => {
+  const barRef = React.useRef(null);
+  const [dragged, setDragged] = React.useState(false);
+  const [position, setPosition] = React.useState(0);
+  const handleDragStart = React.useCallback(() => {
+    setDragged(true);
+  }, []);
+
+  React.useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (dragged) {
+        const barRect = barRef.current.getBoundingClientRect();
+
+        const mousePos = e.clientX - barRect.left;
+        const posPercentage = mousePos / barRect.width;
+
+        setPosition(Math.max(Math.min(posPercentage, 1), 0));
+      }
+    };
+    const handleMouseUp = (e) => {
+      setDragged(false);
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [dragged, barRef]);
+
+  return <Bar ref={barRef}>
+    <ActiveBar position={position * 100} />
+    <Handle position={position * 100} onMouseDown={handleDragStart} />
+  </Bar>;
+}

src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Bojagi test</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>

src/index.jsx

@@ -0,0 +1,5 @@
+import { render } from 'react-dom';
+import React from 'react';
+import { App } from './App.jsx';
+
+render(<App />, document.getElementById('root'));