trepur_components 0.1.0

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "trepur_components",
+  "description": "component lib",
+  "author": "trepur_ttenneb",
+  "version": "0.1.0",
+  "private": false,
+  "dependencies": {
+    "@babel/polyfill": "^7.12.1",
+    "@craco/craco": "^6.4.0",
+    "@storybook/addon-knobs": "^6.3.1",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.1",
+    "react-scripts": "4.0.3",
+    "storybook": "^6.4.10",
+    "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",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.16.8",
+    "@babel/core": "^7.16.7",
+    "@babel/preset-env": "^7.16.8",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-essentials": "^6.3.12",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/node-logger": "^6.3.12",
+    "@storybook/preset-create-react-app": "^3.2.0",
+    "@storybook/react": "^6.3.12",
+    "autoprefixer": "^9.8.8",
+    "postcss": "^7.0.39",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
+  }
+}

package/public/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,144 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import Readme from './README.md'
+import Button from '../../../public/Button/Button'
+import '../../index.css';
+
+export default {
+    title: 'Components/Button',
+    argTypes: {
+        label: {
+            name: 'Text',
+            control: { type: 'text' },
+            defaultValue: 'Shop Now',
+        },
+        type: {
+            name: 'Type',
+            defaultValue: 'primary',
+            options: ['primary', 'secondary', 'ghost'],
+            control: { type: 'select' },
+        },
+        iconPlacement: {
+            name: 'Icon',
+            defaultValue: 'none',
+            options: ['left', 'right', 'both', 'none'],
+            control: { type: 'select' },
+        },
+        padded: {
+            name: 'Padded',
+            control: { type: 'boolean' },
+            defaultValue: false,
+        },
+        social: {
+            name: 'Social',
+            defaultValue: 'None',
+            options: ['Facebook', 'Twitter', 'Whatsapp', 'None'],
+            control: { type: 'select' },
+        },
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _Button = (args) => {
+    return (
+        <Button ctaText='I am a button'>
+        </Button>
+    )
+}
+
+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/public/index.html

@@ -0,0 +1,10 @@
+<!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

@@ -0,0 +1,25 @@
+{
+  "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

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

package/src/App.css

@@ -0,0 +1,42 @@
+.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

@@ -0,0 +1,23 @@
+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/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,27 @@
+const Breadcrumbs = ({
+    className,
+    links,
+}) => {
+    const linksLength = Object.keys(links).length
+    let classes = className + ' flex py-2 px-8 '
+    return (
+        <ul className={classes}>
+            {links && links.map((link, i) => {
+                return (
+                    <div key={link.name}>
+                        <li>
+                            <div className='flex'>
+                                {i+1 >= linksLength ? <p className=''>{link.name}</p> : <a className='text-social-facebook hover:underline' href={link.link}>
+                                    {link.name}
+                                </a>}
+                                {i+1 < linksLength ? <p>&nbsp; &#62; &nbsp;</p> : null}
+                            </div>
+                        </li>
+                    </div>
+                )
+            })}
+        </ul>
+    )
+}
+
+export default Breadcrumbs

package/src/Components/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,158 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import Readme from './README.md'
+import BreadCrumbs from './Breadcrumbs'
+import '../../index.css';
+
+const links = [
+    {
+        link: '/', 
+        name: 'link 1'
+    },
+    {
+        link: '/', 
+        name: 'link 2'
+    },
+    {
+        link: '/', 
+        name: 'Link 3'
+    },
+]
+
+export default {
+    title: 'Components/Breadcrumbs',
+    argTypes: {
+        label: {
+            name: 'Text',
+            control: { type: 'text' },
+            defaultValue: 'Shop Now',
+        },
+        type: {
+            name: 'Type',
+            defaultValue: 'primary',
+            options: ['primary', 'secondary', 'ghost'],
+            control: { type: 'select' },
+        },
+        iconPlacement: {
+            name: 'Icon',
+            defaultValue: 'none',
+            options: ['left', 'right', 'both', 'none'],
+            control: { type: 'select' },
+        },
+        padded: {
+            name: 'Padded',
+            control: { type: 'boolean' },
+            defaultValue: false,
+        },
+        social: {
+            name: 'Social',
+            defaultValue: 'None',
+            options: ['Facebook', 'Twitter', 'Whatsapp', 'None'],
+            control: { type: 'select' },
+        },
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _Breadcrumbs = (args) => {
+    return (
+        <BreadCrumbs links={links}>
+        </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/Breadcrumbs/README.md

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

package/src/Components/BreadcrumbsBordered/Breadcrumbs.js

@@ -0,0 +1,35 @@
+const Breadcrumbs = ({
+    className,
+    links,
+}) => {
+    const linksLength = Object.keys(links).length
+    let classes = 'flex py-2 px-8 ' + className
+    return (
+        <ul className={classes}>
+            {links && links.map((link, i) => {
+                return (
+                    <div key={link.name}>
+                        <li>
+                            <div className=' px-4 mx-3 hover:bg-brand-primary bg-brand-border border-brand-primary voucherCode__btn h-8'>
+                                {i+1 >= linksLength ? 
+                                    <p className='pl-2 pt-1'><span className='test-arrow'></span><span className='test-arrow-top'></span><span className='left-arrow'></span>{link.name}<span className='right-arrow'></span></p>
+                                : 
+                                    <a href={link.link}><p className={i !== 0 ? 'pl-2 pt-1 text-social-facebook hover:underline':'pt-1 text-social-facebook hover:underline'}>
+                                    <span className='test-arrow'></span>
+                                    <span className='test-arrow-top'></span>
+                                    {i !== 0 ? <span className='left-arrow'></span> : null}
+                                        {link.name}
+                                        <span className='right-arrow'></span>
+                                    </p>
+                                    </a>
+                                }
+                            </div>
+                        </li>
+                    </div>
+                )
+            })}
+        </ul>
+    )
+}
+
+export default Breadcrumbs