{/* prettier-ignore */}
{/*
Copyright 2023 Comcast Cable Communications Management, LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

SPDX-License-Identifier: Apache-2.0
\*/}

import { Meta } from '@storybook/blocks';

<Meta title="Docs/Introduction" />

# Introduction

The components in this UI Library are built on [LightningJS](https://github.com/rdkcentral/Lightning). They can be imported and used within an existing LightningJS application. For more information on the LightningJS framework see the [framework docs](https://rdkcentral.github.io/Lightning/docs/introduction/introduction).

## Using Storybook

[Storybook](https://storybook.js.org/) is an open-source framework for sharing UI Component libraries. It allows us to develop, test, and review components in an isolated environment. It acts as living documentation, both for the designers and the engineers utilizing the components in their applications.

Each component is listed along the left hand menu. When viewing a component, we're presented with two tabs - Canvas and Docs.

In **The Canvas** we can see how the component stands in isolation as well as adjust various aspects of it via the `controls` panel. These controls allow us to change the parameters of the component and see how it will look in different states, such as either focused or unfocused.

With **The Docs** panel, we can read through the use case for the component, see how it is implemented in code, view some examples, and see a table of its configurable properties and styles.

For information on leveraging `lightning-ui-components` in your application, check out the [README.md](../?path=/story/docs-read-me--page).

NOTE: Most images used within these stories are pulled from [The Movie Database](https://www.themoviedb.org/).
