Unverified Commit 82e54e4e authored by Tasso Evangelista's avatar Tasso Evangelista
Browse files

Add styled HOC

parent 65454520
......@@ -96,6 +96,7 @@ module.exports = {
],
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars-experimental': 'warn',
'comma-dangle': 'off',
'func-call-spacing': 'off',
'indent': 'off',
'import/order': [
......
......@@ -11,11 +11,12 @@ addParameters({
container: DocsContainer,
page: DocsPage,
},
grid: {
cellSize: 4,
backgrounds: {
grid: {
cellSize: 4,
},
},
options: {
showRoots: true,
storySort: ([, a], [, b]) => a.kind.localeCompare(b.kind),
},
viewport: {
......
if (process.env.NODE_ENV === 'production') {
module.exports = require('../dist/fuselage-hocs.production.js');
} else {
module.exports = require('../dist/fuselage-hocs.development.js');
}
{
"name": "@rocket.chat/fuselage/hocs",
"private": true,
"main": "./hocs.js",
"types": "../dist/hocs/index.d.ts"
}
export { default as styled } from './styled';
import { createElement, FC } from 'react';
import { render } from 'react-dom';
import { act } from 'react-dom/test-utils';
import styled from './styled';
it('injects a className', () => {
let props: Record<string, unknown> = {};
const Component: FC = (_props) => {
props = _props;
return null;
};
const StyledComponent = styled(Component)`
color: red;
`;
act(() => {
render(createElement(StyledComponent), document.createElement('div'));
});
expect(props.className).not.toBeUndefined();
});
it('merges a className', () => {
let props: Record<string, unknown> = {};
const Component: FC<{ className?: string }> = (_props) => {
props = _props;
return null;
};
const StyledComponent = styled(Component)`
color: red;
`;
act(() => {
render(
createElement(StyledComponent, {
className: 'block__element--modifier',
}),
document.createElement('div')
);
});
expect(props.className).toMatch(/^block__element--modifier [^\s]+$/);
});
import { Story } from '@storybook/react';
import React from 'react';
import { styled } from './index';
export default {
title: 'HOCs/styled',
};
const StyledComponent = styled((props) => <div {...props} />)`
width: 100px;
height: 100px;
background-image: linear-gradient(to left, red, green, blue);
`;
const styledStory: Story = () => <StyledComponent />;
styledStory.storyName = 'styled';
export { styledStory as styled };
import { css } from '@rocket.chat/css-in-js';
import { ComponentType, createElement, FC } from 'react';
import { appendClassName } from '../helpers/appendClassName';
import { useStyle } from '../hooks/useStyle';
type PropsWithClassName = {
className?: string;
};
const styled = <P extends PropsWithClassName>(component: ComponentType<P>) => (
slices: TemplateStringsArray,
...values: unknown[]
): ComponentType<P> => {
const style = css(slices, ...values);
const StyledComponent: FC<P> = (props) => {
const className = useStyle(style, props);
return createElement(component, {
...props,
className: appendClassName(props.className, className),
});
};
StyledComponent.displayName = `styled(${
component.name ?? component.displayName ?? 'Component'
})`;
return StyledComponent;
};
export default styled;
......@@ -7,7 +7,8 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = (env, { mode = 'production' }) => ({
entry: {
fuselage: path.resolve(__dirname, 'src/index.ts'),
'fuselage': path.resolve(__dirname, 'src/index.ts'),
'fuselage-hocs': path.resolve(__dirname, 'src/hocs/index.ts'),
},
output: {
filename: `[name].${mode}.js`,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment