Saat ini, kami tidak memiliki rencana untuk menerapkan itu. Itu karena membuat navigasi lebih sulit. Anda dapat memberi nama jenis cerita dengan titik seperti "ui.core", "ui.app". Kemudian Anda dapat memfilternya sesuai kebutuhan.

Jika ada banyak cerita, Anda dapat memulai beberapa contoh buku cerita. Anda dapat melakukannya dengan memiliki dua direktori konfigurasi buku cerita. Tapi, bagaimanapun itu adalah kasus ekstrim.

Saya bersedia mengakui hal ini, dan berpikir saya hanya akan membuat konfigurasi yang berbeda dan menjalankannya pada port yang berbeda dan yang lainnya ...

Tapi saya pikir akan jauh lebih baik untuk mengizinkan buku cerita mengambil beberapa file konfigurasi ... dan kemudian beralih di antara file konfigurasi bernama, mungkin memuat ulang ...

Adapun UI untuk beralih konfigurasi, itu hanya akan muncul jika file konfigurasi Anda "memuat" file konfigurasi lain, dan itu bisa berupa item bilah sisi di bagian atas atau bawah navigasi bilah sisi.

Bagaimanapun - saya pikir untuk aplikasi yang lebih besar, jika Anda tidak dapat (atau tidak) membagi konfigurasi, itu agak gila.

Menambahkan konfigurasi tambahan tampaknya terlalu rumit. Bagaimana dengan sakelar untuk tampilan klasik/hierarki? Saya senang meluncurkan implementasi selama beberapa hari ke depan.

Ini akan menjadi fitur yang sangat berharga bagi saya juga, tetapi untuk pengaturan jenis komponen dalam satu aplikasi daripada untuk beberapa aplikasi.

Saya akan dengan senang hati memberikan bantuan apa pun dalam membentuk implementasi yang dapat bekerja untuk kedua kasus penggunaan jika ini dapat bergerak maju.

@travi Salah satu ide kami yang lain adalah menyediakan menu tarik-turun tepat di bawah kotak filter untuk memilih kategori.

Sebuah kategori ditetapkan dalam config.js dan kumpulan file yang berbeda. Jadi, kita dapat memiliki lapisan pengelompokan lain.

Saya pikir jenis solusi itu akan cukup untuk memenuhi kebutuhan saya saat ini. Selain itu, saya pikir konvensi namespace yang disebutkan di atas masih bisa menjadi cara yang masuk akal untuk menetapkan kategori yang dapat ditafsirkan ke dalam pilihan di drop down. Solusi semacam itu akan memungkinkan penautan lintas kategori tetap sederhana juga.

Cara kita menyiasatinya di aplikasi yang saya buat (ratusan komponen, diatur di dalam area "pilar" yang longgar) adalah dengan skrip yang secara dinamis menulis cerita untuk area yang sedang kami kerjakan.

find.file(
  /\.story\.js/,
  path.resolve(__dirname, '../src/app/components', targetComponentPath),
  function(files) {
    var requires = files.map(function(file) {
      return "require('" + path.relative(__dirname, file) + "');";
    });
    fs.writeFileSync(path.resolve(__dirname, '../.storybook/stories.js'), requires.join("\n"));
  }
);

Ini berarti bahwa Storybook bahkan tidak perlu membangun komponen lainnya. Saya akan menyukai beberapa tingkat dukungan untuk ini sebagai opsi bawaan.

201 dapat membantu dalam hal ini.

ada pembaruan untuk yang satu ini?

+1

Saya yakin itu fitur yang sangat berguna!

+1

+1

+1

+1

+1

+1

Hai @arunoda , apakah ada kemajuan dalam implementasi kategori?

Jika tidak, apakah ada orang lain yang memiliki contoh aplikasi yang beralih di antara dua konfigurasi buku cerita?

+1 Saya benar-benar membutuhkan satu tingkat tambahan untuk bersarang :/

+1

+1

+1

+1

+1

+1

sepertinya saat aplikasi Anda berkembang, daftar komponen juga bertambah, dan Anda perlu lebih banyak bersarang. 1 level lagi sudah mencakup banyak kasus

+1

Hai teman-teman!

Terlepas dari kenyataan bahwa fitur seperti itu tidak direncanakan dalam waktu dekat, ini tidak berarti bahwa kita tidak bisa mendapatkan perilaku seperti itu melalui Storybook Addons API

Berikut ini adalah addon tersebut:

Bab Buku Cerita

Menambahkan level bersarang tanpa batas untuk (sub) cerita

