glide-design-system/src/stories/Configure.mdx

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

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

import Github from "./assets/github.svg";
import Discord from "./assets/discord.svg";
import Youtube from "./assets/youtube.svg";
import Tutorials from "./assets/tutorials.svg";
import Styling from "./assets/styling.png";
import Context from "./assets/context.png";
import Assets from "./assets/assets.png";
import Docs from "./assets/docs.png";
import Share from "./assets/share.png";
import FigmaPlugin from "./assets/figma-plugin.png";
import Testing from "./assets/testing.png";
import Accessibility from "./assets/accessibility.png";
import Theming from "./assets/theming.png";
import AddonLibrary from "./assets/addon-library.png";

export const RightArrow = () => (
  <svg
    viewBox="0 0 14 14"
    width="8px"
    height="20px"
    style={{
      marginLeft: "4px",
      display: "inline-block",
      shapeRendering: "inherit",
      verticalAlign: "middle",
      fill: "currentColor",
      "path fill": "currentColor",
    }}
  >
    <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
  </svg>
);

<Meta title="What's New" />

{" "}

<div class="whats-new">
  <h2>What's New</h2>
  <ul>
    <li>
      <strong>Latest Version:</strong> 1.9.0
    </li>
    <li>
      <strong>New Components Added:</strong> We have expanded our library to
      include over 30+ versatile components.
    </li>
    <li>
      <strong>NPM Link:</strong>{" "}
      <a href="https://www.npmjs.com/package/glide-design-system" class="npm-link">
        Glide Design System
      </a>
    </li>
  </ul>

{" "}

<h3>Overview of the Latest Release</h3>
<p>
  We are excited to announce the release of version 1.9.0, which brings a host
  of new features and improvements to our component library. This update
  significantly enhances the toolkit available to developers, providing more
  flexibility and power in building React applications.
</p>

{" "}

<h3>New Components and Enhancements</h3>
<p>
  With this release, we have added a wide range of new components, bringing the
  total to over 30+ customizable and reusable components. These components are
  designed to seamlessly integrate into your projects, helping you to develop
  robust and scalable React applications efficiently.
</p>
<p>
  Our new components cover various use cases, from basic UI elements to complex
  interactive components. Each component is crafted with attention to detail,
  ensuring high performance, accessibility, and ease of use.
</p>

{" "}

<h3>Develop React Projects with Ease</h3>
<p>
  Our component library is engineered to simplify the development process,
  allowing you to focus on building amazing user experiences. Whether you're
  working on a small personal project or a large enterprise application, our
  components can help you achieve your goals faster and with higher quality.
</p>
<p>
  All components come with comprehensive documentation, example usages, and
  customizable properties, making it straightforward to integrate them into your
  project. Additionally, the components are built with modern web standards and
  best practices, ensuring compatibility and future-proofing your codebase.
</p>

{" "}

<h3>Get Started Now</h3>
<p>
  To start using our latest version and explore the new components, visit our
  NPM page and follow the installation instructions. Stay tuned for more updates
  and enhancements as we continue to improve and expand our library based on
  your feedback and evolving needs.
</p>
<p>
  <strong>NPM Link:</strong>{" "}
  <a href="https://www.npmjs.com/package/glide-design-system" class="npm-link">
    Glide Design System
  </a>
</p>

<h3>Components</h3>

<div className="components-container">

<div className="component-list">
  <ul>
    <li>Accordion</li>
    <li>Address</li>
    <li>Avatar</li>
    <li>Backdrop</li>
    <li>Badge</li>
    <li>Breadcrumbs</li>
    <li>Button</li>
    <li>Card</li>
  </ul>
</div>

<div className="component-list">
  <ul>
    <li>Checkbox</li>
    <li>Checkbox Group</li>
    <li>Chip</li>
    <li>DatePicker</li>
    <li>Divider</li>
    <li>Drawer</li>
    <li>Email</li>
    <li>FullName</li>
  </ul>
</div>

<div className="component-list">
  <ul>
    <li>Icon Button</li>
    <li>Progress Circle</li>
    <li>Menu</li>
    <li>MenuItem</li>
    <li>Modal</li>
    <li>Multi-Select</li>
    <li>Navbar Layout</li>
    <li>Number</li>
  </ul>
</div>

