trepur_components 0.1.1 → 0.1.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "trepur_components",
   "description": "component lib",
   "author": "trepur_ttenneb",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": false,
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
@@ -19,7 +19,6 @@
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "start": "craco start",
     "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files",
     "test": "craco test",
     "eject": "react-scripts eject",

package/src/Components/Breadcrumbs/README.md

@@ -1 +0,0 @@
-hello this is an icon

package/src/Components/BreadcrumbsBordered/BreadcrumbsBordered.stories.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Readme from './README.md'
 import Breadcrumbs from './index'
-import '../../index.css';
+import './index.css';
 
 const links = [
     {
@@ -65,94 +65,3 @@ export const _Breadcrumbs = (args) => {
         </Breadcrumbs>
     )
 }
-
-// export const SecondaryButton = () => {
-//     return (
-//         <Button ctaText='I am a button'>
-//         </Button>
-//     )
-// }
-
-// export const WithIconRight = () => {
-//     return (
-//         <Button rightIcon='thumbs-up' ctaText='I am a button'>
-//         </Button>
-//     )
-// }
-
-// WithIconRight.story = {
-//     name: 'With Icon (right)',
-// }
-
-// export const WithIconLeft = () => {
-//     return (
-//         <Button leftIcon='sign-in' ctaText='I am a button'>
-//         </Button>
-//     )
-// }
-
-// WithIconLeft.story = {
-//     name: 'With Icon (left)',
-// }
-
-// export const WithBothIcons = () => {
-//     return (
-//         <Button leftIcon='star' rightIcon='star' ctaText='I am a button'>
-//         </Button>
-//     )
-// }
-
-// export const ButtonAsExternalLink = () => {
-//     return (
-//         <Button as='a-external'  ctaText='I am a button'>
-//         </Button>
-//     )
-// }
-
-// ButtonAsExternalLink.story = {
-//     name: 'Button as external link',
-// }
-
-// export const ButtonAsSemanticHtmlButton = () => {
-//     return (
-//         <Button as='button' htmlType='button' ctaText='I am a button' url='/'>
-//         </Button>
-//     )
-// }
-
-// ButtonAsSemanticHtmlButton.story = {
-//     name: 'Button as semantic html button',
-// }
-
-// export const ButtonAsSemanticHtmlSubmitButton = () => {
-//     return (
-//         <Button as='button' htmlType='submit' ctaText='I am a button'>
-//         </Button>
-//     )
-// }
-
-// ButtonAsSemanticHtmlSubmitButton.story = {
-//     name: 'Button as semantic html submit button',
-// }
-
-// export const ButtonAsInternalLink = () => {
-//     return (
-//         <Button as='Link' ctaText='I am a button' url='/'>
-//         </Button>
-//     )
-// }
-
-// ButtonAsInternalLink.story = {
-//     name: 'Button as internal link',
-// }
-
-// export const WithOnClickMethod = () => {
-//     return (
-//         <Button ctaText='I am a button' onClick={action('button-click')}>
-//         </Button>
-//     )
-// }
-
-// WithOnClickMethod.story = {
-//     name: 'With onClick method',
-// }

package/src/Components/BreadcrumbsBordered/README.md

@@ -1 +0,0 @@
-hello this is an icon

package/src/Components/BreadcrumbsBordered/index.css

@@ -0,0 +1,67 @@
+@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;
+}

package/src/Components/Button/Button.stories.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
 import Readme from './README.md'
-import Button from './Button'
+import Button from './index'
 import '../../index.css';
 
 export default {

package/src/Components/Button/README.md

@@ -1 +0,0 @@
-hello this is an icon

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

@@ -1,4 +1,4 @@
-import Icon from '../Icon/Icon'
+import Icon from '../Icon/index'
 
 const Button = ({
     ctaText,

package/src/Components/ButtonSlide/ButtonSlide.stories.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
 import Readme from './README.md'
-import ButtonSlide from './ButtonSlide'
+import ButtonSlide from './index'
 import '../../index.css';
 
 export default {

package/src/Components/ButtonSlide/README.md

@@ -1 +0,0 @@
-hello this is an icon

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

@@ -1,4 +1,4 @@
-import Icon from '../Icon/Icon'
+import Icon from '../Icon/index'
 import './Styles.css';
 const ButtonSlide = ({
     ctaText,

package/src/Components/Card/Card.stories.js

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

package/src/Components/Card/README.md

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

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

@@ -1,5 +1,5 @@
-import Button from "../Button/Button"
-import ButtonSlide from "../ButtonSlide/ButtonSlide"
+import Button from "../Button/index"
+import ButtonSlide from "../ButtonSlide/index"
 
 const Card = ({
     id,

package/src/Components/CardImageLink/CardImageLink.stories.js

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

package/src/Components/CardImageLinkList/CardImageLinkList.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Readme from './README.md'
-import CardImageLinkList from './CardImageLinkList'
+import CardImageLinkList from './index'
 import '../../index.css';
 
 const list = [

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

@@ -1,4 +1,4 @@
-import CardImageLink from "../CardImageLink/CardImageLink"
+import CardImageLink from "../CardImageLink/index"
 
 const CardImageLinkList = ({
     list

package/src/Components/CardList/CardList.stories.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Readme from './README.md'
-import CardList from './CardList'
-import Card from '../Card/Card'
+import CardList from './index'
+import Card from '../Card/index'
 import '../../index.css';
 
 const list = [

package/src/Components/CardList/README.md

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

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

@@ -1,4 +1,4 @@
-import Card from "../Card/Card"
+import Card from "../Card/index"
 
 const CardList = ({
     list

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/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