Untuk menambahkan satu level lagi, cukup masukkan .chapter(name) ke cerita Anda:

// stories.js:

storiesOf('React App', module)
    .chapter('Left panel')
        .add('Button 1', fn(1))
        .add('Button 2', fn(2))
        .chapter('Bottom Panel')
            .add('Input 3', fn(3))
            .add('Input 4', fn(4))
            .endOfChapter()
        .chapter('Header Panel')
            .add('Input 5', fn(5))
            .add('Input 6', fn(6))
            .endOfChapter()
        .endOfChapter()
    .chapter('Right panel')
        .add('Button 7', fn(7))
        .add('Button 8', fn(8))
        .endOfChapter()

Fitur

• Struktur hierarki Substories
• Kompatibel dengan Knobs , addWithInfo dan add-on lainnya
• Gunakan storyDecorator untuk membungkus semua bab

Halaman demo

Proyek

Contoh

Umpan balik apa pun akan sangat dihargai! :)

@UsulPro Bagus!

@UsulPro Storybook Chapters adalah solusi yang brilian. Terima kasih!

@UsulPro tampaknya persis seperti yang saya cari, terima kasih!

Halo semua! Tidak mencoba bersaing dengan @UsulPro (yang melakukan pekerjaan luar biasa dengan storybook-chapters ), tetapi saya menemukan solusi kecil yang sedikit berbeda yang memungkinkan Anda untuk beralih di antara berbagai pengelompokan cerita dengan tombol di preview jendela. Ini berguna bagi kami khususnya karena kami ingin dapat beralih dengan mudah antara semacam related components view ala dokumentasi bootstrap dan detailed components view ala buku cerita apa yang cocok dan kami memiliki banyak komponen untuk dipamerkan. Saya akan menganggap ini sebagai versi ringan dari menyiapkan beberapa contoh buku cerita:

Jika bermanfaat bagi Anda, Anda dapat memeriksanya di sini - https://github.com/majapw/storybook-addon-toggle

Saya membangun storybook-chapters @UsulPro yang luar biasa untuk membuat pemuat buku cerita yang akan mencerminkan hierarki file komponen Anda sebagai bab Buku Cerita: buku cerita-filepath-bab

Dengan ini, saya dapat meletakkan cerita saya di file atau folder _stories tepat sejajar dengan komponen saya. Loader menemukan semua file cerita dan memetakannya ke dalam struktur navigasi yang sesuai.

Terima kasih atas tanggapan hangatnya, teman-teman!

Sangat keren untuk melihat @hadfieldn 's storybook-filepath-chapters ! 👍

Saya suka storybook-addon-toggle sebagai contoh, yang diinginkan untuk memiliki kemungkinan untuk membangun hierarki tidak hanya secara mendalam tetapi juga di atas. Sebenarnya, secara teknis itu mungkin, tetapi saya pikir sulit untuk memilih cara terbaik (tetap dalam addons API). Mungkin ini bisa dilakukan dengan menggunakan dekorator (seperti @majapw) atau melalui panel tambahan.

Saya belum berencana untuk menambahkan hierarki di atas cerita, tetapi storybook-chapters addon sekarang memiliki API , yang dapat menyederhanakan konstruksi hierarki seperti itu:

enable / disable untuk menampilkan/menyembunyikan cerita Anda

-

tambahkan enable() / disable() ke cerita Anda. Sebagai argumen, tentukan panggilan balik ke mana fungsi kontrol akan ditransfer.

let toLight = () => {};
let toDark = () => {};

storiesOf('Heroes Lightside', module)
    .enable((en) => { toLight = en; })
    .add('Yoda', info('Yoda'))
    .add('Mace Windu', info('Mace Windu'));

storiesOf('Heroes Darkside', module)
    .disable((en) => { toDark = en; })
    .add('Darth Sidious', info('Darth Sidious'))
    .add('Darth Maul', info('Darth Maul'));

maka Anda dapat menggunakan toLight(false) untuk menyembunyikan Heroes Lightside dan toDark(true) untuk menampilkan cerita Heroes Darkside . Anda mungkin ingin memasukkan toLight dan toDark ke beberapa dekorator atau mungkin untuk menelepon balik dari cerita lain. Saya akan menunjukkan contoh paling sederhana yang mungkin:

storiesOf('Choose Your Side', module)
    .add('Lightside', () => {
        toLight();
        toDark(false);
        return (<div>{'Lightside selected'}</div>);
    })
    .add('Darkside', () => {
        toDark();
        toLight(false);
        return (<div>{'Darkside selected'}</div>);
    });