<div className="component-list">
  <ul>
    <li>Pagination</li>
    <li>Phone Number Input</li>
    <li>Radio Button</li>
    <li>Select</li>
    <li>Skeleton</li>
    <li>Slider</li>
    <li>Snackbar</li>
    <li>Speed Dial</li>
  </ul>
</div>

<div className="component-list">
  <ul>
    <li>Stepper</li>
    <li>Table</li>
    <li>Tab</li>
    <li>Text</li>
    <li>TextField</li>
    <li>Time picker</li>
    <li>Tooltip</li>
  </ul>
</div>

</div>

{" "}

<div class="example-section">
  <div class="example-title">Example Usage</div>
  <div class="code-block">
    <code>
      <div>import * as React from "react";</div>
      <div> import Button from "glide-design-system";</div>
      <br />
      <div>function App()</div>
      <div>
        return &lt;Button variant='outlined' color='primary'&gt;Hello
        world&lt;/Button&gt;;
      </div>
      <div>export default App;</div>
    </code>
  </div>
</div>

</div>

<style>
  {`
  .sb-container {
    margin-bottom: 48px;
  }

.sb-section {
width: 100%;
display: flex;
flex-direction: row;
gap: 20px;
}

img {
object-fit: cover;
}

.sb-section-title {
margin-bottom: 32px;
}

.sb-section a:not(h1 a, h2 a, h3 a) {
font-size: 14px;
}

.sb-section-item, .sb-grid-item {
flex: 1;
display: flex;
flex-direction: column;
}

.components-container{
  display: flex;
  justify-content: space-around;
}

.component-list{
  flex-basis: 45% ;
}

.sb-section-item-heading {
padding-top: 20px !important;
padding-bottom: 5px !important;
margin: 0 !important;
}
.sb-section-item-paragraph {
margin: 0;
padding-bottom: 10px;
}

.sb-chevron {
margin-left: 5px;
}

.sb-features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 32px 20px;
}

.sb-socials {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

.sb-socials p {
margin-bottom: 10px;
}

.sb-explore-image {
max-height: 32px;
align-self: flex-start;
}

.sb-addon {
width: 100%;
display: flex;
align-items: center;
position: relative;
background-color: #EEF3F8;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.05);
background: #EEF3F8;
height: 180px;
margin-bottom: 48px;
overflow: hidden;
}

.sb-addon-text {
padding-left: 48px;
max-width: 240px;
}

.sb-addon-text h4 {
padding-top: 0px;
}

.sb-addon-img {
position: absolute;
left: 345px;
top: 0;
height: 100%;
width: 200%;
overflow: hidden;
}

.sb-addon-img img {
width: 650px;
transform: rotate(-15deg);
margin-left: 40px;
margin-top: -72px;
box-shadow: 0 0 1px rgba(255, 255, 255, 0);
backface-visibility: hidden;
}

 .whats-new {
      border: 1px solid #ddd;
      padding: 20px;
      border-radius: 8px;
      background-color: #f9f9f9;
    }
    .whats-new h2 {
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
    }
    .whats-new ul {
      list-style: none;
      padding: 0;
    }
    .whats-new ul li {
      margin: 10px 0;
    }
    .whats-new p {
      margin-top: 10px;
    }
    .npm-link {
      color: #007bff;
      text-decoration: none;
    }
    .npm-link:hover {
      text-decoration: underline;
    }

     .example-section {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      background-color: #fff;
    }
    .example-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .code-block {
      background-color: #f0f0f0;
      padding: 10px;
      border-radius: 4px;
      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    }

    

@media screen and (max-width: 800px) {
.sb-addon-img {
left: 300px;
}
}

@media screen and (max-width: 600px) {
.sb-section {
flex-direction: column;
}

    .sb-features-grid {
      grid-template-columns: repeat(1, 1fr);
    }

    .sb-socials {
      grid-template-columns: repeat(2, 1fr);
    }

    .sb-addon {
      height: 280px;
      align-items: flex-start;
      padding-top: 32px;
      overflow: hidden;
    }

    .sb-addon-text {
      padding-left: 24px;
    }

    .sb-addon-img {
      right: 0;
      left: 0;
      top: 130px;
      bottom: 0;
      overflow: hidden;
      height: auto;
      width: 124%;
    }

    .sb-addon-img img {
      width: 1200px;
      transform: rotate(-12deg);
      margin-left: 0;
      margin-top: 48px;
      margin-bottom: -40px;
      margin-left: -24px;
    }

}
`}
</style>