Storybook: рд╕реНрдЯреЛрд░реАрдмреБрдХ (рдПрдбрдСрди-рдЬрд╛рдирдХрд╛рд░реА рдХреЗ рд╕рд╛рде) + рд╕реНрдЯрд╛рдЗрд▓ рд╡рд╛рд▓реЗ рдШрдЯрдХ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 29 рдЬреВрди 2017  ┬╖  2рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: storybookjs/storybook

рдЕрд░реЗ,

рдореИрдВ рд╡реЗрдм рд░рд┐рдПрдХреНрдЯ рдРрдк рдореЗрдВ рд╕реНрдЯреЛрд░реАрдмреБрдХ (рдЗрдВрдлреЛ рдРрдбрдСрди рдХреЗ рд╕рд╛рде) рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред рдЙрд╕реА рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдкрд░ рдореИрдВ рд╕реНрдЯрд╛рдЗрд▓ рдШрдЯрдХреЛрдВ (https://www.styled-computers.com/) рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред

рдпрд╣рд╛рдБ рд╕рд░рд▓ рдорд╛рдорд▓рд╛ рд╣реИ рдХрд┐ рдореИрдВ рдпрд╣ рдХреИрд╕реЗ рдХрд░ рд░рд╣рд╛ рд╣реВрдБ:

__LayoutHeader.js__

import styled from 'styled-components';

const LayoutHeader = styled.div`
  color: #fff;
  background-color: #000;
`;

export default LayoutHeader;

__LayoutHeader.story.js__

import { storiesOf } from '@storybook/react';
import React from 'react';

import LayoutHeader from './LayoutHeader';

storiesOf('LayoutHeader', module)
.addWithInfo('with text', () => (
  <LayoutHeader>Simple text</LayoutHeader>
));

рд╕рдорд╕реНрдпрд╛ рдпрд╣ рд╣реИ рдХрд┐ рд╕реНрдЯреЛрд░реАрдмреБрдХ рдЗрдВрдлреЛ рдЖрдЙрдЯрдкреБрдЯ рдЗрд╕ рддрд░рд╣ рджрд┐рдЦрддрд╛ рд╣реИ:

download

рдореИрдВ рдХрд┐рд╕реА рднреА рддрд░рд╣ рдХрд╣рд╛рдиреА рд╕рдВрд╕рд╛рдзрд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рддреЛ рдпрд╣ рдХреЗ рд░реВрдк рдореЗрдВ рдХрд╣рд╛рдиреА рдХреА рд╕рд╛рдордЧреНрд░реА renders <LayoutHeader /> рдХреЗ рдмрдЬрд╛рдп <styled.div /> ?

info compatibility with other tools question / support

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдореБрдЭреЗ рдХреНрд╖рдорд╛ рдХрд░реЗрдВ, рдореЗрд░рд╛ рдкреНрд░рд╢реНрди рдмрд╣реБрдд рдЬрд▓реНрджрдмрд╛рдЬреА рдореЗрдВ рдерд╛ред

рд╕рдорд╛рдзрд╛рди рд╣реИ:

__LayoutHeader.js__

import styled from 'styled-components';

const LayoutHeader = styled.div`
  color: #fff;
  background-color: #000;
`;

LayoutHeader.displayName = 'LayoutHeader';
export default LayoutHeader;

рд╕рднреА 2 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдореБрдЭреЗ рдХреНрд╖рдорд╛ рдХрд░реЗрдВ, рдореЗрд░рд╛ рдкреНрд░рд╢реНрди рдмрд╣реБрдд рдЬрд▓реНрджрдмрд╛рдЬреА рдореЗрдВ рдерд╛ред

рд╕рдорд╛рдзрд╛рди рд╣реИ:

__LayoutHeader.js__

import styled from 'styled-components';

const LayoutHeader = styled.div`
  color: #fff;
  background-color: #000;
`;

LayoutHeader.displayName = 'LayoutHeader';
export default LayoutHeader;

@michaltaberski рдЕрдкрдиреЗ рдорд╛рдорд▓реЗ рдХреЛ рд╕рд╛рдЭрд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж!
рд╢рд╛рдпрдж рдпрд╣ рдХрд┐рд╕реА рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧреА рд╣реЛрдЧрд╛!
рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╣рдо рдЗрд╕реЗ рдмрдВрдж рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