Skip to content

Commit

Permalink
feat: import comonent source block
Browse files Browse the repository at this point in the history
  • Loading branch information
@atanasster
atanasster committed Feb 26, 2020
1 parent 04c986a commit 3d69fe1
Show file tree
Hide file tree
Showing 18 changed files with 725 additions and 528 deletions.
347 changes: 4 additions & 343 deletions blocks/core/src/Source/Source.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
import React from 'react';
import { ControlTypes } from '@component-controls/specification';
import { Source, SourceProps, themes } from './Source';
import { Source, SourceProps } from './Source';

export default {
title: 'Blocks/Source',
component: Source,
};

export const simpleSource = ({ language, children, theme }: SourceProps) => {
return (
<Source language={language} theme={theme}>
{children}
</Source>
);
export const simpleSource = ({ language, source }: SourceProps) => {
return <Source language={language} source={source} />;
};

const languages: string[] = [
Expand Down Expand Up @@ -54,7 +49,7 @@ simpleSource.story = {
parameters: {
controls: {
language: { type: 'options', options: languages, value: 'jsx' },
children: {
source: {
type: 'text',
rows: 10,
value: `
Expand All @@ -70,340 +65,6 @@ export const sample = () => {
};
`,
},
theme: { type: 'options', options: Object.keys(themes) },
},
},
};

export const simplyStoryFn = () => (
<Source
args={[
{
value: [
{
value: 'text',
name: 'text',
loc: {
start: {
line: 0,
column: 3,
},
end: {
line: 0,
column: 7,
},
},
usage: [
{
loc: {
start: {
line: 0,
column: 14,
},
end: {
line: 0,
column: 18,
},
},
},
],
},
],
loc: {
start: {
line: 0,
column: 1,
},
end: {
line: 0,
column: 9,
},
},
},
]}
>
{`({ text }) => text;`}
</Source>
);

export const props = () => {
return (
<Source
args={[
{
value: 'props',
name: 'props',
loc: {
start: {
line: 0,
column: 0,
},
end: {
line: 0,
column: 5,
},
},
usage: [
{
loc: {
start: {
line: 0,
column: 19,
},
end: {
line: 0,
column: 24,
},
},
},
],
},
]}
>
{`props => (<div {...props} />);`}
</Source>
);
};

const code = `({ height, weight, style: { border, color } }) => (
<div height={height} weight={weight} border={border} color={color} />
);
`;

export const multiProps = () => {
return (
<Source
args={[
{
value: [
{
value: 'height',
name: 'height',
loc: {
start: {
line: 0,
column: 3,
},
end: {
line: 0,
column: 9,
},
},
usage: [
{
loc: {
start: {
line: 1,
column: 15,
},
end: {
line: 1,
column: 21,
},
},
},
],
},
{
value: 'weight',
name: 'weight',
loc: {
start: {
line: 0,
column: 11,
},
end: {
line: 0,
column: 17,
},
},
usage: [
{
loc: {
start: {
line: 1,
column: 31,
},
end: {
line: 1,
column: 37,
},
},
},
],
},
{
value: [
{
value: 'border',
name: 'border',
loc: {
start: {
line: 0,
column: 28,
},
end: {
line: 0,
column: 34,
},
},
usage: [
{
loc: {
start: {
line: 1,
column: 47,
},
end: {
line: 1,
column: 53,
},
},
},
],
},
{
value: 'color',
name: 'color',
loc: {
start: {
line: 0,
column: 36,
},
end: {
line: 0,
column: 41,
},
},
usage: [
{
loc: {
start: {
line: 1,
column: 62,
},
end: {
line: 1,
column: 67,
},
},
},
],
},
],
name: 'style',
loc: {
start: {
line: 0,
column: 26,
},
end: {
line: 0,
column: 48,
},
},
},
],
loc: {
start: {
line: 0,
column: 1,
},
end: {
line: 0,
column: 50,
},
},
},
]}
>
{code}
</Source>
);
};

export const controlsValues = () => {
return (
<Source
args={[
{
loc: {
end: {
column: 43,
line: 0,
},
start: {
column: 30,
line: 0,
},
},
name: undefined,
value: [
{
loc: {
end: {
column: 36,
line: 0,
},
start: {
column: 32,
line: 0,
},
},
name: 'name',
usage: [
{
loc: {
end: {
column: 65,
line: 0,
},
start: {
column: 61,
line: 0,
},
},
},
],
value: 'name',
},
{
loc: {
end: {
column: 41,
line: 0,
},
start: {
column: 38,
line: 0,
},
},
name: 'age',
usage: [
{
loc: {
end: {
column: 75,
line: 0,
},
start: {
column: 72,
line: 0,
},
},
},
],
value: 'age',
},
],
},
]}
controls={{
name: { type: ControlTypes.TEXT, value: 'Sam', defaultValue: 'Tom' },
age: { type: ControlTypes.NUMBER, value: 19, defaultValue: 18 },
}}
>
{` export const myStory = ({ name, age }) => <Story name={name} age={age} />;`}
</Source>
);
};
Loading

0 comments on commit 3d69fe1

Please sign in to comment.