New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@qlean/york-web

Package Overview
Dependencies
Maintainers
6
Versions
104
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@qlean/york-web - npm Package Compare versions

Comparing version 0.3.6-alfa-3 to 0.3.6-beta-1

lib/index.js

10

package.json
{
"name": "@qlean/york-web",
"version": "0.3.6-alfa-3",
"version": "0.3.6-beta-1",
"description": "",
"main": "dist/main.js",
"main": "lib/index.js",
"scripts": {

@@ -18,4 +18,3 @@ "build": "npm run clean && babel src -d lib --ignore test.js",

"prop-types": "^15.5.10",
"ramda": "^0.24.1",
"react-inlinesvg": "^0.8.3"
"ramda": "^0.24.1"
},

@@ -25,3 +24,3 @@ "devDependencies": {

"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-eslint": "7.2.3",
"babel-loader": "^7.1.5",

@@ -48,2 +47,3 @@ "babel-plugin-inline-react-svg": "^0.5.4",

"svgo-loader": "^2.2.0",
"url-loader": "^1.1.2",
"webpack": "^4.29.1",

@@ -50,0 +50,0 @@ "webpack-cli": "^3.2.3"

@@ -1,2 +0,2 @@

import React from 'react';
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';

@@ -82,3 +82,3 @@ import styled, { createGlobalStyle } from 'styled-components';

return (
<div>
<Fragment>
<StyledOverlay onClick={onClose} isVisible={isVisible}/>

@@ -104,3 +104,3 @@ <StyledConnections isVisible={isVisible}>

<GlobalStyled isVisible={isVisible}/>
</div>
</Fragment>
);

@@ -107,0 +107,0 @@ }

@@ -8,4 +8,5 @@ import React, { Component, Fragment } from 'react';

// import Svg from 'components/Svg';
import { FlexBase } from 'components/flex';
import MessengersIcon from './messengers.svg';
import Connections from '../Connections';

@@ -55,7 +56,3 @@

>
{/* <Svg
src={require('./messengers.svg')}
width={26}
height={25}
/> */}
<MessengersIcon width={26} height={25}/>
</StyledIconWrapper>

@@ -62,0 +59,0 @@ <Connections

@@ -11,2 +11,3 @@ import React, { Fragment } from 'react';

import { presets } from 'components/ui/Button';
import ConnectionsToggler from './ConnectionsToggler';

@@ -28,7 +29,7 @@

position: relative;
bottom: ${({ isVisible }) => (isVisible ? '0' : `${-g(16)}px`)};
transition: ${transitions.long};
bottom: ${({ isVisible }) => (isVisible ? '0' : `${-g(20)}px`)};
transition: ${transitions.medium};
@media (max-width: 420px) {
width: 100%;
bottom: ${({ isVisible }) => (isVisible ? '0' : `${-g(14)}px`)};
bottom: ${({ isVisible }) => (isVisible ? '0' : `${-g(20)}px`)};
}

@@ -35,0 +36,0 @@ `;

@@ -50,3 +50,3 @@ import React from 'react';

color: white;
background-color: ${({ code }) => messengersColors[code]};
background-color: ${({ messengerCode }) => messengersColors[messengerCode]};

@@ -83,3 +83,3 @@ &:not(:last-child) {

background-position: center;
background-image: ${({ code }) => `url(${require(`./assets/${code}.svg`)})`};
background-image: ${({ messengerCode }) => `url(${require(`./assets/${messengerCode}.svg`)})`};
position: absolute;

@@ -101,4 +101,3 @@ top: 50%;

&:hover {
background-color: lighten($color, 10%);
background-color: ${({ code }) => `lighten(${messengersColors[code]}, 10%)`};
background-color: ${({ messengerCode }) => `lighten(${messengersColors[messengerCode]}, 10%)`};
}

@@ -114,3 +113,3 @@ `;

<StyledMessengers withMobileFullWidth={withMobileFullWidth}>
{(messengers || []).map(messenger => (
{messengers.map(messenger => (
<StyledMessenger

@@ -124,3 +123,3 @@ name="messengerButton"

key={messenger.code}
code={messenger.code}
messengerCode={messenger.code}
>

@@ -143,3 +142,3 @@ {messenger.name}

}).isRequired,
messengers: messengersShape,
messengers: messengersShape.isRequired,
};
import React from 'react';
// import { Link } from 'react-router';
import PropTypes from 'prop-types';
import styled from 'styled-components';

@@ -8,3 +8,3 @@ import { colors } from '@qlean/york-core';

import Logo from './logo.svg';
import Logo from './assets/logo.svg';

@@ -20,4 +20,4 @@ const StyledLogo = styled(Logo)`

export default function HeaderLogo({ logoIsUnclickable, color, colorMobile, ...rest }) {
const logoComponent = (
const HeaderLogo = ({ color, colorMobile, ...rest }) => (
<a href="/?noredirect=true">
<StyledLogo

@@ -30,13 +30,10 @@ color={color}

/>
);
</a>
);
if (logoIsUnclickable) {
return logoComponent;
}
HeaderLogo.propTypes = {
color: PropTypes.oneOf(Object.keys(colors)).isRequired,
colorMobile: PropTypes.oneOf(Object.keys(colors)).isRequired,
};
return (
<a href="/?noredirect=true">
{logoComponent}
</a>
);
}
export default HeaderLogo;

@@ -6,3 +6,3 @@ import React from 'react';

import { media } from 'utils/styles';
import { g, media } from 'utils/styles';
import { FlexBase } from 'components/flex';

@@ -16,3 +16,3 @@

z-index: 1;
padding: 0 30px;
padding: 0 ${g(6)}px;
${({ isMenuOpened }) => `

@@ -26,3 +26,3 @@ ${media.mobile(`

const StyledHeader = styled(FlexBase)`
height: 60px;
height: ${g(12)}px;
${({ isMenuOpened }) => `

@@ -29,0 +29,0 @@ ${media.mobile(`

@@ -6,8 +6,10 @@ import React from 'react';

import { g } from 'utils/styles';
const StyledToggler = styled.div`
transition: all ease .2s;
transition: all linear .2s;
position: relative;
cursor: pointer;
height: 20px;
width: 20px;
height: ${g(4)}px;
width: ${g(4)}px;
z-index: 1;

@@ -73,2 +75,3 @@

isActive: PropTypes.bool,
color: PropTypes.oneOf(Object.keys(colors)).isRequired,
};

@@ -5,2 +5,4 @@ import React, { Component } from 'react';

import { menuItemsShape } from 'utils/propTypes';
import { FlexBase } from 'components/flex';

@@ -10,2 +12,3 @@

import Header from './Header';
import { presets } from './utils';

@@ -18,17 +21,5 @@ const StyledNavigation = styled(FlexBase)`

static propTypes = {
menuItems: PropTypes.arrayOf(
PropTypes.shape({
title: PropTypes.string.isRequired,
items: PropTypes.arrayOf(
PropTypes.shape({
title: PropTypes.string.isRequired,
href: PropTypes.string,
}).isRequired,
).isRequired,
isMobileTitleHidden: PropTypes.bool,
isTooltip: PropTypes.bool,
}).isRequired,
).isRequired,
preset: PropTypes.oneOf(['lightBackground', 'darkBackground']),
presetMobile: PropTypes.oneOf(['lightBackground', 'darkBackground']),
menuItems: menuItemsShape.isRequired,
preset: PropTypes.oneOf(Object.keys(presets)),
presetMobile: PropTypes.oneOf(Object.keys(presets)),
}

@@ -35,0 +26,0 @@

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { colors } from '@qlean/york-core';
import { borderRadiuses, shadows, media } from 'utils/styles';
import { g, borderRadiuses, shadows, media } from 'utils/styles';
import MenuItem from './MenuItem';
const StyledLink = styled(MenuItem)`
${media.desktop(`
&:hover {
border-radius: ${borderRadiuses.small};
background: ${colors.smoke};
color: ${colors.coal};
}
`)}
`;
const StyledFloatingMenu = styled.nav`
display: none;
flex-direction: column;

@@ -30,3 +18,9 @@

box-shadow: ${shadows.strong};
padding: 20px 40px 20px 10px;
padding: ${g(4)}px ${g(2)}px;
/* visually-hidden */
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
`)}

@@ -39,8 +33,12 @@

const FloatingMenu = ({ links, ...rest }) => (
const FloatingMenu = ({ children, ...rest }) => (
<StyledFloatingMenu {...rest}>
{links.map(link => <StyledLink LinkComponent={link.LinkComponent} key={link.title} to={link.href}>{link.title}</StyledLink>)}
{children}
</StyledFloatingMenu>
);
FloatingMenu.propTypes = {
children: PropTypes.node.isRequired,
};
export default FloatingMenu;
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import styled, { createGlobalStyle } from 'styled-components';
import colors from '@qlean/york-core/lib/styles/colors';
import { colors } from '@qlean/york-core';
import { media } from 'utils/styles';
import { g, media, borderRadiuses } from 'utils/styles';
import { menuItemsShape } from 'utils/propTypes';

@@ -19,11 +21,11 @@ import { Separator, Text } from 'components/ui';

${media.mobile(`
padding-top: 60px;
transition: top .2s ease, opacity .4s ease;
height: 100%;
overflow: scroll;
position: fixed;
left: 0;
right: 0;
top: ${isMenuOpened ? '0' : '-100%'};
opacity: ${isMenuOpened ? '1' : '0'};
overflow: scroll;
height: 100%;
left: 0;
right: 0;
padding-top: ${g(12)}px;
transition: top .2s ease, opacity .4s ease;
background: ${colors.white};

@@ -36,9 +38,9 @@ `)}

height: 100%;
padding: 0 30px;
${media.mobile`
max-width: 360px;
padding: 0 ${g(6)}px;
${media.mobile(`
max-width: ${g(72)}px;
margin: 0 auto;
`}
`)}
a, a:hover {

@@ -51,4 +53,4 @@ text-decoration: none;

display: none;
padding-top: 30px;
padding-bottom: 10px;
padding-top: ${g(6)}px;
padding-bottom: ${g(2)}px;
${media.mobile`

@@ -69,7 +71,10 @@ display: block;

&:hover > ${StyledFloatingMenu} {
display: flex;
clip: initial;
width: initial;
height: initial;
margin: initial;
}
`;
const StyledAdditionalServicesButton = styled(MenuItem)`
const StyledHoverButton = styled(MenuItem)`
${media.mobile`

@@ -80,2 +85,13 @@ display: none;

const StyledFloatingLink = styled(MenuItem)`
${media.desktop(`
padding-right: ${g(6)}px;
&:hover {
border-radius: ${borderRadiuses.small};
background: ${colors.smoke};
color: ${colors.coal};
}
`)}
`;
const GlobalStyled = createGlobalStyle`

@@ -109,3 +125,3 @@ body {

<StyledButtonContainer>
<StyledAdditionalServicesButton
<StyledHoverButton
color={presets[preset].link}

@@ -115,4 +131,16 @@ hoverColor={presets[preset].linkHover}

{category.title}
</StyledAdditionalServicesButton>
<StyledFloatingMenu links={category.items}/>
</StyledHoverButton>
<StyledFloatingMenu>
{category.items.map(link => (
<StyledFloatingLink
LinkComponent={link.LinkComponent}
key={link.title}
to={link.href}
onClick={link.onClick}
isAuthButton={link.isAuthButton}
>
{link.title}
</StyledFloatingLink>
))}
</StyledFloatingMenu>
</StyledButtonContainer>

@@ -123,2 +151,4 @@ ) : category.items.map(link => (

href={link.href}
onClick={link.onClick}
isAuthButton={link.isAuthButton}
LinkComponent={link.LinkComponent}

@@ -139,2 +169,8 @@ color={presets[preset].link}

Menu.propTypes = {
isMenuOpened: PropTypes.bool.isRequired,
menuItems: menuItemsShape.isRequired,
preset: PropTypes.oneOf(Object.keys(presets)),
};
export default Menu;
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { colors } from '@qlean/york-core';
import { media } from 'utils/styles';
// import { getBaseTextCss, textPresets } from 'components/ui';
import { g, media } from 'utils/styles';
const getCss = ({ color, hoverColor }) => `
import { Text, InlineButton } from 'components/ui';
const getCss = ({ color, hoverColor, isAuthButton }) => `
display: block;
text-transform: uppercase;
transition: none;
text-align: left;
white-space: nowrap;
cursor: pointer;
color: ${colors[color] || colors.coal};
font-size: 15px;
font-weight: 700;
padding: 10px;
padding: ${g(2)}px;
width: 100%;

@@ -20,27 +23,71 @@

color: ${colors[hoverColor] || colors.grey};
text-decoration: none;
}
${media.mobile(`
padding: 10px 0;
padding: ${g(2)}px 0;
color: ${colors.coal};
${isAuthButton ? `
margin-top: ${g(6)}px;
margin-bottom: ${g(8)}px;
color: ${colors.grey};
` : ''}
`)}
`;
const StyledA = styled.a`${getCss}`;
const StyledDiv = styled.div`${getCss}`;
const StyledText = styled(Text)`${getCss}`;
const StyledButton = styled(InlineButton)`${getCss}`;
const MenuItem = ({ href, children, LinkComponent, color, hoverColor, ...rest }) => {
return LinkComponent
? (<LinkComponent {...rest} to={href}>
<StyledDiv color={color} {...rest}>{children}
</StyledDiv>
</LinkComponent>)
: !href
? <StyledDiv color={color} hoverColor={hoverColor} {...rest}>{children}</StyledDiv>
// : href[0] === '/'
// ? <StyledLink to={href} color={color} {...rest}>{children}!</StyledLink>
: <StyledA href={href} color={color} {...rest}>{children}</StyledA>;
const MenuItem = ({
LinkComponent, href, onClick, color, hoverColor, children, isAuthButton, ...rest
}) => {
if (LinkComponent) {
return (
<LinkComponent to={href}>
<StyledText preset="link" color={color} {...rest}>
{children}
</StyledText>
</LinkComponent>
);
}
if (onClick) {
return (
<StyledButton
textPreset="link"
color={color}
hoverColor={hoverColor}
onClick={onClick}
isAuthButton={isAuthButton}
{...rest}
>
{children}
</StyledButton>
);
}
return !href
? (
<StyledText preset="link" color={color} hoverColor={hoverColor} {...rest}>
{children}
</StyledText>
) : (
<a href={href}>
<StyledText preset="link" color={color} hoverColor={hoverColor} {...rest}>
{children}
</StyledText>
</a>
);
};
MenuItem.propTypes = {
LinkComponent: PropTypes.element,
href: PropTypes.string,
onClick: PropTypes.func,
color: PropTypes.oneOf(Object.keys(colors)).isRequired,
hoverColor: PropTypes.oneOf(Object.keys(colors)).isRequired,
children: PropTypes.node.isRequired,
isAuthButton: PropTypes.bool.isRequired,
};
export default MenuItem;

@@ -0,1 +1,2 @@

// eslint-disable-next-line import/prefer-default-export
export const presets = {

@@ -6,3 +7,3 @@ lightBackground: {

link: 'coal',
linkHover: 'grey'
linkHover: 'ash',
},

@@ -13,4 +14,4 @@ darkBackground: {

link: 'white',
linkHover: 'silver'
linkHover: 'silver',
},
}
};

@@ -231,3 +231,3 @@ import React from 'react';

<StyledFlex>
{isFetching ? "Загрузка" : children}
{isFetching ? 'Загрузка' : children}
</StyledFlex>

@@ -234,0 +234,0 @@ </StyledButton>

@@ -10,1 +10,2 @@ export {

export { default as Button } from './Button';
export { default as InlineButton } from './InlineButton';
import PropTypes from 'prop-types';
export const orderShape = PropTypes.shape({
id: PropTypes.number.isRequired,
});
export const userShape = PropTypes.shape({
id: PropTypes.number.isRequired,
first_name: PropTypes.string.isRequired,
last_name: PropTypes.string.isRequired,
username: PropTypes.string.isRequired,
email: PropTypes.string.isRequired,
phone: PropTypes.string.isRequired,
api_token: PropTypes.string.isRequired,
confirmed_orders_num: PropTypes.number.isRequired,
future_orders_count: PropTypes.number.isRequired,
paid_orders_num: PropTypes.number.isRequired,
is_new_account: PropTypes.bool.isRequired,
admin: PropTypes.bool.isRequired,
balance: PropTypes.string.isRequired,
invite_friends_link: PropTypes.string.isRequired,
receive_mails: PropTypes.bool.isRequired,
image: PropTypes.string.isRequired,
done_orders_count: PropTypes.shape({
basic: PropTypes.number.isRequired,
lite: PropTypes.number.isRequired,
pro: PropTypes.number.isRequired,
deal: PropTypes.number.isRequired,
}).isRequired,
identities: PropTypes.array.isRequired,
experiments: PropTypes.object.isRequired,
pending_app_actions: PropTypes.array.isRequired,
});
export const settingsShape = PropTypes.shape({
servicesBundles: PropTypes.shape({
result: PropTypes.arrayOf(PropTypes.number.isRequired).isRequired,
entities: PropTypes.objectOf(PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
slug: PropTypes.string.isRequired,
services: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
fixedDiscountCents: PropTypes.number.isRequired,
}).isRequired).isRequired,
}).isRequired,
});
export const giftsShape = PropTypes.shape({
selectedGift: PropTypes.shape({
slug: PropTypes.string,
name: PropTypes.string,
}).isRequired,
availableGiftsCount: PropTypes.number.isRequired,
});
export const orderFlowShape = PropTypes.shape({
webId: PropTypes.string.isRequired,
});
export const inviteShape = PropTypes.shape({
invitee: PropTypes.shape({
first_name: PropTypes.string,
phone: PropTypes.string.isRequired,
}).isRequired,
bonus: PropTypes.number.isRequired,
state: PropTypes.oneOf(['canceled', 'done', 'waiting_to_be_done']).isRequired,
});
export const inviterStatisticsShape = PropTypes.shape({
invites: PropTypes.arrayOf(inviteShape).isRequired,
meta: PropTypes.shape({
bonus: PropTypes.shape({
pending: PropTypes.number.isRequired,
total: PropTypes.number.isRequired,
balance: PropTypes.number.isRequired,
}).isRequired,
}).isRequired,
});
export const reviewShape = PropTypes.shape({
comment: PropTypes.string.isRequired,
client: PropTypes.shape({
name: PropTypes.string.isRequired,
}).isRequired,
cleaner: PropTypes.shape({
name: PropTypes.string.isRequired,
rating: PropTypes.number,
orders: PropTypes.number.isRequired,
}).isRequired,
});
export const addressShape = PropTypes.shape({
id: PropTypes.number,
apartment: PropTypes.string,
building: PropTypes.string,
cash: PropTypes.bool,
city: PropTypes.string,
entrance: PropTypes.string,
floor: PropTypes.string,
housing: PropTypes.string,
intercom: PropTypes.string,
number: PropTypes.string,
region_code: PropTypes.string,
region_id: PropTypes.number,
street: PropTypes.string,
});
export const packageShape = PropTypes.shape({
subscriptionDurationId: PropTypes.number.isRequired,
durationMonth: PropTypes.number.isRequired,
ordersCount: PropTypes.number.isRequired,
packagePriceCents: PropTypes.number.isRequired,
percentageDiscount: PropTypes.number.isRequired,
orderDiscountCents: PropTypes.number.isRequired,
orderSubtotalCents: PropTypes.number.isRequired,
overallDiscountCents: PropTypes.number.isRequired,
});
export const dadataSuggestionShape = PropTypes.shape({
value: PropTypes.string.isRequired,
unrestrictedValue: PropTypes.string.isRequired,
data: PropTypes.object.isRequired,
});
export const cleanerShape = PropTypes.shape({
id: PropTypes.number,
full_name: PropTypes.string,
phone: PropTypes.string,
short_name: PropTypes.string,
image: PropTypes.shape({
url: PropTypes.string.isRequired,
}),
rating: PropTypes.number,
});
export const creationFormPropsShape = PropTypes.shape({

@@ -145,106 +12,2 @@ prefillPhoneNumber: PropTypes.func.isRequired,

export const userFormDataShape = PropTypes.shape({
phone: PropTypes.string,
});
export const prefilledValuesShape = PropTypes.shape({
contact_info: PropTypes.shape({
phone: PropTypes.string,
}),
});
export const regionsShape = PropTypes.shape({
entities: PropTypes.objectOf(PropTypes.shape({
id: PropTypes.number,
code: PropTypes.string,
name: PropTypes.string.isRequired,
isActive: PropTypes.bool.isRequired,
}).isRequired).isRequired,
result: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
});
export const citiesShape = PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
synonyms: PropTypes.array.isRequired,
regionId: PropTypes.number,
regionCode: PropTypes.string,
afterRepair: PropTypes.bool,
cash: PropTypes.bool,
fiasId: PropTypes.string,
});
export const servicesShape = PropTypes.shape({
service: PropTypes.shape({
active: PropTypes.bool.isRequired,
default_quantity: PropTypes.number.isRequired,
id: PropTypes.number.isRequired,
input_type: PropTypes.string.isRequired,
locales: PropTypes.shape({
name: PropTypes.string.isRequired,
alt_name: PropTypes.string.isRequired,
count: PropTypes.shape({
few: PropTypes.string.isRequired,
many: PropTypes.string.isRequired,
one: PropTypes.string.isRequired,
zero: PropTypes.string.isRequired,
}),
}).isRequired,
max_quantity: PropTypes.number.isRequired,
min_quantity: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
position: PropTypes.number.isRequired,
type: PropTypes.string.isRequired,
}).isRequired,
value: PropTypes.shape({
input_type: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
quantity: PropTypes.number.isRequired,
service_id: PropTypes.number.isRequired,
}).isRequired,
});
export const splitTestsShape = PropTypes.objectOf(PropTypes.shape({
groupSlug: PropTypes.string.isRequired,
slug: PropTypes.string.isRequired,
}).isRequired);
export const servicesPricesShape = PropTypes.shape({
balconies: PropTypes.number.isRequired,
balcony_windows: PropTypes.number.isRequired,
cat_litter_box: PropTypes.number.isRequired,
customer_provides_consumables: PropTypes.number.isRequired,
ironing: PropTypes.number.isRequired,
keys_delivery: PropTypes.number.isRequired,
keys_pickup: PropTypes.number.isRequired,
kitchen_cabinets: PropTypes.number.isRequired,
lustre: PropTypes.number.isRequired,
microwave: PropTypes.number.isRequired,
oven: PropTypes.number.isRequired,
refrigerator: PropTypes.number.isRequired,
tableware: PropTypes.number.isRequired,
wardrobe: PropTypes.number.isRequired,
windows: PropTypes.number.isRequired,
winter_windows: PropTypes.number.isRequired,
});
export const creditCardShape = PropTypes.shape({
id: PropTypes.string.isRequired,
root: PropTypes.bool,
brand: PropTypes.string.isRequired,
});
export const discountShape = PropTypes.shape({
amount: PropTypes.string.isRequired,
amount_cents: PropTypes.number.isRequired,
amount_type: PropTypes.string.isRequired,
locales: PropTypes.shape({
label: PropTypes.string.isRequired,
amount: PropTypes.string.isRequired,
}).isRequired,
type: PropTypes.string.isRequired,
});
export const regionShape = PropTypes.oneOf(['msk', 'spb', 'ekb', 'nsk', 'kzn']);
export const messengersShape = PropTypes.arrayOf(PropTypes.shape({

@@ -254,2 +17,12 @@ code: PropTypes.string.isRequired,

url: PropTypes.string.isRequired,
})).isRequired;
}).isRequired);
export const menuItemsShape = PropTypes.arrayOf(PropTypes.shape({
title: PropTypes.string.isRequired,
items: PropTypes.arrayOf(PropTypes.shape({
title: PropTypes.string.isRequired,
href: PropTypes.string,
}).isRequired).isRequired,
isMobileTitleHidden: PropTypes.bool,
isTooltip: PropTypes.bool,
}).isRequired);
const path = require('path');
const webpack = require('webpack');
const rootPath = path.resolve(__dirname, './');
module.exports = {
mode: 'production',
entry: __dirname + '/src/index.js',
entry: path.resolve(__dirname, 'src/index.js'),
output: {
path: __dirname + '/dist',
filename: 'main.js',
path: path.resolve(__dirname, 'lib'),
filename: 'index.js',
library: 'main',

@@ -19,3 +18,2 @@ libraryTarget: 'umd',

},
// context: rootPath,
module: {

@@ -29,12 +27,11 @@ rules: [

{
test: /\.svg$/,
test: /\.(png|svg|jpg|gif)$/,
use: [
{ loader: 'file-loader' },
{
loader: 'svgo-loader',
loader: 'url-loader',
options: {
plugins: [
{ removeTitle: true },
{ removeViewBox: false },
],
fallback: 'file-loader',
name: '[name][md5:hash].[ext]',
outputPath: 'assets/',
publicPath: '/assets/',
},

@@ -44,10 +41,2 @@ },

},
{
test: /\.(jpe?g|png|gif)$/i,
use: 'file-loader',
},
{
test: /\.(woff|eot|ttf)$/i,
use: 'file-loader',
},
],

@@ -61,2 +50,8 @@ },

},
plugins: [
new webpack.DefinePlugin({
'process.env.BROWSER': JSON.stringify(true),
window: JSON.stringify(true),
}),
],
externals: {

@@ -63,0 +58,0 @@ 'styled-components': 'styled-components',

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc