trepur_components 0.1.8 → 0.1.9

package/package.json

@@ -2,8 +2,12 @@
   "name": "trepur_components",
   "description": "component lib",
   "author": "trepur_ttenneb",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "private": false,
+  "keywords": ["react", "components", "ui"],
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [ "dist", "README.md" ],
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
     "@craco/craco": "^6.4.0",
@@ -61,7 +65,6 @@
     "@babel/preset-react": "^7.16.7",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@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",
@@ -72,6 +75,7 @@
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "storybook-readme": "^5.0.9",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
   }
 }

package/.storybook/main.js

@@ -1,32 +0,0 @@
-const path = require('path')
-
-module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app"
-  ],
-  webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.css$/,
-      use: [
-        {
-          loader: 'postcss-loader',
-          options: {
-            ident: 'postcss',
-            plugins: [
-              require('tailwindcss'),
-              require('autoprefixer'),
-            ],
-          },
-        },
-      ],
-      include: path.resolve(__dirname, '../'),
-    })
-    return config
-  },
-}

package/.storybook/preview.js

@@ -1,9 +0,0 @@
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}

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/craco.config.js

@@ -1,10 +0,0 @@
-module.exports = {
-    style: {
-      postcss: {
-        plugins: [
-          require('tailwindcss'),
-          require('autoprefixer'),
-        ],
-      },
-    },
-  }

package/rollup.config.js

@@ -1,37 +0,0 @@
-import babel from 'rollup-plugin-babel';
-import resolve from '@rollup/plugin-node-resolve';
-import external from 'rollup-plugin-peer-deps-external';
-import { terser } from 'rollup-plugin-terser';
-import postcss from 'rollup-plugin-postcss';
-
-const config = [
-    {
-      input: './src/index.js',
-      output: [
-        {
-          file: 'dist/index.js',
-          format: 'cjs',
-        },
-        {
-          file: 'dist/index.es.js',
-          format: 'es',
-          exports: 'named',
-        }
-      ],
-      plugins: [
-        postcss({
-          plugins: [],
-          minimize: true,
-        }),
-        babel({
-          exclude: 'node_modules/**',
-          presets: ['@babel/preset-react']
-        }),
-        external(),
-        resolve(),
-        //terser(),
-      ]
-    }
-  ];
-
-export default config

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

@@ -1,158 +0,0 @@
-import React from 'react'
-import { action } from '@storybook/addon-actions'
-import Readme from './README.md'
-import BreadCrumbs 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: {
-        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/index.js

@@ -1,27 +0,0 @@
-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/BreadcrumbsBordered/BreadcrumbsBordered.stories.js

@@ -1,67 +0,0 @@
-import React from 'react'
-import Readme from './README.md'
-import Breadcrumbs from './index'
-import './index.css';
-
-const links = [
-    {
-        link: '/', 
-        name: 'link 1'
-    },
-    {
-        link: '/', 
-        name: 'link 2'
-    },
-    {
-        link: '/', 
-        name: 'Link 3'
-    },
-]
-
-export default {
-    title: 'Components/BreadcrumbsBordered',
-    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>
-    )
-}

package/src/Components/BreadcrumbsBordered/index.css

@@ -1,67 +0,0 @@
-@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/BreadcrumbsBordered/index.js

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

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

@@ -1,144 +0,0 @@
-import React from 'react'
-import { action } from '@storybook/addon-actions'
-import Readme from './README.md'
-import Button from './index'
-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/src/Components/Button/index.js

@@ -1,26 +0,0 @@
-import Icon from '../Icon/index'
-
-const Button = ({
-    ctaText,
-    ctaLink,
-    className,
-    onClick,
-    leftIcon,
-    rightIcon,
-}) => {
-    let classes = className + ' py-2 px-8 rounded-lg text-black border-2 border-black border-gray-300 bg-white hover:bg-red hover:text-black transition-background-color duration-500 transform'
-    let iconLeft = <Icon type={leftIcon}></Icon>
-    let iconRight = <Icon type={rightIcon}></Icon>
-    return (
-        <button 
-            className={classes} 
-            onClick={onClick}
-        >
-            {leftIcon && iconLeft}
-            {ctaText}
-            {rightIcon && iconRight}
-        </button>
-    )
-}
-
-export default Button