Jadi sekarang kami memiliki 3 set cerita: Choose Your Side , Heroes Lightside dan Heroes Darkside . Dari dua yang terakhir, hanya satu yang terlihat dan yang pertama memungkinkan Anda untuk beralih.

dalam rilis berikutnya saya berencana untuk menambahkan kemampuan untuk mengontrol visibilitas cerita melalui panel tambahan yang dapat disesuaikan

-

Dengan fitur aktifkan/nonaktifkan Anda dapat membuat navigasi khusus dengan logika pilihan Anda.

contoh lengkapnya disini

Kami akan menerapkan browser hierarki, tetapi akan menyukai konsep bagaimana menurut komunitas itu harus dilakukan:

• UX bijaksana
• Cara mengonfigurasi grup

Dari segi UX, saya suka ide ini: http://multi-level-Push-menu.make.rs/demo/basichtml/basichtml.html

Konfigurasi Saya belum tahu.. Kita bisa menggunakan eksplorasi file dan mencerminkan sistem file, atau kita bisa melakukan sesuatu seperti ini: https://github.com/sm-react/storybook-chapters/issues/1#issue -215446017

@ndelangen sudahkah Anda memikirkan (setidaknya opsional?) Memungkinkan navigasi didefinisikan di luar cerita? Tampaknya bagi saya bahwa mungkin ada nilai dalam memperlakukan tampilan cerita (area pratinjau / iframe) dan bagaimana Anda ingin mengatur penjelajahan (pengelola) sebagai masalah terpisah.

@jackmccloy Saya tertarik, dapatkah Anda memberi tahu saya lebih banyak tentang apa yang Anda maksud?

saya telah menyebutkan dalam masalah yang berbeda, tetapi target saya dengan kategori adalah menyelaraskan sebagian besar dengan desain atom . lab pola adalah pendekatan panduan gaya resmi untuk desain atom, tetapi menambahkan kategori ke buku cerita akan mengisi celah terakhir yang tersisa.

saya sudah mengatur komponen saya di folder tingkat atas untuk kategori tersebut, jadi dapat memuat komponen ke dalam kategori berdasarkan folder tingkat atas akan menjadi hal yang hebat untuk pemotretan juga.

@travi Bisakah Anda memberi saya cetakan tata letak folder Anda?

Saya benar-benar tertarik untuk meningkatkan buku cerita untuk tujuan yang tepat ini, Tapi saya tertarik apa yang secara teknis diperlukan untuk membaca kategorisasi ini dari struktur folder Anda.

dasarnya

project root
|
+--
|  +-- atoms
|  |  +-- foo
|  |    +-- index.js // the component
|  |    +-- stories.js
...
|  +-- molecules
|  |  +-- bar
|  |    +-- index.js
|  |    +-- stories.js
...
|  +-- organisms
|  |  +-- baz
|  |    +-- index.js
|  |    +-- stories.js

Apakah itu membantu? saya memiliki beberapa komponen di bawah setiap folder tingkat atas, terkadang dikelompokkan lebih lanjut oleh tingkat folder lain. senang untuk memberikan detail lebih lanjut jika itu akan membantu

ok, jadi yang bisa kita lakukan adalah mengatur flag di config.js . sesuatu seperti autoDiscoverStories atau lebih. Yang berarti Anda tidak perlu mengimpor cerita secara manual, dan folder sistem file akan digunakan sebagai kategori.

@ndelangen Saya kira apa yang saya pikirkan adalah ini: saat ini, percakapan kami adalah tentang "bagaimana kami membuat navigasi lebih baik", tetapi mengasumsikan bahwa akan ada satu navigasi yang akan digunakan semua orang. Saya merasa bahwa mungkin ada baiknya berbicara tentang cara membuat navigasi dapat diperluas, dengan cara yang mirip dengan bagaimana add-on memperluas fungsionalitas cerita itu sendiri.

Satu kemungkinan:
Saat ini, setiap cerita ditambahkan dalam dua langkah - langkah pertama di mana kategori ditetapkan, dan langkah kedua di mana judul ditetapkan, yaitu

storiesOf('storyCategory', module).add('storyTitle', () => <Component />)

Anda dapat menambahkan beberapa cerita ke kategori yang sama, tetapi struktur membatasi fleksibilitas sampai batas tertentu - semua cerita harus memiliki kategori dan judul, dan kategori adalah "tingkat yang lebih tinggi" daripada judul.

Tetapi jika cerita dapat didefinisikan dengan cara yang sedikit berbeda, yaitu

const storyData = {
  category: "category",
  title: "storyTitle",
}
stories.add(() => <Component />, storyData)

