Файловый менеджер - Редактировать - /home/freeclou/app.optimyar.com/front-web/build/assets/fonts/iran-yekan/MobileFonts/wgdpf7/src.zip
Назад
PK b�i[��� components/AttributeIcon/Div.jsnu �Iw�� import styled from 'styled-components'; const Div = styled.div` display: flex; flex-direction: column; justify-content: center; height: 20px; width: 35px; > svg { align-self: center; } background-color: ${({ type }) => { switch (type) { case 'boolean': return '#69ba05'; case 'date': case 'datetime': case 'time': case 'timestamp': return '#1c8ee2'; case 'component': return '#666666'; case 'contentType': return '#ff6458'; case 'dynamiczone': return '#333333'; case 'email': return '#ff6400'; case 'enumeration': case 'enum': return '#f8b295'; case 'json': case 'JSON': return '#3C8C98'; case 'media': case 'file': case 'files': return '#b981d5'; case 'number': return '#e8442f'; case 'password': return '#ff9900'; case 'string': case 'text': return '#ffb500'; case 'relation': return '#1c5de7'; case 'richtext': return '#ff9200'; case 'singleType': return '#F4A7B4'; case 'uid': return '#c3814f'; default: return ''; } }}; border-radius: 2px; `; export default Div; PK b�i[�'\z� � ! components/AttributeIcon/index.jsnu �Iw�� import React from 'react'; import PropTypes from 'prop-types'; import { Bool, Calendar, Component, ContentType, DynamicZone, Email, Enumeration, Json, Media, NumberIcon, Password, Relation, RichText, SingleType, Text, Uid, } from '@buffetjs/icons'; import Div from './Div'; const types = { biginteger: NumberIcon, boolean: Bool, component: Component, contentType: ContentType, date: Calendar, datetime: Calendar, decimal: NumberIcon, dynamiczone: DynamicZone, email: Email, enum: Enumeration, enumeration: Enumeration, file: Media, files: Media, float: NumberIcon, integer: NumberIcon, json: Json, JSON: Json, media: Media, number: NumberIcon, password: Password, relation: Relation, richtext: RichText, singleType: SingleType, string: Text, text: Text, time: Calendar, timestamp: Calendar, uid: Uid, }; const AttributeIcon = ({ type, ...rest }) => { const Compo = types[type]; if (!types[type]) { return null; } return ( <Div {...rest} type={type}> <Compo /> </Div> ); }; AttributeIcon.propTypes = { type: PropTypes.string.isRequired, }; export default AttributeIcon; PK b�i[�A��1 1 components/Button/index.jsnu �Iw�� /** * * Button * */ import React from 'react'; import PropTypes from 'prop-types'; import { LoadingIndicator, Button as StyledButton, colors, } from '@buffetjs/styles'; import { Plus } from '@buffetjs/icons'; import Flex from '../Flex'; import PrefixIcon from '../PrefixIcon'; function Button({ children, color, disabled, icon, label, isLoading, ...rest }) { const content = label || children; const img = icon === true ? ( <Plus height="11px" width="11px" fill={`${colors.button[color].color}`} /> ) : ( <PrefixIcon icon={icon} /> ); if (isLoading) { return ( <StyledButton color={color} disabled={disabled} {...rest} onClick={e => { // Preventing the user from clicking the button when loading e.preventDefault(); }} > <Flex justifyContent="space-around"> <LoadingIndicator animationTime="0.6s" borderWidth="2px" borderColor="#f7f5f0" borderTopColor="#d1cec7" size="1.3rem" /> </Flex> </StyledButton> ); } return ( <StyledButton color={color} disabled={disabled} {...rest}> {img} {content} </StyledButton> ); } Button.defaultProps = { children: null, color: 'primary', disabled: false, icon: false, isLoading: false, label: null, type: 'button', }; Button.propTypes = { children: PropTypes.node, color: PropTypes.oneOf([ 'primary', 'secondary', 'cancel', 'success', 'delete', 'none', ]), disabled: PropTypes.bool, icon: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]), isLoading: PropTypes.bool, label: PropTypes.string, type: PropTypes.oneOf(['submit', 'reset', 'button', 'menu']), }; export default Button; PK b�i[X�u^ ^ * components/Checkbox/tests/Checkbox.test.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; import Checkbox from '../index'; const defaultProps = { type: 'checkbox', name: 'checkbox', onChange: jest.fn(), }; const renderComponent = (props = defaultProps) => mount(<Checkbox {...props} />); describe('<Checkbox />', () => { // eslint-disable-next-line jest/expect-expect it('should not crash', () => { renderComponent(); }); it('should send a boolean', () => { const onChange = jest.fn(); const value = false; const renderedComponent = renderComponent({ ...defaultProps, onChange, value, }); const element = renderedComponent.find('input'); element.simulate('change'); const expected = { target: { name: 'checkbox', type: 'checkbox', value: true, }, }; expect(onChange).toHaveBeenLastCalledWith(expected); }); it('should use the defaultProps', () => { const { defaultProps: { onChange }, } = Checkbox; expect(onChange).toBeDefined(); expect(onChange({ preventDefault: jest.fn() })).toBe(undefined); }); }); PK b�i[ �@, , components/Checkbox/index.jsnu �Iw�� /** * * Checkbox * */ import React from 'react'; import PropTypes from 'prop-types'; import { Checkbox as StyledCheckbox, CheckboxWrapper } from '@buffetjs/styles'; import Label from '../Label'; function Checkbox({ autoFocus, className, id, message, name, onChange, tabIndex, value, ...rest }) { const handleChange = () => { const target = { name, type: 'checkbox', value: !value, }; onChange({ target }); }; return ( <CheckboxWrapper className={className} disabled={rest.disabled}> <StyledCheckbox {...rest} autoFocus={autoFocus} id={id || name} name={name} onChange={handleChange} tabIndex={tabIndex} checked={value} /> <Label htmlFor={id || name} message={message} /> </CheckboxWrapper> ); } Checkbox.defaultProps = { autoComplete: 'off', autoFocus: false, className: null, disabled: false, id: null, message: null, onChange: () => {}, placeholder: null, tabIndex: '0', value: false, }; Checkbox.propTypes = { autoComplete: PropTypes.string, autoFocus: PropTypes.bool, className: PropTypes.string, disabled: PropTypes.bool, id: PropTypes.string, message: PropTypes.oneOfType([ PropTypes.func, PropTypes.string, PropTypes.shape({ id: PropTypes.string, params: PropTypes.object, }), ]), name: PropTypes.string.isRequired, onChange: PropTypes.func, placeholder: PropTypes.string, tabIndex: PropTypes.string, value: PropTypes.bool, }; export default Checkbox; PK b�i[� F� � components/Count/Wrapper.jsnu �Iw�� import styled from 'styled-components'; import PropTypes from 'prop-types'; import Flex from '../Flex'; import colors from '../../theme/colors'; const Wrapper = styled(Flex)` width: fit-content; height: 1.4rem; min-width: 1.4rem; padding: 0 0.2rem; border-radius: ${({ theme }) => theme.main.sizes.borderRadius}; background-color: ${({ theme, isActive }) => isActive ? theme.main.colors.lightBlue : '#e9eaeb'}; `; Wrapper.defaultProps = { theme: { main: { colors, sizes: { borderRadius: '2px', paddings: { xs: '5px', }, }, }, }, }; Wrapper.propTypes = { isActive: PropTypes.bool, theme: PropTypes.object, }; export default Wrapper; PK b�i[����@ @ components/Count/index.jsnu �Iw�� import React from 'react'; import PropTypes from 'prop-types'; import Text from '../Text'; import Wrapper from './Wrapper'; const Count = ({ count, isActive }) => ( <Wrapper isActive={isActive} justifyContent="center" alignItems="center"> <Text lineHeight="none" fontWeight="bold" color={isActive ? 'mediumBlue' : 'grey'} fontSize="xs" > {count} </Text> </Wrapper> ); Count.propTypes = { count: PropTypes.number, isActive: PropTypes.bool, }; Count.defaultProps = { count: 0, isActive: false, }; export default Count; PK b�i[ؓ��N N < components/DatePicker/tests/__snapshots__/index.test.js.snapnu �Iw�� // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`<DatePicker /> should match snapshot 1`] = ` <DocumentFragment> .c0 { position: relative; } .c0 * { font-family: 'Lato'; outline: 0; box-sizing: border-box; } .c0 .DateInput { width: 100%; } .c0 svg.fa-calendar-alt { font-size: 14px; } .c0 input { font-weight: 400; position: relative; z-index: 1; width: 100%; height: 3.4rem; padding: 0 1rem; font-size: 1.3rem; cursor: pointer; border: 1px solid #E3E9F3; border-radius: 2px; color: #000000; background-color: transparent; padding-left: 42px; } .c0 input::-webkit-input-placeholder { color: #919BAE; } .c0 input:disabled { background-color: transparent; cursor: not-allowed; } .c0 .SingleDatePicker, .c0 .SingleDatePickerInput__withBorder { width: 100%; } .c0 .SingleDatePickerInput__withBorder { border: 0; } .c0 .DateInput_input__focused { border-color: #78caff; } .c0 .DayPicker_weekHeader { color: #000000; border-top: 1px solid #f9f9f9; margin-top: -10px; } .c0 .DayPicker_weekHeader li { padding-top: 7px; padding-bottom: 5px; } .c0 .DayPicker_weekHeader li small { font-size: 1.3rem; } .c0 .DayPicker__withBorder { box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #f9f9f9; background: white; position: absolute; } .c0 .DateInput_fang { display: none; } .c0 .CalendarMonth_caption { font-size: 1.3rem; padding-bottom: 45px; padding-top: 23px; } .c0 .DayPicker_transitionContainer { padding: 4px; } .c0 .DayPickerKeyboardShortcuts_show { display: none; } .c0 .DayPickerNavigation div[role='button'] { font-size: 21px; width: 35px; height: 33px; color: #000000; border-radius: 0; text-align: center; top: 20px; } .c0 .DayPickerNavigation div[role='button'], .c0 .DayPickerNavigation div[role='button']:hover { border: 0; } .c0 .DayPickerNavigation div[role='button'].DayPickerNavigation_leftButton__horizontalDefault::before { content: '‹'; } .c0 .DayPickerNavigation div[role='button'].DayPickerNavigation_rightButton__horizontalDefault::before { content: '›'; } .c0 .DayPickerNavigation div[role='button'] svg { display: none; } .c0 .DayPickerNavigation div[role='button']:hover { background: #eee; } .c0 td { position: relative; cursor: pointer; width: 34px; height: 18px; font-size: 1.3rem; } .c0 td, .c0 td.CalendarDay__selected, .c0 td.CalendarDay__selected:active, .c0 td.CalendarDay__selected:hover, .c0 td.CalendarDay__default:hover { border: 0; } .c0 td.CalendarDay__today::before { content: ''; display: inline-block; border-left: 7px solid transparent; border-bottom: 7px solid #005fea; border-top-color: rgba(0,0,0,0.2); position: absolute; bottom: 4px; right: 4px; } .c0 td.CalendarDay__selected { background-color: #007eff; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.25); } .c0 td.CalendarDay__selected.CalendarDay__today::before { border-bottom: 7px solid white; } .c2 { width: calc(3.4rem - 2px); height: calc(3.4rem - 2px); color: #B3B5B9; position: absolute; left: 1px; top: 1px; background-color: #FAFAFB; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; font-size: 13px; } .c3 { width: 100%; height: 3.4rem; padding: 0 1rem; font-weight: 400; font-size: 1.3rem; cursor: text; outline: 0; border: 1px solid #E3E9F3; border-radius: 2px; color: #333740; background-color: transparent; padding-left: calc(3.4rem + 1rem); } .c3::-webkit-input-placeholder { color: #919BAE; } .c3:focus { border-color: #78caff; } .c3:disabled { background-color: #FAFAFB; cursor: not-allowed; color: #9ea7b8; } .c1 { position: relative; background-color: #ffffff; border-radius: 2px; } .c1 button[type='button'] { width: 3.4rem; height: 3.4rem; position: absolute; top: 0; right: 0; z-index: 2; cursor: pointer; outline: 0; border: 0; background: transparent; } .c1 button[type='button']:hover span::before { color: #000000; } .c1 button[type='button'].shown span::before { color: #000000; } .c1 button[type='button'].shown + input[type='text'] { padding-right: calc(3.4rem + 1rem); } .c1 span { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .c1 input { position: relative; z-index: 1; } <div class="c0" > <div> <div class="c1" > <span class="c2" > <svg aria-hidden="true" class="svg-inline--fa fa-calendar-alt fa-w-14 " data-icon="calendar-alt" data-prefix="far" focusable="false" role="img" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" > <path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z" fill="currentColor" /> </svg> </span> <input autocomplete="off" class="c3" id="date" name="start_date" tabindex="0" type="text" value="" /> </div> </div> </div> </DocumentFragment> `; PK b�i[�+1�B B ) components/DatePicker/tests/index.test.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; import moment from 'moment'; import { DayPickerSingleDateController } from 'react-dates'; import { act, cleanup, render } from '@testing-library/react'; import InputText from '../../InputText'; import DatePicker from '../index'; jest.useFakeTimers(); const defaultProps = { type: 'date', name: 'date', onChange: jest.fn(), }; const renderComponent = (props = defaultProps) => mount(<DatePicker {...props} />); describe('<DatePicker />', () => { afterEach(cleanup); // eslint-disable-next-line jest/expect-expect it('should not crash', () => { renderComponent(); }); it('should match snapshot', () => { const { asFragment } = render(<DatePicker {...defaultProps} />); expect(asFragment()).toMatchSnapshot(); }); it('should render an input text', () => { const wrapper = renderComponent(); const input = wrapper.find(InputText); expect(input).toHaveLength(1); }); it('should render a date picker on input text click', () => { const onChange = jest.fn(); const props = { ...defaultProps, onChange, value: moment(new Date(), 'YYYY-MM-DD'), }; const wrapper = renderComponent(props); const input = wrapper.find('input'); input.simulate('click'); const datePicker = wrapper.find(DayPickerSingleDateController); expect(datePicker).toHaveLength(1); }); it('should render onChange props on datepicker select', () => { const onChange = jest.fn(); const props = { ...defaultProps, onChange, value: moment(new Date(), 'YYYY-MM-DD'), }; const wrapper = renderComponent(props); const input = wrapper.find('input'); input.simulate('click'); const datePicker = wrapper.find(DayPickerSingleDateController); act(() => { datePicker.props().onDateChange(moment('1993-07-05', 'YYYY-MM-DD')); }); expect(onChange).toHaveBeenCalledWith({ target: { name: 'date', type: 'date', value: moment('1993-07-05', 'YYYY-MM-DD'), }, }); }); it('should display the date value in a human readable format', () => { const onChange = jest.fn(); const props = { ...defaultProps, onChange, value: moment('1993-07-05', 'YYYY-MM-DD'), }; const wrapper = renderComponent(props); const input = wrapper.find('input'); expect(input.props().value).toBe('July 05, 1993'); }); it('should use the defaultProps', () => { const { defaultProps: { onChange }, } = DatePicker; expect(onChange).toBeDefined(); }); }); PK b�i[�6�)3 3 components/DatePicker/index.jsnu �Iw�� /** * * Datepicker * */ import React, { useEffect, useReducer } from 'react'; import PropTypes from 'prop-types'; import moment from 'moment'; import momentPropTypes from 'react-moment-proptypes'; import 'react-dates/initialize'; import { DayPickerSingleDateController } from 'react-dates'; import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { DatePicker as StyledDatepicker } from '@buffetjs/styles'; import reducer, { initialState } from './reducer'; import Input from '../InputText'; function Datepicker({ className, value, withDefaultValue, disabled, displayFormat, id, name, onChange, readOnly, tabIndex, wait, }) { const [state, dispatch] = useReducer(reducer, initialState); useEffect(() => { let date = null; let displayedDate = ''; if (withDefaultValue && !value) { date = moment(); displayedDate = date.format('MM/DD/YYYY'); } if (!!value && moment(value).isValid()) { date = value._isAMomentObject === true ? value : moment(value); displayedDate = date.format('MM/DD/YYYY'); } dispatch({ type: 'SET_DATE', date, }); dispatch({ type: 'SET_DISPLAYED_DATE', displayedDate, }); }, [value, withDefaultValue]); let timer = null; const { date, displayedDate, isFocused, isVisible } = state; const getDateValue = () => { let dateValue = date ? date.format(displayFormat) : ''; if (isVisible) { dateValue = displayedDate; } return dateValue; }; const handleChange = ({ target }) => { clearTimeout(timer); dispatch({ type: 'SET_IS_FOCUSED', isFocused: false, }); dispatch({ type: 'SET_DISPLAYED_DATE', displayedDate: target.value, }); timer = setTimeout(() => { // Clearing the input if (!target.value) { onChange({ target: { name, type: 'date', value: null } }); dispatch({ type: 'SET_DATE', date: null, }); dispatch({ type: 'SET_DISPLAYED_DATE', displayedDate: '', }); return; } handleDateChange(moment(target.value, 'MM/DD/YYYY')); }, wait); }; const handleDateChange = dateValue => { if (moment(dateValue).isValid()) { onChange({ target: { name, type: 'date', value: dateValue } }); dispatch({ type: 'SET_DATE', date: dateValue, }); dispatch({ type: 'SET_DISPLAYED_DATE', displayedDate: dateValue.format('MM/DD/YYYY'), }); } }; const handleDateClick = dateValue => { handleDateChange(dateValue); toggleDatepicker(false); }; const handleTabClick = ({ keyCode, which }) => { const code = keyCode || which; if (code === 9) { toggleDatepicker(false); } }; const toggleDatepicker = shown => { dispatch({ type: 'SET_IS_VISIBLE', isVisible: shown, }); dispatch({ type: 'SET_IS_FOCUSED', isFocused: shown, }); }; return ( <StyledDatepicker isOpen={isVisible} className={className}> <div> <Input disabled={disabled} type="text" name="start_date" id={id || name} value={getDateValue()} readOnly={readOnly} onChange={handleChange} icon={<FontAwesomeIcon icon={faCalendarAlt} />} onFocus={() => toggleDatepicker(true)} onClick={() => toggleDatepicker(true)} onKeyDown={handleTabClick} tabIndex={tabIndex} /> </div> {isFocused && ( <DayPickerSingleDateController date={date} focused numberOfMonths={1} onDateChange={handleDateClick} onOutsideClick={() => toggleDatepicker(false)} daySize={37} transitionDuration={0} /> )} </StyledDatepicker> ); } Datepicker.defaultProps = { className: null, disabled: false, displayFormat: 'MMMM DD, YYYY', id: 'date', onChange: () => {}, readOnly: false, tabIndex: '0', value: null, wait: 600, withDefaultValue: false, }; Datepicker.propTypes = { className: PropTypes.string, disabled: PropTypes.bool, displayFormat: PropTypes.string, id: PropTypes.string, name: PropTypes.string.isRequired, onChange: PropTypes.func, readOnly: PropTypes.bool, tabIndex: PropTypes.string, value: PropTypes.oneOfType([momentPropTypes.momentObj, PropTypes.string]), wait: PropTypes.number, withDefaultValue: PropTypes.bool, }; export default Datepicker; PK b�i[*o�N N components/DatePicker/reducer.jsnu �Iw�� const initialState = { date: null, displayedDate: '', isFocused: false, isVisible: false, visibleDate: '', }; function reducer(state, action) { const { date, displayedDate, isFocused, isVisible, type } = action; switch (type) { case 'SET_DATE': return { ...state, date }; case 'SET_DISPLAYED_DATE': return { ...state, displayedDate }; case 'SET_IS_FOCUSED': return { ...state, isFocused }; case 'SET_IS_VISIBLE': return { ...state, isVisible }; default: return state; } } export default reducer; export { initialState }; PK b�i[�B�9F F * components/Enumeration/tests/index.test.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; import Enumeration from '../index'; const defaultProps = { name: 'enumeration', type: 'radio', options: [ { value: 'first', label: 'first option', }, { value: 'second', label: 'second option', }, { value: 'third', label: 'third option', }, ], }; const renderComponent = (props = defaultProps) => mount(<Enumeration {...props} />); describe('<Enumeration />', () => { // eslint-disable-next-line jest/expect-expect it('should not crash', () => { renderComponent(); }); it('should use the defaultProps', () => { const { defaultProps: { onChange }, } = Enumeration; expect(onChange).toBeDefined(); expect(onChange({ preventDefault: jest.fn() })).toBe(undefined); }); }); PK b�i[$��i i components/Enumeration/index.jsnu �Iw�� /** * * Enumeration * */ import React from 'react'; import PropTypes from 'prop-types'; import { Enumeration as StyledEnumeration, EnumerationWrapper, } from '@buffetjs/styles'; import Label from '../Label'; function Enumeration({ disabled, id, className, name, onChange, options, value, }) { return ( <EnumerationWrapper className={className}> {options.map(option => ( <Label key={option.value} htmlFor={id || name}> <StyledEnumeration disabled={disabled} checked={option.value === value} name={id || name} onChange={onChange} value={option.value} /> <span>{option.label}</span> </Label> ))} </EnumerationWrapper> ); } Enumeration.defaultProps = { className: null, disabled: false, id: null, onChange: () => {}, options: [], value: null, }; Enumeration.propTypes = { className: PropTypes.string, disabled: PropTypes.bool, id: PropTypes.string, name: PropTypes.string.isRequired, onChange: PropTypes.func, options: PropTypes.arrayOf( PropTypes.shape({ label: PropTypes.string, value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), }) ), value: PropTypes.oneOfType([ PropTypes.string, PropTypes.bool, PropTypes.object, ]), }; export default Enumeration; PK b�i[*� components/Error/index.jsnu �Iw�� /** * * Error * */ import React, { useEffect, useReducer, useRef } from 'react'; import PropTypes from 'prop-types'; import { isEmpty } from 'lodash'; import { createYupSchema } from '@buffetjs/utils'; import reducer from './reducer'; function Error({ children, inputError, translatedErrors, type, validations, value, }) { const [state, dispatch] = useReducer(reducer, { error: false, canCheck: !isEmpty(value), }); const ref = useRef(); useEffect(() => { dispatch({ type: 'SET_ERROR', error: inputError, }); }, [inputError]); const { error, canCheck } = state; const resetError = () => { if (!ref.current) { return; } dispatch({ type: 'SET_ERROR', error: null, }); }; const setError = (message) => { if (!ref.current) { return; } dispatch({ type: 'SET_ERROR', error: message, }); }; const handleBlur = async ({ target }) => { if (canCheck) { try { await createYupSchema(type, validations, translatedErrors).validate( target.value, ); resetError(); } catch (err) { const { message } = err; setError(message); } } }; if (children) { return ( <> {children({ canCheck, dispatch, error, onBlur: handleBlur, })} <span style={{ display: 'none' }} ref={ref} /> </> ); } } Error.defaultProps = { children: () => {}, translatedErrors: { date: 'This is not a date', email: 'This is not an email', string: 'This is not a string', number: 'This is not a number', json: 'This is not a JSON', max: 'This is too high', maxLength: 'This is too long', min: 'This is too small', minLength: 'This is too short', required: 'This value is required', regex: 'This does not match the format', uppercase: 'This must be a upper case string', }, type: null, validations: {}, value: null, }; Error.propTypes = { children: PropTypes.func, translatedErrors: PropTypes.objectOf(PropTypes.string), type: PropTypes.string, validations: PropTypes.objectOf(PropTypes.any), value: PropTypes.any, // eslint-disable-line react/forbid-prop-types }; export default Error; PK b�i[Svo% components/Error/reducer.jsnu �Iw�� function reducer(state, action) { const { error, type } = action; switch (type) { case 'SET_ERROR': return { ...state, error }; case 'SET_CHECK': return { ...state, canCheck: true }; default: return state; } } export default reducer; PK b�i[�� �W W 6 components/Flex/tests/__snapshots__/index.test.js.snapnu �Iw�� // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`<Flex /> should match snapshot 1`] = ` .c0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: normal; -webkit-justify-content: normal; -ms-flex-pack: normal; justify-content: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: normal; -webkit-box-align: normal; -ms-flex-align: normal; align-items: normal; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } <div className="c0" /> `; PK b�i[] # components/Flex/tests/index.test.jsnu �Iw�� import React from 'react'; import renderer from 'react-test-renderer'; import Flex from '../index'; describe('<Flex />', () => { it('should match snapshot', () => { const tree = renderer.create(<Flex />).toJSON(); expect(tree).toMatchSnapshot(); }); }); PK b�i[��5�_ _ components/Flex/index.jsnu �Iw�� import styled from 'styled-components'; import PropTypes from 'prop-types'; const Flex = styled.div` display: flex; justify-content: ${({ justifyContent }) => justifyContent}; flex-direction: ${({ flexDirection }) => flexDirection}; align-items: ${({ alignItems }) => alignItems}; flex-wrap: ${({ flexWrap }) => flexWrap}; `; Flex.defaultProps = { justifyContent: 'normal', flexDirection: 'row', flexWrap: 'nowrap', alignItems: 'normal', }; Flex.propTypes = { flexDirection: PropTypes.string, flexWrap: PropTypes.string, justifyContent: PropTypes.string, }; export default Flex; PK b�i[��e�o o , components/HeaderActions/tests/index.test.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; import HeaderActions from '../index'; const defaultProps = {}; const renderComponent = (props = defaultProps) => mount(<HeaderActions {...props} />); describe('<HeaderActions />', () => { // eslint-disable-next-line jest/expect-expect it('should not crash', () => { renderComponent(); }); }); PK b�i[�\� � ! components/HeaderActions/index.jsnu �Iw�� /** * * HeaderActions * */ import React from 'react'; import PropTypes from 'prop-types'; import { HeaderActions as Wrapper } from '@buffetjs/styles'; import Button from '../Button'; function HeaderActions({ actions }) { return ( <Wrapper> {actions.map((action, index) => { const { Component, disabled, label, onClick } = action; if (Component) { return <Component {...action} key={action.key || index} />; } return ( <Button key={label} onClick={onClick} disabled={disabled || false} {...action} > {label} </Button> ); })} </Wrapper> ); } HeaderActions.defaultProps = { actions: [], }; HeaderActions.propTypes = { actions: PropTypes.arrayOf( PropTypes.shape({ disabled: PropTypes.bool, onClick: PropTypes.func, title: PropTypes.string, }) ), }; export default HeaderActions; PK b�i[ARz�i i * components/HeaderTitle/tests/index.test.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; import HeaderTitle from '../index'; const defaultProps = {}; const renderComponent = (props = defaultProps) => mount(<HeaderTitle {...props} />); describe('<HeaderTitle />', () => { // eslint-disable-next-line jest/expect-expect it('should not crash', () => { renderComponent(); }); }); PK b�i[Wu70 0 components/HeaderTitle/index.jsnu �Iw�� /** * * HeaderTitle * */ import React from 'react'; import PropTypes from 'prop-types'; import { upperFirst } from 'lodash'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPencilAlt } from '@fortawesome/free-solid-svg-icons'; import { HeaderTitle as Wrapper } from '@buffetjs/styles'; function HeaderTitle({ title, children, cta }) { const content = upperFirst(title) || children; const renderCTA = () => { if (cta) { const { onClick } = cta; return ( <FontAwesomeIcon icon={faPencilAlt} onClick={onClick} role="button" tabIndex="0" size="sm" /> ); } return null; }; return ( <Wrapper> <h1> {content} {renderCTA()} </h1> </Wrapper> ); } HeaderTitle.defaultProps = { children: null, cta: null, title: null, }; HeaderTitle.propTypes = { children: PropTypes.node, cta: PropTypes.shape({ onClick: PropTypes.func, }), title: PropTypes.string, }; export default HeaderTitle; PK b�i[X�� # # " components/Icon/tests/Icon.test.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; // import renderer from 'react-test-renderer'; import Icon from '../index'; let renderedComponent; const renderComponent = (props = {}) => mount(<Icon {...props} />); describe('<Icon />', () => { describe('<Icon /> attributes', () => { afterEach(() => { renderedComponent.unmount(); }); it('should have a default icon equals to search', () => { renderedComponent = renderComponent({ icon: 'search' }); const defaultType = 'search'; expect(renderedComponent.at(0).prop('icon')).toBe(defaultType); }); }); // NOTE: disabling this test // describe('<Icon /> icon attributes', () => { // it('should render the search icon', () => { // const tree = renderer.create(<Icon icon="search" />).toJSON(); // expect(tree).toMatchSnapshot(); // }); // it('should render the password icon', () => { // const tree = renderer.create(<Icon icon="password" />).toJSON(); // expect(tree).toMatchSnapshot(); // }); // }); }); PK b�i[V��� � components/Icon/index.jsnu �Iw�� import React from 'react'; import PropTypes from 'prop-types'; import { faSearch, faEye, faAngleLeft, faAngleRight, faPencilAlt, faSortDown, faSortUp, faTrashAlt, faPlus, } from '@fortawesome/free-solid-svg-icons'; import { faClock } from '@fortawesome/free-regular-svg-icons'; import { Icon as StyledIcon } from '@buffetjs/styles'; const iconMap = new Map([ ['time', faClock], ['password', faEye], ['search', faSearch], ['left', faAngleLeft], ['right', faAngleRight], ['pencil', faPencilAlt], ['asc', faSortUp], ['desc', faSortDown], ['trash', faTrashAlt], ['plus', faPlus], ]); function Icon({ icon, className }) { if (iconMap.has(icon)) { return ( <StyledIcon icon={iconMap.get(icon)} className={className || undefined} /> ); } return icon || null; } Icon.defaultProps = { className: null, icon: 'search', }; Icon.propTypes = { className: PropTypes.string, icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), }; export default Icon; PK b�i["��[~ ~ ( components/IconLinks/tests/index.test.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; import IconLinks from '../index'; describe('<IconLinks />', () => { // eslint-disable-next-line jest/expect-expect it('Should not crash', () => { mount(<IconLinks />); }); it('Should render some icons', () => { const icons = [{ icon: 'trash', onClick: jest.fn() }]; const renderedComponent = mount(<IconLinks links={icons} />); const buttons = renderedComponent.find('button'); buttons.at(0).simulate('click'); expect(icons[0].onClick).toHaveBeenCalled(); expect(buttons.at(0).find('svg').prop('className')).toContain('trash'); }); }); PK b�i[�16�� � components/IconLinks/index.jsnu �Iw�� /* eslint-disable react/no-array-index-key */ /** * * IconLinks * */ import React from 'react'; import PropTypes from 'prop-types'; import { Links as StyledLinks } from '@buffetjs/styles'; import Icon from '../Icon'; function IconLinks({ links }) { return ( <StyledLinks> {links.map(({ icon, onClick }, index) => ( <button key={index} onClick={onClick} type="button"> <Icon className="link-icon" icon={icon} /> </button> ))} </StyledLinks> ); } IconLinks.defaultProps = { links: [], }; IconLinks.propTypes = { links: PropTypes.arrayOf( PropTypes.shape({ icon: PropTypes.node, onClick: PropTypes.func, }) ), }; export default IconLinks; PK b�i[�Sv v components/InputNumber/index.jsnu �Iw�� /** * * InputNumber * */ import React from 'react'; import RcInputNumber from 'rc-input-number'; import PropTypes from 'prop-types'; import { InputNumber as StyledInputNumber } from '@buffetjs/styles'; function InputNumber({ autoFocus, id, className, name, onChange, tabIndex, value, ...rest }) { const handleChange = data => { if (data !== null) { const target = { id, name, type: 'number', value: data, }; onChange({ target }); } }; return ( <StyledInputNumber className={className}> <RcInputNumber {...rest} autoFocus={autoFocus} id={id || name} name={name} onChange={handleChange} tabIndex={tabIndex} value={value} className="inputNumber" /> </StyledInputNumber> ); } InputNumber.defaultProps = { autoComplete: 'off', autoFocus: false, className: null, id: null, onChange: () => {}, placeholder: null, tabIndex: '0', value: 0, }; InputNumber.propTypes = { autoComplete: PropTypes.string, autoFocus: PropTypes.bool, className: PropTypes.string, id: PropTypes.string, name: PropTypes.string.isRequired, onChange: PropTypes.func, placeholder: PropTypes.string, tabIndex: PropTypes.string, value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), }; export default InputNumber; PK b�i[�P� � " components/InputText/PrefixIcon.jsnu �Iw�� import React from 'react'; import PropTypes from 'prop-types'; import { IconText, IconWrapper } from '@buffetjs/styles'; import Icon from '../Icon'; function PrefixIcon({ type, icon }) { if (icon) { return ( <IconWrapper> <Icon icon={icon} /> </IconWrapper> ); } if (type === 'search') { return ( <IconWrapper> <Icon icon={type} /> </IconWrapper> ); } if (type === 'email') { return <IconText text="@" />; } return null; } PrefixIcon.defaultProps = { icon: null, }; PrefixIcon.propTypes = { icon: PropTypes.node, type: PropTypes.string.isRequired, }; export default PrefixIcon; PK b�i[5�@�� � components/InputText/index.jsnu �Iw�� /** * * InputText * */ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { IconWrapper, InputText as Input, InputWrapper, } from '@buffetjs/styles'; import Icon from '../Icon'; import PrefixIcon from './PrefixIcon'; function InputText({ autoFocus, className, icon, id, name, onChange, tabIndex, type, value, ...rest }) { const [showPassword, togglePassword] = useState(false); return ( <InputWrapper className={className}> <PrefixIcon icon={icon} type={type} /> {type === 'password' && ( <button type="button" onClick={() => togglePassword(!showPassword)} className={showPassword ? 'shown' : ''} tabIndex="-1" > <IconWrapper background={false}> <Icon icon={type} /> </IconWrapper> </button> )} <Input autoFocus={autoFocus} id={id || name} name={name} onChange={onChange} tabIndex={tabIndex} type={showPassword ? 'text' : type} value={value} icon={icon} {...rest} /> </InputWrapper> ); } InputText.defaultProps = { autoComplete: 'off', autoFocus: false, className: null, icon: null, id: null, onChange: () => {}, placeholder: null, tabIndex: '0', type: 'text', value: '', }; InputText.propTypes = { autoComplete: PropTypes.string, autoFocus: PropTypes.bool, className: PropTypes.string, icon: PropTypes.node, id: PropTypes.string, name: PropTypes.string.isRequired, onChange: PropTypes.func, placeholder: PropTypes.string, tabIndex: PropTypes.string, type: PropTypes.string, value: PropTypes.string, }; export default InputText; PK b�i[Yj�"Z Z $ components/Label/tests/Label.test.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; import { isFunction } from 'lodash'; import Label from '../index'; let renderedComponent; const renderComponent = (props = {}) => mount(<Label {...props} />); describe('<Label />', () => { afterEach(() => { renderedComponent.unmount(); }); it('render the <Label /> with htmlFor props', () => { renderedComponent = renderComponent({ htmlFor: 'inputName' }); expect(renderedComponent.at(0).prop('htmlFor')).toBe('inputName'); }); it('render the <Label /> with message props as a String', () => { renderedComponent = renderComponent({ htmlFor: 'inputName', message: 'text', }); expect(renderedComponent.prop('message')).toEqual('text'); }); it('render the <Label /> with message props as a function', () => { const messageFunc = () => 'text'; renderedComponent = renderComponent({ htmlFor: 'inputName', message: messageFunc, }); expect(isFunction(renderedComponent.prop('message'))).toBe(true); expect(renderedComponent.prop('message')).toEqual(messageFunc); }); }); PK b�i[<�l3� � components/Label/index.jsnu �Iw�� /** * * Label * */ import React from 'react'; import PropTypes from 'prop-types'; import { isFunction } from 'lodash'; import { Label as StyledLabel } from '@buffetjs/styles'; function Label(props) { const content = (() => { if (isFunction(props.message)) { return props.message(); } if (props.message) { return props.message; } return props.children; })(); return ( <StyledLabel htmlFor={props.htmlFor} className={props.className}> {content} </StyledLabel> ); } Label.defaultProps = { children: null, className: null, message: null, }; Label.propTypes = { children: PropTypes.node, className: PropTypes.string, htmlFor: PropTypes.string.isRequired, message: PropTypes.oneOfType([ PropTypes.func, PropTypes.string, PropTypes.shape({ id: PropTypes.string, params: PropTypes.object, }), ]), }; export default Label; PK b�i[�>-B� � # components/List/tests/index.test.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; import List from '../index'; describe('<List />', () => { // eslint-disable-next-line jest/expect-expect it('Should not crash', () => { mount(<List />); }); it('Should use a custom row if provided', () => { const items = [{ test: 'test' }]; const customRowComponent = jest.fn(); mount(<List items={items} customRowComponent={customRowComponent} />); expect(customRowComponent).toHaveBeenCalledWith(items[0]); }); }); PK b�i[ۂ� components/List/index.jsnu �Iw�� /** * * List * */ import React from 'react'; import PropTypes from 'prop-types'; import { List as StyledList, LoadingIndicator } from '@buffetjs/styles'; import ListRow from '../ListRow'; import Padded from '../Padded'; function List({ className, items, isLoading, customRowComponent }) { return ( <StyledList className={className}> {isLoading ? ( <Padded top bottom size="md"> <LoadingIndicator /> </Padded> ) : ( <table> <tbody> {items.map((item, index) => customRowComponent ? ( // eslint-disable-next-line react/no-array-index-key <React.Fragment key={index}> {customRowComponent(item)} </React.Fragment> ) : ( // eslint-disable-next-line react/no-array-index-key <ListRow cells={item} key={index} /> ) )} </tbody> </table> )} </StyledList> ); } List.defaultProps = { className: null, customRowComponent: null, isLoading: false, items: [], }; List.propTypes = { className: PropTypes.string, customRowComponent: PropTypes.func, isLoading: PropTypes.bool, items: PropTypes.instanceOf(Array), }; export default List; PK b�i[��� � ) components/ListHeader/tests/index.test.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; import ListHeader from '../index'; describe('<ListHeader />', () => { // eslint-disable-next-line jest/expect-expect it('Should not crash', () => { mount(<ListHeader />); }); }); PK b�i[v��Ҍ � + components/ListHeader/BaselineAlignement.jsnu �Iw�� import styled from 'styled-components'; const BaselineAlignement = styled.div` padding-top: 17px; `; export default BaselineAlignement; PK b�i[,h�+ + components/ListHeader/index.jsnu �Iw�� /** * * ListHeader * */ import React from 'react'; import PropTypes from 'prop-types'; import { ListHeader as StyledListHeader } from '@buffetjs/styles'; import Button from '../Button'; import Flex from '../Flex'; import Padded from '../Padded'; import Text from '../Text'; import BaselineAlignement from './BaselineAlignement'; function ListHeader({ button, title, subtitle }) { return ( <StyledListHeader> <Flex justifyContent="space-between"> <Padded top bottom size="smd"> <Text fontSize="lg" fontWeight="bold" lineHeight="18px"> {title} </Text> {subtitle && ( <Padded top size="xs"> <Text fontSize="md" color="grey" lineHeight="13px"> {subtitle} </Text> </Padded> )} </Padded> {button && ( <BaselineAlignement> <Button {...button} /> </BaselineAlignement> )} </Flex> </StyledListHeader> ); } ListHeader.defaultProps = { button: null, title: null, subtitle: null, }; ListHeader.propTypes = { button: PropTypes.shape({ color: PropTypes.string, icon: PropTypes.bool, type: PropTypes.string, }), subtitle: PropTypes.string, title: PropTypes.string, }; export default ListHeader; PK b�i[oW�÷ � ' components/ListRow/tests/index.tests.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; import ListRow from '../index'; describe('<ListRow />', () => { // eslint-disable-next-line jest/expect-expect it('Should not crash', () => { mount( <table> <tbody> <ListRow /> </tbody> </table>, ); }); it('should display some cells', () => { const cells = { name: 'name', test: 'test' }; const renderedComponent = mount( <table> <tbody> <ListRow cells={cells} /> </tbody> </table>, ); const tds = renderedComponent.find('td'); expect(tds.at(0).text()).toBe('name'); expect(tds.at(1).text()).toBe('test'); }); }); PK b�i[��X�N N components/ListRow/index.jsnu �Iw�� /** * * ListRow * */ import React from 'react'; import PropTypes from 'prop-types'; import { ListRow as StyledListRow } from '@buffetjs/styles'; function ListRow({ cells, onClick }) { return ( <StyledListRow onClick={onClick}> {Object.keys(cells).map(key => ( <td key={key} className={`${key}-cell`}> <p>{cells[key]}</p> </td> ))} </StyledListRow> ); } ListRow.defaultProps = { cells: {}, onClick: () => {}, }; ListRow.propTypes = { cells: PropTypes.instanceOf(Object), onClick: PropTypes.func, }; export default ListRow; PK b�i[h1vZ� � components/NavTabs/index.jsnu �Iw�� /** * * NavTabs * */ import React from 'react'; import { NavLink } from 'react-router-dom'; import PropTypes from 'prop-types'; import { Tab as StyledTab, colors } from '@buffetjs/styles'; import { gradient } from '@buffetjs/utils'; function NavTabs({ links }) { let color = colors.greyLink; return ( <ul> {links.map((link, index) => { color = gradient(color, 1.5); const content = link.label ? <p>{link.label}</p> : link.compo || null; return ( <StyledTab key={link.to} index={index} count={links.length} background={color} > <NavLink to={link.to}>{content}</NavLink> </StyledTab> ); })} </ul> ); } NavTabs.defaultProps = { links: [], }; NavTabs.propTypes = { links: PropTypes.arrayOf( PropTypes.shape({ compo: PropTypes.node, label: PropTypes.string, to: PropTypes.string, }) ), }; export default NavTabs; PK b�i[ Bh7i i ! components/Option/RemoveButton.jsnu �Iw�� import styled from 'styled-components'; const RemoveButton = styled.button` display: flex; justify-items: center; height: 13px; padding-left: 10px; padding-right: 10px; margin-left: 10px; background-color: transparent; border: 0; border-left: 1px solid rgba(0, 126, 255, 0.1); &:focus { outline: 0; } `; export default RemoveButton; PK b�i[h��u components/Option/index.jsnu �Iw�� import React from 'react'; import PropTypes from 'prop-types'; import { Remove } from '@buffetjs/icons'; import { Option as Wrapper } from '@buffetjs/styles'; import { upperFirst } from 'lodash'; import RemoveButton from './RemoveButton'; function Filter({ label, onClick, ...rest }) { const content = typeof label === 'string' ? <span>{upperFirst(label)}</span> : label; return ( <Wrapper {...rest}> {content} <RemoveButton type="button" onClick={onClick}> <Remove width="11px" height="11px" fill="#007eff" /> </RemoveButton> </Wrapper> ); } Filter.defaultProps = { label: '', onClick: () => {}, }; Filter.propTypes = { label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), onClick: PropTypes.func, }; export default Filter; PK b�i[��G�� � 8 components/Padded/tests/__snapshots__/index.test.js.snapnu �Iw�� // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`<Padded /> should match snapshot 1`] = ` <div className="" size="sm" /> `; PK b�i[�� % components/Padded/tests/index.test.jsnu �Iw�� import React from 'react'; import renderer from 'react-test-renderer'; import Padded from '../index'; describe('<Padded />', () => { it('should match snapshot', () => { const tree = renderer.create(<Padded />).toJSON(); expect(tree).toMatchSnapshot(); }); }); PK b�i[���PQ Q components/Padded/index.jsnu �Iw�� import PropTypes from 'prop-types'; import styled from 'styled-components'; const Padded = styled.div` padding-top: ${({ theme, size, top }) => top && (theme.main.sizes.paddings[size] || size)}; padding-right: ${({ theme, size, right }) => right && (theme.main.sizes.paddings[size] || size)}; padding-bottom: ${({ theme, size, bottom }) => bottom && (theme.main.sizes.paddings[size] || size)}; padding-left: ${({ theme, size, left }) => left && (theme.main.sizes.paddings[size] || size)}; `; Padded.defaultProps = { bottom: false, left: false, right: false, size: 'sm', top: false, // TODO : This is temporary theme: { main: { sizes: { paddings: { xs: '5px', sm: '10px', smd: '20px', md: '30px', lg: '40px', }, }, }, }, }; Padded.propTypes = { bottom: PropTypes.bool, left: PropTypes.bool, right: PropTypes.bool, size: PropTypes.string, // eslint-disable-next-line react/forbid-prop-types theme: PropTypes.object, top: PropTypes.bool, }; export default Padded; PK b�i[1'5d d components/Paging/index.jsnu �Iw�� /** * * Paging * */ import React from 'react'; import { Pagination, PaginationItem, PaginationLink } from 'reactstrap'; import PropTypes from 'prop-types'; import { Paging as StyledPaging } from '@buffetjs/styles'; import Icon from '../Icon'; /* eslint-disable react/no-array-index-key */ function Paging({ count, page, onChange, range }) { const pagesCount = Math.ceil(count / range); return ( <> <StyledPaging /> <Pagination aria-label="Page navigation"> <PaginationItem> <PaginationLink onClick={onChange} value={0}> <Icon icon="left" /> </PaginationLink> </PaginationItem> {Array(pagesCount) .fill(1) .map((item, index) => ( <React.Fragment key={index}> <PaginationItem key={index} onClick={onChange} className={page === index * range ? 'selected' : ''} > <PaginationLink onClick={onChange} value={index * range}> {index + 1} </PaginationLink> </PaginationItem> </React.Fragment> ))} <PaginationItem> <PaginationLink onClick={onChange} value={(pagesCount - 1) * range}> <Icon icon="right" /> </PaginationLink> </PaginationItem> </Pagination> </> ); } Paging.defaultProps = { count: 0, onChange: () => {}, page: 0, range: 15, }; Paging.propTypes = { count: PropTypes.number, onChange: PropTypes.func, page: PropTypes.number, range: PropTypes.number, }; export default Paging; PK b�i[�[�nH H ? components/Picker/tests/__snapshots__/pickerButton.test.js.snapnu �Iw�� // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`<PickerButton /> should match snapshot 1`] = ` .c0 { margin: 0; line-height: normal; color: #292b2c; font-size: 13px; font-weight: 500; text-transform: none; } .c1 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 30px; padding: 0 10px; background-color: #ffffff; border: 1px solid #e3e9f3; border-radius: 2px; } .c1:active, .c1:focus { outline: 0; } .c1 > svg + span, .c1 > span + svg { margin-left: 10px; } .c1 > svg g { stroke: #292b2c; } .c1:hover { background-color: #fbfbfb; } <button className="c0 c1" color="greyDark" fontSize="md" fontWeight="semiBold" type="button" /> `; PK b�i[�P� h h @ components/Picker/tests/__snapshots__/pickerSection.test.js.snapnu �Iw�� // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`<PickerSection /> should match snapshot 1`] = ` .c0 { display: none; position: absolute; top: 38px; left: 0; right: auto; z-index: 1046; background-color: #ffffff; border-radius: 2px; border: 1px solid #e3e9f3; box-shadow: 0 2px 4px rgba(227,233,243,0.5); } <div className="c0" /> `; PK b�i[�>d�+ + , components/Picker/tests/pickerButton.test.jsnu �Iw�� import React from 'react'; import renderer from 'react-test-renderer'; import PickerButton from '../PickerButton'; describe('<PickerButton />', () => { it('should match snapshot', () => { const tree = renderer.create(<PickerButton />).toJSON(); expect(tree).toMatchSnapshot(); }); }); PK b�i[!ń�/ / - components/Picker/tests/pickerSection.test.jsnu �Iw�� import React from 'react'; import renderer from 'react-test-renderer'; import PickerSection from '../PickerSection'; describe('<PickerSection />', () => { it('should match snapshot', () => { const tree = renderer.create(<PickerSection />).toJSON(); expect(tree).toMatchSnapshot(); }); }); PK b�i[���� � ! components/Picker/PickerButton.jsnu �Iw�� import React from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; import Text from '../Text'; import colors from '../../theme/colors'; const PickerButton = styled(props => ( <Text as="button" fontWeight="semiBold" color={props.isActive ? 'mediumBlue' : 'greyDark'} {...props} /> ))` display: flex; align-items: center; height: 30px; padding: 0 10px; background-color: ${({ theme }) => theme.main.colors.white}; border: 1px solid ${({ theme }) => theme.main.colors.darkGrey}; border-radius: ${({ theme }) => theme.main.sizes.borderRadius}; &:active, &:focus { outline: 0; } > svg + span, > span + svg { margin-left: 10px; } > svg g { stroke: ${({ theme }) => theme.main.colors.greyDark}; } ${({ isActive, theme }) => isActive ? ` background-color: ${theme.main.colors.lightBlue}; border: 1px solid ${theme.main.colors.darkBlue}; color: ${theme.main.colors.mediumBlue}; > svg g { stroke: ${theme.main.colors.mediumBlue}; } ` : ` &:hover { background-color: ${theme.main.colors.lightestGrey}; } `} `; PickerButton.defaultProps = { isActive: false, type: 'button', // TODO : This is temporary theme: { main: { colors, sizes: { borderRadius: '2px', fonts: { xs: '11px', sm: '12px', md: '13px', lg: '18px', }, }, fontWeights: { regular: 400, semiBold: 500, bold: 600, black: 900, }, }, }, }; PickerButton.propTypes = { isActive: PropTypes.bool, type: PropTypes.string, }; export default PickerButton; PK b�i[90� @ @ " components/Picker/PickerSection.jsnu �Iw�� import styled from 'styled-components'; import PropTypes from 'prop-types'; const PickerSection = styled.div` display: none; position: absolute; top: 38px; left: ${({ position }) => (position === 'left' ? '0' : 'auto')}; right: ${({ position }) => (position === 'right' ? '0' : 'auto')}; z-index: 1046; background-color: ${({ theme }) => theme.main.colors.white}; border-radius: ${({ theme }) => theme.main.sizes.borderRadius}; border: 1px solid ${({ theme }) => theme.main.colors.darkGrey}; box-shadow: 0 2px 4px ${({ theme }) => theme.main.colors.greyAlpha}; ${({ isOpen }) => isOpen && 'display: block;'} `; PickerSection.defaultProps = { isOpen: false, position: 'left', // TODO : This is temporary theme: { main: { colors: { white: '#ffffff', darkGrey: '#e3e9f3', greyAlpha: 'rgba(227, 233, 243, 0.5)', }, sizes: { borderRadius: '2px', }, }, }, }; PickerSection.propTypes = { isOpen: PropTypes.bool, position: PropTypes.oneOf(['left', 'right']), }; export default PickerSection; PK b�i[��� � � " components/Picker/PickerWrapper.jsnu �Iw�� import styled from 'styled-components'; const PickerWrapper = styled.div` position: relative; `; export default PickerWrapper; PK b�i[ܦ�q� � components/Picker/index.jsnu �Iw�� import React, { useState, useRef } from 'react'; import PropTypes from 'prop-types'; import { useClickAwayListener } from '@buffetjs/hooks'; import PickerButton from './PickerButton'; import PickerSection from './PickerSection'; import PickerWrapper from './PickerWrapper'; const Picker = ({ position, renderButtonContent, renderSectionContent }) => { const [isOpen, setIsOpen] = useState(false); const dropdownRef = useRef(); useClickAwayListener(dropdownRef, () => setIsOpen(false)); const handleToggle = () => { setIsOpen(v => !v); }; return ( <PickerWrapper ref={dropdownRef}> <PickerButton onClick={handleToggle} isActive={isOpen}> {renderButtonContent(isOpen)} </PickerButton> <PickerSection isOpen={isOpen} position={position}> {renderSectionContent(handleToggle)} </PickerSection> </PickerWrapper> ); }; Picker.defaultProps = { position: 'left', renderButtonContent: () => {}, renderSectionContent: () => {}, }; Picker.propTypes = { position: PropTypes.oneOf(['left', 'right']), renderButtonContent: PropTypes.func, renderSectionContent: PropTypes.func, }; export default Picker; PK b�i[A�� � components/PrefixIcon/index.jsnu �Iw�� import styled from 'styled-components'; import { sizes } from '@buffetjs/styles'; import Icon from '../Icon'; const PrefixIcon = styled(Icon)` margin-right: ${sizes.margin}px; font-size: 0.94em; `; export default PrefixIcon; PK b�i[���C C % components/Select/tests/index.test.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; import Select from '../index'; const initProps = { name: 'inputSelect', onChange: jest.fn(), value: '', }; let renderedComponent; const renderComponent = (props = initProps) => mount(<Select {...props} />); describe('<Select />', () => { afterEach(() => { renderedComponent.unmount(); }); it('Should render the component with no errors', () => { renderedComponent = renderComponent(); const wrapper = renderedComponent.find(Select); expect(wrapper.exists()).toBe(true); }); it('Testing options prop with an array of string', () => { const options = ['option 1', 'option 2']; renderedComponent = renderComponent({ ...initProps, options }); const wrapper = renderedComponent.find(Select); const optionsElements = wrapper.find('option'); expect(optionsElements).toHaveLength(2); expect(optionsElements.first().text()).toBe('option 1'); expect(optionsElements.last().text()).toBe('option 2'); }); it('Testing options prop with an array of objects [{ label, value }]', () => { const options = [ { label: 'option 1', value: 'option1', }, { label: 'option 2', value: 'option2', }, ]; renderedComponent = renderComponent({ ...initProps, options }); const wrapper = renderedComponent.find(Select); const optionsElements = wrapper.find('option'); expect(optionsElements).toHaveLength(2); expect(optionsElements.first().text()).toBe('option 1'); expect(optionsElements.last().text()).toBe('option 2'); }); it('Should render the options with an array of React Nodes', () => { const first = ( <option key="first" value="first"> First </option> ); const second = ( <option key="second" value="second"> Second </option> ); const options = [first, second]; renderedComponent = renderComponent({ ...initProps, options }); const wrapper = renderedComponent.find(Select); const optionsElements = wrapper.find('option'); expect(wrapper.find(first)).toBeDefined(); expect(wrapper.find(second)).toBeDefined(); expect(optionsElements).toHaveLength(2); expect(optionsElements.first().text()).toBe('First'); expect(optionsElements.last().text()).toBe('Second'); }); }); PK b�i[^s�.: : components/Select/index.jsnu �Iw�� /** * * Select * */ import React from 'react'; import PropTypes from 'prop-types'; import invariant from 'invariant'; import { Select as StyledSelect } from '@buffetjs/styles'; function Select({ autoFocus, id, name, onChange, options, tabIndex, value, ...rest }) { const lengthOfReactElementsInOptions = options.filter(option => React.isValidElement(option) ).length; const formatOptions = () => options.map(option => { let optionValue = option; // Type check // Use option.value if it is defined (ie. even when it is an empty string) if (option && typeof option.value !== 'undefined') { optionValue = option.value; } return ( <option key={JSON.stringify(optionValue)} value={optionValue}> {option.label || option} </option> ); }); const renderOptions = () => { const areOptionsValidReactElements = options.every(option => React.isValidElement(option) ); return areOptionsValidReactElements ? options : formatOptions(); }; if (lengthOfReactElementsInOptions > 0) { invariant( lengthOfReactElementsInOptions === options.length, 'You have mixed up React Elements and non React Elements in your options array ' ); } return ( <StyledSelect autoFocus={autoFocus} id={id || name} name={name} onChange={onChange} tabIndex={tabIndex} value={value} {...rest} > {renderOptions()} </StyledSelect> ); } Select.defaultProps = { autoComplete: 'off', autoFocus: false, id: null, options: [], placeholder: null, tabIndex: '0', }; Select.propTypes = { autoComplete: PropTypes.string, autoFocus: PropTypes.bool, id: PropTypes.string, name: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, options: PropTypes.arrayOf( PropTypes.oneOfType([ PropTypes.shape({ label: PropTypes.string, value: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, PropTypes.object, ]), }), PropTypes.string, PropTypes.node, ]) ), placeholder: PropTypes.string, tabIndex: PropTypes.string, value: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, PropTypes.object, ]).isRequired, }; export default Select; PK b�i[�vQ� � components/Separator/index.jsnu �Iw�� import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import Flex from '../Flex'; import Padded from '../Padded'; import Text from '../Text'; import colors from '../../theme/colors'; const BorderTop = styled.div` border-top: 1px solid ${({ theme }) => theme.main.colors.border}; width: 100%; `; BorderTop.defaultProps = { theme: { main: { colors, }, }, }; BorderTop.propTypes = { // eslint-disable-next-line react/forbid-prop-types theme: PropTypes.object, }; const Separator = ({ label }) => ( <Flex justifyContent="center" alignItems="center"> {label ? ( <> <BorderTop /> <Padded left right size="sm"> <Text color="grey">{label}</Text> </Padded> <BorderTop /> </> ) : ( <BorderTop /> )} </Flex> ); Separator.defaultProps = { label: null, }; Separator.propTypes = { label: PropTypes.string, }; export default Separator; PK b�i[��b�� � components/Table/tests/index.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; import { TableRowEmpty } from '@buffetjs/styles'; import TableRow from '../../TableRow'; import Table from '../index'; import ActionCollapse from '../ActionCollapse'; describe('<Table />', () => { // eslint-disable-next-line jest/expect-expect it('Should not crash', () => { mount(<Table />); }); it('Should display the Empty row if there is no data', () => { const wrapper = mount(<Table />); expect(wrapper.find(TableRow)).toHaveLength(0); expect(wrapper.find(TableRowEmpty)).toHaveLength(1); }); it('Should display a custom component if given', () => { const Custom = () => ( <tr> <td>Test</td> </tr> ); const headers = [ { value: 'test', }, ]; const rows = [ { test: 'test1', other: 'other', }, ]; const wrapper = mount( <Table customRow={Custom} rows={rows} headers={headers} />, ); expect(wrapper.find(TableRow)).toHaveLength(0); expect(wrapper.find(TableRowEmpty)).toHaveLength(0); expect(wrapper.find(Custom)).toHaveLength(1); }); it('Should display the ActionCollapse correctly without the rowLinks', () => { const headers = [ { value: 'test', }, ]; const rows = [ { test: 'test1', other: 'other', _isChecked: true, }, ]; const wrapper = mount( <Table rows={rows} headers={headers} withBulkAction />, ); const collapse = wrapper.find(ActionCollapse); expect(collapse).toHaveLength(1); expect(collapse.prop('colSpan')).toBe(2); }); it('Should display the ActionCollapse correctly with the bulkAction', () => { const headers = [ { value: 'test', }, ]; const rows = [ { test: 'test1', other: 'other', _isChecked: true, }, ]; const rowLinks = [{ icon: 'trash', onClick: jest.fn() }]; const wrapper = mount( <Table rows={rows} headers={headers} rowLinks={rowLinks} withBulkAction />, ); const collapse = wrapper.find(ActionCollapse); expect(collapse).toHaveLength(1); expect(collapse.prop('colSpan')).toBe(3); }); it('Should display the ActionCollapse if one of the row is not checked', () => { const headers = [ { value: 'test', }, ]; const rows = [ { test: 'test1', other: 'other', _isChecked: true, }, { test: 'test2', other: 'other1', _isChecked: false, }, ]; const rowLinks = [{ icon: 'trash', onClick: jest.fn() }]; const wrapper = mount( <Table rows={rows} headers={headers} rowLinks={rowLinks} withBulkAction />, ); const collapse = wrapper.find(ActionCollapse); expect(collapse).toHaveLength(1); expect(collapse.prop('numberOfSelectedEntries')).toBe(1); }); it('Should not display the ActionCollapse if the withBulkAction is false', () => { const headers = [ { value: 'test', }, ]; const rows = [ { test: 'test1', other: 'other', _isChecked: true, }, { test: 'test2', other: 'other1', _isChecked: true, }, ]; const rowLinks = [{ icon: 'trash', onClick: jest.fn() }]; const wrapper = mount( <Table rows={rows} headers={headers} rowLinks={rowLinks} />, ); const collapse = wrapper.find(ActionCollapse); expect(collapse).toHaveLength(0); }); }); PK b�i[ρ�A " components/Table/ActionCollapse.jsnu �Iw�� import React from 'react'; import PropTypes from 'prop-types'; import Icon from '../Icon'; function ActionCollapse({ colSpan, translatedNumberOfEntry, translatedNumberOfEntries, translatedAction, icon, numberOfSelectedEntries, onConfirm, }) { return ( <tr className="deleteRow"> <td colSpan={colSpan}> <p> {numberOfSelectedEntries} {numberOfSelectedEntries > 1 ? translatedNumberOfEntries : translatedNumberOfEntry} selected - <button onClick={onConfirm} type="button"> <p>{translatedAction}</p> {icon && <Icon icon={icon} />} </button> </p> </td> </tr> ); } ActionCollapse.defaultProps = { icon: 'trash', translatedNumberOfEntry: 'entry', translatedNumberOfEntries: 'entries', translatedAction: 'Delete all', numberOfSelectedEntries: 0, onConfirm: () => {}, }; ActionCollapse.propTypes = { colSpan: PropTypes.number.isRequired, icon: PropTypes.string, numberOfSelectedEntries: PropTypes.number, onConfirm: PropTypes.func, translatedAction: PropTypes.string, translatedNumberOfEntries: PropTypes.string, translatedNumberOfEntry: PropTypes.string, }; export default ActionCollapse; PK b�i[C�!� � components/Table/index.jsnu �Iw�� /** * * Table * */ import React from 'react'; import PropTypes from 'prop-types'; import { LoadingIndicator, Table as StyledTable, TableRowEmpty, } from '@buffetjs/styles'; import TableHeader from '../TableHeader'; import TableRow from '../TableRow'; import ActionCollapse from './ActionCollapse'; function Table({ bulkActionProps, className, customRow, headers, isLoading, onChangeSort, onClickRow, onSelect, onSelectAll, rows, rowLinks, showActionCollapse, sortBy, sortOrder, tableEmptyText, withBulkAction, }) { let colSpan = withBulkAction ? headers.length + 1 : headers.length; if (rowLinks.length > 0) { colSpan += 1; } const areAllEntriesSelected = rows.length > 0 && rows.some(row => row._isChecked === true); const shouldDisplayEmptyRow = rows.length === 0 && !isLoading; return ( <StyledTable className={className}> <table className=""> <TableHeader headers={headers} onChangeSort={onChangeSort} onSelectAll={onSelectAll} rows={rows} shouldAddCell={rowLinks.length > 0} sortBy={sortBy} sortOrder={sortOrder} withBulkAction={withBulkAction} /> <tbody> {withBulkAction && areAllEntriesSelected && showActionCollapse && ( <ActionCollapse colSpan={colSpan} numberOfSelectedEntries={ rows.filter(row => row._isChecked === true).length } {...bulkActionProps} /> )} {isLoading && ( <TableRowEmpty isLoading> <td colSpan={colSpan}> <LoadingIndicator /> </td> </TableRowEmpty> )} {shouldDisplayEmptyRow && ( <TableRowEmpty> <td colSpan={colSpan}>{tableEmptyText}</td> </TableRowEmpty> )} {!shouldDisplayEmptyRow && rows.map((row, index) => { const key = row.id || `key${index}`; if (customRow) { const Row = customRow; return ( <React.Fragment key={JSON.stringify(row)}> <Row row={row} headers={headers} onSelect={onSelect} /> </React.Fragment> ); } return ( <TableRow key={key} headers={headers} onClick={onClickRow} onSelect={() => { onSelect(row, index); }} row={row} rowLinks={rowLinks} withBulkAction={withBulkAction} /> ); })} </tbody> </table> </StyledTable> ); } Table.defaultProps = { bulkActionProps: { icon: 'trash', onConfirm: () => {}, translatedNumberOfEntry: 'entry', translatedNumberOfEntries: 'entries', translatedAction: 'Delete all', }, className: null, customRow: null, headers: [], isLoading: false, onChangeSort: () => {}, onClickRow: () => {}, onSelect: () => {}, onSelectAll: () => {}, rows: [], rowLinks: [], showActionCollapse: false, sortBy: null, sortOrder: 'asc', tableEmptyText: 'There is no data', withBulkAction: false, }; Table.propTypes = { bulkActionProps: PropTypes.shape({ icon: PropTypes.string, onConfirm: PropTypes.func, translatedAction: PropTypes.string, translatedNumberOfEntries: PropTypes.string, translatedNumberOfEntry: PropTypes.string, }), className: PropTypes.string, customRow: PropTypes.func, headers: PropTypes.arrayOf( PropTypes.shape({ isSortEnabled: PropTypes.bool, name: PropTypes.string, value: PropTypes.string, }) ), isLoading: PropTypes.bool, onChangeSort: PropTypes.func, onClickRow: PropTypes.func, onSelect: PropTypes.func, onSelectAll: PropTypes.func, rowLinks: PropTypes.instanceOf(Array), rows: PropTypes.instanceOf(Array), showActionCollapse: PropTypes.bool, sortBy: PropTypes.string, sortOrder: PropTypes.string, tableEmptyText: PropTypes.string, withBulkAction: PropTypes.bool, }; export default Table; PK b�i[��e � � * components/TableHeader/tests/index.test.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; import { Checkbox } from '@buffetjs/styles'; import TableHeader from '../index'; describe('<TableHeader />', () => { describe('Checkbox behaviour', () => { it('Should display the check sign if all rows are selected (someChecked to false and checked to true)', () => { const props = { rows: [{ _isChecked: true }, { _isChecked: true }], withBulkAction: true, }; const renderedComponent = mount( <table> <TableHeader {...props} /> </table> ); const checkbox = renderedComponent.find(Checkbox); const { checked, someChecked } = checkbox.props(); expect(checkbox).not.toHaveLength(0); expect(checked).toBeTruthy(); expect(someChecked).toBeFalsy(); }); it('Should display the uncheck sign if not all the rows are selected (someChecked to true and checked to false)', () => { const props = { withBulkAction: true, rows: [{ _isChecked: true }, { _isChecked: false }], }; const renderedComponent = mount( <table> <TableHeader {...props} /> </table> ); const checkbox = renderedComponent.find(Checkbox); const { checked, someChecked } = checkbox.props(); expect(checkbox).not.toHaveLength(0); expect(checked).toBeFalsy(); expect(someChecked).toBeTruthy(); }); it('Should display nothing if none of the rows are selected (all props to false)', () => { const props = { withBulkAction: true, rows: [{ _isChecked: false }, { _isChecked: false }], }; const renderedComponent = mount( <table> <TableHeader {...props} /> </table> ); const checkbox = renderedComponent.find(Checkbox); const { checked, someChecked } = checkbox.props(); expect(checkbox).not.toHaveLength(0); expect(checked).toBeFalsy(); expect(someChecked).toBeFalsy(); }); it('Should display nothing if there is no rows', () => { const props = { withBulkAction: true, rows: [], }; const renderedComponent = mount( <table> <TableHeader {...props} /> </table> ); const checkbox = renderedComponent.find(Checkbox); const { checked, someChecked } = checkbox.props(); expect(checkbox).not.toHaveLength(0); expect(checked).toBeFalsy(); expect(someChecked).toBeFalsy(); }); }); }); PK b�i[�X�$� � components/TableHeader/index.jsnu �Iw�� /** * * TableHeader * */ import React from 'react'; import PropTypes from 'prop-types'; import { get } from 'lodash'; import { Checkbox } from '@buffetjs/styles'; import Icon from '../Icon'; /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ /* eslint-disable jsx-a11y/control-has-associated-label */ function TableHeader({ headers, onChangeSort, onSelectAll, rows, shouldAddCell, sortBy, sortOrder, withBulkAction, }) { const checked = rows.length > 0 && rows.every(row => row._isChecked === true); const shouldDisplayNotChecked = rows.some(row => row._isChecked === true) && !checked; return ( <thead> <tr> {withBulkAction && ( <th className="checkCell"> <Checkbox onChange={onSelectAll} checked={checked} someChecked={shouldDisplayNotChecked} /> </th> )} {headers.map(header => { const { isSortEnabled, name, value } = header; const shouldDisplaySort = isSortEnabled && sortBy === value; const firstElementThatCanBeSorted = get( headers.filter(h => h.isSortEnabled), [0, 'value'], null ); return ( // eslint-disable-next-line jsx-a11y/click-events-have-key-events <th key={value} onClick={() => { onChangeSort({ sortBy: value, firstElementThatCanBeSorted, isSortEnabled, }); }} > <p className={isSortEnabled ? 'clickable' : ''}> {name} {shouldDisplaySort && <Icon icon={sortOrder || 'asc'} />} </p> </th> ); })} {shouldAddCell && <th />} </tr> </thead> ); } TableHeader.defaultProps = { headers: [], onChangeSort: () => {}, onSelectAll: () => {}, rows: [], shouldAddCell: false, sortBy: null, sortOrder: 'asc', withBulkAction: false, }; TableHeader.propTypes = { headers: PropTypes.arrayOf( PropTypes.shape({ isSortEnabled: PropTypes.bool, name: PropTypes.string, value: PropTypes.string, }) ), onChangeSort: PropTypes.func, onSelectAll: PropTypes.func, rows: PropTypes.instanceOf(Array), shouldAddCell: PropTypes.bool, sortBy: PropTypes.string, sortOrder: PropTypes.string, withBulkAction: PropTypes.bool, }; export default TableHeader; PK b�i[�xm ' components/TableRow/tests/index.test.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; import { Checkbox, Links as StyledLinks } from '@buffetjs/styles'; import TableRow from '../index'; describe('<TableRow />', () => { // eslint-disable-next-line jest/expect-expect it('Should not crash', () => { mount( <table> <tbody> <TableRow /> </tbody> </table>, ); }); it('Should the display the checkbox if the withBulkAction prop is true', () => { const wrapper = mount( <table> <tbody> <TableRow withBulkAction /> </tbody> </table>, ); expect(wrapper.find(Checkbox)).toHaveLength(1); }); it('Should display the cells according to the given headers', () => { const headers = [ { value: 'test', }, ]; const row = { test: 'test1', other: 'other', }; const wrapper = mount( <table> <tbody> <TableRow headers={headers} row={row} /> </tbody> </table>, ); expect(wrapper.find('td')).toHaveLength(1); }); it('should display the links', () => { const headers = [ { value: 'test', }, ]; const row = { test: 'test1', other: 'other', }; const rowLinks = [ { icon: 'trash', onClick: jest.fn(), }, ]; const wrapper = mount( <table> <tbody> <TableRow headers={headers} row={row} rowLinks={rowLinks} /> </tbody> </table>, ); expect(wrapper.find('td')).toHaveLength(2); expect(wrapper.find(StyledLinks)).toHaveLength(1); const button = wrapper.find('button').at(0); expect(button).toHaveLength(1); button.simulate('click'); expect(rowLinks[0].onClick).toHaveBeenCalledWith(row); }); }); PK b�i[ �� � � components/TableRow/index.jsnu �Iw�� /** * * TableRow * */ import React from 'react'; import PropTypes from 'prop-types'; import { isFunction, isObject } from 'lodash'; import { Checkbox, Links as StyledLinks } from '@buffetjs/styles'; import Icon from '../Icon'; function TableRow({ headers, onClick, onSelect, row, rowLinks, withBulkAction, }) { // const displayedCells = headers.map(header => ({ key: header.value, ); return ( <tr onClick={e => { e.preventDefault(); e.stopPropagation(); onClick(e, row); }} > {withBulkAction && ( <td> <Checkbox onClick={e => { e.stopPropagation(); }} onChange={onSelect} checked={row._isChecked} /> </td> )} {headers.map(({ value: cellName, cellFormatter, cellAdapter }) => { let displayedValue = !isObject(row[cellName]) ? row[cellName] : '-'; if (isFunction(cellFormatter)) { displayedValue = cellFormatter(row[cellName], row); } let displayedContent = <p>{displayedValue || '-'}</p>; if (isFunction(cellAdapter)) { displayedContent = cellAdapter(row); } return ( <td key={cellName} className={`${cellName}-cell`}> {displayedContent} </td> ); })} {rowLinks.length > 0 && ( <td> <div style={{ width: 'fit-content', float: 'right' }}> <StyledLinks> {rowLinks.map((icon, index) => ( <button // eslint-disable-next-line react/no-array-index-key key={index + icon} onClick={e => { e.preventDefault(); e.stopPropagation(); icon.onClick(row); }} type="button" > <Icon className="link-icon" icon={icon.icon} /> </button> ))} </StyledLinks> </div> </td> )} </tr> ); } TableRow.defaultProps = { headers: [], onClick: () => {}, onSelect: () => {}, row: {}, rowLinks: [], withBulkAction: false, }; TableRow.propTypes = { headers: PropTypes.arrayOf( PropTypes.shape({ isSortEnabled: PropTypes.bool, name: PropTypes.string, value: PropTypes.string, }) ), onClick: PropTypes.func, onSelect: PropTypes.func, // eslint-disable-next-line react/forbid-prop-types row: PropTypes.object, rowLinks: PropTypes.arrayOf( PropTypes.shape({ icon: PropTypes.node, }) ), withBulkAction: PropTypes.bool, }; export default TableRow; PK b�i[K��r. . 6 components/Text/tests/__snapshots__/index.test.js.snapnu �Iw�� // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`<Text /> should match snapshot 1`] = ` .c0 { margin: 0; line-height: normal; color: #292b2c; font-size: 13px; font-weight: 400; text-transform: none; } <p className="c0" color="greyDark" fontSize="md" fontWeight="regular" /> `; PK b�i[�g # components/Text/tests/index.test.jsnu �Iw�� import React from 'react'; import renderer from 'react-test-renderer'; import Text from '../index'; describe('<Text />', () => { it('should match snapshot', () => { const tree = renderer.create(<Text />).toJSON(); expect(tree).toMatchSnapshot(); }); }); PK b�i[K�!Ɵ � components/Text/index.jsnu �Iw�� import styled from 'styled-components'; import PropTypes from 'prop-types'; import colors from '../../theme/colors'; const Text = styled.p` margin: 0; line-height: ${({ lineHeight }) => lineHeight}; color: ${({ theme, color }) => theme.main.colors[color] || color}; font-size: ${({ theme, fontSize }) => theme.main.sizes.fonts[fontSize]}; font-weight: ${({ theme, fontWeight }) => theme.main.fontWeights[fontWeight]}; text-transform: ${({ textTransform }) => textTransform}; ${({ ellipsis }) => ellipsis && ` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; `} `; Text.defaultProps = { color: 'greyDark', ellipsis: false, fontSize: 'md', fontWeight: 'regular', lineHeight: 'normal', textTransform: 'none', // TODO : This is temporary theme: { main: { colors, sizes: { fonts: { xs: '11px', sm: '12px', md: '13px', lg: '18px', xl: '24px', }, }, fontWeights: { regular: 400, semiBold: 500, bold: 600, black: 900, }, }, }, }; Text.propTypes = { color: PropTypes.string, ellipsis: PropTypes.bool, fontSize: PropTypes.string, fontWeight: PropTypes.string, lineHeight: PropTypes.string, textTransform: PropTypes.string, // eslint-disable-next-line react/forbid-prop-types theme: PropTypes.object, }; export default Text; PK b�i[-�64 4 ' components/Textarea/tests/index.test.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; import Textarea from '../index'; let renderedComponent; const initProps = { name: 'textarea', onChange: jest.fn(), value: '', }; const renderComponent = (props = initProps) => mount(<Textarea {...props} />); describe('<Textarea />', () => { afterEach(() => { renderedComponent.unmount(); }); it('should have a placeholder undefined if not specified', () => { renderedComponent = renderComponent(); expect(renderedComponent.at(0).prop('placeholder')).toBe(undefined); }); }); PK b�i[8�s9 9 components/Textarea/index.jsnu �Iw�� /** * * Textarea * */ import React from 'react'; import PropTypes from 'prop-types'; import { Textarea as StyledTextArea } from '@buffetjs/styles'; function Textarea(props) { return <StyledTextArea {...props} />; } Textarea.propTypes = { name: PropTypes.string.isRequired, }; export default Textarea; PK b�i[�>�,� � ) components/TimePicker/tests/index.test.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; import { TimePicker as StyledTimePicker } from '@buffetjs/styles'; import TimePicker, { timeFormatter } from '../index'; const defaultProps = { name: 'time' }; const renderComponent = (props = defaultProps) => mount(<TimePicker {...props} />); describe('<TimePicker />', () => { describe('Parser onBlur', () => { it('Should format the value to 10:38:00 if 10:38 is given', () => { expect(timeFormatter('10:38')).toEqual('10:38:00'); }); it('Should format the value to 10:38:00 if 10h38 is given', () => { expect(timeFormatter('10h38')).toEqual('10:38:00'); }); it('Should format the value to 10:38:00 if 10H38 is given', () => { expect(timeFormatter('10H38')).toEqual('10:38:00'); }); it('Should format the value to 10:00:00 if 10: is given', () => { expect(timeFormatter('10:')).toEqual('10:00:00'); }); it('Should format the value to 10:00:00 if 10 is given', () => { expect(timeFormatter('10')).toEqual('10:00:00'); }); it('Should format the value to 10:38:38 if 10:38:38 is given', () => { expect(timeFormatter('10:38:38')).toEqual('10:38:38'); }); it('Should format the value to 01:11:00 if 1:11:00 is given', () => { expect(timeFormatter('1:11:00')).toEqual('01:11:00'); }); it('Should format the value to 01:10:00 if 11:1:00 is given', () => { expect(timeFormatter('11:1:00')).toEqual('11:10:00'); }); it('Should format the value to 11:10:2 if 11:10:20 is given', () => { expect(timeFormatter('11:10:2')).toEqual('11:10:20'); }); it('Should format the value to 1200 if 12:00:00 is given', () => { expect(timeFormatter('1200')).toEqual('12:00:00'); }); it('Should format the value to 111 if 01:11:00 is given', () => { expect(timeFormatter('111')).toEqual('01:11:00'); }); it('Should format the value to 00:00:00 if null is given', () => { expect(timeFormatter(null)).toEqual('00:00:00'); }); it('Should format the value to 00:00:00 if nothing is given', () => { expect(timeFormatter('')).toEqual('00:00:00'); }); }); describe('<TimePicker /> behavior', () => { // eslint-disable-next-line jest/expect-expect it('should not crash', () => { renderComponent(); }); it('should send a formatted string onChange', () => { const onChange = jest.fn(); const value = ''; const renderedComponent = renderComponent({ ...defaultProps, onChange, value, }); const element = renderedComponent.find(StyledTimePicker); const mock = { target: { value: '10' } }; element.simulate('change', mock); const expected = { target: { name: 'time', type: 'time', value: '10:00:00', }, }; expect(onChange).toHaveBeenCalledWith(expected); }); }); }); PK b�i[�N�s� � components/TimePicker/index.jsnu �Iw�� /** * * TimePicker * */ import React, { useCallback, useEffect, useState, useRef, useMemo, } from 'react'; import { isInteger, toNumber } from 'lodash'; import PropTypes from 'prop-types'; import { IconWrapper, TimePicker as StyledTimePicker, TimePickerWrapper, TimeList, } from '@buffetjs/styles'; import { useEventListener, useShortcutEffect } from '@buffetjs/hooks'; import Icon from '../Icon'; const MINUTES_IN_HOUR = 60; // Returns string with two digits padded at start with 0 const pad = num => `0${num}`.substr(-2); // Convert time array to formatted time string export const timeFormatter = time => { const newTime = Array(3) .fill('00') .concat(splitArray(time)) .reverse(); newTime.length = 3; return format(newTime).join(':'); }; // Convert time string to time array const splitArray = string => { if (isInteger(toNumber(string)) && string) { const stringFormat = string.length === 3 ? `0${string}` : string; return stringFormat.match(/.{1,2}/g).reverse(); } const lowercase = string ? string.toLowerCase() : '0'; const array = lowercase.includes('h') ? lowercase.split('h') : lowercase.split(':'); return array.reverse().filter(v => !!v); }; // Ensure two-digit format for minutes and seconds const format = array => array.map((string, i) => { if (string.length < 2) { return i === 0 ? `0${string}` : `${string}0`; } return string; }); // Hide seconds if needed const short = hour => { const array = hour.split(':'); if (array.length > 2) { return array.slice(0, -1).join(':'); } return hour; }; // return array of minutes in hours with current step const getMinutesArr = step => { const length = MINUTES_IN_HOUR / step; return Array.from({ length }, (_v, i) => step * i); }; // Generate options for TimeList display const getOptions = step => { const hours = Array.from({ length: 24 }, (_, i) => i); const minutes = getMinutesArr(step); const options = hours.reduce((acc, cur) => { const hour = pad(cur); const hourOptions = minutes.map(minute => { const label = `${hour}:${pad(minute)}`; return { value: `${label}:00`, label }; }); return acc.concat(hourOptions); }, []); return options; }; // Find the nearest time option to select a TimeList value const roundHour = (time, step) => { const arr = splitArray(time); const minutesArr = getMinutesArr(step); const nearMin = nearest( minutesArr.concat(MINUTES_IN_HOUR), parseInt(arr[1], 10) ); arr[1] = minutesArr.includes(arr[1]) ? '00' : pad(nearMin); arr[2] = nearMin === 60 ? `${parseInt(arr[2], 10) + 1}` : arr[2]; return format(arr.reverse()).join(':'); }; // Set the nearest option to select a TimeList value const nearest = (arr, val) => arr.reduce( (p, n) => (Math.abs(p) > Math.abs(n - val) ? n - val : p), Infinity ) + val; function TimePicker(props) { const { name, onChange, seconds, tabIndex, value, step } = props; const [inputVal, setInputVal] = useState(''); const [isOpen, setIsOpen] = useState(false); const options = useMemo(() => getOptions(step), [step]); const inputRef = useRef(); const wrapperRef = useRef(); const listRef = useRef(); const listRefs = options.reduce((acc, curr) => { acc[curr.value] = useRef(); return acc; }, {}); const currentTimeSelected = useMemo( () => roundHour(timeFormatter(inputVal), step), [inputVal, step] ); // Effect to set the time useEffect(() => { if (!isOpen) { const time = seconds ? value : short(value); setInputVal(time); } }, [value, seconds, isOpen]); // Effect to enable scrolling useEffect(() => { const currentRef = currentTimeSelected; if (isOpen && listRefs[currentRef]) { listRef.current.scrollTop = listRefs[currentRef].current.offsetTop; } }, [isOpen, currentTimeSelected, listRefs]); // Custom hook to close the TimeList useEventListener( 'click', event => { if (!wrapperRef.current.contains(event.target)) { setIsOpen(false); } }, isOpen ); // Custom hook to select a time using the keyboard's up arrow useShortcutEffect( 'arrowUp', () => { if (isOpen) { const currentIndex = options.findIndex( o => o.value === currentTimeSelected ); if (!currentIndex) return; const nextIndex = currentIndex - 1; const nextTime = options[nextIndex] || options[currentIndex]; updateTime(nextTime.value); } }, isOpen ); // Custom hook to select a time using the keyboard's down arrow useShortcutEffect( 'arrowDown', () => { if (isOpen) { const currentIndex = options.findIndex( o => o.value === currentTimeSelected ); const lastIndex = options.length - 1; if (currentIndex >= lastIndex) return; const nextIndex = currentIndex + 1; const nextTime = options[nextIndex] || options[lastIndex]; updateTime(nextTime.value); } }, isOpen ); // Custom hook to close the time list useShortcutEffect( 'enter', () => { if (isOpen) { setIsOpen(false); inputRef.current.blur(); } }, isOpen ); useShortcutEffect( 'tab', () => { if (isOpen) { setIsOpen(false); inputRef.current.blur(); } }, isOpen ); const handleChange = ({ target }) => { updateTime(target.value); }; const handleChangeRadio = useCallback(() => {}, []); const formatInputValue = time => { if (!seconds) { setInputVal(short(time)); } else { setInputVal(time); } }; const handleClick = ({ target }) => { updateTime(target.value); setIsOpen(false); }; const updateTime = time => { formatInputValue(time); onChange({ target: { name, type: 'time', value: timeFormatter(time), }, }); }; return ( <TimePickerWrapper ref={wrapperRef} className={props.className}> <StyledTimePicker {...props} autoComplete="off" onChange={handleChange} onFocus={() => setIsOpen(true)} ref={inputRef} type="text" value={inputVal} tabIndex={tabIndex} /> <IconWrapper> <Icon icon="time" /> </IconWrapper> <TimeList className={isOpen && 'displayed'} ref={listRef}> {isOpen && options.map(option => ( <li key={option.value} ref={listRefs[option.value]}> <input type="radio" onChange={handleChangeRadio} onClick={handleClick} value={option.value} id={option.value} name="time" checked={option.value === currentTimeSelected} tabIndex="0" /> <label htmlFor={option.value}>{option.label}</label> </li> ))} </TimeList> </TimePickerWrapper> ); } TimePicker.defaultProps = { className: null, onChange: () => {}, tabIndex: '0', seconds: false, value: '', step: 30, }; TimePicker.propTypes = { className: PropTypes.string, name: PropTypes.string.isRequired, onChange: PropTypes.func, seconds: PropTypes.bool, step: (props, propName) => MINUTES_IN_HOUR % props[propName] > 0 && new Error('step should be divisible by 60'), tabIndex: PropTypes.string, value: PropTypes.string, }; export default TimePicker; PK b�i[D�� � % components/Toggle/tests/index.test.jsnu �Iw�� import React from 'react'; import { mount } from 'enzyme'; import Toggle from '../index'; const defaultProps = { name: 'toggle', type: 'checkbox', }; const renderComponent = (props = defaultProps) => mount(<Toggle {...props} />); describe('<Toggle />', () => { // eslint-disable-next-line jest/expect-expect it('should not crash', () => { renderComponent(); }); it('should send a boolean', () => { const onChange = jest.fn(); const value = false; const renderedComponent = renderComponent({ ...defaultProps, onChange, value, }); const element = renderedComponent.find('input'); element.simulate('change'); expect(onChange).toHaveBeenCalled(); }); it('should use the defaultProps', () => { const { defaultProps: { onChange }, } = Toggle; expect(onChange).toBeDefined(); expect(onChange({ preventDefault: jest.fn() })).toBe(undefined); }); }); PK b�i[T���J J components/Toggle/index.jsnu �Iw�� /** * * Toggle * */ import React, { useCallback } from 'react'; import PropTypes from 'prop-types'; import { Toggle as StyledToggle, ToggleWrapper } from '@buffetjs/styles'; import Label from '../Label'; function Toggle({ disabled, id, className, name, onChange, value }) { const isIndeterminate = value === null; const handleRef = useCallback( element => { if (element) { element.indeterminate = isIndeterminate; // eslint-disable-line no-param-reassign } }, [isIndeterminate] ); const handleChange = e => { let targetValue = e.target.checked; // Handle click when the state is inteterminate if (isIndeterminate) { // Select the right value depending on the mouse position targetValue = e.nativeEvent.offsetX >= e.target.offsetWidth / 2; } onChange({ target: { name, value: targetValue } }); }; return ( <ToggleWrapper className={className}> <Label htmlFor={id || name}> <StyledToggle disabled={disabled} checked={value || false} id={id || name} name={id || name} onChange={handleChange} ref={handleRef} /> <span>OFF</span> <span>ON</span> </Label> </ToggleWrapper> ); } Toggle.defaultProps = { className: null, disabled: false, id: null, onChange: () => {}, value: false, }; Toggle.propTypes = { className: PropTypes.string, disabled: PropTypes.bool, id: PropTypes.string, name: PropTypes.string.isRequired, onChange: PropTypes.func, value: PropTypes.bool, }; export default Toggle; PK b�i[�hQ92 2 components/UnknownInput/index.jsnu �Iw�� /** * * UnknownInput * */ import React from 'react'; import PropTypes from 'prop-types'; const UnknownInput = ({ type }) => <div>This {type} is not available</div>; UnknownInput.defaultProps = { type: null, }; UnknownInput.propTypes = { type: PropTypes.string, }; export default UnknownInput; PK b�i[vߒFF F theme/colors.jsnu �Iw�� // This is the temporary list of colors // TODO : To clean on theme setup export default { black: '#333740', white: '#ffffff', red: '#ff203c', orange: '#ff5d00', lightOrange: '#f64d0a', yellow: '#ffd500', green: '#6dbb1a', blue: '#0097f7', teal: '#5bc0de', pink: '#ff5b77', purple: '#613d7c', gray: '#464a4c', border: '#E3E9F3', 'gray-dark': '#292b2c', grayLight: '#636c72', 'gray-lighter': '#eceeef', 'gray-lightest': '#f7f7f9', brightGrey: '#f0f3f8', darkGrey: '#e3e9f3', lightGrey: '#fafafa', lightestGrey: '#fbfbfb', mediumGrey: '#F2F3F4', grey: '#9ea7b8', greyDark: '#292b2c', greyAlpha: 'rgba(227, 233, 243, 0.5)', lightBlue: '#E6F0FB', mediumBlue: '#007EFF', darkBlue: '#AED4FB', content: { background: '#fafafb', 'background-alpha': 'rgba(14, 22, 34, 0.02)', }, leftMenu: { 'link-hover': '#1c2431', 'link-color': '#919bae', 'title-color': '#5b626f', }, strapi: { 'gray-light': '#eff3f6', gray: '#535f76', 'blue-darker': '#18202e', 'blue-dark': '#151c2e', blue: '#0097f7', }, }; PK b�i[I�Q� � index.jsnu �Iw�� export { default as AttributeIcon } from './components/AttributeIcon'; export { default as Button } from './components/Button'; export { default as Checkbox } from './components/Checkbox'; export { default as Count } from './components/Count'; export { default as DatePicker } from './components/DatePicker'; export { default as Enumeration } from './components/Enumeration'; export { default as Error } from './components/Error'; export { default as Flex } from './components/Flex'; export { default as HeaderActions } from './components/HeaderActions'; export { default as HeaderTitle } from './components/HeaderTitle'; export { default as Icon } from './components/Icon'; export { default as IconLinks } from './components/IconLinks'; export { default as InputNumber } from './components/InputNumber'; export { default as InputText } from './components/InputText'; export { default as Label } from './components/Label'; export { default as List } from './components/List'; export { default as ListHeader } from './components/ListHeader'; export { default as ListRow } from './components/ListRow'; export { default as NavTabs } from './components/NavTabs'; export { default as Option } from './components/Option'; export { default as Padded } from './components/Padded'; export { default as Picker } from './components/Picker'; export { default as PrefixIcon } from './components/PrefixIcon'; export { default as Select } from './components/Select'; export { default as Separator } from './components/Separator'; export { default as Table } from './components/Table'; export { default as TableHeader } from './components/TableHeader'; export { default as TableRow } from './components/TableRow'; export { default as Text } from './components/Text'; export { default as Textarea } from './components/Textarea'; export { default as TimePicker } from './components/TimePicker'; export { default as Toggle } from './components/Toggle'; export { default as UnknownInput } from './components/UnknownInput'; PK b�i[��� components/AttributeIcon/Div.jsnu �Iw�� PK b�i[�'\z� � ! Y components/AttributeIcon/index.jsnu �Iw�� PK b�i[�A��1 1 S components/Button/index.jsnu �Iw�� PK b�i[X�u^ ^ * � components/Checkbox/tests/Checkbox.test.jsnu �Iw�� PK b�i[ �@, , � components/Checkbox/index.jsnu �Iw�� PK b�i[� F� � � components/Count/Wrapper.jsnu �Iw�� PK b�i[����@ @ components/Count/index.jsnu �Iw�� PK b�i[ؓ��N N < �" components/DatePicker/tests/__snapshots__/index.test.js.snapnu �Iw�� PK b�i[�+1�B B ) ]; components/DatePicker/tests/index.test.jsnu �Iw�� PK b�i[�6�)3 3 �E components/DatePicker/index.jsnu �Iw�� PK b�i[*o�N N yX components/DatePicker/reducer.jsnu �Iw�� PK b�i[�B�9F F * [ components/Enumeration/tests/index.test.jsnu �Iw�� PK b�i[$��i i �^ components/Enumeration/index.jsnu �Iw�� PK b�i[*� od components/Error/index.jsnu �Iw�� PK b�i[Svo% �m components/Error/reducer.jsnu �Iw�� PK b�i[�� �W W 6 !o components/Flex/tests/__snapshots__/index.test.js.snapnu �Iw�� PK b�i[] # �q components/Flex/tests/index.test.jsnu �Iw�� PK b�i[��5�_ _ =s components/Flex/index.jsnu �Iw�� PK b�i[��e�o o , �u components/HeaderActions/tests/index.test.jsnu �Iw�� PK b�i[�\� � ! �w components/HeaderActions/index.jsnu �Iw�� PK b�i[ARz�i i * �{ components/HeaderTitle/tests/index.test.jsnu �Iw�� PK b�i[Wu70 0 �} components/HeaderTitle/index.jsnu �Iw�� PK b�i[X�� # # " � components/Icon/tests/Icon.test.jsnu �Iw�� PK b�i[V��� � �� components/Icon/index.jsnu �Iw�� PK b�i["��[~ ~ ( Ҋ components/IconLinks/tests/index.test.jsnu �Iw�� PK b�i[�16�� � �� components/IconLinks/index.jsnu �Iw�� PK b�i[�Sv v ǐ components/InputNumber/index.jsnu �Iw�� PK b�i[�P� � " �� components/InputText/PrefixIcon.jsnu �Iw�� PK b�i[5�@�� � v� components/InputText/index.jsnu �Iw�� PK b�i[Yj�"Z Z $ �� components/Label/tests/Label.test.jsnu �Iw�� PK b�i[<�l3� � I� components/Label/index.jsnu �Iw�� PK b�i[�>-B� � # /� components/List/tests/index.test.jsnu �Iw�� PK b�i[ۂ� �� components/List/index.jsnu �Iw�� PK b�i[��� � ) ܰ components/ListHeader/tests/index.test.jsnu �Iw�� PK b�i[v��Ҍ � + /� components/ListHeader/BaselineAlignement.jsnu �Iw�� PK b�i[,h�+ + � components/ListHeader/index.jsnu �Iw�� PK b�i[oW�÷ � ' �� components/ListRow/tests/index.tests.jsnu �Iw�� PK b�i[��X�N N �� components/ListRow/index.jsnu �Iw�� PK b�i[h1vZ� � 6� components/NavTabs/index.jsnu �Iw�� PK b�i[ Bh7i i ! h� components/Option/RemoveButton.jsnu �Iw�� PK b�i[h��u "� components/Option/index.jsnu �Iw�� PK b�i[��G�� � 8 �� components/Padded/tests/__snapshots__/index.test.js.snapnu �Iw�� PK b�i[�� % s� components/Padded/tests/index.test.jsnu �Iw�� PK b�i[���PQ Q �� components/Padded/index.jsnu �Iw�� PK b�i[1'5d d u� components/Paging/index.jsnu �Iw�� PK b�i[�[�nH H ? #� components/Picker/tests/__snapshots__/pickerButton.test.js.snapnu �Iw�� PK b�i[�P� h h @ �� components/Picker/tests/__snapshots__/pickerSection.test.js.snapnu �Iw�� PK b�i[�>d�+ + , �� components/Picker/tests/pickerButton.test.jsnu �Iw�� PK b�i[!ń�/ / - 9� components/Picker/tests/pickerSection.test.jsnu �Iw�� PK b�i[���� � ! �� components/Picker/PickerButton.jsnu �Iw�� PK b�i[90� @ @ " �� components/Picker/PickerSection.jsnu �Iw�� PK b�i[��� � � " �� components/Picker/PickerWrapper.jsnu �Iw�� PK b�i[ܦ�q� � X� components/Picker/index.jsnu �Iw�� PK b�i[A�� � 9� components/PrefixIcon/index.jsnu �Iw�� PK b�i[���C C % o� components/Select/tests/index.test.jsnu �Iw�� PK b�i[^s�.: : � components/Select/index.jsnu �Iw�� PK b�i[�vQ� � � components/Separator/index.jsnu �Iw�� PK b�i[��b�� � � components/Table/tests/index.jsnu �Iw�� PK b�i[ρ�A " � components/Table/ActionCollapse.jsnu �Iw�� PK b�i[C�!� � L components/Table/index.jsnu �Iw�� PK b�i[��e � � * Q, components/TableHeader/tests/index.test.jsnu �Iw�� PK b�i[�X�$� � �6 components/TableHeader/index.jsnu �Iw�� PK b�i[�xm ' �@ components/TableRow/tests/index.test.jsnu �Iw�� PK b�i[ �� � � &H components/TableRow/index.jsnu �Iw�� PK b�i[K��r. . 6 S components/Text/tests/__snapshots__/index.test.js.snapnu �Iw�� PK b�i[�g # �T components/Text/tests/index.test.jsnu �Iw�� PK b�i[K�!Ɵ � �U components/Text/index.jsnu �Iw�� PK b�i[-�64 4 ' �[ components/Textarea/tests/index.test.jsnu �Iw�� PK b�i[8�s9 9 l^ components/Textarea/index.jsnu �Iw�� PK b�i[�>�,� � ) �_ components/TimePicker/tests/index.test.jsnu �Iw�� PK b�i[�N�s� � �k components/TimePicker/index.jsnu �Iw�� PK b�i[D�� � % �� components/Toggle/tests/index.test.jsnu �Iw�� PK b�i[T���J J �� components/Toggle/index.jsnu �Iw�� PK b�i[�hQ92 2 @� components/UnknownInput/index.jsnu �Iw�� PK b�i[vߒFF F theme/colors.jsnu �Iw�� PK b�i[I�Q� � G� index.jsnu �Iw�� PK L L R�
| ver. 1.4 |
Github
|
.
| PHP 8.1.33 | Генерация страницы: 0.01 |
proxy
|
phpinfo
|
Настройка