feat(Twig): twig loading added, Ilustrations added, Figma preview added

wfp · Apr 12, 2021 · 4a64ddb · 4a64ddb
1 parent a8c98b2
commit 4a64ddb
Show file tree

Hide file tree

Showing 15 changed files with 166 additions and 105 deletions.
diff --git a/.storybook/addon-wfp/index.js b/.storybook/addon-wfp/index.js
diff --git a/.storybook/addon-wfp/register.js b/.storybook/addon-wfp/register.js
diff --git a/.storybook/blocks/Preview.tsx b/.storybook/blocks/Preview.tsx
@@ -95,13 +95,20 @@ const getPreviewProps = (
 };
 
 export const Preview: FC<PreviewProps> = (props) => {
+  console.log('props', props);
   const docsContext = useContext(DocsContext);
   const sourceContext = useContext(SourceContext);
   const previewProps = getPreviewProps(props, docsContext, sourceContext);
   const { children } = props;
+
+  console.log('waaahh', docsContext, previewProps);
   return (
     <MDXProvider components={resetComponents}>
-      <PurePreview {...previewProps} storyComponent={props.storyComponent}>
+      <PurePreview
+        docsContext={docsContext}
+        sourceContext={sourceContext}
+        {...previewProps}
+        storyComponent={props.storyComponent}>
         {children}
       </PurePreview>
     </MDXProvider>

diff --git a/.storybook/blocks/PurePreview.tsx b/.storybook/blocks/PurePreview.tsx
@@ -19,6 +19,7 @@ import { Toolbar } from '@storybook/components/dist/esm/blocks/Toolbar';
 
 import ReactDOMServer from 'react-dom/server';
 import pretty from 'pretty';
+import { twig } from 'twig';
 
 export interface PreviewProps {
   isColumn?: boolean;
@@ -113,11 +114,19 @@ const getSource = (
 
     case expanded === 'twig': {
       const html = parameters.twig ? parameters.twig : 'not found';
+
+      const htmlSourceCode = parameters.docs.source
+        ? withSource.code
+        : `// @wfp/ui/src/components/${name}/${name}.twig
+
+${pretty(html)}`;
+
       const htmlSource = {
-        code: pretty(html),
+        code: htmlSourceCode,
         dark: false,
         language: 'jsx',
       };
+
       return {
         source: <StyledSource {...htmlSource} dark />,
         actionItem: { title: 'react', onClick: () => setExpanded(true) },
@@ -158,7 +167,6 @@ const getSource = (
 
     case expanded: {
       let a = '';
-
       if (subcomponents)
         Object.keys(subcomponents).forEach((element) => {
           a = `${a}, ${element}`;
@@ -253,6 +261,8 @@ const Preview: FunctionComponent<PreviewProps> = ({
   isExpanded = false,
   className,
   storyComponent,
+  docsContext,
+  sourceContext,
   subcomponents,
   parameters,
   ...props
@@ -268,6 +278,7 @@ const Preview: FunctionComponent<PreviewProps> = ({
     subcomponents,
     parameters
   );
+
   const [scale, setScale] = useState(1);
   const previewClasses = className
     ? `${className} sbdocs sbdocs-preview`
@@ -282,6 +293,7 @@ const Preview: FunctionComponent<PreviewProps> = ({
   if (parameters.code !== false) actionItems.push(actionItem);
   if (parameters.twig) actionItems.push(actionItemtwig);
   if (parameters.html !== false) actionItems.push(actionItemHtml);
+
   return (
     <PreviewContainer
       {...{ withSource, withToolbar: showToolbar }}
@@ -298,7 +310,15 @@ const Preview: FunctionComponent<PreviewProps> = ({
       )}
       <Relative>
         <ChildrenContainer isColumn={isColumn} columns={columns}>
-          {Array.isArray(children) ? (
+          {expanded === 'twig' ? (
+            <div
+              dangerouslySetInnerHTML={{
+                __html: twig({ data: parameters.twig }).render(
+                  docsContext.args
+                ),
+              }}
+            />
+          ) : Array.isArray(children) ? (
             children.map((child, i) => <div key={i.toString()}>{child}</div>)
           ) : (
             <Scale scale={scale}>{children}</Scale>

diff --git a/.storybook/blocks/Story.tsx b/.storybook/blocks/Story.tsx
@@ -51,7 +51,6 @@ export const getStoryProps = (
     ? context.storyStore.fromId(previewId) || {}
     : {};
   const { height, inline } = props;
-
   const {
     storyFn = undefined,
     name: storyName = undefined,

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -7,9 +7,7 @@ module.exports = {
   },
   stories: ['../src/**/*.stories.(js|mdx)'],
   addons: [
-    //'/.storybook/addon-wfp/register',
-    //'./localAddon/register.tsx',
-    //'./localAddon/preset.ts',
+    'storybook-addon-designs',
     '@storybook/addon-docs',
     '@storybook/addon-toolbars',
     '@storybook/addon-viewport',

diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
@@ -115,10 +115,10 @@
 }
 
 .docs-divider {
-    border: 0 none;
-    border-top: 1px solid rgba(0,0,0,.1);
-    height: 4px;
-    padding: 0;
+  border: 0 none;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  height: 4px;
+  padding: 0;
 }
 
 .table-of-content.wfp--list {
@@ -135,6 +135,10 @@
   //margin-left: calc((-100vw - 100%) / 2);
 }
 
+.docblock-source {
+  margin: 0 !important;
+}
+
 /*.sticky-preview {
   position: relative;
   z-index: 1;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -104,6 +104,7 @@
   "dependencies": {
     "invariant": "^2.2.4",
     "react-popper-tooltip": "^4.1.0",
+    "storybook-addon-designs": "^6.0.0-alpha.3",
     "warning": "^4.0.3",
     "window-or-global": "^1.0.1"
   },
@@ -226,7 +227,7 @@
     "story-description-loader": "^1.0.0",
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^4.0.0",
-    "twig": "^1.15.2",
+    "twig": "^1.15.4",
     "validate-commit-msg": "^2.14.0",
     "wcag-contrast": "^3.0.0",
     "webpack": "^4.44.1",

diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js
@@ -1,12 +1,9 @@
 import React from 'react';
-
 import { buttonKinds } from '../../prop-types/types';
-
 import { iconAddGlyph } from '@wfp/icons';
-
 import markdown from './README.mdx';
 import buttonTwig from './Button.twig';
-
+import { twig } from 'twig';
 import Button from '.';
 
 export default {
@@ -22,10 +19,18 @@ export default {
 };
 
 export const ButtonRegular = (args) => <Button {...args} />;
+
 ButtonRegular.args = {
   children: 'Button',
 };
 
+ButtonRegular.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/jtKqyyMTOKgUTstiGvPZMl/?node-id=0%3A1',
+  },
+};
+
 export const ButtonKind = (args) => (
   <>
     {buttonKinds.map((e) => (

diff --git a/src/components/Button/Button.twig b/src/components/Button/Button.twig
@@ -1 +1 @@
-<a class="wfp--btn" href="{{ url }}">{{ label }}</a>
+<a class="wfp--btn wfp--btn--{{ kind }} {{ small ? 'wfp--btn--sm' }}" href="{{ href }}">{{ children }}</a>
diff --git a/src/components/Module/_module.scss b/src/components/Module/_module.scss
@@ -31,6 +31,7 @@
         0px 25px 30px -15px rgba(#000000, 0.1);
       background-color: var(--ui-01);
       border-radius: 3px;
+      width: 100%;
     }
 
     .#{$prefix}--module__header {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<a class="wfp--btn" href="{{ url }}">{{ label }}</a>
		<a class="wfp--btn wfp--btn--{{ kind }} {{ small ? 'wfp--btn--sm' }}" href="{{ href }}">{{ children }}</a>