kita bisa bereksperimen dengan pilihan navigasi yang berbeda dengan lebih mudah.

Navigasi default bisa tetap apa adanya. Ini adalah default yang waras, dan mungkin bekerja cukup baik untuk sebagian besar dari kita. storyData bahkan bisa menjadi opsional - cerita tanpa kategori dapat muncul di tingkat atas, dan cerita tanpa judul dapat menjadi displayName dari komponen.

Namun komunitas dapat bereksperimen dengan berbagai cara mengatur cerita mereka dengan (a) menambahkan bidang metadata tambahan ke stroyData dan/atau (b) mengubah cara panel navigasi merender berdasarkan bidang metadata.

Beberapa ide:

// add an additional level to the hierarchy called subCategory
const stroyData = {
  category: "Buttons",
  subCategory: "Blue",
  title: "BlueButton",
}
stories.add(() => <BlueButton />, storyData)

// add tags to a story that you could then filter by
const stroyData = {
  category: "Buttons",
  tags: ["button", "homepage"],
  title: "HomepageButton",
}
stories.add(() => <HomepageButton />, storyData)

// have a story to appear in multiple categories
const stroyData = {
  categories: ["Buttons", "Homepage Elements"],
  title: "HomepageButton",
}
stories.add(() => <HomepageButton />, storyData)

Bagus! itu cukup out of the box, dan memang bisa diperluas. Aku akan memikirkan ini sebentar. 🤔

Luar biasa. Beri tahu saya apa yang Anda putuskan - Saya akan mengajukan di mana saya bisa terlepas dari arah mana yang Anda pilih - penggemar berat proyek ini

Proposal @jackmccloy bagus, terima kasih atas idenya yang keren!

Namun, tampaknya mencegah satu kasus penggunaan yang kuat untuk Buku Cerita yang memikirkan UI sebagai serangkaian "kasus uji visual" dan dengan mudah mendefinisikan status UI sebagai cerita individual menggunakan panggilan add() per status.

Mendaftarkan metadata cerita dalam panggilan add() terasa seperti menambahkan kategori pada level yang salah. Saya ingin melihat proposal yang sama, tetapi menggunakan fungsi storiesOf() :

storiesOf({
  title: Component,
  category: "My Category"
}, module)
  .add("when empty", () => <List items=[] />)
  .add("with items", () => <List items=["one", "two", "three"] />)
  .add("etc.", () => <List items={etc} />);

Saya suka ide untuk mengambil judul dari Component.displayName dan semua ide lain tentang sub-kategori atau menambahkan komponen ke beberapa kategori, saya hanya ingin mempertahankan kesederhanaan menambahkan status.

satu hal yang perlu diingat, di mana pun kategori didefinisikan, adalah file lain harus dapat ditambahkan ke kategori. jika kategori hanya dapat didefinisikan dari satu file, saya pikir itu akan sangat membatasi

Saya setuju @travi - itu sebabnya kategori hanya menjadi string (yang saya bayangkan akan dipetakan ke beberapa kunci kamus) menarik.

Saya membayangkan bahwa saya dapat mendefinisikan kategori saya di satu tempat untuk mencegah kesalahan ketik seperti:

// categories.js
export const Layouts = "Layouts";
export const Components = "Components";
export const Styles =  "Styles";

// DashboardLayout.story.js
import { Layouts } from "../categories";
import DashboardLayout from "./DashboardLayout";

storiesOf({
  title: DashboardLayout,
  category: Layouts
}, module)
  .add("default", () => <DashboardLayout />);

tapi itu akan menjadi detail implementasi yang diserahkan ke aplikasi saya.

@theinterned @jackmccloy Saya suka saran Anda.

Saya sedang memikirkan bagaimana Anda dapat menggunakan saran Anda dalam hierarki kedalaman yang sewenang-wenang. Mungkin alih-alih category / subCategory bisa jadi path dengan larik komponen jalur. (Saya tahu Anda tidak bermaksud spesifik di sana, hanya membahas ide-ide Anda.)

Saya juga menyukai gagasan opsi konfigurasi untuk menggunakan sistem file untuk membuat hierarki nav. Dengan opsi ini diaktifkan, argumen path akan menjadi opsional.

Ini lebih merupakan tujuan peregangan, tetapi mungkin baik untuk setiap halaman cerita dalam hierarki untuk dimuat sebagai potongan terpisah, untuk menjaga buku cerita tetap ringan saat semakin besar. Juga akan keren untuk mengizinkan pemuat buku cerita berjalan dengan folder sistem file tertentu sebagai konteks root, sehingga itu bisa membangun buku cerita dengan hanya cerita yang ditentukan dalam folder itu daripada semua cerita di seluruh proyek.

