Skip to content
This repository has been archived by the owner on May 2, 2023. It is now read-only.

feat(php-storybook): Converting the php generated story files to CSF - front-1379 #513

Merged
merged 2 commits into from
Jul 31, 2020
Merged

feat(php-storybook): Converting the php generated story files to CSF - front-1379 #513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cb08b73
feat(php-storybook): Converting the php generated story files to CSF …
planctus Jul 29, 2020
4e4b769
Merge branch 'master' into front-1379
planctus Jul 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 61 additions & 1 deletion php/php_storybook/resources/helpers.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/
class storyHelpers {
// Used to prepend a string in a file.
function prepend($string, $orig_filename) {
function prependToStory($string, $orig_filename) {
$context = stream_context_create();
$orig_file = fopen($orig_filename, 'r', 1, $context);

Expand Down Expand Up @@ -88,4 +88,64 @@ function baseComponent($variant) {

return $base_component;
}
// Creates a story.js and links the README file in the given folder.
function createStoryFiles(
$folder,
$base_component,
$adapted_variant,
$variant,
$deprecated_component,
$component_group,
$packages_folder
) {
// Not sure why we needed this, but it's the case.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Useless comment. You need this folder because the configurations expect the story file to be in this folder...

if (!is_dir($folder . DIRECTORY_SEPARATOR . 'story')) {
mkdir($folder . DIRECTORY_SEPARATOR . 'story');
}
// Prepare a folder for the js rendered files.
if (!is_dir($folder . DIRECTORY_SEPARATOR . 'js')) {
mkdir($folder . DIRECTORY_SEPARATOR . 'js');
}
// Get the story template.
$story_template = file_get_contents(__DIR__ . '/../resources/story-template.txt');

// Replace the content with our variables.
$story_content = str_replace(
['#component#', '#componentVariant#', '#phpFileName#', '#deprecated#', '#componentGroup#'],
[ucfirst($base_component), $adapted_variant, $variant, $deprecated_component, $component_group]
, $story_template
);
// Here we createthe story file.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// Here we createthe story file.
// Here we create the story file.

file_put_contents(
$folder . DIRECTORY_SEPARATOR . 'story' . DIRECTORY_SEPARATOR . $base_component . '.story.js',
$story_content, FILE_APPEND | LOCK_EX
);
// Symlink the docs.
$link = $folder . DIRECTORY_SEPARATOR . 'README.md';
$target = $packages_folder . DIRECTORY_SEPARATOR . 'ec-component-' . $base_component . DIRECTORY_SEPARATOR . 'README.md';
if (!file_exists($link) && file_exists($target)) {
symlink($target, $link);
}
}
// Code to import a variant for the story file.
function setImportCode($adapted_variant, $variant, $result_extension) {
$import = "import " . $adapted_variant . " from '../" . $variant . $result_extension . "';\n";
$import .= "import " . $adapted_variant . "Js from '../js/" . $variant . ".js.html';\n";
return $import;
}
// Code to export a story.
function setExportCode($variant_name, $adapted_variant) {
return "export const ". $variant_name . " = () => " . $adapted_variant .";\n\n";
}
// Code to define the story for a given export.
function setStoryCode($variant_name, $adapted_variant) {
return $variant_name . ".story = { parameters: { notes: { markdown: docs }, diff: { jsmarkup: " . $adapted_variant . "Js }}};\n\n";
}
// Update the story file.
function updateStoryFile($folder, $base_component, $data_story) {
file_put_contents(
$folder . DIRECTORY_SEPARATOR . 'story' . DIRECTORY_SEPARATOR . $base_component . '.story.js',
$data_story, FILE_APPEND | LOCK_EX
);
}
}
24 changes: 5 additions & 19 deletions php/php_storybook/resources/story-template.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,11 @@
import { storiesOf } from '@storybook/html';
import { withNotes } from '@ecl-twig/storybook-addon-notes';
import withCode from '@ecl-twig/storybook-addon-code';
import { withDiff } from '@ecl-twig/storybook-addon-diff';
import { withJsCode } from '@ecl-twig/storybook-addon-jscode';
import jsCode from '../js/#phpFileName#.js.html';

import docs from '../README.md';
import #componentVariant# from '../#phpFileName#.php.html';

storiesOf('Components/#deprecated##componentGroup##component#', module)
.addDecorator(withNotes)
.addDecorator(withCode)
.addDecorator(withJsCode)
.addDecorator(withDiff)
.add(
'#phpFileName#',
() => {
return #componentVariant#;
},
{
notes: { markdown: docs },
diff: { jsmarkup: jsCode }
},
)
export default {
title: 'Components/#deprecated##componentGroup##component#',
decorators: [withCode, withNotes, withJsCode, withDiff],
};

85 changes: 37 additions & 48 deletions php/php_storybook/scripts/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,10 @@
// Get the list of data files.
// For each data file the renderer will create an HTML file.
$files = array_slice(scandir($specs_folder), 2);
$data_story = $prepend = '';

foreach ($files as $file_name) {
$data_html = $base_component = $data_story = $prepend = '';
$data_html = $base_component = '';
try {
$variant = str_replace(
'.json',
Expand All @@ -60,61 +61,45 @@
$data_json = json_decode($data_string, TRUE);

if (!empty($data_json)) {
// If it's a modifier we demo it in a folder together with the other variants.
$base_component = $helpers->baseComponent($variant);
// Here we render the template with params.
$data_html = $twig->render($template, $data_json);
// But then we need to fix something...
$data_html = $helpers->fixHtml($data_html, $component, $data_json);
// Create stories files.
$adapted_variant = str_replace('-', '_', $variant);
// We try to collect all the variants in the same story, so if we find one and the story file exist we inject
// the additional story and we prepend the import of the component.
if (file_exists($folder . DIRECTORY_SEPARATOR . 'story' . DIRECTORY_SEPARATOR . $base_component . '.story.js')) {
$prepend = "import " . $adapted_variant . " from '../" . $variant . $result_extension . "';\n";
$prepend .= "import " . $adapted_variant . "Js from '../js/" . $variant . ".js.html';\n";
$data_story = ".add('" . $variant . "', () => { return " . $adapted_variant . "; },";
$data_story .= "{ notes: { markdown: docs }, diff: { jsmarkup: " . $adapted_variant . "Js }})";
} else {
// Not sure why we needed this, but it's the case.
if (!is_dir($folder . DIRECTORY_SEPARATOR . 'story')) {
mkdir($folder . DIRECTORY_SEPARATOR . 'story');
}
// Prepare a folder for the js rendered files.
if (!is_dir($folder . DIRECTORY_SEPARATOR . 'js')) {
mkdir($folder . DIRECTORY_SEPARATOR . 'js');
}
// Get the story template.
$data_story = file_get_contents(__DIR__ . '/../resources/story-template.txt');

// Replace the content with our variables.
$data_story = str_replace(
['#component#', '#componentVariant#', '#phpFileName#', '#deprecated#', '#componentGroup#'],
[$base_component, $adapted_variant, $variant, $deprecated_component, $component_group]
, $data_story
);
}
// Here we create or update the story file.
file_put_contents(
$folder . DIRECTORY_SEPARATOR . 'story' . DIRECTORY_SEPARATOR . $base_component . '.story.js',
$data_story, FILE_APPEND | LOCK_EX
);
// Prepending a string in a file is a bit more clumsy in php.
if (!empty($prepend)) {
$helpers->prepend($prepend, $folder . DIRECTORY_SEPARATOR . 'story' . DIRECTORY_SEPARATOR . $base_component . '.story.js');
}
$data_html_raw = $twig->render($template, $data_json);
$data_html = $helpers->fixHtml($data_html_raw, $component, $data_json);
// Save the rendered html in a file .php.html
file_put_contents(
$folder . DIRECTORY_SEPARATOR . $variant . $result_extension,
$data_html
);
// Symlink the docs.
$link = $folder . DIRECTORY_SEPARATOR . 'README.md';
$target = $packages_folder . DIRECTORY_SEPARATOR . 'ec-component-' . $base_component . DIRECTORY_SEPARATOR . 'README.md';

if (!file_exists($link) && file_exists($target)) {
symlink($target, $link);
$adapted_variant = str_replace('-', '_', $variant);
if ($pos = strpos($adapted_variant, '__')) {
$variant_name = ucfirst(substr($adapted_variant, $pos + 2));
if (ctype_digit(substr($variant_name, 0, 1))) {
$variant_name = substr($variant_name, 2) . '_' . substr($variant_name, 0, 1);
}
} else {
$variant_name = 'Default';
}
// Create the story file if it doesn't exist yet and links the README file.
if (!file_exists($folder . DIRECTORY_SEPARATOR . 'story' . DIRECTORY_SEPARATOR . $base_component . '.story.js')) {
$helpers->createStoryFiles(
$folder,
$base_component,
$adapted_variant,
$variant,
$deprecated_component,
$component_group,
$packages_folder
);
}
// Prepare the data to be added to the story file.
$export_code = $helpers->setExportCode($variant_name, $adapted_variant);
$story_code = $helpers->setStoryCode($variant_name, $adapted_variant);
if ($variant_name === 'Default') {
$data_story = $export_code . $story_code . $data_story;
} else {
$data_story = $data_story . $export_code . $story_code;
}
$prepend .= $helpers->setImportCode($adapted_variant, $variant, $result_extension);
}
} catch (exception $e) {
// Not throwing facilitates continuation.
Expand All @@ -123,5 +108,9 @@
print($e);
}
}
// Here we add the import for the rendered files to the story file.
$helpers->prependToStory($prepend, $folder . DIRECTORY_SEPARATOR . 'story' . DIRECTORY_SEPARATOR . $base_component . '.story.js');
// Here we update the story file with all the variants we've found.
$helpers->updateStoryFile($folder, $base_component, $data_story);
}
}