= ({ theme, children }) => (
8 |
12 |
Test Component 😢
13 | {children}
14 |
15 | );
16 |
--------------------------------------------------------------------------------
/src/components/TestComponent/TestComponent.module.scss:
--------------------------------------------------------------------------------
1 | .test-component {
2 | background-color: white;
3 | border: 1px solid black;
4 | padding: 16px;
5 | width: 360px;
6 | text-align: center;
7 |
8 | &.test-component-secondary {
9 | background-color: black;
10 | color: white;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/TestComponent/TestComponent.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Story, Meta } from '@storybook/react';
3 |
4 | import TestComponent from '.';
5 | import { TestComponentProps } from './TestComponent.types';
6 |
7 | export default {
8 | title: 'TestComponent',
9 | component: TestComponent,
10 | } as Meta;
11 |
12 | const Template: Story = (args) => ;
13 |
14 | export const Default = Template.bind({}) as Story;
15 | Default.args = {
16 | theme: 'primary',
17 | };
18 |
19 | export const Secondary = Template.bind({});
20 | Secondary.args = {
21 | theme: 'secondary',
22 | children: 'Mama',
23 | };
24 |
--------------------------------------------------------------------------------
/src/components/TestComponent/TestComponent.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render, screen } from '@testing-library/react';
3 |
4 | import TestComponent from '.';
5 |
6 | describe('', () => {
7 | it('should have primary className with default props', () => {
8 | render();
9 | const testComponent = screen.getByTestId('test-component');
10 | expect(testComponent).toHaveClass('test-component-primary');
11 | });
12 |
13 | it('should have secondary className with theme set as secondary', () => {
14 | render();
15 | const testComponent = screen.getByTestId('test-component');
16 | expect(testComponent).toHaveClass('test-component-secondary');
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/src/components/TestComponent/TestComponent.types.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export type TestComponentProps = {
4 | /**
5 | * Theme colors
6 | */
7 | theme: 'primary' | 'secondary';
8 | children?: React.ReactNode;
9 | };
10 |
--------------------------------------------------------------------------------
/src/components/TestComponent/index.ts:
--------------------------------------------------------------------------------
1 | export { TestComponent as default } from './TestCompoenent';
2 |
--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export { default as TestComponent } from './TestComponent';
2 | export { default as Button } from './Button';
3 |
--------------------------------------------------------------------------------
/src/declarations.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.scss' {
2 | const content: { [className: string]: string };
3 | export = content;
4 | }
5 |
--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 | @import './normalize';
3 |
4 | html {
5 | font-size: 62.5%;
6 | }
7 |
8 | body {
9 | font-size: 1.6rem;
10 | }
11 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "declaration": true,
4 | "declarationDir": "dist",
5 | "module": "esnext",
6 | "target": "es5",
7 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
8 | "jsx": "react",
9 | "moduleResolution": "node",
10 | "allowSyntheticDefaultImports": true,
11 | "esModuleInterop": true,
12 | "noImplicitReturns": true,
13 | "noUnusedParameters": true,
14 | "resolveJsonModule": true,
15 | "skipLibCheck": true
16 | },
17 | "include": ["src/**/*"],
18 | "exclude": [
19 | "node_modules",
20 | "build",
21 | "src/**/*.stories.tsx",
22 | "src/**/*.test.tsx",
23 | "src/utils"
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------