Apa pendapat Anda tentang mendefinisikan/mendaftarkan kategori di depan dalam konfigurasi Anda?

// config.js
import { configure, addCategory } from '@kadira/storybook';

function init() {
  require('../src/stories');
  addCategory({
    id: 'atom',
    name: 'Atoms',
    index: 0
  });
  addCategory({
    id: 'molecule',
    name: 'Molecules',
    index: 1
  })
}

configure(init, module);

// component.story.js
import Component from "./Component";

storiesOf({
  title: Component,
  category: 'atom'
}, module)
  .add("default", () => <DashboardLayout />);

Kami juga dapat mendukung array: category: ['atom', 'deprecated'] , mengapa tidak?

Ini akan membantu memastikan kategori ditempatkan dalam urutan yang benar, yang penting dalam desain atom.

Mengambil kategori dari konfigurasi akan menyenangkan, string ajaib buruk

itu masuk akal bagi saya.

juga, +1 untuk menarik kategori untuk cerita dari apa yang didefinisikan dalam konfigurasi daripada berharap untuk mencocokkan string

@ndelangen mendefinisikan kategori di depan sehingga kami dapat mengontrol pemesanan akan menjadi BESAR! Tapi saya pikir penting untuk membuatnya sehingga kategori _can_ didefinisikan dalam konfigurasi, bukan _harus_ didefinisikan di sana.

Satu hal yang saya sukai dari Storybook adalah saya dapat mengetahui apakah suatu komponen ada di dalam Storybook atau tidak hanya dengan memeriksa apakah ada file story.jsx ditempatkan bersama dengan komponen tersebut. Jaminan itu -
bahwa jika file story.jsx ada, sebuah cerita ada - adalah hal penting yang tidak boleh dibatalkan oleh kategori yang telah ditentukan sebelumnya, imo.

Dari tampilan itu, membutuhkan id dan index untuk kategori dalam konfigurasi bahkan mungkin tidak diperlukan - sesuatu seperti ini (dengan asumsi menggunakan plugin opsi) dapat berfungsi

