►
From YouTube: Migrate component examples to CSF
Description
A walkthrough of converting Storybook examples to the CSF format in support of https://gitlab.com/groups/gitlab-org/-/epics/5651.
B
A
B
A
B
B
B
B
So
that
range
speaker
has
a
lot
of
properties
that
could
be
custom
customized
and
we
can
make
them
control
so
that
user
you
can
set.
I
don't
know,
for
instance,
in
seats
in
the
selection
and
the
date
picker
will
will
allow
the
same
date,
selection
or,
if
you
set
it
false,
it
won't
allow
the
same
date.
Selection
as
this
is
as
you
see
here
so
the
popover
has
doesn't
have
many
customization
properties.
It
wouldn't
be
interesting,
as
as
an
example,
I
think,
let's
try
do
doing
top
doing
the
tops.
B
B
B
B
B
So
here's
the
example
of
how
the
previous
story
format
is
converted
to
the
current
story,
to
the
current
story,
format
and
we'll
try
like
to
to
do
this.
We
want
to
remove
the
this
part,
just
will
comment
it
and
so
that
we
can
reference
some
of
those
just
solutions.
Why
we,
why
we
called
so
what
I
usually
do.
I
just
copy
this
part,
certainly
with
all
the
comments
and.
B
A
B
C
B
B
So
we
added
here:
okay:
here
we
have
the
basic
tops,
template
and
okay,
it
imported,
for
we
have
already
the
components,
imported
jail,
tops
and
gel.
But
here,
as
we
are
creating
the
new
component,
we
have
to
register
those
like.
We
have
to
register
those
components
here
in
this
components:
okay,
object,
gel
thoughts
and
and
it's
the
basic
case
will
come
to
more
difficult
cases
later,
so
we
registered
the
tabs
and
we
have
a
basic
template
and
we
don't
need
this
for
now.
B
B
B
B
B
B
B
B
B
B
B
A
B
B
A
B
But
as
you
can
see
here,
it
doesn't
like
it
doesn't
actually
work.
So
the
storybook
picked
this
property
from
the
component
implementation
from
the
company.
The
component
description
that
is
like
here.
So
here's
the
implementation
of
the
top
view,
and
here
is
the
justified
property,
and
it
knows
that.
A
B
Boolean,
so
that
is
why
it
makes
it
like
nice
toggle.
So
we
had
nothing
to
do
like
too
much
to
make
it
available.
It
just
made
it
made
it
for
us,
but
here
we
have
our
stories,
and
here
we
have
the
template
and
so
that
our
component
knows
about
the
justified
about
this
justified
property.
We
not.
We
need
to
provide
it
for
freight,
so
we
just
say
justified,
and
we
say
that
it
is.
B
It
will
have
the
value
okay
I'll
copy,
so
that
not
too
much
like
the
value
of
justified
and
where
this
value
is
coming
from
here
is
the
function
generate
props,
which
we
will
use
to
provide
different
sets
of
the
properties
to
each
to
each
story.
Okay,
so,
but
we
also
have
the
see
what
was
the
okay
justified?
B
Okay,
I'll
copy
it
I'll,
just
mistype?
If
I
do
it
quickly
justify
it,
and
I
don't
know
we
made
it
default
value,
for
instance
2,
and
we
return
it
here,
I'm
not
sure
how
familiar
you
are
with
the
javascript,
but
it's
just
like
function
in
a
javascript
that
accepts
the
object
and
it
does
it.
It's
the
structuring
and
the
translator,
whatever
it
wants
to
it.
It
may
look
like
tricky,
but
it
is
not
actually
so.
C
B
B
Yes,
and
as
you
see
here,
there
is
also
these
url
parameters
that
is
updated.
Okay,
let's
try.
Switching
it
also
see
the
tops
are
changing,
so
it's
true
false,
true
and
false,
and
well
that's
that's
great,
and
actually
also
great
that
you
could
share
the
I
don't
know
you
could
share
it
with
someone
the
state
of
the
component,
so,
for
example,.
C
B
B
Possibilities
we
could
provide
for
the
same
property,
so
our
sims
could
be
indigo,
blue,
green,
red.
Okay,
let's
make
the
default
seam
as
in
I
don't
know.
Okay,
let's
make
it
blue,
so
it's
visible
because
it
is
I'm
not
sure.
No,
it's
not
already
indigo.
It's
something
different.
I
know
it's,
it
is
in
degreasing,
so
let's
make
it
blue
so
that
just
it
is
we'll
make
it
right
then,
but
just
first
for
the
sake
of
the.
A
B
A
B
B
A
B
So
we
say
here
is
archetypes
and
our
archetype
is
seen
it's
the
name
of
the
property.
Actually,
so
we
say
it's
same
and
says
that
customize
its
control
and
it
says
that
it
has
the
type
select
and,
like
so
far
for
me
it
was
the
it
it
can
be.
Also
a
color
speaker,
I
think
they'd
figure,
some
some
those
type
of
controls,
for
instance,
if
I
remember
correctly,
okay,
I
want
to
move
this.
B
C
B
A
A
B
B
Okay,
that's
okay!
That's
about
the
javascript!
So
here
you
see
it
gets
the
arguments
and
sets
all
the
props
on
the
component
to
the
object
keys
of
those
arguments,
and
here
we
say
that
the
assigned
to
the
arks,
whatever
this
generate
probes
return,
and
this
generate
probes
returns
this
this
object
and
it
destructures
it
here
and
here
is
the
default
value.
So
same
default
is
blue.
If
we
change
it
to
indigo,
we
make
it.
B
B
B
B
B
B
B
So
here
you
see,
we
have
the
default
default
story
and
we
can
write
red,
justify
thoughts
and
say
my
credit
and
with
those
generate
props,
you
can
generate
like
different
different
combinations
of
stories.
If
you
want
to
make
a
separate
story
of
it,
but
they
usually
don't
make
them
like
separate
stories
because
actually
red
justified
tops
can
be
covered
by
the
default
story.
Just
just
changing.
A
C
A
A
B
B
A
A
A
B
B
C
B
A
B
B
B
B
B
B
B
B
B
B
B
And
we'll
set
it
on
the
component
instance
and
then
the
value
of
this
provider
parameter
will
be
set
on
the
has
batch
and
will
reflect
once
a
gel
batch
is
rendered
or
not,
but
I
will
have
to
validate
whether
it
works
and
objects
and
we
make
the
default
value
for
it
false.
So
the
badge
is
not
rendered.
A
B
Necessarily
I
mean
it
could
be
a
property,
but
then,
for
instance,
you
could
provide
property
here
as
it
has
batch,
but
then
what
kind
of
batch
it
has
right.
So
if
you
provide
the
three
as
the
the
slot,
so
user
has
the
control
what
kind
of
badge
he
wants
to
he
wants
to
render
like
small
badge.
What's
the
class
thread
to
the
badge?
B
B
A
B
B
B
But
the
idea
is
that
if
we
write
some
fancy
photo,
which
I
tried
to
do
this,
we
by
eve
has
batched
with
some
custom
logic.
It
won't
help
the
user
because,
most
likely,
if
the
user
wants
the
the
template
with
the
badge,
he
doesn't
want
to
have
any
conditions
right.
He
just
wants
to
go
to
copy
it
and
make
it
very
straightforward.
So
that
is
why
it's
good
to
have
a
separate
example,
separate
template,
which
is
very
linear
and
straightforward
without
any
like
extra
conditions.
B
B
B
A
A
B
Just
following
the
steps,
no,
you
know
no
creative
work
and
maintains
arrays.
Are
that
you?
That
story
does
a
lot
by
default,
that
you
redefine
controls
to
make
it
more
convenient
for
the
user
and
move
to
the
examples
whatever
cannot
be
defined
here,
but
whatever
behavior
cannot
be
implemented
with
the
controls.