Skip to content

Commit

Permalink
docs: [storybook-and-readme] related #336 wip
Browse files Browse the repository at this point in the history
  • Loading branch information
mattgoud committed Jun 5, 2024
1 parent bcdbd24 commit af8bad5
Show file tree
Hide file tree
Showing 14 changed files with 332 additions and 148 deletions.
13 changes: 6 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

Puik is a component library that aims to provide a complete set of reusable components based on the PrestaShop Design System for all the PrestaShop ecosystem.

🚧 Please note that version 2 of this project is still in beta. There are significant changes from version 1 to version 2. For more informations, please refer to the [release-notes-v2](./RELEASE-NOTES-V2.md)
🚧 Please note there are significant changes from version 1 to version 2. For more informations, please refer to the [release-notes-v2](RELEASE-NOTES-V2.md)

## Contributing

Expand All @@ -29,12 +29,11 @@ Please make sure to read the Contributing Guide before making a pull request.

This monorepo contains the following libraries:

- [@prestashopcorp/puik-components](https://www.npmjs.com/package/@prestashopcorp/puik-components) a Vue 3 component library
- [@prestashopcorp/puik-web-components](https://www.npmjs.com/package/@prestashopcorp/puik-web-components) a Web component library
- [@prestashopcorp/puik-resolver](https://www.npmjs.com/package/@prestashopcorp/puik-resolver) a component resolver for our Vue 3 component library
- [@prestashopcorp/puik-theme](https://www.npmjs.com/package/@prestashopcorp/puik-theme) a CSS library containing all the classes used in our components
- [@prestashopcorp/puik-tailwind-preset](https://www.npmjs.com/package/@prestashopcorp/puik-tailwind-preset) a Tailwind Css preset that contains all the design tokens used to create the components
- [@prestashopcorp/puik](https://www.npmjs.com/package/@prestashopcorp/puik) a library containing all the other libraries
- [@prestashopcorp/puik-components](packages/components/README.md) a Vue 3 components library
- [@prestashopcorp/puik-web-components](packages/web-components/README.md) a Web components library
- [@prestashopcorp/puik-resolver](packages/resolver/README.md) a component resolver for our Vue 3 component library
- [@prestashopcorp/puik-theme](packages/theme/README.md) a CSS library containing all the classes used in our components
- [@prestashopcorp/puik-tailwind-preset](packages/tailwind-preset/README.md) a Tailwind Css preset that contains all the design tokens used to create the components

## Installation

Expand Down
2 changes: 1 addition & 1 deletion RELEASE.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# How to release

To release new versions of our package we use a Github action that triggers on the creation of a new Github release
To release new versions of our package we use a Github action that triggers on the creation of a new Github release
As we use [pnpm](https://pnpm.io/) to manage our monorepo the `pnpm publish` command is used in this Github action and will release all the packages not flagged with the `private` property in the `package.json`
The released packages are:

Expand Down
1 change: 1 addition & 0 deletions docs/assets/img/tailwind-css.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions docs/assets/img/web-components.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 21 additions & 5 deletions docs/stories/docs/Css.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,39 @@ import { Meta } from '@storybook/blocks'

<Meta title="Docs/CSS Components" />

# Css Components
# CSS Components

Puik Theme is a Css library that contains all the CSS classes used to create the Vue Components.
If you don't use VueJS for your application, you can use the CSS only version of our components. It includes all the
styles used in the VueJs component library.

## Usage
## Installation

Install the `@prestashopcorp/puik-theme` package and import the css files you need

```shell
# NPM
$ npm install @prestashopcorp/puik-theme --save

# Yarn
$ yarn add @prestashopcorp/puik-theme

1. Include the CSS in your HTML
# pnpm
$ pnpm install @prestashopcorp/puik-theme
```

Or include the CSS in your HTML by using the CDN

```html
<link
rel="stylesheet"
href="https://unpkg.com/@prestashopcorp/puik/dist/index.css"
href="https://unpkg.com/@prestashopcorp/puik-theme/dist/index.css"
/>
```

2. Add the classes in your HTML
## Usage

Once the CSS styles are loaded using the CDN or by importing the library, you can start using all the classes prefixed by `puik-`

```html
<button class="puik-button puik-button--primary">Example button</button>
Expand Down
44 changes: 37 additions & 7 deletions docs/stories/docs/Introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { Meta } from '@storybook/blocks'
import { linkTo } from '@storybook/addon-links'
import VueJsLogo from '../../assets/img/Vue.js_Logo.png'
import CssLogo from '../../assets/img/css.svg'
import WebComponentsLogo from '../../assets/img/web-components.svg'
import TailwindCssLogo from '../../assets/img/tailwind-css.svg'
import Repo from '../../assets/img/repo.svg'
import GitHubLogo from '../../assets/img/GitHub-Mark-64px.png'
import FigmaLogo from '../../assets/img/Figma-Icon.svg'
Expand Down Expand Up @@ -68,9 +70,17 @@ import FigmaLogo from '../../assets/img/Figma-Icon.svg'

# Puik

Puik is a component library that aims to provide a complete set of reusable components based on the PrestaShop Design System for all the PrestaShop ecosystem.
<div className="subheading">About The Project</div>

This library provides two ways of using the design system in your project, the first one is by using the VueJs components and the second one by using the css classes from the theme
Puik is a library that aims to provide a complete set of reusable components based on the PrestaShop Design System for all the PrestaShop ecosystem. This project includes the following packages:

- [@prestashopcorp/puik-components](https://www.npmjs.com/package/@prestashopcorp/puik-components) a Vue 3 components library
- [@prestashopcorp/puik-web-components](https://www.npmjs.com/package/@prestashopcorp/puik-web-components) a Web components library
- [@prestashopcorp/puik-resolver](https://www.npmjs.com/package/@prestashopcorp/puik-resolver) a component resolver for our Vue 3 component library
- [@prestashopcorp/puik-theme](https://www.npmjs.com/package/@prestashopcorp/puik-theme) a CSS library containing all the classes used in our components
- [@prestashopcorp/puik-tailwind-preset](https://www.npmjs.com/package/@prestashopcorp/puik-tailwind-preset) a Tailwind Css preset that contains all the design tokens used to create the components

This library provides three ways of using the design system in your project by using the VueJs components, the css classes from the theme or by using Web components.

<div className="subheading">Getting Started</div>

Expand All @@ -79,18 +89,38 @@ This library provides two ways of using the design system in your project, the f
<img src={VueJsLogo} alt="VueJs Components" />

<span>
<strong>Setup For VueJS</strong>
Setup the library for a usage with VueJs
<strong>Setup for VueJS</strong>
Setup the Puik Components library
</span>

</div>

<div className="link-item cursor-pointer" onClick={linkTo('Docs/VueJs Components')}>
<div className="link-item cursor-pointer" onClick={linkTo('Docs/CSS Components')}>
<img src={CssLogo} alt="Css Components" />

<span>
<strong>Setup for other language/framework</strong>
Setup the library with another language or framework
<strong>Setup for CSS components</strong>
Setup the Puik Theme library (CSS components)
</span>

</div>

<div className="link-item cursor-pointer" onClick={linkTo('Docs/Web Components')}>
<img src={WebComponentsLogo} alt="Web Components" />

<span>
<strong>Setup for WebComponents</strong>
Setup the Puik Web Components library
</span>

</div>

<div className="link-item cursor-pointer" onClick={linkTo('Docs/Tailwind CSS Preset')}>
<img src={TailwindCssLogo} alt="Web Components" />

<span>
<strong>Setup for Tailwind CSS</strong>
Setup the Puik Tailwind Preset library
</span>

</div>
Expand Down
Loading

0 comments on commit af8bad5

Please sign in to comment.