setOptions({
  categoryOrder: [
    "First Category",
    "Second Category",
    "Third Category",
});

di mana First Category , Second Category , dan Third Category dijamin akan muncul pertama, kedua, dan ketiga, dan kategori lain yang dinyatakan dalam cerita akan muncul menurut abjad setelah ketiganya.

Pendekatan ini juga bisa menjadi cara cerdas untuk mengontrol sarang sewenang-wenang, dengan melakukan sesuatu seperti ini:

categoryOrder: [
  {
    "Atoms": [
      {
        "Buttons": []
      }
    ],
  }, {
    "Molecules": [],
}],

Cerita dengan kategori "Tombol" akan muncul di dalam Atoms -> Buttons . Cerita dengan kategori "Atom" akan muncul di dalam Atoms , di bawah Buttons (tetapi tidak di dalamnya), dll.

Pengguna akan mendapatkan satu tingkat kedalaman tanpa konfigurasi apa pun (seperti sekarang), dan tingkat kedalaman yang berubah-ubah dengan konfigurasi minimal. Yang penting, itu akan menjadi kategori yang memiliki kedalaman (ditetapkan pada tingkat konfigurasi) daripada cerita itu sendiri (yaitu cerita hanya akan mengatur kategorinya - mereka tidak akan menentukan di mana kategori itu muncul dalam hierarki).

@theinterned Saya setuju dengan Anda tentang: perlu menjaga kesederhanaan menambahkan status. Saya tidak memikirkan itu, mungkin karena saya menggunakan tombol-tombol addon berat. Jadi bagi saya, saya mencoba untuk memiliki hubungan 1-1 antara komponen dan cerita, dan judul cerita saya deskriptif komponen daripada deskriptif keadaan komponen tersebut.

Salah satu solusi potensial yang mungkin berhasil untuk kedua kasus penggunaan adalah melakukan sesuatu seperti ini

const storyData = {
  category: "category",
  title: "first item",
}
stories.add(() => <Component />, storyData)
  .add(() => <Component />, {title: "second item"})
  .add(() => <Component />, {title: "third item"})

di mana (a) urutan cerita dapat dikontrol dari tempat mereka dideklarasikan (sebagai lawan dari memerlukan konfigurasi eksternal) dan (b) param storyData dapat mempertahankan objek sebelumnya, hanya menimpa nilai yang secara eksplisit dilewatkan.

Hanya pemikiran saja.

sementara saya akan senang dengan bahkan hanya kategori tingkat atas, jika semuanya berjalan cukup jauh untuk mendukung kategori bersarang, perlu dicatat bahwa tidak aman untuk berasumsi bahwa nama kategori akan unik di antara kategori yang berbeda.

melanjutkan contoh desain atom, adalah umum untuk memiliki subkategori dengan nama yang sama di setiap kategori atom, molekul, dan organisme tingkat atas. dalam demo lab pola , formulir adalah contoh yang bagus untuk ini. elemen bidang individu tercantum di bawah atom, kombinasi bidang dan label tercantum di bawah molekul, dan beberapa bidang yang dikelompokkan sebagai bentuk lengkap ditunjukkan di bawah organisme.

Pemikiran yang menarik adalah untuk mempertimbangkan bagaimana jika kategori dapat didefinisikan dengan panggilan balik yang mendapatkan judul, cerita dan jalur ke file cerita ... dan juga beberapa meta data yang dapat diteruskan pengguna untuk mengonfigurasi panggilan balik.

storyData = {
  title: Component,
  category: ({ title, story, storyPath, meta }) => someCategoryPath,
  meta: { ..whateverMeta }
}

Satu-satunya persyaratan adalah bahwa panggilan balik perlu mengembalikan objek yang mendefinisikan jalur kategori ke cerita:

storyData.category() //=> returns the below array

// a simple category path might look like:
[ "One category" ];

// The path for a story nested three categories deep would look like:
[ "Parent Category",  "Child Category", "Grandchild category where the story lives" ];

Ini akan memungkinkan orang untuk menulis sistem kategori apa pun yang mereka inginkan.

Jika Anda ingin memiliki konfigurasi global, Anda dapat mendaftarkannya di dalam panggilan balik dan menggunakan data meta khusus untuk mengonfigurasi kategori/subkategori mana yang ingin Anda daftarkan cerita.

categories: [
  {
    "Atoms": [
      {
        "Buttons": []
      }
    ],
  }, {
    "Molecules": [],
}];

function setCategory({ meta }) {
  const { categroyPath } = meta; // maybe a dot path string like "Atoms.Buttons" ?
  const category = categroyPath.split('.'); // [ "Atoms", "Buttons" ]
  return validatePath(category, categories); // categories["Atoms"]["Buttons"] is a valid path
}

Jika Anda ingin mengatur struktur kategori berdasarkan struktur file, Anda memiliki info jalur untuk melakukannya.

function setCategory({ storyPath }) {
  // for story path `src/components/Atoms/MyComponent.story.js`
  let folders =storyPath.split('/'); // [ "src", "components", "Atoms", "MyComponent.story.js" ];
  folders = without(folders, 'src'); // ["components", "Atoms", "MyComponent.story.js" ];
  folders.pop(); // [ "components", "Atoms" ]
  return folders;
}

Jika Anda hanya ingin menggunakan nama kategori sederhana, Anda bisa menggunakannya! (Dan mungkin kategori dapat mengambil salah satu dari string sederhana, larik yang menjelaskan jalur kategori atau panggilan balik yang mengembalikan jalur kategori).

Sekarang langit adalah batasnya!

pada catatan yang sama, untuk menentukan urutan pengurutan, saya menyarankan fungsi addCategorySort yang dapat Anda daftarkan yang mengambil struktur kategori pohon yang dihasilkan dengan memuat semua cerita dan mengurutkannya.

import { configure, addCategorySort } from "@kadira/storybook";

addCategorySort( categories => /* sort logic here */ );

configure(loadStories, module);

@travi Saya tidak mempertimbangkan perlunya kategori dengan nama duplikat, tetapi saya setuju bahwa itu penting. Adakah pemikiran tentang solusi? Inilah yang muncul di benak saya, tetapi mungkin ada solusi yang lebih baik:

const storyData = {
  categories: ["Buttons"],  // any category with the title "buttons"
}

const storyData = {
  categories: ["Atoms.Buttons"],  // any category with the title "buttons" that also has the parent category "atoms"
}

@theinterned Saya menggali pendekatannya, tetapi khawatir itu mungkin membuat segalanya lebih sulit/kurang intuitif untuk pengguna biasa (yang membutuhkan/menginginkan sesuatu yang berfungsi dengan baik di luar kotak) untuk kepentingan pengguna yang kuat (yang menginginkan sesuatu yang berfungsi sempurna dengan sedikit usaha).

@jackmccloy ya ... Saya setuju bahwa mengimplementasikan suatu fungsi seharusnya tidak menjadi persyaratan bagi semua orang. Tetapi tampaknya ada sejumlah kasus penggunaan berbeda yang ingin didukung oleh orang-orang, sehingga sistem panggilan balik tampaknya menjadi cara yang bagus untuk memberikan ekstensibilitas bagi setiap orang untuk menyesuaikan kasus penggunaan mereka sendiri.

Untuk meredakan kekhawatiran bahwa itu membuat "jalur bahagia" lebih sulit, saya merekomendasikan hal berikut:

1. Biarkan storydData.category menerima string dalam hal ini kategori akan menjadi kategori tingkat atas.
2. Biarkan storydData.category menerima array di mana elemen-elemen dalam array adalah jalur ke kategori:

// given
storydData.category = ["grand parent", "parent", "story category"];
// category tree would look like:
categories = {
  "grand parent": {
    "parent": {
      "story category": /* the story lives here */
    }
  }
};

1. Biarkan data cerita menerima fungsi seperti yang dijelaskan di atas (https://github.com/storybooks/react-storybook/issues/151#issuecomment-292689536).
2. Kami sebenarnya dapat menulis beberapa penangan kategori yang mencakup beberapa kasus penggunaan umum yang kami miliki di sini (Desain atom, berbasis folder ...);

Demikian pula untuk penyortiran, kami dapat mendukung strategi default (alpha tidak diragukan lagi) secara default dan jika diperlukan, kami dapat menyediakan strategi pengurutan pra-bangun lainnya (pengurutan berdasarkan bentuk objek, pengurutan indeks dalam data meta, dll ...);

@ndelangen apa yang Anda lihat sebagai jalan ke depan dalam hal ini? Apakah ada yang mengerjakannya? Jika tidak, senang untuk mencobanya selama akhir pekan

Ketika saya mendapat pemberitahuan bahwa pekerjaan telah dimulai oleh siapa saja dan solusi mereka layak, saya menghapus label PR needed . Jadi, ini saat ini ada di peta jalan, tetapi belum ada pekerjaan yang dilakukan.

Jika Anda ingin memulainya, itu akan sangat disambut!

@jackmccloy bolehkah saya bergabung dan berpartisipasi dalam pekerjaan ini juga jika Anda tidak keberatan?

@UsulPro 100%, saya akan senang tentang itu. Berencana untuk mulai melihatnya secara nyata pada hari Minggu sore (waktu NYC). Jika Anda akan online pada saat yang sama, lmk dan kita bisa mengalihkan pembicaraan ke slack. Kalau tidak, saya akan memposting di sini dengan beberapa pemikiran setelah saya menggali sedikit

@jackmccloy @usulpro Saya pasti tertarik untuk mengerjakan ini juga.

@theinterned Itu akan sangat bagus! Menghubungkan dalam kendur?

@UsulPro maaf — flu perut parah melanda rumah tangga saya.

Saya punya hari hack datang di tempat kerja pada hari Jumat dan saya berencana untuk mengerjakan ini kemudian. Apakah Anda memiliki kesempatan untuk memulai? Saya akan dengan senang hati melakukan sinkronisasi di Slack. Saya di saluran SB.

Jika Anda hanya membutuhkan satu level nesting, React Storybook Addon Chapters mungkin sesuai dengan kebutuhan Anda.

Saya telah merilis versi pertama dari implementasi hierarki cerita @igor-dv yang sangat baik dan ingin mendapatkan umpan balik Anda tentang alfa sehingga kami dapat membuatnya lebih baik sebelum merilis ke komunitas yang lebih luas:

https://Gist.github.com/shilman/947a3d1d4cfdf5c3a8bb06d3d4eb84cf

@ 1i1it @andrubot @arunoda @atnovember @danielbartsch @franzihubrick @hadfieldn @iaanvn @imsnif @isuvorov @jackmccloy @joeruello @johnnyghost @lnmunhoz @majapw @markopavlovic @mystetskyivlad @mzedeler @ndelangen @nirhart @ noahprince22 @revolunet @sethkinast @theinterned @thesisb @travi @usulpro @yangshun @zeroasterisk @zvictor

Hanya kekhasan kecil yang saya perhatikan dengan hierarki cerita:
Tergantung pada apakah sebuah direktori memiliki subdirektori mengubah hasil dari mengklik sebuah direktori.
Jika ada subdir folder akan diperluas, tetapi jika turun di tingkat cerita, cerita akan dipilih secara otomatis.
Seorang pengguna mungkin ingin melihat isi dir tanpa memilih cerita di dalamnya.

Memperbarui:

Mungkin terkait dengan masalah ini di react-treebeard
https://github.com/alexcurtis/react-treebeard/issues/33
Mungkin ada baiknya menjelajahi PR di sana untuk repo storybooks/react-treebeard

Dalam implementasi sebelumnya ketika memilih kind cerita pertamanya dipilih secara otomatis. Jadi fungsi ini ingin saya pertahankan. Tapi mungkin dengan hierarki itu sudah terlihat seperti bug.

Dalam gambar Component 5 bukan direktori - ini adalah kind .

Sebenarnya saya juga tidak suka dengan perilaku ini...

Nama cerita panjang membungkus dengan aneh

Mengubah ukuran bilah sisi menjadi sangat kecil menyebabkan panel pratinjau meluap ke dalamnya.

apakah mungkin untuk menggabungkan folder hierarki dengan masing-masing cerita? Saya memiliki beberapa cerita yang saya inginkan di tingkat atas, jika tidak, saya memiliki folder dengan satu item

Saat ini jika Anda melakukan ini

storiesOf('Something', module).add('top story');
storiesOf('Something.Chapter', module).add('substory');

Kemudian ia membuat 2 entri untuk 'Sesuatu', satu dengan folder dan satu lagi dengan item

@TheSisb , terima kasih, akan diperbaiki dalam rilis resmi.

@psimyn , dalam implementasi saat ini tidak mungkin .. tetapi mungkin berubah .. @UsulPro menyebutkan ini di PR awal juga.
IMO ini bukan perilaku yang baik (dan membawa lebih banyak kerumitan). Membandingkannya dengan setiap IDE, ada ruang nama (dir/folder/paket) dan bisa jadi beberapa item di ruang nama tersebut (atau di dekatnya) dengan nama yang sama..
Bagaimanapun, jika ini adalah perilaku yang diinginkan komunitas, itu harus diubah, tetapi saya tidak ingin itu menjadi penghalang untuk rilis =)

Ini adalah solusi tepat yang saya butuhkan !!! terima kasih +1

@psimyn Silakan buka masalah baru yang menjelaskan fitur? Masalah ini akan segera ditutup dengan rilis 3.2.0

apakah memiliki beberapa tingkat bersarang sekarang mungkin dengan format CSF baru?

@gaurav5430 sudah mungkin untuk beberapa waktu, lihat contoh kami di sini:

CSF:

import React from 'react';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '@storybook/react/demo';

export default {
  title: 'Other/Demo/Welcome',
  component: Welcome,
};

export const ToStorybook = () => <Welcome showApp={linkTo('Other/Demo/Button')} />;
ToStorybook.storyName = 'to Storybook';

Hai @ndelangen
Terima kasih saya mendapatkannya dari sini: https://storybook.js.org/docs/basics/writing-stories/#story -hierarchy

Saya pikir yang saya inginkan adalah kemampuan untuk membuat sub-folder berdasarkan story.name dan bukan hanya judul ekspor default

export default {
  title: 'Other/Demo/Welcome',
  component: Welcome,
};

export const ToStorybook = () => <Welcome showApp={linkTo('Other/Demo/Button')} />;
ToStorybook.story = { name: 'to/Storybook' };

akan muncul sebagai Other/Demo/Welcome/To/Storybook

Saya pikir solusi untuk masalah di atas adalah membuat beberapa file cerita dan mengekspor default dengan hierarki yang benar di masing-masing file.

seperti di one.stories.js :

export default {
  title: 'Other/Demo/Welcome/One',
  component: Welcome,
};

export const ToStorybookOne = () => <Welcome showApp={linkTo('Other/Demo/Button')} />;

dan di two.stories.js

export default {
  title: 'Other/Demo/Welcome/Two',
  component: Welcome,
};

export const ToStorybookTwo = () => <Welcome showApp={linkTo('Other/Demo/Button')} />;

Dengan begitu, kedua cerita akan muncul seperti yang diharapkan dalam struktur folder buku cerita

@ gaurav5430 itulah penggunaan yang disarankan, dan bukan solusi. 😄

@ gaurav5430 itulah penggunaan yang disarankan, dan bukan solusi. 😄

Ya, saya hanya ragu untuk melakukannya karena kedua file ini untuk status berbeda dari komponen yang sama. Dalam kasus saya, komponen memiliki 2 status utama dan beberapa sub status berdasarkan 2 status utama tersebut. Biasanya saya akan menyimpan semua status komponen dalam file yang sama, tetapi dalam kasus ini saya perlu memiliki file terpisah untuk hierarki dalam cerita.