trepur_components 0.1.1 → 0.1.5

package/src/Components/Icon/Icon.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Readme from './README.md'
-import Icon from './Icon'
+import Icon from './index'
 import '../../index.css';
 
 export default {

package/src/Components/Icon/README.md

@@ -1 +0,0 @@
-hello this is a button

package/src/Components/Jumbotron/Jumbotron.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Readme from './README.md'
-import Jumbotron from './Jumbotron'
+import Jumbotron from './index'
 import '../../index.css';
 
 export default {

package/src/Components/Jumbotron/{Jumbotron.js → index.js}

@@ -1,4 +1,4 @@
-import Button from "../Button/Button"
+import Button from "../Button/index"
 
 const Jumbotron = ({
     image,

package/src/Components/Nav/Nav.stories.js

@@ -0,0 +1,89 @@
+import React from 'react'
+import Readme from './README.md'
+import Nav from './index'
+import '../../index.css';
+
+const links = [
+    { name: 'link 1', reference: '/' },
+    { name: 'link 2', reference: '/'},
+    { name: 'link n-1', reference: '/'},
+    { name: 'link n', reference: '/'}
+  ]
+
+export default {
+    title: 'Components/Nav',
+    argTypes: {
+        
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _Nav = (args) => {
+    return (
+        <Nav
+            links={links}
+            navPosition='1'
+            navClass="bg-brand-light-grey pb-4 pt-2"
+            navLinkClass='px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black'
+            logoClass='py-4'
+        />
+    )
+}
+
+export const NavWithSearch = () => {
+    return (
+        <Nav
+            links={links}
+            navPosition='1'
+            navClass="bg-brand-light-grey pb-4 pt-2"
+            navLinkClass='px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black'
+            logoClass='py-4'
+            showSearch
+        />
+    )
+}
+
+export const NavWithProfile = () => {
+    return (
+        <Nav
+            links={links}
+            navPosition='1'
+            navClass="bg-brand-light-grey pb-4 pt-2"
+            navLinkClass='px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black'
+            logoClass='py-4'
+            showProfile
+        />
+    )
+}
+
+export const NavWithSearchAndProfile = () => {
+    return (
+        <Nav
+            links={links}
+            navPosition='1'
+            navClass="bg-brand-light-grey pb-4 pt-2"
+            navLinkClass='px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black'
+            logoClass='py-4'
+            showProfile
+            showSearch
+        />
+    )
+}
+
+export const NavAligned = () => {
+    return (
+        <Nav
+            links={links}
+            navPosition='1'
+            navClass="bg-brand-light-grey pb-4 pt-2"
+            navLinkClass='px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black'
+            logoClass='py-4'
+            alignNavAndLogo
+        />
+    )
+}

package/src/Components/{Nav.js → Nav/index.js}

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import Profile from './Profile'
-import Search from './Search'
+import Profile from '../Profile/index'
+import Search from '../Search/index'
 
 const Header = ({
     links,

package/src/Components/Profile/Profile.stories.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import Readme from './README.md'
+import Profile from './index'
+import '../../index.css';
+
+const links = [
+    {
+        link: '/', 
+        name: 'link 1'
+    },
+    {
+        link: '/', 
+        name: 'link 2'
+    },
+    {
+        link: '/', 
+        name: 'Link 3'
+    },
+]
+
+export default {
+    title: 'Components/Breadcrumbs',
+    argTypes: {
+        
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _Breadcrumbs = (args) => {
+    return (
+        <Profile>
+        </Profile>
+    )
+}

package/src/Components/Search/Search.stories.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import Readme from './README.md'
+import Search from './index'
+import '../../index.css';
+import Icon from '../Icon/index'
+
+export default {
+    title: 'Components/Search',
+    argTypes: {
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _Search = (args) => {
+    return (
+        <Search>
+        </Search>
+    )
+}
+
+export const SearchWithPlaceholder = (args) => {
+    return (
+        <Search
+            placeholder='Enter some search item'>
+        </Search>
+    )
+}
+
+export const SearchWithLabel = (args) => {
+    return (
+        <Search
+            text='Label'>
+        </Search>
+    )
+}
+
+export const SearchWithIcon = (args) => {
+    return (
+        <Search
+            leftIcon = 'search'>
+        </Search>
+    )
+}
+
+export const SearchWithAll = (args) => {
+    return (
+        <Search
+            text='Label'
+            leftIcon = 'search'
+            placeholder='Enter some search item'>
+        </Search>
+    )
+}

package/src/Components/{Search.js → Search/index.js}

@@ -1,4 +1,4 @@
-import Icon from './Icon/Icon'
+import Icon from '../Icon/index'
 const Search = ({
     className,
     onChange,
@@ -14,9 +14,9 @@ const Search = ({
             {/* <input className="ml-4 border-2 border-gray-300 bg-white h-10 px-5 pr-16 rounded-lg text-sm focus:outline-none" type="search" name="search" onChange={(e) => onChange(e.target.value)} placeholder={placeholder}/> */}
             <label className="relative block">
                 <span className="sr-only">Search</span>
-                <span className="absolute inset-y-0 left-5 flex items-center pl-2">
-                    {leftIcon && iconLeft}
-                </span>
+                {leftIcon && <span className="absolute inset-y-0 left-5 flex items-center pl-2">
+                    {iconLeft}
+                </span>}
                 <input className="ml-4 pr-32 border-2 border-gray-300 h-10 px-5 placeholder:italic placeholder:text-gray-400 rounded-md py-2 pl-9 focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1" onChange={(e) => onChange(e.target.value)} placeholder={placeholder} type="text" name="search"/>
             </label>
         </div>

package/src/Components/SignedInLinks/SignedInLinks.stories.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import Readme from './README.md'
+import SignedInLinks from './index'
+import '../../index.css';
+
+const links = [
+    {
+        link: '/', 
+        name: 'link 1'
+    },
+    {
+        link: '/', 
+        name: 'link 2'
+    },
+    {
+        link: '/', 
+        name: 'Link 3'
+    },
+]
+
+export default {
+    title: 'Components/SignedInLinks',
+    argTypes: {
+        
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _SignedInLinks = (args) => {
+    return (
+        <SignedInLinks links={links}>
+        </SignedInLinks>
+    )
+}

package/src/Components/SignedOutLinks/SignedOutLinks.stories.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import Readme from './README.md'
+import SignedOutLinks from './index'
+import '../../index.css';
+
+const links = [
+    {
+        link: '/', 
+        name: 'link 1'
+    },
+    {
+        link: '/', 
+        name: 'link 2'
+    },
+    {
+        link: '/', 
+        name: 'Link 3'
+    },
+]
+
+export default {
+    title: 'Components/SignedOutLinks',
+    argTypes: {
+        
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _SignedOutLinks = (args) => {
+    return (
+        <SignedOutLinks links={links}>
+        </SignedOutLinks>
+    )
+}

package/src/Components/SignedOutLinks/index.js

@@ -0,0 +1,13 @@
+const SignedInLinks = ({links}) => {
+    return (
+        <div className='container flex'>
+            <ul className='list-none mx-auto flex flex-1'>
+                {links && links.map((link) => {
+                    return <li className='flex px-4'><a className='flex-1' href={link.url}>{link.name}</a></li>
+                })}
+            </ul>
+        </div>
+    )
+}
+
+export default SignedInLinks

package/src/index.css

@@ -1,67 +1,4 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');
-
-.right-arrow {
-    @apply w-0;
-    @apply h-0;
-    border-top: 17px solid transparent;
-    border-bottom: 17px solid transparent;
-    border-left: 15px solid theme('colors.brand-border');
-    @apply absolute;
-    right: -15px;
-    @apply top-0;
-}
-
-.let-arrow {
-    @apply w-0;
-    @apply h-0;
-    border-top: 17px solid transparent;
-    border-bottom: 17px solid transparent;
-    border-left: 17px solid theme('colors.white');
-    @apply absolute;
-    left: 0px;
-    @apply top-0;
-}
-
-.test-arrow {
-    @apply w-0;
-    @apply h-0;
-    border-top: 17px solid transparent;
-    border-bottom: 17px solid transparent;
-    border-left: 15px solid theme('colors.brand-border');
-    @apply absolute;
-    left: -8px;
-    bottom: -11px;
-    transform: rotate(48deg);
-}
-
-.test-arrow-top {
-    @apply w-0;
-    @apply h-0;
-    border-top: 15px solid theme('colors.brand-border');
-    border-bottom: 17px solid transparent;
-    border-left: 17px solid transparent;
-    @apply absolute;
-    left: -17px;
-    top: 0px;
-}
-
-.voucherCode__btn {
-    @apply relative;
-}
-
-.voucherCode__btn:hover .right-arrow {
-    border-left-color: theme('colors.brand-primary');
-}
-.voucherCode__btn:hover .test-arrow {
-    border-left-color: theme('colors.brand-primary');
-}
-.voucherCode__btn:hover .test-arrow-top {
-    border-top-color: theme('colors.brand-primary');
-}
-
-.voucherCode__code:focus {
-    @apply border-0;
-}
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');

package/babel.config.json

@@ -1,18 +0,0 @@
-{
-    "presets": [
-     [
-      "@babel/env",
-       {
-        "targets": {
-        "edge": "17",
-        "firefox": "60",
-        "chrome": "67",
-        "safari": "11.1"
-         },
-      "useBuiltIns": "usage",
-      "corejs": "3.6.5"
-       }
-   ],
-      "@babel/preset-react"
-   ]
-   }

package/dist/App.css

@@ -1,42 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-react-calendar__tile--now {
-  background: #31A3DD !important;
-}

package/dist/App.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("./App.css");
-
-function App() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "App"
-  }, /*#__PURE__*/React.createElement("header", {
-    className: "App-header"
-  }, /*#__PURE__*/React.createElement("p", null, "Edit ", /*#__PURE__*/React.createElement("code", null, "src/App.js"), " and save to reload."), /*#__PURE__*/React.createElement("a", {
-    className: "App-link",
-    href: "https://reactjs.org",
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, "Learn React")));
-}
-
-var _default = App;
-exports.default = _default;

package/public/index.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>

package/public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

package/src/App.css

@@ -1,42 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-react-calendar__tile--now {
-  background: #31A3DD !important;
-}

package/src/App.js

@@ -1,23 +0,0 @@
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

package/src/Components/SignedOutLinks.js

@@ -1,11 +0,0 @@
-const SignedInLinks = ({links}) => {
-    return (
-        <div className='container mx-auto px-4 flex'>
-        {links && links.map((link) => {
-            return <li className='flex-1'>{link}</li>
-        })}
-        </div>
-    )
-}
-
-export default SignedInLinks